The Tor Browser: browser/devtools/shared/DeveloperToolbar.jsm@6474c204b198 (annotated)

browser/devtools/shared/DeveloperToolbar.jsm@6474c204b198 (annotated)

browser/devtools/shared/DeveloperToolbar.jsm

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";
 this.EXPORTED_SYMBOLS = [ "DeveloperToolbar", "CommandUtils" ];
 const NS_XHTML = "http://www.w3.org/1999/xhtml";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 const { require, TargetFactory } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
 const Node = Ci.nsIDOMNode;
 XPCOMUtils.defineLazyModuleGetter(this, "console",
                                   "resource://gre/modules/devtools/Console.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "PluralForm",
                                   "resource://gre/modules/PluralForm.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "EventEmitter",
                                   "resource://gre/modules/devtools/event-emitter.js");
 XPCOMUtils.defineLazyGetter(this, "prefBranch", function() {
   let prefService = Cc["@mozilla.org/preferences-service;1"]
                     .getService(Ci.nsIPrefService);
   return prefService.getBranch(null)
                     .QueryInterface(Ci.nsIPrefBranch2);
 });
 XPCOMUtils.defineLazyGetter(this, "toolboxStrings", function () {
   return Services.strings.createBundle("chrome://browser/locale/devtools/toolbox.properties");
 });
 const Telemetry = require("devtools/shared/telemetry");
 // This lazy getter is needed to prevent a require loop
 XPCOMUtils.defineLazyGetter(this, "gcli", () => {
   let gcli = require("gcli/index");
   require("devtools/commandline/commands-index");
   gcli.load();
   return gcli;
 });
 Object.defineProperty(this, "ConsoleServiceListener", {
   get: function() {
     return require("devtools/toolkit/webconsole/utils").ConsoleServiceListener;
   },
   configurable: true,
   enumerable: true
 });
 const promise = Cu.import('resource://gre/modules/Promise.jsm', {}).Promise;
 /**
  * A collection of utilities to help working with commands
  */
 let CommandUtils = {
   /**
    * Utility to ensure that things are loaded in the correct order
    */
   createRequisition: function(environment) {
     let temp = gcli.createDisplay; // Ensure GCLI is loaded
     let Requisition = require("gcli/cli").Requisition
     return new Requisition({ environment: environment });
   },
   /**
    * 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 buttonSpecs. A buttonSpec is an array of
    * strings each of which is a GCLI command (including args if needed).
    *
    * 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) {
     let reply = [];
     toolbarSpec.forEach(function(buttonSpec) {
       let button = document.createElement("toolbarbutton");
       reply.push(button);
       if (typeof buttonSpec == "string") {
         buttonSpec = { typed: buttonSpec };
       }
       // Ask GCLI to parse the typed string (doesn't execute it)
       requisition.update(buttonSpec.typed);
       // Ignore invalid commands
       let command = requisition.commandAssignment.value;
       if (command == null) {
         // TODO: Have a broken icon
         // button.icon = 'Broken';
         button.setAttribute("label", "X");
         button.setAttribute("tooltip", "Unknown command: " + buttonSpec.typed);
         button.setAttribute("disabled", "true");
       }
       else {
         if (command.buttonId != null) {
           button.id = command.buttonId;
         }
         if (command.buttonClass != null) {
           button.className = command.buttonClass;
         }
         if (command.tooltipText != null) {
           button.setAttribute("tooltiptext", command.tooltipText);
         }
         else if (command.description != null) {
           button.setAttribute("tooltiptext", command.description);
         }
         button.addEventListener("click", function() {
           requisition.update(buttonSpec.typed);
           //if (requisition.getStatus() == Status.VALID) {
             requisition.exec();
           /*
           }
           else {
             console.error('incomplete commands not yet supported');
           }
           */
         }, false);
         // Allow the command button to be toggleable
         if (command.state) {
           button.setAttribute("autocheck", false);
           let onChange = function(event, eventTab) {
             if (eventTab == target.tab) {
               if (command.state.isChecked(target)) {
                 button.setAttribute("checked", true);
               }
               else if (button.hasAttribute("checked")) {
                 button.removeAttribute("checked");
               }
             }
           };
           command.state.onChange(target, onChange);
           onChange(null, target.tab);
           document.defaultView.addEventListener("unload", function() {
             command.state.offChange(target, onChange);
           }, false);
         }
       }
     });
     requisition.update('');
     return reply;
   },
   /**
    * 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].supports == null) {
       throw new Error('Missing target');
     }
     return {
       get target() {
         if (container[targetProperty].supports == null) {
           throw new Error('Removed target');
         }
         return container[targetProperty];
       },
       get chromeWindow() {
         return this.target.tab.ownerDocument.defaultView;
       },
       get chromeDocument() {
         return this.chromeWindow.document;
       },
       get window() {
         return this.chromeWindow.getBrowser().selectedTab.linkedBrowser.contentWindow;
       },
       get document() {
         return this.window.document;
       }
     };
   },
 };
 this.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.
  */
 XPCOMUtils.defineLazyGetter(this, "isLinux", function() {
   return OS == "Linux";
 });
 XPCOMUtils.defineLazyGetter(this, "OS", function() {
   let os = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
   return os;
 });
 /**
  * A component to manage the global developer toolbar, which contains a GCLI
  * and buttons for various developer tools.
  * @param aChromeWindow The browser window to which this toolbar is attached
  * @param aToolbarElement See browser.xul:<toolbar id="developer-toolbar">
  */
 this.DeveloperToolbar = function DeveloperToolbar(aChromeWindow, aToolbarElement)
 {
   this._chromeWindow = aChromeWindow;
   this._element = aToolbarElement;
   this._element.hidden = true;
   this._doc = this._element.ownerDocument;
   this._telemetry = new Telemetry();
   this._errorsCount = {};
   this._warningsCount = {};
   this._errorListeners = {};
   this._errorCounterButton = this._doc
                              .getElementById("developer-toolbar-toolbox-button");
   this._errorCounterButton._defaultTooltipText =
       this._errorCounterButton.getAttribute("tooltiptext");
   EventEmitter.decorate(this);
 }
 /**
  * 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;
 Object.defineProperty(DeveloperToolbar.prototype, "target", {
   get: function() {
     return TargetFactory.forTab(this._chromeWindow.getBrowser().selectedTab);
   },
   enumerable: true
 });
 /**
  * Is the toolbar open?
  */
 Object.defineProperty(DeveloperToolbar.prototype, 'visible', {
   get: function DT_visible() {
     return !this._element.hidden;
   },
   enumerable: true
 });
 let _gSequenceId = 0;
 /**
  * Getter for a unique ID.
  */
 Object.defineProperty(DeveloperToolbar.prototype, 'sequenceId', {
   get: function DT_visible() {
     return _gSequenceId++;
   },
   enumerable: true
 });
 /**
  * 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();
   } else {
     return this.show(true);
   }
 };
 /**
  * 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();
   } else {
     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 & Node.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;
   }
   // hide() is async, so ensure we don't need to wait for hide() to finish
   var waitPromise = this._hidePromise || promise.resolve();
   this._showPromise = waitPromise.then(() => {
     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)
     ];
     return promise.all(panelPromises).then(panels => {
       [ this.tooltipPanel, this.outputPanel ] = panels;
       this._doc.getElementById("Tools:DevToolbar").setAttribute("checked", "true");
       this.display = gcli.createDisplay({
         contentDocument: this._chromeWindow.getBrowser().contentDocument,
         chromeDocument: this._doc,
         chromeWindow: this._chromeWindow,
         hintElement: this.tooltipPanel.hintElement,
         inputElement: this._input,
         completeElement: this._doc.querySelector(".gclitoolbar-complete-node"),
         backgroundElement: this._doc.querySelector(".gclitoolbar-stack-node"),
         outputDocument: this.outputPanel.document,
         environment: CommandUtils.createEnvironment(this, "target"),
         tooltipClass: "gcliterm-tooltip",
         eval: null,
         scratchpad: null
       });
       this.display.focusManager.addMonitoredElement(this.outputPanel._frame);
       this.display.focusManager.addMonitoredElement(this._element);
       this.display.onVisibilityChange.add(this.outputPanel._visibilityChanged,
                                           this.outputPanel);
       this.display.onVisibilityChange.add(this.tooltipPanel._visibilityChanged,
                                           this.tooltipPanel);
       this.display.onOutput.add(this.outputPanel._outputChanged, this.outputPanel);
       let tabbrowser = this._chromeWindow.getBrowser();
       tabbrowser.tabContainer.addEventListener("TabSelect", this, false);
       tabbrowser.tabContainer.addEventListener("TabClose", this, false);
       tabbrowser.addEventListener("load", this, true);
       tabbrowser.addEventListener("beforeunload", this, true);
       this._initErrorsCount(tabbrowser.selectedTab);
       this._devtoolsUnloaded = this._devtoolsUnloaded.bind(this);
       this._devtoolsLoaded = this._devtoolsLoaded.bind(this);
       Services.obs.addObserver(this._devtoolsUnloaded, "devtools-unloaded", false);
       Services.obs.addObserver(this._devtoolsLoaded, "devtools-loaded", false);
       this._element.hidden = false;
       if (focus) {
         this._input.focus();
       }
       this._notify(NOTIFICATIONS.SHOW);
       if (!DeveloperToolbar.introShownThisSession) {
         this.display.maybeShowIntro();
         DeveloperToolbar.introShownThisSession = true;
       }
       this._showPromise = null;
     });
   });
   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
   var waitPromise = this._showPromise || promise.resolve();
   this._hidePromise = waitPromise.then(() => {
     this._element.hidden = true;
     Services.prefs.setBoolPref("devtools.toolbar.visible", false);
     this._doc.getElementById("Tools:DevToolbar").setAttribute("checked", "false");
     this.destroy();
     this._telemetry.toolClosed("developertoolbar");
     this._notify(NOTIFICATIONS.HIDE);
     this._hidePromise = null;
   });
   return this._hidePromise;
 };
 /**
  * The devtools-unloaded event handler.
  * @private
  */
 DeveloperToolbar.prototype._devtoolsUnloaded = function() {
   let tabbrowser = this._chromeWindow.getBrowser();
   Array.prototype.forEach.call(tabbrowser.tabs, this._stopErrorsCount, this);
 };
 /**
  * The devtools-loaded event handler.
  * @private
  */
 DeveloperToolbar.prototype._devtoolsLoaded = function() {
   let tabbrowser = this._chromeWindow.getBrowser();
   this._initErrorsCount(tabbrowser.selectedTab);
 };
 /**
  * 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) {
     return; // Already destroyed
   }
   let tabbrowser = this._chromeWindow.getBrowser();
   tabbrowser.tabContainer.removeEventListener("TabSelect", this, false);
   tabbrowser.tabContainer.removeEventListener("TabClose", this, false);
   tabbrowser.removeEventListener("load", this, true);
   tabbrowser.removeEventListener("beforeunload", this, true);
   Services.obs.removeObserver(this._devtoolsUnloaded, "devtools-unloaded");
   Services.obs.removeObserver(this._devtoolsLoaded, "devtools-loaded");
   Array.prototype.forEach.call(tabbrowser.tabs, this._stopErrorsCount, this);
   this.display.focusManager.removeMonitoredElement(this.outputPanel._frame);
   this.display.focusManager.removeMonitoredElement(this._element);
   this.display.onVisibilityChange.remove(this.outputPanel._visibilityChanged, this.outputPanel);
   this.display.onVisibilityChange.remove(this.tooltipPanel._visibilityChanged, this.tooltipPanel);
   this.display.onOutput.remove(this.outputPanel._outputChanged, this.outputPanel);
   this.display.destroy();
   this.outputPanel.destroy();
   this.tooltipPanel.destroy();
   delete this._input;
   // We could "delete this.display" etc if we have hard-to-track-down memory
   // leaks as a belt-and-braces approach, however this prevents our DOM node
   // hunter from looking in all the nooks and crannies, so it's better if we
   // can be leak-free without
   /*
   delete this.display;
   delete this.outputPanel;
   delete this.tooltipPanel;
   */
 };
 /**
  * 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) {
       this.display.reattach({
         contentDocument: this._chromeWindow.getBrowser().contentDocument
       });
       if (ev.type == "TabSelect") {
         this._initErrorsCount(ev.target);
       }
     }
   }
   else if (ev.type == "TabClose") {
     this._stopErrorsCount(ev.target);
   }
   else if (ev.type == "beforeunload") {
     this._onPageBeforeUnload(ev);
   }
 };
 /**
  * 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.getBrowser().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.getBrowser().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 = toolboxStrings
                      .GetStringFromName("toolboxToggleButton.errors");
     errorsText = PluralForm.get(errors, errorsText).replace("#1", errors);
     let warningsText = toolboxStrings
                        .GetStringFromName("toolboxToggleButton.warnings");
     warningsText = PluralForm.get(warnings, warningsText).replace("#1", warnings);
     let tooltiptext = toolboxStrings
                       .formatStringFromName("toolboxToggleButton.tooltip",
                                             [errorsText, warningsText], 2);
     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) {
   var 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://browser/content/devtools/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://browser/content/devtools/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 = promise.defer();
   let onload = () => {
     this._frame.removeEventListener("load", onload, true);
     this.document = this._frame.contentDocument;
     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;
 }
 /**
  * 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._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(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.display.requisition.conversionContext;
     this.displayedOutput.convert('dom', context).then((node) => {
       while (this._div.hasChildNodes()) {
         this._div.removeChild(this._div.firstChild);
       }
       var links = node.ownerDocument.querySelectorAll('*[href]');
       for (var 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) {
   var tooltipPanel = Object.create(TooltipPanel.prototype);
   return tooltipPanel._init(devtoolbar);
 };
 /**
  * @private See TooltipPanel.create
  */
 TooltipPanel.prototype._init = function(devtoolbar) {
   let deferred = promise.defer();
   let chromeDocument = devtoolbar._doc;
   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://browser/content/devtools/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://browser/content/devtools/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.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;
 }
 /**
  * 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._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();
   }
 };

The Tor Browser / annotate

browser/devtools/shared/DeveloperToolbar.jsm@6474c204b198 (annotated)

browser/devtools/shared/DeveloperToolbar.jsm