Bug 1250002 - part2: about:debugging switch to browserLoader;r=ochameau draft
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 23 Feb 2016 02:00:51 +0100
changeset 334567 444aa09b859bd2ef04856dc0db4ca52bc05e7906
parent 334525 bd31080b2d678ee4f003386145b3f954e3ee16ca
child 514933 4cd3eb1075bacdfb009368f9f0a98c1d21668d48
push id11572
push userjdescottes@mozilla.com
push dateThu, 25 Feb 2016 13:58:57 +0000
reviewersochameau
bugs1250002
milestone47.0a1
Bug 1250002 - part2: about:debugging switch to browserLoader;r=ochameau MozReview-Commit-ID: G4O19TOTWOy
devtools/client/aboutdebugging/components/aboutdebugging.js
devtools/client/aboutdebugging/components/addons-controls.js
devtools/client/aboutdebugging/components/addons-tab.js
devtools/client/aboutdebugging/components/tab-header.js
devtools/client/aboutdebugging/components/tab-menu-entry.js
devtools/client/aboutdebugging/components/tab-menu.js
devtools/client/aboutdebugging/components/target-list.js
devtools/client/aboutdebugging/components/target.js
devtools/client/aboutdebugging/components/workers-tab.js
devtools/client/aboutdebugging/initializer.js
--- a/devtools/client/aboutdebugging/components/aboutdebugging.js
+++ b/devtools/client/aboutdebugging/components/aboutdebugging.js
@@ -1,24 +1,23 @@
 /* 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 */
+/* eslint-env browser */
 
 "use strict";
 
-loader.lazyRequireGetter(this, "React",
-  "devtools/client/shared/vendor/react");
-loader.lazyRequireGetter(this, "AddonsTab",
-  "devtools/client/aboutdebugging/components/addons-tab", true);
-loader.lazyRequireGetter(this, "TabMenu",
-  "devtools/client/aboutdebugging/components/tab-menu", true);
-loader.lazyRequireGetter(this, "WorkersTab",
-  "devtools/client/aboutdebugging/components/workers-tab", true);
+const Services = require("Services");
+
+const React = require("devtools/client/shared/vendor/react");
+const { TabMenu } = require("./tab-menu");
+
+loader.lazyRequireGetter(this, "AddonsTab", "./components/addons-tab", true);
+loader.lazyRequireGetter(this, "WorkersTab", "./components/workers-tab", 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: AddonsTab },
@@ -33,23 +32,23 @@ exports.AboutDebuggingApp = React.create
 
   getInitialState() {
     return {
       selectedTabId: defaultTabId
     };
   },
 
   componentDidMount() {
-    this.props.window.addEventListener("hashchange", this.onHashChange);
+    window.addEventListener("hashchange", this.onHashChange);
     this.onHashChange();
     this.props.telemetry.toolOpened("aboutdebugging");
   },
 
   componentWillUnmount() {
-    this.props.window.removeEventListener("hashchange", this.onHashChange);
+    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;
@@ -60,25 +59,24 @@ exports.AboutDebuggingApp = React.create
       "div", { className: "app"},
         React.createElement(TabMenu, { 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 tabId = 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;
+    window.location.hash = "#" + tabId;
   }
 });
--- a/devtools/client/aboutdebugging/components/addons-controls.js
+++ b/devtools/client/aboutdebugging/components/addons-controls.js
@@ -1,24 +1,24 @@
 /* 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 */
+/* eslint-env browser */
 
 "use strict";
 
-loader.lazyRequireGetter(this, "Ci", "chrome", true);
-loader.lazyRequireGetter(this, "Cc", "chrome", true);
-loader.lazyRequireGetter(this, "React", "devtools/client/shared/vendor/react");
-loader.lazyRequireGetter(this, "Services");
-
 loader.lazyImporter(this, "AddonManager",
   "resource://gre/modules/AddonManager.jsm");
 
+const { Cc, Ci } = require("chrome");
+const Services = require("Services");
+
+const React = require("devtools/client/shared/vendor/react");
+
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 const MORE_INFO_URL = "https://developer.mozilla.org/docs/Tools" +
                       "/about:debugging#Enabling_add-on_debugging";
 
 exports.AddonsControls = React.createClass({
   displayName: "AddonsControls",
@@ -53,33 +53,31 @@ exports.AddonsControls = React.createCla
   },
 
   onEnableAddonDebuggingChange(event) {
     let enabled = event.target.checked;
     Services.prefs.setBoolPref("devtools.chrome.enabled", enabled);
     Services.prefs.setBoolPref("devtools.debugger.remote-enabled", enabled);
   },
 
-  loadAddonFromFile(event) {
-    let win = event.target.ownerDocument.defaultView;
-
+  loadAddonFromFile() {
     let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
-    fp.init(win,
+    fp.init(window,
       Strings.GetStringFromName("selectAddonFromFile"),
       Ci.nsIFilePicker.modeOpen);
     let res = fp.show();
     if (res == Ci.nsIFilePicker.returnCancel || !fp.file) {
       return;
     }
     let file = fp.file;
     // AddonManager.installTemporaryAddon accepts either
     // addon directory or final xpi file.
     if (!file.isDirectory() && !file.leafName.endsWith(".xpi")) {
       file = file.parent;
     }
     try {
       AddonManager.installTemporaryAddon(file);
     } catch (e) {
-      win.alert("Error while installing the addon:\n" + e.message + "\n");
+      window.alert("Error while installing the addon:\n" + e.message + "\n");
       throw e;
     }
   },
 });
--- a/devtools/client/aboutdebugging/components/addons-tab.js
+++ b/devtools/client/aboutdebugging/components/addons-tab.js
@@ -1,28 +1,23 @@
 /* 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 AddonManager, React */
+/* global React */
 
 "use strict";
 
-loader.lazyRequireGetter(this, "React",
-  "devtools/client/shared/vendor/react");
-loader.lazyRequireGetter(this, "TargetList",
-  "devtools/client/aboutdebugging/components/target-list", true);
-loader.lazyRequireGetter(this, "TabHeader",
-  "devtools/client/aboutdebugging/components/tab-header", true);
-loader.lazyRequireGetter(this, "AddonsControls",
-  "devtools/client/aboutdebugging/components/addons-controls", true);
-loader.lazyRequireGetter(this, "Services");
+const { AddonManager } = require("resource://gre/modules/AddonManager.jsm");
+const Services = require("Services");
 
-loader.lazyImporter(this, "AddonManager",
-  "resource://gre/modules/AddonManager.jsm");
+const React = require("devtools/client/shared/vendor/react");
+const { AddonsControls } = require("./addons-controls");
+const { TabHeader } = require("./tab-header");
+const { TargetList } = require("./target-list");
 
 const ExtensionIcon = "chrome://mozapps/skin/extensions/extensionGeneric.svg";
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 const CHROME_ENABLED_PREF = "devtools.chrome.enabled";
 const REMOTE_ENABLED_PREF = "devtools.debugger.remote-enabled";
 
--- a/devtools/client/aboutdebugging/components/tab-header.js
+++ b/devtools/client/aboutdebugging/components/tab-header.js
@@ -1,18 +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/. */
 
-/* global React */
-
 "use strict";
 
-loader.lazyRequireGetter(this, "React",
-  "devtools/client/shared/vendor/react");
+const React = require("devtools/client/shared/vendor/react");
 
 exports.TabHeader = React.createClass({
   displayName: "TabHeader",
 
   render() {
     let { name, id } = this.props;
 
     return React.createElement(
--- a/devtools/client/aboutdebugging/components/tab-menu-entry.js
+++ b/devtools/client/aboutdebugging/components/tab-menu-entry.js
@@ -1,18 +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/. */
 
-/* global React */
-
 "use strict";
 
-loader.lazyRequireGetter(this, "React",
-  "devtools/client/shared/vendor/react");
+const React = require("devtools/client/shared/vendor/react");
 
 exports.TabMenuEntry = React.createClass({
   displayName: "TabMenuEntry",
 
   render() {
     let { icon, name, selected } = this.props;
 
     // Here .category, .category-icon, .category-name classnames are used to
--- a/devtools/client/aboutdebugging/components/tab-menu.js
+++ b/devtools/client/aboutdebugging/components/tab-menu.js
@@ -1,20 +1,18 @@
 /* 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, "TabMenuEntry",
-  "devtools/client/aboutdebugging/components/tab-menu-entry", true);
+const React = require("devtools/client/shared/vendor/react");
+const { TabMenuEntry } = require("./tab-menu-entry");
 
 exports.TabMenu = React.createClass({
   displayName: "TabMenu",
 
   render() {
     let { tabs, selectedTabId, selectTab } = this.props;
     let tabLinks = tabs.map(({ id, name, icon }) => {
       let selected = id == selectedTabId;
--- a/devtools/client/aboutdebugging/components/target-list.js
+++ b/devtools/client/aboutdebugging/components/target-list.js
@@ -1,24 +1,24 @@
 /* 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, "Target",
-  "devtools/client/aboutdebugging/components/target", true);
-loader.lazyRequireGetter(this, "Services");
+const Services = require("Services");
+
+const React = require("devtools/client/shared/vendor/react");
+const { Target } = require("./target");
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
+
 const LocaleCompare = (a, b) => {
   return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
 };
 
 exports.TargetList = React.createClass({
   displayName: "TargetList",
 
   render() {
--- a/devtools/client/aboutdebugging/components/target.js
+++ b/devtools/client/aboutdebugging/components/target.js
@@ -1,29 +1,28 @@
 /* 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 alert, BrowserToolboxProcess, gDevTools, React, TargetFactory,
-   Toolbox */
+/* eslint-env browser */
 
 "use strict";
 
-loader.lazyRequireGetter(this, "React",
-  "devtools/client/shared/vendor/react");
 loader.lazyRequireGetter(this, "TargetFactory",
-  "devtools/client/framework/target", true);
+      "devtools/client/framework/target", true);
+loader.lazyRequireGetter(this, "gDevTools",
+      "devtools/client/framework/devtools", true);
 loader.lazyRequireGetter(this, "Toolbox",
-  "devtools/client/framework/toolbox", true);
-loader.lazyRequireGetter(this, "Services");
+      "devtools/client/framework/toolbox", true);
 
 loader.lazyImporter(this, "BrowserToolboxProcess",
-  "resource://devtools/client/framework/ToolboxProcess.jsm");
-loader.lazyRequireGetter(this, "gDevTools",
-  "devtools/client/framework/devtools", true);
+      "resource://devtools/client/framework/ToolboxProcess.jsm");
+
+const Services = require("Services");
+const React = require("devtools/client/shared/vendor/react");
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 exports.Target = React.createClass({
   displayName: "Target",
 
   render() {
@@ -62,17 +61,17 @@ exports.Target = React.createClass({
         break;
       case "sharedworker":
         this.openWorkerToolbox(target.workerActor);
         break;
       case "worker":
         this.openWorkerToolbox(target.workerActor);
         break;
       default:
-        alert("Not implemented yet!");
+        window.alert("Not implemented yet!");
         break;
     }
   },
 
   openWorkerToolbox(workerActor) {
     let { client } = this.props;
     client.attachWorker(workerActor, (response, workerClient) => {
       gDevTools.showToolbox(TargetFactory.forWorker(workerClient),
--- a/devtools/client/aboutdebugging/components/workers-tab.js
+++ b/devtools/client/aboutdebugging/components/workers-tab.js
@@ -1,27 +1,21 @@
 /* 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, "Ci",
-  "chrome", true);
-loader.lazyRequireGetter(this, "React",
-  "devtools/client/shared/vendor/react");
-loader.lazyRequireGetter(this, "TargetList",
-  "devtools/client/aboutdebugging/components/target-list", true);
-loader.lazyRequireGetter(this, "TabHeader",
-  "devtools/client/aboutdebugging/components/tab-header", true);
-loader.lazyRequireGetter(this, "Services");
+const { Ci } = require("chrome");
+const { Task } = require("resource://gre/modules/Task.jsm");
+const Services = require("Services");
 
-loader.lazyImporter(this, "Task", "resource://gre/modules/Task.jsm");
+const React = require("devtools/client/shared/vendor/react");
+const { TargetList } = require("./target-list");
+const { TabHeader } = require("./tab-header");
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 const WorkerIcon = "chrome://devtools/skin/images/debugging-workers.svg";
 
 exports.WorkersTab = React.createClass({
   displayName: "WorkersTab",
 
--- a/devtools/client/aboutdebugging/initializer.js
+++ b/devtools/client/aboutdebugging/initializer.js
@@ -1,43 +1,50 @@
 /* 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 */
-/* global DebuggerClient, DebuggerServer, React */
+/* global DebuggerClient, DebuggerServer */
 
 "use strict";
 
 const { loader } = Components.utils.import(
   "resource://devtools/shared/Loader.jsm", {});
 
 loader.lazyRequireGetter(this, "DebuggerClient",
   "devtools/shared/client/main", true);
 loader.lazyRequireGetter(this, "DebuggerServer",
   "devtools/server/main", true);
 loader.lazyRequireGetter(this, "Telemetry",
   "devtools/client/shared/telemetry");
-loader.lazyRequireGetter(this, "AboutDebuggingApp",
-  "devtools/client/aboutdebugging/components/aboutdebugging", true);
+
+const { BrowserLoader } = Components.utils.import(
+  "resource://devtools/client/shared/browser-loader.js", {});
+const { require } =
+  BrowserLoader("resource://devtools/client/aboutdebugging/", window);
+
+const React = require("devtools/client/shared/vendor/react");
+const { AboutDebuggingApp } = require("./components/aboutdebugging");
 
 var AboutDebugging = {
   init() {
     if (!DebuggerServer.initialized) {
       DebuggerServer.init();
       DebuggerServer.addBrowserActors();
     }
     DebuggerServer.allowChromeProcess = true;
     this.client = new DebuggerClient(DebuggerServer.connectPipe());
 
     this.client.connect().then(() => {
       let client = this.client;
       let telemetry = new Telemetry();
-      React.render(React.createElement(AboutDebuggingApp,
-        { client, telemetry, window }), document.querySelector("#body"));
+
+      let app = React.createElement(AboutDebuggingApp, { client, telemetry });
+      React.render(app, document.querySelector("#body"));
     });
   },
 
   destroy() {
     React.unmountComponentAtNode(document.querySelector("#body"));
 
     this.client.close();
     this.client = null;