Bug 1471795 - Part 3: Implement runtimes pane. r=jdescottes,ladybenko

MozReview-Commit-ID: 1X14YIYL27x --HG-- extra : rebase_source : 0029ff4b0a7ce83142f04849c8e9a7f2f2eccd94
2018-07-26 17:53:11 +09:00 · 2018-07-26 17:53:11 +09:00 · e31142cbcd
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@ -3,8 +3,16 @@
 * 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
@ -3,6 +3,8 @@
 * 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
@ -4,12 +4,14 @@

 "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 {
@ -18,10 +20,13 @@ class App extends PureComponent {
  }

  render() {
+    const { thisFirefox } = this.props;
+
    return dom.div(
      {
        className: "app",
      },
+      RuntimesPane({ thisFirefox })
    );
  }
 }
--- a/devtools/client/aboutdebugging-new/src/components/RuntimesPane.css
+++ 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;
+}
--- a/devtools/client/aboutdebugging-new/src/components/RuntimesPane.js
+++ 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
@ -2,7 +2,13 @@
 # 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'
 )
--- a/devtools/client/aboutdebugging-new/src/components/runtime/RuntimeItem.css
+++ 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;
+}
--- a/devtools/client/aboutdebugging-new/src/components/runtime/RuntimeItem.js
+++ 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;
--- a/devtools/client/aboutdebugging-new/src/components/runtime/moz.build
+++ 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
@ -8,6 +8,23 @@
 * 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
@ -11,6 +11,13 @@ const Runtime = require("./runtime");
 * 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
@ -108,6 +108,7 @@ devtools.jar:
    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)
--- a/devtools/client/themes/images/firefox-logo-glyph.svg
+++ 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>