1 files changed, 111 insertions, 0 deletions
diff --git a/devtools/client/aboutdebugging/components/aboutdebugging.js b/devtools/client/aboutdebugging/components/aboutdebugging.js
new file mode 100644
index 000000000..601574dcb
--- /dev/null
+++ b/devtools/client/aboutdebugging/components/aboutdebugging.js
@@ -0,0 +1,111 @@
+/* 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 { createFactory, createClass, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+const Services = require("Services");
+
+const PanelMenu = createFactory(require("./panel-menu"));
+
+loader.lazyGetter(this, "AddonsPanel",
+  () => createFactory(require("./addons/panel")));
+loader.lazyGetter(this, "TabsPanel",
+  () => createFactory(require("./tabs/panel")));
+loader.lazyGetter(this, "WorkersPanel",
+  () => createFactory(require("./workers/panel")));
+
+loader.lazyRequireGetter(this, "DebuggerClient",
+  "devtools/shared/client/main", true);
+loader.lazyRequireGetter(this, "Telemetry",
+  "devtools/client/shared/telemetry");
+
+const Strings = Services.strings.createBundle(
+  "chrome://devtools/locale/aboutdebugging.properties");
+
+const panels = [{
+  id: "addons",
+  name: Strings.GetStringFromName("addons"),
+  icon: "chrome://devtools/skin/images/debugging-addons.svg",
+  component: AddonsPanel
+}, {
+  id: "tabs",
+  name: Strings.GetStringFromName("tabs"),
+  icon: "chrome://devtools/skin/images/debugging-tabs.svg",
+  component: TabsPanel
+}, {
+  id: "workers",
+  name: Strings.GetStringFromName("workers"),
+  icon: "chrome://devtools/skin/images/debugging-workers.svg",
+  component: WorkersPanel
+}];
+
+const defaultPanelId = "addons";
+
+module.exports = createClass({
+  displayName: "AboutDebuggingApp",
+
+  propTypes: {
+    client: PropTypes.instanceOf(DebuggerClient).isRequired,
+    telemetry: PropTypes.instanceOf(Telemetry).isRequired
+  },
+
+  getInitialState() {
+    return {
+      selectedPanelId: defaultPanelId
+    };
+  },
+
+  componentDidMount() {
+    window.addEventListener("hashchange", this.onHashChange);
+    this.onHashChange();
+    this.props.telemetry.toolOpened("aboutdebugging");
+  },
+
+  componentWillUnmount() {
+    window.removeEventListener("hashchange", this.onHashChange);
+    this.props.telemetry.toolClosed("aboutdebugging");
+    this.props.telemetry.destroy();
+  },
+
+  onHashChange() {
+    this.setState({
+      selectedPanelId: window.location.hash.substr(1) || defaultPanelId
+    });
+  },
+
+  selectPanel(panelId) {
+    window.location.hash = "#" + panelId;
+  },
+
+  render() {
+    let { client } = this.props;
+    let { selectedPanelId } = this.state;
+    let selectPanel = this.selectPanel;
+    let selectedPanel = panels.find(p => p.id == selectedPanelId);
+    let panel;
+
+    if (selectedPanel) {
+      panel = selectedPanel.component({ client, id: selectedPanel.id });
+    } else {
+      panel = (
+        dom.div({ className: "error-page" },
+          dom.h1({ className: "header-name" },
+            Strings.GetStringFromName("pageNotFound")
+          ),
+          dom.h4({ className: "error-page-details" },
+            Strings.formatStringFromName("doesNotExist", [selectedPanelId], 1))
+        )
+      );
+    }
+
+    return dom.div({ className: "app" },
+      PanelMenu({ panels, selectedPanelId, selectPanel }),
+      dom.div({ className: "main-content" }, panel)
+    );
+  }
+});