3 files changed, 159 insertions, 0 deletions
diff --git a/devtools/client/aboutdebugging/components/tabs/moz.build b/devtools/client/aboutdebugging/components/tabs/moz.build
new file mode 100644
index 000000000..ee6a89e37
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/tabs/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(
+    'panel.js',
+    'target.js',
+)
diff --git a/devtools/client/aboutdebugging/components/tabs/panel.js b/devtools/client/aboutdebugging/components/tabs/panel.js
new file mode 100644
index 000000000..e280ce7f1
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/tabs/panel.js
@@ -0,0 +1,98 @@
+/* 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/. */
+
+/* eslint-env browser */
+
+"use strict";
+
+const { createClass, createFactory, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+const Services = require("Services");
+
+const PanelHeader = createFactory(require("../panel-header"));
+const TargetList = createFactory(require("../target-list"));
+const TabTarget = createFactory(require("./target"));
+
+loader.lazyRequireGetter(this, "DebuggerClient",
+  "devtools/shared/client/main", true);
+
+const Strings = Services.strings.createBundle(
+  "chrome://devtools/locale/aboutdebugging.properties");
+
+module.exports = createClass({
+  displayName: "TabsPanel",
+
+  propTypes: {
+    client: PropTypes.instanceOf(DebuggerClient).isRequired,
+    id: PropTypes.string.isRequired
+  },
+
+  getInitialState() {
+    return {
+      tabs: []
+    };
+  },
+
+  componentDidMount() {
+    let { client } = this.props;
+    client.addListener("tabListChanged", this.update);
+    this.update();
+  },
+
+  componentWillUnmount() {
+    let { client } = this.props;
+    client.removeListener("tabListChanged", this.update);
+  },
+
+  update() {
+    this.props.client.mainRoot.listTabs().then(({ tabs }) => {
+      // Filter out closed tabs (represented as `null`).
+      tabs = tabs.filter(tab => !!tab);
+      tabs.forEach(tab => {
+        // FIXME Also try to fetch low-res favicon. But we should use actor
+        // support for this to get the high-res one (bug 1061654).
+        let url = new URL(tab.url);
+        if (url.protocol.startsWith("http")) {
+          let prePath = url.origin;
+          let idx = url.pathname.lastIndexOf("/");
+          if (idx === -1) {
+            prePath += url.pathname;
+          } else {
+            prePath += url.pathname.substr(0, idx);
+          }
+          tab.icon = prePath + "/favicon.ico";
+        } else {
+          tab.icon = "chrome://devtools/skin/images/globe.svg";
+        }
+      });
+      this.setState({ tabs });
+    });
+  },
+
+  render() {
+    let { client, id } = this.props;
+    let { tabs } = this.state;
+
+    return dom.div({
+      id: id + "-panel",
+      className: "panel",
+      role: "tabpanel",
+      "aria-labelledby": id + "-header"
+    },
+    PanelHeader({
+      id: id + "-header",
+      name: Strings.GetStringFromName("tabs")
+    }),
+    dom.div({},
+      TargetList({
+        client,
+        id: "tabs",
+        name: Strings.GetStringFromName("tabs"),
+        sort: false,
+        targetClass: TabTarget,
+        targets: tabs
+      })
+    ));
+  }
+});
diff --git a/devtools/client/aboutdebugging/components/tabs/target.js b/devtools/client/aboutdebugging/components/tabs/target.js
new file mode 100644
index 000000000..d946f8f61
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/tabs/target.js
@@ -0,0 +1,53 @@
+/* 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/. */
+
+/* eslint-env browser */
+
+"use strict";
+
+const { createClass, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+const Services = require("Services");
+
+const Strings = Services.strings.createBundle(
+  "chrome://devtools/locale/aboutdebugging.properties");
+
+module.exports = createClass({
+  displayName: "TabTarget",
+
+  propTypes: {
+    target: PropTypes.shape({
+      icon: PropTypes.string,
+      outerWindowID: PropTypes.number.isRequired,
+      title: PropTypes.string,
+      url: PropTypes.string.isRequired
+    }).isRequired
+  },
+
+  debug() {
+    let { target } = this.props;
+    window.open("about:devtools-toolbox?type=tab&id=" + target.outerWindowID);
+  },
+
+  render() {
+    let { target } = this.props;
+
+    return dom.div({ className: "target-container" },
+      dom.img({
+        className: "target-icon",
+        role: "presentation",
+        src: target.icon
+      }),
+      dom.div({ className: "target" },
+        // If the title is empty, display the url instead.
+        dom.div({ className: "target-name", title: target.url },
+          target.title || target.url)
+      ),
+      dom.button({
+        className: "debug-button",
+        onClick: this.debug,
+      }, Strings.GetStringFromName("debug"))
+    );
+  }
+});