devtools-tracing 1.0.0

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

@@ -0,0 +1,1128 @@
+// Copyright 2010 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Common from '../common/common.js';
+import * as Host from '../host/host.js';
+import * as Platform from '../platform/platform.js';
+import * as Root from '../root/root.js';
+
+import {CSSFontFace} from './CSSFontFace.js';
+import {CSSMatchedStyles} from './CSSMatchedStyles.js';
+import {CSSMedia} from './CSSMedia.js';
+import {cssMetadata} from './CSSMetadata.js';
+import {CSSStyleRule} from './CSSRule.js';
+import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
+import {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
+import {DOMModel, type DOMNode} from './DOMModel.js';
+import {
+  Events as ResourceTreeModelEvents,
+  PrimaryPageChangeType,
+  type ResourceTreeFrame,
+  ResourceTreeModel,
+} from './ResourceTreeModel.js';
+import {SDKModel} from './SDKModel.js';
+import {SourceMapManager} from './SourceMapManager.js';
+import {Capability, type Target} from './Target.js';
+
+export const enum ColorScheme {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+export interface LayoutProperties {
+  isFlex: boolean;
+  isGrid: boolean;
+  isSubgrid: boolean;
+  isMasonry: boolean;
+  isContainer: boolean;
+  hasScroll: boolean;
+}
+
+export class CSSModel extends SDKModel<EventTypes> {
+  readonly agent: ProtocolProxyApi.CSSApi;
+  readonly #domModel: DOMModel;
+  readonly #fontFaces = new Map<string, CSSFontFace>();
+  readonly #originalStyleSheetText = new Map<CSSStyleSheetHeader, Promise<string|null>>();
+  readonly #resourceTreeModel: ResourceTreeModel|null;
+  readonly #sourceMapManager: SourceMapManager<CSSStyleSheetHeader>;
+  readonly #styleLoader: ComputedStyleLoader;
+  readonly #stylePollingThrottler = new Common.Throttler.Throttler(StylePollingInterval);
+  readonly #styleSheetIdsForURL =
+      new Map<Platform.DevToolsPath.UrlString, Map<string, Set<Protocol.CSS.StyleSheetId>>>();
+  readonly #styleSheetIdToHeader = new Map<Protocol.CSS.StyleSheetId, CSSStyleSheetHeader>();
+  #cachedMatchedCascadeNode: DOMNode|null = null;
+  #cachedMatchedCascadePromise: Promise<CSSMatchedStyles|null>|null = null;
+  #cssPropertyTracker: CSSPropertyTracker|null = null;
+  #isCSSPropertyTrackingEnabled = false;
+  #isEnabled = false;
+  #isRuleUsageTrackingEnabled = false;
+  #isTrackingRequestPending = false;
+  #colorScheme: ColorScheme|undefined;
+
+  constructor(target: Target) {
+    super(target);
+    this.#domModel = (target.model(DOMModel) as DOMModel);
+    this.#sourceMapManager = new SourceMapManager(target);
+    this.agent = target.cssAgent();
+    this.#styleLoader = new ComputedStyleLoader(this);
+    this.#resourceTreeModel = target.model(ResourceTreeModel);
+    if (this.#resourceTreeModel) {
+      this.#resourceTreeModel.addEventListener(
+          ResourceTreeModelEvents.PrimaryPageChanged, this.onPrimaryPageChanged, this);
+    }
+    target.registerCSSDispatcher(new CSSDispatcher(this));
+    if (!target.suspended()) {
+      void this.enable();
+    }
+
+    this.#sourceMapManager.setEnabled(
+        Common.Settings.Settings.instance().moduleSetting<boolean>('css-source-maps-enabled').get());
+    Common.Settings.Settings.instance()
+        .moduleSetting<boolean>('css-source-maps-enabled')
+        .addChangeListener(event => this.#sourceMapManager.setEnabled(event.data));
+  }
+
+  async colorScheme(): Promise<ColorScheme|undefined> {
+    if (!this.#colorScheme) {
+      const colorSchemeResponse = await this.domModel()?.target().runtimeAgent().invoke_evaluate(
+          {expression: 'window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches'});
+      if (colorSchemeResponse && !colorSchemeResponse.exceptionDetails && !colorSchemeResponse.getError()) {
+        this.#colorScheme = colorSchemeResponse.result.value ? ColorScheme.DARK : ColorScheme.LIGHT;
+      }
+    }
+    return this.#colorScheme;
+  }
+
+  async resolveValues(propertyName: string|undefined, nodeId: Protocol.DOM.NodeId, ...values: string[]):
+      Promise<string[]|null> {
+    if (propertyName && cssMetadata().getLonghands(propertyName)?.length) {
+      return null;
+    }
+    const response = await this.agent.invoke_resolveValues({values, nodeId, propertyName});
+    if (response.getError()) {
+      return null;
+    }
+    return response.results;
+  }
+
+  headersForSourceURL(sourceURL: Platform.DevToolsPath.UrlString): CSSStyleSheetHeader[] {
+    const headers = [];
+    for (const headerId of this.getStyleSheetIdsForURL(sourceURL)) {
+      const header = this.styleSheetHeaderForId(headerId);
+      if (header) {
+        headers.push(header);
+      }
+    }
+    return headers;
+  }
+
+  createRawLocationsByURL(
+      sourceURL: Platform.DevToolsPath.UrlString, lineNumber: number,
+      columnNumber: number|undefined = 0): CSSLocation[] {
+    const headers = this.headersForSourceURL(sourceURL);
+    headers.sort(stylesheetComparator);
+    const endIndex = Platform.ArrayUtilities.upperBound(
+        headers, undefined, (_, header) => lineNumber - header.startLine || columnNumber - header.startColumn);
+    if (!endIndex) {
+      return [];
+    }
+    const locations = [];
+    const last = headers[endIndex - 1];
+    for (let index = endIndex - 1;
+         index >= 0 && headers[index].startLine === last.startLine && headers[index].startColumn === last.startColumn;
+         --index) {
+      if (headers[index].containsLocation(lineNumber, columnNumber)) {
+        locations.push(new CSSLocation(headers[index], lineNumber, columnNumber));
+      }
+    }
+
+    return locations;
+    function stylesheetComparator(a: CSSStyleSheetHeader, b: CSSStyleSheetHeader): number {
+      return a.startLine - b.startLine || a.startColumn - b.startColumn || a.id.localeCompare(b.id);
+    }
+  }
+
+  sourceMapManager(): SourceMapManager<CSSStyleSheetHeader> {
+    return this.#sourceMapManager;
+  }
+
+  static readableLayerName(text: string): string {
+    return text || '<anonymous>';
+  }
+
+  static trimSourceURL(text: string): string {
+    let sourceURLIndex = text.lastIndexOf('/*# sourceURL=');
+    if (sourceURLIndex === -1) {
+      sourceURLIndex = text.lastIndexOf('/*@ sourceURL=');
+      if (sourceURLIndex === -1) {
+        return text;
+      }
+    }
+    const sourceURLLineIndex = text.lastIndexOf('\n', sourceURLIndex);
+    if (sourceURLLineIndex === -1) {
+      return text;
+    }
+    const sourceURLLine = text.substr(sourceURLLineIndex + 1).split('\n', 1)[0];
+    const sourceURLRegex = /[\x20\t]*\/\*[#@] sourceURL=[\x20\t]*([^\s]*)[\x20\t]*\*\/[\x20\t]*$/;
+    if (sourceURLLine.search(sourceURLRegex) === -1) {
+      return text;
+    }
+    return text.substr(0, sourceURLLineIndex) + text.substr(sourceURLLineIndex + sourceURLLine.length + 1);
+  }
+
+  domModel(): DOMModel {
+    return this.#domModel;
+  }
+
+  async trackComputedStyleUpdatesForNode(nodeId: Protocol.DOM.NodeId|undefined): Promise<void> {
+    await this.agent.invoke_trackComputedStyleUpdatesForNode({nodeId});
+  }
+
+  async setStyleText(
+      styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange, text: string,
+      majorChange: boolean): Promise<boolean> {
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+
+      const {styles} =
+          await this.agent.invoke_setStyleTexts({edits: [{styleSheetId, range: range.serializeToObject(), text}]});
+      if (!styles || styles.length !== 1) {
+        return false;
+      }
+
+      this.#domModel.markUndoableState(!majorChange);
+      const edit = new Edit(styleSheetId, range, text, styles[0]);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
+  async setSelectorText(styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange, text: string):
+      Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {selectorList} = await this.agent.invoke_setRuleSelector({styleSheetId, range, selector: text});
+
+      if (!selectorList) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, text, selectorList);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
+  async setPropertyRulePropertyName(
+      styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange, text: string): Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {propertyName} =
+          await this.agent.invoke_setPropertyRulePropertyName({styleSheetId, range, propertyName: text});
+
+      if (!propertyName) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, text, propertyName);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
+  async setKeyframeKey(styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange, text: string):
+      Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {keyText} = await this.agent.invoke_setKeyframeKey({styleSheetId, range, keyText: text});
+
+      if (!keyText) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, text, keyText);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
+  startCoverage(): Promise<Protocol.ProtocolResponseWithError> {
+    this.#isRuleUsageTrackingEnabled = true;
+    return this.agent.invoke_startRuleUsageTracking();
+  }
+
+  async takeCoverageDelta(): Promise<{
+    timestamp: number,
+    coverage: Protocol.CSS.RuleUsage[],
+  }> {
+    const r = await this.agent.invoke_takeCoverageDelta();
+    const timestamp = (r?.timestamp) || 0;
+    const coverage = (r?.coverage) || [];
+    return {timestamp, coverage};
+  }
+
+  setLocalFontsEnabled(enabled: boolean): Promise<Protocol.ProtocolResponseWithError> {
+    return this.agent.invoke_setLocalFontsEnabled({
+      enabled,
+    });
+  }
+
+  async stopCoverage(): Promise<void> {
+    this.#isRuleUsageTrackingEnabled = false;
+    await this.agent.invoke_stopRuleUsageTracking();
+  }
+
+  async getMediaQueries(): Promise<CSSMedia[]> {
+    const {medias} = await this.agent.invoke_getMediaQueries();
+    return medias ? CSSMedia.parseMediaArrayPayload(this, medias) : [];
+  }
+
+  async getRootLayer(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.CSSLayerData> {
+    const {rootLayer} = await this.agent.invoke_getLayersForNode({nodeId});
+    return rootLayer;
+  }
+
+  isEnabled(): boolean {
+    return this.#isEnabled;
+  }
+
+  private async enable(): Promise<void> {
+    await this.agent.invoke_enable();
+    this.#isEnabled = true;
+    if (this.#isRuleUsageTrackingEnabled) {
+      await this.startCoverage();
+    }
+    this.dispatchEventToListeners(Events.ModelWasEnabled);
+  }
+
+  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;
+    }
+
+    const shouldGetAnimatedStyles = Root.Runtime.hostConfig.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,
+      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 ?? [],
+      functionRules: matchedStylesResponse.cssFunctionRules ?? [],
+      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[]> {
+    const {classNames} = await this.agent.invoke_collectClassNames({styleSheetId});
+    return classNames || [];
+  }
+
+  async getComputedStyle(nodeId: Protocol.DOM.NodeId): Promise<Map<string, string>|null> {
+    if (!this.isEnabled()) {
+      await this.enable();
+    }
+    return await this.#styleLoader.computedStylePromise(nodeId);
+  }
+
+  async getLayoutPropertiesFromComputedStyle(nodeId: Protocol.DOM.NodeId): Promise<LayoutProperties|null> {
+    const styles = await this.getComputedStyle(nodeId);
+    if (!styles) {
+      return null;
+    }
+
+    const display = styles.get('display');
+    const isFlex = display === 'flex' || display === 'inline-flex';
+    const isGrid = display === 'grid' || display === 'inline-grid';
+    const isSubgrid = (isGrid &&
+                       (styles.get('grid-template-columns')?.startsWith('subgrid') ||
+                        styles.get('grid-template-rows')?.startsWith('subgrid'))) ??
+        false;
+    const isMasonry = display === 'masonry' || display === 'inline-masonry';
+    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';
+
+    return {
+      isFlex,
+      isGrid,
+      isSubgrid,
+      isMasonry,
+      isContainer,
+      hasScroll,
+    };
+  }
+
+  async getEnvironmentVariales(): Promise<Record<string, string>> {
+    const response = await this.agent.invoke_getEnvironmentVariables();
+    if (response.getError()) {
+      return {};
+    }
+    return response.environmentVariables;
+  }
+
+  async getBackgroundColors(nodeId: Protocol.DOM.NodeId): Promise<ContrastInfo|null> {
+    const response = await this.agent.invoke_getBackgroundColors({nodeId});
+    if (response.getError()) {
+      return null;
+    }
+
+    return {
+      backgroundColors: response.backgroundColors || null,
+      computedFontSize: response.computedFontSize || '',
+      computedFontWeight: response.computedFontWeight || '',
+    };
+  }
+
+  async getPlatformFonts(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.PlatformFontUsage[]|null> {
+    const {fonts} = await this.agent.invoke_getPlatformFontsForNode({nodeId});
+    return fonts;
+  }
+
+  allStyleSheets(): CSSStyleSheetHeader[] {
+    const values = [...this.#styleSheetIdToHeader.values()];
+    function styleSheetComparator(a: CSSStyleSheetHeader, b: CSSStyleSheetHeader): number {
+      if (a.sourceURL < b.sourceURL) {
+        return -1;
+      }
+      if (a.sourceURL > b.sourceURL) {
+        return 1;
+      }
+      return a.startLine - b.startLine || a.startColumn - b.startColumn;
+    }
+    values.sort(styleSheetComparator);
+
+    return values;
+  }
+
+  async getInlineStyles(nodeId: Protocol.DOM.NodeId): Promise<InlineStyleResult|null> {
+    const response = await this.agent.invoke_getInlineStylesForNode({nodeId});
+
+    if (response.getError() || !response.inlineStyle) {
+      return null;
+    }
+    const inlineStyle = new CSSStyleDeclaration(this, null, response.inlineStyle, Type.Inline);
+    const attributesStyle = response.attributesStyle ?
+        new CSSStyleDeclaration(this, null, response.attributesStyle, Type.Attributes) :
+        null;
+    return new InlineStyleResult(inlineStyle, attributesStyle);
+  }
+
+  forceStartingStyle(node: DOMNode, forced: boolean): boolean {
+    void this.agent.invoke_forceStartingStyle({nodeId: node.id, forced});
+    this.dispatchEventToListeners(Events.StartingStylesStateForced, node);
+    return true;
+  }
+
+  forcePseudoState(node: DOMNode, pseudoClass: string, enable: boolean): boolean {
+    const forcedPseudoClasses = node.marker<string[]>(PseudoStateMarker) || [];
+    const hasPseudoClass = forcedPseudoClasses.includes(pseudoClass);
+    if (enable) {
+      if (hasPseudoClass) {
+        return false;
+      }
+      forcedPseudoClasses.push(pseudoClass);
+      node.setMarker(PseudoStateMarker, forcedPseudoClasses);
+    } else {
+      if (!hasPseudoClass) {
+        return false;
+      }
+      Platform.ArrayUtilities.removeElement(forcedPseudoClasses, pseudoClass);
+      if (forcedPseudoClasses.length) {
+        node.setMarker(PseudoStateMarker, forcedPseudoClasses);
+      } else {
+        node.setMarker(PseudoStateMarker, null);
+      }
+    }
+
+    if (node.id === undefined) {
+      return false;
+    }
+    void this.agent.invoke_forcePseudoState({nodeId: node.id, forcedPseudoClasses});
+    this.dispatchEventToListeners(Events.PseudoStateForced, {node, pseudoClass, enable});
+    return true;
+  }
+
+  pseudoState(node: DOMNode): string[]|null {
+    return node.marker(PseudoStateMarker) || [];
+  }
+
+  async setMediaText(
+      styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange,
+      newMediaText: string): Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {media} = await this.agent.invoke_setMediaText({styleSheetId, range, text: newMediaText});
+
+      if (!media) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, newMediaText, media);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
+  async setContainerQueryText(
+      styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange,
+      newContainerQueryText: string): Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {containerQuery} =
+          await this.agent.invoke_setContainerQueryText({styleSheetId, range, text: newContainerQueryText});
+
+      if (!containerQuery) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, newContainerQueryText, containerQuery);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
+  async setSupportsText(
+      styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange,
+      newSupportsText: string): Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {supports} = await this.agent.invoke_setSupportsText({styleSheetId, range, text: newSupportsText});
+
+      if (!supports) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, newSupportsText, supports);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
+  async setScopeText(
+      styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange,
+      newScopeText: string): Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {scope} = await this.agent.invoke_setScopeText({styleSheetId, range, text: newScopeText});
+
+      if (!scope) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, newScopeText, scope);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
+  async addRule(styleSheetId: Protocol.CSS.StyleSheetId, ruleText: string, ruleLocation: TextUtils.TextRange.TextRange):
+      Promise<CSSStyleRule|null> {
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {rule} = await this.agent.invoke_addRule({styleSheetId, ruleText, location: ruleLocation});
+
+      if (!rule) {
+        return null;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, ruleLocation, ruleText, rule);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return new CSSStyleRule(this, rule);
+    } catch (e) {
+      console.error(e);
+      return null;
+    }
+  }
+
+  async requestViaInspectorStylesheet(maybeFrameId?: Protocol.Page.FrameId|null): Promise<CSSStyleSheetHeader|null> {
+    const frameId = maybeFrameId ||
+        (this.#resourceTreeModel && this.#resourceTreeModel.mainFrame ? this.#resourceTreeModel.mainFrame.id : null);
+    const headers = [...this.#styleSheetIdToHeader.values()];
+    const styleSheetHeader = headers.find(header => header.frameId === frameId && header.isViaInspector());
+    if (styleSheetHeader) {
+      return styleSheetHeader;
+    }
+    if (!frameId) {
+      return null;
+    }
+
+    try {
+      return await this.createInspectorStylesheet(frameId);
+    } catch (e) {
+      console.error(e);
+      return null;
+    }
+  }
+
+  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());
+    }
+    return this.#styleSheetIdToHeader.get(result.styleSheetId) || null;
+  }
+
+  mediaQueryResultChanged(): void {
+    this.#colorScheme = undefined;
+    this.dispatchEventToListeners(Events.MediaQueryResultChanged);
+  }
+
+  fontsUpdated(fontFace?: Protocol.CSS.FontFace|null): void {
+    if (fontFace) {
+      this.#fontFaces.set(fontFace.src, new CSSFontFace(fontFace));
+    }
+    this.dispatchEventToListeners(Events.FontsUpdated);
+  }
+
+  fontFaces(): CSSFontFace[] {
+    return [...this.#fontFaces.values()];
+  }
+
+  fontFaceForSource(src: string): CSSFontFace|undefined {
+    return this.#fontFaces.get(src);
+  }
+
+  styleSheetHeaderForId(id: Protocol.CSS.StyleSheetId): CSSStyleSheetHeader|null {
+    return this.#styleSheetIdToHeader.get(id) || null;
+  }
+
+  styleSheetHeaders(): CSSStyleSheetHeader[] {
+    return [...this.#styleSheetIdToHeader.values()];
+  }
+
+  fireStyleSheetChanged(styleSheetId: Protocol.CSS.StyleSheetId, edit?: Edit): void {
+    this.dispatchEventToListeners(Events.StyleSheetChanged, {styleSheetId, edit});
+  }
+
+  private ensureOriginalStyleSheetText(styleSheetId: Protocol.CSS.StyleSheetId): Promise<string|null> {
+    const header = this.styleSheetHeaderForId(styleSheetId);
+    if (!header) {
+      return Promise.resolve(null);
+    }
+    let promise = this.#originalStyleSheetText.get(header);
+    if (!promise) {
+      promise = this.getStyleSheetText(header.id);
+      this.#originalStyleSheetText.set(header, promise);
+      this.originalContentRequestedForTest(header);
+    }
+    return promise;
+  }
+
+  private originalContentRequestedForTest(_header: CSSStyleSheetHeader): void {
+  }
+
+  originalStyleSheetText(header: CSSStyleSheetHeader): Promise<string|null> {
+    return this.ensureOriginalStyleSheetText(header.id);
+  }
+
+  getAllStyleSheetHeaders(): Iterable<CSSStyleSheetHeader> {
+    return this.#styleSheetIdToHeader.values();
+  }
+
+  computedStyleUpdated(nodeId: Protocol.DOM.NodeId): void {
+    this.dispatchEventToListeners(Events.ComputedStyleUpdated, {nodeId});
+  }
+
+  styleSheetAdded(header: Protocol.CSS.CSSStyleSheetHeader): void {
+    console.assert(!this.#styleSheetIdToHeader.get(header.styleSheetId));
+    if (header.loadingFailed) {
+      // When the stylesheet fails to load, treat it as a constructed stylesheet. Failed sheets can still be modified
+      // from JS, in which case CSS.styleSheetChanged events are sent. So as to not confuse CSSModel clients we don't
+      // just discard the failed sheet here. Treating the failed sheet as a constructed stylesheet lets us keep track
+      // of it cleanly.
+      header.hasSourceURL = false;
+      header.isConstructed = true;
+      header.isInline = false;
+      header.isMutable = false;
+      header.sourceURL = '';
+      header.sourceMapURL = undefined;
+    }
+    const styleSheetHeader = new CSSStyleSheetHeader(this, header);
+    this.#styleSheetIdToHeader.set(header.styleSheetId, styleSheetHeader);
+    const url = styleSheetHeader.resourceURL();
+    let frameIdToStyleSheetIds = this.#styleSheetIdsForURL.get(url);
+    if (!frameIdToStyleSheetIds) {
+      frameIdToStyleSheetIds = new Map();
+      this.#styleSheetIdsForURL.set(url, frameIdToStyleSheetIds);
+    }
+    if (frameIdToStyleSheetIds) {
+      let styleSheetIds = frameIdToStyleSheetIds.get(styleSheetHeader.frameId);
+      if (!styleSheetIds) {
+        styleSheetIds = new Set();
+        frameIdToStyleSheetIds.set(styleSheetHeader.frameId, styleSheetIds);
+      }
+      styleSheetIds.add(styleSheetHeader.id);
+    }
+    this.#sourceMapManager.attachSourceMap(styleSheetHeader, styleSheetHeader.sourceURL, styleSheetHeader.sourceMapURL);
+    this.dispatchEventToListeners(Events.StyleSheetAdded, styleSheetHeader);
+  }
+
+  styleSheetRemoved(id: Protocol.CSS.StyleSheetId): void {
+    const header = this.#styleSheetIdToHeader.get(id);
+    console.assert(Boolean(header));
+    if (!header) {
+      return;
+    }
+    this.#styleSheetIdToHeader.delete(id);
+    const url = header.resourceURL();
+    const frameIdToStyleSheetIds = this.#styleSheetIdsForURL.get(url);
+    console.assert(
+        Boolean(frameIdToStyleSheetIds), 'No frameId to styleSheetId map is available for given style sheet URL.');
+    if (frameIdToStyleSheetIds) {
+      const stylesheetIds = frameIdToStyleSheetIds.get(header.frameId);
+      if (stylesheetIds) {
+        stylesheetIds.delete(id);
+        if (!stylesheetIds.size) {
+          frameIdToStyleSheetIds.delete(header.frameId);
+          if (!frameIdToStyleSheetIds.size) {
+            this.#styleSheetIdsForURL.delete(url);
+          }
+        }
+      }
+    }
+    this.#originalStyleSheetText.delete(header);
+    this.#sourceMapManager.detachSourceMap(header);
+    this.dispatchEventToListeners(Events.StyleSheetRemoved, header);
+  }
+
+  getStyleSheetIdsForURL(url: Platform.DevToolsPath.UrlString): Protocol.CSS.StyleSheetId[] {
+    const frameIdToStyleSheetIds = this.#styleSheetIdsForURL.get(url);
+    if (!frameIdToStyleSheetIds) {
+      return [];
+    }
+
+    const result = [];
+    for (const styleSheetIds of frameIdToStyleSheetIds.values()) {
+      result.push(...styleSheetIds);
+    }
+    return result;
+  }
+
+  async setStyleSheetText(styleSheetId: Protocol.CSS.StyleSheetId, newText: string, majorChange: boolean):
+      Promise<string|null> {
+    const header = this.#styleSheetIdToHeader.get(styleSheetId);
+    if (!header) {
+      return 'Unknown stylesheet in CSS.setStyleSheetText';
+    }
+    newText = CSSModel.trimSourceURL(newText);
+    if (header.hasSourceURL) {
+      newText += '\n/*# sourceURL=' + header.sourceURL + ' */';
+    }
+
+    await this.ensureOriginalStyleSheetText(styleSheetId);
+    const response = await this.agent.invoke_setStyleSheetText({styleSheetId: header.id, text: newText});
+    const sourceMapURL = response.sourceMapURL as Platform.DevToolsPath.UrlString;
+
+    this.#sourceMapManager.detachSourceMap(header);
+    header.setSourceMapURL(sourceMapURL);
+    this.#sourceMapManager.attachSourceMap(header, header.sourceURL, header.sourceMapURL);
+    if (sourceMapURL === null) {
+      return 'Error in CSS.setStyleSheetText';
+    }
+    this.#domModel.markUndoableState(!majorChange);
+    this.fireStyleSheetChanged(styleSheetId);
+    return null;
+  }
+
+  async getStyleSheetText(styleSheetId: Protocol.CSS.StyleSheetId): Promise<string|null> {
+    const response = await this.agent.invoke_getStyleSheetText({styleSheetId});
+    if (response.getError()) {
+      return null;
+    }
+    const {text} = response;
+    return text && CSSModel.trimSourceURL(text);
+  }
+
+  private async onPrimaryPageChanged(
+      event: Common.EventTarget.EventTargetEvent<{frame: ResourceTreeFrame, type: PrimaryPageChangeType}>):
+      Promise<void> {
+    // If the main frame was restored from the back-forward cache, the order of CDP
+    // is different from the regular navigations. In this case, events about CSS
+    // stylesheet has already been received and they are mixed with the previous page
+    // stylesheets. Therefore, we re-enable the CSS agent to get fresh events.
+    // For the regular navigations, we can just clear the local data because events about
+    // stylesheets will arrive later.
+    if (event.data.frame.backForwardCacheDetails.restoredFromCache) {
+      await this.suspendModel();
+      await this.resumeModel();
+    } else if (event.data.type !== PrimaryPageChangeType.ACTIVATION) {
+      this.resetStyleSheets();
+      this.resetFontFaces();
+    }
+  }
+
+  private resetStyleSheets(): void {
+    const headers = [...this.#styleSheetIdToHeader.values()];
+    this.#styleSheetIdsForURL.clear();
+    this.#styleSheetIdToHeader.clear();
+    for (const header of headers) {
+      this.#sourceMapManager.detachSourceMap(header);
+      this.dispatchEventToListeners(Events.StyleSheetRemoved, header);
+    }
+  }
+
+  private resetFontFaces(): void {
+    this.#fontFaces.clear();
+  }
+
+  override async suspendModel(): Promise<void> {
+    this.#isEnabled = false;
+    await this.agent.invoke_disable();
+    this.resetStyleSheets();
+    this.resetFontFaces();
+  }
+
+  override async resumeModel(): Promise<void> {
+    return await this.enable();
+  }
+
+  setEffectivePropertyValueForNode(nodeId: Protocol.DOM.NodeId, propertyName: string, value: string): void {
+    void this.agent.invoke_setEffectivePropertyValueForNode({nodeId, propertyName, value});
+  }
+
+  cachedMatchedCascadeForNode(node: DOMNode): Promise<CSSMatchedStyles|null> {
+    if (this.#cachedMatchedCascadeNode !== node) {
+      this.discardCachedMatchedCascade();
+    }
+    this.#cachedMatchedCascadeNode = node;
+    if (!this.#cachedMatchedCascadePromise) {
+      if (node.id) {
+        this.#cachedMatchedCascadePromise = this.getMatchedStyles(node.id);
+      } else {
+        return Promise.resolve(null);
+      }
+    }
+    return this.#cachedMatchedCascadePromise;
+  }
+
+  discardCachedMatchedCascade(): void {
+    this.#cachedMatchedCascadeNode = null;
+    this.#cachedMatchedCascadePromise = null;
+  }
+
+  createCSSPropertyTracker(propertiesToTrack: Protocol.CSS.CSSComputedStyleProperty[]): CSSPropertyTracker {
+    const cssPropertyTracker = new CSSPropertyTracker(this, propertiesToTrack);
+    return cssPropertyTracker;
+  }
+
+  enableCSSPropertyTracker(cssPropertyTracker: CSSPropertyTracker): void {
+    const propertiesToTrack = cssPropertyTracker.getTrackedProperties();
+    if (propertiesToTrack.length === 0) {
+      return;
+    }
+    void this.agent.invoke_trackComputedStyleUpdates({propertiesToTrack});
+    this.#isCSSPropertyTrackingEnabled = true;
+    this.#cssPropertyTracker = cssPropertyTracker;
+    void this.pollComputedStyleUpdates();
+  }
+
+  // Since we only support one tracker at a time, this call effectively disables
+  // style tracking.
+  disableCSSPropertyTracker(): void {
+    this.#isCSSPropertyTrackingEnabled = false;
+    this.#cssPropertyTracker = null;
+    // Sending an empty list to the backend signals the close of style tracking
+    void this.agent.invoke_trackComputedStyleUpdates({propertiesToTrack: []});
+  }
+
+  private async pollComputedStyleUpdates(): Promise<void> {
+    if (this.#isTrackingRequestPending) {
+      return;
+    }
+
+    if (this.#isCSSPropertyTrackingEnabled) {
+      this.#isTrackingRequestPending = true;
+      const result = await this.agent.invoke_takeComputedStyleUpdates();
+      this.#isTrackingRequestPending = false;
+
+      if (result.getError() || !result.nodeIds || !this.#isCSSPropertyTrackingEnabled) {
+        return;
+      }
+
+      if (this.#cssPropertyTracker) {
+        this.#cssPropertyTracker.dispatchEventToListeners(
+            CSSPropertyTrackerEvents.TRACKED_CSS_PROPERTIES_UPDATED,
+            result.nodeIds.map(nodeId => this.#domModel.nodeForId(nodeId)));
+      }
+    }
+
+    if (this.#isCSSPropertyTrackingEnabled) {
+      void this.#stylePollingThrottler.schedule(this.pollComputedStyleUpdates.bind(this));
+    }
+  }
+
+  override dispose(): void {
+    this.disableCSSPropertyTracker();
+    super.dispose();
+    this.dispatchEventToListeners(Events.ModelDisposed, this);
+  }
+
+  getAgent(): ProtocolProxyApi.CSSApi {
+    return this.agent;
+  }
+}
+
+export enum Events {
+  /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
+  FontsUpdated = 'FontsUpdated',
+  MediaQueryResultChanged = 'MediaQueryResultChanged',
+  ModelWasEnabled = 'ModelWasEnabled',
+  ModelDisposed = 'ModelDisposed',
+  PseudoStateForced = 'PseudoStateForced',
+  StartingStylesStateForced = 'StartingStylesStateForced',
+  StyleSheetAdded = 'StyleSheetAdded',
+  StyleSheetChanged = 'StyleSheetChanged',
+  StyleSheetRemoved = 'StyleSheetRemoved',
+  ComputedStyleUpdated = 'ComputedStyleUpdated',
+  /* eslint-enable @typescript-eslint/naming-convention */
+}
+
+export interface StyleSheetChangedEvent {
+  styleSheetId: Protocol.CSS.StyleSheetId;
+  edit?: Edit;
+}
+
+export interface PseudoStateForcedEvent {
+  node: DOMNode;
+  pseudoClass: string;
+  enable: boolean;
+}
+
+export interface ComputedStyleUpdatedEvent {
+  nodeId: Protocol.DOM.NodeId;
+}
+
+export interface EventTypes {
+  [Events.FontsUpdated]: void;
+  [Events.MediaQueryResultChanged]: void;
+  [Events.ModelWasEnabled]: void;
+  [Events.ModelDisposed]: CSSModel;
+  [Events.PseudoStateForced]: PseudoStateForcedEvent;
+  [Events.StartingStylesStateForced]: DOMNode;
+  [Events.StyleSheetAdded]: CSSStyleSheetHeader;
+  [Events.StyleSheetChanged]: StyleSheetChangedEvent;
+  [Events.StyleSheetRemoved]: CSSStyleSheetHeader;
+  [Events.ComputedStyleUpdated]: ComputedStyleUpdatedEvent;
+}
+
+const PseudoStateMarker = 'pseudo-state-marker';
+
+export class Edit {
+  styleSheetId: string;
+  oldRange: TextUtils.TextRange.TextRange;
+  newRange: TextUtils.TextRange.TextRange;
+  newText: string;
+  payload: Object|null;
+  constructor(styleSheetId: string, oldRange: TextUtils.TextRange.TextRange, newText: string, payload: Object|null) {
+    this.styleSheetId = styleSheetId;
+    this.oldRange = oldRange;
+    this.newRange = TextUtils.TextRange.TextRange.fromEdit(oldRange, newText);
+    this.newText = newText;
+    this.payload = payload;
+  }
+}
+
+export class CSSLocation {
+  readonly #cssModel: CSSModel;
+  styleSheetId: Protocol.CSS.StyleSheetId;
+  url: Platform.DevToolsPath.UrlString;
+  lineNumber: number;
+  columnNumber: number;
+  constructor(header: CSSStyleSheetHeader, lineNumber: number, columnNumber?: number) {
+    this.#cssModel = header.cssModel();
+    this.styleSheetId = header.id;
+    this.url = header.resourceURL();
+    this.lineNumber = lineNumber;
+    this.columnNumber = columnNumber || 0;
+  }
+
+  cssModel(): CSSModel {
+    return this.#cssModel;
+  }
+
+  header(): CSSStyleSheetHeader|null {
+    return this.#cssModel.styleSheetHeaderForId(this.styleSheetId);
+  }
+}
+
+class CSSDispatcher implements ProtocolProxyApi.CSSDispatcher {
+  readonly #cssModel: CSSModel;
+  constructor(cssModel: CSSModel) {
+    this.#cssModel = cssModel;
+  }
+
+  mediaQueryResultChanged(): void {
+    this.#cssModel.mediaQueryResultChanged();
+  }
+
+  fontsUpdated({font}: Protocol.CSS.FontsUpdatedEvent): void {
+    this.#cssModel.fontsUpdated(font);
+  }
+
+  styleSheetChanged({styleSheetId}: Protocol.CSS.StyleSheetChangedEvent): void {
+    this.#cssModel.fireStyleSheetChanged(styleSheetId);
+  }
+
+  styleSheetAdded({header}: Protocol.CSS.StyleSheetAddedEvent): void {
+    this.#cssModel.styleSheetAdded(header);
+  }
+
+  styleSheetRemoved({styleSheetId}: Protocol.CSS.StyleSheetRemovedEvent): void {
+    this.#cssModel.styleSheetRemoved(styleSheetId);
+  }
+
+  computedStyleUpdated({nodeId}: Protocol.CSS.ComputedStyleUpdatedEvent): void {
+    this.#cssModel.computedStyleUpdated(nodeId);
+  }
+}
+
+class ComputedStyleLoader {
+  #cssModel: CSSModel;
+  #nodeIdToPromise = new Map<number, Promise<Map<string, string>|null>>();
+  constructor(cssModel: CSSModel) {
+    this.#cssModel = cssModel;
+  }
+
+  computedStylePromise(nodeId: Protocol.DOM.NodeId): Promise<Map<string, string>|null> {
+    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<string, string>();
+      for (const property of computedStyle) {
+        result.set(property.name, property.value);
+      }
+      return result;
+    });
+    this.#nodeIdToPromise.set(nodeId, promise);
+    return promise;
+  }
+}
+
+export class InlineStyleResult {
+  inlineStyle: CSSStyleDeclaration|null;
+  attributesStyle: CSSStyleDeclaration|null;
+  constructor(inlineStyle: CSSStyleDeclaration|null, attributesStyle: CSSStyleDeclaration|null) {
+    this.inlineStyle = inlineStyle;
+    this.attributesStyle = attributesStyle;
+  }
+}
+
+export class CSSPropertyTracker extends Common.ObjectWrapper.ObjectWrapper<CSSPropertyTrackerEventTypes> {
+  readonly #cssModel: CSSModel;
+  readonly #properties: Protocol.CSS.CSSComputedStyleProperty[];
+  constructor(cssModel: CSSModel, propertiesToTrack: Protocol.CSS.CSSComputedStyleProperty[]) {
+    super();
+    this.#cssModel = cssModel;
+    this.#properties = propertiesToTrack;
+  }
+
+  start(): void {
+    this.#cssModel.enableCSSPropertyTracker(this);
+  }
+
+  stop(): void {
+    this.#cssModel.disableCSSPropertyTracker();
+  }
+
+  getTrackedProperties(): Protocol.CSS.CSSComputedStyleProperty[] {
+    return this.#properties;
+  }
+}
+
+const StylePollingInterval = 1000;  // throttling interval for style polling, in milliseconds
+
+export const enum CSSPropertyTrackerEvents {
+  TRACKED_CSS_PROPERTIES_UPDATED = 'TrackedCSSPropertiesUpdated',
+}
+
+export interface CSSPropertyTrackerEventTypes {
+  [CSSPropertyTrackerEvents.TRACKED_CSS_PROPERTIES_UPDATED]: Array<DOMNode|null>;
+}
+
+SDKModel.register(CSSModel, {capabilities: Capability.DOM, autostart: true});
+export interface ContrastInfo {
+  backgroundColors: string[]|null;
+  computedFontSize: string;
+  computedFontWeight: string;
+}