Bug 855914 - Start using the jetpack loader in devtools. r=jwalker, f=ochameau

--HG--
rename : browser/devtools/framework/Sidebar.jsm => browser/devtools/framework/sidebar.js
rename : browser/devtools/framework/Target.jsm => browser/devtools/framework/target.js
rename : browser/devtools/framework/ToolboxHosts.jsm => browser/devtools/framework/toolbox-hosts.js
rename : browser/devtools/framework/Toolbox.jsm => browser/devtools/framework/toolbox.js
rename : browser/devtools/inspector/Breadcrumbs.jsm => browser/devtools/inspector/breadcrumbs.js
rename : browser/devtools/inspector/Highlighter.jsm => browser/devtools/inspector/highlighter.js
rename : browser/devtools/inspector/InspectorPanel.jsm => browser/devtools/inspector/inspector-panel.js
rename : browser/devtools/inspector/Selection.jsm => browser/devtools/inspector/selection.js
rename : browser/devtools/inspector/SelectorSearch.jsm => browser/devtools/inspector/selector-search.js
rename : browser/devtools/framework/ToolDefinitions.jsm => browser/devtools/main.js
rename : browser/devtools/markupview/MarkupView.jsm => browser/devtools/markupview/markup-view.js
rename : browser/devtools/shared/EventEmitter.jsm => browser/devtools/shared/event-emitter.js
rename : browser/devtools/shared/InplaceEditor.jsm => browser/devtools/shared/inplace-editor.js
rename : browser/devtools/shared/Undo.jsm => browser/devtools/shared/undo.js
rename : browser/devtools/styleinspector/CssHtmlTree.jsm => browser/devtools/styleinspector/computed-view.js
rename : browser/devtools/styleinspector/CssLogic.jsm => browser/devtools/styleinspector/css-logic.js
rename : browser/devtools/styleinspector/CssRuleView.jsm => browser/devtools/styleinspector/rule-view.js
rename : browser/devtools/styleinspector/StyleInspector.jsm => browser/devtools/styleinspector/style-inspector.js
rename : browser/devtools/tilt/TiltGL.jsm => browser/devtools/tilt/tilt-gl.js
rename : browser/devtools/tilt/TiltMath.jsm => browser/devtools/tilt/tilt-math.js
rename : browser/devtools/tilt/TiltUtils.jsm => browser/devtools/tilt/tilt-utils.js
rename : browser/devtools/tilt/TiltVisualizerStyle.jsm => browser/devtools/tilt/tilt-visualizer-style.js
rename : browser/devtools/tilt/TiltVisualizer.jsm => browser/devtools/tilt/tilt-visualizer.js
rename : browser/devtools/tilt/Tilt.jsm => browser/devtools/tilt/tilt.js

browser/base/content/nsContextMenu.js

@@ -437,10 +437,9 @@ nsContextMenu.prototype = {
   },
 
   inspectNode: function CM_inspectNode() {
+    let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
     let gBrowser = this.browser.ownerDocument.defaultView.gBrowser;
-    let imported = {};
+    let tt = devtools.TargetFactory.forTab(gBrowser.selectedTab);
-    Cu.import("resource:///modules/devtools/Target.jsm", imported);
-    let tt = imported.TargetFactory.forTab(gBrowser.selectedTab);
     return gDevTools.showToolbox(tt, "inspector").then(function(toolbox) {
       let inspector = toolbox.getCurrentPanel();
       inspector.selection.setNode(this.target, "browser-context-menu");

browser/devtools/Makefile.in

@@ -0,0 +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/.
+
+DEPTH     = @DEPTH@
+topsrcdir = @top_srcdir@
+srcdir    = @srcdir@
+VPATH     = @srcdir@
+
+include $(topsrcdir)/config/config.mk
+
+include $(topsrcdir)/config/rules.mk
+
+libs::
+	$(NSINSTALL) $(srcdir)/main.js $(FINAL_TARGET)/modules/devtools

browser/devtools/commandline/BuiltinCommands.jsm

@@ -14,13 +14,13 @@ this.EXPORTED_SYMBOLS = [ "CmdAddonFlags", "CmdCommands" ];
 Cu.import("resource:///modules/devtools/gcli.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/osfile.jsm")
+Cu.import("resource://gre/modules/osfile.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
                                   "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
-                                  "resource:///modules/devtools/Target.jsm");
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 /* CmdAddon ---------------------------------------------------------------- */
 
@@ -325,9 +325,6 @@ XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
     return global.Debugger;
   });
 
-  XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                    "resource:///modules/devtools/Target.jsm");
-
   let debuggers = [];
 
   /**
@@ -357,7 +354,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
       debuggers.push(dbg);
 
       let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-      let target = TargetFactory.forTab(gBrowser.selectedTab);
+      let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
       gDevTools.showToolbox(target, "webconsole");
 
       return gcli.lookup("calllogStartReply");
@@ -509,7 +506,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
       }.bind(this);
 
       let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-      let target = TargetFactory.forTab(gBrowser.selectedTab);
+      let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
       gDevTools.showToolbox(target, "webconsole");
 
       return gcli.lookup("calllogChromeStartReply");
@@ -755,7 +752,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
     description: gcli.lookup("consolecloseDesc"),
     exec: function Command_consoleClose(args, context) {
       let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-      let target = TargetFactory.forTab(gBrowser.selectedTab);
+      let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
       return gDevTools.closeToolbox(target);
     }
   });
@@ -768,7 +765,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
     description: gcli.lookup("consoleopenDesc"),
     exec: function Command_consoleOpen(args, context) {
       let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-      let target = TargetFactory.forTab(gBrowser.selectedTab);
+      let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
       return gDevTools.showToolbox(target, "webconsole");
     }
   });
@@ -1519,6 +1516,75 @@ XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
   }
 }(this));
 
+/* CmdTools -------------------------------------------------------------- */
+
+(function(module) {
+  gcli.addCommand({
+    name: "tools",
+    description: gcli.lookup("toolsDesc"),
+    manual: gcli.lookup("toolsManual"),
+    get hidden() gcli.hiddenByChromePref(),
+  });
+
+  gcli.addCommand({
+    name: "tools srcdir",
+    description: gcli.lookup("toolsSrcdirDesc"),
+    manual: gcli.lookup("toolsSrcdirManual"),
+    get hidden() gcli.hiddenByChromePref(),
+    params: [
+      {
+        name: "srcdir",
+        type: "string",
+        description: gcli.lookup("toolsSrcdirDir")
+      }
+    ],
+    returnType: "string",
+    exec: function(args, context) {
+      let promise = context.createPromise();
+      let existsPromise = OS.File.exists(args.srcdir + "/CLOBBER");
+      existsPromise.then(function(exists) {
+        if (exists) {
+          var str = Cc["@mozilla.org/supports-string;1"]
+            .createInstance(Ci.nsISupportsString);
+          str.data = args.srcdir;
+          Services.prefs.setComplexValue("devtools.loader.srcdir",
+              Components.interfaces.nsISupportsString, str);
+          devtools.reload();
+          promise.resolve(gcli.lookupFormat("toolsSrcdirReloaded", [args.srcdir]));
+          return;
+        }
+        promise.reject(gcli.lookupFormat("toolsSrcdirNotFound", [args.srcdir]));
+      });
+      return promise;
+    }
+  });
+
+  gcli.addCommand({
+    name: "tools builtin",
+    description: gcli.lookup("toolsBuiltinDesc"),
+    manual: gcli.lookup("toolsBuiltinManual"),
+    get hidden() gcli.hiddenByChromePref(),
+    returnType: "string",
+    exec: function(args, context) {
+      Services.prefs.clearUserPref("devtools.loader.srcdir");
+      devtools.reload();
+      return gcli.lookup("toolsBuiltinReloaded");
+    }
+  });
+
+  gcli.addCommand({
+    name: "tools reload",
+    description: gcli.lookup("toolsReloadDesc"),
+    get hidden() gcli.hiddenByChromePref() || !Services.prefs.prefHasUserValue("devtools.loader.srcdir"),
+
+    returnType: "string",
+    exec: function(args, context) {
+      devtools.reload();
+      return gcli.lookup("toolsReloaded");
+    }
+  });
+}(this));
+
 /* CmdRestart -------------------------------------------------------------- */
 
 (function(module) {
@@ -1913,7 +1979,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
     function fireChange() {
       eventEmitter.emit("changed", tab);
     }
-    var target = TargetFactory.forTab(tab);
+    var target = devtools.TargetFactory.forTab(tab);
     target.off("navigate", fireChange);
     target.once("navigate", fireChange);
   }

browser/devtools/commandline/test/helpers.js

@@ -24,7 +24,8 @@ let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).req
 Components.utils.import("resource:///modules/devtools/gcli.jsm", {});
 
 let console = (Cu.import("resource://gre/modules/devtools/Console.jsm", {})).console;
-let TargetFactory = (Cu.import("resource:///modules/devtools/Target.jsm", {})).TargetFactory;
+let devtools = (Cu.import("resource:///modules/devtools/gDevTools.jsm", {})).devtools;
+let TargetFactory = devtools.TargetFactory;
 
 let Promise = (Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", {})).Promise;
 let assert = { ok: ok, is: is, log: info };

browser/devtools/debugger/DebuggerPanel.jsm

@@ -10,7 +10,7 @@ const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
 this.EXPORTED_SYMBOLS = ["DebuggerPanel"];
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Promise",
   "resource://gre/modules/commonjs/sdk/core/promise.js");

browser/devtools/debugger/test/head.js

@@ -12,14 +12,14 @@ Cu.import("resource://gre/modules/devtools/dbg-server.jsm", tempScope);
 Cu.import("resource://gre/modules/devtools/dbg-client.jsm", tempScope);
 Cu.import("resource:///modules/source-editor.jsm", tempScope);
 Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
 let Services = tempScope.Services;
 let SourceEditor = tempScope.SourceEditor;
 let DebuggerServer = tempScope.DebuggerServer;
 let DebuggerTransport = tempScope.DebuggerTransport;
 let DebuggerClient = tempScope.DebuggerClient;
 let gDevTools = tempScope.gDevTools;
-let TargetFactory = tempScope.TargetFactory;
+let devtools = tempScope.devtools;
+let TargetFactory = devtools.TargetFactory;
 
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));

browser/devtools/debugger/test/helpers.js

@@ -24,7 +24,8 @@ let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).req
 Components.utils.import("resource:///modules/devtools/gcli.jsm", {});
 
 let console = (Cu.import("resource://gre/modules/devtools/Console.jsm", {})).console;
-let TargetFactory = (Cu.import("resource:///modules/devtools/Target.jsm", {})).TargetFactory;
+let devtools = (Cu.import("resource:///modules/devtools/gDevTools.jsm", {})).devtools;
+let TargetFactory = devtools.TargetFactory;
 
 let Promise = (Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", {})).Promise;
 let assert = { ok: ok, is: is, log: info };

browser/devtools/fontinspector/test/browser_fontinspector.js

@@ -2,8 +2,8 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let {devtools, gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
-let TargetFactory = tempScope.TargetFactory;
+let TargetFactory = devtools.TargetFactory;
 
 let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 

browser/devtools/framework/Makefile.in

@@ -13,3 +13,4 @@ include $(topsrcdir)/config/rules.mk
 
 libs::
 	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
+	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools/framework

browser/devtools/framework/gDevTools.jsm

@@ -4,19 +4,193 @@
 
 "use strict";
 
-this.EXPORTED_SYMBOLS = [ "gDevTools", "DevTools", "gDevToolsBrowser" ];
+this.EXPORTED_SYMBOLS = [ "gDevTools", "DevTools", "gDevToolsBrowser", "devtools" ];
 
 const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
+Cu.import("resource://gre/modules/FileUtils.jsm");
+Cu.import("resource://gre/modules/NetUtil.jsm");
 Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+
-Cu.import("resource:///modules/devtools/ToolDefinitions.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "OS", "resource://gre/modules/osfile.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "Toolbox",
+
-  "resource:///modules/devtools/Toolbox.jsm");
+let loader = Cu.import("resource://gre/modules/commonjs/toolkit/loader.js", {}).Loader;
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+
-  "resource:///modules/devtools/Target.jsm");
+// Used when the tools should be loaded from the Firefox package itself (the default)
+
+var BuiltinProvider = {
+  load: function(done) {
+    this.loader = new loader.Loader({
+      paths: {
+        "": "resource://gre/modules/commonjs/",
+        "main" : "resource:///modules/devtools/main",
+        "devtools": "resource:///modules/devtools",
+        "devtools/toolkit": "resource://gre/modules/devtools"
+      },
+      globals: {},
+    });
+    this.main = loader.main(this.loader, "main");
+
+    return Promise.resolve(undefined);
+  },
+
+  unload: function(reason) {
+    loader.unload(this.loader, reason);
+    delete this.loader;
+  },
+};
+
+var SrcdirProvider = {
+  load: function(done) {
+    let srcdir = Services.prefs.getComplexValue("devtools.loader.srcdir",
+                                                Ci.nsISupportsString);
+    srcdir = OS.Path.normalize(srcdir.data.trim());
+    let devtoolsDir = OS.Path.join(srcdir, "browser/devtools");
+    let toolkitDir = OS.Path.join(srcdir, "toolkit/devtools");
+
+    this.loader = new loader.Loader({
+      paths: {
+        "": "resource://gre/modules/commonjs/",
+        "devtools/toolkit": "file://" + toolkitDir,
+        "devtools": "file://" + devtoolsDir,
+        "main": "file://" + devtoolsDir + "/main.js"
+      },
+      globals: {}
+    });
+
+    this.main = loader.main(this.loader, "main");
+
+    return this._writeManifest(devtoolsDir).then((data) => {
+      this._writeManifest(toolkitDir);
+    }).then(null, Cu.reportError);
+  },
+
+  unload: function(reason) {
+    loader.unload(this.loader, reason);
+    delete this.loader;
+  },
+
+  _readFile: function(filename) {
+    let deferred = Promise.defer();
+    let file = new FileUtils.File(filename);
+    NetUtil.asyncFetch(file, (inputStream, status) => {
+      if (!Components.isSuccessCode(status)) {
+        deferred.reject(new Error("Couldn't load manifest: " + filename + "\n"));
+        return;
+      }
+      var data = NetUtil.readInputStreamToString(inputStream, inputStream.available());
+      deferred.resolve(data);
+    });
+    return deferred.promise;
+  },
+
+  _writeFile: function(filename, data) {
+    let deferred = Promise.defer();
+    let file = new FileUtils.File(filename);
+
+    var ostream = FileUtils.openSafeFileOutputStream(file)
+
+    var converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"].
+                    createInstance(Ci.nsIScriptableUnicodeConverter);
+    converter.charset = "UTF-8";
+    var istream = converter.convertToInputStream(data);
+    NetUtil.asyncCopy(istream, ostream, (status) => {
+      if (!Components.isSuccessCode(status)) {
+        deferred.reject(new Error("Couldn't write manifest: " + filename + "\n"));
+        return;
+      }
+
+      deferred.resolve(null);
+    });
+    return deferred.promise;
+  },
+
+  _writeManifest: function(dir) {
+    return this._readFile(dir + "/jar.mn").then((data) => {
+      // The file data is contained within inputStream.
+      // You can read it into a string with
+      let entries = [];
+      let lines = data.split(/\n/);
+      let preprocessed = /^\s*\*/;
+      let contentEntry = new RegExp("^\\s+content/(\\w+)/(\\S+)\\s+\\((\\S+)\\)");
+      for (let line of lines) {
+        if (preprocessed.test(line)) {
+          dump("Unable to override preprocessed file: " + line + "\n");
+          continue;
+        }
+        let match = contentEntry.exec(line);
+        if (match) {
+          let entry = "override chrome://" + match[1] + "/content/" + match[2] + "\tfile://" + dir + "/" + match[3];
+          entries.push(entry);
+        }
+      }
+      return this._writeFile(dir + "/chrome.manifest", entries.join("\n"));
+    }).then(() => {
+      Components.manager.addBootstrappedManifestLocation(new FileUtils.File(dir));
+    });
+  }
+};
+
+this.devtools = {
+  _provider: null,
+
+  get main() this._provider.main,
+
+  // This is a gross gross hack.  In one place (computed-view.js) we use
+  // Iterator, but the addon-sdk loader takes Iterator off the global.
+  // Give computed-view.js a way to get back to the Iterator until we have
+  // a chance to fix that crap.
+  _Iterator: Iterator,
+
+  setProvider: function(provider) {
+    if (provider === this._provider) {
+      return;
+    }
+
+    if (this._provider) {
+      delete this.require;
+      this._provider.unload("newprovider");
+      gDevTools._teardown();
+    }
+    this._provider = provider;
+    this._provider.load();
+    this.require = loader.Require(this._provider.loader, { id: "devtools" })
+
+    let exports = this._provider.main;
+    // Let clients find exports on this object.
+    Object.getOwnPropertyNames(exports).forEach(key => {
+      // Lazily load here to avoid triggering lazy inits in the tools.
+      XPCOMUtils.defineLazyGetter(this, key, () => exports[key]);
+    });
+  },
+
+  /**
+   * Choose a default tools provider based on the preferences.
+   */
+  _chooseProvider: function() {
+    if (Services.prefs.prefHasUserValue("devtools.loader.srcdir")) {
+      this.setProvider(SrcdirProvider);
+    } else {
+      this.setProvider(BuiltinProvider);
+    }
+  },
+
+  /**
+   * Reload the current provider.
+   */
+  reload: function() {
+    var events = devtools.require("sdk/system/events");
+    events.emit("startupcache-invalidate", {});
+
+    this._provider.unload("reload");
+    delete this._provider;
+    gDevTools._teardown();
+    this._chooseProvider();
+  },
+};
 
 const FORBIDDEN_IDS = new Set(["toolbox", ""]);
 
@@ -34,11 +208,6 @@ this.DevTools = function DevTools() {
   EventEmitter.decorate(this);
 
   Services.obs.addObserver(this.destroy, "quit-application", false);
-
-  // Register the set of default tools
-  for (let definition of defaultTools) {
-    this.registerTool(definition);
-  }
 }
 
 DevTools.prototype = {
@@ -189,7 +358,7 @@ DevTools.prototype = {
     }
     else {
       // No toolbox for target, create one
-      toolbox = new Toolbox(target, toolId, hostType);
+      toolbox = new devtools.Toolbox(target, toolId, hostType);
 
       this._toolboxes.set(target, toolbox);
 
@@ -242,6 +411,15 @@ DevTools.prototype = {
     return toolbox.destroy();
   },
 
+  /**
+   * Called to tear down a tools provider.
+   */
+  _teardown: function DT_teardown() {
+    for (let [target, toolbox] of this._toolboxes) {
+      toolbox.destroy();
+    }
+  },
+
   /**
    * All browser windows have been closed, tidy up remaining objects.
    */
@@ -284,12 +462,20 @@ let gDevToolsBrowser = {
    * of there
    */
   toggleToolboxCommand: function(gBrowser) {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
     let toolbox = gDevTools.getToolbox(target);
 
     toolbox ? toolbox.destroy() : gDevTools.showToolbox(target);
   },
 
+  toggleBrowserToolboxCommand: function(gBrowser) {
+    let target = devtools.TargetFactory.forWindow(gBrowser.ownerDocument.defaultView);
+    let toolbox = gDevTools.getToolbox(target);
+
+    toolbox ? toolbox.destroy()
+     : gDevTools.showToolbox(target, "inspector", Toolbox.HostType.WINDOW);
+  },
+
   /**
    * This function is for the benefit of Tools:{toolId} commands,
    * triggered from the WebDeveloper menu and keyboard shortcuts.
@@ -305,11 +491,11 @@ let gDevToolsBrowser = {
    *   and the host is a window, we raise the toolbox window
    */
   selectToolCommand: function(gBrowser, toolId) {
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
     let toolbox = gDevTools.getToolbox(target);
 
     if (toolbox && toolbox.currentToolId == toolId) {
-      if (toolbox.hostType == Toolbox.HostType.WINDOW) {
+      if (toolbox.hostType == devtools.Toolbox.HostType.WINDOW) {
         toolbox.raise();
       } else {
         toolbox.destroy();
@@ -532,8 +718,8 @@ let gDevToolsBrowser = {
     for (let win of gDevToolsBrowser._trackedBrowserWindows) {
 
       let hasToolbox = false;
-      if (TargetFactory.isKnownTab(win.gBrowser.selectedTab)) {
+      if (devtools.TargetFactory.isKnownTab(win.gBrowser.selectedTab)) {
-        let target = TargetFactory.forTab(win.gBrowser.selectedTab);
+        let target = devtools.TargetFactory.forTab(win.gBrowser.selectedTab);
         if (gDevTools._toolboxes.has(target)) {
           hasToolbox = true;
         }
@@ -624,6 +810,7 @@ let gDevToolsBrowser = {
     Services.obs.removeObserver(gDevToolsBrowser.destroy, "quit-application");
   },
 }
+
 this.gDevToolsBrowser = gDevToolsBrowser;
 
 gDevTools.on("tool-registered", function(ev, toolId) {
@@ -639,3 +826,6 @@ gDevTools.on("toolbox-ready", gDevToolsBrowser._updateMenuCheckbox);
 gDevTools.on("toolbox-destroyed", gDevToolsBrowser._updateMenuCheckbox);
 
 Services.obs.addObserver(gDevToolsBrowser.destroy, "quit-application", false);
+
+// Now, load the tools.
+devtools._chooseProvider();

browser/devtools/framework/sidebar.js

@@ -4,12 +4,8 @@
  * 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/. */
 
-const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+var Promise = require("sdk/core/promise");
-
+var EventEmitter = require("devtools/shared/event-emitter");
-this.EXPORTED_SYMBOLS = ["ToolSidebar"];
-
-Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
 
 const XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
@@ -24,7 +20,7 @@ const XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  * @param {Boolean} showTabstripe
  *  Show the tabs.
  */
-this.ToolSidebar = function ToolSidebar(tabbox, panel, showTabstripe=true)
+function ToolSidebar(tabbox, panel, showTabstripe=true)
 {
   EventEmitter.decorate(this);
 
@@ -41,6 +37,8 @@ this.ToolSidebar = function ToolSidebar(tabbox, panel, showTabstripe=true)
   }
 }
 
+exports.ToolSidebar = ToolSidebar;
+
 ToolSidebar.prototype = {
   /**
    * Register a tab. A tab is a document.

browser/devtools/framework/target.js

@@ -4,17 +4,14 @@
 
 "use strict";
 
-this.EXPORTED_SYMBOLS = [ "TargetFactory" ];
+const {Cc, Ci, Cu} = require("chrome");
 
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+var Promise = require("sdk/core/promise");
+var EventEmitter = require("devtools/shared/event-emitter");
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-
 XPCOMUtils.defineLazyModuleGetter(this, "DebuggerServer",
   "resource://gre/modules/devtools/dbg-server.jsm");
-
 XPCOMUtils.defineLazyModuleGetter(this, "DebuggerClient",
   "resource://gre/modules/devtools/dbg-client.jsm");
 
@@ -24,7 +21,7 @@ const promiseTargets = new WeakMap();
 /**
  * Functions for creating Targets
  */
-this.TargetFactory = {
+exports.TargetFactory = {
   /**
    * Construct a Target
    * @param {XULTab} tab
@@ -95,8 +92,8 @@ this.TargetFactory = {
    */
   allTargets: function TF_allTargets() {
     let windows = [];
-    let wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+    let wm = Cc["@mozilla.org/appshell/window-mediator;1"]
-                       .getService(Components.interfaces.nsIWindowMediator);
+                       .getService(Ci.nsIWindowMediator);
     let en = wm.getXULWindowEnumerator(null);
     while (en.hasMoreElements()) {
       windows.push(en.getNext());

browser/devtools/framework/test/browser_devtools_api.js

@@ -7,10 +7,8 @@ const Cu = Components.utils;
 const toolId = "test-tool";
 
 let tempScope = {};
-Cu.import("resource:///modules/devtools/EventEmitter.jsm", tempScope);
+Cu.import("resource:///modules/devtools/shared/event-emitter.js", tempScope);
 let EventEmitter = tempScope.EventEmitter;
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
 
 function test() {
   addTab("about:blank", function(aBrowser, aTab) {

browser/devtools/framework/test/browser_new_activation_workflow.js

@@ -8,8 +8,6 @@ const Cu = Components.utils;
 let toolbox, target;
 
 let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
 
 function test() {
   addTab("about:blank", function(aBrowser, aTab) {

browser/devtools/framework/test/browser_target_events.js

@@ -2,10 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-var tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-var TargetFactory = tempScope.TargetFactory;
-
 var target;
 
 function test()

browser/devtools/framework/test/browser_toolbox_dynamic_registration.js

@@ -4,10 +4,6 @@
 
 let toolbox;
 
-let temp = {};
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
-
 function test()
 {
   waitForExplicitFinish();

browser/devtools/framework/test/browser_toolbox_hosts.js

@@ -6,11 +6,7 @@ let temp = {}
 Cu.import("resource:///modules/devtools/gDevTools.jsm", temp);
 let DevTools = temp.DevTools;
 
-Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
+let Toolbox = devtools.Toolbox;
-let Toolbox = temp.Toolbox;
-
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
 
 let toolbox, target;
 

browser/devtools/framework/test/browser_toolbox_ready.js

@@ -2,10 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 function test()
 {
   waitForExplicitFinish();

browser/devtools/framework/test/browser_toolbox_sidebar.js

@@ -3,11 +3,7 @@
 
 function test() {
   const Cu = Components.utils;
-  let tempScope = {};
+  let {ToolSidebar} = devtools.require("devtools/framework/sidebar");
-  Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
-  Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-  Cu.import("resource:///modules/devtools/Sidebar.jsm", tempScope);
-  let {TargetFactory: TargetFactory, gDevTools: gDevTools, ToolSidebar: ToolSidebar} = tempScope;
 
   const toolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
                   "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css' type='text/css'?>" +

browser/devtools/framework/test/browser_toolbox_window_shortcuts.js

@@ -1,10 +1,7 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let temp = {};
+let Toolbox = devtools.Toolbox;
-Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
-let Toolbox = temp.Toolbox;
-temp = null;
 
 let toolbox, toolIDs, idIndex;
 

browser/devtools/framework/test/browser_toolbox_window_title_changes.js

@@ -1,16 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
+let Toolbox = devtools.Toolbox;
 let temp = {};
-Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
-let Toolbox = temp.Toolbox;
-temp = {};
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
-temp = {};
-Cu.import("resource:///modules/devtools/gDevTools.jsm", temp);
-let gDevTools = temp.gDevTools;
-temp = {};
 Cu.import("resource://gre/modules/Services.jsm", temp);
 let Services = temp.Services;
 temp = null;

browser/devtools/framework/test/head.js

@@ -2,14 +2,17 @@
  * 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/. */
 
+let TargetFactory = gDevTools.TargetFactory;
+
 let tempScope = {};
-Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
 Components.utils.import("resource://gre/modules/devtools/Console.jsm", tempScope);
 let console = tempScope.console;
 Components.utils.import("resource://gre/modules/commonjs/sdk/core/promise.js", tempScope);
 let Promise = tempScope.Promise;
 
+let {devtools} = Components.utils.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
+
 /**
  * Open a new tab at a URL and call a callback on load
  */

browser/devtools/framework/toolbox-hosts.js

@@ -4,13 +4,12 @@
 
 "use strict";
 
-const Cu = Components.utils;
+const {Cu} = require("chrome");
+
+let Promise = require("sdk/core/promise");
+let EventEmitter = require("devtools/shared/event-emitter");
 
 Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-
-this.EXPORTED_SYMBOLS = [ "Hosts" ];
 
 /**
  * A toolbox host represents an object that contains a toolbox (e.g. the
@@ -21,7 +20,7 @@ this.EXPORTED_SYMBOLS = [ "Hosts" ];
  * destroy() - destroy the host's UI
  */
 
-this.Hosts = {
+exports.Hosts = {
   "bottom": BottomHost,
   "side": SidebarHost,
   "window": WindowHost

browser/devtools/framework/toolbox.js

@@ -4,16 +4,17 @@
 
 "use strict";
 
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+const {Cc, Ci, Cu} = require("chrome");
+
+let Promise = require("sdk/core/promise");
+let EventEmitter = require("devtools/shared/event-emitter");
 
 Cu.import('resource://gre/modules/XPCOMUtils.jsm');
 Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
 Cu.import("resource:///modules/devtools/gDevTools.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "Hosts",
+loader.lazyGetter(this, "Hosts", () => require("devtools/framework/toolbox-hosts").Hosts);
-                                  "resource:///modules/devtools/ToolboxHosts.jsm");
+
 XPCOMUtils.defineLazyModuleGetter(this, "CommandUtils",
                                   "resource:///modules/devtools/DeveloperToolbar.jsm");
 
@@ -34,78 +35,14 @@ XPCOMUtils.defineLazyGetter(this, "toolboxStrings", function() {
 });
 
 XPCOMUtils.defineLazyGetter(this, "Requisition", function() {
-  Cu.import("resource://gre/modules/devtools/Require.jsm");
+  let scope = {};
-  Cu.import("resource:///modules/devtools/gcli.jsm");
+  Cu.import("resource://gre/modules/devtools/Require.jsm", scope);
+  Cu.import("resource:///modules/devtools/gcli.jsm", scope);
 
-  return require('gcli/cli').Requisition;
+  let req = scope.require;
+  return req('gcli/cli').Requisition;
 });
 
-this.EXPORTED_SYMBOLS = [ "Toolbox" ];
-
-// This isn't the best place for this, but I don't know what is right now
-
-/**
- * Implementation of 'promised', while we wait for bug 790195 to be fixed.
- * @see Consuming promises in https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/api-utils/promise.html
- * @see https://bugzilla.mozilla.org/show_bug.cgi?id=790195
- * @see https://github.com/mozilla/addon-sdk/blob/master/packages/api-utils/lib/promise.js#L179
- */
-Promise.promised = (function() {
-  // Note: Define shortcuts and utility functions here in order to avoid
-  // slower property accesses and unnecessary closure creations on each
-  // call of this popular function.
-
-  var call = Function.call;
-  var concat = Array.prototype.concat;
-
-  // Utility function that does following:
-  // execute([ f, self, args...]) => f.apply(self, args)
-  function execute(args) { return call.apply(call, args); }
-
-  // Utility function that takes promise of `a` array and maybe promise `b`
-  // as arguments and returns promise for `a.concat(b)`.
-  function promisedConcat(promises, unknown) {
-    return promises.then(function(values) {
-      return Promise.resolve(unknown).then(function(value) {
-        return values.concat([ value ]);
-      });
-    });
-  }
-
-  return function promised(f, prototype) {
-    /**
-    Returns a wrapped `f`, which when called returns a promise that resolves to
-    `f(...)` passing all the given arguments to it, which by the way may be
-    promises. Optionally second `prototype` argument may be provided to be used
-    a prototype for a returned promise.
-
-    ## Example
-
-    var promise = promised(Array)(1, promise(2), promise(3))
-    promise.then(console.log) // => [ 1, 2, 3 ]
-    **/
-
-    return function promised() {
-      // create array of [ f, this, args... ]
-      return concat.apply([ f, this ], arguments).
-          // reduce it via `promisedConcat` to get promised array of fulfillments
-          reduce(promisedConcat, Promise.resolve([], prototype)).
-          // finally map that to promise of `f.apply(this, args...)`
-          then(execute);
-    };
-  };
-})();
-
-/**
- * Convert an array of promises to a single promise, which is resolved (with an
- * array containing resolved values) only when all the component promises are
- * resolved.
- */
-Promise.all = Promise.promised(Array);
-
-
-
-
 /**
  * A "Toolbox" is the component that holds all the tools for one specific
  * target. Visually, it's a document that includes the tools tabs and all
@@ -118,7 +55,7 @@ Promise.all = Promise.promised(Array);
  * @param {Toolbox.HostType} hostType
  *        Type of host that will host the toolbox (e.g. sidebar, window)
  */
-this.Toolbox = function Toolbox(target, selectedTool, hostType) {
+function Toolbox(target, selectedTool, hostType) {
   this._target = target;
   this._toolPanels = new Map();
 
@@ -152,6 +89,7 @@ this.Toolbox = function Toolbox(target, selectedTool, hostType) {
   gDevTools.on("tool-registered", this._toolRegistered);
   gDevTools.on("tool-unregistered", this._toolUnregistered);
 }
+exports.Toolbox = Toolbox;
 
 /**
  * The toolbox can be 'hosted' either embedded in a browser window

browser/devtools/inspector/CmdInspect.jsm

@@ -10,8 +10,8 @@ Cu.import('resource://gre/modules/XPCOMUtils.jsm');
 
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
                                   "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
-                                  "resource:///modules/devtools/Target.jsm");
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 /**
  * 'inspect' command
@@ -30,7 +30,7 @@ gcli.addCommand({
   ],
   exec: function Command_inspect(args, context) {
     let gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
 
     return gDevTools.showToolbox(target, "inspector").then(function(toolbox) {
       toolbox.getCurrentPanel().selection.setNode(args.selector, "gcli");

browser/devtools/inspector/Makefile.in

@@ -13,3 +13,4 @@ include $(topsrcdir)/config/rules.mk
 
 libs::
 	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools/
+	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools/inspector

browser/devtools/inspector/breadcrumbs.js

@@ -4,15 +4,11 @@
  * 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/. */
 
-const Cc = Components.classes;
+const {Cc, Cu, Ci} = require("chrome");
-const Cu = Components.utils;
-const Ci = Components.interfaces;
 
 const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
 const ENSURE_SELECTION_VISIBLE_DELAY = 50; // ms
 
-this.EXPORTED_SYMBOLS = ["HTMLBreadcrumbs"];
-
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
@@ -44,7 +40,7 @@ const LOW_PRIORITY_ELEMENTS = {
  *   else select the node;
  * . If the selected node is the last node displayed, append its first (if any).
  */
-this.HTMLBreadcrumbs = function HTMLBreadcrumbs(aInspector)
+function HTMLBreadcrumbs(aInspector)
 {
   this.inspector = aInspector;
   this.selection = this.inspector.selection;
@@ -54,6 +50,8 @@ this.HTMLBreadcrumbs = function HTMLBreadcrumbs(aInspector)
   this._init();
 }
 
+exports.HTMLBreadcrumbs = HTMLBreadcrumbs;
+
 HTMLBreadcrumbs.prototype = {
   _init: function BC__init()
   {

browser/devtools/inspector/highlighter.js

@@ -4,16 +4,13 @@
  * 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/. */
 
-const Cu = Components.utils;
+const {Cu, Cc, Ci} = require("chrome");
-const Cc = Components.classes;
-const Ci = Components.interfaces;
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
 
-this.EXPORTED_SYMBOLS = ["Highlighter"];
+let EventEmitter = require("devtools/shared/event-emitter");
 
 const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
   // add ":visited" and ":link" after bug 713106 is fixed
@@ -74,7 +71,7 @@ const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
  * @param aInspector Inspector panel.
  * @param aToolbox The toolbox holding the inspector.
  */
-this.Highlighter = function Highlighter(aTarget, aInspector, aToolbox)
+function Highlighter(aTarget, aInspector, aToolbox)
 {
   this.target = aTarget;
   this.tab = aTarget.tab;
@@ -89,6 +86,8 @@ this.Highlighter = function Highlighter(aTarget, aInspector, aToolbox)
   this._init();
 }
 
+exports.Highlighter = Highlighter;
+
 Highlighter.prototype = {
   get selection() {
     return this.inspector.selection;

browser/devtools/inspector/inspector-panel.js

@@ -4,28 +4,20 @@
  * 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/. */
 
-const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+const {Cc, Ci, Cu, Cr} = require("chrome");
 
-this.EXPORTED_SYMBOLS = ["InspectorPanel"];
-
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-Cu.import("resource:///modules/devtools/CssLogic.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "MarkupView",
+let Promise = require("sdk/core/promise");
-  "resource:///modules/devtools/MarkupView.jsm");
+let EventEmitter = require("devtools/shared/event-emitter");
-XPCOMUtils.defineLazyModuleGetter(this, "Selection",
+let {CssLogic} = require("devtools/styleinspector/css-logic");
-  "resource:///modules/devtools/Selection.jsm");
+
-XPCOMUtils.defineLazyModuleGetter(this, "HTMLBreadcrumbs",
+loader.lazyGetter(this, "MarkupView", () => require("devtools/markupview/markup-view").MarkupView);
-  "resource:///modules/devtools/Breadcrumbs.jsm");
+loader.lazyGetter(this, "Selection", () => require ("devtools/inspector/selection").Selection);
-XPCOMUtils.defineLazyModuleGetter(this, "Highlighter",
+loader.lazyGetter(this, "HTMLBreadcrumbs", () => require("devtools/inspector/breadcrumbs").HTMLBreadcrumbs);
-  "resource:///modules/devtools/Highlighter.jsm");
+loader.lazyGetter(this, "Highlighter", () => require("devtools/inspector/highlighter").Highlighter);
-XPCOMUtils.defineLazyModuleGetter(this, "ToolSidebar",
+loader.lazyGetter(this, "ToolSidebar", () => require("devtools/framework/sidebar").ToolSidebar);
-  "resource:///modules/devtools/Sidebar.jsm");
+loader.lazyGetter(this, "SelectorSearch", () => require("devtools/inspector/selector-search").SelectorSearch);
-XPCOMUtils.defineLazyModuleGetter(this, "SelectorSearch",
-  "resource:///modules/devtools/SelectorSearch.jsm");
 
 const LAYOUT_CHANGE_TIMER = 250;
 
@@ -35,7 +27,7 @@ const LAYOUT_CHANGE_TIMER = 250;
  * the markup view, and the sidebar (computed view, rule view
  * and layout view).
  */
-this.InspectorPanel = function InspectorPanel(iframeWindow, toolbox) {
+function InspectorPanel(iframeWindow, toolbox) {
   this._toolbox = toolbox;
   this._target = toolbox._target;
   this.panelDoc = iframeWindow.document;
@@ -45,6 +37,8 @@ this.InspectorPanel = function InspectorPanel(iframeWindow, toolbox) {
   EventEmitter.decorate(this);
 }
 
+exports.InspectorPanel = InspectorPanel;
+
 InspectorPanel.prototype = {
   /**
    * open is effectively an asynchronous constructor
@@ -623,18 +617,18 @@ InspectorPanel.prototype = {
 /////////////////////////////////////////////////////////////////////////
 //// Initializers
 
-XPCOMUtils.defineLazyGetter(InspectorPanel.prototype, "strings",
+loader.lazyGetter(InspectorPanel.prototype, "strings",
   function () {
     return Services.strings.createBundle(
             "chrome://browser/locale/devtools/inspector.properties");
   });
 
-XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
+loader.lazyGetter(this, "clipboardHelper", function() {
   return Cc["@mozilla.org/widget/clipboardhelper;1"].
     getService(Ci.nsIClipboardHelper);
 });
 
 
-XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
+loader.lazyGetter(this, "DOMUtils", function () {
   return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 });

browser/devtools/inspector/selection.js

@@ -4,10 +4,8 @@
  * 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/. */
 
-const Cu = Components.utils;
+const {Cu} = require("chrome");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+let EventEmitter = require("devtools/shared/event-emitter");
-
-this.EXPORTED_SYMBOLS = ["Selection"];
 
 /**
  * API
@@ -58,13 +56,15 @@ this.EXPORTED_SYMBOLS = ["Selection"];
  *    the ndoe change.
  *
  */
-this.Selection = function Selection(node=null, track={attributes:true,detached:true}) {
+function Selection(node=null, track={attributes:true,detached:true}) {
   EventEmitter.decorate(this);
   this._onMutations = this._onMutations.bind(this);
   this.track = track;
   this.setNode(node);
 }
 
+exports.Selection = Selection;
+
 Selection.prototype = {
   _node: null,
 
@@ -162,7 +162,7 @@ Selection.prototype = {
 
   isNode: function SN_isNode() {
     return (this.node &&
-            !Components.utils.isDeadWrapper(this.node) &&
+            !Cu.isDeadWrapper(this.node) &&
             this.node.ownerDocument &&
             this.node.ownerDocument.defaultView &&
             this.node instanceof this.node.ownerDocument.defaultView.Node);

browser/devtools/inspector/selector-search.js

@@ -4,13 +4,11 @@
 
 "use strict";
 
-const Cu = Components.utils;
+const {Cu} = require("chrome");
 
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+loader.lazyGetter(this, "AutocompletePopup", () => {
-
+  return Cu.import("resource:///modules/devtools/AutocompletePopup.jsm", {}).AutocompletePopup;
-XPCOMUtils.defineLazyModuleGetter(this, "AutocompletePopup",
+});
-                                  "resource:///modules/devtools/AutocompletePopup.jsm");
-this.EXPORTED_SYMBOLS = ["SelectorSearch"];
 
 // Maximum number of selector suggestions shown in the panel.
 const MAX_SUGGESTIONS = 15;
@@ -28,7 +26,7 @@ const MAX_SUGGESTIONS = 15;
  *        The method to callback when a search is available.
  *        This method is called with the matched node as the first argument.
  */
-this.SelectorSearch = function(aContentDocument, aInputNode, aCallback) {
+function SelectorSearch(aContentDocument, aInputNode, aCallback) {
   this.doc = aContentDocument;
   this.callback = aCallback;
   this.searchBox = aInputNode;
@@ -66,7 +64,9 @@ this.SelectorSearch = function(aContentDocument, aInputNode, aCallback) {
   this.searchBox.addEventListener("keypress", this._onSearchKeypress, true);
 }
 
-this.SelectorSearch.prototype = {
+exports.SelectorSearch = SelectorSearch;
+
+SelectorSearch.prototype = {
 
   // The possible states of the query.
   States: {

browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js

@@ -1,16 +1,9 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let temp = {};
+let Promise = devtools.require("sdk/core/promise");
-Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", temp);
+let Toolbox = devtools.Toolbox;
-let Promise = temp.Promise;
+let TargetFactory = devtools.TargetFactory;
-temp = {};
-Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
-let Toolbox = temp.Toolbox;
-temp = {};
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
-temp = null;
 
 function test() {
   waitForExplicitFinish();

browser/devtools/inspector/test/browser_inspector_initialization.js

@@ -6,10 +6,6 @@
 let doc;
 let salutation;
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 function createDocument()
 {
   doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +

browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js

@@ -1,10 +1,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 
 let doc;

browser/devtools/inspector/test/browser_inspector_sidebarstate.js

@@ -1,10 +1,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 let doc;
 let inspector;
 

browser/devtools/inspector/test/head.js

@@ -8,8 +8,10 @@ const Cc = Components.classes;
 let tempScope = {};
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm", tempScope);
 let LayoutHelpers = tempScope.LayoutHelpers;
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+
-let TargetFactory = tempScope.TargetFactory;
+let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
+let TargetFactory = devtools.TargetFactory;
+
 Components.utils.import("resource://gre/modules/devtools/Console.jsm", tempScope);
 let console = tempScope.console;
 
@@ -146,3 +148,4 @@ function focusSearchBoxUsingShortcut(panelWin, callback) {
   }, false);
   EventUtils.synthesizeKey(name, modifiers);
 }
+

browser/devtools/inspector/test/helpers.js

@@ -24,7 +24,8 @@ let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).req
 Components.utils.import("resource:///modules/devtools/gcli.jsm", {});
 
 let console = (Cu.import("resource://gre/modules/devtools/Console.jsm", {})).console;
-let TargetFactory = (Cu.import("resource:///modules/devtools/Target.jsm", {})).TargetFactory;
+let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
 
 let Promise = (Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", {})).Promise;
 let assert = { ok: ok, is: is, log: info };

browser/devtools/layoutview/test/browser_layoutview.js

@@ -1,9 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {};
+let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = devtools.TargetFactory;
-let TargetFactory = tempScope.TargetFactory;
 
 function test() {
   waitForExplicitFinish();

browser/devtools/layoutview/view.js

@@ -9,9 +9,10 @@
 const Cu = Components.utils;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
-Cu.import("resource:///modules/devtools/CssLogic.jsm");
 Cu.import("resource:///modules/devtools/gDevTools.jsm");
 
+let {CssLogic} = devtools.require("devtools/styleinspector/css-logic");
+
 function LayoutView(aInspector, aWindow)
 {
   this.inspector = aInspector;

browser/devtools/main.js

@@ -4,71 +4,55 @@
 
 "use strict";
 
-this.EXPORTED_SYMBOLS = [
+const {Cc, Ci, Cu} = require("chrome");
-                          "defaultTools",
-                          "webConsoleDefinition",
-                          "debuggerDefinition",
-                          "inspectorDefinition",
-                          "styleEditorDefinition",
-                          "netMonitorDefinition"
-                        ];
 
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
+// Add a couple of globals that we use all over this package.
+let loaderOptions = require("@loader/options")
+
+loaderOptions.globals.loader = {
+  lazyGetter: XPCOMUtils.defineLazyGetter.bind(XPCOMUtils),
+  lazyImporter: XPCOMUtils.defineLazyModuleGetter.bind(XPCOMUtils)
+};
+
+let systemEvents = require("sdk/system/events");
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+
+loader.lazyGetter(exports, "Toolbox", () => require("devtools/framework/toolbox").Toolbox);
+loader.lazyGetter(exports, "TargetFactory", () => require("devtools/framework/target").TargetFactory);
+
+loader.lazyGetter(this, "osString", () => Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS);
+
+// Panels
+loader.lazyGetter(this, "InspectorPanel", function() require("devtools/inspector/inspector-panel").InspectorPanel);
+loader.lazyImporter(this, "WebConsolePanel", "resource:///modules/WebConsolePanel.jsm");
+loader.lazyImporter(this, "DebuggerPanel", "resource:///modules/devtools/DebuggerPanel.jsm");
+loader.lazyImporter(this, "StyleEditorPanel", "resource:///modules/devtools/StyleEditorPanel.jsm");
+loader.lazyImporter(this, "ProfilerPanel", "resource:///modules/devtools/ProfilerPanel.jsm");
+loader.lazyImporter(this, "NetMonitorPanel", "resource:///modules/devtools/NetMonitorPanel.jsm");
+
+// Strings
 const inspectorProps = "chrome://browser/locale/devtools/inspector.properties";
 const debuggerProps = "chrome://browser/locale/devtools/debugger.properties";
 const styleEditorProps = "chrome://browser/locale/devtools/styleeditor.properties";
 const webConsoleProps = "chrome://browser/locale/devtools/webconsole.properties";
 const profilerProps = "chrome://browser/locale/devtools/profiler.properties";
 const netMonitorProps = "chrome://browser/locale/devtools/netmonitor.properties";
+loader.lazyGetter(this, "webConsoleStrings", () => Services.strings.createBundle(webConsoleProps));
+loader.lazyGetter(this, "debuggerStrings", () => Services.strings.createBundle(debuggerProps));
+loader.lazyGetter(this, "styleEditorStrings", () => Services.strings.createBundle(styleEditorProps));
+loader.lazyGetter(this, "inspectorStrings", () => Services.strings.createBundle(inspectorProps));
+loader.lazyGetter(this, "profilerStrings",() => Services.strings.createBundle(profilerProps));
+loader.lazyGetter(this, "netMonitorStrings", () => Services.strings.createBundle(netMonitorProps));
 
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+let Tools = {};
-Cu.import("resource://gre/modules/Services.jsm");
+exports.Tools = Tools;
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-
-XPCOMUtils.defineLazyGetter(this, "osString",
-  function() Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS);
-
-// Panels
-XPCOMUtils.defineLazyModuleGetter(this, "WebConsolePanel",
-  "resource:///modules/WebConsolePanel.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "DebuggerPanel",
-  "resource:///modules/devtools/DebuggerPanel.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "StyleEditorPanel",
-  "resource:///modules/devtools/StyleEditorPanel.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "InspectorPanel",
-  "resource:///modules/devtools/InspectorPanel.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "ProfilerPanel",
-  "resource:///modules/devtools/ProfilerPanel.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "NetMonitorPanel",
-  "resource:///modules/devtools/NetMonitorPanel.jsm");
-
-// Strings
-XPCOMUtils.defineLazyGetter(this, "webConsoleStrings",
-  function() Services.strings.createBundle(webConsoleProps));
-
-XPCOMUtils.defineLazyGetter(this, "debuggerStrings",
-  function() Services.strings.createBundle(debuggerProps));
-
-XPCOMUtils.defineLazyGetter(this, "styleEditorStrings",
-  function() Services.strings.createBundle(styleEditorProps));
-
-XPCOMUtils.defineLazyGetter(this, "inspectorStrings",
-  function() Services.strings.createBundle(inspectorProps));
-
-XPCOMUtils.defineLazyGetter(this, "profilerStrings",
-  function() Services.strings.createBundle(profilerProps));
-
-XPCOMUtils.defineLazyGetter(this, "netMonitorStrings",
-  function() Services.strings.createBundle(netMonitorProps));
 
 // Definitions
-let webConsoleDefinition = {
+Tools.webConsole = {
   id: "webconsole",
   key: l10n("cmd.commandkey", webConsoleStrings),
   accesskey: l10n("webConsoleCmd.accesskey", webConsoleStrings),
@@ -88,7 +72,7 @@ let webConsoleDefinition = {
   }
 };
 
-let debuggerDefinition = {
+Tools.jsdebugger = {
   id: "jsdebugger",
   key: l10n("open.commandkey", debuggerStrings),
   accesskey: l10n("debuggerMenu.accesskey", debuggerStrings),
@@ -110,7 +94,7 @@ let debuggerDefinition = {
   }
 };
 
-let inspectorDefinition = {
+Tools.inspector = {
   id: "inspector",
   accesskey: l10n("inspector.accesskey", inspectorStrings),
   key: l10n("inspector.commandkey", inspectorStrings),
@@ -131,7 +115,7 @@ let inspectorDefinition = {
   }
 };
 
-let styleEditorDefinition = {
+Tools.styleEditor = {
   id: "styleeditor",
   key: l10n("open.commandkey", styleEditorStrings),
   ordinal: 3,
@@ -152,7 +136,7 @@ let styleEditorDefinition = {
   }
 };
 
-let profilerDefinition = {
+Tools.jsprofiler = {
   id: "jsprofiler",
   accesskey: l10n("profiler.accesskey", profilerStrings),
   key: l10n("profiler2.commandkey", profilerStrings),
@@ -174,7 +158,7 @@ let profilerDefinition = {
   }
 };
 
-let netMonitorDefinition = {
+Tools.netMonitor = {
   id: "netmonitor",
   accesskey: l10n("netmonitor.accesskey", netMonitorStrings),
   key: l10n("netmonitor.commandkey", netMonitorStrings),
@@ -196,18 +180,31 @@ let netMonitorDefinition = {
   }
 };
 
-this.defaultTools = [
+let defaultTools = [
-  styleEditorDefinition,
+  Tools.styleEditor,
-  webConsoleDefinition,
+  Tools.webConsole,
-  debuggerDefinition,
+  Tools.jsdebugger,
-  inspectorDefinition,
+  Tools.inspector,
-  netMonitorDefinition
+  Tools.netMonitor
 ];
 
 if (Services.prefs.getBoolPref("devtools.profiler.enabled")) {
-  defaultTools.push(profilerDefinition);
+  defaultTools.push(Tools.jsprofiler);
 }
 
+for (let definition of defaultTools) {
+  gDevTools.registerTool(definition);
+}
+
+systemEvents.on("sdk:loader:destroy", function onunload({subject, data: reason}) {
+  if (subject.wrappedJSObject === require("@loader/unload")) {
+    systemEvents.off("sdk:loader:destroy", onunload);
+    for (let definition of defaultTools) {
+      gDevTools.unregisterTool(definition.id);
+    }
+  }
+}, true);
+
 /**
  * Lookup l10n string from a string bundle.
  *

browser/devtools/markupview/Makefile.in

@@ -11,6 +11,6 @@ VPATH		= @srcdir@
 include $(DEPTH)/config/autoconf.mk
 
 libs::
-	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
+	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools/markupview
 
 include $(topsrcdir)/config/rules.mk

browser/devtools/markupview/markup-view.js

@@ -4,9 +4,7 @@
  * 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/. */
 
-const Cc = Components.classes;
+const {Cc, Cu, Ci} = require("chrome");
-const Cu = Components.utils;
-const Ci = Components.interfaces;
 
 // Page size for pageup/pagedown
 const PAGE_SIZE = 10;
@@ -14,15 +12,13 @@ const PAGE_SIZE = 10;
 const PREVIEW_AREA = 700;
 const DEFAULT_MAX_CHILDREN = 100;
 
-this.EXPORTED_SYMBOLS = ["MarkupView"];
+let {UndoStack} = require("devtools/shared/undo");
+let EventEmitter = require("devtools/shared/event-emitter");
+let {editableField, InplaceEditor} = require("devtools/shared/inplace-editor");
 
 Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
-Cu.import("resource:///modules/devtools/CssRuleView.jsm");
-Cu.import("resource:///modules/devtools/InplaceEditor.jsm");
 Cu.import("resource:///modules/devtools/Templater.jsm");
-Cu.import("resource:///modules/devtools/Undo.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 /**
  * Vocabulary for the purposes of this file:
@@ -42,7 +38,7 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
  * @param iframe aFrame
  *        An iframe in which the caller has kindly loaded markup-view.xhtml.
  */
-this.MarkupView = function MarkupView(aInspector, aFrame, aControllerWindow)
+function MarkupView(aInspector, aFrame, aControllerWindow)
 {
   this._inspector = aInspector;
   this._frame = aFrame;
@@ -75,6 +71,8 @@ this.MarkupView = function MarkupView(aInspector, aFrame, aControllerWindow)
   this._initPreview();
 }
 
+exports.MarkupView = MarkupView;
+
 MarkupView.prototype = {
   _selectedContainer: null,
 
@@ -1526,7 +1524,6 @@ function whitespaceTextFilter(aNode)
     }
 }
 
-XPCOMUtils.defineLazyGetter(MarkupView.prototype, "strings", function () {
+loader.lazyGetter(MarkupView.prototype, "strings", () => Services.strings.createBundle(
-  return Services.strings.createBundle(
+  "chrome://browser/locale/devtools/inspector.properties"
-          "chrome://browser/locale/devtools/inspector.properties");
+));
-});

browser/devtools/markupview/test/browser_inspector_markup_edit.js

@@ -20,7 +20,7 @@ function test() {
   let inspector;
   let {
     getInplaceEditorForSpan: inplaceEditor
-  } = Cu.import("resource:///modules/devtools/InplaceEditor.jsm", {});
+  } = devtools.require("devtools/shared/inplace-editor");
 
   waitForExplicitFinish();
 

browser/devtools/markupview/test/head.js

@@ -4,11 +4,8 @@
 
 const Cu = Components.utils;
 
-let TargetFactory = (function() {
+let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
-  let tempScope = {};
+let TargetFactory = devtools.TargetFactory;
-  Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
-  return tempScope.TargetFactory;
-})();
 
 // Clear preferences that may be set during the course of tests.
 function clearUserPrefs()

browser/devtools/netmonitor/NetMonitorPanel.jsm

@@ -10,7 +10,7 @@ const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
 this.EXPORTED_SYMBOLS = ["NetMonitorPanel"];
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Promise",
   "resource://gre/modules/commonjs/sdk/core/promise.js");

browser/devtools/netmonitor/netmonitor-controller.js

@@ -13,7 +13,7 @@ Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
 Cu.import("resource:///modules/source-editor.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 Cu.import("resource:///modules/devtools/SideMenuWidget.jsm");
 Cu.import("resource:///modules/devtools/VariablesView.jsm");
 Cu.import("resource:///modules/devtools/ViewHelpers.jsm");

browser/devtools/netmonitor/test/head.js

@@ -6,8 +6,8 @@ const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
 
 let { Services } = Cu.import("resource://gre/modules/Services.jsm", {});
 let { Promise } = Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", {});
-let { TargetFactory } = Cu.import("resource:///modules/devtools/Target.jsm", {});
+let { gDevTools, devtools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
-let { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
 
 const EXAMPLE_URL = "http://example.com/browser/browser/devtools/netmonitor/test/";
 

browser/devtools/profiler/ProfilerPanel.jsm

@@ -9,7 +9,7 @@ const Cu = Components.utils;
 Cu.import("resource:///modules/devtools/gDevTools.jsm");
 Cu.import("resource:///modules/devtools/ProfilerController.jsm");
 Cu.import("resource:///modules/devtools/ProfilerHelpers.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 this.EXPORTED_SYMBOLS = ["ProfilerPanel"];

browser/devtools/profiler/test/head.js

@@ -5,11 +5,9 @@ let temp = {};
 const PROFILER_ENABLED = "devtools.profiler.enabled";
 const REMOTE_ENABLED = "devtools.debugger.remote-enabled";
 
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
-
 Cu.import("resource:///modules/devtools/gDevTools.jsm", temp);
 let gDevTools = temp.gDevTools;
+let TargetFactory = temp.TargetFactory;
 
 Cu.import("resource://gre/modules/devtools/dbg-server.jsm", temp);
 let DebuggerServer = temp.DebuggerServer;

browser/devtools/responsivedesign/responsivedesign.jsm

@@ -11,8 +11,7 @@ Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/devtools/gDevTools.jsm");
 Cu.import("resource:///modules/devtools/FloatingScrollbars.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
-Cu.import("resource:///modules/devtools/Target.jsm");
 
 this.EXPORTED_SYMBOLS = ["ResponsiveUIManager"];
 

browser/devtools/responsivedesign/test/head.js

@@ -3,9 +3,8 @@
 
 "use strict";
 
-let tempScope = {};
+let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = devtools.TargetFactory;
-let TargetFactory = tempScope.TargetFactory;
 
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));

browser/devtools/responsivedesign/test/helpers.js

@@ -24,7 +24,8 @@ let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).req
 Components.utils.import("resource:///modules/devtools/gcli.jsm", {});
 
 let console = (Cu.import("resource://gre/modules/devtools/Console.jsm", {})).console;
-let TargetFactory = (Cu.import("resource:///modules/devtools/Target.jsm", {})).TargetFactory;
+let devtools = (Cu.import("resource:///modules/devtools/gDevTools.jsm", {})).devtools;
+let TargetFactory = devtools.TargetFactory;
 
 let Promise = (Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", {})).Promise;
 let assert = { ok: ok, is: is, log: info };

browser/devtools/scratchpad/scratchpad.js

@@ -27,7 +27,6 @@ Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 Cu.import("resource:///modules/devtools/scratchpad-manager.jsm");
 Cu.import("resource://gre/modules/jsdebugger.jsm");
 Cu.import("resource:///modules/devtools/gDevTools.jsm");
-Cu.import("resource:///modules/devtools/Target.jsm");
 Cu.import("resource://gre/modules/osfile.jsm");
 Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
 
@@ -1095,7 +1094,7 @@ var Scratchpad = {
    */
   openWebConsole: function SP_openWebConsole()
   {
-    let target = TargetFactory.forTab(this.gBrowser.selectedTab);
+    let target = devtools.TargetFactory.forTab(this.gBrowser.selectedTab);
     gDevTools.showToolbox(target, "webconsole");
     this.browserWindow.focus();
   },

browser/devtools/shared/DeveloperToolbar.jsm

@@ -30,8 +30,8 @@ XPCOMUtils.defineLazyModuleGetter(this, "PageErrorListener",
 XPCOMUtils.defineLazyModuleGetter(this, "PluralForm",
                                   "resource://gre/modules/PluralForm.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
-                                  "resource:///modules/devtools/Target.jsm");
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "require",
                                   "resource://gre/modules/devtools/Require.jsm");
@@ -162,7 +162,7 @@ let CommandUtils = {
     Object.defineProperty(environment, "target", {
       get: function() {
         let tab = chromeDocument.defaultView.getBrowser().selectedTab;
-        return TargetFactory.forTab(tab);
+        return devtools.TargetFactory.forTab(tab);
       },
       enumerable: true
     });

browser/devtools/shared/Makefile.in

@@ -15,3 +15,4 @@ include $(topsrcdir)/config/rules.mk
 libs::
 	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
 	$(NSINSTALL) $(srcdir)/widgets/*.jsm $(FINAL_TARGET)/modules/devtools
+	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools/shared

browser/devtools/shared/event-emitter.js

@@ -2,13 +2,20 @@
  * 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/. */
 
-this.EXPORTED_SYMBOLS = ["EventEmitter"];
-
 /**
  * EventEmitter.
  */
+
 this.EventEmitter = function EventEmitter() {};
 
+if (typeof(require) === "function") {
+   module.exports = EventEmitter;
+   var {Cu} = require("chrome");
+} else {
+  var EXPORTED_SYMBOLS = ["EventEmitter"];
+  var Cu = this["Components"].utils;
+}
+
 /**
  * Decorate an object with event emitter functionality.
  *
@@ -102,7 +109,7 @@ EventEmitter.prototype = {
         catch (ex) {
           // Prevent a bad listener from interfering with the others.
           let msg = ex + ": " + ex.stack;
-          Components.utils.reportError(msg);
+          Cu.reportError(msg);
           dump(msg + "\n");
         }
       }

browser/devtools/shared/inplace-editor.js

@@ -24,8 +24,7 @@
 
 "use strict";
 
-const Ci = Components.interfaces;
+const {Ci, Cu} = require("chrome");
-const Cu = Components.utils;
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
@@ -35,11 +34,6 @@ const FOCUS_BACKWARD = Ci.nsIFocusManager.MOVEFOCUS_BACKWARD;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
-this.EXPORTED_SYMBOLS = ["editableItem",
-                         "editableField",
-                         "getInplaceEditorForSpan",
-                         "InplaceEditor"];
-
 /**
  * Mark a span editable.  |editableField| will listen for the span to
  * be focused and create an InlineEditor to handle text input.
@@ -81,6 +75,8 @@ function editableField(aOptions)
   });
 }
 
+exports.editableField = editableField;
+
 /**
  * Handle events for an element that should respond to
  * clicks and sit in the editing tab order, and call
@@ -94,7 +90,7 @@ function editableField(aOptions)
  * @param {function} aCallback
  *        Called when the editor is activated.
  */
-this.editableItem = function editableItem(aOptions, aCallback)
+function editableItem(aOptions, aCallback)
 {
   let trigger = aOptions.trigger || "click"
   let element = aOptions.element;
@@ -136,16 +132,20 @@ this.editableItem = function editableItem(aOptions, aCallback)
   element._editable = true;
 }
 
+exports.editableItem = this.editableItem;
+
 /*
  * Various API consumers (especially tests) sometimes want to grab the
  * inplaceEditor expando off span elements. However, when each global has its
  * own compartment, those expandos live on Xray wrappers that are only visible
  * within this JSM. So we provide a little workaround here.
  */
-this.getInplaceEditorForSpan = function getInplaceEditorForSpan(aSpan)
+
+function getInplaceEditorForSpan(aSpan)
 {
   return aSpan.inplaceEditor;
 };
+exports.getInplaceEditorForSpan = getInplaceEditorForSpan;
 
 function InplaceEditor(aOptions, aEvent)
 {
@@ -206,6 +206,8 @@ function InplaceEditor(aOptions, aEvent)
   }
 }
 
+exports.InplaceEditor = InplaceEditor;
+
 InplaceEditor.prototype = {
   _createInput: function InplaceEditor_createEditor()
   {

browser/devtools/shared/test/browser_eventemitter_basic.js

@@ -8,7 +8,7 @@ function test() {
 
 
 function testEmitter(aObject) {
-  Cu.import("resource:///modules/devtools/EventEmitter.jsm", this);
+  Cu.import("resource:///modules/devtools/shared/event-emitter.js", this);
 
   let emitter;
 

browser/devtools/shared/test/head.js

@@ -2,7 +2,8 @@
  * 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/. */
 
-let TargetFactory = (Cu.import("resource:///modules/devtools/Target.jsm", {})).TargetFactory;
+let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
 
 /**
  * Open a new tab at a URL and call a callback on load

browser/devtools/shared/test/unit/test_undoStack.js

@@ -4,7 +4,18 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 const Cu = Components.utils;
-Cu.import("resource:///modules/devtools/Undo.jsm")
+let {Loader} = Cu.import("resource://gre/modules/commonjs/toolkit/loader.js", {});
+
+let loader = new Loader.Loader({
+  paths: {
+    "": "resource://gre/modules/commonjs/",
+    "devtools": "resource:///modules/devtools",
+  },
+  globals: {},
+});
+let require = loader.Require(loader, { id: "undo-test" })
+
+let {UndoStack} = require("devtools/shared/undo");
 
 const MAX_SIZE = 5;
 

browser/devtools/shared/undo.js

@@ -3,9 +3,6 @@
 /* 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/. */
-const Cu = Components.utils;
-
-this.EXPORTED_SYMBOLS = ["UndoStack"];
 
 /**
  * A simple undo stack manager.
@@ -19,12 +16,14 @@ this.EXPORTED_SYMBOLS = ["UndoStack"];
  * @param integer aMaxUndo Maximum number of undo steps.
  *   defaults to 50.
  */
-this.UndoStack = function UndoStack(aMaxUndo)
+function UndoStack(aMaxUndo)
 {
   this.maxUndo = aMaxUndo || 50;
   this._stack = [];
 }
 
+exports.UndoStack = UndoStack;
+
 UndoStack.prototype = {
   // Current index into the undo stack.  Is positioned after the last
   // currently-applied change.

browser/devtools/styleeditor/StyleEditorPanel.jsm

@@ -11,7 +11,7 @@ this.EXPORTED_SYMBOLS = ["StyleEditorPanel"];
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 
 XPCOMUtils.defineLazyModuleGetter(this, "StyleEditorChrome",
                         "resource:///modules/devtools/StyleEditorChrome.jsm");

browser/devtools/styleeditor/test/browser_styleeditor_bug_826982_location_changed.js

@@ -1,10 +1,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 function test() {
   let notificationBox, styleEditor;
   let alertActive1_called = false;

browser/devtools/styleeditor/test/browser_styleeditor_reopen.js

@@ -2,10 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
-
 function test() {
 
   // http rather than chrome to improve coverage

browser/devtools/styleeditor/test/head.js

@@ -7,8 +7,8 @@ const TEST_BASE_HTTPS = "https://example.com/browser/browser/devtools/styleedito
 const TEST_HOST = 'mochi.test:8888';
 
 let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
+let TargetFactory = tempScope.devtools.TargetFactory;
 Components.utils.import("resource://gre/modules/devtools/Console.jsm", tempScope);
 let console = tempScope.console;
 

browser/devtools/styleeditor/test/helpers.js

@@ -24,7 +24,8 @@ let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).req
 Components.utils.import("resource:///modules/devtools/gcli.jsm", {});
 
 let console = (Cu.import("resource://gre/modules/devtools/Console.jsm", {})).console;
-let TargetFactory = (Cu.import("resource:///modules/devtools/Target.jsm", {})).TargetFactory;
+let devtools = (Cu.import("resource:///modules/devtools/gDevTools.jsm", {})).devtools;
+let TargetFactory = devtools.TargetFactory;
 
 let Promise = (Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", {})).Promise;
 let assert = { ok: ok, is: is, log: info };

browser/devtools/styleinspector/Makefile.in

@@ -13,4 +13,4 @@ include $(DEPTH)/config/autoconf.mk
 include $(topsrcdir)/config/rules.mk
 
 libs::
-	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
+	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools/styleinspector

browser/devtools/styleinspector/computed-view.js

@@ -4,25 +4,22 @@
  * 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/. */
 
-const Ci = Components.interfaces;
+const {Cc, Ci, Cu} = require("chrome");
-const Cc = Components.classes;
-const Cu = Components.utils;
-const FILTER_CHANGED_TIMEOUT = 300;
 
-const HTML_NS = "http://www.w3.org/1999/xhtml";
+let ToolDefinitions = require("main").Tools;
-const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+let {CssLogic} = require("devtools/styleinspector/css-logic");
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/PluralForm.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/CssLogic.jsm");
 Cu.import("resource:///modules/devtools/Templater.jsm");
-Cu.import("resource:///modules/devtools/ToolDefinitions.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
-                                  "resource:///modules/devtools/gDevTools.jsm");
 
-this.EXPORTED_SYMBOLS = ["CssHtmlTree", "PropertyView"];
+const FILTER_CHANGED_TIMEOUT = 300;
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 /**
  * Helper for long-running processes that should yield occasionally to
@@ -46,7 +43,7 @@ this.EXPORTED_SYMBOLS = ["CssHtmlTree", "PropertyView"];
 function UpdateProcess(aWin, aGenerator, aOptions)
 {
   this.win = aWin;
-  this.iter = Iterator(aGenerator);
+  this.iter = devtools._Iterator(aGenerator);
   this.onItem = aOptions.onItem || function() {};
   this.onBatch = aOptions.onBatch || function () {};
   this.onDone = aOptions.onDone || function() {};
@@ -120,7 +117,7 @@ UpdateProcess.prototype = {
  * @params {StyleInspector} aStyleInspector The owner of this CssHtmlTree
  * @constructor
  */
-this.CssHtmlTree = function CssHtmlTree(aStyleInspector)
+function CssHtmlTree(aStyleInspector)
 {
   this.styleWindow = aStyleInspector.window;
   this.styleDocument = aStyleInspector.window.document;
@@ -533,7 +530,7 @@ CssHtmlTree.prototype = {
  * @param {string} aName the CSS property name for which this PropertyView
  * instance will render the rules.
  */
-this.PropertyView = function PropertyView(aTree, aName)
+function PropertyView(aTree, aName)
 {
   this.tree = aTree;
   this.name = aName;
@@ -826,7 +823,7 @@ SelectorView.prototype = {
    *
    * These statuses are localized inside the styleinspector.properties string
    * bundle.
-   * @see CssLogic.jsm - the CssLogic.STATUS array.
+   * @see css-logic.js - the CssLogic.STATUS array.
    *
    * @return {void}
    */
@@ -935,7 +932,7 @@ SelectorView.prototype = {
     if (contentSheet) {
       let target = inspector.target;
 
-      if (styleEditorDefinition.isTargetSupported(target)) {
+      if (ToolDefinitions.styleEditor.isTargetSupported(target)) {
         gDevTools.showToolbox(target, "styleeditor").then(function(toolbox) {
           toolbox.getCurrentPanel().selectStyleSheet(styleSheet, line);
         });
@@ -951,3 +948,6 @@ SelectorView.prototype = {
     }
   },
 };
+
+exports.CssHtmlTree = CssHtmlTree;
+exports.PropertyView = PropertyView;

browser/devtools/styleinspector/computedview.xhtml

@@ -35,8 +35,9 @@
 
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
-        Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
+        let {devtools} = Components.utils.import("resource:///modules/devtools/gDevTools.jsm", {});
-        this.computedview = new ComputedViewTool(panel, window, iframe);
+        let inspector = devtools.require("devtools/styleinspector/style-inspector");
+        this.computedview = new inspector.ComputedViewTool(panel, window, iframe);
       }
       window.onunload = function() {
         if (this.computedview) {

browser/devtools/styleinspector/css-logic.js

@@ -37,9 +37,8 @@
  * - how browsers process CSS
  * @constructor
  */
-const Cc = Components.classes;
+
-const Ci = Components.interfaces;
+const {Cc, Ci, Cu} = require("chrome");
-const Cu = Components.utils;
 
 const RX_UNIVERSAL_SELECTOR = /\s*\*\s*/g;
 const RX_NOT = /:not\((.*?)\)/g;
@@ -52,14 +51,14 @@ const RX_PSEUDO = /\s*:?:([\w-]+)(\(?\)?)\s*/g;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
-this.EXPORTED_SYMBOLS = ["CssLogic", "CssSelector"];
+function CssLogic()
-
-this.CssLogic = function CssLogic()
 {
   // The cache of examined CSS properties.
   _propertyInfos: {};
 }
 
+exports.CssLogic = CssLogic;
+
 /**
  * Special values for filter, in addition to an href these values can be used
  */
@@ -1247,7 +1246,7 @@ CssRule.prototype = {
  * @param {string} aSelector The selector that we wish to investigate.
  * @param {Number} aIndex The index of the selector within it's rule.
  */
-this.CssSelector = function CssSelector(aCssRule, aSelector, aIndex)
+function CssSelector(aCssRule, aSelector, aIndex)
 {
   this._cssRule = aCssRule;
   this.text = aSelector;
@@ -1256,6 +1255,8 @@ this.CssSelector = function CssSelector(aCssRule, aSelector, aIndex)
   this.selectorIndex = aIndex;
 }
 
+exports.CssSelector = CssSelector;
+
 CssSelector.prototype = {
   _matchId: null,
 

browser/devtools/styleinspector/cssruleview.xhtml

@@ -24,8 +24,9 @@
 
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
-        Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
+        let {devtools} = Components.utils.import("resource:///modules/devtools/gDevTools.jsm", {});
-        this.ruleview = new RuleViewTool(panel, window, iframe);
+        let inspector = devtools.require("devtools/styleinspector/style-inspector");
+        this.ruleview = new inspector.RuleViewTool(panel, window, iframe);
       }
       window.onunload = function() {
         if (this.ruleview) {

browser/devtools/styleinspector/rule-view.js

@@ -6,9 +6,13 @@
 
 "use strict";
 
-const Cc = Components.classes;
+const {Cc, Ci, Cu} = require("chrome");
-const Ci = Components.interfaces;
+
-const Cu = Components.utils;
+let {CssLogic} = require("devtools/styleinspector/css-logic");
+let {InplaceEditor, editableField, editableItem} = require("devtools/shared/inplace-editor");
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
@@ -24,14 +28,6 @@ const CSS_LINE_RE = /(?:[^;\(]*(?:\([^\)]*?\))?[^;\(]*)*;?/g;
 // Used to parse a single property line.
 const CSS_PROP_RE = /\s*([^:\s]*)\s*:\s*(.*?)\s*(?:! (important))?;?$/;
 
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/CssLogic.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/InplaceEditor.jsm");
-
-this.EXPORTED_SYMBOLS = ["CssRuleView",
-                         "_ElementStyle"];
-
 /**
  * Our model looks like this:
  *
@@ -88,7 +84,7 @@ function ElementStyle(aElement, aStore)
   this.populate();
 }
 // We're exporting _ElementStyle for unit tests.
-this._ElementStyle = ElementStyle;
+exports._ElementStyle = ElementStyle;
 
 ElementStyle.prototype = {
 
@@ -863,7 +859,7 @@ TextProperty.prototype = {
  *        The iframe containing the ruleview.
  * @constructor
  */
-this.CssRuleView = function CssRuleView(aDoc, aStore)
+function CssRuleView(aDoc, aStore)
 {
   this.doc = aDoc;
   this.store = aStore;
@@ -877,6 +873,8 @@ this.CssRuleView = function CssRuleView(aDoc, aStore)
   this._showEmpty();
 }
 
+exports.CssRuleView = CssRuleView;
+
 CssRuleView.prototype = {
   // The element that we're inspecting.
   _viewedElement: null,

browser/devtools/styleinspector/style-inspector.js

@@ -4,29 +4,29 @@
  * 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/. */
 
-const Cc = Components.classes;
+const {Cc, Cu, Ci} = require("chrome");
-const Cu = Components.utils;
+
-const Ci = Components.interfaces;
+let ToolDefinitions = require("main").Tools;
 
 Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/CssRuleView.jsm");
-Cu.import("resource:///modules/devtools/ToolDefinitions.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
+loader.lazyGetter(this, "gDevTools", () => Cu.import("resource:///modules/devtools/gDevTools.jsm", {}).gDevTools);
-                                  "resource:///modules/devtools/gDevTools.jsm");
+loader.lazyGetter(this, "RuleView", () => require("devtools/styleinspector/rule-view"));
+loader.lazyGetter(this, "ComputedView", () => require("devtools/styleinspector/computed-view"));
+loader.lazyGetter(this, "_strings", () => Services.strings
+  .createBundle("chrome://browser/locale/devtools/styleinspector.properties"));
+loader.lazyGetter(this, "CssLogic", () => require("devtools/styleinspector/css-logic").CssLogic);
 
 // This module doesn't currently export any symbols directly, it only
 // registers inspector tools.
-this.EXPORTED_SYMBOLS = ["RuleViewTool", "ComputedViewTool"];
 
-this.RuleViewTool = function RVT_RuleViewTool(aInspector, aWindow, aIFrame)
+function RuleViewTool(aInspector, aWindow, aIFrame)
 {
   this.inspector = aInspector;
   this.doc = aWindow.document;
   this.outerIFrame = aIFrame;
 
-  this.view = new CssRuleView(this.doc, null);
+  this.view = new RuleView.CssRuleView(this.doc, null);
   this.doc.documentElement.appendChild(this.view.element);
 
   this._changeHandler = function() {
@@ -61,7 +61,7 @@ this.RuleViewTool = function RVT_RuleViewTool(aInspector, aWindow, aIFrame)
     if (contentSheet)  {
       let target = this.inspector.target;
 
-      if (styleEditorDefinition.isTargetSupported(target)) {
+      if (ToolDefinitions.styleEditor.isTargetSupported(target)) {
         gDevTools.showToolbox(target, "styleeditor").then(function(toolbox) {
           toolbox.getCurrentPanel().selectStyleSheet(styleSheet, line);
         });
@@ -93,6 +93,8 @@ this.RuleViewTool = function RVT_RuleViewTool(aInspector, aWindow, aIFrame)
   this.onSelect();
 }
 
+exports.RuleViewTool = RuleViewTool;
+
 RuleViewTool.prototype = {
   onSelect: function RVT_onSelect(aEvent) {
     if (!this.inspector.selection.isConnected() ||
@@ -150,14 +152,14 @@ RuleViewTool.prototype = {
   }
 }
 
-this.ComputedViewTool = function CVT_ComputedViewTool(aInspector, aWindow, aIFrame)
+function ComputedViewTool(aInspector, aWindow, aIFrame)
 {
   this.inspector = aInspector;
   this.window = aWindow;
   this.document = aWindow.document;
   this.outerIFrame = aIFrame;
   this.cssLogic = new CssLogic();
-  this.view = new CssHtmlTree(this);
+  this.view = new ComputedView.CssHtmlTree(this);
 
   this._onSelect = this.onSelect.bind(this);
   this.inspector.selection.on("detached", this._onSelect);
@@ -176,6 +178,8 @@ this.ComputedViewTool = function CVT_ComputedViewTool(aInspector, aWindow, aIFra
   this.onSelect();
 }
 
+exports.ComputedViewTool = ComputedViewTool;
+
 ComputedViewTool.prototype = {
   onSelect: function CVT_onSelect(aEvent)
   {
@@ -232,18 +236,3 @@ ComputedViewTool.prototype = {
     delete this.inspector;
   }
 }
-
-XPCOMUtils.defineLazyGetter(this, "_strings", function() Services.strings
-  .createBundle("chrome://browser/locale/devtools/styleinspector.properties"));
-
-XPCOMUtils.defineLazyGetter(this, "CssLogic", function() {
-  let tmp = {};
-  Cu.import("resource:///modules/devtools/CssLogic.jsm", tmp);
-  return tmp.CssLogic;
-});
-
-XPCOMUtils.defineLazyGetter(this, "CssHtmlTree", function() {
-  let tmp = {};
-  Cu.import("resource:///modules/devtools/CssHtmlTree.jsm", tmp);
-  return tmp.CssHtmlTree;
-});

browser/devtools/styleinspector/test/browser_bug683672.js

@@ -12,9 +12,7 @@ let computedView;
 const TEST_URI = "http://example.com/browser/browser/devtools/styleinspector/test/browser_bug683672.html";
 
 let tempScope = {};
-Cu.import("resource:///modules/devtools/CssHtmlTree.jsm", tempScope);
+let {CssHtmlTree, PropertyView} = devtools.require("devtools/styleinspector/computed-view");
-let CssHtmlTree = tempScope.CssHtmlTree;
-let PropertyView = tempScope.PropertyView;
 
 function test()
 {

browser/devtools/styleinspector/test/browser_bug705707_is_content_stylesheet.js

@@ -18,9 +18,8 @@ const XUL_PRINCIPAL =  Components.classes["@mozilla.org/scriptsecuritymanager;1"
                                  .getService(Ci.nsIScriptSecurityManager)
                                  .getNoAppCodebasePrincipal(XUL_URI);
 
-let tempScope = {};
+
-Cu.import("resource:///modules/devtools/CssLogic.jsm", tempScope);
+let {CssLogic} = devtools.require("devtools/styleinspector/css-logic");
-let CssLogic = tempScope.CssLogic;
 
 function test()
 {

browser/devtools/styleinspector/test/browser_bug722196_rule_view_media_queries.js

@@ -5,9 +5,6 @@
 // Tests that we correctly display appropriate media query titles in the
 // rule view.
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-let _ElementStyle = tempScope._ElementStyle;
 let doc;
 
 const TEST_URI = "http://example.com/browser/browser/devtools/styleinspector/" +

browser/devtools/styleinspector/test/browser_bug722691_rule_view_increment.js

@@ -5,11 +5,6 @@
 // Test that increasing/decreasing values in rule view using
 // arrow keys works correctly.
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-let CssRuleView = tempScope.CssRuleView;
-let _ElementStyle = tempScope._ElementStyle;
-
 let doc;
 let ruleDialog;
 let ruleView;

browser/devtools/styleinspector/test/browser_bug_592743_specificity.js

@@ -4,12 +4,8 @@
 
 // Tests that CSS specificity is properly calculated.
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/CssLogic.jsm", tempScope);
 const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
                    .getService(Ci.inIDOMUtils);
-let CssLogic = tempScope.CssLogic;
-let CssSelector = tempScope.CssSelector;
 
 function createDocument()
 {

browser/devtools/styleinspector/test/browser_csslogic_inherited.js

@@ -4,10 +4,6 @@
 
 // Test that inherited properties are treated correctly.
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/CssLogic.jsm", tempScope);
-let CssLogic = tempScope.CssLogic;
-
 let doc;
 
 function createDocument()

browser/devtools/styleinspector/test/browser_ruleview_editor.js

@@ -2,11 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {}
-Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-let CssRuleView = tempScope.CssRuleView;
-let _ElementStyle = tempScope._ElementStyle;
-
 let doc = content.document;
 
 function expectDone(aValue, aCommit, aNext)

browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues.js

@@ -2,11 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-let CssRuleView = tempScope.CssRuleView;
-let _ElementStyle = tempScope._ElementStyle;
-
 let doc;
 let ruleDialog;
 let ruleView;

browser/devtools/styleinspector/test/browser_ruleview_inherit.js

@@ -2,11 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {}
-Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-let CssRuleView = tempScope.CssRuleView;
-let _ElementStyle = tempScope._ElementStyle;
-
 let doc;
 
 function simpleInherit()

browser/devtools/styleinspector/test/browser_ruleview_manipulation.js

@@ -2,11 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {}
-Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-let CssRuleView = tempScope.CssRuleView;
-let _ElementStyle = tempScope._ElementStyle;
-
 let doc;
 
 function simpleOverride()

browser/devtools/styleinspector/test/browser_ruleview_override.js

@@ -2,11 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {}
-Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-let CssRuleView = tempScope.CssRuleView;
-let _ElementStyle = tempScope._ElementStyle;
-
 let doc;
 
 function simpleOverride()

browser/devtools/styleinspector/test/browser_ruleview_ui.js

@@ -2,11 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {}
-Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-let CssRuleView = tempScope.CssRuleView;
-let _ElementStyle = tempScope._ElementStyle;
-
 let doc;
 let ruleDialog;
 let ruleView;

browser/devtools/styleinspector/test/browser_ruleview_update.js

@@ -2,11 +2,6 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let tempScope = {}
-Cu.import("resource:///modules/devtools/CssRuleView.jsm", tempScope);
-let CssRuleView = tempScope.CssRuleView;
-let _ElementStyle = tempScope._ElementStyle;
-
 let doc;
 let ruleDialog;
 let ruleView;

browser/devtools/styleinspector/test/head.js

@@ -4,19 +4,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 let tempScope = {};
-Cu.import("resource:///modules/devtools/CssLogic.jsm", tempScope);
-Cu.import("resource:///modules/devtools/CssHtmlTree.jsm", tempScope);
 Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
 let ConsoleUtils = tempScope.ConsoleUtils;
-let CssLogic = tempScope.CssLogic;
-let CssHtmlTree = tempScope.CssHtmlTree;
 let gDevTools = tempScope.gDevTools;
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let devtools = tempScope.devtools;
-let TargetFactory = tempScope.TargetFactory;
+let TargetFactory = devtools.TargetFactory;
+let {CssHtmlTree} = devtools.require("devtools/styleinspector/computed-view");
+let {CssRuleView, _ElementStyle} = devtools.require("devtools/styleinspector/rule-view");
+let {CssLogic, CssSelector} = devtools.require("devtools/styleinspector/css-logic");
+
 let {
   editableField,
   getInplaceEditorForSpan: inplaceEditor
-} = Cu.import("resource:///modules/devtools/InplaceEditor.jsm", {});
+} = devtools.require("devtools/shared/inplace-editor");
 Components.utils.import("resource://gre/modules/devtools/Console.jsm", tempScope);
 let console = tempScope.console;
 

browser/devtools/tilt/CmdTilt.jsm

@@ -7,9 +7,18 @@ this.EXPORTED_SYMBOLS = [ ];
 
 Components.utils.import('resource://gre/modules/XPCOMUtils.jsm');
 Components.utils.import("resource:///modules/devtools/gcli.jsm");
+Components.utils.import("resource:///modules/devtools/gDevTools.jsm");
+
+// Fetch TiltManager using the current loader, but don't save a
+// reference to it, because it might change with a tool reload.
+// We can clean this up once the command line is loadered.
+Object.defineProperty(this, "TiltManager", {
+  get: function() {
+    return devtools.require("devtools/tilt/tilt").TiltManager;
+  },
+  enumerable: true
+});
 
-XPCOMUtils.defineLazyModuleGetter(this, "TiltManager",
-                                  "resource:///modules/devtools/Tilt.jsm");
 /**
  * 'tilt' command
  */

browser/devtools/tilt/Makefile.in

@@ -13,4 +13,4 @@ include $(topsrcdir)/config/rules.mk
 
 libs::
 	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
-	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools
+	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools/tilt

browser/devtools/tilt/test/head.js

@@ -2,23 +2,15 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
+let {devtools} = Components.utils.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TiltManager = devtools.require("devtools/tilt/tilt").TiltManager;
+let TiltGL = devtools.require("devtools/tilt/tilt-gl");
+let {EPSILON, TiltMath, vec3, mat3, mat4, quat4} = devtools.require("devtools/tilt/tilt-math");
+let TiltUtils = devtools.require("devtools/tilt/tilt-utils");
+let {TiltVisualizer} = devtools.require("devtools/tilt/tilt-visualizer");
+
 let tempScope = {};
-Components.utils.import("resource:///modules/devtools/Tilt.jsm", tempScope);
-Components.utils.import("resource:///modules/devtools/TiltGL.jsm", tempScope);
-Components.utils.import("resource:///modules/devtools/TiltMath.jsm", tempScope);
-Components.utils.import("resource:///modules/devtools/TiltUtils.jsm", tempScope);
-Components.utils.import("resource:///modules/devtools/TiltVisualizer.jsm", tempScope);
 Components.utils.import("resource:///modules/devtools/LayoutHelpers.jsm", tempScope);
-let TiltManager = tempScope.TiltManager;
-let TiltGL = tempScope.TiltGL;
-let EPSILON = tempScope.EPSILON;
-let TiltMath = tempScope.TiltMath;
-let vec3 = tempScope.vec3;
-let mat3 = tempScope.mat3;
-let mat4 = tempScope.mat4;
-let quat4 = tempScope.quat4;
-let TiltUtils = tempScope.TiltUtils;
-let TiltVisualizer = tempScope.TiltVisualizer;
 let LayoutHelpers = tempScope.LayoutHelpers;
 
 

browser/devtools/tilt/tilt-gl.js

@@ -5,22 +5,21 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const Cc = Components.classes;
+const {Cc, Ci, Cu} = require("chrome");
-const Ci = Components.interfaces;
+
-const Cu = Components.utils;
+let TiltUtils = require("devtools/tilt/tilt-utils");
+let {TiltMath, mat4} = require("devtools/tilt/tilt-math");
+
+Cu.import("resource://gre/modules/Services.jsm");
 
 const WEBGL_CONTEXT_NAME = "experimental-webgl";
 
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/TiltMath.jsm");
-Cu.import("resource:///modules/devtools/TiltUtils.jsm");
-
-this.EXPORTED_SYMBOLS = ["TiltGL"];
 
 /**
  * Module containing thin wrappers around low-level WebGL functions.
  */
-this.TiltGL = {};
+let TiltGL = {};
+module.exports = TiltGL;
 
 /**
  * Contains commonly used helper methods used in any 3D application.

browser/devtools/tilt/tilt-math.js

@@ -5,19 +5,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const Cu = Components.utils;
+const {Cu} = require("chrome");
 
-Cu.import("resource:///modules/devtools/TiltUtils.jsm");
+let TiltUtils = require("devtools/tilt/tilt-utils");
-
-this.EXPORTED_SYMBOLS =
-  ["EPSILON", "TiltMath", "vec3", "mat3", "mat4", "quat4"];
 
 /**
  * Module containing high performance matrix and vector operations for WebGL.
  * Inspired by glMatrix, version 0.9.6, (c) 2011 Brandon Jones.
  */
 
-this.EPSILON = 0.01;
+let EPSILON = 0.01;
+exports.EPSILON = EPSILON;
+
 const PI_OVER_180 = Math.PI / 180;
 const INV_PI_OVER_180 = 180 / Math.PI;
 const FIFTEEN_OVER_225 = 15 / 225;
@@ -26,7 +25,7 @@ const ONE_OVER_255 = 1 / 255;
 /**
  * vec3 - 3 Dimensional Vector.
  */
-this.vec3 = {
+let vec3 = {
 
   /**
    * Creates a new instance of a vec3 using the Float32Array type.
@@ -493,10 +492,12 @@ this.vec3 = {
   }
 };
 
+exports.vec3 = vec3;
+
 /**
  * mat3 - 3x3 Matrix.
  */
-this.mat3 = {
+let mat3 = {
 
   /**
    * Creates a new instance of a mat3 using the Float32Array array type.
@@ -656,10 +657,12 @@ this.mat3 = {
   }
 };
 
+exports.mat3 = mat3;
+
 /**
  * mat4 - 4x4 Matrix.
  */
-this.mat4 = {
+let mat4 = {
 
   /**
    * Creates a new instance of a mat4 using the default Float32Array type.
@@ -1624,10 +1627,12 @@ this.mat4 = {
   }
 };
 
+exports.mat4 = mat4;
+
 /**
  * quat4 - Quaternion.
  */
-this.quat4 = {
+let quat4 = {
 
   /**
    * Creates a new instance of a quat4 using the default Float32Array type.
@@ -2113,10 +2118,12 @@ this.quat4 = {
   }
 };
 
+exports.quat4 = quat4;
+
 /**
  * Various algebraic math functions required by the engine.
  */
-this.TiltMath = {
+let TiltMath = {
 
   /**
    * Helper function, converts degrees to radians.
@@ -2305,6 +2312,8 @@ this.TiltMath = {
   }())
 };
 
+exports.TiltMath = TiltMath;
+
 // bind the owner object to the necessary functions
 TiltUtils.bindObjectFunc(vec3);
 TiltUtils.bindObjectFunc(mat3);

browser/devtools/tilt/tilt-utils.js

@@ -5,9 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const Cc = Components.classes;
+const {Cc, Ci, Cu} = require("chrome");
-const Ci = Components.interfaces;
-const Cu = Components.utils;
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@@ -15,12 +13,11 @@ Cu.import("resource:///modules/devtools/LayoutHelpers.jsm");
 
 const STACK_THICKNESS = 15;
 
-this.EXPORTED_SYMBOLS = ["TiltUtils"];
-
 /**
  * Module containing various helper functions used throughout Tilt.
  */
 this.TiltUtils = {};
+module.exports = this.TiltUtils;
 
 /**
  * Various console/prompt output functions required by the engine.

browser/devtools/tilt/tilt-visualizer-style.js

@@ -5,18 +5,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const Cu = Components.utils;
+let {TiltMath} = require("devtools/tilt/tilt-math");
-
-Cu.import("resource:///modules/devtools/TiltMath.jsm");
-
-this.EXPORTED_SYMBOLS = ["TiltVisualizerStyle"];
 let rgba = TiltMath.hex2rgba;
 
 /**
  * Various colors and style settings used throughout Tilt.
  */
-this.TiltVisualizerStyle = {
+module.exports = {
-
   canvas: {
     background: "linear-gradient(#454545 0%, #000 100%)",
   },

browser/devtools/tilt/tilt-visualizer.js

@@ -5,8 +5,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const Cu = Components.utils;
+const {Cu, Ci, ChromeWorker} = require("chrome");
-const Ci = Components.interfaces;
+
+let TiltGL = require("devtools/tilt/tilt-gl");
+let TiltUtils = require("devtools/tilt/tilt-utils");
+let TiltVisualizerStyle = require("devtools/tilt/tilt-visualizer-style");
+let {EPSILON, TiltMath, vec3, mat4, quat4} = require("devtools/tilt/tilt-math");
+let {TargetFactory} = require("devtools/framework/target");
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
 
 const ELEMENT_MIN_SIZE = 4;
 const INVISIBLE_ELEMENTS = {
@@ -46,18 +54,9 @@ const ARCBALL_ZOOM_MAX = 500;
 const ARCBALL_RESET_SPHERICAL_FACTOR = 0.1;
 const ARCBALL_RESET_LINEAR_FACTOR = 0.01;
 
-const TILT_CRAFTER = "resource:///modules/devtools/TiltWorkerCrafter.js";
+const TILT_CRAFTER = "resource:///modules/devtools/tilt/TiltWorkerCrafter.js";
-const TILT_PICKER = "resource:///modules/devtools/TiltWorkerPicker.js";
+const TILT_PICKER = "resource:///modules/devtools/tilt/TiltWorkerPicker.js";
 
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
-Cu.import("resource:///modules/devtools/Target.jsm");
-Cu.import("resource:///modules/devtools/TiltGL.jsm");
-Cu.import("resource:///modules/devtools/TiltMath.jsm");
-Cu.import("resource:///modules/devtools/TiltUtils.jsm");
-Cu.import("resource:///modules/devtools/TiltVisualizerStyle.jsm");
-
-this.EXPORTED_SYMBOLS = ["TiltVisualizer"];
 
 /**
  * Initializes the visualization presenter and controller.
@@ -71,7 +70,7 @@ this.EXPORTED_SYMBOLS = ["TiltVisualizer"];
  *      {Function} onError: optional, function called if initialization failed
  *      {Function} onLoad: optional, function called if initialization worked
  */
-this.TiltVisualizer = function TiltVisualizer(aProperties)
+function TiltVisualizer(aProperties)
 {
   // make sure the properties parameter is a valid object
   aProperties = aProperties || {};
@@ -107,6 +106,8 @@ this.TiltVisualizer = function TiltVisualizer(aProperties)
   this.controller = new TiltVisualizer.Controller(this.canvas, this.presenter);
 }
 
+exports.TiltVisualizer = TiltVisualizer;
+
 TiltVisualizer.prototype = {
 
   /**
@@ -1424,10 +1425,9 @@ TiltVisualizer.Controller.prototype = {
   _onKeyPress: function TVC__onKeyPress(e)
   {
     if (e.keyCode === e.DOM_VK_ESCAPE) {
-      let mod = {};
+      let {TiltManager} = require("devtools/tilt/tilt");
-      Cu.import("resource:///modules/devtools/Tilt.jsm", mod);
       let tilt =
-        mod.TiltManager.getTiltForBrowser(this.presenter.chromeWindow);
+        TiltManager.getTiltForBrowser(this.presenter.chromeWindow);
       e.preventDefault();
       e.stopPropagation();
       tilt.destroy(tilt.currentWindowId, true);

browser/devtools/tilt/tilt.js

@@ -5,7 +5,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const Cu = Components.utils;
+const {Cu} = require("chrome");
+
+let {TiltVisualizer} = require("devtools/tilt/tilt-visualizer");
+let TiltGL = require("devtools/tilt/tilt-gl");
+let TiltUtils = require("devtools/tilt/tilt-utils");
+let EventEmitter = require("devtools/shared/event-emitter");
+
+Cu.import("resource://gre/modules/Services.jsm");
 
 // Tilt notifications dispatched through the nsIObserverService.
 const TILT_NOTIFICATIONS = {
@@ -45,15 +52,7 @@ const TILT_NOTIFICATIONS = {
   NODE_REMOVED: "tilt-node-removed"
 };
 
-Cu.import("resource://gre/modules/Services.jsm");
+let TiltManager = {
-Cu.import("resource:///modules/devtools/TiltGL.jsm");
-Cu.import("resource:///modules/devtools/TiltUtils.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-Cu.import("resource:///modules/devtools/TiltVisualizer.jsm");
-
-this.EXPORTED_SYMBOLS = ["TiltManager"];
-
-this.TiltManager = {
   _instances: new WeakMap(),
   getTiltForBrowser: function(aChromeWindow)
   {
@@ -67,13 +66,15 @@ this.TiltManager = {
   },
 }
 
+exports.TiltManager = TiltManager;
+
 /**
  * Object managing instances of the visualizer.
  *
  * @param {Window} aWindow
  *                 the chrome window used by each visualizer instance
  */
-this.Tilt = function Tilt(aWindow)
+function Tilt(aWindow)
 {
   /**
    * Save a reference to the top-level window.

browser/devtools/webconsole/HUDService.jsm

@@ -16,8 +16,8 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
     "resource:///modules/devtools/gDevTools.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
-    "resource:///modules/devtools/Target.jsm");
+    "resource:///modules/devtools/gDevTools.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Services",
     "resource://gre/modules/Services.jsm");
@@ -31,9 +31,6 @@ XPCOMUtils.defineLazyModuleGetter(this, "DebuggerClient",
 XPCOMUtils.defineLazyModuleGetter(this, "WebConsoleUtils",
     "resource://gre/modules/devtools/WebConsoleUtils.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "webConsoleDefinition",
-    "resource:///modules/devtools/ToolDefinitions.jsm");
-
 XPCOMUtils.defineLazyModuleGetter(this, "Promise",
     "resource://gre/modules/commonjs/sdk/core/promise.js");
 
@@ -84,7 +81,7 @@ HUD_SERVICE.prototype =
   /**
    * Open a Web Console for the given target.
    *
-   * @see devtools/framework/Target.jsm for details about targets.
+   * @see devtools/framework/target.js for details about targets.
    *
    * @param object aTarget
    *        The target that the web console will connect to.
@@ -609,7 +606,7 @@ var HeadsUpDisplayUICommands = {
   toggleHUD: function UIC_toggleHUD()
   {
     let window = HUDService.currentContext();
-    let target = TargetFactory.forTab(window.gBrowser.selectedTab);
+    let target = devtools.TargetFactory.forTab(window.gBrowser.selectedTab);
     let toolbox = gDevTools.getToolbox(target);
 
     return toolbox && toolbox.currentToolId == "webconsole" ?
@@ -627,10 +624,10 @@ var HeadsUpDisplayUICommands = {
   getOpenHUD: function UIC_getOpenHUD()
   {
     let tab = HUDService.currentContext().gBrowser.selectedTab;
-    if (!tab || !TargetFactory.isKnownTab(tab)) {
+    if (!tab || !devtools.TargetFactory.isKnownTab(tab)) {
       return null;
     }
-    let target = TargetFactory.forTab(tab);
+    let target = devtools.TargetFactory.forTab(tab);
     let toolbox = gDevTools.getToolbox(target);
     let panel = toolbox ? toolbox.getPanel("webconsole") : null;
     return panel ? panel.hud : null;
@@ -679,7 +676,7 @@ var HeadsUpDisplayUICommands = {
         chrome: true,
       };
 
-      return TargetFactory.forRemoteTab(options);
+      return devtools.TargetFactory.forRemoteTab(options);
     }
 
     function openWindow(aTarget)
@@ -688,7 +685,7 @@ var HeadsUpDisplayUICommands = {
 
       let deferred = Promise.defer();
 
-      let win = Services.ww.openWindow(null, webConsoleDefinition.url, "_blank",
+      let win = Services.ww.openWindow(null, devtools.Tools.webConsole.url, "_blank",
                                        BROWSER_CONSOLE_WINDOW_FEATURES, null);
       win.addEventListener("load", function onLoad() {
         win.removeEventListener("load", onLoad);
@@ -715,3 +712,4 @@ var HeadsUpDisplayUICommands = {
 };
 
 const HUDService = new HUD_SERVICE();
+

browser/devtools/webconsole/Makefile.in

@@ -17,3 +17,6 @@ EXTRA_JS_MODULES = \
 		$(NULL)
 
 include $(topsrcdir)/config/rules.mk
+
+libs::
+	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools/framework

browser/devtools/webconsole/WebConsolePanel.jsm

@@ -17,7 +17,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "HUDService",
     "resource:///modules/HUDService.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "EventEmitter",
-    "resource:///modules/devtools/EventEmitter.jsm");
+    "resource:///modules/devtools/shared/event-emitter.js");
 
 /**
  * A DevToolPanel that controls the Web Console.
@@ -77,7 +77,6 @@ WebConsolePanel.prototype = {
 
         let webConsoleUIWindow = iframe.contentWindow.wrappedJSObject;
         let chromeWindow = iframe.ownerDocument.defaultView;
-
         return HUDService.openWebConsole(this.target, webConsoleUIWindow,
                                          chromeWindow);
       })

browser/devtools/webconsole/test/head.js

@@ -10,8 +10,7 @@ Cu.import("resource://gre/modules/devtools/WebConsoleUtils.jsm", tempScope);
 let WebConsoleUtils = tempScope.WebConsoleUtils;
 Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
 let gDevTools = tempScope.gDevTools;
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
+let TargetFactory = tempScope.devtools.TargetFactory;
-let TargetFactory = tempScope.TargetFactory;
 Components.utils.import("resource://gre/modules/devtools/Console.jsm", tempScope);
 let console = tempScope.console;
 let Promise = Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", {}).Promise;