Backed out 2 changesets (bug 1307481) for mass dt bustage a=backout

Backed out changeset 91c6a72e5d0d (bug 1307481)
Backed out changeset a9f9f5611272 (bug 1307481)

devtools/client/inspector/inspector-search.js

@@ -175,8 +175,7 @@ function SelectorAutocompleter(inspector, inputNode) {
     onClick: this._onSearchPopupClick,
   };
 
-  // The popup will be attached to the toolbox document.
-  this.searchPopup = new AutocompletePopup(inspector._toolbox.doc, options);
+  this.searchPopup = new AutocompletePopup(inspector._toolbox, options);
 
   this.searchBox.addEventListener("input", this.showSuggestions, true);
   this.searchBox.addEventListener("keypress", this._onSearchKeypress, true);

devtools/client/inspector/markup/markup.js

@@ -104,11 +104,12 @@ function MarkupView(inspector, frame, controllerWindow) {
     Services.prefs.getIntPref(ATTR_COLLAPSE_LENGTH_PREF);
 
   // Creating the popup to be used to show CSS suggestions.
-  // The popup will be attached to the toolbox document.
-  this.popup = new AutocompletePopup(inspector.toolbox.doc, {
+  let options = {
     autoSelect: true,
     theme: "auto",
-  });
+  };
+
+  this.popup = new AutocompletePopup(inspector.toolbox, options);
 
   this.undo = new UndoStack();
   this.undo.installController(controllerWindow);
@@ -184,10 +185,9 @@ MarkupView.prototype = {
   },
 
   _initTooltips: function () {
-    // The tooltips will be attached to the toolbox document.
-    this.eventDetailsTooltip = new HTMLTooltip(this.toolbox.doc,
+    this.eventDetailsTooltip = new HTMLTooltip(this.toolbox,
       {type: "arrow"});
-    this.imagePreviewTooltip = new HTMLTooltip(this.toolbox.doc,
+    this.imagePreviewTooltip = new HTMLTooltip(this.toolbox,
       {type: "arrow", useXulWrapper: "true"});
     this._enableImagePreviewTooltip();
   },

devtools/client/inspector/rules/rules.js

@@ -159,11 +159,11 @@ function CssRuleView(inspector, document, store, pageStyle) {
   this.enableMdnDocsTooltip =
     Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP);
 
-  // The popup will be attached to the toolbox document.
-  this.popup = new AutocompletePopup(inspector._toolbox.doc, {
+  let options = {
     autoSelect: true,
     theme: "auto"
-  });
+  };
+  this.popup = new AutocompletePopup(inspector._toolbox, options);
 
   this._showEmpty();
 

devtools/client/inspector/shared/style-inspector-overlays.js

@@ -286,11 +286,8 @@ TooltipsOverlay.prototype = {
 
     let { toolbox } = this.view.inspector;
 
-    // Initializing the different tooltips that are used in the inspector.
-    // These tooltips are attached to the toolbox document if they require a popup panel.
-    // Otherwise, it is attached to the inspector panel document if it is an inline
-    // editor.
-    this.previewTooltip = new HTMLTooltip(toolbox.doc, {
+    // Image, fonts, ... preview tooltip
+    this.previewTooltip = new HTMLTooltip(toolbox, {
       type: "arrow",
       useXulWrapper: true
     });
@@ -298,15 +295,15 @@ TooltipsOverlay.prototype = {
       this._onPreviewTooltipTargetHover.bind(this));
 
     // MDN CSS help tooltip
-    this.cssDocs = new CssDocsTooltip(toolbox.doc);
+    this.cssDocs = new CssDocsTooltip(toolbox);
 
     if (this.isRuleView) {
       // Color picker tooltip
-      this.colorPicker = new SwatchColorPickerTooltip(toolbox.doc, this.view.inspector);
+      this.colorPicker = new SwatchColorPickerTooltip(toolbox, this.view.inspector);
       // Cubic bezier tooltip
-      this.cubicBezier = new SwatchCubicBezierTooltip(toolbox.doc);
+      this.cubicBezier = new SwatchCubicBezierTooltip(toolbox);
       // Filter editor tooltip
-      this.filterEditor = new SwatchFilterTooltip(toolbox.doc,
+      this.filterEditor = new SwatchFilterTooltip(toolbox,
         this._cssProperties.getValidityChecker(this.view.inspector.panelDoc));
     }
 

devtools/client/shared/autocomplete-popup.js

@@ -16,8 +16,8 @@ let itemIdCounter = 0;
  * Autocomplete popup UI implementation.
  *
  * @constructor
- * @param {Document} toolboxDoc
- *        The toolbox document to attach the autocomplete popup panel.
+ * @param {Toolbox} toolbox
+ *        The devtools toolbox required to instanciate the HTMLTooltip.
  * @param {Object} options
  *        An object consiting any of the following options:
  *        - listId {String} The id for the list <LI> element.
@@ -29,10 +29,10 @@ let itemIdCounter = 0;
  *        - onClick {String} Callback called when the autocomplete popup receives a click
  *          event. The selectedIndex will already be updated if need be.
  */
-function AutocompletePopup(toolboxDoc, options = {}) {
+function AutocompletePopup(toolbox, options = {}) {
   EventEmitter.decorate(this);
 
-  this._document = toolboxDoc;
+  this._document = toolbox.doc;
 
   this.autoSelect = options.autoSelect || false;
   this.position = options.position || "bottom";
@@ -51,7 +51,7 @@ function AutocompletePopup(toolboxDoc, options = {}) {
   }
 
   // Create HTMLTooltip instance
-  this._tooltip = new HTMLTooltip(this._document);
+  this._tooltip = new HTMLTooltip(toolbox);
   this._tooltip.panel.classList.add(
     "devtools-autocomplete-popup",
     "devtools-monospace",

devtools/client/shared/widgets/tooltip/CssDocsTooltip.js

@@ -15,11 +15,11 @@ const TOOLTIP_HEIGHT = 308;
 /**
  * Tooltip for displaying docs for CSS properties from MDN.
  *
- * @param {Document} toolboxDoc
- *        The toolbox document to attach the CSS docs tooltip.
+ * @param {Toolbox} toolbox
+ *        Toolbox used to create the tooltip.
  */
-function CssDocsTooltip(toolboxDoc) {
-  this.tooltip = new HTMLTooltip(toolboxDoc, {
+function CssDocsTooltip(toolbox) {
+  this.tooltip = new HTMLTooltip(toolbox, {
     type: "arrow",
     consumeOutsideClicks: true,
     autofocus: true,
@@ -31,7 +31,7 @@ function CssDocsTooltip(toolboxDoc) {
   this.widget.on("visitlink", this._onVisitLink);
 
   // Initialize keyboard shortcuts
-  this.shortcuts = new KeyShortcuts({ window: this.tooltip.topWindow });
+  this.shortcuts = new KeyShortcuts({ window: toolbox.win });
   this._onShortcut = this._onShortcut.bind(this);
 
   this.shortcuts.on("Escape", this._onShortcut);

devtools/client/shared/widgets/tooltip/HTMLTooltip.js

@@ -191,8 +191,8 @@ const getRelativeRect = function (node, relativeTo) {
 /**
  * The HTMLTooltip can display HTML content in a tooltip popup.
  *
- * @param {Document} toolboxDoc
- *        The toolbox document to attach the HTMLTooltip popup.
+ * @param {Toolbox} toolbox
+ *        The devtools toolbox, needed to get the devtools main window.
  * @param {Object}
  *        - {String} type
  *          Display type of the tooltip. Possible values: "normal", "arrow"
@@ -207,7 +207,7 @@ const getRelativeRect = function (node, relativeTo) {
  *        - {String} stylesheet
  *          Style sheet URL to apply to the tooltip content.
  */
-function HTMLTooltip(toolboxDoc, {
+function HTMLTooltip(toolbox, {
     type = "normal",
     autofocus = false,
     consumeOutsideClicks = true,
@@ -216,7 +216,7 @@ function HTMLTooltip(toolboxDoc, {
   } = {}) {
   EventEmitter.decorate(this);
 
-  this.doc = toolboxDoc;
+  this.doc = toolbox.doc;
   this.type = type;
   this.autofocus = autofocus;
   this.consumeOutsideClicks = consumeOutsideClicks;

devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js

@@ -12,18 +12,16 @@ const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLToolti
  * Base class for all (color, gradient, ...)-swatch based value editors inside
  * tooltips
  *
- * @param {Document} document
- *        The document to attach the SwatchBasedEditorTooltip. This is either the toolbox
- *        document if the tooltip is a popup tooltip or the panel's document if it is an
- *        inline editor.
+ * @param {Toolbox} toolbox
+ *        The devtools toolbox, needed to get the devtools main window.
  */
-function SwatchBasedEditorTooltip(document, stylesheet) {
+function SwatchBasedEditorTooltip(toolbox, stylesheet) {
   EventEmitter.decorate(this);
   // Creating a tooltip instance
   // This one will consume outside clicks as it makes more sense to let the user
   // close the tooltip by clicking out
   // It will also close on <escape> and <enter>
-  this.tooltip = new HTMLTooltip(document, {
+  this.tooltip = new HTMLTooltip(toolbox, {
     type: "arrow",
     consumeOutsideClicks: true,
     useXulWrapper: true,

devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js

@@ -20,16 +20,14 @@ const XHTML_NS = "http://www.w3.org/1999/xhtml";
  * It just wraps a standard Tooltip and sets its content with an instance of a
  * color picker.
  *
- * @param {Document} document
- *        The document to attach the SwatchColorPickerTooltip. This is either the toolbox
- *        document if the tooltip is a popup tooltip or the panel's document if it is an
- *        inline editor.
+ * @param {Toolbox} toolbox
+ *        The devtools toolbox, needed to get the devtools main window.
  * @param {InspectorPanel} inspector
  *        The inspector panel, needed for the eyedropper.
  */
-function SwatchColorPickerTooltip(document, inspector) {
+function SwatchColorPickerTooltip(toolbox, inspector) {
   let stylesheet = "chrome://devtools/content/shared/widgets/spectrum.css";
-  SwatchBasedEditorTooltip.call(this, document, stylesheet);
+  SwatchBasedEditorTooltip.call(this, toolbox, stylesheet);
 
   this.inspector = inspector;
 

devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js

@@ -20,14 +20,12 @@ const XHTML_NS = "http://www.w3.org/1999/xhtml";
  * It just wraps a standard Tooltip and sets its content with an instance of a
  * CubicBezierWidget.
  *
- * @param {Document} document
- *        The document to attach the SwatchCubicBezierTooltip. This is either the toolbox
- *        document if the tooltip is a popup tooltip or the panel's document if it is an
- *        inline editor.
+ * @param {Toolbox} toolbox
+ *        The devtools toolbox, needed to get the devtools main window.
  */
-function SwatchCubicBezierTooltip(document) {
+function SwatchCubicBezierTooltip(toolbox) {
   let stylesheet = "chrome://devtools/content/shared/widgets/cubic-bezier.css";
-  SwatchBasedEditorTooltip.call(this, document, stylesheet);
+  SwatchBasedEditorTooltip.call(this, toolbox, stylesheet);
 
   // Creating a cubic-bezier instance.
   // this.widget will always be a promise that resolves to the widget instance

devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js

@@ -19,17 +19,15 @@ const XHTML_NS = "http://www.w3.org/1999/xhtml";
  * It just wraps a standard Tooltip and sets its content with an instance of a
  * CSSFilterEditorWidget.
  *
- * @param {Document} document
- *        The document to attach the SwatchFilterTooltip. This is either the toolbox
- *        document if the tooltip is a popup tooltip or the panel's document if it is an
- *        inline editor.
+ * @param {Toolbox} toolbox
+ *        The devtools toolbox, needed to get the devtools main window.
  * @param {function} cssIsValid
  *        A function to check that css declaration's name and values are valid together.
  *        This can be obtained from "shared/fronts/css-properties.js".
  */
-function SwatchFilterTooltip(document, cssIsValid) {
+function SwatchFilterTooltip(toolbox, cssIsValid) {
   let stylesheet = "chrome://devtools/content/shared/widgets/filter-widget.css";
-  SwatchBasedEditorTooltip.call(this, document, stylesheet);
+  SwatchBasedEditorTooltip.call(this, toolbox, stylesheet);
   this._cssIsValid = cssIsValid;
 
   // Creating a filter editor instance.

devtools/client/shared/widgets/tooltip/Tooltip.js

@@ -33,6 +33,65 @@ const POPUP_EVENTS = ["shown", "hidden", "showing", "hiding"];
  * specific element or group of elements (which is usually the most common case)
  */
 
+/**
+ * Container used for dealing with optional parameters.
+ *
+ * @param {Object} defaults
+ *        An object with all default options {p1: v1, p2: v2, ...}
+ * @param {Object} options
+ *        The actual values.
+ */
+function OptionsStore(defaults, options) {
+  this.defaults = defaults || {};
+  this.options = options || {};
+}
+
+OptionsStore.prototype = {
+  /**
+   * Get the value for a given option name.
+   * @return {Object} Returns the value for that option, coming either for the
+   *         actual values that have been set in the constructor, or from the
+   *         defaults if that options was not specified.
+   */
+  get: function (name) {
+    if (typeof this.options[name] !== "undefined") {
+      return this.options[name];
+    }
+    return this.defaults[name];
+  }
+};
+
+/**
+ * The low level structure of a tooltip is a XUL element (a <panel>).
+ */
+var PanelFactory = {
+  /**
+   * Get a new XUL panel instance.
+   * @param {XULDocument} doc
+   *        The XUL document to put that panel into
+   * @param {OptionsStore} options
+   *        An options store to get some configuration from
+   */
+  get: function (doc, options) {
+    // Create the tooltip
+    let panel = doc.createElement("panel");
+    panel.setAttribute("hidden", true);
+    panel.setAttribute("ignorekeys", true);
+    panel.setAttribute("animate", false);
+
+    panel.setAttribute("consumeoutsideclicks",
+                       options.get("consumeOutsideClick"));
+    panel.setAttribute("noautofocus", options.get("noAutoFocus"));
+    panel.setAttribute("type", "arrow");
+    panel.setAttribute("level", "top");
+
+    panel.setAttribute("class", "devtools-tooltip theme-tooltip-panel");
+    doc.querySelector("window").appendChild(panel);
+
+    return panel;
+  }
+};
+
 /**
  * Tooltip class.
  *
@@ -87,21 +146,17 @@ const POPUP_EVENTS = ["shown", "hidden", "showing", "hiding"];
  * - hidden : when the tooltip gets hidden
  * - keypress : when any key gets pressed, with keyCode
  */
-function Tooltip(doc, {
-  consumeOutsideClick = false,
-  closeOnKeys = [ESCAPE_KEYCODE],
-  noAutoFocus = true,
-  closeOnEvents = [],
-  } = {}) {
+function Tooltip(doc, options) {
   EventEmitter.decorate(this);
 
   this.doc = doc;
-  this.consumeOutsideClick = consumeOutsideClick;
-  this.closeOnKeys = closeOnKeys;
-  this.noAutoFocus = noAutoFocus;
-  this.closeOnEvents = closeOnEvents;
-
-  this.panel = this._createPanel();
+  this.options = new OptionsStore({
+    consumeOutsideClick: false,
+    closeOnKeys: [ESCAPE_KEYCODE],
+    noAutoFocus: true,
+    closeOnEvents: []
+  }, options);
+  this.panel = PanelFactory.get(doc, this.options);
 
   // Create tooltip toggle helper and decorate the Tooltip instance with
   // shortcut methods.
@@ -130,7 +185,7 @@ function Tooltip(doc, {
     }
 
     this.emit("keypress", event.keyCode);
-    if (this.closeOnKeys.indexOf(event.keyCode) !== -1 &&
+    if (this.options.get("closeOnKeys").indexOf(event.keyCode) !== -1 &&
         this.isShown()) {
       event.stopPropagation();
       this.hide();
@@ -140,7 +195,8 @@ function Tooltip(doc, {
 
   // Listen to custom emitters' events to close the tooltip
   this.hide = this.hide.bind(this);
-  for (let {emitter, event, useCapture} of this.closeOnEvents) {
+  let closeOnEvents = this.options.get("closeOnEvents");
+  for (let {emitter, event, useCapture} of closeOnEvents) {
     for (let add of ["addEventListener", "on"]) {
       if (add in emitter) {
         emitter[add](event, this.hide, useCapture);
@@ -235,7 +291,8 @@ Tooltip.prototype = {
     let win = this.doc.querySelector("window");
     win.removeEventListener("keypress", this._onKeyPress, false);
 
-    for (let {emitter, event, useCapture} of this.closeOnEvents) {
+    let closeOnEvents = this.options.get("closeOnEvents");
+    for (let {emitter, event, useCapture} of closeOnEvents) {
       for (let remove of ["removeEventListener", "off"]) {
         if (remove in emitter) {
           emitter[remove](event, this.hide, useCapture);
@@ -383,27 +440,6 @@ Tooltip.prototype = {
     this.content = iframe;
 
     return def.promise;
-  },
-
-  /**
-   * Create the tooltip panel
-   */
-  _createPanel() {
-    let panel = this.doc.createElement("panel");
-    panel.setAttribute("hidden", true);
-    panel.setAttribute("ignorekeys", true);
-    panel.setAttribute("animate", false);
-
-    panel.setAttribute("consumeoutsideclicks",
-                       this.consumeOutsideClick);
-    panel.setAttribute("noautofocus", this.noAutoFocus);
-    panel.setAttribute("type", "arrow");
-    panel.setAttribute("level", "top");
-
-    panel.setAttribute("class", "devtools-tooltip theme-tooltip-panel");
-    this.doc.querySelector("window").appendChild(panel);
-
-    return panel;
   }
 };
 

devtools/client/webconsole/jsterm.js

@@ -252,11 +252,13 @@ JSTerm.prototype = {
     };
 
     let doc = this.hud.document;
+
     let toolbox = gDevTools.getToolbox(this.hud.owner.target);
-    let tooltipDoc = toolbox ? toolbox.doc : doc;
-    // The popup will be attached to the toolbox document or HUD document in the case
-    // such as the browser console which doesn't have a toolbox.
-    this.autocompletePopup = new AutocompletePopup(tooltipDoc, autocompleteOptions);
+    if (!toolbox) {
+      // In some cases (e.g. Browser Console), there is no toolbox.
+      toolbox = { doc };
+    }
+    this.autocompletePopup = new AutocompletePopup(toolbox, autocompleteOptions);
 
     let inputContainer = doc.querySelector(".jsterm-input-container");
     this.completeNode = doc.querySelector(".jsterm-complete-node");