CSS Value tracing for substitutions

Bug: 396080529
Change-Id: Icd3de860e343180836d1a31c68daaaa11cf44e64
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6284853
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Eric Leese <[email protected]>
Reviewed-by: Changhao Han <[email protected]>

Author: pfaffe

front_end/panels/elements/CSSValueTraceView.test.ts

@@ -120,18 +120,55 @@ describeWithMockConnection('CSSValueTraceView', () => {
     }
   });
 
-  it('does not have substitutions yet', async () => {
+  it('applies substitutions', async () => {
     const {matchedStyles, stylesPane} = await setUpStyles();
     const {property, treeElement} =
-        await getTreeElement(matchedStyles, stylesPane, 'width', 'var(--w)', {'--w': {value: '40em'}});
+        await getTreeElement(matchedStyles, stylesPane, 'width', 'var(--w)', {'--w': {value: '40px'}});
+    const input = await showTrace(property, matchedStyles, treeElement);
+    const substitutions = input.substitutions.map(nodes => nodes.map(node => node.textContent ?? '').join());
+    const evaluations = input.evaluations.map(nodes => nodes.map(node => node.textContent ?? '').join());
+    const result = input.finalResult?.map(node => node.textContent ?? '').join();
+    assert.deepEqual(substitutions, []);
+    assert.deepEqual(evaluations, []);
+    assert.deepEqual(result, '40px');
+  });
+
+  it('substitutes the variable declaration if the variable is found (with fallback)', async () => {
+    const {matchedStyles, stylesPane} = await setUpStyles();
+    const {property, treeElement} =
+        await getTreeElement(matchedStyles, stylesPane, 'width', 'var(--w, 10px)', {'--w': {value: '40px'}});
+    const input = await showTrace(property, matchedStyles, treeElement);
+    const substitutions = input.substitutions.map(nodes => nodes.map(node => node.textContent ?? '').join());
+    const evaluations = input.evaluations.map(nodes => nodes.map(node => node.textContent ?? '').join());
+    const result = input.finalResult?.map(node => node.textContent ?? '').join();
+    assert.deepEqual(substitutions, []);
+    assert.deepEqual(evaluations, []);
+    assert.deepEqual(result, '40px');
+  });
+
+  it('substitutes the fallback if the variable is found', async () => {
+    const {matchedStyles, stylesPane} = await setUpStyles();
+    const {property, treeElement} = await getTreeElement(matchedStyles, stylesPane, 'width', 'var(--w, 10px)');
+    const input = await showTrace(property, matchedStyles, treeElement);
+    const substitutions = input.substitutions.map(nodes => nodes.map(node => node.textContent ?? '').join());
+    const evaluations = input.evaluations.map(nodes => nodes.map(node => node.textContent ?? '').join());
+    const result = input.finalResult?.map(node => node.textContent ?? '').join();
+    assert.deepEqual(substitutions, []);
+    assert.deepEqual(evaluations, []);
+    assert.deepEqual(result, '10px');
+  });
+
+  it('shows chains of substitutions', async () => {
+    const {matchedStyles, stylesPane} = await setUpStyles();
+    const {property, treeElement} = await getTreeElement(
+        matchedStyles, stylesPane, 'width', 'var(--v)', {'--w': {value: '40px'}, '--v': {value: 'var(--w)'}});
     const input = await showTrace(property, matchedStyles, treeElement);
     const substitutions = input.substitutions.map(nodes => nodes.map(node => node.textContent ?? '').join());
     const evaluations = input.evaluations.map(nodes => nodes.map(node => node.textContent ?? '').join());
     const result = input.finalResult?.map(node => node.textContent ?? '').join();
-    // TODO(pfaffe) once vars actually substitute this needs to show the first line
     assert.deepEqual(substitutions, ['var(--w)']);
     assert.deepEqual(evaluations, []);
-    assert.deepEqual(result, 'var(--w)');
+    assert.deepEqual(result, '40px');
   });
 
   it('shows intermediate evaluation steps', async () => {

front_end/panels/elements/CSSValueTraceView.ts

@@ -124,6 +124,9 @@ export class CSSValueTraceView extends UI.Widget.VBox {
     this.#substitutions = substitutions;
     this.#finalResult = evaluations.pop();
     this.#evaluations = evaluations;
+    if (evaluations.length === 0 && !tracing.didApplyEvaluations()) {
+      this.#substitutions.pop();
+    }
     this.requestUpdate();
   }
 

front_end/panels/elements/PropertyRenderer.ts

@@ -111,6 +111,10 @@ export class TracingContext {
     return true;
   }
 
+  didApplyEvaluations(): boolean {
+    return this.#appliedEvaluations > 0;
+  }
+
   #setHasMoreEvaluations(value: boolean): void {
     if (this.#parent) {
       this.#parent.#setHasMoreEvaluations(value);

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -213,20 +213,39 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   readonly #stylesPane: StylesSidebarPane;
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
+  readonly #computedStyles: Map<string, string>;
   constructor(
       stylesPane: StylesSidebarPane, treeElement: StylePropertyTreeElement|null,
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles) {
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>) {
     super();
     this.#treeElement = treeElement;
     this.#stylesPane = stylesPane;
     this.#matchedStyles = matchedStyles;
+    this.#computedStyles = computedStyles;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.VariableMatch, context: RenderingContext): Node[] {
     const {declaration, value: variableValue} = match.resolveVariable() ?? {};
     const fromFallback = variableValue === undefined;
     const computedValue = variableValue ?? match.fallbackValue();
 
+    const substitution = context.tracing?.substitution();
+    if (substitution) {
+      if (declaration?.declaration instanceof SDK.CSSProperty.CSSProperty) {
+        const valueElement = Renderer.renderValueElement(
+            declaration.declaration.name, declaration.declaration.value,
+            declaration.declaration.parseValue(this.#matchedStyles, this.#computedStyles),
+            getPropertyRenderers(
+                declaration.declaration.ownerStyle, this.#stylesPane, this.#matchedStyles, this.#treeElement,
+                this.#computedStyles),
+            substitution);
+        return [valueElement];
+      }
+      if (!declaration && match.fallback.length > 0) {
+        return Renderer.render(match.fallback, substitution.renderingContext(context)).nodes;
+      }
+    }
+
     const renderedFallback = match.fallback.length > 0 ? Renderer.render(match.fallback, context) : undefined;
 
     const varSwatch = new InlineEditor.LinkSwatch.CSSVarSwatch();
@@ -1418,7 +1437,7 @@ export function getPropertyRenderers(
     matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, treeElement: StylePropertyTreeElement|null,
     computedStyles: Map<string, string>): Array<MatchRenderer<SDK.CSSPropertyParser.Match>> {
   return [
-    new VariableRenderer(stylesPane, treeElement, matchedStyles),
+    new VariableRenderer(stylesPane, treeElement, matchedStyles, computedStyles),
     new ColorRenderer(stylesPane, treeElement),
     new ColorMixRenderer(stylesPane),
     new URLRenderer(style.parentRule, stylesPane.node()),