Bug 855914 - Start using the jetpack loader in devtools. r=jwalker, f=ochameau
☠☠ backed out by 394cd944912b ☠ ☠
authorDave Camp <dcamp@mozilla.com>
Thu, 11 Apr 2013 13:59:08 -0700
changeset 128310 549973e335e4ac447858b474d1bb5597d2a6d0b7
parent 128309 2b9e5948213f13237bde2c32365ecee3a1189c99
child 128311 394cd944912b7b976c372cf2e7c2d5b20041c7db
push id1502
push userdcamp@campd.org
push dateThu, 11 Apr 2013 20:59:40 +0000
treeherderfx-team@549973e335e4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjwalker
bugs855914
milestone23.0a1
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/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_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/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/undo.js
browser/devtools/styleeditor/StyleEditorPanel.jsm
browser/devtools/styleeditor/test/browser_styleeditor_bug_826982_location_changed.js
browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
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/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/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
@@ -320,19 +320,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")
@@ -352,17 +349,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) {
@@ -504,17 +501,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);
@@ -750,30 +747,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) {
@@ -1514,16 +1511,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.
@@ -1908,13 +1974,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/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.
+    for (let key of Object.getOwnPropertyNames(exports)) {
+      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.
@@ -184,17 +352,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));
 
@@ -238,16 +406,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);
     }
@@ -279,42 +456,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);
     }
   },
@@ -527,18 +712,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");
@@ -634,8 +819,12 @@ gDevTools.on("tool-registered", function
 gDevTools.on("tool-unregistered", function(ev, toolId) {
   gDevToolsBrowser._removeToolFromWindows(toolId);
 });
 
 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_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,63 @@
 /* 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)
+};
+
+let systemEvents = require("sdk/system/events");
 
-const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource:///modules/devtools/gDevTools.jsm");
+
+loader.lazyGetter(exports, "Toolbox", () => require("devtools/framework/toolbox").Toolbox);
+loader.lazyGetter(exports, "TargetFactory", () => require("devtools/framework/target").TargetFactory);
+
+loader.lazyGetter(this, "osString", () => Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS);
 
+// Panels
+loader.lazyGetter(this, "InspectorPanel", function() require("devtools/inspector/inspector-panel").InspectorPanel);
+loader.lazyImporter(this, "WebConsolePanel", "resource:///modules/WebConsolePanel.jsm");
+loader.lazyImporter(this, "DebuggerPanel", "resource:///modules/devtools/DebuggerPanel.jsm");
+loader.lazyImporter(this, "StyleEditorPanel", "resource:///modules/devtools/StyleEditorPanel.jsm");
+loader.lazyImporter(this, "ProfilerPanel", "resource:///modules/devtools/ProfilerPanel.jsm");
+loader.lazyImporter(this, "NetMonitorPanel", "resource:///modules/devtools/NetMonitorPanel.jsm");
+
+// Strings
 const inspectorProps = "chrome://browser/locale/devtools/inspector.properties";
 const debuggerProps = "chrome://browser/locale/devtools/debugger.properties";
 const styleEditorProps = "chrome://browser/locale/devtools/styleeditor.properties";
 const webConsoleProps = "chrome://browser/locale/devtools/webconsole.properties";
 const profilerProps = "chrome://browser/locale/devtools/profiler.properties";
 const netMonitorProps = "chrome://browser/locale/devtools/netmonitor.properties";
-
-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 +67,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 +89,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 +110,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 +131,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 +153,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,28 +175,41 @@ let netMonitorDefinition = {
   },
 
   build: function(iframeWindow, toolbox) {
     let panel = new NetMonitorPanel(iframeWindow, toolbox);
     return panel.open();
   }
 };
 
-this.defaultTools = [
-  styleEditorDefinition,
-  webConsoleDefinition,
-  debuggerDefinition,
-  inspectorDefinition,
-  netMonitorDefinition
+let defaultTools = [
+  Tools.styleEditor,
+  Tools.webConsole,
+  Tools.jsdebugger,
+  Tools.inspector,
+  Tools.netMonitor
 ];
 
 if (Services.prefs.getBoolPref("devtools.profiler.enabled")) {
-  defaultTools.push(profilerDefinition);
+  defaultTools.push(Tools.jsprofiler);
+}
+
+for (let definition of defaultTools) {
+  gDevTools.registerTool(definition);
 }
 
+systemEvents.on("sdk:loader:destroy", function onunload({subject, data: reason}) {
+  if (subject.wrappedJSObject === require("@loader/unload")) {
+    systemEvents.off("sdk:loader:destroy", onunload);
+    for (let definition of defaultTools) {
+      gDevTools.unregisterTool(definition.id);
+    }
+  }
+}, true);
+
 /**
  * Lookup l10n string from a string bundle.
  *
  * @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/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,18 +1,18 @@
 /* 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 { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let { gDevTools, devtools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
+let TargetFactory = devtools.TargetFactory;
 
 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.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();
 
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/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");
 
 XPCOMUtils.defineLazyModuleGetter(this, "StyleEditorChrome",
                         "resource:///modules/devtools/StyleEditorChrome.jsm");
 
 this.StyleEditorPanel = function StyleEditorPanel(panelWin, toolbox) {
   EventEmitter.decorate(this);
 
   this._toolbox = toolbox;
--- a/browser/devtools/styleeditor/test/browser_styleeditor_bug_826982_location_changed.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_bug_826982_location_changed.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;
-
 function test() {
   let notificationBox, styleEditor;
   let alertActive1_called = false;
   let alertActive2_called = false;
 
   function startLocationTests() {
     let target = TargetFactory.forTab(gBrowser.selectedTab);
 
--- a/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_reopen.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() {
 
   // http rather than chrome to improve coverage
   const TESTCASE_URI = TEST_BASE_HTTP + "simple.gz.html";
 
   const Cc = Components.classes;
   const Ci = Components.interfaces;
 
--- 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 gChromeWindow;               //StyleEditorChrome window
 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
 };
 
@@ -1242,25 +1241,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,42 +1,38 @@
 /* -*- 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.
  */
 
 // Used to split on css line separators
 const CSS_LINE_RE = /(?:[^;\(]*(?:\([^\)]*?\))?[^;\(]*)*;?/g;
 
 // Used to parse a single property line.
 const CSS_PROP_RE = /\s*([^:\s]*)\s*:\s*(.*?)\s*(?:! (important))?;?$/;
 
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource:///modules/devtools/CssLogic.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource:///modules/devtools/InplaceEditor.jsm");
-
-this.EXPORTED_SYMBOLS = ["CssRuleView",
-                         "_ElementStyle"];
-
 /**
  * Our model looks like this:
  *
  * ElementStyle:
  *   Responsible for keeping track of which properties are overridden.
  *   Maintains a list of Rule objects that apply to the element.
  * Rule:
  *   Manages a single style declaration or rule.
@@ -83,17 +79,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.
@@ -858,30 +854,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/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;
@@ -102,16 +101,18 @@ this.TiltVisualizer = function TiltVisua
   this.bindToInspector(aProperties.tab);
 
   /**
    * 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
@@ -8,42 +8,43 @@
 
 const Cc = Components.classes;
 const Ci = Components.interfaces;
 const Cu = Components.utils;
 
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
+dump("q\n");
+
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
     "resource:///modules/devtools/gDevTools.jsm");
-
-XPCOMUtils.defineLazyModuleGetter(this, "TargetFactory",
-    "resource:///modules/devtools/Target.jsm");
+dump("r\n");
+XPCOMUtils.defineLazyModuleGetter(this, "devtools",
+    "resource:///modules/devtools/gDevTools.jsm");
+dump("s\n");
 
 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");
+dump("t\n");
 
 const STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
 let l10n = new WebConsoleUtils.l10n(STRINGS_URI);
 
 const BROWSER_CONSOLE_WINDOW_FEATURES = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
 
 this.EXPORTED_SYMBOLS = ["HUDService"];
 
@@ -79,31 +80,33 @@ 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
    *         A Promise object for the opening of the new WebConsole instance.
    */
   openWebConsole:
   function HS_openWebConsole(aTarget, aIframeWindow, aChromeWindow)
   {
+    dump("w\n");
     let hud = new WebConsole(aTarget, aIframeWindow, aChromeWindow);
+    dump("x\n");
     this.hudReferences[hud.hudId] = hud;
     return hud.init();
   },
 
   /**
    * Open a Browser Console for the given target.
    *
    * @see devtools/framework/Target.jsm for details about targets.
@@ -250,16 +253,17 @@ WebConsole.prototype = {
    * Initialize the Web Console instance.
    *
    * @return object
    *         A Promise for the initialization.
    */
   init: function WC_init()
   {
     this.ui = new this.iframeWindow.WebConsoleFrame(this);
+    dump("y: " + this.ui + "\n");
     return this.ui.init().then(() => this);
   },
 
   /**
    * Retrieve the Web Console panel title.
    *
    * @return string
    *         The Web Console panel title.
@@ -604,17 +608,19 @@ 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);
+    dump("about to toggle hud\n");
+    let target = devtools.TargetFactory.forTab(window.gBrowser.selectedTab);
+    dump("done toggling hud\n");
     let toolbox = gDevTools.getToolbox(target);
 
     return toolbox && toolbox.currentToolId == "webconsole" ?
         toolbox.destroy() :
         gDevTools.showToolbox(target, "webconsole");
   },
 
   /**
@@ -622,20 +628,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.
    */
@@ -674,26 +680,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;
     }
@@ -710,8 +716,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,26 +72,28 @@ 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;
-
+        dump("a\n");
         return HUDService.openWebConsole(this.target, webConsoleUIWindow,
                                          chromeWindow);
       })
       .then((aWebConsole) => {
+        dump("b\n");
         this.hud = aWebConsole;
         this._isReady = true;
         this.emit("ready");
         return this;
       }, (aReason) => {
+        dump(aReason.stack + "\n");
         let msg = "WebConsolePanel open failed. " +
                   aReason.error + ": " + aReason.message;
         dump(msg + "\n");
         Cu.reportError(msg);
       });
   },
 
   get target() this._toolbox.target,
--- 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;
 
 const WEBCONSOLE_STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";
 let WCU_l10n = new WebConsoleUtils.l10n(WEBCONSOLE_STRINGS_URI);
 
 function log(aMsg)
--- 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";
 
@@ -365,17 +365,19 @@ WebConsoleFrame.prototype = {
 
   /**
    * Initialize the WebConsoleFrame instance.
    * @return object
    *         A Promise object for the initialization.
    */
   init: function WCF_init()
   {
+    dump("initing ui\n");
     this._initUI();
+    dump("initting connection\n");
     return this._initConnection();
   },
 
   /**
    * Connect to the server using the remote debugging protocol.
    *
    * @private
    * @return object
@@ -413,32 +415,34 @@ WebConsoleFrame.prototype = {
    */
   _initUI: function WCF__initUI()
   {
     // Remember that this script is loaded in the webconsole.xul context:
     // |window| is the iframe global.
     this.window = window;
     this.document = this.window.document;
     this.rootElement = this.document.documentElement;
+    dump("@\n");
 
     this._initDefaultFilterPrefs();
 
     // Register the controller to handle "select all" properly.
     this._commandController = new CommandController(this);
     this.window.controllers.insertControllerAt(0, this._commandController);
 
     let doc = this.document;
 
     this.filterBox = doc.querySelector(".hud-filter-box");
     this.outputNode = doc.querySelector(".hud-output-node");
     this.completeNode = doc.querySelector(".jsterm-complete-node");
     this.inputNode = doc.querySelector(".jsterm-input-node");
 
     this._setFilterTextBoxEvents();
     this._initFilterButtons();
+    dump("#\n");
 
     let fontSize = Services.prefs.getIntPref("devtools.webconsole.fontSize");
 
     if (fontSize != 0) {
       fontSize = Math.max(MIN_FONT_SIZE, fontSize);
 
       this.outputNode.style.fontSize = fontSize + "px";
       this.completeNode.style.fontSize = fontSize + "px";
@@ -454,16 +458,18 @@ WebConsoleFrame.prototype = {
                           !this.getFilterState("network");
 
     saveBodies.parentNode.addEventListener("popupshowing", function() {
       saveBodies.setAttribute("checked", this.saveRequestAndResponseBodies);
       saveBodies.disabled = !this.getFilterState("networkinfo") &&
                             !this.getFilterState("network");
     }.bind(this));
 
+    dump("!\n");
+
     // Remove this part when context menu entry is removed.
     let saveBodiesContextMenu = doc.getElementById("saveBodiesContextMenu");
     saveBodiesContextMenu.addEventListener("command", function() {
       this.saveRequestAndResponseBodies = !this.saveRequestAndResponseBodies;
     }.bind(this));
     saveBodiesContextMenu.setAttribute("checked",
                                        this.saveRequestAndResponseBodies);
     saveBodiesContextMenu.disabled = !this.getFilterState("networkinfo") &&
@@ -477,19 +483,22 @@ WebConsoleFrame.prototype = {
     }.bind(this));
 
     let clearButton = doc.getElementsByClassName("webconsole-clear-console-button")[0];
     clearButton.addEventListener("command", function WCF__onClearButton() {
       this.owner._onClearButton();
       this.jsterm.clearOutput(true);
     }.bind(this));
 
+dump("before jsterm\n");
+
     this.jsterm = new JSTerm(this);
     this.jsterm.init();
     this.jsterm.inputNode.focus();
+    dump("after jsterm\n");
   },
 
   /**
    * Initialize the default filter preferences.
    * @private
    */
   _initDefaultFilterPrefs: function WCF__initDefaultFilterPrefs()
   {
@@ -3001,23 +3010,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
@@ -707,16 +707,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 Firefox Developer Tools
+
+# LOCALIZATION NOTE (toolsDesc) A fuller description of the 'tools'
+# command.
+toolsManual=Various commands related to hacking directly on the Firefox 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 Firefox 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/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