--- 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;