From 445a55675b24cddfaa6ecb4eca9e2e8b9400fe27 Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Sat, 8 Oct 2016 09:49:07 -0400 Subject: [PATCH] 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 | 3 ++- devtools/client/inspector/markup/markup.js | 12 ++++++------ devtools/client/inspector/rules/rules.js | 6 +++--- .../inspector/shared/style-inspector-overlays.js | 15 +++++++++------ devtools/client/netmonitor/netmonitor-view.js | 3 ++- devtools/client/shared/autocomplete-popup.js | 10 +++++----- .../client/shared/test/browser_html_tooltip-01.js | 2 +- .../client/shared/test/browser_html_tooltip-02.js | 12 ++++++------ .../client/shared/test/browser_html_tooltip-03.js | 2 +- .../client/shared/test/browser_html_tooltip-04.js | 2 +- .../client/shared/test/browser_html_tooltip-05.js | 2 +- .../shared/test/browser_html_tooltip_arrow-01.js | 2 +- .../shared/test/browser_html_tooltip_arrow-02.js | 2 +- .../test/browser_html_tooltip_consecutive-show.js | 2 +- .../shared/test/browser_html_tooltip_hover.js | 2 +- .../shared/test/browser_html_tooltip_offset.js | 2 +- .../shared/test/browser_html_tooltip_rtl.js | 2 +- .../test/browser_html_tooltip_variable-height.js | 2 +- .../test/browser_html_tooltip_width-auto.js | 2 +- .../test/browser_html_tooltip_xul-wrapper.js | 2 +- .../browser_inplace-editor_autocomplete_01.js | 2 +- .../browser_inplace-editor_autocomplete_02.js | 2 +- .../browser_inplace-editor_autocomplete_offset.js | 2 +- .../shared/widgets/tooltip/CssDocsTooltip.js | 10 +++++----- .../client/shared/widgets/tooltip/HTMLTooltip.js | 8 ++++---- .../widgets/tooltip/SwatchBasedEditorTooltip.js | 10 ++++++---- .../widgets/tooltip/SwatchColorPickerTooltip.js | 10 ++++++---- .../widgets/tooltip/SwatchCubicBezierTooltip.js | 10 ++++++---- .../shared/widgets/tooltip/SwatchFilterTooltip.js | 10 ++++++---- devtools/client/sourceeditor/autocomplete.js | 2 +- devtools/client/webconsole/jsterm.js | 10 ++++------ 31 files changed, 87 insertions(+), 76 deletions(-) diff --git a/devtools/client/inspector/inspector-search.js b/devtools/client/inspector/inspector-search.js index 8c16c204f488..a84ef957c636 100644 --- a/devtools/client/inspector/inspector-search.js +++ b/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); diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js index 679bbc63dda7..e188035da3cb 100644 --- a/devtools/client/inspector/markup/markup.js +++ b/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(); }, diff --git a/devtools/client/inspector/rules/rules.js b/devtools/client/inspector/rules/rules.js index 2fa11fd0a086..1275bca0b02b 100644 --- a/devtools/client/inspector/rules/rules.js +++ b/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(); diff --git a/devtools/client/inspector/shared/style-inspector-overlays.js b/devtools/client/inspector/shared/style-inspector-overlays.js index d045a514ccb1..ab2336d26305 100644 --- a/devtools/client/inspector/shared/style-inspector-overlays.js +++ b/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)); } diff --git a/devtools/client/netmonitor/netmonitor-view.js b/devtools/client/netmonitor/netmonitor-view.js index 6d339d0c8c40..e356975939e6 100644 --- a/devtools/client/netmonitor/netmonitor-view.js +++ b/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 diff --git a/devtools/client/shared/autocomplete-popup.js b/devtools/client/shared/autocomplete-popup.js index f4fb63fbc6ef..1d24c948ef00 100644 --- a/devtools/client/shared/autocomplete-popup.js +++ b/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
  • 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", diff --git a/devtools/client/shared/test/browser_html_tooltip-01.js b/devtools/client/shared/test/browser_html_tooltip-01.js index bb56345c6bfc..7752881b93d7 100644 --- a/devtools/client/shared/test/browser_html_tooltip-01.js +++ b/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}); diff --git a/devtools/client/shared/test/browser_html_tooltip-02.js b/devtools/client/shared/test/browser_html_tooltip-02.js index 86a20f5f52a4..4ebe9185b849 100644 --- a/devtools/client/shared/test/browser_html_tooltip-02.js +++ b/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"; diff --git a/devtools/client/shared/test/browser_html_tooltip-03.js b/devtools/client/shared/test/browser_html_tooltip-03.js index d3419de2d03a..6c189c1272f6 100644 --- a/devtools/client/shared/test/browser_html_tooltip-03.js +++ b/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"; diff --git a/devtools/client/shared/test/browser_html_tooltip-04.js b/devtools/client/shared/test/browser_html_tooltip-04.js index dcf61e2d4a2d..90164840e698 100644 --- a/devtools/client/shared/test/browser_html_tooltip-04.js +++ b/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}); diff --git a/devtools/client/shared/test/browser_html_tooltip-05.js b/devtools/client/shared/test/browser_html_tooltip-05.js index 43aa7718b81e..58be4f83181f 100644 --- a/devtools/client/shared/test/browser_html_tooltip-05.js +++ b/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}); diff --git a/devtools/client/shared/test/browser_html_tooltip_arrow-01.js b/devtools/client/shared/test/browser_html_tooltip_arrow-01.js index c8f137c7f255..a20c67529a6e 100644 --- a/devtools/client/shared/test/browser_html_tooltip_arrow-01.js +++ b/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}); diff --git a/devtools/client/shared/test/browser_html_tooltip_arrow-02.js b/devtools/client/shared/test/browser_html_tooltip_arrow-02.js index 2457c03580c4..098f1ac7bfba 100644 --- a/devtools/client/shared/test/browser_html_tooltip_arrow-02.js +++ b/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}); diff --git a/devtools/client/shared/test/browser_html_tooltip_consecutive-show.js b/devtools/client/shared/test/browser_html_tooltip_consecutive-show.js index 1b76f980a1c4..7ed1d6dc1476 100644 --- a/devtools/client/shared/test/browser_html_tooltip_consecutive-show.js +++ b/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"); diff --git a/devtools/client/shared/test/browser_html_tooltip_hover.js b/devtools/client/shared/test/browser_html_tooltip_hover.js index c329f0bb6bca..a623a52845e1 100644 --- a/devtools/client/shared/test/browser_html_tooltip_hover.js +++ b/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"); diff --git a/devtools/client/shared/test/browser_html_tooltip_offset.js b/devtools/client/shared/test/browser_html_tooltip_offset.js index d9d7471736c0..dfbdef723d03 100644 --- a/devtools/client/shared/test/browser_html_tooltip_offset.js +++ b/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"; diff --git a/devtools/client/shared/test/browser_html_tooltip_rtl.js b/devtools/client/shared/test/browser_html_tooltip_rtl.js index 41d326d6d0de..e41716c803fb 100644 --- a/devtools/client/shared/test/browser_html_tooltip_rtl.js +++ b/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"; diff --git a/devtools/client/shared/test/browser_html_tooltip_variable-height.js b/devtools/client/shared/test/browser_html_tooltip_variable-height.js index aff9099817d9..e64ec4a2ea6e 100644 --- a/devtools/client/shared/test/browser_html_tooltip_variable-height.js +++ b/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;"; diff --git a/devtools/client/shared/test/browser_html_tooltip_width-auto.js b/devtools/client/shared/test/browser_html_tooltip_width-auto.js index cc58395f902f..66e33673e50a 100644 --- a/devtools/client/shared/test/browser_html_tooltip_width-auto.js +++ b/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;"; diff --git a/devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js b/devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js index 508359f1103b..5c21f21c311f 100644 --- a/devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js +++ b/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"; diff --git a/devtools/client/shared/test/browser_inplace-editor_autocomplete_01.js b/devtools/client/shared/test/browser_inplace-editor_autocomplete_01.js index e772fbf9616b..e9ceb11adae8 100644 --- a/devtools/client/shared/test/browser_inplace-editor_autocomplete_01.js +++ b/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, diff --git a/devtools/client/shared/test/browser_inplace-editor_autocomplete_02.js b/devtools/client/shared/test/browser_inplace-editor_autocomplete_02.js index 7898519caa60..3100026b4f37 100644 --- a/devtools/client/shared/test/browser_inplace-editor_autocomplete_02.js +++ b/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({ diff --git a/devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js b/devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js index b7c00c6a9aa8..53a9bf1b8c63 100644 --- a/devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js +++ b/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 => { diff --git a/devtools/client/shared/widgets/tooltip/CssDocsTooltip.js b/devtools/client/shared/widgets/tooltip/CssDocsTooltip.js index c7696c4110d8..880c34de330f 100644 --- a/devtools/client/shared/widgets/tooltip/CssDocsTooltip.js +++ b/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); diff --git a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js b/devtools/client/shared/widgets/tooltip/HTMLTooltip.js index 1b7cd6323503..6a1094cfda7e 100644 --- a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js +++ b/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; diff --git a/devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js b/devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js index 5a1566339c24..52bf565e2c43 100644 --- a/devtools/client/shared/widgets/tooltip/SwatchBasedEditorTooltip.js +++ b/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 and - this.tooltip = new HTMLTooltip(toolbox, { + this.tooltip = new HTMLTooltip(document, { type: "arrow", consumeOutsideClicks: true, useXulWrapper: true, diff --git a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js index 111eaf3b7318..06821158063c 100644 --- a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js +++ b/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; diff --git a/devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js b/devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js index 6123d5d4e825..02f6fbea4e00 100644 --- a/devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js +++ b/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 diff --git a/devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js b/devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js index 0a9e44692ab0..bc69c3b70743 100644 --- a/devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js +++ b/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. diff --git a/devtools/client/sourceeditor/autocomplete.js b/devtools/client/sourceeditor/autocomplete.js index 59512a42d2cd..357f25ed16c3 100644 --- a/devtools/client/sourceeditor/autocomplete.js +++ b/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, diff --git a/devtools/client/webconsole/jsterm.js b/devtools/client/webconsole/jsterm.js index 1b66d91ad861..fc276a1c7b1d 100644 --- a/devtools/client/webconsole/jsterm.js +++ b/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");