Automatically set jslog for devtools-tooltip

Bug: 392078321
Change-Id: Ib2b1d5b4e26ddd19f81f9f0c55433ea4db292ae0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6322187
Auto-Submit: Philip Pfaffe <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>

Author: pfaffe

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

@@ -8,18 +8,20 @@ import * as Lit from '../../lit/lit.js';
 
 import * as Tooltips from './tooltips.js';
 
-const {html} = Lit;
+const {html, nothing} = Lit;
 
 interface RenderProps {
   variant?: Tooltips.Tooltip.TooltipVariant;
   attribute?: 'aria-describedby'|'aria-details';
   useClick?: boolean;
+  jslogContext?: string;
 }
 
 function renderTooltip({
   variant = 'simple',
   attribute = 'aria-describedby',
   useClick = false,
+  jslogContext = undefined,
 }: RenderProps = {}) {
   const container = document.createElement('div');
   // clang-format off
@@ -28,7 +30,7 @@ function renderTooltip({
       html`<button aria-details="tooltip-id">Button</button>` :
       html`<button aria-describedby="tooltip-id">Button</button>`
     }
-    <devtools-tooltip id="tooltip-id" variant=${variant} ?use-click=${useClick}>
+    <devtools-tooltip id="tooltip-id" variant=${variant} ?use-click=${useClick} jslogContext=${jslogContext??nothing}>
       ${variant === 'rich' ? html`<p>Rich content</p>` : 'Simple content'}
     </devtools-tooltip>
   `, container);
@@ -169,4 +171,21 @@ describe('Tooltip', () => {
 
     assert.isFalse(container.querySelector('devtools-tooltip')?.open);
   });
+
+  it('automatically sets and updates jslog', () => {
+    const container = renderTooltip({jslogContext: 'context'});
+    const tooltip = container.querySelector('devtools-tooltip');
+    assert.exists(tooltip);
+    assert.strictEqual(tooltip.getAttribute('jslog'), 'Popover; context: context; parent: mapped');
+
+    tooltip.setAttribute('jslogcontext', 'context2');
+    assert.strictEqual(tooltip.getAttribute('jslog'), 'Popover; context: context2; parent: mapped');
+
+    const anchor = container.createChild('button');
+    anchor.setAttribute('aria-details', 'constructed-tooltip-id');
+    const constructedTooltip =
+        new Tooltips.Tooltip.Tooltip({id: 'constructed-tooltip-id', jslogContext: 'context3', anchor});
+    container.appendChild(constructedTooltip);
+    assert.strictEqual(constructedTooltip.getAttribute('jslog'), 'Popover; context: context3; parent: mapped');
+  });
 });

front_end/ui/components/tooltips/Tooltip.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Lit from '../../lit/lit.js';
+import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import tooltipStyles from './tooltip.css.js';
 
@@ -14,6 +15,7 @@ export interface TooltipProperties {
   id: string;
   variant?: TooltipVariant;
   anchor?: HTMLElement;
+  jslogContext?: string;
 }
 
 /**
@@ -28,7 +30,7 @@ export interface TooltipProperties {
  * @prop {Boolean} useClick - reflects the `"click"` attribute.
  */
 export class Tooltip extends HTMLElement {
-  static readonly observedAttributes = ['id', 'variant'];
+  static readonly observedAttributes = ['id', 'variant', 'jslogcontext'];
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #anchor: HTMLElement|null = null;
@@ -65,6 +67,14 @@ export class Tooltip extends HTMLElement {
     this.setAttribute('variant', variant);
   }
 
+  get jslogContext(): string|null {
+    return this.getAttribute('jslogcontext');
+  }
+  set jslogContext(jslogContext: string) {
+    this.setAttribute('jslogcontext', jslogContext);
+    this.#updateJslog();
+  }
+
   constructor(properties?: TooltipProperties) {
     super();
     if (properties) {
@@ -73,6 +83,9 @@ export class Tooltip extends HTMLElement {
     if (properties?.variant) {
       this.variant = properties.variant;
     }
+    if (properties?.jslogContext) {
+      this.jslogContext = properties.jslogContext;
+    }
     if (properties?.anchor) {
       const ref = properties.anchor.getAttribute('aria-details') ?? properties.anchor.getAttribute('aria-describedby');
       if (ref !== properties.id) {
@@ -90,6 +103,8 @@ export class Tooltip extends HTMLElement {
     if (name === 'id') {
       this.#removeEventListeners();
       this.#attachToAnchor();
+    } else if (name === 'jslogcontext') {
+      this.#updateJslog();
     }
   }
 
@@ -144,11 +159,21 @@ export class Tooltip extends HTMLElement {
     }
   };
 
+  #updateJslog(): void {
+    if (this.jslogContext && this.#anchor) {
+      VisualLogging.setMappedParent(this, this.#anchor);
+      this.setAttribute('jslog', VisualLogging.popover(this.jslogContext).parent('mapped').toString());
+    } else {
+      this.removeAttribute('jslog');
+    }
+  }
+
   #setAttributes(): void {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'tooltip');
     }
     this.setAttribute('popover', this.useClick ? 'auto' : 'manual');
+    this.#updateJslog();
   }
 
   #stopPropagation(event: Event): void {
@@ -234,6 +259,8 @@ export class Tooltip extends HTMLElement {
     this.#anchor.style.anchorName = anchorName;
     this.style.positionAnchor = anchorName;
     this.#observeAnchorRemoval(this.#anchor);
+
+    this.#updateJslog();
   }
 
   #observeAnchorRemoval(anchor: Element): void {

front_end/ui/visual_logging/KnownContextValues.ts

@@ -841,6 +841,8 @@ export const knownContextValues = new Set([
   'content-length',
   'content-type',
   'content-visibility',
+  'context',
+  'context3',
   'contextmenu',
   'continue',
   'continue-replay',