Bug 1245029 - aboutdebugging full react refactor part2;r=janx,ochameau

MozReview-Commit-ID: 64V5vGn2889
2016-02-18 19:49:59 +01:00
parent 1756760161
commit bb8de5517e
16 changed files with 237 additions and 148 deletions
--- a/devtools/client/aboutdebugging/components/aboutdebugging.js
+++ b/devtools/client/aboutdebugging/components/aboutdebugging.js
@@ -0,0 +1,85 @@
+/* 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/. */
+
+/* global React */
+
+"use strict";
+
+loader.lazyRequireGetter(this, "React",
+  "devtools/client/shared/vendor/react");
+loader.lazyRequireGetter(this, "AddonsComponent",
+  "devtools/client/aboutdebugging/components/addons", true);
+loader.lazyRequireGetter(this, "TabMenuComponent",
+  "devtools/client/aboutdebugging/components/tab-menu", true);
+loader.lazyRequireGetter(this, "WorkersComponent",
+  "devtools/client/aboutdebugging/components/workers", true);
+
+const Strings = Services.strings.createBundle(
+  "chrome://devtools/locale/aboutdebugging.properties");
+
+const tabs = [
+  { id: "addons", name: Strings.GetStringFromName("addons"),
+    icon: "chrome://devtools/skin/images/debugging-addons.svg",
+    component: AddonsComponent },
+  { id: "workers", name: Strings.GetStringFromName("workers"),
+    icon: "chrome://devtools/skin/images/debugging-workers.svg",
+    component: WorkersComponent },
+];
+const defaultTabId = "addons";
+
+exports.AboutDebuggingApp = React.createClass({
+  displayName: "AboutDebuggingApp",
+
+  getInitialState() {
+    return {
+      selectedTabId: defaultTabId
+    };
+  },
+
+  componentDidMount() {
+    this.props.window.addEventListener("hashchange", this.onHashChange);
+    this.onHashChange();
+    this.props.telemetry.toolOpened("aboutdebugging");
+  },
+
+  componentWillUnmount() {
+    this.props.window.removeEventListener("hashchange", this.onHashChange);
+    this.props.telemetry.toolClosed("aboutdebugging");
+    this.props.telemetry.destroy();
+  },
+
+  render() {
+    let { client } = this.props;
+    let { selectedTabId } = this.state;
+    let selectTab = this.selectTab;
+
+    let selectedTab = tabs.find(t => t.id == selectedTabId);
+
+    return React.createElement(
+      "div", { className: "app"},
+        React.createElement(TabMenuComponent,
+                              { tabs, selectedTabId, selectTab }),
+        React.createElement("div", { className: "main-content" },
+          React.createElement(selectedTab.component, { client }))
+        );
+  },
+
+  onHashChange() {
+    let tabId = this.props.window.location.hash.substr(1);
+
+    let isValid = tabs.some(t => t.id == tabId);
+    if (isValid) {
+      this.setState({ selectedTabId: tabId });
+    } else {
+      // If the current hash matches no valid category, navigate to the default
+      // tab.
+      this.selectTab(defaultTabId);
+    }
+  },
+
+  selectTab(tabId) {
+    let win = this.props.window;
+    win.location.hash = "#" + tabId;
+  }
+});