Bug 1471795 - Part 6: Implement RuntimeInformation. r?jdescottes, r?ladybenko
MozReview-Commit-ID: BQHP6UZqZkk
--- 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;