@mcp-b/chrome-devtools-mcp 1.7.0 → 1.7.2

package/build/vendor/chrome-devtools-frontend/front_end/core/sdk/AnimationModel.js

@@ -362,10 +362,6 @@ export class AnimationModel extends SDKModel {
         this.playbackRate = playbackRate;
         void this.agent.invoke_setPlaybackRate({ playbackRate });
     }
-    async releaseAllAnimations() {
-        const animationIds = [...this.animationGroups.values()].flatMap(animationGroup => animationGroup.animations().map(animation => animation.id()));
-        await this.agent.invoke_releaseAnimations({ animations: animationIds });
-    }
     releaseAnimations(animations) {
         void this.agent.invoke_releaseAnimations({ animations });
     }

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

@@ -474,10 +474,10 @@ export class CSSMatchedStyles {
         // Now that we've built the arrays of NodeCascades for each pseudo type, convert them into
         // DOMInheritanceCascades.
         for (const [pseudoType, nodeCascade] of pseudoCascades.entries()) {
-            pseudoInheritanceCascades.set(pseudoType, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties));
+            pseudoInheritanceCascades.set(pseudoType, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties, this.#mainDOMCascade));
         }
         for (const [highlightName, nodeCascade] of customHighlightPseudoCascades.entries()) {
-            customHighlightPseudoInheritanceCascades.set(highlightName, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties));
+            customHighlightPseudoInheritanceCascades.set(highlightName, new DOMInheritanceCascade(this, nodeCascade, this.#registeredProperties, this.#mainDOMCascade));
         }
         return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
     }
@@ -685,6 +685,10 @@ export class CSSMatchedStyles {
         const domCascade = this.#styleToDOMCascade.get(property.ownerStyle);
         return domCascade ? domCascade.propertyState(property) : null;
     }
+    isPropertyOverriddenByAnimation(property) {
+        const domCascade = this.#styleToDOMCascade.get(property.ownerStyle);
+        return domCascade?.isPropertyOverriddenByAnimation(property) ?? false;
+    }
     resetActiveProperties() {
         Platform.assertNotNullOrUndefined(this.#mainDOMCascade);
         Platform.assertNotNullOrUndefined(this.#pseudoDOMCascades);
@@ -730,22 +734,24 @@ export class CSSMatchedStyles {
     }
 }
 class NodeCascade {
+    isHighlightPseudoCascade;
     #matchedStyles;
     styles;
     #isInherited;
-    #isHighlightPseudoCascade;
     propertiesState = new Map();
+    propertiesOverriddenByAnimation = new Set();
     activeProperties = new Map();
     #node;
     constructor(matchedStyles, styles, node, isInherited, isHighlightPseudoCascade = false) {
+        this.isHighlightPseudoCascade = isHighlightPseudoCascade;
         this.#matchedStyles = matchedStyles;
         this.styles = styles;
         this.#isInherited = isInherited;
-        this.#isHighlightPseudoCascade = isHighlightPseudoCascade;
         this.#node = node;
     }
     computeActiveProperties() {
         this.propertiesState.clear();
+        this.propertiesOverriddenByAnimation.clear();
         this.activeProperties.clear();
         for (let i = this.styles.length - 1; i >= 0; i--) {
             const style = this.styles[i];
@@ -760,9 +766,17 @@ class NodeCascade {
             for (const property of style.allProperties()) {
                 // Do not pick non-inherited properties from inherited styles.
                 const metadata = cssMetadata();
-                // All properties are inherited for highlight pseudos.
-                if (this.#isInherited && !this.#isHighlightPseudoCascade && !metadata.isPropertyInherited(property.name)) {
-                    continue;
+                if (this.#isInherited) {
+                    if (this.isHighlightPseudoCascade) {
+                        // All properties are inherited for highlight pseudos, but custom
+                        // variables do not come from the inherited pseudo elements.
+                        if (property.name.startsWith('--')) {
+                            continue;
+                        }
+                    }
+                    else if (!metadata.isPropertyInherited(property.name)) {
+                        continue;
+                    }
                 }
                 // When a property does not have a range in an otherwise ranged CSSStyleDeclaration,
                 // we consider it as a non-leading property (see computeLeadingProperties()), and most
@@ -833,6 +847,10 @@ class NodeCascade {
         }
         if (activeProperty) {
             this.propertiesState.set(activeProperty, "Overloaded" /* PropertyState.OVERLOADED */);
+            if (propertyWithHigherSpecificity.ownerStyle.type === Type.Animation ||
+                propertyWithHigherSpecificity.ownerStyle.type === Type.Transition) {
+                this.propertiesOverriddenByAnimation.add(activeProperty);
+            }
         }
         this.propertiesState.set(propertyWithHigherSpecificity, "Active" /* PropertyState.ACTIVE */);
         this.activeProperties.set(canonicalName, propertyWithHigherSpecificity);
@@ -913,6 +931,7 @@ function* forEach(array, startAfter) {
 }
 class DOMInheritanceCascade {
     #propertiesState = new Map();
+    #propertiesOverriddenByAnimation = new Set();
     #availableCSSVariables = new Map();
     #computedCSSVariables = new Map();
     #styleToNodeCascade = new Map();
@@ -920,13 +939,24 @@ class DOMInheritanceCascade {
     #nodeCascades;
     #registeredProperties;
     #matchedStyles;
-    constructor(matchedStyles, nodeCascades, registeredProperties) {
+    #fallbackCascade = null;
+    #styles = [];
+    constructor(matchedStyles, nodeCascades, registeredProperties, fallbackCascade = null) {
         this.#nodeCascades = nodeCascades;
         this.#matchedStyles = matchedStyles;
         this.#registeredProperties = registeredProperties;
+        this.#fallbackCascade = fallbackCascade;
         for (const nodeCascade of nodeCascades) {
             for (const style of nodeCascade.styles) {
                 this.#styleToNodeCascade.set(style, nodeCascade);
+                this.#styles.push(style);
+            }
+        }
+        if (fallbackCascade) {
+            for (const [style, nodeCascade] of fallbackCascade.#styleToNodeCascade) {
+                if (!this.#styles.includes(style)) {
+                    this.#styleToNodeCascade.set(style, nodeCascade);
+                }
             }
         }
     }
@@ -981,6 +1011,9 @@ class DOMInheritanceCascade {
                 }
             }
         }
+        if (this.#fallbackCascade && (!nodeCascade.isHighlightPseudoCascade || property.name.startsWith('--'))) {
+            return this.#fallbackCascade.resolveProperty(property.name, property.ownerStyle);
+        }
         return null;
     }
     #findPropertyInParentCascadeIfInherited(property) {
@@ -1224,15 +1257,20 @@ class DOMInheritanceCascade {
         }
     }
     styles() {
-        return Array.from(this.#styleToNodeCascade.keys());
+        return this.#styles;
     }
     propertyState(property) {
         this.ensureInitialized();
         return this.#propertiesState.get(property) || null;
     }
+    isPropertyOverriddenByAnimation(property) {
+        this.ensureInitialized();
+        return this.#propertiesOverriddenByAnimation.has(property);
+    }
     reset() {
         this.#initialized = false;
         this.#propertiesState.clear();
+        this.#propertiesOverriddenByAnimation.clear();
         this.#availableCSSVariables.clear();
         this.#computedCSSVariables.clear();
     }
@@ -1247,11 +1285,20 @@ class DOMInheritanceCascade {
             for (const [property, state] of nodeCascade.propertiesState) {
                 if (state === "Overloaded" /* PropertyState.OVERLOADED */) {
                     this.#propertiesState.set(property, "Overloaded" /* PropertyState.OVERLOADED */);
+                    if (nodeCascade.propertiesOverriddenByAnimation.has(property)) {
+                        this.#propertiesOverriddenByAnimation.add(property);
+                    }
                     continue;
                 }
                 const canonicalName = cssMetadata().canonicalPropertyName(property.name);
                 if (activeProperties.has(canonicalName)) {
                     this.#propertiesState.set(property, "Overloaded" /* PropertyState.OVERLOADED */);
+                    const activeProperty = activeProperties.get(canonicalName);
+                    if (activeProperty &&
+                        (activeProperty.ownerStyle.type === Type.Animation ||
+                            activeProperty.ownerStyle.type === Type.Transition)) {
+                        this.#propertiesOverriddenByAnimation.add(property);
+                    }
                     continue;
                 }
                 activeProperties.set(canonicalName, property);
@@ -1289,6 +1336,19 @@ class DOMInheritanceCascade {
             const initialValue = rule.initialValue();
             accumulatedCSSVariables.set(rule.propertyName(), initialValue !== null ? { value: initialValue, declaration: new CSSValueSource(rule) } : null);
         }
+        if (this.#fallbackCascade) {
+            this.#fallbackCascade.ensureInitialized();
+            for (const [cascade, available] of this.#fallbackCascade.#availableCSSVariables) {
+                this.#availableCSSVariables.set(cascade, available);
+            }
+            for (const [cascade, computed] of this.#fallbackCascade.#computedCSSVariables) {
+                this.#computedCSSVariables.set(cascade, computed);
+            }
+            for (const [key, value] of this.#fallbackCascade.#availableCSSVariables.get(this.#fallbackCascade.#nodeCascades[0]) ??
+                []) {
+                accumulatedCSSVariables.set(key, value);
+            }
+        }
         for (let i = this.#nodeCascades.length - 1; i >= 0; --i) {
             const nodeCascade = this.#nodeCascades[i];
             const variableNames = [];

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

@@ -526,7 +526,7 @@ const extraPropertyValues = new Map([
     ['background-repeat', new Set(['repeat', 'repeat-x', 'repeat-y', 'no-repeat', 'space', 'round'])],
     ['content', new Set(['normal', 'close-quote', 'no-close-quote', 'no-open-quote', 'open-quote'])],
     ['baseline-shift', new Set(['baseline'])],
-    ['max-height', new Set(['min-content', 'max-content', '-webkit-fill-available', 'fit-content'])],
+    ['max-height', new Set(['min-content', 'max-content', '-webkit-fill-available', 'fit-content', 'stretch'])],
     ['color', new Set(['black'])],
     ['background-color', new Set(['white'])],
     ['box-shadow', new Set(['inset'])],
@@ -600,7 +600,7 @@ const extraPropertyValues = new Map([
         ]),
     ],
     ['zoom', new Set(['normal'])],
-    ['max-width', new Set(['min-content', 'max-content', '-webkit-fill-available', 'fit-content'])],
+    ['max-width', new Set(['min-content', 'max-content', '-webkit-fill-available', 'fit-content', 'stretch'])],
     ['-webkit-font-smoothing', new Set(['antialiased', 'subpixel-antialiased'])],
     [
         'border',
@@ -991,7 +991,7 @@ const extraPropertyValues = new Map([
         ]),
     ],
     ['flex-flow', new Set(['nowrap', 'row', 'row-reverse', 'column', 'column-reverse', 'wrap', 'wrap-reverse'])],
-    ['height', new Set(['-webkit-fill-available'])],
+    ['height', new Set(['-webkit-fill-available', 'stretch'])],
     ['inline-size', new Set(['-webkit-fill-available', 'min-content', 'max-content', 'fit-content'])],
     [
         'list-style',
@@ -1058,9 +1058,9 @@ const extraPropertyValues = new Map([
     ['max-block-size', new Set(['-webkit-fill-available', 'min-content', 'max-content', 'fit-content'])],
     ['max-inline-size', new Set(['-webkit-fill-available', 'min-content', 'max-content', 'fit-content'])],
     ['min-block-size', new Set(['-webkit-fill-available', 'min-content', 'max-content', 'fit-content'])],
-    ['min-height', new Set(['-webkit-fill-available', 'min-content', 'max-content', 'fit-content'])],
+    ['min-height', new Set(['-webkit-fill-available', 'min-content', 'max-content', 'fit-content', 'stretch'])],
     ['min-inline-size', new Set(['-webkit-fill-available', 'min-content', 'max-content', 'fit-content'])],
-    ['min-width', new Set(['-webkit-fill-available', 'min-content', 'max-content', 'fit-content'])],
+    ['min-width', new Set(['-webkit-fill-available', 'min-content', 'max-content', 'fit-content', 'stretch'])],
     ['object-position', new Set(['top', 'bottom', 'left', 'right', 'center'])],
     ['shape-outside', new Set(['border-box', 'content-box', 'padding-box', 'margin-box'])],
     [
@@ -1222,7 +1222,7 @@ const extraPropertyValues = new Map([
     ['-webkit-text-stroke-width', new Set(['medium', 'thick', 'thin'])],
     ['-webkit-transform-origin-x', new Set(['left', 'right', 'center'])],
     ['-webkit-transform-origin-y', new Set(['top', 'bottom', 'center'])],
-    ['width', new Set(['-webkit-fill-available'])],
+    ['width', new Set(['-webkit-fill-available', 'stretch'])],
     ['contain-intrinsic-width', new Set(['auto none', 'auto 100px'])],
     ['contain-intrinsic-height', new Set(['auto none', 'auto 100px'])],
     ['contain-intrinsic-size', new Set(['auto none', 'auto 100px'])],

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

@@ -296,6 +296,12 @@ export class CSSModel extends SDKModel {
         }
         return await this.#styleLoader.computedStylePromise(nodeId);
     }
+    async getComputedStyleExtraFields(nodeId) {
+        if (!this.isEnabled()) {
+            await this.enable();
+        }
+        return await this.#styleLoader.extraFieldsPromise(nodeId);
+    }
     async getLayoutPropertiesFromComputedStyle(nodeId) {
         const styles = await this.getComputedStyle(nodeId);
         if (!styles) {
@@ -317,7 +323,7 @@ export class CSSModel extends SDKModel {
             isGrid,
             isSubgrid,
             isGridLanes,
-            isContainer,
+            containerType: isContainer ? containerType : undefined,
             hasScroll,
         };
     }
@@ -858,25 +864,34 @@ class ComputedStyleLoader {
     constructor(cssModel) {
         this.#cssModel = cssModel;
     }
-    computedStylePromise(nodeId) {
+    #getResponsePromise(nodeId) {
         let promise = this.#nodeIdToPromise.get(nodeId);
         if (promise) {
             return promise;
         }
-        promise = this.#cssModel.getAgent().invoke_getComputedStyleForNode({ nodeId }).then(({ computedStyle }) => {
-            this.#nodeIdToPromise.delete(nodeId);
-            if (!computedStyle?.length) {
-                return null;
-            }
-            const result = new Map();
-            for (const property of computedStyle) {
-                result.set(property.name, property.value);
-            }
-            return result;
-        });
+        promise =
+            this.#cssModel.getAgent().invoke_getComputedStyleForNode({ nodeId }).then(({ computedStyle, extraFields }) => {
+                this.#nodeIdToPromise.delete(nodeId);
+                if (!computedStyle?.length) {
+                    return { style: null, extraFields };
+                }
+                const result = new Map();
+                for (const property of computedStyle) {
+                    result.set(property.name, property.value);
+                }
+                return { style: result, extraFields };
+            });
         this.#nodeIdToPromise.set(nodeId, promise);
         return promise;
     }
+    async computedStylePromise(nodeId) {
+        const computedStyleWithExtraFields = await this.#getResponsePromise(nodeId);
+        return computedStyleWithExtraFields.style;
+    }
+    async extraFieldsPromise(nodeId) {
+        const computedStyleWithExtraFields = await this.#getResponsePromise(nodeId);
+        return computedStyleWithExtraFields.extraFields;
+    }
 }
 export class InlineStyleResult {
     inlineStyle;

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

@@ -77,7 +77,7 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper {
     #matchers(matchedStyles, computedStyles) {
         const matchers = matchedStyles.propertyMatchers(this.ownerStyle, computedStyles);
         matchers.push(new CSSWideKeywordMatcher(this, matchedStyles));
-        if (Root.Runtime.experiments.isEnabled('font-editor')) {
+        if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR)) {
             matchers.push(new FontMatcher());
         }
         return matchers;

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

@@ -926,6 +926,9 @@ export class MathFunctionMatch extends BaseFunctionMatch {
             case "calc" /* ArithmeticFunction.CALC */:
             case "sibling-count" /* ArithmeticFunction.SIBLING_COUNT */:
             case "sibling-index" /* ArithmeticFunction.SIBLING_INDEX */:
+            case "round" /* ArithmeticFunction.ROUND */:
+            case "mod" /* ArithmeticFunction.MOD */:
+            case "rem" /* ArithmeticFunction.REM */:
                 return true;
         }
         // This assignment catches missed values in the switch above.
@@ -946,6 +949,9 @@ export class MathFunctionMatcher extends matcherBase(MathFunctionMatch) {
             case "calc" /* ArithmeticFunction.CALC */:
             case "sibling-count" /* ArithmeticFunction.SIBLING_COUNT */:
             case "sibling-index" /* ArithmeticFunction.SIBLING_INDEX */:
+            case "round" /* ArithmeticFunction.ROUND */:
+            case "mod" /* ArithmeticFunction.MOD */:
+            case "rem" /* ArithmeticFunction.REM */:
                 return maybeFunc;
         }
         // This assignment catches missed values in the switch above.

package/build/vendor/chrome-devtools-frontend/front_end/core/sdk/ConsoleModel.js

@@ -433,7 +433,6 @@ export class ConsoleMessage {
     #exceptionId = undefined;
     #affectedResources;
     category;
-    isCookieReportIssue = false;
     /**
      * The parent frame of the `console.log` call of logpoints or conditional breakpoints
      * if they called `console.*` explicitly. The parent frame is where V8 paused
@@ -460,7 +459,6 @@ export class ConsoleMessage {
         this.workerId = details?.workerId;
         this.#affectedResources = details?.affectedResources;
         this.category = details?.category;
-        this.isCookieReportIssue = Boolean(details?.isCookieReportIssue);
         if (!this.#executionContextId && this.#runtimeModel) {
             if (this.scriptId) {
                 this.#executionContextId = this.#runtimeModel.executionContextIdForScriptId(this.scriptId);

package/build/vendor/chrome-devtools-frontend/front_end/core/sdk/CookieModel.js

@@ -84,7 +84,7 @@ export class CookieModel extends SDKModel {
         if (cookie.expires()) {
             expires = Math.floor(Date.parse(`${cookie.expires()}`) / 1000);
         }
-        const enabled = Root.Runtime.experiments.isEnabled('experimental-cookie-features');
+        const enabled = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.EXPERIMENTAL_COOKIE_FEATURES);
         const preserveUnset = (scheme) => scheme === "Unset" /* Protocol.Network.CookieSourceScheme.Unset */ ? scheme : undefined;
         const protocolCookie = {
             name: cookie.name(),