chrome-devtools-mcp-for-extension 0.19.2 → 0.20.0

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSMatchedStyles.js

@@ -5,8 +5,8 @@ import * as Platform from '../platform/platform.js';
 import { CSSMetadata, cssMetadata } from './CSSMetadata.js';
 import { CSSProperty } from './CSSProperty.js';
 import * as PropertyParser from './CSSPropertyParser.js';
-import { AnchorFunctionMatcher, AngleMatcher, AttributeMatcher, AutoBaseMatcher, BaseVariableMatcher, BezierMatcher, BinOpMatcher, ColorMatcher, ColorMixMatcher, CustomFunctionMatcher, defaultValueForCSSType, EnvFunctionMatcher, FlexGridMatcher, GridTemplateMatcher, LengthMatcher, LightDarkColorMatcher, LinearGradientMatcher, LinkableNameMatcher, localEvalCSS, MathFunctionMatcher, PositionAnchorMatcher, PositionTryMatcher, RelativeColorChannelMatcher, ShadowMatcher, StringMatcher, URLMatcher, VariableMatcher } from './CSSPropertyParserMatchers.js';
-import { CSSFontPaletteValuesRule, CSSFunctionRule, CSSKeyframeRule, CSSKeyframesRule, CSSPositionTryRule, CSSPropertyRule, CSSStyleRule, } from './CSSRule.js';
+import { AnchorFunctionMatcher, AngleMatcher, AttributeMatcher, AutoBaseMatcher, BaseVariableMatcher, BezierMatcher, BinOpMatcher, ColorMatcher, ColorMixMatcher, CustomFunctionMatcher, defaultValueForCSSType, EnvFunctionMatcher, FlexGridGridLanesMatcher, GridTemplateMatcher, LengthMatcher, LightDarkColorMatcher, LinearGradientMatcher, LinkableNameMatcher, localEvalCSS, MathFunctionMatcher, PositionAnchorMatcher, PositionTryMatcher, RelativeColorChannelMatcher, ShadowMatcher, StringMatcher, URLMatcher, VariableMatcher } from './CSSPropertyParserMatchers.js';
+import { CSSAtRule, CSSFunctionRule, CSSKeyframeRule, CSSKeyframesRule, CSSPositionTryRule, CSSPropertyRule, CSSStyleRule, } from './CSSRule.js';
 import { CSSStyleDeclaration, Type } from './CSSStyleDeclaration.js';
 function containsStyle(styles, query) {
     if (!query.styleSheetId || !query.range) {
@@ -212,15 +212,15 @@ export class CSSMatchedStyles {
     #pseudoDOMCascades;
     #customHighlightPseudoDOMCascades;
     #functionRules;
+    #atRules;
     #functionRuleMap = new Map();
-    #fontPaletteValuesRule;
     #environmentVariables = {};
     static async create(payload) {
         const cssMatchedStyles = new CSSMatchedStyles(payload);
         await cssMatchedStyles.init(payload);
         return cssMatchedStyles;
     }
-    constructor({ cssModel, node, animationsPayload, parentLayoutNodeId, positionTryRules, propertyRules, cssPropertyRegistrations, fontPaletteValuesRule, activePositionFallbackIndex, functionRules, }) {
+    constructor({ cssModel, node, animationsPayload, parentLayoutNodeId, positionTryRules, propertyRules, cssPropertyRegistrations, activePositionFallbackIndex, functionRules, atRules, }) {
         this.#cssModel = cssModel;
         this.#node = node;
         this.#registeredProperties = [
@@ -232,17 +232,16 @@ export class CSSMatchedStyles {
         }
         this.#positionTryRules = positionTryRules.map(rule => new CSSPositionTryRule(cssModel, rule));
         this.#parentLayoutNodeId = parentLayoutNodeId;
-        this.#fontPaletteValuesRule =
-            fontPaletteValuesRule ? new CSSFontPaletteValuesRule(cssModel, fontPaletteValuesRule) : undefined;
         this.#activePositionFallbackIndex = activePositionFallbackIndex;
         this.#functionRules = functionRules.map(rule => new CSSFunctionRule(cssModel, rule));
+        this.#atRules = atRules.map(rule => new CSSAtRule(cssModel, rule));
     }
     async init({ matchedPayload, inheritedPayload, inlinePayload, attributesPayload, pseudoPayload, inheritedPseudoPayload, animationStylesPayload, transitionsStylePayload, inheritedAnimatedPayload, }) {
         matchedPayload = cleanUserAgentPayload(matchedPayload);
         for (const inheritedResult of inheritedPayload) {
             inheritedResult.matchedCSSRules = cleanUserAgentPayload(inheritedResult.matchedCSSRules);
         }
-        this.#environmentVariables = await this.cssModel().getEnvironmentVariales();
+        this.#environmentVariables = await this.cssModel().getEnvironmentVariables();
         this.#mainDOMCascade = await this.buildMainCascade(inlinePayload, attributesPayload, matchedPayload, inheritedPayload, animationStylesPayload, transitionsStylePayload, inheritedAnimatedPayload);
         [this.#pseudoDOMCascades, this.#customHighlightPseudoDOMCascades] =
             this.buildPseudoCascades(pseudoPayload, inheritedPseudoPayload);
@@ -305,7 +304,7 @@ export class CSSMatchedStyles {
         if (!addedAttributesStyle) {
             addAttributesStyle.call(this);
         }
-        nodeCascades.push(new NodeCascade(this, nodeStyles, false /* #isInherited */));
+        nodeCascades.push(new NodeCascade(this, nodeStyles, this.#node, false /* #isInherited */));
         // Walk the node structure and identify styles with inherited properties.
         let parentNode = this.#node.parentNode;
         const traverseParentInFlatTree = async (node) => {
@@ -361,8 +360,9 @@ export class CSSMatchedStyles {
                 inheritedStyles.push(inheritedRule.style);
                 this.#inheritedStyles.add(inheritedRule.style);
             }
+            const node = parentNode;
             parentNode = await traverseParentInFlatTree(parentNode);
-            nodeCascades.push(new NodeCascade(this, inheritedStyles, true /* #isInherited */));
+            nodeCascades.push(new NodeCascade(this, inheritedStyles, node, true /* #isInherited */));
         }
         return new DOMInheritanceCascade(this, nodeCascades, this.#registeredProperties);
     }
@@ -396,7 +396,7 @@ export class CSSMatchedStyles {
             }
         }
         for (const [highlightName, highlightStyles] of splitHighlightRules) {
-            const nodeCascade = new NodeCascade(this, highlightStyles, isInherited, true /* #isHighlightPseudoCascade*/);
+            const nodeCascade = new NodeCascade(this, highlightStyles, node, isInherited, true /* #isHighlightPseudoCascade*/);
             const cascadeListForHighlightName = pseudoCascades.get(highlightName);
             if (cascadeListForHighlightName) {
                 cascadeListForHighlightName.push(nodeCascade);
@@ -434,7 +434,7 @@ export class CSSMatchedStyles {
                     }
                 }
                 const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType);
-                const nodeCascade = new NodeCascade(this, pseudoStyles, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+                const nodeCascade = new NodeCascade(this, pseudoStyles, this.#node, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
                 pseudoCascades.set(entryPayload.pseudoType, [nodeCascade]);
             }
         }
@@ -458,7 +458,7 @@ export class CSSMatchedStyles {
                             this.addMatchingSelectors(parentNode, pseudoRule, rules[k].matchingSelectors);
                         }
                         const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(inheritedEntryPayload.pseudoType);
-                        const nodeCascade = new NodeCascade(this, pseudoStyles, true /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+                        const nodeCascade = new NodeCascade(this, pseudoStyles, parentNode, true /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
                         const cascadeListForPseudoType = pseudoCascades.get(inheritedEntryPayload.pseudoType);
                         if (cascadeListForPseudoType) {
                             cascadeListForPseudoType.push(nodeCascade);
@@ -598,8 +598,8 @@ export class CSSMatchedStyles {
     functionRules() {
         return this.#functionRules;
     }
-    fontPaletteValuesRule() {
-        return this.#fontPaletteValuesRule;
+    atRules() {
+        return this.#atRules;
     }
     keyframes() {
         return this.#keyframes;
@@ -713,7 +713,7 @@ export class CSSMatchedStyles {
             new LinearGradientMatcher(),
             new AnchorFunctionMatcher(),
             new PositionAnchorMatcher(),
-            new FlexGridMatcher(),
+            new FlexGridGridLanesMatcher(),
             new PositionTryMatcher(),
             new LengthMatcher(),
             new MathFunctionMatcher(),
@@ -736,11 +736,13 @@ class NodeCascade {
     #isHighlightPseudoCascade;
     propertiesState = new Map();
     activeProperties = new Map();
-    constructor(matchedStyles, styles, isInherited, isHighlightPseudoCascade = false) {
+    #node;
+    constructor(matchedStyles, styles, node, isInherited, isHighlightPseudoCascade = false) {
         this.#matchedStyles = matchedStyles;
         this.styles = styles;
         this.#isInherited = isInherited;
         this.#isHighlightPseudoCascade = isHighlightPseudoCascade;
+        this.#node = node;
     }
     computeActiveProperties() {
         this.propertiesState.clear();
@@ -791,9 +793,41 @@ class NodeCascade {
             }
         }
     }
+    #treeScopeDistance(property) {
+        if (!property.ownerStyle.parentRule && property.ownerStyle.type !== Type.Inline) {
+            return -1;
+        }
+        const root = this.#node.getTreeRoot();
+        const nodeId = property.ownerStyle.parentRule?.treeScope ?? root?.backendNodeId();
+        if (nodeId === undefined) {
+            return -1;
+        }
+        let distance = 0;
+        for (let ancestor = this.#node; ancestor; ancestor = ancestor.parentNode) {
+            if (ancestor.backendNodeId() === nodeId) {
+                return distance;
+            }
+            distance++;
+        }
+        return -1;
+    }
+    #needsCascadeContextStep() {
+        if (!this.#node.isInShadowTree()) {
+            return false;
+        }
+        if (this.#node.ancestorShadowRoot()?.shadowRootType() === 'user-agent') {
+            // In UA shadow dom, only standards-track pseudo elements override style attributes. -webkit-* and -internal-*
+            // pseudos are still exempt from that to retain legacy behavior.
+            const pseudoElement = this.#node.getAttribute('pseudo');
+            return !pseudoElement?.startsWith('-webkit-') && !pseudoElement?.startsWith('-internal-');
+        }
+        return true;
+    }
     updatePropertyState(propertyWithHigherSpecificity, canonicalName) {
         const activeProperty = this.activeProperties.get(canonicalName);
-        if (activeProperty?.important && !propertyWithHigherSpecificity.important) {
+        if (activeProperty?.important && !propertyWithHigherSpecificity.important ||
+            activeProperty && this.#needsCascadeContextStep() &&
+                this.#treeScopeDistance(activeProperty) > this.#treeScopeDistance(propertyWithHigherSpecificity)) {
             this.propertiesState.set(propertyWithHigherSpecificity, "Overloaded" /* PropertyState.OVERLOADED */);
             return;
         }

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSMetadata.js

@@ -279,8 +279,10 @@ export const CubicBezierKeywordValues = new Map([
     ['ease-in-out', 'cubic-bezier(0.42, 0, 0.58, 1)'],
     ['ease-out', 'cubic-bezier(0, 0, 0.58, 1)'],
 ]);
-// Spec: https://drafts.csswg.org/css-cascade/#defaulting-keywords
-// https://drafts.csswg.org/css-cascade-5/#revert-layer
+/**
+ * Spec: https://drafts.csswg.org/css-cascade/#defaulting-keywords
+ * https://drafts.csswg.org/css-cascade-5/#revert-layer
+ **/
 export const CSSWideKeywords = [
     "inherit" /* CSSWideKeyword.INHERIT */,
     "initial" /* CSSWideKeyword.INITIAL */,
@@ -344,11 +346,8 @@ const cornerShapeValuePresetMap = new Map([
     ['superellipse(infinity)', 'superellipse(|infinity|)'],
 ]);
 const valuePresets = new Map([
-    ['filter', filterValuePresetMap],
-    ['backdrop-filter', filterValuePresetMap],
-    ['background', imageValuePresetMap],
-    ['background-image', imageValuePresetMap],
-    ['-webkit-mask-image', imageValuePresetMap],
+    ['filter', filterValuePresetMap], ['backdrop-filter', filterValuePresetMap], ['background', imageValuePresetMap],
+    ['background-image', imageValuePresetMap], ['-webkit-mask-image', imageValuePresetMap],
     [
         'transform',
         new Map([
@@ -375,6 +374,17 @@ const valuePresets = new Map([
         ]),
     ],
     ['corner-shape', cornerShapeValuePresetMap],
+    [
+        'font-variant-alternates',
+        new Map([
+            ['stylistic', 'stylistic(||)'],
+            ['styleset', 'styleset(||)'],
+            ['character-variant', 'character-variant(||)'],
+            ['swash', 'swash(||)'],
+            ['ornaments', 'ornaments(||)'],
+            ['annotation', 'annotation(||)'],
+        ]),
+    ]
 ]);
 const distanceProperties = new Set([
     'background-position',
@@ -646,6 +656,10 @@ const extraPropertyValues = new Map([
             'ruby',
         ]),
     ],
+    [
+        'font-variant-alternates',
+        new Set(['historical-forms', 'stylistic', 'styleset', 'character-variant', 'swash', 'ornaments', 'annotation'])
+    ],
     ['vertical-align', new Set(['top', 'bottom', '-webkit-baseline-middle'])],
     ['page-break-after', new Set(['left', 'right', 'always', 'avoid'])],
     ['text-emphasis-style', textEmphasisStyle],

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSModel.js

@@ -138,7 +138,7 @@ export class CSSModel extends SDKModel {
         try {
             await this.ensureOriginalStyleSheetText(styleSheetId);
             const { styles } = await this.agent.invoke_setStyleTexts({ edits: [{ styleSheetId, range: range.serializeToObject(), text }] });
-            if (!styles || styles.length !== 1) {
+            if (styles?.length !== 1) {
                 return false;
             }
             this.#domModel.markUndoableState(!majorChange);
@@ -278,7 +278,7 @@ export class CSSModel extends SDKModel {
             propertyRules: matchedStylesResponse.cssPropertyRules ?? [],
             functionRules: matchedStylesResponse.cssFunctionRules ?? [],
             cssPropertyRegistrations: matchedStylesResponse.cssPropertyRegistrations ?? [],
-            fontPaletteValuesRule: matchedStylesResponse.cssFontPaletteValuesRule,
+            atRules: matchedStylesResponse.cssAtRules ?? [],
             activePositionFallbackIndex: matchedStylesResponse.activePositionFallbackIndex ?? -1,
             animationStylesPayload: animatedStylesResponse?.animationStyles || [],
             inheritedAnimatedPayload: animatedStylesResponse?.inherited || [],
@@ -308,7 +308,7 @@ export class CSSModel extends SDKModel {
             (styles.get('grid-template-columns')?.startsWith('subgrid') ||
                 styles.get('grid-template-rows')?.startsWith('subgrid'))) ??
             false;
-        const isMasonry = display === 'masonry' || display === 'inline-masonry';
+        const isGridLanes = display === 'grid-lanes' || display === 'inline-grid-lanes';
         const containerType = styles.get('container-type');
         const isContainer = Boolean(containerType) && containerType !== '' && containerType !== 'normal';
         const hasScroll = Boolean(styles.get('scroll-snap-type')) && styles.get('scroll-snap-type') !== 'none';
@@ -316,12 +316,12 @@ export class CSSModel extends SDKModel {
             isFlex,
             isGrid,
             isSubgrid,
-            isMasonry,
+            isGridLanes,
             isContainer,
             hasScroll,
         };
     }
-    async getEnvironmentVariales() {
+    async getEnvironmentVariables() {
         const response = await this.agent.invoke_getEnvironmentVariables();
         if (response.getError()) {
             return {};
@@ -368,6 +368,11 @@ export class CSSModel extends SDKModel {
             null;
         return new InlineStyleResult(inlineStyle, attributesStyle);
     }
+    forceStartingStyle(node, forced) {
+        void this.agent.invoke_forceStartingStyle({ nodeId: node.id, forced });
+        this.dispatchEventToListeners(Events.StartingStylesStateForced, node);
+        return true;
+    }
     forcePseudoState(node, pseudoClass, enable) {
         const forcedPseudoClasses = node.marker(PseudoStateMarker) || [];
         const hasPseudoClass = forcedPseudoClasses.includes(pseudoClass);
@@ -781,6 +786,7 @@ export var Events;
     Events["ModelWasEnabled"] = "ModelWasEnabled";
     Events["ModelDisposed"] = "ModelDisposed";
     Events["PseudoStateForced"] = "PseudoStateForced";
+    Events["StartingStylesStateForced"] = "StartingStylesStateForced";
     Events["StyleSheetAdded"] = "StyleSheetAdded";
     Events["StyleSheetChanged"] = "StyleSheetChanged";
     Events["StyleSheetRemoved"] = "StyleSheetRemoved";

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSProperty.js

@@ -20,9 +20,9 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper {
     implicit;
     text;
     range;
-    #active;
-    #nameRange;
-    #valueRange;
+    #active = true;
+    #nameRange = null;
+    #valueRange = null;
     #invalidString;
     #longhandProperties = [];
     constructor(ownerStyle, index, name, value, important, disabled, parsedOk, implicit, text, range, longhandProperties) {
@@ -37,9 +37,6 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper {
         this.implicit = implicit; // A longhand, implicitly set by missing values of shorthand.
         this.text = text;
         this.range = range ? TextUtils.TextRange.TextRange.fromObject(range) : null;
-        this.#active = true;
-        this.#nameRange = null;
-        this.#valueRange = null;
         if (longhandProperties && longhandProperties.length > 0) {
             for (const property of longhandProperties) {
                 this.#longhandProperties.push(new CSSProperty(ownerStyle, ++index, property.name, property.value, important, disabled, parsedOk, true));
@@ -234,7 +231,7 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper {
             }
             if (cssMetadata().isGridAreaDefiningProperty(propertyName)) {
                 const rowResult = GridAreaRowRegex.exec(token);
-                if (rowResult && rowResult.index === 0 && !propertyText.trimEnd().endsWith(']')) {
+                if (rowResult?.index === 0 && !propertyText.trimEnd().endsWith(']')) {
                     propertyText = propertyText.trimEnd() + '\n' + doubleIndent;
                 }
             }

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSPropertyParser.js

@@ -246,11 +246,11 @@ class ComputedTextChunk {
         }
         return this.#cachedComputedText;
     }
-    // If the match is top-level, i.e. is an outermost subexpression in the property value, count the number of outermost
-    // subexpressions after applying any potential substitutions.
+    // If the match is top-level, i.e. is an outermost sub-expression in the property value, count the number of outermost
+    // sub-expressions after applying any potential substitutions.
     get topLevelValueCount() {
         if (this.match.node.parent?.name !== 'Declaration') {
-            // Not a top-level matchh.
+            // Not a top-level match.
             return 0;
         }
         const computedText = this.computedText;
@@ -268,12 +268,14 @@ class ComputedTextChunk {
         return this.#topLevelValueCount;
     }
 }
-// This class constructs the "computed" text from the input property text, i.e., it will strip comments and substitute
-// var() functions if possible. It's intended for use during the bottom-up tree matching process. The original text is
-// not modified. Instead, computed text slices are produced on the fly. During bottom-up matching, the sequence of
-// top-level comments and var() matches will be recorded. This produces an ordered sequence of text pieces that need to
-// be substituted into the original text. When a computed text slice is requested, it is generated by piecing together
-// original and computed slices as required.
+/**
+ * This class constructs the "computed" text from the input property text, i.e., it will strip comments and substitute
+ * var() functions if possible. It's intended for use during the bottom-up tree matching process. The original text is
+ * not modified. Instead, computed text slices are produced on the fly. During bottom-up matching, the sequence of
+ * top-level comments and var() matches will be recorded. This produces an ordered sequence of text pieces that need to
+ * be substituted into the original text. When a computed text slice is requested, it is generated by piecing together
+ * original and computed slices as required.
+ **/
 export class ComputedText {
     #chunks = [];
     text;

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSPropertyParserMatchers.js

@@ -1,7 +1,7 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
+/* eslint-disable @devtools/no-imperative-dom-api */
 import * as Common from '../../core/common/common.js';
 import { CSSMetadata, cssMetadata, CubicBezierKeywordValues, } from './CSSMetadata.js';
 import { ASTUtils, matchDeclaration, matcherBase, tokenizeDeclaration } from './CSSPropertyParser.js';
@@ -141,22 +141,26 @@ function getCssEvaluationElement() {
     }
     return cssEvaluationElement;
 }
-// These functions use an element in the frontend to evaluate CSS. The advantage
-// of this is that it is synchronous and doesn't require a CDP method. The
-// disadvantage is it lacks context that would allow substitutions such as
-// `var()` and `calc()` to be resolved correctly, and if the user is doing
-// remote debugging there is a possibility that the CSS behavior is different
-// between the two browser versions. We use it for type checking after
-// substitutions (but not for actual evaluation) and for applying units.
+/**
+ * These functions use an element in the frontend to evaluate CSS. The advantage
+ * of this is that it is synchronous and doesn't require a CDP method. The
+ * disadvantage is it lacks context that would allow substitutions such as
+ * `var()` and `calc()` to be resolved correctly, and if the user is doing
+ * remote debugging there is a possibility that the CSS behavior is different
+ * between the two browser versions. We use it for type checking after
+ * substitutions (but not for actual evaluation) and for applying units.
+ **/
 export function localEvalCSS(value, type) {
     const element = getCssEvaluationElement();
     element.setAttribute('data-value', value);
     element.setAttribute('data-custom-expr', `attr(data-value ${type})`);
     return element.computedStyleMap().get('--evaluation')?.toString() ?? null;
 }
-// It is important to establish whether a type is valid, because if it is not,
-// the current behavior of blink is to ignore the fallback and parse as a
-// raw string, returning '' if the attribute is not set.
+/**
+ * It is important to establish whether a type is valid, because if it is not,
+ * the current behavior of blink is to ignore the fallback and parse as a
+ * raw string, returning '' if the attribute is not set.
+ **/
 export function isValidCSSType(type) {
     const element = getCssEvaluationElement();
     element.setAttribute('data-custom-expr', `attr(data-nonexistent ${type}, "good")`);
@@ -989,21 +993,22 @@ export class CustomFunctionMatcher extends matcherBase(CustomFunctionMatch) {
         return new CustomFunctionMatch(text, node, callee, args);
     }
 }
-export class FlexGridMatch {
+export class FlexGridGridLanesMatch {
     text;
     node;
-    isFlex;
-    constructor(text, node, isFlex) {
+    layoutType;
+    constructor(text, node, layoutType) {
         this.text = text;
         this.node = node;
-        this.isFlex = isFlex;
+        this.layoutType = layoutType;
     }
 }
 // clang-format off
-export class FlexGridMatcher extends matcherBase(FlexGridMatch) {
+export class FlexGridGridLanesMatcher extends matcherBase(FlexGridGridLanesMatch) {
     // clang-format on
     static FLEX = ['flex', 'inline-flex', 'block flex', 'inline flex'];
     static GRID = ['grid', 'inline-grid', 'block grid', 'inline grid'];
+    static GRID_LANES = ['grid-lanes', 'inline-grid-lanes', 'block grid-lanes', 'inline grid-lanes'];
     accepts(propertyName) {
         return propertyName === 'display';
     }
@@ -1019,11 +1024,14 @@ export class FlexGridMatcher extends matcherBase(FlexGridMatch) {
             .map(node => matching.getComputedText(node).trim())
             .filter(value => value);
         const text = values.join(' ');
-        if (FlexGridMatcher.FLEX.includes(text)) {
-            return new FlexGridMatch(matching.ast.text(node), node, true);
+        if (FlexGridGridLanesMatcher.FLEX.includes(text)) {
+            return new FlexGridGridLanesMatch(matching.ast.text(node), node, "flex" /* LayoutType.FLEX */);
         }
-        if (FlexGridMatcher.GRID.includes(text)) {
-            return new FlexGridMatch(matching.ast.text(node), node, false);
+        if (FlexGridGridLanesMatcher.GRID.includes(text)) {
+            return new FlexGridGridLanesMatch(matching.ast.text(node), node, "grid" /* LayoutType.GRID */);
+        }
+        if (FlexGridGridLanesMatcher.GRID_LANES.includes(text)) {
+            return new FlexGridGridLanesMatch(matching.ast.text(node), node, "grid-lanes" /* LayoutType.GRID_LANES */);
         }
         return null;
     }
@@ -1061,8 +1069,10 @@ export class GridTemplateMatcher extends matcherBase(GridTemplateMatch) {
         // `needClosingLineNames` tracks if the current row can still consume an optional LineNames,
         // which will decide if we should start a new line or not when a LineNames is encountered.
         let needClosingLineNames = false;
-        // Gather row definitions of [<line-names>? <string> <track-size>? <line-names>?], which
-        // be rendered into separate lines.
+        /**
+         * Gather row definitions of [<line-names>? <string> <track-size>? <line-names>?], which
+         * be rendered into separate lines.
+         **/
         function parseNodes(nodes, varParsingMode = false) {
             for (const curNode of nodes) {
                 if (matching.getMatch(curNode) instanceof BaseVariableMatch) {
@@ -1159,7 +1169,7 @@ export class AnchorFunctionMatcher extends matcherBase(AnchorFunctionMatch) {
         if (node.name === 'VariableName') {
             // Double-dashed anchor reference to be rendered with a link to its matching anchor.
             let parent = node.parent;
-            if (!parent || parent.name !== 'ArgList') {
+            if (parent?.name !== 'ArgList') {
                 return null;
             }
             parent = parent.parent;
@@ -1184,7 +1194,7 @@ export class AnchorFunctionMatcher extends matcherBase(AnchorFunctionMatch) {
         return new AnchorFunctionMatch(matching.ast.text(node), node, calleeText);
     }
 }
-// For linking `position-anchor: --anchor-name`.
+/** For linking `position-anchor: --anchor-name`. **/
 export class PositionAnchorMatch {
     text;
     matching;

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSRule.js

@@ -7,6 +7,7 @@ import { CSSContainerQuery } from './CSSContainerQuery.js';
 import { CSSLayer } from './CSSLayer.js';
 import { CSSMedia } from './CSSMedia.js';
 import { CSSScope } from './CSSScope.js';
+import { CSSStartingStyle } from './CSSStartingStyle.js';
 import { CSSStyleDeclaration, Type } from './CSSStyleDeclaration.js';
 import { CSSSupports } from './CSSSupports.js';
 function styleSheetHeaderForRule(cssModel, { styleSheetId }) {
@@ -17,10 +18,12 @@ export class CSSRule {
     origin;
     style;
     header;
+    treeScope;
     constructor(cssModel, payload) {
         this.header = payload.header;
         this.cssModelInternal = cssModel;
         this.origin = payload.origin;
+        this.treeScope = payload.originTreeScopeNodeId;
         this.style = new CSSStyleDeclaration(this.cssModelInternal, this, payload.style, Type.Regular);
     }
     get sourceURL() {
@@ -83,9 +86,15 @@ export class CSSStyleRule extends CSSRule {
     scopes;
     layers;
     ruleTypes;
+    startingStyles;
     wasUsed;
     constructor(cssModel, payload, wasUsed) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: payload.originTreeScopeNodeId
+        });
         this.reinitializeSelectors(payload.selectorList);
         this.nestingSelectors = payload.nestingSelectors;
         this.media = payload.media ? CSSMedia.parseMediaArrayPayload(cssModel, payload.media) : [];
@@ -95,6 +104,8 @@ export class CSSStyleRule extends CSSRule {
         this.scopes = payload.scopes ? CSSScope.parseScopesPayload(cssModel, payload.scopes) : [];
         this.supports = payload.supports ? CSSSupports.parseSupportsPayload(cssModel, payload.supports) : [];
         this.layers = payload.layers ? CSSLayer.parseLayerPayload(cssModel, payload.layers) : [];
+        this.startingStyles =
+            payload.startingStyles ? CSSStartingStyle.parseStartingStylePayload(cssModel, payload.startingStyles) : [];
         this.ruleTypes = payload.ruleTypes || [];
         this.wasUsed = wasUsed || false;
     }
@@ -184,7 +195,12 @@ export class CSSStyleRule extends CSSRule {
 export class CSSPropertyRule extends CSSRule {
     #name;
     constructor(cssModel, payload) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined,
+        });
         this.#name = new CSSValue(payload.propertyName);
     }
     propertyName() {
@@ -211,14 +227,29 @@ export class CSSPropertyRule extends CSSRule {
         return this.cssModelInternal.setPropertyRulePropertyName(styleSheetId, range, newPropertyName);
     }
 }
-export class CSSFontPaletteValuesRule extends CSSRule {
-    #paletteName;
+export class CSSAtRule extends CSSRule {
+    #name;
+    #type;
+    #subsection;
     constructor(cssModel, payload) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
-        this.#paletteName = new CSSValue(payload.fontPaletteName);
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined
+        });
+        this.#name = payload.name ? new CSSValue(payload.name) : null;
+        this.#type = payload.type;
+        this.#subsection = payload.subsection ?? null;
     }
     name() {
-        return this.#paletteName;
+        return this.#name;
+    }
+    type() {
+        return this.#type;
+    }
+    subsection() {
+        return this.#subsection;
     }
 }
 export class CSSKeyframesRule {
@@ -240,7 +271,12 @@ export class CSSKeyframeRule extends CSSRule {
     #keyText;
     #parentRuleName;
     constructor(cssModel, payload, parentRuleName) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined
+        });
         this.reinitializeKey(payload.keyText);
         this.#parentRuleName = parentRuleName;
     }
@@ -284,7 +320,12 @@ export class CSSPositionTryRule extends CSSRule {
     #name;
     #active;
     constructor(cssModel, payload) {
-        super(cssModel, { origin: payload.origin, style: payload.style, header: styleSheetHeaderForRule(cssModel, payload) });
+        super(cssModel, {
+            origin: payload.origin,
+            style: payload.style,
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined
+        });
         this.#name = new CSSValue(payload.name);
         this.#active = payload.active;
     }
@@ -303,7 +344,8 @@ export class CSSFunctionRule extends CSSRule {
         super(cssModel, {
             origin: payload.origin,
             style: { cssProperties: [], shorthandEntries: [] },
-            header: styleSheetHeaderForRule(cssModel, payload)
+            header: styleSheetHeaderForRule(cssModel, payload),
+            originTreeScopeNodeId: undefined
         });
         this.#name = new CSSValue(payload.name);
         this.#parameters = payload.parameters.map(({ name }) => name);

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/CSSStartingStyle.js

@@ -0,0 +1,21 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import { CSSQuery } from './CSSQuery.js';
+export class CSSStartingStyle extends CSSQuery {
+    static parseStartingStylePayload(cssModel, payload) {
+        return payload.map(p => new CSSStartingStyle(cssModel, p));
+    }
+    constructor(cssModel, payload) {
+        super(cssModel);
+        this.reinitialize(payload);
+    }
+    reinitialize(payload) {
+        this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+        this.styleSheetId = payload.styleSheetId;
+    }
+    active() {
+        return true;
+    }
+}