Bug 1471795 - Part 6: Implement RuntimeInformation. r?jdescottes, r?ladybenko draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 19 Jul 2018 15:17:18 +0900
changeset 820255 3c24193c4d06cf211fb4c134133acefda34318c2
parent 820254 e7f11f4d838358ac6a96e06dfe586fca64015f39
child 820256 dd7a6ff9b6a99509f4a9393e52c23f021eacced8
push id116772
push userbmo:dakatsuka@mozilla.com
push dateThu, 19 Jul 2018 09:51:56 +0000
reviewersjdescottes, ladybenko
bugs1471795
milestone63.0a1
Bug 1471795 - Part 6: Implement RuntimeInformation. r?jdescottes, r?ladybenko MozReview-Commit-ID: BQHP6UZqZkk
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
devtools/client/aboutdebugging-new/src/components/moz.build
devtools/client/aboutdebugging-new/src/runtimes/runtime.js
devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -1,15 +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/. */
 
 @import "resource://devtools/client/themes/variables.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimesPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/runtime/ThisFirefoxItem.css";
 
 html, body, #mount {
   font-size: 15px;
   height: 100%;
   margin: 0;
   padding: 0;
--- a/devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
+++ b/devtools/client/aboutdebugging-new/src/components/DebugTargetsPane.js
@@ -1,29 +1,57 @@
 /* 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 Runtime = require("../runtimes/runtime");
 
+const RuntimeInfo = createFactory(require("./RuntimeInfo"));
+
 class DebugTargetsPane extends PureComponent {
   static get propTypes() {
     return {
       runtime: PropTypes.instanceOf(Runtime).isRequired,
     };
   }
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      info: {},
+    };
+    this.update(props.runtime);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.runtime !== this.props.runtime) {
+      this.update(this.props.runtime);
+    }
+  }
+
+  update(runtime) {
+    this.updateRuntimeInfo(runtime);
+  }
+
+  async updateRuntimeInfo(runtime) {
+    const info = await runtime.getRuntimeInfo(runtime);
+    this.setState({ info });
+  }
+
   render() {
+    const { info } = this.state;
+
     return dom.div(
       {
         className: "debug-targets-pane",
       },
+      RuntimeInfo({ info })
     );
   }
 }
 
 module.exports = DebugTargetsPane;
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.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-info {
+  align-items: center;
+  display: flex;
+  font-size: 30px;
+  margin-block-start: 60px;
+}
+
+.runtime-info__icon {
+  height: 64px;
+  margin-inline-end: 12px;
+  width: 64px;
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
@@ -0,0 +1,39 @@
+/* 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 runtime information.
+ */
+class RuntimeInfo extends PureComponent {
+  static get propTypes() {
+    return {
+      info: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { info } = this.props;
+
+    return dom.div(
+      {
+        className: "runtime-info",
+      },
+      dom.img(
+        {
+          className: "runtime-info__icon",
+          src: info.icon,
+        }
+      ),
+      `${ info.name } (${ info.version })`
+    );
+  }
+}
+
+module.exports = RuntimeInfo;
--- a/devtools/client/aboutdebugging-new/src/components/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/moz.build
@@ -6,11 +6,13 @@ DIRS += [
     'runtime',
 ]
 
 DevToolsModules(
     'App.css',
     'App.js',
     'DebugTargetsPane.css',
     'DebugTargetsPane.js',
+    'RuntimeInfo.css',
+    'RuntimeInfo.js',
     'RuntimesPane.css',
     'RuntimesPane.js'
 )
--- a/devtools/client/aboutdebugging-new/src/runtimes/runtime.js
+++ b/devtools/client/aboutdebugging-new/src/runtimes/runtime.js
@@ -3,11 +3,27 @@
  * 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 this runtime's information.
+   * Subclass should override this method.
+   * @return {Object}
+   *         {
+   *           icon: URL of the icon which represents this runtime
+   *                 e.g. chrome://branding/content/icon64.png
+   *           name: Name of this runtime
+   *                 e.g. Firefox
+   *           version: Version of this runtime
+   *                 e.g. 62.0a1
+   *         }
+   */
+  async getRuntimeInfo() {
+    throw new Error("Subclass of Runtime should override getRuntimeInfo()");
+  }
 }
 
 module.exports = Runtime;
--- a/devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js
+++ b/devtools/client/aboutdebugging-new/src/runtimes/this-firefox.js
@@ -1,16 +1,25 @@
 /* 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 Services = require("Services");
+
 const Runtime = require("./runtime");
 
 /**
  * This class represents the Firefox instance which runs in the same environment that
  * opened about:debugging.
  */
 class ThisFirefox extends Runtime {
+  async getRuntimeInfo() {
+    return {
+      icon: "chrome://branding/content/icon64.png",
+      name: Services.appinfo.name,
+      version: Services.appinfo.version,
+    };
+  }
 }
 
 module.exports = ThisFirefox;