chrome-devtools-frontend 1.0.1656897 → 1.0.1657855

package/front_end/core/sdk/CSSMetadata.ts

@@ -476,13 +476,24 @@ export function cssMetadata(): CSSMetadata {
 
 /**
  * The pipe character '|' indicates where text selection should be set.
+ *
+ * Spec: https://drafts.csswg.org/css-images-4/#image-values
+ * <image> = <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>
+ * <gradient> = [
+ * <linear-gradient()> | <repeating-linear-gradient()> |
+ * <radial-gradient()> | <repeating-radial-gradient()> |
+ * <conic-gradient()>  | <repeating-conic-gradient()> ]
  */
 const imageValuePresetMap = new Map([
-  ['linear-gradient', 'linear-gradient(|45deg, black, transparent|)'],
-  ['radial-gradient', 'radial-gradient(|black, transparent|)'],
-  ['repeating-linear-gradient', 'repeating-linear-gradient(|45deg, black, transparent 100px|)'],
-  ['repeating-radial-gradient', 'repeating-radial-gradient(|black, transparent 100px|)'],
-  ['url', 'url(||)'],
+  ['linear-gradient()', 'linear-gradient(|45deg, black, transparent|)'],
+  ['radial-gradient()', 'radial-gradient(|black, transparent|)'],
+  ['conic-gradient()', 'conic-gradient(|from 45deg, red, orange, yellow, green, teal, blue, purple|)'],
+  ['repeating-linear-gradient()', 'repeating-linear-gradient(|45deg, black, transparent 100px|)'],
+  ['repeating-radial-gradient()', 'repeating-radial-gradient(|black, transparent 100px|)'],
+  ['repeating-conic-gradient()', 'repeating-conic-gradient(|black 0deg 25%, white 0deg 50%|)'],  // Checkerboard
+  ['url()', 'url(||)'],
+  ['image-set()', 'image-set(|url("") 1x, url("") 2x|)'],
+  ['cross-fade()', 'cross-fade(|url("") 50%, url("") 50%|)'],
 ]);
 
 const filterValuePresetMap = new Map([
@@ -505,8 +516,16 @@ const cornerShapeValuePresetMap = new Map([
 ]);
 
 const valuePresets = new Map([
-  ['filter', filterValuePresetMap], ['backdrop-filter', filterValuePresetMap], ['background', imageValuePresetMap],
-  ['background-image', imageValuePresetMap], ['-webkit-mask-image', imageValuePresetMap],
+  ['filter', filterValuePresetMap],
+  ['backdrop-filter', filterValuePresetMap],
+  ['background', imageValuePresetMap],
+  ['background-image', imageValuePresetMap],
+  ['mask-image', imageValuePresetMap],
+  ['-webkit-mask-image', imageValuePresetMap],
+  ['list-style', imageValuePresetMap],
+  ['list-style-image', imageValuePresetMap],
+  ['border-image', imageValuePresetMap],
+  ['border-image-source', imageValuePresetMap],
   [
     'transform',
     new Map([
@@ -866,7 +885,44 @@ const extraPropertyValues = new Map<string, Set<string>>([
   ['-webkit-text-emphasis-position', textEmphasisPosition],
   ['alignment-baseline', new Set(['before-edge', 'after-edge', 'text-before-edge', 'text-after-edge', 'hanging'])],
   ['page-break-before', new Set(['left', 'right', 'always', 'avoid'])],
-  ['border-image', new Set(['repeat', 'stretch', 'space', 'round'])],
+  [
+    'border-image',
+    new Set([
+      'none',  // border-image-source
+      'repeat',
+      'stretch',
+      'space',
+      'round',
+      'auto',  // border-image-width
+      'fill',  // border-image-slice
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
+  ],
+  ['border-image-width', new Set(['auto'])],
+  ['border-image-slice', new Set(['fill'])],
+  [
+    'border-image-source',
+    new Set([
+      'none',
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
+  ],
   [
     'text-decoration',
     new Set(['blink', 'line-through', 'overline', 'underline', 'wavy', 'double', 'solid', 'dashed', 'dotted']),
@@ -1179,16 +1235,31 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'border-box',
       'content-box',
       'padding-box',
-      'linear-gradient',
-      'radial-gradient',
-      'repeating-linear-gradient',
-      'repeating-radial-gradient',
-      'url',
+      'text',  // background-clip
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
     ]),
   ],
   [
     'background-image',
-    new Set(['linear-gradient', 'radial-gradient', 'repeating-linear-gradient', 'repeating-radial-gradient', 'url']),
+    new Set([
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
   ],
   ['background-position', new Set(['top', 'bottom', 'left', 'right', 'center'])],
   ['background-position-x', new Set(['left', 'right', 'center'])],
@@ -1440,9 +1511,33 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'plus-lighter',
     ]),
   ],
+  [
+    'mask-image',
+    new Set([
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
+  ],
   [
     '-webkit-mask-image',
-    new Set(['linear-gradient', 'radial-gradient', 'repeating-linear-gradient', 'repeating-radial-gradient', 'url']),
+    new Set([
+      'linear-gradient()',
+      'radial-gradient()',
+      'conic-gradient()',
+      'repeating-linear-gradient()',
+      'repeating-radial-gradient()',
+      'repeating-conic-gradient()',
+      'image-set()',
+      'cross-fade()',
+      'url()',
+    ]),
   ],
   ['-webkit-mask-origin', new Set(['border', 'border-box', 'content', 'content-box', 'padding', 'padding-box'])],
   ['-webkit-mask-position', new Set(['top', 'bottom', 'left', 'right', 'center'])],
@@ -1479,7 +1574,6 @@ const extraPropertyValues = new Map<string, Set<string>>([
   ['timeline-trigger-activation-range-end', new Set(['normal'])],
   ['timeline-trigger-active-range-start', new Set(['normal'])],
   ['timeline-trigger-active-range-end', new Set(['normal'])],
-
   ['contain-intrinsic-width', new Set(['auto none', 'auto 100px'])],
   ['contain-intrinsic-height', new Set(['auto none', 'auto 100px'])],
   ['contain-intrinsic-size', new Set(['auto none', 'auto 100px'])],
@@ -1517,6 +1611,17 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'ex alphabetic',
     ]),
   ],
+  [
+    'text-wrap',
+    new Set([
+      'auto',
+      'wrap',
+      'nowrap',
+      'balance',
+      'pretty',
+      'stable',
+    ]),
+  ],
   [
     'corner-shape',
     new Set([

package/front_end/core/sdk/CSSModel.ts

@@ -38,6 +38,7 @@ export interface LayoutProperties {
   isGrid: boolean;
   isSubgrid: boolean;
   isGridLanes: boolean;
+  isContents?: boolean;
   containerType?: string;
   hasScroll: boolean;
 }
@@ -392,6 +393,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
 
     const display = styles.get('display');
+    const isContents = display === 'contents';
     const isFlex = display === 'flex' || display === 'inline-flex';
     const isGrid = display === 'grid' || display === 'inline-grid';
     const isSubgrid = (isGrid &&
@@ -408,6 +410,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       isGrid,
       isSubgrid,
       isGridLanes,
+      isContents,
       containerType: isContainer ? containerType : undefined,
       hasScroll,
     };

package/front_end/core/sdk/DOMModel.ts

@@ -38,6 +38,7 @@ import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
+import * as Root from '../root/root.js';
 
 import {CSSModel} from './CSSModel.js';
 import type {FrameManager} from './FrameManager.js';
@@ -1016,6 +1017,27 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
     return Boolean(this.#xmlVersion);
   }
 
+  isCustomElement(): boolean {
+    if (this.nodeType() !== Node.ELEMENT_NODE || this.isXMLNode()) {
+      return false;
+    }
+    const localName = this.localName() || this.nodeName().toLowerCase();
+    if (localName.includes('-')) {
+      const builtInExclusionList = [
+        'annotation-xml',
+        'color-profile',
+        'font-face',
+        'font-face-src',
+        'font-face-uri',
+        'font-face-format',
+        'font-face-name',
+        'missing-glyph',
+      ];
+      return !builtInExclusionList.includes(localName);
+    }
+    return this.getAttribute('is') !== undefined;
+  }
+
   setMarker(name: string, value: unknown): void {
     if (value === null) {
       if (!this.#markers.has(name)) {
@@ -1698,7 +1720,7 @@ export class DOMModel extends SDKModel<EventTypes> {
     } else {
       this.#document = null;
     }
-    DOMModelUndoStack.instance().dispose(this);
+    this.#undoStack().dispose(this);
 
     if (!this.parentModel()) {
       this.dispatchEventToListeners(Events.DocumentUpdated, this);
@@ -2034,7 +2056,7 @@ export class DOMModel extends SDKModel<EventTypes> {
   }
 
   markUndoableState(minorChange?: boolean): void {
-    void DOMModelUndoStack.instance().markUndoableState(this, minorChange || false);
+    void this.#undoStack().markUndoableState(this, minorChange || false);
   }
 
   async nodeForLocation(x: number, y: number, includeUserAgentShadowDOM: boolean): Promise<DOMNode|null> {
@@ -2071,7 +2093,16 @@ export class DOMModel extends SDKModel<EventTypes> {
 
   override dispose(): void {
     this.#resourceTreeModel?.removeEventListener(ResourceTreeModelEvents.DocumentOpened, this.onDocumentOpened, this);
-    DOMModelUndoStack.instance().dispose(this);
+    this.#undoStack().dispose(this);
+  }
+
+  // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
+  #undoStack(): DOMModelUndoStack {
+    const context = this.target().targetManager().context;
+    if ('has' in context && typeof context.has === 'function' && context.has(DOMModelUndoStack)) {
+      return context.get(DOMModelUndoStack);
+    }
+    return DOMModelUndoStack.instance();
   }
 
   parentModel(): DOMModel|null {
@@ -2212,8 +2243,6 @@ class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
   }
 }
 
-let domModelUndoStackInstance: DOMModelUndoStack|null = null;
-
 export class DOMModelUndoStack {
   #stack: DOMModel[];
   #index: number;
@@ -2228,11 +2257,11 @@ export class DOMModelUndoStack {
     forceNew: boolean|null,
   } = {forceNew: null}): DOMModelUndoStack {
     const {forceNew} = opts;
-    if (!domModelUndoStackInstance || forceNew) {
-      domModelUndoStackInstance = new DOMModelUndoStack();
+    if (!Root.DevToolsContext.globalInstance().has(DOMModelUndoStack) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(DOMModelUndoStack, new DOMModelUndoStack());
     }
 
-    return domModelUndoStackInstance;
+    return Root.DevToolsContext.globalInstance().get(DOMModelUndoStack);
   }
 
   async markUndoableState(model: DOMModel, minorChange: boolean): Promise<void> {

package/front_end/core/sdk/DebuggerModel.ts

@@ -194,7 +194,8 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     }
   }
 
-  static selectSymbolSource(debugSymbols: Protocol.Debugger.DebugSymbols[]|null): Protocol.Debugger.DebugSymbols|null {
+  static selectSymbolSource(debugSymbols: Protocol.Debugger.DebugSymbols[]|null,
+                            devToolsConsole: Common.Console.Console): Protocol.Debugger.DebugSymbols|null {
     if (!debugSymbols || debugSymbols.length === 0) {
       return null;
     }
@@ -221,8 +222,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
         debugSymbolsSource !== null,
         'Unknown symbol types. Front-end and back-end should be kept in sync regarding Protocol.Debugger.DebugSymbolTypes');
     if (debugSymbolsSource && debugSymbols.length > 1) {
-      Common.Console.Console.instance().warn(
-          `Multiple debug symbols for script were found. Using ${debugSymbolsSource.type}`);
+      devToolsConsole.warn(`Multiple debug symbols for script were found. Using ${debugSymbolsSource.type}`);
     }
     return debugSymbolsSource;
   }
@@ -661,7 +661,8 @@ export class DebuggerModel extends SDKModel<EventTypes> {
       isContentScript = !executionContextAuxData['isDefault'];
     }
 
-    const selectedDebugSymbol = DebuggerModel.selectSymbolSource(debugSymbols);
+    const selectedDebugSymbol =
+        DebuggerModel.selectSymbolSource(debugSymbols, this.target().targetManager().getConsole());
     const script = new Script(
         this, scriptId, sourceURL, startLine, startColumn, endLine, endColumn, executionContextId, hash,
         isContentScript, isLiveEdit, sourceMapURL, hasSourceURLComment, length, isModule, originStackTrace, codeOffset,

package/front_end/core/sdk/EmulationModel.ts

@@ -6,7 +6,7 @@ import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
 import {CSSModel} from './CSSModel.js';
-import {MultitargetNetworkManager} from './NetworkManager.js';
+import type {MultitargetNetworkManager} from './NetworkManager.js';
 import {Events, OverlayModel} from './OverlayModel.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target} from './Target.js';
@@ -18,6 +18,7 @@ export const enum DataSaverOverride {
 }
 
 export class EmulationModel extends SDKModel<EmulationModelEventTypes> implements ProtocolProxyApi.EmulationDispatcher {
+  readonly #multitargetNetworkManager: MultitargetNetworkManager;
   readonly #emulationAgent: ProtocolProxyApi.EmulationApi;
   readonly #deviceOrientationAgent: ProtocolProxyApi.DeviceOrientationApi;
   #cssModel: CSSModel|null;
@@ -37,6 +38,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
 
   constructor(target: Target) {
     super(target);
+    this.#multitargetNetworkManager = target.targetManager().getNetworkManager();
     this.#emulationAgent = target.emulationAgent();
     this.#deviceOrientationAgent = target.deviceOrientationAgent();
     this.#screenOrientationLocked = false;
@@ -277,7 +279,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
         this.#emulationAgent.invoke_setTimezoneOverride({timezoneId: ''}),
         this.#emulationAgent.invoke_setLocaleOverride({locale: ''}),
         this.#emulationAgent.invoke_setUserAgentOverride(
-            {userAgent: MultitargetNetworkManager.instance().currentUserAgent()}),
+            {userAgent: this.#multitargetNetworkManager.currentUserAgent()}),
       ]);
     } else if (location.unavailable) {
       await Promise.all([
@@ -285,7 +287,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
         this.#emulationAgent.invoke_setTimezoneOverride({timezoneId: ''}),
         this.#emulationAgent.invoke_setLocaleOverride({locale: ''}),
         this.#emulationAgent.invoke_setUserAgentOverride(
-            {userAgent: MultitargetNetworkManager.instance().currentUserAgent()}),
+            {userAgent: this.#multitargetNetworkManager.currentUserAgent()}),
       ]);
     } else {
       function processEmulationResult(errorType: string, result: Protocol.ProtocolResponseWithError): Promise<void> {
@@ -319,7 +321,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
             .then(result => processEmulationResult('emulation-set-locale', result)),
         this.#emulationAgent
             .invoke_setUserAgentOverride({
-              userAgent: MultitargetNetworkManager.instance().currentUserAgent(),
+              userAgent: this.#multitargetNetworkManager.currentUserAgent(),
               acceptLanguage: location.locale,
             })
             .then(result => processEmulationResult('emulation-set-user-agent', result)),

package/front_end/core/sdk/NetworkManager.ts

@@ -133,14 +133,13 @@ const CONNECTION_TYPES = new Map([
  * to in multiple places, and this ensures we don't have accidental typos which
  * mean extra settings get mistakenly created.
  */
-export function customUserNetworkConditionsSetting(
-    settings: Common.Settings.Settings = Common.Settings.Settings.instance()): Common.Settings.Setting<Conditions[]> {
+export function customUserNetworkConditionsSetting(settings: Common.Settings.Settings):
+    Common.Settings.Setting<Conditions[]> {
   return settings.moduleSetting<Conditions[]>('custom-network-conditions');
 }
 
-export function activeNetworkThrottlingKeySetting(
-    settings: Common.Settings.Settings =
-        Common.Settings.Settings.instance()): Common.Settings.Setting<ThrottlingConditionKey> {
+export function activeNetworkThrottlingKeySetting(settings: Common.Settings.Settings):
+    Common.Settings.Setting<ThrottlingConditionKey> {
   return settings.createSetting('active-network-condition-key', PredefinedThrottlingConditionKey.NO_THROTTLING);
 }
 
@@ -578,10 +577,12 @@ const MAX_RESPONSE_BODY_TOTAL_BUFFER_LENGTH = 250 * 1024 * 1024;  // bytes
 export class FetchDispatcher implements ProtocolProxyApi.FetchDispatcher {
   readonly #fetchAgent: ProtocolProxyApi.FetchApi;
   readonly #manager: NetworkManager;
+  readonly #multitargetNetworkManager;
 
   constructor(agent: ProtocolProxyApi.FetchApi, manager: NetworkManager) {
     this.#fetchAgent = agent;
     this.#manager = manager;
+    this.#multitargetNetworkManager = this.#manager.target().targetManager().getNetworkManager();
   }
 
   requestPaused({requestId, request, resourceType, responseStatusCode, responseHeaders, networkId}:
@@ -592,8 +593,9 @@ export class FetchDispatcher implements ProtocolProxyApi.FetchDispatcher {
     if (networkRequest?.originalResponseHeaders.length === 0 && responseHeaders) {
       networkRequest.originalResponseHeaders = responseHeaders;
     }
-    void MultitargetNetworkManager.instance().requestIntercepted(new InterceptedRequest(
-        this.#fetchAgent, request, resourceType, requestId, networkRequest, responseStatusCode, responseHeaders));
+    void this.#multitargetNetworkManager.requestIntercepted(
+        new InterceptedRequest(this.#multitargetNetworkManager, this.#fetchAgent, request, resourceType, requestId,
+                               networkRequest, responseStatusCode, responseHeaders));
   }
 
   authRequired({}: Protocol.Fetch.AuthRequiredEvent): void {
@@ -602,6 +604,7 @@ export class FetchDispatcher implements ProtocolProxyApi.FetchDispatcher {
 
 export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   readonly #manager: NetworkManager;
+  readonly #multitargetNetworkManager: MultitargetNetworkManager;
   readonly #requestsById = new Map<string, NetworkRequest>();
   readonly #requestsByURL = new Map<Platform.DevToolsPath.UrlString, NetworkRequest>();
   readonly #requestsByLoaderId = new Map<Protocol.Network.LoaderId, NetworkRequest>();
@@ -618,9 +621,10 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
 
   constructor(manager: NetworkManager) {
     this.#manager = manager;
+    this.#multitargetNetworkManager = this.#manager.target().targetManager().getNetworkManager();
 
-    MultitargetNetworkManager.instance().addEventListener(
-        MultitargetNetworkManager.Events.REQUEST_INTERCEPTED, this.#markAsIntercepted.bind(this));
+    this.#multitargetNetworkManager.addEventListener(MultitargetNetworkManager.Events.REQUEST_INTERCEPTED,
+                                                     this.#markAsIntercepted.bind(this));
   }
 
   #markAsIntercepted(event: Common.EventTarget.EventTargetEvent<string>): void {
@@ -1178,7 +1182,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   }
 
   private maybeAdoptMainResourceRequest(requestId: string): NetworkRequest|null {
-    const request = MultitargetNetworkManager.instance().inflightMainResourceRequests.get(requestId);
+    const request = this.#multitargetNetworkManager.inflightMainResourceRequests.get(requestId);
     if (!request) {
       return null;
     }
@@ -1216,7 +1220,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     // request to fetch the main worker script, the request ID is the future
     // worker target ID and, therefore, it is unique.
     if (networkRequest.loaderId === networkRequest.requestId() || networkRequest.loaderId === '') {
-      MultitargetNetworkManager.instance().inflightMainResourceRequests.set(networkRequest.requestId(), networkRequest);
+      this.#multitargetNetworkManager.inflightMainResourceRequests.set(networkRequest.requestId(), networkRequest);
     }
 
     this.#manager.dispatchEventToListeners(Events.RequestStarted, {request: networkRequest, originalRequest});
@@ -1244,7 +1248,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
       }
     }
     this.#manager.dispatchEventToListeners(Events.RequestFinished, networkRequest);
-    MultitargetNetworkManager.instance().inflightMainResourceRequests.delete(networkRequest.requestId());
+    this.#multitargetNetworkManager.inflightMainResourceRequests.delete(networkRequest.requestId());
 
     const settings = this.#manager.target().targetManager().settings;
     if (settings.moduleSetting('monitoring-xhr-enabled').get() &&
@@ -1712,9 +1716,7 @@ export class RequestCondition extends Common.ObjectWrapper.ObjectWrapper<Request
   #conditions: ThrottlingConditions;
   #ruleIds = new Set<string>();
 
-  static createFromSetting(
-      setting: RequestConditionsSetting,
-      settings: Common.Settings.Settings = Common.Settings.Settings.instance()): RequestCondition {
+  static createFromSetting(setting: RequestConditionsSetting, settings: Common.Settings.Settings): RequestCondition {
     if ('urlPattern' in setting) {
       const pattern = RequestURLPattern.create(setting.urlPattern) ?? {
         wildcardURL: setting.urlPattern,
@@ -2385,6 +2387,7 @@ export namespace MultitargetNetworkManager {
 }
 
 export class InterceptedRequest {
+  readonly #multitargetNetworkManager: MultitargetNetworkManager;
   readonly #fetchAgent: ProtocolProxyApi.FetchApi;
   #hasResponded = false;
   request: Protocol.Network.Request;
@@ -2395,6 +2398,7 @@ export class InterceptedRequest {
   networkRequest: NetworkRequest|null;
 
   constructor(
+      multitargetNetworkManager: MultitargetNetworkManager,
       fetchAgent: ProtocolProxyApi.FetchApi,
       request: Protocol.Network.Request,
       resourceType: Protocol.Network.ResourceType,
@@ -2403,6 +2407,7 @@ export class InterceptedRequest {
       responseStatusCode?: number,
       responseHeaders?: Protocol.Fetch.HeaderEntry[],
   ) {
+    this.#multitargetNetworkManager = multitargetNetworkManager;
     this.#fetchAgent = fetchAgent;
     this.request = request;
     this.resourceType = resourceType;
@@ -2494,8 +2499,8 @@ export class InterceptedRequest {
     }
 
     void this.#fetchAgent.invoke_fulfillRequest({requestId: this.requestId, responseCode, body, responseHeaders});
-    MultitargetNetworkManager.instance().dispatchEventToListeners(
-        MultitargetNetworkManager.Events.REQUEST_FULFILLED, this.request.url as Platform.DevToolsPath.UrlString);
+    this.#multitargetNetworkManager.dispatchEventToListeners(MultitargetNetworkManager.Events.REQUEST_FULFILLED,
+                                                             this.request.url as Platform.DevToolsPath.UrlString);
   }
 
   continueRequestWithoutChange(): void {

package/front_end/core/sdk/RuntimeModel.ts

@@ -337,7 +337,7 @@ export class RuntimeModel extends SDKModel<EventTypes> {
     const result = await this.queryObjects(object);
     object.release();
     if ('error' in result) {
-      Common.Console.Console.instance().error(result.error);
+      this.target().targetManager().getConsole().error(result.error);
       return;
     }
     this.dispatchEventToListeners(Events.QueryObjectRequested, {objects: result.objects, executionContextId});

package/front_end/core/sdk/TargetManager.ts

@@ -11,6 +11,7 @@ import type * as ProtocolClient from '../protocol_client/protocol_client.js';
 import * as Root from '../root/root.js';
 
 import {FrameManager} from './FrameManager.js';
+import {MultitargetNetworkManager} from './NetworkManager.js';
 import {type RegistrationInfo, SDKModel, type SDKModelConstructor} from './SDKModel.js';
 import {Target, Type as TargetType} from './Target.js';
 
@@ -48,6 +49,15 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     return this.context.get(FrameManager);
   }
 
+  // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
+  getNetworkManager(): MultitargetNetworkManager {
+    if ('has' in this.context && typeof this.context.has === 'function' &&
+        !this.context.has(MultitargetNetworkManager)) {
+      return MultitargetNetworkManager.instance();
+    }
+    return this.context.get(MultitargetNetworkManager);
+  }
+
   /* eslint-disable @typescript-eslint/no-explicit-any */
   #modelListeners: Platform.MapUtilities.Multimap<string|symbol|number, {
     modelClass: SDKModelConstructor,

package/front_end/design_system_tokens.css

@@ -639,6 +639,12 @@
   }
 
   &.platform-screenshot-test {
+    --default-font-family: ahem;
+    --monospace-font-family: ahem;
+    --source-code-font-family: ahem;
+  }
+
+  &.platform-screenshot-e2e-test {
     --default-font-family: roboto;
     --monospace-font-family: roboto;
     --source-code-font-family: roboto;

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;
     }