Bug 1477596: Show runtime information. r=jdescottes

MozReview-Commit-ID: 5j7HTlGW9x9

--HG--
extra : rebase_source : e4024da179fb84c640fb29360442755d68cc6c42

devtools/client/aboutdebugging-new/aboutdebugging.css

@@ -4,6 +4,8 @@
 
 @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/RuntimeInfo.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimePage.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/Sidebar.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/SidebarItem.css";
 

devtools/client/aboutdebugging-new/src/components/App.css

@@ -2,8 +2,19 @@
  * 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/. */
 
+/*
+ * The current layout of the about:debugging is
+ *
+ *  +-------------+-------------------------------+
+ *  |   Sidebar   | RuntimePage                   |
+ *  |   (240px)   |                               |
+ *  |             |                               |
+ *  +-------------+-------------------------------+
+ */
 .app {
+  display: grid;
   font-size: 15px;
+  grid-template-columns: 240px auto;
   height: 100vh;
   overflow: hidden;
   width: 100vw;

devtools/client/aboutdebugging-new/src/components/App.js

@@ -7,6 +7,7 @@
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
+const RuntimePage = createFactory(require("./RuntimePage"));
 const Sidebar = createFactory(require("./Sidebar"));
 
 class App extends PureComponent {
@@ -15,7 +16,8 @@ class App extends PureComponent {
       {
         className: "app",
       },
-      Sidebar()
+      Sidebar(),
+      RuntimePage(),
     );
   }
 }

devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css

@@ -0,0 +1,15 @@
+/* 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;
+  white-space: nowrap;
+}
+
+.runtime-info__icon {
+  height: 64px;
+  margin-inline-end: 12px;
+  width: 64px;
+}

devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js

@@ -0,0 +1,41 @@
+/* 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 displays runtime information.
+ */
+class RuntimeInfo extends PureComponent {
+  static get propTypes() {
+    return {
+      icon: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      version: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    const { icon, name, version } = this.props;
+
+    return dom.h1(
+      {
+        className: "runtime-info",
+      },
+      dom.img(
+        {
+          className: "runtime-info__icon",
+          src: icon,
+        }
+      ),
+      `${ name } (${ version })`
+    );
+  }
+}
+
+module.exports = RuntimeInfo;

devtools/client/aboutdebugging-new/src/components/RuntimePage.css

@@ -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/. */
+
+.runtime-page {
+  padding-block-start: 60px;
+}

devtools/client/aboutdebugging-new/src/components/RuntimePage.js

@@ -0,0 +1,29 @@
+/* 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 RuntimeInfo = createFactory(require("./RuntimeInfo"));
+
+const Services = require("Services");
+
+class RuntimePage extends PureComponent {
+  render() {
+    return dom.article(
+      {
+        className: "runtime-page",
+      },
+      RuntimeInfo({
+        icon: "chrome://branding/content/icon64.png",
+        name: Services.appinfo.name,
+        version: Services.appinfo.version,
+      }),
+    );
+  }
+}
+
+module.exports = RuntimePage;

devtools/client/aboutdebugging-new/src/components/Sidebar.css

@@ -3,6 +3,5 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .sidebar {
-  margin-block-start: 70px;
-  width: 240px;
+  padding-block-start: 70px;
 }

devtools/client/aboutdebugging-new/src/components/moz.build

@@ -5,6 +5,10 @@
 DevToolsModules(
     'App.css',
     'App.js',
+    'RuntimeInfo.css',
+    'RuntimeInfo.js',
+    'RuntimePage.css',
+    'RuntimePage.js',
     'Sidebar.css',
     'Sidebar.js',
     'SidebarItem.css',