Bug 855914 - Start using the jetpack loader in devtools. r=jwalker, f=ochameau
authorDave Camp <dcamp@mozilla.com>
Thu, 11 Apr 2013 13:59:08 -0700
changeset 130177 aeb0f8faf02b159c8261814bf55dc483ceb183bd
parent 130176 fe0a70afa6cbc059e47cc6b917bfc72565965a28
child 130178 c6aec5b4f47c6074773a86480fada9632681fe89
push id24603
push userryanvm@gmail.com
push dateMon, 29 Apr 2013 15:53:34 +0000
treeherdermozilla-central@a885c91e069a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjwalker
bugs855914
milestone23.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 855914 - Start using the jetpack loader in devtools. r=jwalker, f=ochameau
browser/base/content/nsContextMenu.js
browser/devtools/Makefile.in
browser/devtools/commandline/BuiltinCommands.jsm
browser/devtools/commandline/test/helpers.js
browser/devtools/debugger/DebuggerPanel.jsm
browser/devtools/debugger/test/head.js
browser/devtools/debugger/test/helpers.js
browser/devtools/fontinspector/test/browser_fontinspector.js
browser/devtools/framework/Makefile.in
browser/devtools/framework/Sidebar.jsm
browser/devtools/framework/Target.jsm
browser/devtools/framework/ToolDefinitions.jsm
browser/devtools/framework/Toolbox.jsm
browser/devtools/framework/ToolboxHosts.jsm
browser/devtools/framework/connect/connect.js
browser/devtools/framework/gDevTools.jsm
browser/devtools/framework/sidebar.js
browser/devtools/framework/target.js
browser/devtools/framework/test/browser_devtools_api.js
browser/devtools/framework/test/browser_new_activation_workflow.js
browser/devtools/framework/test/browser_target_events.js
browser/devtools/framework/test/browser_toolbox_dynamic_registration.js
browser/devtools/framework/test/browser_toolbox_hosts.js
browser/devtools/framework/test/browser_toolbox_options.js
browser/devtools/framework/test/browser_toolbox_ready.js
browser/devtools/framework/test/browser_toolbox_sidebar.js
browser/devtools/framework/test/browser_toolbox_window_shortcuts.js
browser/devtools/framework/test/browser_toolbox_window_title_changes.js
browser/devtools/framework/test/head.js
browser/devtools/framework/toolbox-hosts.js
browser/devtools/framework/toolbox.js
browser/devtools/inspector/Breadcrumbs.jsm
browser/devtools/inspector/CmdInspect.jsm
browser/devtools/inspector/Highlighter.jsm
browser/devtools/inspector/InspectorPanel.jsm
browser/devtools/inspector/Makefile.in
browser/devtools/inspector/Selection.jsm
browser/devtools/inspector/SelectorSearch.jsm
browser/devtools/inspector/breadcrumbs.js
browser/devtools/inspector/highlighter.js
browser/devtools/inspector/inspector-panel.js
browser/devtools/inspector/selection.js
browser/devtools/inspector/selector-search.js
browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js
browser/devtools/inspector/test/browser_inspector_initialization.js
browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
browser/devtools/inspector/test/browser_inspector_sidebarstate.js
browser/devtools/inspector/test/head.js
browser/devtools/inspector/test/helpers.js
browser/devtools/layoutview/test/browser_layoutview.js
browser/devtools/layoutview/view.js
browser/devtools/main.js
browser/devtools/markupview/Makefile.in
browser/devtools/markupview/MarkupView.jsm
browser/devtools/markupview/markup-view.js
browser/devtools/markupview/test/browser_inspector_markup_edit.js
browser/devtools/markupview/test/head.js
browser/devtools/moz.build
browser/devtools/netmonitor/NetMonitorPanel.jsm
browser/devtools/netmonitor/netmonitor-controller.js
browser/devtools/netmonitor/test/head.js
browser/devtools/profiler/ProfilerPanel.jsm
browser/devtools/profiler/test/head.js
browser/devtools/responsivedesign/responsivedesign.jsm
browser/devtools/responsivedesign/test/head.js
browser/devtools/responsivedesign/test/helpers.js
browser/devtools/scratchpad/scratchpad.js
browser/devtools/shared/DeveloperToolbar.jsm
browser/devtools/shared/EventEmitter.jsm
browser/devtools/shared/InplaceEditor.jsm
browser/devtools/shared/Makefile.in
browser/devtools/shared/Undo.jsm
browser/devtools/shared/event-emitter.js
browser/devtools/shared/inplace-editor.js
browser/devtools/shared/test/browser_eventemitter_basic.js
browser/devtools/shared/test/head.js
browser/devtools/shared/test/unit/test_undoStack.js
browser/devtools/shared/undo.js
browser/devtools/styleeditor/StyleEditorDebuggee.jsm
browser/devtools/styleeditor/StyleEditorPanel.jsm
browser/devtools/styleeditor/StyleEditorUI.jsm
browser/devtools/styleeditor/StyleSheetEditor.jsm
browser/devtools/styleeditor/test/head.js
browser/devtools/styleeditor/test/helpers.js
browser/devtools/styleinspector/CssHtmlTree.jsm
browser/devtools/styleinspector/CssLogic.jsm
browser/devtools/styleinspector/CssRuleView.jsm
browser/devtools/styleinspector/Makefile.in
browser/devtools/styleinspector/StyleInspector.jsm
browser/devtools/styleinspector/computed-view.js
browser/devtools/styleinspector/computedview.xhtml
browser/devtools/styleinspector/css-logic.js
browser/devtools/styleinspector/cssruleview.xhtml
browser/devtools/styleinspector/rule-view.js
browser/devtools/styleinspector/style-inspector.js
browser/devtools/styleinspector/test/browser_bug683672.js
browser/devtools/styleinspector/test/browser_bug705707_is_content_stylesheet.js
browser/devtools/styleinspector/test/browser_bug722196_rule_view_media_queries.js
browser/devtools/styleinspector/test/browser_bug722691_rule_view_increment.js
browser/devtools/styleinspector/test/browser_bug_592743_specificity.js
browser/devtools/styleinspector/test/browser_csslogic_inherited.js
browser/devtools/styleinspector/test/browser_ruleview_editor.js
browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues.js
browser/devtools/styleinspector/test/browser_ruleview_inherit.js
browser/devtools/styleinspector/test/browser_ruleview_manipulation.js
browser/devtools/styleinspector/test/browser_ruleview_override.js
browser/devtools/styleinspector/test/browser_ruleview_ui.js
browser/devtools/styleinspector/test/browser_ruleview_update.js
browser/devtools/styleinspector/test/head.js
browser/devtools/tilt/CmdTilt.jsm
browser/devtools/tilt/Makefile.in
browser/devtools/tilt/Tilt.jsm
browser/devtools/tilt/TiltGL.jsm
browser/devtools/tilt/TiltMath.jsm
browser/devtools/tilt/TiltUtils.jsm
browser/devtools/tilt/TiltVisualizer.jsm
browser/devtools/tilt/TiltVisualizerStyle.jsm
browser/devtools/tilt/test/browser_tilt_picking_inspector.js
browser/devtools/tilt/test/head.js
browser/devtools/tilt/tilt-gl.js
browser/devtools/tilt/tilt-math.js
browser/devtools/tilt/tilt-utils.js
browser/devtools/tilt/tilt-visualizer-style.js
browser/devtools/tilt/tilt-visualizer.js
browser/devtools/tilt/tilt.js
browser/devtools/webconsole/HUDService.jsm
browser/devtools/webconsole/Makefile.in
browser/devtools/webconsole/WebConsolePanel.jsm
browser/devtools/webconsole/test/head.js
browser/devtools/webconsole/webconsole.js
browser/locales/en-US/chrome/browser/devtools/gclicommands.properties
toolkit/components/url-classifier/tests/unit/test_prefixset.js
toolkit/devtools/debugger/dbg-transport.js
toolkit/devtools/webconsole/WebConsoleUtils.jsm
--- a/browser/base/content/nsContextMenu.js
+++ b/browser/base/content/nsContextMenu.js
@@ -432,20 +432,19 @@ nsContextMenu.prototype = {
 
   initClickToPlayItems: function() {
     this.showItem("context-ctp-play", this.onCTPPlugin);
     this.showItem("context-ctp-hide", this.onCTPPlugin);
     this.showItem("context-sep-ctp", this.onCTPPlugin);
   },
 
   inspectNode: function CM_inspectNode() {
+    let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
     let gBrowser = this.browser.ownerDocument.defaultView.gBrowser;
-    let imported = {};
-    Cu.import("resource:///modules/devtools/Target.jsm", imported);
-    let tt = imported.TargetFactory.forTab(gBrowser.selectedTab);
+    let tt = devtools.TargetFactory.forTab(gBrowser.selectedTab);
     return gDevTools.showToolbox(tt, "inspector").then(function(toolbox) {
       let inspector = toolbox.getCurrentPanel();
       inspector.selection.setNode(this.target, "browser-context-menu");
     }.bind(this));
   },
 
   // Set various context menu attributes based on the state of the world.
   setTarget: function (aNode, aRangeParent, aRangeOffset) {
new file mode 100644
--- /dev/null
+++ b/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
--- a/browser/devtools/commandline/BuiltinCommands.jsm
+++ b/browser/devtools/commandline/BuiltinCommands.jsm
@@ -9,23 +9,23 @@ const BRAND_SHORT_NAME = Cc["@mozilla.or
                            .createBundle("chrome://branding/locale/brand.properties")
                            .GetStringFromName("brandShortName");
 
 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:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource://gre/modules/osfile.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
                                   "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 /* CmdAddon ---------------------------------------------------------------- */
 
 (function(module) {
   XPCOMUtils.defineLazyModuleGetter(this, "AddonManager",
                                     "resource://gre/modules/AddonManager.jsm");
 
   // We need to use an object in which to store any flags because a primitive
@@ -400,19 +400,16 @@ XPCOMUtils.defineLazyModuleGetter(this, 
     Components.utils.import("resource://gre/modules/jsdebugger.jsm", JsDebugger);
 
     let global = Components.utils.getGlobalForObject({});
     JsDebugger.addDebuggerToGlobal(global);
 
     return global.Debugger;
   });
 
-  XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                    "resource:///modules/devtools/Target.jsm");
-
   let debuggers = [];
 
   /**
   * 'calllog' command
   */
   gcli.addCommand({
     name: "calllog",
     description: gcli.lookup("calllogDesc")
@@ -432,17 +429,17 @@ XPCOMUtils.defineLazyModuleGetter(this, 
       dbg.onEnterFrame = function(frame) {
         // BUG 773652 -  Make the output from the GCLI calllog command nicer
         contentWindow.console.log("Method call: " + this.callDescription(frame));
       }.bind(this);
 
       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");
     },
 
     callDescription: function(frame) {
       let name = "<anonymous>";
       if (frame.callee.name) {
@@ -584,17 +581,17 @@ XPCOMUtils.defineLazyModuleGetter(this, 
 
       dbg.onEnterFrame = function(frame) {
         // BUG 773652 -  Make the output from the GCLI calllog command nicer
         contentWindow.console.log(gcli.lookup("callLogChromeMethodCall") +
                                   ": " + this.callDescription(frame));
       }.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");
     },
 
     valueToString: function(value) {
       if (typeof value !== "object" || value === null)
         return uneval(value);
@@ -830,30 +827,30 @@ XPCOMUtils.defineLazyModuleGetter(this, 
   /**
   * 'console close' command
   */
   gcli.addCommand({
     name: "console close",
     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);
     }
   });
 
   /**
   * 'console open' command
   */
   gcli.addCommand({
     name: "console open",
     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");
     }
   });
 }(this));
 
 /* CmdCookie --------------------------------------------------------------- */
 
 (function(module) {
@@ -1594,16 +1591,85 @@ XPCOMUtils.defineLazyModuleGetter(this, 
   * @return string
   *         The equivalent of |aString| but safe to use in a regex.
   */
   function escapeRegex(aString) {
     return aString.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
   }
 }(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) {
   /**
   * Restart command
   *
   * @param boolean nocache
   *        Disables loading content from cache upon restart.
@@ -1988,13 +2054,13 @@ XPCOMUtils.defineLazyModuleGetter(this, 
   let eventEmitter = new EventEmitter();
   function onPaintFlashingChanged(context) {
     var gBrowser = context.environment.chromeDocument.defaultView.gBrowser;
     var tab = gBrowser.selectedTab;
     eventEmitter.emit("changed", tab);
     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);
   }
 }(this));
--- a/browser/devtools/commandline/test/helpers.js
+++ b/browser/devtools/commandline/test/helpers.js
@@ -19,17 +19,18 @@
 
 this.EXPORTED_SYMBOLS = [ 'helpers' ];
 var helpers = {};
 this.helpers = helpers;
 let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).require;
 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 };
 
 var util = require('util/util');
 
 var converters = require('gcli/converters');
 
--- a/browser/devtools/debugger/DebuggerPanel.jsm
+++ b/browser/devtools/debugger/DebuggerPanel.jsm
@@ -5,17 +5,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 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");
 
 XPCOMUtils.defineLazyModuleGetter(this, "DebuggerServer",
   "resource://gre/modules/devtools/dbg-server.jsm");
 
 function DebuggerPanel(iframeWindow, toolbox) {
--- a/browser/devtools/debugger/test/head.js
+++ b/browser/devtools/debugger/test/head.js
@@ -7,24 +7,24 @@ const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 let tempScope = {};
 Cu.import("resource://gre/modules/Services.jsm", tempScope);
 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("/"));
 Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
 
 const EXAMPLE_URL = "http://example.com/browser/browser/devtools/debugger/test/";
 const TAB1_URL = EXAMPLE_URL + "browser_dbg_tab1.html";
 const TAB2_URL = EXAMPLE_URL + "browser_dbg_tab2.html";
--- a/browser/devtools/debugger/test/helpers.js
+++ b/browser/devtools/debugger/test/helpers.js
@@ -19,17 +19,18 @@
 
 this.EXPORTED_SYMBOLS = [ 'helpers' ];
 var helpers = {};
 this.helpers = helpers;
 let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).require;
 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 };
 
 var util = require('util/util');
 
 var converters = require('gcli/converters');
 
--- a/browser/devtools/fontinspector/test/browser_fontinspector.js
+++ b/browser/devtools/fontinspector/test/browser_fontinspector.js
@@ -1,14 +1,14 @@
 /* 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 {devtools, gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
 
 let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 
 function test() {
   waitForExplicitFinish();
 
   let doc;
   let node;
--- a/browser/devtools/framework/Makefile.in
+++ b/browser/devtools/framework/Makefile.in
@@ -8,8 +8,9 @@ srcdir		= @srcdir@
 VPATH		= @srcdir@
 
 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/framework
--- a/browser/devtools/framework/connect/connect.js
+++ b/browser/devtools/framework/connect/connect.js
@@ -4,20 +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/. */
 
 "use strict";
 
 const Cu = Components.utils;
 Cu.import("resource:///modules/devtools/Target.jsm");
 Cu.import("resource:///modules/devtools/Toolbox.jsm");
-Cu.import("resource:///modules/devtools/gDevTools.jsm");
 Cu.import('resource://gre/modules/XPCOMUtils.jsm');
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/devtools/dbg-client.jsm");
+let {devtools, gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
 
 let gClient;
 let gConnectionTimeout;
 
 XPCOMUtils.defineLazyGetter(window, 'l10n', function () {
   return Services.strings.createBundle('chrome://browser/locale/devtools/connection-screen.properties');
 });
 
@@ -164,13 +164,13 @@ function handleConnectionTimeout() {
  * Opens the toolbox.
  */
 function openToolbox(form, chrome=false) {
   let options = {
     form: form,
     client: gClient,
     chrome: chrome
   };
-  TargetFactory.forRemoteTab(options).then((target) => {
-    gDevTools.showToolbox(target, "webconsole", Toolbox.HostType.WINDOW);
+  devtools.TargetFactory.forRemoteTab(options).then((target) => {
+    gDevTools.showToolbox(target, "webconsole", devtools.Toolbox.HostType.WINDOW);
     window.close();
   });
 }
--- a/browser/devtools/framework/gDevTools.jsm
+++ b/browser/devtools/framework/gDevTools.jsm
@@ -1,27 +1,200 @@
 /* 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/. */
 
 "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, "Toolbox",
-  "resource:///modules/devtools/Toolbox.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-  "resource:///modules/devtools/Target.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "OS", "resource://gre/modules/osfile.jsm");
+
+let loader = Cu.import("resource://gre/modules/commonjs/toolkit/loader.js", {}).Loader;
+
+// 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 => {
+      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", ""]);
 
 /**
  * DevTools is a class that represents a set of developer tools, it holds a
  * set of tools and keeps track of open toolboxes in the browser.
  */
 this.DevTools = function DevTools() {
@@ -29,21 +202,16 @@ this.DevTools = function DevTools() {
   this._toolboxes = new Map(); // Map<target, toolbox>
 
   // destroy() is an observer's handler so we need to preserve context.
   this.destroy = this.destroy.bind(this);
 
   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 = {
   /**
    * Register a new developer tool.
    *
    * A definition is a light object that holds different information about a
    * developer tool. This object is not supposed to have any operational code.
@@ -102,23 +270,23 @@ DevTools.prototype = {
     this._tools.delete(toolId);
 
     if (!isQuitApplication) {
       this.emit("tool-unregistered", tool);
     }
   },
 
   getDefaultTools: function DT_getDefaultTools() {
-    return defaultTools;
+    return devtools.defaultTools;
   },
 
   getAdditionalTools: function DT_getAdditionalTools() {
     let tools = [];
     for (let [key, value] of this._tools) {
-      if (defaultTools.indexOf(value) == -1) {
+      if (devtools.defaultTools.indexOf(value) == -1) {
         tools.push(value);
       }
     }
     return tools;
   },
 
   /**
    * Allow ToolBoxes to get at the list of tools that they should populate
@@ -211,17 +379,17 @@ DevTools.prototype = {
 
       return promise.then(function() {
         toolbox.raise();
         return toolbox;
       });
     }
     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);
 
       toolbox.once("destroyed", function() {
         this._toolboxes.delete(target);
         this.emit("toolbox-destroyed", target);
       }.bind(this));
 
@@ -265,16 +433,25 @@ DevTools.prototype = {
     let toolbox = this._toolboxes.get(target);
     if (toolbox == null) {
       return;
     }
     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.
    */
   destroy: function() {
     Services.obs.removeObserver(this.destroy, "quit-application");
 
     for (let [key, tool] of this._tools) {
       this.unregisterTool(key, true);
     }
@@ -306,42 +483,50 @@ let gDevToolsBrowser = {
   _trackedBrowserWindows: new Set(),
 
   /**
    * This function is for the benefit of Tools:DevToolbox in
    * browser/base/content/browser-sets.inc and should not be used outside
    * 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.
    *
    * selectToolCommand's behavior:
    * - if the toolbox is closed,
    *   we open the toolbox and select the tool
    * - if the toolbox is open, and the targetted tool is not selected,
    *   we select it
    * - if the toolbox is open, and the targetted tool is selected,
    *   and the host is NOT a window, we close the toolbox
    * - if the toolbox is open, and the targetted tool is selected,
    *   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();
       }
     } else {
       gDevTools.showToolbox(target, toolId);
     }
   },
@@ -558,18 +743,18 @@ let gDevToolsBrowser = {
   /**
    * Update the "Toggle Tools" checkbox in the developer tools menu. This is
    * called when a toolbox is created or destroyed.
    */
   _updateMenuCheckbox: function DT_updateMenuCheckbox() {
     for (let win of gDevToolsBrowser._trackedBrowserWindows) {
 
       let hasToolbox = false;
-      if (TargetFactory.isKnownTab(win.gBrowser.selectedTab)) {
-        let target = TargetFactory.forTab(win.gBrowser.selectedTab);
+      if (devtools.TargetFactory.isKnownTab(win.gBrowser.selectedTab)) {
+        let target = devtools.TargetFactory.forTab(win.gBrowser.selectedTab);
         if (gDevTools._toolboxes.has(target)) {
           hasToolbox = true;
         }
       }
 
       let broadcaster = win.document.getElementById("devtoolsMenuBroadcaster_DevToolbox");
       if (hasToolbox) {
         broadcaster.setAttribute("checked", "true");
@@ -677,8 +862,11 @@ gDevTools.on("tool-unregistered", functi
   }
   gDevToolsBrowser._removeToolFromWindows(toolId, killswitch);
 });
 
 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();
rename from browser/devtools/framework/Sidebar.jsm
rename to browser/devtools/framework/sidebar.js
--- a/browser/devtools/framework/Sidebar.jsm
+++ b/browser/devtools/framework/sidebar.js
@@ -1,51 +1,49 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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 { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
-
-this.EXPORTED_SYMBOLS = ["ToolSidebar"];
-
-Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+var Promise = require("sdk/core/promise");
+var EventEmitter = require("devtools/shared/event-emitter");
 
 const XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 /**
  * ToolSidebar provides methods to register tabs in the sidebar.
  * It's assumed that the sidebar contains a xul:tabbox.
  *
  * @param {Node} tabbox
  *  <tabbox> node;
  * @param {ToolPanel} panel
  *  Related ToolPanel instance;
  * @param {Boolean} showTabstripe
  *  Show the tabs.
  */
-this.ToolSidebar = function ToolSidebar(tabbox, panel, showTabstripe=true)
+function ToolSidebar(tabbox, panel, showTabstripe=true)
 {
   EventEmitter.decorate(this);
 
   this._tabbox = tabbox;
   this._panelDoc = this._tabbox.ownerDocument;
   this._toolPanel = panel;
 
   this._tabbox.tabpanels.addEventListener("select", this, true);
 
   this._tabs = new Map();
 
   if (!showTabstripe) {
     this._tabbox.setAttribute("hidetabs", "true");
   }
 }
 
+exports.ToolSidebar = ToolSidebar;
+
 ToolSidebar.prototype = {
   /**
    * Register a tab. A tab is a document.
    * The document must have a title, which will be used as the name of the tab.
    *
    * @param {string} tab uniq id
    * @param {string} url
    */
rename from browser/devtools/framework/Target.jsm
rename to browser/devtools/framework/target.js
--- a/browser/devtools/framework/Target.jsm
+++ b/browser/devtools/framework/target.js
@@ -1,35 +1,32 @@
 /* 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/. */
 
 "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");
 
 const targets = new WeakMap();
 const promiseTargets = new WeakMap();
 
 /**
  * Functions for creating Targets
  */
-this.TargetFactory = {
+exports.TargetFactory = {
   /**
    * Construct a Target
    * @param {XULTab} tab
    *        The tab to use in creating a new target.
    *
    * @return A target object
    */
   forTab: function TF_forTab(tab) {
@@ -90,18 +87,18 @@ this.TargetFactory = {
   },
 
   /**
    * Get all of the targets known to the local browser instance
    * @return An array of target objects
    */
   allTargets: function TF_allTargets() {
     let windows = [];
-    let wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
-                       .getService(Components.interfaces.nsIWindowMediator);
+    let wm = Cc["@mozilla.org/appshell/window-mediator;1"]
+                       .getService(Ci.nsIWindowMediator);
     let en = wm.getXULWindowEnumerator(null);
     while (en.hasMoreElements()) {
       windows.push(en.getNext());
     }
 
     return windows.map(function(window) {
       return TargetFactory.forWindow(window);
     });
--- a/browser/devtools/framework/test/browser_devtools_api.js
+++ b/browser/devtools/framework/test/browser_devtools_api.js
@@ -2,20 +2,18 @@
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // Tests devtools API
 
 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) {
     runTests(aTab);
   });
 }
 
 function runTests(aTab) {
--- a/browser/devtools/framework/test/browser_new_activation_workflow.js
+++ b/browser/devtools/framework/test/browser_new_activation_workflow.js
@@ -3,18 +3,16 @@
 
 // Tests devtools API
 
 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) {
     target = TargetFactory.forTab(gBrowser.selectedTab);
     loadWebConsole(aTab).then(function() {
       console.log('loaded');
     }, console.error);
   });
--- a/browser/devtools/framework/test/browser_target_events.js
+++ b/browser/devtools/framework/test/browser_target_events.js
@@ -1,16 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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()
 {
   waitForExplicitFinish();
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", onLoad, true);
--- a/browser/devtools/framework/test/browser_toolbox_dynamic_registration.js
+++ b/browser/devtools/framework/test/browser_toolbox_dynamic_registration.js
@@ -1,18 +1,14 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 let toolbox;
 
-let temp = {};
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
-
 function test()
 {
   waitForExplicitFinish();
 
   gBrowser.selectedTab = gBrowser.addTab();
   let target = TargetFactory.forTab(gBrowser.selectedTab);
 
   gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
--- a/browser/devtools/framework/test/browser_toolbox_hosts.js
+++ b/browser/devtools/framework/test/browser_toolbox_hosts.js
@@ -1,21 +1,17 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 let temp = {}
 Cu.import("resource:///modules/devtools/gDevTools.jsm", temp);
 let DevTools = temp.DevTools;
 
-Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
-let Toolbox = temp.Toolbox;
-
-Cu.import("resource:///modules/devtools/Target.jsm", temp);
-let TargetFactory = temp.TargetFactory;
+let Toolbox = devtools.Toolbox;
 
 let toolbox, target;
 
 function test()
 {
   waitForExplicitFinish();
 
   gBrowser.selectedTab = gBrowser.addTab();
--- a/browser/devtools/framework/test/browser_toolbox_options.js
+++ b/browser/devtools/framework/test/browser_toolbox_options.js
@@ -1,14 +1,11 @@
 /* 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 = null, toolbox = null, panelWin = null, index = 0, prefValues = [], prefNodes = [];
 
 function test() {
   waitForExplicitFinish();
 
   gBrowser.selectedTab = gBrowser.addTab();
   let target = TargetFactory.forTab(gBrowser.selectedTab);
 
--- a/browser/devtools/framework/test/browser_toolbox_ready.js
+++ b/browser/devtools/framework/test/browser_toolbox_ready.js
@@ -1,16 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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();
 
   gBrowser.selectedTab = gBrowser.addTab();
   let target = TargetFactory.forTab(gBrowser.selectedTab);
 
   gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
--- a/browser/devtools/framework/test/browser_toolbox_sidebar.js
+++ b/browser/devtools/framework/test/browser_toolbox_sidebar.js
@@ -1,18 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 function test() {
   const Cu = Components.utils;
-  let tempScope = {};
-  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;
+  let {ToolSidebar} = devtools.require("devtools/framework/sidebar");
 
   const toolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
                   "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css' type='text/css'?>" +
                   "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>" +
                   "<hbox flex='1'><description flex='1'>foo</description><splitter class='devtools-side-splitter'/>" +
                   "<tabbox flex='1' id='sidebar' class='devtools-sidebar-tabs'><tabs/><tabpanels flex='1'/></tabbox>" +
                   "</hbox>" +
                   "</window>";
--- a/browser/devtools/framework/test/browser_toolbox_window_shortcuts.js
+++ b/browser/devtools/framework/test/browser_toolbox_window_shortcuts.js
@@ -1,15 +1,12 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let temp = {};
-Cu.import("resource:///modules/devtools/Toolbox.jsm", temp);
-let Toolbox = temp.Toolbox;
-temp = null;
+let Toolbox = devtools.Toolbox;
 
 let toolbox, toolIDs, idIndex;
 
 function test() {
   waitForExplicitFinish();
 
   if (window.navigator.userAgent.indexOf("Mac OS X 10.8") != -1 ||
       window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) {
--- a/browser/devtools/framework/test/browser_toolbox_window_title_changes.js
+++ b/browser/devtools/framework/test/browser_toolbox_window_title_changes.js
@@ -1,21 +1,13 @@
 /* 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;
 
 function test() {
   waitForExplicitFinish();
 
   const URL_1 = "data:text/plain;charset=UTF-8,abcde";
--- a/browser/devtools/framework/test/head.js
+++ b/browser/devtools/framework/test/head.js
@@ -1,20 +1,23 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+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
  */
 function addTab(aURL, aCallback)
 {
   waitForExplicitFinish();
 
   gBrowser.selectedTab = gBrowser.addTab();
rename from browser/devtools/framework/ToolboxHosts.jsm
rename to browser/devtools/framework/toolbox-hosts.js
--- a/browser/devtools/framework/ToolboxHosts.jsm
+++ b/browser/devtools/framework/toolbox-hosts.js
@@ -1,32 +1,31 @@
 /* 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/. */
 
 "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
  * sidebar or a separate window). Any host object should implement the
  * following functions:
  *
  * create() - create the UI and emit a 'ready' event when the UI is ready to use
  * destroy() - destroy the host's UI
  */
 
-this.Hosts = {
+exports.Hosts = {
   "bottom": BottomHost,
   "side": SidebarHost,
   "window": WindowHost
 }
 
 /**
  * Host object for the dock on the bottom of the browser
  */
rename from browser/devtools/framework/Toolbox.jsm
rename to browser/devtools/framework/toolbox.js
--- a/browser/devtools/framework/Toolbox.jsm
+++ b/browser/devtools/framework/toolbox.js
@@ -1,24 +1,25 @@
 /* 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/. */
 
 "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",
-                                  "resource:///modules/devtools/ToolboxHosts.jsm");
+loader.lazyGetter(this, "Hosts", () => require("devtools/framework/toolbox-hosts").Hosts);
+
 XPCOMUtils.defineLazyModuleGetter(this, "CommandUtils",
                                   "resource:///modules/devtools/DeveloperToolbar.jsm");
 
 XPCOMUtils.defineLazyGetter(this, "toolboxStrings", function() {
   let bundle = Services.strings.createBundle("chrome://browser/locale/devtools/toolbox.properties");
   let l10n = function(aName, ...aArgs) {
     try {
       if (aArgs.length == 0) {
@@ -29,101 +30,37 @@ XPCOMUtils.defineLazyGetter(this, "toolb
     } catch (ex) {
       Services.console.logStringMessage("Error reading '" + aName + "'");
     }
   };
   return l10n;
 });
 
 XPCOMUtils.defineLazyGetter(this, "Requisition", function() {
-  Cu.import("resource://gre/modules/devtools/Require.jsm");
-  Cu.import("resource:///modules/devtools/gcli.jsm");
-
-  return require('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); }
+  let scope = {};
+  Cu.import("resource://gre/modules/devtools/Require.jsm", scope);
+  Cu.import("resource:///modules/devtools/gcli.jsm", scope);
 
-  // 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);
-
-
-
+  let req = scope.require;
+  return req('gcli/cli').Requisition;
+});
 
 /**
  * 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
  * the iframes where the tool panels will be living in.
  *
  * @param {object} target
  *        The object the toolbox is debugging.
  * @param {string} selectedTool
  *        Tool to select initially
  * @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();
 
   this._toolRegistered = this._toolRegistered.bind(this);
   this._toolUnregistered = this._toolUnregistered.bind(this);
   this.destroy = this.destroy.bind(this);
 
   this._target.on("close", this.destroy);
@@ -147,16 +84,17 @@ this.Toolbox = function Toolbox(target, 
   this._refreshHostTitle = this._refreshHostTitle.bind(this);
   this._target.on("navigate", this._refreshHostTitle);
   this.on("host-changed", this._refreshHostTitle);
   this.on("select", this._refreshHostTitle);
 
   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
  * or in a separate window.
  */
 Toolbox.HostType = {
   BOTTOM: "bottom",
   SIDE: "side",
--- a/browser/devtools/inspector/CmdInspect.jsm
+++ b/browser/devtools/inspector/CmdInspect.jsm
@@ -5,18 +5,18 @@
 const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
 this.EXPORTED_SYMBOLS = [ ];
 
 Cu.import("resource:///modules/devtools/gcli.jsm");
 Cu.import('resource://gre/modules/XPCOMUtils.jsm');
 
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
                                   "resource:///modules/devtools/gDevTools.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 /**
  * 'inspect' command
  */
 gcli.addCommand({
   name: "inspect",
   description: gcli.lookup("inspectDesc"),
   manual: gcli.lookup("inspectManual"),
@@ -25,15 +25,15 @@ gcli.addCommand({
       name: "selector",
       type: "node",
       description: gcli.lookup("inspectNodeDesc"),
       manual: gcli.lookup("inspectNodeManual")
     }
   ],
   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");
     }.bind(this));
   }
 });
--- a/browser/devtools/inspector/Makefile.in
+++ b/browser/devtools/inspector/Makefile.in
@@ -8,8 +8,9 @@ srcdir		= @srcdir@
 VPATH		= @srcdir@
 
 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/inspector
rename from browser/devtools/inspector/Breadcrumbs.jsm
rename to browser/devtools/inspector/breadcrumbs.js
--- a/browser/devtools/inspector/Breadcrumbs.jsm
+++ b/browser/devtools/inspector/breadcrumbs.js
@@ -1,23 +1,19 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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 Cc = Components.classes;
-const Cu = Components.utils;
-const Ci = Components.interfaces;
+const {Cc, Cu, Ci} = require("chrome");
 
 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");
 
 const LOW_PRIORITY_ELEMENTS = {
   "HEAD": true,
   "BASE": true,
   "BASEFONT": true,
@@ -39,26 +35,28 @@ const LOW_PRIORITY_ELEMENTS = {
  * FIXME: Bug 822388 - Use the BreadcrumbsWidget in the Inspector.
  *
  * Mechanism:
  * . If no nodes displayed yet:
  *    then display the ancestor of the selected node and the selected node;
  *   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;
   this.chromeWin = this.inspector.panelWin;
   this.chromeDoc = this.inspector.panelDoc;
   this.DOMHelpers = new DOMHelpers(this.chromeWin);
   this._init();
 }
 
+exports.HTMLBreadcrumbs = HTMLBreadcrumbs;
+
 HTMLBreadcrumbs.prototype = {
   _init: function BC__init()
   {
     this.container = this.chromeDoc.getElementById("inspector-breadcrumbs");
     this.container.addEventListener("mousedown", this, true);
     this.container.addEventListener("keypress", this, true);
 
     // We will save a list of already displayed nodes in this array.
rename from browser/devtools/inspector/Highlighter.jsm
rename to browser/devtools/inspector/highlighter.js
--- a/browser/devtools/inspector/Highlighter.jsm
+++ b/browser/devtools/inspector/highlighter.js
@@ -1,24 +1,21 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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;
-const Cc = Components.classes;
-const Ci = Components.interfaces;
+const {Cu, Cc, Ci} = require("chrome");
 
 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
 
 /**
  * A highlighter mechanism.
  *
  * The highlighter is built dynamically into the browser element.
@@ -69,31 +66,33 @@ const PSEUDO_CLASSES = [":hover", ":acti
 
 /**
  * Constructor.
  *
  * @param aTarget The inspection target.
  * @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;
   this.toolbox = aToolbox;
   this.browser = this.tab.linkedBrowser;
   this.chromeDoc = this.tab.ownerDocument;
   this.chromeWin = this.chromeDoc.defaultView;
   this.inspector = aInspector
 
   EventEmitter.decorate(this);
 
   this._init();
 }
 
+exports.Highlighter = Highlighter;
+
 Highlighter.prototype = {
   get selection() {
     return this.inspector.selection;
   },
 
   _init: function Highlighter__init()
   {
     this.unlockAndFocus = this.unlockAndFocus.bind(this);
rename from browser/devtools/inspector/InspectorPanel.jsm
rename to browser/devtools/inspector/inspector-panel.js
--- a/browser/devtools/inspector/InspectorPanel.jsm
+++ b/browser/devtools/inspector/inspector-panel.js
@@ -1,55 +1,49 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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 { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
-
-this.EXPORTED_SYMBOLS = ["InspectorPanel"];
+const {Cc, Ci, Cu, Cr} = require("chrome");
 
-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",
-  "resource:///modules/devtools/MarkupView.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "Selection",
-  "resource:///modules/devtools/Selection.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "HTMLBreadcrumbs",
-  "resource:///modules/devtools/Breadcrumbs.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "Highlighter",
-  "resource:///modules/devtools/Highlighter.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "ToolSidebar",
-  "resource:///modules/devtools/Sidebar.jsm");
-XPCOMUtils.defineLazyModuleGetter(this, "SelectorSearch",
-  "resource:///modules/devtools/SelectorSearch.jsm");
+let Promise = require("sdk/core/promise");
+let EventEmitter = require("devtools/shared/event-emitter");
+let {CssLogic} = require("devtools/styleinspector/css-logic");
+
+loader.lazyGetter(this, "MarkupView", () => require("devtools/markupview/markup-view").MarkupView);
+loader.lazyGetter(this, "Selection", () => require ("devtools/inspector/selection").Selection);
+loader.lazyGetter(this, "HTMLBreadcrumbs", () => require("devtools/inspector/breadcrumbs").HTMLBreadcrumbs);
+loader.lazyGetter(this, "Highlighter", () => require("devtools/inspector/highlighter").Highlighter);
+loader.lazyGetter(this, "ToolSidebar", () => require("devtools/framework/sidebar").ToolSidebar);
+loader.lazyGetter(this, "SelectorSearch", () => require("devtools/inspector/selector-search").SelectorSearch);
 
 const LAYOUT_CHANGE_TIMER = 250;
 
 /**
  * Represents an open instance of the Inspector for a tab.
  * The inspector controls the highlighter, the breadcrumbs,
  * 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;
   this.panelWin = iframeWindow;
   this.panelWin.inspector = this;
 
   EventEmitter.decorate(this);
 }
 
+exports.InspectorPanel = InspectorPanel;
+
 InspectorPanel.prototype = {
   /**
    * open is effectively an asynchronous constructor
    */
   open: function InspectorPanel_open() {
     let deferred = Promise.defer();
 
     this.onNavigatedAway = this.onNavigatedAway.bind(this);
@@ -618,23 +612,23 @@ 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);
 });
rename from browser/devtools/inspector/Selection.jsm
rename to browser/devtools/inspector/selection.js
--- a/browser/devtools/inspector/Selection.jsm
+++ b/browser/devtools/inspector/selection.js
@@ -1,18 +1,16 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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;
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
-
-this.EXPORTED_SYMBOLS = ["Selection"];
+const {Cu} = require("chrome");
+let EventEmitter = require("devtools/shared/event-emitter");
 
 /**
  * API
  *
  *   new Selection(node=null, track={attributes,detached});
  *   destroy()
  *   node (readonly)
  *   setNode(node, origin="unknown")
@@ -53,23 +51,25 @@ this.EXPORTED_SYMBOLS = ["Selection"];
  * Includes some helpers, fire some helpful events.
  *
  * @param node Inner node.
  *    Can be null. Can be (un)set in the future via the "node" property;
  * @param trackAttribute Tell if events should be fired when the attributes of
  *    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,
 
   _onMutations: function(mutations) {
     let attributeChange = false;
     let detached = false;
     let parentNode = null;
     for (let m of mutations) {
@@ -157,17 +157,17 @@ Selection.prototype = {
   isRoot: function SN_isRootNode() {
     return this.isNode() &&
            this.isConnected() &&
            this.node.ownerDocument.documentElement === this.node;
   },
 
   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);
   },
 
   isConnected: function SN_isConnected() {
     try {
       let doc = this.document;
rename from browser/devtools/inspector/SelectorSearch.jsm
rename to browser/devtools/inspector/selector-search.js
--- a/browser/devtools/inspector/SelectorSearch.jsm
+++ b/browser/devtools/inspector/selector-search.js
@@ -1,21 +1,19 @@
 /* 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/. */
 
 "use strict";
 
-const Cu = Components.utils;
-
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+const {Cu} = require("chrome");
 
-XPCOMUtils.defineLazyModuleGetter(this, "AutocompletePopup",
-                                  "resource:///modules/devtools/AutocompletePopup.jsm");
-this.EXPORTED_SYMBOLS = ["SelectorSearch"];
+loader.lazyGetter(this, "AutocompletePopup", () => {
+  return Cu.import("resource:///modules/devtools/AutocompletePopup.jsm", {}).AutocompletePopup;
+});
 
 // Maximum number of selector suggestions shown in the panel.
 const MAX_SUGGESTIONS = 15;
 
 /**
  * Converts any input box on a page to a CSS selector search and suggestion box.
  *
  * @constructor
@@ -23,17 +21,17 @@ const MAX_SUGGESTIONS = 15;
  *        The content document which inspector is attached to.
  * @param nsiInputElement aInputNode
  *        The input element to which the panel will be attached and from where
  *        search input will be taken.
  * @param Function aCallback
  *        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;
   this.panelDoc = this.searchBox.ownerDocument;
 
   // initialize variables.
   this._lastSearched = null;
   this._lastValidSearch = "";
@@ -61,17 +59,19 @@ this.SelectorSearch = function(aContentD
   };
   this.searchPopup = new AutocompletePopup(this.panelDoc, options);
 
   // event listeners.
   this.searchBox.addEventListener("command", this._onHTMLSearch, true);
   this.searchBox.addEventListener("keypress", this._onSearchKeypress, true);
 }
 
-this.SelectorSearch.prototype = {
+exports.SelectorSearch = SelectorSearch;
+
+SelectorSearch.prototype = {
 
   // The possible states of the query.
   States: {
     CLASS: "class",
     ID: "id",
     TAG: "tag",
   },
 
--- a/browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_840156_destroy_after_navigation.js
@@ -1,21 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-let temp = {};
-Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", temp);
-let Promise = temp.Promise;
-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;
+let Promise = devtools.require("sdk/core/promise");
+let Toolbox = devtools.Toolbox;
+let TargetFactory = devtools.TargetFactory;
 
 function test() {
   waitForExplicitFinish();
 
   const URL_1 = "data:text/plain;charset=UTF-8,abcde";
   const URL_2 = "data:text/plain;charset=UTF-8,12345";
 
   let target, toolbox;
--- a/browser/devtools/inspector/test/browser_inspector_initialization.js
+++ b/browser/devtools/inspector/test/browser_inspector_initialization.js
@@ -1,20 +1,16 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
 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; ' +
     'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
     '<h1>Some header text</h1>\n' +
     '<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
     '<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
     'solely to provide some things to test the inspector initialization.</p>\n' +
--- a/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
+++ b/browser/devtools/inspector/test/browser_inspector_pseudoclass_lock.js
@@ -1,15 +1,11 @@
 /* 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;
 let parentDiv, div, div2;
 let inspector;
 let ruleview;
 
 let pseudo = ":hover";
--- a/browser/devtools/inspector/test/browser_inspector_sidebarstate.js
+++ b/browser/devtools/inspector/test/browser_inspector_sidebarstate.js
@@ -1,15 +1,11 @@
 /* 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;
 
 function createDocument()
 {
   doc.body.innerHTML = '<h1>Sidebar state test</h1>';
   doc.title = "Sidebar State Test";
 
--- a/browser/devtools/inspector/test/head.js
+++ b/browser/devtools/inspector/test/head.js
@@ -3,18 +3,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const Cu = Components.utils;
 const Ci = Components.interfaces;
 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;
 
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
 Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
 
 function openInspector(callback)
@@ -141,8 +143,9 @@ function focusSearchBoxUsingShortcut(pan
 
   let searchBox = panelWin.document.getElementById("inspector-searchbox");
   searchBox.addEventListener("focus", function onFocus() {
     searchBox.removeEventListener("focus", onFocus, false);
     callback && callback();
   }, false);
   EventUtils.synthesizeKey(name, modifiers);
 }
+
--- a/browser/devtools/inspector/test/helpers.js
+++ b/browser/devtools/inspector/test/helpers.js
@@ -19,17 +19,18 @@
 
 this.EXPORTED_SYMBOLS = [ 'helpers' ];
 var helpers = {};
 this.helpers = helpers;
 let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).require;
 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 };
 
 var util = require('util/util');
 
 var converters = require('gcli/converters');
 
--- a/browser/devtools/layoutview/test/browser_layoutview.js
+++ b/browser/devtools/layoutview/test/browser_layoutview.js
@@ -1,14 +1,13 @@
 /* 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 {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
 
 function test() {
   waitForExplicitFinish();
 
   Services.prefs.setBoolPref("devtools.layoutview.enabled", true);
   Services.prefs.setBoolPref("devtools.inspector.sidebarOpen", true);
 
   let doc;
--- a/browser/devtools/layoutview/view.js
+++ b/browser/devtools/layoutview/view.js
@@ -4,19 +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/. */
 
 "use strict";
 
 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> is not always available (for Chrome targets for example)
   if (this.inspector.target.tab) {
     this.browser = aInspector.target.tab.linkedBrowser;
   }
rename from browser/devtools/framework/ToolDefinitions.jsm
rename to browser/devtools/main.js
--- a/browser/devtools/framework/ToolDefinitions.jsm
+++ b/browser/devtools/main.js
@@ -1,79 +1,65 @@
 /* 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/. */
 
 "use strict";
 
-this.EXPORTED_SYMBOLS = [
-                          "defaultTools",
-                          "webConsoleDefinition",
-                          "debuggerDefinition",
-                          "inspectorDefinition",
-                          "styleEditorDefinition",
-                          "netMonitorDefinition"
-                        ];
+const {Cc, Ci, Cu} = require("chrome");
+
+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)
+};
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
 
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+Object.defineProperty(exports, "Toolbox", {
+  get: () => require("devtools/framework/toolbox").Toolbox
+});
+Object.defineProperty(exports, "TargetFactory", {
+  get: () => 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";
-
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource://gre/modules/Services.jsm");
-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");
+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));
 
-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));
+let Tools = {};
+exports.Tools = Tools;
 
 // Definitions
-let webConsoleDefinition = {
+Tools.webConsole = {
   id: "webconsole",
   key: l10n("cmd.commandkey", webConsoleStrings),
   accesskey: l10n("webConsoleCmd.accesskey", webConsoleStrings),
   modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 0,
   icon: "chrome://browser/skin/devtools/tool-webconsole.png",
   url: "chrome://browser/content/devtools/webconsole.xul",
   label: l10n("ToolboxWebconsole.label", webConsoleStrings),
@@ -83,17 +69,17 @@ let webConsoleDefinition = {
     return true;
   },
   build: function(iframeWindow, toolbox) {
     let panel = new WebConsolePanel(iframeWindow, toolbox);
     return panel.open();
   }
 };
 
-let debuggerDefinition = {
+Tools.jsdebugger = {
   id: "jsdebugger",
   key: l10n("open.commandkey", debuggerStrings),
   accesskey: l10n("debuggerMenu.accesskey", debuggerStrings),
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 2,
   killswitch: "devtools.debugger.enabled",
   icon: "chrome://browser/skin/devtools/tool-debugger.png",
   url: "chrome://browser/content/debugger.xul",
@@ -105,17 +91,17 @@ let debuggerDefinition = {
   },
 
   build: function(iframeWindow, toolbox) {
     let panel = new DebuggerPanel(iframeWindow, toolbox);
     return panel.open();
   }
 };
 
-let inspectorDefinition = {
+Tools.inspector = {
   id: "inspector",
   accesskey: l10n("inspector.accesskey", inspectorStrings),
   key: l10n("inspector.commandkey", inspectorStrings),
   ordinal: 1,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   icon: "chrome://browser/skin/devtools/tool-inspector.png",
   url: "chrome://browser/content/devtools/inspector/inspector.xul",
   label: l10n("inspector.label", inspectorStrings),
@@ -126,17 +112,17 @@ let inspectorDefinition = {
   },
 
   build: function(iframeWindow, toolbox) {
     let panel = new InspectorPanel(iframeWindow, toolbox);
     return panel.open();
   }
 };
 
-let styleEditorDefinition = {
+Tools.styleEditor = {
   id: "styleeditor",
   key: l10n("open.commandkey", styleEditorStrings),
   ordinal: 3,
   accesskey: l10n("open.accesskey", styleEditorStrings),
   modifiers: "shift",
   icon: "chrome://browser/skin/devtools/tool-styleeditor.png",
   url: "chrome://browser/content/styleeditor.xul",
   label: l10n("ToolboxStyleEditor.label", styleEditorStrings),
@@ -147,17 +133,17 @@ let styleEditorDefinition = {
   },
 
   build: function(iframeWindow, toolbox) {
     let panel = new StyleEditorPanel(iframeWindow, toolbox);
     return panel.open();
   }
 };
 
-let profilerDefinition = {
+Tools.jsprofiler = {
   id: "jsprofiler",
   accesskey: l10n("profiler.accesskey", profilerStrings),
   key: l10n("profiler2.commandkey", profilerStrings),
   ordinal: 4,
   modifiers: "shift",
   killswitch: "devtools.profiler.enabled",
   icon: "chrome://browser/skin/devtools/tool-profiler.png",
   url: "chrome://browser/content/profiler.xul",
@@ -169,17 +155,17 @@ let profilerDefinition = {
   },
 
   build: function (frame, target) {
     let panel = new ProfilerPanel(frame, target);
     return panel.open();
   }
 };
 
-let netMonitorDefinition = {
+Tools.netMonitor = {
   id: "netmonitor",
   accesskey: l10n("netmonitor.accesskey", netMonitorStrings),
   key: l10n("netmonitor.commandkey", netMonitorStrings),
   ordinal: 5,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   killswitch: "devtools.netmonitor.enabled",
   icon: "chrome://browser/skin/devtools/tool-profiler.png",
   url: "chrome://browser/content/devtools/netmonitor.xul",
@@ -191,25 +177,43 @@ let netMonitorDefinition = {
   },
 
   build: function(iframeWindow, toolbox) {
     let panel = new NetMonitorPanel(iframeWindow, toolbox);
     return panel.open();
   }
 };
 
-this.defaultTools = [
-  styleEditorDefinition,
-  webConsoleDefinition,
-  debuggerDefinition,
-  inspectorDefinition,
-  profilerDefinition,
-  netMonitorDefinition
+let defaultTools = [
+  Tools.styleEditor,
+  Tools.webConsole,
+  Tools.jsdebugger,
+  Tools.inspector,
+  Tools.jsprofiler,
+  Tools.netMonitor
 ];
 
+exports.defaultTools = defaultTools;
+
+for (let definition of defaultTools) {
+  gDevTools.registerTool(definition);
+}
+
+var unloadObserver = {
+  observe: function(subject, topic, data) {
+    if (subject.wrappedJSObject === require("@loader/unload")) {
+      Services.obs.removeObserver(unloadObserver, "sdk:loader:destroy");
+      for (let definition of defaultTools) {
+        gDevTools.unregisterTool(definition.id);
+      }
+    }
+  }
+};
+Services.obs.addObserver(unloadObserver, "sdk:loader:destroy", false);
+
 /**
  * Lookup l10n string from a string bundle.
  *
  * @param {string} name
  *        The key to lookup.
  * @param {StringBundle} bundle
  *        The key to lookup.
  * @returns A localized version of the given key.
--- a/browser/devtools/markupview/Makefile.in
+++ b/browser/devtools/markupview/Makefile.in
@@ -6,11 +6,11 @@
 DEPTH		= @DEPTH@
 topsrcdir	= @top_srcdir@
 srcdir		= @srcdir@
 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
rename from browser/devtools/markupview/MarkupView.jsm
rename to browser/devtools/markupview/markup-view.js
--- a/browser/devtools/markupview/MarkupView.jsm
+++ b/browser/devtools/markupview/markup-view.js
@@ -1,33 +1,29 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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 Cc = Components.classes;
-const Cu = Components.utils;
-const Ci = Components.interfaces;
+const {Cc, Cu, Ci} = require("chrome");
 
 // Page size for pageup/pagedown
 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:
  *
  * MarkupContainer - the structure that holds an editor and its
  *  immediate children in the markup panel.
  * Node - A content node.
  * object.elt - A UI element in the markup panel.
@@ -37,17 +33,17 @@ Cu.import("resource://gre/modules/XPCOMU
  * The markup tree.  Manages the mapping of nodes to MarkupContainers,
  * updating based on mutations, and the undo/redo bindings.
  *
  * @param Inspector aInspector
  *        The inspector we're watching.
  * @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;
   this.doc = this._frame.contentDocument;
   this._elt = this.doc.querySelector("#root");
 
   try {
     this.maxChildren = Services.prefs.getIntPref("devtools.markup.pagesize");
@@ -70,16 +66,18 @@ this.MarkupView = function MarkupView(aI
   this._frame.contentWindow.addEventListener("keydown", this._boundKeyDown, false);
 
   this._boundFocus = this._onFocus.bind(this);
   this._frame.addEventListener("focus", this._boundFocus, false);
 
   this._initPreview();
 }
 
+exports.MarkupView = MarkupView;
+
 MarkupView.prototype = {
   _selectedContainer: null,
 
   template: function MT_template(aName, aDest, aOptions={stack: "markup-view.xhtml"})
   {
     let node = this.doc.getElementById("template-" + aName).cloneNode(true);
     node.removeAttribute("id");
     template(node, aDest, aOptions);
@@ -1521,12 +1519,11 @@ function whitespaceTextFilter(aNode)
     if (aNode.nodeType == Ci.nsIDOMNode.TEXT_NODE &&
         !/[^\s]/.exec(aNode.nodeValue)) {
       return Ci.nsIDOMNodeFilter.FILTER_SKIP;
     } else {
       return Ci.nsIDOMNodeFilter.FILTER_ACCEPT;
     }
 }
 
-XPCOMUtils.defineLazyGetter(MarkupView.prototype, "strings", function () {
-  return Services.strings.createBundle(
-          "chrome://browser/locale/devtools/inspector.properties");
-});
+loader.lazyGetter(MarkupView.prototype, "strings", () => Services.strings.createBundle(
+  "chrome://browser/locale/devtools/inspector.properties"
+));
--- a/browser/devtools/markupview/test/browser_inspector_markup_edit.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_edit.js
@@ -15,17 +15,17 @@ http://creativecommons.org/publicdomain/
  * underlying DOM, not that the UI updates - UI updates are based on
  * underlying DOM changes, and the mutation tests should cover those cases.
  */
 
 function test() {
   let inspector;
   let {
     getInplaceEditorForSpan: inplaceEditor
-  } = Cu.import("resource:///modules/devtools/InplaceEditor.jsm", {});
+  } = devtools.require("devtools/shared/inplace-editor");
 
   waitForExplicitFinish();
 
   // Will hold the doc we're viewing
   let doc;
 
   // Holds the MarkupTool object we're testing.
   let markup;
--- a/browser/devtools/markupview/test/head.js
+++ b/browser/devtools/markupview/test/head.js
@@ -1,19 +1,16 @@
 /* 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;
 
-let TargetFactory = (function() {
-  let tempScope = {};
-  Components.utils.import("resource:///modules/devtools/Target.jsm", tempScope);
-  return tempScope.TargetFactory;
-})();
+let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
 
 // Clear preferences that may be set during the course of tests.
 function clearUserPrefs()
 {
   Services.prefs.clearUserPref("devtools.inspector.htmlPanelOpen");
   Services.prefs.clearUserPref("devtools.inspector.sidebarOpen");
   Services.prefs.clearUserPref("devtools.inspector.activeSidebar");
 }
--- a/browser/devtools/moz.build
+++ b/browser/devtools/moz.build
@@ -19,9 +19,8 @@ DIRS += [
     'layoutview',
     'shared',
     'responsivedesign',
     'framework',
     'profiler',
     'fontinspector',
 
 ]
-
--- a/browser/devtools/netmonitor/NetMonitorPanel.jsm
+++ b/browser/devtools/netmonitor/NetMonitorPanel.jsm
@@ -5,17 +5,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 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");
 
 function NetMonitorPanel(iframeWindow, toolbox) {
   this.panelWin = iframeWindow;
   this._toolbox = toolbox;
 
--- a/browser/devtools/netmonitor/netmonitor-controller.js
+++ b/browser/devtools/netmonitor/netmonitor-controller.js
@@ -8,17 +8,17 @@
 const Cc = Components.classes;
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 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");
 
 XPCOMUtils.defineLazyModuleGetter(this, "NetworkHelper",
   "resource://gre/modules/devtools/NetworkHelper.jsm");
 
 const NET_STRINGS_URI = "chrome://browser/locale/devtools/netmonitor.properties";
--- a/browser/devtools/netmonitor/test/head.js
+++ b/browser/devtools/netmonitor/test/head.js
@@ -1,19 +1,19 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 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 { Toolbox } = Cu.import("resource:///modules/devtools/Toolbox.jsm", {});
-let { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let { gDevTools, devtools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
+let Toolbox = devtools.Toolbox;
 
 const EXAMPLE_URL = "http://example.com/browser/browser/devtools/netmonitor/test/";
 
 const SIMPLE_URL = EXAMPLE_URL + "html_simple-test-page.html";
 const NAVIGATE_URL = EXAMPLE_URL + "html_navigate-test-page.html";
 const CONTENT_TYPE_URL = EXAMPLE_URL + "html_content-type-test-page.html";
 const STATUS_CODES_URL = EXAMPLE_URL + "html_status-codes-test-page.html";
 const POST_DATA_URL = EXAMPLE_URL + "html_post-data-test-page.html";
--- a/browser/devtools/profiler/ProfilerPanel.jsm
+++ b/browser/devtools/profiler/ProfilerPanel.jsm
@@ -4,17 +4,17 @@
 
 "use strict";
 
 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"];
 
 XPCOMUtils.defineLazyModuleGetter(this, "Promise",
     "resource://gre/modules/commonjs/sdk/core/promise.js");
 
 XPCOMUtils.defineLazyModuleGetter(this, "DebuggerServer",
--- a/browser/devtools/profiler/test/head.js
+++ b/browser/devtools/profiler/test/head.js
@@ -1,20 +1,18 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 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.devtools.TargetFactory;
 
 Cu.import("resource://gre/modules/devtools/dbg-server.jsm", temp);
 let DebuggerServer = temp.DebuggerServer;
 
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
 Services.scriptloader.loadSubScript(testDir + "../../../commandline/test/helpers.js", this);
 
--- a/browser/devtools/responsivedesign/responsivedesign.jsm
+++ b/browser/devtools/responsivedesign/responsivedesign.jsm
@@ -6,18 +6,17 @@
 
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 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/Target.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 
 this.EXPORTED_SYMBOLS = ["ResponsiveUIManager"];
 
 const MIN_WIDTH = 50;
 const MIN_HEIGHT = 50;
 
 const MAX_WIDTH = 10000;
 const MAX_HEIGHT = 10000;
--- a/browser/devtools/responsivedesign/test/head.js
+++ b/browser/devtools/responsivedesign/test/head.js
@@ -1,16 +1,15 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
+let {devtools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
 
 // Import the GCLI test helper
 let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
 Services.scriptloader.loadSubScript(testDir + "/helpers.js", this);
 
 function openInspector(callback)
 {
   let target = TargetFactory.forTab(gBrowser.selectedTab);
--- a/browser/devtools/responsivedesign/test/helpers.js
+++ b/browser/devtools/responsivedesign/test/helpers.js
@@ -19,17 +19,18 @@
 
 this.EXPORTED_SYMBOLS = [ 'helpers' ];
 var helpers = {};
 this.helpers = helpers;
 let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).require;
 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 };
 
 var util = require('util/util');
 
 var converters = require('gcli/converters');
 
--- a/browser/devtools/scratchpad/scratchpad.js
+++ b/browser/devtools/scratchpad/scratchpad.js
@@ -22,17 +22,16 @@ Cu.import("resource://gre/modules/XPCOMU
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/NetUtil.jsm");
 Cu.import("resource:///modules/PropertyPanel.jsm");
 Cu.import("resource:///modules/source-editor.jsm");
 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");
 
 const SCRATCHPAD_CONTEXT_CONTENT = 1;
 const SCRATCHPAD_CONTEXT_BROWSER = 2;
 const SCRATCHPAD_L10N = "chrome://browser/locale/devtools/scratchpad.properties";
 const DEVTOOLS_CHROME_ENABLED = "devtools.chrome.enabled";
 const PREF_RECENT_FILES_MAX = "devtools.scratchpad.recentFilesMax";
@@ -1090,17 +1089,17 @@ var Scratchpad = {
     this.browserWindow.toJavaScriptConsole();
   },
 
   /**
    * Open the Web Console.
    */
   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();
   },
 
   /**
    * Set the current execution context to be the active tab content window.
    */
   setContentContext: function SP_setContentContext()
--- a/browser/devtools/shared/DeveloperToolbar.jsm
+++ b/browser/devtools/shared/DeveloperToolbar.jsm
@@ -25,18 +25,18 @@ XPCOMUtils.defineLazyModuleGetter(this, 
                                   "resource:///modules/devtools/BuiltinCommands.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "PageErrorListener",
                                   "resource://gre/modules/devtools/WebConsoleUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "PluralForm",
                                   "resource://gre/modules/PluralForm.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "require",
                                   "resource://gre/modules/devtools/Require.jsm");
 
 XPCOMUtils.defineLazyGetter(this, "prefBranch", function() {
   let prefService = Components.classes["@mozilla.org/preferences-service;1"]
           .getService(Components.interfaces.nsIPrefService);
   return prefService.getBranch(null)
@@ -157,17 +157,17 @@ let CommandUtils = {
 
       document: contentDocument,
       window: contentDocument.defaultView
     };
 
     Object.defineProperty(environment, "target", {
       get: function() {
         let tab = chromeDocument.defaultView.getBrowser().selectedTab;
-        return TargetFactory.forTab(tab);
+        return devtools.TargetFactory.forTab(tab);
       },
       enumerable: true
     });
 
     return environment;
   },
 };
 
--- a/browser/devtools/shared/Makefile.in
+++ b/browser/devtools/shared/Makefile.in
@@ -10,8 +10,9 @@ VPATH		= @srcdir@
 
 include $(DEPTH)/config/autoconf.mk
 
 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
rename from browser/devtools/shared/EventEmitter.jsm
rename to browser/devtools/shared/event-emitter.js
--- a/browser/devtools/shared/EventEmitter.jsm
+++ b/browser/devtools/shared/event-emitter.js
@@ -1,19 +1,26 @@
 /* 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/. */
 
-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.
  *
  * @param Object aObjectToDecorate
  *        Bind all public methods of EventEmitter to
  *        the aObjectToDecorate object.
  */
 EventEmitter.decorate = function EventEmitter_decorate (aObjectToDecorate) {
@@ -97,15 +104,15 @@ EventEmitter.prototype = {
       if (originalListeners === this._eventEmitterListeners.get(aEvent) ||
           this._eventEmitterListeners.get(aEvent).some(function(l) l === listener)) {
         try {
           listener.apply(null, arguments);
         }
         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");
         }
       }
     }
   }
 };
rename from browser/devtools/shared/InplaceEditor.jsm
rename to browser/devtools/shared/inplace-editor.js
--- a/browser/devtools/shared/InplaceEditor.jsm
+++ b/browser/devtools/shared/inplace-editor.js
@@ -19,32 +19,26 @@
  *   trigger: "dblclick"
  * });
  *
  * See editableField() for more options.
  */
 
 "use strict";
 
-const Ci = Components.interfaces;
-const Cu = Components.utils;
+const {Ci, Cu} = require("chrome");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
 const FOCUS_FORWARD = Ci.nsIFocusManager.MOVEFOCUS_FORWARD;
 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.
  * Changes will be committed when the InlineEditor's input is blurred
  * or dropped when the user presses escape.
  *
  * @param {object} aOptions
  *    Options for the editable field, including:
@@ -76,30 +70,32 @@ this.EXPORTED_SYMBOLS = ["editableItem",
  */
 function editableField(aOptions)
 {
   return editableItem(aOptions, function(aElement, aEvent) {
     new InplaceEditor(aOptions, aEvent);
   });
 }
 
+exports.editableField = editableField;
+
 /**
  * Handle events for an element that should respond to
  * clicks and sit in the editing tab order, and call
  * a callback when it is activated.
  *
  * @param {object} aOptions
  *    The options for this editor, including:
  *    {Element} element: The DOM element.
  *    {string} trigger: The DOM event that should trigger editing,
  *      defaults to "click"
  * @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;
   element.addEventListener(trigger, function(evt) {
     let win = this.ownerDocument.defaultView;
     let selection = win.getSelection();
     if (trigger != "click" || selection.isCollapsed) {
       aCallback(element, evt);
@@ -131,26 +127,30 @@ this.editableItem = function editableIte
     element.addEventListener("mouseout", cleanup, false);
   }, false);
 
   // Mark the element editable field for tab
   // navigation while editing.
   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)
 {
   this.elt = aOptions.element;
   let doc = this.elt.ownerDocument;
   this.doc = doc;
   this.elt.inplaceEditor = this;
 
@@ -201,16 +201,18 @@ function InplaceEditor(aOptions, aEvent)
     this.input.addEventListener("keyup", this._onKeyup, false);
   }
 
   if (aOptions.start) {
     aOptions.start(this, aEvent);
   }
 }
 
+exports.InplaceEditor = InplaceEditor;
+
 InplaceEditor.prototype = {
   _createInput: function InplaceEditor_createEditor()
   {
     this.input =
       this.doc.createElementNS(HTML_NS, this.multiline ? "textarea" : "input");
     this.input.inplaceEditor = this;
     this.input.classList.add("styleinspector-propertyeditor");
     this.input.value = this.initial;
--- a/browser/devtools/shared/test/browser_eventemitter_basic.js
+++ b/browser/devtools/shared/test/browser_eventemitter_basic.js
@@ -3,17 +3,17 @@
 
 function test() {
   testEmitter();
   testEmitter({});
 }
 
 
 function testEmitter(aObject) {
-  Cu.import("resource:///modules/devtools/EventEmitter.jsm", this);
+  Cu.import("resource:///modules/devtools/shared/event-emitter.js", this);
 
   let emitter;
 
   if (aObject) {
     emitter = aObject;
     EventEmitter.decorate(emitter);
   } else {
     emitter = new EventEmitter();
--- a/browser/devtools/shared/test/head.js
+++ b/browser/devtools/shared/test/head.js
@@ -1,13 +1,14 @@
 /* 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/. */
 
-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
  */
 function addTab(aURL, aCallback)
 {
   waitForExplicitFinish();
 
--- a/browser/devtools/shared/test/unit/test_undoStack.js
+++ b/browser/devtools/shared/test/unit/test_undoStack.js
@@ -1,15 +1,26 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    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;
 
 function run_test()
 {
   let str = "";
   let stack = new UndoStack(MAX_SIZE);
 
rename from browser/devtools/shared/Undo.jsm
rename to browser/devtools/shared/undo.js
--- a/browser/devtools/shared/Undo.jsm
+++ b/browser/devtools/shared/undo.js
@@ -1,35 +1,34 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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.
  *
  * Actions are added along with the necessary code to
  * reverse the action.
  *
  * @param function aChange Called whenever the size or position
  *   of the undo stack changes, to use for updating undo-related
  *   UI.
  * @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.
   _index: 0,
 
   // The current batch depth (see startBatch() for details)
   _batchDepth: 0,
 
--- a/browser/devtools/styleeditor/StyleEditorDebuggee.jsm
+++ b/browser/devtools/styleeditor/StyleEditorDebuggee.jsm
@@ -7,17 +7,17 @@
 this.EXPORTED_SYMBOLS = ["StyleEditorDebuggee", "StyleSheet"];
 
 const Cc = Components.classes;
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 Cu.import("resource://gre/modules/Services.jsm");
 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");
 
 /**
  * A StyleEditorDebuggee represents the document the style editor is debugging.
  * It maintains a list of StyleSheet objects that represent the stylesheets in
  * the target's document. It wraps remote debugging protocol comunications.
--- a/browser/devtools/styleeditor/StyleEditorPanel.jsm
+++ b/browser/devtools/styleeditor/StyleEditorPanel.jsm
@@ -6,17 +6,17 @@
 
 const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
 
 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");
 Cu.import("resource:///modules/devtools/StyleEditorDebuggee.jsm");
 Cu.import("resource:///modules/devtools/StyleEditorUI.jsm");
 Cu.import("resource:///modules/devtools/StyleEditorUtil.jsm");
 
 
 XPCOMUtils.defineLazyModuleGetter(this, "StyleEditorChrome",
                         "resource:///modules/devtools/StyleEditorChrome.jsm");
 
--- a/browser/devtools/styleeditor/StyleEditorUI.jsm
+++ b/browser/devtools/styleeditor/StyleEditorUI.jsm
@@ -10,17 +10,17 @@ this.EXPORTED_SYMBOLS = ["StyleEditorUI"
 const Cc = Components.classes;
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/PluralForm.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/shared/event-emitter.js");
 Cu.import("resource:///modules/devtools/StyleEditorUtil.jsm");
 Cu.import("resource:///modules/devtools/SplitView.jsm");
 Cu.import("resource:///modules/devtools/StyleSheetEditor.jsm");
 
 
 const LOAD_ERROR = "error-load";
 
 const STYLE_EDITOR_TEMPLATE = "stylesheet";
--- a/browser/devtools/styleeditor/StyleSheetEditor.jsm
+++ b/browser/devtools/styleeditor/StyleSheetEditor.jsm
@@ -10,17 +10,17 @@ this.EXPORTED_SYMBOLS = ["StyleSheetEdit
 const Cc = Components.classes;
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js");
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/FileUtils.jsm");
 Cu.import("resource://gre/modules/NetUtil.jsm");
-Cu.import("resource:///modules/devtools/EventEmitter.jsm");
+Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 Cu.import("resource:///modules/source-editor.jsm");
 Cu.import("resource:///modules/devtools/StyleEditorUtil.jsm");
 
 
 const SAVE_ERROR = "error-save";
 
 // max update frequency in ms (avoid potential typing lag and/or flicker)
 // @see StyleEditor.updateStylesheet
--- a/browser/devtools/styleeditor/test/head.js
+++ b/browser/devtools/styleeditor/test/head.js
@@ -2,18 +2,18 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 const TEST_BASE = "chrome://mochitests/content/browser/browser/devtools/styleeditor/test/";
 const TEST_BASE_HTTP = "http://example.com/browser/browser/devtools/styleeditor/test/";
 const TEST_BASE_HTTPS = "https://example.com/browser/browser/devtools/styleeditor/test/";
 const TEST_HOST = 'mochi.test:8888';
 
 let tempScope = {};
-Cu.import("resource:///modules/devtools/Target.jsm", tempScope);
-let TargetFactory = tempScope.TargetFactory;
+Cu.import("resource:///modules/devtools/gDevTools.jsm", tempScope);
+let TargetFactory = tempScope.devtools.TargetFactory;
 Components.utils.import("resource://gre/modules/devtools/Console.jsm", tempScope);
 let console = tempScope.console;
 
 let gPanelWindow;
 let cache = Cc["@mozilla.org/network/cache-service;1"]
               .getService(Ci.nsICacheService);
 
 
--- a/browser/devtools/styleeditor/test/helpers.js
+++ b/browser/devtools/styleeditor/test/helpers.js
@@ -19,17 +19,18 @@
 
 this.EXPORTED_SYMBOLS = [ 'helpers' ];
 var helpers = {};
 this.helpers = helpers;
 let require = (Cu.import("resource://gre/modules/devtools/Require.jsm", {})).require;
 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 };
 
 var util = require('util/util');
 
 var converters = require('gcli/converters');
 
--- a/browser/devtools/styleinspector/Makefile.in
+++ b/browser/devtools/styleinspector/Makefile.in
@@ -8,9 +8,9 @@ topsrcdir	= @top_srcdir@
 srcdir		= @srcdir@
 VPATH		= @srcdir@
 
 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
rename from browser/devtools/styleinspector/CssHtmlTree.jsm
rename to browser/devtools/styleinspector/computed-view.js
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/computed-view.js
@@ -1,34 +1,31 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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 Ci = Components.interfaces;
-const Cc = Components.classes;
-const Cu = Components.utils;
+const {Cc, Ci, Cu} = require("chrome");
+
+let ToolDefinitions = require("main").Tools;
+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/Templater.jsm");
+
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+
 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";
 
-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",
-                                  "resource:///modules/devtools/gDevTools.jsm");
-
-this.EXPORTED_SYMBOLS = ["CssHtmlTree", "PropertyView"];
-
 /**
  * Helper for long-running processes that should yield occasionally to
  * the mainloop.
  *
  * @param {Window} aWin
  *        Timeouts will be set on this window when appropriate.
  * @param {Generator} aGenerator
  *        Will iterate this generator.
@@ -41,17 +38,17 @@ this.EXPORTED_SYMBOLS = ["CssHtmlTree", 
  *          onCancel {function} Will be called if the process is canceled.
  *          threshold {int} How long to process before yielding, in ms.
  *
  * @constructor
  */
 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() {};
   this.onCancel = aOptions.onCancel || function() {};
   this.threshold = aOptions.threshold || 45;
 
   this.canceled = false;
 }
@@ -115,17 +112,17 @@ UpdateProcess.prototype = {
 /**
  * CssHtmlTree is a panel that manages the display of a table sorted by style.
  * There should be one instance of CssHtmlTree per style display (of which there
  * will generally only be one).
  *
  * @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;
   this.styleInspector = aStyleInspector;
   this.cssLogic = aStyleInspector.cssLogic;
   this.propertyViews = [];
 
   let chromeReg = Cc["@mozilla.org/chrome/chrome-registry;1"].
@@ -528,17 +525,17 @@ CssHtmlTree.prototype = {
 /**
  * A container to give easy access to property data from the template engine.
  *
  * @constructor
  * @param {CssHtmlTree} aTree the CssHtmlTree instance we are working with.
  * @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;
   this.getRTLAttr = aTree.getRTLAttr;
 
   this.link = "https://developer.mozilla.org/CSS/" + aName;
 
   this.templateMatchedSelectors = aTree.styleDocument.getElementById("templateMatchedSelectors");
@@ -821,17 +818,17 @@ SelectorView.CLASS_NAMES = [
 ];
 
 SelectorView.prototype = {
   /**
    * Cache localized status names.
    *
    * 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}
    */
   _cacheStatusNames: function SelectorView_cacheStatusNames()
   {
     if (SelectorView.STATUS_NAMES.length) {
       return;
     }
@@ -930,24 +927,27 @@ SelectorView.prototype = {
           break;
         }
       }
     }
 
     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);
         });
       }
     } else {
       let href = styleSheet ? styleSheet.href : "";
       let viewSourceUtils = inspector.viewSourceUtils;
 
       if (this.selectorInfo.sourceElement) {
         href = this.selectorInfo.sourceElement.ownerDocument.location.href;
       }
       viewSourceUtils.viewSource(href, null, contentDoc, line);
     }
   },
 };
+
+exports.CssHtmlTree = CssHtmlTree;
+exports.PropertyView = PropertyView;
\ No newline at end of file
--- a/browser/devtools/styleinspector/computedview.xhtml
+++ b/browser/devtools/styleinspector/computedview.xhtml
@@ -30,18 +30,19 @@
     <link rel="stylesheet" href="chrome://global/skin/global.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/skin/devtools/computedview.css"  type="text/css"/>
 
     <script type="application/javascript;version=1.8" src="theme-switching.js"/>
 
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
-        Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
-        this.computedview = new ComputedViewTool(panel, window, iframe);
+        let {devtools} = Components.utils.import("resource:///modules/devtools/gDevTools.jsm", {});
+        let inspector = devtools.require("devtools/styleinspector/style-inspector");
+        this.computedview = new inspector.ComputedViewTool(panel, window, iframe);
       }
       window.onunload = function() {
         if (this.computedview) {
           this.computedview.destroy();
         }
       }
     </script>
   </head>
rename from browser/devtools/styleinspector/CssLogic.jsm
rename to browser/devtools/styleinspector/css-logic.js
--- a/browser/devtools/styleinspector/CssLogic.jsm
+++ b/browser/devtools/styleinspector/css-logic.js
@@ -32,39 +32,38 @@
  * Provide access to the style information in a page.
  * CssLogic uses the standard DOM API, and the Gecko inIDOMUtils API to access
  * styling information in the page, and present this to the user in a way that
  * helps them understand:
  * - why their expectations may not have been fulfilled
  * - how browsers process CSS
  * @constructor
  */
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-const Cu = Components.utils;
+
+const {Cc, Ci, Cu} = require("chrome");
 
 const RX_UNIVERSAL_SELECTOR = /\s*\*\s*/g;
 const RX_NOT = /:not\((.*?)\)/g;
 const RX_PSEUDO_CLASS_OR_ELT = /(:[\w-]+\().*?\)/g;
 const RX_CONNECTORS = /\s*[\s>+~]\s*/g;
 const RX_ID = /\s*#\w+\s*/g;
 const RX_CLASS_OR_ATTRIBUTE = /\s*(?:\.\w+|\[.+?\])\s*/g;
 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"];
-
-this.CssLogic = function 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
  */
 CssLogic.FILTER = {
   ALL: "all", // show properties from all user style sheets.
   UA: "ua",   // ALL, plus user-agent (i.e. browser) style sheets
 };
 
@@ -1256,25 +1255,27 @@ CssRule.prototype = {
  * The CSS selector class allows us to document the ranking of various CSS
  * selectors.
  *
  * @constructor
  * @param {CssRule} aCssRule the CssRule instance from where the selector comes.
  * @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;
   this.elementStyle = this.text == "@element.style";
   this._specificity = null;
   this.selectorIndex = aIndex;
 }
 
+exports.CssSelector = CssSelector;
+
 CssSelector.prototype = {
   _matchId: null,
 
   /**
    * Retrieve the CssSelector source, which is the source of the CssSheet owning
    * the selector.
    *
    * @return {string} the selector source.
--- a/browser/devtools/styleinspector/cssruleview.xhtml
+++ b/browser/devtools/styleinspector/cssruleview.xhtml
@@ -19,18 +19,19 @@
     <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/content/devtools/ruleview.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/skin/devtools/ruleview.css"  type="text/css"/>
 
     <script type="application/javascript;version=1.8" src="theme-switching.js"/>
 
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
-        Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
-        this.ruleview = new RuleViewTool(panel, window, iframe);
+        let {devtools} = Components.utils.import("resource:///modules/devtools/gDevTools.jsm", {});
+        let inspector = devtools.require("devtools/styleinspector/style-inspector");
+        this.ruleview = new inspector.RuleViewTool(panel, window, iframe);
       }
       window.onunload = function() {
         if (this.ruleview) {
           this.ruleview.destroy();
         }
       }
     </script>
   </head>
rename from browser/devtools/styleinspector/CssRuleView.jsm
rename to browser/devtools/styleinspector/rule-view.js
--- a/browser/devtools/styleinspector/CssRuleView.jsm
+++ b/browser/devtools/styleinspector/rule-view.js
@@ -1,19 +1,23 @@
 /* -*- Mode: javascript; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
 
 "use strict";
 
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-const Cu = Components.utils;
+const {Cc, Ci, Cu} = require("chrome");
+
+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";
 
 /**
  * These regular expressions are adapted from firebug's css.js, and are
  * used to parse CSSStyleDeclaration's cssText attribute.
  */
@@ -22,26 +26,18 @@ const XUL_NS = "http://www.mozilla.org/k
 const CSS_LINE_RE = /(?:[^;\(]*(?:\([^\)]*?\))?[^;\(]*)*;?/g;
 
 // Used to parse a single property line.
 const CSS_PROP_RE = /\s*([^:\s]*)\s*:\s*(.*?)\s*(?:! (important))?;?$/;
 
 // Used to parse an external resource from a property value
 const CSS_RESOURCE_RE = /url\([\'\"]?(.*?)[\'\"]?\)/;
 
-const IOService = Components.classes["@mozilla.org/network/io-service;1"]
-                  .getService(Components.interfaces.nsIIOService);
-
-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"];
+const IOService = Cc["@mozilla.org/network/io-service;1"]
+                  .getService(Ci.nsIIOService);
 
 /**
  * Our model looks like this:
  *
  * ElementStyle:
  *   Responsible for keeping track of which properties are overridden.
  *   Maintains a list of Rule objects that apply to the element.
  * Rule:
@@ -89,17 +85,17 @@ function ElementStyle(aElement, aStore)
   // To figure out how shorthand properties are interpreted by the
   // engine, we will set properties on a dummy element and observe
   // how their .style attribute reflects them as computed values.
   this.dummyElement = doc.createElementNS(this.element.namespaceURI,
                                           this.element.tagName);
   this.populate();
 }
 // We're exporting _ElementStyle for unit tests.
-this._ElementStyle = ElementStyle;
+exports._ElementStyle = ElementStyle;
 
 ElementStyle.prototype = {
 
   // The element we're looking at.
   element: null,
 
   // Empty, unconnected element of the same type as this node, used
   // to figure out how shorthand properties will be parsed.
@@ -864,30 +860,32 @@ TextProperty.prototype = {
  * @param {object} aStore
  *        The CSS rule view can use this object to store metadata
  *        that might outlast the rule view, particularly the current
  *        set of disabled properties.
  * @param {<iframe>} aOuterIFrame
  *        The iframe containing the ruleview.
  * @constructor
  */
-this.CssRuleView = function CssRuleView(aDoc, aStore)
+function CssRuleView(aDoc, aStore)
 {
   this.doc = aDoc;
   this.store = aStore;
   this.element = this.doc.createElementNS(HTML_NS, "div");
   this.element.className = "ruleview devtools-monospace";
   this.element.flex = 1;
 
   this._boundCopy = this._onCopy.bind(this);
   this.element.addEventListener("copy", this._boundCopy);
 
   this._showEmpty();
 }
 
+exports.CssRuleView = CssRuleView;
+
 CssRuleView.prototype = {
   // The element that we're inspecting.
   _viewedElement: null,
 
   /**
    * Return {bool} true if the rule view currently has an input editor visible.
    */
   get isEditing() {
rename from browser/devtools/styleinspector/StyleInspector.jsm
rename to browser/devtools/styleinspector/style-inspector.js
--- a/browser/devtools/styleinspector/StyleInspector.jsm
+++ b/browser/devtools/styleinspector/style-inspector.js
@@ -1,37 +1,37 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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 Cc = Components.classes;
-const Cu = Components.utils;
-const Ci = Components.interfaces;
+const {Cc, Cu, Ci} = require("chrome");
+
+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",
-                                  "resource:///modules/devtools/gDevTools.jsm");
+loader.lazyGetter(this, "gDevTools", () => Cu.import("resource:///modules/devtools/gDevTools.jsm", {}).gDevTools);
+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() {
     this.inspector.markDirty();
   }.bind(this);
 
   this.view.element.addEventListener("CssRuleViewChanged", this._changeHandler)
 
@@ -56,17 +56,17 @@ this.RuleViewTool = function RVT_RuleVie
         contentSheet = true;
         break;
       }
     }
 
     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);
         });
       }
     } else {
       let href = styleSheet ? styleSheet.href : "";
       if (rule.elementStyle.element) {
         href = rule.elementStyle.element.ownerDocument.location.href;
@@ -88,16 +88,18 @@ this.RuleViewTool = function RVT_RuleVie
   this.inspector.selection.on("pseudoclass", this.refresh);
   if (this.inspector.highlighter) {
     this.inspector.highlighter.on("locked", this._onSelect);
   }
 
   this.onSelect();
 }
 
+exports.RuleViewTool = RuleViewTool;
+
 RuleViewTool.prototype = {
   onSelect: function RVT_onSelect(aEvent) {
     if (!this.inspector.selection.isConnected() ||
         !this.inspector.selection.isElementNode()) {
       this.view.highlight(null);
       return;
     }
 
@@ -145,24 +147,24 @@ RuleViewTool.prototype = {
 
     delete this.outerIFrame;
     delete this.view;
     delete this.doc;
     delete this.inspector;
   }
 }
 
-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);
   this.inspector.selection.on("new-node", this._onSelect);
   if (this.inspector.highlighter) {
     this.inspector.highlighter.on("locked", this._onSelect);
   }
   this.refresh = this.refresh.bind(this);
@@ -171,16 +173,18 @@ this.ComputedViewTool = function CVT_Com
   this.inspector.selection.on("pseudoclass", this.refresh);
 
   this.cssLogic.highlight(null);
   this.view.highlight(null);
 
   this.onSelect();
 }
 
+exports.ComputedViewTool = ComputedViewTool;
+
 ComputedViewTool.prototype = {
   onSelect: function CVT_onSelect(aEvent)
   {
     if (!this.inspector.selection.isConnected() ||
         !this.inspector.selection.isElementNode()) {
       this.view.highlight(null);
       return;
     }
@@ -227,23 +231,8 @@ ComputedViewTool.prototype = {
     delete this.outerIFrame;
     delete this.cssLogic;
     delete this.cssHtmlTree;
     delete this.window;
     delete this.document;
     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;
-});
--- a/browser/devtools/styleinspector/test/browser_bug683672.js
+++ b/browser/devtools/styleinspector/test/browser_bug683672.js
@@ -7,19 +7,17 @@
 let doc;
 let inspector;
 let div;
 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 = tempScope.CssHtmlTree;
-let PropertyView = tempScope.PropertyView;
+let {CssHtmlTree, PropertyView} = devtools.require("devtools/styleinspector/computed-view");
 
 function test()
 {
   waitForExplicitFinish();
   addTab(TEST_URI);
   browser.addEventListener("load", tabLoaded, true);
 }
 
--- a/browser/devtools/styleinspector/test/browser_bug705707_is_content_stylesheet.js
+++ b/browser/devtools/styleinspector/test/browser_bug705707_is_content_stylesheet.js
@@ -13,19 +13,18 @@ const TEST_URI2 = "http://example.com/br
                  "test/browser_bug705707_is_content_stylesheet.xul";
 const XUL_URI = Cc["@mozilla.org/network/io-service;1"]
                 .getService(Ci.nsIIOService)
                 .newURI(TEST_URI2, null, null);
 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 = tempScope.CssLogic;
+
+let {CssLogic} = devtools.require("devtools/styleinspector/css-logic");
 
 function test()
 {
   waitForExplicitFinish();
   addTab(TEST_URI);
   browser.addEventListener("load", htmlLoaded, true);
 }
 
--- a/browser/devtools/styleinspector/test/browser_bug722196_rule_view_media_queries.js
+++ b/browser/devtools/styleinspector/test/browser_bug722196_rule_view_media_queries.js
@@ -1,18 +1,15 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // 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/" +
   "test/browser_bug722196_identify_media_queries.html";
 
 function test()
 {
   waitForExplicitFinish();
--- a/browser/devtools/styleinspector/test/browser_bug722691_rule_view_increment.js
+++ b/browser/devtools/styleinspector/test/browser_bug722691_rule_view_increment.js
@@ -1,20 +1,15 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // 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;
 
 function setUpTests()
 {
   doc.body.innerHTML = '<div id="test" style="' +
                            'margin-top:0px;' +
--- a/browser/devtools/styleinspector/test/browser_bug_592743_specificity.js
+++ b/browser/devtools/styleinspector/test/browser_bug_592743_specificity.js
@@ -1,20 +1,16 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // 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()
 {
   let doc = content.document;
   doc.body.innerHTML = getStylesheetText();
   doc.title = "Computed view specificity test";
   runTests(doc);
 }
--- a/browser/devtools/styleinspector/test/browser_csslogic_inherited.js
+++ b/browser/devtools/styleinspector/test/browser_csslogic_inherited.js
@@ -1,18 +1,14 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // 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()
 {
   doc.body.innerHTML = '<div style="margin-left:10px; font-size: 5px"><div id="innerdiv">Inner div</div></div>';
   doc.title = "Style Inspector Inheritance Test";
 
   let cssLogic = new CssLogic();
--- a/browser/devtools/styleinspector/test/browser_ruleview_editor.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_editor.js
@@ -1,17 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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)
 {
   return function(aDoneValue, aDoneCommit) {
     dump("aDoneValue: " + aDoneValue + " commit: " + aDoneCommit + "\n");
 
     is(aDoneValue, aValue, "Should get expected value");
--- a/browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues.js
@@ -1,17 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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;
 
 var gRuleViewChanged = false;
 function ruleViewChanged()
 {
   gRuleViewChanged = true;
--- a/browser/devtools/styleinspector/test/browser_ruleview_inherit.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_inherit.js
@@ -1,17 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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()
 {
   let style = '' +
     '#test2 {' +
     '  background-color: green;' +
     '  color: purple;' +
--- a/browser/devtools/styleinspector/test/browser_ruleview_manipulation.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_manipulation.js
@@ -1,17 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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()
 {
   doc.body.innerHTML = '<div id="testid">Styled Node</div>';
   let element = doc.getElementById("testid");
   let elementStyle = new _ElementStyle(element);
 
--- a/browser/devtools/styleinspector/test/browser_ruleview_override.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_override.js
@@ -1,17 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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()
 {
   let style = '' +
     '#testid {' +
     '  background-color: blue;' +
     '} ' +
--- a/browser/devtools/styleinspector/test/browser_ruleview_ui.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_ui.js
@@ -1,17 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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;
 
 var gRuleViewChanged = false;
 function ruleViewChanged()
 {
   gRuleViewChanged = true;
--- a/browser/devtools/styleinspector/test/browser_ruleview_update.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_update.js
@@ -1,17 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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;
 let testElement;
 
 function startTest()
 {
   let style = '' +
--- a/browser/devtools/styleinspector/test/head.js
+++ b/browser/devtools/styleinspector/test/head.js
@@ -1,27 +1,27 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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/. */
 
 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 TargetFactory = tempScope.TargetFactory;
+let devtools = tempScope.devtools;
+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;
 
 let browser, hudId, hud, hudBox, filterBox, outputNode, cs;
 
 function addTab(aURL)
 {
   gBrowser.selectedTab = gBrowser.addTab();
--- a/browser/devtools/tilt/CmdTilt.jsm
+++ b/browser/devtools/tilt/CmdTilt.jsm
@@ -2,19 +2,28 @@
  * 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 = [ ];
 
 Components.utils.import('resource://gre/modules/XPCOMUtils.jsm');
 Components.utils.import("resource:///modules/devtools/gcli.jsm");
+Components.utils.import("resource:///modules/devtools/gDevTools.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "TiltManager",
-                                  "resource:///modules/devtools/Tilt.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
+});
+
 /**
  * 'tilt' command
  */
 gcli.addCommand({
   name: 'tilt',
   description: gcli.lookup("tiltDesc"),
   manual: gcli.lookup("tiltManual")
 });
--- a/browser/devtools/tilt/Makefile.in
+++ b/browser/devtools/tilt/Makefile.in
@@ -8,9 +8,9 @@ srcdir		= @srcdir@
 VPATH		= @srcdir@
 
 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
+	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools/tilt
--- a/browser/devtools/tilt/test/browser_tilt_picking_inspector.js
+++ b/browser/devtools/tilt/test/browser_tilt_picking_inspector.js
@@ -12,18 +12,18 @@ function test() {
   if (!isWebGLSupported()) {
     info("Skipping highlight test because WebGL isn't supported.");
     return;
   }
 
   waitForExplicitFinish();
 
   createTab(function() {
-    let { TargetFactory } = Cu.import("resource:///modules/devtools/Target.jsm", {});
-    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let { devtools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+    let target = devtools.TargetFactory.forTab(gBrowser.selectedTab);
 
     gDevTools.showToolbox(target, "inspector").then(function(toolbox) {
       let contentDocument = toolbox.target.tab.linkedBrowser.contentDocument;
       let div = contentDocument.getElementById("first-law");
       toolbox.getCurrentPanel().selection.setNode(div);
 
       createTilt({
         onTiltOpen: function(instance)
--- a/browser/devtools/tilt/test/head.js
+++ b/browser/devtools/tilt/test/head.js
@@ -1,29 +1,21 @@
 /* Any copyright is dedicated to the Public Domain.
    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;
 
 
 const DEFAULT_HTML = "data:text/html," +
   "<DOCTYPE html>" +
   "<html>" +
     "<head>" +
       "<meta charset='utf-8'/>" +
rename from browser/devtools/tilt/TiltGL.jsm
rename to browser/devtools/tilt/tilt-gl.js
--- a/browser/devtools/tilt/TiltGL.jsm
+++ b/browser/devtools/tilt/tilt-gl.js
@@ -1,31 +1,30 @@
 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
 "use strict";
 
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-const Cu = Components.utils;
+const {Cc, Ci, Cu} = require("chrome");
+
+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.
  *
  * @param {HTMLCanvasElement} aCanvas
  *                            the canvas element used for rendering
  * @param {Function} onError
  *                   optional, function called if initialization failed
rename from browser/devtools/tilt/TiltMath.jsm
rename to browser/devtools/tilt/tilt-math.js
--- a/browser/devtools/tilt/TiltMath.jsm
+++ b/browser/devtools/tilt/tilt-math.js
@@ -1,37 +1,36 @@
 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
 "use strict";
 
-const Cu = Components.utils;
+const {Cu} = require("chrome");
 
-Cu.import("resource:///modules/devtools/TiltUtils.jsm");
-
-this.EXPORTED_SYMBOLS =
-  ["EPSILON", "TiltMath", "vec3", "mat3", "mat4", "quat4"];
+let TiltUtils = require("devtools/tilt/tilt-utils");
 
 /**
  * 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;
 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.
    * Any array containing at least 3 numeric elements can serve as a vec3.
    *
    * @param {Array} aVec
    *                optional, vec3 containing values to initialize with
    *
@@ -488,20 +487,22 @@ this.vec3 = {
    * @return {String} representation of the vector
    */
   str: function V3_str(aVec)
   {
     return '[' + aVec[0] + ", " + aVec[1] + ", " + aVec[2] + ']';
   }
 };
 
+exports.vec3 = vec3;
+
 /**
  * mat3 - 3x3 Matrix.
  */
-this.mat3 = {
+let mat3 = {
 
   /**
    * Creates a new instance of a mat3 using the Float32Array array type.
    * Any array containing at least 9 numeric elements can serve as a mat3.
    *
    * @param {Array} aMat
    *                optional, mat3 containing values to initialize with
    *
@@ -651,20 +652,22 @@ this.mat3 = {
   str: function M3_str(aMat)
   {
     return "["  + aMat[0] + ", " + aMat[1] + ", " + aMat[2] +
            ", " + aMat[3] + ", " + aMat[4] + ", " + aMat[5] +
            ", " + aMat[6] + ", " + aMat[7] + ", " + aMat[8] + "]";
   }
 };
 
+exports.mat3 = mat3;
+
 /**
  * mat4 - 4x4 Matrix.
  */
-this.mat4 = {
+let mat4 = {
 
   /**
    * Creates a new instance of a mat4 using the default Float32Array type.
    * Any array containing at least 16 numeric elements can serve as a mat4.
    *
    * @param {Array} aMat
    *                optional, mat4 containing values to initialize with
    *
@@ -1619,20 +1622,22 @@ this.mat4 = {
     return "[" + mat[0] + ", " + mat[1] + ", " + mat[2] + ", " + mat[3] +
            ", "+ mat[4] + ", " + mat[5] + ", " + mat[6] + ", " + mat[7] +
            ", "+ mat[8] + ", " + mat[9] + ", " + mat[10] + ", " + mat[11] +
            ", "+ mat[12] + ", " + mat[13] + ", " + mat[14] + ", " + mat[15] +
            "]";
   }
 };
 
+exports.mat4 = mat4;
+
 /**
  * quat4 - Quaternion.
  */
-this.quat4 = {
+let quat4 = {
 
   /**
    * Creates a new instance of a quat4 using the default Float32Array type.
    * Any array containing at least 4 numeric elements can serve as a quat4.
    *
    * @param {Array} aQuat
    *                optional, quat4 containing values to initialize with
    *
@@ -2108,20 +2113,22 @@ this.quat4 = {
   str: function Q4_str(aQuat) {
     return "[" + aQuat[0] + ", " +
                  aQuat[1] + ", " +
                  aQuat[2] + ", " +
                  aQuat[3] + "]";
   }
 };
 
+exports.quat4 = quat4;
+
 /**
  * Various algebraic math functions required by the engine.
  */
-this.TiltMath = {
+let TiltMath = {
 
   /**
    * Helper function, converts degrees to radians.
    *
    * @param {Number} aDegrees
    *                 the degrees to be converted to radians
    *
    * @return {Number} the degrees converted to radians
@@ -2300,14 +2307,16 @@ this.TiltMath = {
       }
 
       // your argument is invalid
       return (cache[hex] = [0, 0, 0, 1]);
     };
   }())
 };
 
+exports.TiltMath = TiltMath;
+
 // bind the owner object to the necessary functions
 TiltUtils.bindObjectFunc(vec3);
 TiltUtils.bindObjectFunc(mat3);
 TiltUtils.bindObjectFunc(mat4);
 TiltUtils.bindObjectFunc(quat4);
 TiltUtils.bindObjectFunc(TiltMath);
rename from browser/devtools/tilt/TiltUtils.jsm
rename to browser/devtools/tilt/tilt-utils.js
--- a/browser/devtools/tilt/TiltUtils.jsm
+++ b/browser/devtools/tilt/tilt-utils.js
@@ -1,31 +1,28 @@
 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
 "use strict";
 
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-const Cu = Components.utils;
+const {Cc, Ci, Cu} = require("chrome");
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 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.
  */
 TiltUtils.Output = {
 
   /**
    * Logs a message to the console.
rename from browser/devtools/tilt/TiltVisualizerStyle.jsm
rename to browser/devtools/tilt/tilt-visualizer-style.js
--- a/browser/devtools/tilt/TiltVisualizerStyle.jsm
+++ b/browser/devtools/tilt/tilt-visualizer-style.js
@@ -1,27 +1,22 @@
 /* -*- Mode: javascript, tab-width: 2, indent-tabs-mode: nil, c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
 "use strict";
 
-const Cu = Components.utils;
-
-Cu.import("resource:///modules/devtools/TiltMath.jsm");
-
-this.EXPORTED_SYMBOLS = ["TiltVisualizerStyle"];
+let {TiltMath} = require("devtools/tilt/tilt-math");
 let rgba = TiltMath.hex2rgba;
 
 /**
  * Various colors and style settings used throughout Tilt.
  */
-this.TiltVisualizerStyle = {
-
+module.exports = {
   canvas: {
     background: "linear-gradient(#454545 0%, #000 100%)",
   },
 
   nodes: {
     highlight: {
       defaultFill: rgba("#555"),
       defaultStroke: rgba("#000"),
rename from browser/devtools/tilt/TiltVisualizer.jsm
rename to browser/devtools/tilt/tilt-visualizer.js
--- a/browser/devtools/tilt/TiltVisualizer.jsm
+++ b/browser/devtools/tilt/tilt-visualizer.js
@@ -1,17 +1,25 @@
 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
 "use strict";
 
-const Cu = Components.utils;
-const Ci = Components.interfaces;
+const {Cu, Ci, ChromeWorker} = require("chrome");
+
+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 = {
   "head": true,
   "base": true,
   "basefont": true,
   "isindex": true,
   "link": true,
@@ -41,42 +49,33 @@ const ARCBALL_SENSITIVITY = 0.5;
 const ARCBALL_ROTATION_STEP = 0.15;
 const ARCBALL_TRANSLATION_STEP = 35;
 const ARCBALL_ZOOM_STEP = 0.1;
 const ARCBALL_ZOOM_MIN = -3000;
 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_PICKER = "resource:///modules/devtools/TiltWorkerPicker.js";
+const TILT_CRAFTER = "resource:///modules/devtools/tilt/TiltWorkerCrafter.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.
  *
  * @param {Object} aProperties
  *                 an object containing the following properties:
  *        {Window} chromeWindow: a reference to the top level window
  *        {Window} contentWindow: the content window holding the visualized doc
  *       {Element} parentNode: the parent node to hold the visualization
  *        {Object} notifications: necessary notifications for Tilt
  *      {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 || {};
 
   /**
    * Save a reference to the top-level window.
    */
   this.chromeWindow = aProperties.chromeWindow;
@@ -101,16 +100,18 @@ this.TiltVisualizer = function TiltVisua
     aProperties.onLoad || null);
 
   /**
    * Visualization mouse and keyboard controller.
    */
   this.controller = new TiltVisualizer.Controller(this.canvas, this.presenter);
 }
 
+exports.TiltVisualizer = TiltVisualizer;
+
 TiltVisualizer.prototype = {
 
   /**
    * Initializes the visualizer.
    */
   init: function TV_init()
   {
     this.presenter.init();
@@ -1419,20 +1420,19 @@ TiltVisualizer.Controller.prototype = {
   },
 
   /**
    * Called when a key is pressed.
    */
   _onKeyPress: function TVC__onKeyPress(e)
   {
     if (e.keyCode === e.DOM_VK_ESCAPE) {
-      let mod = {};
-      Cu.import("resource:///modules/devtools/Tilt.jsm", mod);
+      let {TiltManager} = require("devtools/tilt/tilt");
       let tilt =
-        mod.TiltManager.getTiltForBrowser(this.presenter.chromeWindow);
+        TiltManager.getTiltForBrowser(this.presenter.chromeWindow);
       e.preventDefault();
       e.stopPropagation();
       tilt.destroy(tilt.currentWindowId, true);
     }
   },
 
   /**
    * Called when the canvas looses focus.
rename from browser/devtools/tilt/Tilt.jsm
rename to browser/devtools/tilt/tilt.js
--- a/browser/devtools/tilt/Tilt.jsm
+++ b/browser/devtools/tilt/tilt.js
@@ -1,16 +1,23 @@
 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* 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/. */
 "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 = {
   // Called early in the startup of a new tilt instance
   STARTUP: "tilt-startup",
 
   // Fires when Tilt starts the initialization.
   INITIALIZING: "tilt-initializing",
@@ -40,45 +47,39 @@ const TILT_NOTIFICATIONS = {
 
   // Fires once Tilt stops highlighting any element.
   UNHIGHLIGHTING: "tilt-unhighlighting",
 
   // Fires when a node is removed from the 3D mesh.
   NODE_REMOVED: "tilt-node-removed"
 };
 
-Cu.import("resource://gre/modules/Services.jsm");
-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 = {
+let TiltManager = {
   _instances: new WeakMap(),
   getTiltForBrowser: function(aChromeWindow)
   {
     if (this._instances.has(aChromeWindow)) {
       return this._instances.get(aChromeWindow);
     } else {
       let tilt = new Tilt(aChromeWindow);
       this._instances.set(aChromeWindow, tilt);
       return tilt;
     }
   },
 }
 
+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.
    */
   this.chromeWindow = aWindow;
 
   /**
    * All the instances of TiltVisualizer.
--- a/browser/devtools/webconsole/HUDService.jsm
+++ b/browser/devtools/webconsole/HUDService.jsm
@@ -11,34 +11,31 @@ const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
     "resource:///modules/devtools/gDevTools.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-    "resource:///modules/devtools/Target.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
+    "resource:///modules/devtools/gDevTools.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Services",
     "resource://gre/modules/Services.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "DebuggerServer",
   "resource://gre/modules/devtools/dbg-server.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "DebuggerClient",
   "resource://gre/modules/devtools/dbg-client.jsm");
 
 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");
 
 XPCOMUtils.defineLazyModuleGetter(this, "ViewHelpers",
     "resource:///modules/devtools/ViewHelpers.jsm");
 
 const STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
 let l10n = new WebConsoleUtils.l10n(STRINGS_URI);
@@ -79,17 +76,17 @@ HUD_SERVICE.prototype =
    */
   currentContext: function HS_currentContext() {
     return Services.wm.getMostRecentWindow("navigator:browser");
   },
 
   /**
    * 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.
    * @param nsIDOMWindow aIframeWindow
    *        The window where the web console UI is already loaded.
    * @param nsIDOMWindow aChromeWindow
    *        The window of the web console owner.
    * @return object
@@ -598,17 +595,17 @@ var HeadsUpDisplayUICommands = {
    *
    * @return object
    *         A Promise for either the opening of the toolbox that holds the Web
    *         Console, or a Promise for the closing of the toolbox.
    */
   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" ?
         toolbox.destroy() :
         gDevTools.showToolbox(target, "webconsole");
   },
 
   /**
@@ -616,20 +613,20 @@ var HeadsUpDisplayUICommands = {
    * instance.
    * @return object|null
    *         The WebConsole object or null if the active tab has no open Web
    *         Console.
    */
   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;
   },
 
   /**
    * Toggle the Browser Console.
    */
@@ -678,26 +675,26 @@ var HeadsUpDisplayUICommands = {
     function getTarget(aConnection)
     {
       let options = {
         form: aConnection.form,
         client: aConnection.client,
         chrome: true,
       };
 
-      return TargetFactory.forRemoteTab(options);
+      return devtools.TargetFactory.forRemoteTab(options);
     }
 
     function openWindow(aTarget)
     {
       target = aTarget;
 
       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);
         deferred.resolve(win);
       });
 
       return deferred.promise;
     }
@@ -714,8 +711,9 @@ var HeadsUpDisplayUICommands = {
   },
 
   get browserConsole() {
     return HUDService.getHudReferenceById(this._browserConsoleID);
   },
 };
 
 const HUDService = new HUD_SERVICE();
+
--- a/browser/devtools/webconsole/Makefile.in
+++ b/browser/devtools/webconsole/Makefile.in
@@ -12,8 +12,11 @@ include $(DEPTH)/config/autoconf.mk
 EXTRA_JS_MODULES = \
 		HUDService.jsm \
 		PropertyPanel.jsm \
 		NetworkPanel.jsm \
 		WebConsolePanel.jsm \
 		$(NULL)
 
 include $(topsrcdir)/config/rules.mk
+
+libs::
+	$(NSINSTALL) $(srcdir)/*.js $(FINAL_TARGET)/modules/devtools/framework
--- a/browser/devtools/webconsole/WebConsolePanel.jsm
+++ b/browser/devtools/webconsole/WebConsolePanel.jsm
@@ -12,17 +12,17 @@ Cu.import("resource://gre/modules/XPCOMU
 
 XPCOMUtils.defineLazyModuleGetter(this, "Promise",
     "resource://gre/modules/commonjs/sdk/core/promise.js");
 
 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.
  */
 function WebConsolePanel(iframeWindow, toolbox) {
   this._frameWindow = iframeWindow;
   this._toolbox = toolbox;
   EventEmitter.decorate(this);
@@ -72,17 +72,16 @@ WebConsolePanel.prototype = {
     // 3. Open the Web Console.
     return deferredIframe.promise
       .then(() => promiseTarget)
       .then((aTarget) => {
         this._frameWindow._remoteTarget = aTarget;
 
         let webConsoleUIWindow = iframe.contentWindow.wrappedJSObject;
         let chromeWindow = iframe.ownerDocument.defaultView;
-
         return HUDService.openWebConsole(this.target, webConsoleUIWindow,
                                          chromeWindow);
       })
       .then((aWebConsole) => {
         this.hud = aWebConsole;
         this._isReady = true;
         this.emit("ready");
         return this;
--- a/browser/devtools/webconsole/test/head.js
+++ b/browser/devtools/webconsole/test/head.js
@@ -5,18 +5,17 @@
 
 let tempScope = {};
 Cu.import("resource:///modules/HUDService.jsm", tempScope);
 let HUDService = tempScope.HUDService;
 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.TargetFactory;
+let TargetFactory = tempScope.devtools.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;
 
 let gPendingOutputTest = 0;
 
 // The various categories of messages.
 const CATEGORY_NETWORK = 0;
--- a/browser/devtools/webconsole/webconsole.js
+++ b/browser/devtools/webconsole/webconsole.js
@@ -32,21 +32,21 @@ XPCOMUtils.defineLazyModuleGetter(this, 
                                   "resource://gre/modules/devtools/WebConsoleUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Promise",
                                   "resource://gre/modules/commonjs/sdk/core/promise.js");
 
 XPCOMUtils.defineLazyModuleGetter(this, "VariablesView",
                                   "resource:///modules/devtools/VariablesView.jsm");
 
-XPCOMUtils.defineLazyModuleGetter(this, "ToolSidebar",
-                                  "resource:///modules/devtools/Sidebar.jsm");
-
 XPCOMUtils.defineLazyModuleGetter(this, "EventEmitter",
-                                  "resource:///modules/devtools/EventEmitter.jsm");
+                                  "resource:///modules/devtools/shared/event-emitter.js");
+
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 const STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
 let l10n = new WebConsoleUtils.l10n(STRINGS_URI);
 
 
 // The XUL namespace.
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
@@ -3053,23 +3053,24 @@ JSTerm.prototype = {
     }
 
     return promise.then(onContainerReady);
   },
 
   /**
    * Create the Web Console sidebar.
    *
-   * @see Sidebar.jsm
+   * @see devtools/framework/sidebar.js
    * @private
    */
   _createSidebar: function JST__createSidebar()
   {
     if (!this.sidebar) {
       let tabbox = this.hud.document.querySelector("#webconsole-sidebar");
+      let ToolSidebar = devtools.require("devtools/framework/sidebar").ToolSidebar;
       this.sidebar = new ToolSidebar(tabbox, this);
     }
     this.sidebar.show();
   },
 
   /**
    * Add the variables view tab to the sidebar.
    *
--- a/browser/locales/en-US/chrome/browser/devtools/gclicommands.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/gclicommands.properties
@@ -729,16 +729,63 @@ pagemodRemoveAttributeRootDesc=CSS selec
 # to describe the 'ignoreCase' parameter to the 'pagemod remove attribute'
 # command, which is displayed in a dialog when the user is using this command.
 pagemodRemoveAttributeIgnoreCaseDesc=Perform case-insensitive search
 
 # LOCALIZATION NOTE (pagemodRemoveAttributeResult) A string displayed as the
 # result of the 'pagemod remove attribute' command.
 pagemodRemoveAttributeResult=Elements matched by selector: %1$S. Attributes removed: %2$S.
 
+# LOCALIZATION NOTE (toolsDesc) A very short description of the 'tools'
+# command, the parent command for tool-hacking commands.
+toolsDesc=Hack the &brandShortName; Developer Tools
+
+# LOCALIZATION NOTE (toolsDesc) A fuller description of the 'tools'
+# command.
+toolsManual=Various commands related to hacking directly on the &brandShortName; Developer Tools.
+
+# LOCALIZATION NOTE (toolsSrcdirDesc) A very short description of the 'tools srcdir'
+# command, for pointing your developer tools loader at a mozilla-central source tree.
+toolsSrcdirDesc=Load tools from a mozilla-central checkout
+
+# LOCALIZATION NOTE (toolsSrcdirNotFound) Shown when the 'tools srcdir' command was handed
+# an invalid srcdir.
+toolsSrcdirNotFound=%1$s does not exist or is not a mozilla-central checkout.
+
+# LOCALIZATION NOTE (toolsSrcdirReloaded) Displayed when tools have been reloaded by the
+# 'tools srcdir' command.
+toolsSrcdirReloaded=Tools loaded from %1$s.
+
+# LOCALIZATION NOTE (toolsSrcdirDesc) A full description of the 'tools srcdir'
+# command.
+toolsSrcdirManual=Load the &brandShortName; Developer Tools from a complete mozilla-central checkout.
+
+# LOCALIZATION NOTE (toolsSrcdirDir) The srcdir argument to the 'tools srcdir' command.
+toolsSrcdirDir=A mozilla-central checkout
+
+# LOCALIZATION NOTE (toolsBuiltinDesc) A short description of the 'tools builtin'
+# command, which overrides a previous 'tools srcdir' command.
+toolsBuiltinDesc=Use the builtin tools
+
+# LOCALIZATION NOTE (toolsBuiltinDesc) A fuller description of the 'tools builtin'
+# command.
+toolsBuiltinManual=Use the builtin tools, overriding any previous srcdir command.
+
+# LOCALIZATION NOTE (toolsBuiltinReloaded) Displayed when tools are loaded with the
+# 'tools builtin' command.
+toolsBuiltinReloaded=Built-in tools loaded.
+
+# LOCALIZATION NOTE (toolsReloadDesc) A short description of the 'tools reload' command.
+# which will reload the tools from the current srcdir.
+toolsReloadDesc=Reload the developer tools
+
+# LOCALIZATION NOTE (toolsReloaded) Displayed when tools are reloaded with the 'tools
+# reload' command.
+toolsReloaded="Tools reloaded."
+
 # LOCALIZATION NOTE (cookieDesc) A very short description of the 'cookie'
 # command. See cookieManual for a fuller description of what it does. This
 # string is designed to be shown in a menu alongside the command name, which
 # is why it should be as short as possible.
 cookieDesc=Display and alter cookies
 
 # LOCALIZATION NOTE (cookieManual) A fuller description of the 'cookie'
 # command, displayed when the user asks for help on what it does.
--- a/toolkit/components/url-classifier/tests/unit/test_prefixset.js
+++ b/toolkit/components/url-classifier/tests/unit/test_prefixset.js
@@ -152,17 +152,16 @@ function testLargeSet() {
   arr.sort(function(x,y) x - y);
 
   let pset = newPset();
   pset.setPrefixes(arr, arr.length);
 
   doExpectedLookups(pset, arr, 1);
   doRandomLookups(pset, arr, 1000);
 
-
   checkContents(pset, arr);
 }
 
 function testTinySet() {
   let pset = Cc["@mozilla.org/url-classifier/prefixset;1"]
                .createInstance(Ci.nsIUrlClassifierPrefixSet);
   let prefixes = [1];
   pset.setPrefixes(prefixes, prefixes.length);
--- a/toolkit/devtools/debugger/dbg-transport.js
+++ b/toolkit/devtools/debugger/dbg-transport.js
@@ -177,17 +177,17 @@ DebuggerTransport.prototype = {
         self.hooks.onPacket(parsed);
       }}, 0);
     } catch(e) {
       let msg = "Error handling incoming packet: " + e + " - " + e.stack;
       if (Cu.reportError) {
         Cu.reportError(msg);
       }
       dump(msg + "\n");
-      dumpn("Packet was: " + packet);
+      dumpn("Packet was: " + JSON.stringify(packet));
     }
 
     return true;
   }
 }
 
 
 /**
@@ -224,17 +224,17 @@ LocalDebuggerTransport.prototype = {
         other.hooks.onPacket(aPacket);
       }}, 0);
     } catch(e) {
       let msg = "Error handling incoming packet: " + e + " - " + e.stack;
       if (Cu.reportError) {
         Cu.reportError(msg);
       }
       dump(msg + "\n");
-      dumpn("Packet was: " + aPacket + "\n");
+      dump("Packet was: " + JSON.stringify(aPacket) + "\n");
     }
   },
 
   /**
    * Close the transport.
    */
   close: function LDT_close() {
     if (this.other) {
--- a/toolkit/devtools/webconsole/WebConsoleUtils.jsm
+++ b/toolkit/devtools/webconsole/WebConsoleUtils.jsm
@@ -27,19 +27,18 @@ XPCOMUtils.defineLazyModuleGetter(this, 
 XPCOMUtils.defineLazyServiceGetter(this, "gActivityDistributor",
                                    "@mozilla.org/network/http-activity-distributor;1",
                                    "nsIHttpActivityDistributor");
 
 // TODO: Bug 842672 - toolkit/ imports modules from browser/.
 // Note that these are only used in JSTermHelpers, see $0 and pprint().
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
                                   "resource:///modules/devtools/gDevTools.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-                                  "resource:///modules/devtools/Target.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
+                                  "resource:///modules/devtools/gDevTools.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "VariablesView",
                                   "resource:///modules/devtools/VariablesView.jsm");
 
 this.EXPORTED_SYMBOLS = ["WebConsoleUtils", "JSPropertyProvider", "JSTermHelpers",
                          "PageErrorListener", "ConsoleAPIListener",
                          "NetworkResponseListener", "NetworkMonitor",
                          "ConsoleProgressListener"];
@@ -1586,17 +1585,17 @@ this.JSTermHelpers = function JSTermHelp
    *         The DOM element currently selected in the highlighter.
    */
    Object.defineProperty(aOwner.sandbox, "$0", {
     get: function() {
       let window = aOwner.chromeWindow();
       if (!window) {
         return null;
       }
-      let target = TargetFactory.forTab(window.gBrowser.selectedTab);
+      let target = devtools.TargetFactory.forTab(window.gBrowser.selectedTab);
       let toolbox = gDevTools.getToolbox(target);
       let panel = toolbox ? toolbox.getPanel("inspector") : null;
       let node = panel ? panel.selection.node : null;
 
       return node ? aOwner.makeDebuggeeValue(node) : null;
     },
     enumerable: true,
     configurable: false