Add m-esr52 at 52.6.0

121 files changed, 16997 insertions, 0 deletions

diff --git a/devtools/client/framework/ToolboxProcess.jsm b/devtools/client/framework/ToolboxProcess.jsm
new file mode 100644
index 000000000..cd12e92cd
--- /dev/null
+++ b/devtools/client/framework/ToolboxProcess.jsm
@@ -0,0 +1,291 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+
+const DBG_XUL = "chrome://devtools/content/framework/toolbox-process-window.xul";
+const CHROME_DEBUGGER_PROFILE_NAME = "chrome_debugger_profile";
+
+const { require, DevToolsLoader } = Cu.import("resource://devtools/shared/Loader.jsm", {});
+const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyGetter(this, "Telemetry", function () {
+  return require("devtools/client/shared/telemetry");
+});
+XPCOMUtils.defineLazyGetter(this, "EventEmitter", function () {
+  return require("devtools/shared/event-emitter");
+});
+const promise = require("promise");
+const Services = require("Services");
+
+this.EXPORTED_SYMBOLS = ["BrowserToolboxProcess"];
+
+var processes = new Set();
+
+/**
+ * Constructor for creating a process that will hold a chrome toolbox.
+ *
+ * @param function aOnClose [optional]
+ *        A function called when the process stops running.
+ * @param function aOnRun [optional]
+ *        A function called when the process starts running.
+ * @param object aOptions [optional]
+ *        An object with properties for configuring BrowserToolboxProcess.
+ */
+this.BrowserToolboxProcess = function BrowserToolboxProcess(aOnClose, aOnRun, aOptions) {
+  let emitter = new EventEmitter();
+  this.on = emitter.on.bind(emitter);
+  this.off = emitter.off.bind(emitter);
+  this.once = emitter.once.bind(emitter);
+  // Forward any events to the shared emitter.
+  this.emit = function (...args) {
+    emitter.emit(...args);
+    BrowserToolboxProcess.emit(...args);
+  };
+
+  // If first argument is an object, use those properties instead of
+  // all three arguments
+  if (typeof aOnClose === "object") {
+    if (aOnClose.onClose) {
+      this.once("close", aOnClose.onClose);
+    }
+    if (aOnClose.onRun) {
+      this.once("run", aOnClose.onRun);
+    }
+    this._options = aOnClose;
+  } else {
+    if (aOnClose) {
+      this.once("close", aOnClose);
+    }
+    if (aOnRun) {
+      this.once("run", aOnRun);
+    }
+    this._options = aOptions || {};
+  }
+
+  this._telemetry = new Telemetry();
+
+  this.close = this.close.bind(this);
+  Services.obs.addObserver(this.close, "quit-application", false);
+  this._initServer();
+  this._initProfile();
+  this._create();
+
+  processes.add(this);
+};
+
+EventEmitter.decorate(BrowserToolboxProcess);
+
+/**
+ * Initializes and starts a chrome toolbox process.
+ * @return object
+ */
+BrowserToolboxProcess.init = function (aOnClose, aOnRun, aOptions) {
+  return new BrowserToolboxProcess(aOnClose, aOnRun, aOptions);
+};
+
+/**
+ * Passes a set of options to the BrowserAddonActors for the given ID.
+ *
+ * @param aId string
+ *        The ID of the add-on to pass the options to
+ * @param aOptions object
+ *        The options.
+ * @return a promise that will be resolved when complete.
+ */
+BrowserToolboxProcess.setAddonOptions = function DSC_setAddonOptions(aId, aOptions) {
+  let promises = [];
+
+  for (let process of processes.values()) {
+    promises.push(process.debuggerServer.setAddonOptions(aId, aOptions));
+  }
+
+  return promise.all(promises);
+};
+
+BrowserToolboxProcess.prototype = {
+  /**
+   * Initializes the debugger server.
+   */
+  _initServer: function () {
+    if (this.debuggerServer) {
+      dumpn("The chrome toolbox server is already running.");
+      return;
+    }
+
+    dumpn("Initializing the chrome toolbox server.");
+
+    // Create a separate loader instance, so that we can be sure to receive a
+    // separate instance of the DebuggingServer from the rest of the devtools.
+    // This allows us to safely use the tools against even the actors and
+    // DebuggingServer itself, especially since we can mark this loader as
+    // invisible to the debugger (unlike the usual loader settings).
+    this.loader = new DevToolsLoader();
+    this.loader.invisibleToDebugger = true;
+    let { DebuggerServer } = this.loader.require("devtools/server/main");
+    this.debuggerServer = DebuggerServer;
+    dumpn("Created a separate loader instance for the DebuggerServer.");
+
+    // Forward interesting events.
+    this.debuggerServer.on("connectionchange", this.emit);
+
+    this.debuggerServer.init();
+    this.debuggerServer.addBrowserActors();
+    this.debuggerServer.allowChromeProcess = true;
+    dumpn("initialized and added the browser actors for the DebuggerServer.");
+
+    let chromeDebuggingPort =
+      Services.prefs.getIntPref("devtools.debugger.chrome-debugging-port");
+    let chromeDebuggingWebSocket =
+      Services.prefs.getBoolPref("devtools.debugger.chrome-debugging-websocket");
+    let listener = this.debuggerServer.createListener();
+    listener.portOrPath = chromeDebuggingPort;
+    listener.webSocket = chromeDebuggingWebSocket;
+    listener.open();
+
+    dumpn("Finished initializing the chrome toolbox server.");
+    dumpn("Started listening on port: " + chromeDebuggingPort);
+  },
+
+  /**
+   * Initializes a profile for the remote debugger process.
+   */
+  _initProfile: function () {
+    dumpn("Initializing the chrome toolbox user profile.");
+
+    let debuggingProfileDir = Services.dirsvc.get("ProfLD", Ci.nsIFile);
+    debuggingProfileDir.append(CHROME_DEBUGGER_PROFILE_NAME);
+    try {
+      debuggingProfileDir.create(Ci.nsIFile.DIRECTORY_TYPE, 0o755);
+    } catch (ex) {
+      // Don't re-copy over the prefs again if this profile already exists
+      if (ex.result === Cr.NS_ERROR_FILE_ALREADY_EXISTS) {
+        this._dbgProfilePath = debuggingProfileDir.path;
+      } else {
+        dumpn("Error trying to create a profile directory, failing.");
+        dumpn("Error: " + (ex.message || ex));
+      }
+      return;
+    }
+
+    this._dbgProfilePath = debuggingProfileDir.path;
+
+    // We would like to copy prefs into this new profile...
+    let prefsFile = debuggingProfileDir.clone();
+    prefsFile.append("prefs.js");
+    // ... but unfortunately, when we run tests, it seems the starting profile
+    // clears out the prefs file before re-writing it, and in practice the
+    // file is empty when we get here. So just copying doesn't work in that
+    // case.
+    // We could force a sync pref flush and then copy it... but if we're doing
+    // that, we might as well just flush directly to the new profile, which
+    // always works:
+    Services.prefs.savePrefFile(prefsFile);
+
+    dumpn("Finished creating the chrome toolbox user profile at: " + this._dbgProfilePath);
+  },
+
+  /**
+   * Creates and initializes the profile & process for the remote debugger.
+   */
+  _create: function () {
+    dumpn("Initializing chrome debugging process.");
+    let process = this._dbgProcess = Cc["@mozilla.org/process/util;1"].createInstance(Ci.nsIProcess);
+    process.init(Services.dirsvc.get("XREExeF", Ci.nsIFile));
+
+    let xulURI = DBG_XUL;
+
+    if (this._options.addonID) {
+      xulURI += "?addonID=" + this._options.addonID;
+    }
+
+    dumpn("Running chrome debugging process.");
+    let args = ["-no-remote", "-foreground", "-profile", this._dbgProfilePath, "-chrome", xulURI];
+
+    // During local development, incremental builds can trigger the main process
+    // to clear its startup cache with the "flag file" .purgecaches, but this
+    // file is removed during app startup time, so we aren't able to know if it
+    // was present in order to also clear the child profile's startup cache as
+    // well.
+    //
+    // As an approximation of "isLocalBuild", check for an unofficial build.
+    if (!Services.appinfo.isOfficial) {
+      args.push("-purgecaches");
+    }
+
+    // Disable safe mode for the new process in case this was opened via the
+    // keyboard shortcut.
+    let nsIEnvironment = Components.classes["@mozilla.org/process/environment;1"].getService(Components.interfaces.nsIEnvironment);
+    let originalValue = nsIEnvironment.get("MOZ_DISABLE_SAFE_MODE_KEY");
+    nsIEnvironment.set("MOZ_DISABLE_SAFE_MODE_KEY", "1");
+
+    process.runwAsync(args, args.length, { observe: () => this.close() });
+
+    // Now that the process has started, it's safe to reset the env variable.
+    nsIEnvironment.set("MOZ_DISABLE_SAFE_MODE_KEY", originalValue);
+
+    this._telemetry.toolOpened("jsbrowserdebugger");
+
+    dumpn("Chrome toolbox is now running...");
+    this.emit("run", this);
+  },
+
+  /**
+   * Closes the remote debugging server and kills the toolbox process.
+   */
+  close: function () {
+    if (this.closed) {
+      return;
+    }
+
+    dumpn("Cleaning up the chrome debugging process.");
+    Services.obs.removeObserver(this.close, "quit-application");
+
+    if (this._dbgProcess.isRunning) {
+      this._dbgProcess.kill();
+    }
+
+    this._telemetry.toolClosed("jsbrowserdebugger");
+    if (this.debuggerServer) {
+      this.debuggerServer.off("connectionchange", this.emit);
+      this.debuggerServer.destroy();
+      this.debuggerServer = null;
+    }
+
+    dumpn("Chrome toolbox is now closed...");
+    this.closed = true;
+    this.emit("close", this);
+    processes.delete(this);
+
+    this._dbgProcess = null;
+    this._options = null;
+    if (this.loader) {
+      this.loader.destroy();
+    }
+    this.loader = null;
+    this._telemetry = null;
+  }
+};
+
+/**
+ * Helper method for debugging.
+ * @param string
+ */
+function dumpn(str) {
+  if (wantLogging) {
+    dump("DBG-FRONTEND: " + str + "\n");
+  }
+}
+
+var wantLogging = Services.prefs.getBoolPref("devtools.debugger.log");
+
+Services.prefs.addObserver("devtools.debugger.log", {
+  observe: (...args) => wantLogging = Services.prefs.getBoolPref(args.pop())
+}, false);
+
+Services.obs.notifyObservers(null, "ToolboxProcessLoaded", null);
diff --git a/devtools/client/framework/about-devtools-toolbox.js b/devtools/client/framework/about-devtools-toolbox.js
new file mode 100644
index 000000000..0ae776e37
--- /dev/null
+++ b/devtools/client/framework/about-devtools-toolbox.js
@@ -0,0 +1,61 @@
+/* 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";
+
+// Register about:devtools-toolbox which allows to open a devtools toolbox
+// in a Firefox tab or a custom html iframe in browser.html
+
+const { Ci, Cu, Cm, components } = require("chrome");
+const registrar = Cm.QueryInterface(Ci.nsIComponentRegistrar);
+const Services = require("Services");
+const { XPCOMUtils } = Cu.import("resource://gre/modules/XPCOMUtils.jsm", {});
+const { nsIAboutModule } = Ci;
+
+function AboutURL() {}
+
+AboutURL.prototype = {
+  uri: Services.io.newURI("chrome://devtools/content/framework/toolbox.xul",
+                          null, null),
+  classDescription: "about:devtools-toolbox",
+  classID: components.ID("11342911-3135-45a8-8d71-737a2b0ad469"),
+  contractID: "@mozilla.org/network/protocol/about;1?what=devtools-toolbox",
+
+  QueryInterface: XPCOMUtils.generateQI([nsIAboutModule]),
+
+  newChannel: function (aURI, aLoadInfo) {
+    let chan = Services.io.newChannelFromURIWithLoadInfo(this.uri, aLoadInfo);
+    chan.owner = Services.scriptSecurityManager.getSystemPrincipal();
+    return chan;
+  },
+
+  getURIFlags: function (aURI) {
+    return nsIAboutModule.ALLOW_SCRIPT || nsIAboutModule.ENABLE_INDEXED_DB;
+  }
+};
+
+AboutURL.createInstance = function (outer, iid) {
+  if (outer) {
+    throw Cr.NS_ERROR_NO_AGGREGATION;
+  }
+  return new AboutURL();
+};
+
+exports.register = function () {
+  if (registrar.isCIDRegistered(AboutURL.prototype.classID)) {
+    console.error("Trying to register " + AboutURL.prototype.classDescription +
+                  " more than once.");
+  } else {
+    registrar.registerFactory(AboutURL.prototype.classID,
+                       AboutURL.prototype.classDescription,
+                       AboutURL.prototype.contractID,
+                       AboutURL);
+  }
+};
+
+exports.unregister = function () {
+  if (registrar.isCIDRegistered(AboutURL.prototype.classID)) {
+    registrar.unregisterFactory(AboutURL.prototype.classID, AboutURL);
+  }
+};
diff --git a/devtools/client/framework/attach-thread.js b/devtools/client/framework/attach-thread.js
new file mode 100644
index 000000000..db445ce23
--- /dev/null
+++ b/devtools/client/framework/attach-thread.js
@@ -0,0 +1,115 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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, Ci, Cu} = require("chrome");
+const Services = require("Services");
+const defer = require("devtools/shared/defer");
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+function handleThreadState(toolbox, event, packet) {
+  // Suppress interrupted events by default because the thread is
+  // paused/resumed a lot for various actions.
+  if (event !== "paused" || packet.why.type !== "interrupted") {
+    // TODO: Bug 1225492, we continue emitting events on the target
+    // like we used to, but we should emit these only on the
+    // threadClient now.
+    toolbox.target.emit("thread-" + event);
+  }
+
+  if (event === "paused") {
+    toolbox.highlightTool("jsdebugger");
+
+    if (packet.why.type === "debuggerStatement" ||
+       packet.why.type === "breakpoint" ||
+       packet.why.type === "exception") {
+      toolbox.raise();
+      toolbox.selectTool("jsdebugger");
+    }
+  } else if (event === "resumed") {
+    toolbox.unhighlightTool("jsdebugger");
+  }
+}
+
+function attachThread(toolbox) {
+  let deferred = defer();
+
+  let target = toolbox.target;
+  let { form: { chromeDebugger, actor } } = target;
+
+  // Sourcemaps are always turned off when using the new debugger
+  // frontend. This is because it does sourcemapping on the
+  // client-side, so the server should not do it. It also does not support
+  // blackboxing yet.
+  let useSourceMaps = false;
+  let autoBlackBox = false;
+  if(!Services.prefs.getBoolPref("devtools.debugger.new-debugger-frontend")) {
+    useSourceMaps = Services.prefs.getBoolPref("devtools.debugger.source-maps-enabled");
+    autoBlackBox = Services.prefs.getBoolPref("devtools.debugger.auto-black-box");
+  }
+  let threadOptions = { useSourceMaps, autoBlackBox };
+
+  let handleResponse = (res, threadClient) => {
+    if (res.error) {
+      deferred.reject(new Error("Couldn't attach to thread: " + res.error));
+      return;
+    }
+    threadClient.addListener("paused", handleThreadState.bind(null, toolbox));
+    threadClient.addListener("resumed", handleThreadState.bind(null, toolbox));
+
+    if (!threadClient.paused) {
+      deferred.reject(
+        new Error("Thread in wrong state when starting up, should be paused")
+      );
+    }
+
+    // These flags need to be set here because the client sends them
+    // with the `resume` request. We make sure to do this before
+    // resuming to avoid another interrupt. We can't pass it in with
+    // `threadOptions` because the resume request will override them.
+    threadClient.pauseOnExceptions(
+      Services.prefs.getBoolPref("devtools.debugger.pause-on-exceptions"),
+      Services.prefs.getBoolPref("devtools.debugger.ignore-caught-exceptions")
+    );
+
+    threadClient.resume(res => {
+      if (res.error === "wrongOrder") {
+        const box = toolbox.getNotificationBox();
+        box.appendNotification(
+          L10N.getStr("toolbox.resumeOrderWarning"),
+          "wrong-resume-order",
+          "",
+          box.PRIORITY_WARNING_HIGH
+        );
+      }
+
+      deferred.resolve(threadClient);
+    });
+  };
+
+  if (target.isTabActor) {
+    // Attaching a tab, a browser process, or a WebExtensions add-on.
+    target.activeTab.attachThread(threadOptions, handleResponse);
+  } else if (target.isAddon) {
+    // Attaching a legacy addon.
+    target.client.attachAddon(actor, res => {
+      target.client.attachThread(res.threadActor, handleResponse);
+    });
+  }  else {
+    // Attaching an old browser debugger or a content process.
+    target.client.attachThread(chromeDebugger, handleResponse);
+  }
+
+  return deferred.promise;
+}
+
+function detachThread(threadClient) {
+  threadClient.removeListener("paused");
+  threadClient.removeListener("resumed");
+}
+
+module.exports = { attachThread, detachThread };
diff --git a/devtools/client/framework/browser-menus.js b/devtools/client/framework/browser-menus.js
new file mode 100644
index 000000000..3d6c4def6
--- /dev/null
+++ b/devtools/client/framework/browser-menus.js
@@ -0,0 +1,390 @@
+/* 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 module inject dynamically menu items and key shortcuts into browser UI.
+ *
+ * Menu and shortcut definitions are fetched from:
+ * - devtools/client/menus for top level entires
+ * - devtools/client/definitions for tool-specifics entries
+ */
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const MENUS_L10N = new LocalizationHelper("devtools/client/locales/menus.properties");
+
+loader.lazyRequireGetter(this, "gDevTools", "devtools/client/framework/devtools", true);
+loader.lazyRequireGetter(this, "gDevToolsBrowser", "devtools/client/framework/devtools-browser", true);
+
+// Keep list of inserted DOM Elements in order to remove them on unload
+// Maps browser xul document => list of DOM Elements
+const FragmentsCache = new Map();
+
+function l10n(key) {
+  return MENUS_L10N.getStr(key);
+}
+
+/**
+ * Create a xul:key element
+ *
+ * @param {XULDocument} doc
+ *        The document to which keys are to be added.
+ * @param {String} id
+ *        key's id, automatically prefixed with "key_".
+ * @param {String} shortcut
+ *        The key shortcut value.
+ * @param {String} keytext
+ *        If `shortcut` refers to a function key, refers to the localized
+ *        string to describe a non-character shortcut.
+ * @param {String} modifiers
+ *        Space separated list of modifier names.
+ * @param {Function} oncommand
+ *        The function to call when the shortcut is pressed.
+ *
+ * @return XULKeyElement
+ */
+function createKey({ doc, id, shortcut, keytext, modifiers, oncommand }) {
+  let k = doc.createElement("key");
+  k.id = "key_" + id;
+
+  if (shortcut.startsWith("VK_")) {
+    k.setAttribute("keycode", shortcut);
+    if (keytext) {
+      k.setAttribute("keytext", keytext);
+    }
+  } else {
+    k.setAttribute("key", shortcut);
+  }
+
+  if (modifiers) {
+    k.setAttribute("modifiers", modifiers);
+  }
+
+  // Bug 371900: command event is fired only if "oncommand" attribute is set.
+  k.setAttribute("oncommand", ";");
+  k.addEventListener("command", oncommand);
+
+  return k;
+}
+
+/**
+ * Create a xul:menuitem element
+ *
+ * @param {XULDocument} doc
+ *        The document to which keys are to be added.
+ * @param {String} id
+ *        Element id.
+ * @param {String} label
+ *        Menu label.
+ * @param {String} accesskey (optional)
+ *        Access key of the menuitem, used as shortcut while opening the menu.
+ * @param {Boolean} isCheckbox (optional)
+ *        If true, the menuitem will act as a checkbox and have an optional
+ *        tick on its left.
+ *
+ * @return XULMenuItemElement
+ */
+function createMenuItem({ doc, id, label, accesskey, isCheckbox }) {
+  let menuitem = doc.createElement("menuitem");
+  menuitem.id = id;
+  menuitem.setAttribute("label", label);
+  if (accesskey) {
+    menuitem.setAttribute("accesskey", accesskey);
+  }
+  if (isCheckbox) {
+    menuitem.setAttribute("type", "checkbox");
+    menuitem.setAttribute("autocheck", "false");
+  }
+  return menuitem;
+}
+
+/**
+ * Add a <key> to <keyset id="devtoolsKeyset">.
+ * Appending a <key> element is not always enough. The <keyset> needs
+ * to be detached and reattached to make sure the <key> is taken into
+ * account (see bug 832984).
+ *
+ * @param {XULDocument} doc
+ *        The document to which keys are to be added
+ * @param {XULElement} or {DocumentFragment} keys
+ *        Keys to add
+ */
+function attachKeybindingsToBrowser(doc, keys) {
+  let devtoolsKeyset = doc.getElementById("devtoolsKeyset");
+
+  if (!devtoolsKeyset) {
+    devtoolsKeyset = doc.createElement("keyset");
+    devtoolsKeyset.setAttribute("id", "devtoolsKeyset");
+  }
+  devtoolsKeyset.appendChild(keys);
+  let mainKeyset = doc.getElementById("mainKeyset");
+  mainKeyset.parentNode.insertBefore(devtoolsKeyset, mainKeyset);
+}
+
+/**
+ * Add a menu entry for a tool definition
+ *
+ * @param {Object} toolDefinition
+ *        Tool definition of the tool to add a menu entry.
+ * @param {XULDocument} doc
+ *        The document to which the tool menu item is to be added.
+ */
+function createToolMenuElements(toolDefinition, doc) {
+  let id = toolDefinition.id;
+  let menuId = "menuitem_" + id;
+
+  // Prevent multiple entries for the same tool.
+  if (doc.getElementById(menuId)) {
+    return;
+  }
+
+  let oncommand = function (id, event) {
+    let window = event.target.ownerDocument.defaultView;
+    gDevToolsBrowser.selectToolCommand(window.gBrowser, id);
+  }.bind(null, id);
+
+  let key = null;
+  if (toolDefinition.key) {
+    key = createKey({
+      doc,
+      id,
+      shortcut: toolDefinition.key,
+      modifiers: toolDefinition.modifiers,
+      oncommand: oncommand
+    });
+  }
+
+  let menuitem = createMenuItem({
+    doc,
+    id: "menuitem_" + id,
+    label: toolDefinition.menuLabel || toolDefinition.label,
+    accesskey: toolDefinition.accesskey
+  });
+  if (key) {
+    // Refer to the key in order to display the key shortcut at menu ends
+    menuitem.setAttribute("key", key.id);
+  }
+  menuitem.addEventListener("command", oncommand);
+
+  return {
+    key,
+    menuitem
+  };
+}
+
+/**
+ * Create xul menuitem, key elements for a given tool.
+ * And then insert them into browser DOM.
+ *
+ * @param {XULDocument} doc
+ *        The document to which the tool is to be registered.
+ * @param {Object} toolDefinition
+ *        Tool definition of the tool to register.
+ * @param {Object} prevDef
+ *        The tool definition after which the tool menu item is to be added.
+ */
+function insertToolMenuElements(doc, toolDefinition, prevDef) {
+  let { key, menuitem } = createToolMenuElements(toolDefinition, doc);
+
+  if (key) {
+    attachKeybindingsToBrowser(doc, key);
+  }
+
+  let ref;
+  if (prevDef) {
+    let menuitem = doc.getElementById("menuitem_" + prevDef.id);
+    ref = menuitem && menuitem.nextSibling ? menuitem.nextSibling : null;
+  } else {
+    ref = doc.getElementById("menu_devtools_separator");
+  }
+
+  if (ref) {
+    ref.parentNode.insertBefore(menuitem, ref);
+  }
+}
+exports.insertToolMenuElements = insertToolMenuElements;
+
+/**
+ * Remove a tool's menuitem from a window
+ *
+ * @param {string} toolId
+ *        Id of the tool to add a menu entry for
+ * @param {XULDocument} doc
+ *        The document to which the tool menu item is to be removed from
+ */
+function removeToolFromMenu(toolId, doc) {
+  let key = doc.getElementById("key_" + toolId);
+  if (key) {
+    key.remove();
+  }
+
+  let menuitem = doc.getElementById("menuitem_" + toolId);
+  if (menuitem) {
+    menuitem.remove();
+  }
+}
+exports.removeToolFromMenu = removeToolFromMenu;
+
+/**
+ * Add all tools to the developer tools menu of a window.
+ *
+ * @param {XULDocument} doc
+ *        The document to which the tool items are to be added.
+ */
+function addAllToolsToMenu(doc) {
+  let fragKeys = doc.createDocumentFragment();
+  let fragMenuItems = doc.createDocumentFragment();
+
+  for (let toolDefinition of gDevTools.getToolDefinitionArray()) {
+    if (!toolDefinition.inMenu) {
+      continue;
+    }
+
+    let elements = createToolMenuElements(toolDefinition, doc);
+
+    if (!elements) {
+      continue;
+    }
+
+    if (elements.key) {
+      fragKeys.appendChild(elements.key);
+    }
+    fragMenuItems.appendChild(elements.menuitem);
+  }
+
+  attachKeybindingsToBrowser(doc, fragKeys);
+
+  let mps = doc.getElementById("menu_devtools_separator");
+  if (mps) {
+    mps.parentNode.insertBefore(fragMenuItems, mps);
+  }
+}
+
+/**
+ * Add global menus and shortcuts that are not panel specific.
+ *
+ * @param {XULDocument} doc
+ *        The document to which keys and menus are to be added.
+ */
+function addTopLevelItems(doc) {
+  let keys = doc.createDocumentFragment();
+  let menuItems = doc.createDocumentFragment();
+
+  let { menuitems } = require("../menus");
+  for (let item of menuitems) {
+    if (item.separator) {
+      let separator = doc.createElement("menuseparator");
+      separator.id = item.id;
+      menuItems.appendChild(separator);
+    } else {
+      let { id, l10nKey } = item;
+
+      // Create a <menuitem>
+      let menuitem = createMenuItem({
+        doc,
+        id,
+        label: l10n(l10nKey + ".label"),
+        accesskey: l10n(l10nKey + ".accesskey"),
+        isCheckbox: item.checkbox
+      });
+      menuitem.addEventListener("command", item.oncommand);
+      menuItems.appendChild(menuitem);
+
+      if (item.key && l10nKey) {
+        // Create a <key>
+        let shortcut = l10n(l10nKey + ".key");
+        let key = createKey({
+          doc,
+          id: item.key.id,
+          shortcut: shortcut,
+          keytext: shortcut.startsWith("VK_") ? l10n(l10nKey + ".keytext") : null,
+          modifiers: item.key.modifiers,
+          oncommand: item.oncommand
+        });
+        // Refer to the key in order to display the key shortcut at menu ends
+        menuitem.setAttribute("key", key.id);
+        keys.appendChild(key);
+      }
+      if (item.additionalKeys) {
+        // Create additional <key>
+        for (let key of item.additionalKeys) {
+          let shortcut = l10n(key.l10nKey + ".key");
+          let node = createKey({
+            doc,
+            id: key.id,
+            shortcut: shortcut,
+            keytext: shortcut.startsWith("VK_") ? l10n(key.l10nKey + ".keytext") : null,
+            modifiers: key.modifiers,
+            oncommand: item.oncommand
+          });
+          keys.appendChild(node);
+        }
+      }
+    }
+  }
+
+  // Cache all nodes before insertion to be able to remove them on unload
+  let nodes = [];
+  for (let node of keys.children) {
+    nodes.push(node);
+  }
+  for (let node of menuItems.children) {
+    nodes.push(node);
+  }
+  FragmentsCache.set(doc, nodes);
+
+  attachKeybindingsToBrowser(doc, keys);
+
+  let menu = doc.getElementById("menuWebDeveloperPopup");
+  menu.appendChild(menuItems);
+
+  // There is still "Page Source" menuitem hardcoded into browser.xul. Instead
+  // of manually inserting everything around it, move it to the expected
+  // position.
+  let pageSource = doc.getElementById("menu_pageSource");
+  let endSeparator = doc.getElementById("devToolsEndSeparator");
+  menu.insertBefore(pageSource, endSeparator);
+}
+
+/**
+ * Remove global menus and shortcuts that are not panel specific.
+ *
+ * @param {XULDocument} doc
+ *        The document to which keys and menus are to be added.
+ */
+function removeTopLevelItems(doc) {
+  let nodes = FragmentsCache.get(doc);
+  if (!nodes) {
+    return;
+  }
+  FragmentsCache.delete(doc);
+  for (let node of nodes) {
+    node.remove();
+  }
+}
+
+/**
+ * Add menus and shortcuts to a browser document
+ *
+ * @param {XULDocument} doc
+ *        The document to which keys and menus are to be added.
+ */
+exports.addMenus = function (doc) {
+  addTopLevelItems(doc);
+
+  addAllToolsToMenu(doc);
+};
+
+/**
+ * Remove menus and shortcuts from a browser document
+ *
+ * @param {XULDocument} doc
+ *        The document to which keys and menus are to be removed.
+ */
+exports.removeMenus = function (doc) {
+  // We only remove top level entries. Per-tool entries are removed while
+  // unregistering each tool.
+  removeTopLevelItems(doc);
+};
diff --git a/devtools/client/framework/connect/connect.css b/devtools/client/framework/connect/connect.css
new file mode 100644
index 000000000..23959b93b
--- /dev/null
+++ b/devtools/client/framework/connect/connect.css
@@ -0,0 +1,112 @@
+:root {
+  font: caption;
+}
+
+html {
+  background-color: #111;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  color: white;
+  max-width: 600px;
+  margin: 30px auto 0;
+  box-shadow: 0 2px 3px black;
+  background-color: #3C3E40;
+}
+
+h1 {
+  margin: 0;
+  padding: 20px;
+  background-color: rgba(0,0,0,0.12);
+  background-image: radial-gradient(ellipse farthest-corner at center top , rgb(159, 223, 255), rgba(101, 203, 255, 0.3)), radial-gradient(ellipse farthest-side at center top , rgba(101, 203, 255, 0.4), rgba(101, 203, 255, 0));
+  background-size: 100% 2px, 100% 5px;
+  background-repeat: no-repeat;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+form {
+  display: inline-block;
+}
+
+label {
+  display: block;
+  margin: 10px;
+}
+
+label > span {
+  display: inline-block;
+  min-width: 150px;
+  text-align: right;
+  margin-right: 10px;
+}
+
+#submit {
+  float: right;
+}
+
+input:invalid {
+  box-shadow: 0 0 2px 2px #F06;
+}
+
+section {
+  min-height: 160px;
+  margin: 60px 20px;
+  display: none; /* By default, hidden */
+}
+
+.error-message {
+  color: red;
+}
+
+.error-message:not(.active) {
+  display: none;
+}
+
+body:not(.actors-mode):not(.connecting) > #connection-form {
+  display: block;
+}
+
+body.actors-mode > #actors-list {
+  display: block;
+}
+
+body.connecting > #connecting {
+  display: block;
+}
+
+#connecting {
+  text-align: center;
+}
+
+#connecting > p > img {
+  vertical-align: top;
+}
+
+.actors {
+  padding-left: 0;
+}
+
+.actors > a {
+  display: block;
+  margin: 5px;
+  padding: 5px;
+  color: white;
+}
+
+.remote-process {
+  font-style: italic;
+  opacity: 0.8;
+}
+
+footer {
+  padding: 10px;
+  background-color: rgba(0,0,0,0.12);
+  border-top: 1px solid rgba(0,0,0,0.1);
+  font-size: small;
+}
+
+footer > a,
+footer > a:visited {
+  color: white;
+}
diff --git a/devtools/client/framework/connect/connect.js b/devtools/client/framework/connect/connect.js
new file mode 100644
index 000000000..d713231f9
--- /dev/null
+++ b/devtools/client/framework/connect/connect.js
@@ -0,0 +1,236 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+var Cu = Components.utils;
+var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
+var Services = require("Services");
+var {gDevTools} = require("devtools/client/framework/devtools");
+var {TargetFactory} = require("devtools/client/framework/target");
+var {Toolbox} = require("devtools/client/framework/toolbox");
+var {DebuggerClient} = require("devtools/shared/client/main");
+var {Task} = require("devtools/shared/task");
+var {LocalizationHelper} = require("devtools/shared/l10n");
+var L10N = new LocalizationHelper("devtools/client/locales/connection-screen.properties");
+
+var gClient;
+var gConnectionTimeout;
+
+/**
+ * Once DOM is ready, we prefil the host/port inputs with
+ * pref-stored values.
+ */
+window.addEventListener("DOMContentLoaded", function onDOMReady() {
+  window.removeEventListener("DOMContentLoaded", onDOMReady, true);
+  let host = Services.prefs.getCharPref("devtools.debugger.remote-host");
+  let port = Services.prefs.getIntPref("devtools.debugger.remote-port");
+
+  if (host) {
+    document.getElementById("host").value = host;
+  }
+
+  if (port) {
+    document.getElementById("port").value = port;
+  }
+
+  let form = document.querySelector("#connection-form form");
+  form.addEventListener("submit", function () {
+    window.submit().catch(e => {
+      console.error(e);
+      // Bug 921850: catch rare exception from DebuggerClient.socketConnect
+      showError("unexpected");
+    });
+  });
+}, true);
+
+/**
+ * Called when the "connect" button is clicked.
+ */
+var submit = Task.async(function* () {
+  // Show the "connecting" screen
+  document.body.classList.add("connecting");
+
+  let host = document.getElementById("host").value;
+  let port = document.getElementById("port").value;
+
+  // Save the host/port values
+  try {
+    Services.prefs.setCharPref("devtools.debugger.remote-host", host);
+    Services.prefs.setIntPref("devtools.debugger.remote-port", port);
+  } catch (e) {
+    // Fails in e10s mode, but not a critical feature.
+  }
+
+  // Initiate the connection
+  let transport = yield DebuggerClient.socketConnect({ host, port });
+  gClient = new DebuggerClient(transport);
+  let delay = Services.prefs.getIntPref("devtools.debugger.remote-timeout");
+  gConnectionTimeout = setTimeout(handleConnectionTimeout, delay);
+  let response = yield gClient.connect();
+  yield onConnectionReady(...response);
+});
+
+/**
+ * Connection is ready. List actors and build buttons.
+ */
+var onConnectionReady = Task.async(function* ([aType, aTraits]) {
+  clearTimeout(gConnectionTimeout);
+
+  let response = yield gClient.listAddons();
+
+  let parent = document.getElementById("addonActors");
+  if (!response.error && response.addons.length > 0) {
+    // Add one entry for each add-on.
+    for (let addon of response.addons) {
+      if (!addon.debuggable) {
+        continue;
+      }
+      buildAddonLink(addon, parent);
+    }
+  }
+  else {
+    // Hide the section when there are no add-ons
+    parent.previousElementSibling.remove();
+    parent.remove();
+  }
+
+  response = yield gClient.listTabs();
+
+  parent = document.getElementById("tabActors");
+
+  // Add Global Process debugging...
+  let globals = Cu.cloneInto(response, {});
+  delete globals.tabs;
+  delete globals.selected;
+  // ...only if there are appropriate actors (a 'from' property will always
+  // be there).
+
+  // Add one entry for each open tab.
+  for (let i = 0; i < response.tabs.length; i++) {
+    buildTabLink(response.tabs[i], parent, i == response.selected);
+  }
+
+  let gParent = document.getElementById("globalActors");
+
+  // Build the Remote Process button
+  // If Fx<39, tab actors were used to be exposed on RootActor
+  // but in Fx>=39, chrome is debuggable via getProcess() and ChromeActor
+  if (globals.consoleActor || gClient.mainRoot.traits.allowChromeProcess) {
+    let a = document.createElement("a");
+    a.onclick = function () {
+      if (gClient.mainRoot.traits.allowChromeProcess) {
+        gClient.getProcess()
+               .then(aResponse => {
+                 openToolbox(aResponse.form, true);
+               });
+      } else if (globals.consoleActor) {
+        openToolbox(globals, true, "webconsole", false);
+      }
+    };
+    a.title = a.textContent = L10N.getStr("mainProcess");
+    a.className = "remote-process";
+    a.href = "#";
+    gParent.appendChild(a);
+  }
+  // Move the selected tab on top
+  let selectedLink = parent.querySelector("a.selected");
+  if (selectedLink) {
+    parent.insertBefore(selectedLink, parent.firstChild);
+  }
+
+  document.body.classList.remove("connecting");
+  document.body.classList.add("actors-mode");
+
+  // Ensure the first link is focused
+  let firstLink = parent.querySelector("a:first-of-type");
+  if (firstLink) {
+    firstLink.focus();
+  }
+});
+
+/**
+ * Build one button for an add-on actor.
+ */
+function buildAddonLink(addon, parent) {
+  let a = document.createElement("a");
+  a.onclick = function () {
+    openToolbox(addon, true, "jsdebugger", false);
+  };
+
+  a.textContent = addon.name;
+  a.title = addon.id;
+  a.href = "#";
+
+  parent.appendChild(a);
+}
+
+/**
+ * Build one button for a tab actor.
+ */
+function buildTabLink(tab, parent, selected) {
+  let a = document.createElement("a");
+  a.onclick = function () {
+    openToolbox(tab);
+  };
+
+  a.textContent = tab.title;
+  a.title = tab.url;
+  if (!a.textContent) {
+    a.textContent = tab.url;
+  }
+  a.href = "#";
+
+  if (selected) {
+    a.classList.add("selected");
+  }
+
+  parent.appendChild(a);
+}
+
+/**
+ * An error occured. Let's show it and return to the first screen.
+ */
+function showError(type) {
+  document.body.className = "error";
+  let activeError = document.querySelector(".error-message.active");
+  if (activeError) {
+    activeError.classList.remove("active");
+  }
+  activeError = document.querySelector(".error-" + type);
+  if (activeError) {
+    activeError.classList.add("active");
+  }
+}
+
+/**
+ * Connection timeout.
+ */
+function handleConnectionTimeout() {
+  showError("timeout");
+}
+
+/**
+ * The user clicked on one of the buttons.
+ * Opens the toolbox.
+ */
+function openToolbox(form, chrome = false, tool = "webconsole", isTabActor) {
+  let options = {
+    form: form,
+    client: gClient,
+    chrome: chrome,
+    isTabActor: isTabActor
+  };
+  TargetFactory.forRemoteTab(options).then((target) => {
+    let hostType = Toolbox.HostType.WINDOW;
+    gDevTools.showToolbox(target, tool, hostType).then((toolbox) => {
+      toolbox.once("destroyed", function () {
+        gClient.close();
+      });
+    }, console.error.bind(console));
+    window.close();
+  }, console.error.bind(console));
+}
diff --git a/devtools/client/framework/connect/connect.xhtml b/devtools/client/framework/connect/connect.xhtml
new file mode 100644
index 000000000..e8f8818f6
--- /dev/null
+++ b/devtools/client/framework/connect/connect.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+
+<!DOCTYPE html [
+<!ENTITY % connectionDTD SYSTEM "chrome://devtools/locale/connection-screen.dtd" >
+ %connectionDTD;
+]>
+
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <head>
+    <title>&title;</title>
+    <link rel="stylesheet" href="chrome://devtools/skin/dark-theme.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/content/framework/connect/connect.css" type="text/css"/>
+    <script type="application/javascript;version=1.8" src="connect.js"></script>
+  </head>
+  <body>
+    <h1>&header;</h1>
+    <section id="connection-form">
+      <form validate="validate" action="#">
+        <label>
+          <span>&host;</span>
+          <input required="required" class="devtools-textinput" id="host" type="text"></input>
+        </label>
+        <label>
+          <span>&port;</span>
+          <input required="required" class="devtools-textinput" id="port" type="number" pattern="\d+"></input>
+        </label>
+        <label>
+          <input class="devtools-toolbarbutton" id="submit" standalone="true" type="submit" value="&connect;"></input>
+        </label>
+      </form>
+      <p class="error-message error-timeout">&errorTimeout;</p>
+      <p class="error-message error-refused">&errorRefused;</p>
+      <p class="error-message error-unexpected">&errorUnexpected;</p>
+    </section>
+    <section id="actors-list">
+      <p>&availableTabs;</p>
+      <ul class="actors" id="tabActors"></ul>
+      <p>&availableAddons;</p>
+      <ul class="actors" id="addonActors"></ul>
+      <p>&availableProcesses;</p>
+      <ul class="actors" id="globalActors"></ul>
+    </section>
+    <section id="connecting">
+      <p class="devtools-throbber">&connecting;</p>
+    </section>
+    <footer>&remoteHelp;<a target='_' href='https://developer.mozilla.org/docs/Tools/Remote_Debugging'>&remoteDocumentation;</a>&remoteHelpSuffix;</footer>
+  </body>
+</html>
diff --git a/devtools/client/framework/dev-edition-promo/dev-edition-logo.png b/devtools/client/framework/dev-edition-promo/dev-edition-logo.png
new file mode 100644
index 000000000..4b90768d2
--- /dev/null
+++ b/devtools/client/framework/dev-edition-promo/dev-edition-logo.png
diff --git a/devtools/client/framework/dev-edition-promo/dev-edition-promo.css b/devtools/client/framework/dev-edition-promo/dev-edition-promo.css
new file mode 100644
index 000000000..01489fd47
--- /dev/null
+++ b/devtools/client/framework/dev-edition-promo/dev-edition-promo.css
@@ -0,0 +1,94 @@
+/* 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/. */
+
+window {
+  -moz-appearance: none;
+  background-color: transparent;
+}
+
+#doorhanger-container {
+  width: 450px;
+}
+
+#top-panel {
+  padding: 20px;
+  background: #343c45; /* toolbars */
+  color: #8fa1b2; /* body text */
+/*
+ * Sloppy preprocessing since UNIX_BUT_NOT_MAC is only defined
+ * in `browser/app/profile/firefox.js`, which this file cannot
+ * depend on. Must style font-size to target linux.
+ */
+%ifdef XP_UNIX
+%ifndef XP_MACOSX
+  font-size: 13px;
+%else
+  font-size: 15px;
+%endif
+%else
+  font-size: 15px;
+%endif
+  line-height: 19px;
+  min-height: 100px;
+}
+
+#top-panel h1 {
+  font-weight: bold;
+  font-family: Open Sans, sans-serif;
+  font-size: 1.1em;
+}
+
+#top-panel p {
+  font-family: Open Sans, sans-serif;
+  font-size: 0.9em;
+  width: 300px;
+  display: block;
+  margin: 5px 0px 0px 0px;
+}
+
+#icon {
+  background-image: url("chrome://devtools/content/framework/dev-edition-promo/dev-edition-logo.png");
+  background-size: 64px 64px;
+  background-repeat: no-repeat;
+  width: 64px;
+  height: 64px;
+  margin-right: 20px;
+}
+
+#lower-panel {
+  padding: 20px;
+  background-color: #252c33; /* tab toolbars */
+  min-height: 75px;
+  border-top: 1px solid #292e33; /* text high contrast (light) */
+}
+
+#button-container {
+  margin: auto 20px;
+}
+
+#button-container button {
+  font: message-box !important;
+  font-size: 16px !important;
+  cursor: pointer;
+  width: 125px;
+  opacity: 1;
+  position: static;
+  -moz-appearance: none;
+  border-radius: 5px;
+  height: 30px;
+  width: 450px;
+  /* Override embossed borders on Windows/Linux */
+  border: none;
+}
+
+#close {
+  background-color: transparent;
+  color: #8fa1b2; /* body text */
+}
+
+#go {
+  margin-left: 100px;
+  background-color: #70bf53; /* green */
+  color: #f5f7fa; /* selection text color */
+}
diff --git a/devtools/client/framework/dev-edition-promo/dev-edition-promo.xul b/devtools/client/framework/dev-edition-promo/dev-edition-promo.xul
new file mode 100644
index 000000000..ca2515ab0
--- /dev/null
+++ b/devtools/client/framework/dev-edition-promo/dev-edition-promo.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<!DOCTYPE window [
+<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
+ %toolboxDTD;
+]>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet rel="stylesheet" href="chrome://devtools/content/framework/dev-edition-promo/dev-edition-promo.css" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="dev-edition-promo">
+  <vbox id="doorhanger-container">
+    <hbox flex="1" id="top-panel">
+      <image id="icon" />
+      <vbox id="info">
+        <h1>Using Developer Tools in your browser?</h1>
+        <p>Download Firefox Developer Edition, our first browser made just for you.</p>
+      </vbox>
+    </hbox>
+    <hbox id="lower-panel" flex="1">
+      <hbox id="button-container" flex="1">
+        <button id="close"
+                flex="1"
+                standalone="true"
+                label="No thanks">
+        </button>
+        <button id="go"
+                flex="1"
+                standalone="true"
+                label="Learn more »">
+        </button>
+      </hbox>
+    </hbox>
+  </vbox>
+</window>
diff --git a/devtools/client/framework/devtools-browser.js b/devtools/client/framework/devtools-browser.js
new file mode 100644
index 000000000..b9f4d92ba
--- /dev/null
+++ b/devtools/client/framework/devtools-browser.js
@@ -0,0 +1,758 @@
+/* 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 is the main module loaded in Firefox desktop that handles browser
+ * windows and coordinates devtools around each window.
+ *
+ * This module is loaded lazily by devtools-clhandler.js, once the first
+ * browser window is ready (i.e. fired browser-delayed-startup-finished event)
+ **/
+
+const {Cc, Ci, Cu} = require("chrome");
+const Services = require("Services");
+const promise = require("promise");
+const defer = require("devtools/shared/defer");
+const Telemetry = require("devtools/client/shared/telemetry");
+const { gDevTools } = require("./devtools");
+const { when: unload } = require("sdk/system/unload");
+
+// Load target and toolbox lazily as they need gDevTools to be fully initialized
+loader.lazyRequireGetter(this, "TargetFactory", "devtools/client/framework/target", true);
+loader.lazyRequireGetter(this, "Toolbox", "devtools/client/framework/toolbox", true);
+loader.lazyRequireGetter(this, "DebuggerServer", "devtools/server/main", true);
+loader.lazyRequireGetter(this, "DebuggerClient", "devtools/shared/client/main", true);
+loader.lazyRequireGetter(this, "BrowserMenus", "devtools/client/framework/browser-menus");
+
+loader.lazyImporter(this, "CustomizableUI", "resource:///modules/CustomizableUI.jsm");
+loader.lazyImporter(this, "AppConstants", "resource://gre/modules/AppConstants.jsm");
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+const TABS_OPEN_PEAK_HISTOGRAM = "DEVTOOLS_TABS_OPEN_PEAK_LINEAR";
+const TABS_OPEN_AVG_HISTOGRAM = "DEVTOOLS_TABS_OPEN_AVERAGE_LINEAR";
+const TABS_PINNED_PEAK_HISTOGRAM = "DEVTOOLS_TABS_PINNED_PEAK_LINEAR";
+const TABS_PINNED_AVG_HISTOGRAM = "DEVTOOLS_TABS_PINNED_AVERAGE_LINEAR";
+
+/**
+ * gDevToolsBrowser exposes functions to connect the gDevTools instance with a
+ * Firefox instance.
+ */
+var gDevToolsBrowser = exports.gDevToolsBrowser = {
+  /**
+   * A record of the windows whose menus we altered, so we can undo the changes
+   * as the window is closed
+   */
+  _trackedBrowserWindows: new Set(),
+
+  _telemetry: new Telemetry(),
+
+  _tabStats: {
+    peakOpen: 0,
+    peakPinned: 0,
+    histOpen: [],
+    histPinned: []
+  },
+
+  /**
+   * This function is for the benefit of Tools:DevToolbox in
+   * browser/base/content/browser-sets.inc and should not be used outside
+   * of there
+   */
+  // used by browser-sets.inc, command
+  toggleToolboxCommand: function (gBrowser) {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.getToolbox(target);
+
+    // If a toolbox exists, using toggle from the Main window :
+    // - should close a docked toolbox
+    // - should focus a windowed toolbox
+    let isDocked = toolbox && toolbox.hostType != Toolbox.HostType.WINDOW;
+    isDocked ? gDevTools.closeToolbox(target) : gDevTools.showToolbox(target);
+  },
+
+  /**
+   * This function ensures the right commands are enabled in a window,
+   * depending on their relevant prefs. It gets run when a window is registered,
+   * or when any of the devtools prefs change.
+   */
+  updateCommandAvailability: function (win) {
+    let doc = win.document;
+
+    function toggleMenuItem(id, isEnabled) {
+      let cmd = doc.getElementById(id);
+      if (isEnabled) {
+        cmd.removeAttribute("disabled");
+        cmd.removeAttribute("hidden");
+      } else {
+        cmd.setAttribute("disabled", "true");
+        cmd.setAttribute("hidden", "true");
+      }
+    }
+
+    // Enable developer toolbar?
+    let devToolbarEnabled = Services.prefs.getBoolPref("devtools.toolbar.enabled");
+    toggleMenuItem("menu_devToolbar", devToolbarEnabled);
+    let focusEl = doc.getElementById("menu_devToolbar");
+    if (devToolbarEnabled) {
+      focusEl.removeAttribute("disabled");
+    } else {
+      focusEl.setAttribute("disabled", "true");
+    }
+    if (devToolbarEnabled && Services.prefs.getBoolPref("devtools.toolbar.visible")) {
+      win.DeveloperToolbar.show(false).catch(console.error);
+    }
+
+    // Enable WebIDE?
+    let webIDEEnabled = Services.prefs.getBoolPref("devtools.webide.enabled");
+    toggleMenuItem("menu_webide", webIDEEnabled);
+
+    let showWebIDEWidget = Services.prefs.getBoolPref("devtools.webide.widget.enabled");
+    if (webIDEEnabled && showWebIDEWidget) {
+      gDevToolsBrowser.installWebIDEWidget();
+    } else {
+      gDevToolsBrowser.uninstallWebIDEWidget();
+    }
+
+    // Enable Browser Toolbox?
+    let chromeEnabled = Services.prefs.getBoolPref("devtools.chrome.enabled");
+    let devtoolsRemoteEnabled = Services.prefs.getBoolPref("devtools.debugger.remote-enabled");
+    let remoteEnabled = chromeEnabled && devtoolsRemoteEnabled;
+    toggleMenuItem("menu_browserToolbox", remoteEnabled);
+    toggleMenuItem("menu_browserContentToolbox", remoteEnabled && win.gMultiProcessBrowser);
+
+    // Enable DevTools connection screen, if the preference allows this.
+    toggleMenuItem("menu_devtools_connect", devtoolsRemoteEnabled);
+  },
+
+  observe: function (subject, topic, prefName) {
+    switch (topic) {
+      case "browser-delayed-startup-finished":
+        this._registerBrowserWindow(subject);
+        break;
+      case "nsPref:changed":
+        if (prefName.endsWith("enabled")) {
+          for (let win of this._trackedBrowserWindows) {
+            this.updateCommandAvailability(win);
+          }
+        }
+        break;
+    }
+  },
+
+  _prefObserverRegistered: false,
+
+  ensurePrefObserver: function () {
+    if (!this._prefObserverRegistered) {
+      this._prefObserverRegistered = true;
+      Services.prefs.addObserver("devtools.", this, false);
+    }
+  },
+
+  /**
+   * 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 targeted tool is not selected,
+   *   we select it
+   * - if the toolbox is open, and the targeted tool is selected,
+   *   and the host is NOT a window, we close the toolbox
+   * - if the toolbox is open, and the targeted tool is selected,
+   *   and the host is a window, we raise the toolbox window
+   */
+  // Used when: - registering a new tool
+  //            - new xul window, to add menu items
+  selectToolCommand: function (gBrowser, toolId) {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    let toolbox = gDevTools.getToolbox(target);
+    let toolDefinition = gDevTools.getToolDefinition(toolId);
+
+    if (toolbox &&
+        (toolbox.currentToolId == toolId ||
+          (toolId == "webconsole" && toolbox.splitConsole)))
+    {
+      toolbox.fireCustomKey(toolId);
+
+      if (toolDefinition.preventClosingOnKey || toolbox.hostType == Toolbox.HostType.WINDOW) {
+        toolbox.raise();
+      } else {
+        gDevTools.closeToolbox(target);
+      }
+      gDevTools.emit("select-tool-command", toolId);
+    } else {
+      gDevTools.showToolbox(target, toolId).then(() => {
+        let target = TargetFactory.forTab(gBrowser.selectedTab);
+        let toolbox = gDevTools.getToolbox(target);
+
+        toolbox.fireCustomKey(toolId);
+        gDevTools.emit("select-tool-command", toolId);
+      });
+    }
+  },
+
+  /**
+   * Open a tab on "about:debugging", optionally pre-select a given tab.
+   */
+   // Used by browser-sets.inc, command
+  openAboutDebugging: function (gBrowser, hash) {
+    let url = "about:debugging" + (hash ? "#" + hash : "");
+    gBrowser.selectedTab = gBrowser.addTab(url);
+  },
+
+  /**
+   * Open a tab to allow connects to a remote browser
+   */
+   // Used by browser-sets.inc, command
+  openConnectScreen: function (gBrowser) {
+    gBrowser.selectedTab = gBrowser.addTab("chrome://devtools/content/framework/connect/connect.xhtml");
+  },
+
+  /**
+   * Open WebIDE
+   */
+   // Used by browser-sets.inc, command
+   //         itself, webide widget
+  openWebIDE: function () {
+    let win = Services.wm.getMostRecentWindow("devtools:webide");
+    if (win) {
+      win.focus();
+    } else {
+      Services.ww.openWindow(null, "chrome://webide/content/", "webide", "chrome,centerscreen,resizable", null);
+    }
+  },
+
+  _getContentProcessTarget: function (processId) {
+    // Create a DebuggerServer in order to connect locally to it
+    if (!DebuggerServer.initialized) {
+      DebuggerServer.init();
+      DebuggerServer.addBrowserActors();
+    }
+    DebuggerServer.allowChromeProcess = true;
+
+    let transport = DebuggerServer.connectPipe();
+    let client = new DebuggerClient(transport);
+
+    let deferred = defer();
+    client.connect().then(() => {
+      client.getProcess(processId)
+            .then(response => {
+              let options = {
+                form: response.form,
+                client: client,
+                chrome: true,
+                isTabActor: false
+              };
+              return TargetFactory.forRemoteTab(options);
+            })
+            .then(target => {
+              // Ensure closing the connection in order to cleanup
+              // the debugger client and also the server created in the
+              // content process
+              target.on("close", () => {
+                client.close();
+              });
+              deferred.resolve(target);
+            });
+    });
+
+    return deferred.promise;
+  },
+
+   // Used by menus.js
+  openContentProcessToolbox: function (gBrowser) {
+    let { childCount } = Services.ppmm;
+    // Get the process message manager for the current tab
+    let mm = gBrowser.selectedBrowser.messageManager.processMessageManager;
+    let processId = null;
+    for (let i = 1; i < childCount; i++) {
+      let child = Services.ppmm.getChildAt(i);
+      if (child == mm) {
+        processId = i;
+        break;
+      }
+    }
+    if (processId) {
+      this._getContentProcessTarget(processId)
+          .then(target => {
+            // Display a new toolbox, in a new window, with debugger by default
+            return gDevTools.showToolbox(target, "jsdebugger",
+                                         Toolbox.HostType.WINDOW);
+          });
+    } else {
+      let msg = L10N.getStr("toolbox.noContentProcessForTab.message");
+      Services.prompt.alert(null, "", msg);
+    }
+  },
+
+  /**
+   * Install Developer widget
+   */
+  installDeveloperWidget: function () {
+    let id = "developer-button";
+    let widget = CustomizableUI.getWidget(id);
+    if (widget && widget.provider == CustomizableUI.PROVIDER_API) {
+      return;
+    }
+    CustomizableUI.createWidget({
+      id: id,
+      type: "view",
+      viewId: "PanelUI-developer",
+      shortcutId: "key_devToolboxMenuItem",
+      tooltiptext: "developer-button.tooltiptext2",
+      defaultArea: AppConstants.MOZ_DEV_EDITION ?
+                     CustomizableUI.AREA_NAVBAR :
+                     CustomizableUI.AREA_PANEL,
+      onViewShowing: function (aEvent) {
+        // Populate the subview with whatever menuitems are in the developer
+        // menu. We skip menu elements, because the menu panel has no way
+        // of dealing with those right now.
+        let doc = aEvent.target.ownerDocument;
+        let win = doc.defaultView;
+
+        let menu = doc.getElementById("menuWebDeveloperPopup");
+
+        let itemsToDisplay = [...menu.children];
+        // Hardcode the addition of the "work offline" menuitem at the bottom:
+        itemsToDisplay.push({localName: "menuseparator", getAttribute: () => {}});
+        itemsToDisplay.push(doc.getElementById("goOfflineMenuitem"));
+
+        let developerItems = doc.getElementById("PanelUI-developerItems");
+        // Import private helpers from CustomizableWidgets
+        let { clearSubview, fillSubviewFromMenuItems } =
+          Cu.import("resource:///modules/CustomizableWidgets.jsm", {});
+        clearSubview(developerItems);
+        fillSubviewFromMenuItems(itemsToDisplay, developerItems);
+      },
+      onBeforeCreated: function (doc) {
+        // Bug 1223127, CUI should make this easier to do.
+        if (doc.getElementById("PanelUI-developerItems")) {
+          return;
+        }
+        let view = doc.createElement("panelview");
+        view.id = "PanelUI-developerItems";
+        let panel = doc.createElement("vbox");
+        panel.setAttribute("class", "panel-subview-body");
+        view.appendChild(panel);
+        doc.getElementById("PanelUI-multiView").appendChild(view);
+      }
+    });
+  },
+
+  /**
+   * Install WebIDE widget
+   */
+  // Used by itself
+  installWebIDEWidget: function () {
+    if (this.isWebIDEWidgetInstalled()) {
+      return;
+    }
+
+    let defaultArea;
+    if (Services.prefs.getBoolPref("devtools.webide.widget.inNavbarByDefault")) {
+      defaultArea = CustomizableUI.AREA_NAVBAR;
+    } else {
+      defaultArea = CustomizableUI.AREA_PANEL;
+    }
+
+    CustomizableUI.createWidget({
+      id: "webide-button",
+      shortcutId: "key_webide",
+      label: "devtools-webide-button2.label",
+      tooltiptext: "devtools-webide-button2.tooltiptext",
+      defaultArea: defaultArea,
+      onCommand: function (aEvent) {
+        gDevToolsBrowser.openWebIDE();
+      }
+    });
+  },
+
+  isWebIDEWidgetInstalled: function () {
+    let widgetWrapper = CustomizableUI.getWidget("webide-button");
+    return !!(widgetWrapper && widgetWrapper.provider == CustomizableUI.PROVIDER_API);
+  },
+
+  /**
+   * The deferred promise will be resolved by WebIDE's UI.init()
+   */
+  isWebIDEInitialized: defer(),
+
+  /**
+   * Uninstall WebIDE widget
+   */
+  uninstallWebIDEWidget: function () {
+    if (this.isWebIDEWidgetInstalled()) {
+      CustomizableUI.removeWidgetFromArea("webide-button");
+    }
+    CustomizableUI.destroyWidget("webide-button");
+  },
+
+  /**
+   * Move WebIDE widget to the navbar
+   */
+   // Used by webide.js
+  moveWebIDEWidgetInNavbar: function () {
+    CustomizableUI.addWidgetToArea("webide-button", CustomizableUI.AREA_NAVBAR);
+  },
+
+  /**
+   * Add this DevTools's presence to a browser window's document
+   *
+   * @param {XULDocument} doc
+   *        The document to which devtools should be hooked to.
+   */
+  _registerBrowserWindow: function (win) {
+    if (gDevToolsBrowser._trackedBrowserWindows.has(win)) {
+      return;
+    }
+    gDevToolsBrowser._trackedBrowserWindows.add(win);
+
+    BrowserMenus.addMenus(win.document);
+
+    // Register the Developer widget in the Hamburger menu or navbar
+    // only once menus are registered as it depends on it.
+    gDevToolsBrowser.installDeveloperWidget();
+
+    // Inject lazily DeveloperToolbar on the chrome window
+    loader.lazyGetter(win, "DeveloperToolbar", function () {
+      let { DeveloperToolbar } = require("devtools/client/shared/developer-toolbar");
+      return new DeveloperToolbar(win);
+    });
+
+    this.updateCommandAvailability(win);
+    this.ensurePrefObserver();
+    win.addEventListener("unload", this);
+
+    let tabContainer = win.gBrowser.tabContainer;
+    tabContainer.addEventListener("TabSelect", this, false);
+    tabContainer.addEventListener("TabOpen", this, false);
+    tabContainer.addEventListener("TabClose", this, false);
+    tabContainer.addEventListener("TabPinned", this, false);
+    tabContainer.addEventListener("TabUnpinned", this, false);
+  },
+
+  /**
+   * Hook the JS debugger tool to the "Debug Script" button of the slow script
+   * dialog.
+   */
+  setSlowScriptDebugHandler: function DT_setSlowScriptDebugHandler() {
+    let debugService = Cc["@mozilla.org/dom/slow-script-debug;1"]
+                         .getService(Ci.nsISlowScriptDebug);
+    let tm = Cc["@mozilla.org/thread-manager;1"].getService(Ci.nsIThreadManager);
+
+    function slowScriptDebugHandler(aTab, aCallback) {
+      let target = TargetFactory.forTab(aTab);
+
+      gDevTools.showToolbox(target, "jsdebugger").then(toolbox => {
+        let threadClient = toolbox.getCurrentPanel().panelWin.gThreadClient;
+
+        // Break in place, which means resuming the debuggee thread and pausing
+        // right before the next step happens.
+        switch (threadClient.state) {
+          case "paused":
+            // When the debugger is already paused.
+            threadClient.resumeThenPause();
+            aCallback();
+            break;
+          case "attached":
+            // When the debugger is already open.
+            threadClient.interrupt(() => {
+              threadClient.resumeThenPause();
+              aCallback();
+            });
+            break;
+          case "resuming":
+            // The debugger is newly opened.
+            threadClient.addOneTimeListener("resumed", () => {
+              threadClient.interrupt(() => {
+                threadClient.resumeThenPause();
+                aCallback();
+              });
+            });
+            break;
+          default:
+            throw Error("invalid thread client state in slow script debug handler: " +
+                        threadClient.state);
+        }
+      });
+    }
+
+    debugService.activationHandler = function (aWindow) {
+      let chromeWindow = aWindow.QueryInterface(Ci.nsIInterfaceRequestor)
+                                .getInterface(Ci.nsIWebNavigation)
+                                .QueryInterface(Ci.nsIDocShellTreeItem)
+                                .rootTreeItem
+                                .QueryInterface(Ci.nsIInterfaceRequestor)
+                                .getInterface(Ci.nsIDOMWindow)
+                                .QueryInterface(Ci.nsIDOMChromeWindow);
+
+      let setupFinished = false;
+      slowScriptDebugHandler(chromeWindow.gBrowser.selectedTab,
+                             () => { setupFinished = true; });
+
+      // Don't return from the interrupt handler until the debugger is brought
+      // up; no reason to continue executing the slow script.
+      let utils = aWindow.QueryInterface(Ci.nsIInterfaceRequestor)
+                         .getInterface(Ci.nsIDOMWindowUtils);
+      utils.enterModalState();
+      while (!setupFinished) {
+        tm.currentThread.processNextEvent(true);
+      }
+      utils.leaveModalState();
+    };
+
+    debugService.remoteActivationHandler = function (aBrowser, aCallback) {
+      let chromeWindow = aBrowser.ownerDocument.defaultView;
+      let tab = chromeWindow.gBrowser.getTabForBrowser(aBrowser);
+      chromeWindow.gBrowser.selected = tab;
+
+      function callback() {
+        aCallback.finishDebuggerStartup();
+      }
+
+      slowScriptDebugHandler(tab, callback);
+    };
+  },
+
+  /**
+   * Unset the slow script debug handler.
+   */
+  unsetSlowScriptDebugHandler: function DT_unsetSlowScriptDebugHandler() {
+    let debugService = Cc["@mozilla.org/dom/slow-script-debug;1"]
+                         .getService(Ci.nsISlowScriptDebug);
+    debugService.activationHandler = undefined;
+  },
+
+  /**
+   * Add the menuitem for a tool to all open browser windows.
+   *
+   * @param {object} toolDefinition
+   *        properties of the tool to add
+   */
+  _addToolToWindows: function DT_addToolToWindows(toolDefinition) {
+    // No menu item or global shortcut is required for options panel.
+    if (!toolDefinition.inMenu) {
+      return;
+    }
+
+    // Skip if the tool is disabled.
+    try {
+      if (toolDefinition.visibilityswitch &&
+         !Services.prefs.getBoolPref(toolDefinition.visibilityswitch)) {
+        return;
+      }
+    } catch (e) {}
+
+    // We need to insert the new tool in the right place, which means knowing
+    // the tool that comes before the tool that we're trying to add
+    let allDefs = gDevTools.getToolDefinitionArray();
+    let prevDef;
+    for (let def of allDefs) {
+      if (!def.inMenu) {
+        continue;
+      }
+      if (def === toolDefinition) {
+        break;
+      }
+      prevDef = def;
+    }
+
+    for (let win of gDevToolsBrowser._trackedBrowserWindows) {
+      BrowserMenus.insertToolMenuElements(win.document, toolDefinition, prevDef);
+    }
+
+    if (toolDefinition.id === "jsdebugger") {
+      gDevToolsBrowser.setSlowScriptDebugHandler();
+    }
+  },
+
+  hasToolboxOpened: function (win) {
+    let tab = win.gBrowser.selectedTab;
+    for (let [target, toolbox] of gDevTools._toolboxes) {
+      if (target.tab == tab) {
+        return true;
+      }
+    }
+    return false;
+  },
+
+  /**
+   * 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 = gDevToolsBrowser.hasToolboxOpened(win);
+
+      let menu = win.document.getElementById("menu_devToolbox");
+      if (hasToolbox) {
+        menu.setAttribute("checked", "true");
+      } else {
+        menu.removeAttribute("checked");
+      }
+    }
+  },
+
+  /**
+   * Remove the menuitem for a tool to all open browser windows.
+   *
+   * @param {string} toolId
+   *        id of the tool to remove
+   */
+  _removeToolFromWindows: function DT_removeToolFromWindows(toolId) {
+    for (let win of gDevToolsBrowser._trackedBrowserWindows) {
+      BrowserMenus.removeToolFromMenu(toolId, win.document);
+    }
+
+    if (toolId === "jsdebugger") {
+      gDevToolsBrowser.unsetSlowScriptDebugHandler();
+    }
+  },
+
+  /**
+   * Called on browser unload to remove menu entries, toolboxes and event
+   * listeners from the closed browser window.
+   *
+   * @param  {XULWindow} win
+   *         The window containing the menu entry
+   */
+  _forgetBrowserWindow: function (win) {
+    if (!gDevToolsBrowser._trackedBrowserWindows.has(win)) {
+      return;
+    }
+    gDevToolsBrowser._trackedBrowserWindows.delete(win);
+    win.removeEventListener("unload", this);
+
+    BrowserMenus.removeMenus(win.document);
+
+    // Destroy toolboxes for closed window
+    for (let [target, toolbox] of gDevTools._toolboxes) {
+      if (toolbox.win.top == win) {
+        toolbox.destroy();
+      }
+    }
+
+    // Destroy the Developer toolbar if it has been accessed
+    let desc = Object.getOwnPropertyDescriptor(win, "DeveloperToolbar");
+    if (desc && !desc.get) {
+      win.DeveloperToolbar.destroy();
+    }
+
+    let tabContainer = win.gBrowser.tabContainer;
+    tabContainer.removeEventListener("TabSelect", this, false);
+    tabContainer.removeEventListener("TabOpen", this, false);
+    tabContainer.removeEventListener("TabClose", this, false);
+    tabContainer.removeEventListener("TabPinned", this, false);
+    tabContainer.removeEventListener("TabUnpinned", this, false);
+  },
+
+  handleEvent: function (event) {
+    switch (event.type) {
+      case "TabOpen":
+      case "TabClose":
+      case "TabPinned":
+      case "TabUnpinned":
+        let open = 0;
+        let pinned = 0;
+
+        for (let win of this._trackedBrowserWindows) {
+          let tabContainer = win.gBrowser.tabContainer;
+          let numPinnedTabs = win.gBrowser._numPinnedTabs || 0;
+          let numTabs = tabContainer.itemCount - numPinnedTabs;
+
+          open += numTabs;
+          pinned += numPinnedTabs;
+        }
+
+        this._tabStats.histOpen.push(open);
+        this._tabStats.histPinned.push(pinned);
+        this._tabStats.peakOpen = Math.max(open, this._tabStats.peakOpen);
+        this._tabStats.peakPinned = Math.max(pinned, this._tabStats.peakPinned);
+        break;
+      case "TabSelect":
+        gDevToolsBrowser._updateMenuCheckbox();
+        break;
+      case "unload":
+        // top-level browser window unload
+        gDevToolsBrowser._forgetBrowserWindow(event.target.defaultView);
+        break;
+    }
+  },
+
+  _pingTelemetry: function () {
+    let mean = function (arr) {
+      if (arr.length === 0) {
+        return 0;
+      }
+
+      let total = arr.reduce((a, b) => a + b);
+      return Math.ceil(total / arr.length);
+    };
+
+    let tabStats = gDevToolsBrowser._tabStats;
+    this._telemetry.log(TABS_OPEN_PEAK_HISTOGRAM, tabStats.peakOpen);
+    this._telemetry.log(TABS_OPEN_AVG_HISTOGRAM, mean(tabStats.histOpen));
+    this._telemetry.log(TABS_PINNED_PEAK_HISTOGRAM, tabStats.peakPinned);
+    this._telemetry.log(TABS_PINNED_AVG_HISTOGRAM, mean(tabStats.histPinned));
+  },
+
+  /**
+   * All browser windows have been closed, tidy up remaining objects.
+   */
+  destroy: function () {
+    Services.prefs.removeObserver("devtools.", gDevToolsBrowser);
+    Services.obs.removeObserver(gDevToolsBrowser, "browser-delayed-startup-finished");
+    Services.obs.removeObserver(gDevToolsBrowser.destroy, "quit-application");
+
+    gDevToolsBrowser._pingTelemetry();
+    gDevToolsBrowser._telemetry = null;
+
+    for (let win of gDevToolsBrowser._trackedBrowserWindows) {
+      gDevToolsBrowser._forgetBrowserWindow(win);
+    }
+  },
+};
+
+// Handle all already registered tools,
+gDevTools.getToolDefinitionArray()
+         .forEach(def => gDevToolsBrowser._addToolToWindows(def));
+// and the new ones.
+gDevTools.on("tool-registered", function (ev, toolId) {
+  let toolDefinition = gDevTools._tools.get(toolId);
+  gDevToolsBrowser._addToolToWindows(toolDefinition);
+});
+
+gDevTools.on("tool-unregistered", function (ev, toolId) {
+  if (typeof toolId != "string") {
+    toolId = toolId.id;
+  }
+  gDevToolsBrowser._removeToolFromWindows(toolId);
+});
+
+gDevTools.on("toolbox-ready", gDevToolsBrowser._updateMenuCheckbox);
+gDevTools.on("toolbox-destroyed", gDevToolsBrowser._updateMenuCheckbox);
+
+Services.obs.addObserver(gDevToolsBrowser.destroy, "quit-application", false);
+Services.obs.addObserver(gDevToolsBrowser, "browser-delayed-startup-finished", false);
+
+// Fake end of browser window load event for all already opened windows
+// that is already fully loaded.
+let enumerator = Services.wm.getEnumerator(gDevTools.chromeWindowType);
+while (enumerator.hasMoreElements()) {
+  let win = enumerator.getNext();
+  if (win.gBrowserInit && win.gBrowserInit.delayedStartupFinished) {
+    gDevToolsBrowser._registerBrowserWindow(win);
+  }
+}
+
+// Watch for module loader unload. Fires when the tools are reloaded.
+unload(function () {
+  gDevToolsBrowser.destroy();
+});
diff --git a/devtools/client/framework/devtools.js b/devtools/client/framework/devtools.js
new file mode 100644
index 000000000..90f88023b
--- /dev/null
+++ b/devtools/client/framework/devtools.js
@@ -0,0 +1,534 @@
+/* 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 Services = require("Services");
+const promise = require("promise");
+const defer = require("devtools/shared/defer");
+
+// Load gDevToolsBrowser toolbox lazily as they need gDevTools to be fully initialized
+loader.lazyRequireGetter(this, "Toolbox", "devtools/client/framework/toolbox", true);
+loader.lazyRequireGetter(this, "ToolboxHostManager", "devtools/client/framework/toolbox-host-manager", true);
+loader.lazyRequireGetter(this, "gDevToolsBrowser", "devtools/client/framework/devtools-browser", true);
+
+const {defaultTools: DefaultTools, defaultThemes: DefaultThemes} =
+  require("devtools/client/definitions");
+const EventEmitter = require("devtools/shared/event-emitter");
+const {JsonView} = require("devtools/client/jsonview/main");
+const AboutDevTools = require("devtools/client/framework/about-devtools-toolbox");
+const {when: unload} = require("sdk/system/unload");
+const {Task} = require("devtools/shared/task");
+
+const FORBIDDEN_IDS = new Set(["toolbox", ""]);
+const MAX_ORDINAL = 99;
+
+/**
+ * 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() {
+  this._tools = new Map();     // Map<toolId, tool>
+  this._themes = new Map();    // Map<themeId, theme>
+  this._toolboxes = new Map(); // Map<target, toolbox>
+  // List of toolboxes that are still in process of creation
+  this._creatingToolboxes = new Map(); // Map<target, toolbox Promise>
+
+  // destroy() is an observer's handler so we need to preserve context.
+  this.destroy = this.destroy.bind(this);
+
+  // JSON Viewer for 'application/json' documents.
+  JsonView.initialize();
+
+  AboutDevTools.register();
+
+  EventEmitter.decorate(this);
+
+  Services.obs.addObserver(this.destroy, "quit-application", false);
+
+  // This is important step in initialization codepath where we are going to
+  // start registering all default tools and themes: create menuitems, keys, emit
+  // related events.
+  this.registerDefaults();
+};
+
+DevTools.prototype = {
+  // The windowtype of the main window, used in various tools. This may be set
+  // to something different by other gecko apps.
+  chromeWindowType: "navigator:browser",
+
+  registerDefaults() {
+    // Ensure registering items in the sorted order (getDefault* functions
+    // return sorted lists)
+    this.getDefaultTools().forEach(definition => this.registerTool(definition));
+    this.getDefaultThemes().forEach(definition => this.registerTheme(definition));
+  },
+
+  unregisterDefaults() {
+    for (let definition of this.getToolDefinitionArray()) {
+      this.unregisterTool(definition.id);
+    }
+    for (let definition of this.getThemeDefinitionArray()) {
+      this.unregisterTheme(definition.id);
+    }
+  },
+
+  /**
+   * 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.
+   * See it as a "manifest".
+   * The only actual code lives in the build() function, which will be used to
+   * start an instance of this tool.
+   *
+   * Each toolDefinition has the following properties:
+   * - id: Unique identifier for this tool (string|required)
+   * - visibilityswitch: Property name to allow us to hide this tool from the
+   *                     DevTools Toolbox.
+   *                     A falsy value indicates that it cannot be hidden.
+   * - icon: URL pointing to a graphic which will be used as the src for an
+   *         16x16 img tag (string|required)
+   * - invertIconForLightTheme: The icon can automatically have an inversion
+   *         filter applied (default is false).  All builtin tools are true, but
+   *         addons may omit this to prevent unwanted changes to the `icon`
+   *         image. filter: invert(1) is applied to the image (boolean|optional)
+   * - url: URL pointing to a XUL/XHTML document containing the user interface
+   *        (string|required)
+   * - label: Localized name for the tool to be displayed to the user
+   *          (string|required)
+   * - hideInOptions: Boolean indicating whether or not this tool should be
+                      shown in toolbox options or not. Defaults to false.
+   *                  (boolean)
+   * - build: Function that takes an iframe, which has been populated with the
+   *          markup from |url|, and also the toolbox containing the panel.
+   *          And returns an instance of ToolPanel (function|required)
+   */
+  registerTool: function DT_registerTool(toolDefinition) {
+    let toolId = toolDefinition.id;
+
+    if (!toolId || FORBIDDEN_IDS.has(toolId)) {
+      throw new Error("Invalid definition.id");
+    }
+
+    // Make sure that additional tools will always be able to be hidden.
+    // When being called from main.js, defaultTools has not yet been exported.
+    // But, we can assume that in this case, it is a default tool.
+    if (DefaultTools.indexOf(toolDefinition) == -1) {
+      toolDefinition.visibilityswitch = "devtools." + toolId + ".enabled";
+    }
+
+    this._tools.set(toolId, toolDefinition);
+
+    this.emit("tool-registered", toolId);
+  },
+
+  /**
+   * Removes all tools that match the given |toolId|
+   * Needed so that add-ons can remove themselves when they are deactivated
+   *
+   * @param {string|object} tool
+   *        Definition or the id of the tool to unregister. Passing the
+   *        tool id should be avoided as it is a temporary measure.
+   * @param {boolean} isQuitApplication
+   *        true to indicate that the call is due to app quit, so we should not
+   *        cause a cascade of costly events
+   */
+  unregisterTool: function DT_unregisterTool(tool, isQuitApplication) {
+    let toolId = null;
+    if (typeof tool == "string") {
+      toolId = tool;
+      tool = this._tools.get(tool);
+    }
+    else {
+      toolId = tool.id;
+    }
+    this._tools.delete(toolId);
+
+    if (!isQuitApplication) {
+      this.emit("tool-unregistered", tool);
+    }
+  },
+
+  /**
+   * Sorting function used for sorting tools based on their ordinals.
+   */
+  ordinalSort: function DT_ordinalSort(d1, d2) {
+    let o1 = (typeof d1.ordinal == "number") ? d1.ordinal : MAX_ORDINAL;
+    let o2 = (typeof d2.ordinal == "number") ? d2.ordinal : MAX_ORDINAL;
+    return o1 - o2;
+  },
+
+  getDefaultTools: function DT_getDefaultTools() {
+    return DefaultTools.sort(this.ordinalSort);
+  },
+
+  getAdditionalTools: function DT_getAdditionalTools() {
+    let tools = [];
+    for (let [key, value] of this._tools) {
+      if (DefaultTools.indexOf(value) == -1) {
+        tools.push(value);
+      }
+    }
+    return tools.sort(this.ordinalSort);
+  },
+
+  getDefaultThemes() {
+    return DefaultThemes.sort(this.ordinalSort);
+  },
+
+  /**
+   * Get a tool definition if it exists and is enabled.
+   *
+   * @param {string} toolId
+   *        The id of the tool to show
+   *
+   * @return {ToolDefinition|null} tool
+   *         The ToolDefinition for the id or null.
+   */
+  getToolDefinition: function DT_getToolDefinition(toolId) {
+    let tool = this._tools.get(toolId);
+    if (!tool) {
+      return null;
+    } else if (!tool.visibilityswitch) {
+      return tool;
+    }
+
+    let enabled;
+    try {
+      enabled = Services.prefs.getBoolPref(tool.visibilityswitch);
+    } catch (e) {
+      enabled = true;
+    }
+
+    return enabled ? tool : null;
+  },
+
+  /**
+   * Allow ToolBoxes to get at the list of tools that they should populate
+   * themselves with.
+   *
+   * @return {Map} tools
+   *         A map of the the tool definitions registered in this instance
+   */
+  getToolDefinitionMap: function DT_getToolDefinitionMap() {
+    let tools = new Map();
+
+    for (let [id, definition] of this._tools) {
+      if (this.getToolDefinition(id)) {
+        tools.set(id, definition);
+      }
+    }
+
+    return tools;
+  },
+
+  /**
+   * Tools have an inherent ordering that can't be represented in a Map so
+   * getToolDefinitionArray provides an alternative representation of the
+   * definitions sorted by ordinal value.
+   *
+   * @return {Array} tools
+   *         A sorted array of the tool definitions registered in this instance
+   */
+  getToolDefinitionArray: function DT_getToolDefinitionArray() {
+    let definitions = [];
+
+    for (let [id, definition] of this._tools) {
+      if (this.getToolDefinition(id)) {
+        definitions.push(definition);
+      }
+    }
+
+    return definitions.sort(this.ordinalSort);
+  },
+
+  /**
+   * Register a new theme for developer tools toolbox.
+   *
+   * A definition is a light object that holds various information about a
+   * theme.
+   *
+   * Each themeDefinition has the following properties:
+   * - id: Unique identifier for this theme (string|required)
+   * - label: Localized name for the theme to be displayed to the user
+   *          (string|required)
+   * - stylesheets: Array of URLs pointing to a CSS document(s) containing
+   *                the theme style rules (array|required)
+   * - classList: Array of class names identifying the theme within a document.
+   *              These names are set to document element when applying
+   *              the theme (array|required)
+   * - onApply: Function that is executed by the framework when the theme
+   *            is applied. The function takes the current iframe window
+   *            and the previous theme id as arguments (function)
+   * - onUnapply: Function that is executed by the framework when the theme
+   *            is unapplied. The function takes the current iframe window
+   *            and the new theme id as arguments (function)
+   */
+  registerTheme: function DT_registerTheme(themeDefinition) {
+    let themeId = themeDefinition.id;
+
+    if (!themeId) {
+      throw new Error("Invalid theme id");
+    }
+
+    if (this._themes.get(themeId)) {
+      throw new Error("Theme with the same id is already registered");
+    }
+
+    this._themes.set(themeId, themeDefinition);
+
+    this.emit("theme-registered", themeId);
+  },
+
+  /**
+   * Removes an existing theme from the list of registered themes.
+   * Needed so that add-ons can remove themselves when they are deactivated
+   *
+   * @param {string|object} theme
+   *        Definition or the id of the theme to unregister.
+   */
+  unregisterTheme: function DT_unregisterTheme(theme) {
+    let themeId = null;
+    if (typeof theme == "string") {
+      themeId = theme;
+      theme = this._themes.get(theme);
+    }
+    else {
+      themeId = theme.id;
+    }
+
+    let currTheme = Services.prefs.getCharPref("devtools.theme");
+
+    // Note that we can't check if `theme` is an item
+    // of `DefaultThemes` as we end up reloading definitions
+    // module and end up with different theme objects
+    let isCoreTheme = DefaultThemes.some(t => t.id === themeId);
+
+    // Reset the theme if an extension theme that's currently applied
+    // is being removed.
+    // Ignore shutdown since addons get disabled during that time.
+    if (!Services.startup.shuttingDown &&
+        !isCoreTheme &&
+        theme.id == currTheme) {
+      Services.prefs.setCharPref("devtools.theme", "light");
+
+      let data = {
+        pref: "devtools.theme",
+        newValue: "light",
+        oldValue: currTheme
+      };
+
+      this.emit("pref-changed", data);
+
+      this.emit("theme-unregistered", theme);
+    }
+
+    this._themes.delete(themeId);
+  },
+
+  /**
+   * Get a theme definition if it exists.
+   *
+   * @param {string} themeId
+   *        The id of the theme
+   *
+   * @return {ThemeDefinition|null} theme
+   *         The ThemeDefinition for the id or null.
+   */
+  getThemeDefinition: function DT_getThemeDefinition(themeId) {
+    let theme = this._themes.get(themeId);
+    if (!theme) {
+      return null;
+    }
+    return theme;
+  },
+
+  /**
+   * Get map of registered themes.
+   *
+   * @return {Map} themes
+   *         A map of the the theme definitions registered in this instance
+   */
+  getThemeDefinitionMap: function DT_getThemeDefinitionMap() {
+    let themes = new Map();
+
+    for (let [id, definition] of this._themes) {
+      if (this.getThemeDefinition(id)) {
+        themes.set(id, definition);
+      }
+    }
+
+    return themes;
+  },
+
+  /**
+   * Get registered themes definitions sorted by ordinal value.
+   *
+   * @return {Array} themes
+   *         A sorted array of the theme definitions registered in this instance
+   */
+  getThemeDefinitionArray: function DT_getThemeDefinitionArray() {
+    let definitions = [];
+
+    for (let [id, definition] of this._themes) {
+      if (this.getThemeDefinition(id)) {
+        definitions.push(definition);
+      }
+    }
+
+    return definitions.sort(this.ordinalSort);
+  },
+
+  /**
+   * Show a Toolbox for a target (either by creating a new one, or if a toolbox
+   * already exists for the target, by bring to the front the existing one)
+   * If |toolId| is specified then the displayed toolbox will have the
+   * specified tool selected.
+   * If |hostType| is specified then the toolbox will be displayed using the
+   * specified HostType.
+   *
+   * @param {Target} target
+   *         The target the toolbox will debug
+   * @param {string} toolId
+   *        The id of the tool to show
+   * @param {Toolbox.HostType} hostType
+   *        The type of host (bottom, window, side)
+   * @param {object} hostOptions
+   *        Options for host specifically
+   *
+   * @return {Toolbox} toolbox
+   *        The toolbox that was opened
+   */
+  showToolbox: Task.async(function* (target, toolId, hostType, hostOptions) {
+    let toolbox = this._toolboxes.get(target);
+    if (toolbox) {
+
+      if (hostType != null && toolbox.hostType != hostType) {
+        yield toolbox.switchHost(hostType);
+      }
+
+      if (toolId != null && toolbox.currentToolId != toolId) {
+        yield toolbox.selectTool(toolId);
+      }
+
+      toolbox.raise();
+    } else {
+      // As toolbox object creation is async, we have to be careful about races
+      // Check for possible already in process of loading toolboxes before
+      // actually trying to create a new one.
+      let promise = this._creatingToolboxes.get(target);
+      if (promise) {
+        return yield promise;
+      }
+      let toolboxPromise = this.createToolbox(target, toolId, hostType, hostOptions);
+      this._creatingToolboxes.set(target, toolboxPromise);
+      toolbox = yield toolboxPromise;
+      this._creatingToolboxes.delete(target);
+    }
+    return toolbox;
+  }),
+
+  createToolbox: Task.async(function* (target, toolId, hostType, hostOptions) {
+    let manager = new ToolboxHostManager(target, hostType, hostOptions);
+
+    let toolbox = yield manager.create(toolId);
+
+    this._toolboxes.set(target, toolbox);
+
+    this.emit("toolbox-created", toolbox);
+
+    toolbox.once("destroy", () => {
+      this.emit("toolbox-destroy", target);
+    });
+
+    toolbox.once("destroyed", () => {
+      this._toolboxes.delete(target);
+      this.emit("toolbox-destroyed", target);
+    });
+
+    yield toolbox.open();
+    this.emit("toolbox-ready", toolbox);
+
+    return toolbox;
+  }),
+
+  /**
+   * Return the toolbox for a given target.
+   *
+   * @param  {object} target
+   *         Target value e.g. the target that owns this toolbox
+   *
+   * @return {Toolbox} toolbox
+   *         The toolbox that is debugging the given target
+   */
+  getToolbox: function DT_getToolbox(target) {
+    return this._toolboxes.get(target);
+  },
+
+  /**
+   * Close the toolbox for a given target
+   *
+   * @return promise
+   *         This promise will resolve to false if no toolbox was found
+   *         associated to the target. true, if the toolbox was successfully
+   *         closed.
+   */
+  closeToolbox: Task.async(function* (target) {
+    let toolbox = yield this._creatingToolboxes.get(target);
+    if (!toolbox) {
+      toolbox = this._toolboxes.get(target);
+    }
+    if (!toolbox) {
+      return false;
+    }
+    yield toolbox.destroy();
+    return true;
+  }),
+
+  /**
+   * Called to tear down a tools provider.
+   */
+  _teardown: function DT_teardown() {
+    for (let [target, toolbox] of this._toolboxes) {
+      toolbox.destroy();
+    }
+    AboutDevTools.unregister();
+  },
+
+  /**
+   * 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.getToolDefinitionMap()) {
+      this.unregisterTool(key, true);
+    }
+
+    JsonView.destroy();
+
+    gDevTools.unregisterDefaults();
+
+    // Cleaning down the toolboxes: i.e.
+    //   for (let [target, toolbox] of this._toolboxes) toolbox.destroy();
+    // Is taken care of by the gDevToolsBrowser.forgetBrowserWindow
+  },
+
+  /**
+   * Iterator that yields each of the toolboxes.
+   */
+  *[Symbol.iterator ]() {
+    for (let toolbox of this._toolboxes) {
+      yield toolbox;
+    }
+  }
+};
+
+const gDevTools = exports.gDevTools = new DevTools();
+
+// Watch for module loader unload. Fires when the tools are reloaded.
+unload(function () {
+  gDevTools._teardown();
+});
diff --git a/devtools/client/framework/gDevTools.jsm b/devtools/client/framework/gDevTools.jsm
new file mode 100644
index 000000000..d825c0eaa
--- /dev/null
+++ b/devtools/client/framework/gDevTools.jsm
@@ -0,0 +1,162 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+/**
+ * This JSM is here to keep some compatibility with existing add-ons.
+ * Please now use the modules:
+ * - devtools/client/framework/devtools for gDevTools
+ * - devtools/client/framework/devtools-browser for gDevToolsBrowser
+ */
+
+this.EXPORTED_SYMBOLS = [ "gDevTools", "gDevToolsBrowser" ];
+
+const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+
+const { loader } = Cu.import("resource://devtools/shared/Loader.jsm", {});
+
+/**
+ * Do not directly map to the commonjs modules so that callsites of
+ * gDevTools.jsm do not have to do anything to access to the very last version
+ * of the module. The `devtools` and `browser` getter are always going to
+ * retrieve the very last version of the modules.
+ */
+Object.defineProperty(this, "require", {
+  get() {
+    let { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
+    return require;
+  }
+});
+Object.defineProperty(this, "devtools", {
+  get() {
+    return require("devtools/client/framework/devtools").gDevTools;
+  }
+});
+Object.defineProperty(this, "browser", {
+  get() {
+    return require("devtools/client/framework/devtools-browser").gDevToolsBrowser;
+  }
+});
+
+/**
+ * gDevTools is a singleton that controls the Firefox Developer Tools.
+ *
+ * It is an instance of a DevTools class that holds a set of tools. It has the
+ * same lifetime as the browser.
+ */
+let gDevToolsMethods = [
+  // Used by the reload addon.
+  // Force reloading dependencies if the loader happens to have reloaded.
+  "reload",
+
+  // Used by: - b2g desktop.js
+  //          - nsContextMenu
+  //          - /devtools code
+  "showToolbox",
+
+  // Used by Addon SDK and /devtools
+  "closeToolbox",
+  "getToolbox",
+
+  // Used by Addon SDK, main.js and tests:
+  "registerTool",
+  "registerTheme",
+  "unregisterTool",
+  "unregisterTheme",
+
+  // Used by main.js and test
+  "getToolDefinitionArray",
+  "getThemeDefinitionArray",
+
+  // Used by theme-switching.js
+  "getThemeDefinition",
+  "emit",
+
+  // Used by /devtools
+  "on",
+  "off",
+  "once",
+
+  // Used by tests
+  "getToolDefinitionMap",
+  "getThemeDefinitionMap",
+  "getDefaultTools",
+  "getAdditionalTools",
+  "getToolDefinition",
+];
+this.gDevTools = {
+  // Used by tests
+  get _toolboxes() {
+    return devtools._toolboxes;
+  },
+  get _tools() {
+    return devtools._tools;
+  },
+  *[Symbol.iterator ]() {
+    for (let toolbox of this._toolboxes) {
+      yield toolbox;
+    }
+  }
+};
+gDevToolsMethods.forEach(name => {
+  this.gDevTools[name] = (...args) => {
+    return devtools[name].apply(devtools, args);
+  };
+});
+
+
+/**
+ * gDevToolsBrowser exposes functions to connect the gDevTools instance with a
+ * Firefox instance.
+ */
+let gDevToolsBrowserMethods = [
+  // used by browser-sets.inc, command
+  "toggleToolboxCommand",
+
+  // Used by browser.js itself, by setting a oncommand string...
+  "selectToolCommand",
+
+  // Used by browser-sets.inc, command
+  "openAboutDebugging",
+
+  // Used by browser-sets.inc, command
+  "openConnectScreen",
+
+  // Used by browser-sets.inc, command
+  //         itself, webide widget
+  "openWebIDE",
+
+  // Used by browser-sets.inc, command
+  "openContentProcessToolbox",
+
+  // Used by webide.js
+  "moveWebIDEWidgetInNavbar",
+
+  // Used by browser.js
+  "registerBrowserWindow",
+
+  // Used by reload addon
+  "hasToolboxOpened",
+
+  // Used by browser.js
+  "forgetBrowserWindow"
+];
+this.gDevToolsBrowser = {
+  // Used by webide.js
+  get isWebIDEInitialized() {
+    return browser.isWebIDEInitialized;
+  },
+  // Used by a test (should be removed)
+  get _trackedBrowserWindows() {
+    return browser._trackedBrowserWindows;
+  }
+};
+gDevToolsBrowserMethods.forEach(name => {
+  this.gDevToolsBrowser[name] = (...args) => {
+    return browser[name].apply(browser, args);
+  };
+});
diff --git a/devtools/client/framework/location-store.js b/devtools/client/framework/location-store.js
new file mode 100644
index 000000000..96deb0a99
--- /dev/null
+++ b/devtools/client/framework/location-store.js
@@ -0,0 +1,103 @@
+/* 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 SOURCE_TOKEN = "<:>";
+
+function LocationStore (store) {
+  this._store = store || new Map();
+}
+
+/**
+ * Method to get a promised location from the Store.
+ * @param location
+ * @returns Promise<Object>
+ */
+LocationStore.prototype.get = function (location) {
+  this._safeAccessInit(location.url);
+  return this._store.get(location.url).get(location);
+};
+
+/**
+ * Method to set a promised location to the Store
+ * @param location
+ * @param promisedLocation
+ */
+LocationStore.prototype.set = function (location, promisedLocation = null) {
+  this._safeAccessInit(location.url);
+  this._store.get(location.url).set(serialize(location), promisedLocation);
+};
+
+/**
+ * Utility method to verify if key exists in Store before accessing it.
+ * If not, initializing it.
+ * @param url
+ * @private
+ */
+LocationStore.prototype._safeAccessInit = function (url) {
+  if (!this._store.has(url)) {
+    this._store.set(url, new Map());
+  }
+};
+
+/**
+ * Utility proxy method to Map.clear() method
+ */
+LocationStore.prototype.clear = function () {
+  this._store.clear();
+};
+
+/**
+ * Retrieves an object containing all locations to be resolved when `source-updated`
+ * event is triggered.
+ * @param url
+ * @returns {Array<String>}
+ */
+LocationStore.prototype.getByURL = function (url){
+  if (this._store.has(url)) {
+    return [...this._store.get(url).keys()];
+  }
+  return [];
+};
+
+/**
+ * Invalidates the stale location promises from the store when `source-updated`
+ * event is triggered, and when FrameView unsubscribes from a location.
+ * @param url
+ */
+LocationStore.prototype.clearByURL = function (url) {
+  this._safeAccessInit(url);
+  this._store.set(url, new Map());
+};
+
+exports.LocationStore = LocationStore;
+exports.serialize = serialize;
+exports.deserialize = deserialize;
+
+/**
+ * Utility method to serialize the source
+ * @param source
+ * @returns {string}
+ */
+function serialize(source) {
+  let { url, line, column } = source;
+  line = line || 0;
+  column = column || 0;
+  return `${url}${SOURCE_TOKEN}${line}${SOURCE_TOKEN}${column}`;
+};
+
+/**
+ * Utility method to serialize the source
+ * @param source
+ * @returns Object
+ */
+function deserialize(source) {
+  let [ url, line, column ] = source.split(SOURCE_TOKEN);
+  line = parseInt(line);
+  column = parseInt(column);
+  if (column === 0) {
+    return { url, line };
+  }
+  return { url, line, column };
+};
diff --git a/devtools/client/framework/menu-item.js b/devtools/client/framework/menu-item.js
new file mode 100644
index 000000000..f6afefa41
--- /dev/null
+++ b/devtools/client/framework/menu-item.js
@@ -0,0 +1,65 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+/**
+ * A partial implementation of the MenuItem API provided by electron:
+ * https://github.com/electron/electron/blob/master/docs/api/menu-item.md.
+ *
+ * Missing features:
+ *   - id String - Unique within a single menu. If defined then it can be used
+ *                 as a reference to this item by the position attribute.
+ *   - role String - Define the action of the menu item; when specified the
+ *                   click property will be ignored
+ *   - sublabel String
+ *   - accelerator Accelerator
+ *   - icon NativeImage
+ *   - position String - This field allows fine-grained definition of the
+ *                       specific location within a given menu.
+ *
+ * Implemented features:
+ *  @param Object options
+ *    Function click
+ *      Will be called with click(menuItem, browserWindow) when the menu item
+ *       is clicked
+ *    String type
+ *      Can be normal, separator, submenu, checkbox or radio
+ *    String label
+ *    Boolean enabled
+ *      If false, the menu item will be greyed out and unclickable.
+ *    Boolean checked
+ *      Should only be specified for checkbox or radio type menu items.
+ *    Menu submenu
+ *      Should be specified for submenu type menu items. If submenu is specified,
+ *      the type: 'submenu' can be omitted. If the value is not a Menu then it
+ *      will be automatically converted to one using Menu.buildFromTemplate.
+ *    Boolean visible
+ *      If false, the menu item will be entirely hidden.
+ */
+function MenuItem({
+    accesskey = null,
+    checked = false,
+    click = () => {},
+    disabled = false,
+    label = "",
+    id = null,
+    submenu = null,
+    type = "normal",
+    visible = true,
+} = { }) {
+  this.accesskey = accesskey;
+  this.checked = checked;
+  this.click = click;
+  this.disabled = disabled;
+  this.id = id;
+  this.label = label;
+  this.submenu = submenu;
+  this.type = type;
+  this.visible = visible;
+}
+
+module.exports = MenuItem;
diff --git a/devtools/client/framework/menu.js b/devtools/client/framework/menu.js
new file mode 100644
index 000000000..c96dbc2c7
--- /dev/null
+++ b/devtools/client/framework/menu.js
@@ -0,0 +1,173 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+const EventEmitter = require("devtools/shared/event-emitter");
+
+/**
+ * A partial implementation of the Menu API provided by electron:
+ * https://github.com/electron/electron/blob/master/docs/api/menu.md.
+ *
+ * Extra features:
+ *  - Emits an 'open' and 'close' event when the menu is opened/closed
+
+ * @param String id (non standard)
+ *        Needed so tests can confirm the XUL implementation is working
+ */
+function Menu({ id = null } = {}) {
+  this.menuitems = [];
+  this.id = id;
+
+  Object.defineProperty(this, "items", {
+    get() {
+      return this.menuitems;
+    }
+  });
+
+  EventEmitter.decorate(this);
+}
+
+/**
+ * Add an item to the end of the Menu
+ *
+ * @param {MenuItem} menuItem
+ */
+Menu.prototype.append = function (menuItem) {
+  this.menuitems.push(menuItem);
+};
+
+/**
+ * Add an item to a specified position in the menu
+ *
+ * @param {int} pos
+ * @param {MenuItem} menuItem
+ */
+Menu.prototype.insert = function (pos, menuItem) {
+  throw Error("Not implemented");
+};
+
+/**
+ * Show the Menu at a specified location on the screen
+ *
+ * Missing features:
+ *   - browserWindow - BrowserWindow (optional) - Default is null.
+ *   - positioningItem Number - (optional) OS X
+ *
+ * @param {int} screenX
+ * @param {int} screenY
+ * @param Toolbox toolbox (non standard)
+ *        Needed so we in which window to inject XUL
+ */
+Menu.prototype.popup = function (screenX, screenY, toolbox) {
+  let doc = toolbox.doc;
+  let popupset = doc.querySelector("popupset");
+  // See bug 1285229, on Windows, opening the same popup multiple times in a
+  // row ends up duplicating the popup. The newly inserted popup doesn't
+  // dismiss the old one. So remove any previously displayed popup before
+  // opening a new one.
+  let popup = popupset.querySelector("menupopup[menu-api=\"true\"]");
+  if (popup) {
+    popup.hidePopup();
+  }
+
+  popup = doc.createElement("menupopup");
+  popup.setAttribute("menu-api", "true");
+
+  if (this.id) {
+    popup.id = this.id;
+  }
+  this._createMenuItems(popup);
+
+  // Remove the menu from the DOM once it's hidden.
+  popup.addEventListener("popuphidden", (e) => {
+    if (e.target === popup) {
+      popup.remove();
+      this.emit("close");
+    }
+  });
+
+  popup.addEventListener("popupshown", (e) => {
+    if (e.target === popup) {
+      this.emit("open");
+    }
+  });
+
+  popupset.appendChild(popup);
+  popup.openPopupAtScreen(screenX, screenY, true);
+};
+
+Menu.prototype._createMenuItems = function (parent) {
+  let doc = parent.ownerDocument;
+  this.menuitems.forEach(item => {
+    if (!item.visible) {
+      return;
+    }
+
+    if (item.submenu) {
+      let menupopup = doc.createElement("menupopup");
+      item.submenu._createMenuItems(menupopup);
+
+      let menu = doc.createElement("menu");
+      menu.appendChild(menupopup);
+      menu.setAttribute("label", item.label);
+      if (item.disabled) {
+        menu.setAttribute("disabled", "true");
+      }
+      if (item.accesskey) {
+        menu.setAttribute("accesskey", item.accesskey);
+      }
+      if (item.id) {
+        menu.id = item.id;
+      }
+      parent.appendChild(menu);
+    } else if (item.type === "separator") {
+      let menusep = doc.createElement("menuseparator");
+      parent.appendChild(menusep);
+    } else {
+      let menuitem = doc.createElement("menuitem");
+      menuitem.setAttribute("label", item.label);
+      menuitem.addEventListener("command", () => {
+        item.click();
+      });
+
+      if (item.type === "checkbox") {
+        menuitem.setAttribute("type", "checkbox");
+      }
+      if (item.type === "radio") {
+        menuitem.setAttribute("type", "radio");
+      }
+      if (item.disabled) {
+        menuitem.setAttribute("disabled", "true");
+      }
+      if (item.checked) {
+        menuitem.setAttribute("checked", "true");
+      }
+      if (item.accesskey) {
+        menuitem.setAttribute("accesskey", item.accesskey);
+      }
+      if (item.id) {
+        menuitem.id = item.id;
+      }
+
+      parent.appendChild(menuitem);
+    }
+  });
+};
+
+Menu.setApplicationMenu = () => {
+  throw Error("Not implemented");
+};
+
+Menu.sendActionToFirstResponder = () => {
+  throw Error("Not implemented");
+};
+
+Menu.buildFromTemplate = () => {
+  throw Error("Not implemented");
+};
+
+module.exports = Menu;
diff --git a/devtools/client/framework/moz.build b/devtools/client/framework/moz.build
new file mode 100644
index 000000000..7b28b4b9e
--- /dev/null
+++ b/devtools/client/framework/moz.build
@@ -0,0 +1,33 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
+TEST_HARNESS_FILES.xpcshell.devtools.client.framework.test += [
+    'test/shared-redux-head.js',
+]
+
+DevToolsModules(
+    'about-devtools-toolbox.js',
+    'attach-thread.js',
+    'browser-menus.js',
+    'devtools-browser.js',
+    'devtools.js',
+    'gDevTools.jsm',
+    'location-store.js',
+    'menu-item.js',
+    'menu.js',
+    'selection.js',
+    'sidebar.js',
+    'source-map-service.js',
+    'target-from-url.js',
+    'target.js',
+    'toolbox-highlighter-utils.js',
+    'toolbox-host-manager.js',
+    'toolbox-hosts.js',
+    'toolbox-options.js',
+    'toolbox.js',
+    'ToolboxProcess.jsm',
+)
diff --git a/devtools/client/framework/options-panel.css b/devtools/client/framework/options-panel.css
new file mode 100644
index 000000000..4aad29e7b
--- /dev/null
+++ b/devtools/client/framework/options-panel.css
@@ -0,0 +1,107 @@
+/* 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/. */
+:root{
+  -moz-user-select: none;
+}
+
+#options-panel-container {
+  overflow: auto;
+}
+
+#options-panel {
+  display: block;
+}
+
+.options-vertical-pane {
+  display: inline;
+  float: left;
+}
+
+.options-vertical-pane {
+  margin: 5px;
+  width: calc(100%/3 - 10px);
+  min-width: 320px;
+  padding-inline-start: 5px;
+  box-sizing: border-box;
+}
+
+/* Snap to 50% width once there is not room for 3 columns anymore.
+   This prevents having 2 columns showing in a row, but taking up
+   only ~66% of the available space. */
+@media (max-width: 1000px) {
+  .options-vertical-pane {
+    width: calc(100%/2 - 10px);
+  }
+}
+
+.options-vertical-pane fieldset {
+  border: none;
+}
+
+.options-vertical-pane fieldset legend {
+  font-size: 1.4rem;
+  margin-inline-start: -15px;
+  margin-bottom: 3px;
+  cursor: default;
+}
+
+.options-vertical-pane fieldset + fieldset {
+  margin-top: 1rem;
+}
+
+.options-groupbox {
+  margin-inline-start: 15px;
+  padding: 2px;
+}
+
+.options-groupbox label {
+  display: flex;
+  padding: 4px 0;
+  align-items: center;
+}
+
+/* Add padding for label of select inputs in order to
+   align it with surrounding checkboxes */
+.options-groupbox label span:first-child {
+  padding-inline-start: 5px;
+}
+
+.options-groupbox label span + select {
+  margin-inline-start: 4px;
+}
+
+.options-groupbox.horizontal-options-groupbox label {
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+.options-groupbox.horizontal-options-groupbox label + label {
+  margin-inline-start: 4px;
+}
+
+.options-groupbox > *,
+.options-groupbox > .hidden-labels-box > checkbox {
+  padding: 2px;
+}
+
+.options-groupbox > .hidden-labels-box {
+  padding: 0;
+}
+
+.options-citation-label {
+  display: inline-block;
+  font-size: 1rem;
+  font-style: italic;
+   /* To align it with the checkbox */
+  padding: 4px 0 0;
+  padding-inline-end: 4px;
+}
+
+#devtools-sourceeditor-keybinding-select {
+  min-width: 130px;
+}
+
+#devtools-sourceeditor-tabsize-select {
+  min-width: 80px;
+}
diff --git a/devtools/client/framework/selection.js b/devtools/client/framework/selection.js
new file mode 100644
index 000000000..8125f8508
--- /dev/null
+++ b/devtools/client/framework/selection.js
@@ -0,0 +1,247 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+const nodeConstants = require("devtools/shared/dom-node-constants");
+var EventEmitter = require("devtools/shared/event-emitter");
+
+/**
+ * API
+ *
+ *   new Selection(walker=null)
+ *   destroy()
+ *   node (readonly)
+ *   setNode(node, origin="unknown")
+ *
+ * Helpers:
+ *
+ *   window
+ *   document
+ *   isRoot()
+ *   isNode()
+ *   isHTMLNode()
+ *
+ * Check the nature of the node:
+ *
+ *   isElementNode()
+ *   isAttributeNode()
+ *   isTextNode()
+ *   isCDATANode()
+ *   isEntityRefNode()
+ *   isEntityNode()
+ *   isProcessingInstructionNode()
+ *   isCommentNode()
+ *   isDocumentNode()
+ *   isDocumentTypeNode()
+ *   isDocumentFragmentNode()
+ *   isNotationNode()
+ *
+ * Events:
+ *   "new-node-front" when the inner node changed
+ *   "attribute-changed" when an attribute is changed
+ *   "detached-front" when the node (or one of its parents) is removed from
+ *   the document
+ *   "reparented" when the node (or one of its parents) is moved under
+ *   a different node
+ */
+
+/**
+ * A Selection object. Hold a reference to a node.
+ * Includes some helpers, fire some helpful events.
+ */
+function Selection(walker) {
+  EventEmitter.decorate(this);
+
+  this._onMutations = this._onMutations.bind(this);
+  this.setWalker(walker);
+}
+
+exports.Selection = Selection;
+
+Selection.prototype = {
+  _walker: null,
+
+  _onMutations: function (mutations) {
+    let attributeChange = false;
+    let pseudoChange = false;
+    let detached = false;
+    let parentNode = null;
+
+    for (let m of mutations) {
+      if (!attributeChange && m.type == "attributes") {
+        attributeChange = true;
+      }
+      if (m.type == "childList") {
+        if (!detached && !this.isConnected()) {
+          if (this.isNode()) {
+            parentNode = m.target;
+          }
+          detached = true;
+        }
+      }
+      if (m.type == "pseudoClassLock") {
+        pseudoChange = true;
+      }
+    }
+
+    // Fire our events depending on what changed in the mutations array
+    if (attributeChange) {
+      this.emit("attribute-changed");
+    }
+    if (pseudoChange) {
+      this.emit("pseudoclass");
+    }
+    if (detached) {
+      this.emit("detached-front", parentNode);
+    }
+  },
+
+  destroy: function () {
+    this.setWalker(null);
+  },
+
+  setWalker: function (walker) {
+    if (this._walker) {
+      this._walker.off("mutations", this._onMutations);
+    }
+    this._walker = walker;
+    if (this._walker) {
+      this._walker.on("mutations", this._onMutations);
+    }
+  },
+
+  setNodeFront: function (value, reason = "unknown") {
+    this.reason = reason;
+
+    // If an inlineTextChild text node is being set, then set it's parent instead.
+    let parentNode = value && value.parentNode();
+    if (value && parentNode && parentNode.inlineTextChild === value) {
+      value = parentNode;
+    }
+
+    this._nodeFront = value;
+    this.emit("new-node-front", value, this.reason);
+  },
+
+  get documentFront() {
+    return this._walker.document(this._nodeFront);
+  },
+
+  get nodeFront() {
+    return this._nodeFront;
+  },
+
+  isRoot: function () {
+    return this.isNode() &&
+           this.isConnected() &&
+           this._nodeFront.isDocumentElement;
+  },
+
+  isNode: function () {
+    return !!this._nodeFront;
+  },
+
+  isConnected: function () {
+    let node = this._nodeFront;
+    if (!node || !node.actorID) {
+      return false;
+    }
+
+    while (node) {
+      if (node === this._walker.rootNode) {
+        return true;
+      }
+      node = node.parentNode();
+    }
+    return false;
+  },
+
+  isHTMLNode: function () {
+    let xhtmlNs = "http://www.w3.org/1999/xhtml";
+    return this.isNode() && this.nodeFront.namespaceURI == xhtmlNs;
+  },
+
+  // Node type
+
+  isElementNode: function () {
+    return this.isNode() && this.nodeFront.nodeType == nodeConstants.ELEMENT_NODE;
+  },
+
+  isPseudoElementNode: function () {
+    return this.isNode() && this.nodeFront.isPseudoElement;
+  },
+
+  isAnonymousNode: function () {
+    return this.isNode() && this.nodeFront.isAnonymous;
+  },
+
+  isAttributeNode: function () {
+    return this.isNode() && this.nodeFront.nodeType == nodeConstants.ATTRIBUTE_NODE;
+  },
+
+  isTextNode: function () {
+    return this.isNode() && this.nodeFront.nodeType == nodeConstants.TEXT_NODE;
+  },
+
+  isCDATANode: function () {
+    return this.isNode() && this.nodeFront.nodeType == nodeConstants.CDATA_SECTION_NODE;
+  },
+
+  isEntityRefNode: function () {
+    return this.isNode() &&
+      this.nodeFront.nodeType == nodeConstants.ENTITY_REFERENCE_NODE;
+  },
+
+  isEntityNode: function () {
+    return this.isNode() && this.nodeFront.nodeType == nodeConstants.ENTITY_NODE;
+  },
+
+  isProcessingInstructionNode: function () {
+    return this.isNode() &&
+      this.nodeFront.nodeType == nodeConstants.PROCESSING_INSTRUCTION_NODE;
+  },
+
+  isCommentNode: function () {
+    return this.isNode() &&
+      this.nodeFront.nodeType == nodeConstants.PROCESSING_INSTRUCTION_NODE;
+  },
+
+  isDocumentNode: function () {
+    return this.isNode() && this.nodeFront.nodeType == nodeConstants.DOCUMENT_NODE;
+  },
+
+  /**
+   * @returns true if the selection is the <body> HTML element.
+   */
+  isBodyNode: function () {
+    return this.isHTMLNode() &&
+           this.isConnected() &&
+           this.nodeFront.nodeName === "BODY";
+  },
+
+  /**
+   * @returns true if the selection is the <head> HTML element.
+   */
+  isHeadNode: function () {
+    return this.isHTMLNode() &&
+           this.isConnected() &&
+           this.nodeFront.nodeName === "HEAD";
+  },
+
+  isDocumentTypeNode: function () {
+    return this.isNode() && this.nodeFront.nodeType == nodeConstants.DOCUMENT_TYPE_NODE;
+  },
+
+  isDocumentFragmentNode: function () {
+    return this.isNode() &&
+      this.nodeFront.nodeType == nodeConstants.DOCUMENT_FRAGMENT_NODE;
+  },
+
+  isNotationNode: function () {
+    return this.isNode() && this.nodeFront.nodeType == nodeConstants.NOTATION_NODE;
+  },
+};
diff --git a/devtools/client/framework/sidebar.js b/devtools/client/framework/sidebar.js
new file mode 100644
index 000000000..c27732b5d
--- /dev/null
+++ b/devtools/client/framework/sidebar.js
@@ -0,0 +1,592 @@
+/* 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";
+
+var Services = require("Services");
+var {Task} = require("devtools/shared/task");
+var EventEmitter = require("devtools/shared/event-emitter");
+var Telemetry = require("devtools/client/shared/telemetry");
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+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.
+ * Typically, you'll want the tabbox parameter to be a XUL tabbox like this:
+ *
+ * <tabbox id="inspector-sidebar" handleCtrlTab="false" class="devtools-sidebar-tabs">
+ *   <tabs/>
+ *   <tabpanels flex="1"/>
+ * </tabbox>
+ *
+ * The ToolSidebar API has a method to add new tabs, so the tabs and tabpanels
+ * nodes can be empty. But they can also already contain items before the
+ * ToolSidebar is created.
+ *
+ * Tabs added through the addTab method are only identified by an ID and a URL
+ * which is used as the href of an iframe node that is inserted in the newly
+ * created tabpanel.
+ * Tabs already present before the ToolSidebar is created may contain anything.
+ * However, these tabs must have ID attributes if it is required for the various
+ * methods that accept an ID as argument to work here.
+ *
+ * @param {Node} tabbox
+ *  <tabbox> node;
+ * @param {ToolPanel} panel
+ *  Related ToolPanel instance;
+ * @param {String} uid
+ *  Unique ID
+ * @param {Object} options
+ *  - hideTabstripe: Should the tabs be hidden. Defaults to false
+ *  - showAllTabsMenu: Should a drop-down menu be displayed in case tabs
+ *    become hidden. Defaults to false.
+ *  - disableTelemetry: By default, switching tabs on and off in the sidebar
+ *    will record tool usage in telemetry, pass this option to true to avoid it.
+ *
+ * Events raised:
+ * - new-tab-registered : After a tab has been added via addTab. The tab ID
+ *   is passed with the event. This however, is raised before the tab iframe
+ *   is fully loaded.
+ * - <tabid>-ready : After the tab iframe has been loaded
+ * - <tabid>-selected : After tab <tabid> was selected
+ * - select : Same as above, but for any tab, the ID is passed with the event
+ * - <tabid>-unselected : After tab <tabid> is unselected
+ */
+function ToolSidebar(tabbox, panel, uid, options = {}) {
+  EventEmitter.decorate(this);
+
+  this._tabbox = tabbox;
+  this._uid = uid;
+  this._panelDoc = this._tabbox.ownerDocument;
+  this._toolPanel = panel;
+  this._options = options;
+
+  this._onTabBoxOverflow = this._onTabBoxOverflow.bind(this);
+  this._onTabBoxUnderflow = this._onTabBoxUnderflow.bind(this);
+
+  try {
+    this._width = Services.prefs.getIntPref("devtools.toolsidebar-width." + this._uid);
+  } catch (e) {}
+
+  if (!options.disableTelemetry) {
+    this._telemetry = new Telemetry();
+  }
+
+  this._tabbox.tabpanels.addEventListener("select", this, true);
+
+  this._tabs = new Map();
+
+  // Check for existing tabs in the DOM and add them.
+  this.addExistingTabs();
+
+  if (this._options.hideTabstripe) {
+    this._tabbox.setAttribute("hidetabs", "true");
+  }
+
+  if (this._options.showAllTabsMenu) {
+    this.addAllTabsMenu();
+  }
+
+  this._toolPanel.emit("sidebar-created", this);
+}
+
+exports.ToolSidebar = ToolSidebar;
+
+ToolSidebar.prototype = {
+  TAB_ID_PREFIX: "sidebar-tab-",
+
+  TABPANEL_ID_PREFIX: "sidebar-panel-",
+
+  /**
+   * Add a "…" button at the end of the tabstripe that toggles a dropdown menu
+   * containing the list of all tabs if any become hidden due to lack of room.
+   *
+   * If the ToolSidebar was created with the "showAllTabsMenu" option set to
+   * true, this is already done automatically. If not, you may call this
+   * function at any time to add the menu.
+   */
+  addAllTabsMenu: function () {
+    if (this._allTabsBtn) {
+      return;
+    }
+
+    let tabs = this._tabbox.tabs;
+
+    // Create a container and insert it first in the tabbox
+    let allTabsContainer = this._panelDoc.createElementNS(XULNS, "stack");
+    this._tabbox.insertBefore(allTabsContainer, tabs);
+
+    // Move the tabs inside and make them flex
+    allTabsContainer.appendChild(tabs);
+    tabs.setAttribute("flex", "1");
+
+    // Create the dropdown menu next to the tabs
+    this._allTabsBtn = this._panelDoc.createElementNS(XULNS, "toolbarbutton");
+    this._allTabsBtn.setAttribute("class", "devtools-sidebar-alltabs");
+    this._allTabsBtn.setAttribute("end", "0");
+    this._allTabsBtn.setAttribute("top", "0");
+    this._allTabsBtn.setAttribute("width", "15");
+    this._allTabsBtn.setAttribute("type", "menu");
+    this._allTabsBtn.setAttribute("tooltiptext",
+      L10N.getStr("sidebar.showAllTabs.tooltip"));
+    this._allTabsBtn.setAttribute("hidden", "true");
+    allTabsContainer.appendChild(this._allTabsBtn);
+
+    let menuPopup = this._panelDoc.createElementNS(XULNS, "menupopup");
+    this._allTabsBtn.appendChild(menuPopup);
+
+    // Listening to tabs overflow event to toggle the alltabs button
+    tabs.addEventListener("overflow", this._onTabBoxOverflow, false);
+    tabs.addEventListener("underflow", this._onTabBoxUnderflow, false);
+
+    // Add menuitems to the alltabs menu if there are already tabs in the
+    // sidebar
+    for (let [id, tab] of this._tabs) {
+      let item = this._addItemToAllTabsMenu(id, tab, {
+        selected: tab.hasAttribute("selected")
+      });
+      if (tab.hidden) {
+        item.hidden = true;
+      }
+    }
+  },
+
+  removeAllTabsMenu: function () {
+    if (!this._allTabsBtn) {
+      return;
+    }
+
+    let tabs = this._tabbox.tabs;
+
+    tabs.removeEventListener("overflow", this._onTabBoxOverflow, false);
+    tabs.removeEventListener("underflow", this._onTabBoxUnderflow, false);
+
+    // Moving back the tabs as a first child of the tabbox
+    this._tabbox.insertBefore(tabs, this._tabbox.tabpanels);
+    this._tabbox.querySelector("stack").remove();
+
+    this._allTabsBtn = null;
+  },
+
+  _onTabBoxOverflow: function () {
+    this._allTabsBtn.removeAttribute("hidden");
+  },
+
+  _onTabBoxUnderflow: function () {
+    this._allTabsBtn.setAttribute("hidden", "true");
+  },
+
+  /**
+   * Add an item in the allTabs menu for a given tab.
+   */
+  _addItemToAllTabsMenu: function (id, tab, options) {
+    if (!this._allTabsBtn) {
+      return;
+    }
+
+    let item = this._panelDoc.createElementNS(XULNS, "menuitem");
+    let idPrefix = "sidebar-alltabs-item-";
+    item.setAttribute("id", idPrefix + id);
+    item.setAttribute("label", tab.getAttribute("label"));
+    item.setAttribute("type", "checkbox");
+    if (options.selected) {
+      item.setAttribute("checked", true);
+    }
+    // The auto-checking of menuitems in this menu doesn't work, so let's do
+    // it manually
+    item.setAttribute("autocheck", false);
+
+    let menu = this._allTabsBtn.querySelector("menupopup");
+    if (options.insertBefore) {
+      let referenceItem = menu.querySelector(`#${idPrefix}${options.insertBefore}`);
+      menu.insertBefore(item, referenceItem);
+    } else {
+      menu.appendChild(item);
+    }
+
+    item.addEventListener("click", () => {
+      this._tabbox.selectedTab = tab;
+    }, false);
+
+    tab.allTabsMenuItem = item;
+
+    return item;
+  },
+
+  /**
+   * 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} id The unique id for this tab.
+   * @param {string} url The URL of the document to load in this new tab.
+   * @param {Object} options A set of options for this new tab:
+   * - {Boolean} selected Set to true to make this new tab selected by default.
+   * - {String} insertBefore By default, the new tab is appended at the end of the
+   * tabbox, pass the ID of an existing tab to insert it before that tab instead.
+   */
+  addTab: function (id, url, options = {}) {
+    let iframe = this._panelDoc.createElementNS(XULNS, "iframe");
+    iframe.className = "iframe-" + id;
+    iframe.setAttribute("flex", "1");
+    iframe.setAttribute("src", url);
+    iframe.tooltip = "aHTMLTooltip";
+
+    // Creating the tab and adding it to the tabbox
+    let tab = this._panelDoc.createElementNS(XULNS, "tab");
+
+    tab.setAttribute("id", this.TAB_ID_PREFIX + id);
+    tab.setAttribute("crop", "end");
+    // Avoid showing "undefined" while the tab is loading
+    tab.setAttribute("label", "");
+
+    if (options.insertBefore) {
+      let referenceTab = this.getTab(options.insertBefore);
+      this._tabbox.tabs.insertBefore(tab, referenceTab);
+    } else {
+      this._tabbox.tabs.appendChild(tab);
+    }
+
+    // Add the tab to the allTabs menu if exists
+    let allTabsItem = this._addItemToAllTabsMenu(id, tab, options);
+
+    let onIFrameLoaded = (event) => {
+      let doc = event.target;
+      let win = doc.defaultView;
+      tab.setAttribute("label", doc.title);
+
+      if (allTabsItem) {
+        allTabsItem.setAttribute("label", doc.title);
+      }
+
+      iframe.removeEventListener("load", onIFrameLoaded, true);
+      if ("setPanel" in win) {
+        win.setPanel(this._toolPanel, iframe);
+      }
+      this.emit(id + "-ready");
+    };
+
+    iframe.addEventListener("load", onIFrameLoaded, true);
+
+    let tabpanel = this._panelDoc.createElementNS(XULNS, "tabpanel");
+    tabpanel.setAttribute("id", this.TABPANEL_ID_PREFIX + id);
+    tabpanel.appendChild(iframe);
+
+    if (options.insertBefore) {
+      let referenceTabpanel = this.getTabPanel(options.insertBefore);
+      this._tabbox.tabpanels.insertBefore(tabpanel, referenceTabpanel);
+    } else {
+      this._tabbox.tabpanels.appendChild(tabpanel);
+    }
+
+    this._tooltip = this._panelDoc.createElementNS(XULNS, "tooltip");
+    this._tooltip.id = "aHTMLTooltip";
+    tabpanel.appendChild(this._tooltip);
+    this._tooltip.page = true;
+
+    tab.linkedPanel = this.TABPANEL_ID_PREFIX + id;
+
+    // We store the index of this tab.
+    this._tabs.set(id, tab);
+
+    if (options.selected) {
+      this._selectTabSoon(id);
+    }
+
+    this.emit("new-tab-registered", id);
+  },
+
+  untitledTabsIndex: 0,
+
+  /**
+   * Search for existing tabs in the markup that aren't know yet and add them.
+   */
+  addExistingTabs: function () {
+    let knownTabs = [...this._tabs.values()];
+
+    for (let tab of this._tabbox.tabs.querySelectorAll("tab")) {
+      if (knownTabs.indexOf(tab) !== -1) {
+        continue;
+      }
+
+      // Find an ID for this unknown tab
+      let id = tab.getAttribute("id") || "untitled-tab-" + (this.untitledTabsIndex++);
+
+      // If the existing tab contains the tab ID prefix, extract the ID of the
+      // tab
+      if (id.startsWith(this.TAB_ID_PREFIX)) {
+        id = id.split(this.TAB_ID_PREFIX).pop();
+      }
+
+      // Register the tab
+      this._tabs.set(id, tab);
+      this.emit("new-tab-registered", id);
+    }
+  },
+
+  /**
+   * Remove an existing tab.
+   * @param {String} tabId The ID of the tab that was used to register it, or
+   * the tab id attribute value if the tab existed before the sidebar got created.
+   * @param {String} tabPanelId Optional. If provided, this ID will be used
+   * instead of the tabId to retrieve and remove the corresponding <tabpanel>
+   */
+  removeTab: Task.async(function* (tabId, tabPanelId) {
+    // Remove the tab if it can be found
+    let tab = this.getTab(tabId);
+    if (!tab) {
+      return;
+    }
+
+    let win = this.getWindowForTab(tabId);
+    if (win && ("destroy" in win)) {
+      yield win.destroy();
+    }
+
+    tab.remove();
+
+    // Also remove the tabpanel
+    let panel = this.getTabPanel(tabPanelId || tabId);
+    if (panel) {
+      panel.remove();
+    }
+
+    this._tabs.delete(tabId);
+    this.emit("tab-unregistered", tabId);
+  }),
+
+  /**
+   * Show or hide a specific tab.
+   * @param {Boolean} isVisible True to show the tab/tabpanel, False to hide it.
+   * @param {String} id The ID of the tab to be hidden.
+   */
+  toggleTab: function (isVisible, id) {
+    // Toggle the tab.
+    let tab = this.getTab(id);
+    if (!tab) {
+      return;
+    }
+    tab.hidden = !isVisible;
+
+    // Toggle the item in the allTabs menu.
+    if (this._allTabsBtn) {
+      this._allTabsBtn.querySelector("#sidebar-alltabs-item-" + id).hidden = !isVisible;
+    }
+  },
+
+  /**
+   * Select a specific tab.
+   */
+  select: function (id) {
+    let tab = this.getTab(id);
+    if (tab) {
+      this._tabbox.selectedTab = tab;
+    }
+  },
+
+  /**
+   * Hack required to select a tab right after it was created.
+   *
+   * @param  {String} id
+   *         The sidebar tab id to select.
+   */
+  _selectTabSoon: function (id) {
+    this._panelDoc.defaultView.setTimeout(() => {
+      this.select(id);
+    }, 0);
+  },
+
+  /**
+   * Return the id of the selected tab.
+   */
+  getCurrentTabID: function () {
+    let currentID = null;
+    for (let [id, tab] of this._tabs) {
+      if (this._tabbox.tabs.selectedItem == tab) {
+        currentID = id;
+        break;
+      }
+    }
+    return currentID;
+  },
+
+  /**
+   * Returns the requested tab panel based on the id.
+   * @param {String} id
+   * @return {DOMNode}
+   */
+  getTabPanel: function (id) {
+    // Search with and without the ID prefix as there might have been existing
+    // tabpanels by the time the sidebar got created
+    return this._tabbox.tabpanels.querySelector("#" + this.TABPANEL_ID_PREFIX + id + ", #" + id);
+  },
+
+  /**
+   * Return the tab based on the provided id, if one was registered with this id.
+   * @param {String} id
+   * @return {DOMNode}
+   */
+  getTab: function (id) {
+    return this._tabs.get(id);
+  },
+
+  /**
+   * Event handler.
+   */
+  handleEvent: function (event) {
+    if (event.type !== "select" || this._destroyed) {
+      return;
+    }
+
+    if (this._currentTool == this.getCurrentTabID()) {
+      // Tool hasn't changed.
+      return;
+    }
+
+    let previousTool = this._currentTool;
+    this._currentTool = this.getCurrentTabID();
+    if (previousTool) {
+      if (this._telemetry) {
+        this._telemetry.toolClosed(previousTool);
+      }
+      this.emit(previousTool + "-unselected");
+    }
+
+    if (this._telemetry) {
+      this._telemetry.toolOpened(this._currentTool);
+    }
+
+    this.emit(this._currentTool + "-selected");
+    this.emit("select", this._currentTool);
+
+    // Handlers for "select"/"...-selected"/"...-unselected" events might have
+    // destroyed the sidebar in the meantime.
+    if (this._destroyed) {
+      return;
+    }
+
+    // Handle menuitem selection if the allTabsMenu is there by unchecking all
+    // items except the selected one.
+    let tab = this._tabbox.selectedTab;
+    if (tab.allTabsMenuItem) {
+      for (let otherItem of this._allTabsBtn.querySelectorAll("menuitem")) {
+        otherItem.removeAttribute("checked");
+      }
+      tab.allTabsMenuItem.setAttribute("checked", true);
+    }
+  },
+
+  /**
+   * Toggle sidebar's visibility state.
+   */
+  toggle: function () {
+    if (this._tabbox.hasAttribute("hidden")) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  },
+
+  /**
+   * Show the sidebar.
+   *
+   * @param  {String} id
+   *         The sidebar tab id to select.
+   */
+  show: function (id) {
+    if (this._width) {
+      this._tabbox.width = this._width;
+    }
+    this._tabbox.removeAttribute("hidden");
+
+    // If an id is given, select the corresponding sidebar tab and record the
+    // tool opened.
+    if (id) {
+      this._currentTool = id;
+
+      if (this._telemetry) {
+        this._telemetry.toolOpened(this._currentTool);
+      }
+
+      this._selectTabSoon(id);
+    }
+
+    this.emit("show");
+  },
+
+  /**
+   * Show the sidebar.
+   */
+  hide: function () {
+    Services.prefs.setIntPref("devtools.toolsidebar-width." + this._uid, this._tabbox.width);
+    this._tabbox.setAttribute("hidden", "true");
+    this._panelDoc.activeElement.blur();
+
+    this.emit("hide");
+  },
+
+  /**
+   * Return the window containing the tab content.
+   */
+  getWindowForTab: function (id) {
+    if (!this._tabs.has(id)) {
+      return null;
+    }
+
+    // Get the tabpanel and make sure it contains an iframe
+    let panel = this.getTabPanel(id);
+    if (!panel || !panel.firstChild || !panel.firstChild.contentWindow) {
+      return;
+    }
+    return panel.firstChild.contentWindow;
+  },
+
+  /**
+   * Clean-up.
+   */
+  destroy: Task.async(function* () {
+    if (this._destroyed) {
+      return;
+    }
+    this._destroyed = true;
+
+    Services.prefs.setIntPref("devtools.toolsidebar-width." + this._uid, this._tabbox.width);
+
+    if (this._allTabsBtn) {
+      this.removeAllTabsMenu();
+    }
+
+    this._tabbox.tabpanels.removeEventListener("select", this, true);
+
+    // Note that we check for the existence of this._tabbox.tabpanels at each
+    // step as the container window may have been closed by the time one of the
+    // panel's destroy promise resolves.
+    while (this._tabbox.tabpanels && this._tabbox.tabpanels.hasChildNodes()) {
+      let panel = this._tabbox.tabpanels.firstChild;
+      let win = panel.firstChild.contentWindow;
+      if (win && ("destroy" in win)) {
+        yield win.destroy();
+      }
+      panel.remove();
+    }
+
+    while (this._tabbox.tabs && this._tabbox.tabs.hasChildNodes()) {
+      this._tabbox.tabs.removeChild(this._tabbox.tabs.firstChild);
+    }
+
+    if (this._currentTool && this._telemetry) {
+      this._telemetry.toolClosed(this._currentTool);
+    }
+
+    this._toolPanel.emit("sidebar-destroyed", this);
+
+    this._tabs = null;
+    this._tabbox = null;
+    this._panelDoc = null;
+    this._toolPanel = null;
+  })
+};
diff --git a/devtools/client/framework/source-map-service.js b/devtools/client/framework/source-map-service.js
new file mode 100644
index 000000000..838adc392
--- /dev/null
+++ b/devtools/client/framework/source-map-service.js
@@ -0,0 +1,209 @@
+/* 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 { Task } = require("devtools/shared/task");
+const EventEmitter = require("devtools/shared/event-emitter");
+const { LocationStore, serialize, deserialize } = require("./location-store");
+
+/**
+ * A manager class that wraps a TabTarget and listens to source changes
+ * from source maps and resolves non-source mapped locations to the source mapped
+ * versions and back and forth, and creating smart elements with a location that
+ * auto-update when the source changes (from pretty printing, source maps loading, etc)
+ *
+ * @param {TabTarget} target
+ */
+
+function SourceMapService(target) {
+  this._target = target;
+  this._locationStore = new LocationStore();
+  this._isNotSourceMapped = new Map();
+
+  EventEmitter.decorate(this);
+
+  this._onSourceUpdated = this._onSourceUpdated.bind(this);
+  this._resolveLocation = this._resolveLocation.bind(this);
+  this._resolveAndUpdate = this._resolveAndUpdate.bind(this);
+  this.subscribe = this.subscribe.bind(this);
+  this.unsubscribe = this.unsubscribe.bind(this);
+  this.reset = this.reset.bind(this);
+  this.destroy = this.destroy.bind(this);
+
+  target.on("source-updated", this._onSourceUpdated);
+  target.on("navigate", this.reset);
+  target.on("will-navigate", this.reset);
+}
+
+/**
+ * Clears the store containing the cached promised locations
+ */
+SourceMapService.prototype.reset = function () {
+  // Guard to prevent clearing the store when it is not initialized yet.
+  if (!this._locationStore) {
+    return;
+  }
+  this._locationStore.clear();
+  this._isNotSourceMapped.clear();
+};
+
+SourceMapService.prototype.destroy = function () {
+  this.reset();
+  this._target.off("source-updated", this._onSourceUpdated);
+  this._target.off("navigate", this.reset);
+  this._target.off("will-navigate", this.reset);
+  this._target.off("close", this.destroy);
+  this._target = this._locationStore = this._isNotSourceMapped = null;
+};
+
+/**
+ * Sets up listener for the callback to update the FrameView
+ * and tries to resolve location, if it is source-mappable
+ * @param location
+ * @param callback
+ */
+SourceMapService.prototype.subscribe = function (location, callback) {
+  // A valid candidate location for source-mapping should have a url and line.
+  // Abort if there's no `url`, which means it's unsourcemappable anyway,
+  // like an eval script.
+  // From previous attempts to source-map locations, we also determine if a location
+  // is not source-mapped.
+  if (!location.url || !location.line || this._isNotSourceMapped.get(location.url)) {
+    return;
+  }
+  this.on(serialize(location), callback);
+  this._locationStore.set(location);
+  this._resolveAndUpdate(location);
+};
+
+/**
+ * Removes the listener for the location and clears cached locations
+ * @param location
+ * @param callback
+ */
+SourceMapService.prototype.unsubscribe = function (location, callback) {
+  this.off(serialize(location), callback);
+  // Check to see if the store exists before attempting to clear a location
+  // Sometimes un-subscribe happens during the destruction cascades and this
+  // condition is to protect against that. Could be looked into in the future.
+  if (!this._locationStore) {
+    return;
+  }
+  this._locationStore.clearByURL(location.url);
+};
+
+/**
+ * Tries to resolve the location and if successful,
+ * emits the resolved location
+ * @param location
+ * @private
+ */
+SourceMapService.prototype._resolveAndUpdate = function (location) {
+  this._resolveLocation(location).then(resolvedLocation => {
+    // We try to source map the first console log to initiate the source-updated
+    // event from target. The isSameLocation check is to make sure we don't update
+    // the frame, if the location is not source-mapped.
+    if (resolvedLocation && !isSameLocation(location, resolvedLocation)) {
+      this.emit(serialize(location), location, resolvedLocation);
+    }
+  });
+};
+
+/**
+ * Checks if there is existing promise to resolve location, if so returns cached promise
+ * if not, tries to resolve location and returns a promised location
+ * @param location
+ * @return Promise<Object>
+ * @private
+ */
+SourceMapService.prototype._resolveLocation = Task.async(function* (location) {
+  let resolvedLocation;
+  const cachedLocation = this._locationStore.get(location);
+  if (cachedLocation) {
+    resolvedLocation = cachedLocation;
+  } else {
+    const promisedLocation = resolveLocation(this._target, location);
+    if (promisedLocation) {
+      this._locationStore.set(location, promisedLocation);
+      resolvedLocation = promisedLocation;
+    }
+  }
+  return resolvedLocation;
+});
+
+/**
+ * Checks if the `source-updated` event is fired from the target.
+ * Checks to see if location store has the source url in its cache,
+ * if so, tries to update each stale location in the store.
+ * Determines if the source should be source-mapped or not.
+ * @param _
+ * @param sourceEvent
+ * @private
+ */
+SourceMapService.prototype._onSourceUpdated = function (_, sourceEvent) {
+  let { type, source } = sourceEvent;
+
+  // If we get a new source, and it's not a source map, abort;
+  // we can have no actionable updates as this is just a new normal source.
+  // Check Source Actor for sourceMapURL property (after Firefox 48)
+  // If not present, utilize isSourceMapped and isPrettyPrinted properties
+  // to estimate if a source is not source-mapped.
+  const isNotSourceMapped = !(source.sourceMapURL ||
+    source.isSourceMapped || source.isPrettyPrinted);
+  if (type === "newSource" && isNotSourceMapped) {
+    this._isNotSourceMapped.set(source.url, true);
+    return;
+  }
+  let sourceUrl = null;
+  if (source.generatedUrl && source.isSourceMapped) {
+    sourceUrl = source.generatedUrl;
+  } else if (source.url && source.isPrettyPrinted) {
+    sourceUrl = source.url;
+  }
+  const locationsToResolve = this._locationStore.getByURL(sourceUrl);
+  if (locationsToResolve.length) {
+    this._locationStore.clearByURL(sourceUrl);
+    for (let location of locationsToResolve) {
+      this._resolveAndUpdate(deserialize(location));
+    }
+  }
+};
+
+exports.SourceMapService = SourceMapService;
+
+/**
+ * Take a TabTarget and a location, containing a `url`, `line`, and `column`, resolve
+ * the location to the latest location (so a source mapped location, or if pretty print
+ * status has been updated)
+ *
+ * @param {TabTarget} target
+ * @param {Object} location
+ * @return {Promise<Object>}
+ */
+function resolveLocation(target, location) {
+  return Task.spawn(function* () {
+    let newLocation = yield target.resolveLocation({
+      url: location.url,
+      line: location.line,
+      column: location.column || Infinity
+    });
+    // Source or mapping not found, so don't do anything
+    if (newLocation.error) {
+      return null;
+    }
+    return newLocation;
+  });
+}
+
+/**
+ * Returns true if the original location and resolved location are the same
+ * @param location
+ * @param resolvedLocation
+ * @returns {boolean}
+ */
+function isSameLocation(location, resolvedLocation) {
+  return location.url === resolvedLocation.url &&
+    location.line === resolvedLocation.line &&
+    location.column === resolvedLocation.column;
+}
diff --git a/devtools/client/framework/source-map-util.js b/devtools/client/framework/source-map-util.js
new file mode 100644
index 000000000..0bb25b3df
--- /dev/null
+++ b/devtools/client/framework/source-map-util.js
@@ -0,0 +1,20 @@
+function originalToGeneratedId(originalId) {
+  const match = originalId.match(/(.*)\/originalSource/);
+  return match ? match[1] : "";
+}
+
+function generatedToOriginalId(generatedId, url) {
+  return generatedId + "/originalSource-" + url.replace(/ \//, '-');
+}
+
+function isOriginalId(id) {
+  return !!id.match(/\/originalSource/);
+}
+
+function isGeneratedId(id) {
+  return !isOriginalId(id);
+}
+
+module.exports = {
+  originalToGeneratedId, generatedToOriginalId, isOriginalId, isGeneratedId
+};
diff --git a/devtools/client/framework/source-map-worker.js b/devtools/client/framework/source-map-worker.js
new file mode 100644
index 000000000..c68732f38
--- /dev/null
+++ b/devtools/client/framework/source-map-worker.js
@@ -0,0 +1,220 @@
+const { fetch, assert } = require("devtools/shared/DevToolsUtils");
+const { joinURI } = require("devtools/shared/path");
+const path = require("sdk/fs/path");
+const { SourceMapConsumer, SourceMapGenerator } = require("source-map");
+const { isJavaScript } = require("./source");
+const {
+  originalToGeneratedId,
+  generatedToOriginalId,
+  isGeneratedId,
+  isOriginalId
+} = require("./source-map-util");
+
+let sourceMapRequests = new Map();
+let sourceMapsEnabled = false;
+
+function clearSourceMaps() {
+  sourceMapRequests.clear();
+}
+
+function enableSourceMaps() {
+  sourceMapsEnabled = true;
+}
+
+function _resolveSourceMapURL(source) {
+  const { url = "", sourceMapURL = "" } = source;
+  if (path.isURL(sourceMapURL) || url == "") {
+    // If it's already a full URL or the source doesn't have a URL,
+    // don't resolve anything.
+    return sourceMapURL;
+  } else if (path.isAbsolute(sourceMapURL)) {
+    // If it's an absolute path, it should be resolved relative to the
+    // host of the source.
+    const { protocol = "", host = "" } = parse(url);
+    return `${protocol}//${host}${sourceMapURL}`;
+  }
+  // Otherwise, it's a relative path and should be resolved relative
+  // to the source.
+  return dirname(url) + "/" + sourceMapURL;
+}
+
+/**
+ * Sets the source map's sourceRoot to be relative to the source map url.
+ * @memberof utils/source-map-worker
+ * @static
+ */
+function _setSourceMapRoot(sourceMap, absSourceMapURL, source) {
+  // No need to do this fiddling if we won't be fetching any sources over the
+  // wire.
+  if (sourceMap.hasContentsOfAllSources()) {
+    return;
+  }
+
+  const base = dirname(
+    (absSourceMapURL.indexOf("data:") === 0 && source.url) ?
+      source.url :
+      absSourceMapURL
+  );
+
+  if (sourceMap.sourceRoot) {
+    sourceMap.sourceRoot = joinURI(base, sourceMap.sourceRoot);
+  } else {
+    sourceMap.sourceRoot = base;
+  }
+
+  return sourceMap;
+}
+
+function _getSourceMap(generatedSourceId)
+    : ?Promise<SourceMapConsumer> {
+  return sourceMapRequests.get(generatedSourceId);
+}
+
+async function _resolveAndFetch(generatedSource) : SourceMapConsumer {
+  // Fetch the sourcemap over the network and create it.
+  const sourceMapURL = _resolveSourceMapURL(generatedSource);
+  const fetched = await fetch(
+    sourceMapURL, { loadFromCache: false }
+  );
+
+  // Create the source map and fix it up.
+  const map = new SourceMapConsumer(fetched.content);
+  _setSourceMapRoot(map, sourceMapURL, generatedSource);
+  return map;
+}
+
+function _fetchSourceMap(generatedSource) {
+  const existingRequest = sourceMapRequests.get(generatedSource.id);
+  if (existingRequest) {
+    // If it has already been requested, return the request. Make sure
+    // to do this even if sourcemapping is turned off, because
+    // pretty-printing uses sourcemaps.
+    //
+    // An important behavior here is that if it's in the middle of
+    // requesting it, all subsequent calls will block on the initial
+    // request.
+    return existingRequest;
+  } else if (!generatedSource.sourceMapURL || !sourceMapsEnabled) {
+    return Promise.resolve(null);
+  }
+
+  // Fire off the request, set it in the cache, and return it.
+  // Suppress any errors and just return null (ignores bogus
+  // sourcemaps).
+  const req = _resolveAndFetch(generatedSource).catch(() => null);
+  sourceMapRequests.set(generatedSource.id, req);
+  return req;
+}
+
+async function getOriginalURLs(generatedSource) {
+  const map = await _fetchSourceMap(generatedSource);
+  return map && map.sources;
+}
+
+async function getGeneratedLocation(location: Location, originalSource: Source)
+    : Promise<Location> {
+  if (!isOriginalId(location.sourceId)) {
+    return location;
+  }
+
+  const generatedSourceId = originalToGeneratedId(location.sourceId);
+  const map = await _getSourceMap(generatedSourceId);
+  if (!map) {
+    return location;
+  }
+
+  const { line, column } = map.generatedPositionFor({
+    source: originalSource.url,
+    line: location.line,
+    column: location.column == null ? 0 : location.column
+  });
+
+  return {
+    sourceId: generatedSourceId,
+    line: line,
+    // Treat 0 as no column so that line breakpoints work correctly.
+    column: column === 0 ? undefined : column
+  };
+}
+
+async function getOriginalLocation(location) {
+  if (!isGeneratedId(location.sourceId)) {
+    return location;
+  }
+
+  const map = await _getSourceMap(location.sourceId);
+  if (!map) {
+    return location;
+  }
+
+  const { source: url, line, column } = map.originalPositionFor({
+    line: location.line,
+    column: location.column == null ? Infinity : location.column
+  });
+
+  if (url == null) {
+    // No url means the location didn't map.
+    return location;
+  }
+
+  return {
+    sourceId: generatedToOriginalId(location.sourceId, url),
+    line,
+    column
+  };
+}
+
+async function getOriginalSourceText(originalSource) {
+  assert(isOriginalId(originalSource.id),
+         "Source is not an original source");
+
+  const generatedSourceId = originalToGeneratedId(originalSource.id);
+  const map = await _getSourceMap(generatedSourceId);
+  if (!map) {
+    return null;
+  }
+
+  let text = map.sourceContentFor(originalSource.url);
+  if (!text) {
+    text = (await fetch(
+      originalSource.url, { loadFromCache: false }
+    )).content;
+  }
+
+  return {
+    text,
+    contentType: isJavaScript(originalSource.url || "") ?
+      "text/javascript" :
+      "text/plain"
+  };
+}
+
+function applySourceMap(generatedId, url, code, mappings) {
+  const generator = new SourceMapGenerator({ file: url });
+  mappings.forEach(mapping => generator.addMapping(mapping));
+  generator.setSourceContent(url, code);
+
+  const map = SourceMapConsumer(generator.toJSON());
+  sourceMapRequests.set(generatedId, Promise.resolve(map));
+}
+
+const publicInterface = {
+  getOriginalURLs,
+  getGeneratedLocation,
+  getOriginalLocation,
+  getOriginalSourceText,
+  enableSourceMaps,
+  applySourceMap,
+  clearSourceMaps
+};
+
+self.onmessage = function(msg) {
+  const { id, method, args } = msg.data;
+  const response = publicInterface[method].apply(undefined, args);
+  if (response instanceof Promise) {
+    response.then(val => self.postMessage({ id, response: val }),
+                  err => self.postMessage({ id, error: err }));
+  } else {
+    self.postMessage({ id, response });
+  }
+};
diff --git a/devtools/client/framework/source-map.js b/devtools/client/framework/source-map.js
new file mode 100644
index 000000000..7c6805c85
--- /dev/null
+++ b/devtools/client/framework/source-map.js
@@ -0,0 +1,84 @@
+// @flow
+
+const {
+  originalToGeneratedId,
+  generatedToOriginalId,
+  isGeneratedId,
+  isOriginalId
+} = require("./source-map-util");
+
+function workerTask(worker, method) {
+  return function(...args: any) {
+    return new Promise((resolve, reject) => {
+      const id = msgId++;
+      worker.postMessage({ id, method, args });
+
+      const listener = ({ data: result }) => {
+        if (result.id !== id) {
+          return;
+        }
+
+        worker.removeEventListener("message", listener);
+        if (result.error) {
+          reject(result.error);
+        } else {
+          resolve(result.response);
+        }
+      };
+
+      worker.addEventListener("message", listener);
+    });
+  };
+}
+
+let sourceMapWorker;
+function restartWorker() {
+  if (sourceMapWorker) {
+    sourceMapWorker.terminate();
+  }
+  sourceMapWorker = new Worker(
+    "resource://devtools/client/framework/source-map-worker.js"
+  );
+
+  if (Services.prefs.getBoolPref("devtools.debugger.client-source-maps-enabled")) {
+    sourceMapWorker.postMessage({ id: 0, method: "enableSourceMaps" });
+  }
+}
+restartWorker();
+
+function destroyWorker() {
+  if (sourceMapWorker) {
+    sourceMapWorker.terminate();
+    sourceMapWorker = null;
+  }
+}
+
+function shouldSourceMap() {
+  return Services.prefs.getBoolPref("devtools.debugger.client-source-maps-enabled");
+}
+
+const getOriginalURLs = workerTask(sourceMapWorker, "getOriginalURLs");
+const getGeneratedLocation = workerTask(sourceMapWorker,
+                                        "getGeneratedLocation");
+const getOriginalLocation = workerTask(sourceMapWorker,
+                                       "getOriginalLocation");
+const getOriginalSourceText = workerTask(sourceMapWorker,
+                                         "getOriginalSourceText");
+const applySourceMap = workerTask(sourceMapWorker, "applySourceMap");
+const clearSourceMaps = workerTask(sourceMapWorker, "clearSourceMaps");
+
+module.exports = {
+  originalToGeneratedId,
+  generatedToOriginalId,
+  isGeneratedId,
+  isOriginalId,
+
+  getOriginalURLs,
+  getGeneratedLocation,
+  getOriginalLocation,
+  getOriginalSourceText,
+  applySourceMap,
+  clearSourceMaps,
+  destroyWorker,
+  shouldSourceMap
+};
diff --git a/devtools/client/framework/target-from-url.js b/devtools/client/framework/target-from-url.js
new file mode 100644
index 000000000..4e2c30377
--- /dev/null
+++ b/devtools/client/framework/target-from-url.js
@@ -0,0 +1,120 @@
+/* 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, Ci } = require("chrome");
+
+const { TargetFactory } = require("devtools/client/framework/target");
+const { DebuggerServer } = require("devtools/server/main");
+const { DebuggerClient } = require("devtools/shared/client/main");
+const { Task } = require("devtools/shared/task");
+
+/**
+ * Construct a Target for a given URL object having various query parameters:
+ *
+ * host:
+ *    {String} The hostname or IP address to connect to.
+ * port:
+ *    {Number} The TCP port to connect to, to use with `host` argument.
+ * ws:
+ *    {Boolean} If true, connect via websocket instread of regular TCP connection.
+ *
+ * type: tab, process
+ *    {String} The type of target to connect to.  Currently tabs and processes are supported types.
+ *
+ * If type="tab":
+ * id:
+ *    {Number} the tab outerWindowID
+ * chrome: Optional
+ *    {Boolean} Force the creation of a chrome target. Gives more privileges to the tab
+ *    actor. Allows chrome execution in the webconsole and see chrome files in
+ *    the debugger. (handy when contributing to firefox)
+ *
+ * If type="process":
+ * id:
+ *    {Number} the process id to debug. Default to 0, which is the parent process.
+ *
+ * @param {URL} url
+ *        The url to fetch query params from.
+ *
+ * @return A target object
+ */
+exports.targetFromURL = Task.async(function* (url) {
+  let params = url.searchParams;
+  let type = params.get("type");
+  if (!type) {
+    throw new Error("targetFromURL, missing type parameter");
+  }
+  let id = params.get("id");
+  // Allows to spawn a chrome enabled target for any context
+  // (handy to debug chrome stuff in a child process)
+  let chrome = params.has("chrome");
+
+  let client = yield createClient(params);
+
+  yield client.connect();
+
+  let form, isTabActor;
+  if (type === "tab") {
+    // Fetch target for a remote tab
+    id = parseInt(id);
+    if (isNaN(id)) {
+      throw new Error("targetFromURL, wrong tab id:'" + id + "', should be a number");
+    }
+    try {
+      let response = yield client.getTab({ outerWindowID: id });
+      form = response.tab;
+    } catch (ex) {
+      if (ex.error == "noTab") {
+        throw new Error("targetFromURL, tab with outerWindowID:'" + id + "' doesn't exist");
+      }
+      throw ex;
+    }
+  } else if (type == "process") {
+    // Fetch target for a remote chrome actor
+    DebuggerServer.allowChromeProcess = true;
+    try {
+      id = parseInt(id);
+      if (isNaN(id)) {
+        id = 0;
+      }
+      let response = yield client.getProcess(id);
+      form = response.form;
+      chrome = true;
+      if (id != 0) {
+        // Child process are not exposing tab actors and only support debugger+console
+        isTabActor = false;
+      }
+    } catch (ex) {
+      if (ex.error == "noProcess") {
+        throw new Error("targetFromURL, process with id:'" + id + "' doesn't exist");
+      }
+      throw ex;
+    }
+  } else {
+    throw new Error("targetFromURL, unsupported type='" + type + "' parameter");
+  }
+
+  return TargetFactory.forRemoteTab({ client, form, chrome, isTabActor });
+});
+
+function* createClient(params) {
+  let host = params.get("host");
+  let port = params.get("port");
+  let webSocket = !!params.get("ws");
+
+  let transport;
+  if (port) {
+    transport = yield DebuggerClient.socketConnect({ host, port, webSocket });
+  } else {
+    // Setup a server if we don't have one already running
+    if (!DebuggerServer.initialized) {
+      DebuggerServer.init();
+      DebuggerServer.addBrowserActors();
+    }
+    transport = DebuggerServer.connectPipe()
+  }
+  return new DebuggerClient(transport);
+}
diff --git a/devtools/client/framework/target.js b/devtools/client/framework/target.js
new file mode 100644
index 000000000..30a720b7e
--- /dev/null
+++ b/devtools/client/framework/target.js
@@ -0,0 +1,825 @@
+/* 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 { Ci } = require("chrome");
+const promise = require("promise");
+const defer = require("devtools/shared/defer");
+const EventEmitter = require("devtools/shared/event-emitter");
+const Services = require("Services");
+const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
+
+loader.lazyRequireGetter(this, "DebuggerServer", "devtools/server/main", true);
+loader.lazyRequireGetter(this, "DebuggerClient",
+  "devtools/shared/client/main", true);
+loader.lazyRequireGetter(this, "gDevTools",
+  "devtools/client/framework/devtools", true);
+
+const targets = new WeakMap();
+const promiseTargets = new WeakMap();
+
+/**
+ * Functions for creating Targets
+ */
+const TargetFactory = exports.TargetFactory = {
+  /**
+   * Construct a Target
+   * @param {XULTab} tab
+   *        The tab to use in creating a new target.
+   *
+   * @return A target object
+   */
+  forTab: function (tab) {
+    let target = targets.get(tab);
+    if (target == null) {
+      target = new TabTarget(tab);
+      targets.set(tab, target);
+    }
+    return target;
+  },
+
+  /**
+   * Return a promise of a Target for a remote tab.
+   * @param {Object} options
+   *        The options object has the following properties:
+   *        {
+   *          form: the remote protocol form of a tab,
+   *          client: a DebuggerClient instance
+   *                  (caller owns this and is responsible for closing),
+   *          chrome: true if the remote target is the whole process
+   *        }
+   *
+   * @return A promise of a target object
+   */
+  forRemoteTab: function (options) {
+    let targetPromise = promiseTargets.get(options);
+    if (targetPromise == null) {
+      let target = new TabTarget(options);
+      targetPromise = target.makeRemote().then(() => target);
+      promiseTargets.set(options, targetPromise);
+    }
+    return targetPromise;
+  },
+
+  forWorker: function (workerClient) {
+    let target = targets.get(workerClient);
+    if (target == null) {
+      target = new WorkerTarget(workerClient);
+      targets.set(workerClient, target);
+    }
+    return target;
+  },
+
+  /**
+   * Creating a target for a tab that is being closed is a problem because it
+   * allows a leak as a result of coming after the close event which normally
+   * clears things up. This function allows us to ask if there is a known
+   * target for a tab without creating a target
+   * @return true/false
+   */
+  isKnownTab: function (tab) {
+    return targets.has(tab);
+  },
+};
+
+/**
+ * A Target represents something that we can debug. Targets are generally
+ * read-only. Any changes that you wish to make to a target should be done via
+ * a Tool that attaches to the target. i.e. a Target is just a pointer saying
+ * "the thing to debug is over there".
+ *
+ * Providing a generalized abstraction of a web-page or web-browser (available
+ * either locally or remotely) is beyond the scope of this class (and maybe
+ * also beyond the scope of this universe) However Target does attempt to
+ * abstract some common events and read-only properties common to many Tools.
+ *
+ * Supported read-only properties:
+ * - name, isRemote, url
+ *
+ * Target extends EventEmitter and provides support for the following events:
+ * - close: The target window has been closed. All tools attached to this
+ *          target should close. This event is not currently cancelable.
+ * - navigate: The target window has navigated to a different URL
+ *
+ * Optional events:
+ * - will-navigate: The target window will navigate to a different URL
+ * - hidden: The target is not visible anymore (for TargetTab, another tab is
+ *           selected)
+ * - visible: The target is visible (for TargetTab, tab is selected)
+ *
+ * Comparing Targets: 2 instances of a Target object can point at the same
+ * thing, so t1 !== t2 and t1 != t2 even when they represent the same object.
+ * To compare to targets use 't1.equals(t2)'.
+ */
+
+/**
+ * A TabTarget represents a page living in a browser tab. Generally these will
+ * be web pages served over http(s), but they don't have to be.
+ */
+function TabTarget(tab) {
+  EventEmitter.decorate(this);
+  this.destroy = this.destroy.bind(this);
+  this.activeTab = this.activeConsole = null;
+  // Only real tabs need initialization here. Placeholder objects for remote
+  // targets will be initialized after a makeRemote method call.
+  if (tab && !["client", "form", "chrome"].every(tab.hasOwnProperty, tab)) {
+    this._tab = tab;
+    this._setupListeners();
+  } else {
+    this._form = tab.form;
+    this._url = this._form.url;
+    this._title = this._form.title;
+
+    this._client = tab.client;
+    this._chrome = tab.chrome;
+  }
+  // Default isTabActor to true if not explicitly specified
+  if (typeof tab.isTabActor == "boolean") {
+    this._isTabActor = tab.isTabActor;
+  } else {
+    this._isTabActor = true;
+  }
+}
+
+TabTarget.prototype = {
+  _webProgressListener: null,
+
+  /**
+   * Returns a promise for the protocol description from the root actor. Used
+   * internally with `target.actorHasMethod`. Takes advantage of caching if
+   * definition was fetched previously with the corresponding actor information.
+   * Actors are lazily loaded, so not only must the tool using a specific actor
+   * be in use, the actors are only registered after invoking a method (for
+   * performance reasons, added in bug 988237), so to use these actor detection
+   * methods, one must already be communicating with a specific actor of that
+   * type.
+   *
+   * Must be a remote target.
+   *
+   * @return {Promise}
+   * {
+   *   "category": "actor",
+   *   "typeName": "longstractor",
+   *   "methods": [{
+   *     "name": "substring",
+   *     "request": {
+   *       "type": "substring",
+   *       "start": {
+   *         "_arg": 0,
+   *         "type": "primitive"
+   *       },
+   *       "end": {
+   *         "_arg": 1,
+   *         "type": "primitive"
+   *       }
+   *     },
+   *     "response": {
+   *       "substring": {
+   *         "_retval": "primitive"
+   *       }
+   *     }
+   *   }],
+   *  "events": {}
+   * }
+   */
+  getActorDescription: function (actorName) {
+    if (!this.client) {
+      throw new Error("TabTarget#getActorDescription() can only be called on " +
+                      "remote tabs.");
+    }
+
+    let deferred = defer();
+
+    if (this._protocolDescription &&
+        this._protocolDescription.types[actorName]) {
+      deferred.resolve(this._protocolDescription.types[actorName]);
+    } else {
+      this.client.mainRoot.protocolDescription(description => {
+        this._protocolDescription = description;
+        deferred.resolve(description.types[actorName]);
+      });
+    }
+
+    return deferred.promise;
+  },
+
+  /**
+   * Returns a boolean indicating whether or not the specific actor
+   * type exists. Must be a remote target.
+   *
+   * @param {String} actorName
+   * @return {Boolean}
+   */
+  hasActor: function (actorName) {
+    if (!this.client) {
+      throw new Error("TabTarget#hasActor() can only be called on remote " +
+                      "tabs.");
+    }
+    if (this.form) {
+      return !!this.form[actorName + "Actor"];
+    }
+    return false;
+  },
+
+  /**
+   * Queries the protocol description to see if an actor has
+   * an available method. The actor must already be lazily-loaded (read
+   * the restrictions in the `getActorDescription` comments),
+   * so this is for use inside of tool. Returns a promise that
+   * resolves to a boolean. Must be a remote target.
+   *
+   * @param {String} actorName
+   * @param {String} methodName
+   * @return {Promise}
+   */
+  actorHasMethod: function (actorName, methodName) {
+    if (!this.client) {
+      throw new Error("TabTarget#actorHasMethod() can only be called on " +
+                      "remote tabs.");
+    }
+    return this.getActorDescription(actorName).then(desc => {
+      if (desc && desc.methods) {
+        return !!desc.methods.find(method => method.name === methodName);
+      }
+      return false;
+    });
+  },
+
+  /**
+   * Returns a trait from the root actor.
+   *
+   * @param {String} traitName
+   * @return {Mixed}
+   */
+  getTrait: function (traitName) {
+    if (!this.client) {
+      throw new Error("TabTarget#getTrait() can only be called on remote " +
+                      "tabs.");
+    }
+
+    // If the targeted actor exposes traits and has a defined value for this
+    // traits, override the root actor traits
+    if (this.form.traits && traitName in this.form.traits) {
+      return this.form.traits[traitName];
+    }
+
+    return this.client.traits[traitName];
+  },
+
+  get tab() {
+    return this._tab;
+  },
+
+  get form() {
+    return this._form;
+  },
+
+  // Get a promise of the root form returned by a listTabs request. This promise
+  // is cached.
+  get root() {
+    if (!this._root) {
+      this._root = this._getRoot();
+    }
+    return this._root;
+  },
+
+  _getRoot: function () {
+    return new Promise((resolve, reject) => {
+      this.client.listTabs(response => {
+        if (response.error) {
+          reject(new Error(response.error + ": " + response.message));
+          return;
+        }
+
+        resolve(response);
+      });
+    });
+  },
+
+  get client() {
+    return this._client;
+  },
+
+  // Tells us if we are debugging content document
+  // or if we are debugging chrome stuff.
+  // Allows to controls which features are available against
+  // a chrome or a content document.
+  get chrome() {
+    return this._chrome;
+  },
+
+  // Tells us if the related actor implements TabActor interface
+  // and requires to call `attach` request before being used
+  // and `detach` during cleanup
+  get isTabActor() {
+    return this._isTabActor;
+  },
+
+  get window() {
+    // XXX - this is a footgun for e10s - there .contentWindow will be null,
+    // and even though .contentWindowAsCPOW *might* work, it will not work
+    // in all contexts.  Consumers of .window need to be refactored to not
+    // rely on this.
+    if (Services.appinfo.processType != Ci.nsIXULRuntime.PROCESS_TYPE_DEFAULT) {
+      console.error("The .window getter on devtools' |target| object isn't " +
+                    "e10s friendly!\n" + Error().stack);
+    }
+    // Be extra careful here, since this may be called by HS_getHudByWindow
+    // during shutdown.
+    if (this._tab && this._tab.linkedBrowser) {
+      return this._tab.linkedBrowser.contentWindow;
+    }
+    return null;
+  },
+
+  get name() {
+    if (this.isAddon) {
+      return this._form.name;
+    }
+    return this._title;
+  },
+
+  get url() {
+    return this._url;
+  },
+
+  get isRemote() {
+    return !this.isLocalTab;
+  },
+
+  get isAddon() {
+    return !!(this._form && this._form.actor && (
+      this._form.actor.match(/conn\d+\.addon\d+/) ||
+      this._form.actor.match(/conn\d+\.webExtension\d+/)
+    ));
+  },
+
+  get isWebExtension() {
+    return !!(this._form && this._form.actor &&
+              this._form.actor.match(/conn\d+\.webExtension\d+/));
+  },
+
+  get isLocalTab() {
+    return !!this._tab;
+  },
+
+  get isMultiProcess() {
+    return !this.window;
+  },
+
+  /**
+   * Adds remote protocol capabilities to the target, so that it can be used
+   * for tools that support the Remote Debugging Protocol even for local
+   * connections.
+   */
+  makeRemote: function () {
+    if (this._remote) {
+      return this._remote.promise;
+    }
+
+    this._remote = defer();
+
+    if (this.isLocalTab) {
+      // Since a remote protocol connection will be made, let's start the
+      // DebuggerServer here, once and for all tools.
+      if (!DebuggerServer.initialized) {
+        DebuggerServer.init();
+        DebuggerServer.addBrowserActors();
+      }
+
+      this._client = new DebuggerClient(DebuggerServer.connectPipe());
+      // A local TabTarget will never perform chrome debugging.
+      this._chrome = false;
+    }
+
+    this._setupRemoteListeners();
+
+    let attachTab = () => {
+      this._client.attachTab(this._form.actor, (response, tabClient) => {
+        if (!tabClient) {
+          this._remote.reject("Unable to attach to the tab");
+          return;
+        }
+        this.activeTab = tabClient;
+        this.threadActor = response.threadActor;
+
+        attachConsole();
+      });
+    };
+
+    let onConsoleAttached = (response, consoleClient) => {
+      if (!consoleClient) {
+        this._remote.reject("Unable to attach to the console");
+        return;
+      }
+      this.activeConsole = consoleClient;
+      this._remote.resolve(null);
+    };
+
+    let attachConsole = () => {
+      this._client.attachConsole(this._form.consoleActor,
+                                 [ "NetworkActivity" ],
+                                 onConsoleAttached);
+    };
+
+    if (this.isLocalTab) {
+      this._client.connect()
+        .then(() => this._client.getTab({ tab: this.tab }))
+        .then(response => {
+          this._form = response.tab;
+          this._url = this._form.url;
+          this._title = this._form.title;
+
+          attachTab();
+        }, e => this._remote.reject(e));
+    } else if (this.isTabActor) {
+      // In the remote debugging case, the protocol connection will have been
+      // already initialized in the connection screen code.
+      attachTab();
+    } else {
+      // AddonActor and chrome debugging on RootActor doesn't inherits from
+      // TabActor and doesn't need to be attached.
+      attachConsole();
+    }
+
+    return this._remote.promise;
+  },
+
+  /**
+   * Listen to the different events.
+   */
+  _setupListeners: function () {
+    this._webProgressListener = new TabWebProgressListener(this);
+    this.tab.linkedBrowser.addProgressListener(this._webProgressListener);
+    this.tab.addEventListener("TabClose", this);
+    this.tab.parentNode.addEventListener("TabSelect", this);
+    this.tab.ownerDocument.defaultView.addEventListener("unload", this);
+    this.tab.addEventListener("TabRemotenessChange", this);
+  },
+
+  /**
+   * Teardown event listeners.
+   */
+  _teardownListeners: function () {
+    if (this._webProgressListener) {
+      this._webProgressListener.destroy();
+    }
+
+    this._tab.ownerDocument.defaultView.removeEventListener("unload", this);
+    this._tab.removeEventListener("TabClose", this);
+    this._tab.parentNode.removeEventListener("TabSelect", this);
+    this._tab.removeEventListener("TabRemotenessChange", this);
+  },
+
+  /**
+   * Setup listeners for remote debugging, updating existing ones as necessary.
+   */
+  _setupRemoteListeners: function () {
+    this.client.addListener("closed", this.destroy);
+
+    this._onTabDetached = (aType, aPacket) => {
+      // We have to filter message to ensure that this detach is for this tab
+      if (aPacket.from == this._form.actor) {
+        this.destroy();
+      }
+    };
+    this.client.addListener("tabDetached", this._onTabDetached);
+
+    this._onTabNavigated = (aType, aPacket) => {
+      let event = Object.create(null);
+      event.url = aPacket.url;
+      event.title = aPacket.title;
+      event.nativeConsoleAPI = aPacket.nativeConsoleAPI;
+      event.isFrameSwitching = aPacket.isFrameSwitching;
+
+      if (!aPacket.isFrameSwitching) {
+        // Update the title and url unless this is a frame switch.
+        this._url = aPacket.url;
+        this._title = aPacket.title;
+      }
+
+      // Send any stored event payload (DOMWindow or nsIRequest) for backwards
+      // compatibility with non-remotable tools.
+      if (aPacket.state == "start") {
+        event._navPayload = this._navRequest;
+        this.emit("will-navigate", event);
+        this._navRequest = null;
+      } else {
+        event._navPayload = this._navWindow;
+        this.emit("navigate", event);
+        this._navWindow = null;
+      }
+    };
+    this.client.addListener("tabNavigated", this._onTabNavigated);
+
+    this._onFrameUpdate = (aType, aPacket) => {
+      this.emit("frame-update", aPacket);
+    };
+    this.client.addListener("frameUpdate", this._onFrameUpdate);
+
+    this._onSourceUpdated = (event, packet) => this.emit("source-updated", packet);
+    this.client.addListener("newSource", this._onSourceUpdated);
+    this.client.addListener("updatedSource", this._onSourceUpdated);
+  },
+
+  /**
+   * Teardown listeners for remote debugging.
+   */
+  _teardownRemoteListeners: function () {
+    this.client.removeListener("closed", this.destroy);
+    this.client.removeListener("tabNavigated", this._onTabNavigated);
+    this.client.removeListener("tabDetached", this._onTabDetached);
+    this.client.removeListener("frameUpdate", this._onFrameUpdate);
+    this.client.removeListener("newSource", this._onSourceUpdated);
+    this.client.removeListener("updatedSource", this._onSourceUpdated);
+  },
+
+  /**
+   * Handle tabs events.
+   */
+  handleEvent: function (event) {
+    switch (event.type) {
+      case "TabClose":
+      case "unload":
+        this.destroy();
+        break;
+      case "TabSelect":
+        if (this.tab.selected) {
+          this.emit("visible", event);
+        } else {
+          this.emit("hidden", event);
+        }
+        break;
+      case "TabRemotenessChange":
+        this.onRemotenessChange();
+        break;
+    }
+  },
+
+  // Automatically respawn the toolbox when the tab changes between being
+  // loaded within the parent process and loaded from a content process.
+  // Process change can go in both ways.
+  onRemotenessChange: function () {
+    // Responsive design do a crazy dance around tabs and triggers
+    // remotenesschange events. But we should ignore them as at the end
+    // the content doesn't change its remoteness.
+    if (this._tab.isResponsiveDesignMode) {
+      return;
+    }
+
+    // Save a reference to the tab as it will be nullified on destroy
+    let tab = this._tab;
+    let onToolboxDestroyed = (event, target) => {
+      if (target != this) {
+        return;
+      }
+      gDevTools.off("toolbox-destroyed", target);
+
+      // Recreate a fresh target instance as the current one is now destroyed
+      let newTarget = TargetFactory.forTab(tab);
+      gDevTools.showToolbox(newTarget);
+    };
+    gDevTools.on("toolbox-destroyed", onToolboxDestroyed);
+  },
+
+  /**
+   * Target is not alive anymore.
+   */
+  destroy: function () {
+    // If several things call destroy then we give them all the same
+    // destruction promise so we're sure to destroy only once
+    if (this._destroyer) {
+      return this._destroyer.promise;
+    }
+
+    this._destroyer = defer();
+
+    // Before taking any action, notify listeners that destruction is imminent.
+    this.emit("close");
+
+    if (this._tab) {
+      this._teardownListeners();
+    }
+
+    let cleanupAndResolve = () => {
+      this._cleanup();
+      this._destroyer.resolve(null);
+    };
+    // If this target was not remoted, the promise will be resolved before the
+    // function returns.
+    if (this._tab && !this._client) {
+      cleanupAndResolve();
+    } else if (this._client) {
+      // If, on the other hand, this target was remoted, the promise will be
+      // resolved after the remote connection is closed.
+      this._teardownRemoteListeners();
+
+      if (this.isLocalTab) {
+        // We started with a local tab and created the client ourselves, so we
+        // should close it.
+        this._client.close().then(cleanupAndResolve);
+      } else if (this.activeTab) {
+        // The client was handed to us, so we are not responsible for closing
+        // it. We just need to detach from the tab, if already attached.
+        // |detach| may fail if the connection is already dead, so proceed with
+        // cleanup directly after this.
+        this.activeTab.detach();
+        cleanupAndResolve();
+      } else {
+        cleanupAndResolve();
+      }
+    }
+
+    return this._destroyer.promise;
+  },
+
+  /**
+   * Clean up references to what this target points to.
+   */
+  _cleanup: function () {
+    if (this._tab) {
+      targets.delete(this._tab);
+    } else {
+      promiseTargets.delete(this._form);
+    }
+
+    this.activeTab = null;
+    this.activeConsole = null;
+    this._client = null;
+    this._tab = null;
+    this._form = null;
+    this._remote = null;
+    this._root = null;
+    this._title = null;
+    this._url = null;
+    this.threadActor = null;
+  },
+
+  toString: function () {
+    let id = this._tab ? this._tab : (this._form && this._form.actor);
+    return `TabTarget:${id}`;
+  },
+
+  /**
+   * @see TabActor.prototype.onResolveLocation
+   */
+  resolveLocation(loc) {
+    let deferred = defer();
+
+    this.client.request(Object.assign({
+      to: this._form.actor,
+      type: "resolveLocation",
+    }, loc), deferred.resolve);
+
+    return deferred.promise;
+  },
+};
+
+/**
+ * WebProgressListener for TabTarget.
+ *
+ * @param object aTarget
+ *        The TabTarget instance to work with.
+ */
+function TabWebProgressListener(aTarget) {
+  this.target = aTarget;
+}
+
+TabWebProgressListener.prototype = {
+  target: null,
+
+  QueryInterface: XPCOMUtils.generateQI([Ci.nsIWebProgressListener,
+                                         Ci.nsISupportsWeakReference]),
+
+  onStateChange: function (progress, request, flag) {
+    let isStart = flag & Ci.nsIWebProgressListener.STATE_START;
+    let isDocument = flag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT;
+    let isNetwork = flag & Ci.nsIWebProgressListener.STATE_IS_NETWORK;
+    let isRequest = flag & Ci.nsIWebProgressListener.STATE_IS_REQUEST;
+
+    // Skip non-interesting states.
+    if (!isStart || !isDocument || !isRequest || !isNetwork) {
+      return;
+    }
+
+    // emit event if the top frame is navigating
+    if (progress.isTopLevel) {
+      // Emit the event if the target is not remoted or store the payload for
+      // later emission otherwise.
+      if (this.target._client) {
+        this.target._navRequest = request;
+      } else {
+        this.target.emit("will-navigate", request);
+      }
+    }
+  },
+
+  onProgressChange: function () {},
+  onSecurityChange: function () {},
+  onStatusChange: function () {},
+
+  onLocationChange: function (webProgress, request, URI, flags) {
+    if (this.target &&
+        !(flags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT)) {
+      let window = webProgress.DOMWindow;
+      // Emit the event if the target is not remoted or store the payload for
+      // later emission otherwise.
+      if (this.target._client) {
+        this.target._navWindow = window;
+      } else {
+        this.target.emit("navigate", window);
+      }
+    }
+  },
+
+  /**
+   * Destroy the progress listener instance.
+   */
+  destroy: function () {
+    if (this.target.tab) {
+      try {
+        this.target.tab.linkedBrowser.removeProgressListener(this);
+      } catch (ex) {
+        // This can throw when a tab crashes in e10s.
+      }
+    }
+    this.target._webProgressListener = null;
+    this.target._navRequest = null;
+    this.target._navWindow = null;
+    this.target = null;
+  }
+};
+
+function WorkerTarget(workerClient) {
+  EventEmitter.decorate(this);
+  this._workerClient = workerClient;
+}
+
+/**
+ * A WorkerTarget represents a worker. Unlike TabTarget, which can represent
+ * either a local or remote tab, WorkerTarget always represents a remote worker.
+ * Moreover, unlike TabTarget, which is constructed with a placeholder object
+ * for remote tabs (from which a TabClient can then be lazily obtained),
+ * WorkerTarget is constructed with a WorkerClient directly.
+ *
+ * WorkerClient is designed to mimic the interface of TabClient as closely as
+ * possible. This allows us to debug workers as if they were ordinary tabs,
+ * requiring only minimal changes to the rest of the frontend.
+ */
+WorkerTarget.prototype = {
+  get isRemote() {
+    return true;
+  },
+
+  get isTabActor() {
+    return true;
+  },
+
+  get name() {
+    return "Worker";
+  },
+
+  get url() {
+    return this._workerClient.url;
+  },
+
+  get isWorkerTarget() {
+    return true;
+  },
+
+  get form() {
+    return {
+      consoleActor: this._workerClient.consoleActor
+    };
+  },
+
+  get activeTab() {
+    return this._workerClient;
+  },
+
+  get client() {
+    return this._workerClient.client;
+  },
+
+  destroy: function () {
+    this._workerClient.detach();
+  },
+
+  hasActor: function (name) {
+    // console is the only one actor implemented by WorkerActor
+    if (name == "console") {
+      return true;
+    }
+    return false;
+  },
+
+  getTrait: function () {
+    return undefined;
+  },
+
+  makeRemote: function () {
+    return Promise.resolve();
+  }
+};
diff --git a/devtools/client/framework/test/.eslintrc.js b/devtools/client/framework/test/.eslintrc.js
new file mode 100644
index 000000000..8d15a76d9
--- /dev/null
+++ b/devtools/client/framework/test/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the shared list of defined globals for mochitests.
+  "extends": "../../../.eslintrc.mochitests.js"
+};
diff --git a/devtools/client/framework/test/browser.ini b/devtools/client/framework/test/browser.ini
new file mode 100644
index 000000000..f34cd66f0
--- /dev/null
+++ b/devtools/client/framework/test/browser.ini
@@ -0,0 +1,95 @@
+[DEFAULT]
+tags = devtools
+subsuite = devtools
+support-files =
+  browser_toolbox_options_disable_js.html
+  browser_toolbox_options_disable_js_iframe.html
+  browser_toolbox_options_disable_cache.sjs
+  browser_toolbox_sidebar_tool.xul
+  browser_toolbox_window_title_changes_page.html
+  browser_toolbox_window_title_frame_select_page.html
+  code_binary_search.coffee
+  code_binary_search.js
+  code_binary_search.map
+  code_math.js
+  code_ugly.js
+  doc_empty-tab-01.html
+  head.js
+  shared-head.js
+  shared-redux-head.js
+  helper_disable_cache.js
+  doc_theme.css
+  doc_viewsource.html
+  browser_toolbox_options_enable_serviceworkers_testing_frame_script.js
+  browser_toolbox_options_enable_serviceworkers_testing.html
+  serviceworker.js
+
+[browser_browser_toolbox.js]
+[browser_browser_toolbox_debugger.js]
+[browser_devtools_api.js]
+[browser_devtools_api_destroy.js]
+[browser_dynamic_tool_enabling.js]
+[browser_ignore_toolbox_network_requests.js]
+[browser_keybindings_01.js]
+[browser_keybindings_02.js]
+[browser_keybindings_03.js]
+[browser_menu_api.js]
+[browser_new_activation_workflow.js]
+[browser_source_map-01.js]
+[browser_source_map-02.js]
+[browser_target_from_url.js]
+[browser_target_events.js]
+[browser_target_remote.js]
+[browser_target_support.js]
+[browser_toolbox_custom_host.js]
+[browser_toolbox_dynamic_registration.js]
+[browser_toolbox_getpanelwhenready.js]
+[browser_toolbox_highlight.js]
+[browser_toolbox_hosts.js]
+[browser_toolbox_hosts_size.js]
+[browser_toolbox_hosts_telemetry.js]
+[browser_toolbox_keyboard_navigation.js]
+skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
+[browser_toolbox_minimize.js]
+skip-if = true # Bug 1177463 - Temporarily hide the minimize button
+[browser_toolbox_options.js]
+[browser_toolbox_options_disable_buttons.js]
+[browser_toolbox_options_disable_cache-01.js]
+[browser_toolbox_options_disable_cache-02.js]
+[browser_toolbox_options_disable_js.js]
+[browser_toolbox_options_enable_serviceworkers_testing.js]
+# [browser_toolbox_raise.js] # Bug 962258
+# skip-if = os == "win"
+[browser_toolbox_races.js]
+[browser_toolbox_ready.js]
+[browser_toolbox_remoteness_change.js]
+run-if = e10s
+[browser_toolbox_select_event.js]
+skip-if = e10s # Bug 1069044 - destroyInspector may hang during shutdown
+[browser_toolbox_selected_tool_unavailable.js]
+[browser_toolbox_sidebar.js]
+[browser_toolbox_sidebar_events.js]
+[browser_toolbox_sidebar_existing_tabs.js]
+[browser_toolbox_sidebar_overflow_menu.js]
+[browser_toolbox_split_console.js]
+[browser_toolbox_target.js]
+[browser_toolbox_tabsswitch_shortcuts.js]
+[browser_toolbox_textbox_context_menu.js]
+[browser_toolbox_theme_registration.js]
+[browser_toolbox_toggle.js]
+[browser_toolbox_tool_ready.js]
+[browser_toolbox_tool_remote_reopen.js]
+[browser_toolbox_transport_events.js]
+[browser_toolbox_view_source_01.js]
+[browser_toolbox_view_source_02.js]
+[browser_toolbox_view_source_03.js]
+[browser_toolbox_view_source_04.js]
+[browser_toolbox_window_reload_target.js]
+[browser_toolbox_window_shortcuts.js]
+skip-if = os == "mac" && os_version == "10.8" || os == "win" && os_version == "5.1" # Bug 851129 - Re-enable browser_toolbox_window_shortcuts.js test after leaks are fixed
+[browser_toolbox_window_title_changes.js]
+[browser_toolbox_window_title_frame_select.js]
+[browser_toolbox_zoom.js]
+[browser_two_tabs.js]
+# We want this test to run for mochitest-dt as well, so we include it here:
+[../../../../browser/base/content/test/general/browser_parsable_css.js]
diff --git a/devtools/client/framework/test/browser_browser_toolbox.js b/devtools/client/framework/test/browser_browser_toolbox.js
new file mode 100644
index 000000000..08c8ac190
--- /dev/null
+++ b/devtools/client/framework/test/browser_browser_toolbox.js
@@ -0,0 +1,65 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// On debug test slave, it takes about 50s to run the test.
+requestLongerTimeout(4);
+
+add_task(function* runTest() {
+  yield new Promise(done => {
+    let options = {"set": [
+      ["devtools.debugger.prompt-connection", false],
+      ["devtools.debugger.remote-enabled", true],
+      ["devtools.chrome.enabled", true],
+      // Test-only pref to allow passing `testScript` argument to the browser
+      // toolbox
+      ["devtools.browser-toolbox.allow-unsafe-script", true],
+      // On debug test slave, it takes more than the default time (20s)
+      // to get a initialized console
+      ["devtools.debugger.remote-timeout", 120000]
+    ]};
+    SpecialPowers.pushPrefEnv(options, done);
+  });
+
+  // Wait for a notification sent by a script evaluated in the webconsole
+  // of the browser toolbox.
+  let onCustomMessage = new Promise(done => {
+    Services.obs.addObserver(function listener() {
+      Services.obs.removeObserver(listener, "browser-toolbox-console-works");
+      done();
+    }, "browser-toolbox-console-works", false);
+  });
+
+  // Be careful, this JS function is going to be executed in the addon toolbox,
+  // which lives in another process. So do not try to use any scope variable!
+  let env = Components.classes["@mozilla.org/process/environment;1"].getService(Components.interfaces.nsIEnvironment);
+  let testScript = function () {
+    toolbox.selectTool("webconsole")
+      .then(console => {
+        let { jsterm } = console.hud;
+        let js = "Services.obs.notifyObservers(null, 'browser-toolbox-console-works', null);";
+        return jsterm.execute(js);
+      })
+      .then(() => toolbox.destroy());
+  };
+  env.set("MOZ_TOOLBOX_TEST_SCRIPT", "new " + testScript);
+  registerCleanupFunction(() => {
+    env.set("MOZ_TOOLBOX_TEST_SCRIPT", "");
+  });
+
+  let { BrowserToolboxProcess } = Cu.import("resource://devtools/client/framework/ToolboxProcess.jsm", {});
+  let closePromise;
+  yield new Promise(onRun => {
+    closePromise = new Promise(onClose => {
+      info("Opening the browser toolbox\n");
+      BrowserToolboxProcess.init(onClose, onRun);
+    });
+  });
+  ok(true, "Browser toolbox started\n");
+
+  yield onCustomMessage;
+  ok(true, "Received the custom message");
+
+  yield closePromise;
+  ok(true, "Browser toolbox process just closed");
+});
diff --git a/devtools/client/framework/test/browser_browser_toolbox_debugger.js b/devtools/client/framework/test/browser_browser_toolbox_debugger.js
new file mode 100644
index 000000000..c0971cc7c
--- /dev/null
+++ b/devtools/client/framework/test/browser_browser_toolbox_debugger.js
@@ -0,0 +1,131 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// On debug test runner, it takes about 50s to run the test.
+requestLongerTimeout(4);
+
+const { setInterval, clearInterval } = require("sdk/timers");
+
+add_task(function* runTest() {
+  yield new Promise(done => {
+    let options = {"set": [
+      ["devtools.debugger.prompt-connection", false],
+      ["devtools.debugger.remote-enabled", true],
+      ["devtools.chrome.enabled", true],
+      // Test-only pref to allow passing `testScript` argument to the browser
+      // toolbox
+      ["devtools.browser-toolbox.allow-unsafe-script", true],
+      // On debug test runner, it takes more than the default time (20s)
+      // to get a initialized console
+      ["devtools.debugger.remote-timeout", 120000]
+    ]};
+    SpecialPowers.pushPrefEnv(options, done);
+  });
+
+  let s = Cu.Sandbox("http://mozilla.org");
+  // Pass a fake URL to evalInSandbox. If we just pass a filename,
+  // Debugger is going to fail and only display root folder (`/`) listing.
+  // But it won't try to fetch this url and use sandbox content as expected.
+  let testUrl = "http://mozilla.org/browser-toolbox-test.js";
+  Cu.evalInSandbox("(" + function () {
+    this.plop = function plop() {
+      return 1;
+    };
+  } + ").call(this)", s, "1.8", testUrl, 0);
+
+  // Execute the function every second in order to trigger the breakpoint
+  let interval = setInterval(s.plop, 1000);
+
+  // Be careful, this JS function is going to be executed in the browser toolbox,
+  // which lives in another process. So do not try to use any scope variable!
+  let env = Components.classes["@mozilla.org/process/environment;1"]
+                      .getService(Components.interfaces.nsIEnvironment);
+  let testScript = function () {
+    const { Task } = Components.utils.import("resource://gre/modules/Task.jsm", {});
+    dump("Opening the browser toolbox and debugger panel\n");
+    let window, document;
+    let testUrl = "http://mozilla.org/browser-toolbox-test.js";
+    Task.spawn(function* () {
+      dump("Waiting for debugger load\n");
+      let panel = yield toolbox.selectTool("jsdebugger");
+      let window = panel.panelWin;
+      let document = window.document;
+
+      yield window.once(window.EVENTS.SOURCE_SHOWN);
+
+      dump("Loaded, selecting the test script to debug\n");
+      let item = document.querySelector(`.dbg-source-item[tooltiptext="${testUrl}"]`);
+      let onSourceShown = window.once(window.EVENTS.SOURCE_SHOWN);
+      item.click();
+      yield onSourceShown;
+
+      dump("Selected, setting a breakpoint\n");
+      let { Sources, editor } = window.DebuggerView;
+      let onBreak = window.once(window.EVENTS.FETCHED_SCOPES);
+      editor.emit("gutterClick", 1);
+      yield onBreak;
+
+      dump("Paused, asserting breakpoint position\n");
+      let url = Sources.selectedItem.attachment.source.url;
+      if (url != testUrl) {
+        throw new Error("Breaking on unexpected script: " + url);
+      }
+      let cursor = editor.getCursor();
+      if (cursor.line != 1) {
+        throw new Error("Breaking on unexpected line: " + cursor.line);
+      }
+
+      dump("Now, stepping over\n");
+      let stepOver = window.document.querySelector("#step-over");
+      let onFetchedScopes = window.once(window.EVENTS.FETCHED_SCOPES);
+      stepOver.click();
+      yield onFetchedScopes;
+
+      dump("Stepped, asserting step position\n");
+      url = Sources.selectedItem.attachment.source.url;
+      if (url != testUrl) {
+        throw new Error("Stepping on unexpected script: " + url);
+      }
+      cursor = editor.getCursor();
+      if (cursor.line != 2) {
+        throw new Error("Stepping on unexpected line: " + cursor.line);
+      }
+
+      dump("Resume script execution\n");
+      let resume = window.document.querySelector("#resume");
+      let onResume = toolbox.target.once("thread-resumed");
+      resume.click();
+      yield onResume;
+
+      dump("Close the browser toolbox\n");
+      toolbox.destroy();
+
+    }).catch(error => {
+      dump("Error while running code in the browser toolbox process:\n");
+      dump(error + "\n");
+      dump("stack:\n" + error.stack + "\n");
+    });
+  };
+  env.set("MOZ_TOOLBOX_TEST_SCRIPT", "new " + testScript);
+  registerCleanupFunction(() => {
+    env.set("MOZ_TOOLBOX_TEST_SCRIPT", "");
+  });
+
+  let { BrowserToolboxProcess } = Cu.import("resource://devtools/client/framework/ToolboxProcess.jsm", {});
+  // Use two promises, one for each BrowserToolboxProcess.init callback
+  // arguments, to ensure that we wait for toolbox run and close events.
+  let closePromise;
+  yield new Promise(onRun => {
+    closePromise = new Promise(onClose => {
+      info("Opening the browser toolbox\n");
+      BrowserToolboxProcess.init(onClose, onRun);
+    });
+  });
+  ok(true, "Browser toolbox started\n");
+
+  yield closePromise;
+  ok(true, "Browser toolbox process just closed");
+
+  clearInterval(interval);
+});
diff --git a/devtools/client/framework/test/browser_devtools_api.js b/devtools/client/framework/test/browser_devtools_api.js
new file mode 100644
index 000000000..72d415c0b
--- /dev/null
+++ b/devtools/client/framework/test/browser_devtools_api.js
@@ -0,0 +1,264 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+//
+// Whitelisting this test.
+// As part of bug 1077403, the leaking uncaught rejections should be fixed.
+//
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("TypeError: this.docShell is null");
+
+// When running in a standalone directory, we get this error
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("TypeError: this.doc is undefined");
+
+// Tests devtools API
+
+const toolId1 = "test-tool-1";
+const toolId2 = "test-tool-2";
+
+var EventEmitter = require("devtools/shared/event-emitter");
+
+function test() {
+  addTab("about:blank").then(runTests1);
+}
+
+// Test scenario 1: the tool definition build method returns a promise.
+function runTests1(aTab) {
+  let toolDefinition = {
+    id: toolId1,
+    isTargetSupported: () => true,
+    visibilityswitch: "devtools.test-tool.enabled",
+    url: "about:blank",
+    label: "someLabel",
+    build: function (iframeWindow, toolbox) {
+      let panel = new DevToolPanel(iframeWindow, toolbox);
+      return panel.open();
+    },
+  };
+
+  ok(gDevTools, "gDevTools exists");
+  ok(!gDevTools.getToolDefinitionMap().has(toolId1),
+    "The tool is not registered");
+
+  gDevTools.registerTool(toolDefinition);
+  ok(gDevTools.getToolDefinitionMap().has(toolId1),
+    "The tool is registered");
+
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  let events = {};
+
+  // Check events on the gDevTools and toolbox objects.
+  gDevTools.once(toolId1 + "-init", (event, toolbox, iframe) => {
+    ok(iframe, "iframe argument available");
+
+    toolbox.once(toolId1 + "-init", (event, iframe) => {
+      ok(iframe, "iframe argument available");
+      events["init"] = true;
+    });
+  });
+
+  gDevTools.once(toolId1 + "-ready", (event, toolbox, panel) => {
+    ok(panel, "panel argument available");
+
+    toolbox.once(toolId1 + "-ready", (event, panel) => {
+      ok(panel, "panel argument available");
+      events["ready"] = true;
+    });
+  });
+
+  gDevTools.showToolbox(target, toolId1).then(function (toolbox) {
+    is(toolbox.target, target, "toolbox target is correct");
+    is(toolbox.target.tab, gBrowser.selectedTab, "targeted tab is correct");
+
+    ok(events["init"], "init event fired");
+    ok(events["ready"], "ready event fired");
+
+    gDevTools.unregisterTool(toolId1);
+
+    // Wait for unregisterTool to select the next tool before calling runTests2,
+    // otherwise we will receive the wrong select event when waiting for
+    // unregisterTool to select the next tool in continueTests below.
+    toolbox.once("select", runTests2);
+  });
+}
+
+// Test scenario 2: the tool definition build method returns panel instance.
+function runTests2() {
+  let toolDefinition = {
+    id: toolId2,
+    isTargetSupported: () => true,
+    visibilityswitch: "devtools.test-tool.enabled",
+    url: "about:blank",
+    label: "someLabel",
+    build: function (iframeWindow, toolbox) {
+      return new DevToolPanel(iframeWindow, toolbox);
+    },
+  };
+
+  ok(!gDevTools.getToolDefinitionMap().has(toolId2),
+    "The tool is not registered");
+
+  gDevTools.registerTool(toolDefinition);
+  ok(gDevTools.getToolDefinitionMap().has(toolId2),
+    "The tool is registered");
+
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  let events = {};
+
+  // Check events on the gDevTools and toolbox objects.
+  gDevTools.once(toolId2 + "-init", (event, toolbox, iframe) => {
+    ok(iframe, "iframe argument available");
+
+    toolbox.once(toolId2 + "-init", (event, iframe) => {
+      ok(iframe, "iframe argument available");
+      events["init"] = true;
+    });
+  });
+
+  gDevTools.once(toolId2 + "-build", (event, toolbox, panel, iframe) => {
+    ok(panel, "panel argument available");
+
+    toolbox.once(toolId2 + "-build", (event, panel, iframe) => {
+      ok(panel, "panel argument available");
+      events["build"] = true;
+    });
+  });
+
+  gDevTools.once(toolId2 + "-ready", (event, toolbox, panel) => {
+    ok(panel, "panel argument available");
+
+    toolbox.once(toolId2 + "-ready", (event, panel) => {
+      ok(panel, "panel argument available");
+      events["ready"] = true;
+    });
+  });
+
+  gDevTools.showToolbox(target, toolId2).then(function (toolbox) {
+    is(toolbox.target, target, "toolbox target is correct");
+    is(toolbox.target.tab, gBrowser.selectedTab, "targeted tab is correct");
+
+    ok(events["init"], "init event fired");
+    ok(events["build"], "build event fired");
+    ok(events["ready"], "ready event fired");
+
+    continueTests(toolbox);
+  });
+}
+
+var continueTests = Task.async(function* (toolbox, panel) {
+  ok(toolbox.getCurrentPanel(), "panel value is correct");
+  is(toolbox.currentToolId, toolId2, "toolbox _currentToolId is correct");
+
+  ok(!toolbox.doc.getElementById("toolbox-tab-" + toolId2).hasAttribute("icon-invertable"),
+    "The tool tab does not have the invertable attribute");
+
+  ok(toolbox.doc.getElementById("toolbox-tab-inspector").hasAttribute("icon-invertable"),
+    "The builtin tool tabs do have the invertable attribute");
+
+  let toolDefinitions = gDevTools.getToolDefinitionMap();
+  ok(toolDefinitions.has(toolId2), "The tool is in gDevTools");
+
+  let toolDefinition = toolDefinitions.get(toolId2);
+  is(toolDefinition.id, toolId2, "toolDefinition id is correct");
+
+  info("Testing toolbox tool-unregistered event");
+  let toolSelected = toolbox.once("select");
+  let unregisteredTool = yield new Promise(resolve => {
+    toolbox.once("tool-unregistered", (e, id) => resolve(id));
+    gDevTools.unregisterTool(toolId2);
+  });
+  yield toolSelected;
+
+  is(unregisteredTool, toolId2, "Event returns correct id");
+  ok(!toolbox.isToolRegistered(toolId2),
+    "Toolbox: The tool is not registered");
+  ok(!gDevTools.getToolDefinitionMap().has(toolId2),
+    "The tool is no longer registered");
+
+  info("Testing toolbox tool-registered event");
+  let registeredTool = yield new Promise(resolve => {
+    toolbox.once("tool-registered", (e, id) => resolve(id));
+    gDevTools.registerTool(toolDefinition);
+  });
+
+  is(registeredTool, toolId2, "Event returns correct id");
+  ok(toolbox.isToolRegistered(toolId2),
+    "Toolbox: The tool is registered");
+  ok(gDevTools.getToolDefinitionMap().has(toolId2),
+    "The tool is registered");
+
+  info("Unregistering tool");
+  gDevTools.unregisterTool(toolId2);
+
+  destroyToolbox(toolbox);
+});
+
+function destroyToolbox(toolbox) {
+  toolbox.destroy().then(function () {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    ok(gDevTools._toolboxes.get(target) == null, "gDevTools doesn't know about target");
+    ok(toolbox.target == null, "toolbox doesn't know about target.");
+    finishUp();
+  });
+}
+
+function finishUp() {
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+/**
+* When a Toolbox is started it creates a DevToolPanel for each of the tools
+* by calling toolDefinition.build(). The returned object should
+* at least implement these functions. They will be used by the ToolBox.
+*
+* There may be no benefit in doing this as an abstract type, but if nothing
+* else gives us a place to write documentation.
+*/
+function DevToolPanel(iframeWindow, toolbox) {
+  EventEmitter.decorate(this);
+
+  this._toolbox = toolbox;
+
+  /* let doc = iframeWindow.document
+  let label = doc.createElement("label");
+  let textNode = doc.createTextNode("Some Tool");
+
+  label.appendChild(textNode);
+  doc.body.appendChild(label);*/
+}
+
+DevToolPanel.prototype = {
+  open: function () {
+    let deferred = defer();
+
+    executeSoon(() => {
+      this._isReady = true;
+      this.emit("ready");
+      deferred.resolve(this);
+    });
+
+    return deferred.promise;
+  },
+
+  get target() {
+    return this._toolbox.target;
+  },
+
+  get toolbox() {
+    return this._toolbox;
+  },
+
+  get isReady() {
+    return this._isReady;
+  },
+
+  _isReady: false,
+
+  destroy: function DTI_destroy() {
+    return defer(null);
+  },
+};
diff --git a/devtools/client/framework/test/browser_devtools_api_destroy.js b/devtools/client/framework/test/browser_devtools_api_destroy.js
new file mode 100644
index 000000000..084a7a0a1
--- /dev/null
+++ b/devtools/client/framework/test/browser_devtools_api_destroy.js
@@ -0,0 +1,71 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 devtools API
+
+function test() {
+  addTab("about:blank").then(runTests);
+}
+
+function runTests(aTab) {
+  let toolDefinition = {
+    id: "testTool",
+    visibilityswitch: "devtools.testTool.enabled",
+    isTargetSupported: () => true,
+    url: "about:blank",
+    label: "someLabel",
+    build: function (iframeWindow, toolbox) {
+      let deferred = defer();
+      executeSoon(() => {
+        deferred.resolve({
+          target: toolbox.target,
+          toolbox: toolbox,
+          isReady: true,
+          destroy: function () {},
+        });
+      });
+      return deferred.promise;
+    },
+  };
+
+  gDevTools.registerTool(toolDefinition);
+
+  let collectedEvents = [];
+
+  let target = TargetFactory.forTab(aTab);
+  gDevTools.showToolbox(target, toolDefinition.id).then(function (toolbox) {
+    let panel = toolbox.getPanel(toolDefinition.id);
+    ok(panel, "Tool open");
+
+    gDevTools.once("toolbox-destroy", (event, toolbox, iframe) => {
+      collectedEvents.push(event);
+    });
+
+    gDevTools.once(toolDefinition.id + "-destroy", (event, toolbox, iframe) => {
+      collectedEvents.push("gDevTools-" + event);
+    });
+
+    toolbox.once("destroy", (event) => {
+      collectedEvents.push(event);
+    });
+
+    toolbox.once(toolDefinition.id + "-destroy", (event) => {
+      collectedEvents.push("toolbox-" + event);
+    });
+
+    toolbox.destroy().then(function () {
+      is(collectedEvents.join(":"),
+        "toolbox-destroy:destroy:gDevTools-testTool-destroy:toolbox-testTool-destroy",
+        "Found the right amount of collected events.");
+
+      gDevTools.unregisterTool(toolDefinition.id);
+      gBrowser.removeCurrentTab();
+
+      executeSoon(function () {
+        finish();
+      });
+    });
+  });
+}
diff --git a/devtools/client/framework/test/browser_dynamic_tool_enabling.js b/devtools/client/framework/test/browser_dynamic_tool_enabling.js
new file mode 100644
index 000000000..6420afabe
--- /dev/null
+++ b/devtools/client/framework/test/browser_dynamic_tool_enabling.js
@@ -0,0 +1,41 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 toggling prefs immediately (de)activates the relevant menuitem
+
+var gItemsToTest = {
+  "menu_devToolbar": "devtools.toolbar.enabled",
+  "menu_browserToolbox": ["devtools.chrome.enabled", "devtools.debugger.remote-enabled"],
+  "menu_devtools_connect": "devtools.debugger.remote-enabled",
+};
+
+function expectedAttributeValueFromPrefs(prefs) {
+  return prefs.every((pref) => Services.prefs.getBoolPref(pref)) ?
+         "" : "true";
+}
+
+function checkItem(el, prefs) {
+  let expectedValue = expectedAttributeValueFromPrefs(prefs);
+  is(el.getAttribute("disabled"), expectedValue, "disabled attribute should match current pref state");
+  is(el.getAttribute("hidden"), expectedValue, "hidden attribute should match current pref state");
+}
+
+function test() {
+  for (let k in gItemsToTest) {
+    let el = document.getElementById(k);
+    let prefs = gItemsToTest[k];
+    if (typeof prefs == "string") {
+      prefs = [prefs];
+    }
+    checkItem(el, prefs);
+    for (let pref of prefs) {
+      Services.prefs.setBoolPref(pref, !Services.prefs.getBoolPref(pref));
+      checkItem(el, prefs);
+      Services.prefs.setBoolPref(pref, !Services.prefs.getBoolPref(pref));
+      checkItem(el, prefs);
+    }
+  }
+  finish();
+}
diff --git a/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js b/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js
new file mode 100644
index 000000000..1cfc22f7e
--- /dev/null
+++ b/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js
@@ -0,0 +1,33 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test that network requests originating from the toolbox don't get recorded in
+// the network panel.
+
+add_task(function* () {
+  // TODO: This test tries to verify the normal behavior of the netmonitor and
+  // therefore needs to avoid the explicit check for tests. Bug 1167188 will
+  // allow us to remove this workaround.
+  let isTesting = flags.testing;
+  flags.testing = false;
+
+  let tab = yield addTab(URL_ROOT + "doc_viewsource.html");
+  let target = TargetFactory.forTab(tab);
+  let toolbox = yield gDevTools.showToolbox(target, "styleeditor");
+  let panel = toolbox.getPanel("styleeditor");
+
+  is(panel.UI.editors.length, 1, "correct number of editors opened");
+
+  let monitor = yield toolbox.selectTool("netmonitor");
+  let { RequestsMenu } = monitor.panelWin.NetMonitorView;
+  is(RequestsMenu.itemCount, 0, "No network requests appear in the network panel");
+
+  yield gDevTools.closeToolbox(target);
+  tab = target = toolbox = panel = null;
+  gBrowser.removeCurrentTab();
+  flags.testing = isTesting;
+});
diff --git a/devtools/client/framework/test/browser_keybindings_01.js b/devtools/client/framework/test/browser_keybindings_01.js
new file mode 100644
index 000000000..4e4effb07
--- /dev/null
+++ b/devtools/client/framework/test/browser_keybindings_01.js
@@ -0,0 +1,115 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 the keybindings for opening and closing the inspector work as expected
+// Can probably make this a shared test that tests all of the tools global keybindings
+const TEST_URL = "data:text/html,<html><head><title>Test for the " +
+                 "highlighter keybindings</title></head><body>" +
+                 "<h1>Keybindings!</h1></body></html>"
+function test()
+{
+  waitForExplicitFinish();
+
+  let doc;
+  let node;
+  let inspector;
+  let keysetMap = { };
+
+  addTab(TEST_URL).then(function () {
+    doc = content.document;
+    node = doc.querySelector("h1");
+    waitForFocus(setupKeyBindingsTest);
+  });
+
+  function buildDevtoolsKeysetMap(keyset) {
+    [].forEach.call(keyset.querySelectorAll("key"), function (key) {
+
+      if (!key.getAttribute("key")) {
+        return;
+      }
+
+      let modifiers = key.getAttribute("modifiers");
+
+      keysetMap[key.id.split("_")[1]] = {
+        key: key.getAttribute("key"),
+        modifiers: modifiers,
+        modifierOpt: {
+          shiftKey: modifiers.match("shift"),
+          ctrlKey: modifiers.match("ctrl"),
+          altKey: modifiers.match("alt"),
+          metaKey: modifiers.match("meta"),
+          accelKey: modifiers.match("accel")
+        },
+        synthesizeKey: function () {
+          EventUtils.synthesizeKey(this.key, this.modifierOpt);
+        }
+      };
+    });
+  }
+
+  function setupKeyBindingsTest()
+  {
+    for (let win of gDevToolsBrowser._trackedBrowserWindows) {
+      buildDevtoolsKeysetMap(win.document.getElementById("devtoolsKeyset"));
+    }
+
+    gDevTools.once("toolbox-ready", (e, toolbox) => {
+      inspectorShouldBeOpenAndHighlighting(toolbox.getCurrentPanel(), toolbox);
+    });
+
+    keysetMap.inspector.synthesizeKey();
+  }
+
+  function inspectorShouldBeOpenAndHighlighting(aInspector, aToolbox)
+  {
+    is(aToolbox.currentToolId, "inspector", "Correct tool has been loaded");
+
+    aToolbox.once("picker-started", () => {
+      ok(true, "picker-started event received, highlighter started");
+      keysetMap.inspector.synthesizeKey();
+
+      aToolbox.once("picker-stopped", () => {
+        ok(true, "picker-stopped event received, highlighter stopped");
+        gDevTools.once("select-tool-command", () => {
+          webconsoleShouldBeSelected(aToolbox);
+        });
+        keysetMap.webconsole.synthesizeKey();
+      });
+    });
+  }
+
+  function webconsoleShouldBeSelected(aToolbox)
+  {
+    is(aToolbox.currentToolId, "webconsole", "webconsole should be selected.");
+
+    gDevTools.once("select-tool-command", () => {
+      jsdebuggerShouldBeSelected(aToolbox);
+    });
+    keysetMap.jsdebugger.synthesizeKey();
+  }
+
+  function jsdebuggerShouldBeSelected(aToolbox)
+  {
+    is(aToolbox.currentToolId, "jsdebugger", "jsdebugger should be selected.");
+
+    gDevTools.once("select-tool-command", () => {
+      netmonitorShouldBeSelected(aToolbox);
+    });
+
+    keysetMap.netmonitor.synthesizeKey();
+  }
+
+  function netmonitorShouldBeSelected(aToolbox, panel)
+  {
+    is(aToolbox.currentToolId, "netmonitor", "netmonitor should be selected.");
+    finishUp();
+  }
+
+  function finishUp() {
+    doc = node = inspector = keysetMap = null;
+    gBrowser.removeCurrentTab();
+    finish();
+  }
+}
diff --git a/devtools/client/framework/test/browser_keybindings_02.js b/devtools/client/framework/test/browser_keybindings_02.js
new file mode 100644
index 000000000..551fef873
--- /dev/null
+++ b/devtools/client/framework/test/browser_keybindings_02.js
@@ -0,0 +1,65 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test that the toolbox keybindings still work after the host is changed.
+
+const URL = "data:text/html;charset=utf8,test page";
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+function getZoomValue() {
+  return parseFloat(Services.prefs.getCharPref("devtools.toolbox.zoomValue"));
+}
+
+add_task(function* () {
+  info("Create a test tab and open the toolbox");
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  let toolbox = yield gDevTools.showToolbox(target, "webconsole");
+
+  let {SIDE, BOTTOM} = Toolbox.HostType;
+  for (let type of [SIDE, BOTTOM, SIDE]) {
+    info("Switch to host type " + type);
+    yield toolbox.switchHost(type);
+
+    info("Try to use the toolbox shortcuts");
+    yield checkKeyBindings(toolbox);
+  }
+
+  Services.prefs.clearUserPref("devtools.toolbox.zoomValue");
+  Services.prefs.setCharPref("devtools.toolbox.host", BOTTOM);
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+function zoomWithKey(toolbox, key) {
+  let shortcut = L10N.getStr(key);
+  if (!shortcut) {
+    info("Key was empty, skipping zoomWithKey");
+    return;
+  }
+  info("Zooming with key: " + key);
+  let currentZoom = getZoomValue();
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+  isnot(getZoomValue(), currentZoom, "The zoom level was changed in the toolbox");
+}
+
+function* checkKeyBindings(toolbox) {
+  zoomWithKey(toolbox, "toolbox.zoomIn.key");
+  zoomWithKey(toolbox, "toolbox.zoomIn2.key");
+  zoomWithKey(toolbox, "toolbox.zoomIn3.key");
+
+  zoomWithKey(toolbox, "toolbox.zoomReset.key");
+
+  zoomWithKey(toolbox, "toolbox.zoomOut.key");
+  zoomWithKey(toolbox, "toolbox.zoomOut2.key");
+
+  zoomWithKey(toolbox, "toolbox.zoomReset2.key");
+}
diff --git a/devtools/client/framework/test/browser_keybindings_03.js b/devtools/client/framework/test/browser_keybindings_03.js
new file mode 100644
index 000000000..752087a09
--- /dev/null
+++ b/devtools/client/framework/test/browser_keybindings_03.js
@@ -0,0 +1,53 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test that the toolbox 'switch to previous host' feature works.
+// Pressing ctrl/cmd+shift+d should switch to the last used host.
+
+const URL = "data:text/html;charset=utf8,test page for toolbox switching";
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+add_task(function* () {
+  info("Create a test tab and open the toolbox");
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  let toolbox = yield gDevTools.showToolbox(target, "webconsole");
+
+  let shortcut = L10N.getStr("toolbox.toggleHost.key");
+
+  let {SIDE, BOTTOM, WINDOW} = Toolbox.HostType;
+  checkHostType(toolbox, BOTTOM, SIDE);
+
+  info("Switching from bottom to side");
+  let onHostChanged = toolbox.once("host-changed");
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+  yield onHostChanged;
+  checkHostType(toolbox, SIDE, BOTTOM);
+
+  info("Switching from side to bottom");
+  onHostChanged = toolbox.once("host-changed");
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+  yield onHostChanged;
+  checkHostType(toolbox, BOTTOM, SIDE);
+
+  info("Switching to window");
+  yield toolbox.switchHost(WINDOW);
+  checkHostType(toolbox, WINDOW, BOTTOM);
+
+  info("Switching from window to bottom");
+  onHostChanged = toolbox.once("host-changed");
+  synthesizeKeyShortcut(shortcut, toolbox.win);
+  yield onHostChanged;
+  checkHostType(toolbox, BOTTOM, WINDOW);
+
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_menu_api.js b/devtools/client/framework/test/browser_menu_api.js
new file mode 100644
index 000000000..cf634ff6f
--- /dev/null
+++ b/devtools/client/framework/test/browser_menu_api.js
@@ -0,0 +1,181 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test that the Menu API works
+
+const URL = "data:text/html;charset=utf8,test page for menu api";
+const Menu = require("devtools/client/framework/menu");
+const MenuItem = require("devtools/client/framework/menu-item");
+
+add_task(function* () {
+  info("Create a test tab and open the toolbox");
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  let toolbox = yield gDevTools.showToolbox(target, "webconsole");
+
+  yield testMenuItems();
+  yield testMenuPopup(toolbox);
+  yield testSubmenu(toolbox);
+});
+
+function* testMenuItems() {
+  let menu = new Menu();
+  let menuItem1 = new MenuItem();
+  let menuItem2 = new MenuItem();
+
+  menu.append(menuItem1);
+  menu.append(menuItem2);
+
+  is(menu.items.length, 2, "Correct number of 'items'");
+  is(menu.items[0], menuItem1, "Correct reference to MenuItem");
+  is(menu.items[1], menuItem2, "Correct reference to MenuItem");
+}
+
+function* testMenuPopup(toolbox) {
+  let clickFired = false;
+
+  let menu = new Menu({
+    id: "menu-popup",
+  });
+  menu.append(new MenuItem({ type: "separator" }));
+
+  let MENU_ITEMS = [
+    new MenuItem({
+      id: "menu-item-1",
+      label: "Normal Item",
+      click: () => {
+        info("Click callback has fired for menu item");
+        clickFired = true;
+      },
+    }),
+    new MenuItem({
+      label: "Checked Item",
+      type: "checkbox",
+      checked: true,
+    }),
+    new MenuItem({
+      label: "Radio Item",
+      type: "radio",
+    }),
+    new MenuItem({
+      label: "Disabled Item",
+      disabled: true,
+    }),
+  ];
+
+  for (let item of MENU_ITEMS) {
+    menu.append(item);
+  }
+
+  // Append an invisible MenuItem, which shouldn't show up in the DOM
+  menu.append(new MenuItem({
+    label: "Invisible",
+    visible: false,
+  }));
+
+  menu.popup(0, 0, toolbox);
+
+  ok(toolbox.doc.querySelector("#menu-popup"), "A popup is in the DOM");
+
+  let menuSeparators =
+    toolbox.doc.querySelectorAll("#menu-popup > menuseparator");
+  is(menuSeparators.length, 1, "A separator is in the menu");
+
+  let menuItems = toolbox.doc.querySelectorAll("#menu-popup > menuitem");
+  is(menuItems.length, MENU_ITEMS.length, "Correct number of menuitems");
+
+  is(menuItems[0].id, MENU_ITEMS[0].id, "Correct id for menuitem");
+  is(menuItems[0].getAttribute("label"), MENU_ITEMS[0].label, "Correct label");
+
+  is(menuItems[1].getAttribute("label"), MENU_ITEMS[1].label, "Correct label");
+  is(menuItems[1].getAttribute("type"), "checkbox", "Correct type attr");
+  is(menuItems[1].getAttribute("checked"), "true", "Has checked attr");
+
+  is(menuItems[2].getAttribute("label"), MENU_ITEMS[2].label, "Correct label");
+  is(menuItems[2].getAttribute("type"), "radio", "Correct type attr");
+  ok(!menuItems[2].hasAttribute("checked"), "Doesn't have checked attr");
+
+  is(menuItems[3].getAttribute("label"), MENU_ITEMS[3].label, "Correct label");
+  is(menuItems[3].getAttribute("disabled"), "true", "disabled attr menuitem");
+
+  yield once(menu, "open");
+  let closed = once(menu, "close");
+  EventUtils.synthesizeMouseAtCenter(menuItems[0], {}, toolbox.win);
+  yield closed;
+  ok(clickFired, "Click has fired");
+
+  ok(!toolbox.doc.querySelector("#menu-popup"), "Popup removed from the DOM");
+}
+
+function* testSubmenu(toolbox) {
+  let clickFired = false;
+  let menu = new Menu({
+    id: "menu-popup",
+  });
+  let submenu = new Menu({
+    id: "submenu-popup",
+  });
+  submenu.append(new MenuItem({
+    label: "Submenu item",
+    click: () => {
+      info("Click callback has fired for submenu item");
+      clickFired = true;
+    },
+  }));
+  menu.append(new MenuItem({
+    label: "Submenu parent",
+    submenu: submenu,
+  }));
+  menu.append(new MenuItem({
+    label: "Submenu parent with attributes",
+    id: "submenu-parent-with-attrs",
+    submenu: submenu,
+    accesskey: "A",
+    disabled: true,
+  }));
+
+  menu.popup(0, 0, toolbox);
+  ok(toolbox.doc.querySelector("#menu-popup"), "A popup is in the DOM");
+  is(toolbox.doc.querySelectorAll("#menu-popup > menuitem").length, 0,
+    "No menuitem children");
+
+  let menus = toolbox.doc.querySelectorAll("#menu-popup > menu");
+  is(menus.length, 2, "Correct number of menus");
+  is(menus[0].getAttribute("label"), "Submenu parent", "Correct label");
+  ok(!menus[0].hasAttribute("disabled"), "Correct disabled state");
+
+  is(menus[1].getAttribute("accesskey"), "A", "Correct accesskey");
+  ok(menus[1].hasAttribute("disabled"), "Correct disabled state");
+  ok(menus[1].id, "submenu-parent-with-attrs", "Correct id");
+
+  let subMenuItems = menus[0].querySelectorAll("menupopup > menuitem");
+  is(subMenuItems.length, 1, "Correct number of submenu items");
+  is(subMenuItems[0].getAttribute("label"), "Submenu item", "Correct label");
+
+  yield once(menu, "open");
+  let closed = once(menu, "close");
+
+  info("Using keyboard navigation to open, close, and reopen the submenu");
+  let shown = once(menus[0], "popupshown");
+  EventUtils.synthesizeKey("VK_DOWN", {});
+  EventUtils.synthesizeKey("VK_RIGHT", {});
+  yield shown;
+
+  let hidden = once(menus[0], "popuphidden");
+  EventUtils.synthesizeKey("VK_LEFT", {});
+  yield hidden;
+
+  shown = once(menus[0], "popupshown");
+  EventUtils.synthesizeKey("VK_RIGHT", {});
+  yield shown;
+
+  info("Clicking the submenu item");
+  EventUtils.synthesizeMouseAtCenter(subMenuItems[0], {}, toolbox.win);
+
+  yield closed;
+  ok(clickFired, "Click has fired");
+}
diff --git a/devtools/client/framework/test/browser_new_activation_workflow.js b/devtools/client/framework/test/browser_new_activation_workflow.js
new file mode 100644
index 000000000..4092bf1a7
--- /dev/null
+++ b/devtools/client/framework/test/browser_new_activation_workflow.js
@@ -0,0 +1,69 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 devtools API
+
+var toolbox, target;
+
+var tempScope = {};
+
+function test() {
+  addTab("about:blank").then(function (aTab) {
+    target = TargetFactory.forTab(gBrowser.selectedTab);
+    loadWebConsole(aTab).then(function () {
+      console.log("loaded");
+    });
+  });
+}
+
+function loadWebConsole(aTab) {
+  ok(gDevTools, "gDevTools exists");
+
+  return gDevTools.showToolbox(target, "webconsole").then(function (aToolbox) {
+    toolbox = aToolbox;
+    checkToolLoading();
+  });
+}
+
+function checkToolLoading() {
+  is(toolbox.currentToolId, "webconsole", "The web console is selected");
+  ok(toolbox.isReady, "toolbox is ready");
+
+  selectAndCheckById("jsdebugger").then(function () {
+    selectAndCheckById("styleeditor").then(function () {
+      testToggle();
+    });
+  });
+}
+
+function selectAndCheckById(id) {
+  return toolbox.selectTool(id).then(function () {
+    let tab = toolbox.doc.getElementById("toolbox-tab-" + id);
+    is(tab.hasAttribute("selected"), true, "The " + id + " tab is selected");
+  });
+}
+
+function testToggle() {
+  toolbox.once("destroyed", () => {
+    // Cannot reuse a target after it's destroyed.
+    target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.showToolbox(target, "styleeditor").then(function (aToolbox) {
+      toolbox = aToolbox;
+      is(toolbox.currentToolId, "styleeditor", "The style editor is selected");
+      finishUp();
+    });
+  });
+
+  toolbox.destroy();
+}
+
+function finishUp() {
+  toolbox.destroy().then(function () {
+    toolbox = null;
+    target = null;
+    gBrowser.removeCurrentTab();
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_source_map-01.js b/devtools/client/framework/test/browser_source_map-01.js
new file mode 100644
index 000000000..af1808681
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-01.js
@@ -0,0 +1,115 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Whitelisting this test.
+// As part of bug 1077403, the leaking uncaught rejections should be fixed.
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("[object Object]");
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed(
+  "TypeError: this.transport is null");
+
+/**
+ * Tests the SourceMapService updates generated sources when source maps
+ * are subsequently found. Also checks when no column is provided, and
+ * when tagging an already source mapped location initially.
+ */
+
+// Force the old debugger UI since it's directly used (see Bug 1301705)
+Services.prefs.setBoolPref("devtools.debugger.new-debugger-frontend", false);
+registerCleanupFunction(function* () {
+  Services.prefs.clearUserPref("devtools.debugger.new-debugger-frontend");
+});
+
+const DEBUGGER_ROOT = "http://example.com/browser/devtools/client/debugger/test/mochitest/";
+// Empty page
+const PAGE_URL = `${DEBUGGER_ROOT}doc_empty-tab-01.html`;
+const JS_URL = `${URL_ROOT}code_binary_search.js`;
+const COFFEE_URL = `${URL_ROOT}code_binary_search.coffee`;
+const { SourceMapService } = require("devtools/client/framework/source-map-service");
+const { serialize } = require("devtools/client/framework/location-store");
+
+add_task(function* () {
+  const toolbox = yield openNewTabAndToolbox(PAGE_URL, "jsdebugger");
+  const service = new SourceMapService(toolbox.target);
+  let aggregator = new Map();
+
+  function onUpdate(e, oldLoc, newLoc) {
+    if (oldLoc.line === 6) {
+      checkLoc1(oldLoc, newLoc);
+    } else if (oldLoc.line === 8) {
+      checkLoc2(oldLoc, newLoc);
+    } else {
+      throw new Error(`Unexpected location update: ${JSON.stringify(oldLoc)}`);
+    }
+    aggregator.set(serialize(oldLoc), newLoc);
+  }
+
+  let loc1 = { url: JS_URL, line: 6 };
+  let loc2 = { url: JS_URL, line: 8, column: 3 };
+
+  service.subscribe(loc1, onUpdate);
+  service.subscribe(loc2, onUpdate);
+
+  // Inject JS script
+  let sourceShown = waitForSourceShown(toolbox.getCurrentPanel(), "code_binary_search");
+  yield createScript(JS_URL);
+  yield sourceShown;
+
+  yield waitUntil(() => aggregator.size === 2);
+
+  aggregator = Array.from(aggregator.values());
+
+  ok(aggregator.find(i => i.url === COFFEE_URL && i.line === 4), "found first updated location");
+  ok(aggregator.find(i => i.url === COFFEE_URL && i.line === 6), "found second updated location");
+
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  finish();
+});
+
+function checkLoc1(oldLoc, newLoc) {
+  is(oldLoc.line, 6, "Correct line for JS:6");
+  is(oldLoc.column, null, "Correct column for JS:6");
+  is(oldLoc.url, JS_URL, "Correct url for JS:6");
+  is(newLoc.line, 4, "Correct line for JS:6 -> COFFEE");
+  is(newLoc.column, 2, "Correct column for JS:6 -> COFFEE -- handles falsy column entries");
+  is(newLoc.url, COFFEE_URL, "Correct url for JS:6 -> COFFEE");
+}
+
+function checkLoc2(oldLoc, newLoc) {
+  is(oldLoc.line, 8, "Correct line for JS:8:3");
+  is(oldLoc.column, 3, "Correct column for JS:8:3");
+  is(oldLoc.url, JS_URL, "Correct url for JS:8:3");
+  is(newLoc.line, 6, "Correct line for JS:8:3 -> COFFEE");
+  is(newLoc.column, 10, "Correct column for JS:8:3 -> COFFEE");
+  is(newLoc.url, COFFEE_URL, "Correct url for JS:8:3 -> COFFEE");
+}
+
+function createScript(url) {
+  info(`Creating script: ${url}`);
+  let mm = getFrameScript();
+  let command = `
+    let script = document.createElement("script");
+    script.setAttribute("src", "${url}");
+    document.body.appendChild(script);
+    null;
+  `;
+  return evalInDebuggee(mm, command);
+}
+
+function waitForSourceShown(debuggerPanel, url) {
+  let { panelWin } = debuggerPanel;
+  let deferred = defer();
+
+  info(`Waiting for source ${url} to be shown in the debugger...`);
+  panelWin.on(panelWin.EVENTS.SOURCE_SHOWN, function onSourceShown(_, source) {
+
+    let sourceUrl = source.url || source.generatedUrl;
+    if (sourceUrl.includes(url)) {
+      panelWin.off(panelWin.EVENTS.SOURCE_SHOWN, onSourceShown);
+      info(`Source shown for ${url}`);
+      deferred.resolve(source);
+    }
+  });
+
+  return deferred.promise;
+}
diff --git a/devtools/client/framework/test/browser_source_map-02.js b/devtools/client/framework/test/browser_source_map-02.js
new file mode 100644
index 000000000..f31ce0175
--- /dev/null
+++ b/devtools/client/framework/test/browser_source_map-02.js
@@ -0,0 +1,113 @@
+/* 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 the SourceMapService updates generated sources when pretty printing
+ * and un pretty printing.
+ */
+
+// Force the old debugger UI since it's directly used (see Bug 1301705)
+Services.prefs.setBoolPref("devtools.debugger.new-debugger-frontend", false);
+registerCleanupFunction(function* () {
+  Services.prefs.clearUserPref("devtools.debugger.new-debugger-frontend");
+});
+
+const DEBUGGER_ROOT = "http://example.com/browser/devtools/client/debugger/test/mochitest/";
+// Empty page
+const PAGE_URL = `${DEBUGGER_ROOT}doc_empty-tab-01.html`;
+const JS_URL = `${URL_ROOT}code_ugly.js`;
+const { SourceMapService } = require("devtools/client/framework/source-map-service");
+
+add_task(function* () {
+  let toolbox = yield openNewTabAndToolbox(PAGE_URL, "jsdebugger");
+
+  let service = new SourceMapService(toolbox.target);
+
+  let checkedPretty = false;
+  let checkedUnpretty = false;
+
+  function onUpdate(e, oldLoc, newLoc) {
+    if (oldLoc.line === 3) {
+      checkPrettified(oldLoc, newLoc);
+      checkedPretty = true;
+    } else if (oldLoc.line === 9) {
+      checkUnprettified(oldLoc, newLoc);
+      checkedUnpretty = true;
+    } else {
+      throw new Error(`Unexpected location update: ${JSON.stringify(oldLoc)}`);
+    }
+  }
+  const loc1 = { url: JS_URL, line: 3 };
+  service.subscribe(loc1, onUpdate);
+
+  // Inject JS script
+  let sourceShown = waitForSourceShown(toolbox.getCurrentPanel(), "code_ugly.js");
+  yield createScript(JS_URL);
+  yield sourceShown;
+
+  let ppButton = toolbox.getCurrentPanel().panelWin.document.getElementById("pretty-print");
+  sourceShown = waitForSourceShown(toolbox.getCurrentPanel(), "code_ugly.js");
+  ppButton.click();
+  yield sourceShown;
+  yield waitUntil(() => checkedPretty);
+
+  // TODO check unprettified change once bug 1177446 fixed
+  // info("Testing un-pretty printing.");
+  // sourceShown = waitForSourceShown(toolbox.getCurrentPanel(), "code_ugly.js");
+  // ppButton.click();
+  // yield sourceShown;
+  // yield waitUntil(() => checkedUnpretty);
+
+
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  finish();
+});
+
+function checkPrettified(oldLoc, newLoc) {
+  is(oldLoc.line, 3, "Correct line for JS:3");
+  is(oldLoc.column, null, "Correct column for JS:3");
+  is(oldLoc.url, JS_URL, "Correct url for JS:3");
+  is(newLoc.line, 9, "Correct line for JS:3 -> PRETTY");
+  is(newLoc.column, 0, "Correct column for JS:3 -> PRETTY");
+  is(newLoc.url, JS_URL, "Correct url for JS:3 -> PRETTY");
+}
+
+function checkUnprettified(oldLoc, newLoc) {
+  is(oldLoc.line, 9, "Correct line for JS:3 -> PRETTY");
+  is(oldLoc.column, 0, "Correct column for JS:3 -> PRETTY");
+  is(oldLoc.url, JS_URL, "Correct url for JS:3 -> PRETTY");
+  is(newLoc.line, 3, "Correct line for JS:3 -> UNPRETTIED");
+  is(newLoc.column, null, "Correct column for JS:3 -> UNPRETTIED");
+  is(newLoc.url, JS_URL, "Correct url for JS:3 -> UNPRETTIED");
+}
+
+function createScript(url) {
+  info(`Creating script: ${url}`);
+  let mm = getFrameScript();
+  let command = `
+    let script = document.createElement("script");
+    script.setAttribute("src", "${url}");
+    document.body.appendChild(script);
+  `;
+  return evalInDebuggee(mm, command);
+}
+
+function waitForSourceShown(debuggerPanel, url) {
+  let { panelWin } = debuggerPanel;
+  let deferred = defer();
+
+  info(`Waiting for source ${url} to be shown in the debugger...`);
+  panelWin.on(panelWin.EVENTS.SOURCE_SHOWN, function onSourceShown(_, source) {
+    let sourceUrl = source.url || source.introductionUrl;
+
+    if (sourceUrl.includes(url)) {
+      panelWin.off(panelWin.EVENTS.SOURCE_SHOWN, onSourceShown);
+      info(`Source shown for ${url}`);
+      deferred.resolve(source);
+    }
+  });
+
+  return deferred.promise;
+}
diff --git a/devtools/client/framework/test/browser_target_events.js b/devtools/client/framework/test/browser_target_events.js
new file mode 100644
index 000000000..d0054a484
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_events.js
@@ -0,0 +1,56 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+var target;
+
+function test()
+{
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser).then(onLoad);
+}
+
+function onLoad() {
+  target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  is(target.tab, gBrowser.selectedTab, "Target linked to the right tab.");
+
+  target.once("hidden", onHidden);
+  gBrowser.selectedTab = gBrowser.addTab();
+}
+
+function onHidden() {
+  ok(true, "Hidden event received");
+  target.once("visible", onVisible);
+  gBrowser.removeCurrentTab();
+}
+
+function onVisible() {
+  ok(true, "Visible event received");
+  target.once("will-navigate", onWillNavigate);
+  let mm = getFrameScript();
+  mm.sendAsyncMessage("devtools:test:navigate", { location: "data:text/html,<meta charset='utf8'/>test navigation" });
+}
+
+function onWillNavigate(event, request) {
+  ok(true, "will-navigate event received");
+  // Wait for navigation handling to complete before removing the tab, in order
+  // to avoid triggering assertions.
+  target.once("navigate", executeSoon.bind(null, onNavigate));
+}
+
+function onNavigate() {
+  ok(true, "navigate event received");
+  target.once("close", onClose);
+  gBrowser.removeCurrentTab();
+}
+
+function onClose() {
+  ok(true, "close event received");
+
+  target = null;
+  finish();
+}
diff --git a/devtools/client/framework/test/browser_target_from_url.js b/devtools/client/framework/test/browser_target_from_url.js
new file mode 100644
index 000000000..0707ee7d7
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_from_url.js
@@ -0,0 +1,133 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_URI = "data:text/html;charset=utf-8," +
+  "<p>browser_target-from-url.js</p>";
+
+const { DevToolsLoader } = Cu.import("resource://devtools/shared/Loader.jsm", {});
+const { targetFromURL } = require("devtools/client/framework/target-from-url");
+
+Services.prefs.setBoolPref("devtools.debugger.remote-enabled", true);
+Services.prefs.setBoolPref("devtools.debugger.prompt-connection", false);
+
+SimpleTest.registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.debugger.remote-enabled");
+  Services.prefs.clearUserPref("devtools.debugger.prompt-connection");
+});
+
+function assertIsTabTarget(target, url, chrome = false) {
+  is(target.url, url);
+  is(target.isLocalTab, false);
+  is(target.chrome, chrome);
+  is(target.isTabActor, true);
+  is(target.isRemote, true);
+}
+
+add_task(function* () {
+  let tab = yield addTab(TEST_URI);
+  let browser = tab.linkedBrowser;
+  let target;
+
+  info("Test invalid type");
+  try {
+    yield targetFromURL(new URL("http://foo?type=x"));
+    ok(false, "Shouldn't pass");
+  } catch (e) {
+    is(e.message, "targetFromURL, unsupported type='x' parameter");
+  }
+
+  info("Test tab");
+  let windowId = browser.outerWindowID;
+  target = yield targetFromURL(new URL("http://foo?type=tab&id=" + windowId));
+  assertIsTabTarget(target, TEST_URI);
+
+  info("Test tab with chrome privileges");
+  target = yield targetFromURL(new URL("http://foo?type=tab&id=" + windowId + "&chrome"));
+  assertIsTabTarget(target, TEST_URI, true);
+
+  info("Test invalid tab id");
+  try {
+    yield targetFromURL(new URL("http://foo?type=tab&id=10000"));
+    ok(false, "Shouldn't pass");
+  } catch (e) {
+    is(e.message, "targetFromURL, tab with outerWindowID:'10000' doesn't exist");
+  }
+
+  info("Test parent process");
+  target = yield targetFromURL(new URL("http://foo?type=process"));
+  let topWindow = Services.wm.getMostRecentWindow("navigator:browser");
+  assertIsTabTarget(target, topWindow.location.href, true);
+
+  yield testRemoteTCP();
+  yield testRemoteWebSocket();
+
+  gBrowser.removeCurrentTab();
+});
+
+function* setupDebuggerServer(websocket) {
+  info("Create a separate loader instance for the DebuggerServer.");
+  let loader = new DevToolsLoader();
+  let { DebuggerServer } = loader.require("devtools/server/main");
+
+  DebuggerServer.init();
+  DebuggerServer.addBrowserActors();
+  DebuggerServer.allowChromeProcess = true;
+
+  let listener = DebuggerServer.createListener();
+  ok(listener, "Socket listener created");
+  // Pass -1 to automatically choose an available port
+  listener.portOrPath = -1;
+  listener.webSocket = websocket;
+  yield listener.open();
+  is(DebuggerServer.listeningSockets, 1, "1 listening socket");
+
+  return { DebuggerServer, listener };
+}
+
+function teardownDebuggerServer({ DebuggerServer, listener }) {
+  info("Close the listener socket");
+  listener.close();
+  is(DebuggerServer.listeningSockets, 0, "0 listening sockets");
+
+  info("Destroy the temporary debugger server");
+  DebuggerServer.destroy();
+}
+
+function* testRemoteTCP() {
+  info("Test remote process via TCP Connection");
+
+  let server = yield setupDebuggerServer(false);
+
+  let { port } = server.listener;
+  let target = yield targetFromURL(new URL("http://foo?type=process&host=127.0.0.1&port=" + port));
+  let topWindow = Services.wm.getMostRecentWindow("navigator:browser");
+  assertIsTabTarget(target, topWindow.location.href, true);
+
+  let settings = target.client._transport.connectionSettings;
+  is(settings.host, "127.0.0.1");
+  is(settings.port, port);
+  is(settings.webSocket, false);
+
+  yield target.client.close();
+
+  teardownDebuggerServer(server);
+}
+
+function* testRemoteWebSocket() {
+  info("Test remote process via WebSocket Connection");
+
+  let server = yield setupDebuggerServer(true);
+
+  let { port } = server.listener;
+  let target = yield targetFromURL(new URL("http://foo?type=process&host=127.0.0.1&port=" + port + "&ws=true"));
+  let topWindow = Services.wm.getMostRecentWindow("navigator:browser");
+  assertIsTabTarget(target, topWindow.location.href, true);
+
+  let settings = target.client._transport.connectionSettings;
+  is(settings.host, "127.0.0.1");
+  is(settings.port, port);
+  is(settings.webSocket, true);
+  yield target.client.close();
+
+  teardownDebuggerServer(server);
+}
diff --git a/devtools/client/framework/test/browser_target_remote.js b/devtools/client/framework/test/browser_target_remote.js
new file mode 100644
index 000000000..b828d14ff
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_remote.js
@@ -0,0 +1,25 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+// Ensure target is closed if client is closed directly
+function test() {
+  waitForExplicitFinish();
+
+  getChromeActors((client, response) => {
+    let options = {
+      form: response,
+      client: client,
+      chrome: true
+    };
+
+    TargetFactory.forRemoteTab(options).then(target => {
+      target.on("close", () => {
+        ok(true, "Target was closed");
+        finish();
+      });
+      client.close();
+    });
+  });
+}
diff --git a/devtools/client/framework/test/browser_target_support.js b/devtools/client/framework/test/browser_target_support.js
new file mode 100644
index 000000000..0cdbd565a
--- /dev/null
+++ b/devtools/client/framework/test/browser_target_support.js
@@ -0,0 +1,74 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 support methods on Target, such as `hasActor`, `getActorDescription`,
+// `actorHasMethod` and `getTrait`.
+
+var { WebAudioFront } =
+  require("devtools/shared/fronts/webaudio");
+
+function* testTarget(client, target) {
+  yield target.makeRemote();
+
+  is(target.hasActor("timeline"), true, "target.hasActor() true when actor exists.");
+  is(target.hasActor("webaudio"), true, "target.hasActor() true when actor exists.");
+  is(target.hasActor("notreal"), false, "target.hasActor() false when actor does not exist.");
+  // Create a front to ensure the actor is loaded
+  let front = new WebAudioFront(target.client, target.form);
+
+  let desc = yield target.getActorDescription("webaudio");
+  is(desc.typeName, "webaudio",
+    "target.getActorDescription() returns definition data for corresponding actor");
+  is(desc.events["start-context"]["type"], "startContext",
+    "target.getActorDescription() returns event data for corresponding actor");
+
+  desc = yield target.getActorDescription("nope");
+  is(desc, undefined, "target.getActorDescription() returns undefined for non-existing actor");
+  desc = yield target.getActorDescription();
+  is(desc, undefined, "target.getActorDescription() returns undefined for undefined actor");
+
+  let hasMethod = yield target.actorHasMethod("audionode", "getType");
+  is(hasMethod, true,
+    "target.actorHasMethod() returns true for existing actor with method");
+  hasMethod = yield target.actorHasMethod("audionode", "nope");
+  is(hasMethod, false,
+    "target.actorHasMethod() returns false for existing actor with no method");
+  hasMethod = yield target.actorHasMethod("nope", "nope");
+  is(hasMethod, false,
+    "target.actorHasMethod() returns false for non-existing actor with no method");
+  hasMethod = yield target.actorHasMethod();
+  is(hasMethod, false,
+    "target.actorHasMethod() returns false for undefined params");
+
+  is(target.getTrait("customHighlighters"), true,
+    "target.getTrait() returns boolean when trait exists");
+  is(target.getTrait("giddyup"), undefined,
+    "target.getTrait() returns undefined when trait does not exist");
+
+  close(target, client);
+}
+
+// Ensure target is closed if client is closed directly
+function test() {
+  waitForExplicitFinish();
+
+  getChromeActors((client, response) => {
+    let options = {
+      form: response,
+      client: client,
+      chrome: true
+    };
+
+    TargetFactory.forRemoteTab(options).then(Task.async(testTarget).bind(null, client));
+  });
+}
+
+function close(target, client) {
+  target.on("close", () => {
+    ok(true, "Target was closed");
+    finish();
+  });
+  client.close();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_custom_host.js b/devtools/client/framework/test/browser_toolbox_custom_host.js
new file mode 100644
index 000000000..5d3aeed54
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_custom_host.js
@@ -0,0 +1,57 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+const TEST_URL = "data:text/html,test custom host";
+
+function test() {
+  let {Toolbox} = require("devtools/client/framework/toolbox");
+
+  let toolbox, iframe, target;
+
+  window.addEventListener("message", onMessage);
+
+  iframe = document.createElement("iframe");
+  document.documentElement.appendChild(iframe);
+
+  addTab(TEST_URL).then(function (tab) {
+    target = TargetFactory.forTab(tab);
+    let options = {customIframe: iframe};
+    gDevTools.showToolbox(target, null, Toolbox.HostType.CUSTOM, options)
+             .then(testCustomHost, console.error)
+             .then(null, console.error);
+  });
+
+  function onMessage(event) {
+    if (typeof(event.data) !== "string") {
+      return;
+    }
+    info("onMessage: " + event.data);
+    let json = JSON.parse(event.data);
+    if (json.name == "toolbox-close") {
+      ok("Got the `toolbox-close` message");
+      window.removeEventListener("message", onMessage);
+      cleanup();
+    }
+  }
+
+  function testCustomHost(t) {
+    toolbox = t;
+    is(toolbox.win.top, window, "Toolbox is included in browser.xul");
+    is(toolbox.doc, iframe.contentDocument, "Toolbox is in the custom iframe");
+    executeSoon(() => gBrowser.removeCurrentTab());
+  }
+
+  function cleanup() {
+    iframe.remove();
+
+    // Even if we received "toolbox-close", the toolbox may still be destroying
+    // toolbox.destroy() returns a singleton promise that ensures
+    // everything is cleaned up before proceeding.
+    toolbox.destroy().then(() => {
+      toolbox = iframe = target = null;
+      finish();
+    });
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_dynamic_registration.js b/devtools/client/framework/test/browser_toolbox_dynamic_registration.js
new file mode 100644
index 000000000..2583ca68e
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_dynamic_registration.js
@@ -0,0 +1,105 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+const TEST_URL = "data:text/html,test for dynamically registering and unregistering tools";
+
+var toolbox;
+
+function test()
+{
+  addTab(TEST_URL).then(tab => {
+    let target = TargetFactory.forTab(tab);
+    gDevTools.showToolbox(target).then(testRegister);
+  });
+}
+
+function testRegister(aToolbox)
+{
+  toolbox = aToolbox;
+  gDevTools.once("tool-registered", toolRegistered);
+
+  gDevTools.registerTool({
+    id: "test-tool",
+    label: "Test Tool",
+    inMenu: true,
+    isTargetSupported: () => true,
+    build: function () {},
+    key: "t"
+  });
+}
+
+function toolRegistered(event, toolId)
+{
+  is(toolId, "test-tool", "tool-registered event handler sent tool id");
+
+  ok(gDevTools.getToolDefinitionMap().has(toolId), "tool added to map");
+
+  // test that it appeared in the UI
+  let doc = toolbox.doc;
+  let tab = doc.getElementById("toolbox-tab-" + toolId);
+  ok(tab, "new tool's tab exists in toolbox UI");
+
+  let panel = doc.getElementById("toolbox-panel-" + toolId);
+  ok(panel, "new tool's panel exists in toolbox UI");
+
+  for (let win of getAllBrowserWindows()) {
+    let key = win.document.getElementById("key_" + toolId);
+    ok(key, "key for new tool added to every browser window");
+    let menuitem = win.document.getElementById("menuitem_" + toolId);
+    ok(menuitem, "menu item of new tool added to every browser window");
+  }
+
+  // then unregister it
+  testUnregister();
+}
+
+function getAllBrowserWindows() {
+  let wins = [];
+  let enumerator = Services.wm.getEnumerator("navigator:browser");
+  while (enumerator.hasMoreElements()) {
+    wins.push(enumerator.getNext());
+  }
+  return wins;
+}
+
+function testUnregister()
+{
+  gDevTools.once("tool-unregistered", toolUnregistered);
+
+  gDevTools.unregisterTool("test-tool");
+}
+
+function toolUnregistered(event, toolDefinition)
+{
+  let toolId = toolDefinition.id;
+  is(toolId, "test-tool", "tool-unregistered event handler sent tool id");
+
+  ok(!gDevTools.getToolDefinitionMap().has(toolId), "tool removed from map");
+
+  // test that it disappeared from the UI
+  let doc = toolbox.doc;
+  let tab = doc.getElementById("toolbox-tab-" + toolId);
+  ok(!tab, "tool's tab was removed from the toolbox UI");
+
+  let panel = doc.getElementById("toolbox-panel-" + toolId);
+  ok(!panel, "tool's panel was removed from toolbox UI");
+
+  for (let win of getAllBrowserWindows()) {
+    let key = win.document.getElementById("key_" + toolId);
+    ok(!key, "key removed from every browser window");
+    let menuitem = win.document.getElementById("menuitem_" + toolId);
+    ok(!menuitem, "menu item removed from every browser window");
+  }
+
+  cleanup();
+}
+
+function cleanup()
+{
+  toolbox.destroy();
+  toolbox = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_getpanelwhenready.js b/devtools/client/framework/test/browser_toolbox_getpanelwhenready.js
new file mode 100644
index 000000000..21dd236a1
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_getpanelwhenready.js
@@ -0,0 +1,36 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 getPanelWhenReady returns the correct panel in promise
+// resolutions regardless of whether it has opened first.
+
+var toolbox = null;
+
+const URL = "data:text/html;charset=utf8,test for getPanelWhenReady";
+
+add_task(function* () {
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  toolbox = yield gDevTools.showToolbox(target);
+
+  let debuggerPanelPromise = toolbox.getPanelWhenReady("jsdebugger");
+  yield toolbox.selectTool("jsdebugger");
+  let debuggerPanel = yield debuggerPanelPromise;
+
+  is(debuggerPanel, toolbox.getPanel("jsdebugger"),
+      "The debugger panel from getPanelWhenReady before loading is the actual panel");
+
+  let debuggerPanel2 = yield toolbox.getPanelWhenReady("jsdebugger");
+  is(debuggerPanel2, toolbox.getPanel("jsdebugger"),
+      "The debugger panel from getPanelWhenReady after loading is the actual panel");
+
+  yield cleanup();
+});
+
+function* cleanup() {
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  toolbox = null;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_highlight.js b/devtools/client/framework/test/browser_toolbox_highlight.js
new file mode 100644
index 000000000..d197fdc99
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_highlight.js
@@ -0,0 +1,81 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+var toolbox = null;
+
+function test() {
+  const URL = "data:text/plain;charset=UTF-8,Nothing to see here, move along";
+
+  const TOOL_ID_1 = "jsdebugger";
+  const TOOL_ID_2 = "webconsole";
+
+  addTab(URL).then(() => {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.showToolbox(target, TOOL_ID_1, Toolbox.HostType.BOTTOM)
+             .then(aToolbox => {
+               toolbox = aToolbox;
+                // select tool 2
+               toolbox.selectTool(TOOL_ID_2)
+                       // and highlight the first one
+                       .then(highlightTab.bind(null, TOOL_ID_1))
+                       // to see if it has the proper class.
+                       .then(checkHighlighted.bind(null, TOOL_ID_1))
+                       // Now switch back to first tool
+                       .then(() => toolbox.selectTool(TOOL_ID_1))
+                       // to check again. But there is no easy way to test if
+                       // it is showing orange or not.
+                       .then(checkNoHighlightWhenSelected.bind(null, TOOL_ID_1))
+                       // Switch to tool 2 again
+                       .then(() => toolbox.selectTool(TOOL_ID_2))
+                       // and check again.
+                       .then(checkHighlighted.bind(null, TOOL_ID_1))
+                       // Now unhighlight the tool
+                       .then(unhighlightTab.bind(null, TOOL_ID_1))
+                       // to see the classes gone.
+                       .then(checkNoHighlight.bind(null, TOOL_ID_1))
+                       // Now close the toolbox and exit.
+                       .then(() => executeSoon(() => {
+                         toolbox.destroy()
+                                 .then(() => {
+                                   toolbox = null;
+                                   gBrowser.removeCurrentTab();
+                                   finish();
+                                 });
+                       }));
+             });
+  });
+}
+
+function highlightTab(toolId) {
+  info("Highlighting tool " + toolId + "'s tab.");
+  toolbox.highlightTool(toolId);
+}
+
+function unhighlightTab(toolId) {
+  info("Unhighlighting tool " + toolId + "'s tab.");
+  toolbox.unhighlightTool(toolId);
+}
+
+function checkHighlighted(toolId) {
+  let tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(tab.hasAttribute("highlighted"), "The highlighted attribute is present");
+  ok(!tab.hasAttribute("selected") || tab.getAttribute("selected") != "true",
+     "The tab is not selected");
+}
+
+function checkNoHighlightWhenSelected(toolId) {
+  let tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(tab.hasAttribute("highlighted"), "The highlighted attribute is present");
+  ok(tab.hasAttribute("selected") && tab.getAttribute("selected") == "true",
+     "and the tab is selected, so the orange glow will not be present.");
+}
+
+function checkNoHighlight(toolId) {
+  let tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(!tab.hasAttribute("highlighted"),
+     "The highlighted attribute is not present");
+}
diff --git a/devtools/client/framework/test/browser_toolbox_hosts.js b/devtools/client/framework/test/browser_toolbox_hosts.js
new file mode 100644
index 000000000..e16563ba7
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_hosts.js
@@ -0,0 +1,139 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+var {SIDE, BOTTOM, WINDOW} = Toolbox.HostType;
+var toolbox, target;
+
+const URL = "data:text/html;charset=utf8,test for opening toolbox in different hosts";
+
+add_task(function* runTest() {
+  info("Create a test tab and open the toolbox");
+  let tab = yield addTab(URL);
+  target = TargetFactory.forTab(tab);
+  toolbox = yield gDevTools.showToolbox(target, "webconsole");
+
+  yield testBottomHost();
+  yield testSidebarHost();
+  yield testWindowHost();
+  yield testToolSelect();
+  yield testDestroy();
+  yield testRememberHost();
+  yield testPreviousHost();
+
+  yield toolbox.destroy();
+
+  toolbox = target = null;
+  gBrowser.removeCurrentTab();
+});
+
+function* testBottomHost() {
+  checkHostType(toolbox, BOTTOM);
+
+  // test UI presence
+  let nbox = gBrowser.getNotificationBox();
+  let iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-bottom-iframe");
+  ok(iframe, "toolbox bottom iframe exists");
+
+  checkToolboxLoaded(iframe);
+}
+
+function* testSidebarHost() {
+  yield toolbox.switchHost(SIDE);
+  checkHostType(toolbox, SIDE);
+
+  // test UI presence
+  let nbox = gBrowser.getNotificationBox();
+  let bottom = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-bottom-iframe");
+  ok(!bottom, "toolbox bottom iframe doesn't exist");
+
+  let iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
+  ok(iframe, "toolbox side iframe exists");
+
+  checkToolboxLoaded(iframe);
+}
+
+function* testWindowHost() {
+  yield toolbox.switchHost(WINDOW);
+  checkHostType(toolbox, WINDOW);
+
+  let nbox = gBrowser.getNotificationBox();
+  let sidebar = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
+  ok(!sidebar, "toolbox sidebar iframe doesn't exist");
+
+  let win = Services.wm.getMostRecentWindow("devtools:toolbox");
+  ok(win, "toolbox separate window exists");
+
+  let iframe = win.document.getElementById("toolbox-iframe");
+  checkToolboxLoaded(iframe);
+}
+
+function* testToolSelect() {
+  // make sure we can load a tool after switching hosts
+  yield toolbox.selectTool("inspector");
+}
+
+function* testDestroy() {
+  yield toolbox.destroy();
+  target = TargetFactory.forTab(gBrowser.selectedTab);
+  toolbox = yield gDevTools.showToolbox(target);
+}
+
+function* testRememberHost() {
+  // last host was the window - make sure it's the same when re-opening
+  is(toolbox.hostType, WINDOW, "host remembered");
+
+  let win = Services.wm.getMostRecentWindow("devtools:toolbox");
+  ok(win, "toolbox separate window exists");
+}
+
+function* testPreviousHost() {
+  // last host was the window - make sure it's the same when re-opening
+  is(toolbox.hostType, WINDOW, "host remembered");
+
+  info("Switching to side");
+  yield toolbox.switchHost(SIDE);
+  checkHostType(toolbox, SIDE, WINDOW);
+
+  info("Switching to bottom");
+  yield toolbox.switchHost(BOTTOM);
+  checkHostType(toolbox, BOTTOM, SIDE);
+
+  info("Switching from bottom to side");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, SIDE, BOTTOM);
+
+  info("Switching from side to bottom");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, BOTTOM, SIDE);
+
+  info("Switching to window");
+  yield toolbox.switchHost(WINDOW);
+  checkHostType(toolbox, WINDOW, BOTTOM);
+
+  info("Switching from window to bottom");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, BOTTOM, WINDOW);
+
+  info("Forcing the previous host to match the current (bottom)");
+  Services.prefs.setCharPref("devtools.toolbox.previousHost", BOTTOM);
+
+  info("Switching from bottom to side (since previous=current=bottom");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, SIDE, BOTTOM);
+
+  info("Forcing the previous host to match the current (side)");
+  Services.prefs.setCharPref("devtools.toolbox.previousHost", SIDE);
+  info("Switching from side to bottom (since previous=current=side");
+  yield toolbox.switchToPreviousHost();
+  checkHostType(toolbox, BOTTOM, SIDE);
+}
+
+function checkToolboxLoaded(iframe) {
+  let tabs = iframe.contentDocument.getElementById("toolbox-tabs");
+  ok(tabs, "toolbox UI has been loaded into iframe");
+}
diff --git a/devtools/client/framework/test/browser_toolbox_hosts_size.js b/devtools/client/framework/test/browser_toolbox_hosts_size.js
new file mode 100644
index 000000000..4286fe438
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_hosts_size.js
@@ -0,0 +1,69 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 getPanelWhenReady returns the correct panel in promise
+// resolutions regardless of whether it has opened first.
+
+const URL = "data:text/html;charset=utf8,test for host sizes";
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+add_task(function* () {
+  // Set size prefs to make the hosts way too big, so that the size has
+  // to be clamped to fit into the browser window.
+  Services.prefs.setIntPref("devtools.toolbox.footer.height", 10000);
+  Services.prefs.setIntPref("devtools.toolbox.sidebar.width", 10000);
+
+  let tab = yield addTab(URL);
+  let nbox = gBrowser.getNotificationBox();
+  let {clientHeight: nboxHeight, clientWidth: nboxWidth} = nbox;
+  let toolbox = yield gDevTools.showToolbox(TargetFactory.forTab(tab));
+
+  is(nbox.clientHeight, nboxHeight, "Opening the toolbox hasn't changed the height of the nbox");
+  is(nbox.clientWidth, nboxWidth, "Opening the toolbox hasn't changed the width of the nbox");
+
+  let iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-bottom-iframe");
+  is(iframe.clientHeight, nboxHeight - 25, "The iframe fits within the available space");
+
+  yield toolbox.switchHost(Toolbox.HostType.SIDE);
+  iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
+  iframe.style.minWidth = "1px"; // Disable the min width set in css
+  is(iframe.clientWidth, nboxWidth - 25, "The iframe fits within the available space");
+
+  yield cleanup(toolbox);
+});
+
+add_task(function* () {
+  // Set size prefs to something reasonable, so we can check to make sure
+  // they are being set properly.
+  Services.prefs.setIntPref("devtools.toolbox.footer.height", 100);
+  Services.prefs.setIntPref("devtools.toolbox.sidebar.width", 100);
+
+  let tab = yield addTab(URL);
+  let nbox = gBrowser.getNotificationBox();
+  let {clientHeight: nboxHeight, clientWidth: nboxWidth} = nbox;
+  let toolbox = yield gDevTools.showToolbox(TargetFactory.forTab(tab));
+
+  is(nbox.clientHeight, nboxHeight, "Opening the toolbox hasn't changed the height of the nbox");
+  is(nbox.clientWidth, nboxWidth, "Opening the toolbox hasn't changed the width of the nbox");
+
+  let iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-bottom-iframe");
+  is(iframe.clientHeight, 100, "The iframe is resized properly");
+
+  yield toolbox.switchHost(Toolbox.HostType.SIDE);
+  iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
+  iframe.style.minWidth = "1px"; // Disable the min width set in css
+  is(iframe.clientWidth, 100, "The iframe is resized properly");
+
+  yield cleanup(toolbox);
+});
+
+function* cleanup(toolbox) {
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+  Services.prefs.clearUserPref("devtools.toolbox.footer.height");
+  Services.prefs.clearUserPref("devtools.toolbox.sidebar.width");
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_hosts_telemetry.js b/devtools/client/framework/test/browser_toolbox_hosts_telemetry.js
new file mode 100644
index 000000000..f8ff9b3e4
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_hosts_telemetry.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {Toolbox} = require("devtools/client/framework/toolbox");
+const {SIDE, BOTTOM, WINDOW} = Toolbox.HostType;
+
+const URL = "data:text/html;charset=utf8,browser_toolbox_hosts_telemetry.js";
+
+function getHostHistogram() {
+  return Services.telemetry.getHistogramById("DEVTOOLS_TOOLBOX_HOST");
+}
+
+add_task(function* () {
+  // Reset it to make counting easier
+  getHostHistogram().clear();
+
+  info("Create a test tab and open the toolbox");
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  let toolbox = yield gDevTools.showToolbox(target, "webconsole");
+
+  yield changeToolboxHost(toolbox);
+  yield checkResults();
+  yield toolbox.destroy();
+
+  toolbox = target = null;
+  gBrowser.removeCurrentTab();
+
+  // Cleanup
+  getHostHistogram().clear();
+});
+
+function* changeToolboxHost(toolbox) {
+  info("Switch toolbox host");
+  yield toolbox.switchHost(SIDE);
+  yield toolbox.switchHost(WINDOW);
+  yield toolbox.switchHost(BOTTOM);
+  yield toolbox.switchHost(SIDE);
+  yield toolbox.switchHost(WINDOW);
+  yield toolbox.switchHost(BOTTOM);
+}
+
+function checkResults() {
+  let counts = getHostHistogram().snapshot().counts;
+  is(counts[0], 3, "Toolbox HostType bottom has 3 successful entries");
+  is(counts[1], 2, "Toolbox HostType side has 2 successful entries");
+  is(counts[2], 2, "Toolbox HostType window has 2 successful entries");
+}
diff --git a/devtools/client/framework/test/browser_toolbox_keyboard_navigation.js b/devtools/client/framework/test/browser_toolbox_keyboard_navigation.js
new file mode 100644
index 000000000..a22f87064
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_keyboard_navigation.js
@@ -0,0 +1,81 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Tests keyboard navigation of devtools tabbar.
+
+const TEST_URL =
+  "data:text/html;charset=utf8,test page for toolbar keyboard navigation";
+
+function containsFocus(aDoc, aElm) {
+  let elm = aDoc.activeElement;
+  while (elm) {
+    if (elm === aElm) { return true; }
+    elm = elm.parentNode;
+  }
+  return false;
+}
+
+add_task(function* () {
+  info("Create a test tab and open the toolbox");
+  let toolbox = yield openNewTabAndToolbox(TEST_URL, "webconsole");
+  let doc = toolbox.doc;
+
+  let toolbar = doc.querySelector(".devtools-tabbar");
+  let toolbarControls = [...toolbar.querySelectorAll(
+    ".devtools-tab, button")].filter(elm =>
+      !elm.hidden && doc.defaultView.getComputedStyle(elm).getPropertyValue(
+        "display") !== "none");
+
+  // Put the keyboard focus onto the first toolbar control.
+  toolbarControls[0].focus();
+  ok(containsFocus(doc, toolbar), "Focus is within the toolbar");
+
+  // Move the focus away from toolbar to a next focusable element.
+  EventUtils.synthesizeKey("VK_TAB", {});
+  ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
+
+  // Move the focus back to the toolbar.
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true });
+  ok(containsFocus(doc, toolbar), "Focus is within the toolbar again");
+
+  // Move through the toolbar forward using the right arrow key.
+  for (let i = 0; i < toolbarControls.length; ++i) {
+    is(doc.activeElement.id, toolbarControls[i].id, "New control is focused");
+    if (i < toolbarControls.length - 1) {
+      EventUtils.synthesizeKey("VK_RIGHT", {});
+    }
+  }
+
+  // Move the focus away from toolbar to a next focusable element.
+  EventUtils.synthesizeKey("VK_TAB", {});
+  ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
+
+  // Move the focus back to the toolbar.
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true });
+  ok(containsFocus(doc, toolbar), "Focus is within the toolbar again");
+
+  // Move through the toolbar backward using the left arrow key.
+  for (let i = toolbarControls.length - 1; i >= 0; --i) {
+    is(doc.activeElement.id, toolbarControls[i].id, "New control is focused");
+    if (i > 0) { EventUtils.synthesizeKey("VK_LEFT", {}); }
+  }
+
+  // Move focus to the 3rd (non-first) toolbar control.
+  let expectedFocusedControl = toolbarControls[2];
+  EventUtils.synthesizeKey("VK_RIGHT", {});
+  EventUtils.synthesizeKey("VK_RIGHT", {});
+  is(doc.activeElement.id, expectedFocusedControl.id, "New control is focused");
+
+  // Move the focus away from toolbar to a next focusable element.
+  EventUtils.synthesizeKey("VK_TAB", {});
+  ok(!containsFocus(doc, toolbar), "Focus is outside of the toolbar");
+
+  // Move the focus back to the toolbar, ensure we land on the last active
+  // descendant control.
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true });
+  is(doc.activeElement.id, expectedFocusedControl.id, "New control is focused");
+});
diff --git a/devtools/client/framework/test/browser_toolbox_minimize.js b/devtools/client/framework/test/browser_toolbox_minimize.js
new file mode 100644
index 000000000..9b5126320
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_minimize.js
@@ -0,0 +1,106 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test that when the toolbox is displayed in a bottom host, that host can be
+// minimized to just the tabbar height, and maximized again.
+// Also test that while minimized, switching to a tool, clicking on the
+// settings, or clicking on the selected tool's tab maximizes the toolbox again.
+// Finally test that the minimize button doesn't exist in other host types.
+
+const URL = "data:text/html;charset=utf8,test page";
+const {Toolbox} = require("devtools/client/framework/toolbox");
+
+add_task(function* () {
+  info("Create a test tab and open the toolbox");
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  let toolbox = yield gDevTools.showToolbox(target, "webconsole");
+
+  let button = toolbox.doc.querySelector("#toolbox-dock-bottom-minimize");
+  ok(button, "The minimize button exists in the default bottom host");
+
+  info("Try to minimize the toolbox");
+  yield minimize(toolbox);
+  ok(parseInt(toolbox._host.frame.style.marginBottom, 10) < 0,
+     "The toolbox host has been hidden away with a negative-margin");
+
+  info("Try to maximize again the toolbox");
+  yield maximize(toolbox);
+  ok(parseInt(toolbox._host.frame.style.marginBottom, 10) == 0,
+     "The toolbox host is shown again");
+
+  info("Try to minimize again using the keyboard shortcut");
+  yield minimizeWithShortcut(toolbox);
+  ok(parseInt(toolbox._host.frame.style.marginBottom, 10) < 0,
+     "The toolbox host has been hidden away with a negative-margin");
+
+  info("Try to maximize again using the keyboard shortcut");
+  yield maximizeWithShortcut(toolbox);
+  ok(parseInt(toolbox._host.frame.style.marginBottom, 10) == 0,
+     "The toolbox host is shown again");
+
+  info("Minimize again and switch to another tool");
+  yield minimize(toolbox);
+  let onMaximized = toolbox._host.once("maximized");
+  yield toolbox.selectTool("inspector");
+  yield onMaximized;
+
+  info("Minimize again and click on the tab of the current tool");
+  yield minimize(toolbox);
+  onMaximized = toolbox._host.once("maximized");
+  let tabButton = toolbox.doc.querySelector("#toolbox-tab-inspector");
+  EventUtils.synthesizeMouseAtCenter(tabButton, {}, toolbox.win);
+  yield onMaximized;
+
+  info("Minimize again and click on the settings tab");
+  yield minimize(toolbox);
+  onMaximized = toolbox._host.once("maximized");
+  let settingsButton = toolbox.doc.querySelector("#toolbox-tab-options");
+  EventUtils.synthesizeMouseAtCenter(settingsButton, {}, toolbox.win);
+  yield onMaximized;
+
+  info("Switch to a different host");
+  yield toolbox.switchHost(Toolbox.HostType.SIDE);
+  button = toolbox.doc.querySelector("#toolbox-dock-bottom-minimize");
+  ok(!button, "The minimize button doesn't exist in the side host");
+
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+function* minimize(toolbox) {
+  let button = toolbox.doc.querySelector("#toolbox-dock-bottom-minimize");
+  let onMinimized = toolbox._host.once("minimized");
+  EventUtils.synthesizeMouseAtCenter(button, {}, toolbox.win);
+  yield onMinimized;
+}
+
+function* minimizeWithShortcut(toolbox) {
+  let key = toolbox.doc.getElementById("toolbox-minimize-key")
+                       .getAttribute("key");
+  let onMinimized = toolbox._host.once("minimized");
+  EventUtils.synthesizeKey(key, {accelKey: true, shiftKey: true},
+                           toolbox.win);
+  yield onMinimized;
+}
+
+function* maximize(toolbox) {
+  let button = toolbox.doc.querySelector("#toolbox-dock-bottom-minimize");
+  let onMaximized = toolbox._host.once("maximized");
+  EventUtils.synthesizeMouseAtCenter(button, {}, toolbox.win);
+  yield onMaximized;
+}
+
+function* maximizeWithShortcut(toolbox) {
+  let key = toolbox.doc.getElementById("toolbox-minimize-key")
+                       .getAttribute("key");
+  let onMaximized = toolbox._host.once("maximized");
+  EventUtils.synthesizeKey(key, {accelKey: true, shiftKey: true},
+                           toolbox.win);
+  yield onMaximized;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options.js b/devtools/client/framework/test/browser_toolbox_options.js
new file mode 100644
index 000000000..569ed86fb
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options.js
@@ -0,0 +1,297 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+/* import-globals-from shared-head.js */
+"use strict";
+
+// Tests that changing preferences in the options panel updates the prefs
+// and toggles appropriate things in the toolbox.
+
+var doc = null, toolbox = null, panelWin = null, modifiedPrefs = [];
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+add_task(function* () {
+  const URL = "data:text/html;charset=utf8,test for dynamically registering " +
+              "and unregistering tools";
+  registerNewTool();
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  toolbox = yield gDevTools.showToolbox(target);
+  doc = toolbox.doc;
+  yield testSelectTool();
+  yield testOptionsShortcut();
+  yield testOptions();
+  yield testToggleTools();
+  yield cleanup();
+});
+
+function registerNewTool() {
+  let toolDefinition = {
+    id: "test-tool",
+    isTargetSupported: () => true,
+    visibilityswitch: "devtools.test-tool.enabled",
+    url: "about:blank",
+    label: "someLabel"
+  };
+
+  ok(gDevTools, "gDevTools exists");
+  ok(!gDevTools.getToolDefinitionMap().has("test-tool"),
+    "The tool is not registered");
+
+  gDevTools.registerTool(toolDefinition);
+  ok(gDevTools.getToolDefinitionMap().has("test-tool"),
+    "The tool is registered");
+}
+
+function* testSelectTool() {
+  info("Checking to make sure that the options panel can be selected.");
+
+  let onceSelected = toolbox.once("options-selected");
+  toolbox.selectTool("options");
+  yield onceSelected;
+  ok(true, "Toolbox selected via selectTool method");
+}
+
+function* testOptionsShortcut() {
+  info("Selecting another tool, then reselecting options panel with keyboard.");
+
+  yield toolbox.selectTool("webconsole");
+  is(toolbox.currentToolId, "webconsole", "webconsole is selected");
+  synthesizeKeyShortcut(L10N.getStr("toolbox.options.key"));
+  is(toolbox.currentToolId, "options", "Toolbox selected via shortcut key (1)");
+  synthesizeKeyShortcut(L10N.getStr("toolbox.options.key"));
+  is(toolbox.currentToolId, "webconsole", "webconsole is selected (1)");
+
+  yield toolbox.selectTool("webconsole");
+  is(toolbox.currentToolId, "webconsole", "webconsole is selected");
+  synthesizeKeyShortcut(L10N.getStr("toolbox.help.key"));
+  is(toolbox.currentToolId, "options", "Toolbox selected via shortcut key (2)");
+  synthesizeKeyShortcut(L10N.getStr("toolbox.options.key"));
+  is(toolbox.currentToolId, "webconsole", "webconsole is reselected (2)");
+  synthesizeKeyShortcut(L10N.getStr("toolbox.help.key"));
+  is(toolbox.currentToolId, "options", "Toolbox selected via shortcut key (2)");
+}
+
+function* testOptions() {
+  let tool = toolbox.getPanel("options");
+  panelWin = tool.panelWin;
+  let prefNodes = tool.panelDoc.querySelectorAll(
+    "input[type=checkbox][data-pref]");
+
+  // Store modified pref names so that they can be cleared on error.
+  for (let node of tool.panelDoc.querySelectorAll("[data-pref]")) {
+    let pref = node.getAttribute("data-pref");
+    modifiedPrefs.push(pref);
+  }
+
+  for (let node of prefNodes) {
+    let prefValue = GetPref(node.getAttribute("data-pref"));
+
+    // Test clicking the checkbox for each options pref
+    yield testMouseClick(node, prefValue);
+
+    // Do again with opposite values to reset prefs
+    yield testMouseClick(node, !prefValue);
+  }
+
+  let prefSelects = tool.panelDoc.querySelectorAll("select[data-pref]");
+  for (let node of prefSelects) {
+    yield testSelect(node);
+  }
+}
+
+function* testSelect(select) {
+  let pref = select.getAttribute("data-pref");
+  let options = Array.from(select.options);
+  info("Checking select for: " + pref);
+
+  is(select.options[select.selectedIndex].value, GetPref(pref),
+    "select starts out selected");
+
+  for (let option of options) {
+    if (options.indexOf(option) === select.selectedIndex) {
+      continue;
+    }
+
+    let deferred = defer();
+    gDevTools.once("pref-changed", (event, data) => {
+      if (data.pref == pref) {
+        ok(true, "Correct pref was changed");
+        is(GetPref(pref), option.value, "Preference been switched for " + pref);
+      } else {
+        ok(false, "Pref " + pref + " was not changed correctly");
+      }
+      deferred.resolve();
+    });
+
+    select.selectedIndex = options.indexOf(option);
+    let changeEvent = new Event("change");
+    select.dispatchEvent(changeEvent);
+
+    yield deferred.promise;
+  }
+}
+
+function* testMouseClick(node, prefValue) {
+  let deferred = defer();
+
+  let pref = node.getAttribute("data-pref");
+  gDevTools.once("pref-changed", (event, data) => {
+    if (data.pref == pref) {
+      ok(true, "Correct pref was changed");
+      is(data.oldValue, prefValue, "Previous value is correct for " + pref);
+      is(data.newValue, !prefValue, "New value is correct for " + pref);
+    } else {
+      ok(false, "Pref " + pref + " was not changed correctly");
+    }
+    deferred.resolve();
+  });
+
+  node.scrollIntoView();
+
+  // We use executeSoon here to ensure that the element is in view and
+  // clickable.
+  executeSoon(function () {
+    info("Click event synthesized for pref " + pref);
+    EventUtils.synthesizeMouseAtCenter(node, {}, panelWin);
+  });
+
+  yield deferred.promise;
+}
+
+function* testToggleTools() {
+  let toolNodes = panelWin.document.querySelectorAll(
+    "#default-tools-box input[type=checkbox]:not([data-unsupported])," +
+    "#additional-tools-box input[type=checkbox]:not([data-unsupported])");
+  let enabledTools = [...toolNodes].filter(node => node.checked);
+
+  let toggleableTools = gDevTools.getDefaultTools().filter(tool => {
+    return tool.visibilityswitch;
+  }).concat(gDevTools.getAdditionalTools());
+
+  for (let node of toolNodes) {
+    let id = node.getAttribute("id");
+    ok(toggleableTools.some(tool => tool.id === id),
+      "There should be a toggle checkbox for: " + id);
+  }
+
+  // Store modified pref names so that they can be cleared on error.
+  for (let tool of toggleableTools) {
+    let pref = tool.visibilityswitch;
+    modifiedPrefs.push(pref);
+  }
+
+  // Toggle each tool
+  for (let node of toolNodes) {
+    yield toggleTool(node);
+  }
+  // Toggle again to reset tool enablement state
+  for (let node of toolNodes) {
+    yield toggleTool(node);
+  }
+
+  // Test that a tool can still be added when no tabs are present:
+  // Disable all tools
+  for (let node of enabledTools) {
+    yield toggleTool(node);
+  }
+  // Re-enable the tools which are enabled by default
+  for (let node of enabledTools) {
+    yield toggleTool(node);
+  }
+
+  // Toggle first, middle, and last tools to ensure that toolbox tabs are
+  // inserted in order
+  let firstTool = toolNodes[0];
+  let middleTool = toolNodes[(toolNodes.length / 2) | 0];
+  let lastTool = toolNodes[toolNodes.length - 1];
+
+  yield toggleTool(firstTool);
+  yield toggleTool(firstTool);
+  yield toggleTool(middleTool);
+  yield toggleTool(middleTool);
+  yield toggleTool(lastTool);
+  yield toggleTool(lastTool);
+}
+
+function* toggleTool(node) {
+  let deferred = defer();
+
+  let toolId = node.getAttribute("id");
+  if (node.checked) {
+    gDevTools.once("tool-unregistered",
+      checkUnregistered.bind(null, toolId, deferred));
+  } else {
+    gDevTools.once("tool-registered",
+      checkRegistered.bind(null, toolId, deferred));
+  }
+  node.scrollIntoView();
+  EventUtils.synthesizeMouseAtCenter(node, {}, panelWin);
+
+  yield deferred.promise;
+}
+
+function checkUnregistered(toolId, deferred, event, data) {
+  if (data.id == toolId) {
+    ok(true, "Correct tool removed");
+    // checking tab on the toolbox
+    ok(!doc.getElementById("toolbox-tab-" + toolId),
+      "Tab removed for " + toolId);
+  } else {
+    ok(false, "Something went wrong, " + toolId + " was not unregistered");
+  }
+  deferred.resolve();
+}
+
+function checkRegistered(toolId, deferred, event, data) {
+  if (data == toolId) {
+    ok(true, "Correct tool added back");
+    // checking tab on the toolbox
+    let radio = doc.getElementById("toolbox-tab-" + toolId);
+    ok(radio, "Tab added back for " + toolId);
+    if (radio.previousSibling) {
+      ok(+radio.getAttribute("ordinal") >=
+         +radio.previousSibling.getAttribute("ordinal"),
+         "Inserted tab's ordinal is greater than equal to its previous tab." +
+         "Expected " + radio.getAttribute("ordinal") + " >= " +
+         radio.previousSibling.getAttribute("ordinal"));
+    }
+    if (radio.nextSibling) {
+      ok(+radio.getAttribute("ordinal") <
+         +radio.nextSibling.getAttribute("ordinal"),
+         "Inserted tab's ordinal is less than its next tab. Expected " +
+         radio.getAttribute("ordinal") + " < " +
+         radio.nextSibling.getAttribute("ordinal"));
+    }
+  } else {
+    ok(false, "Something went wrong, " + toolId + " was not registered");
+  }
+  deferred.resolve();
+}
+
+function GetPref(name) {
+  let type = Services.prefs.getPrefType(name);
+  switch (type) {
+    case Services.prefs.PREF_STRING:
+      return Services.prefs.getCharPref(name);
+    case Services.prefs.PREF_INT:
+      return Services.prefs.getIntPref(name);
+    case Services.prefs.PREF_BOOL:
+      return Services.prefs.getBoolPref(name);
+    default:
+      throw new Error("Unknown type");
+  }
+}
+
+function* cleanup() {
+  gDevTools.unregisterTool("test-tool");
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+  for (let pref of modifiedPrefs) {
+    Services.prefs.clearUserPref(pref);
+  }
+  toolbox = doc = panelWin = modifiedPrefs = null;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js b/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js
new file mode 100644
index 000000000..09cde4393
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js
@@ -0,0 +1,163 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+/* import-globals-from shared-head.js */
+"use strict";
+
+const TEST_URL = "data:text/html;charset=utf8,test for dynamically " +
+                 "registering and unregistering tools";
+var doc = null, toolbox = null, panelWin = null, modifiedPrefs = [];
+
+function test() {
+  addTab(TEST_URL).then(tab => {
+    let target = TargetFactory.forTab(tab);
+    gDevTools.showToolbox(target)
+      .then(testSelectTool)
+      .then(testToggleToolboxButtons)
+      .then(testPrefsAreRespectedWhenReopeningToolbox)
+      .then(cleanup, errorHandler);
+  });
+}
+
+function testPrefsAreRespectedWhenReopeningToolbox() {
+  let deferred = defer();
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  info("Closing toolbox to test after reopening");
+  gDevTools.closeToolbox(target).then(() => {
+    let tabTarget = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.showToolbox(tabTarget)
+      .then(testSelectTool)
+      .then(() => {
+        info("Toolbox has been reopened.  Checking UI state.");
+        testPreferenceAndUIStateIsConsistent();
+        deferred.resolve();
+      });
+  });
+
+  return deferred.promise;
+}
+
+function testSelectTool(devtoolsToolbox) {
+  let deferred = defer();
+  info("Selecting the options panel");
+
+  toolbox = devtoolsToolbox;
+  doc = toolbox.doc;
+  toolbox.once("options-selected", (event, tool) => {
+    ok(true, "Options panel selected via selectTool method");
+    panelWin = tool.panelWin;
+    deferred.resolve();
+  });
+  toolbox.selectTool("options");
+
+  return deferred.promise;
+}
+
+function testPreferenceAndUIStateIsConsistent() {
+  let checkNodes = [...panelWin.document.querySelectorAll(
+    "#enabled-toolbox-buttons-box input[type=checkbox]")];
+  let toolboxButtonNodes = [...doc.querySelectorAll(".command-button")];
+  toolboxButtonNodes.push(doc.getElementById("command-button-frames"));
+  let toggleableTools = toolbox.toolboxButtons;
+
+  // The noautohide button is only displayed in the browser toolbox
+  toggleableTools = toggleableTools.filter(
+    tool => tool.id != "command-button-noautohide");
+
+  for (let tool of toggleableTools) {
+    let isVisible = getBoolPref(tool.visibilityswitch);
+
+    let button = toolboxButtonNodes.filter(
+      toolboxButton => toolboxButton.id === tool.id)[0];
+    is(!button.hasAttribute("hidden"), isVisible,
+      "Button visibility matches pref for " + tool.id);
+
+    let check = checkNodes.filter(node => node.id === tool.id)[0];
+    is(check.checked, isVisible,
+      "Checkbox should be selected based on current pref for " + tool.id);
+  }
+}
+
+function testToggleToolboxButtons() {
+  let checkNodes = [...panelWin.document.querySelectorAll(
+    "#enabled-toolbox-buttons-box input[type=checkbox]")];
+  let toolboxButtonNodes = [...doc.querySelectorAll(".command-button")];
+  let toggleableTools = toolbox.toolboxButtons;
+
+  // The noautohide button is only displayed in the browser toolbox, and the element
+  // picker button is not toggleable.
+  toggleableTools = toggleableTools.filter(
+    tool => tool.id != "command-button-noautohide" && tool.id != "command-button-pick");
+  toolboxButtonNodes = toolboxButtonNodes.filter(
+    btn => btn.id != "command-button-noautohide" && btn.id != "command-button-pick");
+
+  is(checkNodes.length, toggleableTools.length,
+    "All of the buttons are toggleable.");
+  is(checkNodes.length, toolboxButtonNodes.length,
+    "All of the DOM buttons are toggleable.");
+
+  for (let tool of toggleableTools) {
+    let id = tool.id;
+    let matchedCheckboxes = checkNodes.filter(node => node.id === id);
+    let matchedButtons = toolboxButtonNodes.filter(button => button.id === id);
+    is(matchedCheckboxes.length, 1,
+      "There should be a single toggle checkbox for: " + id);
+    is(matchedButtons.length, 1,
+      "There should be a DOM button for: " + id);
+    is(matchedButtons[0], tool.button,
+      "DOM buttons should match for: " + id);
+
+    is(matchedCheckboxes[0].nextSibling.textContent, tool.label,
+      "The label for checkbox matches the tool definition.");
+    is(matchedButtons[0].getAttribute("title"), tool.label,
+      "The tooltip for button matches the tool definition.");
+  }
+
+  // Store modified pref names so that they can be cleared on error.
+  for (let tool of toggleableTools) {
+    let pref = tool.visibilityswitch;
+    modifiedPrefs.push(pref);
+  }
+
+  // Try checking each checkbox, making sure that it changes the preference
+  for (let node of checkNodes) {
+    let tool = toggleableTools.filter(
+      toggleableTool => toggleableTool.id === node.id)[0];
+    let isVisible = getBoolPref(tool.visibilityswitch);
+
+    testPreferenceAndUIStateIsConsistent();
+    node.click();
+    testPreferenceAndUIStateIsConsistent();
+
+    let isVisibleAfterClick = getBoolPref(tool.visibilityswitch);
+
+    is(isVisible, !isVisibleAfterClick,
+      "Clicking on the node should have toggled visibility preference for " +
+      tool.visibilityswitch);
+  }
+
+  return promise.resolve();
+}
+
+function getBoolPref(key) {
+  return Services.prefs.getBoolPref(key);
+}
+
+function cleanup() {
+  toolbox.destroy().then(function () {
+    gBrowser.removeCurrentTab();
+    for (let pref of modifiedPrefs) {
+      Services.prefs.clearUserPref(pref);
+    }
+    toolbox = doc = panelWin = modifiedPrefs = null;
+    finish();
+  });
+}
+
+function errorHandler(error) {
+  ok(false, "Unexpected error: " + error);
+  cleanup();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_cache-01.js b/devtools/client/framework/test/browser_toolbox_options_disable_cache-01.js
new file mode 100644
index 000000000..6badf069e
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_cache-01.js
@@ -0,0 +1,34 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Tests that disabling the cache for a tab works as it should when toolboxes
+// are not toggled.
+loadHelperScript("helper_disable_cache.js");
+
+add_task(function* () {
+  // Ensure that the setting is cleared after the test.
+  registerCleanupFunction(() => {
+    info("Resetting devtools.cache.disabled to false.");
+    Services.prefs.setBoolPref("devtools.cache.disabled", false);
+  });
+
+  // Initialise tabs: 1 and 2 with a toolbox, 3 and 4 without.
+  for (let tab of tabs) {
+    yield initTab(tab, tab.startToolbox);
+  }
+
+  // Ensure cache is enabled for all tabs.
+  yield checkCacheStateForAllTabs([true, true, true, true]);
+
+  // Check the checkbox in tab 0 and ensure cache is disabled for tabs 0 and 1.
+  yield setDisableCacheCheckboxChecked(tabs[0], true);
+  yield checkCacheStateForAllTabs([false, false, true, true]);
+
+  yield finishUp();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_cache-02.js b/devtools/client/framework/test/browser_toolbox_options_disable_cache-02.js
new file mode 100644
index 000000000..38c381cef
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_cache-02.js
@@ -0,0 +1,47 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Tests that disabling the cache for a tab works as it should when toolboxes
+// are toggled.
+loadHelperScript("helper_disable_cache.js");
+
+add_task(function* () {
+  // Ensure that the setting is cleared after the test.
+  registerCleanupFunction(() => {
+    info("Resetting devtools.cache.disabled to false.");
+    Services.prefs.setBoolPref("devtools.cache.disabled", false);
+  });
+
+  // Initialise tabs: 1 and 2 with a toolbox, 3 and 4 without.
+  for (let tab of tabs) {
+    yield initTab(tab, tab.startToolbox);
+  }
+
+  // Disable cache in tab 0
+  yield setDisableCacheCheckboxChecked(tabs[0], true);
+
+  // Open toolbox in tab 2 and ensure the cache is then disabled.
+  tabs[2].toolbox = yield gDevTools.showToolbox(tabs[2].target, "options");
+  yield checkCacheEnabled(tabs[2], false);
+
+  // Close toolbox in tab 2 and ensure the cache is enabled again
+  yield tabs[2].toolbox.destroy();
+  tabs[2].target = TargetFactory.forTab(tabs[2].tab);
+  yield checkCacheEnabled(tabs[2], true);
+
+  // Open toolbox in tab 2 and ensure the cache is then disabled.
+  tabs[2].toolbox = yield gDevTools.showToolbox(tabs[2].target, "options");
+  yield checkCacheEnabled(tabs[2], false);
+
+  // Check the checkbox in tab 2 and ensure cache is enabled for all tabs.
+  yield setDisableCacheCheckboxChecked(tabs[2], false);
+  yield checkCacheStateForAllTabs([true, true, true, true]);
+
+  yield finishUp();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_cache.sjs b/devtools/client/framework/test/browser_toolbox_options_disable_cache.sjs
new file mode 100644
index 000000000..c6c336981
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_cache.sjs
@@ -0,0 +1,28 @@
+  /* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function handleRequest(request, response) {
+  let Etag = '"4d881ab-b03-435f0a0f9ef00"';
+  let IfNoneMatch = request.hasHeader("If-None-Match")
+                    ? request.getHeader("If-None-Match")
+                    : "";
+
+  let guid = 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    let r = Math.random() * 16 | 0;
+    let v = c === "x" ? r : (r & 0x3 | 0x8);
+
+    return v.toString(16);
+  });
+
+  let page = "<!DOCTYPE html><html><body><h1>" + guid + "</h1></body></html>";
+
+  response.setHeader("Etag", Etag, false);
+
+  if (IfNoneMatch === Etag) {
+    response.setStatusLine(request.httpVersion, "304", "Not Modified");
+  } else {
+    response.setHeader("Content-Type", "text/html; charset=utf-8", false);
+    response.setHeader("Content-Length", page.length + "", false);
+    response.write(page);
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_js.html b/devtools/client/framework/test/browser_toolbox_options_disable_js.html
new file mode 100644
index 000000000..8df1119f6
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_js.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>browser_toolbox_options_disablejs.html</title>
+    <meta charset="UTF-8">
+    <style>
+      div {
+        width: 260px;
+        height: 24px;
+        border: 1px solid #000;
+        margin-top: 10px;
+      }
+
+      iframe {
+        height: 90px;
+        border: 1px solid #000;
+      }
+
+      h1 {
+        font-size: 20px
+      }
+    </style>
+    <script type="application/javascript;version=1.8">
+      function log(msg) {
+        let output = document.getElementById("output");
+
+        output.innerHTML = msg;
+      }
+    </script>
+  </head>
+  <body>
+    <h1>Test in page</h1>
+    <input id="logJSEnabled"
+           type="button"
+           value="Log JS Enabled"
+           onclick="log('JavaScript Enabled')"/>
+    <input id="logJSDisabled"
+           type="button"
+           value="Log JS Disabled"
+           onclick="log('JavaScript Disabled')"/>
+    <br>
+    <div id="output">No output</div>
+    <h1>Test in iframe</h1>
+    <iframe src="browser_toolbox_options_disable_js_iframe.html"></iframe>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_js.js b/devtools/client/framework/test/browser_toolbox_options_disable_js.js
new file mode 100644
index 000000000..b0c14a805
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_js.js
@@ -0,0 +1,119 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 disabling JavaScript for a tab works as it should.
+
+const TEST_URI = URL_ROOT + "browser_toolbox_options_disable_js.html";
+
+function test() {
+  addTab(TEST_URI).then(tab => {
+    let target = TargetFactory.forTab(tab);
+    gDevTools.showToolbox(target).then(testSelectTool);
+  });
+}
+
+function testSelectTool(toolbox) {
+  toolbox.once("options-selected", () => testToggleJS(toolbox));
+  toolbox.selectTool("options");
+}
+
+let testToggleJS = Task.async(function* (toolbox) {
+  ok(true, "Toolbox selected via selectTool method");
+
+  yield testJSEnabled();
+  yield testJSEnabledIframe();
+
+  // Disable JS.
+  yield toggleJS(toolbox);
+
+  yield testJSDisabled();
+  yield testJSDisabledIframe();
+
+  // Re-enable JS.
+  yield toggleJS(toolbox);
+
+  yield testJSEnabled();
+  yield testJSEnabledIframe();
+
+  finishUp(toolbox);
+});
+
+function* testJSEnabled() {
+  info("Testing that JS is enabled");
+
+  // We use waitForTick here because switching docShell.allowJavascript to true
+  // takes a while to become live.
+  yield waitForTick();
+
+  yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function () {
+    let doc = content.document;
+    let output = doc.getElementById("output");
+    doc.querySelector("#logJSEnabled").click();
+    is(output.textContent, "JavaScript Enabled", 'Output is "JavaScript Enabled"');
+  });
+}
+
+function* testJSEnabledIframe() {
+  info("Testing that JS is enabled in the iframe");
+
+  yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function () {
+    let doc = content.document;
+    let iframe = doc.querySelector("iframe");
+    let iframeDoc = iframe.contentDocument;
+    let output = iframeDoc.getElementById("output");
+    iframeDoc.querySelector("#logJSEnabled").click();
+    is(output.textContent, "JavaScript Enabled",
+                            'Output is "JavaScript Enabled" in iframe');
+  });
+}
+
+function* toggleJS(toolbox) {
+  let panel = toolbox.getCurrentPanel();
+  let cbx = panel.panelDoc.getElementById("devtools-disable-javascript");
+
+  if (cbx.checked) {
+    info("Clearing checkbox to re-enable JS");
+  } else {
+    info("Checking checkbox to disable JS");
+  }
+
+  let browserLoaded = BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
+  cbx.click();
+  yield browserLoaded;
+}
+
+function* testJSDisabled() {
+  info("Testing that JS is disabled");
+
+  yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function () {
+    let doc = content.document;
+    let output = doc.getElementById("output");
+    doc.querySelector("#logJSDisabled").click();
+
+    ok(output.textContent !== "JavaScript Disabled",
+       'output is not "JavaScript Disabled"');
+  });
+}
+
+function* testJSDisabledIframe() {
+  info("Testing that JS is disabled in the iframe");
+
+  yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function () {
+    let doc = content.document;
+    let iframe = doc.querySelector("iframe");
+    let iframeDoc = iframe.contentDocument;
+    let output = iframeDoc.getElementById("output");
+    iframeDoc.querySelector("#logJSDisabled").click();
+    ok(output.textContent !== "JavaScript Disabled",
+       'output is not "JavaScript Disabled" in iframe');
+  });
+}
+
+function finishUp(toolbox) {
+  toolbox.destroy().then(function () {
+    gBrowser.removeCurrentTab();
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_disable_js_iframe.html b/devtools/client/framework/test/browser_toolbox_options_disable_js_iframe.html
new file mode 100644
index 000000000..777bf86bf
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_disable_js_iframe.html
@@ -0,0 +1,33 @@
+<html>
+  <head>
+    <title>browser_toolbox_options_disablejs.html</title>
+    <meta charset="UTF-8">
+    <style>
+      div {
+        width: 260px;
+        height: 24px;
+        border: 1px solid #000;
+        margin-top: 10px;
+      }
+    </style>
+    <script type="application/javascript;version=1.8">
+      function log(msg) {
+        let output = document.getElementById("output");
+
+        output.innerHTML = msg;
+      }
+    </script>
+  </head>
+  <body>
+    <input id="logJSEnabled"
+           type="button"
+           value="Log JS Enabled"
+           onclick="log('JavaScript Enabled')"/>
+    <input id="logJSDisabled"
+           type="button"
+           value="Log JS Disabled"
+           onclick="log('JavaScript Disabled')"/>
+    <br>
+    <div id="output">No output</div>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html
new file mode 100644
index 000000000..0e4b824cb
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>browser_toolbox_options_enable_serviceworkers_testing.html</title>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <h1>SW-test</h1>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js
new file mode 100644
index 000000000..3273f4395
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js
@@ -0,0 +1,126 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 enabling Service Workers testing option enables the
+// mServiceWorkersTestingEnabled attribute added to nsPIDOMWindow.
+
+const COMMON_FRAME_SCRIPT_URL =
+  "chrome://devtools/content/shared/frame-script-utils.js";
+const ROOT_TEST_DIR =
+  getRootDirectory(gTestPath);
+const FRAME_SCRIPT_URL =
+  ROOT_TEST_DIR +
+  "browser_toolbox_options_enable_serviceworkers_testing_frame_script.js";
+const TEST_URI = URL_ROOT +
+                 "browser_toolbox_options_enable_serviceworkers_testing.html";
+
+const ELEMENT_ID = "devtools-enable-serviceWorkersTesting";
+
+var toolbox;
+
+function test() {
+  // Note: Pref dom.serviceWorkers.testing.enabled is false since we are testing
+  // the same capabilities are enabled with the devtool pref.
+  SpecialPowers.pushPrefEnv({"set": [
+    ["dom.serviceWorkers.exemptFromPerDomainMax", true],
+    ["dom.serviceWorkers.enabled", true],
+    ["dom.serviceWorkers.testing.enabled", false]
+  ]}, init);
+}
+
+function init() {
+  addTab(TEST_URI).then(tab => {
+    let target = TargetFactory.forTab(tab);
+    let linkedBrowser = tab.linkedBrowser;
+
+    linkedBrowser.messageManager.loadFrameScript(COMMON_FRAME_SCRIPT_URL, false);
+    linkedBrowser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
+
+    gDevTools.showToolbox(target).then(testSelectTool);
+  });
+}
+
+function testSelectTool(aToolbox) {
+  toolbox = aToolbox;
+  toolbox.once("options-selected", start);
+  toolbox.selectTool("options");
+}
+
+function register() {
+  return executeInContent("devtools:sw-test:register");
+}
+
+function unregister(swr) {
+  return executeInContent("devtools:sw-test:unregister");
+}
+
+function registerAndUnregisterInFrame() {
+  return executeInContent("devtools:sw-test:iframe:register-and-unregister");
+}
+
+function testRegisterFails(data) {
+  is(data.success, false, "Register should fail with security error");
+  return promise.resolve();
+}
+
+function toggleServiceWorkersTestingCheckbox() {
+  let panel = toolbox.getCurrentPanel();
+  let cbx = panel.panelDoc.getElementById(ELEMENT_ID);
+
+  cbx.scrollIntoView();
+
+  if (cbx.checked) {
+    info("Clearing checkbox to disable service workers testing");
+  } else {
+    info("Checking checkbox to enable service workers testing");
+  }
+
+  cbx.click();
+
+  return promise.resolve();
+}
+
+function reload() {
+  let deferred = defer();
+
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
+    deferred.resolve();
+  }, true);
+
+  executeInContent("devtools:test:reload", {}, {}, false);
+  return deferred.promise;
+}
+
+function testRegisterSuccesses(data) {
+  is(data.success, true, "Register should success");
+  return promise.resolve();
+}
+
+function start() {
+  register()
+    .then(testRegisterFails)
+    .then(toggleServiceWorkersTestingCheckbox)
+    .then(reload)
+    .then(register)
+    .then(testRegisterSuccesses)
+    .then(unregister)
+    .then(registerAndUnregisterInFrame)
+    .then(testRegisterSuccesses)
+    // Workers should be turned back off when we closes the toolbox
+    .then(toolbox.destroy.bind(toolbox))
+    .then(reload)
+    .then(register)
+    .then(testRegisterFails)
+    .catch(function (e) {
+      ok(false, "Some test failed with error " + e);
+    }).then(finishUp);
+}
+
+function finishUp() {
+  gBrowser.removeCurrentTab();
+  toolbox = null;
+  finish();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing_frame_script.js b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing_frame_script.js
new file mode 100644
index 000000000..ec5ab3762
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing_frame_script.js
@@ -0,0 +1,46 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+// A helper frame-script for devtools/client/framework service worker tests.
+
+"use strict";
+
+addMessageListener("devtools:sw-test:register", function (msg) {
+  content.navigator.serviceWorker.register("serviceworker.js")
+    .then(swr => {
+      sendAsyncMessage("devtools:sw-test:register", {success: true});
+    }, error => {
+      sendAsyncMessage("devtools:sw-test:register", {success: false});
+    });
+});
+
+addMessageListener("devtools:sw-test:unregister", function (msg) {
+  content.navigator.serviceWorker.getRegistration().then(swr => {
+    swr.unregister().then(result => {
+      sendAsyncMessage("devtools:sw-test:unregister",
+                       {success: result ? true : false});
+    });
+  });
+});
+
+addMessageListener("devtools:sw-test:iframe:register-and-unregister", function (msg) {
+  var frame = content.document.createElement("iframe");
+  frame.addEventListener("load", function onLoad() {
+    frame.removeEventListener("load", onLoad);
+    frame.contentWindow.navigator.serviceWorker.register("serviceworker.js")
+      .then(swr => {
+        return swr.unregister();
+      }).then(_ => {
+        frame.remove();
+        sendAsyncMessage("devtools:sw-test:iframe:register-and-unregister",
+                         {success: true});
+      }).catch(error => {
+        sendAsyncMessage("devtools:sw-test:iframe:register-and-unregister",
+                         {success: false});
+      });
+  });
+  frame.src = "browser_toolbox_options_enabled_serviceworkers_testing.html";
+  content.document.body.appendChild(frame);
+});
diff --git a/devtools/client/framework/test/browser_toolbox_races.js b/devtools/client/framework/test/browser_toolbox_races.js
new file mode 100644
index 000000000..fedbc4402
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_races.js
@@ -0,0 +1,81 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test toggling the toolbox quickly and see if there is any race breaking it.
+
+const URL = "data:text/html;charset=utf-8,Toggling devtools quickly";
+
+add_task(function* () {
+  // Make sure this test starts with the selectedTool pref cleared. Previous
+  // tests select various tools, and that sets this pref.
+  Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
+
+  let tab = yield addTab(URL);
+
+  let created = 0, ready = 0, destroy = 0, destroyed = 0;
+  let onCreated = () => {
+    created++;
+  };
+  let onReady = () => {
+    ready++;
+  };
+  let onDestroy = () => {
+    destroy++;
+  };
+  let onDestroyed = () => {
+    destroyed++;
+  };
+  gDevTools.on("toolbox-created", onCreated);
+  gDevTools.on("toolbox-ready", onReady);
+  gDevTools.on("toolbox-destroy", onDestroy);
+  gDevTools.on("toolbox-destroyed", onDestroyed);
+
+  // The current implementation won't toggle the toolbox many times,
+  // instead it will ignore toggles that happens while the toolbox is still
+  // creating or still destroying.
+
+  // Toggle the toolbox at least 3 times.
+  info("Trying to toggle the toolbox 3 times");
+  while (created < 3) {
+    // Sent multiple event to try to race the code during toolbox creation and destruction
+    toggle();
+    toggle();
+    toggle();
+
+    // Release the event loop to let a chance to actually create or destroy the toolbox!
+    yield wait(50);
+  }
+  info("Toggled the toolbox 3 times");
+
+  // Now wait for the 3rd toolbox to be fully ready before closing it.
+  // We close the last toolbox manually, out of the first while() loop to
+  // avoid races and be sure we end up we no toolbox and waited for all the
+  // requests to be done.
+  while (ready != 3) {
+    yield wait(100);
+  }
+  toggle();
+  while (destroyed != 3) {
+    yield wait(100);
+  }
+
+  is(created, 3, "right number of created events");
+  is(ready, 3, "right number of ready events");
+  is(destroy, 3, "right number of destroy events");
+  is(destroyed, 3, "right number of destroyed events");
+
+  gDevTools.off("toolbox-created", onCreated);
+  gDevTools.off("toolbox-ready", onReady);
+  gDevTools.off("toolbox-destroy", onDestroy);
+  gDevTools.off("toolbox-destroyed", onDestroyed);
+
+  gBrowser.removeCurrentTab();
+});
+
+function toggle() {
+  EventUtils.synthesizeKey("VK_F12", {});
+}
diff --git a/devtools/client/framework/test/browser_toolbox_raise.js b/devtools/client/framework/test/browser_toolbox_raise.js
new file mode 100644
index 000000000..0af1a4571
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_raise.js
@@ -0,0 +1,78 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+const TEST_URL = "data:text/html,test for opening toolbox in different hosts";
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+var toolbox, tab1, tab2;
+
+function test() {
+  addTab(TEST_URL).then(tab => {
+    tab2 = gBrowser.addTab();
+    let target = TargetFactory.forTab(tab);
+    gDevTools.showToolbox(target)
+             .then(testBottomHost, console.error)
+             .then(null, console.error);
+  });
+}
+
+function testBottomHost(aToolbox) {
+  toolbox = aToolbox;
+
+  // switch to another tab and test toolbox.raise()
+  gBrowser.selectedTab = tab2;
+  executeSoon(function () {
+    is(gBrowser.selectedTab, tab2, "Correct tab is selected before calling raise");
+    toolbox.raise();
+    executeSoon(function () {
+      is(gBrowser.selectedTab, tab1, "Correct tab was selected after calling raise");
+
+      toolbox.switchHost(Toolbox.HostType.WINDOW).then(testWindowHost).then(null, console.error);
+    });
+  });
+}
+
+function testWindowHost() {
+  // Make sure toolbox is not focused.
+  window.addEventListener("focus", onFocus, true);
+
+  // Need to wait for focus  as otherwise window.focus() is overridden by
+  // toolbox window getting focused first on Linux and Mac.
+  let onToolboxFocus = () => {
+    toolbox.win.parent.removeEventListener("focus", onToolboxFocus, true);
+    info("focusing main window.");
+    window.focus();
+  };
+  // Need to wait for toolbox window to get focus.
+  toolbox.win.parent.addEventListener("focus", onToolboxFocus, true);
+}
+
+function onFocus() {
+  info("Main window is focused before calling toolbox.raise()");
+  window.removeEventListener("focus", onFocus, true);
+
+  // Check if toolbox window got focus.
+  let onToolboxFocusAgain = () => {
+    toolbox.win.parent.removeEventListener("focus", onToolboxFocusAgain, false);
+    ok(true, "Toolbox window is the focused window after calling toolbox.raise()");
+    cleanup();
+  };
+  toolbox.win.parent.addEventListener("focus", onToolboxFocusAgain, false);
+
+  // Now raise toolbox.
+  toolbox.raise();
+}
+
+function cleanup() {
+  Services.prefs.setCharPref("devtools.toolbox.host", Toolbox.HostType.BOTTOM);
+
+  toolbox.destroy().then(function () {
+    toolbox = null;
+    gBrowser.removeCurrentTab();
+    gBrowser.removeCurrentTab();
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_ready.js b/devtools/client/framework/test/browser_toolbox_ready.js
new file mode 100644
index 000000000..e1a59b3f0
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_ready.js
@@ -0,0 +1,21 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+const TEST_URL = "data:text/html,test for toolbox being ready";
+
+add_task(function* () {
+  let tab = yield addTab(TEST_URL);
+  let target = TargetFactory.forTab(tab);
+
+  const toolbox = yield gDevTools.showToolbox(target, "webconsole");
+  ok(toolbox.isReady, "toolbox isReady is set");
+  ok(toolbox.threadClient, "toolbox has a thread client");
+
+  const toolbox2 = yield gDevTools.showToolbox(toolbox.target, toolbox.toolId);
+  is(toolbox2, toolbox, "same toolbox");
+
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_remoteness_change.js b/devtools/client/framework/test/browser_toolbox_remoteness_change.js
new file mode 100644
index 000000000..b30d633fa
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_remoteness_change.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+const URL_1 = "about:robots";
+const URL_2 = "data:text/html;charset=UTF-8," +
+  encodeURIComponent("<div id=\"remote-page\">foo</div>");
+
+add_task(function* () {
+  info("Open a tab on a URL supporting only running in parent process");
+  let tab = yield addTab(URL_1);
+  is(tab.linkedBrowser.currentURI.spec, URL_1, "We really are on the expected document");
+  is(tab.linkedBrowser.getAttribute("remote"), "", "And running in parent process");
+
+  let toolbox = yield openToolboxForTab(tab);
+
+  let onToolboxDestroyed = toolbox.once("destroyed");
+  let onToolboxCreated = gDevTools.once("toolbox-created");
+
+  info("Navigate to a URL supporting remote process");
+  let onLoaded = BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+  gBrowser.loadURI(URL_2);
+  yield onLoaded;
+
+  is(tab.linkedBrowser.getAttribute("remote"), "true", "Navigated to a data: URI and switching to remote");
+
+  info("Waiting for the toolbox to be destroyed");
+  yield onToolboxDestroyed;
+
+  info("Waiting for a new toolbox to be created");
+  toolbox = yield onToolboxCreated;
+
+  info("Waiting for the new toolbox to be ready");
+  yield toolbox.once("ready");
+
+  info("Veryify we are inspecting the new document");
+  let console = yield toolbox.selectTool("webconsole");
+  let { jsterm } = console.hud;
+  let url = yield jsterm.execute("document.location.href");
+  // Uses includes as the old console frontend prints a timestamp
+  ok(url.textContent.includes(URL_2), "The console inspects the second document");
+});
diff --git a/devtools/client/framework/test/browser_toolbox_select_event.js b/devtools/client/framework/test/browser_toolbox_select_event.js
new file mode 100644
index 000000000..ae104524e
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_select_event.js
@@ -0,0 +1,101 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+const PAGE_URL = "data:text/html;charset=utf-8,test select events";
+
+requestLongerTimeout(2);
+
+add_task(function* () {
+  let tab = yield addTab(PAGE_URL);
+
+  let toolbox = yield openToolboxForTab(tab, "webconsole", "bottom");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+
+  yield testToolSelectEvent("inspector");
+  yield testToolSelectEvent("webconsole");
+  yield testToolSelectEvent("styleeditor");
+  yield toolbox.destroy();
+
+  toolbox = yield openToolboxForTab(tab, "webconsole", "side");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield toolbox.destroy();
+
+  toolbox = yield openToolboxForTab(tab, "webconsole", "window");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield testSelectEvent("inspector");
+  yield testSelectEvent("webconsole");
+  yield testSelectEvent("styleeditor");
+  yield toolbox.destroy();
+
+  yield testSelectToolRace();
+
+  /**
+   * Assert that selecting the given toolId raises a select event
+   * @param {toolId} Id of the tool to test
+   */
+  function* testSelectEvent(toolId) {
+    let onSelect = toolbox.once("select");
+    toolbox.selectTool(toolId);
+    let id = yield onSelect;
+    is(id, toolId, toolId + " selected");
+  }
+
+  /**
+   * Assert that selecting the given toolId raises its corresponding
+   * selected event
+   * @param {toolId} Id of the tool to test
+   */
+  function* testToolSelectEvent(toolId) {
+    let onSelected = toolbox.once(toolId + "-selected");
+    toolbox.selectTool(toolId);
+    yield onSelected;
+    is(toolbox.currentToolId, toolId, toolId + " tool selected");
+  }
+
+  /**
+   * Assert that two calls to selectTool won't race
+   */
+  function* testSelectToolRace() {
+    let toolbox = yield openToolboxForTab(tab, "webconsole");
+    let selected = false;
+    let onSelect = (event, id) => {
+      if (selected) {
+        ok(false, "Got more than one 'select' event");
+      } else {
+        selected = true;
+      }
+    };
+    toolbox.once("select", onSelect);
+    let p1 = toolbox.selectTool("inspector")
+    let p2 = toolbox.selectTool("inspector");
+    // Check that both promises don't resolve too early
+    let checkSelectToolResolution = panel => {
+      ok(selected, "selectTool resolves only after 'select' event is fired");
+      let inspector = toolbox.getPanel("inspector");
+      is(panel, inspector, "selecTool resolves to the panel instance");
+    };
+    p1.then(checkSelectToolResolution);
+    p2.then(checkSelectToolResolution);
+    yield p1;
+    yield p2;
+
+    yield toolbox.destroy();
+  }
+});
+
diff --git a/devtools/client/framework/test/browser_toolbox_selected_tool_unavailable.js b/devtools/client/framework/test/browser_toolbox_selected_tool_unavailable.js
new file mode 100644
index 000000000..d7cc5c94d
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_selected_tool_unavailable.js
@@ -0,0 +1,48 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test that opening the toolbox doesn't throw when the previously selected
+// tool is not supported.
+
+const testToolDefinition = {
+  id: "test-tool",
+  isTargetSupported: () => true,
+  visibilityswitch: "devtools.test-tool.enabled",
+  url: "about:blank",
+  label: "someLabel",
+  build: (iframeWindow, toolbox) => {
+      return {
+        target: toolbox.target,
+        toolbox: toolbox,
+        isReady: true,
+        destroy: () => {},
+        panelDoc: iframeWindow.document
+      };
+    }
+};
+
+add_task(function* () {
+  gDevTools.registerTool(testToolDefinition);
+  let tab = yield addTab("about:blank");
+  let target = TargetFactory.forTab(tab);
+
+  let toolbox = yield gDevTools.showToolbox(target, testToolDefinition.id);
+  is(toolbox.currentToolId, "test-tool", "test-tool was selected");
+  yield gDevTools.closeToolbox(target);
+
+  // Make the previously selected tool unavailable.
+  testToolDefinition.isTargetSupported = () => false;
+
+  target = TargetFactory.forTab(tab);
+  toolbox = yield gDevTools.showToolbox(target);
+  is(toolbox.currentToolId, "webconsole", "web console was selected");
+
+  yield gDevTools.closeToolbox(target);
+  gDevTools.unregisterTool(testToolDefinition.id);
+  tab = toolbox = target = null;
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_sidebar.js b/devtools/client/framework/test/browser_toolbox_sidebar.js
new file mode 100644
index 000000000..897f8cba5
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_sidebar.js
@@ -0,0 +1,181 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+function test() {
+  const Cu = Components.utils;
+  let {ToolSidebar} = require("devtools/client/framework/sidebar");
+
+  const toolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
+                  "<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>";
+
+  const tab1URL = "data:text/html;charset=utf8,<title>1</title><p>1</p>";
+  const tab2URL = "data:text/html;charset=utf8,<title>2</title><p>2</p>";
+  const tab3URL = "data:text/html;charset=utf8,<title>3</title><p>3</p>";
+
+  let panelDoc;
+  let tab1Selected = false;
+  let registeredTabs = {};
+  let readyTabs = {};
+
+  let toolDefinition = {
+    id: "fakeTool4242",
+    visibilityswitch: "devtools.fakeTool4242.enabled",
+    url: toolURL,
+    label: "FAKE TOOL!!!",
+    isTargetSupported: () => true,
+    build: function (iframeWindow, toolbox) {
+      let deferred = defer();
+      executeSoon(() => {
+        deferred.resolve({
+          target: toolbox.target,
+          toolbox: toolbox,
+          isReady: true,
+          destroy: function () {},
+          panelDoc: iframeWindow.document,
+        });
+      });
+      return deferred.promise;
+    },
+  };
+
+  gDevTools.registerTool(toolDefinition);
+
+  addTab("about:blank").then(function (aTab) {
+    let target = TargetFactory.forTab(aTab);
+    gDevTools.showToolbox(target, toolDefinition.id).then(function (toolbox) {
+      let panel = toolbox.getPanel(toolDefinition.id);
+      panel.toolbox = toolbox;
+      ok(true, "Tool open");
+
+      let tabbox = panel.panelDoc.getElementById("sidebar");
+      panel.sidebar = new ToolSidebar(tabbox, panel, "testbug865688", true);
+
+      panel.sidebar.on("new-tab-registered", function (event, id) {
+        registeredTabs[id] = true;
+      });
+
+      panel.sidebar.once("tab1-ready", function (event) {
+        info(event);
+        readyTabs.tab1 = true;
+        allTabsReady(panel);
+      });
+
+      panel.sidebar.once("tab2-ready", function (event) {
+        info(event);
+        readyTabs.tab2 = true;
+        allTabsReady(panel);
+      });
+
+      panel.sidebar.once("tab3-ready", function (event) {
+        info(event);
+        readyTabs.tab3 = true;
+        allTabsReady(panel);
+      });
+
+      panel.sidebar.once("tab1-selected", function (event) {
+        info(event);
+        tab1Selected = true;
+        allTabsReady(panel);
+      });
+
+      panel.sidebar.addTab("tab1", tab1URL, {selected: true});
+      panel.sidebar.addTab("tab2", tab2URL);
+      panel.sidebar.addTab("tab3", tab3URL);
+
+      panel.sidebar.show();
+    }).then(null, console.error);
+  });
+
+  function allTabsReady(panel) {
+    if (!tab1Selected || !readyTabs.tab1 || !readyTabs.tab2 || !readyTabs.tab3) {
+      return;
+    }
+
+    ok(registeredTabs.tab1, "tab1 registered");
+    ok(registeredTabs.tab2, "tab2 registered");
+    ok(registeredTabs.tab3, "tab3 registered");
+    ok(readyTabs.tab1, "tab1 ready");
+    ok(readyTabs.tab2, "tab2 ready");
+    ok(readyTabs.tab3, "tab3 ready");
+
+    let tabs = panel.sidebar._tabbox.querySelectorAll("tab");
+    let panels = panel.sidebar._tabbox.querySelectorAll("tabpanel");
+    let label = 1;
+    for (let tab of tabs) {
+      is(tab.getAttribute("label"), label++, "Tab has the right title");
+    }
+
+    is(label, 4, "Found the right amount of tabs.");
+    is(panel.sidebar._tabbox.selectedPanel, panels[0], "First tab is selected");
+    is(panel.sidebar.getCurrentTabID(), "tab1", "getCurrentTabID() is correct");
+
+    panel.sidebar.once("tab1-unselected", function () {
+      ok(true, "received 'unselected' event");
+      panel.sidebar.once("tab2-selected", function () {
+        ok(true, "received 'selected' event");
+        tabs[1].focus();
+        is(panel.sidebar._panelDoc.activeElement, tabs[1],
+          "Focus is set to second tab");
+        panel.sidebar.hide();
+        isnot(panel.sidebar._panelDoc.activeElement, tabs[1],
+          "Focus is reset for sidebar");
+        is(panel.sidebar._tabbox.getAttribute("hidden"), "true", "Sidebar hidden");
+        is(panel.sidebar.getWindowForTab("tab1").location.href, tab1URL, "Window is accessible");
+        testRemoval(panel);
+      });
+    });
+
+    panel.sidebar.select("tab2");
+  }
+
+  function testRemoval(panel) {
+    panel.sidebar.once("tab-unregistered", function (event, id) {
+      info(event);
+      registeredTabs[id] = false;
+
+      is(id, "tab3", "The right tab must be removed");
+
+      let tabs = panel.sidebar._tabbox.querySelectorAll("tab");
+      let panels = panel.sidebar._tabbox.querySelectorAll("tabpanel");
+
+      is(tabs.length, 2, "There is the right number of tabs");
+      is(panels.length, 2, "There is the right number of panels");
+
+      testWidth(panel);
+    });
+
+    panel.sidebar.removeTab("tab3");
+  }
+
+  function testWidth(panel) {
+    let tabbox = panel.panelDoc.getElementById("sidebar");
+    tabbox.width = 420;
+    panel.sidebar.destroy().then(function () {
+      tabbox.width = 0;
+      panel.sidebar = new ToolSidebar(tabbox, panel, "testbug865688", true);
+      panel.sidebar.show();
+      is(panel.panelDoc.getElementById("sidebar").width, 420, "Width restored");
+
+      finishUp(panel);
+    });
+  }
+
+  function finishUp(panel) {
+    panel.sidebar.destroy();
+    panel.toolbox.destroy().then(function () {
+      gDevTools.unregisterTool(toolDefinition.id);
+
+      gBrowser.removeCurrentTab();
+
+      executeSoon(function () {
+        finish();
+      });
+    });
+  }
+}
diff --git a/devtools/client/framework/test/browser_toolbox_sidebar_events.js b/devtools/client/framework/test/browser_toolbox_sidebar_events.js
new file mode 100644
index 000000000..9137aaebe
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_sidebar_events.js
@@ -0,0 +1,93 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+function test() {
+  const Cu = Components.utils;
+  const { ToolSidebar } = require("devtools/client/framework/sidebar");
+
+  const toolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
+                  "<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>";
+
+  const tab1URL = "data:text/html;charset=utf8,<title>1</title><p>1</p>";
+
+  let collectedEvents = [];
+
+  let toolDefinition = {
+    id: "testTool1072208",
+    visibilityswitch: "devtools.testTool1072208.enabled",
+    url: toolURL,
+    label: "Test tool",
+    isTargetSupported: () => true,
+    build: function (iframeWindow, toolbox) {
+      let deferred = defer();
+      executeSoon(() => {
+        deferred.resolve({
+          target: toolbox.target,
+          toolbox: toolbox,
+          isReady: true,
+          destroy: function () {},
+          panelDoc: iframeWindow.document,
+        });
+      });
+      return deferred.promise;
+    },
+  };
+
+  gDevTools.registerTool(toolDefinition);
+
+  addTab("about:blank").then(function (aTab) {
+    let target = TargetFactory.forTab(aTab);
+    gDevTools.showToolbox(target, toolDefinition.id).then(function (toolbox) {
+      let panel = toolbox.getPanel(toolDefinition.id);
+      ok(true, "Tool open");
+
+      panel.once("sidebar-created", function (event, id) {
+        collectedEvents.push(event);
+      });
+
+      panel.once("sidebar-destroyed", function (event, id) {
+        collectedEvents.push(event);
+      });
+
+      let tabbox = panel.panelDoc.getElementById("sidebar");
+      panel.sidebar = new ToolSidebar(tabbox, panel, "testbug1072208", true);
+
+      panel.sidebar.once("show", function (event, id) {
+        collectedEvents.push(event);
+      });
+
+      panel.sidebar.once("hide", function (event, id) {
+        collectedEvents.push(event);
+      });
+
+      panel.sidebar.once("tab1-selected", () => finishUp(panel));
+      panel.sidebar.addTab("tab1", tab1URL, {selected: true});
+      panel.sidebar.show();
+    }).then(null, console.error);
+  });
+
+  function finishUp(panel) {
+    panel.sidebar.hide();
+    panel.sidebar.destroy();
+
+    let events = collectedEvents.join(":");
+    is(events, "sidebar-created:show:hide:sidebar-destroyed",
+      "Found the right amount of collected events.");
+
+    panel.toolbox.destroy().then(function () {
+      gDevTools.unregisterTool(toolDefinition.id);
+      gBrowser.removeCurrentTab();
+
+      executeSoon(function () {
+        finish();
+      });
+    });
+  }
+}
+
diff --git a/devtools/client/framework/test/browser_toolbox_sidebar_existing_tabs.js b/devtools/client/framework/test/browser_toolbox_sidebar_existing_tabs.js
new file mode 100644
index 000000000..339687e10
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_sidebar_existing_tabs.js
@@ -0,0 +1,78 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test that the sidebar widget auto-registers existing tabs.
+
+const {ToolSidebar} = require("devtools/client/framework/sidebar");
+
+const testToolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
+                "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>" +
+                "<hbox flex='1'><description flex='1'>test tool</description>" +
+                "<splitter class='devtools-side-splitter'/>" +
+                "<tabbox flex='1' id='sidebar' class='devtools-sidebar-tabs'>" +
+                "<tabs><tab id='tab1' label='tab 1'></tab><tab id='tab2' label='tab 2'></tab></tabs>" +
+                "<tabpanels flex='1'><tabpanel id='tabpanel1'>tab 1</tabpanel><tabpanel id='tabpanel2'>tab 2</tabpanel></tabpanels>" +
+                "</tabbox></hbox></window>";
+
+const testToolDefinition = {
+  id: "testTool",
+  url: testToolURL,
+  label: "Test Tool",
+  isTargetSupported: () => true,
+  build: (iframeWindow, toolbox) => {
+    return promise.resolve({
+      target: toolbox.target,
+      toolbox: toolbox,
+      isReady: true,
+      destroy: () => {},
+      panelDoc: iframeWindow.document,
+    });
+  }
+};
+
+add_task(function* () {
+  let tab = yield addTab("about:blank");
+
+  let target = TargetFactory.forTab(tab);
+
+  gDevTools.registerTool(testToolDefinition);
+  let toolbox = yield gDevTools.showToolbox(target, testToolDefinition.id);
+
+  let toolPanel = toolbox.getPanel(testToolDefinition.id);
+  let tabbox = toolPanel.panelDoc.getElementById("sidebar");
+
+  info("Creating the sidebar widget");
+  let sidebar = new ToolSidebar(tabbox, toolPanel, "bug1101569");
+
+  info("Checking that existing tabs have been registered");
+  ok(sidebar.getTab("tab1"), "Existing tab 1 was found");
+  ok(sidebar.getTab("tab2"), "Existing tab 2 was found");
+  ok(sidebar.getTabPanel("tabpanel1"), "Existing tabpanel 1 was found");
+  ok(sidebar.getTabPanel("tabpanel2"), "Existing tabpanel 2 was found");
+
+  info("Checking that the sidebar API works with existing tabs");
+
+  sidebar.select("tab2");
+  is(tabbox.selectedTab, tabbox.querySelector("#tab2"),
+    "Existing tabs can be selected");
+
+  sidebar.select("tab1");
+  is(tabbox.selectedTab, tabbox.querySelector("#tab1"),
+    "Existing tabs can be selected");
+
+  is(sidebar.getCurrentTabID(), "tab1", "getCurrentTabID returns the expected id");
+
+  info("Removing a tab");
+  sidebar.removeTab("tab2", "tabpanel2");
+  ok(!sidebar.getTab("tab2"), "Tab 2 was removed correctly");
+  ok(!sidebar.getTabPanel("tabpanel2"), "Tabpanel 2 was removed correctly");
+
+  sidebar.destroy();
+  yield toolbox.destroy();
+  gDevTools.unregisterTool(testToolDefinition.id);
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_sidebar_overflow_menu.js b/devtools/client/framework/test/browser_toolbox_sidebar_overflow_menu.js
new file mode 100644
index 000000000..5f6914a2f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_sidebar_overflow_menu.js
@@ -0,0 +1,80 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test that the sidebar widget correctly displays the "all tabs..." button
+// when the tabs overflow.
+
+const {ToolSidebar} = require("devtools/client/framework/sidebar");
+
+const testToolDefinition = {
+  id: "testTool",
+  url: CHROME_URL_ROOT + "browser_toolbox_sidebar_tool.xul",
+  label: "Test Tool",
+  isTargetSupported: () => true,
+  build: (iframeWindow, toolbox) => {
+    return {
+      target: toolbox.target,
+      toolbox: toolbox,
+      isReady: true,
+      destroy: () => {},
+      panelDoc: iframeWindow.document,
+    };
+  }
+};
+
+add_task(function* () {
+  let tab = yield addTab("about:blank");
+  let target = TargetFactory.forTab(tab);
+
+  gDevTools.registerTool(testToolDefinition);
+  let toolbox = yield gDevTools.showToolbox(target, testToolDefinition.id);
+
+  let toolPanel = toolbox.getPanel(testToolDefinition.id);
+  let tabbox = toolPanel.panelDoc.getElementById("sidebar");
+
+  info("Creating the sidebar widget");
+  let sidebar = new ToolSidebar(tabbox, toolPanel, "bug1101569", {
+    showAllTabsMenu: true
+  });
+
+  let allTabsMenu = toolPanel.panelDoc.querySelector(".devtools-sidebar-alltabs");
+  ok(allTabsMenu, "The all-tabs menu is available");
+  is(allTabsMenu.getAttribute("hidden"), "true", "The menu is hidden for now");
+
+  info("Adding 10 tabs to the sidebar widget");
+  for (let nb = 0; nb < 10; nb++) {
+    let url = `data:text/html;charset=utf8,<title>tab ${nb}</title><p>Test tab ${nb}</p>`;
+    sidebar.addTab("tab" + nb, url, {selected: nb === 0});
+  }
+
+  info("Fake an overflow event so that the all-tabs menu is visible");
+  sidebar._onTabBoxOverflow();
+  ok(!allTabsMenu.hasAttribute("hidden"), "The all-tabs menu is now shown");
+
+  info("Select each tab, one by one");
+  for (let nb = 0; nb < 10; nb++) {
+    let id = "tab" + nb;
+
+    info("Found tab item nb " + nb);
+    let item = allTabsMenu.querySelector("#sidebar-alltabs-item-" + id);
+
+    info("Click on the tab");
+    EventUtils.sendMouseEvent({type: "click"}, item, toolPanel.panelDoc.defaultView);
+
+    is(tabbox.selectedTab.id, "sidebar-tab-" + id,
+      "The selected tab is now nb " + nb);
+  }
+
+  info("Fake an underflow event so that the all-tabs menu gets hidden");
+  sidebar._onTabBoxUnderflow();
+  is(allTabsMenu.getAttribute("hidden"), "true", "The all-tabs menu is hidden");
+
+  yield sidebar.destroy();
+  yield toolbox.destroy();
+  gDevTools.unregisterTool(testToolDefinition.id);
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul b/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul
new file mode 100644
index 000000000..2ce495158
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul
@@ -0,0 +1,18 @@
+<?xml version="1.0"?>
+<!-- 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/. -->
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
+  <box flex="1" class="devtools-responsive-container theme-body">
+    <vbox flex="1" class="devtools-main-content" id="content">test</vbox>
+    <splitter class="devtools-side-splitter"/>
+    <tabbox flex="1" id="sidebar" class="devtools-sidebar-tabs">
+      <tabs/>
+      <tabpanels flex="1"/>
+    </tabbox>
+  </box>
+</window>
diff --git a/devtools/client/framework/test/browser_toolbox_split_console.js b/devtools/client/framework/test/browser_toolbox_split_console.js
new file mode 100644
index 000000000..8e1fecd15
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_split_console.js
@@ -0,0 +1,85 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Tests that these toolbox split console APIs work:
+//  * toolbox.useKeyWithSplitConsole()
+//  * toolbox.isSplitConsoleFocused
+
+let gToolbox = null;
+let panelWin = null;
+
+const URL = "data:text/html;charset=utf8,test split console key delegation";
+
+// Force the old debugger UI since it's directly used (see Bug 1301705)
+Services.prefs.setBoolPref("devtools.debugger.new-debugger-frontend", false);
+registerCleanupFunction(function* () {
+  Services.prefs.clearUserPref("devtools.debugger.new-debugger-frontend");
+});
+
+add_task(function* () {
+  let tab = yield addTab(URL);
+  let target = TargetFactory.forTab(tab);
+  gToolbox = yield gDevTools.showToolbox(target, "jsdebugger");
+  panelWin = gToolbox.getPanel("jsdebugger").panelWin;
+
+  yield gToolbox.openSplitConsole();
+  yield testIsSplitConsoleFocused();
+  yield testUseKeyWithSplitConsole();
+  yield testUseKeyWithSplitConsoleWrongTool();
+
+  yield cleanup();
+});
+
+function* testIsSplitConsoleFocused() {
+  yield gToolbox.openSplitConsole();
+  // The newly opened split console should have focus
+  ok(gToolbox.isSplitConsoleFocused(), "Split console is focused");
+  panelWin.focus();
+  ok(!gToolbox.isSplitConsoleFocused(), "Split console is no longer focused");
+}
+
+// A key bound to the selected tool should trigger it's command
+function* testUseKeyWithSplitConsole() {
+  let commandCalled = false;
+
+  info("useKeyWithSplitConsole on debugger while debugger is focused");
+  gToolbox.useKeyWithSplitConsole("F3", () => {
+    commandCalled = true;
+  }, "jsdebugger");
+
+  info("synthesizeKey with the console focused");
+  let consoleInput = gToolbox.getPanel("webconsole").hud.jsterm.inputNode;
+  consoleInput.focus();
+  synthesizeKeyShortcut("F3", panelWin);
+
+  ok(commandCalled, "Shortcut key should trigger the command");
+}
+
+// A key bound to a *different* tool should not trigger it's command
+function* testUseKeyWithSplitConsoleWrongTool() {
+  let commandCalled = false;
+
+  info("useKeyWithSplitConsole on inspector while debugger is focused");
+  gToolbox.useKeyWithSplitConsole("F4", () => {
+    commandCalled = true;
+  }, "inspector");
+
+  info("synthesizeKey with the console focused");
+  let consoleInput = gToolbox.getPanel("webconsole").hud.jsterm.inputNode;
+  consoleInput.focus();
+  synthesizeKeyShortcut("F4", panelWin);
+
+  ok(!commandCalled, "Shortcut key shouldn't trigger the command");
+}
+
+function* cleanup() {
+  // We don't want the open split console to confuse other tests..
+  Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
+  yield gToolbox.destroy();
+  gBrowser.removeCurrentTab();
+  gToolbox = panelWin = null;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_tabsswitch_shortcuts.js b/devtools/client/framework/test/browser_toolbox_tabsswitch_shortcuts.js
new file mode 100644
index 000000000..b9401f768
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_tabsswitch_shortcuts.js
@@ -0,0 +1,68 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+add_task(function* () {
+  let tab = yield addTab("about:blank");
+  let target = TargetFactory.forTab(tab);
+  yield target.makeRemote();
+
+  let toolIDs = gDevTools.getToolDefinitionArray()
+                         .filter(def => def.isTargetSupported(target))
+                         .map(def => def.id);
+
+  let toolbox = yield gDevTools.showToolbox(target, toolIDs[0], Toolbox.HostType.BOTTOM);
+  let nextShortcut = L10N.getStr("toolbox.nextTool.key");
+  let prevShortcut = L10N.getStr("toolbox.previousTool.key");
+
+  // Iterate over all tools, starting from options to netmonitor, in normal
+  // order.
+  for (let i = 1; i < toolIDs.length; i++) {
+    yield testShortcuts(toolbox, i, nextShortcut, toolIDs);
+  }
+
+  // Iterate again, in the same order, starting from netmonitor (so next one is
+  // 0: options).
+  for (let i = 0; i < toolIDs.length; i++) {
+    yield testShortcuts(toolbox, i, nextShortcut, toolIDs);
+  }
+
+  // Iterate over all tools in reverse order, starting from netmonitor to
+  // options.
+  for (let i = toolIDs.length - 2; i >= 0; i--) {
+    yield testShortcuts(toolbox, i, prevShortcut, toolIDs);
+  }
+
+  // Iterate again, in reverse order again, starting from options (so next one
+  // is length-1: netmonitor).
+  for (let i = toolIDs.length - 1; i >= 0; i--) {
+    yield testShortcuts(toolbox, i, prevShortcut, toolIDs);
+  }
+
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+});
+
+function* testShortcuts(toolbox, index, shortcut, toolIDs) {
+  info("Testing shortcut to switch to tool " + index + ":" + toolIDs[index] +
+       " using shortcut " + shortcut);
+
+  let onToolSelected = toolbox.once("select");
+  synthesizeKeyShortcut(shortcut);
+  let id = yield onToolSelected;
+
+  info("toolbox-select event from " + id);
+
+  is(toolIDs.indexOf(id), index,
+     "Correct tool is selected on pressing the shortcut for " + id);
+}
diff --git a/devtools/client/framework/test/browser_toolbox_target.js b/devtools/client/framework/test/browser_toolbox_target.js
new file mode 100644
index 000000000..68639c501
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_target.js
@@ -0,0 +1,60 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 about:devtools-toolbox?target which allows opening a toolbox in an
+// iframe while defining which document to debug by setting a `target`
+// attribute refering to the document to debug.
+
+add_task(function *() {
+  // iframe loads the document to debug
+  let iframe = document.createElement("browser");
+  iframe.setAttribute("type", "content");
+  document.documentElement.appendChild(iframe);
+
+  let onLoad = once(iframe, "load", true);
+  iframe.setAttribute("src", "data:text/html,document to debug");
+  yield onLoad;
+  is(iframe.contentWindow.document.body.innerHTML, "document to debug");
+
+  // toolbox loads the toolbox document
+  let toolboxIframe = document.createElement("iframe");
+  document.documentElement.appendChild(toolboxIframe);
+
+  // Important step to define which target to debug
+  toolboxIframe.target = iframe;
+
+  let onToolboxReady = gDevTools.once("toolbox-ready");
+
+  onLoad = once(toolboxIframe, "load", true);
+  toolboxIframe.setAttribute("src", "about:devtools-toolbox?target");
+  yield onLoad;
+
+  // Also wait for toolbox-ready, as toolbox document load isn't enough, there
+  // is plenty of asynchronous steps during toolbox load
+  info("Waiting for toolbox-ready");
+  let toolbox = yield onToolboxReady;
+
+  let onToolboxDestroyed = gDevTools.once("toolbox-destroyed");
+  let onTabActorDetached = once(toolbox.target.client, "tabDetached");
+
+  info("Removing the iframes");
+  toolboxIframe.remove();
+
+  // And wait for toolbox-destroyed as toolbox unload is also full of
+  // asynchronous operation that outlast unload event
+  info("Waiting for toolbox-destroyed");
+  yield onToolboxDestroyed;
+  info("Toolbox destroyed");
+
+  // Also wait for tabDetached. Toolbox destroys the Target which calls
+  // TabActor.detach(). But Target doesn't wait for detach's end to resolve.
+  // Whereas it is quite important as it is a significant part of toolbox
+  // cleanup. If we do not wait for it and starts removing debugged document,
+  // the actor is still considered as being attached and continues processing
+  // events.
+  yield onTabActorDetached;
+
+  iframe.remove();
+});
diff --git a/devtools/client/framework/test/browser_toolbox_textbox_context_menu.js b/devtools/client/framework/test/browser_toolbox_textbox_context_menu.js
new file mode 100644
index 000000000..2e5f3210e
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_textbox_context_menu.js
@@ -0,0 +1,55 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+const URL = "data:text/html;charset=utf8,test for textbox context menu";
+
+add_task(function* () {
+  let toolbox = yield openNewTabAndToolbox(URL, "inspector");
+  let textboxContextMenu = toolbox.textBoxContextMenuPopup;
+
+  emptyClipboard();
+
+  // Make sure the focus is predictable.
+  let inspector = toolbox.getPanel("inspector");
+  let onFocus = once(inspector.searchBox, "focus");
+  inspector.searchBox.focus();
+  yield onFocus;
+
+  ok(textboxContextMenu, "The textbox context menu is loaded in the toolbox");
+
+  let cmdUndo = textboxContextMenu.querySelector("[command=cmd_undo]");
+  let cmdDelete = textboxContextMenu.querySelector("[command=cmd_delete]");
+  let cmdSelectAll = textboxContextMenu.querySelector("[command=cmd_selectAll]");
+  let cmdCut = textboxContextMenu.querySelector("[command=cmd_cut]");
+  let cmdCopy = textboxContextMenu.querySelector("[command=cmd_copy]");
+  let cmdPaste = textboxContextMenu.querySelector("[command=cmd_paste]");
+
+  info("Opening context menu");
+
+  let onContextMenuPopup = once(textboxContextMenu, "popupshowing");
+  textboxContextMenu.openPopupAtScreen(0, 0, true);
+  yield onContextMenuPopup;
+
+  is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
+  is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+
+  // Cut/Copy items are enabled in context menu even if there
+  // is no selection. See also Bug 1303033
+  is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
+  is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
+
+  if (isWindows()) {
+    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
+    is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
+  }
+
+  yield cleanup(toolbox);
+});
+
+function* cleanup(toolbox) {
+  yield toolbox.destroy();
+  gBrowser.removeCurrentTab();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_theme_registration.js b/devtools/client/framework/test/browser_toolbox_theme_registration.js
new file mode 100644
index 000000000..7794d457c
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_theme_registration.js
@@ -0,0 +1,102 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+/* import-globals-from shared-head.js */
+"use strict";
+
+// Test for dynamically registering and unregistering themes
+const CHROME_URL = "chrome://mochitests/content/browser/devtools/client/framework/test/";
+
+var toolbox;
+
+add_task(function* themeRegistration() {
+  let tab = yield addTab("data:text/html,test");
+  let target = TargetFactory.forTab(tab);
+  toolbox = yield gDevTools.showToolbox(target, "options");
+
+  let themeId = yield new Promise(resolve => {
+    gDevTools.once("theme-registered", (e, registeredThemeId) => {
+      resolve(registeredThemeId);
+    });
+
+    gDevTools.registerTheme({
+      id: "test-theme",
+      label: "Test theme",
+      stylesheets: [CHROME_URL + "doc_theme.css"],
+      classList: ["theme-test"],
+    });
+  });
+
+  is(themeId, "test-theme", "theme-registered event handler sent theme id");
+
+  ok(gDevTools.getThemeDefinitionMap().has(themeId), "theme added to map");
+});
+
+add_task(function* themeInOptionsPanel() {
+  let panelWin = toolbox.getCurrentPanel().panelWin;
+  let doc = panelWin.frameElement.contentDocument;
+  let themeBox = doc.getElementById("devtools-theme-box");
+  let testThemeOption = themeBox.querySelector(
+    "input[type=radio][value=test-theme]");
+
+  ok(testThemeOption, "new theme exists in the Options panel");
+
+  let lightThemeOption = themeBox.querySelector(
+    "input[type=radio][value=light]");
+
+  let color = panelWin.getComputedStyle(themeBox).color;
+  isnot(color, "rgb(255, 0, 0)", "style unapplied");
+
+  let onThemeSwithComplete = once(panelWin, "theme-switch-complete");
+
+  // Select test theme.
+  testThemeOption.click();
+
+  info("Waiting for theme to finish loading");
+  yield onThemeSwithComplete;
+
+  color = panelWin.getComputedStyle(themeBox).color;
+  is(color, "rgb(255, 0, 0)", "style applied");
+
+  onThemeSwithComplete = once(panelWin, "theme-switch-complete");
+
+  // Select light theme
+  lightThemeOption.click();
+
+  info("Waiting for theme to finish loading");
+  yield onThemeSwithComplete;
+
+  color = panelWin.getComputedStyle(themeBox).color;
+  isnot(color, "rgb(255, 0, 0)", "style unapplied");
+
+  onThemeSwithComplete = once(panelWin, "theme-switch-complete");
+  // Select test theme again.
+  testThemeOption.click();
+  yield onThemeSwithComplete;
+});
+
+add_task(function* themeUnregistration() {
+  let panelWin = toolbox.getCurrentPanel().panelWin;
+  let onUnRegisteredTheme = once(gDevTools, "theme-unregistered");
+  let onThemeSwitchComplete = once(panelWin, "theme-switch-complete");
+  gDevTools.unregisterTheme("test-theme");
+  yield onUnRegisteredTheme;
+  yield onThemeSwitchComplete;
+
+  ok(!gDevTools.getThemeDefinitionMap().has("test-theme"),
+    "theme removed from map");
+
+  let doc = panelWin.frameElement.contentDocument;
+  let themeBox = doc.getElementById("devtools-theme-box");
+
+  // The default light theme must be selected now.
+  is(themeBox.querySelector("#devtools-theme-box [value=light]").checked, true,
+    "light theme must be selected");
+});
+
+add_task(function* cleanup() {
+  yield toolbox.destroy();
+  toolbox = null;
+});
diff --git a/devtools/client/framework/test/browser_toolbox_toggle.js b/devtools/client/framework/test/browser_toolbox_toggle.js
new file mode 100644
index 000000000..d5b6d0e96
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toggle.js
@@ -0,0 +1,108 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Test toggling the toolbox with ACCEL+SHIFT+I / ACCEL+ALT+I and F12 in docked
+// and detached (window) modes.
+
+const URL = "data:text/html;charset=utf-8,Toggling devtools using shortcuts";
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+add_task(function* () {
+  // Make sure this test starts with the selectedTool pref cleared. Previous
+  // tests select various tools, and that sets this pref.
+  Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
+
+  // Test with ACCEL+SHIFT+I / ACCEL+ALT+I (MacOSX) ; modifiers should match :
+  // - toolbox-key-toggle in devtools/client/framework/toolbox-window.xul
+  // - key_devToolboxMenuItem in browser/base/content/browser.xul
+  info("Test toggle using CTRL+SHIFT+I/CMD+ALT+I");
+  yield testToggle("I", {
+    accelKey: true,
+    shiftKey: !navigator.userAgent.match(/Mac/),
+    altKey: navigator.userAgent.match(/Mac/)
+  });
+
+  // Test with F12 ; no modifiers
+  info("Test toggle using F12");
+  yield testToggle("VK_F12", {});
+});
+
+function* testToggle(key, modifiers) {
+  let tab = yield addTab(URL + " ; key : '" + key + "'");
+  yield gDevTools.showToolbox(TargetFactory.forTab(tab));
+
+  yield testToggleDockedToolbox(tab, key, modifiers);
+  yield testToggleDetachedToolbox(tab, key, modifiers);
+
+  yield cleanup();
+}
+
+function* testToggleDockedToolbox(tab, key, modifiers) {
+  let toolbox = getToolboxForTab(tab);
+
+  isnot(toolbox.hostType, Toolbox.HostType.WINDOW,
+    "Toolbox is docked in the main window");
+
+  info("verify docked toolbox is destroyed when using toggle key");
+  let onToolboxDestroyed = once(gDevTools, "toolbox-destroyed");
+  EventUtils.synthesizeKey(key, modifiers);
+  yield onToolboxDestroyed;
+  ok(true, "Docked toolbox is destroyed when using a toggle key");
+
+  info("verify new toolbox is created when using toggle key");
+  let onToolboxReady = once(gDevTools, "toolbox-ready");
+  EventUtils.synthesizeKey(key, modifiers);
+  yield onToolboxReady;
+  ok(true, "Toolbox is created by using when toggle key");
+}
+
+function* testToggleDetachedToolbox(tab, key, modifiers) {
+  let toolbox = getToolboxForTab(tab);
+
+  info("change the toolbox hostType to WINDOW");
+
+  yield toolbox.switchHost(Toolbox.HostType.WINDOW);
+  is(toolbox.hostType, Toolbox.HostType.WINDOW,
+    "Toolbox opened on separate window");
+
+  info("Wait for focus on the toolbox window");
+  yield new Promise(res => waitForFocus(res, toolbox.win));
+
+  info("Focus main window to put the toolbox window in the background");
+
+  let onMainWindowFocus = once(window, "focus");
+  window.focus();
+  yield onMainWindowFocus;
+  ok(true, "Main window focused");
+
+  info("Verify windowed toolbox is focused instead of closed when using " +
+    "toggle key from the main window");
+  let toolboxWindow = toolbox.win.top;
+  let onToolboxWindowFocus = once(toolboxWindow, "focus", true);
+  EventUtils.synthesizeKey(key, modifiers);
+  yield onToolboxWindowFocus;
+  ok(true, "Toolbox focused and not destroyed");
+
+  info("Verify windowed toolbox is destroyed when using toggle key from its " +
+    "own window");
+
+  let onToolboxDestroyed = once(gDevTools, "toolbox-destroyed");
+  EventUtils.synthesizeKey(key, modifiers, toolboxWindow);
+  yield onToolboxDestroyed;
+  ok(true, "Toolbox destroyed");
+}
+
+function getToolboxForTab(tab) {
+  return gDevTools.getToolbox(TargetFactory.forTab(tab));
+}
+
+function* cleanup() {
+  Services.prefs.setCharPref("devtools.toolbox.host",
+    Toolbox.HostType.BOTTOM);
+  gBrowser.removeCurrentTab();
+}
diff --git a/devtools/client/framework/test/browser_toolbox_tool_ready.js b/devtools/client/framework/test/browser_toolbox_tool_ready.js
new file mode 100644
index 000000000..7d430e7c5
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_tool_ready.js
@@ -0,0 +1,51 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+requestLongerTimeout(5);
+
+/**
+ * Whitelisting this test.
+ * As part of bug 1077403, the leaking uncaught rejection should be fixed.
+ */
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Shader Editor is " +
+  "still waiting for a WebGL context to be created.");
+
+function performChecks(target) {
+  return Task.spawn(function* () {
+    let toolIds = gDevTools.getToolDefinitionArray()
+                           .filter(def => def.isTargetSupported(target))
+                           .map(def => def.id);
+
+    let toolbox;
+    for (let index = 0; index < toolIds.length; index++) {
+      let toolId = toolIds[index];
+
+      info("About to open " + index + "/" + toolId);
+      toolbox = yield gDevTools.showToolbox(target, toolId);
+      ok(toolbox, "toolbox exists for " + toolId);
+      is(toolbox.currentToolId, toolId, "currentToolId should be " + toolId);
+
+      let panel = toolbox.getCurrentPanel();
+      ok(panel.isReady, toolId + " panel should be ready");
+    }
+
+    yield toolbox.destroy();
+  });
+}
+
+function test() {
+  Task.spawn(function* () {
+    toggleAllTools(true);
+    let tab = yield addTab("about:blank");
+    let target = TargetFactory.forTab(tab);
+    yield target.makeRemote();
+    yield performChecks(target);
+    gBrowser.removeCurrentTab();
+    toggleAllTools(false);
+    finish();
+  }, console.error);
+}
diff --git a/devtools/client/framework/test/browser_toolbox_tool_remote_reopen.js b/devtools/client/framework/test/browser_toolbox_tool_remote_reopen.js
new file mode 100644
index 000000000..03461e953
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_tool_remote_reopen.js
@@ -0,0 +1,135 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+/**
+ * Whitelisting this test.
+ * As part of bug 1077403, the leaking uncaught rejection should be fixed.
+ */
+thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Shader Editor is " +
+  "still waiting for a WebGL context to be created.");
+
+const { DebuggerServer } = require("devtools/server/main");
+const { DebuggerClient } = require("devtools/shared/client/main");
+
+// Bug 1277805: Too slow for debug runs
+requestLongerTimeout(2);
+
+/**
+ * Bug 979536: Ensure fronts are destroyed after toolbox close.
+ *
+ * The fronts need to be destroyed manually to unbind their onPacket handlers.
+ *
+ * When you initialize a front and call |this.manage|, it adds a client actor
+ * pool that the DebuggerClient uses to route packet replies to that actor.
+ *
+ * Most (all?) tools create a new front when they are opened.  When the destroy
+ * step is skipped and the tool is reopened, a second front is created and also
+ * added to the client actor pool.  When a packet reply is received, is ends up
+ * being routed to the first (now unwanted) front that is still in the client
+ * actor pool.  Since this is not the same front that was used to make the
+ * request, an error occurs.
+ *
+ * This problem does not occur with the toolbox for a local tab because the
+ * toolbox target creates its own DebuggerClient for the local tab, and the
+ * client is destroyed when the toolbox is closed, which removes the client
+ * actor pools, and avoids this issue.
+ *
+ * In WebIDE, we do not destroy the DebuggerClient on toolbox close because it
+ * is still used for other purposes like managing apps, etc. that aren't part of
+ * a toolbox.  Thus, the same client gets reused across multiple toolboxes,
+ * which leads to the tools failing if they don't destroy their fronts.
+ */
+
+function runTools(target) {
+  return Task.spawn(function* () {
+    let toolIds = gDevTools.getToolDefinitionArray()
+                           .filter(def => def.isTargetSupported(target))
+                           .map(def => def.id);
+
+    let toolbox;
+    for (let index = 0; index < toolIds.length; index++) {
+      let toolId = toolIds[index];
+
+      info("About to open " + index + "/" + toolId);
+      toolbox = yield gDevTools.showToolbox(target, toolId, "window");
+      ok(toolbox, "toolbox exists for " + toolId);
+      is(toolbox.currentToolId, toolId, "currentToolId should be " + toolId);
+
+      let panel = toolbox.getCurrentPanel();
+      ok(panel.isReady, toolId + " panel should be ready");
+    }
+
+    yield toolbox.destroy();
+  });
+}
+
+function getClient() {
+  let deferred = defer();
+
+  if (!DebuggerServer.initialized) {
+    DebuggerServer.init();
+    DebuggerServer.addBrowserActors();
+  }
+
+  let transport = DebuggerServer.connectPipe();
+  let client = new DebuggerClient(transport);
+
+  return client.connect().then(() => client);
+}
+
+function getTarget(client) {
+  let deferred = defer();
+
+  client.listTabs(tabList => {
+    let target = TargetFactory.forRemoteTab({
+      client: client,
+      form: tabList.tabs[tabList.selected],
+      chrome: false
+    });
+    deferred.resolve(target);
+  });
+
+  return deferred.promise;
+}
+
+function test() {
+  Task.spawn(function* () {
+    toggleAllTools(true);
+    yield addTab("about:blank");
+
+    let client = yield getClient();
+    let target = yield getTarget(client);
+    yield runTools(target);
+
+    // Actor fronts should be destroyed now that the toolbox has closed, but
+    // look for any that remain.
+    for (let pool of client.__pools) {
+      if (!pool.__poolMap) {
+        continue;
+      }
+      for (let actor of pool.__poolMap.keys()) {
+        // Bug 1056342: Profiler fails today because of framerate actor, but
+        // this appears more complex to rework, so leave it for that bug to
+        // resolve.
+        if (actor.includes("framerateActor")) {
+          todo(false, "Front for " + actor + " still held in pool!");
+          continue;
+        }
+        // gcliActor is for the commandline which is separate to the toolbox
+        if (actor.includes("gcliActor")) {
+          continue;
+        }
+        ok(false, "Front for " + actor + " still held in pool!");
+      }
+    }
+
+    gBrowser.removeCurrentTab();
+    DebuggerServer.destroy();
+    toggleAllTools(false);
+    finish();
+  }, console.error);
+}
diff --git a/devtools/client/framework/test/browser_toolbox_transport_events.js b/devtools/client/framework/test/browser_toolbox_transport_events.js
new file mode 100644
index 000000000..1e2b67ac4
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_transport_events.js
@@ -0,0 +1,108 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+const { on, off } = require("sdk/event/core");
+const { DebuggerClient } = require("devtools/shared/client/main");
+
+function test() {
+  gDevTools.on("toolbox-created", onToolboxCreated);
+  on(DebuggerClient, "connect", onDebuggerClientConnect);
+
+  addTab("about:blank").then(function () {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.showToolbox(target, "webconsole").then(testResults);
+  });
+}
+
+function testResults(toolbox) {
+  testPackets(sent1, received1);
+  testPackets(sent2, received2);
+
+  cleanUp(toolbox);
+}
+
+function cleanUp(toolbox) {
+  gDevTools.off("toolbox-created", onToolboxCreated);
+  off(DebuggerClient, "connect", onDebuggerClientConnect);
+
+  toolbox.destroy().then(function () {
+    gBrowser.removeCurrentTab();
+    executeSoon(function () {
+      finish();
+    });
+  });
+}
+
+function testPackets(sent, received) {
+  ok(sent.length > 0, "There must be at least one sent packet");
+  ok(received.length > 0, "There must be at leaset one received packet");
+
+  if (!sent.length || received.length) {
+    return;
+  }
+
+  let sentPacket = sent[0];
+  let receivedPacket = received[0];
+
+  is(receivedPacket.from, "root",
+    "The first received packet is from the root");
+  is(receivedPacket.applicationType, "browser",
+    "The first received packet has browser type");
+  is(sentPacket.type, "listTabs",
+    "The first sent packet is for list of tabs");
+}
+
+// Listen to the transport object that is associated with the
+// default Toolbox debugger client
+var sent1 = [];
+var received1 = [];
+
+function send1(eventId, packet) {
+  sent1.push(packet);
+}
+
+function onPacket1(eventId, packet) {
+  received1.push(packet);
+}
+
+function onToolboxCreated(eventId, toolbox) {
+  toolbox.target.makeRemote();
+  let client = toolbox.target.client;
+  let transport = client._transport;
+
+  transport.on("send", send1);
+  transport.on("packet", onPacket1);
+
+  client.addOneTimeListener("closed", event => {
+    transport.off("send", send1);
+    transport.off("packet", onPacket1);
+  });
+}
+
+// Listen to all debugger client object protocols.
+var sent2 = [];
+var received2 = [];
+
+function send2(eventId, packet) {
+  sent2.push(packet);
+}
+
+function onPacket2(eventId, packet) {
+  received2.push(packet);
+}
+
+function onDebuggerClientConnect(client) {
+  let transport = client._transport;
+
+  transport.on("send", send2);
+  transport.on("packet", onPacket2);
+
+  client.addOneTimeListener("closed", event => {
+    transport.off("send", send2);
+    transport.off("packet", onPacket2);
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_view_source_01.js b/devtools/client/framework/test/browser_toolbox_view_source_01.js
new file mode 100644
index 000000000..5a9a6d9b0
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_view_source_01.js
@@ -0,0 +1,46 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 Toolbox#viewSourceInDebugger works when debugger is not
+ * yet opened.
+ */
+
+var URL = `${URL_ROOT}doc_viewsource.html`;
+var JS_URL = `${URL_ROOT}code_math.js`;
+
+// Force the old debugger UI since it's directly used (see Bug 1301705)
+Services.prefs.setBoolPref("devtools.debugger.new-debugger-frontend", false);
+registerCleanupFunction(function* () {
+  Services.prefs.clearUserPref("devtools.debugger.new-debugger-frontend");
+});
+
+function* viewSource() {
+  let toolbox = yield openNewTabAndToolbox(URL);
+
+  yield toolbox.viewSourceInDebugger(JS_URL, 2);
+
+  let debuggerPanel = toolbox.getPanel("jsdebugger");
+  ok(debuggerPanel, "The debugger panel was opened.");
+  is(toolbox.currentToolId, "jsdebugger", "The debugger panel was selected.");
+
+  let { DebuggerView } = debuggerPanel.panelWin;
+  let Sources = DebuggerView.Sources;
+
+  is(Sources.selectedValue, getSourceActor(Sources, JS_URL),
+    "The correct source is shown in the debugger.");
+  is(DebuggerView.editor.getCursor().line + 1, 2,
+    "The correct line is highlighted in the debugger's source editor.");
+
+  yield closeToolboxAndTab(toolbox);
+  finish();
+}
+
+function test() {
+  Task.spawn(viewSource).then(finish, (aError) => {
+    ok(false, "Got an error: " + aError.message + "\n" + aError.stack);
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_view_source_02.js b/devtools/client/framework/test/browser_toolbox_view_source_02.js
new file mode 100644
index 000000000..c18e885cf
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_view_source_02.js
@@ -0,0 +1,54 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 Toolbox#viewSourceInDebugger works when debugger is already loaded.
+ */
+
+var URL = `${URL_ROOT}doc_viewsource.html`;
+var JS_URL = `${URL_ROOT}code_math.js`;
+
+// Force the old debugger UI since it's directly used (see Bug 1301705)
+Services.prefs.setBoolPref("devtools.debugger.new-debugger-frontend", false);
+registerCleanupFunction(function* () {
+  Services.prefs.clearUserPref("devtools.debugger.new-debugger-frontend");
+});
+
+function* viewSource() {
+  let toolbox = yield openNewTabAndToolbox(URL);
+  let { panelWin: debuggerWin } = yield toolbox.selectTool("jsdebugger");
+  let debuggerEvents = debuggerWin.EVENTS;
+  let { DebuggerView } = debuggerWin;
+  let Sources = DebuggerView.Sources;
+
+  yield debuggerWin.once(debuggerEvents.SOURCE_SHOWN);
+  ok("A source was shown in the debugger.");
+
+  is(Sources.selectedValue, getSourceActor(Sources, JS_URL),
+    "The correct source is initially shown in the debugger.");
+  is(DebuggerView.editor.getCursor().line, 0,
+    "The correct line is initially highlighted in the debugger's source editor.");
+
+  yield toolbox.viewSourceInDebugger(JS_URL, 2);
+
+  let debuggerPanel = toolbox.getPanel("jsdebugger");
+  ok(debuggerPanel, "The debugger panel was opened.");
+  is(toolbox.currentToolId, "jsdebugger", "The debugger panel was selected.");
+
+  is(Sources.selectedValue, getSourceActor(Sources, JS_URL),
+    "The correct source is shown in the debugger.");
+  is(DebuggerView.editor.getCursor().line + 1, 2,
+    "The correct line is highlighted in the debugger's source editor.");
+
+  yield closeToolboxAndTab(toolbox);
+  finish();
+}
+
+function test() {
+  Task.spawn(viewSource).then(finish, (aError) => {
+    ok(false, "Got an error: " + aError.message + "\n" + aError.stack);
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_view_source_03.js b/devtools/client/framework/test/browser_toolbox_view_source_03.js
new file mode 100644
index 000000000..2d2cda76f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_view_source_03.js
@@ -0,0 +1,40 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 Toolbox#viewSourceInStyleEditor works when style editor is not
+ * yet opened.
+ */
+
+var URL = `${URL_ROOT}doc_viewsource.html`;
+var CSS_URL = `${URL_ROOT}doc_theme.css`;
+
+function* viewSource() {
+  let toolbox = yield openNewTabAndToolbox(URL);
+
+  let fileFound = yield toolbox.viewSourceInStyleEditor(CSS_URL, 2);
+  ok(fileFound, "viewSourceInStyleEditor should resolve to true if source found.");
+
+  let stylePanel = toolbox.getPanel("styleeditor");
+  ok(stylePanel, "The style editor panel was opened.");
+  is(toolbox.currentToolId, "styleeditor", "The style editor panel was selected.");
+
+  let { UI } = stylePanel;
+
+  is(UI.selectedEditor.styleSheet.href, CSS_URL,
+    "The correct source is shown in the style editor.");
+  is(UI.selectedEditor.sourceEditor.getCursor().line + 1, 2,
+    "The correct line is highlighted in the style editor's source editor.");
+
+  yield closeToolboxAndTab(toolbox);
+  finish();
+}
+
+function test() {
+  Task.spawn(viewSource).then(finish, (aError) => {
+    ok(false, "Got an error: " + aError.message + "\n" + aError.stack);
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_view_source_04.js b/devtools/client/framework/test/browser_toolbox_view_source_04.js
new file mode 100644
index 000000000..47d86fc11
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_view_source_04.js
@@ -0,0 +1,39 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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 Toolbox#viewSourceInScratchpad works.
+ */
+
+var URL = `${URL_ROOT}doc_viewsource.html`;
+
+function* viewSource() {
+  let toolbox = yield openNewTabAndToolbox(URL);
+  let win = yield openScratchpadWindow();
+  let { Scratchpad: scratchpad } = win;
+
+  // Brahm's Cello Sonata No.1, Op.38 now in the scratchpad
+  scratchpad.setText("E G B C B\nA B A G A B\nG E");
+  let scratchpadURL = scratchpad.uniqueName;
+
+  // Now select another tool for focus
+  yield toolbox.selectTool("webconsole");
+
+  yield toolbox.viewSourceInScratchpad(scratchpadURL, 2);
+
+  is(scratchpad.editor.getCursor().line, 2,
+    "The correct line is highlighted in scratchpad's editor.");
+
+  win.close();
+  yield closeToolboxAndTab(toolbox);
+  finish();
+}
+
+function test() {
+  Task.spawn(viewSource).then(finish, (aError) => {
+    ok(false, "Got an error: " + aError.message + "\n" + aError.stack);
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_reload_target.js b/devtools/client/framework/test/browser_toolbox_window_reload_target.js
new file mode 100644
index 000000000..9f3339728
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_reload_target.js
@@ -0,0 +1,100 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+requestLongerTimeout(10);
+
+const TEST_URL = "data:text/html;charset=utf-8," +
+                 "<html><head><title>Test reload</title></head>" +
+                 "<body><h1>Testing reload from devtools</h1></body></html>";
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+var target, toolbox, description, reloadsSent, toolIDs;
+
+function test() {
+  addTab(TEST_URL).then(() => {
+    target = TargetFactory.forTab(gBrowser.selectedTab);
+
+    target.makeRemote().then(() => {
+      toolIDs = gDevTools.getToolDefinitionArray()
+                  .filter(def => def.isTargetSupported(target))
+                  .map(def => def.id);
+      gDevTools.showToolbox(target, toolIDs[0], Toolbox.HostType.BOTTOM)
+               .then(startReloadTest);
+    });
+  });
+}
+
+function startReloadTest(aToolbox) {
+  getFrameScript(); // causes frame-script-utils to be loaded into the child.
+  toolbox = aToolbox;
+
+  reloadsSent = 0;
+  let reloads = 0;
+  let reloadCounter = (msg) => {
+    reloads++;
+    info("Detected reload #" + reloads);
+    is(reloads, reloadsSent, "Reloaded from devtools window once and only for " + description + "");
+  };
+  gBrowser.selectedBrowser.messageManager.addMessageListener("devtools:test:load", reloadCounter);
+
+  testAllTheTools("docked", () => {
+    let origHostType = toolbox.hostType;
+    toolbox.switchHost(Toolbox.HostType.WINDOW).then(() => {
+      toolbox.win.focus();
+      testAllTheTools("undocked", () => {
+        toolbox.switchHost(origHostType).then(() => {
+          gBrowser.selectedBrowser.messageManager.removeMessageListener("devtools:test:load", reloadCounter);
+          // If we finish too early, the inspector breaks promises:
+          toolbox.getPanel("inspector").once("new-root", finishUp);
+        });
+      });
+    });
+  }, toolIDs.length - 1 /* only test 1 tool in docked mode, to cut down test time */);
+}
+
+function testAllTheTools(docked, callback, toolNum = 0) {
+  if (toolNum >= toolIDs.length) {
+    return callback();
+  }
+  toolbox.selectTool(toolIDs[toolNum]).then(() => {
+    testReload("toolbox.reload.key", docked, toolIDs[toolNum], () => {
+      testReload("toolbox.reload2.key", docked, toolIDs[toolNum], () => {
+        testReload("toolbox.forceReload.key", docked, toolIDs[toolNum], () => {
+          testReload("toolbox.forceReload2.key", docked, toolIDs[toolNum], () => {
+            testAllTheTools(docked, callback, toolNum + 1);
+          });
+        });
+      });
+    });
+  });
+}
+
+function testReload(shortcut, docked, toolID, callback) {
+  let complete = () => {
+    gBrowser.selectedBrowser.messageManager.removeMessageListener("devtools:test:load", complete);
+    return callback();
+  };
+  gBrowser.selectedBrowser.messageManager.addMessageListener("devtools:test:load", complete);
+
+  description = docked + " devtools with tool " + toolID + ", shortcut #" + shortcut;
+  info("Testing reload in " + description);
+  toolbox.win.focus();
+  synthesizeKeyShortcut(L10N.getStr(shortcut), toolbox.win);
+  reloadsSent++;
+}
+
+function finishUp() {
+  toolbox.destroy().then(() => {
+    gBrowser.removeCurrentTab();
+
+    target = toolbox = description = reloadsSent = toolIDs = null;
+
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_shortcuts.js b/devtools/client/framework/test/browser_toolbox_window_shortcuts.js
new file mode 100644
index 000000000..dde06dfea
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_shortcuts.js
@@ -0,0 +1,84 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+var toolbox, toolIDs, idIndex, modifiedPrefs = [];
+
+function test() {
+  addTab("about:blank").then(function () {
+    toolIDs = [];
+    for (let [id, definition] of gDevTools._tools) {
+      if (definition.key) {
+        toolIDs.push(id);
+
+        // Enable disabled tools
+        let pref = definition.visibilityswitch, prefValue;
+        try {
+          prefValue = Services.prefs.getBoolPref(pref);
+        } catch (e) {
+          continue;
+        }
+        if (!prefValue) {
+          modifiedPrefs.push(pref);
+          Services.prefs.setBoolPref(pref, true);
+        }
+      }
+    }
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    idIndex = 0;
+    gDevTools.showToolbox(target, toolIDs[0], Toolbox.HostType.WINDOW)
+             .then(testShortcuts);
+  });
+}
+
+function testShortcuts(aToolbox, aIndex) {
+  if (aIndex === undefined) {
+    aIndex = 1;
+  } else if (aIndex == toolIDs.length) {
+    tidyUp();
+    return;
+  }
+
+  toolbox = aToolbox;
+  info("Toolbox fired a `ready` event");
+
+  toolbox.once("select", selectCB);
+
+  let key = gDevTools._tools.get(toolIDs[aIndex]).key;
+  let toolModifiers = gDevTools._tools.get(toolIDs[aIndex]).modifiers;
+  let modifiers = {
+    accelKey: toolModifiers.includes("accel"),
+    altKey: toolModifiers.includes("alt"),
+    shiftKey: toolModifiers.includes("shift"),
+  };
+  idIndex = aIndex;
+  info("Testing shortcut for tool " + aIndex + ":" + toolIDs[aIndex] +
+       " using key " + key);
+  EventUtils.synthesizeKey(key, modifiers, toolbox.win.parent);
+}
+
+function selectCB(event, id) {
+  info("toolbox-select event from " + id);
+
+  is(toolIDs.indexOf(id), idIndex,
+     "Correct tool is selected on pressing the shortcut for " + id);
+
+  testShortcuts(toolbox, idIndex + 1);
+}
+
+function tidyUp() {
+  toolbox.destroy().then(function () {
+    gBrowser.removeCurrentTab();
+
+    for (let pref of modifiedPrefs) {
+      Services.prefs.clearUserPref(pref);
+    }
+    toolbox = toolIDs = idIndex = modifiedPrefs = Toolbox = null;
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_title_changes.js b/devtools/client/framework/test/browser_toolbox_window_title_changes.js
new file mode 100644
index 000000000..558c2094f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_title_changes.js
@@ -0,0 +1,108 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+requestLongerTimeout(5);
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+function test() {
+  const URL_1 = "data:text/plain;charset=UTF-8,abcde";
+  const URL_2 = "data:text/plain;charset=UTF-8,12345";
+  const URL_3 = URL_ROOT + "browser_toolbox_window_title_changes_page.html";
+
+  const TOOL_ID_1 = "webconsole";
+  const TOOL_ID_2 = "jsdebugger";
+
+  const NAME_1 = "";
+  const NAME_2 = "";
+  const NAME_3 = "Toolbox test for title update";
+
+  let toolbox;
+
+  addTab(URL_1).then(function () {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.showToolbox(target, null, Toolbox.HostType.BOTTOM)
+      .then(function (aToolbox) { toolbox = aToolbox; })
+      .then(() => toolbox.selectTool(TOOL_ID_1))
+
+    // undock toolbox and check title
+      .then(() => {
+        // We have to first switch the host in order to spawn the new top level window
+        // on which we are going to listen from title change event
+        return toolbox.switchHost(Toolbox.HostType.WINDOW)
+          .then(() => waitForTitleChange(toolbox));
+      })
+      .then(checkTitle.bind(null, NAME_1, URL_1, "toolbox undocked"))
+
+    // switch to different tool and check title
+      .then(() => {
+        let onTitleChanged = waitForTitleChange(toolbox);
+        toolbox.selectTool(TOOL_ID_2);
+        return onTitleChanged;
+      })
+      .then(checkTitle.bind(null, NAME_1, URL_1, "tool changed"))
+
+    // navigate to different local url and check title
+      .then(function () {
+        let onTitleChanged = waitForTitleChange(toolbox);
+        gBrowser.loadURI(URL_2);
+        return onTitleChanged;
+      })
+      .then(checkTitle.bind(null, NAME_2, URL_2, "url changed"))
+
+    // navigate to a real url and check title
+      .then(() => {
+        let onTitleChanged = waitForTitleChange(toolbox);
+        gBrowser.loadURI(URL_3);
+        return onTitleChanged;
+      })
+      .then(checkTitle.bind(null, NAME_3, URL_3, "url changed"))
+
+    // destroy toolbox, create new one hosted in a window (with a
+    // different tool id), and check title
+      .then(function () {
+        // Give the tools a chance to handle the navigation event before
+        // destroying the toolbox.
+        executeSoon(function () {
+          toolbox.destroy()
+            .then(function () {
+              // After destroying the toolbox, a fresh target is required.
+              target = TargetFactory.forTab(gBrowser.selectedTab);
+              return gDevTools.showToolbox(target, null, Toolbox.HostType.WINDOW);
+            })
+            .then(function (aToolbox) { toolbox = aToolbox; })
+            .then(() => {
+              let onTitleChanged = waitForTitleChange(toolbox);
+              toolbox.selectTool(TOOL_ID_1);
+              return onTitleChanged;
+            })
+            .then(checkTitle.bind(null, NAME_3, URL_3,
+                                  "toolbox destroyed and recreated"))
+
+            // clean up
+            .then(() => toolbox.destroy())
+            .then(function () {
+              toolbox = null;
+              gBrowser.removeCurrentTab();
+              Services.prefs.clearUserPref("devtools.toolbox.host");
+              Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
+              Services.prefs.clearUserPref("devtools.toolbox.sideEnabled");
+              finish();
+            });
+        });
+      });
+  });
+}
+
+function checkTitle(name, url, context) {
+  let win = Services.wm.getMostRecentWindow("devtools:toolbox");
+  let expectedTitle;
+  if (name) {
+    expectedTitle = `Developer Tools - ${name} - ${url}`;
+  } else {
+    expectedTitle = `Developer Tools - ${url}`;
+  }
+  is(win.document.title, expectedTitle, context);
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_title_changes_page.html b/devtools/client/framework/test/browser_toolbox_window_title_changes_page.html
new file mode 100644
index 000000000..8678469ee
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_title_changes_page.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Toolbox test for title update</title>
+    <!-- Any copyright is dedicated to the Public Domain.
+         http://creativecommons.org/publicdomain/zero/1.0/ -->
+  </head>
+  <body></body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_window_title_frame_select.js b/devtools/client/framework/test/browser_toolbox_window_title_frame_select.js
new file mode 100644
index 000000000..1e3d66646
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_title_frame_select.js
@@ -0,0 +1,94 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+/* import-globals-from shared-head.js */
+
+"use strict";
+
+/**
+ * Check that the detached devtools window title is not updated when switching
+ * the selected frame. Also check that frames command button has 'open'
+ * attribute set when the list of frames is opened.
+ */
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+const URL = URL_ROOT + "browser_toolbox_window_title_frame_select_page.html";
+const IFRAME_URL = URL_ROOT + "browser_toolbox_window_title_changes_page.html";
+
+add_task(function* () {
+  Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
+
+  yield addTab(URL);
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  let toolbox = yield gDevTools.showToolbox(target, null,
+    Toolbox.HostType.BOTTOM);
+
+  let onTitleChanged = waitForTitleChange(toolbox);
+  yield toolbox.selectTool("inspector");
+  yield onTitleChanged;
+
+  yield toolbox.switchHost(Toolbox.HostType.WINDOW);
+  // Wait for title change event *after* switch host, in order to listen
+  // for the event on the WINDOW host window, which only exists after switchHost
+  yield waitForTitleChange(toolbox);
+
+  is(getTitle(), `Developer Tools - Page title - ${URL}`,
+    "Devtools title correct after switching to detached window host");
+
+  // Wait for tick to avoid unexpected 'popuphidden' event, which
+  // blocks the frame popup menu opened below. See also bug 1276873
+  yield waitForTick();
+
+  // Open frame menu and wait till it's available on the screen.
+  // Also check 'open' attribute on the command button.
+  let btn = toolbox.doc.getElementById("command-button-frames");
+  ok(!btn.getAttribute("open"), "The open attribute must not be present");
+  let menu = toolbox.showFramesMenu({target: btn});
+  yield once(menu, "open");
+
+  is(btn.getAttribute("open"), "true", "The open attribute must be set");
+
+  // Verify that the frame list menu is populated
+  let frames = menu.items;
+  is(frames.length, 2, "We have both frames in the list");
+
+  let topFrameBtn = frames.filter(b => b.label == URL)[0];
+  let iframeBtn = frames.filter(b => b.label == IFRAME_URL)[0];
+  ok(topFrameBtn, "Got top level document in the list");
+  ok(iframeBtn, "Got iframe document in the list");
+
+  // Listen to will-navigate to check if the view is empty
+  let willNavigate = toolbox.target.once("will-navigate");
+
+  onTitleChanged = waitForTitleChange(toolbox);
+
+  // Only select the iframe after we are able to select an element from the top
+  // level document.
+  let newRoot = toolbox.getPanel("inspector").once("new-root");
+  info("Select the iframe");
+  iframeBtn.click();
+
+  yield willNavigate;
+  yield newRoot;
+  yield onTitleChanged;
+
+  info("Navigation to the iframe is done, the inspector should be back up");
+  is(getTitle(), `Developer Tools - Page title - ${URL}`,
+    "Devtools title was not updated after changing inspected frame");
+
+  info("Cleanup toolbox and test preferences.");
+  yield toolbox.destroy();
+  toolbox = null;
+  gBrowser.removeCurrentTab();
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+  Services.prefs.clearUserPref("devtools.toolbox.selectedTool");
+  Services.prefs.clearUserPref("devtools.toolbox.sideEnabled");
+  Services.prefs.clearUserPref("devtools.command-button-frames.enabled");
+  finish();
+});
+
+function getTitle() {
+  return Services.wm.getMostRecentWindow("devtools:toolbox").document.title;
+}
diff --git a/devtools/client/framework/test/browser_toolbox_window_title_frame_select_page.html b/devtools/client/framework/test/browser_toolbox_window_title_frame_select_page.html
new file mode 100644
index 000000000..1eda94a9c
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_window_title_frame_select_page.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Page title</title>
+    <!-- Any copyright is dedicated to the Public Domain.
+         http://creativecommons.org/publicdomain/zero/1.0/ -->
+    <iframe src="browser_toolbox_window_title_changes_page.html"></iframe>
+  </head>
+  <body></body>
+</html>
diff --git a/devtools/client/framework/test/browser_toolbox_zoom.js b/devtools/client/framework/test/browser_toolbox_zoom.js
new file mode 100644
index 000000000..d078b4bc2
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_zoom.js
@@ -0,0 +1,67 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+var toolbox;
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+function test() {
+  addTab("about:blank").then(openToolbox);
+}
+
+function openToolbox() {
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+
+  gDevTools.showToolbox(target).then((aToolbox) => {
+    toolbox = aToolbox;
+    toolbox.selectTool("styleeditor").then(testZoom);
+  });
+}
+
+function testZoom() {
+  info("testing zoom keys");
+
+  testZoomLevel("In", 2, 1.2);
+  testZoomLevel("Out", 3, 0.9);
+  testZoomLevel("Reset", 1, 1);
+
+  tidyUp();
+}
+
+function testZoomLevel(type, times, expected) {
+  sendZoomKey("toolbox.zoom" + type + ".key", times);
+
+  let zoom = getCurrentZoom(toolbox);
+  is(zoom.toFixed(2), expected, "zoom level correct after zoom " + type);
+
+  let savedZoom = parseFloat(Services.prefs.getCharPref(
+    "devtools.toolbox.zoomValue"));
+  is(savedZoom.toFixed(2), expected,
+     "saved zoom level is correct after zoom " + type);
+}
+
+function sendZoomKey(shortcut, times) {
+  for (let i = 0; i < times; i++) {
+    synthesizeKeyShortcut(L10N.getStr(shortcut));
+  }
+}
+
+function getCurrentZoom() {
+  let windowUtils = toolbox.win.QueryInterface(Ci.nsIInterfaceRequestor)
+    .getInterface(Ci.nsIDOMWindowUtils);
+  return windowUtils.fullZoom;
+}
+
+function tidyUp() {
+  toolbox.destroy().then(function () {
+    gBrowser.removeCurrentTab();
+
+    toolbox = null;
+    finish();
+  });
+}
diff --git a/devtools/client/framework/test/browser_two_tabs.js b/devtools/client/framework/test/browser_two_tabs.js
new file mode 100644
index 000000000..08d5f2391
--- /dev/null
+++ b/devtools/client/framework/test/browser_two_tabs.js
@@ -0,0 +1,149 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+/**
+ * Check regression when opening two tabs
+ */
+
+var { DebuggerServer } = require("devtools/server/main");
+var { DebuggerClient } = require("devtools/shared/client/main");
+
+const TAB_URL_1 = "data:text/html;charset=utf-8,foo";
+const TAB_URL_2 = "data:text/html;charset=utf-8,bar";
+
+var gClient;
+var gTab1, gTab2;
+var gTabActor1, gTabActor2;
+
+function test() {
+  waitForExplicitFinish();
+
+  if (!DebuggerServer.initialized) {
+    DebuggerServer.init();
+    DebuggerServer.addBrowserActors();
+  }
+
+  openTabs();
+}
+
+function openTabs() {
+  // Open two tabs, select the second
+  addTab(TAB_URL_1).then(tab1 => {
+    gTab1 = tab1;
+    addTab(TAB_URL_2).then(tab2 => {
+      gTab2 = tab2;
+
+      connect();
+    });
+  });
+}
+
+function connect() {
+  // Connect to debugger server to fetch the two tab actors
+  gClient = new DebuggerClient(DebuggerServer.connectPipe());
+  gClient.connect()
+    .then(() => gClient.listTabs())
+    .then(response => {
+      // Fetch the tab actors for each tab
+      gTabActor1 = response.tabs.filter(a => a.url === TAB_URL_1)[0];
+      gTabActor2 = response.tabs.filter(a => a.url === TAB_URL_2)[0];
+
+      checkGetTab();
+    });
+}
+
+function checkGetTab() {
+  gClient.getTab({tab: gTab1})
+         .then(response => {
+           is(JSON.stringify(gTabActor1), JSON.stringify(response.tab),
+              "getTab returns the same tab grip for first tab");
+         })
+         .then(() => {
+           let filter = {};
+           // Filter either by tabId or outerWindowID,
+           // if we are running tests OOP or not.
+           if (gTab1.linkedBrowser.frameLoader.tabParent) {
+             filter.tabId = gTab1.linkedBrowser.frameLoader.tabParent.tabId;
+           } else {
+             let windowUtils = gTab1.linkedBrowser.contentWindow
+               .QueryInterface(Ci.nsIInterfaceRequestor)
+               .getInterface(Ci.nsIDOMWindowUtils);
+             filter.outerWindowID = windowUtils.outerWindowID;
+           }
+           return gClient.getTab(filter);
+         })
+         .then(response => {
+           is(JSON.stringify(gTabActor1), JSON.stringify(response.tab),
+              "getTab returns the same tab grip when filtering by tabId/outerWindowID");
+         })
+         .then(() => gClient.getTab({tab: gTab2}))
+         .then(response => {
+           is(JSON.stringify(gTabActor2), JSON.stringify(response.tab),
+              "getTab returns the same tab grip for second tab");
+         })
+         .then(checkGetTabFailures);
+}
+
+function checkGetTabFailures() {
+  gClient.getTab({ tabId: -999 })
+    .then(
+      response => ok(false, "getTab unexpectedly succeed with a wrong tabId"),
+      response => {
+        is(response.error, "noTab");
+        is(response.message, "Unable to find tab with tabId '-999'");
+      }
+    )
+    .then(() => gClient.getTab({ outerWindowID: -999 }))
+    .then(
+      response => ok(false, "getTab unexpectedly succeed with a wrong outerWindowID"),
+      response => {
+        is(response.error, "noTab");
+        is(response.message, "Unable to find tab with outerWindowID '-999'");
+      }
+    )
+    .then(checkSelectedTabActor);
+
+}
+
+function checkSelectedTabActor() {
+  // Send a naive request to the second tab actor
+  // to check if it works
+  gClient.request({ to: gTabActor2.consoleActor, type: "startListeners", listeners: [] }, aResponse => {
+    ok("startedListeners" in aResponse, "Actor from the selected tab should respond to the request.");
+
+    closeSecondTab();
+  });
+}
+
+function closeSecondTab() {
+  // Close the second tab, currently selected
+  let container = gBrowser.tabContainer;
+  container.addEventListener("TabClose", function onTabClose() {
+    container.removeEventListener("TabClose", onTabClose);
+
+    checkFirstTabActor();
+  });
+  gBrowser.removeTab(gTab2);
+}
+
+function checkFirstTabActor() {
+  // then send a request to the first tab actor
+  // to check if it still works
+  gClient.request({ to: gTabActor1.consoleActor, type: "startListeners", listeners: [] }, aResponse => {
+    ok("startedListeners" in aResponse, "Actor from the first tab should still respond.");
+
+    cleanup();
+  });
+}
+
+function cleanup() {
+  let container = gBrowser.tabContainer;
+  container.addEventListener("TabClose", function onTabClose() {
+    container.removeEventListener("TabClose", onTabClose);
+
+    gClient.close().then(finish);
+  });
+  gBrowser.removeTab(gTab1);
+}
diff --git a/devtools/client/framework/test/code_binary_search.coffee b/devtools/client/framework/test/code_binary_search.coffee
new file mode 100644
index 000000000..e3dacdaaa
--- /dev/null
+++ b/devtools/client/framework/test/code_binary_search.coffee
@@ -0,0 +1,18 @@
+# Uses a binary search algorithm to locate a value in the specified array.
+window.binary_search = (items, value) ->
+
+  start = 0
+  stop  = items.length - 1
+  pivot = Math.floor (start + stop) / 2
+
+  while items[pivot] isnt value and start < stop
+
+    # Adjust the search area.
+    stop  = pivot - 1 if value < items[pivot]
+    start = pivot + 1 if value > items[pivot]
+
+    # Recalculate the pivot.
+    pivot = Math.floor (stop + start) / 2
+
+  # Make sure we've found the correct value.
+  if items[pivot] is value then pivot else -1
\ No newline at end of file
diff --git a/devtools/client/framework/test/code_binary_search.js b/devtools/client/framework/test/code_binary_search.js
new file mode 100644
index 000000000..c43848a60
--- /dev/null
+++ b/devtools/client/framework/test/code_binary_search.js
@@ -0,0 +1,29 @@
+// Generated by CoffeeScript 1.6.1
+(function() {
+
+  window.binary_search = function(items, value) {
+    var pivot, start, stop;
+    start = 0;
+    stop = items.length - 1;
+    pivot = Math.floor((start + stop) / 2);
+    while (items[pivot] !== value && start < stop) {
+      if (value < items[pivot]) {
+        stop = pivot - 1;
+      }
+      if (value > items[pivot]) {
+        start = pivot + 1;
+      }
+      pivot = Math.floor((stop + start) / 2);
+    }
+    if (items[pivot] === value) {
+      return pivot;
+    } else {
+      return -1;
+    }
+  };
+
+}).call(this);
+
+/*
+//# sourceMappingURL=code_binary_search.map
+*/
diff --git a/devtools/client/framework/test/code_binary_search.map b/devtools/client/framework/test/code_binary_search.map
new file mode 100644
index 000000000..8d2251125
--- /dev/null
+++ b/devtools/client/framework/test/code_binary_search.map
@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "file": "code_binary_search.js",
+  "sourceRoot": "",
+  "sources": [
+    "code_binary_search.coffee"
+  ],
+  "names": [],
+  "mappings": ";AACA;CAAA;CAAA,CAAA,CAAuB,EAAA,CAAjB,GAAkB,IAAxB;CAEE,OAAA,UAAA;CAAA,EAAQ,CAAR,CAAA;CAAA,EACQ,CAAR,CAAa,CAAL;CADR,EAEQ,CAAR,CAAA;CAEA,EAA0C,CAAR,CAAtB,MAAN;CAGJ,EAA6B,CAAR,CAAA,CAArB;CAAA,EAAQ,CAAR,CAAQ,GAAR;QAAA;CACA,EAA6B,CAAR,CAAA,CAArB;CAAA,EAAQ,EAAR,GAAA;QADA;CAAA,EAIQ,CAAI,CAAZ,CAAA;CAXF,IAIA;CAUA,GAAA,CAAS;CAAT,YAA8B;MAA9B;AAA0C,CAAD,YAAA;MAhBpB;CAAvB,EAAuB;CAAvB"
+}
diff --git a/devtools/client/framework/test/code_math.js b/devtools/client/framework/test/code_math.js
new file mode 100644
index 000000000..9fe2a3541
--- /dev/null
+++ b/devtools/client/framework/test/code_math.js
@@ -0,0 +1,9 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+function add(a, b, k) {
+  var result = a + b;
+  return k(result);
+}
diff --git a/devtools/client/framework/test/code_ugly.js b/devtools/client/framework/test/code_ugly.js
new file mode 100644
index 000000000..ccf8d5488
--- /dev/null
+++ b/devtools/client/framework/test/code_ugly.js
@@ -0,0 +1,3 @@
+function foo() { var a=1; var b=2; bar(a, b); }
+function bar(c, d) { return c - d; }
+foo();
diff --git a/devtools/client/framework/test/doc_empty-tab-01.html b/devtools/client/framework/test/doc_empty-tab-01.html
new file mode 100644
index 000000000..28398f776
--- /dev/null
+++ b/devtools/client/framework/test/doc_empty-tab-01.html
@@ -0,0 +1,14 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Empty test page 1</title>
+  </head>
+
+  <body>
+  </body>
+
+</html>
diff --git a/devtools/client/framework/test/doc_theme.css b/devtools/client/framework/test/doc_theme.css
new file mode 100644
index 000000000..5ed6e866a
--- /dev/null
+++ b/devtools/client/framework/test/doc_theme.css
@@ -0,0 +1,3 @@
+.theme-test #devtools-theme-box {
+  color: red !important;
+}
diff --git a/devtools/client/framework/test/doc_viewsource.html b/devtools/client/framework/test/doc_viewsource.html
new file mode 100644
index 000000000..7094eb87e
--- /dev/null
+++ b/devtools/client/framework/test/doc_viewsource.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Toolbox test for View Source methods</title>
+    <!-- Any copyright is dedicated to the Public Domain.
+         http://creativecommons.org/publicdomain/zero/1.0/ -->
+    <link charset="UTF-8" rel="stylesheet" href="doc_theme.css" />
+    <script src="code_math.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/devtools/client/framework/test/head.js b/devtools/client/framework/test/head.js
new file mode 100644
index 000000000..22433b237
--- /dev/null
+++ b/devtools/client/framework/test/head.js
@@ -0,0 +1,148 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+/* import-globals-from shared-head.js */
+
+// shared-head.js handles imports, constants, and utility functions
+Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", this);
+
+function toggleAllTools(state) {
+  for (let [, tool] of gDevTools._tools) {
+    if (!tool.visibilityswitch) {
+      continue;
+    }
+    if (state) {
+      Services.prefs.setBoolPref(tool.visibilityswitch, true);
+    } else {
+      Services.prefs.clearUserPref(tool.visibilityswitch);
+    }
+  }
+}
+
+function getChromeActors(callback)
+{
+  let { DebuggerServer } = require("devtools/server/main");
+  let { DebuggerClient } = require("devtools/shared/client/main");
+
+  if (!DebuggerServer.initialized) {
+    DebuggerServer.init();
+    DebuggerServer.addBrowserActors();
+  }
+  DebuggerServer.allowChromeProcess = true;
+
+  let client = new DebuggerClient(DebuggerServer.connectPipe());
+  client.connect()
+    .then(() => client.getProcess())
+    .then(response => {
+      callback(client, response.form);
+    });
+
+  SimpleTest.registerCleanupFunction(() => {
+    DebuggerServer.destroy();
+  });
+}
+
+function getSourceActor(aSources, aURL) {
+  let item = aSources.getItemForAttachment(a => a.source.url === aURL);
+  return item && item.value;
+}
+
+/**
+ * Open a Scratchpad window.
+ *
+ * @return nsIDOMWindow
+ *         The new window object that holds Scratchpad.
+ */
+function* openScratchpadWindow() {
+  let { promise: p, resolve } = defer();
+  let win = ScratchpadManager.openScratchpad();
+
+  yield once(win, "load");
+
+  win.Scratchpad.addObserver({
+    onReady: function () {
+      win.Scratchpad.removeObserver(this);
+      resolve(win);
+    }
+  });
+  return p;
+}
+
+/**
+ * Wait for a content -> chrome message on the message manager (the window
+ * messagemanager is used).
+ * @param {String} name The message name
+ * @return {Promise} A promise that resolves to the response data when the
+ * message has been received
+ */
+function waitForContentMessage(name) {
+  info("Expecting message " + name + " from content");
+
+  let mm = gBrowser.selectedBrowser.messageManager;
+
+  let def = defer();
+  mm.addMessageListener(name, function onMessage(msg) {
+    mm.removeMessageListener(name, onMessage);
+    def.resolve(msg.data);
+  });
+  return def.promise;
+}
+
+/**
+ * Send an async message to the frame script (chrome -> content) and wait for a
+ * response message with the same name (content -> chrome).
+ * @param {String} name The message name. Should be one of the messages defined
+ * in doc_frame_script.js
+ * @param {Object} data Optional data to send along
+ * @param {Object} objects Optional CPOW objects to send along
+ * @param {Boolean} expectResponse If set to false, don't wait for a response
+ * with the same name from the content script. Defaults to true.
+ * @return {Promise} Resolves to the response data if a response is expected,
+ * immediately resolves otherwise
+ */
+function executeInContent(name, data = {}, objects = {}, expectResponse = true) {
+  info("Sending message " + name + " to content");
+  let mm = gBrowser.selectedBrowser.messageManager;
+
+  mm.sendAsyncMessage(name, data, objects);
+  if (expectResponse) {
+    return waitForContentMessage(name);
+  } else {
+    return promise.resolve();
+  }
+}
+
+/**
+ * Synthesize a keypress from a <key> element, taking into account
+ * any modifiers.
+ * @param {Element} el the <key> element to synthesize
+ */
+function synthesizeKeyElement(el) {
+  let key = el.getAttribute("key") || el.getAttribute("keycode");
+  let mod = {};
+  el.getAttribute("modifiers").split(" ").forEach((m) => mod[m + "Key"] = true);
+  info(`Synthesizing: key=${key}, mod=${JSON.stringify(mod)}`);
+  EventUtils.synthesizeKey(key, mod, el.ownerDocument.defaultView);
+}
+
+/* Check the toolbox host type and prefs to make sure they match the
+ * expected values
+ * @param {Toolbox}
+ * @param {HostType} hostType
+ *        One of {SIDE, BOTTOM, WINDOW} from Toolbox.HostType
+ * @param {HostType} Optional previousHostType
+ *        The host that will be switched to when calling switchToPreviousHost
+ */
+function checkHostType(toolbox, hostType, previousHostType) {
+  is(toolbox.hostType, hostType, "host type is " + hostType);
+
+  let pref = Services.prefs.getCharPref("devtools.toolbox.host");
+  is(pref, hostType, "host pref is " + hostType);
+
+  if (previousHostType) {
+    is(Services.prefs.getCharPref("devtools.toolbox.previousHost"),
+      previousHostType, "The previous host is correct");
+  }
+}
diff --git a/devtools/client/framework/test/helper_disable_cache.js b/devtools/client/framework/test/helper_disable_cache.js
new file mode 100644
index 000000000..5e2feef8f
--- /dev/null
+++ b/devtools/client/framework/test/helper_disable_cache.js
@@ -0,0 +1,128 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+// Common code shared by browser_toolbox_options_disable_cache-*.js
+const TEST_URI = URL_ROOT + "browser_toolbox_options_disable_cache.sjs";
+var tabs = [
+  {
+    title: "Tab 0",
+    desc: "Toggles cache on.",
+    startToolbox: true
+  },
+  {
+    title: "Tab 1",
+    desc: "Toolbox open before Tab 1 toggles cache.",
+    startToolbox: true
+  },
+  {
+    title: "Tab 2",
+    desc: "Opens toolbox after Tab 1 has toggled cache. Also closes and opens.",
+    startToolbox: false
+  },
+  {
+    title: "Tab 3",
+    desc: "No toolbox",
+    startToolbox: false
+  }];
+
+function* initTab(tabX, startToolbox) {
+  tabX.tab = yield addTab(TEST_URI);
+  tabX.target = TargetFactory.forTab(tabX.tab);
+
+  if (startToolbox) {
+    tabX.toolbox = yield gDevTools.showToolbox(tabX.target, "options");
+  }
+}
+
+function* checkCacheStateForAllTabs(states) {
+  for (let i = 0; i < tabs.length; i++) {
+    let tab = tabs[i];
+    yield checkCacheEnabled(tab, states[i]);
+  }
+}
+
+function* checkCacheEnabled(tabX, expected) {
+  gBrowser.selectedTab = tabX.tab;
+
+  yield reloadTab(tabX);
+
+  let oldGuid = yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function () {
+    let doc = content.document;
+    let h1 = doc.querySelector("h1");
+    return h1.textContent;
+  });
+
+  yield reloadTab(tabX);
+
+  let guid = yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function () {
+    let doc = content.document;
+    let h1 = doc.querySelector("h1");
+    return h1.textContent;
+  });
+
+  if (expected) {
+    is(guid, oldGuid, tabX.title + " cache is enabled");
+  } else {
+    isnot(guid, oldGuid, tabX.title + " cache is not enabled");
+  }
+}
+
+function* setDisableCacheCheckboxChecked(tabX, state) {
+  gBrowser.selectedTab = tabX.tab;
+
+  let panel = tabX.toolbox.getCurrentPanel();
+  let cbx = panel.panelDoc.getElementById("devtools-disable-cache");
+
+  if (cbx.checked !== state) {
+    info("Setting disable cache checkbox to " + state + " for " + tabX.title);
+    cbx.click();
+
+    // We need to wait for all checkboxes to be updated and the docshells to
+    // apply the new cache settings.
+    yield waitForTick();
+  }
+}
+
+function reloadTab(tabX) {
+  let def = defer();
+  let browser = gBrowser.selectedBrowser;
+
+  BrowserTestUtils.browserLoaded(browser).then(function () {
+    info("Reloaded tab " + tabX.title);
+    def.resolve();
+  });
+
+  info("Reloading tab " + tabX.title);
+  let mm = getFrameScript();
+  mm.sendAsyncMessage("devtools:test:reload");
+
+  return def.promise;
+}
+
+function* destroyTab(tabX) {
+  let toolbox = gDevTools.getToolbox(tabX.target);
+
+  let onceDestroyed = promise.resolve();
+  if (toolbox) {
+    onceDestroyed = gDevTools.once("toolbox-destroyed");
+  }
+
+  info("Removing tab " + tabX.title);
+  gBrowser.removeTab(tabX.tab);
+  info("Removed tab " + tabX.title);
+
+  info("Waiting for toolbox-destroyed");
+  yield onceDestroyed;
+}
+
+function* finishUp() {
+  for (let tab of tabs) {
+    yield destroyTab(tab);
+  }
+
+  tabs = null;
+}
diff --git a/devtools/client/framework/test/serviceworker.js b/devtools/client/framework/test/serviceworker.js
new file mode 100644
index 000000000..ed3c1ec32
--- /dev/null
+++ b/devtools/client/framework/test/serviceworker.js
@@ -0,0 +1,6 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+// empty service worker, always succeed!
diff --git a/devtools/client/framework/test/shared-head.js b/devtools/client/framework/test/shared-head.js
new file mode 100644
index 000000000..a89c6d752
--- /dev/null
+++ b/devtools/client/framework/test/shared-head.js
@@ -0,0 +1,596 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// This shared-head.js file is used for multiple mochitest test directories in
+// devtools.
+// It contains various common helper functions.
+
+const {classes: Cc, interfaces: Ci, utils: Cu, results: Cr, Constructor: CC}
+  = Components;
+
+function scopedCuImport(path) {
+  const scope = {};
+  Cu.import(path, scope);
+  return scope;
+}
+
+const {console} = scopedCuImport("resource://gre/modules/Console.jsm");
+const {ScratchpadManager} = scopedCuImport("resource://devtools/client/scratchpad/scratchpad-manager.jsm");
+const {loader, require} = scopedCuImport("resource://devtools/shared/Loader.jsm");
+
+const {gDevTools} = require("devtools/client/framework/devtools");
+const {TargetFactory} = require("devtools/client/framework/target");
+const DevToolsUtils = require("devtools/shared/DevToolsUtils");
+const flags = require("devtools/shared/flags");
+let promise = require("promise");
+let defer = require("devtools/shared/defer");
+const Services = require("Services");
+const {Task} = require("devtools/shared/task");
+const {KeyShortcuts} = require("devtools/client/shared/key-shortcuts");
+
+const TEST_DIR = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
+const CHROME_URL_ROOT = TEST_DIR + "/";
+const URL_ROOT = CHROME_URL_ROOT.replace("chrome://mochitests/content/",
+                                         "http://example.com/");
+const URL_ROOT_SSL = CHROME_URL_ROOT.replace("chrome://mochitests/content/",
+                                             "https://example.com/");
+
+// All test are asynchronous
+waitForExplicitFinish();
+
+var EXPECTED_DTU_ASSERT_FAILURE_COUNT = 0;
+
+registerCleanupFunction(function () {
+  if (DevToolsUtils.assertionFailureCount !==
+      EXPECTED_DTU_ASSERT_FAILURE_COUNT) {
+    ok(false,
+      "Should have had the expected number of DevToolsUtils.assert() failures."
+      + " Expected " + EXPECTED_DTU_ASSERT_FAILURE_COUNT
+      + ", got " + DevToolsUtils.assertionFailureCount);
+  }
+});
+
+// Uncomment this pref to dump all devtools emitted events to the console.
+// Services.prefs.setBoolPref("devtools.dump.emit", true);
+
+/**
+ * Watch console messages for failed propType definitions in React components.
+ */
+const ConsoleObserver = {
+  QueryInterface: XPCOMUtils.generateQI([Ci.nsIObserver]),
+
+  observe: function (subject, topic, data) {
+    let message = subject.wrappedJSObject.arguments[0];
+
+    if (/Failed propType/.test(message)) {
+      ok(false, message);
+    }
+  }
+};
+
+Services.obs.addObserver(ConsoleObserver, "console-api-log-event", false);
+registerCleanupFunction(() => {
+  Services.obs.removeObserver(ConsoleObserver, "console-api-log-event");
+});
+
+var waitForTime = DevToolsUtils.waitForTime;
+
+function getFrameScript() {
+  let mm = gBrowser.selectedBrowser.messageManager;
+  let frameURL = "chrome://devtools/content/shared/frame-script-utils.js";
+  mm.loadFrameScript(frameURL, false);
+  SimpleTest.registerCleanupFunction(() => {
+    mm = null;
+  });
+  return mm;
+}
+
+flags.testing = true;
+registerCleanupFunction(() => {
+  flags.testing = false;
+  Services.prefs.clearUserPref("devtools.dump.emit");
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+  Services.prefs.clearUserPref("devtools.toolbox.previousHost");
+  Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
+});
+
+registerCleanupFunction(function* cleanup() {
+  while (gBrowser.tabs.length > 1) {
+    yield closeTabAndToolbox(gBrowser.selectedTab);
+  }
+});
+
+/**
+ * Add a new test tab in the browser and load the given url.
+ * @param {String} url The url to be loaded in the new tab
+ * @param {Object} options Object with various optional fields:
+ *   - {Boolean} background If true, open the tab in background
+ *   - {ChromeWindow} window Firefox top level window we should use to open the tab
+ * @return a promise that resolves to the tab object when the url is loaded
+ */
+var addTab = Task.async(function* (url, options = { background: false, window: window }) {
+  info("Adding a new tab with URL: " + url);
+
+  let { background } = options;
+  let { gBrowser } = options.window ? options.window : window;
+
+  let tab = gBrowser.addTab(url);
+  if (!background) {
+    gBrowser.selectedTab = tab;
+  }
+  yield BrowserTestUtils.browserLoaded(tab.linkedBrowser);
+
+  info("Tab added and finished loading");
+
+  return tab;
+});
+
+/**
+ * Remove the given tab.
+ * @param {Object} tab The tab to be removed.
+ * @return Promise<undefined> resolved when the tab is successfully removed.
+ */
+var removeTab = Task.async(function* (tab) {
+  info("Removing tab.");
+
+  let { gBrowser } = tab.ownerDocument.defaultView;
+  let onClose = once(gBrowser.tabContainer, "TabClose");
+  gBrowser.removeTab(tab);
+  yield onClose;
+
+  info("Tab removed and finished closing");
+});
+
+/**
+ * Refresh the given tab.
+ * @param {Object} tab The tab to be refreshed.
+ * @return Promise<undefined> resolved when the tab is successfully refreshed.
+ */
+var refreshTab = Task.async(function*(tab) {
+  info("Refreshing tab.");
+  const finished = BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
+  gBrowser.reloadTab(gBrowser.selectedTab);
+  yield finished;
+  info("Tab finished refreshing.");
+});
+
+/**
+ * Simulate a key event from a <key> element.
+ * @param {DOMNode} key
+ */
+function synthesizeKeyFromKeyTag(key) {
+  is(key && key.tagName, "key", "Successfully retrieved the <key> node");
+
+  let modifiersAttr = key.getAttribute("modifiers");
+
+  let name = null;
+
+  if (key.getAttribute("keycode")) {
+    name = key.getAttribute("keycode");
+  } else if (key.getAttribute("key")) {
+    name = key.getAttribute("key");
+  }
+
+  isnot(name, null, "Successfully retrieved keycode/key");
+
+  let modifiers = {
+    shiftKey: !!modifiersAttr.match("shift"),
+    ctrlKey: !!modifiersAttr.match("control"),
+    altKey: !!modifiersAttr.match("alt"),
+    metaKey: !!modifiersAttr.match("meta"),
+    accelKey: !!modifiersAttr.match("accel")
+  };
+
+  info("Synthesizing key " + name + " " + JSON.stringify(modifiers));
+  EventUtils.synthesizeKey(name, modifiers);
+}
+
+/**
+ * Simulate a key event from an electron key shortcut string:
+ * https://github.com/electron/electron/blob/master/docs/api/accelerator.md
+ *
+ * @param {String} key
+ * @param {DOMWindow} target
+ *        Optional window where to fire the key event
+ */
+function synthesizeKeyShortcut(key, target) {
+  // parseElectronKey requires any window, just to access `KeyboardEvent`
+  let window = Services.appShell.hiddenDOMWindow;
+  let shortcut = KeyShortcuts.parseElectronKey(window, key);
+  let keyEvent = {
+    altKey: shortcut.alt,
+    ctrlKey: shortcut.ctrl,
+    metaKey: shortcut.meta,
+    shiftKey: shortcut.shift
+  };
+  if (shortcut.keyCode) {
+    keyEvent.keyCode = shortcut.keyCode;
+  }
+
+  info("Synthesizing key shortcut: " + key);
+  EventUtils.synthesizeKey(shortcut.key || "", keyEvent, target);
+}
+
+/**
+ * Wait for eventName on target to be delivered a number of times.
+ *
+ * @param {Object} target
+ *        An observable object that either supports on/off or
+ *        addEventListener/removeEventListener
+ * @param {String} eventName
+ * @param {Number} numTimes
+ *        Number of deliveries to wait for.
+ * @param {Boolean} useCapture
+ *        Optional, for addEventListener/removeEventListener
+ * @return A promise that resolves when the event has been handled
+ */
+function waitForNEvents(target, eventName, numTimes, useCapture = false) {
+  info("Waiting for event: '" + eventName + "' on " + target + ".");
+
+  let deferred = defer();
+  let count = 0;
+
+  for (let [add, remove] of [
+    ["addEventListener", "removeEventListener"],
+    ["addListener", "removeListener"],
+    ["on", "off"]
+  ]) {
+    if ((add in target) && (remove in target)) {
+      target[add](eventName, function onEvent(...aArgs) {
+        info("Got event: '" + eventName + "' on " + target + ".");
+        if (++count == numTimes) {
+          target[remove](eventName, onEvent, useCapture);
+          deferred.resolve.apply(deferred, aArgs);
+        }
+      }, useCapture);
+      break;
+    }
+  }
+
+  return deferred.promise;
+}
+
+/**
+ * Wait for eventName on target.
+ *
+ * @param {Object} target
+ *        An observable object that either supports on/off or
+ *        addEventListener/removeEventListener
+ * @param {String} eventName
+ * @param {Boolean} useCapture
+ *        Optional, for addEventListener/removeEventListener
+ * @return A promise that resolves when the event has been handled
+ */
+function once(target, eventName, useCapture = false) {
+  return waitForNEvents(target, eventName, 1, useCapture);
+}
+
+/**
+ * Some tests may need to import one or more of the test helper scripts.
+ * A test helper script is simply a js file that contains common test code that
+ * is either not common-enough to be in head.js, or that is located in a
+ * separate directory.
+ * The script will be loaded synchronously and in the test's scope.
+ * @param {String} filePath The file path, relative to the current directory.
+ *                 Examples:
+ *                 - "helper_attributes_test_runner.js"
+ *                 - "../../../commandline/test/helpers.js"
+ */
+function loadHelperScript(filePath) {
+  let testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/"));
+  Services.scriptloader.loadSubScript(testDir + "/" + filePath, this);
+}
+
+/**
+ * Wait for a tick.
+ * @return {Promise}
+ */
+function waitForTick() {
+  let deferred = defer();
+  executeSoon(deferred.resolve);
+  return deferred.promise;
+}
+
+/**
+ * This shouldn't be used in the tests, but is useful when writing new tests or
+ * debugging existing tests in order to introduce delays in the test steps
+ *
+ * @param {Number} ms
+ *        The time to wait
+ * @return A promise that resolves when the time is passed
+ */
+function wait(ms) {
+  return new promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Open the toolbox in a given tab.
+ * @param {XULNode} tab The tab the toolbox should be opened in.
+ * @param {String} toolId Optional. The ID of the tool to be selected.
+ * @param {String} hostType Optional. The type of toolbox host to be used.
+ * @return {Promise} Resolves with the toolbox, when it has been opened.
+ */
+var openToolboxForTab = Task.async(function* (tab, toolId, hostType) {
+  info("Opening the toolbox");
+
+  let toolbox;
+  let target = TargetFactory.forTab(tab);
+  yield target.makeRemote();
+
+  // Check if the toolbox is already loaded.
+  toolbox = gDevTools.getToolbox(target);
+  if (toolbox) {
+    if (!toolId || (toolId && toolbox.getPanel(toolId))) {
+      info("Toolbox is already opened");
+      return toolbox;
+    }
+  }
+
+  // If not, load it now.
+  toolbox = yield gDevTools.showToolbox(target, toolId, hostType);
+
+  // Make sure that the toolbox frame is focused.
+  yield new Promise(resolve => waitForFocus(resolve, toolbox.win));
+
+  info("Toolbox opened and focused");
+
+  return toolbox;
+});
+
+/**
+ * Add a new tab and open the toolbox in it.
+ * @param {String} url The URL for the tab to be opened.
+ * @param {String} toolId Optional. The ID of the tool to be selected.
+ * @param {String} hostType Optional. The type of toolbox host to be used.
+ * @return {Promise} Resolves when the tab has been added, loaded and the
+ * toolbox has been opened. Resolves to the toolbox.
+ */
+var openNewTabAndToolbox = Task.async(function* (url, toolId, hostType) {
+  let tab = yield addTab(url);
+  return openToolboxForTab(tab, toolId, hostType);
+});
+
+/**
+ * Close a tab and if necessary, the toolbox that belongs to it
+ * @param {Tab} tab The tab to close.
+ * @return {Promise} Resolves when the toolbox and tab have been destroyed and
+ * closed.
+ */
+var closeTabAndToolbox = Task.async(function* (tab = gBrowser.selectedTab) {
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  if (target) {
+    yield gDevTools.closeToolbox(target);
+  }
+
+  yield removeTab(gBrowser.selectedTab);
+});
+
+/**
+ * Close a toolbox and the current tab.
+ * @param {Toolbox} toolbox The toolbox to close.
+ * @return {Promise} Resolves when the toolbox and tab have been destroyed and
+ * closed.
+ */
+var closeToolboxAndTab = Task.async(function* (toolbox) {
+  yield toolbox.destroy();
+  yield removeTab(gBrowser.selectedTab);
+});
+
+/**
+ * Waits until a predicate returns true.
+ *
+ * @param function predicate
+ *        Invoked once in a while until it returns true.
+ * @param number interval [optional]
+ *        How often the predicate is invoked, in milliseconds.
+ */
+function waitUntil(predicate, interval = 10) {
+  if (predicate()) {
+    return Promise.resolve(true);
+  }
+  return new Promise(resolve => {
+    setTimeout(function () {
+      waitUntil(predicate, interval).then(() => resolve(true));
+    }, interval);
+  });
+}
+
+/**
+ * Takes a string `script` and evaluates it directly in the content
+ * in potentially a different process.
+ */
+let MM_INC_ID = 0;
+function evalInDebuggee(mm, script) {
+  return new Promise(function (resolve, reject) {
+    let id = MM_INC_ID++;
+    mm.sendAsyncMessage("devtools:test:eval", { script, id });
+    mm.addMessageListener("devtools:test:eval:response", handler);
+
+    function handler({ data }) {
+      if (id !== data.id) {
+        return;
+      }
+
+      info(`Successfully evaled in debuggee: ${script}`);
+      mm.removeMessageListener("devtools:test:eval:response", handler);
+      resolve(data.value);
+    }
+  });
+}
+
+/**
+ * Wait for a context menu popup to open.
+ *
+ * @param nsIDOMElement popup
+ *        The XUL popup you expect to open.
+ * @param nsIDOMElement button
+ *        The button/element that receives the contextmenu event. This is
+ *        expected to open the popup.
+ * @param function onShown
+ *        Function to invoke on popupshown event.
+ * @param function onHidden
+ *        Function to invoke on popuphidden event.
+ * @return object
+ *         A Promise object that is resolved after the popuphidden event
+ *         callback is invoked.
+ */
+function waitForContextMenu(popup, button, onShown, onHidden) {
+  let deferred = defer();
+
+  function onPopupShown() {
+    info("onPopupShown");
+    popup.removeEventListener("popupshown", onPopupShown);
+
+    onShown && onShown();
+
+    // Use executeSoon() to get out of the popupshown event.
+    popup.addEventListener("popuphidden", onPopupHidden);
+    executeSoon(() => popup.hidePopup());
+  }
+  function onPopupHidden() {
+    info("onPopupHidden");
+    popup.removeEventListener("popuphidden", onPopupHidden);
+
+    onHidden && onHidden();
+
+    deferred.resolve(popup);
+  }
+
+  popup.addEventListener("popupshown", onPopupShown);
+
+  info("wait for the context menu to open");
+  button.scrollIntoView();
+  let eventDetails = {type: "contextmenu", button: 2};
+  EventUtils.synthesizeMouse(button, 5, 2, eventDetails,
+                             button.ownerDocument.defaultView);
+  return deferred.promise;
+}
+
+/**
+ * Promise wrapper around SimpleTest.waitForClipboard
+ */
+function waitForClipboardPromise(setup, expected) {
+  return new Promise((resolve, reject) => {
+    SimpleTest.waitForClipboard(expected, setup, resolve, reject);
+  });
+}
+
+/**
+ * Simple helper to push a temporary preference. Wrapper on SpecialPowers
+ * pushPrefEnv that returns a promise resolving when the preferences have been
+ * updated.
+ *
+ * @param {String} preferenceName
+ *        The name of the preference to updated
+ * @param {} value
+ *        The preference value, type can vary
+ * @return {Promise} resolves when the preferences have been updated
+ */
+function pushPref(preferenceName, value) {
+  return new Promise(resolve => {
+    let options = {"set": [[preferenceName, value]]};
+    SpecialPowers.pushPrefEnv(options, resolve);
+  });
+}
+
+/**
+ * Lookup the provided dotted path ("prop1.subprop2.myProp") in the provided object.
+ *
+ * @param {Object} obj
+ *        Object to expand.
+ * @param {String} path
+ *        Dotted path to use to expand the object.
+ * @return {?} anything that is found at the provided path in the object.
+ */
+function lookupPath(obj, path) {
+  let segments = path.split(".");
+  return segments.reduce((prev, current) => prev[current], obj);
+}
+
+var closeToolbox = Task.async(function* () {
+  let target = TargetFactory.forTab(gBrowser.selectedTab);
+  yield gDevTools.closeToolbox(target);
+});
+
+/**
+ * Load the Telemetry utils, then stub Telemetry.prototype.log and
+ * Telemetry.prototype.logKeyed in order to record everything that's logged in
+ * it.
+ * Store all recordings in Telemetry.telemetryInfo.
+ * @return {Telemetry}
+ */
+function loadTelemetryAndRecordLogs() {
+  info("Mock the Telemetry log function to record logged information");
+
+  let Telemetry = require("devtools/client/shared/telemetry");
+  Telemetry.prototype.telemetryInfo = {};
+  Telemetry.prototype._oldlog = Telemetry.prototype.log;
+  Telemetry.prototype.log = function (histogramId, value) {
+    if (!this.telemetryInfo) {
+      // Telemetry instance still in use after stopRecordingTelemetryLogs
+      return;
+    }
+    if (histogramId) {
+      if (!this.telemetryInfo[histogramId]) {
+        this.telemetryInfo[histogramId] = [];
+      }
+      this.telemetryInfo[histogramId].push(value);
+    }
+  };
+  Telemetry.prototype._oldlogKeyed = Telemetry.prototype.logKeyed;
+  Telemetry.prototype.logKeyed = function (histogramId, key, value) {
+    this.log(`${histogramId}|${key}`, value);
+  };
+
+  return Telemetry;
+}
+
+/**
+ * Stop recording the Telemetry logs and put back the utils as it was before.
+ * @param {Telemetry} Required Telemetry
+ *        Telemetry object that needs to be stopped.
+ */
+function stopRecordingTelemetryLogs(Telemetry) {
+  info("Stopping Telemetry");
+  Telemetry.prototype.log = Telemetry.prototype._oldlog;
+  Telemetry.prototype.logKeyed = Telemetry.prototype._oldlogKeyed;
+  delete Telemetry.prototype._oldlog;
+  delete Telemetry.prototype._oldlogKeyed;
+  delete Telemetry.prototype.telemetryInfo;
+}
+
+/**
+ * Clean the logical clipboard content. This method only clears the OS clipboard on
+ * Windows (see Bug 666254).
+ */
+function emptyClipboard() {
+  let clipboard = Cc["@mozilla.org/widget/clipboard;1"]
+    .getService(SpecialPowers.Ci.nsIClipboard);
+  clipboard.emptyClipboard(clipboard.kGlobalClipboard);
+}
+
+/**
+ * Check if the current operating system is Windows.
+ */
+function isWindows() {
+  return Services.appinfo.OS === "WINNT";
+}
+
+/**
+ * Wait for a given toolbox to get its title updated.
+ */
+function waitForTitleChange(toolbox) {
+  let deferred = defer();
+  toolbox.win.parent.addEventListener("message", function onmessage(event) {
+    if (event.data.name == "set-host-title") {
+      toolbox.win.parent.removeEventListener("message", onmessage);
+      deferred.resolve();
+    }
+  });
+  return deferred.promise;
+}
diff --git a/devtools/client/framework/test/shared-redux-head.js b/devtools/client/framework/test/shared-redux-head.js
new file mode 100644
index 000000000..c7c939152
--- /dev/null
+++ b/devtools/client/framework/test/shared-redux-head.js
@@ -0,0 +1,85 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/ */
+
+"use strict";
+
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from ./shared-head.js */
+// Currently this file expects "defer" to be imported into scope.
+
+// Common utility functions for working with Redux stores.  The file is meant
+// to be safe to load in both mochitest and xpcshell environments.
+
+/**
+ * A logging function that can be used from xpcshell and browser mochitest
+ * environments.
+ */
+function commonLog(message) {
+  let log;
+  if (Services && Services.appinfo && Services.appinfo.name &&
+      Services.appinfo.name == "Firefox") {
+    log = info;
+  } else {
+    log = do_print;
+  }
+  log(message);
+}
+
+/**
+ * Wait until the store has reached a state that matches the predicate.
+ * @param Store store
+ *        The Redux store being used.
+ * @param function predicate
+ *        A function that returns true when the store has reached the expected
+ *        state.
+ * @return Promise
+ *         Resolved once the store reaches the expected state.
+ */
+function waitUntilState(store, predicate) {
+  let deferred = defer();
+  let unsubscribe = store.subscribe(check);
+
+  commonLog(`Waiting for state predicate "${predicate}"`);
+  function check() {
+    if (predicate(store.getState())) {
+      commonLog(`Found state predicate "${predicate}"`);
+      unsubscribe();
+      deferred.resolve();
+    }
+  }
+
+  // Fire the check immediately in case the action has already occurred
+  check();
+
+  return deferred.promise;
+}
+
+/**
+ * Wait until a particular action has been emitted by the store.
+ * @param Store store
+ *        The Redux store being used.
+ * @param string actionType
+ *        The expected action to wait for.
+ * @return Promise
+ *         Resolved once the expected action is emitted by the store.
+ */
+function waitUntilAction(store, actionType) {
+  let deferred = defer();
+  let unsubscribe = store.subscribe(check);
+  let history = store.history;
+  let index = history.length;
+
+  commonLog(`Waiting for action "${actionType}"`);
+  function check() {
+    let action = history[index++];
+    if (action && action.type === actionType) {
+      commonLog(`Found action "${actionType}"`);
+      unsubscribe();
+      deferred.resolve(store.getState());
+    }
+  }
+
+  return deferred.promise;
+}
diff --git a/devtools/client/framework/toolbox-highlighter-utils.js b/devtools/client/framework/toolbox-highlighter-utils.js
new file mode 100644
index 000000000..e7f343857
--- /dev/null
+++ b/devtools/client/framework/toolbox-highlighter-utils.js
@@ -0,0 +1,324 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+const promise = require("promise");
+const {Task} = require("devtools/shared/task");
+const flags = require("devtools/shared/flags");
+
+/**
+ * Client-side highlighter shared module.
+ * To be used by toolbox panels that need to highlight DOM elements.
+ *
+ * Highlighting and selecting elements is common enough that it needs to be at
+ * toolbox level, accessible by any panel that needs it.
+ * That's why the toolbox is the one that initializes the inspector and
+ * highlighter. It's also why the API returned by this module needs a reference
+ * to the toolbox which should be set once only.
+ */
+
+/**
+ * Get the highighterUtils instance for a given toolbox.
+ * This should be done once only by the toolbox itself and stored there so that
+ * panels can get it from there. That's because the API returned has a stateful
+ * scope that would be different for another instance returned by this function.
+ *
+ * @param {Toolbox} toolbox
+ * @return {Object} the highlighterUtils public API
+ */
+exports.getHighlighterUtils = function (toolbox) {
+  if (!toolbox || !toolbox.target) {
+    throw new Error("Missing or invalid toolbox passed to getHighlighterUtils");
+    return;
+  }
+
+  // Exported API properties will go here
+  let exported = {};
+
+  // The current toolbox target
+  let target = toolbox.target;
+
+  // Is the highlighter currently in pick mode
+  let isPicking = false;
+
+  // Is the box model already displayed, used to prevent dispatching
+  // unnecessary requests, especially during toolbox shutdown
+  let isNodeFrontHighlighted = false;
+
+  /**
+   * Release this utils, nullifying the references to the toolbox
+   */
+  exported.release = function () {
+    toolbox = target = null;
+  };
+
+  /**
+   * Does the target have the highlighter actor.
+   * The devtools must be backwards compatible with at least B2G 1.3 (28),
+   * which doesn't have the highlighter actor. This can be removed as soon as
+   * the minimal supported version becomes 1.4 (29)
+   */
+  let isRemoteHighlightable = exported.isRemoteHighlightable = function () {
+    return target.client.traits.highlightable;
+  };
+
+  /**
+   * Does the target support custom highlighters.
+   */
+  let supportsCustomHighlighters = exported.supportsCustomHighlighters = () => {
+    return !!target.client.traits.customHighlighters;
+  };
+
+  /**
+   * Make a function that initializes the inspector before it runs.
+   * Since the init of the inspector is asynchronous, the return value will be
+   * produced by Task.async and the argument should be a generator
+   * @param {Function*} generator A generator function
+   * @return {Function} A function
+   */
+  let isInspectorInitialized = false;
+  let requireInspector = generator => {
+    return Task.async(function* (...args) {
+      if (!isInspectorInitialized) {
+        yield toolbox.initInspector();
+        isInspectorInitialized = true;
+      }
+      return yield generator.apply(null, args);
+    });
+  };
+
+  /**
+   * Start/stop the element picker on the debuggee target.
+   * @param {Boolean} doFocus - Optionally focus the content area once the picker is
+   *                            activated.
+   * @return A promise that resolves when done
+   */
+  let togglePicker = exported.togglePicker = function (doFocus) {
+    if (isPicking) {
+      return cancelPicker();
+    } else {
+      return startPicker(doFocus);
+    }
+  };
+
+  /**
+   * Start the element picker on the debuggee target.
+   * This will request the inspector actor to start listening for mouse events
+   * on the target page to highlight the hovered/picked element.
+   * Depending on the server-side capabilities, this may fire events when nodes
+   * are hovered.
+   * @param {Boolean} doFocus - Optionally focus the content area once the picker is
+   *                            activated.
+   * @return A promise that resolves when the picker has started or immediately
+   * if it is already started
+   */
+  let startPicker = exported.startPicker = requireInspector(function* (doFocus = false) {
+    if (isPicking) {
+      return;
+    }
+    isPicking = true;
+
+    toolbox.pickerButtonChecked = true;
+    yield toolbox.selectTool("inspector");
+    toolbox.on("select", cancelPicker);
+
+    if (isRemoteHighlightable()) {
+      toolbox.walker.on("picker-node-hovered", onPickerNodeHovered);
+      toolbox.walker.on("picker-node-picked", onPickerNodePicked);
+      toolbox.walker.on("picker-node-previewed", onPickerNodePreviewed);
+      toolbox.walker.on("picker-node-canceled", onPickerNodeCanceled);
+
+      yield toolbox.highlighter.pick(doFocus);
+      toolbox.emit("picker-started");
+    } else {
+      // If the target doesn't have the highlighter actor, we can use the
+      // walker's pick method instead, knowing that it only responds when a node
+      // is picked (instead of emitting events)
+      toolbox.emit("picker-started");
+      let node = yield toolbox.walker.pick();
+      onPickerNodePicked({node: node});
+    }
+  });
+
+  /**
+   * Stop the element picker. Note that the picker is automatically stopped when
+   * an element is picked
+   * @return A promise that resolves when the picker has stopped or immediately
+   * if it is already stopped
+   */
+  let stopPicker = exported.stopPicker = requireInspector(function* () {
+    if (!isPicking) {
+      return;
+    }
+    isPicking = false;
+
+    toolbox.pickerButtonChecked = false;
+
+    if (isRemoteHighlightable()) {
+      yield toolbox.highlighter.cancelPick();
+      toolbox.walker.off("picker-node-hovered", onPickerNodeHovered);
+      toolbox.walker.off("picker-node-picked", onPickerNodePicked);
+      toolbox.walker.off("picker-node-previewed", onPickerNodePreviewed);
+      toolbox.walker.off("picker-node-canceled", onPickerNodeCanceled);
+    } else {
+      // If the target doesn't have the highlighter actor, use the walker's
+      // cancelPick method instead
+      yield toolbox.walker.cancelPick();
+    }
+
+    toolbox.off("select", cancelPicker);
+    toolbox.emit("picker-stopped");
+  });
+
+  /**
+   * Stop the picker, but also emit an event that the picker was canceled.
+   */
+  let cancelPicker = exported.cancelPicker = Task.async(function* () {
+    yield stopPicker();
+    toolbox.emit("picker-canceled");
+  });
+
+  /**
+   * When a node is hovered by the mouse when the highlighter is in picker mode
+   * @param {Object} data Information about the node being hovered
+   */
+  function onPickerNodeHovered(data) {
+    toolbox.emit("picker-node-hovered", data.node);
+  }
+
+  /**
+   * When a node has been picked while the highlighter is in picker mode
+   * @param {Object} data Information about the picked node
+   */
+  function onPickerNodePicked(data) {
+    toolbox.selection.setNodeFront(data.node, "picker-node-picked");
+    stopPicker();
+  }
+
+  /**
+   * When a node has been shift-clicked (previewed) while the highlighter is in
+   * picker mode
+   * @param {Object} data Information about the picked node
+   */
+  function onPickerNodePreviewed(data) {
+    toolbox.selection.setNodeFront(data.node, "picker-node-previewed");
+  }
+
+  /**
+   * When the picker is canceled, stop the picker, and make sure the toolbox
+   * gets the focus.
+   */
+  function onPickerNodeCanceled() {
+    cancelPicker();
+    toolbox.win.focus();
+  }
+
+  /**
+   * Show the box model highlighter on a node in the content page.
+   * The node needs to be a NodeFront, as defined by the inspector actor
+   * @see devtools/server/actors/inspector.js
+   * @param {NodeFront} nodeFront The node to highlight
+   * @param {Object} options
+   * @return A promise that resolves when the node has been highlighted
+   */
+  let highlightNodeFront = exported.highlightNodeFront = requireInspector(
+  function* (nodeFront, options = {}) {
+    if (!nodeFront) {
+      return;
+    }
+
+    isNodeFrontHighlighted = true;
+    if (isRemoteHighlightable()) {
+      yield toolbox.highlighter.showBoxModel(nodeFront, options);
+    } else {
+      // If the target doesn't have the highlighter actor, revert to the
+      // walker's highlight method, which draws a simple outline
+      yield toolbox.walker.highlight(nodeFront);
+    }
+
+    toolbox.emit("node-highlight", nodeFront, options.toSource());
+  });
+
+  /**
+   * This is a convenience method in case you don't have a nodeFront but a
+   * valueGrip. This is often the case with VariablesView properties.
+   * This method will simply translate the grip into a nodeFront and call
+   * highlightNodeFront, so it has the same signature.
+   * @see highlightNodeFront
+   */
+  let highlightDomValueGrip = exported.highlightDomValueGrip = requireInspector(
+  function* (valueGrip, options = {}) {
+    let nodeFront = yield gripToNodeFront(valueGrip);
+    if (nodeFront) {
+      yield highlightNodeFront(nodeFront, options);
+    } else {
+      throw new Error("The ValueGrip passed could not be translated to a NodeFront");
+    }
+  });
+
+  /**
+   * Translate a debugger value grip into a node front usable by the inspector
+   * @param {ValueGrip}
+   * @return a promise that resolves to the node front when done
+   */
+  let gripToNodeFront = exported.gripToNodeFront = requireInspector(
+  function* (grip) {
+    return yield toolbox.walker.getNodeActorFromObjectActor(grip.actor);
+  });
+
+  /**
+   * Hide the highlighter.
+   * @param {Boolean} forceHide Only really matters in test mode (when
+   * flags.testing is true). In test mode, hovering over several nodes
+   * in the markup view doesn't hide/show the highlighter to ease testing. The
+   * highlighter stays visible at all times, except when the mouse leaves the
+   * markup view, which is when this param is passed to true
+   * @return a promise that resolves when the highlighter is hidden
+   */
+  let unhighlight = exported.unhighlight = Task.async(
+  function* (forceHide = false) {
+    forceHide = forceHide || !flags.testing;
+
+    // Note that if isRemoteHighlightable is true, there's no need to hide the
+    // highlighter as the walker uses setTimeout to hide it after some time
+    if (isNodeFrontHighlighted && forceHide && toolbox.highlighter && isRemoteHighlightable()) {
+      isNodeFrontHighlighted = false;
+      yield toolbox.highlighter.hideBoxModel();
+    }
+
+    // unhighlight is called when destroying the toolbox, which means that by
+    // now, the toolbox reference might have been nullified already.
+    if (toolbox) {
+      toolbox.emit("node-unhighlight");
+    }
+  });
+
+  /**
+   * If the main, box-model, highlighter isn't enough, or if multiple
+   * highlighters are needed in parallel, this method can be used to return a
+   * new instance of a highlighter actor, given a type.
+   * The type of the highlighter passed must be known by the server.
+   * The highlighter actor returned will have the show(nodeFront) and hide()
+   * methods and needs to be released by the consumer when not needed anymore.
+   * @return a promise that resolves to the highlighter
+   */
+  let getHighlighterByType = exported.getHighlighterByType = requireInspector(
+  function* (typeName) {
+    let highlighter = null;
+
+    if (supportsCustomHighlighters()) {
+      highlighter = yield toolbox.inspector.getHighlighterByType(typeName);
+    }
+
+    return highlighter || promise.reject("The target doesn't support " +
+        `creating highlighters by types or ${typeName} is unknown`);
+
+  });
+
+  // Return the public API
+  return exported;
+};
diff --git a/devtools/client/framework/toolbox-host-manager.js b/devtools/client/framework/toolbox-host-manager.js
new file mode 100644
index 000000000..1638f3a9a
--- /dev/null
+++ b/devtools/client/framework/toolbox-host-manager.js
@@ -0,0 +1,244 @@
+const Services = require("Services");
+const {Ci} = require("chrome");
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+const DevToolsUtils = require("devtools/shared/DevToolsUtils");
+const {Task} = require("devtools/shared/task");
+
+loader.lazyRequireGetter(this, "Toolbox", "devtools/client/framework/toolbox", true);
+loader.lazyRequireGetter(this, "Hosts", "devtools/client/framework/toolbox-hosts", true);
+
+/**
+ * Implement a wrapper on the chrome side to setup a Toolbox within Firefox UI.
+ *
+ * This component handles iframe creation within Firefox, in which we are loading
+ * the toolbox document. Then both the chrome and the toolbox document communicate
+ * via "message" events.
+ *
+ * Messages sent by the toolbox to the chrome:
+ * - switch-host:
+ *   Order to display the toolbox in another host (side, bottom, window, or the
+ *   previously used one)
+ * - toggle-minimize-mode:
+ *   When using the bottom host, the toolbox can be miximized to only display
+ *   the tool titles
+ * - maximize-host:
+ *   When using the bottom host in minimized mode, revert back to regular mode
+ *   in order to see tool titles and the tools
+ * - raise-host:
+ *   Focus the tools
+ * - set-host-title:
+ *   When using the window host, update the window title
+ *
+ * Messages sent by the chrome to the toolbox:
+ * - host-minimized:
+ *   The bottom host is done minimizing (after animation end)
+ * - host-maximized:
+ *   The bottom host is done switching back to regular mode (after animation
+ *   end)
+ * - switched-host:
+ *   The `switch-host` command sent by the toolbox is done
+ */
+
+const LAST_HOST = "devtools.toolbox.host";
+const PREVIOUS_HOST = "devtools.toolbox.previousHost";
+let ID_COUNTER = 1;
+
+function ToolboxHostManager(target, hostType, hostOptions) {
+  this.target = target;
+
+  this.frameId = ID_COUNTER++;
+
+  if (!hostType) {
+    hostType = Services.prefs.getCharPref(LAST_HOST);
+  }
+  this.onHostMinimized = this.onHostMinimized.bind(this);
+  this.onHostMaximized = this.onHostMaximized.bind(this);
+  this.host = this.createHost(hostType, hostOptions);
+  this.hostType = hostType;
+}
+
+ToolboxHostManager.prototype = {
+  create: Task.async(function* (toolId) {
+    yield this.host.create();
+
+    this.host.frame.setAttribute("aria-label", L10N.getStr("toolbox.label"));
+    this.host.frame.ownerDocument.defaultView.addEventListener("message", this);
+    // We have to listen on capture as no event fires on bubble
+    this.host.frame.addEventListener("unload", this, true);
+
+    let toolbox = new Toolbox(this.target, toolId, this.host.type, this.host.frame.contentWindow, this.frameId);
+
+    // Prevent reloading the toolbox when loading the tools in a tab (e.g. from about:debugging)
+    if (!this.host.frame.contentWindow.location.href.startsWith("about:devtools-toolbox")) {
+      this.host.frame.setAttribute("src", "about:devtools-toolbox");
+    }
+
+    return toolbox;
+  }),
+
+  handleEvent(event) {
+    switch(event.type) {
+      case "message":
+        this.onMessage(event);
+        break;
+      case "unload":
+        // On unload, host iframe already lost its contentWindow attribute, so
+        // we can only compare against locations. Here we filter two very
+        // different cases: preliminary about:blank document as well as iframes
+        // like tool iframes.
+        if (!event.target.location.href.startsWith("about:devtools-toolbox")) {
+          break;
+        }
+        // Don't destroy the host during unload event (esp., don't remove the
+        // iframe from DOM!). Otherwise the unload event for the toolbox
+        // document doesn't fire within the toolbox *document*! This is
+        // the unload event that fires on the toolbox *iframe*.
+        DevToolsUtils.executeSoon(() => {
+          this.destroy();
+        });
+        break;
+    }
+  },
+
+  onMessage(event) {
+    if (!event.data) {
+      return;
+    }
+    // Toolbox document is still chrome and disallow identifying message
+    // origin via event.source as it is null. So use a custom id.
+    if (event.data.frameId != this.frameId) {
+      return;
+    }
+    switch (event.data.name) {
+      case "switch-host":
+        this.switchHost(event.data.hostType);
+        break;
+      case "maximize-host":
+        this.host.maximize();
+        break;
+      case "raise-host":
+        this.host.raise();
+        break;
+      case "toggle-minimize-mode":
+        this.host.toggleMinimizeMode(event.data.toolbarHeight);
+        break;
+      case "set-host-title":
+        this.host.setTitle(event.data.title);
+        break;
+    }
+  },
+
+  postMessage(data) {
+    let window = this.host.frame.contentWindow;
+    window.postMessage(data, "*");
+  },
+
+  destroy() {
+    this.destroyHost();
+    this.host = null;
+    this.hostType = null;
+    this.target = null;
+  },
+
+  /**
+   * Create a host object based on the given host type.
+   *
+   * Warning: bottom and sidebar hosts require that the toolbox target provides
+   * a reference to the attached tab. Not all Targets have a tab property -
+   * make sure you correctly mix and match hosts and targets.
+   *
+   * @param {string} hostType
+   *        The host type of the new host object
+   *
+   * @return {Host} host
+   *        The created host object
+   */
+  createHost(hostType, options) {
+    if (!Hosts[hostType]) {
+      throw new Error("Unknown hostType: " + hostType);
+    }
+
+    let newHost = new Hosts[hostType](this.target.tab, options);
+    // Update the label and icon when the state changes.
+    newHost.on("minimized", this.onHostMinimized);
+    newHost.on("maximized", this.onHostMaximized);
+    return newHost;
+  },
+
+  onHostMinimized() {
+    this.postMessage({
+      name: "host-minimized"
+    });
+  },
+
+  onHostMaximized() {
+    this.postMessage({
+      name: "host-maximized"
+    });
+  },
+
+  switchHost: Task.async(function* (hostType) {
+    if (hostType == "previous") {
+      // Switch to the last used host for the toolbox UI.
+      // This is determined by the devtools.toolbox.previousHost pref.
+      hostType = Services.prefs.getCharPref(PREVIOUS_HOST);
+
+      // Handle the case where the previous host happens to match the current
+      // host. If so, switch to bottom if it's not already used, and side if not.
+      if (hostType === this.hostType) {
+        if (hostType === Toolbox.HostType.BOTTOM) {
+          hostType = Toolbox.HostType.SIDE;
+        } else {
+          hostType = Toolbox.HostType.BOTTOM;
+        }
+      }
+    }
+    let iframe = this.host.frame;
+    let newHost = this.createHost(hostType);
+    let newIframe = yield newHost.create();
+    // change toolbox document's parent to the new host
+    newIframe.swapFrameLoaders(iframe);
+
+    this.destroyHost();
+
+    if (this.hostType != Toolbox.HostType.CUSTOM) {
+      Services.prefs.setCharPref(PREVIOUS_HOST, this.hostType);
+    }
+
+    this.host = newHost;
+    this.hostType = hostType;
+    this.host.setTitle(this.host.frame.contentWindow.document.title);
+    this.host.frame.ownerDocument.defaultView.addEventListener("message", this);
+    this.host.frame.addEventListener("unload", this, true);
+
+    if (hostType != Toolbox.HostType.CUSTOM) {
+      Services.prefs.setCharPref(LAST_HOST, hostType);
+    }
+
+    // Tell the toolbox the host changed
+    this.postMessage({
+      name: "switched-host",
+      hostType
+    });
+  }),
+
+  /**
+   * Destroy the current host, and remove event listeners from its frame.
+   *
+   * @return {promise} to be resolved when the host is destroyed.
+   */
+  destroyHost() {
+    // When Firefox toplevel is closed, the frame may already be detached and
+    // the top level document gone
+    if (this.host.frame.ownerDocument.defaultView) {
+      this.host.frame.ownerDocument.defaultView.removeEventListener("message", this);
+    }
+    this.host.frame.removeEventListener("unload", this, true);
+
+    this.host.off("minimized", this.onHostMinimized);
+    this.host.off("maximized", this.onHostMaximized);
+    return this.host.destroy();
+  }
+};
+exports.ToolboxHostManager = ToolboxHostManager;
diff --git a/devtools/client/framework/toolbox-hosts.js b/devtools/client/framework/toolbox-hosts.js
new file mode 100644
index 000000000..ea774549a
--- /dev/null
+++ b/devtools/client/framework/toolbox-hosts.js
@@ -0,0 +1,425 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+const EventEmitter = require("devtools/shared/event-emitter");
+const promise = require("promise");
+const defer = require("devtools/shared/defer");
+const Services = require("Services");
+const {DOMHelpers} = require("resource://devtools/client/shared/DOMHelpers.jsm");
+
+loader.lazyRequireGetter(this, "system", "devtools/shared/system");
+
+/* A host should always allow this much space for the page to be displayed.
+ * There is also a min-height on the browser, but we still don't want to set
+ * frame.height to be larger than that, since it can cause problems with
+ * resizing the toolbox and panel layout. */
+const MIN_PAGE_SIZE = 25;
+
+/**
+ * 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
+ */
+
+exports.Hosts = {
+  "bottom": BottomHost,
+  "side": SidebarHost,
+  "window": WindowHost,
+  "custom": CustomHost
+};
+
+/**
+ * Host object for the dock on the bottom of the browser
+ */
+function BottomHost(hostTab) {
+  this.hostTab = hostTab;
+
+  EventEmitter.decorate(this);
+}
+
+BottomHost.prototype = {
+  type: "bottom",
+
+  heightPref: "devtools.toolbox.footer.height",
+
+  /**
+   * Create a box at the bottom of the host tab.
+   */
+  create: function () {
+    let deferred = defer();
+
+    let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
+    let ownerDocument = gBrowser.ownerDocument;
+    this._nbox = gBrowser.getNotificationBox(this.hostTab.linkedBrowser);
+
+    this._splitter = ownerDocument.createElement("splitter");
+    this._splitter.setAttribute("class", "devtools-horizontal-splitter");
+    // Avoid resizing notification containers
+    this._splitter.setAttribute("resizebefore", "flex");
+
+    this.frame = ownerDocument.createElement("iframe");
+    this.frame.className = "devtools-toolbox-bottom-iframe";
+    this.frame.height = Math.min(
+      Services.prefs.getIntPref(this.heightPref),
+      this._nbox.clientHeight - MIN_PAGE_SIZE
+    );
+
+    this._nbox.appendChild(this._splitter);
+    this._nbox.appendChild(this.frame);
+
+    let frameLoad = () => {
+      this.emit("ready", this.frame);
+      deferred.resolve(this.frame);
+    };
+
+    this.frame.tooltip = "aHTMLTooltip";
+
+    // we have to load something so we can switch documents if we have to
+    this.frame.setAttribute("src", "about:blank");
+
+    let domHelper = new DOMHelpers(this.frame.contentWindow);
+    domHelper.onceDOMReady(frameLoad);
+
+    focusTab(this.hostTab);
+
+    return deferred.promise;
+  },
+
+  /**
+   * Raise the host.
+   */
+  raise: function () {
+    focusTab(this.hostTab);
+  },
+
+  /**
+   * Minimize this host so that only the toolbox tabbar remains visible.
+   * @param {Number} height The height to minimize to. Defaults to 0, which
+   * means that the toolbox won't be visible at all once minimized.
+   */
+  minimize: function (height = 0) {
+    if (this.isMinimized) {
+      return;
+    }
+    this.isMinimized = true;
+
+    let onTransitionEnd = event => {
+      if (event.propertyName !== "margin-bottom") {
+        // Ignore transitionend on unrelated properties.
+        return;
+      }
+
+      this.frame.removeEventListener("transitionend", onTransitionEnd);
+      this.emit("minimized");
+    };
+    this.frame.addEventListener("transitionend", onTransitionEnd);
+    this.frame.style.marginBottom = -this.frame.height + height + "px";
+    this._splitter.classList.add("disabled");
+  },
+
+  /**
+   * If the host was minimized before, maximize it again (the host will be
+   * maximized to the height it previously had).
+   */
+  maximize: function () {
+    if (!this.isMinimized) {
+      return;
+    }
+    this.isMinimized = false;
+
+    let onTransitionEnd = event => {
+      if (event.propertyName !== "margin-bottom") {
+        // Ignore transitionend on unrelated properties.
+        return;
+      }
+
+      this.frame.removeEventListener("transitionend", onTransitionEnd);
+      this.emit("maximized");
+    };
+    this.frame.addEventListener("transitionend", onTransitionEnd);
+    this.frame.style.marginBottom = "0";
+    this._splitter.classList.remove("disabled");
+  },
+
+  /**
+   * Toggle the minimize mode.
+   * @param {Number} minHeight The height to minimize to.
+   */
+  toggleMinimizeMode: function (minHeight) {
+    this.isMinimized ? this.maximize() : this.minimize(minHeight);
+  },
+
+  /**
+   * Set the toolbox title.
+   * Nothing to do for this host type.
+   */
+  setTitle: function () {},
+
+  /**
+   * Destroy the bottom dock.
+   */
+  destroy: function () {
+    if (!this._destroyed) {
+      this._destroyed = true;
+
+      Services.prefs.setIntPref(this.heightPref, this.frame.height);
+      this._nbox.removeChild(this._splitter);
+      this._nbox.removeChild(this.frame);
+      this.frame = null;
+      this._nbox = null;
+      this._splitter = null;
+    }
+
+    return promise.resolve(null);
+  }
+};
+
+/**
+ * Host object for the in-browser sidebar
+ */
+function SidebarHost(hostTab) {
+  this.hostTab = hostTab;
+
+  EventEmitter.decorate(this);
+}
+
+SidebarHost.prototype = {
+  type: "side",
+
+  widthPref: "devtools.toolbox.sidebar.width",
+
+  /**
+   * Create a box in the sidebar of the host tab.
+   */
+  create: function () {
+    let deferred = defer();
+
+    let gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
+    let ownerDocument = gBrowser.ownerDocument;
+    this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser);
+
+    this._splitter = ownerDocument.createElement("splitter");
+    this._splitter.setAttribute("class", "devtools-side-splitter");
+
+    this.frame = ownerDocument.createElement("iframe");
+    this.frame.className = "devtools-toolbox-side-iframe";
+
+    this.frame.width = Math.min(
+      Services.prefs.getIntPref(this.widthPref),
+      this._sidebar.clientWidth - MIN_PAGE_SIZE
+    );
+
+    this._sidebar.appendChild(this._splitter);
+    this._sidebar.appendChild(this.frame);
+
+    let frameLoad = () => {
+      this.emit("ready", this.frame);
+      deferred.resolve(this.frame);
+    };
+
+    this.frame.tooltip = "aHTMLTooltip";
+    this.frame.setAttribute("src", "about:blank");
+
+    let domHelper = new DOMHelpers(this.frame.contentWindow);
+    domHelper.onceDOMReady(frameLoad);
+
+    focusTab(this.hostTab);
+
+    return deferred.promise;
+  },
+
+  /**
+   * Raise the host.
+   */
+  raise: function () {
+    focusTab(this.hostTab);
+  },
+
+  /**
+   * Set the toolbox title.
+   * Nothing to do for this host type.
+   */
+  setTitle: function () {},
+
+  /**
+   * Destroy the sidebar.
+   */
+  destroy: function () {
+    if (!this._destroyed) {
+      this._destroyed = true;
+
+      Services.prefs.setIntPref(this.widthPref, this.frame.width);
+      this._sidebar.removeChild(this._splitter);
+      this._sidebar.removeChild(this.frame);
+    }
+
+    return promise.resolve(null);
+  }
+};
+
+/**
+ * Host object for the toolbox in a separate window
+ */
+function WindowHost() {
+  this._boundUnload = this._boundUnload.bind(this);
+
+  EventEmitter.decorate(this);
+}
+
+WindowHost.prototype = {
+  type: "window",
+
+  WINDOW_URL: "chrome://devtools/content/framework/toolbox-window.xul",
+
+  /**
+   * Create a new xul window to contain the toolbox.
+   */
+  create: function () {
+    let deferred = defer();
+
+    let flags = "chrome,centerscreen,resizable,dialog=no";
+    let win = Services.ww.openWindow(null, this.WINDOW_URL, "_blank",
+                                     flags, null);
+
+    let frameLoad = () => {
+      win.removeEventListener("load", frameLoad, true);
+      win.focus();
+
+      let key;
+      if (system.constants.platform === "macosx") {
+        key = win.document.getElementById("toolbox-key-toggle-osx");
+      } else {
+        key = win.document.getElementById("toolbox-key-toggle");
+      }
+      key.removeAttribute("disabled");
+
+      this.frame = win.document.getElementById("toolbox-iframe");
+      this.emit("ready", this.frame);
+
+      deferred.resolve(this.frame);
+    };
+
+    win.addEventListener("load", frameLoad, true);
+    win.addEventListener("unload", this._boundUnload);
+
+    this._window = win;
+
+    return deferred.promise;
+  },
+
+  /**
+   * Catch the user closing the window.
+   */
+  _boundUnload: function (event) {
+    if (event.target.location != this.WINDOW_URL) {
+      return;
+    }
+    this._window.removeEventListener("unload", this._boundUnload);
+
+    this.emit("window-closed");
+  },
+
+  /**
+   * Raise the host.
+   */
+  raise: function () {
+    this._window.focus();
+  },
+
+  /**
+   * Set the toolbox title.
+   */
+  setTitle: function (title) {
+    this._window.document.title = title;
+  },
+
+  /**
+   * Destroy the window.
+   */
+  destroy: function () {
+    if (!this._destroyed) {
+      this._destroyed = true;
+
+      this._window.removeEventListener("unload", this._boundUnload);
+      this._window.close();
+    }
+
+    return promise.resolve(null);
+  }
+};
+
+/**
+ * Host object for the toolbox in its own tab
+ */
+function CustomHost(hostTab, options) {
+  this.frame = options.customIframe;
+  this.uid = options.uid;
+  EventEmitter.decorate(this);
+}
+
+CustomHost.prototype = {
+  type: "custom",
+
+  _sendMessageToTopWindow: function (msg, data) {
+    // It's up to the custom frame owner (parent window) to honor
+    // "close" or "raise" instructions.
+    let topWindow = this.frame.ownerDocument.defaultView;
+    if (!topWindow) {
+      return;
+    }
+    let json = {name: "toolbox-" + msg, uid: this.uid};
+    if (data) {
+      json.data = data;
+    }
+    topWindow.postMessage(JSON.stringify(json), "*");
+  },
+
+  /**
+   * Create a new xul window to contain the toolbox.
+   */
+  create: function () {
+    return promise.resolve(this.frame);
+  },
+
+  /**
+   * Raise the host.
+   */
+  raise: function () {
+    this._sendMessageToTopWindow("raise");
+  },
+
+  /**
+   * Set the toolbox title.
+   */
+  setTitle: function (title) {
+    this._sendMessageToTopWindow("title", { value: title });
+  },
+
+  /**
+   * Destroy the window.
+   */
+  destroy: function () {
+    if (!this._destroyed) {
+      this._destroyed = true;
+      this._sendMessageToTopWindow("close");
+    }
+    return promise.resolve(null);
+  }
+};
+
+/**
+ *  Switch to the given tab in a browser and focus the browser window
+ */
+function focusTab(tab) {
+  let browserWindow = tab.ownerDocument.defaultView;
+  browserWindow.focus();
+  browserWindow.gBrowser.selectedTab = tab;
+}
diff --git a/devtools/client/framework/toolbox-init.js b/devtools/client/framework/toolbox-init.js
new file mode 100644
index 000000000..cb041c22d
--- /dev/null
+++ b/devtools/client/framework/toolbox-init.js
@@ -0,0 +1,73 @@
+/* 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";
+
+// URL constructor doesn't support about: scheme
+let href = window.location.href.replace("about:", "http://");
+let url = new window.URL(href);
+
+// Only use this method to attach the toolbox if some query parameters are given
+if (url.search.length > 1) {
+  const Cu = Components.utils;
+  const Ci = Components.interfaces;
+  const { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
+  const { gDevTools } = require("devtools/client/framework/devtools");
+  const { targetFromURL } = require("devtools/client/framework/target-from-url");
+  const { Toolbox } = require("devtools/client/framework/toolbox");
+  const { TargetFactory } = require("devtools/client/framework/target");
+  const { DebuggerServer } = require("devtools/server/main");
+  const { DebuggerClient } = require("devtools/shared/client/main");
+  const { Task } = require("devtools/shared/task");
+
+  // `host` is the frame element loading the toolbox.
+  let host = window.QueryInterface(Ci.nsIInterfaceRequestor)
+                   .getInterface(Ci.nsIDOMWindowUtils)
+                   .containerElement;
+
+  // Specify the default tool to open
+  let tool = url.searchParams.get("tool");
+
+  Task.spawn(function* () {
+    let target;
+    if (url.searchParams.has("target")) {
+      // Attach toolbox to a given browser iframe (<xul:browser> or <html:iframe
+      // mozbrowser>) whose reference is set on the host iframe.
+
+      // `iframe` is the targeted document to debug
+      let iframe = host.wrappedJSObject ? host.wrappedJSObject.target
+                                        : host.target;
+      // Need to use a xray and query some interfaces to have
+      // attributes and behavior expected by devtools codebase
+      iframe = XPCNativeWrapper(iframe);
+      iframe.QueryInterface(Ci.nsIFrameLoaderOwner);
+
+      if (iframe) {
+        // Fake a xul:tab object as we don't have one.
+        // linkedBrowser is the only one attribute being queried by client.getTab
+        let tab = { linkedBrowser: iframe };
+
+        if (!DebuggerServer.initialized) {
+          DebuggerServer.init();
+          DebuggerServer.addBrowserActors();
+        }
+        let client = new DebuggerClient(DebuggerServer.connectPipe());
+
+        yield client.connect();
+        // Creates a target for a given browser iframe.
+        let response = yield client.getTab({ tab });
+        let form = response.tab;
+        target = yield TargetFactory.forRemoteTab({client, form, chrome: false});
+      } else {
+        alert("Unable to find the targetted iframe to debug");
+      }
+    } else {
+      target = yield targetFromURL(url);
+    }
+    let options = { customIframe: host };
+    yield gDevTools.showToolbox(target, tool, Toolbox.HostType.CUSTOM, options);
+  }).catch(error => {
+    console.error("Exception while loading the toolbox", error);
+  });
+}
diff --git a/devtools/client/framework/toolbox-options.js b/devtools/client/framework/toolbox-options.js
new file mode 100644
index 000000000..6362d98dd
--- /dev/null
+++ b/devtools/client/framework/toolbox-options.js
@@ -0,0 +1,431 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+const Services = require("Services");
+const defer = require("devtools/shared/defer");
+const {Task} = require("devtools/shared/task");
+const {gDevTools} = require("devtools/client/framework/devtools");
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+exports.OptionsPanel = OptionsPanel;
+
+function GetPref(name) {
+  let type = Services.prefs.getPrefType(name);
+  switch (type) {
+    case Services.prefs.PREF_STRING:
+      return Services.prefs.getCharPref(name);
+    case Services.prefs.PREF_INT:
+      return Services.prefs.getIntPref(name);
+    case Services.prefs.PREF_BOOL:
+      return Services.prefs.getBoolPref(name);
+    default:
+      throw new Error("Unknown type");
+  }
+}
+
+function SetPref(name, value) {
+  let type = Services.prefs.getPrefType(name);
+  switch (type) {
+    case Services.prefs.PREF_STRING:
+      return Services.prefs.setCharPref(name, value);
+    case Services.prefs.PREF_INT:
+      return Services.prefs.setIntPref(name, value);
+    case Services.prefs.PREF_BOOL:
+      return Services.prefs.setBoolPref(name, value);
+    default:
+      throw new Error("Unknown type");
+  }
+}
+
+function InfallibleGetBoolPref(key) {
+  try {
+    return Services.prefs.getBoolPref(key);
+  } catch (ex) {
+    return true;
+  }
+}
+
+/**
+ * Represents the Options Panel in the Toolbox.
+ */
+function OptionsPanel(iframeWindow, toolbox) {
+  this.panelDoc = iframeWindow.document;
+  this.panelWin = iframeWindow;
+
+  this.toolbox = toolbox;
+  this.isReady = false;
+
+  this._prefChanged = this._prefChanged.bind(this);
+  this._themeRegistered = this._themeRegistered.bind(this);
+  this._themeUnregistered = this._themeUnregistered.bind(this);
+  this._disableJSClicked = this._disableJSClicked.bind(this);
+
+  this.disableJSNode = this.panelDoc.getElementById(
+    "devtools-disable-javascript");
+
+  this._addListeners();
+
+  const EventEmitter = require("devtools/shared/event-emitter");
+  EventEmitter.decorate(this);
+}
+
+OptionsPanel.prototype = {
+
+  get target() {
+    return this.toolbox.target;
+  },
+
+  open: Task.async(function* () {
+    // For local debugging we need to make the target remote.
+    if (!this.target.isRemote) {
+      yield this.target.makeRemote();
+    }
+
+    this.setupToolsList();
+    this.setupToolbarButtonsList();
+    this.setupThemeList();
+    yield this.populatePreferences();
+    this.isReady = true;
+    this.emit("ready");
+    return this;
+  }),
+
+  _addListeners: function () {
+    Services.prefs.addObserver("devtools.cache.disabled", this._prefChanged, false);
+    Services.prefs.addObserver("devtools.theme", this._prefChanged, false);
+    gDevTools.on("theme-registered", this._themeRegistered);
+    gDevTools.on("theme-unregistered", this._themeUnregistered);
+  },
+
+  _removeListeners: function () {
+    Services.prefs.removeObserver("devtools.cache.disabled", this._prefChanged);
+    Services.prefs.removeObserver("devtools.theme", this._prefChanged);
+    gDevTools.off("theme-registered", this._themeRegistered);
+    gDevTools.off("theme-unregistered", this._themeUnregistered);
+  },
+
+  _prefChanged: function (subject, topic, prefName) {
+    if (prefName === "devtools.cache.disabled") {
+      let cacheDisabled = data.newValue;
+      let cbx = this.panelDoc.getElementById("devtools-disable-cache");
+
+      cbx.checked = cacheDisabled;
+    } else if (prefName === "devtools.theme") {
+      this.updateCurrentTheme();
+    }
+  },
+
+  _themeRegistered: function (event, themeId) {
+    this.setupThemeList();
+  },
+
+  _themeUnregistered: function (event, theme) {
+    let themeBox = this.panelDoc.getElementById("devtools-theme-box");
+    let themeInput = themeBox.querySelector(`[value=${theme.id}]`);
+
+    if (themeInput) {
+      themeInput.parentNode.remove();
+    }
+  },
+
+  setupToolbarButtonsList: function () {
+    let enabledToolbarButtonsBox = this.panelDoc.getElementById(
+      "enabled-toolbox-buttons-box");
+
+    let toggleableButtons = this.toolbox.toolboxButtons;
+    let setToolboxButtonsVisibility =
+      this.toolbox.setToolboxButtonsVisibility.bind(this.toolbox);
+
+    let onCheckboxClick = (checkbox) => {
+      let toolDefinition = toggleableButtons.filter(
+        toggleableButton => toggleableButton.id === checkbox.id)[0];
+      Services.prefs.setBoolPref(
+        toolDefinition.visibilityswitch, checkbox.checked);
+      setToolboxButtonsVisibility();
+    };
+
+    let createCommandCheckbox = tool => {
+      let checkboxLabel = this.panelDoc.createElement("label");
+      let checkboxSpanLabel = this.panelDoc.createElement("span");
+      checkboxSpanLabel.textContent = tool.label;
+      let checkboxInput = this.panelDoc.createElement("input");
+      checkboxInput.setAttribute("type", "checkbox");
+      checkboxInput.setAttribute("id", tool.id);
+      if (InfallibleGetBoolPref(tool.visibilityswitch)) {
+        checkboxInput.setAttribute("checked", true);
+      }
+      checkboxInput.addEventListener("change",
+        onCheckboxClick.bind(this, checkboxInput));
+
+      checkboxLabel.appendChild(checkboxInput);
+      checkboxLabel.appendChild(checkboxSpanLabel);
+      return checkboxLabel;
+    };
+
+    for (let tool of toggleableButtons) {
+      if (!tool.isTargetSupported(this.toolbox.target)) {
+        continue;
+      }
+
+      enabledToolbarButtonsBox.appendChild(createCommandCheckbox(tool));
+    }
+  },
+
+  setupToolsList: function () {
+    let defaultToolsBox = this.panelDoc.getElementById("default-tools-box");
+    let additionalToolsBox = this.panelDoc.getElementById(
+      "additional-tools-box");
+    let toolsNotSupportedLabel = this.panelDoc.getElementById(
+      "tools-not-supported-label");
+    let atleastOneToolNotSupported = false;
+
+    let onCheckboxClick = function (id) {
+      let toolDefinition = gDevTools._tools.get(id);
+      // Set the kill switch pref boolean to true
+      Services.prefs.setBoolPref(toolDefinition.visibilityswitch, this.checked);
+      if (this.checked) {
+        gDevTools.emit("tool-registered", id);
+      } else {
+        gDevTools.emit("tool-unregistered", toolDefinition);
+      }
+    };
+
+    let createToolCheckbox = tool => {
+      let checkboxLabel = this.panelDoc.createElement("label");
+      let checkboxInput = this.panelDoc.createElement("input");
+      checkboxInput.setAttribute("type", "checkbox");
+      checkboxInput.setAttribute("id", tool.id);
+      checkboxInput.setAttribute("title", tool.tooltip || "");
+
+      let checkboxSpanLabel = this.panelDoc.createElement("span");
+      if (tool.isTargetSupported(this.target)) {
+        checkboxSpanLabel.textContent = tool.label;
+      } else {
+        atleastOneToolNotSupported = true;
+        checkboxSpanLabel.textContent =
+          L10N.getFormatStr("options.toolNotSupportedMarker", tool.label);
+        checkboxInput.setAttribute("data-unsupported", "true");
+        checkboxInput.setAttribute("disabled", "true");
+      }
+
+      if (InfallibleGetBoolPref(tool.visibilityswitch)) {
+        checkboxInput.setAttribute("checked", "true");
+      }
+
+      checkboxInput.addEventListener("change",
+        onCheckboxClick.bind(checkboxInput, tool.id));
+
+      checkboxLabel.appendChild(checkboxInput);
+      checkboxLabel.appendChild(checkboxSpanLabel);
+      return checkboxLabel;
+    };
+
+    // Populating the default tools lists
+    let toggleableTools = gDevTools.getDefaultTools().filter(tool => {
+      return tool.visibilityswitch && !tool.hiddenInOptions;
+    });
+
+    for (let tool of toggleableTools) {
+      defaultToolsBox.appendChild(createToolCheckbox(tool));
+    }
+
+    // Populating the additional tools list that came from add-ons.
+    let atleastOneAddon = false;
+    for (let tool of gDevTools.getAdditionalTools()) {
+      atleastOneAddon = true;
+      additionalToolsBox.appendChild(createToolCheckbox(tool));
+    }
+
+    if (!atleastOneAddon) {
+      additionalToolsBox.style.display = "none";
+    }
+
+    if (!atleastOneToolNotSupported) {
+      toolsNotSupportedLabel.style.display = "none";
+    }
+
+    this.panelWin.focus();
+  },
+
+  setupThemeList: function () {
+    let themeBox = this.panelDoc.getElementById("devtools-theme-box");
+    let themeLabels = themeBox.querySelectorAll("label");
+    for (let label of themeLabels) {
+      label.remove();
+    }
+
+    let createThemeOption = theme => {
+      let inputLabel = this.panelDoc.createElement("label");
+      let inputRadio = this.panelDoc.createElement("input");
+      inputRadio.setAttribute("type", "radio");
+      inputRadio.setAttribute("value", theme.id);
+      inputRadio.setAttribute("name", "devtools-theme-item");
+      inputRadio.addEventListener("change", function (e) {
+        setPrefAndEmit(themeBox.getAttribute("data-pref"),
+          e.target.value);
+      });
+
+      let inputSpanLabel = this.panelDoc.createElement("span");
+      inputSpanLabel.textContent = theme.label;
+      inputLabel.appendChild(inputRadio);
+      inputLabel.appendChild(inputSpanLabel);
+
+      return inputLabel;
+    };
+
+    // Populating the default theme list
+    let themes = gDevTools.getThemeDefinitionArray();
+    for (let theme of themes) {
+      themeBox.appendChild(createThemeOption(theme));
+    }
+
+    this.updateCurrentTheme();
+  },
+
+  populatePreferences: function () {
+    let prefCheckboxes = this.panelDoc.querySelectorAll(
+      "input[type=checkbox][data-pref]");
+    for (let prefCheckbox of prefCheckboxes) {
+      if (GetPref(prefCheckbox.getAttribute("data-pref"))) {
+        prefCheckbox.setAttribute("checked", true);
+      }
+      prefCheckbox.addEventListener("change", function (e) {
+        let checkbox = e.target;
+        setPrefAndEmit(checkbox.getAttribute("data-pref"), checkbox.checked);
+      });
+    }
+    // Themes radio inputs are handled in setupThemeList
+    let prefRadiogroups = this.panelDoc.querySelectorAll(
+      ".radiogroup[data-pref]:not(#devtools-theme-box)");
+    for (let radioGroup of prefRadiogroups) {
+      let selectedValue = GetPref(radioGroup.getAttribute("data-pref"));
+
+      for (let radioInput of radioGroup.querySelectorAll("input[type=radio]")) {
+        if (radioInput.getAttribute("value") == selectedValue) {
+          radioInput.setAttribute("checked", true);
+        }
+
+        radioInput.addEventListener("change", function (e) {
+          setPrefAndEmit(radioGroup.getAttribute("data-pref"),
+            e.target.value);
+        });
+      }
+    }
+    let prefSelects = this.panelDoc.querySelectorAll("select[data-pref]");
+    for (let prefSelect of prefSelects) {
+      let pref = GetPref(prefSelect.getAttribute("data-pref"));
+      let options = [...prefSelect.options];
+      options.some(function (option) {
+        let value = option.value;
+        // non strict check to allow int values.
+        if (value == pref) {
+          prefSelect.selectedIndex = options.indexOf(option);
+          return true;
+        }
+      });
+
+      prefSelect.addEventListener("change", function (e) {
+        let select = e.target;
+        setPrefAndEmit(select.getAttribute("data-pref"),
+          select.options[select.selectedIndex].value);
+      });
+    }
+
+    if (this.target.activeTab) {
+      return this.target.client.attachTab(this.target.activeTab._actor)
+        .then(([response, client]) => {
+          this._origJavascriptEnabled = !response.javascriptEnabled;
+          this.disableJSNode.checked = this._origJavascriptEnabled;
+          this.disableJSNode.addEventListener("click",
+            this._disableJSClicked, false);
+        });
+    }
+    this.disableJSNode.hidden = true;
+  },
+
+  updateCurrentTheme: function () {
+    let currentTheme = GetPref("devtools.theme");
+    let themeBox = this.panelDoc.getElementById("devtools-theme-box");
+    let themeRadioInput = themeBox.querySelector(`[value=${currentTheme}]`);
+
+    if (themeRadioInput) {
+      themeRadioInput.checked = true;
+    } else {
+      // If the current theme does not exist anymore, switch to light theme
+      let lightThemeInputRadio = themeBox.querySelector("[value=light]");
+      lightThemeInputRadio.checked = true;
+    }
+  },
+
+  /**
+   * Disables JavaScript for the currently loaded tab. We force a page refresh
+   * here because setting docShell.allowJavascript to true fails to block JS
+   * execution from event listeners added using addEventListener(), AJAX calls
+   * and timers. The page refresh prevents these things from being added in the
+   * first place.
+   *
+   * @param {Event} event
+   *        The event sent by checking / unchecking the disable JS checkbox.
+   */
+  _disableJSClicked: function (event) {
+    let checked = event.target.checked;
+
+    let options = {
+      "javascriptEnabled": !checked
+    };
+
+    this.target.activeTab.reconfigure(options);
+  },
+
+  destroy: function () {
+    if (this.destroyPromise) {
+      return this.destroyPromise;
+    }
+
+    let deferred = defer();
+    this.destroyPromise = deferred.promise;
+
+    this._removeListeners();
+
+    if (this.target.activeTab) {
+      this.disableJSNode.removeEventListener("click", this._disableJSClicked);
+      // FF41+ automatically cleans up state in actor on disconnect
+      if (!this.target.activeTab.traits.noTabReconfigureOnClose) {
+        let options = {
+          "javascriptEnabled": this._origJavascriptEnabled,
+          "performReload": false
+        };
+        this.target.activeTab.reconfigure(options, deferred.resolve);
+      } else {
+        deferred.resolve();
+      }
+    } else {
+      deferred.resolve();
+    }
+
+    this.panelWin = this.panelDoc = this.disableJSNode = this.toolbox = null;
+
+    return this.destroyPromise;
+  }
+};
+
+/* Set a pref and emit the pref-changed event if needed. */
+function setPrefAndEmit(prefName, newValue) {
+  let data = {
+    pref: prefName,
+    newValue: newValue
+  };
+  data.oldValue = GetPref(data.pref);
+  SetPref(data.pref, data.newValue);
+
+  if (data.newValue != data.oldValue) {
+    gDevTools.emit("pref-changed", data);
+  }
+}
diff --git a/devtools/client/framework/toolbox-options.xhtml b/devtools/client/framework/toolbox-options.xhtml
new file mode 100644
index 000000000..372a588ab
--- /dev/null
+++ b/devtools/client/framework/toolbox-options.xhtml
@@ -0,0 +1,201 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<!DOCTYPE html [
+<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
+ %toolboxDTD;
+]>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Toolbox option</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <link rel="stylesheet" href="chrome://devtools/content/framework/options-panel.css" type="text/css"/>
+    <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
+  </head>
+  <body role="application" class="theme-body">
+  <form id="options-panel">
+    <div id="tools-box" class="options-vertical-pane">
+      <fieldset id="default-tools-box" class="options-groupbox">
+        <legend>&options.selectDefaultTools.label2;</legend>
+      </fieldset>
+
+      <fieldset id="additional-tools-box" class="options-groupbox">
+        <legend>&options.selectAdditionalTools.label;</legend>
+      </fieldset>
+
+      <fieldset id="enabled-toolbox-buttons-box" class="options-groupbox">
+        <legend>&options.selectEnabledToolboxButtons.label;</legend>
+        <span id="tools-not-supported-label"
+              class="options-citation-label theme-comment">
+          &options.toolNotSupported.label;</span>
+      </fieldset>
+    </div>
+
+    <div class="options-vertical-pane">
+      <fieldset id="devtools-theme-box"
+                class="options-groupbox
+                       horizontal-options-groupbox
+                       radiogroup"
+                data-pref="devtools.theme">
+        <legend>&options.selectDevToolsTheme.label2;</legend>
+      </fieldset>
+
+      <fieldset id="commonprefs-options" class="options-groupbox">
+        <legend>&options.commonPrefs.label;</legend>
+        <label title="&options.enablePersistentLogs.tooltip;">
+          <input type="checkbox" data-pref="devtools.webconsole.persistlog" />
+          <span>&options.enablePersistentLogs.label;</span>
+        </label>
+      </fieldset>
+
+      <fieldset id="inspector-options" class="options-groupbox">
+        <legend>&options.context.inspector;</legend>
+        <label title="&options.showUserAgentStyles.tooltip;">
+          <input type="checkbox"
+                 data-pref="devtools.inspector.showUserAgentStyles"/>
+          <span>&options.showUserAgentStyles.label;</span>
+        </label>
+        <label title="&options.collapseAttrs.tooltip;">
+          <input type="checkbox"
+                 data-pref="devtools.markup.collapseAttributes"/>
+          <span>&options.collapseAttrs.label;</span>
+        </label>
+        <label>
+          <span>&options.defaultColorUnit.label;</span>
+          <select id="defaultColorUnitMenuList"
+                  data-pref="devtools.defaultColorUnit">
+            <option value="authored">&options.defaultColorUnit.authored;</option>
+            <option value="hex">&options.defaultColorUnit.hex;</option>
+            <option value="hsl">&options.defaultColorUnit.hsl;</option>
+            <option value="rgb">&options.defaultColorUnit.rgb;</option>
+            <option value="name">&options.defaultColorUnit.name;</option>
+          </select>
+        </label>
+      </fieldset>
+
+      <fieldset id="webconsole-options" class="options-groupbox">
+        <legend>&options.webconsole.label;</legend>
+        <label title="&options.timestampMessages.tooltip;">
+          <input type="checkbox"
+                 id="webconsole-timestamp-messages"
+                 data-pref="devtools.webconsole.timestampMessages"/>
+          <span>&options.timestampMessages.label;</span>
+        </label>
+      </fieldset>
+
+      <fieldset id="debugger-options" class="options-groupbox">
+        <legend>&options.debugger.label;</legend>
+        <label title="&options.sourceMaps.tooltip;">
+          <input type="checkbox"
+                 id="debugger-sourcemaps"
+                 data-pref="devtools.debugger.client-source-maps-enabled"/>
+          <span>&options.sourceMaps.label;</span>
+        </label>
+      </fieldset>
+
+      <fieldset id="styleeditor-options" class="options-groupbox">
+        <legend>&options.styleeditor.label;</legend>
+        <label title="&options.stylesheetSourceMaps.tooltip;">
+          <input type="checkbox"
+                 data-pref="devtools.styleeditor.source-maps-enabled"/>
+          <span>&options.stylesheetSourceMaps.label;</span>
+        </label>
+        <label title="&options.stylesheetAutocompletion.tooltip;">
+          <input type="checkbox"
+                 data-pref="devtools.styleeditor.autocompletion-enabled"/>
+          <span>&options.stylesheetAutocompletion.label;</span>
+        </label>
+      </fieldset>
+    </div>
+
+    <div class="options-vertical-pane">
+      <fieldset id="sourceeditor-options" class="options-groupbox">
+        <legend>&options.sourceeditor.label;</legend>
+        <label title="&options.sourceeditor.detectindentation.tooltip;">
+          <input type="checkbox"
+                 id="devtools-sourceeditor-detectindentation"
+                 data-pref="devtools.editor.detectindentation"/>
+          <span>&options.sourceeditor.detectindentation.label;</span>
+        </label>
+        <label title="&options.sourceeditor.autoclosebrackets.tooltip;">
+          <input type="checkbox"
+                 id="devtools-sourceeditor-autoclosebrackets"
+                 data-pref="devtools.editor.autoclosebrackets"/>
+          <span>&options.sourceeditor.autoclosebrackets.label;</span>
+        </label>
+        <label title="&options.sourceeditor.expandtab.tooltip;">
+          <input type="checkbox"
+                 id="devtools-sourceeditor-expandtab"
+                 data-pref="devtools.editor.expandtab"/>
+          <span>&options.sourceeditor.expandtab.label;</span>
+        </label>
+        <label>
+          <span>&options.sourceeditor.tabsize.label;</span>
+          <select id="devtools-sourceeditor-tabsize-select"
+                  data-pref="devtools.editor.tabsize">
+            <option label="2">2</option>
+            <option label="4">4</option>
+            <option label="8">8</option>
+          </select>
+        </label>
+        <label>
+          <span>&options.sourceeditor.keybinding.label;</span>
+          <select id="devtools-sourceeditor-keybinding-select"
+                  data-pref="devtools.editor.keymap">
+            <option value="default">&options.sourceeditor.keybinding.default.label;</option>
+            <option value="vim">Vim</option>
+            <option value="emacs">Emacs</option>
+            <option value="sublime">Sublime Text</option>
+          </select>
+        </label>
+      </fieldset>
+
+      <fieldset id="context-options" class="options-groupbox">
+        <legend>&options.context.advancedSettings;</legend>
+         <label title="&options.showPlatformData.tooltip;">
+            <input type="checkbox"
+                   id="devtools-show-gecko-data"
+                   data-pref="devtools.performance.ui.show-platform-data"/>
+            <span>&options.showPlatformData.label;</span>
+          </label>
+          <label title="&options.disableHTTPCache.tooltip;">
+            <input type="checkbox"
+                   id="devtools-disable-cache"
+                   data-pref="devtools.cache.disabled"/>
+            <span>&options.disableHTTPCache.label;</span>
+          </label>
+          <label title="&options.disableJavaScript.tooltip;">
+            <input type="checkbox"
+                   id="devtools-disable-javascript"/>
+            <span>&options.disableJavaScript.label;</span>
+          </label>
+          <label title="&options.enableServiceWorkersHTTP.tooltip;">
+            <input type="checkbox"
+                   id="devtools-enable-serviceWorkersTesting"
+                   data-pref="devtools.serviceWorkers.testing.enabled"/>
+            <span>&options.enableServiceWorkersHTTP.label;</span>
+          </label>
+          <label title="&options.enableChrome.tooltip3;">
+            <input type="checkbox"
+                   data-pref="devtools.chrome.enabled"/>
+            <span>&options.enableChrome.label5;</span>
+          </label>
+          <label title="&options.enableRemote.tooltip2;">
+            <input type="checkbox"
+                   data-pref="devtools.debugger.remote-enabled"/>
+            <span>&options.enableRemote.label3;</span>
+          </label>
+          <label title="&options.enableWorkers.tooltip;">
+            <input type="checkbox"
+                   data-pref="devtools.debugger.workers"/>
+            <span>&options.enableWorkers.label;</span>
+          </label>
+          <span class="options-citation-label theme-comment"
+          >&options.context.triggersPageRefresh;</span>
+      </fieldset>
+    </div>
+
+  </form>
+  </body>
+</html>
diff --git a/devtools/client/framework/toolbox-process-window.js b/devtools/client/framework/toolbox-process-window.js
new file mode 100644
index 000000000..8ead718b3
--- /dev/null
+++ b/devtools/client/framework/toolbox-process-window.js
@@ -0,0 +1,230 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 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/. */
+
+"use strict";
+
+var { classes: Cc, interfaces: Ci, utils: Cu } = Components;
+
+var { loader, require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
+// Require this module to setup core modules
+loader.require("devtools/client/framework/devtools-browser");
+
+var { gDevTools } = require("devtools/client/framework/devtools");
+var { TargetFactory } = require("devtools/client/framework/target");
+var { Toolbox } = require("devtools/client/framework/toolbox");
+var Services = require("Services");
+var { DebuggerClient } = require("devtools/shared/client/main");
+var { PrefsHelper } = require("devtools/client/shared/prefs");
+var { Task } = require("devtools/shared/task");
+
+/**
+ * Shortcuts for accessing various debugger preferences.
+ */
+var Prefs = new PrefsHelper("devtools.debugger", {
+  chromeDebuggingHost: ["Char", "chrome-debugging-host"],
+  chromeDebuggingPort: ["Int", "chrome-debugging-port"],
+  chromeDebuggingWebSocket: ["Bool", "chrome-debugging-websocket"],
+});
+
+var gToolbox, gClient;
+
+var connect = Task.async(function*() {
+  window.removeEventListener("load", connect);
+  // Initiate the connection
+  let transport = yield DebuggerClient.socketConnect({
+    host: Prefs.chromeDebuggingHost,
+    port: Prefs.chromeDebuggingPort,
+    webSocket: Prefs.chromeDebuggingWebSocket,
+  });
+  gClient = new DebuggerClient(transport);
+  yield gClient.connect();
+  let addonID = getParameterByName("addonID");
+
+  if (addonID) {
+    let { addons } = yield gClient.listAddons();
+    let addonActor = addons.filter(addon => addon.id === addonID).pop();
+    openToolbox({
+      form: addonActor,
+      chrome: true,
+      isTabActor: addonActor.isWebExtension ? true : false
+    });
+  } else {
+    let response = yield gClient.getProcess();
+    openToolbox({
+      form: response.form,
+      chrome: true
+    });
+  }
+});
+
+// Certain options should be toggled since we can assume chrome debugging here
+function setPrefDefaults() {
+  Services.prefs.setBoolPref("devtools.inspector.showUserAgentStyles", true);
+  Services.prefs.setBoolPref("devtools.performance.ui.show-platform-data", true);
+  Services.prefs.setBoolPref("devtools.inspector.showAllAnonymousContent", true);
+  Services.prefs.setBoolPref("browser.dom.window.dump.enabled", true);
+  Services.prefs.setBoolPref("devtools.command-button-noautohide.enabled", true);
+  Services.prefs.setBoolPref("devtools.scratchpad.enabled", true);
+  // Bug 1225160 - Using source maps with browser debugging can lead to a crash
+  Services.prefs.setBoolPref("devtools.debugger.source-maps-enabled", false);
+  Services.prefs.setBoolPref("devtools.debugger.new-debugger-frontend", false);
+  Services.prefs.setBoolPref("devtools.debugger.client-source-maps-enabled", true);
+}
+
+window.addEventListener("load", function() {
+  let cmdClose = document.getElementById("toolbox-cmd-close");
+  cmdClose.addEventListener("command", onCloseCommand);
+  setPrefDefaults();
+  connect().catch(e => {
+    let errorMessageContainer = document.getElementById("error-message-container");
+    let errorMessage = document.getElementById("error-message");
+    errorMessage.value = e.message || e;
+    errorMessageContainer.hidden = false;
+    console.error(e);
+  });
+});
+
+function onCloseCommand(event) {
+  window.close();
+}
+
+function openToolbox({ form, chrome, isTabActor }) {
+  let options = {
+    form: form,
+    client: gClient,
+    chrome: chrome,
+    isTabActor: isTabActor
+  };
+  TargetFactory.forRemoteTab(options).then(target => {
+    let frame = document.getElementById("toolbox-iframe");
+    let selectedTool = "jsdebugger";
+
+    try {
+      // Remember the last panel that was used inside of this profile.
+      selectedTool = Services.prefs.getCharPref("devtools.toolbox.selectedTool");
+    } catch(e) {}
+
+    try {
+      // But if we are testing, then it should always open the debugger panel.
+      selectedTool = Services.prefs.getCharPref("devtools.browsertoolbox.panel");
+    } catch(e) {}
+
+    let options = { customIframe: frame };
+    gDevTools.showToolbox(target,
+                          selectedTool,
+                          Toolbox.HostType.CUSTOM,
+                          options)
+             .then(onNewToolbox);
+  });
+}
+
+function onNewToolbox(toolbox) {
+  gToolbox = toolbox;
+  bindToolboxHandlers();
+  raise();
+  let env = Components.classes["@mozilla.org/process/environment;1"].getService(Components.interfaces.nsIEnvironment);
+  let testScript = env.get("MOZ_TOOLBOX_TEST_SCRIPT");
+  if (testScript) {
+    // Only allow executing random chrome scripts when a special
+    // test-only pref is set
+    let prefName = "devtools.browser-toolbox.allow-unsafe-script";
+    if (Services.prefs.getPrefType(prefName) == Services.prefs.PREF_BOOL &&
+        Services.prefs.getBoolPref(prefName) === true) {
+      evaluateTestScript(testScript, toolbox);
+    }
+  }
+}
+
+function evaluateTestScript(script, toolbox) {
+  let sandbox = Cu.Sandbox(window);
+  sandbox.window = window;
+  sandbox.toolbox = toolbox;
+  Cu.evalInSandbox(script, sandbox);
+}
+
+function bindToolboxHandlers() {
+  gToolbox.once("destroyed", quitApp);
+  window.addEventListener("unload", onUnload);
+
+#ifdef XP_MACOSX
+  // Badge the dock icon to differentiate this process from the main application process.
+  updateBadgeText(false);
+
+  // Once the debugger panel opens listen for thread pause / resume.
+  gToolbox.getPanelWhenReady("jsdebugger").then(panel => {
+    setupThreadListeners(panel);
+  });
+#endif
+}
+
+function setupThreadListeners(panel) {
+  updateBadgeText(panel._controller.activeThread.state == "paused");
+
+  let onPaused = updateBadgeText.bind(null, true);
+  let onResumed = updateBadgeText.bind(null, false);
+  panel.target.on("thread-paused", onPaused);
+  panel.target.on("thread-resumed", onResumed);
+
+  panel.once("destroyed", () => {
+    panel.off("thread-paused", onPaused);
+    panel.off("thread-resumed", onResumed);
+  });
+}
+
+function updateBadgeText(paused) {
+  let dockSupport = Cc["@mozilla.org/widget/macdocksupport;1"].getService(Ci.nsIMacDockSupport);
+  dockSupport.badgeText = paused ? "▐▐ " : " ▶";
+}
+
+function onUnload() {
+  window.removeEventListener("unload", onUnload);
+  window.removeEventListener("message", onMessage);
+  let cmdClose = document.getElementById("toolbox-cmd-close");
+  cmdClose.removeEventListener("command", onCloseCommand);
+  gToolbox.destroy();
+}
+
+function onMessage(event) {
+  try {
+    let json = JSON.parse(event.data);
+    switch (json.name) {
+      case "toolbox-raise":
+        raise();
+        break;
+      case "toolbox-title":
+        setTitle(json.data.value);
+        break;
+    }
+  } catch(e) { console.error(e); }
+}
+
+window.addEventListener("message", onMessage);
+
+function raise() {
+  window.focus();
+}
+
+function setTitle(title) {
+  document.title = title;
+}
+
+function quitApp() {
+  let quit = Cc["@mozilla.org/supports-PRBool;1"]
+             .createInstance(Ci.nsISupportsPRBool);
+  Services.obs.notifyObservers(quit, "quit-application-requested", null);
+
+  let shouldProceed = !quit.data;
+  if (shouldProceed) {
+    Services.startup.quit(Ci.nsIAppStartup.eForceQuit);
+  }
+}
+
+function getParameterByName (name) {
+  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
+  let regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
+  let results = regex.exec(window.location.search);
+  return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+}
diff --git a/devtools/client/framework/toolbox-process-window.xul b/devtools/client/framework/toolbox-process-window.xul
new file mode 100644
index 000000000..d2f8a741b
--- /dev/null
+++ b/devtools/client/framework/toolbox-process-window.xul
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<!DOCTYPE window [
+<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
+ %toolboxDTD;
+]>
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        id="devtools-toolbox-window"
+        macanimationtype="document"
+        fullscreenbutton="true"
+        windowtype="devtools:toolbox"
+        width="900" height="600"
+        persist="screenX screenY width height sizemode">
+
+  <script type="text/javascript" src="chrome://global/content/globalOverlay.js"/>
+  <script type="text/javascript" src="toolbox-process-window.js"/>
+  <script type="text/javascript" src="chrome://global/content/viewSourceUtils.js"/>
+  <script type="text/javascript" src="chrome://browser/content/utilityOverlay.js"/>
+
+  <commandset id="toolbox-commandset">
+    <command id="toolbox-cmd-close"/>
+  </commandset>
+
+  <keyset id="toolbox-keyset">
+    <key id="toolbox-key-close"
+         key="&closeCmd.key;"
+         command="toolbox-cmd-close"
+         modifiers="accel"/>
+  </keyset>
+
+  <!-- This will be used by the Web Console to hold any popups it may create,
+       for example when viewing network request details. -->
+  <popupset id="mainPopupSet"></popupset>
+
+  <vbox id="error-message-container" hidden="true" flex="1">
+    <box>&browserToolboxErrorMessage;</box>
+    <textbox multiline="true" id="error-message" flex="1"></textbox>
+  </vbox>
+
+  <tooltip id="aHTMLTooltip" page="true"/>
+  <iframe id="toolbox-iframe" flex="1" tooltip="aHTMLTooltip"></iframe>
+</window>
diff --git a/devtools/client/framework/toolbox-window.xul b/devtools/client/framework/toolbox-window.xul
new file mode 100644
index 000000000..cd14a3597
--- /dev/null
+++ b/devtools/client/framework/toolbox-window.xul
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<!DOCTYPE window [
+<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
+ %toolboxDTD;
+]>
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        id="devtools-toolbox-window"
+        macanimationtype="document"
+        fullscreenbutton="true"
+        windowtype="devtools:toolbox"
+        width="900" height="320"
+        persist="screenX screenY width height sizemode">
+
+  <commandset id="toolbox-commandset">
+    <command id="toolbox-cmd-close" oncommand="window.close();"/>
+  </commandset>
+
+  <keyset id="toolbox-keyset">
+    <key id="toolbox-key-close"
+         key="&closeCmd.key;"
+         command="toolbox-cmd-close"
+         modifiers="accel"/>
+    <key id="toolbox-key-toggle"
+         key="&toggleToolbox.key;"
+         command="toolbox-cmd-close"
+         modifiers="accel,shift"
+         disabled="true"/>
+    <key id="toolbox-key-toggle-osx"
+         key="&toggleToolbox.key;"
+         command="toolbox-cmd-close"
+         modifiers="accel,alt"
+         disabled="true"/>
+    <key id="toolbox-key-toggle-F12"
+         keycode="&toggleToolboxF12.keycode;"
+         keytext="&toggleToolboxF12.keytext;"
+         command="toolbox-cmd-close"/>
+  </keyset>
+
+  <tooltip id="aHTMLTooltip" page="true"/>
+  <iframe id="toolbox-iframe" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip"></iframe>
+</window>
diff --git a/devtools/client/framework/toolbox.js b/devtools/client/framework/toolbox.js
new file mode 100644
index 000000000..82d5d2915
--- /dev/null
+++ b/devtools/client/framework/toolbox.js
@@ -0,0 +1,2417 @@
+/* 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 MAX_ORDINAL = 99;
+const SPLITCONSOLE_ENABLED_PREF = "devtools.toolbox.splitconsoleEnabled";
+const SPLITCONSOLE_HEIGHT_PREF = "devtools.toolbox.splitconsoleHeight";
+const OS_HISTOGRAM = "DEVTOOLS_OS_ENUMERATED_PER_USER";
+const OS_IS_64_BITS = "DEVTOOLS_OS_IS_64_BITS_PER_USER";
+const HOST_HISTOGRAM = "DEVTOOLS_TOOLBOX_HOST";
+const SCREENSIZE_HISTOGRAM = "DEVTOOLS_SCREEN_RESOLUTION_ENUMERATED_PER_USER";
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const { SourceMapService } = require("./source-map-service");
+
+var {Ci, Cu} = require("chrome");
+var promise = require("promise");
+var defer = require("devtools/shared/defer");
+var Services = require("Services");
+var {Task} = require("devtools/shared/task");
+var {gDevTools} = require("devtools/client/framework/devtools");
+var EventEmitter = require("devtools/shared/event-emitter");
+var Telemetry = require("devtools/client/shared/telemetry");
+var HUDService = require("devtools/client/webconsole/hudservice");
+var viewSource = require("devtools/client/shared/view-source");
+var { attachThread, detachThread } = require("./attach-thread");
+var Menu = require("devtools/client/framework/menu");
+var MenuItem = require("devtools/client/framework/menu-item");
+var { DOMHelpers } = require("resource://devtools/client/shared/DOMHelpers.jsm");
+const { KeyCodes } = require("devtools/client/shared/keycodes");
+
+const { BrowserLoader } =
+  Cu.import("resource://devtools/client/shared/browser-loader.js", {});
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+
+loader.lazyRequireGetter(this, "CommandUtils",
+  "devtools/client/shared/developer-toolbar", true);
+loader.lazyRequireGetter(this, "getHighlighterUtils",
+  "devtools/client/framework/toolbox-highlighter-utils", true);
+loader.lazyRequireGetter(this, "Selection",
+  "devtools/client/framework/selection", true);
+loader.lazyRequireGetter(this, "InspectorFront",
+  "devtools/shared/fronts/inspector", true);
+loader.lazyRequireGetter(this, "flags",
+  "devtools/shared/flags");
+loader.lazyRequireGetter(this, "showDoorhanger",
+  "devtools/client/shared/doorhanger", true);
+loader.lazyRequireGetter(this, "createPerformanceFront",
+  "devtools/shared/fronts/performance", true);
+loader.lazyRequireGetter(this, "system",
+  "devtools/shared/system");
+loader.lazyRequireGetter(this, "getPreferenceFront",
+  "devtools/shared/fronts/preference", true);
+loader.lazyRequireGetter(this, "KeyShortcuts",
+  "devtools/client/shared/key-shortcuts", true);
+loader.lazyRequireGetter(this, "ZoomKeys",
+  "devtools/client/shared/zoom-keys");
+loader.lazyRequireGetter(this, "settleAll",
+  "devtools/shared/ThreadSafeDevToolsUtils", true);
+loader.lazyRequireGetter(this, "ToolboxButtons",
+  "devtools/client/definitions", true);
+
+loader.lazyGetter(this, "registerHarOverlay", () => {
+  return require("devtools/client/netmonitor/har/toolbox-overlay").register;
+});
+
+/**
+ * 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)
+ * @param {DOMWindow} contentWindow
+ *        The window object of the toolbox document
+ * @param {string} frameId
+ *        A unique identifier to differentiate toolbox documents from the
+ *        chrome codebase when passing DOM messages
+ */
+function Toolbox(target, selectedTool, hostType, contentWindow, frameId) {
+  this._target = target;
+  this._win = contentWindow;
+  this.frameId = frameId;
+
+  this._toolPanels = new Map();
+  this._telemetry = new Telemetry();
+  if (Services.prefs.getBoolPref("devtools.sourcemap.locations.enabled")) {
+    this._sourceMapService = new SourceMapService(this._target);
+  }
+
+  this._initInspector = null;
+  this._inspector = null;
+
+  // Map of frames (id => frame-info) and currently selected frame id.
+  this.frameMap = new Map();
+  this.selectedFrameId = null;
+
+  this._toolRegistered = this._toolRegistered.bind(this);
+  this._toolUnregistered = this._toolUnregistered.bind(this);
+  this._refreshHostTitle = this._refreshHostTitle.bind(this);
+  this._toggleAutohide = this._toggleAutohide.bind(this);
+  this.showFramesMenu = this.showFramesMenu.bind(this);
+  this._updateFrames = this._updateFrames.bind(this);
+  this._splitConsoleOnKeypress = this._splitConsoleOnKeypress.bind(this);
+  this.destroy = this.destroy.bind(this);
+  this.highlighterUtils = getHighlighterUtils(this);
+  this._highlighterReady = this._highlighterReady.bind(this);
+  this._highlighterHidden = this._highlighterHidden.bind(this);
+  this._prefChanged = this._prefChanged.bind(this);
+  this._saveSplitConsoleHeight = this._saveSplitConsoleHeight.bind(this);
+  this._onFocus = this._onFocus.bind(this);
+  this._onBrowserMessage = this._onBrowserMessage.bind(this);
+  this._showDevEditionPromo = this._showDevEditionPromo.bind(this);
+  this._updateTextBoxMenuItems = this._updateTextBoxMenuItems.bind(this);
+  this._onBottomHostMinimized = this._onBottomHostMinimized.bind(this);
+  this._onBottomHostMaximized = this._onBottomHostMaximized.bind(this);
+  this._onToolSelectWhileMinimized = this._onToolSelectWhileMinimized.bind(this);
+  this._onPerformanceFrontEvent = this._onPerformanceFrontEvent.bind(this);
+  this._onBottomHostWillChange = this._onBottomHostWillChange.bind(this);
+  this._toggleMinimizeMode = this._toggleMinimizeMode.bind(this);
+  this._onTabbarFocus = this._onTabbarFocus.bind(this);
+  this._onTabbarArrowKeypress = this._onTabbarArrowKeypress.bind(this);
+  this._onPickerClick = this._onPickerClick.bind(this);
+  this._onPickerKeypress = this._onPickerKeypress.bind(this);
+  this._onPickerStarted = this._onPickerStarted.bind(this);
+  this._onPickerStopped = this._onPickerStopped.bind(this);
+
+  this._target.on("close", this.destroy);
+
+  if (!selectedTool) {
+    selectedTool = Services.prefs.getCharPref(this._prefs.LAST_TOOL);
+  }
+  this._defaultToolId = selectedTool;
+
+  this._hostType = hostType;
+
+  EventEmitter.decorate(this);
+
+  this._target.on("navigate", this._refreshHostTitle);
+  this._target.on("frame-update", this._updateFrames);
+
+  this.on("host-changed", this._refreshHostTitle);
+  this.on("select", this._refreshHostTitle);
+
+  this.on("ready", this._showDevEditionPromo);
+
+  gDevTools.on("tool-registered", this._toolRegistered);
+  gDevTools.on("tool-unregistered", this._toolUnregistered);
+
+  this.on("picker-started", this._onPickerStarted);
+  this.on("picker-stopped", this._onPickerStopped);
+}
+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",
+  WINDOW: "window",
+  CUSTOM: "custom"
+};
+
+Toolbox.prototype = {
+  _URL: "about:devtools-toolbox",
+
+  _prefs: {
+    LAST_TOOL: "devtools.toolbox.selectedTool",
+    SIDE_ENABLED: "devtools.toolbox.sideEnabled",
+  },
+
+  currentToolId: null,
+  lastUsedToolId: null,
+
+  /**
+   * Returns a *copy* of the _toolPanels collection.
+   *
+   * @return {Map} panels
+   *         All the running panels in the toolbox
+   */
+  getToolPanels: function () {
+    return new Map(this._toolPanels);
+  },
+
+  /**
+   * Access the panel for a given tool
+   */
+  getPanel: function (id) {
+    return this._toolPanels.get(id);
+  },
+
+  /**
+   * Get the panel instance for a given tool once it is ready.
+   * If the tool is already opened, the promise will resolve immediately,
+   * otherwise it will wait until the tool has been opened before resolving.
+   *
+   * Note that this does not open the tool, use selectTool if you'd
+   * like to select the tool right away.
+   *
+   * @param  {String} id
+   *         The id of the panel, for example "jsdebugger".
+   * @returns Promise
+   *          A promise that resolves once the panel is ready.
+   */
+  getPanelWhenReady: function (id) {
+    let deferred = defer();
+    let panel = this.getPanel(id);
+    if (panel) {
+      deferred.resolve(panel);
+    } else {
+      this.on(id + "-ready", (e, initializedPanel) => {
+        deferred.resolve(initializedPanel);
+      });
+    }
+
+    return deferred.promise;
+  },
+
+  /**
+   * This is a shortcut for getPanel(currentToolId) because it is much more
+   * likely that we're going to want to get the panel that we've just made
+   * visible
+   */
+  getCurrentPanel: function () {
+    return this._toolPanels.get(this.currentToolId);
+  },
+
+  /**
+   * Get/alter the target of a Toolbox so we're debugging something different.
+   * See Target.jsm for more details.
+   * TODO: Do we allow |toolbox.target = null;| ?
+   */
+  get target() {
+    return this._target;
+  },
+
+  get threadClient() {
+    return this._threadClient;
+  },
+
+  /**
+   * Get/alter the host of a Toolbox, i.e. is it in browser or in a separate
+   * tab. See HostType for more details.
+   */
+  get hostType() {
+    return this._hostType;
+  },
+
+  /**
+   * Shortcut to the window containing the toolbox UI
+   */
+  get win() {
+    return this._win;
+  },
+
+  /**
+   * Shortcut to the document containing the toolbox UI
+   */
+  get doc() {
+    return this.win.document;
+  },
+
+  /**
+   * Get the toolbox highlighter front. Note that it may not always have been
+   * initialized first. Use `initInspector()` if needed.
+   * Consider using highlighterUtils instead, it exposes the highlighter API in
+   * a useful way for the toolbox panels
+   */
+  get highlighter() {
+    return this._highlighter;
+  },
+
+  /**
+   * Get the toolbox's performance front. Note that it may not always have been
+   * initialized first. Use `initPerformance()` if needed.
+   */
+  get performance() {
+    return this._performance;
+  },
+
+  /**
+   * Get the toolbox's inspector front. Note that it may not always have been
+   * initialized first. Use `initInspector()` if needed.
+   */
+  get inspector() {
+    return this._inspector;
+  },
+
+  /**
+   * Get the toolbox's walker front. Note that it may not always have been
+   * initialized first. Use `initInspector()` if needed.
+   */
+  get walker() {
+    return this._walker;
+  },
+
+  /**
+   * Get the toolbox's node selection. Note that it may not always have been
+   * initialized first. Use `initInspector()` if needed.
+   */
+  get selection() {
+    return this._selection;
+  },
+
+  /**
+   * Get the toggled state of the split console
+   */
+  get splitConsole() {
+    return this._splitConsole;
+  },
+
+  /**
+   * Get the focused state of the split console
+   */
+  isSplitConsoleFocused: function () {
+    if (!this._splitConsole) {
+      return false;
+    }
+    let focusedWin = Services.focus.focusedWindow;
+    return focusedWin && focusedWin ===
+      this.doc.querySelector("#toolbox-panel-iframe-webconsole").contentWindow;
+  },
+
+  /**
+   * Open the toolbox
+   */
+  open: function () {
+    return Task.spawn(function* () {
+      this.browserRequire = BrowserLoader({
+        window: this.doc.defaultView,
+        useOnlyShared: true
+      }).require;
+
+      if (this.win.location.href.startsWith(this._URL)) {
+        // Update the URL so that onceDOMReady watch for the right url.
+        this._URL = this.win.location.href;
+      }
+
+      let domReady = defer();
+      let domHelper = new DOMHelpers(this.win);
+      domHelper.onceDOMReady(() => {
+        domReady.resolve();
+      }, this._URL);
+
+      // Optimization: fire up a few other things before waiting on
+      // the iframe being ready (makes startup faster)
+
+      // Load the toolbox-level actor fronts and utilities now
+      yield this._target.makeRemote();
+
+      // Attach the thread
+      this._threadClient = yield attachThread(this);
+      yield domReady.promise;
+
+      this.isReady = true;
+      let framesPromise = this._listFrames();
+
+      this.closeButton = this.doc.getElementById("toolbox-close");
+      this.closeButton.addEventListener("click", this.destroy, true);
+
+      gDevTools.on("pref-changed", this._prefChanged);
+
+      let framesMenu = this.doc.getElementById("command-button-frames");
+      framesMenu.addEventListener("click", this.showFramesMenu, false);
+
+      let noautohideMenu = this.doc.getElementById("command-button-noautohide");
+      noautohideMenu.addEventListener("click", this._toggleAutohide, true);
+
+      this.textBoxContextMenuPopup =
+        this.doc.getElementById("toolbox-textbox-context-popup");
+      this.textBoxContextMenuPopup.addEventListener("popupshowing",
+        this._updateTextBoxMenuItems, true);
+
+      this.shortcuts = new KeyShortcuts({
+        window: this.doc.defaultView
+      });
+      this._buildDockButtons();
+      this._buildOptions();
+      this._buildTabs();
+      this._applyCacheSettings();
+      this._applyServiceWorkersTestingSettings();
+      this._addKeysToWindow();
+      this._addReloadKeys();
+      this._addHostListeners();
+      this._registerOverlays();
+      if (!this._hostOptions || this._hostOptions.zoom === true) {
+        ZoomKeys.register(this.win);
+      }
+
+      this.tabbar = this.doc.querySelector(".devtools-tabbar");
+      this.tabbar.addEventListener("focus", this._onTabbarFocus, true);
+      this.tabbar.addEventListener("click", this._onTabbarFocus, true);
+      this.tabbar.addEventListener("keypress", this._onTabbarArrowKeypress);
+
+      this.webconsolePanel = this.doc.querySelector("#toolbox-panel-webconsole");
+      this.webconsolePanel.height = Services.prefs.getIntPref(SPLITCONSOLE_HEIGHT_PREF);
+      this.webconsolePanel.addEventListener("resize", this._saveSplitConsoleHeight);
+
+      let buttonsPromise = this._buildButtons();
+
+      this._pingTelemetry();
+
+      // The isTargetSupported check needs to happen after the target is
+      // remoted, otherwise we could have done it in the toolbox constructor
+      // (bug 1072764).
+      let toolDef = gDevTools.getToolDefinition(this._defaultToolId);
+      if (!toolDef || !toolDef.isTargetSupported(this._target)) {
+        this._defaultToolId = "webconsole";
+      }
+
+      yield this.selectTool(this._defaultToolId);
+
+      // Wait until the original tool is selected so that the split
+      // console input will receive focus.
+      let splitConsolePromise = promise.resolve();
+      if (Services.prefs.getBoolPref(SPLITCONSOLE_ENABLED_PREF)) {
+        splitConsolePromise = this.openSplitConsole();
+      }
+
+      yield promise.all([
+        splitConsolePromise,
+        buttonsPromise,
+        framesPromise
+      ]);
+
+      // Lazily connect to the profiler here and don't wait for it to complete,
+      // used to intercept console.profile calls before the performance tools are open.
+      let performanceFrontConnection = this.initPerformance();
+
+      // If in testing environment, wait for performance connection to finish,
+      // so we don't have to explicitly wait for this in tests; ideally, all tests
+      // will handle this on their own, but each have their own tear down function.
+      if (flags.testing) {
+        yield performanceFrontConnection;
+      }
+
+      this.emit("ready");
+    }.bind(this)).then(null, console.error.bind(console));
+  },
+
+  /**
+   * loading React modules when needed (to avoid performance penalties
+   * during Firefox start up time).
+   */
+  get React() {
+    return this.browserRequire("devtools/client/shared/vendor/react");
+  },
+
+  get ReactDOM() {
+    return this.browserRequire("devtools/client/shared/vendor/react-dom");
+  },
+
+  get ReactRedux() {
+    return this.browserRequire("devtools/client/shared/vendor/react-redux");
+  },
+
+  // Return HostType id for telemetry
+  _getTelemetryHostId: function () {
+    switch (this.hostType) {
+      case Toolbox.HostType.BOTTOM: return 0;
+      case Toolbox.HostType.SIDE: return 1;
+      case Toolbox.HostType.WINDOW: return 2;
+      case Toolbox.HostType.CUSTOM: return 3;
+      default: return 9;
+    }
+  },
+
+  _pingTelemetry: function () {
+    this._telemetry.toolOpened("toolbox");
+
+    this._telemetry.logOncePerBrowserVersion(OS_HISTOGRAM, system.getOSCPU());
+    this._telemetry.logOncePerBrowserVersion(OS_IS_64_BITS,
+                                             Services.appinfo.is64Bit ? 1 : 0);
+    this._telemetry.logOncePerBrowserVersion(SCREENSIZE_HISTOGRAM,
+                                             system.getScreenDimensions());
+    this._telemetry.log(HOST_HISTOGRAM, this._getTelemetryHostId());
+  },
+
+  /**
+   * Because our panels are lazy loaded this is a good place to watch for
+   * "pref-changed" events.
+   * @param  {String} event
+   *         The event type, "pref-changed".
+   * @param  {Object} data
+   *         {
+   *           newValue: The new value
+   *           oldValue:  The old value
+   *           pref: The name of the preference that has changed
+   *         }
+   */
+  _prefChanged: function (event, data) {
+    switch (data.pref) {
+      case "devtools.cache.disabled":
+        this._applyCacheSettings();
+        break;
+      case "devtools.serviceWorkers.testing.enabled":
+        this._applyServiceWorkersTestingSettings();
+        break;
+    }
+  },
+
+  _buildOptions: function () {
+    let selectOptions = (name, event) => {
+      // Flip back to the last used panel if we are already
+      // on the options panel.
+      if (this.currentToolId === "options" &&
+          gDevTools.getToolDefinition(this.lastUsedToolId)) {
+        this.selectTool(this.lastUsedToolId);
+      } else {
+        this.selectTool("options");
+      }
+      // Prevent the opening of bookmarks window on toolbox.options.key
+      event.preventDefault();
+    };
+    this.shortcuts.on(L10N.getStr("toolbox.options.key"), selectOptions);
+    this.shortcuts.on(L10N.getStr("toolbox.help.key"), selectOptions);
+  },
+
+  _splitConsoleOnKeypress: function (e) {
+    if (e.keyCode === KeyCodes.DOM_VK_ESCAPE) {
+      this.toggleSplitConsole();
+      // If the debugger is paused, don't let the ESC key stop any pending
+      // navigation.
+      if (this._threadClient.state == "paused") {
+        e.preventDefault();
+      }
+    }
+  },
+
+  /**
+   * Add a shortcut key that should work when a split console
+   * has focus to the toolbox.
+   *
+   * @param {String} key
+   *        The electron key shortcut.
+   * @param {Function} handler
+   *        The callback that should be called when the provided key shortcut is pressed.
+   * @param {String} whichTool
+   *        The tool the key belongs to. The corresponding handler will only be triggered
+   *        if this tool is active.
+   */
+  useKeyWithSplitConsole: function (key, handler, whichTool) {
+    this.shortcuts.on(key, (name, event) => {
+      if (this.currentToolId === whichTool && this.isSplitConsoleFocused()) {
+        handler();
+        event.preventDefault();
+      }
+    });
+  },
+
+  _addReloadKeys: function () {
+    [
+      ["reload", false],
+      ["reload2", false],
+      ["forceReload", true],
+      ["forceReload2", true]
+    ].forEach(([id, force]) => {
+      let key = L10N.getStr("toolbox." + id + ".key");
+      this.shortcuts.on(key, (name, event) => {
+        this.reloadTarget(force);
+
+        // Prevent Firefox shortcuts from reloading the page
+        event.preventDefault();
+      });
+    });
+  },
+
+  _addHostListeners: function () {
+    this.shortcuts.on(L10N.getStr("toolbox.nextTool.key"),
+                 (name, event) => {
+                   this.selectNextTool();
+                   event.preventDefault();
+                 });
+    this.shortcuts.on(L10N.getStr("toolbox.previousTool.key"),
+                 (name, event) => {
+                   this.selectPreviousTool();
+                   event.preventDefault();
+                 });
+    this.shortcuts.on(L10N.getStr("toolbox.minimize.key"),
+                 (name, event) => {
+                   this._toggleMinimizeMode();
+                   event.preventDefault();
+                 });
+    this.shortcuts.on(L10N.getStr("toolbox.toggleHost.key"),
+                 (name, event) => {
+                   this.switchToPreviousHost();
+                   event.preventDefault();
+                 });
+
+    this.doc.addEventListener("keypress", this._splitConsoleOnKeypress, false);
+    this.doc.addEventListener("focus", this._onFocus, true);
+    this.win.addEventListener("unload", this.destroy);
+    this.win.addEventListener("message", this._onBrowserMessage, true);
+  },
+
+  _removeHostListeners: function () {
+    // The host iframe's contentDocument may already be gone.
+    if (this.doc) {
+      this.doc.removeEventListener("keypress", this._splitConsoleOnKeypress, false);
+      this.doc.removeEventListener("focus", this._onFocus, true);
+      this.win.removeEventListener("unload", this.destroy);
+      this.win.removeEventListener("message", this._onBrowserMessage, true);
+    }
+  },
+
+  // Called whenever the chrome send a message
+  _onBrowserMessage: function (event) {
+    if (!event.data) {
+      return;
+    }
+    switch (event.data.name) {
+      case "switched-host":
+        this._onSwitchedHost(event.data);
+        break;
+      case "host-minimized":
+        if (this.hostType == Toolbox.HostType.BOTTOM) {
+          this._onBottomHostMinimized();
+        }
+        break;
+      case "host-maximized":
+        if (this.hostType == Toolbox.HostType.BOTTOM) {
+          this._onBottomHostMaximized();
+        }
+        break;
+    }
+  },
+
+  _registerOverlays: function () {
+    registerHarOverlay(this);
+  },
+
+  _saveSplitConsoleHeight: function () {
+    Services.prefs.setIntPref(SPLITCONSOLE_HEIGHT_PREF,
+      this.webconsolePanel.height);
+  },
+
+  /**
+   * Make sure that the console is showing up properly based on all the
+   * possible conditions.
+   *   1) If the console tab is selected, then regardless of split state
+   *      it should take up the full height of the deck, and we should
+   *      hide the deck and splitter.
+   *   2) If the console tab is not selected and it is split, then we should
+   *      show the splitter, deck, and console.
+   *   3) If the console tab is not selected and it is *not* split,
+   *      then we should hide the console and splitter, and show the deck
+   *      at full height.
+   */
+  _refreshConsoleDisplay: function () {
+    let deck = this.doc.getElementById("toolbox-deck");
+    let webconsolePanel = this.webconsolePanel;
+    let splitter = this.doc.getElementById("toolbox-console-splitter");
+    let openedConsolePanel = this.currentToolId === "webconsole";
+
+    if (openedConsolePanel) {
+      deck.setAttribute("collapsed", "true");
+      splitter.setAttribute("hidden", "true");
+      webconsolePanel.removeAttribute("collapsed");
+    } else {
+      deck.removeAttribute("collapsed");
+      if (this.splitConsole) {
+        webconsolePanel.removeAttribute("collapsed");
+        splitter.removeAttribute("hidden");
+      } else {
+        webconsolePanel.setAttribute("collapsed", "true");
+        splitter.setAttribute("hidden", "true");
+      }
+    }
+  },
+
+  /**
+   * Adds the keys and commands to the Toolbox Window in window mode.
+   */
+  _addKeysToWindow: function () {
+    if (this.hostType != Toolbox.HostType.WINDOW) {
+      return;
+    }
+
+    let doc = this.win.parent.document;
+
+    for (let [id, toolDefinition] of gDevTools.getToolDefinitionMap()) {
+      // Prevent multiple entries for the same tool.
+      if (!toolDefinition.key || doc.getElementById("key_" + id)) {
+        continue;
+      }
+
+      let toolId = id;
+      let key = doc.createElement("key");
+
+      key.id = "key_" + toolId;
+
+      if (toolDefinition.key.startsWith("VK_")) {
+        key.setAttribute("keycode", toolDefinition.key);
+      } else {
+        key.setAttribute("key", toolDefinition.key);
+      }
+
+      key.setAttribute("modifiers", toolDefinition.modifiers);
+      // needed. See bug 371900
+      key.setAttribute("oncommand", "void(0);");
+      key.addEventListener("command", () => {
+        this.selectTool(toolId).then(() => this.fireCustomKey(toolId));
+      }, true);
+      doc.getElementById("toolbox-keyset").appendChild(key);
+    }
+
+    // Add key for toggling the browser console from the detached window
+    if (!doc.getElementById("key_browserconsole")) {
+      let key = doc.createElement("key");
+      key.id = "key_browserconsole";
+
+      key.setAttribute("key", L10N.getStr("browserConsoleCmd.commandkey"));
+      key.setAttribute("modifiers", "accel,shift");
+      // needed. See bug 371900
+      key.setAttribute("oncommand", "void(0)");
+      key.addEventListener("command", () => {
+        HUDService.toggleBrowserConsole();
+      }, true);
+      doc.getElementById("toolbox-keyset").appendChild(key);
+    }
+  },
+
+  /**
+   * Handle any custom key events.  Returns true if there was a custom key
+   * binding run.
+   * @param {string} toolId Which tool to run the command on (skip if not
+   * current)
+   */
+  fireCustomKey: function (toolId) {
+    let toolDefinition = gDevTools.getToolDefinition(toolId);
+
+    if (toolDefinition.onkey &&
+        ((this.currentToolId === toolId) ||
+          (toolId == "webconsole" && this.splitConsole))) {
+      toolDefinition.onkey(this.getCurrentPanel(), this);
+    }
+  },
+
+  /**
+   * Build the notification box as soon as needed.
+   */
+  get notificationBox() {
+    if (!this._notificationBox) {
+      let { NotificationBox, PriorityLevels } =
+        this.browserRequire(
+          "devtools/client/shared/components/notification-box");
+
+      NotificationBox = this.React.createFactory(NotificationBox);
+
+      // Render NotificationBox and assign priority levels to it.
+      let box = this.doc.getElementById("toolbox-notificationbox");
+      this._notificationBox = Object.assign(
+        this.ReactDOM.render(NotificationBox({}), box),
+        PriorityLevels);
+    }
+    return this._notificationBox;
+  },
+
+  /**
+   * Build the buttons for changing hosts. Called every time
+   * the host changes.
+   */
+  _buildDockButtons: function () {
+    let dockBox = this.doc.getElementById("toolbox-dock-buttons");
+
+    while (dockBox.firstChild) {
+      dockBox.removeChild(dockBox.firstChild);
+    }
+
+    if (!this._target.isLocalTab) {
+      return;
+    }
+
+    // Bottom-type host can be minimized, add a button for this.
+    if (this.hostType == Toolbox.HostType.BOTTOM) {
+      let minimizeBtn = this.doc.createElementNS(HTML_NS, "button");
+      minimizeBtn.id = "toolbox-dock-bottom-minimize";
+      minimizeBtn.className = "devtools-button";
+      /* Bug 1177463 - The minimize button is currently hidden until we agree on
+         the UI for it, and until bug 1173849 is fixed too. */
+      minimizeBtn.setAttribute("hidden", "true");
+
+      minimizeBtn.addEventListener("click", this._toggleMinimizeMode);
+      dockBox.appendChild(minimizeBtn);
+      // Show the button in its maximized state.
+      this._onBottomHostMaximized();
+
+      // Maximize again when a tool gets selected.
+      this.on("before-select", this._onToolSelectWhileMinimized);
+      // Maximize and stop listening before the host type changes.
+      this.once("host-will-change", this._onBottomHostWillChange);
+    }
+
+    if (this.hostType == Toolbox.HostType.WINDOW) {
+      this.closeButton.setAttribute("hidden", "true");
+    } else {
+      this.closeButton.removeAttribute("hidden");
+    }
+
+    let sideEnabled = Services.prefs.getBoolPref(this._prefs.SIDE_ENABLED);
+
+    for (let type in Toolbox.HostType) {
+      let position = Toolbox.HostType[type];
+      if (position == this.hostType ||
+          position == Toolbox.HostType.CUSTOM ||
+          (!sideEnabled && position == Toolbox.HostType.SIDE)) {
+        continue;
+      }
+
+      let button = this.doc.createElementNS(HTML_NS, "button");
+      button.id = "toolbox-dock-" + position;
+      button.className = "toolbox-dock-button devtools-button";
+      button.setAttribute("title", L10N.getStr("toolboxDockButtons." +
+                                                  position + ".tooltip"));
+      button.addEventListener("click", this.switchHost.bind(this, position));
+
+      dockBox.appendChild(button);
+    }
+  },
+
+  _getMinimizeButtonShortcutTooltip: function () {
+    let str = L10N.getStr("toolbox.minimize.key");
+    let key = KeyShortcuts.parseElectronKey(this.win, str);
+    return "(" + KeyShortcuts.stringify(key) + ")";
+  },
+
+  _onBottomHostMinimized: function () {
+    let btn = this.doc.querySelector("#toolbox-dock-bottom-minimize");
+    btn.className = "minimized";
+
+    btn.setAttribute("title",
+      L10N.getStr("toolboxDockButtons.bottom.maximize") + " " +
+      this._getMinimizeButtonShortcutTooltip());
+  },
+
+  _onBottomHostMaximized: function () {
+    let btn = this.doc.querySelector("#toolbox-dock-bottom-minimize");
+    btn.className = "maximized";
+
+    btn.setAttribute("title",
+      L10N.getStr("toolboxDockButtons.bottom.minimize") + " " +
+      this._getMinimizeButtonShortcutTooltip());
+  },
+
+  _onToolSelectWhileMinimized: function () {
+    this.postMessage({
+      name: "maximize-host"
+    });
+  },
+
+  postMessage: function (msg) {
+    // We sometime try to send messages in middle of destroy(), where the
+    // toolbox iframe may already be detached and no longer have a parent.
+    if (this.win.parent) {
+      // Toolbox document is still chrome and disallow identifying message
+      // origin via event.source as it is null. So use a custom id.
+      msg.frameId = this.frameId;
+      this.win.parent.postMessage(msg, "*");
+    }
+  },
+
+  _onBottomHostWillChange: function () {
+    this.postMessage({
+      name: "maximize-host"
+    });
+
+    this.off("before-select", this._onToolSelectWhileMinimized);
+  },
+
+  _toggleMinimizeMode: function () {
+    if (this.hostType !== Toolbox.HostType.BOTTOM) {
+      return;
+    }
+
+    // Calculate the height to which the host should be minimized so the
+    // tabbar is still visible.
+    let toolbarHeight = this.tabbar.getBoxQuads({box: "content"})[0].bounds
+                                                                    .height;
+    this.postMessage({
+      name: "toggle-minimize-mode",
+      toolbarHeight
+    });
+  },
+
+  /**
+   * Add tabs to the toolbox UI for registered tools
+   */
+  _buildTabs: function () {
+    for (let definition of gDevTools.getToolDefinitionArray()) {
+      this._buildTabForTool(definition);
+    }
+  },
+
+  /**
+   * Get all dev tools tab bar focusable elements. These are visible elements
+   * such as buttons or elements with tabindex.
+   */
+  get tabbarFocusableElms() {
+    return [...this.tabbar.querySelectorAll(
+      "[tabindex]:not([hidden]), button:not([hidden])")];
+  },
+
+  /**
+   * Reset tabindex attributes across all focusable elements inside the tabbar.
+   * Only have one element with tabindex=0 at a time to make sure that tabbing
+   * results in navigating away from the tabbar container.
+   * @param  {FocusEvent} event
+   */
+  _onTabbarFocus: function (event) {
+    this.tabbarFocusableElms.forEach(elm =>
+      elm.setAttribute("tabindex", event.target === elm ? "0" : "-1"));
+  },
+
+  /**
+   * On left/right arrow press, attempt to move the focus inside the tabbar to
+   * the previous/next focusable element.
+   * @param  {KeyboardEvent} event
+   */
+  _onTabbarArrowKeypress: function (event) {
+    let { key, target, ctrlKey, shiftKey, altKey, metaKey } = event;
+
+    // If any of the modifier keys are pressed do not attempt navigation as it
+    // might conflict with global shortcuts (Bug 1327972).
+    if (ctrlKey || shiftKey || altKey || metaKey) {
+      return;
+    }
+
+    let focusableElms = this.tabbarFocusableElms;
+    let curIndex = focusableElms.indexOf(target);
+
+    if (curIndex === -1) {
+      console.warn(target + " is not found among Developer Tools tab bar " +
+        "focusable elements. It needs to either be a button or have " +
+        "tabindex. If it is intended to be hidden, 'hidden' attribute must " +
+        "be used.");
+      return;
+    }
+
+    let newTarget;
+
+    if (key === "ArrowLeft") {
+      // Do nothing if already at the beginning.
+      if (curIndex === 0) {
+        return;
+      }
+      newTarget = focusableElms[curIndex - 1];
+    } else if (key === "ArrowRight") {
+      // Do nothing if already at the end.
+      if (curIndex === focusableElms.length - 1) {
+        return;
+      }
+      newTarget = focusableElms[curIndex + 1];
+    } else {
+      return;
+    }
+
+    focusableElms.forEach(elm =>
+      elm.setAttribute("tabindex", newTarget === elm ? "0" : "-1"));
+    newTarget.focus();
+
+    event.preventDefault();
+    event.stopPropagation();
+  },
+
+  /**
+   * Add buttons to the UI as specified in the devtools.toolbox.toolbarSpec pref
+   */
+  _buildButtons: function () {
+    if (this.target.getTrait("highlightable")) {
+      this._buildPickerButton();
+    }
+
+    this.setToolboxButtonsVisibility();
+
+    // Old servers don't have a GCLI Actor, so just return
+    if (!this.target.hasActor("gcli")) {
+      return promise.resolve();
+    }
+    // Disable gcli in browser toolbox until there is usages of it
+    if (this.target.chrome) {
+      return promise.resolve();
+    }
+
+    const options = {
+      environment: CommandUtils.createEnvironment(this, "_target")
+    };
+    return CommandUtils.createRequisition(this.target, options).then(requisition => {
+      this._requisition = requisition;
+
+      const spec = CommandUtils.getCommandbarSpec("devtools.toolbox.toolbarSpec");
+      return CommandUtils.createButtons(spec, this.target, this.doc, requisition)
+        .then(buttons => {
+          let container = this.doc.getElementById("toolbox-buttons");
+          buttons.forEach(button => {
+            if (button) {
+              container.appendChild(button);
+            }
+          });
+          this.setToolboxButtonsVisibility();
+        });
+    });
+  },
+
+  /**
+   * Adding the element picker button is done here unlike the other buttons
+   * since we want it to work for remote targets too
+   */
+  _buildPickerButton: function () {
+    this._pickerButton = this.doc.createElementNS(HTML_NS, "button");
+    this._pickerButton.id = "command-button-pick";
+    this._pickerButton.className =
+      "command-button command-button-invertable devtools-button";
+    this._pickerButton.setAttribute("title", L10N.getStr("pickButton.tooltip"));
+
+    let container = this.doc.querySelector("#toolbox-picker-container");
+    container.appendChild(this._pickerButton);
+
+    this._pickerButton.addEventListener("click", this._onPickerClick, false);
+  },
+
+  /**
+   * Toggle the picker, but also decide whether or not the highlighter should
+   * focus the window. This is only desirable when the toolbox is mounted to the
+   * window. When devtools is free floating, then the target window should not
+   * pop in front of the viewer when the picker is clicked.
+   */
+  _onPickerClick: function () {
+    let focus = this.hostType === Toolbox.HostType.BOTTOM ||
+                this.hostType === Toolbox.HostType.SIDE;
+    this.highlighterUtils.togglePicker(focus);
+  },
+
+  /**
+   * If the picker is activated, then allow the Escape key to deactivate the
+   * functionality instead of the default behavior of toggling the console.
+   */
+  _onPickerKeypress: function (event) {
+    if (event.keyCode === KeyCodes.DOM_VK_ESCAPE) {
+      this.highlighterUtils.cancelPicker();
+      // Stop the console from toggling.
+      event.stopImmediatePropagation();
+    }
+  },
+
+  _onPickerStarted: function () {
+    this.doc.addEventListener("keypress", this._onPickerKeypress, true);
+  },
+
+  _onPickerStopped: function () {
+    this.doc.removeEventListener("keypress", this._onPickerKeypress, true);
+  },
+
+  /**
+   * Apply the current cache setting from devtools.cache.disabled to this
+   * toolbox's tab.
+   */
+  _applyCacheSettings: function () {
+    let pref = "devtools.cache.disabled";
+    let cacheDisabled = Services.prefs.getBoolPref(pref);
+
+    if (this.target.activeTab) {
+      this.target.activeTab.reconfigure({"cacheDisabled": cacheDisabled});
+    }
+  },
+
+  /**
+   * Apply the current service workers testing setting from
+   * devtools.serviceWorkers.testing.enabled to this toolbox's tab.
+   */
+  _applyServiceWorkersTestingSettings: function () {
+    let pref = "devtools.serviceWorkers.testing.enabled";
+    let serviceWorkersTestingEnabled =
+      Services.prefs.getBoolPref(pref) || false;
+
+    if (this.target.activeTab) {
+      this.target.activeTab.reconfigure({
+        "serviceWorkersTestingEnabled": serviceWorkersTestingEnabled
+      });
+    }
+  },
+
+  /**
+   * Setter for the checked state of the picker button in the toolbar
+   * @param {Boolean} isChecked
+   */
+  set pickerButtonChecked(isChecked) {
+    if (isChecked) {
+      this._pickerButton.setAttribute("checked", "true");
+    } else {
+      this._pickerButton.removeAttribute("checked");
+    }
+  },
+
+  /**
+   * Return all toolbox buttons (command buttons, plus any others that were
+   * added manually).
+   */
+  get toolboxButtons() {
+    return ToolboxButtons.map(options => {
+      let button = this.doc.getElementById(options.id);
+      // Some buttons may not exist inside of Browser Toolbox
+      if (!button) {
+        return false;
+      }
+
+      return {
+        id: options.id,
+        button: button,
+        label: button.getAttribute("title"),
+        visibilityswitch: "devtools." + options.id + ".enabled",
+        isTargetSupported: options.isTargetSupported
+                           ? options.isTargetSupported
+                           : target => target.isLocalTab,
+      };
+    }).filter(button=>button);
+  },
+
+  /**
+   * Ensure the visibility of each toolbox button matches the
+   * preference value.  Simply hide buttons that are preffed off.
+   */
+  setToolboxButtonsVisibility: function () {
+    this.toolboxButtons.forEach(buttonSpec => {
+      let { visibilityswitch, button, isTargetSupported } = buttonSpec;
+      let on = true;
+      try {
+        on = Services.prefs.getBoolPref(visibilityswitch);
+      } catch (ex) {
+        // Do nothing.
+      }
+
+      on = on && isTargetSupported(this.target);
+
+      if (button) {
+        if (on) {
+          button.removeAttribute("hidden");
+        } else {
+          button.setAttribute("hidden", "true");
+        }
+      }
+    });
+
+    this._updateNoautohideButton();
+  },
+
+  /**
+   * Build a tab for one tool definition and add to the toolbox
+   *
+   * @param {string} toolDefinition
+   *        Tool definition of the tool to build a tab for.
+   */
+  _buildTabForTool: function (toolDefinition) {
+    if (!toolDefinition.isTargetSupported(this._target)) {
+      return;
+    }
+
+    let tabs = this.doc.getElementById("toolbox-tabs");
+    let deck = this.doc.getElementById("toolbox-deck");
+
+    let id = toolDefinition.id;
+
+    if (toolDefinition.ordinal == undefined || toolDefinition.ordinal < 0) {
+      toolDefinition.ordinal = MAX_ORDINAL;
+    }
+
+    let radio = this.doc.createElement("radio");
+    // The radio element is not being used in the conventional way, thus
+    // the devtools-tab class replaces the radio XBL binding with its base
+    // binding (the control-item binding).
+    radio.className = "devtools-tab";
+    radio.id = "toolbox-tab-" + id;
+    radio.setAttribute("toolid", id);
+    radio.setAttribute("tabindex", "0");
+    radio.setAttribute("ordinal", toolDefinition.ordinal);
+    radio.setAttribute("tooltiptext", toolDefinition.tooltip);
+    if (toolDefinition.invertIconForLightTheme) {
+      radio.setAttribute("icon-invertable", "light-theme");
+    } else if (toolDefinition.invertIconForDarkTheme) {
+      radio.setAttribute("icon-invertable", "dark-theme");
+    }
+
+    radio.addEventListener("command", this.selectTool.bind(this, id));
+
+    // spacer lets us center the image and label, while allowing cropping
+    let spacer = this.doc.createElement("spacer");
+    spacer.setAttribute("flex", "1");
+    radio.appendChild(spacer);
+
+    if (toolDefinition.icon) {
+      let image = this.doc.createElement("image");
+      image.className = "default-icon";
+      image.setAttribute("src",
+                         toolDefinition.icon || toolDefinition.highlightedicon);
+      radio.appendChild(image);
+      // Adding the highlighted icon image
+      image = this.doc.createElement("image");
+      image.className = "highlighted-icon";
+      image.setAttribute("src",
+                         toolDefinition.highlightedicon || toolDefinition.icon);
+      radio.appendChild(image);
+    }
+
+    if (toolDefinition.label && !toolDefinition.iconOnly) {
+      let label = this.doc.createElement("label");
+      label.setAttribute("value", toolDefinition.label);
+      label.setAttribute("crop", "end");
+      label.setAttribute("flex", "1");
+      radio.appendChild(label);
+    }
+
+    if (!toolDefinition.bgTheme) {
+      toolDefinition.bgTheme = "theme-toolbar";
+    }
+    let vbox = this.doc.createElement("vbox");
+    vbox.className = "toolbox-panel " + toolDefinition.bgTheme;
+
+    // There is already a container for the webconsole frame.
+    if (!this.doc.getElementById("toolbox-panel-" + id)) {
+      vbox.id = "toolbox-panel-" + id;
+    }
+
+    if (id === "options") {
+      // Options panel is special.  It doesn't belong in the same container as
+      // the other tabs.
+      radio.setAttribute("role", "button");
+      let optionTabContainer = this.doc.getElementById("toolbox-option-container");
+      optionTabContainer.appendChild(radio);
+      deck.appendChild(vbox);
+    } else {
+      radio.setAttribute("role", "tab");
+
+      // If there is no tab yet, or the ordinal to be added is the largest one.
+      if (tabs.childNodes.length == 0 ||
+          tabs.lastChild.getAttribute("ordinal") <= toolDefinition.ordinal) {
+        tabs.appendChild(radio);
+        deck.appendChild(vbox);
+      } else {
+        // else, iterate over all the tabs to get the correct location.
+        Array.some(tabs.childNodes, (node, i) => {
+          if (+node.getAttribute("ordinal") > toolDefinition.ordinal) {
+            tabs.insertBefore(radio, node);
+            deck.insertBefore(vbox, deck.childNodes[i]);
+            return true;
+          }
+          return false;
+        });
+      }
+    }
+
+    this._addKeysToWindow();
+  },
+
+  /**
+   * Ensure the tool with the given id is loaded.
+   *
+   * @param {string} id
+   *        The id of the tool to load.
+   */
+  loadTool: function (id) {
+    if (id === "inspector" && !this._inspector) {
+      return this.initInspector().then(() => {
+        return this.loadTool(id);
+      });
+    }
+
+    let deferred = defer();
+    let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
+
+    if (iframe) {
+      let panel = this._toolPanels.get(id);
+      if (panel) {
+        deferred.resolve(panel);
+      } else {
+        this.once(id + "-ready", initializedPanel => {
+          deferred.resolve(initializedPanel);
+        });
+      }
+      return deferred.promise;
+    }
+
+    let definition = gDevTools.getToolDefinition(id);
+    if (!definition) {
+      deferred.reject(new Error("no such tool id " + id));
+      return deferred.promise;
+    }
+
+    iframe = this.doc.createElement("iframe");
+    iframe.className = "toolbox-panel-iframe";
+    iframe.id = "toolbox-panel-iframe-" + id;
+    iframe.setAttribute("flex", 1);
+    iframe.setAttribute("forceOwnRefreshDriver", "");
+    iframe.tooltip = "aHTMLTooltip";
+    iframe.style.visibility = "hidden";
+
+    gDevTools.emit(id + "-init", this, iframe);
+    this.emit(id + "-init", iframe);
+
+    // If no parent yet, append the frame into default location.
+    if (!iframe.parentNode) {
+      let vbox = this.doc.getElementById("toolbox-panel-" + id);
+      vbox.appendChild(iframe);
+    }
+
+    let onLoad = () => {
+      // Prevent flicker while loading by waiting to make visible until now.
+      iframe.style.visibility = "visible";
+
+      // Try to set the dir attribute as early as possible.
+      this.setIframeDocumentDir(iframe);
+
+      // The build method should return a panel instance, so events can
+      // be fired with the panel as an argument. However, in order to keep
+      // backward compatibility with existing extensions do a check
+      // for a promise return value.
+      let built = definition.build(iframe.contentWindow, this);
+
+      if (!(typeof built.then == "function")) {
+        let panel = built;
+        iframe.panel = panel;
+
+        // The panel instance is expected to fire (and listen to) various
+        // framework events, so make sure it's properly decorated with
+        // appropriate API (on, off, once, emit).
+        // In this case we decorate panel instances directly returned by
+        // the tool definition 'build' method.
+        if (typeof panel.emit == "undefined") {
+          EventEmitter.decorate(panel);
+        }
+
+        gDevTools.emit(id + "-build", this, panel);
+        this.emit(id + "-build", panel);
+
+        // The panel can implement an 'open' method for asynchronous
+        // initialization sequence.
+        if (typeof panel.open == "function") {
+          built = panel.open();
+        } else {
+          let buildDeferred = defer();
+          buildDeferred.resolve(panel);
+          built = buildDeferred.promise;
+        }
+      }
+
+      // Wait till the panel is fully ready and fire 'ready' events.
+      promise.resolve(built).then((panel) => {
+        this._toolPanels.set(id, panel);
+
+        // Make sure to decorate panel object with event API also in case
+        // where the tool definition 'build' method returns only a promise
+        // and the actual panel instance is available as soon as the
+        // promise is resolved.
+        if (typeof panel.emit == "undefined") {
+          EventEmitter.decorate(panel);
+        }
+
+        gDevTools.emit(id + "-ready", this, panel);
+        this.emit(id + "-ready", panel);
+
+        deferred.resolve(panel);
+      }, console.error);
+    };
+
+    iframe.setAttribute("src", definition.url);
+    if (definition.panelLabel) {
+      iframe.setAttribute("aria-label", definition.panelLabel);
+    }
+
+    // Depending on the host, iframe.contentWindow is not always
+    // defined at this moment. If it is not defined, we use an
+    // event listener on the iframe DOM node. If it's defined,
+    // we use the chromeEventHandler. We can't use a listener
+    // on the DOM node every time because this won't work
+    // if the (xul chrome) iframe is loaded in a content docshell.
+    if (iframe.contentWindow) {
+      let domHelper = new DOMHelpers(iframe.contentWindow);
+      domHelper.onceDOMReady(onLoad);
+    } else {
+      let callback = () => {
+        iframe.removeEventListener("DOMContentLoaded", callback);
+        onLoad();
+      };
+
+      iframe.addEventListener("DOMContentLoaded", callback);
+    }
+
+    return deferred.promise;
+  },
+
+  /**
+   * Set the dir attribute on the content document element of the provided iframe.
+   *
+   * @param {IFrameElement} iframe
+   */
+  setIframeDocumentDir: function (iframe) {
+    let docEl = iframe.contentWindow && iframe.contentWindow.document.documentElement;
+    if (!docEl || docEl.namespaceURI !== HTML_NS) {
+      // Bail out if the content window or document is not ready or if the document is not
+      // HTML.
+      return;
+    }
+
+    if (docEl.hasAttribute("dir")) {
+      // Set the dir attribute value only if dir is already present on the document.
+      let top = this.win.top;
+      let topDocEl = top.document.documentElement;
+      let isRtl = top.getComputedStyle(topDocEl).direction === "rtl";
+      docEl.setAttribute("dir", isRtl ? "rtl" : "ltr");
+    }
+  },
+
+  /**
+   * Mark all in collection as unselected; and id as selected
+   * @param {string} collection
+   *        DOM collection of items
+   * @param {string} id
+   *        The Id of the item within the collection to select
+   */
+  selectSingleNode: function (collection, id) {
+    [...collection].forEach(node => {
+      if (node.id === id) {
+        node.setAttribute("selected", "true");
+        node.setAttribute("aria-selected", "true");
+      } else {
+        node.removeAttribute("selected");
+        node.removeAttribute("aria-selected");
+      }
+    });
+  },
+
+  /**
+   * Switch to the tool with the given id
+   *
+   * @param {string} id
+   *        The id of the tool to switch to
+   */
+  selectTool: function (id) {
+    this.emit("before-select", id);
+
+    let tabs = this.doc.querySelectorAll(".devtools-tab");
+    this.selectSingleNode(tabs, "toolbox-tab-" + id);
+
+    // If options is selected, the separator between it and the
+    // command buttons should be hidden.
+    let sep = this.doc.getElementById("toolbox-controls-separator");
+    if (id === "options") {
+      sep.setAttribute("invisible", "true");
+    } else {
+      sep.removeAttribute("invisible");
+    }
+
+    if (this.currentToolId == id) {
+      let panel = this._toolPanels.get(id);
+      if (panel) {
+        // We have a panel instance, so the tool is already fully loaded.
+
+        // re-focus tool to get key events again
+        this.focusTool(id);
+
+        // Return the existing panel in order to have a consistent return value.
+        return promise.resolve(panel);
+      }
+      // Otherwise, if there is no panel instance, it is still loading,
+      // so we are racing another call to selectTool with the same id.
+      return this.once("select").then(() => promise.resolve(this._toolPanels.get(id)));
+    }
+
+    if (!this.isReady) {
+      throw new Error("Can't select tool, wait for toolbox 'ready' event");
+    }
+
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
+
+    if (tab) {
+      if (this.currentToolId) {
+        this._telemetry.toolClosed(this.currentToolId);
+      }
+      this._telemetry.toolOpened(id);
+    } else {
+      throw new Error("No tool found");
+    }
+
+    let tabstrip = this.doc.getElementById("toolbox-tabs");
+
+    // select the right tab, making 0th index the default tab if right tab not
+    // found.
+    tabstrip.selectedItem = tab || tabstrip.childNodes[0];
+
+    // and select the right iframe
+    let toolboxPanels = this.doc.querySelectorAll(".toolbox-panel");
+    this.selectSingleNode(toolboxPanels, "toolbox-panel-" + id);
+
+    this.lastUsedToolId = this.currentToolId;
+    this.currentToolId = id;
+    this._refreshConsoleDisplay();
+    if (id != "options") {
+      Services.prefs.setCharPref(this._prefs.LAST_TOOL, id);
+    }
+
+    return this.loadTool(id).then(panel => {
+      // focus the tool's frame to start receiving key events
+      this.focusTool(id);
+
+      this.emit("select", id);
+      this.emit(id + "-selected", panel);
+      return panel;
+    });
+  },
+
+  /**
+   * Focus a tool's panel by id
+   * @param  {string} id
+   *         The id of tool to focus
+   */
+  focusTool: function (id, state = true) {
+    let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
+
+    if (state) {
+      iframe.focus();
+    } else {
+      iframe.blur();
+    }
+  },
+
+  /**
+   * Focus split console's input line
+   */
+  focusConsoleInput: function () {
+    let consolePanel = this.getPanel("webconsole");
+    if (consolePanel) {
+      consolePanel.focusInput();
+    }
+  },
+
+  /**
+   * If the console is split and we are focusing an element outside
+   * of the console, then store the newly focused element, so that
+   * it can be restored once the split console closes.
+   */
+  _onFocus: function ({originalTarget}) {
+    // Ignore any non element nodes, or any elements contained
+    // within the webconsole frame.
+    let webconsoleURL = gDevTools.getToolDefinition("webconsole").url;
+    if (originalTarget.nodeType !== 1 ||
+        originalTarget.baseURI === webconsoleURL) {
+      return;
+    }
+
+    this._lastFocusedElement = originalTarget;
+  },
+
+  /**
+   * Opens the split console.
+   *
+   * @returns {Promise} a promise that resolves once the tool has been
+   *          loaded and focused.
+   */
+  openSplitConsole: function () {
+    this._splitConsole = true;
+    Services.prefs.setBoolPref(SPLITCONSOLE_ENABLED_PREF, true);
+    this._refreshConsoleDisplay();
+    this.emit("split-console");
+
+    return this.loadTool("webconsole").then(() => {
+      this.focusConsoleInput();
+    });
+  },
+
+  /**
+   * Closes the split console.
+   *
+   * @returns {Promise} a promise that resolves once the tool has been
+   *          closed.
+   */
+  closeSplitConsole: function () {
+    this._splitConsole = false;
+    Services.prefs.setBoolPref(SPLITCONSOLE_ENABLED_PREF, false);
+    this._refreshConsoleDisplay();
+    this.emit("split-console");
+
+    if (this._lastFocusedElement) {
+      this._lastFocusedElement.focus();
+    }
+    return promise.resolve();
+  },
+
+  /**
+   * Toggles the split state of the webconsole.  If the webconsole panel
+   * is already selected then this command is ignored.
+   *
+   * @returns {Promise} a promise that resolves once the tool has been
+   *          opened or closed.
+   */
+  toggleSplitConsole: function () {
+    if (this.currentToolId !== "webconsole") {
+      return this.splitConsole ?
+             this.closeSplitConsole() :
+             this.openSplitConsole();
+    }
+
+    return promise.resolve();
+  },
+
+  /**
+   * Tells the target tab to reload.
+   */
+  reloadTarget: function (force) {
+    this.target.activeTab.reload({ force: force });
+  },
+
+  /**
+   * Loads the tool next to the currently selected tool.
+   */
+  selectNextTool: function () {
+    let tools = this.doc.querySelectorAll(".devtools-tab");
+    let selected = this.doc.querySelector(".devtools-tab[selected]");
+    let nextIndex = [...tools].indexOf(selected) + 1;
+    let next = tools[nextIndex] || tools[0];
+    let tool = next.getAttribute("toolid");
+    return this.selectTool(tool);
+  },
+
+  /**
+   * Loads the tool just left to the currently selected tool.
+   */
+  selectPreviousTool: function () {
+    let tools = this.doc.querySelectorAll(".devtools-tab");
+    let selected = this.doc.querySelector(".devtools-tab[selected]");
+    let prevIndex = [...tools].indexOf(selected) - 1;
+    let prev = tools[prevIndex] || tools[tools.length - 1];
+    let tool = prev.getAttribute("toolid");
+    return this.selectTool(tool);
+  },
+
+  /**
+   * Highlights the tool's tab if it is not the currently selected tool.
+   *
+   * @param {string} id
+   *        The id of the tool to highlight
+   */
+  highlightTool: function (id) {
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
+    tab && tab.setAttribute("highlighted", "true");
+  },
+
+  /**
+   * De-highlights the tool's tab.
+   *
+   * @param {string} id
+   *        The id of the tool to unhighlight
+   */
+  unhighlightTool: function (id) {
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
+    tab && tab.removeAttribute("highlighted");
+  },
+
+  /**
+   * Raise the toolbox host.
+   */
+  raise: function () {
+    this.postMessage({
+      name: "raise-host"
+    });
+  },
+
+  /**
+   * Refresh the host's title.
+   */
+  _refreshHostTitle: function () {
+    let title;
+    if (this.target.name && this.target.name != this.target.url) {
+      title = L10N.getFormatStr("toolbox.titleTemplate2", this.target.name,
+                                                          this.target.url);
+    } else {
+      title = L10N.getFormatStr("toolbox.titleTemplate1", this.target.url);
+    }
+    this.postMessage({
+      name: "set-host-title",
+      title
+    });
+  },
+
+  // Returns an instance of the preference actor
+  get _preferenceFront() {
+    return this.target.root.then(rootForm => {
+      return getPreferenceFront(this.target.client, rootForm);
+    });
+  },
+
+  _toggleAutohide: Task.async(function* () {
+    let prefName = "ui.popup.disable_autohide";
+    let front = yield this._preferenceFront;
+    let current = yield front.getBoolPref(prefName);
+    yield front.setBoolPref(prefName, !current);
+
+    this._updateNoautohideButton();
+  }),
+
+  _updateNoautohideButton: Task.async(function* () {
+    let menu = this.doc.getElementById("command-button-noautohide");
+    if (menu.getAttribute("hidden") === "true") {
+      return;
+    }
+    if (!this.target.root) {
+      return;
+    }
+    let prefName = "ui.popup.disable_autohide";
+    let front = yield this._preferenceFront;
+    let current = yield front.getBoolPref(prefName);
+    if (current) {
+      menu.setAttribute("checked", "true");
+    } else {
+      menu.removeAttribute("checked");
+    }
+  }),
+
+  _listFrames: function (event) {
+    if (!this._target.activeTab || !this._target.activeTab.traits.frames) {
+      // We are not targetting a regular TabActor
+      // it can be either an addon or browser toolbox actor
+      return promise.resolve();
+    }
+    let packet = {
+      to: this._target.form.actor,
+      type: "listFrames"
+    };
+    return this._target.client.request(packet, resp => {
+      this._updateFrames(null, { frames: resp.frames });
+    });
+  },
+
+  /**
+   * Show a drop down menu that allows the user to switch frames.
+   */
+  showFramesMenu: function (event) {
+    let menu = new Menu();
+    let target = event.target;
+
+    // Generate list of menu items from the list of frames.
+    this.frameMap.forEach(frame => {
+      // A frame is checked if it's the selected one.
+      let checked = frame.id == this.selectedFrameId;
+
+      // Create menu item.
+      menu.append(new MenuItem({
+        label: frame.url,
+        type: "radio",
+        checked,
+        click: () => {
+          this.onSelectFrame(frame.id);
+        }
+      }));
+    });
+
+    menu.once("open").then(() => {
+      target.setAttribute("open", "true");
+    });
+
+    menu.once("close").then(() => {
+      target.removeAttribute("open");
+    });
+
+    // Show a drop down menu with frames.
+    // XXX Missing menu API for specifying target (anchor)
+    // and relative position to it. See also:
+    // https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/openPopup
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1274551
+    let rect = target.getBoundingClientRect();
+    let screenX = target.ownerDocument.defaultView.mozInnerScreenX;
+    let screenY = target.ownerDocument.defaultView.mozInnerScreenY;
+    menu.popup(rect.left + screenX, rect.bottom + screenY, this);
+
+    return menu;
+  },
+
+  /**
+   * Select a frame by sending 'switchToFrame' packet to the backend.
+   */
+  onSelectFrame: function (frameId) {
+    // Send packet to the backend to select specified frame and
+    // wait for 'frameUpdate' event packet to update the UI.
+    let packet = {
+      to: this._target.form.actor,
+      type: "switchToFrame",
+      windowId: frameId
+    };
+    this._target.client.request(packet);
+  },
+
+  /**
+   * A handler for 'frameUpdate' packets received from the backend.
+   * Following properties might be set on the packet:
+   *
+   * destroyAll {Boolean}: All frames have been destroyed.
+   * selected {Number}: A frame has been selected
+   * frames {Array}: list of frames. Every frame can have:
+   *                 id {Number}: frame ID
+   *                 url {String}: frame URL
+   *                 title {String}: frame title
+   *                 destroy {Boolean}: Set to true if destroyed
+   *                 parentID {Number}: ID of the parent frame (not set
+   *                                    for top level window)
+   */
+  _updateFrames: function (event, data) {
+    if (!Services.prefs.getBoolPref("devtools.command-button-frames.enabled")) {
+      return;
+    }
+
+    // We may receive this event before the toolbox is ready.
+    if (!this.isReady) {
+      return;
+    }
+
+    // Store (synchronize) data about all existing frames on the backend
+    if (data.destroyAll) {
+      this.frameMap.clear();
+      this.selectedFrameId = null;
+    } else if (data.selected) {
+      this.selectedFrameId = data.selected;
+    } else if (data.frames) {
+      data.frames.forEach(frame => {
+        if (frame.destroy) {
+          this.frameMap.delete(frame.id);
+
+          // Reset the currently selected frame if it's destroyed.
+          if (this.selectedFrameId == frame.id) {
+            this.selectedFrameId = null;
+          }
+        } else {
+          this.frameMap.set(frame.id, frame);
+        }
+      });
+    }
+
+    // If there is no selected frame select the first top level
+    // frame by default. Note that there might be more top level
+    // frames in case of the BrowserToolbox.
+    if (!this.selectedFrameId) {
+      let frames = [...this.frameMap.values()];
+      let topFrames = frames.filter(frame => !frame.parentID);
+      this.selectedFrameId = topFrames.length ? topFrames[0].id : null;
+    }
+
+    // Check out whether top frame is currently selected.
+    // Note that only child frame has parentID.
+    let frame = this.frameMap.get(this.selectedFrameId);
+    let topFrameSelected = frame ? !frame.parentID : false;
+    let button = this.doc.getElementById("command-button-frames");
+    button.removeAttribute("checked");
+
+    // If non-top level frame is selected the toolbar button is
+    // marked as 'checked' indicating that a child frame is active.
+    if (!topFrameSelected && this.selectedFrameId) {
+      button.setAttribute("checked", "true");
+    }
+  },
+
+  /**
+   * Switch to the last used host for the toolbox UI.
+   */
+  switchToPreviousHost: function () {
+    return this.switchHost("previous");
+  },
+
+  /**
+   * Switch to a new host for the toolbox UI. E.g. bottom, sidebar, window,
+   * and focus the window when done.
+   *
+   * @param {string} hostType
+   *        The host type of the new host object
+   */
+  switchHost: function (hostType) {
+    if (hostType == this.hostType || !this._target.isLocalTab) {
+      return null;
+    }
+
+    this.emit("host-will-change", hostType);
+
+    // ToolboxHostManager is going to call swapFrameLoaders which mess up with
+    // focus. We have to blur before calling it in order to be able to restore
+    // the focus after, in _onSwitchedHost.
+    this.focusTool(this.currentToolId, false);
+
+    // Host code on the chrome side will send back a message once the host
+    // switched
+    this.postMessage({
+      name: "switch-host",
+      hostType
+    });
+
+    return this.once("host-changed");
+  },
+
+  _onSwitchedHost: function ({ hostType }) {
+    this._hostType = hostType;
+
+    this._buildDockButtons();
+    this._addKeysToWindow();
+
+    // We blurred the tools at start of switchHost, but also when clicking on
+    // host switching button. We now have to restore the focus.
+    this.focusTool(this.currentToolId, true);
+
+    this.emit("host-changed");
+    this._telemetry.log(HOST_HISTOGRAM, this._getTelemetryHostId());
+  },
+
+  /**
+   * Return if the tool is available as a tab (i.e. if it's checked
+   * in the options panel). This is different from Toolbox.getPanel -
+   * a tool could be registered but not yet opened in which case
+   * isToolRegistered would return true but getPanel would return false.
+   */
+  isToolRegistered: function (toolId) {
+    return gDevTools.getToolDefinitionMap().has(toolId);
+  },
+
+  /**
+   * Handler for the tool-registered event.
+   * @param  {string} event
+   *         Name of the event ("tool-registered")
+   * @param  {string} toolId
+   *         Id of the tool that was registered
+   */
+  _toolRegistered: function (event, toolId) {
+    let tool = gDevTools.getToolDefinition(toolId);
+    this._buildTabForTool(tool);
+    // Emit the event so tools can listen to it from the toolbox level
+    // instead of gDevTools
+    this.emit("tool-registered", toolId);
+  },
+
+  /**
+   * Handler for the tool-unregistered event.
+   * @param  {string} event
+   *         Name of the event ("tool-unregistered")
+   * @param  {string|object} toolId
+   *         Definition or id of the tool that was unregistered. Passing the
+   *         tool id should be avoided as it is a temporary measure.
+   */
+  _toolUnregistered: function (event, toolId) {
+    if (typeof toolId != "string") {
+      toolId = toolId.id;
+    }
+
+    if (this._toolPanels.has(toolId)) {
+      let instance = this._toolPanels.get(toolId);
+      instance.destroy();
+      this._toolPanels.delete(toolId);
+    }
+
+    let radio = this.doc.getElementById("toolbox-tab-" + toolId);
+    let panel = this.doc.getElementById("toolbox-panel-" + toolId);
+
+    if (radio) {
+      if (this.currentToolId == toolId) {
+        let nextToolName = null;
+        if (radio.nextSibling) {
+          nextToolName = radio.nextSibling.getAttribute("toolid");
+        }
+        if (radio.previousSibling) {
+          nextToolName = radio.previousSibling.getAttribute("toolid");
+        }
+        if (nextToolName) {
+          this.selectTool(nextToolName);
+        }
+      }
+      radio.parentNode.removeChild(radio);
+    }
+
+    if (panel) {
+      panel.parentNode.removeChild(panel);
+    }
+
+    if (this.hostType == Toolbox.HostType.WINDOW) {
+      let doc = this.win.parent.document;
+      let key = doc.getElementById("key_" + toolId);
+      if (key) {
+        key.parentNode.removeChild(key);
+      }
+    }
+    // Emit the event so tools can listen to it from the toolbox level
+    // instead of gDevTools
+    this.emit("tool-unregistered", toolId);
+  },
+
+  /**
+   * Initialize the inspector/walker/selection/highlighter fronts.
+   * Returns a promise that resolves when the fronts are initialized
+   */
+  initInspector: function () {
+    if (!this._initInspector) {
+      this._initInspector = Task.spawn(function* () {
+        this._inspector = InspectorFront(this._target.client, this._target.form);
+        let pref = "devtools.inspector.showAllAnonymousContent";
+        let showAllAnonymousContent = Services.prefs.getBoolPref(pref);
+        this._walker = yield this._inspector.getWalker({ showAllAnonymousContent });
+        this._selection = new Selection(this._walker);
+
+        if (this.highlighterUtils.isRemoteHighlightable()) {
+          this.walker.on("highlighter-ready", this._highlighterReady);
+          this.walker.on("highlighter-hide", this._highlighterHidden);
+
+          let autohide = !flags.testing;
+          this._highlighter = yield this._inspector.getHighlighter(autohide);
+        }
+      }.bind(this));
+    }
+    return this._initInspector;
+  },
+
+  /**
+   * Destroy the inspector/walker/selection fronts
+   * Returns a promise that resolves when the fronts are destroyed
+   */
+  destroyInspector: function () {
+    if (this._destroyingInspector) {
+      return this._destroyingInspector;
+    }
+
+    this._destroyingInspector = Task.spawn(function* () {
+      if (!this._inspector) {
+        return;
+      }
+
+      // Releasing the walker (if it has been created)
+      // This can fail, but in any case, we want to continue destroying the
+      // inspector/highlighter/selection
+      // FF42+: Inspector actor starts managing Walker actor and auto destroy it.
+      if (this._walker && !this.walker.traits.autoReleased) {
+        try {
+          yield this._walker.release();
+        } catch (e) {
+          // Do nothing;
+        }
+      }
+
+      yield this.highlighterUtils.stopPicker();
+      yield this._inspector.destroy();
+      if (this._highlighter) {
+        // Note that if the toolbox is closed, this will work fine, but will fail
+        // in case the browser is closed and will trigger a noSuchActor message.
+        // We ignore the promise that |_hideBoxModel| returns, since we should still
+        // proceed with the rest of destruction if it fails.
+        // FF42+ now does the cleanup from the actor.
+        if (!this.highlighter.traits.autoHideOnDestroy) {
+          this.highlighterUtils.unhighlight();
+        }
+        yield this._highlighter.destroy();
+      }
+      if (this._selection) {
+        this._selection.destroy();
+      }
+
+      if (this.walker) {
+        this.walker.off("highlighter-ready", this._highlighterReady);
+        this.walker.off("highlighter-hide", this._highlighterHidden);
+      }
+
+      this._inspector = null;
+      this._highlighter = null;
+      this._selection = null;
+      this._walker = null;
+    }.bind(this));
+    return this._destroyingInspector;
+  },
+
+  /**
+   * Get the toolbox's notification component
+   *
+   * @return The notification box component.
+   */
+  getNotificationBox: function () {
+    return this.notificationBox;
+  },
+
+  /**
+   * Remove all UI elements, detach from target and clear up
+   */
+  destroy: function () {
+    // If several things call destroy then we give them all the same
+    // destruction promise so we're sure to destroy only once
+    if (this._destroyer) {
+      return this._destroyer;
+    }
+    let deferred = defer();
+    this._destroyer = deferred.promise;
+
+    this.emit("destroy");
+
+    this._target.off("navigate", this._refreshHostTitle);
+    this._target.off("frame-update", this._updateFrames);
+    this.off("select", this._refreshHostTitle);
+    this.off("host-changed", this._refreshHostTitle);
+    this.off("ready", this._showDevEditionPromo);
+
+    gDevTools.off("tool-registered", this._toolRegistered);
+    gDevTools.off("tool-unregistered", this._toolUnregistered);
+
+    gDevTools.off("pref-changed", this._prefChanged);
+
+    this._lastFocusedElement = null;
+    if (this._sourceMapService) {
+      this._sourceMapService.destroy();
+      this._sourceMapService = null;
+    }
+
+    if (this.webconsolePanel) {
+      this._saveSplitConsoleHeight();
+      this.webconsolePanel.removeEventListener("resize",
+        this._saveSplitConsoleHeight);
+      this.webconsolePanel = null;
+    }
+    if (this.closeButton) {
+      this.closeButton.removeEventListener("click", this.destroy, true);
+      this.closeButton = null;
+    }
+    if (this.textBoxContextMenuPopup) {
+      this.textBoxContextMenuPopup.removeEventListener("popupshowing",
+        this._updateTextBoxMenuItems, true);
+      this.textBoxContextMenuPopup = null;
+    }
+    if (this.tabbar) {
+      this.tabbar.removeEventListener("focus", this._onTabbarFocus, true);
+      this.tabbar.removeEventListener("click", this._onTabbarFocus, true);
+      this.tabbar.removeEventListener("keypress", this._onTabbarArrowKeypress);
+      this.tabbar = null;
+    }
+
+    let outstanding = [];
+    for (let [id, panel] of this._toolPanels) {
+      try {
+        gDevTools.emit(id + "-destroy", this, panel);
+        this.emit(id + "-destroy", panel);
+
+        outstanding.push(panel.destroy());
+      } catch (e) {
+        // We don't want to stop here if any panel fail to close.
+        console.error("Panel " + id + ":", e);
+      }
+    }
+
+    this.browserRequire = null;
+
+    // Now that we are closing the toolbox we can re-enable the cache settings
+    // and disable the service workers testing settings for the current tab.
+    // FF41+ automatically cleans up state in actor on disconnect.
+    if (this.target.activeTab && !this.target.activeTab.traits.noTabReconfigureOnClose) {
+      this.target.activeTab.reconfigure({
+        "cacheDisabled": false,
+        "serviceWorkersTestingEnabled": false
+      });
+    }
+
+    // Destroying the walker and inspector fronts
+    outstanding.push(this.destroyInspector().then(() => {
+      // Removing buttons
+      if (this._pickerButton) {
+        this._pickerButton.removeEventListener("click", this._togglePicker, false);
+        this._pickerButton = null;
+      }
+    }));
+
+    // Destroy the profiler connection
+    outstanding.push(this.destroyPerformance());
+
+    // Detach the thread
+    detachThread(this._threadClient);
+    this._threadClient = null;
+
+    // We need to grab a reference to win before this._host is destroyed.
+    let win = this.win;
+
+    if (this._requisition) {
+      CommandUtils.destroyRequisition(this._requisition, this.target);
+    }
+    this._telemetry.toolClosed("toolbox");
+    this._telemetry.destroy();
+
+    // Finish all outstanding tasks (which means finish destroying panels and
+    // then destroying the host, successfully or not) before destroying the
+    // target.
+    deferred.resolve(settleAll(outstanding)
+        .catch(console.error)
+        .then(() => {
+          this._removeHostListeners();
+
+          // `location` may already be null if the toolbox document is already
+          // in process of destruction. Otherwise if it is still around, ensure
+          // releasing toolbox document and triggering cleanup thanks to unload
+          // event. We do that precisely here, before nullifying the target as
+          // various cleanup code depends on the target attribute to be still
+          // defined.
+          if (win.location) {
+            win.location.replace("about:blank");
+          }
+
+          // Targets need to be notified that the toolbox is being torn down.
+          // This is done after other destruction tasks since it may tear down
+          // fronts and the debugger transport which earlier destroy methods may
+          // require to complete.
+          if (!this._target) {
+            return null;
+          }
+          let target = this._target;
+          this._target = null;
+          this.highlighterUtils.release();
+          target.off("close", this.destroy);
+          return target.destroy();
+        }, console.error).then(() => {
+          this.emit("destroyed");
+
+          // Free _host after the call to destroyed in order to let a chance
+          // to destroyed listeners to still query toolbox attributes
+          this._host = null;
+          this._win = null;
+          this._toolPanels.clear();
+
+          // Force GC to prevent long GC pauses when running tests and to free up
+          // memory in general when the toolbox is closed.
+          if (flags.testing) {
+            win.QueryInterface(Ci.nsIInterfaceRequestor)
+              .getInterface(Ci.nsIDOMWindowUtils)
+              .garbageCollect();
+          }
+        }).then(null, console.error));
+
+    let leakCheckObserver = ({wrappedJSObject: barrier}) => {
+      // Make the leak detector wait until this toolbox is properly destroyed.
+      barrier.client.addBlocker("DevTools: Wait until toolbox is destroyed",
+                                this._destroyer);
+    };
+
+    let topic = "shutdown-leaks-before-check";
+    Services.obs.addObserver(leakCheckObserver, topic, false);
+    this._destroyer.then(() => {
+      Services.obs.removeObserver(leakCheckObserver, topic);
+    });
+
+    return this._destroyer;
+  },
+
+  _highlighterReady: function () {
+    this.emit("highlighter-ready");
+  },
+
+  _highlighterHidden: function () {
+    this.emit("highlighter-hide");
+  },
+
+  /**
+   * For displaying the promotional Doorhanger on first opening of
+   * the developer tools, promoting the Developer Edition.
+   */
+  _showDevEditionPromo: function () {
+    // Do not display in browser toolbox
+    if (this.target.chrome) {
+      return;
+    }
+    showDoorhanger({ window: this.win, type: "deveditionpromo" });
+  },
+
+  /**
+   * Enable / disable necessary textbox menu items using globalOverlay.js.
+   */
+  _updateTextBoxMenuItems: function () {
+    let window = this.win;
+    ["cmd_undo", "cmd_delete", "cmd_cut",
+     "cmd_copy", "cmd_paste", "cmd_selectAll"].forEach(window.goUpdateCommand);
+  },
+
+  /**
+   * Open the textbox context menu at given coordinates.
+   * Panels in the toolbox can call this on contextmenu events with event.screenX/Y
+   * instead of having to implement their own copy/paste/selectAll menu.
+   * @param {Number} x
+   * @param {Number} y
+   */
+  openTextBoxContextMenu: function (x, y) {
+    this.textBoxContextMenuPopup.openPopupAtScreen(x, y, true);
+  },
+
+  /**
+   * Connects to the SPS profiler when the developer tools are open. This is
+   * necessary because of the WebConsole's `profile` and `profileEnd` methods.
+   */
+  initPerformance: Task.async(function* () {
+    // If target does not have profiler actor (addons), do not
+    // even register the shared performance connection.
+    if (!this.target.hasActor("profiler")) {
+      return promise.resolve();
+    }
+
+    if (this._performanceFrontConnection) {
+      return this._performanceFrontConnection.promise;
+    }
+
+    this._performanceFrontConnection = defer();
+    this._performance = createPerformanceFront(this._target);
+    yield this.performance.connect();
+
+    // Emit an event when connected, but don't wait on startup for this.
+    this.emit("profiler-connected");
+
+    this.performance.on("*", this._onPerformanceFrontEvent);
+    this._performanceFrontConnection.resolve(this.performance);
+    return this._performanceFrontConnection.promise;
+  }),
+
+  /**
+   * Disconnects the underlying Performance actor. If the connection
+   * has not finished initializing, as opening a toolbox does not wait,
+   * the performance connection destroy method will wait for it on its own.
+   */
+  destroyPerformance: Task.async(function* () {
+    if (!this.performance) {
+      return;
+    }
+    // If still connecting to performance actor, allow the
+    // actor to resolve its connection before attempting to destroy.
+    if (this._performanceFrontConnection) {
+      yield this._performanceFrontConnection.promise;
+    }
+    this.performance.off("*", this._onPerformanceFrontEvent);
+    yield this.performance.destroy();
+    this._performance = null;
+  }),
+
+  /**
+   * Called when any event comes from the PerformanceFront. If the performance tool is
+   * already loaded when the first event comes in, immediately unbind this handler, as
+   * this is only used to queue up observed recordings before the performance tool can
+   * handle them, which will only occur when `console.profile()` recordings are started
+   * before the tool loads.
+   */
+  _onPerformanceFrontEvent: Task.async(function* (eventName, recording) {
+    if (this.getPanel("performance")) {
+      this.performance.off("*", this._onPerformanceFrontEvent);
+      return;
+    }
+
+    this._performanceQueuedRecordings = this._performanceQueuedRecordings || [];
+    let recordings = this._performanceQueuedRecordings;
+
+    // Before any console recordings, we'll get a `console-profile-start` event
+    // warning us that a recording will come later (via `recording-started`), so
+    // start to boot up the tool and populate the tool with any other recordings
+    // observed during that time.
+    if (eventName === "console-profile-start" && !this._performanceToolOpenedViaConsole) {
+      this._performanceToolOpenedViaConsole = this.loadTool("performance");
+      let panel = yield this._performanceToolOpenedViaConsole;
+      yield panel.open();
+
+      panel.panelWin.PerformanceController.populateWithRecordings(recordings);
+      this.performance.off("*", this._onPerformanceFrontEvent);
+    }
+
+    // Otherwise, if it's a recording-started event, we've already started loading
+    // the tool, so just store this recording in our array to be later populated
+    // once the tool loads.
+    if (eventName === "recording-started") {
+      recordings.push(recording);
+    }
+  }),
+
+  /**
+   * Returns gViewSourceUtils for viewing source.
+   */
+  get gViewSourceUtils() {
+    return this.win.gViewSourceUtils;
+  },
+
+  /**
+   * Opens source in style editor. Falls back to plain "view-source:".
+   * @see devtools/client/shared/source-utils.js
+   */
+  viewSourceInStyleEditor: function (sourceURL, sourceLine) {
+    return viewSource.viewSourceInStyleEditor(this, sourceURL, sourceLine);
+  },
+
+  /**
+   * Opens source in debugger. Falls back to plain "view-source:".
+   * @see devtools/client/shared/source-utils.js
+   */
+  viewSourceInDebugger: function (sourceURL, sourceLine) {
+    return viewSource.viewSourceInDebugger(this, sourceURL, sourceLine);
+  },
+
+  /**
+   * Opens source in scratchpad. Falls back to plain "view-source:".
+   * TODO The `sourceURL` for scratchpad instances are like `Scratchpad/1`.
+   * If instances are scoped one-per-browser-window, then we should be able
+   * to infer the URL from this toolbox, or use the built in scratchpad IN
+   * the toolbox.
+   *
+   * @see devtools/client/shared/source-utils.js
+   */
+  viewSourceInScratchpad: function (sourceURL, sourceLine) {
+    return viewSource.viewSourceInScratchpad(sourceURL, sourceLine);
+  },
+
+  /**
+   * Opens source in plain "view-source:".
+   * @see devtools/client/shared/source-utils.js
+   */
+  viewSource: function (sourceURL, sourceLine) {
+    return viewSource.viewSource(this, sourceURL, sourceLine);
+  },
+};
diff --git a/devtools/client/framework/toolbox.xul b/devtools/client/framework/toolbox.xul
new file mode 100644
index 000000000..94aaecebd
--- /dev/null
+++ b/devtools/client/framework/toolbox.xul
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/toolbox.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/components/notification-box.css" type="text/css"?>
+
+<?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
+
+<!DOCTYPE window [
+<!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
+%toolboxDTD;
+<!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
+%editMenuStrings;
+<!ENTITY % globalKeysDTD SYSTEM "chrome://global/locale/globalKeys.dtd">
+%globalKeysDTD;
+]>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <script type="application/javascript;version=1.8"
+          src="chrome://devtools/content/shared/theme-switching.js"/>
+  <script type="application/javascript"
+          src="chrome://global/content/viewSourceUtils.js"/>
+
+  <script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
+  <script type="application/javascript;version=1.8"
+          src="chrome://devtools/content/framework/toolbox-init.js"/>
+
+  <commandset id="editMenuCommands"/>
+  <keyset id="editMenuKeys"/>
+
+  <popupset>
+    <menupopup id="toolbox-textbox-context-popup">
+      <menuitem id="cMenu_undo"/>
+      <menuseparator/>
+      <menuitem id="cMenu_cut"/>
+      <menuitem id="cMenu_copy"/>
+      <menuitem id="cMenu_paste"/>
+      <menuitem id="cMenu_delete"/>
+      <menuseparator/>
+      <menuitem id="cMenu_selectAll"/>
+    </menupopup>
+  </popupset>
+
+  <vbox id="toolbox-container" flex="1">
+    <div xmlns="http://www.w3.org/1999/xhtml" id="toolbox-notificationbox"/>
+    <toolbar class="devtools-tabbar">
+      <hbox id="toolbox-picker-container" />
+      <hbox id="toolbox-tabs" flex="1" role="tablist" />
+      <hbox id="toolbox-buttons" pack="end">
+        <html:button id="command-button-frames"
+                     class="command-button command-button-invertable devtools-button"
+                     title="&toolboxFramesTooltip;"
+                     hidden="true" />
+        <html:button id="command-button-noautohide"
+                     class="command-button command-button-invertable devtools-button"
+                     title="&toolboxNoAutoHideTooltip;"
+                     hidden="true" />
+      </hbox>
+      <vbox id="toolbox-controls-separator" class="devtools-separator"/>
+      <hbox id="toolbox-option-container"/>
+      <hbox id="toolbox-controls">
+        <hbox id="toolbox-dock-buttons"/>
+        <html:button id="toolbox-close"
+                     class="devtools-button"
+                     title="&toolboxCloseButton.tooltip;"/>
+      </hbox>
+    </toolbar>
+    <vbox flex="1" class="theme-body">
+      <!-- Set large flex to allow the toolbox-panel-webconsole to have a
+           height set to a small value without flexing to fill up extra
+           space. There must be a flex on both to ensure that the console
+           panel itself is sized properly -->
+      <box id="toolbox-deck" flex="1000" minheight="75" />
+      <splitter id="toolbox-console-splitter" class="devtools-horizontal-splitter" hidden="true" />
+      <box minheight="75" flex="1" id="toolbox-panel-webconsole" collapsed="true" />
+    </vbox>
+    <tooltip id="aHTMLTooltip" page="true" />
+  </vbox>
+</window>