Substitutions for registered property references

Drive-by: Do not show the icon when there is just a single row
Bug: 396080529
Change-Id: Idcfdf7e756f4587281f00fd5ebdfeee16b26e184
Fixed: 404536541
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6368842
Auto-Submit: Philip Pfaffe <[email protected]>
Reviewed-by: Eric Leese <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>

Author: pfaffe

front_end/core/sdk/CSSMatchedStyles.ts

@@ -9,7 +9,30 @@ import {CSSMetadata, cssMetadata, CSSWideKeyword} from './CSSMetadata.js';
 import type {CSSModel} from './CSSModel.js';
 import {CSSProperty} from './CSSProperty.js';
 import * as PropertyParser from './CSSPropertyParser.js';
-import {BaseVariableMatcher} from './CSSPropertyParserMatchers.js';
+import type {Match, Matcher} from './CSSPropertyParser.js';
+import {
+  AnchorFunctionMatcher,
+  AngleMatcher,
+  AutoBaseMatcher,
+  BaseVariableMatcher,
+  BezierMatcher,
+  BinOpMatcher,
+  ColorMatcher,
+  ColorMixMatcher,
+  FlexGridMatcher,
+  GridTemplateMatcher,
+  LengthMatcher,
+  LightDarkColorMatcher,
+  LinearGradientMatcher,
+  LinkableNameMatcher,
+  MathFunctionMatcher,
+  PositionAnchorMatcher,
+  PositionTryMatcher,
+  ShadowMatcher,
+  StringMatcher,
+  URLMatcher,
+  VariableMatcher
+} from './CSSPropertyParserMatchers.js';
 import {
   CSSFontPaletteValuesRule,
   CSSKeyframesRule,
@@ -212,6 +235,17 @@ export class CSSRegisteredProperty {
                                                            `"${this.#registration.syntax}"`;
   }
 
+  parseValue(matchedStyles: CSSMatchedStyles, computedStyles: Map<string, string>|null):
+      PropertyParser.BottomUpTreeMatching|null {
+    const value = this.initialValue();
+    if (!value) {
+      return null;
+    }
+
+    return PropertyParser.matchDeclaration(
+        this.propertyName(), value, matchedStyles.propertyMatchers(this.style(), computedStyles));
+  }
+
   #asCSSProperties(): Protocol.CSS.CSSProperty[] {
     if (this.#registration instanceof CSSPropertyRule) {
       return [];
@@ -808,6 +842,31 @@ export class CSSMatchedStyles {
       domCascade.reset();
     }
   }
+
+  propertyMatchers(style: CSSStyleDeclaration, computedStyles: Map<string, string>|null): Array<Matcher<Match>> {
+    return [
+      new VariableMatcher(this, style),
+      new ColorMatcher(() => computedStyles?.get('color') ?? null),
+      new ColorMixMatcher(),
+      new URLMatcher(),
+      new AngleMatcher(),
+      new LinkableNameMatcher(),
+      new BezierMatcher(),
+      new StringMatcher(),
+      new ShadowMatcher(),
+      new LightDarkColorMatcher(style),
+      new GridTemplateMatcher(),
+      new LinearGradientMatcher(),
+      new AnchorFunctionMatcher(),
+      new PositionAnchorMatcher(),
+      new FlexGridMatcher(),
+      new PositionTryMatcher(),
+      new LengthMatcher(),
+      new MathFunctionMatcher(),
+      new AutoBaseMatcher(),
+      new BinOpMatcher(),
+    ];
+  }
 }
 
 class NodeCascade {

front_end/core/sdk/CSSProperty.ts

@@ -19,30 +19,7 @@ import {
   type Matcher,
   stripComments
 } from './CSSPropertyParser.js';
-import {
-  AnchorFunctionMatcher,
-  AngleMatcher,
-  AutoBaseMatcher,
-  BezierMatcher,
-  BinOpMatcher,
-  ColorMatcher,
-  ColorMixMatcher,
-  CSSWideKeywordMatcher,
-  FlexGridMatcher,
-  FontMatcher,
-  GridTemplateMatcher,
-  LengthMatcher,
-  LightDarkColorMatcher,
-  LinearGradientMatcher,
-  LinkableNameMatcher,
-  MathFunctionMatcher,
-  PositionAnchorMatcher,
-  PositionTryMatcher,
-  ShadowMatcher,
-  StringMatcher,
-  URLMatcher,
-  VariableMatcher
-} from './CSSPropertyParserMatchers.js';
+import {CSSWideKeywordMatcher, FontMatcher} from './CSSPropertyParserMatchers.js';
 import type {CSSStyleDeclaration} from './CSSStyleDeclaration.js';
 
 export const enum Events {
@@ -120,37 +97,6 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return result;
   }
 
-  #matchers(matchedStyles: CSSMatchedStyles, computedStyles: Map<string, string>|null): Array<Matcher<Match>> {
-    const matchers = [
-      new VariableMatcher(matchedStyles, this.ownerStyle),
-      new ColorMatcher(() => computedStyles?.get('color') ?? null),
-      new ColorMixMatcher(),
-      new URLMatcher(),
-      new AngleMatcher(),
-      new LinkableNameMatcher(),
-      new BezierMatcher(),
-      new StringMatcher(),
-      new ShadowMatcher(),
-      new CSSWideKeywordMatcher(this, matchedStyles),
-      new LightDarkColorMatcher(this),
-      new GridTemplateMatcher(),
-      new LinearGradientMatcher(),
-      new AnchorFunctionMatcher(),
-      new PositionAnchorMatcher(),
-      new FlexGridMatcher(),
-      new PositionTryMatcher(),
-      new LengthMatcher(),
-      new MathFunctionMatcher(),
-      new AutoBaseMatcher(),
-      new BinOpMatcher(),
-    ];
-
-    if (Root.Runtime.experiments.isEnabled('font-editor')) {
-      matchers.push(new FontMatcher());
-    }
-    return matchers;
-  }
-
   parseExpression(expression: string, matchedStyles: CSSMatchedStyles, computedStyles: Map<string, string>|null):
       BottomUpTreeMatching|null {
     if (!this.parsedOk) {
@@ -168,6 +114,16 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return matchDeclaration(this.name, this.value, this.#matchers(matchedStyles, computedStyles));
   }
 
+  #matchers(matchedStyles: CSSMatchedStyles, computedStyles: Map<string, string>|null): Array<Matcher<Match>> {
+    const matchers = matchedStyles.propertyMatchers(this.ownerStyle, computedStyles);
+
+    matchers.push(new CSSWideKeywordMatcher(this, matchedStyles));
+    if (Root.Runtime.experiments.isEnabled('font-editor')) {
+      matchers.push(new FontMatcher());
+    }
+    return matchers;
+  }
+
   private ensureRanges(): void {
     if (this.#nameRangeInternal && this.#valueRangeInternal) {
       return;

front_end/core/sdk/CSSPropertyParserMatchers.test.ts

@@ -432,7 +432,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       const {match, text} = matchSingleValue(
           'color', fail,
           new SDK.CSSPropertyParserMatchers.LightDarkColorMatcher(
-              sinon.createStubInstance(SDK.CSSProperty.CSSProperty)));
+              sinon.createStubInstance(SDK.CSSStyleDeclaration.CSSStyleDeclaration)));
       assert.isNull(match, text);
     }
 
@@ -442,7 +442,7 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       const {ast, match, text} = matchSingleValue(
           'color', succeed,
           new SDK.CSSPropertyParserMatchers.LightDarkColorMatcher(
-              sinon.createStubInstance(SDK.CSSProperty.CSSProperty)));
+              sinon.createStubInstance(SDK.CSSStyleDeclaration.CSSStyleDeclaration)));
       assert.exists(ast, text);
       assert.exists(match, text);
 
@@ -456,7 +456,8 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     // light-dark only applies to color properties
     const {match, text} = matchSingleValue(
         'width', 'light-dark(red, blue)',
-        new SDK.CSSPropertyParserMatchers.LightDarkColorMatcher(sinon.createStubInstance(SDK.CSSProperty.CSSProperty)));
+        new SDK.CSSPropertyParserMatchers.LightDarkColorMatcher(
+            sinon.createStubInstance(SDK.CSSStyleDeclaration.CSSStyleDeclaration)));
     assert.isNull(match, text);
   });
 

front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -385,14 +385,14 @@ export class ColorMatcher extends matcherBase(ColorMatch) {
 export class LightDarkColorMatch implements Match {
   constructor(
       readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly light: CodeMirror.SyntaxNode[],
-      readonly dark: CodeMirror.SyntaxNode[], readonly property: CSSProperty) {
+      readonly dark: CodeMirror.SyntaxNode[], readonly style: CSSStyleDeclaration) {
   }
 }
 
 // clang-format off
 export class LightDarkColorMatcher extends matcherBase(LightDarkColorMatch) {
   // clang-format on
-  constructor(readonly property: CSSProperty) {
+  constructor(readonly style: CSSStyleDeclaration) {
     super();
   }
   override accepts(propertyName: string): boolean {
@@ -407,7 +407,7 @@ export class LightDarkColorMatcher extends matcherBase(LightDarkColorMatch) {
     if (args.length !== 2 || args[0].length === 0 || args[1].length === 0) {
       return null;
     }
-    return new LightDarkColorMatch(matching.ast.text(node), node, args[0], args[1], this.property);
+    return new LightDarkColorMatch(matching.ast.text(node), node, args[0], args[1], this.style);
   }
 }
 

front_end/panels/elements/CSSValueTraceView.ts

@@ -16,7 +16,7 @@ import {
 } from './PropertyRenderer.js';
 import stylePropertiesTreeOutlineStyles from './stylePropertiesTreeOutline.css.js';
 
-const {html, render, Directives: {ref, ifDefined}} = Lit;
+const {html, render, Directives: {ref, classMap, ifDefined}} = Lit;
 
 export interface ViewInput {
   substitutions: Node[][];
@@ -40,6 +40,7 @@ function defaultView(input: ViewInput, output: ViewOutput, target: HTMLElement):
 
   const hiddenSummary = !firstEvaluation || intermediateEvaluations.length === 0;
   const summaryTabIndex = hiddenSummary ? undefined : 0;
+  const singleResult = input.evaluations.length === 0 && input.substitutions.length === 0;
   render(
       // clang-format off
     html`
@@ -79,8 +80,12 @@ function defaultView(input: ViewInput, output: ViewOutput, target: HTMLElement):
             </details>`}
         ${!input.finalResult
           ? ''
-          : html`<span class="trace-line-icon" aria-label="is equal to">↳</span
-              ><span class="trace-line">${input.finalResult}</span>`}
+          : html`<span
+                class="trace-line-icon"
+                aria-label="is equal to"
+                ?hidden=${singleResult}
+              >↳</span
+              ><span class=${classMap({ 'trace-line': true, 'full-row': singleResult})}>${input.finalResult}</span>`}
       </div>
     `,
       // clang-format on

front_end/panels/elements/PropertyRenderer.ts

@@ -165,7 +165,7 @@ export class TracingContext {
   #appliedEvaluations = 0;
   #hasMoreEvaluations = true;
   readonly #highlighting: Highlighting;
-  #parsedValueCache = new Map<SDK.CSSProperty.CSSProperty, {
+  #parsedValueCache = new Map<SDK.CSSProperty.CSSProperty|SDK.CSSMatchedStyles.CSSRegisteredProperty, {
     matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
     computedStyles: Map<string, string>,
     parsedValue: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
@@ -282,7 +282,8 @@ export class TracingContext {
   }
 
   cachedParsedValue(
-      declaration: SDK.CSSProperty.CSSProperty, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      declaration: SDK.CSSProperty.CSSProperty|SDK.CSSMatchedStyles.CSSRegisteredProperty,
+      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) {

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -311,12 +311,11 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
 
     const substitution = context.tracing?.substitution();
     if (substitution) {
-      if (declaration?.declaration instanceof SDK.CSSProperty.CSSProperty) {
+      if (declaration?.declaration) {
         const {nodes, cssControls} = Renderer.renderValueNodes(
-            declaration.declaration,
+            {name: declaration.name, value: declaration.value ?? ''},
             substitution.cachedParsedValue(declaration.declaration, this.#matchedStyles, this.#computedStyles),
-            getPropertyRenderers(
-                declaration.declaration.ownerStyle, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles),
+            getPropertyRenderers(declaration.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles),
             substitution);
         cssControls.forEach((value, key) => value.forEach(control => context.addControl(key, control)));
         return nodes;
@@ -606,7 +605,7 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
   // If the element has color-scheme set to both light and dark, we check the prefers-color-scheme media query.
   async #activeColor(match: SDK.CSSPropertyParserMatchers.LightDarkColorMatch):
       Promise<CodeMirror.SyntaxNode[]|undefined> {
-    const activeColorSchemes = this.#matchedStyles.resolveProperty('color-scheme', match.property.ownerStyle)
+    const activeColorSchemes = this.#matchedStyles.resolveProperty('color-scheme', match.style)
                                    ?.parseValue(this.#matchedStyles, new Map())
                                    ?.getComputedPropertyValueText()
                                    .split(' ') ??

front_end/panels/elements/cssValueTraceView.css

@@ -76,6 +76,10 @@
     margin: 0;
     padding-left: var(--sys-size-4);
   }
+
+  .full-row {
+    grid-column-start: 1;
+  }
 }
 
 ::highlight(css-value-tracing) {