Add m-esr52 at 52.6.0

1 files changed, 1397 insertions, 0 deletions

diff --git a/devtools/client/shared/developer-toolbar.js b/devtools/client/shared/developer-toolbar.js
new file mode 100644
index 000000000..2528591a6
--- /dev/null
+++ b/devtools/client/shared/developer-toolbar.js
@@ -0,0 +1,1397 @@
+/* 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 Services = require("Services");
+const { TargetFactory } = require("devtools/client/framework/target");
+const Telemetry = require("devtools/client/shared/telemetry");
+const {ViewHelpers} = require("devtools/client/shared/widgets/view-helpers");
+const {LocalizationHelper} = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/toolbox.properties");
+const {Task} = require("devtools/shared/task");
+
+const NS_XHTML = "http://www.w3.org/1999/xhtml";
+
+const { PluralForm } = require("devtools/shared/plural-form");
+
+loader.lazyGetter(this, "prefBranch", function () {
+  return Services.prefs.getBranch(null)
+                    .QueryInterface(Ci.nsIPrefBranch2);
+});
+
+loader.lazyRequireGetter(this, "gcliInit", "devtools/shared/gcli/commands/index");
+loader.lazyRequireGetter(this, "util", "gcli/util/util");
+loader.lazyRequireGetter(this, "ConsoleServiceListener", "devtools/server/actors/utils/webconsole-utils", true);
+loader.lazyRequireGetter(this, "gDevTools", "devtools/client/framework/devtools", true);
+loader.lazyRequireGetter(this, "gDevToolsBrowser", "devtools/client/framework/devtools-browser", true);
+loader.lazyRequireGetter(this, "nodeConstants", "devtools/shared/dom-node-constants");
+loader.lazyRequireGetter(this, "EventEmitter", "devtools/shared/event-emitter");
+
+/**
+ * A collection of utilities to help working with commands
+ */
+var CommandUtils = {
+  /**
+   * Utility to ensure that things are loaded in the correct order
+   */
+  createRequisition: function (target, options) {
+    if (!gcliInit) {
+      return promise.reject("Unable to load gcli");
+    }
+    return gcliInit.getSystem(target).then(system => {
+      let Requisition = require("gcli/cli").Requisition;
+      return new Requisition(system, options);
+    });
+  },
+
+  /**
+   * Destroy the remote side of the requisition as well as the local side
+   */
+  destroyRequisition: function (requisition, target) {
+    requisition.destroy();
+    gcliInit.releaseSystem(target);
+  },
+
+  /**
+   * Read a toolbarSpec from preferences
+   * @param pref The name of the preference to read
+   */
+  getCommandbarSpec: function (pref) {
+    let value = prefBranch.getComplexValue(pref, Ci.nsISupportsString).data;
+    return JSON.parse(value);
+  },
+
+  /**
+   * A toolbarSpec is an array of strings each of which is a GCLI command.
+   *
+   * Warning: this method uses the unload event of the window that owns the
+   * buttons that are of type checkbox. this means that we don't properly
+   * unregister event handlers until the window is destroyed.
+   */
+  createButtons: function (toolbarSpec, target, document, requisition) {
+    return util.promiseEach(toolbarSpec, typed => {
+      // Ask GCLI to parse the typed string (doesn't execute it)
+      return requisition.update(typed).then(() => {
+        let button = document.createElementNS(NS_XHTML, "button");
+
+        // Ignore invalid commands
+        let command = requisition.commandAssignment.value;
+        if (command == null) {
+          throw new Error("No command '" + typed + "'");
+        }
+
+        if (command.buttonId != null) {
+          button.id = command.buttonId;
+          if (command.buttonClass != null) {
+            button.className = command.buttonClass;
+          }
+        } else {
+          button.setAttribute("text-as-image", "true");
+          button.setAttribute("label", command.name);
+        }
+
+        button.classList.add("devtools-button");
+
+        if (command.tooltipText != null) {
+          button.setAttribute("title", command.tooltipText);
+        } else if (command.description != null) {
+          button.setAttribute("title", command.description);
+        }
+
+        button.addEventListener("click",
+          requisition.updateExec.bind(requisition, typed));
+
+        button.addEventListener("keypress", (event) => {
+          if (ViewHelpers.isSpaceOrReturn(event)) {
+            event.preventDefault();
+            requisition.updateExec(typed);
+          }
+        }, false);
+
+        // Allow the command button to be toggleable
+        let onChange = null;
+        if (command.state) {
+          button.setAttribute("autocheck", false);
+
+          /**
+           * The onChange event should be called with an event object that
+           * contains a target property which specifies which target the event
+           * applies to. For legacy reasons the event object can also contain
+           * a tab property.
+           */
+          onChange = (eventName, ev) => {
+            if (ev.target == target || ev.tab == target.tab) {
+              let updateChecked = (checked) => {
+                if (checked) {
+                  button.setAttribute("checked", true);
+                } else if (button.hasAttribute("checked")) {
+                  button.removeAttribute("checked");
+                }
+              };
+
+              // isChecked would normally be synchronous. An annoying quirk
+              // of the 'csscoverage toggle' command forces us to accept a
+              // promise here, but doing Promise.resolve(reply).then(...) here
+              // makes this async for everyone, which breaks some tests so we
+              // treat non-promise replies separately to keep then synchronous.
+              let reply = command.state.isChecked(target);
+              if (typeof reply.then == "function") {
+                reply.then(updateChecked, console.error);
+              } else {
+                updateChecked(reply);
+              }
+            }
+          };
+
+          command.state.onChange(target, onChange);
+          onChange("", { target: target });
+        }
+        document.defaultView.addEventListener("unload", function (event) {
+          if (onChange && command.state.offChange) {
+            command.state.offChange(target, onChange);
+          }
+          button.remove();
+          button = null;
+        }, { once: true });
+
+        requisition.clear();
+
+        return button;
+      });
+    });
+  },
+
+  /**
+   * A helper function to create the environment object that is passed to
+   * GCLI commands.
+   * @param targetContainer An object containing a 'target' property which
+   * reflects the current debug target
+   */
+  createEnvironment: function (container, targetProperty = "target") {
+    if (!container[targetProperty].toString ||
+        !/TabTarget/.test(container[targetProperty].toString())) {
+      throw new Error("Missing target");
+    }
+
+    return {
+      get target() {
+        if (!container[targetProperty].toString ||
+            !/TabTarget/.test(container[targetProperty].toString())) {
+          throw new Error("Removed target");
+        }
+
+        return container[targetProperty];
+      },
+
+      get chromeWindow() {
+        return this.target.tab.ownerDocument.defaultView;
+      },
+
+      get chromeDocument() {
+        return this.target.tab.ownerDocument.defaultView.document;
+      },
+
+      get window() {
+        // throw new
+        //    Error("environment.window is not available in runAt:client commands");
+        return this.chromeWindow.gBrowser.contentWindowAsCPOW;
+      },
+
+      get document() {
+        // throw new
+        //    Error("environment.document is not available in runAt:client commands");
+        return this.chromeWindow.gBrowser.contentDocumentAsCPOW;
+      }
+    };
+  },
+};
+
+exports.CommandUtils = CommandUtils;
+
+/**
+ * Due to a number of panel bugs we need a way to check if we are running on
+ * Linux. See the comments for TooltipPanel and OutputPanel for further details.
+ *
+ * When bug 780102 is fixed all isLinux checks can be removed and we can revert
+ * to using panels.
+ */
+loader.lazyGetter(this, "isLinux", function () {
+  return Services.appinfo.OS == "Linux";
+});
+loader.lazyGetter(this, "isMac", function () {
+  return Services.appinfo.OS == "Darwin";
+});
+
+/**
+ * A component to manage the global developer toolbar, which contains a GCLI
+ * and buttons for various developer tools.
+ * @param chromeWindow The browser window to which this toolbar is attached
+ */
+function DeveloperToolbar(chromeWindow) {
+  this._chromeWindow = chromeWindow;
+
+  // Will be setup when show() is called
+  this.target = null;
+
+  this._doc = chromeWindow.document;
+
+  this._telemetry = new Telemetry();
+  this._errorsCount = {};
+  this._warningsCount = {};
+  this._errorListeners = {};
+
+  this._onToolboxReady = this._onToolboxReady.bind(this);
+  this._onToolboxDestroyed = this._onToolboxDestroyed.bind(this);
+
+  EventEmitter.decorate(this);
+}
+exports.DeveloperToolbar = DeveloperToolbar;
+
+/**
+ * Inspector notifications dispatched through the nsIObserverService
+ */
+const NOTIFICATIONS = {
+  /** DeveloperToolbar.show() has been called, and we're working on it */
+  LOAD: "developer-toolbar-load",
+
+  /** DeveloperToolbar.show() has completed */
+  SHOW: "developer-toolbar-show",
+
+  /** DeveloperToolbar.hide() has been called */
+  HIDE: "developer-toolbar-hide"
+};
+
+/**
+ * Attach notification constants to the object prototype so tests etc can
+ * use them without needing to import anything
+ */
+DeveloperToolbar.prototype.NOTIFICATIONS = NOTIFICATIONS;
+
+/**
+ * Is the toolbar open?
+ */
+Object.defineProperty(DeveloperToolbar.prototype, "visible", {
+  get: function () {
+    return this._element && !this._element.hidden;
+  },
+  enumerable: true
+});
+
+var _gSequenceId = 0;
+
+/**
+ * Getter for a unique ID.
+ */
+Object.defineProperty(DeveloperToolbar.prototype, "sequenceId", {
+  get: function () {
+    return _gSequenceId++;
+  },
+  enumerable: true
+});
+
+/**
+ * Create the <toolbar> element to insert within browser UI
+ */
+DeveloperToolbar.prototype.createToolbar = function () {
+  if (this._element) {
+    return;
+  }
+  let toolbar = this._doc.createElement("toolbar");
+  toolbar.setAttribute("id", "developer-toolbar");
+  toolbar.setAttribute("hidden", "true");
+
+  let close = this._doc.createElement("toolbarbutton");
+  close.setAttribute("id", "developer-toolbar-closebutton");
+  close.setAttribute("class", "close-icon");
+  close.setAttribute("oncommand", "DeveloperToolbar.hide();");
+  let closeTooltip = L10N.getStr("toolbar.closeButton.tooltip");
+  close.setAttribute("tooltiptext", closeTooltip);
+
+  let stack = this._doc.createElement("stack");
+  stack.setAttribute("flex", "1");
+
+  let input = this._doc.createElement("textbox");
+  input.setAttribute("class", "gclitoolbar-input-node");
+  input.setAttribute("rows", "1");
+  stack.appendChild(input);
+
+  let hbox = this._doc.createElement("hbox");
+  hbox.setAttribute("class", "gclitoolbar-complete-node");
+  stack.appendChild(hbox);
+
+  let toolboxBtn = this._doc.createElement("toolbarbutton");
+  toolboxBtn.setAttribute("id", "developer-toolbar-toolbox-button");
+  toolboxBtn.setAttribute("class", "developer-toolbar-button");
+  let toolboxTooltip = L10N.getStr("toolbar.toolsButton.tooltip");
+  toolboxBtn.setAttribute("tooltiptext", toolboxTooltip);
+  let toolboxOpen = gDevToolsBrowser.hasToolboxOpened(this._chromeWindow);
+  toolboxBtn.setAttribute("checked", toolboxOpen);
+  toolboxBtn.addEventListener("command", function (event) {
+    let window = event.target.ownerDocument.defaultView;
+    gDevToolsBrowser.toggleToolboxCommand(window.gBrowser);
+  });
+  this._errorCounterButton = toolboxBtn;
+  this._errorCounterButton._defaultTooltipText = toolboxTooltip;
+
+  // On Mac, the close button is on the left,
+  // while it is on the right on every other platforms.
+  if (isMac) {
+    toolbar.appendChild(close);
+    toolbar.appendChild(stack);
+    toolbar.appendChild(toolboxBtn);
+  } else {
+    toolbar.appendChild(stack);
+    toolbar.appendChild(toolboxBtn);
+    toolbar.appendChild(close);
+  }
+
+  this._element = toolbar;
+  let bottomBox = this._doc.getElementById("browser-bottombox");
+  if (bottomBox) {
+    bottomBox.appendChild(this._element);
+  } else {
+    // SeaMonkey does not have a "browser-bottombox".
+    let statusBar = this._doc.getElementById("status-bar");
+    if (statusBar) {
+      statusBar.parentNode.insertBefore(this._element, statusBar);
+    }
+  }
+};
+
+/**
+ * Called from browser.xul in response to menu-click or keyboard shortcut to
+ * toggle the toolbar
+ */
+DeveloperToolbar.prototype.toggle = function () {
+  if (this.visible) {
+    return this.hide().catch(console.error);
+  }
+  return this.show(true).catch(console.error);
+};
+
+/**
+ * Called from browser.xul in response to menu-click or keyboard shortcut to
+ * toggle the toolbar
+ */
+DeveloperToolbar.prototype.focus = function () {
+  if (this.visible) {
+    this._input.focus();
+    return promise.resolve();
+  }
+  return this.show(true);
+};
+
+/**
+ * Called from browser.xul in response to menu-click or keyboard shortcut to
+ * toggle the toolbar
+ */
+DeveloperToolbar.prototype.focusToggle = function () {
+  if (this.visible) {
+    // If we have focus then the active element is the HTML input contained
+    // inside the xul input element
+    let active = this._chromeWindow.document.activeElement;
+    let position = this._input.compareDocumentPosition(active);
+    if (position & nodeConstants.DOCUMENT_POSITION_CONTAINED_BY) {
+      this.hide();
+    } else {
+      this._input.focus();
+    }
+  } else {
+    this.show(true);
+  }
+};
+
+/**
+ * Even if the user has not clicked on 'Got it' in the intro, we only show it
+ * once per session.
+ * Warning this is slightly messed up because this.DeveloperToolbar is not the
+ * same as this.DeveloperToolbar when in browser.js context.
+ */
+DeveloperToolbar.introShownThisSession = false;
+
+/**
+ * Show the developer toolbar
+ */
+DeveloperToolbar.prototype.show = function (focus) {
+  if (this._showPromise != null) {
+    return this._showPromise;
+  }
+
+  this._showPromise = Task.spawn((function* () {
+    // hide() is async, so ensure we don't need to wait for hide() to
+    // finish.  We unconditionally yield here, even if _hidePromise is
+    // null, so that the spawn call returns a promise before starting
+    // to do any real work.
+    yield this._hidePromise;
+
+    this.createToolbar();
+
+    Services.prefs.setBoolPref("devtools.toolbar.visible", true);
+
+    this._telemetry.toolOpened("developertoolbar");
+
+    this._notify(NOTIFICATIONS.LOAD);
+
+    this._input = this._doc.querySelector(".gclitoolbar-input-node");
+
+    // Initializing GCLI can only be done when we've got content windows to
+    // write to, so this needs to be done asynchronously.
+    let panelPromises = [
+      TooltipPanel.create(this),
+      OutputPanel.create(this)
+    ];
+    let panels = yield promise.all(panelPromises);
+
+    [ this.tooltipPanel, this.outputPanel ] = panels;
+
+    this._doc.getElementById("menu_devToolbar").setAttribute("checked", "true");
+
+    this.target = TargetFactory.forTab(this._chromeWindow.gBrowser.selectedTab);
+    const options = {
+      environment: CommandUtils.createEnvironment(this, "target"),
+      document: this.outputPanel.document,
+    };
+    let requisition = yield CommandUtils.createRequisition(this.target, options);
+    this.requisition = requisition;
+
+    // The <textbox> `value` may still be undefined on the XUL binding if
+    // we fetch it early
+    let value = this._input.value || "";
+    yield this.requisition.update(value);
+
+    const Inputter = require("gcli/mozui/inputter").Inputter;
+    const Completer = require("gcli/mozui/completer").Completer;
+    const Tooltip = require("gcli/mozui/tooltip").Tooltip;
+    const FocusManager = require("gcli/ui/focus").FocusManager;
+
+    this.onOutput = this.requisition.commandOutputManager.onOutput;
+
+    this.focusManager = new FocusManager(this._doc, requisition.system.settings);
+
+    this.inputter = new Inputter({
+      requisition: this.requisition,
+      focusManager: this.focusManager,
+      element: this._input,
+    });
+
+    this.completer = new Completer({
+      requisition: this.requisition,
+      inputter: this.inputter,
+      backgroundElement: this._doc.querySelector(".gclitoolbar-stack-node"),
+      element: this._doc.querySelector(".gclitoolbar-complete-node"),
+    });
+
+    this.tooltip = new Tooltip({
+      requisition: this.requisition,
+      focusManager: this.focusManager,
+      inputter: this.inputter,
+      element: this.tooltipPanel.hintElement,
+    });
+
+    this.inputter.tooltip = this.tooltip;
+
+    this.focusManager.addMonitoredElement(this.outputPanel._frame);
+    this.focusManager.addMonitoredElement(this._element);
+
+    this.focusManager.onVisibilityChange.add(this.outputPanel._visibilityChanged,
+                                             this.outputPanel);
+    this.focusManager.onVisibilityChange.add(this.tooltipPanel._visibilityChanged,
+                                             this.tooltipPanel);
+    this.onOutput.add(this.outputPanel._outputChanged, this.outputPanel);
+
+    let tabbrowser = this._chromeWindow.gBrowser;
+    tabbrowser.tabContainer.addEventListener("TabSelect", this, false);
+    tabbrowser.tabContainer.addEventListener("TabClose", this, false);
+    tabbrowser.addEventListener("load", this, true);
+    tabbrowser.addEventListener("beforeunload", this, true);
+
+    gDevTools.on("toolbox-ready", this._onToolboxReady);
+    gDevTools.on("toolbox-destroyed", this._onToolboxDestroyed);
+
+    this._initErrorsCount(tabbrowser.selectedTab);
+
+    this._element.hidden = false;
+
+    if (focus) {
+      // If the toolbar was just inserted, the <textbox> may still have
+      // its binding in process of being applied and not be focusable yet
+      let waitForBinding = () => {
+        // Bail out if the toolbar has been destroyed in the meantime
+        if (!this._input) {
+          return;
+        }
+        // mInputField is a xbl field of <xul:textbox>
+        if (typeof this._input.mInputField != "undefined") {
+          this._input.focus();
+          this._notify(NOTIFICATIONS.SHOW);
+        } else {
+          this._input.ownerDocument.defaultView.setTimeout(waitForBinding, 50);
+        }
+      };
+      waitForBinding();
+    } else {
+      this._notify(NOTIFICATIONS.SHOW);
+    }
+
+    if (!DeveloperToolbar.introShownThisSession) {
+      let intro = require("gcli/ui/intro");
+      intro.maybeShowIntro(this.requisition.commandOutputManager,
+                           this.requisition.conversionContext,
+                           this.outputPanel);
+      DeveloperToolbar.introShownThisSession = true;
+    }
+
+    this._showPromise = null;
+  }).bind(this));
+
+  return this._showPromise;
+};
+
+/**
+ * Hide the developer toolbar.
+ */
+DeveloperToolbar.prototype.hide = function () {
+  // If we're already in the process of hiding, just use the other promise
+  if (this._hidePromise != null) {
+    return this._hidePromise;
+  }
+
+  // show() is async, so ensure we don't need to wait for show() to finish
+  let waitPromise = this._showPromise || promise.resolve();
+
+  this._hidePromise = waitPromise.then(() => {
+    this._element.hidden = true;
+
+    Services.prefs.setBoolPref("devtools.toolbar.visible", false);
+
+    this._doc.getElementById("menu_devToolbar").setAttribute("checked", "false");
+    this.destroy();
+
+    this._telemetry.toolClosed("developertoolbar");
+    this._notify(NOTIFICATIONS.HIDE);
+
+    this._hidePromise = null;
+  });
+
+  return this._hidePromise;
+};
+
+/**
+ * Initialize the listeners needed for tracking the number of errors for a given
+ * tab.
+ *
+ * @private
+ * @param nsIDOMNode tab the xul:tab for which you want to track the number of
+ * errors.
+ */
+DeveloperToolbar.prototype._initErrorsCount = function (tab) {
+  let tabId = tab.linkedPanel;
+  if (tabId in this._errorsCount) {
+    this._updateErrorsCount();
+    return;
+  }
+
+  let window = tab.linkedBrowser.contentWindow;
+  let listener = new ConsoleServiceListener(window, {
+    onConsoleServiceMessage: this._onPageError.bind(this, tabId),
+  });
+  listener.init();
+
+  this._errorListeners[tabId] = listener;
+  this._errorsCount[tabId] = 0;
+  this._warningsCount[tabId] = 0;
+
+  let messages = listener.getCachedMessages();
+  messages.forEach(this._onPageError.bind(this, tabId));
+
+  this._updateErrorsCount();
+};
+
+/**
+ * Stop the listeners needed for tracking the number of errors for a given
+ * tab.
+ *
+ * @private
+ * @param nsIDOMNode tab the xul:tab for which you want to stop tracking the
+ * number of errors.
+ */
+DeveloperToolbar.prototype._stopErrorsCount = function (tab) {
+  let tabId = tab.linkedPanel;
+  if (!(tabId in this._errorsCount) || !(tabId in this._warningsCount)) {
+    this._updateErrorsCount();
+    return;
+  }
+
+  this._errorListeners[tabId].destroy();
+  delete this._errorListeners[tabId];
+  delete this._errorsCount[tabId];
+  delete this._warningsCount[tabId];
+
+  this._updateErrorsCount();
+};
+
+/**
+ * Hide the developer toolbar
+ */
+DeveloperToolbar.prototype.destroy = function () {
+  if (this._input == null) {
+    // Already destroyed
+    return;
+  }
+
+  let tabbrowser = this._chromeWindow.gBrowser;
+  tabbrowser.tabContainer.removeEventListener("TabSelect", this, false);
+  tabbrowser.tabContainer.removeEventListener("TabClose", this, false);
+  tabbrowser.removeEventListener("load", this, true);
+  tabbrowser.removeEventListener("beforeunload", this, true);
+
+  gDevTools.off("toolbox-ready", this._onToolboxReady);
+  gDevTools.off("toolbox-destroyed", this._onToolboxDestroyed);
+
+  Array.prototype.forEach.call(tabbrowser.tabs, this._stopErrorsCount, this);
+
+  this.focusManager.removeMonitoredElement(this.outputPanel._frame);
+  this.focusManager.removeMonitoredElement(this._element);
+
+  this.focusManager.onVisibilityChange.remove(this.outputPanel._visibilityChanged,
+                                              this.outputPanel);
+  this.focusManager.onVisibilityChange.remove(this.tooltipPanel._visibilityChanged,
+                                              this.tooltipPanel);
+  this.onOutput.remove(this.outputPanel._outputChanged, this.outputPanel);
+
+  this.tooltip.destroy();
+  this.completer.destroy();
+  this.inputter.destroy();
+  this.focusManager.destroy();
+
+  this.outputPanel.destroy();
+  this.tooltipPanel.destroy();
+  delete this._input;
+
+  CommandUtils.destroyRequisition(this.requisition, this.target);
+  this.target = undefined;
+
+  this._element.remove();
+  delete this._element;
+};
+
+/**
+ * Utility for sending notifications
+ * @param topic a NOTIFICATION constant
+ */
+DeveloperToolbar.prototype._notify = function (topic) {
+  let data = { toolbar: this };
+  data.wrappedJSObject = data;
+  Services.obs.notifyObservers(data, topic, null);
+};
+
+/**
+ * Update various parts of the UI when the current tab changes
+ */
+DeveloperToolbar.prototype.handleEvent = function (ev) {
+  if (ev.type == "TabSelect" || ev.type == "load") {
+    if (this.visible) {
+      let tab = this._chromeWindow.gBrowser.selectedTab;
+      this.target = TargetFactory.forTab(tab);
+      gcliInit.getSystem(this.target).then(system => {
+        this.requisition.system = system;
+      }, error => {
+        if (!this._chromeWindow.gBrowser.getBrowserForTab(tab)) {
+          // The tab was closed, suppress the error and print a warning as the
+          // destroyed tab was likely the cause.
+          console.warn("An error occurred as the tab was closed while " +
+            "updating Developer Toolbar state. The error was: ", error);
+          return;
+        }
+
+        // Propagate other errors as they're more likely to cause real issues
+        // and thus should cause tests to fail.
+        throw error;
+      });
+
+      if (ev.type == "TabSelect") {
+        let toolboxOpen = gDevToolsBrowser.hasToolboxOpened(this._chromeWindow);
+        this._errorCounterButton.setAttribute("checked", toolboxOpen);
+        this._initErrorsCount(ev.target);
+      }
+    }
+  } else if (ev.type == "TabClose") {
+    this._stopErrorsCount(ev.target);
+  } else if (ev.type == "beforeunload") {
+    this._onPageBeforeUnload(ev);
+  }
+};
+
+/**
+ * Update toolbox toggle button when toolbox goes on and off
+ */
+DeveloperToolbar.prototype._onToolboxReady = function () {
+  this._errorCounterButton.setAttribute("checked", "true");
+};
+DeveloperToolbar.prototype._onToolboxDestroyed = function () {
+  this._errorCounterButton.setAttribute("checked", "false");
+};
+
+/**
+ * Count a page error received for the currently selected tab. This
+ * method counts the JavaScript exceptions received and CSS errors/warnings.
+ *
+ * @private
+ * @param string tabId the ID of the tab from where the page error comes.
+ * @param object pageError the page error object received from the
+ * PageErrorListener.
+ */
+DeveloperToolbar.prototype._onPageError = function (tabId, pageError) {
+  if (pageError.category == "CSS Parser" ||
+      pageError.category == "CSS Loader") {
+    return;
+  }
+  if ((pageError.flags & pageError.warningFlag) ||
+      (pageError.flags & pageError.strictFlag)) {
+    this._warningsCount[tabId]++;
+  } else {
+    this._errorsCount[tabId]++;
+  }
+  this._updateErrorsCount(tabId);
+};
+
+/**
+ * The |beforeunload| event handler. This function resets the errors count when
+ * a different page starts loading.
+ *
+ * @private
+ * @param nsIDOMEvent ev the beforeunload DOM event.
+ */
+DeveloperToolbar.prototype._onPageBeforeUnload = function (ev) {
+  let window = ev.target.defaultView;
+  if (window.top !== window) {
+    return;
+  }
+
+  let tabs = this._chromeWindow.gBrowser.tabs;
+  Array.prototype.some.call(tabs, function (tab) {
+    if (tab.linkedBrowser.contentWindow === window) {
+      let tabId = tab.linkedPanel;
+      if (tabId in this._errorsCount || tabId in this._warningsCount) {
+        this._errorsCount[tabId] = 0;
+        this._warningsCount[tabId] = 0;
+        this._updateErrorsCount(tabId);
+      }
+      return true;
+    }
+    return false;
+  }, this);
+};
+
+/**
+ * Update the page errors count displayed in the Web Console button for the
+ * currently selected tab.
+ *
+ * @private
+ * @param string [changedTabId] Optional. The tab ID that had its page errors
+ * count changed. If this is provided and it doesn't match the currently
+ * selected tab, then the button is not updated.
+ */
+DeveloperToolbar.prototype._updateErrorsCount = function (changedTabId) {
+  let tabId = this._chromeWindow.gBrowser.selectedTab.linkedPanel;
+  if (changedTabId && tabId != changedTabId) {
+    return;
+  }
+
+  let errors = this._errorsCount[tabId];
+  let warnings = this._warningsCount[tabId];
+  let btn = this._errorCounterButton;
+  if (errors) {
+    let errorsText = L10N.getStr("toolboxToggleButton.errors");
+    errorsText = PluralForm.get(errors, errorsText).replace("#1", errors);
+
+    let warningsText = L10N.getStr("toolboxToggleButton.warnings");
+    warningsText = PluralForm.get(warnings, warningsText).replace("#1", warnings);
+
+    let tooltiptext = L10N.getFormatStr("toolboxToggleButton.tooltip",
+                                            errorsText, warningsText);
+
+    btn.setAttribute("error-count", errors);
+    btn.setAttribute("tooltiptext", tooltiptext);
+  } else {
+    btn.removeAttribute("error-count");
+    btn.setAttribute("tooltiptext", btn._defaultTooltipText);
+  }
+
+  this.emit("errors-counter-updated");
+};
+
+/**
+ * Reset the errors counter for the given tab.
+ *
+ * @param nsIDOMElement tab The xul:tab for which you want to reset the page
+ * errors counters.
+ */
+DeveloperToolbar.prototype.resetErrorsCount = function (tab) {
+  let tabId = tab.linkedPanel;
+  if (tabId in this._errorsCount || tabId in this._warningsCount) {
+    this._errorsCount[tabId] = 0;
+    this._warningsCount[tabId] = 0;
+    this._updateErrorsCount(tabId);
+  }
+};
+
+/**
+ * Creating a OutputPanel is asynchronous
+ */
+function OutputPanel() {
+  throw new Error("Use OutputPanel.create()");
+}
+
+/**
+ * Panel to handle command line output.
+ *
+ * There is a tooltip bug on Windows and OSX that prevents tooltips from being
+ * positioned properly (bug 786975). There is a Gnome panel bug on Linux that
+ * causes ugly focus issues (https://bugzilla.gnome.org/show_bug.cgi?id=621848).
+ * We now use a tooltip on Linux and a panel on OSX & Windows.
+ *
+ * If a panel has no content and no height it is not shown when openPopup is
+ * called on Windows and OSX (bug 692348) ... this prevents the panel from
+ * appearing the first time it is shown. Setting the panel's height to 1px
+ * before calling openPopup works around this issue as we resize it ourselves
+ * anyway.
+ *
+ * @param devtoolbar The parent DeveloperToolbar object
+ */
+OutputPanel.create = function (devtoolbar) {
+  let outputPanel = Object.create(OutputPanel.prototype);
+  return outputPanel._init(devtoolbar);
+};
+
+/**
+ * @private See OutputPanel.create
+ */
+OutputPanel.prototype._init = function (devtoolbar) {
+  this._devtoolbar = devtoolbar;
+  this._input = this._devtoolbar._input;
+  this._toolbar = this._devtoolbar._doc.getElementById("developer-toolbar");
+
+  /*
+  <tooltip|panel id="gcli-output"
+         noautofocus="true"
+         noautohide="true"
+         class="gcli-panel">
+    <html:iframe xmlns:html="http://www.w3.org/1999/xhtml"
+                 id="gcli-output-frame"
+                 src="chrome://devtools/content/commandline/commandlineoutput.xhtml"
+                 sandbox="allow-same-origin"/>
+  </tooltip|panel>
+  */
+
+  // TODO: Switch back from tooltip to panel when metacity focus issue is fixed:
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=780102
+  this._panel = this._devtoolbar._doc.createElement(isLinux ? "tooltip" : "panel");
+
+  this._panel.id = "gcli-output";
+  this._panel.classList.add("gcli-panel");
+
+  if (isLinux) {
+    this.canHide = false;
+    this._onpopuphiding = this._onpopuphiding.bind(this);
+    this._panel.addEventListener("popuphiding", this._onpopuphiding, true);
+  } else {
+    this._panel.setAttribute("noautofocus", "true");
+    this._panel.setAttribute("noautohide", "true");
+
+    // Bug 692348: On Windows and OSX if a panel has no content and no height
+    // openPopup fails to display it. Setting the height to 1px alows the panel
+    // to be displayed before has content or a real height i.e. the first time
+    // it is displayed.
+    this._panel.setAttribute("height", "1px");
+  }
+
+  this._toolbar.parentElement.insertBefore(this._panel, this._toolbar);
+
+  this._frame = this._devtoolbar._doc.createElementNS(NS_XHTML, "iframe");
+  this._frame.id = "gcli-output-frame";
+  this._frame.setAttribute("src", "chrome://devtools/content/commandline/commandlineoutput.xhtml");
+  this._frame.setAttribute("sandbox", "allow-same-origin");
+  this._panel.appendChild(this._frame);
+
+  this.displayedOutput = undefined;
+
+  this._update = this._update.bind(this);
+
+  // Wire up the element from the iframe, and resolve the promise
+  let deferred = defer();
+  let onload = () => {
+    this._frame.removeEventListener("load", onload, true);
+
+    this.document = this._frame.contentDocument;
+    this._copyTheme();
+
+    this._div = this.document.getElementById("gcli-output-root");
+    this._div.classList.add("gcli-row-out");
+    this._div.setAttribute("aria-live", "assertive");
+
+    let styles = this._toolbar.ownerDocument.defaultView
+                    .getComputedStyle(this._toolbar);
+    this._div.setAttribute("dir", styles.direction);
+
+    deferred.resolve(this);
+  };
+  this._frame.addEventListener("load", onload, true);
+
+  return deferred.promise;
+};
+
+/* Copy the current devtools theme attribute into the iframe,
+   so it can be styled correctly. */
+OutputPanel.prototype._copyTheme = function () {
+  if (this.document) {
+    let theme =
+      this._devtoolbar._doc.documentElement.getAttribute("devtoolstheme");
+    this.document.documentElement.setAttribute("devtoolstheme", theme);
+  }
+};
+
+/**
+ * Prevent the popup from hiding if it is not permitted via this.canHide.
+ */
+OutputPanel.prototype._onpopuphiding = function (ev) {
+  // TODO: When we switch back from tooltip to panel we can remove this hack:
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=780102
+  if (isLinux && !this.canHide) {
+    ev.preventDefault();
+  }
+};
+
+/**
+ * Display the OutputPanel.
+ */
+OutputPanel.prototype.show = function () {
+  if (isLinux) {
+    this.canHide = false;
+  }
+
+  // We need to reset the iframe size in order for future size calculations to
+  // be correct
+  this._frame.style.minHeight = this._frame.style.maxHeight = 0;
+  this._frame.style.minWidth = 0;
+
+  this._copyTheme();
+  this._panel.openPopup(this._input, "before_start", 0, 0, false, false, null);
+  this._resize();
+
+  this._input.focus();
+};
+
+/**
+ * Internal helper to set the height of the output panel to fit the available
+ * content;
+ */
+OutputPanel.prototype._resize = function () {
+  if (this._panel == null || this.document == null || !this._panel.state == "closed") {
+    return;
+  }
+
+  // Set max panel width to match any content with a max of the width of the
+  // browser window.
+  let maxWidth = this._panel.ownerDocument.documentElement.clientWidth;
+
+  // Adjust max width according to OS.
+  // We'd like to put this in CSS but we can't:
+  //   body { width: calc(min(-5px, max-content)); }
+  //   #_panel { max-width: -5px; }
+  switch (Services.appinfo.OS) {
+    case "Linux":
+      maxWidth -= 5;
+      break;
+    case "Darwin":
+      maxWidth -= 25;
+      break;
+    case "WINNT":
+      maxWidth -= 5;
+      break;
+  }
+
+  this.document.body.style.width = "-moz-max-content";
+  let style = this._frame.contentWindow.getComputedStyle(this.document.body);
+  let frameWidth = parseInt(style.width, 10);
+  let width = Math.min(maxWidth, frameWidth);
+  this.document.body.style.width = width + "px";
+
+  // Set the width of the iframe.
+  this._frame.style.minWidth = width + "px";
+  this._panel.style.maxWidth = maxWidth + "px";
+
+  // browserAdjustment is used to correct the panel height according to the
+  // browsers borders etc.
+  const browserAdjustment = 15;
+
+  // Set max panel height to match any content with a max of the height of the
+  // browser window.
+  let maxHeight =
+    this._panel.ownerDocument.documentElement.clientHeight - browserAdjustment;
+  let height = Math.min(maxHeight, this.document.documentElement.scrollHeight);
+
+  // Set the height of the iframe. Setting iframe.height does not work.
+  this._frame.style.minHeight = this._frame.style.maxHeight = height + "px";
+
+  // Set the height and width of the panel to match the iframe.
+  this._panel.sizeTo(width, height);
+
+  // Move the panel to the correct position in the case that it has been
+  // positioned incorrectly.
+  let screenX = this._input.boxObject.screenX;
+  let screenY = this._toolbar.boxObject.screenY;
+  this._panel.moveTo(screenX, screenY - height);
+};
+
+/**
+ * Called by GCLI when a command is executed.
+ */
+OutputPanel.prototype._outputChanged = function (ev) {
+  if (ev.output.hidden) {
+    return;
+  }
+
+  this.remove();
+
+  this.displayedOutput = ev.output;
+
+  if (this.displayedOutput.completed) {
+    this._update();
+  } else {
+    this.displayedOutput.promise.then(this._update, this._update)
+                                .then(null, console.error);
+  }
+};
+
+/**
+ * Called when displayed Output says it's changed or from outputChanged, which
+ * happens when there is a new displayed Output.
+ */
+OutputPanel.prototype._update = function () {
+  // destroy has been called, bail out
+  if (this._div == null) {
+    return;
+  }
+
+  // Empty this._div
+  while (this._div.hasChildNodes()) {
+    this._div.removeChild(this._div.firstChild);
+  }
+
+  if (this.displayedOutput.data != null) {
+    let context = this._devtoolbar.requisition.conversionContext;
+    this.displayedOutput.convert("dom", context).then(node => {
+      if (node == null) {
+        return;
+      }
+
+      while (this._div.hasChildNodes()) {
+        this._div.removeChild(this._div.firstChild);
+      }
+
+      let links = node.querySelectorAll("*[href]");
+      for (let i = 0; i < links.length; i++) {
+        links[i].setAttribute("target", "_blank");
+      }
+
+      this._div.appendChild(node);
+      this.show();
+    });
+  }
+};
+
+/**
+ * Detach listeners from the currently displayed Output.
+ */
+OutputPanel.prototype.remove = function () {
+  if (isLinux) {
+    this.canHide = true;
+  }
+
+  if (this._panel && this._panel.hidePopup) {
+    this._panel.hidePopup();
+  }
+
+  if (this.displayedOutput) {
+    delete this.displayedOutput;
+  }
+};
+
+/**
+ * Detach listeners from the currently displayed Output.
+ */
+OutputPanel.prototype.destroy = function () {
+  this.remove();
+
+  this._panel.removeEventListener("popuphiding", this._onpopuphiding, true);
+
+  this._panel.removeChild(this._frame);
+  this._toolbar.parentElement.removeChild(this._panel);
+
+  delete this._devtoolbar;
+  delete this._input;
+  delete this._toolbar;
+  delete this._onpopuphiding;
+  delete this._panel;
+  delete this._frame;
+  delete this._content;
+  delete this._div;
+  delete this.document;
+};
+
+/**
+ * Called by GCLI to indicate that we should show or hide one either the
+ * tooltip panel or the output panel.
+ */
+OutputPanel.prototype._visibilityChanged = function (ev) {
+  if (ev.outputVisible === true) {
+    // this.show is called by _outputChanged
+  } else {
+    if (isLinux) {
+      this.canHide = true;
+    }
+    this._panel.hidePopup();
+  }
+};
+
+/**
+ * Creating a TooltipPanel is asynchronous
+ */
+function TooltipPanel() {
+  throw new Error("Use TooltipPanel.create()");
+}
+
+/**
+ * Panel to handle tooltips.
+ *
+ * There is a tooltip bug on Windows and OSX that prevents tooltips from being
+ * positioned properly (bug 786975). There is a Gnome panel bug on Linux that
+ * causes ugly focus issues (https://bugzilla.gnome.org/show_bug.cgi?id=621848).
+ * We now use a tooltip on Linux and a panel on OSX & Windows.
+ *
+ * If a panel has no content and no height it is not shown when openPopup is
+ * called on Windows and OSX (bug 692348) ... this prevents the panel from
+ * appearing the first time it is shown. Setting the panel's height to 1px
+ * before calling openPopup works around this issue as we resize it ourselves
+ * anyway.
+ *
+ * @param devtoolbar The parent DeveloperToolbar object
+ */
+TooltipPanel.create = function (devtoolbar) {
+  let tooltipPanel = Object.create(TooltipPanel.prototype);
+  return tooltipPanel._init(devtoolbar);
+};
+
+/**
+ * @private See TooltipPanel.create
+ */
+TooltipPanel.prototype._init = function (devtoolbar) {
+  let deferred = defer();
+
+  this._devtoolbar = devtoolbar;
+  this._input = devtoolbar._doc.querySelector(".gclitoolbar-input-node");
+  this._toolbar = devtoolbar._doc.querySelector("#developer-toolbar");
+  this._dimensions = { start: 0, end: 0 };
+
+  /*
+  <tooltip|panel id="gcli-tooltip"
+         type="arrow"
+         noautofocus="true"
+         noautohide="true"
+         class="gcli-panel">
+    <html:iframe xmlns:html="http://www.w3.org/1999/xhtml"
+                 id="gcli-tooltip-frame"
+                 src="chrome://devtools/content/commandline/commandlinetooltip.xhtml"
+                 flex="1"
+                 sandbox="allow-same-origin"/>
+  </tooltip|panel>
+  */
+
+  // TODO: Switch back from tooltip to panel when metacity focus issue is fixed:
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=780102
+  this._panel = devtoolbar._doc.createElement(isLinux ? "tooltip" : "panel");
+
+  this._panel.id = "gcli-tooltip";
+  this._panel.classList.add("gcli-panel");
+
+  if (isLinux) {
+    this.canHide = false;
+    this._onpopuphiding = this._onpopuphiding.bind(this);
+    this._panel.addEventListener("popuphiding", this._onpopuphiding, true);
+  } else {
+    this._panel.setAttribute("noautofocus", "true");
+    this._panel.setAttribute("noautohide", "true");
+
+    // Bug 692348: On Windows and OSX if a panel has no content and no height
+    // openPopup fails to display it. Setting the height to 1px alows the panel
+    // to be displayed before has content or a real height i.e. the first time
+    // it is displayed.
+    this._panel.setAttribute("height", "1px");
+  }
+
+  this._toolbar.parentElement.insertBefore(this._panel, this._toolbar);
+
+  this._frame = devtoolbar._doc.createElementNS(NS_XHTML, "iframe");
+  this._frame.id = "gcli-tooltip-frame";
+  this._frame.setAttribute("src", "chrome://devtools/content/commandline/commandlinetooltip.xhtml");
+  this._frame.setAttribute("flex", "1");
+  this._frame.setAttribute("sandbox", "allow-same-origin");
+  this._panel.appendChild(this._frame);
+
+  /**
+   * Wire up the element from the iframe, and resolve the promise.
+   */
+  let onload = () => {
+    this._frame.removeEventListener("load", onload, true);
+
+    this.document = this._frame.contentDocument;
+    this._copyTheme();
+    this.hintElement = this.document.getElementById("gcli-tooltip-root");
+    this._connector = this.document.getElementById("gcli-tooltip-connector");
+
+    let styles = this._toolbar.ownerDocument.defaultView
+                    .getComputedStyle(this._toolbar);
+    this.hintElement.setAttribute("dir", styles.direction);
+
+    deferred.resolve(this);
+  };
+  this._frame.addEventListener("load", onload, true);
+
+  return deferred.promise;
+};
+
+/* Copy the current devtools theme attribute into the iframe,
+   so it can be styled correctly. */
+TooltipPanel.prototype._copyTheme = function () {
+  if (this.document) {
+    let theme =
+      this._devtoolbar._doc.documentElement.getAttribute("devtoolstheme");
+    this.document.documentElement.setAttribute("devtoolstheme", theme);
+  }
+};
+
+/**
+ * Prevent the popup from hiding if it is not permitted via this.canHide.
+ */
+TooltipPanel.prototype._onpopuphiding = function (ev) {
+  // TODO: When we switch back from tooltip to panel we can remove this hack:
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=780102
+  if (isLinux && !this.canHide) {
+    ev.preventDefault();
+  }
+};
+
+/**
+ * Display the TooltipPanel.
+ */
+TooltipPanel.prototype.show = function (dimensions) {
+  if (!dimensions) {
+    dimensions = { start: 0, end: 0 };
+  }
+  this._dimensions = dimensions;
+
+  // This is nasty, but displaying the panel causes it to re-flow, which can
+  // change the size it should be, so we need to resize the iframe after the
+  // panel has displayed
+  this._panel.ownerDocument.defaultView.setTimeout(() => {
+    this._resize();
+  }, 0);
+
+  if (isLinux) {
+    this.canHide = false;
+  }
+
+  this._copyTheme();
+  this._resize();
+  this._panel.openPopup(this._input, "before_start", dimensions.start * 10, 0,
+                        false, false, null);
+  this._input.focus();
+};
+
+/**
+ * One option is to spend lots of time taking an average width of characters
+ * in the current font, dynamically, and weighting for the frequency of use of
+ * various characters, or even to render the given string off screen, and then
+ * measure the width.
+ * Or we could do this...
+ */
+const AVE_CHAR_WIDTH = 4.5;
+
+/**
+ * Display the TooltipPanel.
+ */
+TooltipPanel.prototype._resize = function () {
+  if (this._panel == null || this.document == null || !this._panel.state == "closed") {
+    return;
+  }
+
+  let offset = 10 + Math.floor(this._dimensions.start * AVE_CHAR_WIDTH);
+  this._panel.style.marginLeft = offset + "px";
+
+  /*
+  // Bug 744906: UX review - Not sure if we want this code to fatten connector
+  // with param width
+  let width = Math.floor(this._dimensions.end * AVE_CHAR_WIDTH);
+  width = Math.min(width, 100);
+  width = Math.max(width, 10);
+  this._connector.style.width = width + "px";
+  */
+
+  this._frame.height = this.document.body.scrollHeight;
+};
+
+/**
+ * Hide the TooltipPanel.
+ */
+TooltipPanel.prototype.remove = function () {
+  if (isLinux) {
+    this.canHide = true;
+  }
+  if (this._panel && this._panel.hidePopup) {
+    this._panel.hidePopup();
+  }
+};
+
+/**
+ * Hide the TooltipPanel.
+ */
+TooltipPanel.prototype.destroy = function () {
+  this.remove();
+
+  this._panel.removeEventListener("popuphiding", this._onpopuphiding, true);
+
+  this._panel.removeChild(this._frame);
+  this._toolbar.parentElement.removeChild(this._panel);
+
+  delete this._connector;
+  delete this._dimensions;
+  delete this._input;
+  delete this._onpopuphiding;
+  delete this._panel;
+  delete this._frame;
+  delete this._toolbar;
+  delete this._content;
+  delete this.document;
+  delete this.hintElement;
+};
+
+/**
+ * Called by GCLI to indicate that we should show or hide one either the
+ * tooltip panel or the output panel.
+ */
+TooltipPanel.prototype._visibilityChanged = function (ev) {
+  if (ev.tooltipVisible === true) {
+    this.show(ev.dimensions);
+  } else {
+    if (isLinux) {
+      this.canHide = true;
+    }
+    this._panel.hidePopup();
+  }
+};