Automatically reopen tooltips on rerender

When a tooltip gets detached without being closed and then gets replaced by a tooltip with the same id, the new tooltip is automatically reopend once connected. This addresses an issue in the styles tab where property values are rerendered entirely on changes.

Fixed: 404720158
Change-Id: I9e0f40f42898343faf112dc92127463fc7cab7f8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6387117
Auto-Submit: Philip Pfaffe <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: pfaffe

front_end/panels/elements/CSSValueTraceView.test.ts

@@ -84,13 +84,19 @@ function getLineText(line: Node[][]) {
       renderElementIntoDOM(node, {allowMultipleChildren: true});
     }
   }
-  return line.map(
+  const text = line.map(
       nodes => nodes
                    .map(
                        node =>
                            (node instanceof HTMLElement ? node.innerText :
                                                           (node.nodeType === Node.TEXT_NODE ? node.textContent : '')))
                    .join());
+  for (const node of line.flat()) {
+    if (node instanceof HTMLElement) {
+      node.remove();
+    }
+  }
+  return text;
 }
 
 describeWithMockConnection('CSSValueTraceView', () => {

front_end/panels/elements/StylePropertiesSection.ts

@@ -163,6 +163,8 @@ export class StylePropertiesSection {
   #customHeaderText: string|undefined;
   readonly #specificityTooltips: HTMLSpanElement;
   static #nextSpecificityTooltipId = 0;
+  static #nextSectionTooltipIdPrefix = 0;
+  readonly sectionTooltipIdPrefix = StylePropertiesSection.#nextSectionTooltipIdPrefix++;
 
   constructor(
       parentPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -17,7 +17,7 @@ import {
   getMatchedStylesWithBlankRule,
 } from '../../testing/StyleHelpers.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import type * as Tooltips from '../../ui/components/tooltips/tooltips.js';
+import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as LegacyUI from '../../ui/legacy/legacy.js';
 
@@ -675,11 +675,12 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         const cssVarSwatch = linkSwatch.parentElement;
         assert.exists(cssVarSwatch);
         assert.exists(stylePropertyTreeElement.valueElement);
-        renderElementIntoDOM(stylePropertyTreeElement.valueElement, {allowMultipleChildren: true});
+        renderElementIntoDOM(stylePropertyTreeElement.valueElement);
 
         assert.strictEqual(stylePropertyTreeElement.valueElement.innerText, `var(${varName}, var(--blue))`);
         assert.strictEqual(linkSwatch?.innerText, varName);
         assert.strictEqual(cssVarSwatch.innerText, `var(${varName}, var(--blue))`);
+        stylePropertyTreeElement.valueElement.remove();
       }
     });
 
@@ -1437,7 +1438,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         const swatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-color-swatch');
         assert.exists(swatch);
         assert.exists(stylePropertyTreeElement.valueElement);
-        renderElementIntoDOM(stylePropertyTreeElement.valueElement, {allowMultipleChildren: true});
+        renderElementIntoDOM(stylePropertyTreeElement.valueElement);
         assert.strictEqual(swatch?.innerText, lightDark);
         const activeColor = colorScheme === SDK.CSSModel.ColorScheme.LIGHT ? lightText : darkText;
         assert.strictEqual(
@@ -1449,6 +1450,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         const inactive = colorScheme === SDK.CSSModel.ColorScheme.LIGHT ? dark : light;
         assert.isTrue(inactive.parentElement?.classList.contains('inactive-value'));
         assert.isFalse(active.parentElement?.classList.contains('inactive-value'));
+        stylePropertyTreeElement.valueElement.remove();
       }
 
       await check(SDK.CSSModel.ColorScheme.LIGHT, 'red', 'blue');
@@ -1694,11 +1696,12 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         const stylePropertyTreeElement = getTreeElement('width', property);
         stylePropertyTreeElement.updateTitle();
         assert.exists(stylePropertyTreeElement.valueElement);
-        renderElementIntoDOM(stylePropertyTreeElement.valueElement, {allowMultipleChildren: true});
+        renderElementIntoDOM(stylePropertyTreeElement.valueElement);
         const tooltip = stylePropertyTreeElement.valueElement.querySelector('devtools-tooltip');
         assert.exists(tooltip);
         const widget = tooltip.firstElementChild && LegacyUI.Widget.Widget.get(tooltip.firstElementChild);
         assert.instanceOf(widget, Elements.CSSValueTraceView.CSSValueTraceView);
+        stylePropertyTreeElement.valueElement.remove();
       }
     });
 
@@ -1819,4 +1822,25 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       ]);
     });
   });
+
+  it('reopens open tooltips on updates', async () => {
+    const openTooltipStub = sinon.stub(Tooltips.Tooltip.Tooltip.prototype, 'showPopover');
+    const openTooltipPromise1 = new Promise<void>(r => openTooltipStub.callsFake(r));
+    const stylePropertyTreeElement = getTreeElement('color', 'color-mix(in srgb, red, blue)');
+    stylePropertyTreeElement.updateTitle();
+    const tooltip = stylePropertyTreeElement.valueElement?.querySelector('devtools-tooltip');
+    assert.exists(tooltip);
+    renderElementIntoDOM(tooltip);
+    tooltip.showTooltip();
+    await openTooltipPromise1;
+    tooltip.remove();
+
+    const openTooltipPromise2 = new Promise<void>(r => openTooltipStub.callsFake(r));
+    stylePropertyTreeElement.updateTitle();
+    const tooltip2 = stylePropertyTreeElement.valueElement?.querySelector('devtools-tooltip');
+    assert.exists(tooltip2);
+    renderElementIntoDOM(tooltip2);
+    await openTooltipPromise2;
+    assert.notStrictEqual(tooltip, tooltip2);
+  });
 });