chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -28,42 +28,13 @@ import * as ElementsComponents from './components/components.js';
 import {cssRuleValidatorsMap, type Hint} from './CSSRuleValidator.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {
-  type AnchorFunctionMatch,
-  AnchorFunctionMatcher,
-  AngleMatch,
-  AngleMatcher,
-  type BezierMatch,
-  BezierMatcher,
-  ColorMatch,
-  ColorMatcher,
-  ColorMixMatch,
-  ColorMixMatcher,
-  type CSSWideKeywordMatch,
-  CSSWideKeywordMatcher,
-  type FlexGridMatch,
-  FlexGridMatcher,
-  type FontMatch,
-  FontMatcher,
-  type GridTemplateMatch,
-  GridTemplateMatcher,
-  type LengthMatch,
-  LengthMatcher,
-  type LightDarkColorMatch,
-  LightDarkColorMatcher,
-  type LinearGradientMatch,
-  LinearGradientMatcher,
-  type LinkableNameMatch,
-  LinkableNameMatcher,
-  LinkableNameProperties,
-  type PositionAnchorMatch,
-  PositionAnchorMatcher,
-  type PositionTryMatch,
-  PositionTryMatcher,
-  type ShadowMatch,
-  ShadowMatcher,
-  ShadowType,
-} from './PropertyMatchers.js';
-import {type MatchRenderer, Renderer, RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
+  type MatchRenderer,
+  Renderer,
+  rendererBase,
+  RenderingContext,
+  StringRenderer,
+  URLRenderer
+} from './PropertyRenderer.js';
 import {StyleEditorWidget} from './StyleEditorWidget.js';
 import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
@@ -161,17 +132,20 @@ interface StylePropertyTreeElementParams {
   newProperty: boolean;
 }
 
-export class FlexGridRenderer implements MatchRenderer<FlexGridMatch> {
-  #treeElement: StylePropertyTreeElement;
+// clang-format off
+export class FlexGridRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.FlexGridMatch) {
+  // clang-format on
+  readonly #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
-  matcher(): SDK.CSSPropertyParser.Matcher<FlexGridMatch> {
-    return new FlexGridMatcher();
+  matcher(): SDK.CSSPropertyParser.Matcher<SDK.CSSPropertyParserMatchers.FlexGridMatch> {
+    return new SDK.CSSPropertyParserMatchers.FlexGridMatcher();
   }
 
-  render(match: FlexGridMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.FlexGridMatch, context: RenderingContext): Node[] {
     const key =
         `${this.#treeElement.section().getSectionIdx()}_${this.#treeElement.section().nextEditorTriggerButtonIdx}`;
     const button = StyleEditorWidget.createTriggerButton(
@@ -192,17 +166,21 @@ export class FlexGridRenderer implements MatchRenderer<FlexGridMatch> {
   }
 }
 
-export class CSSWideKeywordRenderer implements MatchRenderer<CSSWideKeywordMatch> {
-  #treeElement: StylePropertyTreeElement;
+// clang-format off
+export class CSSWideKeywordRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.CSSWideKeywordMatch) {
+  // clang-format on
+  readonly #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
-  matcher(): SDK.CSSPropertyParser.Matcher<CSSWideKeywordMatch> {
-    return new CSSWideKeywordMatcher(this.#treeElement.property, this.#treeElement.matchedStyles());
+  matcher(): SDK.CSSPropertyParser.Matcher<SDK.CSSPropertyParserMatchers.CSSWideKeywordMatch> {
+    return new SDK.CSSPropertyParserMatchers.CSSWideKeywordMatcher(
+        this.#treeElement.property, this.#treeElement.matchedStyles());
   }
 
-  render(match: CSSWideKeywordMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.CSSWideKeywordMatch, context: RenderingContext): Node[] {
     const resolvedProperty = match.resolveProperty();
     if (!resolvedProperty) {
       return [document.createTextNode(match.text)];
@@ -229,10 +207,13 @@ export class CSSWideKeywordRenderer implements MatchRenderer<CSSWideKeywordMatch
   }
 }
 
-export class VariableRenderer implements MatchRenderer<SDK.CSSPropertyParser.VariableMatch> {
+// clang-format off
+export class VariableRenderer extends rendererBase(SDK.CSSPropertyParser.VariableMatch) {
+  // clang-format on
   readonly #treeElement: StylePropertyTreeElement;
   readonly #style: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
   constructor(treeElement: StylePropertyTreeElement, style: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
+    super();
     this.#treeElement = treeElement;
     this.#style = style;
   }
@@ -253,13 +234,11 @@ export class VariableRenderer implements MatchRenderer<SDK.CSSPropertyParser.Var
     return match.matching.getComputedTextRange(match.fallback[0], match.fallback[match.fallback.length - 1]);
   }
 
-  // clang-format off
   computedText(match: SDK.CSSPropertyParser.VariableMatch): string|null {
     return this.resolveVariable(match)?.value ?? this.fallbackValue(match);
   }
-  // clang-format on
 
-  render(match: SDK.CSSPropertyParser.VariableMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParser.VariableMatch, context: RenderingContext): Node[] {
     const renderedFallback = match.fallback.length > 0 ? Renderer.render(match.fallback, context) : undefined;
 
     const {declaration, value: variableValue} = this.resolveVariable(match) ?? {};
@@ -336,11 +315,13 @@ export class VariableRenderer implements MatchRenderer<SDK.CSSPropertyParser.Var
   }
 }
 
-export class LinearGradientRenderer implements MatchRenderer<LinearGradientMatch> {
-  matcher(): SDK.CSSPropertyParser.Matcher<LinearGradientMatch> {
-    return new LinearGradientMatcher();
+// clang-format off
+export class LinearGradientRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LinearGradientMatch) {
+  // clang-format on
+  matcher(): SDK.CSSPropertyParser.Matcher<SDK.CSSPropertyParserMatchers.LinearGradientMatch> {
+    return new SDK.CSSPropertyParserMatchers.LinearGradientMatcher();
   }
-  render(match: LinearGradientMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.LinearGradientMatch, context: RenderingContext): Node[] {
     const children = ASTUtils.children(match.node);
     const {nodes, cssControls} = Renderer.render(children, context);
     const angles = cssControls.get('angle');
@@ -349,7 +330,8 @@ export class LinearGradientRenderer implements MatchRenderer<LinearGradientMatch
     if (angle instanceof InlineEditor.CSSAngle.CSSAngle) {
       angle.updateProperty(context.matchedResult.getComputedText(match.node));
       const args = ASTUtils.callArgs(match.node);
-      const angleNode = args[0]?.find(node => context.matchedResult.getMatch(node) instanceof AngleMatch);
+      const angleNode = args[0]?.find(
+          node => context.matchedResult.getMatch(node) instanceof SDK.CSSPropertyParserMatchers.AngleMatch);
       const angleMatch = angleNode && context.matchedResult.getMatch(angleNode);
       if (angleMatch) {
         angle.addEventListener(InlineEditor.InlineEditorUtils.ValueChangedEvent.eventName, ev => {
@@ -362,16 +344,19 @@ export class LinearGradientRenderer implements MatchRenderer<LinearGradientMatch
   }
 }
 
-export class ColorRenderer implements MatchRenderer<ColorMatch> {
+// clang-format off
+export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatch) {
+  // clang-format on
   constructor(private readonly treeElement: StylePropertyTreeElement) {
+    super();
   }
 
-  matcher(): ColorMatcher {
+  matcher(): SDK.CSSPropertyParserMatchers.ColorMatcher {
     const getCurrentColorCallback = (): string|null => this.treeElement.getComputedStyle('color');
-    return new ColorMatcher(getCurrentColorCallback);
+    return new SDK.CSSPropertyParserMatchers.ColorMatcher(getCurrentColorCallback);
   }
 
-  #getValueChild(match: ColorMatch, context: RenderingContext):
+  #getValueChild(match: SDK.CSSPropertyParserMatchers.ColorMatch, context: RenderingContext):
       {valueChild: HTMLSpanElement, cssControls?: SDK.CSSPropertyParser.CSSControlMap} {
     const valueChild = document.createElement('span');
     if (match.node.name === 'ColorLiteral' || match.node.name === 'ValueName') {
@@ -382,7 +367,7 @@ export class ColorRenderer implements MatchRenderer<ColorMatch> {
     return {valueChild, cssControls};
   }
 
-  render(match: ColorMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.ColorMatch, context: RenderingContext): Node[] {
     const {valueChild, cssControls} = this.#getValueChild(match, context);
     let colorText = context.matchedResult.getComputedText(match.node);
     // Evaluate relative color values
@@ -458,10 +443,7 @@ export class ColorRenderer implements MatchRenderer<ColorMatch> {
       const swatchIcon =
           new ColorSwatchPopoverIcon(this.treeElement, this.treeElement.parentPane().swatchPopoverHelper(), swatch);
       swatchIcon.addEventListener(ColorSwatchPopoverIconEvents.COLOR_CHANGED, ev => {
-        const color = Common.Color.parse(ev.data);
-        if (color) {
-          swatch.setColorText(color);
-        }
+        swatch.setColorText(ev.data);
       });
       void this.#addColorContrastInfo(swatchIcon);
     }
@@ -480,17 +462,20 @@ export class ColorRenderer implements MatchRenderer<ColorMatch> {
   }
 }
 
-export class LightDarkColorRenderer implements MatchRenderer<LightDarkColorMatch> {
+// clang-format off
+export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LightDarkColorMatch) {
+  // clang-format on
   readonly #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
-  matcher(): LightDarkColorMatcher {
-    return new LightDarkColorMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.LightDarkColorMatcher {
+    return new SDK.CSSPropertyParserMatchers.LightDarkColorMatcher();
   }
 
-  render(match: LightDarkColorMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.LightDarkColorMatch, context: RenderingContext): Node[] {
     const content = document.createElement('span');
     content.appendChild(document.createTextNode('light-dark('));
     const light = content.appendChild(document.createElement('span'));
@@ -520,8 +505,9 @@ export class LightDarkColorRenderer implements MatchRenderer<LightDarkColorMatch
   }
 
   async applyColorScheme(
-      match: LightDarkColorMatch, context: RenderingContext, colorSwatch: InlineEditor.ColorSwatch.ColorSwatch,
-      light: HTMLSpanElement, dark: HTMLSpanElement, lightControls: SDK.CSSPropertyParser.CSSControlMap,
+      match: SDK.CSSPropertyParserMatchers.LightDarkColorMatch, context: RenderingContext,
+      colorSwatch: InlineEditor.ColorSwatch.ColorSwatch, light: HTMLSpanElement, dark: HTMLSpanElement,
+      lightControls: SDK.CSSPropertyParser.CSSControlMap,
       darkControls: SDK.CSSPropertyParser.CSSControlMap): Promise<void> {
     const activeColor = await this.#activeColor(match);
     if (!activeColor) {
@@ -535,7 +521,7 @@ export class LightDarkColorRenderer implements MatchRenderer<LightDarkColorMatch
     const inactiveColor = (activeColor === match.light) ? dark : light;
     const colorText = context.matchedResult.getComputedTextRange(activeColor[0], activeColor[activeColor.length - 1]);
     const color = colorText && Common.Color.parse(colorText);
-    inactiveColor.style.textDecoration = 'line-through';
+    inactiveColor.classList.add('inactive-value');
     if (color) {
       colorSwatch.renderColor(color);
     }
@@ -544,7 +530,8 @@ export class LightDarkColorRenderer implements MatchRenderer<LightDarkColorMatch
   // Returns the syntax node group corresponding the active color scheme:
   // If the element has color-scheme set to light or dark, return the respective group.
   // If the element has color-scheme set to both light and dark, we check the prefers-color-scheme media query.
-  async #activeColor(match: LightDarkColorMatch): Promise<CodeMirror.SyntaxNode[]|undefined> {
+  async #activeColor(match: SDK.CSSPropertyParserMatchers.LightDarkColorMatch):
+      Promise<CodeMirror.SyntaxNode[]|undefined> {
     const activeColorSchemes = this.#treeElement.getComputedStyle('color-scheme')?.split(' ') ?? [];
     const hasLight = activeColorSchemes.includes(SDK.CSSModel.ColorScheme.LIGHT);
     const hasDark = activeColorSchemes.includes(SDK.CSSModel.ColorScheme.DARK);
@@ -570,13 +557,16 @@ export class LightDarkColorRenderer implements MatchRenderer<LightDarkColorMatch
   }
 }
 
-export class ColorMixRenderer implements MatchRenderer<ColorMixMatch> {
-  #pane: StylesSidebarPane;
+// clang-format off
+export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMixMatch) {
+  // clang-format on
+  readonly #pane: StylesSidebarPane;
   constructor(pane: StylesSidebarPane) {
+    super();
     this.#pane = pane;
   }
 
-  render(match: ColorMixMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.ColorMixMatch, context: RenderingContext): Node[] {
     const hookUpColorArg = (node: Node, onChange: (newColorText: string) => void): boolean => {
       if (node instanceof InlineEditor.ColorMixSwatch.ColorMixSwatch ||
           node instanceof InlineEditor.ColorSwatch.ColorSwatch) {
@@ -647,18 +637,21 @@ export class ColorMixRenderer implements MatchRenderer<ColorMixMatch> {
     return [swatch];
   }
 
-  matcher(): ColorMixMatcher {
-    return new ColorMixMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.ColorMixMatcher {
+    return new SDK.CSSPropertyParserMatchers.ColorMixMatcher();
   }
 }
 
-export class AngleRenderer implements MatchRenderer<AngleMatch> {
-  #treeElement: StylePropertyTreeElement;
+// clang-format off
+export class AngleRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AngleMatch) {
+  // clang-format on
+  readonly #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
-  render(match: AngleMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.AngleMatch, context: RenderingContext): Node[] {
     const angleText = match.text;
     if (!this.#treeElement.editable()) {
       return [document.createTextNode(angleText)];
@@ -706,37 +699,40 @@ export class AngleRenderer implements MatchRenderer<AngleMatch> {
     return [cssAngle];
   }
 
-  matcher(): AngleMatcher {
-    return new AngleMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.AngleMatcher {
+    return new SDK.CSSPropertyParserMatchers.AngleMatcher();
   }
 }
 
-export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
+// clang-format off
+export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LinkableNameMatch) {
+  // clang-format on
   readonly #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
-  #getLinkData(match: LinkableNameMatch):
+  #getLinkData(match: SDK.CSSPropertyParserMatchers.LinkableNameMatch):
       {jslogContext: string, metric: null|Host.UserMetrics.SwatchType, ruleBlock: string, isDefined: boolean} {
     switch (match.propertyName) {
-      case LinkableNameProperties.ANIMATION:
-      case LinkableNameProperties.ANIMATION_NAME:
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.ANIMATION:
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.ANIMATION_NAME:
         return {
           jslogContext: 'css-animation-name',
           metric: Host.UserMetrics.SwatchType.ANIMATION_NAME_LINK,
           ruleBlock: '@keyframes',
           isDefined: Boolean(this.#treeElement.matchedStyles().keyframes().find(kf => kf.name().text === match.text)),
         };
-      case LinkableNameProperties.FONT_PALETTE:
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.FONT_PALETTE:
         return {
           jslogContext: 'css-font-palette',
           metric: null,
           ruleBlock: '@font-palette-values',
           isDefined: this.#treeElement.matchedStyles().fontPaletteValuesRule()?.name().text === match.text,
         };
-      case LinkableNameProperties.POSITION_TRY:
-      case LinkableNameProperties.POSITION_TRY_FALLBACKS:
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY:
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY_FALLBACKS:
         return {
           jslogContext: 'css-position-try',
           metric: Host.UserMetrics.SwatchType.POSITION_TRY_LINK,
@@ -747,7 +743,7 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
     }
   }
 
-  render(match: LinkableNameMatch): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.LinkableNameMatch): Node[] {
     const swatch = new InlineEditor.LinkSwatch.LinkSwatch();
     UI.UIUtils.createTextChild(swatch, match.text);
     const {metric, jslogContext, ruleBlock, isDefined} = this.#getLinkData(match);
@@ -761,8 +757,8 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
       jslogContext,
     };
 
-    if (match.propertyName === LinkableNameProperties.ANIMATION ||
-        match.propertyName === LinkableNameProperties.ANIMATION_NAME) {
+    if (match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.ANIMATION ||
+        match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.ANIMATION_NAME) {
       const el = document.createElement('span');
       el.appendChild(swatch);
 
@@ -792,23 +788,26 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
     return [swatch];
   }
 
-  matcher(): LinkableNameMatcher {
-    return new LinkableNameMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.LinkableNameMatcher {
+    return new SDK.CSSPropertyParserMatchers.LinkableNameMatcher();
   }
 }
 
-export class BezierRenderer implements MatchRenderer<BezierMatch> {
+// clang-format off
+export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.BezierMatch) {
+  // clang-format on
   readonly #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
-  render(match: BezierMatch): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.BezierMatch): Node[] {
     return [this.renderSwatch(match)];
   }
 
-  renderSwatch(match: BezierMatch): Node {
-    if (!this.#treeElement.editable()) {
+  renderSwatch(match: SDK.CSSPropertyParserMatchers.BezierMatch): Node {
+    if (!this.#treeElement.editable() || !InlineEditor.AnimationTimingModel.AnimationTimingModel.parse(match.text)) {
       return document.createTextNode(match.text);
     }
     const swatchPopoverHelper = this.#treeElement.parentPane().swatchPopoverHelper();
@@ -821,8 +820,43 @@ export class BezierRenderer implements MatchRenderer<BezierMatch> {
     return swatch;
   }
 
-  matcher(): BezierMatcher {
-    return new BezierMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.BezierMatcher {
+    return new SDK.CSSPropertyParserMatchers.BezierMatcher();
+  }
+}
+
+// clang-format off
+export class AutoBaseRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AutoBaseMatch) {
+  // clang-format on
+  readonly #treeElement: StylePropertyTreeElement;
+  constructor(treeElement: StylePropertyTreeElement) {
+    super();
+    this.#treeElement = treeElement;
+  }
+
+  matcher(): SDK.CSSPropertyParserMatchers.AutoBaseMatcher {
+    return new SDK.CSSPropertyParserMatchers.AutoBaseMatcher();
+  }
+
+  override render(match: SDK.CSSPropertyParserMatchers.AutoBaseMatch, context: RenderingContext): Node[] {
+    const content = document.createElement('span');
+    content.appendChild(document.createTextNode('-internal-auto-base('));
+    const auto = content.appendChild(document.createElement('span'));
+    content.appendChild(document.createTextNode(', '));
+    const base = content.appendChild(document.createElement('span'));
+    content.appendChild(document.createTextNode(')'));
+
+    Renderer.renderInto(match.auto, context, auto);
+    Renderer.renderInto(match.base, context, base);
+
+    const activeAppearance = this.#treeElement.getComputedStyle('appearance');
+    if (activeAppearance?.startsWith('base')) {
+      auto.classList.add('inactive-value');
+    } else {
+      base.classList.add('inactive-value');
+    }
+
+    return [content];
   }
 }
 
@@ -835,12 +869,12 @@ export const enum ShadowPropertyType {
   COLOR = 'color',
 }
 
-type ShadowProperty = {
-  value: string|CodeMirror.SyntaxNode,
-  source: CodeMirror.SyntaxNode|null,
-  expansionContext: RenderingContext|null,
-  propertyType: ShadowPropertyType,
-};
+interface ShadowProperty {
+  value: string|CodeMirror.SyntaxNode;
+  source: CodeMirror.SyntaxNode|null;
+  expansionContext: RenderingContext|null;
+  propertyType: ShadowPropertyType;
+}
 
 type ShadowLengthProperty = ShadowProperty&{
   length: InlineEditor.CSSShadowEditor.CSSLength,
@@ -853,16 +887,17 @@ type ShadowLengthProperty = ShadowProperty&{
 // from, replacing the var() functions as needed with concrete values when edited.
 export class ShadowModel implements InlineEditor.CSSShadowEditor.CSSShadowModel {
   readonly #properties: ShadowProperty[];
-  readonly #shadowType: ShadowType;
+  readonly #shadowType: SDK.CSSPropertyParserMatchers.ShadowType;
   readonly #context: RenderingContext;
 
-  constructor(shadowType: ShadowType, properties: ShadowProperty[], context: RenderingContext) {
+  constructor(
+      shadowType: SDK.CSSPropertyParserMatchers.ShadowType, properties: ShadowProperty[], context: RenderingContext) {
     this.#shadowType = shadowType;
     this.#properties = properties;
     this.#context = context;
   }
   isBoxShadow(): boolean {
-    return this.#shadowType === ShadowType.BOX_SHADOW;
+    return this.#shadowType === SDK.CSSPropertyParserMatchers.ShadowType.BOX_SHADOW;
   }
   inset(): boolean {
     return Boolean(this.#properties.find(property => property.propertyType === ShadowPropertyType.INSET));
@@ -992,13 +1027,18 @@ export class ShadowModel implements InlineEditor.CSSShadowEditor.CSSShadowModel
   }
 }
 
-export class ShadowRenderer implements MatchRenderer<ShadowMatch> {
+// clang-format off
+export class ShadowRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ShadowMatch) {
+  // clang-format on
   readonly #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
-  shadowModel(shadow: CodeMirror.SyntaxNode[], shadowType: ShadowType, context: RenderingContext): null|ShadowModel {
+  shadowModel(
+      shadow: CodeMirror.SyntaxNode[], shadowType: SDK.CSSPropertyParserMatchers.ShadowType,
+      context: RenderingContext): null|ShadowModel {
     const properties: Array<ShadowProperty|ShadowLengthProperty> = [];
     const missingLengths: ShadowLengthProperty['propertyType'][] =
         [ShadowPropertyType.SPREAD, ShadowPropertyType.BLUR, ShadowPropertyType.Y, ShadowPropertyType.X];
@@ -1025,7 +1065,8 @@ export class ShadowRenderer implements MatchRenderer<ShadowMatch> {
         }
         const propertyType = missingLengths.pop();
         if (propertyType === undefined ||
-            (propertyType === ShadowPropertyType.SPREAD && shadowType === ShadowType.TEXT_SHADOW)) {
+            (propertyType === ShadowPropertyType.SPREAD &&
+             shadowType === SDK.CSSPropertyParserMatchers.ShadowType.TEXT_SHADOW)) {
           return null;
         }
         const length = InlineEditor.CSSShadowEditor.CSSLength.parse(text);
@@ -1040,8 +1081,8 @@ export class ShadowRenderer implements MatchRenderer<ShadowMatch> {
         if (!computedValueAst) {
           return null;
         }
-        const matches =
-            SDK.CSSPropertyParser.BottomUpTreeMatching.walkExcludingSuccessors(computedValueAst, [new ColorMatcher()]);
+        const matches = SDK.CSSPropertyParser.BottomUpTreeMatching.walkExcludingSuccessors(
+            computedValueAst, [new SDK.CSSPropertyParserMatchers.ColorMatcher()]);
         if (matches.hasUnresolvedVars(matches.ast.tree)) {
           return null;
         }
@@ -1057,12 +1098,14 @@ export class ShadowRenderer implements MatchRenderer<ShadowMatch> {
         // property, we will not allow any future lengths.
         stillAcceptsLengths = missingLengths.length === 4;
         if (value.name === 'ValueName' && text.toLowerCase() === 'inset') {
-          if (shadowType === ShadowType.TEXT_SHADOW ||
+          if (shadowType === SDK.CSSPropertyParserMatchers.ShadowType.TEXT_SHADOW ||
               properties.find(({propertyType}) => propertyType === ShadowPropertyType.INSET)) {
             return null;
           }
           properties.push({value, source, propertyType: ShadowPropertyType.INSET, expansionContext});
-        } else if (match instanceof ColorMatch || match instanceof ColorMixMatch) {
+        } else if (
+            match instanceof SDK.CSSPropertyParserMatchers.ColorMatch ||
+            match instanceof SDK.CSSPropertyParserMatchers.ColorMixMatch) {
           if (properties.find(({propertyType}) => propertyType === ShadowPropertyType.COLOR)) {
             return null;
           }
@@ -1079,7 +1122,7 @@ export class ShadowRenderer implements MatchRenderer<ShadowMatch> {
     return new ShadowModel(shadowType, properties, context);
   }
 
-  render(match: ShadowMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.ShadowMatch, context: RenderingContext): Node[] {
     const shadows = ASTUtils.split(ASTUtils.siblings(ASTUtils.declValue(match.node)));
     const result: Node[] = [];
 
@@ -1119,27 +1162,33 @@ export class ShadowRenderer implements MatchRenderer<ShadowMatch> {
     return result;
   }
 
-  matcher(): ShadowMatcher {
-    return new ShadowMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.ShadowMatcher {
+    return new SDK.CSSPropertyParserMatchers.ShadowMatcher();
   }
 }
 
-export class FontRenderer implements MatchRenderer<FontMatch> {
+// clang-format off
+export class FontRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.FontMatch) {
+  // clang-format on
   constructor(readonly treeElement: StylePropertyTreeElement) {
+    super();
   }
 
-  render(match: FontMatch): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.FontMatch, context: RenderingContext): Node[] {
     this.treeElement.section().registerFontProperty(this.treeElement);
-    return [document.createTextNode(match.text)];
+    const {nodes} = Renderer.render(ASTUtils.siblings(ASTUtils.declValue(match.node)), context);
+    return nodes;
   }
 
-  matcher(): FontMatcher {
-    return new FontMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.FontMatcher {
+    return new SDK.CSSPropertyParserMatchers.FontMatcher();
   }
 }
 
-export class GridTemplateRenderer implements MatchRenderer<GridTemplateMatch> {
-  render(match: GridTemplateMatch, context: RenderingContext): Node[] {
+// clang-format off
+export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.GridTemplateMatch) {
+  // clang-format on
+  override render(match: SDK.CSSPropertyParserMatchers.GridTemplateMatch, context: RenderingContext): Node[] {
     if (match.lines.length <= 1) {
       return Renderer.render(ASTUtils.siblings(ASTUtils.declValue(match.node)), context).nodes;
     }
@@ -1154,49 +1203,120 @@ export class GridTemplateRenderer implements MatchRenderer<GridTemplateMatch> {
     return [container];
   }
 
-  matcher(): GridTemplateMatcher {
-    return new GridTemplateMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.GridTemplateMatcher {
+    return new SDK.CSSPropertyParserMatchers.GridTemplateMatcher();
   }
 }
 
-export class LengthRenderer implements MatchRenderer<LengthMatch> {
+// clang-format off
+export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.LengthMatch) {
+  // clang-format on
   readonly #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
-  render(match: LengthMatch, _context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.LengthMatch, _context: RenderingContext): Node[] {
     const lengthText = match.text;
     if (!this.#treeElement.editable()) {
       return [document.createTextNode(lengthText)];
     }
-    const cssLength = new InlineEditor.CSSLength.CSSLength();
     const valueElement = document.createElement('span');
     valueElement.textContent = lengthText;
-    cssLength.data = {lengthText};
-    cssLength.append(valueElement);
 
-    const onValueChanged = (event: Event): void => {
-      const {data} = (event as InlineEditor.InlineEditorUtils.ValueChangedEvent);
+    void this.#attachPopover(valueElement, match.text, match.unit);
 
-      valueElement.textContent = data.value;
-      this.#treeElement.parentPane().setEditingStyle(true);
-      void this.#treeElement.applyStyleText(this.#treeElement.renderedPropertyText(), false);
-    };
+    return [valueElement];
+  }
 
-    const onDraggingFinished = (): void => {
-      this.#treeElement.parentPane().setEditingStyle(false);
-      void this.#treeElement.applyStyleText(this.#treeElement.renderedPropertyText(), true);
-    };
+  async #attachPopover(valueElement: HTMLElement, value: string, unit: string): Promise<void> {
+    if (unit === 'px') {
+      return;
+    }
+    const nodeId = this.#treeElement.parentPane().node()?.id;
+    if (nodeId === undefined) {
+      return;
+    }
 
-    cssLength.addEventListener('valuechanged', onValueChanged);
-    cssLength.addEventListener('draggingfinished', onDraggingFinished);
+    let pixelValue = '';
+    const result =
+        await this.#treeElement.parentPane().cssModel()?.agent.invoke_resolveValues({values: [value], nodeId});
+    if (!result || result.getError()) {
+      return;
+    }
 
-    return [cssLength];
+    pixelValue = result.results[0];
+    this.#treeElement.parentPane().addPopover(valueElement, {
+      contents: () => {
+        if (!pixelValue) {
+          return undefined;
+        }
+        const contents = document.createElement('span');
+        contents.style.margin = '4px';
+        contents.appendChild(document.createTextNode(pixelValue));
+        return contents;
+      },
+      jslogContext: 'length-popover'
+    });
+  }
+
+  matcher(): SDK.CSSPropertyParserMatchers.LengthMatcher {
+    return new SDK.CSSPropertyParserMatchers.LengthMatcher();
   }
+}
 
-  matcher(): LengthMatcher {
-    return new LengthMatcher();
+// clang-format off
+export class SelectFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.SelectFunctionMatch) {
+  // clang-format on
+  constructor(private readonly treeElement: StylePropertyTreeElement) {
+    super();
+  }
+  matcher(): SDK.CSSPropertyParser.Matcher<SDK.CSSPropertyParserMatchers.SelectFunctionMatch> {
+    return new SDK.CSSPropertyParserMatchers.SelectFunctionMatcher();
+  }
+
+  override render(match: SDK.CSSPropertyParserMatchers.SelectFunctionMatch, context: RenderingContext): Node[] {
+    const resolvedArgs = match.args.map(arg => context.matchedResult.getComputedTextRange(arg[0], arg[arg.length - 1]));
+
+    const renderedArgs = match.args.map(arg => {
+      const span = document.createElement('span');
+      Renderer.renderInto(arg, context, span);
+      return span;
+    });
+
+    void this.applySelectFunction(renderedArgs, resolvedArgs, context.matchedResult.getComputedText(match.node));
+
+    return [
+      document.createTextNode(match.func),
+      document.createTextNode('('),
+      ...renderedArgs.map((arg, idx) => idx === 0 ? [arg] : [document.createTextNode(', '), arg]).flat(),
+      document.createTextNode(')'),
+    ];
+  }
+
+  async applySelectFunction(renderedArgs: HTMLElement[], values: string[], functionText: string): Promise<void> {
+    const nodeId = this.treeElement.node()?.id;
+    if (nodeId === undefined) {
+      return;
+    }
+    // To understand which argument was selected by the function, we evaluate the function as well as all the arguments
+    // and compare the function result to the values of all its arguments. Evaluating the arguments eliminates nested
+    // function calls and normalizes all units to px.
+    values.unshift(functionText);
+    const evaledArgs = await this.treeElement.parentPane().cssModel()?.agent.invoke_resolveValues({values, nodeId});
+    if (!evaledArgs || evaledArgs.getError()) {
+      return;
+    }
+    const functionResult = evaledArgs.results.shift();
+    if (!functionResult) {
+      return;
+    }
+    for (let i = 0; i < renderedArgs.length; ++i) {
+      if (evaledArgs.results[i] !== functionResult) {
+        renderedArgs[i].classList.add('inactive-value');
+      }
+    }
   }
 }
 
@@ -1227,9 +1347,12 @@ async function decorateAnchorForAnchorLink(container: HTMLElement, treeElement:
   container.appendChild(link);
 }
 
-export class AnchorFunctionRenderer implements MatchRenderer<AnchorFunctionMatch> {
-  #treeElement: StylePropertyTreeElement;
+// clang-format off
+export class AnchorFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AnchorFunctionMatch) {
+  // clang-format on
+  readonly #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
@@ -1244,7 +1367,7 @@ export class AnchorFunctionRenderer implements MatchRenderer<AnchorFunctionMatch
     this.anchorDecoratedForTest();
   }
 
-  render(match: AnchorFunctionMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.AnchorFunctionMatch, context: RenderingContext): Node[] {
     const content = document.createElement('span');
     if (match.node.name === 'VariableName') {
       // Link an anchor double-dashed ident to its matching anchor element.
@@ -1265,22 +1388,25 @@ export class AnchorFunctionRenderer implements MatchRenderer<AnchorFunctionMatch
     return [content];
   }
 
-  matcher(): AnchorFunctionMatcher {
-    return new AnchorFunctionMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher {
+    return new SDK.CSSPropertyParserMatchers.AnchorFunctionMatcher();
   }
 }
 
-export class PositionAnchorRenderer implements MatchRenderer<PositionAnchorMatch> {
-  #treeElement: StylePropertyTreeElement;
+// clang-format off
+export class PositionAnchorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.PositionAnchorMatch) {
+  // clang-format on
+  readonly #treeElement: StylePropertyTreeElement;
 
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
   anchorDecoratedForTest(): void {
   }
 
-  render(match: PositionAnchorMatch): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.PositionAnchorMatch): Node[] {
     const content = document.createElement('span');
     content.appendChild(document.createTextNode(match.text));
     void decorateAnchorForAnchorLink(content, this.#treeElement, {
@@ -1290,19 +1416,22 @@ export class PositionAnchorRenderer implements MatchRenderer<PositionAnchorMatch
     return [content];
   }
 
-  matcher(): PositionAnchorMatcher {
-    return new PositionAnchorMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.PositionAnchorMatcher {
+    return new SDK.CSSPropertyParserMatchers.PositionAnchorMatcher();
   }
 }
 
-export class PositionTryRenderer implements MatchRenderer<PositionTryMatch> {
-  #treeElement: StylePropertyTreeElement;
+// clang-format off
+export class PositionTryRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.PositionTryMatch) {
+  // clang-format on
+  readonly #treeElement: StylePropertyTreeElement;
 
   constructor(treeElement: StylePropertyTreeElement) {
+    super();
     this.#treeElement = treeElement;
   }
 
-  render(match: PositionTryMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.PositionTryMatch, context: RenderingContext): Node[] {
     const content = [];
     if (match.preamble.length > 0) {
       const {nodes} = Renderer.render(match.preamble, context);
@@ -1314,7 +1443,7 @@ export class PositionTryRenderer implements MatchRenderer<PositionTryMatch> {
         fallbackContent.appendChild(document.createTextNode(', '));
       }
       if (i !== this.#treeElement.matchedStyles().activePositionFallbackIndex()) {
-        fallbackContent.style.textDecoration = 'line-through';
+        fallbackContent.classList.add('inactive-value');
       }
       Renderer.renderInto(fallback, context, fallbackContent);
 
@@ -1323,8 +1452,8 @@ export class PositionTryRenderer implements MatchRenderer<PositionTryMatch> {
     return content;
   }
 
-  matcher(): PositionTryMatcher {
-    return new PositionTryMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.PositionTryMatcher {
+    return new SDK.CSSPropertyParserMatchers.PositionTryMatcher();
   }
 }
 
@@ -1385,6 +1514,10 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.lastComputedValue = null;
 
     this.#propertyTextFromSource = property.propertyText || '';
+
+    this.property.addEventListener(SDK.CSSProperty.Events.LOCAL_VALUE_UPDATED, () => {
+      this.updateTitle();
+    });
   }
 
   async gridNames(): Promise<Set<string>> {
@@ -1588,6 +1721,27 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return this.#propertyTextFromSource !== property.propertyText || this.parentPane().isPropertyChanged(property);
   }
 
+  async #getLonghandProperties(): Promise<SDK.CSSProperty.CSSProperty[]> {
+    const staticLonghandProperties = this.property.getLonghandProperties();
+
+    if (staticLonghandProperties.some(property => property.value !== '')) {
+      return staticLonghandProperties;
+    }
+
+    const parsedProperty = this.#computeCSSExpression(this.style, this.property.value);
+    if (!parsedProperty || parsedProperty === this.property.value) {
+      return staticLonghandProperties;
+    }
+
+    const parsedLonghands = await this.parentPaneInternal.cssModel()?.agent.invoke_getLonghandProperties(
+        {shorthandName: this.property.name, value: parsedProperty});
+    if (!parsedLonghands || parsedLonghands.getError()) {
+      return staticLonghandProperties;
+    }
+
+    return parsedLonghands.longhandProperties.map(p => SDK.CSSProperty.CSSProperty.parsePayload(this.style, -1, p));
+  }
+
   override async onpopulate(): Promise<void> {
     if (!this.#gridNames) {
       this.#gridNames = await this.gridNames();
@@ -1598,9 +1752,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    const longhandProperties = this.property.getLonghandProperties();
+    const longhandProperties = await this.#getLonghandProperties();
     const leadingProperties = this.style.leadingProperties();
 
+    // Re-check child count to avoid any races of concurrent onpopulate calls
+    if (this.childCount()) {
+      return;
+    }
+
     for (const property of longhandProperties) {
       const name = property.name;
       let inherited = false;
@@ -1756,12 +1915,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
           new PositionAnchorRenderer(this),
           new FlexGridRenderer(this),
           new PositionTryRenderer(this),
-          new FontRenderer(this),
+          new LengthRenderer(this),
+          new SelectFunctionRenderer(this),
+          new AutoBaseRenderer(this),
         ] :
         [];
 
-    if (!Root.Runtime.experiments.isEnabled('css-type-component-length-deprecate') && this.property.parsedOk) {
-      renderers.push(new LengthRenderer(this));
+    if (Root.Runtime.experiments.isEnabled('font-editor') && this.property.parsedOk) {
+      renderers.push(new FontRenderer(this));
     }
 
     this.listItemElement.removeChildren();
@@ -1852,7 +2013,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       copyIcon.addEventListener('click', () => {
         const propertyText = `${this.property.name}: ${this.property.value};`;
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(propertyText);
-        Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.DECLARATION_VIA_CHANGED_LINE);
       });
       this.listItemElement.append(copyIcon);
       this.listItemElement.insertBefore(enabledCheckboxElement, this.listItemElement.firstChild);
@@ -1987,23 +2147,19 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     contextMenu.headerSection().appendItem(i18nString(UIStrings.copyDeclaration), () => {
       const propertyText = `${this.property.name}: ${this.property.value};`;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(propertyText);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.DECLARATION_VIA_CONTEXT_MENU);
     }, {jslogContext: 'copy-declaration'});
 
     contextMenu.headerSection().appendItem(i18nString(UIStrings.copyProperty), () => {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.name);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.PROPERTY_VIA_CONTEXT_MENU);
     }, {jslogContext: 'copy-property'});
 
     contextMenu.headerSection().appendItem(i18nString(UIStrings.copyValue), () => {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.value);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.VALUE_VIA_CONTEXT_MENU);
     }, {jslogContext: 'copy-value'});
 
     contextMenu.headerSection().appendItem(i18nString(UIStrings.copyRule), () => {
       const ruleText = StylesSidebarPane.formatLeadingProperties(this.#parentSection).ruleText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(ruleText);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.RULE_VIA_CONTEXT_MENU);
     }, {jslogContext: 'copy-rule'});
 
     contextMenu.headerSection().appendItem(
@@ -2013,7 +2169,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyAllDeclarations), () => {
       const allDeclarationText = StylesSidebarPane.formatLeadingProperties(this.#parentSection).allDeclarationText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allDeclarationText);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.ALL_DECLARATIONS_VIA_CONTEXT_MENU);
     }, {jslogContext: 'copy-all-declarations'});
 
     contextMenu.clipboardSection().appendItem(
@@ -2024,7 +2179,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyAllCSSChanges), async () => {
       const allChanges = await this.parentPane().getFormattedChanges();
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allChanges);
-      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.ALL_CHANGES_VIA_STYLES_TAB);
     }, {jslogContext: 'copy-all-css-changes'});
 
     contextMenu.footerSection().appendItem(i18nString(UIStrings.viewComputedValue), () => {
@@ -2057,7 +2211,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private copyCssDeclarationAsJs(): void {
     const cssDeclarationValue = getCssDeclarationAsJavascriptProperty(this.property);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(cssDeclarationValue);
-    Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.DECLARATION_AS_JS_VIA_CONTEXT_MENU);
   }
 
   private copyAllCssDeclarationAsJs(): void {
@@ -2065,7 +2218,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const cssDeclarationsAsJsProperties =
         leadingProperties.filter(property => !property.disabled).map(getCssDeclarationAsJavascriptProperty);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(cssDeclarationsAsJsProperties.join(',\n'));
-    Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.ALL_DECLARATINS_AS_JS_VIA_CONTEXT_MENU);
   }
 
   private navigateToSource(element: Element, omitFocus?: boolean): void {