chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/core/sdk/CSSPropertyParserMatchers.test.ts

@@ -53,8 +53,8 @@ function injectVariableSubstitutions(variables: Record<string, string>) {
       });
   sinon.stub(SDK.CSSPropertyParser.BottomUpTreeMatching.prototype, 'getComputedTextRange')
       .callsFake(function(
-          this: SDK.CSSPropertyParser.BottomUpTreeMatching, from: CodeMirror.SyntaxNode,
-          to: CodeMirror.SyntaxNode): string {
+          this: SDK.CSSPropertyParser.BottomUpTreeMatching, from: CodeMirror.SyntaxNode|undefined,
+          to: CodeMirror.SyntaxNode|undefined): string {
         injectChunk(this);
         return getComputedTextRange.call(this, from, to);
       });
@@ -680,31 +680,31 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
   it('match color channels for relative colors', () => {
     function expectedColor(channel: string) {
       switch (channel) {
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.L:
+        case Common.Color.ColorChannel.L:
           return new Common.Color.Lab(0.5, 0, 0.0, null, 'lab(0.5 0 0)');
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.A:
+        case Common.Color.ColorChannel.A:
           return new Common.Color.Lab(1, 0.5, 0, null);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.C:
+        case Common.Color.ColorChannel.C:
           return new Common.Color.LCH(1, 0.5, 0, null);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.H:
+        case Common.Color.ColorChannel.H:
           return new Common.Color.LCH(1, 1, 0.5, null);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.R:
+        case Common.Color.ColorChannel.R:
           return new Common.Color.Legacy([0.5, 0, 0], Common.Color.Format.RGB);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.G:
+        case Common.Color.ColorChannel.G:
           return new Common.Color.Legacy([0, 0.5, 0], Common.Color.Format.RGB);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.B:
+        case Common.Color.ColorChannel.B:
           return new Common.Color.Legacy([0, 0, 0.5], Common.Color.Format.RGB);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.ALPHA:
+        case Common.Color.ColorChannel.ALPHA:
           return new Common.Color.Legacy([0, 0, 0, 0.5], Common.Color.Format.RGBA);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.S:
+        case Common.Color.ColorChannel.S:
           return new Common.Color.HSL(0.8, 0.5, 0.9, null);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.W:
+        case Common.Color.ColorChannel.W:
           return new Common.Color.HWB(0, 0.5, 0, null);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.X:
+        case Common.Color.ColorChannel.X:
           return new Common.Color.ColorFunction(Common.Color.Format.XYZ_D50, 0.5, 0, 0, null);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.Y:
+        case Common.Color.ColorChannel.Y:
           return new Common.Color.ColorFunction(Common.Color.Format.XYZ_D50, 0, 0.5, 0, null);
-        case SDK.CSSPropertyParserMatchers.RelativeColorChannel.Z:
+        case Common.Color.ColorChannel.Z:
           return new Common.Color.ColorFunction(Common.Color.Format.XYZ_D50, 0, 0, 0.5, null);
         default:
           throw new Error('Unexpected channel');
@@ -732,4 +732,35 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
         new SDK.CSSPropertyParserMatchers.ColorMatch(expected.getAuthoredText() ?? expected.asString(), match.node);
     assert.isNull(match.getColorChannelValue({baseColor, colorSpace: expected.format()}));
   });
+
+  it('match env() functions', () => {
+    // Matched when the var resolves
+    for (const good of ['env(a)', 'env(a, d)', 'env(a /* aa */, b c)', 'env(a, b, c)']) {
+      const matchedStyles = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSMatchedStyles);
+      matchedStyles.environmentVariable.callsFake(name => name === 'a' ? 'A' : 'B');
+      const {match, text} =
+          matchSingleValue('--env', good, new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(matchedStyles));
+      assert.exists(match, text);
+      assert.strictEqual(match.varName, 'a');
+      assert.strictEqual(match.value, 'A');
+    }
+    // Matched when the var is not resolved
+    for (const good of ['env(a)', 'env(a, d)', 'env(a /* aa */, b c)', 'env(a, b, c)']) {
+      const matchedStyles = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSMatchedStyles);
+      matchedStyles.environmentVariable.callsFake(name => name === 'a' ? undefined : 'B');
+      const {match, text} =
+          matchSingleValue('--env', good, new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(matchedStyles));
+      assert.exists(match, text);
+      assert.strictEqual(match.varName, 'a');
+      assert.oneOf(match.value, [null, 'd', 'b c', 'b, c']);
+    }
+    // Not matched
+    for (const bad of ['env', 'env()']) {
+      const matchedStyles = sinon.createStubInstance(SDK.CSSMatchedStyles.CSSMatchedStyles);
+      const {match, ast, text} =
+          matchSingleValue('--env', bad, new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(matchedStyles));
+      assert.notExists(match, text);
+      assert.exists(ast, text);
+    }
+  });
 });

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -31,7 +31,7 @@ export class BaseVariableMatch implements Match {
       readonly text: string,
       readonly node: CodeMirror.SyntaxNode,
       readonly name: string,
-      readonly fallback: CodeMirror.SyntaxNode[],
+      readonly fallback: CodeMirror.SyntaxNode[]|undefined,
       readonly matching: BottomUpTreeMatching,
       readonly computedTextCallback: (match: BaseVariableMatch, matching: BottomUpTreeMatching) => string | null,
   ) {
@@ -72,7 +72,7 @@ export class BaseVariableMatcher extends matcherBase(BaseVariableMatch) {
       return null;
     }
 
-    let fallback: CodeMirror.SyntaxNode[] = [];
+    let fallback;
     if (fallbackOrRParenNodes.length > 1) {
       if (fallbackOrRParenNodes.shift()?.name !== ',') {
         return null;
@@ -81,9 +81,6 @@ export class BaseVariableMatcher extends matcherBase(BaseVariableMatch) {
         return null;
       }
       fallback = fallbackOrRParenNodes;
-      if (fallback.length === 0) {
-        return null;
-      }
       if (fallback.some(n => n.name === ',')) {
         return null;
       }
@@ -104,7 +101,7 @@ export class VariableMatch extends BaseVariableMatch {
       text: string,
       node: CodeMirror.SyntaxNode,
       name: string,
-      fallback: CodeMirror.SyntaxNode[],
+      fallback: CodeMirror.SyntaxNode[]|undefined,
       matching: BottomUpTreeMatching,
       readonly matchedStyles: CSSMatchedStyles,
       readonly style: CSSStyleDeclaration,
@@ -117,8 +114,14 @@ export class VariableMatch extends BaseVariableMatch {
   }
 
   fallbackValue(): string|null {
-    if (this.fallback.length === 0 ||
-        this.matching.hasUnresolvedVarsRange(this.fallback[0], this.fallback[this.fallback.length - 1])) {
+    // Fallback can be missing but it can be also be empty: var(--v,)
+    if (!this.fallback) {
+      return null;
+    }
+    if (this.fallback.length === 0) {
+      return '';
+    }
+    if (this.matching.hasUnresolvedVarsRange(this.fallback[0], this.fallback[this.fallback.length - 1])) {
       return null;
     }
     return this.matching.getComputedTextRange(this.fallback[0], this.fallback[this.fallback.length - 1]);
@@ -426,38 +429,22 @@ export class ColorMatcher extends matcherBase(ColorMatch) {
   }
 }
 
-export const enum RelativeColorChannel {
-  A = 'a',
-  ALPHA = 'alpha',
-  B = 'b',
-  C = 'c',
-  G = 'g',
-  H = 'h',
-  L = 'l',
-  R = 'r',
-  S = 's',
-  W = 'w',
-  X = 'x',
-  Y = 'y',
-  Z = 'z',
-}
-
-function isRelativeColorChannelName(channel: string): channel is RelativeColorChannel {
-  const maybeChannel = channel as RelativeColorChannel;
+function isRelativeColorChannelName(channel: string): channel is Common.Color.ColorChannel {
+  const maybeChannel = channel as Common.Color.ColorChannel;
   switch (maybeChannel) {
-    case RelativeColorChannel.A:
-    case RelativeColorChannel.ALPHA:
-    case RelativeColorChannel.B:
-    case RelativeColorChannel.C:
-    case RelativeColorChannel.G:
-    case RelativeColorChannel.H:
-    case RelativeColorChannel.L:
-    case RelativeColorChannel.R:
-    case RelativeColorChannel.S:
-    case RelativeColorChannel.W:
-    case RelativeColorChannel.X:
-    case RelativeColorChannel.Y:
-    case RelativeColorChannel.Z:
+    case Common.Color.ColorChannel.A:
+    case Common.Color.ColorChannel.ALPHA:
+    case Common.Color.ColorChannel.B:
+    case Common.Color.ColorChannel.C:
+    case Common.Color.ColorChannel.G:
+    case Common.Color.ColorChannel.H:
+    case Common.Color.ColorChannel.L:
+    case Common.Color.ColorChannel.R:
+    case Common.Color.ColorChannel.S:
+    case Common.Color.ColorChannel.W:
+    case Common.Color.ColorChannel.X:
+    case Common.Color.ColorChannel.Y:
+    case Common.Color.ColorChannel.Z:
       return true;
   }
   // This assignment catches missed values in the switch above.
@@ -466,37 +453,37 @@ function isRelativeColorChannelName(channel: string): channel is RelativeColorCh
 }
 
 export class RelativeColorChannelMatch implements Match {
-  constructor(readonly text: RelativeColorChannel, readonly node: CodeMirror.SyntaxNode) {
+  constructor(readonly text: Common.Color.ColorChannel, readonly node: CodeMirror.SyntaxNode) {
   }
 
   getColorChannelValue(relativeColor: RelativeColor): number|null {
     const color = Common.Color.parse(relativeColor.baseColor.text)?.as(relativeColor.colorSpace);
     if (color instanceof Common.Color.ColorFunction) {
       switch (this.text) {
-        case RelativeColorChannel.R:
+        case Common.Color.ColorChannel.R:
           return color.isXYZ() ? null : color.p0;
-        case RelativeColorChannel.G:
+        case Common.Color.ColorChannel.G:
           return color.isXYZ() ? null : color.p1;
-        case RelativeColorChannel.B:
+        case Common.Color.ColorChannel.B:
           return color.isXYZ() ? null : color.p2;
-        case RelativeColorChannel.X:
+        case Common.Color.ColorChannel.X:
           return color.isXYZ() ? color.p0 : null;
-        case RelativeColorChannel.Y:
+        case Common.Color.ColorChannel.Y:
           return color.isXYZ() ? color.p1 : null;
-        case RelativeColorChannel.Z:
+        case Common.Color.ColorChannel.Z:
           return color.isXYZ() ? color.p2 : null;
-        case RelativeColorChannel.ALPHA:
+        case Common.Color.ColorChannel.ALPHA:
           return color.alpha;
       }
     } else if (color instanceof Common.Color.Legacy) {
       switch (this.text) {
-        case RelativeColorChannel.R:
+        case Common.Color.ColorChannel.R:
           return color.rgba()[0];
-        case RelativeColorChannel.G:
+        case Common.Color.ColorChannel.G:
           return color.rgba()[1];
-        case RelativeColorChannel.B:
+        case Common.Color.ColorChannel.B:
           return color.rgba()[2];
-        case RelativeColorChannel.ALPHA:
+        case Common.Color.ColorChannel.ALPHA:
           return color.rgba()[3];
       }
     } else if (color && this.text in color) {
@@ -695,7 +682,7 @@ export class LinkableNameMatcher extends matcherBase(LinkableNameMatch) {
       return null;
     }
 
-    if (parentNode.name === 'CallExpression' && node.name === 'Callee' && text.startsWith('--')) {
+    if (parentNode.name === 'CallExpression' && node.name === 'VariableName') {
       return new LinkableNameMatch(text, node, LinkableNameProperties.FUNCTION);
     }
 
@@ -851,22 +838,64 @@ export class LengthMatcher extends matcherBase(LengthMatch) {
   }
 }
 
+export const enum SelectFunction {
+  MIN = 'min',
+  MAX = 'max',
+  CLAMP = 'clamp',
+}
+export const enum ArithmeticFunction {
+  CALC = 'calc',
+  SIBLING_COUNT = 'sibling-count',
+  SIBLING_INDEX = 'sibling-index',
+}
+type MathFunction = SelectFunction|ArithmeticFunction;
+
 export class MathFunctionMatch implements Match {
   constructor(
-      readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly func: string,
+      readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly func: MathFunction,
       readonly args: CodeMirror.SyntaxNode[][]) {
   }
+
+  isArithmeticFunctionCall(): boolean {
+    const func = this.func as ArithmeticFunction;
+    switch (func) {
+      case ArithmeticFunction.CALC:
+      case ArithmeticFunction.SIBLING_COUNT:
+      case ArithmeticFunction.SIBLING_INDEX:
+        return true;
+    }
+    // This assignment catches missed values in the switch above.
+    const catchFallback: never = func;  // eslint-disable-line @typescript-eslint/no-unused-vars
+    return false;
+  }
 }
 
 // clang-format off
 export class MathFunctionMatcher extends matcherBase(MathFunctionMatch) {
   // clang-format on
+  private static getFunctionType(callee: string|null): MathFunction|null {
+    const maybeFunc = callee as MathFunction | null;
+    switch (maybeFunc) {
+      case null:
+      case SelectFunction.MIN:
+      case SelectFunction.MAX:
+      case SelectFunction.CLAMP:
+      case ArithmeticFunction.CALC:
+      case ArithmeticFunction.SIBLING_COUNT:
+      case ArithmeticFunction.SIBLING_INDEX:
+        return maybeFunc;
+    }
+    // This assignment catches missed values in the switch above.
+    const catchFallback: never = maybeFunc;  // eslint-disable-line @typescript-eslint/no-unused-vars
+    return null;
+  }
+
   override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): MathFunctionMatch|null {
     if (node.name !== 'CallExpression') {
       return null;
     }
-    const callee = matching.ast.text(node.getChild('Callee'));
-    if (!['min', 'max', 'clamp', 'calc'].includes(callee)) {
+    const callee = MathFunctionMatcher.getFunctionType(matching.ast.text(node.getChild('Callee')));
+    if (!callee) {
       return null;
     }
     const args = ASTUtils.callArgs(node);
@@ -874,7 +903,11 @@ export class MathFunctionMatcher extends matcherBase(MathFunctionMatch) {
       return null;
     }
     const text = matching.ast.text(node);
-    return new MathFunctionMatch(text, node, callee, args);
+    const match = new MathFunctionMatch(text, node, callee, args);
+    if (!match.isArithmeticFunctionCall() && args.length === 0) {
+      return null;
+    }
+    return match;
   }
 }
 
@@ -957,7 +990,7 @@ export class GridTemplateMatcher extends matcherBase(GridTemplateMatch) {
             continue;
           }
           if ((varNodes[0].name === 'StringLiteral' && !hasLeadingLineNames) ||
-              (varNodes[0].name === 'LineNames' && !needClosingLineNames)) {
+              (varNodes[0].name === 'BracketedValue' && !needClosingLineNames)) {
             // The variable value either starts with a string, or with a line name that belongs to a new row;
             // therefore we start a new line with the variable.
             lines.push(curLine);
@@ -981,7 +1014,7 @@ export class GridTemplateMatcher extends matcherBase(GridTemplateMatch) {
           }
           needClosingLineNames = true;
           hasLeadingLineNames = false;
-        } else if (curNode.name === 'LineNames') {
+        } else if (curNode.name === 'BracketedValue') {
           if (!varParsingMode) {
             if (needClosingLineNames) {
               curLine.push(curNode);
@@ -999,6 +1032,9 @@ export class GridTemplateMatcher extends matcherBase(GridTemplateMatch) {
     }
 
     const valueNodes = ASTUtils.siblings(ASTUtils.declValue(node));
+    if (valueNodes.length === 0) {
+      return null;
+    }
     parseNodes(valueNodes);
     lines.push(curLine);
     const valueText = matching.ast.textRange(valueNodes[0], valueNodes[valueNodes.length - 1]);
@@ -1157,3 +1193,40 @@ export class PositionTryMatcher extends matcherBase(PositionTryMatch) {
     return new PositionTryMatch(valueText, node, preamble, fallbacks);
   }
 }
+
+export class EnvFunctionMatch implements Match {
+  constructor(
+      readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly varName: string,
+      readonly value: string|null, readonly varNameIsValid: boolean) {
+  }
+
+  computedText(): string|null {
+    return this.value;
+  }
+}
+
+// clang-format off
+export class EnvFunctionMatcher extends matcherBase(EnvFunctionMatch) {
+  // clang-format on
+  constructor(readonly matchedStyles: CSSMatchedStyles) {
+    super();
+  }
+
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): EnvFunctionMatch|null {
+    if (node.name !== 'CallExpression' || matching.ast.text(node.getChild('Callee')) !== 'env') {
+      return null;
+    }
+
+    const [valueNodes, ...fallbackNodes] = ASTUtils.callArgs(node);
+    if (!valueNodes?.length) {
+      return null;
+    }
+
+    const fallbackValue =
+        fallbackNodes.length > 0 ? matching.getComputedTextRange(...ASTUtils.range(fallbackNodes.flat())) : undefined;
+    const varName = matching.getComputedTextRange(...ASTUtils.range(valueNodes)).trim();
+    const value = this.matchedStyles.environmentVariable(varName);
+
+    return new EnvFunctionMatch(matching.ast.text(node), node, varName, value ?? fallbackValue ?? null, Boolean(value));
+  }
+}

package/front_end/core/sdk/CSSRule.ts

@@ -15,42 +15,41 @@ import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
 import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 import {CSSSupports} from './CSSSupports.js';
 
+function styleSheetHeaderForRule(
+    cssModel: CSSModel, {styleSheetId}: {styleSheetId?: Protocol.CSS.StyleSheetId}): CSSStyleSheetHeader|null {
+  return styleSheetId && cssModel.styleSheetHeaderForId(styleSheetId) || null;
+}
+
 export class CSSRule {
   readonly cssModelInternal: CSSModel;
-  styleSheetId: Protocol.CSS.StyleSheetId|undefined;
-  sourceURL: string|undefined;
-  origin: Protocol.CSS.StyleSheetOrigin;
-  style: CSSStyleDeclaration;
+  readonly origin: Protocol.CSS.StyleSheetOrigin;
+  readonly style: CSSStyleDeclaration;
+  readonly header: CSSStyleSheetHeader|null;
 
   constructor(cssModel: CSSModel, payload: {
     style: Protocol.CSS.CSSStyle,
-    styleSheetId: Protocol.CSS.StyleSheetId|undefined,
     origin: Protocol.CSS.StyleSheetOrigin,
+    header: CSSStyleSheetHeader|null,
   }) {
+    this.header = payload.header;
     this.cssModelInternal = cssModel;
-    this.styleSheetId = payload.styleSheetId;
-
-    if (this.styleSheetId) {
-      const styleSheetHeader = this.getStyleSheetHeader(this.styleSheetId);
-      this.sourceURL = styleSheetHeader.sourceURL;
-    }
     this.origin = payload.origin;
     this.style = new CSSStyleDeclaration(this.cssModelInternal, this, payload.style, Type.Regular);
   }
 
+  get sourceURL(): string|undefined {
+    return this.header?.sourceURL;
+  }
+
   rebase(edit: Edit): void {
-    if (this.styleSheetId !== edit.styleSheetId) {
+    if (this.header?.id !== edit.styleSheetId) {
       return;
     }
     this.style.rebase(edit);
   }
 
   resourceURL(): Platform.DevToolsPath.UrlString {
-    if (!this.styleSheetId) {
-      return Platform.DevToolsPath.EmptyUrlString;
-    }
-    const styleSheetHeader = this.getStyleSheetHeader(this.styleSheetId);
-    return styleSheetHeader.resourceURL();
+    return this.header?.resourceURL() ?? Platform.DevToolsPath.EmptyUrlString;
   }
 
   isUserAgent(): boolean {
@@ -76,12 +75,6 @@ export class CSSRule {
   cssModel(): CSSModel {
     return this.cssModelInternal;
   }
-
-  getStyleSheetHeader(styleSheetId: Protocol.CSS.StyleSheetId): CSSStyleSheetHeader {
-    const styleSheetHeader = this.cssModelInternal.styleSheetHeaderForId(styleSheetId);
-    console.assert(styleSheetHeader !== null);
-    return styleSheetHeader as CSSStyleSheetHeader;
-  }
 }
 
 class CSSValue {
@@ -117,7 +110,7 @@ export class CSSStyleRule extends CSSRule {
   ruleTypes: Protocol.CSS.CSSRuleType[];
   wasUsed: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
-    super(cssModel, {origin: payload.origin, style: payload.style, styleSheetId: payload.styleSheetId});
+    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
     this.reinitializeSelectors(payload.selectorList);
     this.nestingSelectors = payload.nestingSelectors;
     this.media = payload.media ? CSSMedia.parseMediaArrayPayload(cssModel, payload.media) : [];
@@ -156,7 +149,7 @@ export class CSSStyleRule extends CSSRule {
   }
 
   setSelectorText(newSelector: string): Promise<boolean> {
-    const styleSheetId = this.styleSheetId;
+    const styleSheetId = this.header?.id;
     if (!styleSheetId) {
       throw new Error('No rule stylesheet id');
     }
@@ -189,24 +182,22 @@ export class CSSStyleRule extends CSSRule {
 
   lineNumberInSource(selectorIndex: number): number {
     const selector = this.selectors[selectorIndex];
-    if (!selector?.range || !this.styleSheetId) {
+    if (!selector?.range || !this.header) {
       return 0;
     }
-    const styleSheetHeader = this.getStyleSheetHeader(this.styleSheetId);
-    return styleSheetHeader.lineNumberInSource(selector.range.startLine);
+    return this.header.lineNumberInSource(selector.range.startLine);
   }
 
   columnNumberInSource(selectorIndex: number): number|undefined {
     const selector = this.selectors[selectorIndex];
-    if (!selector?.range || !this.styleSheetId) {
+    if (!selector?.range || !this.header) {
       return undefined;
     }
-    const styleSheetHeader = this.getStyleSheetHeader(this.styleSheetId);
-    return styleSheetHeader.columnNumberInSource(selector.range.startLine, selector.range.startColumn);
+    return this.header.columnNumberInSource(selector.range.startLine, selector.range.startColumn);
   }
 
   override rebase(edit: Edit): void {
-    if (this.styleSheetId !== edit.styleSheetId) {
+    if (this.header?.id !== edit.styleSheetId) {
       return;
     }
     const range = this.selectorRange();
@@ -229,7 +220,7 @@ export class CSSStyleRule extends CSSRule {
 export class CSSPropertyRule extends CSSRule {
   #name: CSSValue;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSPropertyRule) {
-    super(cssModel, {origin: payload.origin, style: payload.style, styleSheetId: payload.styleSheetId});
+    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
     this.#name = new CSSValue(payload.propertyName);
   }
 
@@ -248,7 +239,7 @@ export class CSSPropertyRule extends CSSRule {
     return this.style.getPropertyValue('inherits') === 'true';
   }
   setPropertyName(newPropertyName: string): Promise<boolean> {
-    const styleSheetId = this.styleSheetId;
+    const styleSheetId = this.header?.id;
     if (!styleSheetId) {
       throw new Error('No rule stylesheet id');
     }
@@ -263,7 +254,7 @@ export class CSSPropertyRule extends CSSRule {
 export class CSSFontPaletteValuesRule extends CSSRule {
   readonly #paletteName: CSSValue;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSFontPaletteValuesRule) {
-    super(cssModel, {origin: payload.origin, style: payload.style, styleSheetId: payload.styleSheetId});
+    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
     this.#paletteName = new CSSValue(payload.fontPaletteName);
   }
 
@@ -277,7 +268,8 @@ export class CSSKeyframesRule {
   readonly #keyframesInternal: CSSKeyframeRule[];
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSKeyframesRule) {
     this.#animationName = new CSSValue(payload.animationName);
-    this.#keyframesInternal = payload.keyframes.map(keyframeRule => new CSSKeyframeRule(cssModel, keyframeRule));
+    this.#keyframesInternal =
+        payload.keyframes.map(keyframeRule => new CSSKeyframeRule(cssModel, keyframeRule, this.#animationName.text));
   }
 
   name(): CSSValue {
@@ -291,9 +283,15 @@ export class CSSKeyframesRule {
 
 export class CSSKeyframeRule extends CSSRule {
   #keyText!: CSSValue;
-  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSKeyframeRule) {
-    super(cssModel, {origin: payload.origin, style: payload.style, styleSheetId: payload.styleSheetId});
+  #parentRuleName: string;
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSKeyframeRule, parentRuleName: string) {
+    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
     this.reinitializeKey(payload.keyText);
+    this.#parentRuleName = parentRuleName;
+  }
+
+  parentRuleName(): string {
+    return this.#parentRuleName;
   }
 
   key(): CSSValue {
@@ -305,7 +303,7 @@ export class CSSKeyframeRule extends CSSRule {
   }
 
   override rebase(edit: Edit): void {
-    if (this.styleSheetId !== edit.styleSheetId || !this.#keyText.range) {
+    if (this.header?.id !== edit.styleSheetId || !this.#keyText.range) {
       return;
     }
     if (edit.oldRange.equal(this.#keyText.range)) {
@@ -322,7 +320,7 @@ export class CSSKeyframeRule extends CSSRule {
   }
 
   setKeyText(newKeyText: string): Promise<boolean> {
-    const styleSheetId = this.styleSheetId;
+    const styleSheetId = this.header?.id;
     if (!styleSheetId) {
       throw new Error('No rule stylesheet id');
     }
@@ -338,7 +336,7 @@ export class CSSPositionTryRule extends CSSRule {
   readonly #name: CSSValue;
   readonly #active: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSPositionTryRule) {
-    super(cssModel, {origin: payload.origin, style: payload.style, styleSheetId: payload.styleSheetId});
+    super(cssModel, {origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload)});
     this.#name = new CSSValue(payload.name);
     this.#active = payload.active;
   }
@@ -367,9 +365,11 @@ export class CSSFunctionRule extends CSSRule {
   readonly #parameters: string[];
   readonly #children: CSSNestedStyle[];
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSFunctionRule) {
-    super(
-        cssModel,
-        {origin: payload.origin, style: {cssProperties: [], shorthandEntries: []}, styleSheetId: payload.styleSheetId});
+    super(cssModel, {
+      origin: payload.origin,
+      style: {cssProperties: [], shorthandEntries: []},
+      header: styleSheetHeaderForRule(cssModel, payload)
+    });
     this.#name = new CSSValue(payload.name);
     this.#parameters = payload.parameters.map(({name}) => name);
     this.#children = this.protocolNodesToNestedStyles(payload.children);

package/front_end/core/sdk/CSSStyleSheetHeader.ts

@@ -16,11 +16,11 @@ import {ResourceTreeModel} from './ResourceTreeModel.js';
 
 const UIStrings = {
   /**
-   *@description Error message for when a CSS file can't be loaded
+   * @description Error message for when a CSS file can't be loaded
    */
   couldNotFindTheOriginalStyle: 'Could not find the original style sheet.',
   /**
-   *@description Error message to display when a source CSS file could not be retrieved.
+   * @description Error message to display when a source CSS file could not be retrieved.
    */
   thereWasAnErrorRetrievingThe: 'There was an error retrieving the source styles.',
 } as const;
@@ -163,10 +163,6 @@ export class CSSStyleSheetHeader implements TextUtils.ContentProvider.ContentPro
     return Common.ResourceType.resourceTypes.Stylesheet;
   }
 
-  requestContent(): Promise<TextUtils.ContentProvider.DeferredContent> {
-    return this.requestContentData().then(TextUtils.ContentData.ContentData.asDeferredContent.bind(undefined));
-  }
-
   async requestContentData(): Promise<TextUtils.ContentData.ContentDataOrError> {
     const cssText = await this.#cssModelInternal.getStyleSheetText(this.id);
     if (cssText === null) {

package/front_end/core/sdk/ChildTargetManager.ts

@@ -223,7 +223,7 @@ export class ChildTargetManager extends SDKModel<EventTypes> implements Protocol
     // We use flatten protocol.
   }
 
-  async createParallelConnection(onMessage: (arg0: (Object|string)) => void):
+  async createParallelConnection(onMessage: (arg0: Object|string) => void):
       Promise<{connection: ProtocolClient.InspectorBackend.Connection, sessionId: string}> {
     // The main Target id is actually just `main`, instead of the real targetId.
     // Get the real id (requires an async operation) so that it can be used synchronously later.