[css value tracing] Implement vertical highlights for expressions

Hovering a sub-expression in a trace line will highlight the same
expression in other lines to simplify identifying value progression
through the trace.

Fixed: 401482931
Change-Id: Ie15ea1e5541caada9414b22fdd7a5d262a0252bf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6333519
Reviewed-by: Eric Leese <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>

Author: pfaffe

front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -165,7 +165,9 @@ export class TextMatch implements Match {
     }
   }
   render(): Node[] {
-    return [document.createTextNode(this.text)];
+    const span = document.createElement('span');
+    span.appendChild(document.createTextNode(this.text));
+    return [span];
   }
 }
 

front_end/panels/elements/CSSValueTraceView.ts

@@ -8,6 +8,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import cssValueTraceViewStyles from './cssValueTraceView.css.js';
 import {
+  Highlighting,
   type MatchRenderer,
   Renderer,
   RenderingContext,
@@ -75,7 +76,8 @@ function defaultView(input: ViewInput, _: unknown, target: HTMLElement): void {
 }
 
 export class CSSValueTraceView extends UI.Widget.VBox {
-  #view: View;
+  #highlighting: Highlighting|undefined;
+  readonly #view: View;
   #finalResult: Node[]|undefined = undefined;
   #evaluations: Node[][] = [];
   #substitutions: Node[][] = [];
@@ -113,13 +115,14 @@ export class CSSValueTraceView extends UI.Widget.VBox {
       computedStyles: Map<string, string>|null,
       renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>,
       ): void {
+    this.#highlighting = new Highlighting();
     const rendererMap = new Map(renderers.map(r => [r.matchType, r]));
 
     // Compute all trace lines
     // 1st: Apply substitutions for var() functions
     const substitutions = [];
     const evaluations = [];
-    const tracing = new TracingContext(matchedResult);
+    const tracing = new TracingContext(this.#highlighting, matchedResult);
     while (tracing.nextSubstitution()) {
       const context = new RenderingContext(
           matchedResult.ast,

front_end/panels/elements/PropertyRenderer.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as SDK from '../../core/sdk/sdk.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {Printer} from '../../testing/PropertyParser.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
@@ -100,21 +101,24 @@ describe('TracingContext', () => {
   it('assumes no substitutions by default', () => {
     const matchedResult = sinon.createStubInstance(SDK.CSSPropertyParser.BottomUpTreeMatching);
     matchedResult.hasMatches.returns(false);
-    const context = new Elements.PropertyRenderer.TracingContext(matchedResult);
+    const context =
+        new Elements.PropertyRenderer.TracingContext(new Elements.PropertyRenderer.Highlighting(), matchedResult);
     assert.isFalse(context.nextSubstitution());
 
     matchedResult.hasMatches.returns(true);
-    const context2 = new Elements.PropertyRenderer.TracingContext(matchedResult);
+    const context2 =
+        new Elements.PropertyRenderer.TracingContext(new Elements.PropertyRenderer.Highlighting(), matchedResult);
     assert.isTrue(context2.nextSubstitution());
 
-    const context3 = new Elements.PropertyRenderer.TracingContext();
+    const context3 = new Elements.PropertyRenderer.TracingContext(new Elements.PropertyRenderer.Highlighting());
     assert.isFalse(context3.nextSubstitution());
   });
 
   it('controls substitution by creating "nested" tracing contexts', () => {
     const matchedResult = sinon.createStubInstance(SDK.CSSPropertyParser.BottomUpTreeMatching);
     matchedResult.hasMatches.returns(true);
-    const context = new Elements.PropertyRenderer.TracingContext(matchedResult);
+    const context =
+        new Elements.PropertyRenderer.TracingContext(new Elements.PropertyRenderer.Highlighting(), matchedResult);
 
     assert.isTrue(context.nextSubstitution());
     assert.exists(context.substitution());
@@ -140,7 +144,8 @@ describe('TracingContext', () => {
   it('does not allow tracing evaluations until substitutions are exhausted', () => {
     const matchedResult = sinon.createStubInstance(SDK.CSSPropertyParser.BottomUpTreeMatching);
     matchedResult.hasMatches.returns(true);
-    const context = new Elements.PropertyRenderer.TracingContext(matchedResult);
+    const context =
+        new Elements.PropertyRenderer.TracingContext(new Elements.PropertyRenderer.Highlighting(), matchedResult);
 
     assert.throw(() => context.nextEvaluation());
     context.nextSubstitution();
@@ -150,7 +155,8 @@ describe('TracingContext', () => {
   it('controls evaluations creating nested context', () => {
     const matchedResult = sinon.createStubInstance(SDK.CSSPropertyParser.BottomUpTreeMatching);
     matchedResult.hasMatches.returns(false);
-    const context = new Elements.PropertyRenderer.TracingContext(matchedResult);
+    const context =
+        new Elements.PropertyRenderer.TracingContext(new Elements.PropertyRenderer.Highlighting(), matchedResult);
 
     // Evaluations are applied bottom up
     assert.isTrue(context.nextEvaluation());
@@ -214,8 +220,76 @@ describe('TracingContext', () => {
   });
 
   it('can inject itself into a RenderingContext', () => {
-    const tracingContext = new Elements.PropertyRenderer.TracingContext();
+    const tracingContext = new Elements.PropertyRenderer.TracingContext(new Elements.PropertyRenderer.Highlighting());
     const renderingContext = sinon.createStubInstance(Elements.PropertyRenderer.RenderingContext);
     assert.strictEqual(tracingContext.renderingContext(renderingContext).tracing, tracingContext);
   });
 });
+
+describe('Highlighting', () => {
+  const node = (id: string) => {
+    const span = document.createElement('span');
+    span.textContent = id;
+    span.id = `node-${id}`;
+    renderElementIntoDOM(span, {allowMultipleChildren: true});
+    return span;
+  };
+
+  beforeEach(() => {
+    const highlighting = new Elements.PropertyRenderer.Highlighting();
+    const match1 = sinon.createStubInstance(SDK.CSSPropertyParserMatchers.TextMatch);
+    const match2 = sinon.createStubInstance(SDK.CSSPropertyParserMatchers.TextMatch);
+    highlighting.addMatch(match1, [node('1'), node('2'), node('3')]);
+    highlighting.addMatch(match1, [node('4'), node('5'), node('6'), node('7')]);
+    highlighting.addMatch(match1, [node('8')]);
+    highlighting.addMatch(match2, [node('a'), node('b'), node('c')]);
+  });
+
+  it('adds highlights on mouseenter', () => {
+    const registry = CSS.highlights.get(Elements.PropertyRenderer.Highlighting.REGISTRY_NAME);
+    assert.exists(registry);
+
+    document.querySelector('#node-6')?.dispatchEvent(new MouseEvent('mouseenter'));
+    assert.deepEqual(
+        Array.from(registry.keys().map(value => (value as Range).cloneContents().textContent)), ['123', '4567', '8']);
+  });
+
+  it('removes highlights on mouseexit', () => {
+    const registry = CSS.highlights.get(Elements.PropertyRenderer.Highlighting.REGISTRY_NAME);
+    assert.exists(registry);
+
+    document.querySelector('#node-6')?.dispatchEvent(new MouseEvent('mouseenter'));
+    assert.deepEqual(
+        Array.from(registry.keys().map(value => (value as Range).cloneContents().textContent)), ['123', '4567', '8']);
+    document.querySelector('#node-6')?.dispatchEvent(new MouseEvent('mouseleave'));
+    assert.deepEqual(Array.from(registry.keys().map(value => (value as Range).cloneContents().textContent)), []);
+  });
+
+  it('replaces highlights on subsequent mouseenter', () => {
+    const registry = CSS.highlights.get(Elements.PropertyRenderer.Highlighting.REGISTRY_NAME);
+    assert.exists(registry);
+
+    document.querySelector('#node-6')?.dispatchEvent(new MouseEvent('mouseenter'));
+    assert.deepEqual(
+        Array.from(registry.keys().map(value => (value as Range).cloneContents().textContent)), ['123', '4567', '8']);
+
+    document.querySelector('#node-a')?.dispatchEvent(new MouseEvent('mouseenter'));
+    assert.deepEqual(Array.from(registry.keys().map(value => (value as Range).cloneContents().textContent)), ['abc']);
+  });
+
+  it('restores previous highlights on mouseexit', () => {
+    const registry = CSS.highlights.get(Elements.PropertyRenderer.Highlighting.REGISTRY_NAME);
+    assert.exists(registry);
+
+    document.querySelector('#node-6')?.dispatchEvent(new MouseEvent('mouseenter'));
+    assert.deepEqual(
+        Array.from(registry.keys().map(value => (value as Range).cloneContents().textContent)), ['123', '4567', '8']);
+
+    document.querySelector('#node-a')?.dispatchEvent(new MouseEvent('mouseenter'));
+    assert.deepEqual(Array.from(registry.keys().map(value => (value as Range).cloneContents().textContent)), ['abc']);
+
+    document.querySelector('#node-a')?.dispatchEvent(new MouseEvent('mouseleave'));
+    assert.deepEqual(
+        Array.from(registry.keys().map(value => (value as Range).cloneContents().textContent)), ['123', '4567', '8']);
+  });
+});

front_end/panels/elements/PropertyRenderer.ts

@@ -56,6 +56,87 @@ export function rendererBase<MatchT extends SDK.CSSPropertyParser.Match>(
   return RendererBase;
 }
 
+// This class implements highlighting for rendered nodes in value traces. On hover, all nodes belonging to the same
+// Match (using object identity) are highlighted.
+export class Highlighting {
+  static readonly REGISTRY_NAME = 'css-value-tracing';
+  // This holds a stack of active ranges, the top-stack is the currently highlighted set. mouseenter and mouseleave
+  // push and pop range sets, respectively.
+  readonly #activeHighlights: Range[][] = [];
+  // We hold a bidirectional mapping between nodes and matches. A node can belong to multiple matches when matches are
+  // nested (via function arguments for instance).
+  readonly #nodesForMatches = new Map<SDK.CSSPropertyParser.Match, Node[][]>();
+  readonly #matchesForNodes = new Map<Node, SDK.CSSPropertyParser.Match[]>();
+  readonly #registry: Highlight;
+  readonly #boundOnEnter: (ev: MouseEvent) => void;
+  readonly #boundOnExit: (ev: MouseEvent) => void;
+
+  constructor() {
+    const registry = CSS.highlights.get(Highlighting.REGISTRY_NAME);
+    this.#registry = registry ?? new Highlight();
+    if (!registry) {
+      CSS.highlights.set(Highlighting.REGISTRY_NAME, this.#registry);
+    }
+    this.#boundOnExit = this.#onExit.bind(this);
+    this.#boundOnEnter = this.#onEnter.bind(this);
+  }
+
+  addMatch(match: SDK.CSSPropertyParser.Match, nodes: Node[]): void {
+    if (nodes.length > 0) {
+      const ranges = this.#nodesForMatches.get(match);
+      if (ranges) {
+        ranges.push(nodes);
+      } else {
+        this.#nodesForMatches.set(match, [nodes]);
+      }
+    }
+    for (const node of nodes) {
+      const matches = this.#matchesForNodes.get(node);
+      if (matches) {
+        matches.push(match);
+      } else {
+        this.#matchesForNodes.set(node, [match]);
+      }
+      if (node instanceof HTMLElement) {
+        node.onmouseenter = this.#boundOnEnter;
+        node.onmouseleave = this.#boundOnExit;
+      }
+    }
+  }
+
+  * #nodeRangesHitByMouseEvent(e: MouseEvent): Generator<Node[]> {
+    for (const node of e.composedPath()) {
+      const matches = this.#matchesForNodes.get(node as Node);
+      if (matches) {
+        for (const match of matches) {
+          yield* this.#nodesForMatches.get(match) ?? [];
+        }
+        break;
+      }
+    }
+  }
+
+  #onEnter(e: MouseEvent): void {
+    this.#registry.clear();
+    this.#activeHighlights.push([]);
+    for (const nodeRange of this.#nodeRangesHitByMouseEvent(e)) {
+      const range = new Range();
+      range.setStartBefore(nodeRange[0]);
+      range.setEndAfter(nodeRange[nodeRange.length - 1]);
+      this.#activeHighlights[this.#activeHighlights.length - 1].push(range);
+      this.#registry.add(range);
+    }
+  }
+
+  #onExit(): void {
+    this.#registry.clear();
+    this.#activeHighlights.pop();
+    if (this.#activeHighlights.length > 0) {
+      this.#activeHighlights[this.#activeHighlights.length - 1].forEach(range => this.#registry.add(range));
+    }
+  }
+}
+
 // This class is used to guide value tracing when passed to the Renderer. Tracing has two phases. First, substitutions
 // such as var() are applied step by step. In each step, all vars in the value are replaced by their definition until no
 // vars remain. In the second phase, we evaluate other functions such as calc() or min() or color-mix(). Which CSS
@@ -76,14 +157,25 @@ export class TracingContext {
   #evaluationCount = 0;
   #appliedEvaluations = 0;
   #hasMoreEvaluations = true;
-
-  constructor(matchedResult?: SDK.CSSPropertyParser.BottomUpTreeMatching) {
+  readonly #highlighting: Highlighting;
+  #parsedValueCache = new Map<SDK.CSSProperty.CSSProperty, {
+    matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+    computedStyles: Map<string, string>,
+    parsedValue: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
+  }>();
+
+  constructor(highlighting: Highlighting, matchedResult?: SDK.CSSPropertyParser.BottomUpTreeMatching) {
+    this.#highlighting = highlighting;
     this.#hasMoreSubstitutions =
         matchedResult?.hasMatches(
             SDK.CSSPropertyParserMatchers.VariableMatch, SDK.CSSPropertyParserMatchers.BaseVariableMatch) ??
         false;
   }
 
+  get highlighting(): Highlighting {
+    return this.#highlighting;
+  }
+
   renderingContext(context: RenderingContext): RenderingContext {
     return new RenderingContext(
         context.ast, context.property, context.renderers, context.matchedResult, context.cssControls, context.options,
@@ -128,11 +220,12 @@ export class TracingContext {
   // be passed to the Renderer calls for the respective subtrees.
   evaluation(args: unknown[]): TracingContext[]|null {
     const childContexts = args.map(() => {
-      const child = new TracingContext();
+      const child = new TracingContext(this.#highlighting);
       child.#parent = this;
       child.#substitutionDepth = this.#substitutionDepth;
       child.#evaluationCount = this.#evaluationCount;
       child.#hasMoreSubstitutions = this.#hasMoreSubstitutions;
+      child.#parsedValueCache = this.#parsedValueCache;
       return child;
     });
     return childContexts;
@@ -172,13 +265,26 @@ export class TracingContext {
       this.#setHasMoreSubstitutions();
       return null;
     }
-    const child = new TracingContext();
+    const child = new TracingContext(this.#highlighting);
     child.#parent = this;
     child.#substitutionDepth = this.#substitutionDepth - 1;
     child.#evaluationCount = this.#evaluationCount;
     child.#hasMoreSubstitutions = false;
+    child.#parsedValueCache = this.#parsedValueCache;
     return child;
   }
+
+  cachedParsedValue(
+      declaration: SDK.CSSProperty.CSSProperty, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      computedStyles: Map<string, string>): SDK.CSSPropertyParser.BottomUpTreeMatching|null {
+    const cachedValue = this.#parsedValueCache.get(declaration);
+    if (cachedValue?.matchedStyles === matchedStyles && cachedValue?.computedStyles === computedStyles) {
+      return cachedValue.parsedValue;
+    }
+    const parsedValue = declaration.parseValue(matchedStyles, computedStyles);
+    this.#parsedValueCache.set(declaration, {matchedStyles, computedStyles, parsedValue});
+    return parsedValue;
+  }
 }
 
 export class RenderingContext {
@@ -263,6 +369,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     if (renderer || match instanceof SDK.CSSPropertyParserMatchers.TextMatch) {
       const output = renderer ? renderer.render(match, this.#context) :
                                 (match as SDK.CSSPropertyParserMatchers.TextMatch).render();
+      this.#context.tracing?.highlighting.addMatch(match, output);
       this.renderedMatchForTest(output, match);
       this.#output = mergeWithSpacing(this.#output, output);
       return false;

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -281,7 +281,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
                 ({results: request.values.map(v => v === property.value ? 'grey' : v)}));
         const matchedResult = property.parseValue(matchedStyles, new Map());
 
-        const context = new Elements.PropertyRenderer.TracingContext();
+        const context = new Elements.PropertyRenderer.TracingContext(new Elements.PropertyRenderer.Highlighting());
         assert.isTrue(context.nextEvaluation());
         const {valueElement} = Elements.PropertyRenderer.Renderer.renderValueElement(
             property, matchedResult,
@@ -1631,7 +1631,8 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       const stylePropertyTreeElement =
           getTreeElement('position-try', '/* comment */ most-height --top, --left, --bottom');
       stylePropertyTreeElement.updateTitle();
-      const values = stylePropertyTreeElement.valueElement?.querySelectorAll(':scope > span');
+      const values =
+          stylePropertyTreeElement.valueElement?.querySelectorAll(':scope > span:has(> devtools-link-swatch)');
       assert.exists(values);
       assert.strictEqual(values?.length, 3);
       assert.isTrue(values[0].classList.contains('inactive-value'));
@@ -1709,17 +1710,19 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       stylePropertyTreeElement.updateTitle();
 
       let args = stylePropertyTreeElement.valueElement?.querySelectorAll('span') as NodeListOf<HTMLSpanElement>;
-      assert.lengthOf(args, 3);
+      assert.lengthOf(args, 5);
       assert.deepEqual(
-          Array.from(args.values()).map(arg => arg.classList.contains('inactive-value')), [false, false, true]);
+          Array.from(args.values()).map(arg => arg.classList.contains('inactive-value')),
+          [false, false, false, true, false]);
 
       stylePropertyTreeElement.setComputedStyles(new Map([['appearance', 'base-select']]));
       stylePropertyTreeElement.updateTitle();
 
       args = stylePropertyTreeElement.valueElement?.querySelectorAll('span') as NodeListOf<HTMLSpanElement>;
-      assert.lengthOf(args, 3);
+      assert.lengthOf(args, 5);
       assert.deepEqual(
-          Array.from(args.values()).map(arg => arg.classList.contains('inactive-value')), [false, true, false]);
+          Array.from(args.values()).map(arg => arg.classList.contains('inactive-value')),
+          [false, true, false, false, false]);
     });
   });