Bug 1472942 - Part 2. Add setContentSize() instead of setContent() in HTMLTooltip. r=birtles
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Thu, 27 Sep 2018 07:14:55 +0000
changeset 438435 2430fbe8fef663150a247783196dd7d91dc4d867
parent 438434 4ba6db4fd39bb4e5bf8a1a5422dd8e58ef6a646f
child 438436 cb2363e7ee528e6b7e2c1111a627baf8a8ed7760
push id70010
push usermantaroh@gmail.com
push dateThu, 27 Sep 2018 07:51:02 +0000
treeherderautoland@2430fbe8fef6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1472942
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1472942 - Part 2. Add setContentSize() instead of setContent() in HTMLTooltip. r=birtles This patch will remove setContest(), and change the following things instead of this: * Use HTMLTooltip.panel.appendChild() instead of HTMLTooltip.setContent(). * Add HTMLTooltip.setContetnSize() to specify the panel size if need this. Differential Revision: https://phabricator.services.mozilla.com/D7044
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
devtools/client/inspector/shared/three-pane-onboarding-tooltip.js
devtools/client/responsive.html/setting-onboarding-tooltip.js
devtools/client/shadereditor/shadereditor.js
devtools/client/shared/autocomplete-popup.js
devtools/client/shared/components/menu/MenuButton.js
devtools/client/shared/test/browser_html_tooltip-01.js
devtools/client/shared/test/browser_html_tooltip-02.js
devtools/client/shared/test/browser_html_tooltip-03.js
devtools/client/shared/test/browser_html_tooltip-04.js
devtools/client/shared/test/browser_html_tooltip-05.js
devtools/client/shared/test/browser_html_tooltip_arrow-01.js
devtools/client/shared/test/browser_html_tooltip_arrow-02.js
devtools/client/shared/test/browser_html_tooltip_consecutive-show.js
devtools/client/shared/test/browser_html_tooltip_doorhanger-01.js
devtools/client/shared/test/browser_html_tooltip_doorhanger-02.js
devtools/client/shared/test/browser_html_tooltip_height-auto.js
devtools/client/shared/test/browser_html_tooltip_hover.js
devtools/client/shared/test/browser_html_tooltip_offset.js
devtools/client/shared/test/browser_html_tooltip_resize.js
devtools/client/shared/test/browser_html_tooltip_rtl.js
devtools/client/shared/test/browser_html_tooltip_variable-height.js
devtools/client/shared/test/browser_html_tooltip_width-auto.js
devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js
devtools/client/shared/test/browser_html_tooltip_zoom.js
devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
devtools/client/shared/widgets/tooltip/HTMLTooltip.js
devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js
devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js
devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
@@ -22,17 +22,18 @@ add_task(async function() {
   await testComputedView(view, inspector);
 });
 
 async function testRuleView(ruleView, inspector) {
   info("Showing the tooltip");
 
   const tooltip = ruleView.tooltips.getTooltip("previewTooltip");
   const tooltipContent = ruleView.styleDocument.createElementNS(XHTML_NS, "div");
-  await tooltip.setContent(tooltipContent, {width: 100, height: 30});
+  tooltip.panel.appendChild(tooltipContent);
+  tooltip.setContentSize({width: 100, height: 30});
 
   // Stop listening for mouse movements because it's not needed for this test,
   // and causes intermittent failures on Linux. When this test runs in the suite
   // sometimes a mouseleave event is dispatched at the start, which causes the
   // tooltip to hide in the middle of being shown, which causes timeouts later.
   tooltip.stopTogglingOnHover();
 
   const onShown = tooltip.once("shown");
@@ -47,17 +48,18 @@ async function testRuleView(ruleView, in
   ok(true, "Rule view tooltip closed after a new node got selected");
 }
 
 async function testComputedView(computedView, inspector) {
   info("Showing the tooltip");
 
   const tooltip = computedView.tooltips.getTooltip("previewTooltip");
   const tooltipContent = computedView.styleDocument.createElementNS(XHTML_NS, "div");
-  await tooltip.setContent(tooltipContent, {width: 100, height: 30});
+  tooltip.panel.appendChild(tooltipContent);
+  await tooltip.setContentSize({width: 100, height: 30});
 
   // Stop listening for mouse movements because it's not needed for this test,
   // and causes intermittent failures on Linux. When this test runs in the suite
   // sometimes a mouseleave event is dispatched at the start, which causes the
   // tooltip to hide in the middle of being shown, which causes timeouts later.
   tooltip.stopTogglingOnHover();
 
   const onShown = tooltip.once("shown");
--- a/devtools/client/inspector/shared/three-pane-onboarding-tooltip.js
+++ b/devtools/client/inspector/shared/three-pane-onboarding-tooltip.js
@@ -63,17 +63,18 @@ class ThreePaneOnboardingTooltip {
 
     this.closeButton = doc.createElementNS(XHTML_NS, "button");
     this.closeButton.className = "onboarding-close-button devtools-button";
     container.appendChild(this.closeButton);
 
     this.closeButton.addEventListener("click", this.onCloseButtonClick);
     this.learnMoreLink.addEventListener("click", this.onLearnMoreLinkClick);
 
-    this.tooltip.setContent(container, { width: CONTAINER_WIDTH });
+    this.tooltip.panel.appendChild(container);
+    this.tooltip.setContentSize({ width: CONTAINER_WIDTH });
     this.tooltip.show(this.doc.querySelector("#inspector-sidebar .sidebar-toggle"), {
       position: "top",
     });
   }
 
   destroy() {
     this.closeButton.removeEventListener("click", this.onCloseButtonClick);
     this.learnMoreLink.removeEventListener("click", this.onLearnMoreLinkClick);
--- a/devtools/client/responsive.html/setting-onboarding-tooltip.js
+++ b/devtools/client/responsive.html/setting-onboarding-tooltip.js
@@ -37,17 +37,18 @@ class SettingOnboardingTooltip {
     container.appendChild(content);
 
     this.closeButton = doc.createElement("button");
     this.closeButton.className = "onboarding-close-button devtools-button";
     container.appendChild(this.closeButton);
 
     this.closeButton.addEventListener("click", this.onCloseButtonClick);
 
-    this.tooltip.setContent(container, { width: CONTAINER_WIDTH });
+    this.tooltip.panel.appendChild(container);
+    this.tooltip.setContentSize({ width: CONTAINER_WIDTH });
     this.tooltip.show(this.doc.getElementById("settings-button"), {
       position: "bottom",
     });
   }
 
   destroy() {
     this.closeButton.removeEventListener("click", this.onCloseButtonClick);
 
--- a/devtools/client/shadereditor/shadereditor.js
+++ b/devtools/client/shadereditor/shadereditor.js
@@ -586,17 +586,17 @@ class ShadersEditorsView {
     const div = document.createElementNS(XHTML_NS, "div");
     div.className = "devtools-shader-tooltip-container";
     for (const message of messages) {
       const messageDiv = document.createElementNS(XHTML_NS, "div");
       messageDiv.className = "devtools-tooltip-simple-text";
       messageDiv.textContent = message;
       div.appendChild(messageDiv);
     }
-    tooltip.setContent(div);
+    tooltip.panel.appendChild(div);
 
     tooltip.startTogglingOnHover(node, () => true, {
       toggleDelay: GUTTER_ERROR_PANEL_DELAY
     });
   }
 
   /**
    * Removes all the gutter markers and line classes from the editor.
--- a/devtools/client/shared/autocomplete-popup.js
+++ b/devtools/client/shared/autocomplete-popup.js
@@ -67,17 +67,18 @@ function AutocompletePopup(toolboxDoc, o
     .getPropertyValue(paddingPropertyName)
     .replace("px", "");
 
   this._listPadding = 0;
   if (!Number.isNaN(Number(listPadding))) {
     this._listPadding = Number(listPadding);
   }
 
-  this._tooltip.setContent(this._list, { height: Infinity });
+  this._tooltip.panel.appendChild(this._list);
+  this._tooltip.setContentSize({ height: Infinity });
 
   this.onClick = this.onClick.bind(this);
   this._list.addEventListener("click", this.onClick);
 
   // Array of raw autocomplete items
   this.items = [];
   // Map of autocompleteItem to HTMLElement
   this.elements = new WeakMap();
--- a/devtools/client/shared/components/menu/MenuButton.js
+++ b/devtools/client/shared/components/menu/MenuButton.js
@@ -286,20 +286,16 @@ class MenuButton extends PureComponent {
             e.preventDefault();
           }
         }
         break;
     }
   }
 
   render() {
-    // We bypass the call to HTMLTooltip. setContent and set the panel contents
-    // directly here.
-    //
-    // Bug 1472942: Do this for all users of HTMLTooltip.
     const menu = ReactDOM.createPortal(
       typeof this.props.children === "function"
         ? this.props.children()
         : this.props.children,
       this.tooltip.panel
     );
 
     const buttonProps = {
--- a/devtools/client/shared/test/browser_html_tooltip-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip-01.js
@@ -36,17 +36,18 @@ add_task(async function() {
   await runTests(doc);
 });
 
 async function runTests(doc) {
   await addTab("about:blank");
   const tooltip = new HTMLTooltip(doc, {useXulWrapper});
 
   info("Set tooltip content");
-  tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
+  tooltip.panel.appendChild(getTooltipContent(doc));
+  tooltip.setContentSize({width: 100, height: 50});
 
   is(tooltip.isVisible(), false, "Tooltip is not visible");
 
   info("Show the tooltip and check the expected events are fired.");
 
   let shown = 0;
   tooltip.on("shown", () => shown++);
 
--- a/devtools/client/shared/test/browser_html_tooltip-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip-02.js
@@ -36,33 +36,35 @@ async function runTests(doc) {
   await testClickInOuterIframe(doc);
   await testClickInInnerIframe(doc);
 }
 
 async function testClickInTooltipContent(doc) {
   info("Test a tooltip is not closed when clicking inside itself");
 
   const tooltip = new HTMLTooltip(doc, {useXulWrapper});
-  tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
+  tooltip.panel.appendChild(getTooltipContent(doc));
+  tooltip.setContentSize({width: 100, height: 50});
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   const onTooltipContainerClick = once(tooltip.container, "click");
   EventUtils.synthesizeMouseAtCenter(tooltip.container, {}, doc.defaultView);
   await onTooltipContainerClick;
   is(tooltip.isVisible(), true, "Tooltip is still visible");
 
   tooltip.destroy();
 }
 
 async function testConsumeOutsideClicksFalse(doc) {
   info("Test closing a tooltip via click with consumeOutsideClicks: false");
   const box4 = doc.getElementById("box4");
 
   const tooltip = new HTMLTooltip(doc, {consumeOutsideClicks: false, useXulWrapper});
-  tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
+  tooltip.panel.appendChild(getTooltipContent(doc));
+  tooltip.setContentSize({width: 100, height: 50});
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   const onBox4Clicked = once(box4, "click");
   const onHidden = once(tooltip, "hidden");
   EventUtils.synthesizeMouseAtCenter(box4, {}, doc.defaultView);
   await onHidden;
   await onBox4Clicked;
 
@@ -75,17 +77,18 @@ async function testConsumeOutsideClicksT
   info("Test closing a tooltip via click with consumeOutsideClicks: true");
   const box4 = doc.getElementById("box4");
 
   // Count clicks on box4
   let box4clicks = 0;
   box4.addEventListener("click", () => box4clicks++);
 
   const tooltip = new HTMLTooltip(doc, {consumeOutsideClicks: true, useXulWrapper});
-  tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
+  tooltip.panel.appendChild(getTooltipContent(doc));
+  tooltip.setContentSize({width: 100, height: 50});
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   const onHidden = once(tooltip, "hidden");
   EventUtils.synthesizeMouseAtCenter(box4, {}, doc.defaultView);
   await onHidden;
 
   is(box4clicks, 0, "box4 catched no click event");
   is(tooltip.isVisible(), false, "Tooltip is hidden");
@@ -93,17 +96,18 @@ async function testConsumeOutsideClicksT
   tooltip.destroy();
 }
 
 async function testConsumeWithRightClick(doc) {
   info("Test closing a tooltip with a right-click, with consumeOutsideClicks: true");
   const box4 = doc.getElementById("box4");
 
   const tooltip = new HTMLTooltip(doc, {consumeOutsideClicks: true, useXulWrapper});
-  tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
+  tooltip.panel.appendChild(getTooltipContent(doc));
+  tooltip.setContentSize({width: 100, height: 50});
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   // Only left-click events should be consumed, so we expect to catch a click when using
   // {button: 2}, which simulates a right-click.
   info("Right click on box4, expect tooltip to be hidden, event should not be consumed");
   const onBox4Clicked = once(box4, "click");
   const onHidden = once(tooltip, "hidden");
   EventUtils.synthesizeMouseAtCenter(box4, {button: 2}, doc.defaultView);
@@ -115,17 +119,18 @@ async function testConsumeWithRightClick
   tooltip.destroy();
 }
 
 async function testClickInOuterIframe(doc) {
   info("Test clicking an iframe outside of the tooltip closes the tooltip");
   const frame = doc.getElementById("frame");
 
   const tooltip = new HTMLTooltip(doc, {useXulWrapper});
-  tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
+  tooltip.panel.appendChild(getTooltipContent(doc));
+  tooltip.setContentSize({width: 100, height: 50});
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   const onHidden = once(tooltip, "hidden");
   EventUtils.synthesizeMouseAtCenter(frame, {}, doc.defaultView);
   await onHidden;
 
   is(tooltip.isVisible(), false, "Tooltip is hidden");
   tooltip.destroy();
@@ -134,17 +139,18 @@ async function testClickInOuterIframe(do
 async function testClickInInnerIframe(doc) {
   info("Test clicking an iframe inside the tooltip content does not close the tooltip");
 
   const tooltip = new HTMLTooltip(doc, {consumeOutsideClicks: false, useXulWrapper});
 
   const iframe = doc.createElementNS(HTML_NS, "iframe");
   iframe.style.width = "100px";
   iframe.style.height = "50px";
-  tooltip.setContent(iframe, {width: 100, height: 50});
+  tooltip.panel.appendChild(iframe);
+  tooltip.setContentSize({width: 100, height: 50});
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   const onTooltipContainerClick = once(tooltip.container, "click");
   EventUtils.synthesizeMouseAtCenter(tooltip.container, {}, doc.defaultView);
   await onTooltipContainerClick;
 
   is(tooltip.isVisible(), true, "Tooltip is still visible");
 
--- a/devtools/client/shared/test/browser_html_tooltip-03.js
+++ b/devtools/client/shared/test/browser_html_tooltip-03.js
@@ -80,11 +80,12 @@ function createTooltip(doc) {
   const div = doc.createElementNS(HTML_NS, "div");
   div.classList.add("tooltip-content");
   div.style.height = "50px";
 
   const input = doc.createElementNS(HTML_NS, "input");
   input.setAttribute("type", "text");
   div.appendChild(input);
 
-  tooltip.setContent(div, {width: 150, height: 50});
+  tooltip.panel.appendChild(div);
+  tooltip.setContentSize({width: 150, height: 50});
   return tooltip;
 }
--- a/devtools/client/shared/test/browser_html_tooltip-04.js
+++ b/devtools/client/shared/test/browser_html_tooltip-04.js
@@ -24,17 +24,18 @@ add_task(async function() {
 
   await addTab("about:blank");
   const [,, doc] = await createHost("bottom", TEST_URI);
 
   info("Create HTML tooltip");
   const tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   const div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "100%";
-  tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
+  tooltip.panel.appendChild(div);
+  tooltip.setContentSize({width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
 
   const box1 = doc.getElementById("box1");
   const box2 = doc.getElementById("box2");
   const box3 = doc.getElementById("box3");
   const box4 = doc.getElementById("box4");
   const height = TOOLTIP_HEIGHT, width = TOOLTIP_WIDTH;
 
   // box1: Can only fit below box1
--- a/devtools/client/shared/test/browser_html_tooltip-05.js
+++ b/devtools/client/shared/test/browser_html_tooltip-05.js
@@ -23,17 +23,18 @@ add_task(async function() {
   await pushPref("devtools.toolbox.footer.height", 200);
   await addTab("about:blank");
   const [,, doc] = await createHost("bottom", TEST_URI);
 
   info("Create HTML tooltip");
   const tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   const div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "100%";
-  tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
+  tooltip.panel.appendChild(div);
+  tooltip.setContentSize({width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
 
   const box1 = doc.getElementById("box1");
   const box2 = doc.getElementById("box2");
   const box3 = doc.getElementById("box3");
   const box4 = doc.getElementById("box4");
   const width = TOOLTIP_WIDTH;
 
   // box1: Can not fit above or below box1, default to bottom with a reduced
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
@@ -33,17 +33,18 @@ add_task(async function() {
   await runTests(doc);
 });
 
 async function runTests(doc) {
   info("Create HTML tooltip");
   const tooltip = new HTMLTooltip(doc, {type: "arrow", useXulWrapper});
   const div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "35px";
-  tooltip.setContent(div, {width: 200, height: 35});
+  tooltip.panel.appendChild(div);
+  tooltip.setContentSize({width: 200, height: 35});
 
   const {right: docRight} = doc.documentElement.getBoundingClientRect();
 
   const elements = [...doc.querySelectorAll(".anchor")];
   for (const el of elements) {
     info("Display the tooltip on an anchor.");
     await showTooltip(tooltip, el);
 
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
@@ -32,17 +32,18 @@ add_task(async function() {
   await runTests(doc);
 });
 
 async function runTests(doc) {
   info("Create HTML tooltip");
   const tooltip = new HTMLTooltip(doc, {type: "arrow", useXulWrapper});
   const div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "35px";
-  tooltip.setContent(div, {width: 200, height: 35});
+  tooltip.panel.appendChild(div);
+  tooltip.setContentSize({width: 200, height: 35});
 
   const {right: docRight} = doc.documentElement.getBoundingClientRect();
 
   const elements = [...doc.querySelectorAll(".anchor")];
   for (const el of elements) {
     info("Display the tooltip on an anchor.");
     await showTooltip(tooltip, el);
 
--- a/devtools/client/shared/test/browser_html_tooltip_consecutive-show.js
+++ b/devtools/client/shared/test/browser_html_tooltip_consecutive-show.js
@@ -28,17 +28,18 @@ add_task(async function() {
   const box1 = doc.getElementById("box1");
   const box2 = doc.getElementById("box2");
   const box3 = doc.getElementById("box3");
   const box4 = doc.getElementById("box4");
 
   const width = 100, height = 50;
 
   const tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
-  tooltip.setContent(getTooltipContent(doc), {width, height});
+  tooltip.panel.appendChild(getTooltipContent(doc));
+  tooltip.setContentSize({width, height});
 
   info("Show the tooltip on each of the 4 hbox, without calling hide in between");
 
   info("Show tooltip on box1");
   tooltip.show(box1);
   checkTooltipGeometry(tooltip, box1, {position: "bottom", width, height});
 
   info("Show tooltip on box2");
--- a/devtools/client/shared/test/browser_html_tooltip_doorhanger-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip_doorhanger-01.js
@@ -35,17 +35,17 @@ add_task(async function() {
 });
 
 async function runTests(doc) {
   info("Create HTML tooltip");
   const tooltip = new HTMLTooltip(doc, {type: "doorhanger", useXulWrapper});
   const div = doc.createElementNS(HTML_NS, "div");
   div.style.width = "200px";
   div.style.height = "35px";
-  tooltip.setContent(div);
+  tooltip.panel.appendChild(div);
 
   const docBounds = doc.documentElement.getBoundingClientRect();
 
   const elements = [...doc.querySelectorAll(".anchor")];
   for (const el of elements) {
     info("Display the tooltip on an anchor.");
     await showTooltip(tooltip, el);
 
--- a/devtools/client/shared/test/browser_html_tooltip_doorhanger-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip_doorhanger-02.js
@@ -35,17 +35,17 @@ add_task(async function() {
 });
 
 async function runTests(doc) {
   info("Create HTML tooltip");
   const tooltip = new HTMLTooltip(doc, {type: "doorhanger", useXulWrapper});
   const div = doc.createElementNS(HTML_NS, "div");
   div.style.width = "200px";
   div.style.height = "35px";
-  tooltip.setContent(div);
+  tooltip.panel.appendChild(div);
 
   const elements = [...doc.querySelectorAll(".anchor")];
   for (const el of elements) {
     info("Display the tooltip on an anchor.");
     await showTooltip(tooltip, el);
 
     const arrow = tooltip.arrow;
     ok(arrow, "Tooltip has an arrow");
--- a/devtools/client/shared/test/browser_html_tooltip_height-auto.js
+++ b/devtools/client/shared/test/browser_html_tooltip_height-auto.js
@@ -34,31 +34,31 @@ add_task(async function() {
 async function runTests(doc) {
   const tooltip = new HTMLTooltip(doc, {useXulWrapper});
   info("Create tooltip content height to 150px");
   const tooltipContent = doc.createElementNS(HTML_NS, "div");
   tooltipContent.style.cssText =
     "width: 300px; height: 150px; background: red;";
 
   info("Set tooltip content using width:auto and height:auto");
-  tooltip.setContent(tooltipContent);
+  tooltip.panel.appendChild(tooltipContent);
 
   info("Show the tooltip and check the tooltip panel dimensions.");
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   let panelRect = tooltip.panel.getBoundingClientRect();
   is(panelRect.width, 300, "Tooltip panel has the expected width.");
   is(panelRect.height, 150, "Tooltip panel has the expected width.");
 
   await hideTooltip(tooltip);
 
   info("Set tooltip content using fixed width and height:auto");
   tooltipContent.style.cssText =
     "width: auto; height: 200px; background: red;";
-  tooltip.setContent(tooltipContent, { width: 400 });
+  tooltip.setContentSize({ width: 400 });
 
   info("Show the tooltip and check the tooltip panel height.");
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   panelRect = tooltip.panel.getBoundingClientRect();
   is(panelRect.height, 200, "Tooltip panel has the expected width.");
 
   await hideTooltip(tooltip);
--- a/devtools/client/shared/test/browser_html_tooltip_hover.js
+++ b/devtools/client/shared/test/browser_html_tooltip_hover.js
@@ -18,17 +18,18 @@ add_task(async function() {
   const [,, doc] = await createHost("bottom", TEST_URI);
   // Wait for full page load before synthesizing events on the page.
   await waitUntil(() => doc.readyState === "complete");
 
   const width = 100, height = 50;
   const tooltipContent = doc.createElementNS(HTML_NS, "div");
   tooltipContent.textContent = "tooltip";
   const tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
-  tooltip.setContent(tooltipContent, {width, height});
+  tooltip.panel.appendChild(tooltipContent);
+  tooltip.setContentSize({width, height});
 
   const container = doc.getElementById("container");
   tooltip.startTogglingOnHover(container, () => true);
 
   info("Hover on each of the 4 boxes, expect the tooltip to appear");
   async function showAndCheck(boxId, position) {
     info(`Show tooltip on ${boxId}`);
     const box = doc.getElementById(boxId);
--- a/devtools/client/shared/test/browser_html_tooltip_offset.js
+++ b/devtools/client/shared/test/browser_html_tooltip_offset.js
@@ -27,17 +27,18 @@ add_task(async function() {
   const box4 = doc.getElementById("box4");
 
   const tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
 
   const div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "100px";
   div.style.boxSizing = "border-box";
   div.textContent = "tooltip";
-  tooltip.setContent(div, {width: 50, height: 100});
+  tooltip.panel.appendChild(div);
+  tooltip.setContentSize({width: 50, height: 100});
 
   info("Display the tooltip on box1.");
   await showTooltip(tooltip, box1, {x: 5, y: 10});
 
   let panelRect = tooltip.container.getBoundingClientRect();
   let anchorRect = box1.getBoundingClientRect();
 
   // Tooltip will be displayed below box1
--- a/devtools/client/shared/test/browser_html_tooltip_resize.js
+++ b/devtools/client/shared/test/browser_html_tooltip_resize.js
@@ -23,17 +23,17 @@ add_task(async function() {
 
   info("Test resizing of a tooltip");
 
   const tooltip =
     new HTMLTooltip(doc, { useXulWrapper: true, type: "doorhanger" });
   const div = doc.createElementNS(HTML_NS, "div");
   div.textContent = "tooltip";
   div.style.cssText = "width: 100px; height: 40px";
-  tooltip.setContent(div);
+  tooltip.panel.appendChild(div);
 
   const box1 = doc.getElementById("box1");
 
   await showTooltip(tooltip, box1, { position: "top" });
 
   // Get the original position of the panel and arrow.
   const originalPanelBounds =
     tooltip.panel.getBoxQuads({ relativeTo: doc })[0].getBounds();
--- a/devtools/client/shared/test/browser_html_tooltip_rtl.js
+++ b/devtools/client/shared/test/browser_html_tooltip_rtl.js
@@ -25,17 +25,18 @@ add_task(async function() {
   const [,, doc] = await createHost("right", TEST_URI);
 
   info("Test the positioning of tooltips in RTL and LTR directions");
 
   const tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   const div = doc.createElementNS(HTML_NS, "div");
   div.textContent = "tooltip";
   div.style.cssText = "box-sizing: border-box; border: 1px solid black";
-  tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
+  tooltip.panel.appendChild(div);
+  tooltip.setContentSize({width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
 
   await testRtlAnchors(doc, tooltip);
   await testLtrAnchors(doc, tooltip);
   await hideTooltip(tooltip);
 
   tooltip.destroy();
 
   await testRtlArrow(doc);
@@ -129,17 +130,18 @@ async function testLtrAnchors(doc, toolt
 
 async function testRtlArrow(doc) {
   // Set up the arrow-style tooltip
   const arrowTooltip =
     new HTMLTooltip(doc, { type: "arrow", useXulWrapper: false });
   const div = doc.createElementNS(HTML_NS, "div");
   div.textContent = "tooltip";
   div.style.cssText = "box-sizing: border-box; border: 1px solid black";
-  arrowTooltip.setContent(div, {
+  arrowTooltip.panel.appendChild(div);
+  arrowTooltip.setContentSize({
     width: TOOLTIP_WIDTH,
     height: TOOLTIP_HEIGHT,
   });
 
   // box2 uses RTL direction and is far enough from the edge that the arrow
   // should not be squashed in the wrong direction.
   const box2 = doc.getElementById("box2");
 
--- a/devtools/client/shared/test/browser_html_tooltip_variable-height.js
+++ b/devtools/client/shared/test/browser_html_tooltip_variable-height.js
@@ -24,17 +24,18 @@ add_task(async function() {
 
   await addTab("about:blank");
   const [,, doc] = await createHost("bottom", TEST_URI);
 
   const tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
   info("Set tooltip content 50px tall, but request a container 200px tall");
   const tooltipContent = doc.createElementNS(HTML_NS, "div");
   tooltipContent.style.cssText = "height: " + TOOLTIP_HEIGHT + "px; background: red;";
-  tooltip.setContent(tooltipContent, {width: CONTAINER_WIDTH, height: Infinity});
+  tooltip.panel.appendChild(tooltipContent);
+  tooltip.setContentSize({width: CONTAINER_WIDTH, height: Infinity});
 
   info("Show the tooltip and check the container and panel height.");
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   const containerRect = tooltip.container.getBoundingClientRect();
   const panelRect = tooltip.panel.getBoundingClientRect();
   is(containerRect.height, CONTAINER_HEIGHT,
     "Tooltip container has the expected height.");
--- a/devtools/client/shared/test/browser_html_tooltip_width-auto.js
+++ b/devtools/client/shared/test/browser_html_tooltip_width-auto.js
@@ -31,17 +31,18 @@ add_task(async function() {
 
 async function runTests(doc) {
   const tooltip = new HTMLTooltip(doc, {useXulWrapper});
   info("Create tooltip content width to 150px");
   const tooltipContent = doc.createElementNS(HTML_NS, "div");
   tooltipContent.style.cssText = "height: 100%; width: 150px; background: red;";
 
   info("Set tooltip content using width:auto");
-  tooltip.setContent(tooltipContent, {width: "auto", height: 50});
+  tooltip.panel.appendChild(tooltipContent);
+  tooltip.setContentSize({width: "auto", height: 50});
 
   info("Show the tooltip and check the tooltip panel width.");
   await showTooltip(tooltip, doc.getElementById("box1"));
 
   const panelRect = tooltip.panel.getBoundingClientRect();
   is(panelRect.width, 150, "Tooltip panel has the expected width.");
 
   await hideTooltip(tooltip);
--- a/devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js
+++ b/devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js
@@ -40,17 +40,18 @@ add_task(async function() {
     win.top.moveTo(originalTop, originalLeft);
   });
 
   info("Create HTML tooltip");
   const tooltip = new HTMLTooltip(doc, {useXulWrapper: true});
   const div = doc.createElementNS(HTML_NS, "div");
   div.style.height = "200px";
   div.style.background = "red";
-  tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
+  tooltip.panel.appendChild(div);
+  tooltip.setContentSize({width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
 
   const box1 = doc.getElementById("box1");
 
   // Above box1: check that the tooltip can overflow onto the content page.
   info("Display the tooltip above box1.");
   await showTooltip(tooltip, box1, {position: "top"});
   checkTooltip(tooltip, "top", TOOLTIP_HEIGHT);
   await hideTooltip(tooltip);
--- a/devtools/client/shared/test/browser_html_tooltip_zoom.js
+++ b/devtools/client/shared/test/browser_html_tooltip_zoom.js
@@ -28,17 +28,18 @@ add_task(async function() {
   await pushPref("devtools.toolbox.zoomValue", zoom.toString(10));
 
   // Change this xul zoom to the x1.5 since this test doesn't use the toolbox preferences.
   const contentViewer = host.frame.docShell.contentViewer;
   contentViewer.fullZoom = zoom;
   const tooltip = new HTMLTooltip(doc, {useXulWrapper: true});
 
   info("Set tooltip content");
-  tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
+  tooltip.panel.appendChild(getTooltipContent(doc));
+  tooltip.setContentSize({width: 100, height: 50});
 
   is(tooltip.isVisible(), false, "Tooltip is not visible");
 
   info("Show the tooltip and check the expected events are fired.");
   const onShown = tooltip.once("shown");
   tooltip.show(doc.getElementById("box1"));
   await onShown;
 
--- a/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
@@ -192,20 +192,19 @@ EventTooltip.prototype = {
       });
 
       content.className = "event-tooltip-content-box";
       this.container.appendChild(content);
 
       this._addContentListeners(header);
     }
 
-    this._tooltip.setContent(
-      this.container,
-      {width: CONTAINER_WIDTH, height: Infinity}
-    );
+    this._tooltip.panel.innerHTML = "";
+    this._tooltip.panel.appendChild(this.container);
+    this._tooltip.setContentSize({ width: CONTAINER_WIDTH, height: Infinity });
     this._tooltip.on("hidden", this.destroy);
   },
 
   _addContentListeners: function(header) {
     header.addEventListener("click", this._headerClicked);
   },
 
   _headerClicked: function(event) {
--- a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
@@ -355,18 +355,17 @@ function HTMLTooltip(toolboxDoc, {
     this.doc.body.appendChild(this.container);
   }
 }
 
 module.exports.HTMLTooltip = HTMLTooltip;
 
 HTMLTooltip.prototype = {
   /**
-   * The tooltip panel is the parentNode of the tooltip content provided in
-   * setContent().
+   * The tooltip panel is the parentNode of the tooltip content.
    */
   get panel() {
     return this.container.querySelector(".tooltip-panel");
   },
 
   /**
    * The arrow element. Might be null depending on the tooltip type.
    */
@@ -377,21 +376,19 @@ HTMLTooltip.prototype = {
   /**
    * Retrieve the displayed position used for the tooltip. Null if the tooltip is hidden.
    */
   get position() {
     return this.isVisible() ? this._position : null;
   },
 
   /**
-   * Set the tooltip content element. The preferred width/height should also be
-   * specified here.
+   * Set the preferred width/height of the panel content.
+   * The panel content is set by appending content to `this.panel`.
    *
-   * @param {Element} content
-   *        The tooltip content, should be a HTML element.
    * @param {Object}
    *        - {Number} width: preferred width for the tooltip container. If not specified
    *          the tooltip container will be measured before being displayed, and the
    *          measured width will be used as the preferred width.
    *        - {Number} height: preferred height for the tooltip container. If
    *          not specified the tooltip container will be measured before being
    *          displayed, and the measured height will be used as the preferred
    *          height.
@@ -399,22 +396,19 @@ HTMLTooltip.prototype = {
    *          For tooltips whose content height may change while being
    *          displayed, the special value Infinity may be used to produce
    *          a flexible container that accommodates resizing content. Note,
    *          however, that when used in combination with the XUL wrapper the
    *          unfilled part of this container will consume all mouse events
    *          making content behind this area inaccessible until the tooltip is
    *          dismissed.
    */
-  setContent: function(content, {width = "auto", height = "auto"} = {}) {
+  setContentSize: function({width = "auto", height = "auto"} = {}) {
     this.preferredWidth = width;
     this.preferredHeight = height;
-
-    this.panel.innerHTML = "";
-    this.panel.appendChild(content);
   },
 
   /**
    * Show the tooltip next to the provided anchor element. A preferred position
    * can be set. The event "shown" will be fired after the tooltip is displayed.
    *
    * @param {Element} anchor
    *        The reference element with which the tooltip should be aligned
--- a/devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
@@ -111,31 +111,35 @@ function setImageTooltip(tooltip, doc, i
 
   // Calculate tooltip dimensions
   let height = imgHeight + 2 * IMAGE_PADDING;
   if (!hideDimensionLabel) {
     height += LABEL_HEIGHT;
   }
   const width = Math.max(CONTAINER_MIN_WIDTH, imgWidth + 2 * IMAGE_PADDING);
 
-  tooltip.setContent(div, {width, height});
+  tooltip.panel.innerHTML = "";
+  tooltip.panel.appendChild(div);
+  tooltip.setContentSize({width, height});
 }
 
 /*
  * Set the tooltip content of a provided HTMLTooltip instance to display a
  * fallback error message when an image preview tooltip can not be displayed.
  *
  * @param {HTMLTooltip} tooltip
  *        The tooltip instance on which the image preview content should be set
  * @param {Document} doc
  *        A document element to create the HTML elements needed for the tooltip
  */
 function setBrokenImageTooltip(tooltip, doc) {
   const div = doc.createElementNS(XHTML_NS, "div");
   div.className = "theme-comment devtools-tooltip-image-broken";
   const message = L10N.getStr("previewTooltip.image.brokenImage");
   div.textContent = message;
-  tooltip.setContent(div);
+
+  tooltip.panel.innerHTML = "";
+  tooltip.panel.appendChild(div);
 }
 
 module.exports.getImageDimensions = getImageDimensions;
 module.exports.setImageTooltip = setImageTooltip;
 module.exports.setBrokenImageTooltip = setBrokenImageTooltip;
--- a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
@@ -55,17 +55,18 @@ class SwatchColorPickerTooltip extends S
     const container = doc.createElementNS(XHTML_NS, "div");
     container.id = "spectrum-tooltip";
 
     const node = doc.createElementNS(XHTML_NS, "div");
     node.id = "spectrum";
     container.appendChild(node);
 
     const widget = new Spectrum(node, color);
-    this.tooltip.setContent(container, { width: 218, height: 224 });
+    this.tooltip.panel.appendChild(container);
+    this.tooltip.setContentSize({ width: 218, height: 224 });
 
     widget.inspector = this.inspector;
 
     const eyedropper = doc.createElementNS(XHTML_NS, "button");
     eyedropper.id = "eyedropper-button";
     eyedropper.className = "devtools-button";
     /* pointerEvents for eyedropper has to be set auto to display tooltip when
      * eyedropper is disabled in non-HTML documents.
--- a/devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js
@@ -40,17 +40,18 @@ class SwatchCubicBezierTooltip extends S
    */
 
   setCubicBezierContent(bezier) {
     const { doc } = this.tooltip;
 
     const container = doc.createElementNS(XHTML_NS, "div");
     container.className = "cubic-bezier-container";
 
-    this.tooltip.setContent(container, { width: 510, height: 370 });
+    this.tooltip.panel.appendChild(container);
+    this.tooltip.setContentSize({ width: 510, height: 370 });
 
     const def = defer();
 
     // Wait for the tooltip to be shown before calling instanciating the widget
     // as it expect its DOM elements to be visible.
     this.tooltip.once("shown", () => {
       const widget = new CubicBezierWidget(container, bezier);
       def.resolve(widget);
--- a/devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js
@@ -42,17 +42,18 @@ class SwatchFilterTooltip extends Swatch
    */
 
   setFilterContent(filter) {
     const { doc } = this.tooltip;
 
     const container = doc.createElementNS(XHTML_NS, "div");
     container.id = "filter-container";
 
-    this.tooltip.setContent(container, { width: 510, height: 200 });
+    this.tooltip.panel.appendChild(container);
+    this.tooltip.setContentSize({ width: 510, height: 200 });
 
     return new CSSFilterEditorWidget(container, filter, this._cssIsValid);
   }
 
   async show() {
     // Call the parent class' show function
     await super.show();
     // Then set the filter value and listen to changes to preview them
--- a/devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js
@@ -18,12 +18,12 @@ const XHTML_NS = "http://www.w3.org/1999
  *         Text to display in tooltip.
  */
 function setVariableTooltip(tooltip, doc, text) {
   // Create tooltip content
   const div = doc.createElementNS(XHTML_NS, "div");
   div.classList.add("devtools-monospace", "devtools-tooltip-css-variable");
   div.textContent = text;
 
-  tooltip.setContent(div);
+  tooltip.panel.appendChild(div);
 }
 
 module.exports.setVariableTooltip = setVariableTooltip;