Bug 1307481 - Part 3: HTMLTooltip should receive the document that it should be attached to instead of the toolbox r=jdescottes

devtools/client/inspector/inspector-search.js

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

devtools/client/inspector/markup/markup.js

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

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

@@ -286,8 +286,11 @@ TooltipsOverlay.prototype = {
 
     let { toolbox } = this.view.inspector;
 
-    // Image, fonts, ... preview tooltip
-    this.previewTooltip = new HTMLTooltip(toolbox, {
+    // 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, {
       type: "arrow",
       useXulWrapper: true
     });
@@ -295,15 +298,15 @@ TooltipsOverlay.prototype = {
       this._onPreviewTooltipTargetHover.bind(this));
 
     // MDN CSS help tooltip
-    this.cssDocs = new CssDocsTooltip(toolbox);
+    this.cssDocs = new CssDocsTooltip(toolbox.doc);
 
     if (this.isRuleView) {
       // Color picker tooltip
-      this.colorPicker = new SwatchColorPickerTooltip(toolbox, this.view.inspector);
+      this.colorPicker = new SwatchColorPickerTooltip(toolbox.doc, this.view.inspector);
       // Cubic bezier tooltip
-      this.cubicBezier = new SwatchCubicBezierTooltip(toolbox);
+      this.cubicBezier = new SwatchCubicBezierTooltip(toolbox.doc);
       // Filter editor tooltip
-      this.filterEditor = new SwatchFilterTooltip(toolbox,
+      this.filterEditor = new SwatchFilterTooltip(toolbox.doc,
         this._cssProperties.getValidityChecker(this.view.inspector.panelDoc));
     }
 

devtools/client/netmonitor/netmonitor-view.js

@@ -477,7 +477,8 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
       .createInstance(Ci.nsITimer);
 
     // Create a tooltip for the newly appended network request item.
-    this.tooltip = new HTMLTooltip(NetMonitorController._toolbox, { type: "arrow" });
+    // The popup will be attached to the toolbox document.
+    this.tooltip = new HTMLTooltip(NetMonitorController._toolbox.doc, { type: "arrow" });
     this.tooltip.startTogglingOnHover(widgetParentEl, this._onHover, {
       toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
       interactive: true

devtools/client/shared/autocomplete-popup.js

@@ -16,8 +16,8 @@ let itemIdCounter = 0;
  * Autocomplete popup UI implementation.
  *
  * @constructor
- * @param {Toolbox} toolbox
- *        The devtools toolbox required to instanciate the HTMLTooltip.
+ * @param {Document} toolboxDoc
+ *        The toolbox document to attach the autocomplete popup panel.
  * @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(toolbox, options = {}) {
+function AutocompletePopup(toolboxDoc, options = {}) {
   EventEmitter.decorate(this);
 
-  this._document = toolbox.doc;
+  this._document = toolboxDoc;
 
   this.autoSelect = options.autoSelect || false;
   this.position = options.position || "bottom";
@@ -51,7 +51,7 @@ function AutocompletePopup(toolbox, options = {}) {
   }
 
   // Create HTMLTooltip instance
-  this._tooltip = new HTMLTooltip(toolbox);
+  this._tooltip = new HTMLTooltip(this._document);
   this._tooltip.panel.classList.add(
     "devtools-autocomplete-popup",
     "devtools-monospace",

devtools/client/shared/test/browser_html_tooltip-01.js

@@ -49,7 +49,7 @@ add_task(function* () {
 
 function* runTests(doc) {
   yield addTab("about:blank");
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper});
 
   info("Set tooltip content");
   tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});

devtools/client/shared/test/browser_html_tooltip-02.js

@@ -54,7 +54,7 @@ function* runTests(doc) {
 function* testClickInTooltipContent(doc) {
   info("Test a tooltip is not closed when clicking inside itself");
 
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper});
   tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
   yield showTooltip(tooltip, doc.getElementById("box1"));
 
@@ -70,7 +70,7 @@ function* testConsumeOutsideClicksFalse(doc) {
   info("Test closing a tooltip via click with consumeOutsideClicks: false");
   let box4 = doc.getElementById("box4");
 
-  let tooltip = new HTMLTooltip({doc}, {consumeOutsideClicks: false, useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {consumeOutsideClicks: false, useXulWrapper});
   tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
   yield showTooltip(tooltip, doc.getElementById("box1"));
 
@@ -93,7 +93,7 @@ function* testConsumeOutsideClicksTrue(doc) {
   let box4clicks = 0;
   box4.addEventListener("click", () => box4clicks++);
 
-  let tooltip = new HTMLTooltip({doc}, {consumeOutsideClicks: true, useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {consumeOutsideClicks: true, useXulWrapper});
   tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
   yield showTooltip(tooltip, doc.getElementById("box1"));
 
@@ -111,7 +111,7 @@ function* testConsumeWithRightClick(doc) {
   info("Test closing a tooltip with a right-click, with consumeOutsideClicks: true");
   let box4 = doc.getElementById("box4");
 
-  let tooltip = new HTMLTooltip({doc}, {consumeOutsideClicks: true, useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {consumeOutsideClicks: true, useXulWrapper});
   tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
   yield showTooltip(tooltip, doc.getElementById("box1"));
 
@@ -133,7 +133,7 @@ function* testClickInOuterIframe(doc) {
   info("Test clicking an iframe outside of the tooltip closes the tooltip");
   let frame = doc.getElementById("frame");
 
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper});
   tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
   yield showTooltip(tooltip, doc.getElementById("box1"));
 
@@ -148,7 +148,7 @@ function* testClickInOuterIframe(doc) {
 function* testClickInInnerIframe(doc) {
   info("Test clicking an iframe inside the tooltip content does not close the tooltip");
 
-  let tooltip = new HTMLTooltip({doc}, {consumeOutsideClicks: false, useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {consumeOutsideClicks: false, useXulWrapper});
 
   let iframe = doc.createElementNS(HTML_NS, "iframe");
   iframe.style.width = "100px";

devtools/client/shared/test/browser_html_tooltip-03.js

@@ -144,7 +144,7 @@ function blurNode(doc, selector) {
  *         tooltip content will be ready.
  */
 function* createTooltip(doc, autofocus) {
-  let tooltip = new HTMLTooltip({doc}, {autofocus, useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {autofocus, useXulWrapper});
   let div = doc.createElementNS(HTML_NS, "div");
   div.classList.add("tooltip-content");
   div.style.height = "50px";

devtools/client/shared/test/browser_html_tooltip-04.js

@@ -40,7 +40,7 @@ add_task(function* () {
   let [,, doc] = yield createHost("bottom", TEST_URI);
 
   info("Create HTML tooltip");
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper: false});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   let div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "100%";
   tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});

devtools/client/shared/test/browser_html_tooltip-05.js

@@ -36,7 +36,7 @@ add_task(function* () {
   let [,, doc] = yield createHost("bottom", TEST_URI);
 
   info("Create HTML tooltip");
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper: false});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   let div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "100%";
   tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});

devtools/client/shared/test/browser_html_tooltip_arrow-01.js

@@ -69,7 +69,7 @@ add_task(function* () {
 
 function* runTests(doc) {
   info("Create HTML tooltip");
-  let tooltip = new HTMLTooltip({doc}, {type: "arrow", useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {type: "arrow", useXulWrapper});
   let div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "35px";
   tooltip.setContent(div, {width: 200, height: 35});

devtools/client/shared/test/browser_html_tooltip_arrow-02.js

@@ -62,7 +62,7 @@ add_task(function* () {
 
 function* runTests(doc) {
   info("Create HTML tooltip");
-  let tooltip = new HTMLTooltip({doc}, {type: "arrow", useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {type: "arrow", useXulWrapper});
   let div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "35px";
   tooltip.setContent(div, {width: 200, height: 35});

devtools/client/shared/test/browser_html_tooltip_consecutive-show.js

@@ -43,7 +43,7 @@ add_task(function* () {
 
   let width = 100, height = 50;
 
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper: false});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   tooltip.setContent(getTooltipContent(doc), {width, height});
 
   info("Show the tooltip on each of the 4 hbox, without calling hide in between");

devtools/client/shared/test/browser_html_tooltip_hover.js

@@ -32,7 +32,7 @@ add_task(function* () {
   let width = 100, height = 50;
   let tooltipContent = doc.createElementNS(HTML_NS, "div");
   tooltipContent.textContent = "tooltip";
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper: false});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   tooltip.setContent(tooltipContent, {width, height});
 
   let container = doc.getElementById("container");

devtools/client/shared/test/browser_html_tooltip_offset.js

@@ -39,7 +39,7 @@ add_task(function* () {
   let box3 = doc.getElementById("box3");
   let box4 = doc.getElementById("box4");
 
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper: false});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
 
   let div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "100px";

devtools/client/shared/test/browser_html_tooltip_rtl.js

@@ -40,7 +40,7 @@ add_task(function* () {
 
   info("Test a tooltip is not closed when clicking inside itself");
 
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper: false});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   let div = doc.createElementNS(HTML_NS, "div");
   div.textContent = "tooltip";
   div.style.cssText = "box-sizing: border-box; border: 1px solid black";

devtools/client/shared/test/browser_html_tooltip_variable-height.js

@@ -36,7 +36,7 @@ add_task(function* () {
   yield addTab("about:blank");
   let [,, doc] = yield createHost("bottom", TEST_URI);
 
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper: false});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   info("Set tooltip content 50px tall, but request a container 200px tall");
   let tooltipContent = doc.createElementNS(HTML_NS, "div");
   tooltipContent.style.cssText = "height: " + TOOLTIP_HEIGHT + "px; background: red;";

devtools/client/shared/test/browser_html_tooltip_width-auto.js

@@ -41,7 +41,7 @@ add_task(function* () {
 });
 
 function* runTests(doc) {
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper});
   info("Create tooltip content width to 150px");
   let tooltipContent = doc.createElementNS(HTML_NS, "div");
   tooltipContent.style.cssText = "height: 100%; width: 150px; background: red;";

devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js

@@ -43,7 +43,7 @@ add_task(function* () {
   win.top.resizeBy(0, -100);
 
   info("Create HTML tooltip");
-  let tooltip = new HTMLTooltip({doc}, {useXulWrapper: true});
+  let tooltip = new HTMLTooltip(doc, {useXulWrapper: true});
   let div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "200px";
   div.style.background = "red";

devtools/client/shared/test/browser_inplace-editor_autocomplete_01.js

@@ -48,7 +48,7 @@ add_task(function* () {
   let [host, win, doc] = yield createHost();
 
   let xulDocument = win.top.document;
-  let popup = new AutocompletePopup({ doc: xulDocument }, { autoSelect: true });
+  let popup = new AutocompletePopup(xulDocument, { autoSelect: true });
   yield new Promise(resolve => {
     createInplaceEditorAndClick({
       start: runPropertyAutocompletionTest,

devtools/client/shared/test/browser_inplace-editor_autocomplete_02.js

@@ -49,7 +49,7 @@ add_task(function* () {
   let [host, win, doc] = yield createHost();
 
   let xulDocument = win.top.document;
-  let popup = new AutocompletePopup({ doc: xulDocument }, { autoSelect: true });
+  let popup = new AutocompletePopup(xulDocument, { autoSelect: true });
 
   yield new Promise(resolve => {
     createInplaceEditorAndClick({

devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js

@@ -69,7 +69,7 @@ add_task(function* () {
   yield addTab("data:text/html;charset=utf-8,inplace editor CSS value autocomplete");
   let [host,, doc] = yield createHost("bottom", TEST_URI);
 
-  let popup = new AutocompletePopup({ doc }, { autoSelect: true });
+  let popup = new AutocompletePopup(doc, { autoSelect: true });
 
   info("Create a CSS_MIXED type autocomplete");
   yield new Promise(resolve => {

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 {Toolbox} toolbox
- *        Toolbox used to create the tooltip.
+ * @param {Document} toolboxDoc
+ *        The toolbox document to attach the CSS docs tooltip.
  */
-function CssDocsTooltip(toolbox) {
-  this.tooltip = new HTMLTooltip(toolbox, {
+function CssDocsTooltip(toolboxDoc) {
+  this.tooltip = new HTMLTooltip(toolboxDoc, {
     type: "arrow",
     consumeOutsideClicks: true,
     autofocus: true,
@@ -31,7 +31,7 @@ function CssDocsTooltip(toolbox) {
   this.widget.on("visitlink", this._onVisitLink);
 
   // Initialize keyboard shortcuts
-  this.shortcuts = new KeyShortcuts({ window: toolbox.win });
+  this.shortcuts = new KeyShortcuts({ window: this.tooltip.topWindow });
   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 {Toolbox} toolbox
- *        The devtools toolbox, needed to get the devtools main window.
+ * @param {Document} toolboxDoc
+ *        The toolbox document to attach the HTMLTooltip popup.
  * @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(toolbox, {
+function HTMLTooltip(toolboxDoc, {
     type = "normal",
     autofocus = false,
     consumeOutsideClicks = true,
@@ -216,7 +216,7 @@ function HTMLTooltip(toolbox, {
   } = {}) {
   EventEmitter.decorate(this);
 
-  this.doc = toolbox.doc;
+  this.doc = toolboxDoc;
   this.type = type;
   this.autofocus = autofocus;
   this.consumeOutsideClicks = consumeOutsideClicks;

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

@@ -12,16 +12,18 @@ const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLToolti
  * Base class for all (color, gradient, ...)-swatch based value editors inside
  * tooltips
  *
- * @param {Toolbox} toolbox
- *        The devtools toolbox, needed to get the devtools main window.
+ * @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.
  */
-function SwatchBasedEditorTooltip(toolbox, stylesheet) {
+function SwatchBasedEditorTooltip(document, 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(toolbox, {
+  this.tooltip = new HTMLTooltip(document, {
     type: "arrow",
     consumeOutsideClicks: true,
     useXulWrapper: true,

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

@@ -20,14 +20,16 @@ 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 {Toolbox} toolbox
- *        The devtools toolbox, needed to get the devtools main window.
+ * @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 {InspectorPanel} inspector
  *        The inspector panel, needed for the eyedropper.
  */
-function SwatchColorPickerTooltip(toolbox, inspector) {
+function SwatchColorPickerTooltip(document, inspector) {
   let stylesheet = "chrome://devtools/content/shared/widgets/spectrum.css";
-  SwatchBasedEditorTooltip.call(this, toolbox, stylesheet);
+  SwatchBasedEditorTooltip.call(this, document, stylesheet);
 
   this.inspector = inspector;
 

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

@@ -20,12 +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
  * CubicBezierWidget.
  *
- * @param {Toolbox} toolbox
- *        The devtools toolbox, needed to get the devtools main window.
+ * @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.
  */
-function SwatchCubicBezierTooltip(toolbox) {
+function SwatchCubicBezierTooltip(document) {
   let stylesheet = "chrome://devtools/content/shared/widgets/cubic-bezier.css";
-  SwatchBasedEditorTooltip.call(this, toolbox, stylesheet);
+  SwatchBasedEditorTooltip.call(this, document, 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,15 +19,17 @@ 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 {Toolbox} toolbox
- *        The devtools toolbox, needed to get the devtools main window.
+ * @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 {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(toolbox, cssIsValid) {
+function SwatchFilterTooltip(document, cssIsValid) {
   let stylesheet = "chrome://devtools/content/shared/widgets/filter-widget.css";
-  SwatchBasedEditorTooltip.call(this, toolbox, stylesheet);
+  SwatchBasedEditorTooltip.call(this, document, stylesheet);
   this._cssIsValid = cssIsValid;
 
   // Creating a filter editor instance.

devtools/client/sourceeditor/autocomplete.js

@@ -130,7 +130,7 @@ function initializeAutoCompletion(ctx, options = {}) {
 
   // Give each popup a new name to avoid sharing the elements.
 
-  let popup = new AutocompletePopup({ doc: win.parent.document }, {
+  let popup = new AutocompletePopup(win.parent.document, {
     position: "bottom",
     theme: "auto",
     autoSelect: true,

devtools/client/webconsole/jsterm.js

@@ -252,13 +252,11 @@ JSTerm.prototype = {
     };
 
     let doc = this.hud.document;
-
     let toolbox = gDevTools.getToolbox(this.hud.owner.target);
-    if (!toolbox) {
-      // In some cases (e.g. Browser Console), there is no toolbox.
-      toolbox = { doc };
-    }
-    this.autocompletePopup = new AutocompletePopup(toolbox, autocompleteOptions);
+    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);
 
     let inputContainer = doc.querySelector(".jsterm-input-container");
     this.completeNode = doc.querySelector(".jsterm-complete-node");