Backed out changeset df563f103355 (bug 1616847) for causing devtools failure at devtools/client/shared/test/browser_html_tooltip_offset.js

CLOSED TREE

devtools/client/shared/components/menu/MenuButton.js

@@ -227,7 +227,7 @@ class MenuButton extends PureComponent {
       return;
     }
 
-    this.tooltip.show(this.buttonRef.current, {
+    this.tooltip.updateContainerBounds(this.buttonRef.current, {
       position: this.props.menuPosition,
       y: this.props.menuOffset,
     });

devtools/client/shared/test/browser_html_tooltip_resize.js

@@ -48,7 +48,7 @@ add_task(async function() {
 
   // Resize the content
   div.style.cssText = "width: 200px; height: 30px";
-  tooltip.show(box1, { position: "top" });
+  tooltip.updateContainerBounds(box1, { position: "top" });
 
   // The panel should have moved 100px to the left and 10px down
   const updatedPanelBounds = tooltip.panel

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

@@ -464,9 +464,8 @@ HTMLTooltip.prototype = {
   },
 
   /**
-   * Show the tooltip next to the provided anchor element, or update the tooltip position
-   * if it was already visible. A preferred position can be set.
-   * The event "shown" will be fired after the tooltip is displayed.
+   * 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
@@ -484,41 +483,27 @@ HTMLTooltip.prototype = {
    */
   async show(anchor, options) {
     const { left, top } = this._updateContainerBounds(anchor, options);
-    const isTooltipVisible = this.isVisible();
 
     if (this.useXulWrapper) {
-      if (!isTooltipVisible) {
-        await this._showXulWrapperAt(left, top);
-      } else {
-        this._moveXulWrapperTo(left, top);
-      }
+      await this._showXulWrapperAt(left, top);
     } else {
       this.container.style.left = left + "px";
       this.container.style.top = top + "px";
     }
 
-    if (isTooltipVisible) {
-      return;
-    }
-
     this.container.classList.add("tooltip-visible");
 
     // Keep a pointer on the focused element to refocus it when hiding the tooltip.
     this._focusedElement = this.doc.activeElement;
 
-    if (this.doc.defaultView) {
-      if (this.attachEventsTimer) {
-        this.doc.defaultView.clearTimeout(this.attachEventsTimer);
-      }
-
-      this.attachEventsTimer = this.doc.defaultView.setTimeout(() => {
-        // Update the top window reference each time in case the host changes.
-        this.topWindow = this._getTopWindow();
-        this.topWindow.addEventListener("click", this._onClick, true);
-        this.topWindow.addEventListener("mouseup", this._onMouseup, true);
-        this.emit("shown");
-      }, 0);
-    }
+    this.doc.defaultView.clearTimeout(this.attachEventsTimer);
+    this.attachEventsTimer = this.doc.defaultView.setTimeout(() => {
+      // Update the top window reference each time in case the host changes.
+      this.topWindow = this._getTopWindow();
+      this.topWindow.addEventListener("click", this._onClick, true);
+      this.topWindow.addEventListener("mouseup", this._onMouseup, true);
+      this.emit("shown");
+    }, 0);
   },
 
   startTogglingOnHover(baseNode, targetNodeCb, options) {
@@ -529,6 +514,27 @@ HTMLTooltip.prototype = {
     this.toggle.stop();
   },
 
+  /**
+   * Recalculate the dimensions and position of the tooltip in response to
+   * changes to its content.
+   *
+   * Parameters are identical to show().
+   */
+  updateContainerBounds(anchor, options) {
+    if (!this.isVisible()) {
+      return;
+    }
+
+    const { left, top } = this._updateContainerBounds(anchor, options);
+
+    if (this.useXulWrapper) {
+      this._moveXulWrapperTo(left, top);
+    } else {
+      this.container.style.left = left + "px";
+      this.container.style.top = top + "px";
+    }
+  },
+
   _updateContainerBounds(anchor, { position, x = 0, y = 0 } = {}) {
     // Get anchor geometry
     let anchorRect = getRelativeRect(anchor, this.doc);