chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/core/sdk/OverlayModel.ts

@@ -15,7 +15,7 @@ import {OverlayPersistentHighlighter} from './OverlayPersistentHighlighter.js';
 import type {RemoteObject} from './RemoteObject.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target} from './Target.js';
-import {TargetManager} from './TargetManager.js';
+import type {TargetManager} from './TargetManager.js';
 
 const UIStrings = {
   /**
@@ -49,6 +49,19 @@ export interface Hinge {
   contentColor: HighlightColor;
   outlineColor: HighlightColor;
 }
+export interface BaseDisplayCutout {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  shape: Protocol.Overlay.DisplayCutoutShape;
+  contentColor?: HighlightColor;
+}
+export type DisplayCutout =
+    BaseDisplayCutout&({shape: Protocol.Overlay.DisplayCutoutShape.Rectangle}|
+                       {shape: Protocol.Overlay.DisplayCutoutShape.Pill, borderRadius: number}|
+                       {shape: Protocol.Overlay.DisplayCutoutShape.Notch, upperRadius: number, lowerRadius: number}|
+                       {shape: Protocol.Overlay.DisplayCutoutShape.Circle, cx: number, cy: number, radius: number});
 
 export const enum EmulatedOSType {
   WINDOWS = 'Windows',
@@ -178,27 +191,27 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     }
   }
 
-  static hideDOMNodeHighlight(targetManager: TargetManager = TargetManager.instance()): void {
+  static hideDOMNodeHighlight(targetManager: TargetManager): void {
     for (const overlayModel of targetManager.models(OverlayModel)) {
       overlayModel.delayedHideHighlight(0);
     }
   }
 
-  static async muteHighlight(targetManager: TargetManager = TargetManager.instance()): Promise<void[]> {
+  static async muteHighlight(targetManager: TargetManager): Promise<void[]> {
     return await Promise.all(targetManager.models(OverlayModel).map(model => model.suspendModel()));
   }
 
-  static async unmuteHighlight(targetManager: TargetManager = TargetManager.instance()): Promise<void[]> {
+  static async unmuteHighlight(targetManager: TargetManager): Promise<void[]> {
     return await Promise.all(targetManager.models(OverlayModel).map(model => model.resumeModel()));
   }
 
-  static highlightRect(rect: HighlightRect, targetManager: TargetManager = TargetManager.instance()): void {
+  static highlightRect(rect: HighlightRect, targetManager: TargetManager): void {
     for (const overlayModel of targetManager.models(OverlayModel)) {
       void overlayModel.highlightRect(rect);
     }
   }
 
-  static clearHighlight(targetManager: TargetManager = TargetManager.instance()): void {
+  static clearHighlight(targetManager: TargetManager): void {
     for (const overlayModel of targetManager.models(OverlayModel)) {
       void overlayModel.clearHighlight();
     }
@@ -497,6 +510,32 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     }
   }
 
+  showDisplayCutout(cutout: DisplayCutout|null): void {
+    if (cutout) {
+      const {x, y, width, height, shape, contentColor} = cutout;
+      const displayCutoutConfig: Protocol.Overlay.DisplayCutoutConfig = {
+        rect: {x, y, width, height},
+        shape,
+        contentColor,
+      };
+      if (shape === Protocol.Overlay.DisplayCutoutShape.Pill) {
+        displayCutoutConfig.borderRadius = cutout.borderRadius;
+      } else if (shape === Protocol.Overlay.DisplayCutoutShape.Notch) {
+        displayCutoutConfig.upperRadius = cutout.upperRadius;
+        displayCutoutConfig.lowerRadius = cutout.lowerRadius;
+      } else if (shape === Protocol.Overlay.DisplayCutoutShape.Circle) {
+        displayCutoutConfig.cx = cutout.cx;
+        displayCutoutConfig.cy = cutout.cy;
+        displayCutoutConfig.radius = cutout.radius;
+      }
+      void this.overlayAgent.invoke_setShowDisplayCutout({
+        displayCutoutConfig,
+      });
+    } else {
+      void this.overlayAgent.invoke_setShowDisplayCutout({});
+    }
+  }
+
   setWindowControlsPlatform(selectedPlatform: EmulatedOSType): void {
     this.#windowControls.selectedPlatform = selectedPlatform;
   }

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -18,7 +18,7 @@ import {SDKModel} from './SDKModel.js';
 import {SecurityOriginManager} from './SecurityOriginManager.js';
 import {StorageKeyManager} from './StorageKeyManager.js';
 import {Capability, type Target, Type} from './Target.js';
-import {TargetManager} from './TargetManager.js';
+import type {TargetManager} from './TargetManager.js';
 
 export class ResourceTreeModel extends SDKModel<EventTypes> {
   readonly agent: ProtocolProxyApi.PageApi;
@@ -74,16 +74,16 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     return request.frameId ? resourceTreeModel.frameForId(request.frameId) : null;
   }
 
-  static frames(): ResourceTreeFrame[] {
+  static frames(targetManager: TargetManager): ResourceTreeFrame[] {
     const result = [];
-    for (const resourceTreeModel of TargetManager.instance().models(ResourceTreeModel)) {
+    for (const resourceTreeModel of targetManager.models(ResourceTreeModel)) {
       result.push(...resourceTreeModel.frames());
     }
     return result;
   }
 
-  static resourceForURL(url: Platform.DevToolsPath.UrlString): Resource|null {
-    for (const resourceTreeModel of TargetManager.instance().models(ResourceTreeModel)) {
+  static resourceForURL(targetManager: TargetManager, url: Platform.DevToolsPath.UrlString): Resource|null {
+    for (const resourceTreeModel of targetManager.models(ResourceTreeModel)) {
       const mainFrame = resourceTreeModel.mainFrame;
       // Workers call into this with no #frames available.
       const result = mainFrame ? mainFrame.resourceForURL(url) : null;
@@ -94,8 +94,7 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     return null;
   }
 
-  static reloadAllPages(bypassCache?: boolean, scriptToEvaluateOnLoad?: string,
-                        targetManager: TargetManager = TargetManager.instance()): void {
+  static reloadAllPages(targetManager: TargetManager, bypassCache?: boolean, scriptToEvaluateOnLoad?: string): void {
     for (const resourceTreeModel of targetManager.models(ResourceTreeModel)) {
       if (resourceTreeModel.target().parentTarget()?.type() !== Type.FRAME) {
         resourceTreeModel.reloadPage(bypassCache, scriptToEvaluateOnLoad);

package/front_end/core/sdk/ScreenCaptureModel.ts

@@ -145,9 +145,9 @@ export class ScreenCaptureModel extends SDKModel<void> implements ProtocolProxyA
         throw new Error('Unexpected or unspecified screnshotMode');
     }
 
-    await OverlayModel.muteHighlight();
+    await OverlayModel.muteHighlight(this.target().targetManager());
     const result = await this.#agent.invoke_captureScreenshot(properties);
-    await OverlayModel.unmuteHighlight();
+    await OverlayModel.unmuteHighlight(this.target().targetManager());
     return result.data;
   }
 

package/front_end/core/sdk/ServerTiming.ts

@@ -69,14 +69,14 @@ export class ServerTiming {
     this.description = description;
   }
 
-  static parseHeaders(headers: NameValue[]): ServerTiming[]|null {
+  static parseHeaders(headers: NameValue[], devToolsConsole: Common.Console.Console): ServerTiming[]|null {
     const rawServerTimingHeaders = headers.filter(item => item.name.toLowerCase() === 'server-timing');
     if (!rawServerTimingHeaders.length) {
       return null;
     }
 
     const serverTimings = rawServerTimingHeaders.reduce<ServerTiming[]>((timings, header) => {
-      const timing = this.createFromHeaderValue(header.value);
+      const timing = this.createFromHeaderValue(header.value, devToolsConsole);
       timings.push(...timing.map(function(entry) {
         return new ServerTiming(entry.name, entry.dur ?? null, entry.desc ?? '');
       }));
@@ -85,7 +85,9 @@ export class ServerTiming {
     return serverTimings;
   }
 
-  static createFromHeaderValue(valueString: string): ServerTimingMetric[] {
+  static createFromHeaderValue(valueString: string,
+                               devToolsConsole: Common.Console.Console = new Common.Console.Console()):
+      ServerTimingMetric[] {
     function trimLeadingWhiteSpace(): void {
       valueString = valueString.replace(/^\s*/, '');
     }
@@ -158,7 +160,7 @@ export class ServerTiming {
       const entry: ServerTimingMetric = {name};
 
       if (valueString.charAt(0) === '=') {
-        this.showWarning(i18nString(UIStrings.deprecatedSyntaxFoundPleaseUse, {PH1: name}));
+        this.#showWarning(i18nString(UIStrings.deprecatedSyntaxFoundPleaseUse, {PH1: name}), devToolsConsole);
       }
 
       while (consumeDelimiter(';')) {
@@ -168,7 +170,7 @@ export class ServerTiming {
         }
 
         paramName = paramName.toLowerCase();
-        const parseParameter = this.getParserForParameter(paramName);
+        const parseParameter = this.#getParserForParameter(paramName, devToolsConsole);
         let paramValue: (string|null)|null = null;
         if (consumeDelimiter('=')) {
           // always parse the value, even if we don't recognize the parameter #name
@@ -179,19 +181,19 @@ export class ServerTiming {
         if (parseParameter) {
           // paramName is valid
           if (entry.hasOwnProperty(paramName)) {
-            this.showWarning(i18nString(UIStrings.duplicateParameterSIgnored, {PH1: paramName}));
+            this.#showWarning(i18nString(UIStrings.duplicateParameterSIgnored, {PH1: paramName}), devToolsConsole);
             continue;
           }
 
           if (paramValue === null) {
-            this.showWarning(i18nString(UIStrings.noValueFoundForParameterS, {PH1: paramName}));
+            this.#showWarning(i18nString(UIStrings.noValueFoundForParameterS, {PH1: paramName}), devToolsConsole);
           }
 
           parseParameter.call(this, entry, paramValue);
         } else {
           // paramName is not valid
           // TODO(paulirish): consider showing other included params, like `start`: https://github.com/w3c/server-timing/issues/43
-          this.showWarning(i18nString(UIStrings.unrecognizedParameterS, {PH1: paramName}));
+          this.#showWarning(i18nString(UIStrings.unrecognizedParameterS, {PH1: paramName}), devToolsConsole);
         }
       }
 
@@ -219,12 +221,13 @@ export class ServerTiming {
     }
 
     if (valueString.length) {
-      this.showWarning(i18nString(UIStrings.extraneousTrailingCharacters));
+      this.#showWarning(i18nString(UIStrings.extraneousTrailingCharacters), devToolsConsole);
     }
     return result;
   }
 
-  static getParserForParameter(paramName: string): ((arg0: ServerTimingMetric, arg1: string|null) => void)|null {
+  static #getParserForParameter(paramName: string, devToolsConsole: Common.Console.Console):
+      ((arg0: ServerTimingMetric, arg1: string|null) => void)|null {
     switch (paramName) {
       case 'dur': {
         function durParser(entry: ServerTimingMetric, paramValue: string|null): void {
@@ -232,7 +235,8 @@ export class ServerTiming {
           if (paramValue !== null) {
             const duration = parseFloat(paramValue);
             if (isNaN(duration)) {
-              ServerTiming.showWarning(i18nString(UIStrings.unableToParseSValueS, {PH1: paramName, PH2: paramValue}));
+              ServerTiming.#showWarning(i18nString(UIStrings.unableToParseSValueS, {PH1: paramName, PH2: paramValue}),
+                                        devToolsConsole);
               return;
             }
             entry.dur = duration;
@@ -254,7 +258,7 @@ export class ServerTiming {
     }
   }
 
-  static showWarning(msg: string): void {
-    Common.Console.Console.instance().warn(`ServerTiming: ${msg}`);
+  static #showWarning(msg: string, devToolsConsole: Common.Console.Console): void {
+    devToolsConsole.warn(`ServerTiming: ${msg}`);
   }
 }

package/front_end/core/sdk/ServiceWorkerCacheModel.ts

@@ -28,6 +28,7 @@ export class ServiceWorkerCacheModel extends SDKModel<EventTypes> implements Pro
   readonly cacheAgent: ProtocolProxyApi.CacheStorageApi;
   readonly #storageAgent: ProtocolProxyApi.StorageApi;
   readonly #storageBucketModel: StorageBucketsModel;
+  readonly #console: Common.Console.Console;
 
   readonly #caches = new Map<string, Cache>();
   readonly #storageKeysTracked = new Set<string>();
@@ -48,6 +49,7 @@ export class ServiceWorkerCacheModel extends SDKModel<EventTypes> implements Pro
     this.cacheAgent = target.cacheStorageAgent();
     this.#storageAgent = target.storageAgent();
     this.#storageBucketModel = (target.model(StorageBucketsModel) as StorageBucketsModel);
+    this.#console = target.targetManager().getConsole();
   }
 
   enable(): void {
@@ -101,8 +103,8 @@ export class ServiceWorkerCacheModel extends SDKModel<EventTypes> implements Pro
   async deleteCacheEntry(cache: Cache, request: string): Promise<void> {
     const response = await this.cacheAgent.invoke_deleteEntry({cacheId: cache.cacheId, request});
     if (response.getError()) {
-      Common.Console.Console.instance().error(i18nString(
-          UIStrings.serviceworkercacheagentError, {PH1: cache.toString(), PH2: String(response.getError())}));
+      this.#console.error(i18nString(UIStrings.serviceworkercacheagentError,
+                                     {PH1: cache.toString(), PH2: String(response.getError())}));
       return;
     }
   }

package/front_end/core/sdk/ServiceWorkerManager.ts

@@ -8,6 +8,7 @@ import * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
 import type * as Platform from '../platform/platform.js';
 
+import {MultitargetNetworkManager} from './NetworkManager.js';
 import {Events as RuntimeModelEvents, type ExecutionContext, RuntimeModel} from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target, Type} from './Target.js';
@@ -70,23 +71,36 @@ export class ServiceWorkerManager extends SDKModel<EventTypes> {
   readonly #registrations = new Map<string, ServiceWorkerRegistration>();
   #enabled = false;
   readonly #forceUpdateSetting: Common.Settings.Setting<boolean>;
+  readonly #networkManager: MultitargetNetworkManager;
 
   constructor(target: Target) {
     super(target);
+    this.#networkManager = target.targetManager().getNetworkManager();
     target.registerServiceWorkerDispatcher(new ServiceWorkerDispatcher(this));
     this.#agent = target.serviceWorkerAgent();
     void this.enable();
-    this.#forceUpdateSetting = this.target()
-                                   .targetManager()
-                                   .context.get(Common.Settings.Settings)
-                                   .createSetting('service-worker-update-on-reload', false);
+    this.#forceUpdateSetting = target.targetManager().settings.createSetting('service-worker-update-on-reload', false);
     if (this.#forceUpdateSetting.get()) {
       this.forceUpdateSettingChanged();
     }
     this.#forceUpdateSetting.addChangeListener(this.forceUpdateSettingChanged, this);
+    this.#networkManager.addEventListener(
+        MultitargetNetworkManager.Events.CONDITIONS_CHANGED,
+        this.forceUpdateSettingChanged,
+        this,
+    );
     new ServiceWorkerContextNamer(target, this);
   }
 
+  override dispose(): void {
+    this.#networkManager.removeEventListener(
+        MultitargetNetworkManager.Events.CONDITIONS_CHANGED,
+        this.forceUpdateSettingChanged,
+        this,
+    );
+    super.dispose();
+  }
+
   async enable(): Promise<void> {
     if (this.#enabled) {
       return;
@@ -237,7 +251,7 @@ export class ServiceWorkerManager extends SDKModel<EventTypes> {
   }
 
   private forceUpdateSettingChanged(): void {
-    const forceUpdateOnPageLoad = this.#forceUpdateSetting.get();
+    const forceUpdateOnPageLoad = this.#forceUpdateSetting.get() && !this.#networkManager.isOffline();
     void this.#agent.invoke_setForceUpdateOnPageLoad({forceUpdateOnPageLoad});
   }
 }

package/front_end/core/sdk/TargetManager.ts

@@ -12,6 +12,7 @@ import * as Root from '../root/root.js';
 
 import {FrameManager} from './FrameManager.js';
 import {MultitargetNetworkManager} from './NetworkManager.js';
+import {PageResourceLoader} from './PageResourceLoader.js';
 import {type RegistrationInfo, SDKModel, type SDKModelConstructor} from './SDKModel.js';
 import {Target, Type as TargetType} from './Target.js';
 
@@ -58,6 +59,14 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     return this.context.get(MultitargetNetworkManager);
   }
 
+  // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
+  getPageResourceLoader(): PageResourceLoader {
+    if ('has' in this.context && typeof this.context.has === 'function' && !this.context.has(PageResourceLoader)) {
+      return PageResourceLoader.instance();
+    }
+    return this.context.get(PageResourceLoader);
+  }
+
   /* eslint-disable @typescript-eslint/no-explicit-any */
   #modelListeners: Platform.MapUtilities.Multimap<string|symbol|number, {
     modelClass: SDKModelConstructor,
@@ -135,7 +144,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   async #waitForPromiseWithTimeout(promise: Promise<void>, timeoutMessage: string): Promise<void> {
     const {promise: timeoutPromise, resolve: timeoutResolve} = Promise.withResolvers<void>();
     const timeoutId = globalThis.setTimeout(() => {
-      Common.Console.Console.instance().warn(timeoutMessage);
+      this.getConsole().warn(timeoutMessage);
       timeoutResolve();
     }, 2000);
     await Promise.race([promise, timeoutPromise]);

package/front_end/core/sdk/TraceObject.ts

@@ -10,6 +10,7 @@ import type {NetworkRequest} from './NetworkRequest.js';
 import type {RehydratingResource} from './RehydratingObject.js';
 import {ResourceTreeModel} from './ResourceTreeModel.js';
 import type {SourceMapV3} from './SourceMap.js';
+import type {TargetManager} from './TargetManager.js';
 
 interface TraceObjectWithNoMetadata {
   readonly traceEvents: TraceObject['traceEvents'];
@@ -57,13 +58,14 @@ export class RevealableNetworkRequest {
   }
 
   // Only Trace.Types.Events.SyntheticNetworkRequest are passed in, but we can't depend on that type from SDK
-  static create(event: unknown): RevealableNetworkRequest|null {
+  static create(targetManager: TargetManager, event: unknown): RevealableNetworkRequest|null {
     const syntheticNetworkRequest = event;
     // @ts-expect-error We don't have type checking here to confirm these events have .args.data.url.
     const url = syntheticNetworkRequest.args.data.url as Platform.DevToolsPath.UrlString;
     const urlWithoutHash = Common.ParsedURL.ParsedURL.urlWithoutHash(url) as Platform.DevToolsPath.UrlString;
 
-    const resource = ResourceTreeModel.resourceForURL(url) ?? ResourceTreeModel.resourceForURL(urlWithoutHash);
+    const resource = ResourceTreeModel.resourceForURL(targetManager, url) ??
+        ResourceTreeModel.resourceForURL(targetManager, urlWithoutHash);
     const sdkNetworkRequest = resource?.request;
     return sdkNetworkRequest ? new RevealableNetworkRequest(sdkNetworkRequest) : null;
   }

package/front_end/core/sdk/sdk-meta.ts

@@ -166,6 +166,71 @@ const UIStrings = {
    * @description A drop-down menu option to do not emulate css media type
    */
   noEmulation: 'No emulation',
+  /**
+   * @description Text for the CPU Pressure type to simulate on a device.
+   */
+  cpuPressure: 'CPU Pressure',
+  /**
+   * @description Title of an option in Sensors tab cpu pressure emulation drop-down. Turns off emulation of cpu pressure state.
+   */
+  noPressureEmulation: 'No override',
+  /**
+   * @description An option that appears in a drop-down that represents the nominal state.
+   */
+  nominal: 'Nominal',
+  /**
+   * @description An option that appears in a drop-down that represents the fair state.
+   */
+  fair: 'Fair',
+  /**
+   * @description An option that appears in a drop-down that represents the serious state.
+   */
+  serious: 'Serious',
+  /**
+   * @description An option that appears in a drop-down that represents the critical state.
+   */
+  critical: 'Critical',
+  /**
+   * @description Text for the touch type to simulate on a device. Refers to touch input as opposed to
+   * mouse input.
+   */
+  touch: 'Touch',
+  /**
+   * @description Text in Sensors View of the Device Toolbar. Means that touch input will be forced
+   *on, even if the device type e.g. desktop computer does not normally have touch input.
+   */
+  forceEnabled: 'Force enabled',
+  /**
+   * @description Text in Sensors View of the Device Toolbar. Refers to device-based touch input,
+   *which means the input type will be 'touch' only if the device normally has touch input e.g. a
+   *phone or tablet.
+   */
+  devicebased: 'Device-based',
+  /**
+   * @description Title of a section option in Sensors tab for idle emulation. This is a command, to
+   *emulate the state of the 'Idle Detector'.
+   */
+  emulateIdleDetectorState: 'Emulate Idle Detector state',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down. Turns off emulation of idle state.
+   */
+  noIdleEmulation: 'No idle emulation',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down.
+   */
+  userActiveScreenUnlocked: 'User active, screen unlocked',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down.
+   */
+  userActiveScreenLocked: 'User active, screen locked',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down.
+   */
+  userIdleScreenUnlocked: 'User idle, screen unlocked',
+  /**
+   * @description Title of an option in Sensors tab idle emulation drop-down.
+   */
+  userIdleScreenLocked: 'User idle, screen locked',
   /**
    * @description Title of a setting under the Rendering category that can be invoked through the Command Menu
    */
@@ -419,6 +484,13 @@ const UIStrings = {
    * @description Title of a setting under the Elements category in Settings.
    */
   apca: 'Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines',
+  /**
+   * @description Title of a setting under the Appearance category in Settings. When the webpage is
+   * paused by devtools, an overlay is shown on top of the page to indicate that it is paused. The
+   * overlay is a pause/unpause button and some text, which appears on top of the paused page. This
+   * setting turns off this overlay.
+   */
+  disablePaused: 'Disable paused state overlay',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('core/sdk/sdk-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -785,6 +857,95 @@ Common.Settings.registerSettingExtension({
   title: i18nLazyString(UIStrings.emulateCssMediaType),
 });
 
+Common.Settings.registerSettingExtension({
+  title: i18nLazyString(UIStrings.cpuPressure),
+  reloadRequired: true,
+  settingName: 'emulation.cpu-pressure',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+  options: [
+    {
+      value: 'none',
+      title: i18nLazyString(UIStrings.noPressureEmulation),
+      text: i18nLazyString(UIStrings.noPressureEmulation),
+    },
+    {
+      value: 'nominal',
+      title: i18nLazyString(UIStrings.nominal),
+      text: i18nLazyString(UIStrings.nominal),
+    },
+    {
+      value: 'fair',
+      title: i18nLazyString(UIStrings.fair),
+      text: i18nLazyString(UIStrings.fair),
+    },
+    {
+      value: 'serious',
+      title: i18nLazyString(UIStrings.serious),
+      text: i18nLazyString(UIStrings.serious),
+    },
+    {
+      value: 'critical',
+      title: i18nLazyString(UIStrings.critical),
+      text: i18nLazyString(UIStrings.critical),
+    },
+  ],
+});
+
+Common.Settings.registerSettingExtension({
+  title: i18nLazyString(UIStrings.touch),
+  reloadRequired: true,
+  settingName: 'emulation.touch',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+  options: [
+    {
+      value: 'none',
+      title: i18nLazyString(UIStrings.devicebased),
+      text: i18nLazyString(UIStrings.devicebased),
+    },
+    {
+      value: 'force',
+      title: i18nLazyString(UIStrings.forceEnabled),
+      text: i18nLazyString(UIStrings.forceEnabled),
+    },
+  ],
+});
+
+Common.Settings.registerSettingExtension({
+  title: i18nLazyString(UIStrings.emulateIdleDetectorState),
+  settingName: 'emulation.idle-detection',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+  options: [
+    {
+      value: 'none',
+      title: i18nLazyString(UIStrings.noIdleEmulation),
+      text: i18nLazyString(UIStrings.noIdleEmulation),
+    },
+    {
+      value: '{\"isUserActive\":true,\"isScreenUnlocked\":true}',
+      title: i18nLazyString(UIStrings.userActiveScreenUnlocked),
+      text: i18nLazyString(UIStrings.userActiveScreenUnlocked),
+    },
+    {
+      value: '{\"isUserActive\":true,\"isScreenUnlocked\":false}',
+      title: i18nLazyString(UIStrings.userActiveScreenLocked),
+      text: i18nLazyString(UIStrings.userActiveScreenLocked),
+    },
+    {
+      value: '{\"isUserActive\":false,\"isScreenUnlocked\":true}',
+      title: i18nLazyString(UIStrings.userIdleScreenUnlocked),
+      text: i18nLazyString(UIStrings.userIdleScreenUnlocked),
+    },
+    {
+      value: '{\"isUserActive\":false,\"isScreenUnlocked\":false}',
+      title: i18nLazyString(UIStrings.userIdleScreenLocked),
+      text: i18nLazyString(UIStrings.userIdleScreenLocked),
+    },
+  ],
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.RENDERING,
   settingName: 'emulated-css-media-feature-prefers-color-scheme',
@@ -1277,3 +1438,12 @@ Common.Settings.registerSettingExtension({
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,
 });
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.APPEARANCE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.disablePaused),
+  settingName: 'disable-paused-state-overlay',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});

package/front_end/design_system_tokens.css

@@ -644,11 +644,6 @@
     --source-code-font-family: ahem;
   }
 
-  &.platform-screenshot-e2e-test {
-    --default-font-family: roboto;
-    --monospace-font-family: roboto;
-    --source-code-font-family: roboto;
-  }
 
   --ref-typeface-weight-regular: 400;
   --ref-typeface-weight-medium: 500;

package/front_end/entrypoints/devtools_app/devtools_app.ts

@@ -33,4 +33,4 @@ import * as Main from '../main/main.js';
 
 // @ts-expect-error Exposed for legacy layout tests
 self.runtime = Root.Runtime.Runtime.instance({forceNew: true});
-new Main.MainImpl.MainImpl();
+new Main.MainImpl.MainImpl({supportsEmulation: true});

package/front_end/entrypoints/formatter_worker/CSSFormatter.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Platform from '../../core/platform/platform.js';
-
 import type {FormattedContentBuilder} from './FormattedContentBuilder.js';
 import {createTokenizer} from './FormatterWorker.js';
 
@@ -19,6 +17,7 @@ export class CSSFormatter {
   #fromOffset!: number;
   #lineEndings!: number[];
   #lastLine = -1;
+  #currentLineIndex = 0;
   #state: {
     eatWhitespace?: boolean,
     seenProperty?: boolean,
@@ -35,6 +34,7 @@ export class CSSFormatter {
     this.#toOffset = toOffset;
     this.#state = {};
     this.#lastLine = -1;
+    this.#currentLineIndex = 0;
     const tokenize = createTokenizer('text/css');
     const oldEnforce = this.#builder.setEnforceSpaceBetweenWords(false);
     tokenize(text.substring(this.#fromOffset, this.#toOffset), this.#tokenCallback.bind(this));
@@ -42,9 +42,18 @@ export class CSSFormatter {
   }
 
   #tokenCallback(token: string, type: string|null, startPosition: number): void {
+    // startPosition is relative to the start of the CSS block.
+    // Convert it to an absolute document offset to match this.#lineEndings.
     startPosition += this.#fromOffset;
-    const startLine = Platform.ArrayUtilities.lowerBound(
-        this.#lineEndings, startPosition, Platform.ArrayUtilities.DEFAULT_COMPARATOR);
+
+    // Find the line index containing startPosition.
+    // Since CodeMirror processes tokens sequentially in increasing order of their offset,
+    // we can perform an amortized O(1) linear scan forward by tracking the current index.
+    while (this.#currentLineIndex < this.#lineEndings.length &&
+           this.#lineEndings[this.#currentLineIndex] < startPosition) {
+      this.#currentLineIndex++;
+    }
+    const startLine = this.#currentLineIndex;
     if (startLine !== this.#lastLine) {
       this.#state.eatWhitespace = true;
     }

package/front_end/entrypoints/formatter_worker/FormattedContentBuilder.ts

@@ -29,8 +29,11 @@ export class FormattedContentBuilder {
   addToken(token: string, offset: number): void {
     // Skip the regex check if `addSoftSpace` will be a no-op.
     if (this.#enforceSpaceBetweenWords && !this.#hardSpaces && !this.#softSpace) {
-      const lastCharOfLastToken = this.#formattedContent.at(-1)?.at(-1) ?? '';
-      if (this.#canBeIdentifierOrNumber.test(lastCharOfLastToken) && this.#canBeIdentifierOrNumber.test(token)) {
+      const lastToken = this.#formattedContent.at(-1) ?? '';
+      const lastCharOfLastToken = lastToken.at(-1) ?? '';
+      if ((this.#canBeIdentifierOrNumber.test(lastCharOfLastToken) ||
+           ['`', '}', ')', ']', '\'', '"', '/'].includes(lastCharOfLastToken)) &&
+          this.#canBeIdentifierOrNumber.test(token)) {
         this.addSoftSpace();
       }
     }