chrome-devtools-frontend 1.0.938150 → 1.0.939277

package/.stylelintrc.json

@@ -12,15 +12,6 @@
     "declaration-no-important": true,
     "color-named": "never",
     "max-empty-lines": 1,
-    "property-no-vendor-prefix": [
-      true,
-      {
-        "ignoreProperties": [
-          "border-image",
-          "/^mask-/"
-        ]
-      }
-    ],
     "selector-type-no-unknown": [
       true,
       {
@@ -28,6 +19,19 @@
           "/^devtools-/"
         ]
       }
-    ]
-  }
+    ],
+    "max-line-length": null,
+    "selector-class-pattern": null,
+    "keyframes-name-pattern": null,
+    "selector-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "value-no-vendor-prefix": null,
+    "media-feature-name-no-vendor-prefix": null
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts"],
+      "customSyntax": "html"
+    }
+  ]
 }

package/config/gni/all_devtools_files.gni

@@ -30,7 +30,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/bindings_test_runner/IsolatedFilesystemTestRunner.js",
   "front_end/legacy_test_runner/bindings_test_runner/OverridesTestRunner.js",
   "front_end/legacy_test_runner/bindings_test_runner/PersistenceTestRunner.js",
-  "front_end/panels/browser_debugger/module.json",
   "front_end/third_party/codemirror/codemirror.css",
   "front_end/legacy_test_runner/console_test_runner/console_test_runner.js",
   "front_end/legacy_test_runner/coverage_test_runner/coverage_test_runner.js",

package/config/gni/devtools_grd_files.gni

@@ -340,7 +340,6 @@ grd_files_release_sources = [
   "front_end/panels/browser_debugger/browser_debugger-legacy.js",
   "front_end/panels/browser_debugger/browser_debugger-meta.js",
   "front_end/panels/browser_debugger/browser_debugger.js",
-  "front_end/panels/browser_debugger/browser_debugger_module.js",
   "front_end/panels/changes/changes-legacy.js",
   "front_end/panels/changes/changes-meta.js",
   "front_end/panels/changes/changes.js",

package/front_end/Tests.js

@@ -1331,8 +1331,8 @@
     const browserContextIds = [];
     const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
 
-    const target1 = await createIsolatedTarget(url);
-    const target2 = await createIsolatedTarget(url);
+    const target1 = await createIsolatedTarget(url, browserContextIds);
+    const target2 = await createIsolatedTarget(url, browserContextIds);
 
     const response = await targetAgent.invoke_getBrowserContexts();
     this.assertEquals(response.browserContextIds.length, 2);
@@ -1356,34 +1356,37 @@
     this.assertEquals(removedTargets.indexOf(target2) !== -1, true);
 
     this.releaseControl();
+  };
 
-    /**
-     * @param {string} url
-     * @return {!Promise<!SDK.Target>}
-     */
-    async function createIsolatedTarget(url) {
-      const {browserContextId} = await targetAgent.invoke_createBrowserContext();
-      browserContextIds.push(browserContextId);
+  /**
+   * @param {string} url
+   * @return {!Promise<!SDK.Target>}
+   */
+  async function createIsolatedTarget(url, opt_browserContextIds) {
+    const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
+    const {browserContextId} = await targetAgent.invoke_createBrowserContext();
+    if (opt_browserContextIds) {
+      opt_browserContextIds.push(browserContextId);
+    }
 
-      const {targetId} = await targetAgent.invoke_createTarget({url: 'about:blank', browserContextId});
-      await targetAgent.invoke_attachToTarget({targetId, flatten: true});
+    const {targetId} = await targetAgent.invoke_createTarget({url: 'about:blank', browserContextId});
+    await targetAgent.invoke_attachToTarget({targetId, flatten: true});
 
-      const target = self.SDK.targetManager.targets().find(target => target.id() === targetId);
-      const pageAgent = target.pageAgent();
-      await pageAgent.invoke_enable();
-      await pageAgent.invoke_navigate({url});
-      return target;
-    }
+    const target = self.SDK.targetManager.targets().find(target => target.id() === targetId);
+    const pageAgent = target.pageAgent();
+    await pageAgent.invoke_enable();
+    await pageAgent.invoke_navigate({url});
+    return target;
+  }
 
-    async function disposeBrowserContext(browserContextId) {
-      const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
-      await targetAgent.invoke_disposeBrowserContext({browserContextId});
-    }
+  async function disposeBrowserContext(browserContextId) {
+    const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
+    await targetAgent.invoke_disposeBrowserContext({browserContextId});
+  }
 
-    async function evalCode(target, code) {
-      return (await target.runtimeAgent().invoke_evaluate({expression: code})).result.value;
-    }
-  };
+  async function evalCode(target, code) {
+    return (await target.runtimeAgent().invoke_evaluate({expression: code})).result.value;
+  }
 
   TestSuite.prototype.testInputDispatchEventsToOOPIF = async function() {
     this.takeControl();
@@ -1391,14 +1394,12 @@
     await new Promise(callback => this._waitForTargets(2, callback));
 
     async function takeLogs(target) {
-      const code = `
+      return await evalCode(target, `
         (function() {
           var result = window.logs.join(' ');
           window.logs = [];
           return result;
-        })()
-      `;
-      return (await target.runtimeAgent().invoke_evaluate({expression: code})).result.value;
+        })()`);
     }
 
     let parentFrameOutput;

package/front_end/core/host/InspectorFrontendHost.ts

@@ -364,13 +364,7 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
 export let InspectorFrontendHostInstance: InspectorFrontendHostStub = window.InspectorFrontendHost;
 
 class InspectorFrontendAPIImpl {
-  readonly #debugFrontend: boolean;
-
   constructor() {
-    this.#debugFrontend = (Boolean(Root.Runtime.Runtime.queryParam('debugFrontend'))) ||
-        // @ts-ignore Compatibility hacks
-        (window['InspectorTest'] && window['InspectorTest']['debugTest']);
-
     for (const descriptor of EventDescriptors) {
       // @ts-ignore Dispatcher magic
       this[descriptor[1]] = this.dispatch.bind(this, descriptor[0], descriptor[2], descriptor[3]);
@@ -378,35 +372,27 @@ class InspectorFrontendAPIImpl {
   }
 
   private dispatch(name: symbol, signature: string[], runOnceLoaded: boolean, ...params: string[]): void {
-    if (this.#debugFrontend) {
-      setTimeout(() => innerDispatch(), 0);
-    } else {
-      innerDispatch();
-    }
-
-    function innerDispatch(): void {
-      // Single argument methods get dispatched with the param.
-      if (signature.length < 2) {
-        try {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, params[0]);
-        } catch (error) {
-          console.error(error + ' ' + error.stack);
-        }
-        return;
-      }
-      const data: {
-        [x: string]: string,
-      } = {};
-      for (let i = 0; i < signature.length; ++i) {
-        data[signature[i]] = params[i];
-      }
+    // Single argument methods get dispatched with the param.
+    if (signature.length < 2) {
       try {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, data);
+        InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, params[0]);
       } catch (error) {
         console.error(error + ' ' + error.stack);
       }
+      return;
+    }
+    const data: {
+      [x: string]: string,
+    } = {};
+    for (let i = 0; i < signature.length; ++i) {
+      data[signature[i]] = params[i];
+    }
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, data);
+    } catch (error) {
+      console.error(error + ' ' + error.stack);
     }
   }
 

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -368,4 +368,5 @@ export enum EnumeratedHistogram {
   LinearMemoryInspectorTarget = 'DevTools.LinearMemoryInspector.Target',
   Language = 'DevTools.Language',
   ConsoleShowsCorsErrors = 'DevTools.ConsoleShowsCorsErrors',
+  SyncSetting = 'DevTools.SyncSetting',
 }

package/front_end/core/host/UserMetrics.ts

@@ -245,6 +245,22 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(
         EnumeratedHistogram.ConsoleShowsCorsErrors, Number(show), 2);
   }
+
+  syncSetting(devtoolsSyncSettingEnabled: boolean): void {
+    const size = Object.keys(SyncSetting).length + 1;
+
+    InspectorFrontendHostInstance.getSyncInformation(syncInfo => {
+      let settingValue = SyncSetting.ChromeSyncDisabled;
+      if (syncInfo.isSyncActive && !syncInfo.arePreferencesSynced) {
+        settingValue = SyncSetting.ChromeSyncSettingsDisabled;
+      } else if (syncInfo.isSyncActive && syncInfo.arePreferencesSynced) {
+        settingValue = devtoolsSyncSettingEnabled ? SyncSetting.DevToolsSyncSettingEnabled :
+                                                    SyncSetting.DevToolsSyncSettingDisabled;
+      }
+
+      InspectorFrontendHostInstance.recordEnumeratedHistogram(EnumeratedHistogram.SyncSetting, settingValue, size);
+    });
+  }
 }
 
 // Codes below are used to collect UMA histograms in the Chromium port.
@@ -800,3 +816,12 @@ export const Language: Record<string, number> = {
   'zh-TW': 81,
   'zu': 82,
 };
+
+// TODO(crbug.com/1167717): Make this a const enum again
+// eslint-disable-next-line rulesdir/const_enum
+export enum SyncSetting {
+  ChromeSyncDisabled = 1,
+  ChromeSyncSettingsDisabled = 2,
+  DevToolsSyncSettingDisabled = 3,
+  DevToolsSyncSettingEnabled = 4,
+}

package/front_end/core/i18n/locales/en-US.json

@@ -935,6 +935,9 @@
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssColorgamutMediaFeature": {
     "message": "Forces CSS color-gamut media feature"
   },
+  "entrypoints/inspector_main/RenderingOptions.ts | forcesCssForcedColors": {
+    "message": "Forces CSS forced-colors media feature"
+  },
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssPreferscolorschemeMedia": {
     "message": "Forces CSS prefers-color-scheme media feature"
   },
@@ -9147,7 +9150,7 @@
     "message": "Coverage: n/a"
   },
   "panels/sources/CoveragePlugin.ts | coverageS": {
-    "message": "Coverage: {PH1} %"
+    "message": "Coverage: {PH1}"
   },
   "panels/sources/CoveragePlugin.ts | showDetails": {
     "message": "Show Details"

package/front_end/core/i18n/locales/en-XL.json

@@ -935,6 +935,9 @@
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssColorgamutMediaFeature": {
     "message": "F̂ór̂ćêś ĈŚŜ color-gamut ḿêd́îá f̂éât́ûŕê"
   },
+  "entrypoints/inspector_main/RenderingOptions.ts | forcesCssForcedColors": {
+    "message": "F̂ór̂ćêś ĈŚŜ f́ôŕĉéd̂-ćôĺôŕŝ ḿêd́îá f̂éât́ûŕê"
+  },
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssPreferscolorschemeMedia": {
     "message": "F̂ór̂ćêś ĈŚŜ prefers-color-scheme ḿêd́îá f̂éât́ûŕê"
   },
@@ -9147,7 +9150,7 @@
     "message": "Ĉóv̂ér̂áĝé: n̂/á"
   },
   "panels/sources/CoveragePlugin.ts | coverageS": {
-    "message": "Ĉóv̂ér̂áĝé: {PH1} %"
+    "message": "Ĉóv̂ér̂áĝé: {PH1}"
   },
   "panels/sources/CoveragePlugin.ts | showDetails": {
     "message": "Ŝh́ôẃ D̂ét̂áîĺŝ"

package/front_end/core/sdk/CSSModel.ts

@@ -47,6 +47,7 @@ import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
 import {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 import type {DOMNode} from './DOMModel.js';
 import {DOMModel} from './DOMModel.js';
+import type {ResourceTreeFrame} from './ResourceTreeModel.js';
 import {Events as ResourceTreeModelEvents, ResourceTreeModel} from './ResourceTreeModel.js';
 import type {Target} from './Target.js';
 import {Capability} from './Target.js';
@@ -54,37 +55,37 @@ import {SDKModel} from './SDKModel.js';
 import {SourceMapManager} from './SourceMapManager.js';
 
 export class CSSModel extends SDKModel<EventTypes> {
-  #isEnabledInternal: boolean;
-  #cachedMatchedCascadeNode: DOMNode|null;
-  #cachedMatchedCascadePromise: Promise<CSSMatchedStyles|null>|null;
-  readonly #domModelInternal: DOMModel;
-  readonly #sourceMapManagerInternal: SourceMapManager<CSSStyleSheetHeader>;
-  agent: ProtocolProxyApi.CSSApi;
-  readonly #styleLoader: ComputedStyleLoader;
+  readonly agent: ProtocolProxyApi.CSSApi;
+  readonly #domModel: DOMModel;
+  readonly #fontFaces: Map<string, CSSFontFace>;
+  readonly #originalStyleSheetText: Map<CSSStyleSheetHeader, Promise<string|null>>;
   readonly #resourceTreeModel: ResourceTreeModel|null;
-  #styleSheetIdToHeader: Map<Protocol.CSS.StyleSheetId, CSSStyleSheetHeader>;
+  readonly #sourceMapManager: SourceMapManager<CSSStyleSheetHeader>;
+  readonly #styleLoader: ComputedStyleLoader;
+  readonly #stylePollingThrottler: Common.Throttler.Throttler;
   readonly #styleSheetIdsForURL: Map<string, Map<string, Set<Protocol.CSS.StyleSheetId>>>;
-  readonly #originalStyleSheetTextInternal: Map<CSSStyleSheetHeader, Promise<string|null>>;
-  #isRuleUsageTrackingEnabled: boolean;
-  readonly #fontFacesInternal: Map<string, CSSFontFace>;
+  readonly #styleSheetIdToHeader: Map<Protocol.CSS.StyleSheetId, CSSStyleSheetHeader>;
+  #cachedMatchedCascadeNode: DOMNode|null;
+  #cachedMatchedCascadePromise: Promise<CSSMatchedStyles|null>|null;
   #cssPropertyTracker: CSSPropertyTracker|null;
   #isCSSPropertyTrackingEnabled: boolean;
+  #isEnabled: boolean;
+  #isRuleUsageTrackingEnabled: boolean;
   #isTrackingRequestPending: boolean;
-  readonly #trackedCSSProperties: Map<number, Protocol.CSS.CSSComputedStyleProperty[]>;
-  readonly #stylePollingThrottler: Common.Throttler.Throttler;
 
   constructor(target: Target) {
     super(target);
-    this.#isEnabledInternal = false;
+    this.#isEnabled = false;
     this.#cachedMatchedCascadeNode = null;
     this.#cachedMatchedCascadePromise = null;
-    this.#domModelInternal = (target.model(DOMModel) as DOMModel);
-    this.#sourceMapManagerInternal = new SourceMapManager(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.MainFrameNavigated, this.resetStyleSheets, this);
+      this.#resourceTreeModel.addEventListener(
+          ResourceTreeModelEvents.MainFrameNavigated, this.onMainFrameNavigated, this);
     }
     target.registerCSSDispatcher(new CSSDispatcher(this));
     if (!target.suspended()) {
@@ -93,23 +94,21 @@ export class CSSModel extends SDKModel<EventTypes> {
     this.#styleSheetIdToHeader = new Map();
     this.#styleSheetIdsForURL = new Map();
 
-    this.#originalStyleSheetTextInternal = new Map();
+    this.#originalStyleSheetText = new Map();
 
     this.#isRuleUsageTrackingEnabled = false;
 
-    this.#fontFacesInternal = new Map();
+    this.#fontFaces = new Map();
 
     this.#cssPropertyTracker = null;  // TODO: support multiple trackers when we refactor the backend
     this.#isCSSPropertyTrackingEnabled = false;
     this.#isTrackingRequestPending = false;
-    this.#trackedCSSProperties = new Map();
     this.#stylePollingThrottler = new Common.Throttler.Throttler(StylePollingInterval);
 
-    this.#sourceMapManagerInternal.setEnabled(
-        Common.Settings.Settings.instance().moduleSetting('cssSourceMapsEnabled').get());
+    this.#sourceMapManager.setEnabled(Common.Settings.Settings.instance().moduleSetting('cssSourceMapsEnabled').get());
     Common.Settings.Settings.instance()
         .moduleSetting('cssSourceMapsEnabled')
-        .addChangeListener(event => this.#sourceMapManagerInternal.setEnabled((event.data as boolean)));
+        .addChangeListener(event => this.#sourceMapManager.setEnabled((event.data as boolean)));
   }
 
   headersForSourceURL(sourceURL: string): CSSStyleSheetHeader[] {
@@ -148,7 +147,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   }
 
   sourceMapManager(): SourceMapManager<CSSStyleSheetHeader> {
-    return this.#sourceMapManagerInternal;
+    return this.#sourceMapManager;
   }
 
   static trimSourceURL(text: string): string {
@@ -172,7 +171,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   }
 
   domModel(): DOMModel {
-    return this.#domModelInternal;
+    return this.#domModel;
   }
 
   async setStyleText(
@@ -187,7 +186,7 @@ export class CSSModel extends SDKModel<EventTypes> {
         return false;
       }
 
-      this.#domModelInternal.markUndoableState(!majorChange);
+      this.#domModel.markUndoableState(!majorChange);
       const edit = new Edit(styleSheetId, range, text, styles[0]);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -207,7 +206,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!selectorList) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, text, selectorList);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -227,7 +226,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!keyText) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, text, keyText);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -268,12 +267,12 @@ export class CSSModel extends SDKModel<EventTypes> {
   }
 
   isEnabled(): boolean {
-    return this.#isEnabledInternal;
+    return this.#isEnabled;
   }
 
   private async enable(): Promise<void> {
     await this.agent.invoke_enable();
-    this.#isEnabledInternal = true;
+    this.#isEnabled = true;
     if (this.#isRuleUsageTrackingEnabled) {
       await this.startCoverage();
     }
@@ -287,7 +286,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       return null;
     }
 
-    const node = this.#domModelInternal.nodeForId(nodeId);
+    const node = this.#domModel.nodeForId(nodeId);
     if (!node) {
       return null;
     }
@@ -399,7 +398,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!media) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, newMediaText, media);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -421,7 +420,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!containerQuery) {
         return false;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, range, newContainerQueryText, containerQuery);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return true;
@@ -439,7 +438,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (!rule) {
         return null;
       }
-      this.#domModelInternal.markUndoableState();
+      this.#domModel.markUndoableState();
       const edit = new Edit(styleSheetId, ruleLocation, ruleText, rule);
       this.fireStyleSheetChanged(styleSheetId, edit);
       return new CSSStyleRule(this, rule);
@@ -477,13 +476,13 @@ export class CSSModel extends SDKModel<EventTypes> {
 
   fontsUpdated(fontFace?: Protocol.CSS.FontFace|null): void {
     if (fontFace) {
-      this.#fontFacesInternal.set(fontFace.src, new CSSFontFace(fontFace));
+      this.#fontFaces.set(fontFace.src, new CSSFontFace(fontFace));
     }
     this.dispatchEventToListeners(Events.FontsUpdated);
   }
 
   fontFaces(): CSSFontFace[] {
-    return [...this.#fontFacesInternal.values()];
+    return [...this.#fontFaces.values()];
   }
 
   styleSheetHeaderForId(id: Protocol.CSS.StyleSheetId): CSSStyleSheetHeader|null {
@@ -503,10 +502,10 @@ export class CSSModel extends SDKModel<EventTypes> {
     if (!header) {
       return Promise.resolve(null);
     }
-    let promise = this.#originalStyleSheetTextInternal.get(header);
+    let promise = this.#originalStyleSheetText.get(header);
     if (!promise) {
       promise = this.getStyleSheetText(header.id);
-      this.#originalStyleSheetTextInternal.set(header, promise);
+      this.#originalStyleSheetText.set(header, promise);
       this.originalContentRequestedForTest(header);
     }
     return promise;
@@ -541,8 +540,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       }
       styleSheetIds.add(styleSheetHeader.id);
     }
-    this.#sourceMapManagerInternal.attachSourceMap(
-        styleSheetHeader, styleSheetHeader.sourceURL, styleSheetHeader.sourceMapURL);
+    this.#sourceMapManager.attachSourceMap(styleSheetHeader, styleSheetHeader.sourceURL, styleSheetHeader.sourceMapURL);
     this.dispatchEventToListeners(Events.StyleSheetAdded, styleSheetHeader);
   }
 
@@ -569,8 +567,8 @@ export class CSSModel extends SDKModel<EventTypes> {
         }
       }
     }
-    this.#originalStyleSheetTextInternal.delete(header);
-    this.#sourceMapManagerInternal.detachSourceMap(header);
+    this.#originalStyleSheetText.delete(header);
+    this.#sourceMapManager.detachSourceMap(header);
     this.dispatchEventToListeners(Events.StyleSheetRemoved, header);
   }
 
@@ -602,13 +600,13 @@ export class CSSModel extends SDKModel<EventTypes> {
     const response = await this.agent.invoke_setStyleSheetText({styleSheetId: header.id, text: newText});
     const sourceMapURL = response.sourceMapURL;
 
-    this.#sourceMapManagerInternal.detachSourceMap(header);
+    this.#sourceMapManager.detachSourceMap(header);
     header.setSourceMapURL(sourceMapURL);
-    this.#sourceMapManagerInternal.attachSourceMap(header, header.sourceURL, header.sourceMapURL);
+    this.#sourceMapManager.attachSourceMap(header, header.sourceURL, header.sourceMapURL);
     if (sourceMapURL === null) {
       return 'Error in CSS.setStyleSheetText';
     }
-    this.#domModelInternal.markUndoableState(!majorChange);
+    this.#domModel.markUndoableState(!majorChange);
     this.fireStyleSheetChanged(styleSheetId);
     return null;
   }
@@ -622,22 +620,38 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
   }
 
+  private async onMainFrameNavigated(event: Common.EventTarget.EventTargetEvent<ResourceTreeFrame>): 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 navigatons, we can just clear the local data because events about
+    // stylesheets will arrive later.
+    if (event.data.backForwardCacheDetails.restoredFromCache) {
+      await this.suspendModel();
+      await this.resumeModel();
+    } else {
+      this.resetStyleSheets();
+      this.resetFontFaces();
+    }
+  }
+
   private resetStyleSheets(): void {
     const headers = [...this.#styleSheetIdToHeader.values()];
     this.#styleSheetIdsForURL.clear();
     this.#styleSheetIdToHeader.clear();
     for (const header of headers) {
-      this.#sourceMapManagerInternal.detachSourceMap(header);
+      this.#sourceMapManager.detachSourceMap(header);
       this.dispatchEventToListeners(Events.StyleSheetRemoved, header);
     }
   }
 
   private resetFontFaces(): void {
-    this.#fontFacesInternal.clear();
+    this.#fontFaces.clear();
   }
 
   async suspendModel(): Promise<void> {
-    this.#isEnabledInternal = false;
+    this.#isEnabled = false;
     await this.agent.invoke_disable();
     this.resetStyleSheets();
     this.resetFontFaces();
@@ -713,7 +727,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       if (this.#cssPropertyTracker) {
         this.#cssPropertyTracker.dispatchEventToListeners(
             CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated,
-            result.nodeIds.map(nodeId => this.#domModelInternal.nodeForId(nodeId)));
+            result.nodeIds.map(nodeId => this.#domModel.nodeForId(nodeId)));
       }
     }
 
@@ -725,7 +739,7 @@ export class CSSModel extends SDKModel<EventTypes> {
   dispose(): void {
     this.disableCSSPropertyTracker();
     super.dispose();
-    this.#sourceMapManagerInternal.dispose();
+    this.#sourceMapManager.dispose();
   }
 
   getAgent(): ProtocolProxyApi.CSSApi {

package/front_end/core/sdk/EmulationModel.ts

@@ -76,6 +76,8 @@ export class EmulationModel extends SDKModel<void> {
         Common.Settings.Settings.instance().moduleSetting<string>('emulatedCSSMediaFeatureColorGamut');
     const mediaFeaturePrefersColorSchemeSetting =
         Common.Settings.Settings.instance().moduleSetting<string>('emulatedCSSMediaFeaturePrefersColorScheme');
+    const mediaFeatureForcedColorsSetting =
+        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeatureForcedColors');
     const mediaFeaturePrefersContrastSetting =
         Common.Settings.Settings.instance().moduleSetting<string>('emulatedCSSMediaFeaturePrefersContrast');
     const mediaFeaturePrefersReducedDataSetting =
@@ -90,6 +92,7 @@ export class EmulationModel extends SDKModel<void> {
       ['type', mediaTypeSetting.get()],
       ['color-gamut', mediaFeatureColorGamutSetting.get()],
       ['prefers-color-scheme', mediaFeaturePrefersColorSchemeSetting.get()],
+      ['forced-colors', mediaFeatureForcedColorsSetting.get()],
       ['prefers-contrast', mediaFeaturePrefersContrastSetting.get()],
       ['prefers-reduced-data', mediaFeaturePrefersReducedDataSetting.get()],
       ['prefers-reduced-motion', mediaFeaturePrefersReducedMotionSetting.get()],
@@ -106,6 +109,10 @@ export class EmulationModel extends SDKModel<void> {
       this.#mediaConfiguration.set('prefers-color-scheme', mediaFeaturePrefersColorSchemeSetting.get());
       this.updateCssMedia();
     });
+    mediaFeatureForcedColorsSetting.addChangeListener(() => {
+      this.#mediaConfiguration.set('forced-colors', mediaFeatureForcedColorsSetting.get());
+      this.updateCssMedia();
+    });
     mediaFeaturePrefersContrastSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('prefers-contrast', mediaFeaturePrefersContrastSetting.get());
       this.updateCssMedia();
@@ -367,6 +374,10 @@ export class EmulationModel extends SDKModel<void> {
         name: 'prefers-color-scheme',
         value: this.#mediaConfiguration.get('prefers-color-scheme') ?? '',
       },
+      {
+        name: 'forced-colors',
+        value: this.#mediaConfiguration.get('forced-colors') ?? '',
+      },
       {
         name: 'prefers-contrast',
         value: this.#mediaConfiguration.get('prefers-contrast') ?? '',