chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -3,21 +3,53 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as i18n from '../i18n/i18n.js';
 
 import {EmulationModel} from './EmulationModel.js';
 import {type SDKModelObserver, TargetManager} from './TargetManager.js';
 
+const UIStrings = {
+  /**
+   * @description Text label for a menu item indicating that no throttling is applied.
+   */
+  noThrottling: 'No throttling',
+  /**
+   * @description Text label for a menu item indicating that a specific slowdown multiplier is applied.
+   * @example {2} PH1
+   */
+  dSlowdown: '{PH1}× slowdown',
+  /**
+   * @description Text label for a menu item indicating an average mobile device.
+   */
+  calibratedMidTierMobile: 'Mid-tier mobile',
+  /**
+   * @description Text label for a menu item indicating a below-average mobile device.
+   */
+  calibratedLowTierMobile: 'Low-tier mobile',
+  /**
+   * @description Text label indicating why an option is not available, because the user's device is not fast enough to emulate a device.
+   */
+  calibrationErrorDeviceTooWeak: 'Device is not powerful enough',
+};
+const str_ = i18n.i18n.registerUIStrings('core/sdk/CPUThrottlingManager.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
 let throttlingManagerInstance: CPUThrottlingManager;
 
 export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     SDKModelObserver<EmulationModel> {
-  #cpuThrottlingRateInternal: number;
+  #cpuThrottlingOptionInternal: CPUThrottlingOption;
+  #calibratedThrottlingSetting: Common.Settings.Setting<CalibratedCPUThrottling>;
   #hardwareConcurrencyInternal?: number;
   #pendingMainTargetPromise?: (r: number) => void;
 
   private constructor() {
     super();
-    this.#cpuThrottlingRateInternal = CPUThrottlingRates.NO_THROTTLING;
+    this.#cpuThrottlingOptionInternal = NoThrottlingOption;
+    this.#calibratedThrottlingSetting = Common.Settings.Settings.instance().createSetting<CalibratedCPUThrottling>(
+        'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
+    this.#calibratedThrottlingSetting.addChangeListener(this.#onCalibratedSettingChanged, this);
     TargetManager.instance().observeModels(EmulationModel, this);
   }
 
@@ -31,19 +63,43 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   cpuThrottlingRate(): number {
-    return this.#cpuThrottlingRateInternal;
+    return this.#cpuThrottlingOptionInternal.rate();
+  }
+
+  cpuThrottlingOption(): CPUThrottlingOption {
+    return this.#cpuThrottlingOptionInternal;
+  }
+
+  #onCalibratedSettingChanged(): void {
+    // If a calibrated option is selected, need to propagate new rate.
+    const currentOption = this.#cpuThrottlingOptionInternal;
+    if (!currentOption.calibratedDeviceType) {
+      return;
+    }
+
+    const rate = this.#cpuThrottlingOptionInternal.rate();
+    if (rate === 0) {
+      // This calibrated option is no longer valid.
+      this.setCPUThrottlingOption(NoThrottlingOption);
+      return;
+    }
+
+    for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
+      void emulationModel.setCPUThrottlingRate(rate);
+    }
+    this.dispatchEventToListeners(Events.RATE_CHANGED, rate);
   }
 
-  setCPUThrottlingRate(rate: number): void {
-    if (rate === this.#cpuThrottlingRateInternal) {
+  setCPUThrottlingOption(option: CPUThrottlingOption): void {
+    if (option === this.#cpuThrottlingOptionInternal) {
       return;
     }
 
-    this.#cpuThrottlingRateInternal = rate;
+    this.#cpuThrottlingOptionInternal = option;
     for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
-      void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingRateInternal);
+      void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingOptionInternal.rate());
     }
-    this.dispatchEventToListeners(Events.RATE_CHANGED, this.#cpuThrottlingRateInternal);
+    this.dispatchEventToListeners(Events.RATE_CHANGED, this.#cpuThrottlingOptionInternal.rate());
   }
 
   setHardwareConcurrency(concurrency: number): void {
@@ -98,8 +154,8 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   modelAdded(emulationModel: EmulationModel): void {
-    if (this.#cpuThrottlingRateInternal !== CPUThrottlingRates.NO_THROTTLING) {
-      void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingRateInternal);
+    if (this.#cpuThrottlingOptionInternal !== NoThrottlingOption) {
+      void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingOptionInternal.rate());
     }
     if (this.#hardwareConcurrencyInternal !== undefined) {
       void emulationModel.setHardwareConcurrency(this.#hardwareConcurrencyInternal);
@@ -123,10 +179,10 @@ export const enum Events {
   HARDWARE_CONCURRENCY_CHANGED = 'HardwareConcurrencyChanged',
 }
 
-export type EventTypes = {
-  [Events.RATE_CHANGED]: number,
-  [Events.HARDWARE_CONCURRENCY_CHANGED]: number,
-};
+export interface EventTypes {
+  [Events.RATE_CHANGED]: number;
+  [Events.HARDWARE_CONCURRENCY_CHANGED]: number;
+}
 
 export function throttlingManager(): CPUThrottlingManager {
   return CPUThrottlingManager.instance();
@@ -134,9 +190,93 @@ export function throttlingManager(): CPUThrottlingManager {
 
 export enum CPUThrottlingRates {
   NO_THROTTLING = 1,
+  MID_TIER_MOBILE = 4,
+  LOW_TIER_MOBILE = 6,
+  EXTRA_SLOW = 20,
+
   // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
-  MidTierMobile = 4,
+  MidTierMobile = MID_TIER_MOBILE,
   // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
-  LowEndMobile = 6,
-  EXTRA_SLOW = 20,
+  LowEndMobile = LOW_TIER_MOBILE,
+}
+
+export type CalibratedDeviceType = 'low-tier-mobile'|'mid-tier-mobile';
+
+export interface CPUThrottlingOption {
+  title: () => string;
+  rate: () => number;
+  calibratedDeviceType?: CalibratedDeviceType;
+  jslogContext: string;
+}
+
+function makeFixedPresetThrottlingOption(rate: CPUThrottlingRates): CPUThrottlingOption {
+  return {
+    title: rate === 1 ? i18nLazyString(UIStrings.noThrottling) : i18nLazyString(UIStrings.dSlowdown, {PH1: rate}),
+    rate: () => rate,
+    jslogContext: rate === 1 ? 'cpu-no-throttling' : `cpu-throttled-${rate}`,
+  };
+}
+
+export const NoThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.NO_THROTTLING);
+export const MidTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.MID_TIER_MOBILE);
+export const LowTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.LOW_TIER_MOBILE);
+export const ExtraSlowThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.EXTRA_SLOW);
+
+function makeCalibratedThrottlingOption(calibratedDeviceType: CalibratedDeviceType): CPUThrottlingOption {
+  const getSettingValue = (): number|CalibrationError|null => {
+    const setting = Common.Settings.Settings.instance().createSetting<CalibratedCPUThrottling>(
+        'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
+    const value = setting.get();
+    if (calibratedDeviceType === 'low-tier-mobile') {
+      return value.low ?? null;
+    }
+    if (calibratedDeviceType === 'mid-tier-mobile') {
+      return value.mid ?? null;
+    }
+    return null;
+  };
+
+  return {
+    title(): string {
+      const typeString = calibratedDeviceType === 'low-tier-mobile' ? i18nString(UIStrings.calibratedLowTierMobile) :
+                                                                      i18nString(UIStrings.calibratedMidTierMobile);
+
+      const value = getSettingValue();
+      if (typeof value === 'number') {
+        return `${typeString} – ${value.toFixed(1)}×`;
+      }
+
+      return typeString;
+    },
+    rate(): number {
+      const value = getSettingValue();
+      if (typeof value === 'number') {
+        return value;
+      }
+      return 0;
+    },
+    calibratedDeviceType,
+    jslogContext: `cpu-throttled-calibrated-${calibratedDeviceType}`,
+  };
+}
+
+export const CalibratedLowTierMobileThrottlingOption = makeCalibratedThrottlingOption('low-tier-mobile');
+export const CalibratedMidTierMobileThrottlingOption = makeCalibratedThrottlingOption('mid-tier-mobile');
+
+export interface CalibratedCPUThrottling {
+  /** Either the CPU multiplier, or an error code for why it could not be determined. */
+  low?: number|CalibrationError;
+  mid?: number|CalibrationError;
+}
+
+export enum CalibrationError {
+  DEVICE_TOO_WEAK = 'DEVICE_TOO_WEAK',
+}
+
+export function calibrationErrorToString(error: CalibrationError): string {
+  if (error === CalibrationError.DEVICE_TOO_WEAK) {
+    return i18nString(UIStrings.calibrationErrorDeviceTooWeak);
+  }
+
+  return error;
 }

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

@@ -48,6 +48,9 @@ function createMatchedStyles(
     cssPropertyRegistrations: [],
     fontPaletteValuesRule: undefined,
     activePositionFallbackIndex: -1,
+    animationStylesPayload: [],
+    transitionsStylePayload: null,
+    inheritedAnimatedPayload: [],
     ...payload,
   });
 }

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -165,6 +165,7 @@ function queryMatches(style: CSSStyleDeclaration): boolean {
 export interface CSSMatchedStylesPayload {
   cssModel: CSSModel;
   node: DOMNode;
+  activePositionFallbackIndex: number;
   inlinePayload: Protocol.CSS.CSSStyle|null;
   attributesPayload: Protocol.CSS.CSSStyle|null;
   matchedPayload: Protocol.CSS.RuleMatch[];
@@ -177,7 +178,9 @@ export interface CSSMatchedStylesPayload {
   propertyRules: Protocol.CSS.CSSPropertyRule[];
   cssPropertyRegistrations: Protocol.CSS.CSSPropertyRegistration[];
   fontPaletteValuesRule: Protocol.CSS.CSSFontPaletteValuesRule|undefined;
-  activePositionFallbackIndex: number;
+  animationStylesPayload: Protocol.CSS.CSSAnimationStyle[];
+  transitionsStylePayload: Protocol.CSS.CSSStyle|null;
+  inheritedAnimatedPayload: Protocol.CSS.InheritedAnimatedStyleEntry[];
 }
 
 export class CSSRegisteredProperty {
@@ -305,14 +308,18 @@ export class CSSMatchedStyles {
     attributesPayload,
     pseudoPayload,
     inheritedPseudoPayload,
+    animationStylesPayload,
+    transitionsStylePayload,
+    inheritedAnimatedPayload,
   }: CSSMatchedStylesPayload): Promise<void> {
     matchedPayload = cleanUserAgentPayload(matchedPayload);
     for (const inheritedResult of inheritedPayload) {
       inheritedResult.matchedCSSRules = cleanUserAgentPayload(inheritedResult.matchedCSSRules);
     }
 
-    this.#mainDOMCascade =
-        await this.buildMainCascade(inlinePayload, attributesPayload, matchedPayload, inheritedPayload);
+    this.#mainDOMCascade = await this.buildMainCascade(
+        inlinePayload, attributesPayload, matchedPayload, inheritedPayload, animationStylesPayload,
+        transitionsStylePayload, inheritedAnimatedPayload);
     [this.#pseudoDOMCascades, this.#customHighlightPseudoDOMCascades] =
         this.buildPseudoCascades(pseudoPayload, inheritedPseudoPayload);
 
@@ -330,9 +337,14 @@ export class CSSMatchedStyles {
   }
 
   private async buildMainCascade(
-      inlinePayload: Protocol.CSS.CSSStyle|null, attributesPayload: Protocol.CSS.CSSStyle|null,
+      inlinePayload: Protocol.CSS.CSSStyle|null,
+      attributesPayload: Protocol.CSS.CSSStyle|null,
       matchedPayload: Protocol.CSS.RuleMatch[],
-      inheritedPayload: Protocol.CSS.InheritedStyleEntry[]): Promise<DOMInheritanceCascade> {
+      inheritedPayload: Protocol.CSS.InheritedStyleEntry[],
+      animationStylesPayload: Protocol.CSS.CSSAnimationStyle[],
+      transitionsStylePayload: Protocol.CSS.CSSStyle|null,
+      inheritedAnimatedPayload: Protocol.CSS.InheritedAnimatedStyleEntry[],
+      ): Promise<DOMInheritanceCascade> {
     const nodeCascades: NodeCascade[] = [];
 
     const nodeStyles: CSSStyleDeclaration[] = [];
@@ -346,7 +358,22 @@ export class CSSMatchedStyles {
       nodeStyles.push(style);
     }
 
-    // Inline style has the greatest specificity.
+    // Transition styles take precedence over animation styles & inline styles.
+    if (transitionsStylePayload) {
+      const style = new CSSStyleDeclaration(this.#cssModelInternal, null, transitionsStylePayload, Type.Transition);
+      this.#nodeForStyleInternal.set(style, this.#nodeInternal);
+      nodeStyles.push(style);
+    }
+
+    // Animation styles take precedence over inline styles.
+    for (const animationsStyle of animationStylesPayload) {
+      const style = new CSSStyleDeclaration(
+          this.#cssModelInternal, null, animationsStyle.style, Type.Animation, animationsStyle.name);
+      this.#nodeForStyleInternal.set(style, this.#nodeInternal);
+      nodeStyles.push(style);
+    }
+
+    // Inline style takes precedence over regular and inherited rules.
     if (inlinePayload && this.#nodeInternal.nodeType() === Node.ELEMENT_NODE) {
       const style = new CSSStyleDeclaration(this.#cssModelInternal, null, inlinePayload, Type.Inline);
       this.#nodeForStyleInternal.set(style, this.#nodeInternal);
@@ -385,9 +412,35 @@ export class CSSMatchedStyles {
     for (let i = 0; parentNode && inheritedPayload && i < inheritedPayload.length; ++i) {
       const inheritedStyles = [];
       const entryPayload = inheritedPayload[i];
+      const inheritedAnimatedEntryPayload = inheritedAnimatedPayload[i];
       const inheritedInlineStyle = entryPayload.inlineStyle ?
           new CSSStyleDeclaration(this.#cssModelInternal, null, entryPayload.inlineStyle, Type.Inline) :
           null;
+      const inheritedTransitionsStyle = inheritedAnimatedEntryPayload?.transitionsStyle ?
+          new CSSStyleDeclaration(
+              this.#cssModelInternal, null, inheritedAnimatedEntryPayload?.transitionsStyle, Type.Transition) :
+          null;
+      const inheritedAnimationStyles =
+          inheritedAnimatedEntryPayload?.animationStyles?.map(
+              animationStyle => new CSSStyleDeclaration(
+                  this.#cssModelInternal, null, animationStyle.style, Type.Animation, animationStyle.name)) ??
+          [];
+      if (inheritedTransitionsStyle && containsInherited(inheritedTransitionsStyle)) {
+        this.#nodeForStyleInternal.set(inheritedTransitionsStyle, parentNode);
+        inheritedStyles.push(inheritedTransitionsStyle);
+        this.#inheritedStyles.add(inheritedTransitionsStyle);
+      }
+
+      for (const inheritedAnimationsStyle of inheritedAnimationStyles) {
+        if (!containsInherited(inheritedAnimationsStyle)) {
+          continue;
+        }
+
+        this.#nodeForStyleInternal.set(inheritedAnimationsStyle, parentNode);
+        inheritedStyles.push(inheritedAnimationsStyle);
+        this.#inheritedStyles.add(inheritedAnimationsStyle);
+      }
+
       if (inheritedInlineStyle && containsInherited(inheritedInlineStyle)) {
         this.#nodeForStyleInternal.set(inheritedInlineStyle, parentNode);
         inheritedStyles.push(inheritedInlineStyle);
@@ -660,6 +713,20 @@ export class CSSMatchedStyles {
     return this.#mainDOMCascade.styles();
   }
 
+  inheritedStyles(): CSSStyleDeclaration[] {
+    return this.#mainDOMCascade?.styles().filter(style => this.isInherited(style)) ?? [];
+  }
+
+  animationStyles(): CSSStyleDeclaration[] {
+    return this.#mainDOMCascade?.styles().filter(style => !this.isInherited(style) && style.type === Type.Animation) ??
+        [];
+  }
+
+  transitionsStyle(): CSSStyleDeclaration|null {
+    return this.#mainDOMCascade?.styles().find(style => !this.isInherited(style) && style.type === Type.Transition) ??
+        null;
+  }
+
   registeredProperties(): CSSRegisteredProperty[] {
     return this.#registeredProperties;
   }

package/front_end/core/sdk/CSSMetadata.ts

@@ -362,6 +362,27 @@ export class CSSMetadata {
   }
 }
 
+// The following regexes are used within in the StylesSidebarPropertyRenderer class
+// and will parse both invalid and valid values. They both match full strings.
+// [^- ][a-zA-Z-]+ matches property key values (e.g. smaller, x-large, initial)
+// -?\+?(?:[0-9]+\.[0-9]+|\.[0-9]+|[0-9]+) matches numeric property values (e.g. -.23, 3.3, 55)
+// [a-zA-Z%]{0,4} matches the units of numeric property values (e.g. px, vmin, or blank units)
+export const FontPropertiesRegex: RegExp = /^[^- ][a-zA-Z-]+$|^-?\+?(?:[0-9]+\.[0-9]+|\.[0-9]+|[0-9]+)[a-zA-Z%]{0,4}$/;
+
+// "[\w \,-]+",? ? matches double quoted values and the trailing comma/space (e.g. "Tahoma", )
+// ('[\w \,-]+',? ?) matches single quoted values and the trailing comma/space (e.g. 'Segoe UI', )
+// ([\w \,-]+,? ?) matches non quoted values and the trailing comma/space (e.g. Helvetica)
+// (?: ...)+ will match 1 or more of the groups above such that it would match a value with fallbacks (e.g. "Tahoma", 'Segoe UI', Helvetica)
+export const FontFamilyRegex: RegExp = /^("[\w \,-]+"?, ?|'[\w \,-]+',? ?|[\w \-]+,? ?)+$/;
+
+export const CubicBezierKeywordValues = new Map([
+  ['linear', 'cubic-bezier(0, 0, 1, 1)'],
+  ['ease', 'cubic-bezier(0.25, 0.1, 0.25, 1)'],
+  ['ease-in', 'cubic-bezier(0.42, 0, 1, 1)'],
+  ['ease-in-out', 'cubic-bezier(0.42, 0, 0.58, 1)'],
+  ['ease-out', 'cubic-bezier(0, 0, 0.58, 1)'],
+]);
+
 // CSS-wide keywords.
 export const enum CSSWideKeyword {
   INHERIT = 'inherit',

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

@@ -6,10 +6,12 @@ import * as Protocol from '../../generated/protocol.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
 import {activate, getMainFrame, navigate} from '../../testing/ResourceTreeHelpers.js';
-import type * as Platform from '../platform/platform.js';
+import * as Platform from '../platform/platform.js';
 
 import * as SDK from './sdk.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describeWithMockConnection('CSSModel', () => {
   it('gets the FontFace of a source URL', () => {
     const target = createTarget();
@@ -81,13 +83,11 @@ describeWithMockConnection('CSSModel', () => {
       assert.exists(cssModel);
 
       cssModel.styleSheetAdded(header);
-      let styleSheetIds =
-          cssModel.getStyleSheetIdsForURL('http://example.com/styles.css' as Platform.DevToolsPath.UrlString);
+      let styleSheetIds = cssModel.getStyleSheetIdsForURL(urlString`http://example.com/styles.css`);
       assert.deepEqual(styleSheetIds, ['stylesheet']);
 
       navigate(getMainFrame(target));
-      styleSheetIds =
-          cssModel.getStyleSheetIdsForURL('http://example.com/styles.css' as Platform.DevToolsPath.UrlString);
+      styleSheetIds = cssModel.getStyleSheetIdsForURL(urlString`http://example.com/styles.css`);
       assert.deepEqual(styleSheetIds, []);
     });
 
@@ -96,13 +96,11 @@ describeWithMockConnection('CSSModel', () => {
 
       getMainFrame(target);
       cssModel.styleSheetAdded(header);
-      let styleSheetIds =
-          cssModel.getStyleSheetIdsForURL('http://example.com/styles.css' as Platform.DevToolsPath.UrlString);
+      let styleSheetIds = cssModel.getStyleSheetIdsForURL(urlString`http://example.com/styles.css`);
       assert.deepEqual(styleSheetIds, ['stylesheet']);
 
       activate(target);
-      styleSheetIds =
-          cssModel.getStyleSheetIdsForURL('http://example.com/styles.css' as Platform.DevToolsPath.UrlString);
+      styleSheetIds = cssModel.getStyleSheetIdsForURL(urlString`http://example.com/styles.css`);
       assert.deepEqual(styleSheetIds, ['stylesheet']);
     });
   });

package/front_end/core/sdk/CSSModel.ts

@@ -339,35 +339,54 @@ export class CSSModel extends SDKModel<EventTypes> {
     this.dispatchEventToListeners(Events.ModelWasEnabled);
   }
 
-  async getMatchedStyles(nodeId: Protocol.DOM.NodeId): Promise<CSSMatchedStyles|null> {
-    const response = await this.agent.invoke_getMatchedStylesForNode({nodeId});
-
+  async getAnimatedStylesForNode(nodeId: Protocol.DOM.NodeId):
+      Promise<Protocol.CSS.GetAnimatedStylesForNodeResponse|null> {
+    const response = await this.agent.invoke_getAnimatedStylesForNode({nodeId});
     if (response.getError()) {
       return null;
     }
 
+    return response;
+  }
+
+  async getMatchedStyles(nodeId: Protocol.DOM.NodeId): Promise<CSSMatchedStyles|null> {
     const node = this.#domModel.nodeForId(nodeId);
     if (!node) {
       return null;
     }
 
-    return await CSSMatchedStyles.create({
+    const shouldGetAnimatedStyles =
+        Common.Settings.Settings.instance().getHostConfig().devToolsAnimationStylesInStylesTab?.enabled;
+    const [matchedStylesResponse, animatedStylesResponse] = await Promise.all([
+      this.agent.invoke_getMatchedStylesForNode({nodeId}),
+      shouldGetAnimatedStyles ? this.agent.invoke_getAnimatedStylesForNode({nodeId}) : undefined,
+    ]);
+
+    if (matchedStylesResponse.getError()) {
+      return null;
+    }
+
+    const payload = {
       cssModel: this,
       node: (node as DOMNode),
-      inlinePayload: response.inlineStyle || null,
-      attributesPayload: response.attributesStyle || null,
-      matchedPayload: response.matchedCSSRules || [],
-      pseudoPayload: response.pseudoElements || [],
-      inheritedPayload: response.inherited || [],
-      inheritedPseudoPayload: response.inheritedPseudoElements || [],
-      animationsPayload: response.cssKeyframesRules || [],
-      parentLayoutNodeId: response.parentLayoutNodeId,
-      positionTryRules: response.cssPositionTryRules || [],
-      propertyRules: response.cssPropertyRules ?? [],
-      cssPropertyRegistrations: response.cssPropertyRegistrations ?? [],
-      fontPaletteValuesRule: response.cssFontPaletteValuesRule,
-      activePositionFallbackIndex: response.activePositionFallbackIndex ?? -1,
-    });
+      inlinePayload: matchedStylesResponse.inlineStyle || null,
+      attributesPayload: matchedStylesResponse.attributesStyle || null,
+      matchedPayload: matchedStylesResponse.matchedCSSRules || [],
+      pseudoPayload: matchedStylesResponse.pseudoElements || [],
+      inheritedPayload: matchedStylesResponse.inherited || [],
+      inheritedPseudoPayload: matchedStylesResponse.inheritedPseudoElements || [],
+      animationsPayload: matchedStylesResponse.cssKeyframesRules || [],
+      parentLayoutNodeId: matchedStylesResponse.parentLayoutNodeId,
+      positionTryRules: matchedStylesResponse.cssPositionTryRules || [],
+      propertyRules: matchedStylesResponse.cssPropertyRules ?? [],
+      cssPropertyRegistrations: matchedStylesResponse.cssPropertyRegistrations ?? [],
+      fontPaletteValuesRule: matchedStylesResponse.cssFontPaletteValuesRule,
+      activePositionFallbackIndex: matchedStylesResponse.activePositionFallbackIndex ?? -1,
+      animationStylesPayload: animatedStylesResponse?.animationStyles || [],
+      inheritedAnimatedPayload: animatedStylesResponse?.inherited || [],
+      transitionsStylePayload: animatedStylesResponse?.transitionsStyle || null,
+    };
+    return await CSSMatchedStyles.create(payload);
   }
 
   async getClassNames(styleSheetId: Protocol.CSS.StyleSheetId): Promise<string[]> {
@@ -590,8 +609,8 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
   }
 
-  async createInspectorStylesheet(frameId: Protocol.Page.FrameId): Promise<CSSStyleSheetHeader|null> {
-    const result = await this.agent.invoke_createStyleSheet({frameId});
+  async createInspectorStylesheet(frameId: Protocol.Page.FrameId, force = false): Promise<CSSStyleSheetHeader|null> {
+    const result = await this.agent.invoke_createStyleSheet({frameId, force});
     if (result.getError()) {
       throw new Error(result.getError());
     }
@@ -927,17 +946,17 @@ export interface ComputedStyleUpdatedEvent {
   nodeId: Protocol.DOM.NodeId;
 }
 
-export type EventTypes = {
-  [Events.FontsUpdated]: void,
-  [Events.MediaQueryResultChanged]: void,
-  [Events.ModelWasEnabled]: void,
-  [Events.ModelDisposed]: CSSModel,
-  [Events.PseudoStateForced]: PseudoStateForcedEvent,
-  [Events.StyleSheetAdded]: CSSStyleSheetHeader,
-  [Events.StyleSheetChanged]: StyleSheetChangedEvent,
-  [Events.StyleSheetRemoved]: CSSStyleSheetHeader,
-  [Events.ComputedStyleUpdated]: ComputedStyleUpdatedEvent,
-};
+export interface EventTypes {
+  [Events.FontsUpdated]: void;
+  [Events.MediaQueryResultChanged]: void;
+  [Events.ModelWasEnabled]: void;
+  [Events.ModelDisposed]: CSSModel;
+  [Events.PseudoStateForced]: PseudoStateForcedEvent;
+  [Events.StyleSheetAdded]: CSSStyleSheetHeader;
+  [Events.StyleSheetChanged]: StyleSheetChangedEvent;
+  [Events.StyleSheetRemoved]: CSSStyleSheetHeader;
+  [Events.ComputedStyleUpdated]: ComputedStyleUpdatedEvent;
+}
 
 const PseudoStateMarker = 'pseudo-state-marker';
 
@@ -1076,9 +1095,9 @@ export const enum CSSPropertyTrackerEvents {
   TRACKED_CSS_PROPERTIES_UPDATED = 'TrackedCSSPropertiesUpdated',
 }
 
-export type CSSPropertyTrackerEventTypes = {
-  [CSSPropertyTrackerEvents.TRACKED_CSS_PROPERTIES_UPDATED]: (DOMNode|null)[],
-};
+export interface CSSPropertyTrackerEventTypes {
+  [CSSPropertyTrackerEvents.TRACKED_CSS_PROPERTIES_UPDATED]: (DOMNode|null)[];
+}
 
 SDKModel.register(CSSModel, {capabilities: Capability.DOM, autostart: true});
 export interface ContrastInfo {

package/front_end/core/sdk/CSSProperty.ts

@@ -13,7 +13,15 @@ import type {Edit} from './CSSModel.js';
 import {stripComments} from './CSSPropertyParser.js';
 import type {CSSStyleDeclaration} from './CSSStyleDeclaration.js';
 
-export class CSSProperty {
+export const enum Events {
+  LOCAL_VALUE_UPDATED = 'localValueUpdated',
+}
+
+export interface EventTypes {
+  [Events.LOCAL_VALUE_UPDATED]: void;
+}
+
+export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   ownerStyle: CSSStyleDeclaration;
   index: number;
   name: string;
@@ -34,6 +42,7 @@ export class CSSProperty {
       ownerStyle: CSSStyleDeclaration, index: number, name: string, value: string, important: boolean,
       disabled: boolean, parsedOk: boolean, implicit: boolean, text?: string|null, range?: Protocol.CSS.SourceRange,
       longhandProperties?: Protocol.CSS.CSSProperty[]) {
+    super();
     this.ownerStyle = ownerStyle;
     this.index = index;
     this.name = name;
@@ -151,11 +160,6 @@ export class CSSProperty {
     return this.#active;
   }
 
-  trimmedValueWithoutImportant(): string {
-    const important = '!important';
-    return this.value.endsWith(important) ? this.value.slice(0, -important.length).trim() : this.value.trim();
-  }
-
   async setText(propertyText: string, majorChange: boolean, overwrite?: boolean): Promise<boolean> {
     if (!this.ownerStyle) {
       throw new Error('No ownerStyle for property');
@@ -288,6 +292,12 @@ export class CSSProperty {
     void this.setText(text, majorChange, overwrite).then(userCallback);
   }
 
+  // Updates the value stored locally and emits an event to signal its update.
+  setLocalValue(value: string): void {
+    this.value = value;
+    this.dispatchEventToListeners(Events.LOCAL_VALUE_UPDATED);
+  }
+
   async setDisabled(disabled: boolean): Promise<boolean> {
     if (!this.ownerStyle) {
       return false;

package/front_end/core/sdk/CSSPropertyParser.ts

@@ -185,7 +185,7 @@ export type Constructor<T = any> = (abstract new (...args: any[]) => T)|(new (..
 export interface Matcher<MatchT extends Match> {
   readonly matchType: Constructor<MatchT>;
   accepts(propertyName: string): boolean;
-  matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): Match|null;
+  matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): MatchT|null;
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -196,7 +196,7 @@ export function matcherBase<MatchT extends Match>(matchT: Constructor<MatchT>) {
       return true;
     }
 
-    matches(_node: CodeMirror.SyntaxNode, _matching: BottomUpTreeMatching): Match|null {
+    matches(_node: CodeMirror.SyntaxNode, _matching: BottomUpTreeMatching): MatchT|null {
       return null;
     }
   }
@@ -520,7 +520,7 @@ export class VariableMatcher extends matcherBase(VariableMatch) {
     this.#computedTextCallback = computedTextCallback;
   }
 
-  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): Match|null {
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): VariableMatch|null {
     const callee = node.getChild('Callee');
     const args = node.getChild('ArgList');
     if (node.name !== 'CallExpression' || !callee || (matching.ast.text(callee) !== 'var') || !args) {
@@ -581,7 +581,7 @@ class TextMatcher extends matcherBase(TextMatch) {
   override accepts(): boolean {
     return true;
   }
-  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): Match|null {
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): TextMatch|null {
     if (!node.firstChild || node.name === 'NumberLiteral' /* may have a Unit child */) {
       // Leaf node, just emit text
       const text = matching.ast.text(node);