Close tooltip automatically if anchor is removed

The css solution works when scrolling/moving the anchor outside of the viewport.

The mutation observer is needed when the tooltip can't be nested as a child of the anchor and is removed from the DOM while the tooltip is still open. A use-case for this is the editing of a css selector, while the specificity tooltip is still visible, see http://crrev/c/6298060.

Demo: https://screencast.googleplex.com/cast/NDgzNjA0OTc1MzczNTE2OHxlYzllMmU0MC0yMA

Change-Id: I3092910abb8eb397cd2ba0fe0d01dd721ecfd4ff
Bug: 399801002
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6308773
Reviewed-by: Philip Pfaffe <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Marcel Pütz <[email protected]>

Author: Marcel Pütz

front_end/ui/components/docs/tooltip/basic.ts

@@ -25,7 +25,10 @@ Lit.render(
       <devtools-tooltip id="simple-tooltip">Simple content</devtools-tooltip>
     </div>
     <div style="position: relative; z-index: 0;">
-      <span aria-details="rich-tooltip" style="position: absolute; left: 16px; top: 116px; border: 1px solid black;">
+      <span
+        aria-details="rich-tooltip"
+        style="position: absolute; left: 16px; top: 116px; border: 1px solid black;"
+      >
         Non-button click trigger
       </span>
       <devtools-tooltip id="rich-tooltip" variant="rich" use-click>
@@ -34,8 +37,13 @@ Lit.render(
       </devtools-tooltip>
     </div>
     <div>
-      <button class="anchor" style="position: absolute; left: 16px; top: 216px;">
-        Programmatic creation
+      <button
+        id="removable"
+        @click=${() => document.getElementById('removable')?.remove()}
+        class="anchor"
+        style="position: absolute; left: 16px; top: 216px;"
+      >
+        Click to remove anchor
       </button>
     </div>
   `,
@@ -44,7 +52,7 @@ Lit.render(
 const anchor = container.querySelector('.anchor') as HTMLElement;
 const programmaticTooltip = new Tooltip({id: 'programatic', variant: 'rich', anchor});
 programmaticTooltip.append('Text content');
-anchor.appendChild(programmaticTooltip);
+anchor.insertAdjacentElement('afterend', programmaticTooltip);
 
 // Make the buttons draggable, so that we can experiment with the position of the tooltip.
 container.querySelectorAll('button,span').forEach(anchor => draggable(anchor as HTMLElement));

front_end/ui/components/tooltip/Tooltip.test.ts

@@ -121,6 +121,18 @@ describe('Tooltip', () => {
 
     assert.strictEqual(anchor.style.anchorName, '--tooltip-id-anchor');
   });
+
+  it('should hide the tooltip if anchor is removed from DOM', async () => {
+    const container = renderTooltip();
+
+    const button = container.querySelector('button');
+    button?.dispatchEvent(new MouseEvent('mouseenter'));
+    await checkForPendingActivity();
+    button?.remove();
+    await checkForPendingActivity();
+
+    assert.isFalse(container.querySelector('devtools-tooltip')?.open);
+  });
 });
 
 describe('closestAnchor', () => {

front_end/ui/components/tooltip/Tooltip.ts

@@ -34,6 +34,7 @@ export class Tooltip extends HTMLElement {
   #anchor: HTMLElement|null = null;
   #timeout: number|null = null;
   #closing = false;
+  #anchorObserver: MutationObserver|null = null;
 
   get open(): boolean {
     return this.matches(':popover-open');
@@ -104,6 +105,7 @@ export class Tooltip extends HTMLElement {
 
   disconnectedCallback(): void {
     this.#removeEventListeners();
+    this.#anchorObserver?.disconnect();
   }
 
   showTooltip = (): void => {
@@ -211,8 +213,30 @@ export class Tooltip extends HTMLElement {
     const anchorName = `--${id}-anchor`;
     anchor.style.anchorName = anchorName;
     this.style.positionAnchor = anchorName;
+    this.#observeAnchorRemoval(anchor);
     this.#anchor = anchor;
   }
+
+  #observeAnchorRemoval(anchor: Element): void {
+    if (anchor.parentElement === null) {
+      return;
+    }
+    if (this.#anchorObserver) {
+      this.#anchorObserver.disconnect();
+    }
+
+    this.#anchorObserver = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList' && [...mutation.removedNodes].includes(anchor)) {
+          if (this.#timeout) {
+            window.clearTimeout(this.#timeout);
+          }
+          this.hidePopover();
+        }
+      }
+    });
+    this.#anchorObserver.observe(anchor.parentElement, {childList: true});
+  }
 }
 
 export function closestAnchor(tooltip: Element, selector: string): Element|null {

front_end/ui/components/tooltip/tooltip.css

@@ -13,6 +13,7 @@
   padding: 0;
   overflow: visible;
   position-area: bottom;
+  position-visibility: anchors-visible;
   justify-self: anchor-center;
   position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;