The Tor Browser: browser/devtools/framework/toolbox.js@6474c204b198 (annotated)

browser/devtools/framework/toolbox.js@6474c204b198 (annotated)

browser/devtools/framework/toolbox.js

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

 /* 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 ZOOM_PREF = "devtools.toolbox.zoomValue";
 const MIN_ZOOM = 0.5;
 const MAX_ZOOM = 2;
 let {Cc, Ci, Cu} = require("chrome");
 let {Promise: promise} = require("resource://gre/modules/Promise.jsm");
 let EventEmitter = require("devtools/toolkit/event-emitter");
 let Telemetry = require("devtools/shared/telemetry");
 let HUDService = require("devtools/webconsole/hudservice");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource:///modules/devtools/gDevTools.jsm");
 Cu.import("resource:///modules/devtools/scratchpad-manager.jsm");
 Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
 Cu.import("resource://gre/modules/Task.jsm");
 loader.lazyGetter(this, "Hosts", () => require("devtools/framework/toolbox-hosts").Hosts);
 loader.lazyImporter(this, "CommandUtils", "resource:///modules/devtools/DeveloperToolbar.jsm");
 loader.lazyGetter(this, "toolboxStrings", () => {
   let bundle = Services.strings.createBundle("chrome://browser/locale/devtools/toolbox.properties");
   return (name, ...args) => {
     try {
       if (!args.length) {
         return bundle.GetStringFromName(name);
       }
       return bundle.formatStringFromName(name, args, args.length);
     } catch (ex) {
       Services.console.logStringMessage("Error reading '" + name + "'");
       return null;
     }
   };
 });
 loader.lazyGetter(this, "Selection", () => require("devtools/framework/selection").Selection);
 loader.lazyGetter(this, "InspectorFront", () => require("devtools/server/actors/inspector").InspectorFront);
 /**
  * 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 {object} hostOptions
  *        Options for host specifically
  */
 function Toolbox(target, selectedTool, hostType, hostOptions) {
   this._target = target;
   this._toolPanels = new Map();
   this._telemetry = new Telemetry();
   this._toolRegistered = this._toolRegistered.bind(this);
   this._toolUnregistered = this._toolUnregistered.bind(this);
   this._refreshHostTitle = this._refreshHostTitle.bind(this);
   this._splitConsoleOnKeypress = this._splitConsoleOnKeypress.bind(this)
   this.destroy = this.destroy.bind(this);
   this.highlighterUtils = new ToolboxHighlighterUtils(this);
   this._highlighterReady = this._highlighterReady.bind(this);
   this._highlighterHidden = this._highlighterHidden.bind(this);
   this._target.on("close", this.destroy);
   if (!hostType) {
     hostType = Services.prefs.getCharPref(this._prefs.LAST_HOST);
   }
   if (!selectedTool) {
     selectedTool = Services.prefs.getCharPref(this._prefs.LAST_TOOL);
   }
   if (!gDevTools.getToolDefinition(selectedTool)) {
     selectedTool = "webconsole";
   }
   this._defaultToolId = selectedTool;
   this._host = this._createHost(hostType, hostOptions);
   EventEmitter.decorate(this);
   this._target.on("navigate", this._refreshHostTitle);
   this.on("host-changed", this._refreshHostTitle);
   this.on("select", this._refreshHostTitle);
   gDevTools.on("tool-registered", this._toolRegistered);
   gDevTools.on("tool-unregistered", this._toolUnregistered);
 }
 exports.Toolbox = Toolbox;
 /**
  * The toolbox can be 'hosted' either embedded in a browser window
  * or in a separate window.
  */
 Toolbox.HostType = {
   BOTTOM: "bottom",
   SIDE: "side",
   WINDOW: "window",
   CUSTOM: "custom"
 };
 Toolbox.prototype = {
   _URL: "chrome://browser/content/devtools/framework/toolbox.xul",
   _prefs: {
     LAST_HOST: "devtools.toolbox.host",
     LAST_TOOL: "devtools.toolbox.selectedTool",
     SIDE_ENABLED: "devtools.toolbox.sideEnabled"
   },
   currentToolId: 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);
   },
   /**
    * 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/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._host.type;
   },
   /**
    * Get the iframe containing the toolbox UI.
    */
   get frame() {
     return this._host.frame;
   },
   /**
    * Shortcut to the document containing the toolbox UI
    */
   get doc() {
     return this.frame.contentDocument;
   },
   /**
    * Get current zoom level of toolbox
    */
   get zoomValue() {
     return parseFloat(Services.prefs.getCharPref(ZOOM_PREF));
   },
   /**
    * Get the toolbox highlighter front. Note that it may not always have been
    * initialized first. Use `initInspector()` if needed.
    */
   get highlighter() {
     if (this.highlighterUtils.isRemoteHighlightable) {
       return this._highlighter;
     } else {
       return null;
     }
   },
   /**
    * 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;
   },
   /**
    * Open the toolbox
    */
   open: function() {
     let deferred = promise.defer();
     return this._host.create().then(iframe => {
       let deferred = promise.defer();
       let domReady = () => {
         this.isReady = true;
         let closeButton = this.doc.getElementById("toolbox-close");
         closeButton.addEventListener("command", this.destroy, true);
         this._buildDockButtons();
         this._buildOptions();
         this._buildTabs();
         this._buildButtons();
         this._addKeysToWindow();
         this._addToolSwitchingKeys();
         this._addZoomKeys();
         this._loadInitialZoom();
         this._telemetry.toolOpened("toolbox");
         this.selectTool(this._defaultToolId).then(panel => {
           this.emit("ready");
           deferred.resolve();
         });
       };
       // Load the toolbox-level actor fronts and utilities now
       this._target.makeRemote().then(() => {
         iframe.setAttribute("src", this._URL);
         let domHelper = new DOMHelpers(iframe.contentWindow);
         domHelper.onceDOMReady(domReady);
       });
       return deferred.promise;
     });
   },
   _buildOptions: function() {
     let key = this.doc.getElementById("toolbox-options-key");
     key.addEventListener("command", () => {
       this.selectTool("options");
     }, true);
   },
   _isResponsiveModeActive: function() {
     let responsiveModeActive = false;
     if (this.target.isLocalTab) {
       let tab = this.target.tab;
       let browserWindow = tab.ownerDocument.defaultView;
       let responsiveUIManager = browserWindow.ResponsiveUI.ResponsiveUIManager;
       responsiveModeActive = responsiveUIManager.isActiveForTab(tab);
     }
     return responsiveModeActive;
   },
   _splitConsoleOnKeypress: function(e) {
     let responsiveModeActive = this._isResponsiveModeActive();
     if (e.keyCode === e.DOM_VK_ESCAPE && !responsiveModeActive) {
       this.toggleSplitConsole();
     }
   },
   _addToolSwitchingKeys: function() {
     let nextKey = this.doc.getElementById("toolbox-next-tool-key");
     nextKey.addEventListener("command", this.selectNextTool.bind(this), true);
     let prevKey = this.doc.getElementById("toolbox-previous-tool-key");
     prevKey.addEventListener("command", this.selectPreviousTool.bind(this), true);
     // Split console uses keypress instead of command so the event can be
     // cancelled with stopPropagation on the keypress, and not preventDefault.
     this.doc.addEventListener("keypress", this._splitConsoleOnKeypress, false);
   },
   /**
    * 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.doc.getElementById("toolbox-panel-webconsole");
     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");
       }
     }
   },
   /**
    * Wire up the listeners for the zoom keys.
    */
   _addZoomKeys: function() {
     let inKey = this.doc.getElementById("toolbox-zoom-in-key");
     inKey.addEventListener("command", this.zoomIn.bind(this), true);
     let inKey2 = this.doc.getElementById("toolbox-zoom-in-key2");
     inKey2.addEventListener("command", this.zoomIn.bind(this), true);
     let outKey = this.doc.getElementById("toolbox-zoom-out-key");
     outKey.addEventListener("command", this.zoomOut.bind(this), true);
     let resetKey = this.doc.getElementById("toolbox-zoom-reset-key");
     resetKey.addEventListener("command", this.zoomReset.bind(this), true);
   },
   /**
    * Set zoom on toolbox to whatever the last setting was.
    */
   _loadInitialZoom: function() {
     this.setZoom(this.zoomValue);
   },
   /**
    * Increase zoom level of toolbox window - make things bigger.
    */
   zoomIn: function() {
     this.setZoom(this.zoomValue + 0.1);
   },
   /**
    * Decrease zoom level of toolbox window - make things smaller.
    */
   zoomOut: function() {
     this.setZoom(this.zoomValue - 0.1);
   },
   /**
    * Reset zoom level of the toolbox window.
    */
   zoomReset: function() {
     this.setZoom(1);
   },
   /**
    * Set zoom level of the toolbox window.
    *
    * @param {number} zoomValue
    *        Zoom level e.g. 1.2
    */
   setZoom: function(zoomValue) {
     // cap zoom value
     zoomValue = Math.max(zoomValue, MIN_ZOOM);
     zoomValue = Math.min(zoomValue, MAX_ZOOM);
     let contViewer = this.frame.docShell.contentViewer;
     let docViewer = contViewer.QueryInterface(Ci.nsIMarkupDocumentViewer);
     docViewer.fullZoom = zoomValue;
     Services.prefs.setCharPref(ZOOM_PREF, zoomValue);
   },
   /**
    * Adds the keys and commands to the Toolbox Window in window mode.
    */
   _addKeysToWindow: function() {
     if (this.hostType != Toolbox.HostType.WINDOW) {
       return;
     }
     let doc = this.doc.defaultView.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);
       key.setAttribute("oncommand", "void(0);"); // needed. See bug 371900
       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", toolboxStrings("browserConsoleCmd.commandkey"));
       key.setAttribute("modifiers", "accel,shift");
       key.setAttribute("oncommand", "void(0)"); // needed. See bug 371900
       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 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;
     }
     let closeButton = this.doc.getElementById("toolbox-close");
     if (this.hostType == Toolbox.HostType.WINDOW) {
       closeButton.setAttribute("hidden", "true");
     } else {
       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.createElement("toolbarbutton");
       button.id = "toolbox-dock-" + position;
       button.className = "toolbox-dock-button";
       button.setAttribute("tooltiptext", toolboxStrings("toolboxDockButtons." +
                                                         position + ".tooltip"));
       button.addEventListener("command", () => {
         this.switchHost(position);
       });
       dockBox.appendChild(button);
     }
   },
   /**
    * Add tabs to the toolbox UI for registered tools
    */
   _buildTabs: function() {
     for (let definition of gDevTools.getToolDefinitionArray()) {
       this._buildTabForTool(definition);
     }
   },
   /**
    * Add buttons to the UI as specified in the devtools.toolbox.toolbarSpec pref
    */
   _buildButtons: function() {
     this._buildPickerButton();
     if (!this.target.isLocalTab) {
       return;
     }
     let spec = CommandUtils.getCommandbarSpec("devtools.toolbox.toolbarSpec");
     let environment = CommandUtils.createEnvironment(this, '_target');
     this._requisition = CommandUtils.createRequisition(environment);
     let buttons = CommandUtils.createButtons(spec, this._target,
                                              this.doc, this._requisition);
     let container = this.doc.getElementById("toolbox-buttons");
     buttons.forEach(container.appendChild.bind(container));
     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.createElement("toolbarbutton");
     this._pickerButton.id = "command-button-pick";
     this._pickerButton.className = "command-button command-button-invertable";
     this._pickerButton.setAttribute("tooltiptext", toolboxStrings("pickButton.tooltip"));
     let container = this.doc.querySelector("#toolbox-buttons");
     container.appendChild(this._pickerButton);
     this._togglePicker = this.highlighterUtils.togglePicker.bind(this.highlighterUtils);
     this._pickerButton.addEventListener("command", this._togglePicker, false);
   },
   /**
    * Return all toolbox buttons (command buttons, plus any others that were
    * added manually).
    */
   get toolboxButtons() {
     // White-list buttons that can be toggled to prevent adding prefs for
     // addons that have manually inserted toolbarbuttons into DOM.
     return [
       "command-button-pick",
       "command-button-splitconsole",
       "command-button-responsive",
       "command-button-paintflashing",
       "command-button-tilt",
       "command-button-scratchpad",
       "command-button-eyedropper"
     ].map(id => {
       let button = this.doc.getElementById(id);
       // Some buttons may not exist inside of Browser Toolbox
       if (!button) {
         return false;
       }
       return {
         id: id,
         button: button,
         label: button.getAttribute("tooltiptext"),
         visibilityswitch: "devtools." + id + ".enabled"
       }
     }).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, id, button}=buttonSpec;
       let on = true;
       try {
         on = Services.prefs.getBoolPref(visibilityswitch);
       } catch (ex) { }
       if (button) {
         if (on) {
           button.removeAttribute("hidden");
         } else {
           button.setAttribute("hidden", "true");
         }
       }
     });
   },
   /**
    * 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("ordinal", toolDefinition.ordinal);
     radio.setAttribute("tooltiptext", toolDefinition.tooltip);
     if (toolDefinition.invertIconForLightTheme) {
       radio.setAttribute("icon-invertable", "true");
     }
     radio.addEventListener("command", () => {
       this.selectTool(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) {
       let label = this.doc.createElement("label");
       label.setAttribute("value", toolDefinition.label)
       label.setAttribute("crop", "end");
       label.setAttribute("flex", "1");
       radio.appendChild(label);
       radio.setAttribute("flex", "1");
     }
     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 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 = promise.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", panel => {
           deferred.resolve(panel);
         });
       }
       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";
     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";
       let built = definition.build(iframe.contentWindow, this);
       promise.resolve(built).then((panel) => {
         this._toolPanels.set(id, panel);
         this.emit(id + "-ready", panel);
         gDevTools.emit(id + "-ready", this, panel);
         deferred.resolve(panel);
       }, console.error);
     };
     iframe.setAttribute("src", definition.url);
     // 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;
   },
   /**
    * Switch to the tool with the given id
    *
    * @param {string} id
    *        The id of the tool to switch to
    */
   selectTool: function(id) {
     let selected = this.doc.querySelector(".devtools-tab[selected]");
     if (selected) {
       selected.removeAttribute("selected");
     }
     let tab = this.doc.getElementById("toolbox-tab-" + id);
     tab.setAttribute("selected", "true");
     if (this.currentToolId == id) {
       // 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(this._toolPanels.get(id));
     }
     if (!this.isReady) {
       throw new Error("Can't select tool, wait for toolbox 'ready' event");
     }
     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
     let index = 0;
     let tabs = tabstrip.childNodes;
     for (let i = 0; i < tabs.length; i++) {
       if (tabs[i] === tab) {
         index = i;
         break;
       }
     }
     tabstrip.selectedItem = tab;
     // and select the right iframe
     let deck = this.doc.getElementById("toolbox-deck");
     deck.selectedIndex = index;
     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) {
     let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
     iframe.focus();
   },
   /**
    * Focus split console's input line
    */
   focusConsoleInput: function() {
     let hud = this.getPanel("webconsole").hud;
     if (hud && hud.jsterm) {
       hud.jsterm.inputNode.focus();
     }
   },
   /**
    * Toggles the split state of the webconsole.  If the webconsole panel
    * is already selected, then this command is ignored.
    */
   toggleSplitConsole: function() {
     let openedConsolePanel = this.currentToolId === "webconsole";
     // Don't allow changes when console is open, since it could be confusing
     if (!openedConsolePanel) {
       this._splitConsole = !this._splitConsole;
       this._refreshConsoleDisplay();
       this.emit("split-console");
       if (this._splitConsole) {
         this.loadTool("webconsole").then(() => {
           this.focusConsoleInput();
         });
       }
     }
   },
   /**
    * Loads the tool next to the currently selected tool.
    */
   selectNextTool: function() {
     let selected = this.doc.querySelector(".devtools-tab[selected]");
     let next = selected.nextSibling || selected.parentNode.firstChild;
     let tool = next.getAttribute("toolid");
     return this.selectTool(tool);
   },
   /**
    * Loads the tool just left to the currently selected tool.
    */
   selectPreviousTool: function() {
     let selected = this.doc.querySelector(".devtools-tab[selected]");
     let previous = selected.previousSibling || selected.parentNode.lastChild;
     let tool = previous.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._host.raise();
   },
   /**
    * Refresh the host's title.
    */
   _refreshHostTitle: function() {
     let toolName;
     let toolDef = gDevTools.getToolDefinition(this.currentToolId);
     if (toolDef) {
       toolName = toolDef.label;
     } else {
       // no tool is selected
       toolName = toolboxStrings("toolbox.defaultTitle");
     }
     let title = toolboxStrings("toolbox.titleTemplate",
                                toolName, this.target.url || this.target.name);
     this._host.setTitle(title);
   },
   /**
    * Create a host object based on the given host type.
    *
    * Warning: some 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: function(hostType, options) {
     if (!Hosts[hostType]) {
       throw new Error("Unknown hostType: " + hostType);
     }
     // clean up the toolbox if its window is closed
     let newHost = new Hosts[hostType](this.target.tab, options);
     newHost.on("window-closed", this.destroy);
     return newHost;
   },
   /**
    * Switch to a new host for the toolbox UI. E.g.
    * bottom, sidebar, separate window.
    *
    * @param {string} hostType
    *        The host type of the new host object
    */
   switchHost: function(hostType) {
     if (hostType == this._host.type || !this._target.isLocalTab) {
       return null;
     }
     let newHost = this._createHost(hostType);
     return newHost.create().then(iframe => {
       // change toolbox document's parent to the new host
       iframe.QueryInterface(Ci.nsIFrameLoaderOwner);
       iframe.swapFrameLoaders(this.frame);
       this._host.off("window-closed", this.destroy);
       this.destroyHost();
       this._host = newHost;
       if (this.hostType != Toolbox.HostType.CUSTOM) {
         Services.prefs.setCharPref(this._prefs.LAST_HOST, this._host.type);
       }
       this._buildDockButtons();
       this._addKeysToWindow();
       this.emit("host-changed");
     });
   },
   /**
    * 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);
   },
   /**
    * 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.doc.defaultView.parent.document;
       let key = doc.getElementById("key_" + toolId);
       if (key) {
         key.parentNode.removeChild(key);
       }
     }
   },
   /**
    * 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);
         this._walker = yield this._inspector.getWalker();
         this._selection = new Selection(this._walker);
         if (this.highlighterUtils.isRemoteHighlightable) {
           let autohide = !gDevTools.testing;
           this.walker.on("highlighter-ready", this._highlighterReady);
           this.walker.on("highlighter-hide", this._highlighterHidden);
           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._destroying) {
       return this._destroying;
     }
     if (!this._inspector) {
       return promise.resolve();
     }
     let outstanding = () => {
       return Task.spawn(function*() {
         yield this.highlighterUtils.stopPicker();
         yield this._inspector.destroy();
         if (this._highlighter) {
           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));
     };
     // Releasing the walker (if it has been created)
     // This can fail, but in any case, we want to continue destroying the
     // inspector/highlighter/selection
     let walker = (this._destroying = this._walker) ?
                  this._walker.release() :
                  promise.resolve();
     return walker.then(outstanding, outstanding);
   },
   /**
    * Get the toolbox's notification box
    *
    * @return The notification box element.
    */
   getNotificationBox: function() {
     return this.doc.getElementById("toolbox-notificationbox");
   },
   /**
    * Destroy the current host, and remove event listeners from its frame.
    *
    * @return {promise} to be resolved when the host is destroyed.
    */
   destroyHost: function() {
     this.doc.removeEventListener("keypress",
       this._splitConsoleOnKeypress, false);
     return this._host.destroy();
   },
   /**
    * 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;
     }
     this._target.off("navigate", this._refreshHostTitle);
     this.off("select", this._refreshHostTitle);
     this.off("host-changed", this._refreshHostTitle);
     gDevTools.off("tool-registered", this._toolRegistered);
     gDevTools.off("tool-unregistered", this._toolUnregistered);
     let outstanding = [];
     for (let [id, panel] of this._toolPanels) {
       try {
         outstanding.push(panel.destroy());
       } catch (e) {
         // We don't want to stop here if any panel fail to close.
         console.error("Panel " + id + ":", e);
       }
     }
     // Destroying the walker and inspector fronts
     outstanding.push(this.destroyInspector());
     // Removing buttons
     outstanding.push(() => {
       this._pickerButton.removeEventListener("command", this._togglePicker, false);
       this._pickerButton = null;
       let container = this.doc.getElementById("toolbox-buttons");
       while (container.firstChild) {
         container.removeChild(container.firstChild);
       }
     });
     // Remove the host UI
     outstanding.push(this.destroyHost());
     if (this.target.isLocalTab) {
       this._requisition.destroy();
     }
     this._telemetry.destroy();
     return this._destroyer = promise.all(outstanding).then(() => {
       // 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;
       target.off("close", this.destroy);
       return target.destroy();
     }).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._toolPanels.clear();
     }).then(null, console.error);
   },
   _highlighterReady: function() {
     this.emit("highlighter-ready");
   },
   _highlighterHidden: function() {
     this.emit("highlighter-hide");
   },
 };
 /**
  * The ToolboxHighlighterUtils is what you should use for anything related to
  * node highlighting and picking.
  * It encapsulates the logic to connecting to the HighlighterActor.
  */
 function ToolboxHighlighterUtils(toolbox) {
   this.toolbox = toolbox;
   this._onPickerNodeHovered = this._onPickerNodeHovered.bind(this);
   this._onPickerNodePicked = this._onPickerNodePicked.bind(this);
   this.stopPicker = this.stopPicker.bind(this);
 }
 ToolboxHighlighterUtils.prototype = {
   /**
    * Indicates whether the highlighter actor exists on the server.
    */
   get isRemoteHighlightable() {
     return this.toolbox._target.client.traits.highlightable;
   },
   /**
    * Start/stop the element picker on the debuggee target.
    */
   togglePicker: function() {
     if (this._isPicking) {
       return this.stopPicker();
     } else {
       return this.startPicker();
     }
   },
   _onPickerNodeHovered: function(res) {
     this.toolbox.emit("picker-node-hovered", res.node);
   },
   _onPickerNodePicked: function(res) {
     this.toolbox.selection.setNodeFront(res.node, "picker-node-picked");
     this.stopPicker();
   },
   /**
    * Start the element picker on the debuggee target.
    * This will request the inspector actor to start listening for mouse/touch
    * events on the target to highlight the hovered/picked element.
    * Depending on the server-side capabilities, this may fire events when nodes
    * are hovered.
    * @return A promise that resolves when the picker has started or immediately
    * if it is already started
    */
   startPicker: function() {
     if (this._isPicking) {
       return promise.resolve();
     }
     let deferred = promise.defer();
     let done = () => {
       this._isPicking = true;
       this.toolbox.emit("picker-started");
       this.toolbox.on("select", this.stopPicker);
       deferred.resolve();
     };
     promise.all([
       this.toolbox.initInspector(),
       this.toolbox.selectTool("inspector")
     ]).then(() => {
       this.toolbox._pickerButton.setAttribute("checked", "true");
       if (this.isRemoteHighlightable) {
         this.toolbox.walker.on("picker-node-hovered", this._onPickerNodeHovered);
         this.toolbox.walker.on("picker-node-picked", this._onPickerNodePicked);
         this.toolbox.highlighter.pick().then(done);
       } else {
         return this.toolbox.walker.pick().then(node => {
           this.toolbox.selection.setNodeFront(node, "picker-node-picked").then(() => {
             this.stopPicker();
             done();
           });
         });
       }
     });
     return deferred.promise;
   },
   /**
    * Stop the element picker
    * @return A promise that resolves when the picker has stopped or immediately
    * if it is already stopped
    */
   stopPicker: function() {
     if (!this._isPicking) {
       return promise.resolve();
     }
     let deferred = promise.defer();
     let done = () => {
       this.toolbox.emit("picker-stopped");
       this.toolbox.off("select", this.stopPicker);
       deferred.resolve();
     };
     this.toolbox.initInspector().then(() => {
       this._isPicking = false;
       this.toolbox._pickerButton.removeAttribute("checked");
       if (this.isRemoteHighlightable) {
         this.toolbox.highlighter.cancelPick().then(done);
         this.toolbox.walker.off("picker-node-hovered", this._onPickerNodeHovered);
         this.toolbox.walker.off("picker-node-picked", this._onPickerNodePicked);
       } else {
         this.toolbox.walker.cancelPick().then(done);
       }
     });
     return deferred.promise;
   },
   /**
    * Show the box model highlighter on a node, given its NodeFront (this type
    * of front is normally returned by the WalkerActor).
    * @return a promise that resolves to the nodeFront when the node has been
    * highlit
    */
   highlightNodeFront: function(nodeFront, options={}) {
     let deferred = promise.defer();
     // If the remote highlighter exists on the target, use it
     if (this.isRemoteHighlightable) {
       this.toolbox.initInspector().then(() => {
         this.toolbox.highlighter.showBoxModel(nodeFront, options).then(() => {
           this.toolbox.emit("node-highlight", nodeFront);
           deferred.resolve(nodeFront);
         });
       });
     }
     // Else, revert to the "older" version of the highlighter in the walker
     // actor
     else {
       this.toolbox.walker.highlight(nodeFront).then(() => {
         this.toolbox.emit("node-highlight", nodeFront);
         deferred.resolve(nodeFront);
       });
     }
     return deferred.promise;
   },
   /**
    * 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
    * @return a promise that resolves to the nodeFront when the node has been
    * highlit
    */
   highlightDomValueGrip: function(valueGrip, options={}) {
     return this._translateGripToNodeFront(valueGrip).then(nodeFront => {
       if (nodeFront) {
         return this.highlightNodeFront(nodeFront, options);
       } else {
         return promise.reject();
       }
     });
   },
   _translateGripToNodeFront: function(grip) {
     return this.toolbox.initInspector().then(() => {
       return this.toolbox.walker.getNodeActorFromObjectActor(grip.actor);
     });
   },
   /**
    * Hide the highlighter.
    * @return a promise that resolves when the highlighter is hidden
    */
   unhighlight: function(forceHide=false) {
     let unhighlightPromise;
     forceHide = forceHide || !gDevTools.testing;
     if (forceHide && this.isRemoteHighlightable && this.toolbox.highlighter) {
       // If the remote highlighter exists on the target, use it
       unhighlightPromise = this.toolbox.highlighter.hideBoxModel();
     } else {
       // If not, no need to unhighlight as the older highlight method uses a
       // setTimeout to hide itself
       unhighlightPromise = promise.resolve();
     }
     return unhighlightPromise.then(() => {
       this.toolbox.emit("node-unhighlight");
     });
   }
 };