[styles] Make var() keyboard-interactable

Get rid of the VarSwatch indirection which wraps around the var link,
so that we can focus the var link. Activating the link through the
keyboard is possible.

Fixed: 401212692
Change-Id: I95cfaade34795d89a7b5a07f828f6f44aba06efe
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6297887
Auto-Submit: Philip Pfaffe <[email protected]>
Reviewed-by: Eric Leese <[email protected]>
Reviewed-by: Changhao Han <[email protected]>
Commit-Queue: Eric Leese <[email protected]>

Author: pfaffe

front_end/panels/elements/CSSValueTraceView.test.ts

@@ -67,7 +67,7 @@ async function showTrace(
     treeElement: Elements.StylePropertyTreeElement.StylePropertyTreeElement):
     Promise<Elements.CSSValueTraceView.ViewInput> {
   const viewFunction = createViewFunctionStub(Elements.CSSValueTraceView.CSSValueTraceView);
-  const view = new Elements.CSSValueTraceView.CSSValueTraceView(viewFunction);
+  const view = new Elements.CSSValueTraceView.CSSValueTraceView(undefined, viewFunction);
   await viewFunction.nextInput;
   view.showTrace(
       property, matchedStyles, new Map(),

front_end/panels/elements/CSSValueTraceView.ts

@@ -80,8 +80,8 @@ export class CSSValueTraceView extends UI.Widget.VBox {
   #evaluations: Node[][] = [];
   #substitutions: Node[][] = [];
 
-  constructor(view: View = defaultView) {
-    super(true);
+  constructor(element?: HTMLElement, view: View = defaultView) {
+    super(true, false, element);
     this.registerRequiredCSS(
         cssValueTraceViewStyles,
         stylePropertiesTreeOutlineStyles,

front_end/panels/elements/StylePropertiesSection.ts

@@ -1454,7 +1454,7 @@ export class StylePropertiesSection {
 
   startEditingSelector(): void {
     const element = this.selectorElement;
-    if (UI.UIUtils.isBeingEdited(element)) {
+    if (UI.UIUtils.isBeingEdited(element) || this.titleElement.classList.contains('hidden')) {
       return;
     }
 

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -169,10 +169,10 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
         const colorMixSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-color-mix-swatch');
         const cssVarSwatches =
-            Array.from(stylePropertyTreeElement.valueElement?.querySelectorAll('devtools-css-var-swatch') || []);
+            Array.from(stylePropertyTreeElement.valueElement?.querySelectorAll('.css-var-link') || []);
         assert.exists(colorMixSwatch);
-        assert.exists(cssVarSwatches.find(cssVarSwatch => cssVarSwatch.textContent === 'var(--a)'));
-        assert.exists(cssVarSwatches.find(cssVarSwatch => cssVarSwatch.textContent === 'var(--b)'));
+        assert.exists(cssVarSwatches.find(cssVarSwatch => cssVarSwatch.textContent === '--a'));
+        assert.exists(cssVarSwatches.find(cssVarSwatch => cssVarSwatch.textContent === '--b'));
       });
 
       it('should not show color mix swatch when color-mix is used with an unknown variable as color', () => {
@@ -519,12 +519,11 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
       const varSwatch =
           renderValueSpy.returnValues
-                  .find(value => value.valueElement.firstChild instanceof InlineEditor.LinkSwatch.CSSVarSwatch)
-                  ?.valueElement.firstChild as InlineEditor.LinkSwatch.CSSVarSwatch |
-          undefined;
+              .map(fragment => Array.from(fragment.valueElement.querySelectorAll('devtools-base-link-swatch')))
+              .flat()[0];
       assert.exists(varSwatch);
       const revealPropertySpy = sinon.spy(stylesSidebarPane, 'revealProperty');
-      varSwatch.link?.linkElement?.click();
+      varSwatch.linkElement?.click();
       assert.isTrue(revealPropertySpy.calledWith(cssCustomPropertyDef));
     });
 
@@ -566,12 +565,11 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
       const varSwatch =
           renderValueSpy.returnValues
-                  .find(value => value.valueElement.firstChild instanceof InlineEditor.LinkSwatch.CSSVarSwatch)
-                  ?.valueElement.firstChild as InlineEditor.LinkSwatch.CSSVarSwatch |
-          undefined;
+              .map(fragment => Array.from(fragment.valueElement.querySelectorAll('devtools-base-link-swatch')))
+              .flat()[0];
       assert.exists(varSwatch);
       const jumpToPropertySpy = sinon.spy(stylesSidebarPane, 'jumpToProperty');
-      varSwatch.link?.linkElement?.click();
+      varSwatch.linkElement?.click();
       assert.isTrue(jumpToPropertySpy.calledWith(
           'initial-value', '--prop', Elements.StylesSidebarPane.REGISTERED_PROPERTY_SECTION_NAME));
     });
@@ -583,12 +581,12 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       assert.exists(stylePropertyTreeElement.valueElement);
 
-      const cssVarSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-var-swatch');
-      assert.exists(cssVarSwatch);
-
-      const linkSwatch = cssVarSwatch.shadowRoot?.querySelector('devtools-base-link-swatch');
+      const linkSwatch = stylePropertyTreeElement.valueElement?.querySelector('.css-var-link');
       assert.exists(linkSwatch);
 
+      const cssVarSwatch = linkSwatch.parentElement;
+      assert.exists(cssVarSwatch);
+
       assert.strictEqual(cssVarSwatch.textContent, 'var(--a)');
       assert.strictEqual(linkSwatch.shadowRoot?.textContent, '--a');
       assert.strictEqual(stylePropertyTreeElement.valueElement.textContent, 'var(--a)');
@@ -599,12 +597,12 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       assert.exists(stylePropertyTreeElement.valueElement);
 
-      const cssVarSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-var-swatch');
-      assert.exists(cssVarSwatch);
-
-      const linkSwatch = cssVarSwatch.shadowRoot?.querySelector('devtools-base-link-swatch');
+      const linkSwatch = stylePropertyTreeElement.valueElement?.querySelector('.css-var-link');
       assert.exists(linkSwatch);
 
+      const cssVarSwatch = linkSwatch.parentElement;
+      assert.exists(cssVarSwatch);
+
       assert.strictEqual(linkSwatch.shadowRoot?.textContent, '--not-existing');
       assert.strictEqual(cssVarSwatch.deepTextContent(), 'var(--not-existing, red)');
       assert.strictEqual(stylePropertyTreeElement.valueElement.textContent, 'var(--not-existing, red)');
@@ -615,12 +613,15 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       assert.exists(stylePropertyTreeElement.valueElement);
 
-      const cssVarSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-var-swatch');
+      const [firstLinkSwatch, secondLinkSwatch] =
+          stylePropertyTreeElement.valueElement?.querySelectorAll('.css-var-link');
+      assert.exists(firstLinkSwatch);
+      assert.exists(secondLinkSwatch);
+      const cssVarSwatch = firstLinkSwatch.parentElement;
       assert.exists(cssVarSwatch);
+      const insideCssVarSwatch = secondLinkSwatch.parentElement;
+      assert.exists(insideCssVarSwatch);
 
-      const firstLinkSwatch = cssVarSwatch.shadowRoot?.querySelector('devtools-base-link-swatch');
-      const insideCssVarSwatch = cssVarSwatch.querySelector('devtools-css-var-swatch');
-      const secondLinkSwatch = insideCssVarSwatch?.shadowRoot?.querySelector('devtools-base-link-swatch');
       assert.strictEqual(stylePropertyTreeElement.valueElement.textContent, 'var(--not-existing, var(--a))');
       assert.strictEqual(firstLinkSwatch?.shadowRoot?.textContent, '--not-existing');
       assert.strictEqual(cssVarSwatch.textContent, 'var(--not-existing, var(--a))');
@@ -633,13 +634,13 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       assert.exists(stylePropertyTreeElement.valueElement);
 
-      const cssVarSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-var-swatch');
+      const linkSwatch = stylePropertyTreeElement.valueElement?.querySelector('.css-var-link');
+      assert.exists(linkSwatch);
+      const cssVarSwatch = linkSwatch.parentElement;
       assert.exists(cssVarSwatch);
 
-      const firstLinkSwatch = cssVarSwatch.shadowRoot?.querySelector('devtools-base-link-swatch');
-
       assert.strictEqual(stylePropertyTreeElement.valueElement.textContent, 'var(--not-existing, calc(15px + 20px))');
-      assert.strictEqual(firstLinkSwatch?.shadowRoot?.textContent, '--not-existing');
+      assert.strictEqual(linkSwatch?.shadowRoot?.textContent, '--not-existing');
       assert.strictEqual(cssVarSwatch.textContent, 'var(--not-existing, calc(15px + 20px))');
     });
 
@@ -649,17 +650,17 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
         stylePropertyTreeElement.updateTitle();
         assert.exists(stylePropertyTreeElement.valueElement);
 
-        const cssVarSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-var-swatch');
-        assert.exists(cssVarSwatch);
-
-        const colorSwatch = cssVarSwatch.querySelector('devtools-color-swatch');
+        const colorSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-color-swatch');
         assert.exists(colorSwatch);
         assert.isTrue(InlineEditor.ColorSwatch.ColorSwatch.isColorSwatch(colorSwatch));
 
-        const firstLinkSwatch = cssVarSwatch.shadowRoot?.querySelector('devtools-base-link-swatch');
+        const linkSwatch = stylePropertyTreeElement.valueElement?.querySelector('.css-var-link');
+        assert.exists(linkSwatch);
+        const cssVarSwatch = linkSwatch.parentElement;
+        assert.exists(cssVarSwatch);
 
         assert.strictEqual(stylePropertyTreeElement.valueElement.textContent, `var(${varName}, var(--blue))`);
-        assert.strictEqual(firstLinkSwatch?.shadowRoot?.textContent, varName);
+        assert.strictEqual(linkSwatch?.shadowRoot?.textContent, varName);
         assert.strictEqual(cssVarSwatch.textContent, `var(${varName}, var(--blue))`);
       }
     });
@@ -668,31 +669,20 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       const stylePropertyTreeElement = getTreeElement('--shadow', 'var(--a) var(--b)');
       stylePropertyTreeElement.updateTitle();
 
-      const cssVarSwatches = stylePropertyTreeElement.valueElement?.querySelectorAll('devtools-css-var-swatch');
+      const cssVarSwatches = stylePropertyTreeElement.valueElement?.querySelectorAll('.css-var-link');
       assert.strictEqual(cssVarSwatches?.length, 2);
     });
 
-    it('should render a CSSVarSwatch for var() with spaces', () => {
-      const stylePropertyTreeElement = getTreeElement('color', 'var( --test    )');
-      stylePropertyTreeElement.updateTitle();
-      assert.exists(stylePropertyTreeElement.valueElement);
-
-      const cssVarSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-var-swatch');
-      assert.exists(cssVarSwatch);
-
-      const linkSwatch = cssVarSwatch.shadowRoot?.querySelector('devtools-base-link-swatch');
-      assert.strictEqual(linkSwatch?.shadowRoot?.textContent, '--test');
-      assert.strictEqual(cssVarSwatch.textContent, 'var( --test    )');
-      assert.strictEqual(stylePropertyTreeElement.valueElement.textContent, 'var( --test    )');
-    });
-
     it('connects nested color swatches', () => {
       const stylePropertyTreeElement = getTreeElement('color', 'var(--void, red)');
       stylePropertyTreeElement.updateTitle();
       assert.exists(stylePropertyTreeElement.valueElement);
 
-      const cssVarSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-var-swatch');
+      const linkSwatch = stylePropertyTreeElement.valueElement?.querySelector('.css-var-link');
+      assert.exists(linkSwatch);
+      const cssVarSwatch = linkSwatch.parentElement;
       assert.exists(cssVarSwatch);
+
       const outerColorSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-color-swatch');
       assert.exists(outerColorSwatch);
       const innerColorSwatch = cssVarSwatch.querySelector('devtools-color-swatch');
@@ -708,8 +698,11 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
       assert.exists(stylePropertyTreeElement.valueElement);
 
-      const cssVarSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-var-swatch');
+      const linkSwatch = stylePropertyTreeElement.valueElement?.querySelector('.css-var-link');
+      assert.exists(linkSwatch);
+      const cssVarSwatch = linkSwatch.parentElement;
       assert.exists(cssVarSwatch);
+
       const outerColorSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-color-swatch');
       assert.exists(outerColorSwatch);
       const innerColorSwatch = cssVarSwatch.querySelector('devtools-color-swatch');
@@ -757,7 +750,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
     it('layers correctly with the font renderer', () => {
       const stylePropertyTreeElement = getTreeElement('font-size', 'calc(1 + var(--no))');
       stylePropertyTreeElement.updateTitle();
-      assert.exists(stylePropertyTreeElement.valueElement?.querySelector('devtools-css-var-swatch'));
+      assert.exists(stylePropertyTreeElement.valueElement?.querySelector('.css-var-link'));
     });
   });
 
@@ -772,7 +765,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       assert.exists(colorSwatch);
       assert.strictEqual(colorSwatch.getColor()?.asString(Common.Color.Format.HEX), '#ff0000');
 
-      const varSwatches = stylePropertyTreeElement.valueElement?.querySelectorAll('devtools-css-var-swatch');
+      const varSwatches = stylePropertyTreeElement.valueElement?.querySelectorAll('.css-var-link');
       assert.exists(varSwatches);
       assert.lengthOf(varSwatches, 2);
     });

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -16,6 +16,7 @@ import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {
@@ -253,6 +254,9 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     const {declaration, value: variableValue} = match.resolveVariable() ?? {};
     const fromFallback = variableValue === undefined;
     const computedValue = variableValue ?? match.fallbackValue();
+    const onLinkActivate = (name: string): void => this.#handleVarDefinitionActivate(declaration ?? name);
+    const linkTitle = computedValue ?? i18nString(UIStrings.sIsNotDefined, {PH1: match.name});
+    const varSwatch = document.createElement('span');
 
     const substitution = context.tracing?.substitution();
     if (substitution) {
@@ -273,41 +277,57 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     }
 
     const renderedFallback = match.fallback.length > 0 ? Renderer.render(match.fallback, context) : undefined;
-
-    const varSwatch = new InlineEditor.LinkSwatch.CSSVarSwatch();
-    varSwatch.data = {
-      computedValue,
-      variableName: match.name,
-      fromFallback,
-      fallbackText: match.fallback.map(n => context.ast.text(n)).join(' '),
-      onLinkActivate: name => this.#handleVarDefinitionActivate(declaration ?? name),
-    };
-
-    if (renderedFallback?.nodes.length) {
-      // When slotting someting into the fallback slot, also emit text children so that .textContent produces the
-      // correct var value.
-      varSwatch.appendChild(document.createTextNode(`var(${match.name}`));
-      const span = varSwatch.appendChild(document.createElement('span'));
-      span.appendChild(document.createTextNode(', '));
-      span.slot = 'fallback';
-      renderedFallback.nodes.forEach(n => span.appendChild(n));
-      varSwatch.appendChild(document.createTextNode(')'));
+    let traceWidget: CSSValueTraceView|undefined;
+    let tooltipContents;
+    if (Root.Runtime.hostConfig.devToolsCssValueTracing?.enabled &&
+        declaration?.declaration instanceof SDK.CSSProperty.CSSProperty) {
+      tooltipContents = html`<devtools-widget
+            .widgetConfig=${UI.Widget.widgetConfig(CSSValueTraceView, {})}
+            ${UI.Widget.widgetRef(CSSValueTraceView, e => {
+        traceWidget = e;
+      })}
+            ></devtools-widget>`;
     } else {
-      UI.UIUtils.createTextChild(varSwatch, match.text);
-    }
+      tooltipContents =
+          this.#stylesPane.getVariablePopoverContents(this.#matchedStyles, match.name, variableValue ?? null);
+    }
+    const toggleTooltip = (e: ToggleEvent): void => {
+      if (e.newState === 'open' && Root.Runtime.hostConfig.devToolsCssValueTracing?.enabled &&
+          declaration?.declaration instanceof SDK.CSSProperty.CSSProperty) {
+        const property = declaration.declaration;
+        traceWidget?.showTrace(
+            property, this.#matchedStyles, this.#computedStyles,
+            getPropertyRenderers(
+                property.ownerStyle, this.#stylesPane, this.#matchedStyles, this.#treeElement, this.#computedStyles));
+      }
+    };
 
     const tooltipId = swatchTooltipId();
-    varSwatch.setAttribute('aria-details', tooltipId);
-    const tooltip = new Tooltips.Tooltip.Tooltip(
-        {anchor: varSwatch, variant: 'rich', id: tooltipId, jslogContext: 'elements.css-var'});
-    tooltip.appendChild(
-        (varSwatch.link &&
-         this.#stylesPane.getVariablePopoverContents(this.#matchedStyles, match.name, variableValue ?? null)) ||
-        document.createTextNode(i18nString(UIStrings.sIsNotDefined, {PH1: match.name})));
+    render(
+        html`<span data-title=${computedValue || ''}
+          jslog=${VisualLogging.link('css-variable').track({
+          click: true,
+          hover: true
+        })}>var(<devtools-base-link-swatch
+        class=css-var-link
+        aria-details=${tooltipId}
+        .data=${{
+          text: match.name,
+          isDefined: computedValue !== null && !fromFallback,
+          title: linkTitle,
+          showTitle: false,
+          onLinkActivate,
+        } as InlineEditor.LinkSwatch.BaseLinkSwatchRenderData}>${match.name}</devtools-base-link-swatch>${
+            renderedFallback?.nodes.length ? html`, ${renderedFallback.nodes}` : nothing})</span><devtools-tooltip
+            variant=rich
+            id=${tooltipId}
+            @beforetoggle=${toggleTooltip}
+            jslogContext=elements.css-var>${tooltipContents}</devtools-tooltip>`,
+        varSwatch);
 
     const color = computedValue && Common.Color.parse(computedValue);
     if (!color) {
-      return [varSwatch, tooltip];
+      return [varSwatch];
     }
 
     const colorSwatch = new ColorRenderer(this.#stylesPane, this.#treeElement).renderColorSwatch(color, varSwatch);
@@ -320,7 +340,7 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
           }));
     }
 
-    return [colorSwatch, tooltip];
+    return [colorSwatch];
   }
 
   #handleVarDefinitionActivate(variable: string|SDK.CSSMatchedStyles.CSSValueSource): void {