author | Daisuke Akatsuka <dakatsuka@mozilla.com> |
Thu, 26 Jul 2018 17:53:11 +0900 | |
changeset 822892 | 5ace67533bea4e333b397b3a9d2bdfa27e45e17c |
parent 822891 | a1c75868748a98e6391f74763fb7203e7596e20e |
child 822893 | 4271303a7c59f05a0f9269aec3ee4d6a48e2bfe0 |
push id | 117509 |
push user | bmo:dakatsuka@mozilla.com |
push date | Thu, 26 Jul 2018 08:57:32 +0000 |
reviewers | jdescottes, ladybenko |
bugs | 1471795 |
milestone | 63.0a1 |
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css +++ b/devtools/client/aboutdebugging-new/aboutdebugging.css @@ -1,10 +1,18 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @import "resource://devtools/client/aboutdebugging-new/src/components/App.css"; +@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimesPane.css"; +@import "resource://devtools/client/aboutdebugging-new/src/components/runtime/RuntimeItem.css"; html, body { margin: 0; padding: 0; } + +ul { + list-style: none; + margin: 0; + padding: 0; +}
--- a/devtools/client/aboutdebugging-new/src/components/App.css +++ b/devtools/client/aboutdebugging-new/src/components/App.css @@ -1,8 +1,10 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ .app { + font-size: 15px; height: 100vh; + overflow: hidden; width: 100vw; }
--- a/devtools/client/aboutdebugging-new/src/components/App.js +++ b/devtools/client/aboutdebugging-new/src/components/App.js @@ -1,29 +1,34 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ "use strict"; -const { PureComponent } = require("devtools/client/shared/vendor/react"); +const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react"); const dom = require("devtools/client/shared/vendor/react-dom-factories"); const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); const ThisFirefox = require("../runtimes/this-firefox"); +const RuntimesPane = createFactory(require("./RuntimesPane")); + class App extends PureComponent { static get propTypes() { return { thisFirefox: PropTypes.instanceOf(ThisFirefox).isRequired, }; } render() { + const { thisFirefox } = this.props; + return dom.div( { className: "app", }, + RuntimesPane({ thisFirefox }) ); } } module.exports = App;
new file mode 100644 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/RuntimesPane.css @@ -0,0 +1,8 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.runtimes-pane { + margin-block-start: 70px; + width: 240px; +}
new file mode 100644 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/RuntimesPane.js @@ -0,0 +1,40 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react"); +const dom = require("devtools/client/shared/vendor/react-dom-factories"); +const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); + +const ThisFirefox = require("../runtimes/this-firefox"); + +const RuntimeItem = createFactory(require("./runtime/RuntimeItem")); + +class RuntimesPane extends PureComponent { + static get propTypes() { + return { + thisFirefox: PropTypes.instanceOf(ThisFirefox).isRequired, + }; + } + + render() { + const { thisFirefox } = this.props; + + return dom.section( + { + className: "runtimes-pane", + }, + dom.ul( + {}, + RuntimeItem({ + icon: thisFirefox.getIcon(), + name: thisFirefox.getName(), + }) + ) + ); + } +} + +module.exports = RuntimesPane;
--- a/devtools/client/aboutdebugging-new/src/components/moz.build +++ b/devtools/client/aboutdebugging-new/src/components/moz.build @@ -1,8 +1,14 @@ # This Source Code Form is subject to the terms of the Mozilla Public # License, v. 2.0. If a copy of the MPL was not distributed with this # file, You can obtain one at http://mozilla.org/MPL/2.0/. +DIRS += [ + 'runtime', +] + DevToolsModules( 'App.css', 'App.js', + 'RuntimesPane.css', + 'RuntimesPane.js' )
new file mode 100644 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/runtime/RuntimeItem.css @@ -0,0 +1,16 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.runtime-item { + align-items: center; + display: flex; + font-size: 20px; + margin-inline-start: 24px; +} + +.runtime-item__icon { + height: 24px; + margin-inline-end: 9px; + width: 24px; +}
new file mode 100644 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/runtime/RuntimeItem.js @@ -0,0 +1,38 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { PureComponent } = require("devtools/client/shared/vendor/react"); +const dom = require("devtools/client/shared/vendor/react-dom-factories"); +const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); + +/** + * This component shows the runtime as item in RuntimesPane. + */ +class RuntimeItem extends PureComponent { + static get propTypes() { + return { + icon: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + }; + } + + render() { + const { icon, name } = this.props; + + return dom.li( + { + className: "runtime-item", + }, + dom.img({ + className: "runtime-item__icon", + src: icon, + }), + name + ); + } +} + +module.exports = RuntimeItem;
new file mode 100644 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/components/runtime/moz.build @@ -0,0 +1,8 @@ +# This Source Code Form is subject to the terms of the Mozilla Public +# License, v. 2.0. If a copy of the MPL was not distributed with this +# file, You can obtain one at http://mozilla.org/MPL/2.0/. + +DevToolsModules( + 'RuntimeItem.css', + 'RuntimeItem.js', +)
--- a/devtools/client/aboutdebugging-new/src/runtimes/runtime.js +++ b/devtools/client/aboutdebugging-new/src/runtimes/runtime.js @@ -3,11 +3,28 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ "use strict"; /** * This class represents a runtime, such as a remote Firefox. */ class Runtime { + /** + * Return icon of this runtime on sidebar. + * Subclass should override this method. + * @return {String} + */ + getIcon() { + throw new Error("Subclass of Runtime should override getIcon()"); + } + + /** + * Return name of this runtime on sidebar. + * Subclass should override this method. + * @return {String} + */ + getName() { + throw new Error("Subclass of Runtime should override getName()"); + } } module.exports = Runtime;
--- a/devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js +++ b/devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js @@ -6,11 +6,18 @@ const Runtime = require("./runtime"); /** * This class represents the Firefox instance which runs in the same environment that * opened about:debugging. */ class ThisFirefox extends Runtime { + getIcon() { + return "chrome://devtools/skin/images/firefox-logo-glyph.svg"; + } + + getName() { + return "This Firefox"; + } } module.exports = ThisFirefox;
--- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -103,16 +103,17 @@ devtools.jar: skin/toolbars.css (themes/toolbars.css) skin/toolbox.css (themes/toolbox.css) skin/tooltips.css (themes/tooltips.css) skin/images/accessibility.svg (themes/images/accessibility.svg) skin/images/add.svg (themes/images/add.svg) skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg) skin/images/filters.svg (themes/images/filters.svg) skin/images/filter-swatch.svg (themes/images/filter-swatch.svg) + skin/images/firefox-logo-glyph.svg (themes/images/firefox-logo-glyph.svg) skin/images/fox-smiling.svg (themes/images/fox-smiling.svg) skin/images/grid.svg (themes/images/grid.svg) skin/images/angle-swatch.svg (themes/images/angle-swatch.svg) skin/images/pseudo-class.svg (themes/images/pseudo-class.svg) skin/images/controls.png (themes/images/controls.png) skin/images/controls@2x.png (themes/images/controls@2x.png) skin/images/copy.svg (themes/images/copy.svg) skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
new file mode 100644 --- /dev/null +++ b/devtools/client/themes/images/firefox-logo-glyph.svg @@ -0,0 +1,7 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> + <path fill="#d7d7db" + d="M31.359,14.615h0c-.044-.289-.088-.459-.088-.459s-.113.131-.3.378A10.77,10.77,0,0,0,30.6,12.5a13.846,13.846,0,0,0-.937-2.411,10.048,10.048,0,0,0-.856-1.468q-.176-.263-.359-.51c-.57-.931-1.224-1.5-1.981-2.576a7.806,7.806,0,0,1-.991-2.685A10.844,10.844,0,0,0,25,4.607c-.777-.784-1.453-1.341-1.861-1.721C21.126,1.006,21.36.031,21.36.031h0S17.6,4.228,19.229,8.6a8.4,8.4,0,0,0,2.8,3.733c1.576,1.3,3.273,2.323,4.168,4.937a8.377,8.377,0,0,0-3.144-3.317,7.573,7.573,0,0,1,.6,3,7.124,7.124,0,0,1-8.711,6.94,6.561,6.561,0,0,1-1.765-.6,7.183,7.183,0,0,1-2.115-1.955l-.01-.017.126.046a6.5,6.5,0,0,0,.9.241,5.628,5.628,0,0,0,3.583-.423c1.126-.625,1.808-1.088,2.361-.905l.01,0c.54.172.966-.352.58-.9a2.94,2.94,0,0,0-2.848-1.112c-1.127.164-2.16.965-3.637.189a3.129,3.129,0,0,1-.277-.163c-.1-.057.317.087.22.022a7.33,7.33,0,0,1-.928-.554c-.022-.018.223.07.2.052a3.581,3.581,0,0,1-.968-.979,1.741,1.741,0,0,1-.066-1.554,1.371,1.371,0,0,1,.6-.564c.191.094.309.165.309.165s-.087-.16-.134-.244c.017-.006.032,0,.049-.011.167.072.537.26.732.375a1.016,1.016,0,0,1,.335.3s.067-.033.017-.173a.9.9,0,0,0-.346-.424l.016,0a2.94,2.94,0,0,1,.426.265,2.079,2.079,0,0,0,.17-.9,1.178,1.178,0,0,0-.069-.5c-.053-.1.03-.14.123-.035a.976.976,0,0,0-.079-.238v-.008h0s.053-.069.077-.094a1.43,1.43,0,0,1,.216-.176,9.973,9.973,0,0,1,1.465-.747c.414-.181.757-.319.827-.359a2.3,2.3,0,0,0,.293-.225,1.968,1.968,0,0,0,.66-1.14,1.6,1.6,0,0,0,.017-.178v-.05l0-.03v0l0-.012v0l0-.013h0c-.06-.225-.448-.394-2.476-.584a1.773,1.773,0,0,1-1.45-1.36l0,.009c-.029.074-.055.149-.081.225.026-.075.052-.15.081-.225l0-.016a5.138,5.138,0,0,1,1.986-2.466c.052-.042-.208.011-.156-.032a5.156,5.156,0,0,1,.53-.224c.091-.038-.39-.222-.815-.177a2.2,2.2,0,0,0-.756.178c.1-.086.4-.2.329-.2a4.865,4.865,0,0,0-1.542.583.314.314,0,0,1,.03-.14,2.4,2.4,0,0,0-.964.744,1.275,1.275,0,0,0,.01-.174,2.876,2.876,0,0,0-.473.444l-.009.007a6.285,6.285,0,0,0-3.517-.3l-.01-.009.012,0a2.943,2.943,0,0,1-.625-.7L6.1,5.852,6.081,5.83c-.077-.114-.156-.243-.237-.387-.058-.1-.117-.217-.176-.338,0-.008-.009-.011-.013-.012-.024,0-.041.111-.061.082l0-.006a4.308,4.308,0,0,1-.283-1.687l-.016.008a1.884,1.884,0,0,0-.714.934c-.061.137-.1.212-.14.287,0,.006,0-.01,0-.035.009-.069.039-.211.032-.2s-.012.019-.019.029a1.733,1.733,0,0,0-.251.372,2.355,2.355,0,0,0-.15.382c-.006.021,0-.018,0-.064s.009-.128,0-.111l-.022.043a9.5,9.5,0,0,0-.8,3.035A3.022,3.022,0,0,0,3.2,8.7v.016a6.628,6.628,0,0,0-.817,1.1,15.606,15.606,0,0,0-1.727,4.23,10.351,10.351,0,0,1,.925-1.621,15,15,0,0,0-1.045,5.5,14.233,14.233,0,0,1,.45-1.629A13.807,13.807,0,0,0,2.234,22.76a15.037,15.037,0,0,0,5.951,6.748h0a13.016,13.016,0,0,0,3.468,1.662c.162.059.326.117.494.173-.053-.021-.1-.044-.153-.067a15.7,15.7,0,0,0,4.5.662c5.394,0,7.175-2.054,7.339-2.259h0a2.73,2.73,0,0,0,.637-.856h0q.156-.064.315-.137l.067-.03.121-.057a11.312,11.312,0,0,0,2.277-1.426,5.5,5.5,0,0,0,2.123-3.1h0a1.938,1.938,0,0,0,.029-1.428q.083-.131.171-.28a12.706,12.706,0,0,0,1.907-6.181v-.006c0-.059,0-.118,0-.177A7.731,7.731,0,0,0,31.359,14.615Z"/> +</svg>