devtools-tracing 1.1.1 → 1.2.0

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

@@ -1,1128 +0,0 @@
-// 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;
-}