Bug 1477597 - Part 2: Show tabs. r=jdescottes

Differential Revision: https://phabricator.services.mozilla.com/D2763

--HG--
extra : rebase_source : 941023f857ec2e6ac907c6ad4a74260d66b73f65

devtools/client/aboutdebugging-new/aboutdebugging.css

@@ -4,6 +4,8 @@
 
 @import "chrome://global/skin/in-content/common.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/DebugTargetItem.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/ConnectPage.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/Sidebar.css";
@@ -24,4 +26,4 @@ ul {
   list-style: none;
   margin: 0;
   padding: 0;
-}
+}

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

@@ -23,4 +23,5 @@
 
 .page {
   padding-block-start: 60px;
+  overflow-y: auto;
 }

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

@@ -0,0 +1,43 @@
+/* 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/. */
+
+.ellipsis-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * The current layout of debug target item is
+ *
+ *  +--------+--------------------+
+ *  |  Icon  | Information        |
+ *  |        |+------------------+|
+ *  |        || Name             ||
+ *  |        |+------------------+|
+ *  |        || Detail           ||
+ *  |        |+------------------+|
+ *  +--------+--------------------+
+ */
+.debug-target-item {
+  display: grid;
+  grid-template-columns: 54px auto;
+  grid-template-rows: auto auto;
+  grid-row-gap: 20px;
+}
+
+.debug-target-item__icon {
+  height: 36px;
+  width: 36px;
+}
+
+.debug-target-item__info {
+  /* so as to ellipsis */
+  min-width: 0;
+}
+
+.debug-target-item__info__name {
+  font-size: 20px;
+  margin-block-end: 2px;
+}

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

@@ -0,0 +1,62 @@
+/* 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 debug target.
+ */
+class DebugTargetItem extends PureComponent {
+  static get propTypes() {
+    return {
+      icon: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+    };
+  }
+
+  renderIcon() {
+    return dom.img({
+      className: "debug-target-item__icon",
+      src: this.props.icon,
+    });
+  }
+
+  renderInfo() {
+    return dom.div(
+      {
+        className: "debug-target-item__info",
+      },
+      dom.div(
+        {
+          className: "debug-target-item__info__name ellipsis-text",
+          title: this.props.name,
+        },
+        this.props.name
+      ),
+      dom.div(
+        {
+          className: "debug-target-item__info__url ellipsis-text",
+        },
+        this.props.url
+      ),
+    );
+  }
+
+  render() {
+    return dom.li(
+      {
+        className: "debug-target-item",
+      },
+      this.renderIcon(),
+      this.renderInfo(),
+    );
+  }
+}
+
+module.exports = DebugTargetItem;

devtools/client/aboutdebugging-new/src/components/DebugTargetList.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/. */
+
+.debug-target-list {
+  margin-inline-start: 60px;
+}

devtools/client/aboutdebugging-new/src/components/DebugTargetList.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 { 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 DebugTargetItem = createFactory(require("./DebugTargetItem"));
+
+/**
+ * This component displays list of debug target.
+ */
+class DebugTargetList extends PureComponent {
+  static get propTypes() {
+    return {
+      targets: PropTypes.arrayOf(PropTypes.Object).isRequired,
+    };
+  }
+
+  render() {
+    const { targets } = this.props;
+
+    return dom.ul(
+      {
+        className: "debug-target-list",
+      },
+      targets.map(target =>
+        DebugTargetItem({
+          icon: target.icon,
+          name: target.name,
+          url: target.url,
+        })
+      ),
+    );
+  }
+}
+
+module.exports = DebugTargetList;

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

@@ -0,0 +1,35 @@
+/* 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 DebugTargetList = createFactory(require("./DebugTargetList"));
+
+/**
+ * This component provides list for debug target and name area.
+ */
+class DebugTargetPane extends PureComponent {
+  static get propTypes() {
+    return {
+      name: PropTypes.string.isRequired,
+      targets: PropTypes.arrayOf(PropTypes.Object).isRequired,
+    };
+  }
+
+  render() {
+    const { name, targets } = this.props;
+
+    return dom.section(
+      {},
+      dom.h2({}, name),
+      DebugTargetList({ targets }),
+    );
+  }
+}
+
+module.exports = DebugTargetPane;

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

@@ -5,6 +5,7 @@
 .runtime-info {
   align-items: center;
   display: flex;
+  margin-block-end: 40px;
   white-space: nowrap;
 }
 

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

@@ -9,6 +9,7 @@ const { createFactory, PureComponent } = require("devtools/client/shared/vendor/
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const DebugTargetPane = createFactory(require("./DebugTargetPane"));
 const RuntimeInfo = createFactory(require("./RuntimeInfo"));
 
 const Services = require("Services");
@@ -21,6 +22,8 @@ class RuntimePage extends PureComponent {
   }
 
   render() {
+    const { tabs } = this.props;
+
     return dom.article(
       {
         className: "page",
@@ -30,6 +33,10 @@ class RuntimePage extends PureComponent {
         name: Services.appinfo.name,
         version: Services.appinfo.version,
       }),
+      DebugTargetPane({
+        name: "Tabs",
+        targets: tabs
+      }),
     );
   }
 }

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

@@ -7,6 +7,11 @@ DevToolsModules(
     'App.js',
     'ConnectPage.css',
     'ConnectPage.js',
+    'DebugTargetItem.css',
+    'DebugTargetItem.js',
+    'DebugTargetList.css',
+    'DebugTargetList.js',
+    'DebugTargetPane.js',
     'RuntimeInfo.css',
     'RuntimeInfo.js',
     'RuntimePage.js',

devtools/client/aboutdebugging-new/src/reducers/runtime-state.js

@@ -20,7 +20,7 @@ function runtimeReducer(state = RuntimeState(), action) {
   switch (action.type) {
     case CONNECT_RUNTIME_SUCCESS: {
       const { client, tabs } = action;
-      return { client, tabs };
+      return { client, tabs: toTabComponentData(tabs) };
     }
     case DISCONNECT_RUNTIME_SUCCESS: {
       return RuntimeState();
@@ -31,6 +31,17 @@ function runtimeReducer(state = RuntimeState(), action) {
   }
 }
 
+function toTabComponentData(tabs) {
+  return tabs.map(tab => {
+    const icon = tab.favicon
+      ? `data:image/png;base64,${ btoa(String.fromCharCode.apply(String, tab.favicon)) }`
+      : "chrome://devtools/skin/images/globe.svg";
+    const name = tab.title || tab.url;
+    const url = tab.url;
+    return { icon, name, url };
+  });
+}
+
 module.exports = {
   RuntimeState,
   runtimeReducer,