chrome-devtools-frontend 1.0.1656291 → 1.0.1657110

package/AUTHORS

@@ -24,6 +24,7 @@ Anna Agoha <annaagoha@gmail.com>
 Anthony Xie <anthonyxie64@gmail.com>
 Axel Chong <haxatron1@gmail.com>
 Anton Bershanskyi <bershanskyi@gmail.com>
+Aviv Keller <me@aviv.sh>
 Biboswan Roy <biboswan98@gmail.com>
 Boris Verkhovskiy <boris.verk@gmail.com>
 Carl Espe <carl@cpespe.com>
@@ -62,6 +63,7 @@ Juba Borgohain <chromiumjuba@gmail.com>
 Julian Geppert <spctstr@gmail.com>
 Junseo Yoo <joon.yoo181@berkeley.edu>
 Kanishk Ranjan <kanishkranjan17@gmail.com>
+Karim El Harim <karimelharim@gmail.com>
 Karntino Areros <karntino.c.areros@gmail.com>
 Kohei Ueno <kohei.ueno119@gmail.com>
 Krishnal Ciccolella <ciccolella.krishnal@gmail.com>

package/docs/get_the_code.md

@@ -53,10 +53,10 @@ a build time cost. If you want an even fast fast build, you might want to opt
 out of bundling by setting `devtools_bundle` to `false`
 
 ```bash
-gn gen out/fast-build --args="devtools_skip_typecheck=true devtools_bundle=false"
+gn gen out/Fast --args="devtools_skip_typecheck=true devtools_bundle=false"
 ```
 
-and use `npm run build -- -t fast-build` to build this target.
+and use `npm run build -- -t Fast` to build this target.
 
 ### Rebuilding automatically
 
@@ -111,10 +111,10 @@ The `.env.template` file lists all supported variables. Copy it to `.env` to get
 cp .env.template .env
 ```
 
-As mentioned earlier, you might create a fast build target. Instead of always typing `npm run build -- -t fast-build`, to remove the flag repetition you simple run `npm run build` you can set the following variable in your `.env` file:
+As mentioned earlier, you might create a fast build target. Instead of always typing `npm run build -- -t Fast`, to remove the flag repetition you simple run `npm run build` you can set the following variable in your `.env` file:
 
 ```shell
-DEVTOOLS_TARGET=fast-build
+DEVTOOLS_TARGET=Fast
 ```
 
 Another example - by default running `npm start` auto-opens DevTools for new Tabs.
@@ -468,8 +468,8 @@ In the `custom_deps` section, insert this line:
 "src/third_party/devtools-frontend/src": None,
 ```
 
-For the integrated checkout, create a single gclient project that automatically gclient sync's all dependencies for both
-repositories. After checking out chromium, modify the .gclient file for `chromium/src` to add the DevTools project:
+For the integrated checkout, create a single gclient project that automatically `gclient sync`s all dependencies for both
+repositories. After checking out chromium, modify the `.gclient` file for `chromium/src` to add the DevTools project:
 
 ```python
 solutions = [

package/front_end/Tests.js

@@ -761,7 +761,7 @@
       this.releaseControl();
     });
 
-    Common.Settings.moduleSetting('active-keybind-set').set('vsCode');
+    Common.Settings.Settings.instance().moduleSetting('active-keybind-set').set('vsCode');
   };
 
   TestSuite.prototype.testDispatchKeyEventDoesNotCrash = function() {

package/front_end/core/common/Settings.ts

@@ -715,14 +715,6 @@ export const enum SettingStorageType {
   SESSION = 'Session',
 }
 
-export function moduleSetting(settingName: string): Setting<unknown> {
-  return Settings.instance().moduleSetting(settingName);
-}
-
-export function settingForTest(settingName: string): Setting<unknown> {
-  return Settings.instance().settingForTest(settingName);
-}
-
 export {
   getLocalizedSettingsCategory,
   maybeRemoveSettingExtension,

package/front_end/core/host/Platform.ts

@@ -65,3 +65,7 @@ export function fontFamily(): string {
   }
   return _fontFamily;
 }
+
+export function setFontFamilyForTests(family: string): void {
+  _fontFamily = family;
+}

package/front_end/core/sdk/CSSMetadata.ts

@@ -1517,6 +1517,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,16 +38,17 @@ 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 {FrameManager} from './FrameManager.js';
+import type {FrameManager} from './FrameManager.js';
 import {OverlayModel} from './OverlayModel.js';
 import {RemoteObject} from './RemoteObject.js';
 import {Events as ResourceTreeModelEvents, type ResourceTreeFrame, ResourceTreeModel} from './ResourceTreeModel.js';
 import {RuntimeModel} from './RuntimeModel.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target} from './Target.js';
-import {TargetManager} from './TargetManager.js';
+import type {TargetManager} from './TargetManager.js';
 
 /** Keep this list in sync with https://w3c.github.io/aria/#state_prop_def **/
 export const ARIA_ATTRIBUTES = new Set<string>([
@@ -129,6 +130,7 @@ export interface DOMNodeEventTypes {
 
 export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventTypes> {
   #domModel: DOMModel;
+  readonly #frameManager: FrameManager;
   #agent: ProtocolProxyApi.DOMApi;
   ownerDocument!: DOMDocument|null;
   #isInShadowTree!: boolean;
@@ -194,6 +196,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   constructor(domModel: DOMModel) {
     super();
     this.#domModel = domModel;
+    this.#frameManager = domModel.target().targetManager().getFrameManager();
     this.#agent = this.#domModel.getAgent();
   }
 
@@ -313,7 +316,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   private async requestChildDocument(frameId: Protocol.Page.FrameId, notInTarget: Target): Promise<DOMDocument|null> {
-    const frame = await FrameManager.instance().getOrWaitForFrame(frameId, notInTarget);
+    const frame = await this.#frameManager.getOrWaitForFrame(frameId, notInTarget);
     const childModel = frame.resourceTreeModel()?.target().model(DOMModel);
     return await (childModel?.requestDocument() || null);
   }
@@ -341,7 +344,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
       return undefined;
     }
 
-    const frame = FrameManager.instance().getFrame(this.#frameOwnerFrameId);
+    const frame = this.#frameManager.getFrame(this.#frameOwnerFrameId);
     if (frame && frame.adFrameType() !== Protocol.Page.AdFrameType.None) {
       // The frame is ad-related, but provenance information is unavailable.
       return {};
@@ -1014,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)) {
@@ -1478,7 +1502,7 @@ export class DOMModel extends SDKModel<EventTypes> {
     return this.target().model(OverlayModel) as OverlayModel;
   }
 
-  static cancelSearch(targetManager: TargetManager = TargetManager.instance()): void {
+  static cancelSearch(targetManager: TargetManager): void {
     for (const domModel of targetManager.models(DOMModel)) {
       domModel.cancelSearch();
     }
@@ -1696,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);
@@ -2032,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> {
@@ -2069,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 {
@@ -2210,8 +2243,6 @@ class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
   }
 }
 
-let domModelUndoStackInstance: DOMModelUndoStack|null = null;
-
 export class DOMModelUndoStack {
   #stack: DOMModel[];
   #index: number;
@@ -2226,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() &&
@@ -2385,6 +2389,7 @@ export namespace MultitargetNetworkManager {
 }
 
 export class InterceptedRequest {
+  readonly #multitargetNetworkManager: MultitargetNetworkManager;
   readonly #fetchAgent: ProtocolProxyApi.FetchApi;
   #hasResponded = false;
   request: Protocol.Network.Request;
@@ -2395,6 +2400,7 @@ export class InterceptedRequest {
   networkRequest: NetworkRequest|null;
 
   constructor(
+      multitargetNetworkManager: MultitargetNetworkManager,
       fetchAgent: ProtocolProxyApi.FetchApi,
       request: Protocol.Network.Request,
       resourceType: Protocol.Network.ResourceType,
@@ -2403,6 +2409,7 @@ export class InterceptedRequest {
       responseStatusCode?: number,
       responseHeaders?: Protocol.Fetch.HeaderEntry[],
   ) {
+    this.#multitargetNetworkManager = multitargetNetworkManager;
     this.#fetchAgent = fetchAgent;
     this.request = request;
     this.resourceType = resourceType;
@@ -2494,8 +2501,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/SourceMapCache.ts

@@ -8,15 +8,13 @@ import type {DebugId, SourceMapV3} from './SourceMap.js';
 
 /** A thin wrapper around the Cache API to store source map JSONs keyed on Debug IDs */
 export class SourceMapCache {
-  static readonly #INSTANCE = new SourceMapCache('devtools-source-map-cache');
-
-  static instance(): SourceMapCache {
+  static create(): SourceMapCache {
     if (typeof window === 'undefined') {
       // TODO(crbug.com/451502260): Move this behind a `HostRuntime` interface.
       return IN_MEMORY_INSTANCE as unknown as
           SourceMapCache;  // TS doesn't like that our in-memory class doesn't have the same private fields.
     }
-    return this.#INSTANCE;
+    return new SourceMapCache('devtools-source-map-cache');
   }
 
   static createForTest(name: string): SourceMapCache {

package/front_end/core/sdk/SourceMapManager.ts

@@ -22,6 +22,7 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
   readonly #clientData = new Map<T, ClientData>();
   readonly #sourceMaps = new Map<SourceMap, T>();
   #attachingClient: T|null = null;
+  readonly #sourceMapCache = SourceMapCache.create();
 
   constructor(target: Target, factory?: SourceMapFactory<T>) {
     super();
@@ -118,7 +119,7 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
           //     SourceMapManager in their respective constructors.
           const resourceLoader = this.#target.targetManager().context.get(PageResourceLoader);
           clientData.sourceMapPromise =
-              loadSourceMap(resourceLoader, sourceMapURL, client.debugId(), initiator)
+              loadSourceMap(resourceLoader, this.#sourceMapCache, sourceMapURL, client.debugId(), initiator)
                   .then(
                       payload => {
                         const sourceMap = this.#factory(sourceURL, sourceMapURL, payload, client);
@@ -185,14 +186,14 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
   }
 }
 
-async function loadSourceMap(
-    resourceLoader: ResourceLoader, url: Platform.DevToolsPath.UrlString, debugId: DebugId|null,
-    initiator: PageResourceLoadInitiator): Promise<SourceMapV3> {
+async function loadSourceMap(resourceLoader: ResourceLoader, sourceMapCache: SourceMapCache,
+                             url: Platform.DevToolsPath.UrlString, debugId: DebugId|null,
+                             initiator: PageResourceLoadInitiator): Promise<SourceMapV3> {
   try {
     if (debugId) {
       const securityOrigin = initiator.initiatorUrl ? Common.ParsedURL.ParsedURL.extractOrigin(initiator.initiatorUrl) :
                                                       Platform.DevToolsPath.EmptyUrlString;
-      const cachedSourceMap = await SourceMapCache.instance().get(debugId, securityOrigin);
+      const cachedSourceMap = await sourceMapCache.get(debugId, securityOrigin);
       if (cachedSourceMap) {
         return cachedSourceMap;
       }
@@ -204,7 +205,7 @@ async function loadSourceMap(
       // In case something goes wrong with updating the cache, we still want to use the source map.
       const securityOrigin = initiator.initiatorUrl ? Common.ParsedURL.ParsedURL.extractOrigin(initiator.initiatorUrl) :
                                                       Platform.DevToolsPath.EmptyUrlString;
-      await SourceMapCache.instance().set(sourceMap.debugId as DebugId, securityOrigin, sourceMap).catch();
+      await sourceMapCache.set(sourceMap.debugId as DebugId, securityOrigin, sourceMap).catch();
     }
     return sourceMap;
   } catch (cause) {
@@ -216,7 +217,7 @@ export async function tryLoadSourceMap(
     resourceLoader: ResourceLoader, url: Platform.DevToolsPath.UrlString,
     initiator: PageResourceLoadInitiator): Promise<SourceMapV3|null> {
   try {
-    return await loadSourceMap(resourceLoader, url, null, initiator);
+    return await loadSourceMap(resourceLoader, SourceMapCache.create(), url, null, initiator);
   } catch (cause) {
     console.error(cause);
     return null;

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/inspector_main/InspectorMain.ts

@@ -207,12 +207,11 @@ export class NodeIndicator extends UI.Widget.Widget {
   }
 }
 
-let nodeIndicatorProviderInstance: NodeIndicatorProvider;
 export class NodeIndicatorProvider implements UI.Toolbar.Provider {
   #toolbarItem: UI.Toolbar.ToolbarItem;
   #widgetElement: UI.Widget.WidgetElement<NodeIndicator>;
 
-  private constructor() {
+  constructor() {
     this.#widgetElement = document.createElement('devtools-widget') as UI.Widget.WidgetElement<NodeIndicator>;
     new NodeIndicator(this.#widgetElement);
 
@@ -223,15 +222,6 @@ export class NodeIndicatorProvider implements UI.Toolbar.Provider {
   item(): UI.Toolbar.ToolbarItem|null {
     return this.#toolbarItem;
   }
-
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): NodeIndicatorProvider {
-    const {forceNew} = opts;
-    if (!nodeIndicatorProviderInstance || forceNew) {
-      nodeIndicatorProviderInstance = new NodeIndicatorProvider();
-    }
-
-    return nodeIndicatorProviderInstance;
-  }
 }
 
 export class SourcesPanelIndicator {

package/front_end/entrypoints/inspector_main/inspector_main-meta.ts

@@ -257,7 +257,7 @@ Common.Settings.registerSettingExtension({
 UI.Toolbar.registerToolbarItem({
   async loadItem() {
     const InspectorMain = await loadInspectorMainModule();
-    return InspectorMain.InspectorMain.NodeIndicatorProvider.instance();
+    return new InspectorMain.InspectorMain.NodeIndicatorProvider();
   },
   order: 2,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_LEFT,