chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/docs/styleguide/ux/components.md

@@ -123,19 +123,10 @@ button.addEventListener('click', event => onClick(event));
 
 ### Resources
 
-#### For developers
-
-##### Implementation
-
   * [`devtools-button`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/buttons/Button.ts)
-
-#### For designers
-
-##### Figma
-
-  * [Buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev)
+  * [Buttons Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev)
   * [Icon
-    buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
+    buttons Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
 
 ## Combo Boxes and Single Select menus
 
@@ -290,14 +281,39 @@ Find an exhaustive collection of icons currently used in DevTools [here](https:/
 
 #### Developer guidelines
 
-For some frequently used icons e.g. cross-circle, warning-filled etc. colors are auto-set in the component. See full list [here](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/icon_button/icon.css;l=47)
+For some frequently used icons, colors are auto-set in the component. The full list of icons with auto-set colors is:
+
+- `warning-filled`
+- `issue-exclamation-filled`
+- `cross-circle`
+- `cross-circle-filled`
+- `issue-cross-filled`
+- `small-status-dot`
+- `issue-text-filled`
+- `large-arrow-right-filled`
+- `code-circle`
+- `file-document`
+- `file-font`
+- `file-script`
+- `file-stylesheet`
+- `file-media`
+
+For the definitions, refer to the [icon.css file](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/kit/icons/icon.css).
+
+The default icon size is at 20x20 pixels. There are predefined classes for other sizes, don't deviate from them:
+
+  * `.extra-small`: 12x12 pixels
+  * `.small`: 14x14 pixels
+  * `.medium`: 16x16 pixels
+  * `.large`: 18x18 pixels
+  * `.extra-large`: 20x20 pixels
 
 ##### Dos and Don'ts
 
 ###### Do
 
   * Set class and change color in .css files
-  * Set one of the predefined classes to change icon size e.g. extra-small for 12px
+  * Set one of the predefined classes to change icon size.
 
 ###### Don't
 
@@ -313,11 +329,12 @@ Usage with lit-html:
 html`<devtools-icon name=${'some-icon-name'}></devtools-icon>`;
 ```
 
-Usage with the imperative API:
+### Resources
 
-```ts
-const someIcon = IconButton.Icon.create('some-icon-name', 'some-class');
-```
+*   [`devtools-icon`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/kit/icons/Icon.ts)
+*   [Component Documentation Example](https://chromedevtools.github.io/devtools-frontend/#Icon)
+*   [Icon Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/Chrome-DevTools-Design-Kit?node-id=4323-3772)
+*   [Greenlines](http://go/chrome-devtools:icons-greenlines)
 
 ## Context menus
 
@@ -568,3 +585,53 @@ UI.ContextMenu.registerItem({
 ```
 
 This will automatically add the "Open file" action to the context menu that appears when clicking the Elements panel's 3-dot button.
+
+
+## Cards
+
+![Card component](images/cards.png)
+
+### Usage
+
+#### Developer guidelines
+
+###### Basic card with heading
+
+Usage with lit-html:
+
+```ts
+html`<devtools-card heading="Simple card">
+  <div class="content">This is a simple card.</div>
+</devtools-card>`
+```
+
+###### Card without a heading
+
+Usage with lit-html:
+
+```ts
+html`<devtools-card>
+  <div class="content">This is a card without a heading.</div>
+</devtools-card>`
+```
+
+###### Card with rich heading
+
+Usage with lit-html:
+
+```ts
+html`<devtools-card heading="Card with rich heading">
+  <span slot="heading-prefix">Slotted heading prefix</span>
+  <span slot="heading-suffix">Slotted heading suffix</span>
+  <div class="content">This is a card with a rich heading.</div>
+</devtools-card>`
+```
+
+### Resources
+
+*   [`devtools-card`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/kit/cards/Card.ts)
+* [Component Documentation Example](https://chromedevtools.github.io/devtools-frontend/#Card)
+
+* [Cards Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/Chrome-DevTools-Design-Kit?node-id=3456-939)
+
+* [Greenlines](http:/go/chrome-devtools:cards-greenlines)

package/docs/ui_engineering.md

@@ -730,7 +730,7 @@ class SomeWidget extends UI.Widget.Widget {
 }
 ```
 
-## Migrating `IconButton.Icon.Icon`
+## Migrating `Icon`
 
 Replace the imperative `Icon` creation with the declarative `<devtools-icon>` component.
 
@@ -740,7 +740,7 @@ Replace the imperative `Icon` creation with the declarative `<devtools-icon>` co
 class SomeWidget extends UI.Widget.Widget {
   constructor() {
     super();
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.data = {iconName: 'checkmark', color: 'var(--icon-checkmark-green)', width: '14px', height: '14px'};
     this.contentElement.appendChild(icon);
   }

package/eslint.config.mjs

@@ -703,6 +703,13 @@ export default defineConfig([
       ],
     },
   },
+  {
+    name: 'Front-end docs files',
+    files: ['front_end/**/*.docs.ts'],
+    rules: {
+      'no-console': 'off',
+    },
+  },
   {
     name: 'TypeScript test files',
     files: [

package/front_end/Images/generate-css-vars.js

@@ -1,9 +1,10 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-const path = require('node:path');
+import * as path from 'node:path';
+
+import {writeIfChanged} from '../../scripts/build/ninja/write-if-changed.js';
 
-const {writeIfChanged} = require('../../scripts/build/ninja/write-if-changed.js');
 const [, , buildTimestamp, targetGenDir, targetName, ...imageSources] = process.argv;
 
 /**
@@ -15,7 +16,7 @@ function generateCSSVariableDefinition(fileName) {
       // We have to remove the `src/` part from any SVG file names for the CSS variables, while
       // we still use the full URL for the meta.url import. That's because the rollup-plugin-import-meta-assets
       // rewrites the image URLs to the new location, but doesn't modify the generated CSS variable name
-      fileName.replace('src\/', '').replace(path.extname(fileName), '')}', 'url(\\"' + new URL('./${
+      fileName.replace('src/', '').replace(path.extname(fileName), '')}', 'url(\\"' + new URL('./${
       fileName}', import.meta.url).toString() + '\\")');`;
 }
 
@@ -45,4 +46,7 @@ const tsconfigContent = `{
 }
 `;
 
-writeIfChanged(path.join(targetGenDir, `${targetName}-tsconfig.json`), tsconfigContent);
+writeIfChanged(
+    path.join(targetGenDir, `${targetName}-tsconfig.json`),
+    tsconfigContent,
+);

package/front_end/core/common/Settings.ts

@@ -246,17 +246,29 @@ export interface SettingsBackingStore {
   clear(): void;
 }
 
-export const NOOP_STORAGE: SettingsBackingStore = {
-  register: () => {},
-  set: () => {},
-  get: () => Promise.resolve(''),
-  remove: () => {},
-  clear: () => {},
-};
+export class InMemoryStorage implements SettingsBackingStore {
+  #store = new Map();
+
+  register(_setting: string): void {
+  }
+  set(key: string, value: string): void {
+    this.#store.set(key, value);
+  }
+  get(key: string): Promise<string> {
+    return this.#store.get(key);
+  }
+  remove(key: string): void {
+    this.#store.delete(key);
+  }
+  clear(): void {
+    this.#store.clear();
+  }
+}
 
 export class SettingsStorage {
   constructor(
-      private object: Record<string, string>, private readonly backingStore: SettingsBackingStore = NOOP_STORAGE,
+      private object: Record<string, string>,
+      private readonly backingStore: SettingsBackingStore = new InMemoryStorage(),
       private readonly storagePrefix = '') {
   }
 

package/front_end/core/host/UserMetrics.ts

@@ -529,7 +529,9 @@ export enum Action {
   InsightTeaserGenerationErrored = 194,
   AiCodeGenerationSuggestionDisplayed = 195,
   AiCodeGenerationSuggestionAccepted = 196,
-  MAX_VALUE = 197,
+  InsightTeaserModelDownloadStarted = 197,
+  InsightTeaserModelDownloadCompleted = 198,
+  MAX_VALUE = 199,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

package/front_end/core/i18n/collect-ui-strings.js

@@ -2,15 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const glob = require('glob');
-const path = require('node:path');
-const yargs = require('yargs');
-const {hideBin} = require('yargs/helpers');
+import glob from 'glob';
+import * as path from 'node:path';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
 
-const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
-const {bakePlaceholders} = require('../../../third_party/i18n/bake-ctc-to-lhl.js');
-const {collectAllStringsInDir, createPsuedoLocaleStrings, IGNORED_PATH_COMPONENTS} =
-    require('../../../third_party/i18n/collect-strings.js');
+import {writeIfChanged} from '../../../scripts/build/ninja/write-if-changed.js';
+import {bakePlaceholders} from '../../../third_party/i18n/bake-ctc-to-lhl.js';
+import {
+  collectAllStringsInDir,
+  createPsuedoLocaleStrings,
+  IGNORED_PATH_COMPONENTS,
+} from '../../../third_party/i18n/collect-strings.js';
 
 /** @typedef {import('../../../third_party/i18n/bake-ctc-to-lhl.js').CtcMessage} CtcMessage */
 
@@ -39,7 +42,9 @@ function convertCtcToLhLAndSave(outputDirectory, locale, strings) {
 
   /** @type {Record<string, CtcMessage>} */
   const sortedCtcStrings = {};
-  const sortedEntries = Object.entries(strings).sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
+  const sortedEntries = Object.entries(strings).sort(
+      ([keyA], [keyB]) => keyA.localeCompare(keyB),
+  );
   for (const [key, defn] of sortedEntries) {
     sortedCtcStrings[key] = defn;
   }
@@ -73,7 +78,11 @@ for (const directory of inputDirectories) {
 const outputDirectory = yargsObject['output-directory'];
 convertCtcToLhLAndSave(outputDirectory, 'en-US', collectedStrings);
 if (yargsObject['include-en-xl']) {
-  convertCtcToLhLAndSave(outputDirectory, 'en-XL', createPsuedoLocaleStrings(collectedStrings));
+  convertCtcToLhLAndSave(
+      outputDirectory,
+      'en-XL',
+      createPsuedoLocaleStrings(collectedStrings),
+  );
 }
 
 // Write the depfile. This is necessary to properly rebuild en-US.json/en-XL.json

package/front_end/core/i18n/generate-locales-js.js

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const path = require('node:path');
-const yargs = require('yargs');
-const {hideBin} = require('yargs/helpers');
+import * as path from 'node:path';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
 
-const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
+import {writeIfChanged} from '../../../scripts/build/ninja/write-if-changed.js';
 
 const yargsObject = yargs(hideBin(process.argv))
                         .option('target-gen-dir', {

package/front_end/core/protocol_client/CDPConnection.ts

@@ -42,6 +42,7 @@ export enum CDPErrorStatus {
   SERVER_ERROR = -32000,
   SESSION_NOT_FOUND = SERVER_ERROR - 1,
   DEVTOOLS_STUB_ERROR = -32015,
+  DEVTOOLS_REHYDRATION_ERROR = -32016,
 }
 
 export interface CDPError {

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -638,6 +638,7 @@ export class TargetBase {
 
 /** These are not logged as console.error */
 const IGNORED_ERRORS = new Set<CDPErrorStatus>([
+  CDPErrorStatus.DEVTOOLS_REHYDRATION_ERROR,
   CDPErrorStatus.DEVTOOLS_STUB_ERROR,
   CDPErrorStatus.SERVER_ERROR,
   CDPErrorStatus.SESSION_NOT_FOUND,
@@ -694,7 +695,10 @@ class AgentPrototype {
           if ('result' in response) {
             return {...response.result, getError: () => undefined};
           }
-          return {getError: () => undefined};
+          return {
+            getError: () => `Command ${method} returned neither result nor an error, params: ${
+                JSON.stringify(request, undefined, 2)}`,
+          };
         });
   }
 }

package/front_end/core/root/Runtime.ts

@@ -478,16 +478,6 @@ interface AllowPopoverForcing {
   enabled: boolean;
 }
 
-interface AiSubmenuPrompts {
-  enabled: boolean;
-  featureName?: string;
-}
-
-interface AiDebugWithAi {
-  enabled: boolean;
-  featureName?: string;
-}
-
 interface GlobalAiButton {
   enabled: boolean;
   promotionEnabled: boolean;
@@ -561,7 +551,6 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsFreestyler: HostConfigFreestyler,
   devToolsGreenDevUi: HostConfigGreenDevUi,
   devToolsAiAssistanceNetworkAgent: HostConfigAiAssistanceNetworkAgent,
-  devToolsAiDebugWithAi: AiDebugWithAi,
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
   devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
   devToolsAiCodeCompletion: HostConfigAiCodeCompletion,
@@ -580,7 +569,6 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   thirdPartyCookieControls: HostConfigThirdPartyCookieControls,
   devToolsAiGeneratedTimelineLabels: AiGeneratedTimelineLabels,
   devToolsAllowPopoverForcing: AllowPopoverForcing,
-  devToolsAiSubmenuPrompts: AiSubmenuPrompts,
   devToolsGlobalAiButton: GlobalAiButton,
   devToolsGdpProfiles: GdpProfiles,
   devToolsGdpProfilesAvailability: GdpProfilesAvailability,

package/front_end/core/sdk/DOMModel.ts

@@ -32,6 +32,7 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
+/* eslint-disable @devtools/no-adopted-style-sheets */
 
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -160,6 +161,7 @@ export class DOMNode {
    */
   detached = false;
   #retainedNodes?: Set<Protocol.DOM.BackendNodeId>;
+  #adoptedStyleSheets: AdoptedStyleSheet[] = [];
 
   constructor(domModel: DOMModel) {
     this.#domModel = domModel;
@@ -206,6 +208,10 @@ export class DOMNode {
       this.setAttributesPayload(payload.attributes);
     }
 
+    if (payload.adoptedStyleSheets) {
+      this.#adoptedStyleSheets = this.toAdoptedStyleSheets(payload.adoptedStyleSheets);
+    }
+
     this.childNodeCountInternal = payload.childNodeCount || 0;
     if (payload.shadowRoots) {
       for (let i = 0; i < payload.shadowRoots.length; ++i) {
@@ -827,6 +833,19 @@ export class DOMNode {
     }
   }
 
+  private toAdoptedStyleSheets(ids: Protocol.DOM.StyleSheetId[]): AdoptedStyleSheet[] {
+    return ids.map(id => (new AdoptedStyleSheet(id, this.#domModel.cssModel())));
+  }
+
+  setAdoptedStyleSheets(ids: Protocol.DOM.StyleSheetId[]): void {
+    this.#adoptedStyleSheets = this.toAdoptedStyleSheets(ids);
+    this.#domModel.dispatchEventToListeners(Events.AdoptedStyleSheetsModified, this);
+  }
+
+  get adoptedStyleSheetsForNode(): AdoptedStyleSheet[] {
+    return this.#adoptedStyleSheets;
+  }
+
   setDistributedNodePayloads(payloads: Protocol.DOM.BackendNode[]): void {
     this.#distributedNodes = [];
     for (const payload of payloads) {
@@ -1206,6 +1225,11 @@ export class DOMDocument extends DOMNode {
   }
 }
 
+export class AdoptedStyleSheet {
+  constructor(readonly id: Protocol.DOM.StyleSheetId, readonly cssModel: CSSModel) {
+  }
+}
+
 export class DOMModel extends SDKModel<EventTypes> {
   agent: ProtocolProxyApi.DOMApi;
   idToDOMNode = new Map<Protocol.DOM.NodeId, DOMNode>();
@@ -1571,6 +1595,14 @@ export class DOMModel extends SDKModel<EventTypes> {
     this.scheduleMutationEvent(node);
   }
 
+  adoptedStyleSheetsModified(parentId: Protocol.DOM.NodeId, styleSheets: Protocol.DOM.StyleSheetId[]): void {
+    const parent = this.idToDOMNode.get(parentId);
+    if (!parent) {
+      return;
+    }
+    parent.setAdoptedStyleSheets(styleSheets);
+  }
+
   scrollableFlagUpdated(nodeId: Protocol.DOM.NodeId, isScrollable: boolean): void {
     const node = this.nodeForId(nodeId);
     if (!node || node.isScrollable() === isScrollable) {
@@ -1776,6 +1808,7 @@ export enum Events {
   TopLayerElementsChanged = 'TopLayerElementsChanged',
   ScrollableFlagUpdated = 'ScrollableFlagUpdated',
   AffectedByStartingStylesFlagUpdated = 'AffectedByStartingStylesFlagUpdated',
+  AdoptedStyleSheetsModified = 'AdoptedStyleSheetsModified',
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
@@ -1793,6 +1826,7 @@ export interface EventTypes {
   [Events.TopLayerElementsChanged]: void;
   [Events.ScrollableFlagUpdated]: {node: DOMNode};
   [Events.AffectedByStartingStylesFlagUpdated]: {node: DOMNode};
+  [Events.AdoptedStyleSheetsModified]: DOMNode;
 }
 
 class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
@@ -1800,9 +1834,6 @@ class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
   constructor(domModel: DOMModel) {
     this.#domModel = domModel;
   }
-  adoptedStyleSheetsModified(_params: Protocol.DOM.AdoptedStyleSheetsModifiedEvent): void {
-    // TODO: implementation
-  }
 
   documentUpdated(): void {
     this.#domModel.documentUpdated();
@@ -1816,6 +1847,10 @@ class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
     this.#domModel.attributeRemoved(nodeId, name);
   }
 
+  adoptedStyleSheetsModified({nodeId, adoptedStyleSheets}: Protocol.DOM.AdoptedStyleSheetsModifiedEvent): void {
+    this.#domModel.adoptedStyleSheetsModified(nodeId, adoptedStyleSheets);
+  }
+
   inlineStyleInvalidated({nodeIds}: Protocol.DOM.InlineStyleInvalidatedEvent): void {
     this.#domModel.inlineStyleInvalidated(nodeIds);
   }

package/front_end/core/sdk/DebuggerModel.ts

@@ -942,10 +942,15 @@ export class DebuggerModel extends SDKModel<EventTypes> {
    * Important: This iterator will not yield the "synchronous" part of the stack trace, only the async parent chain.
    */
   async *
-      iterateAsyncParents(stackTraceOrPausedDetails: Protocol.Runtime.StackTrace|DebuggerPausedDetails):
+      iterateAsyncParents(
+          stackTraceOrPausedDetails: Protocol.Runtime.StackTrace|
+          Pick<DebuggerPausedDetails, 'asyncStackTrace'|'asyncStackTraceId'>):
           AsyncGenerator<{stackTrace: Protocol.Runtime.StackTrace, target: Target}> {
     // We make `DebuggerPausedDetails` look like a stack trace. We are only interested in `parent` and `parentId` in any case.
-    let stackTrace: Protocol.Runtime.StackTrace = stackTraceOrPausedDetails instanceof DebuggerPausedDetails ?
+    const isPausedDetails = (details: typeof stackTraceOrPausedDetails):
+        details is Pick<DebuggerPausedDetails, 'asyncStackTrace'|'asyncStackTraceId'> =>
+            !('parent' in details) && !('parentId' in details);
+    let stackTrace: Protocol.Runtime.StackTrace = isPausedDetails(stackTraceOrPausedDetails) ?
         {
           callFrames: [],
           parent: stackTraceOrPausedDetails.asyncStackTrace,
@@ -1507,8 +1512,8 @@ export class DebuggerPausedDetails {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   auxData: Record<string, any>|undefined;
   breakpointIds: string[];
-  asyncStackTrace: Protocol.Runtime.StackTrace|undefined;
-  asyncStackTraceId: Protocol.Runtime.StackTraceId|undefined;
+  asyncStackTrace?: Protocol.Runtime.StackTrace;
+  asyncStackTraceId?: Protocol.Runtime.StackTraceId;
   constructor(
       debuggerModel: DebuggerModel,
       callFrames: Protocol.Debugger.CallFrame[],

package/front_end/core/sdk/IsolateManager.ts

@@ -49,6 +49,13 @@ export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventType
     }
   }
 
+  unobserveIsolates(observer: Observer): void {
+    this.#observers.delete(observer);
+    if (!this.#observers.size) {
+      this.#pollId++;
+    }
+  }
+
   modelAdded(model: RuntimeModel): void {
     void this.#modelAdded(model);
   }

package/front_end/core/sdk/NetworkManager.ts

@@ -1978,8 +1978,6 @@ export namespace RequestConditions {
   }
 }
 
-let multiTargetNetworkManagerInstance: MultitargetNetworkManager|null;
-
 export class AppliedNetworkConditions {
   constructor(
       readonly conditions: Conditions, readonly appliedNetworkConditionsId: string, readonly urlPattern?: string) {
@@ -1988,6 +1986,7 @@ export class AppliedNetworkConditions {
 
 export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrapper<MultitargetNetworkManager.EventTypes>
     implements SDKModelObserver<NetworkManager> {
+  readonly #targetManager: TargetManager;
   #userAgentOverride = '';
   #userAgentMetadataOverride: Protocol.Emulation.UserAgentMetadata|null = null;
   #customAcceptedEncodings: Protocol.Network.ContentEncoding[]|null = null;
@@ -2004,8 +2003,9 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
   #customUserAgent?: string;
   #isBlocking = false;
 
-  constructor() {
+  constructor(targetManager: TargetManager) {
     super();
+    this.#targetManager = targetManager;
 
     // TODO(allada) Remove these and merge it with request interception.
     const blockedPatternChanged: () => void = () => {
@@ -2016,22 +2016,24 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
         RequestConditions.Events.REQUEST_CONDITIONS_CHANGED, blockedPatternChanged);
     this.updateBlockedPatterns();
 
-    TargetManager.instance().observeModels(NetworkManager, this);
+    this.#targetManager.observeModels(NetworkManager, this);
   }
 
   static instance(opts: {
     forceNew: boolean|null,
+    targetManager?: TargetManager,
   } = {forceNew: null}): MultitargetNetworkManager {
-    const {forceNew} = opts;
-    if (!multiTargetNetworkManagerInstance || forceNew) {
-      multiTargetNetworkManagerInstance = new MultitargetNetworkManager();
+    const {forceNew, targetManager} = opts;
+    if (!Root.DevToolsContext.globalInstance().has(MultitargetNetworkManager) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(
+          MultitargetNetworkManager, new MultitargetNetworkManager(targetManager ?? TargetManager.instance()));
     }
 
-    return multiTargetNetworkManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(MultitargetNetworkManager);
   }
 
   static dispose(): void {
-    multiTargetNetworkManagerInstance = null;
+    Root.DevToolsContext.globalInstance().delete(MultitargetNetworkManager);
   }
 
   static patchUserAgentWithChromeVersion(uaString: string): string {
@@ -2319,7 +2321,7 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
   }
 
   async getCertificate(origin: string): Promise<string[]> {
-    const target = TargetManager.instance().primaryPageTarget();
+    const target = this.#targetManager.primaryPageTarget();
     if (!target) {
       return [];
     }

package/front_end/core/sdk/PageResourceLoader.ts

@@ -70,6 +70,13 @@ export class ResourceKey {
 
 export type UserAgentProvider = Pick<MultitargetNetworkManager, 'currentUserAgent'>;
 
+/**
+ * The PageResourceLoader has two responsibilities: loading resources and tracking statistics scoped to targets
+ * for the DeveloperResourcesPanel. Many places only require the former, so we expose that functionality via small
+ * sub-interface. This makes it easier to test classes that require resource loading.
+ */
+export type ResourceLoader = Pick<PageResourceLoader, 'loadResource'>;
+
 interface LoadQueueEntry {
   resolve: () => void;
   reject: (arg0: Error) => void;
@@ -80,7 +87,7 @@ interface LoadQueueEntry {
  * `PageResource` object around that holds meta information. This can be as the basis for reporting to the user which
  * resources were loaded, and whether there was a load error.
  */
-export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements ResourceLoader {
   readonly #targetManager: TargetManager;
   readonly #settings: Common.Settings.Settings;
   readonly #userAgentProvider: UserAgentProvider;
@@ -91,14 +98,14 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
   #queuedLoads: LoadQueueEntry[] = [];
   readonly #loadOverride: ((arg0: string) => Promise<{
                              success: boolean,
-                             content: string,
+                             content: string|Uint8Array<ArrayBuffer>,
                              errorDescription: Host.ResourceLoader.LoadErrorDescription,
                            }>)|null;
   constructor(
       targetManager: TargetManager, settings: Common.Settings.Settings, userAgentProvider: UserAgentProvider,
       loadOverride: ((arg0: string) => Promise<{
                        success: boolean,
-                       content: string,
+                       content: string|Uint8Array<ArrayBuffer>,
                        errorDescription: Host.ResourceLoader.LoadErrorDescription,
                      }>)|null,
       maxConcurrentLoads = 500) {
@@ -116,7 +123,7 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
     forceNew: boolean,
     loadOverride: (null|((arg0: string) => Promise<{
                            success: boolean,
-                           content: string,
+                           content: string|Uint8Array<ArrayBuffer>,
                            errorDescription: Host.ResourceLoader.LoadErrorDescription,
                          }>)),
     targetManager?: TargetManager,