chrome-devtools-frontend 1.0.1543082 → 1.0.1543472

package/AUTHORS

@@ -68,6 +68,7 @@ Michael Rienstra <mrienstra@gmail.com>
 Mostafa Aboalkasim <mostafa.aboalkasim.offical@gmail.com>
 Muhammad Mahad <mahadtxt@gmail.com>
 Naoto Ono <onoto1998@gmail.com>
+Nourhan Hasan <nourhan.m.hasan@gmail.com>
 Paras Awasthi <awasthiparas6@gmail.com>
 Paul Fisher <paul@pfish.zone>
 Peng Zhou <zhoupeng.1996@bytedance.com>

package/front_end/core/common/Gzip.ts

@@ -5,7 +5,7 @@
 /**
  * Quickly determine if gzipped, by seeing if the first 3 bytes of the file header match the gzip signature
  */
-export function isGzip(ab: ArrayBuffer): boolean {
+export function isGzip(ab: ArrayBufferLike): boolean {
   const buf = new Uint8Array(ab);
   if (!buf || buf.length < 3) {
     return false;
@@ -15,7 +15,7 @@ export function isGzip(ab: ArrayBuffer): boolean {
 }
 
 /** Decode a gzipped _or_ plain text ArrayBuffer to a decoded string */
-export async function arrayBufferToString(ab: ArrayBuffer): Promise<string> {
+export async function arrayBufferToString(ab: ArrayBufferLike): Promise<string> {
   if (isGzip(ab)) {
     return await decompress(ab);
   }
@@ -37,7 +37,7 @@ export async function fileToString(file: File): Promise<string> {
  * Decompress a gzipped ArrayBuffer to a string.
  * Consider using `arrayBufferToString` instead, which can handle both gzipped and plain text buffers.
  */
-export async function decompress(gzippedBuffer: ArrayBuffer): Promise<string> {
+export async function decompress(gzippedBuffer: ArrayBufferLike): Promise<string> {
   const buffer = await gzipCodec(gzippedBuffer, new DecompressionStream('gzip'));
   const str = new TextDecoder('utf-8').decode(buffer);
   return str;
@@ -50,7 +50,7 @@ export async function compress(str: string): Promise<ArrayBuffer> {
 
 /** Private coder/decoder **/
 async function gzipCodec(
-    buffer: Uint8Array<ArrayBufferLike>|ArrayBuffer,
+    buffer: Uint8Array<ArrayBufferLike>|ArrayBufferLike,
     codecStream: CompressionStream|DecompressionStream): Promise<ArrayBuffer> {
   const readable = new ReadableStream({
     start(controller) {

package/front_end/core/common/common.ts

@@ -21,7 +21,6 @@ import * as Mutex from './Mutex.js';
 import * as ObjectWrapper from './Object.js';
 import * as ParsedURL from './ParsedURL.js';
 import * as Progress from './Progress.js';
-import * as QueryParamHandler from './QueryParamHandler.js';
 import * as ResolverBase from './ResolverBase.js';
 import * as ResourceType from './ResourceType.js';
 import * as ReturnToPanel from './ReturnToPanel.js';
@@ -63,7 +62,6 @@ export {
   ObjectWrapper,
   ParsedURL,
   Progress,
-  QueryParamHandler,
   ResolverBase,
   ResourceType,
   ReturnToPanel,

package/front_end/core/root/DevToolsContext.ts

@@ -0,0 +1,60 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export type ConstructorT<T> = new (...args: any[]) => T;
+
+/**
+ * Container for singletons scoped to a single DevTools universe.
+ */
+export class DevToolsContext {
+  readonly #instances = new Map<ConstructorT<unknown>, unknown>();
+
+  get<T>(ctor: ConstructorT<T>): T {
+    const instance = this.#instances.get(ctor) as T | undefined;
+    if (!instance) {
+      throw new Error(`No instance for ${ctor.name}. Ensure the bootstrapper creates it.`);
+    }
+    return instance;
+  }
+
+  /** @deprecated Should only be used by existing `instance` accessors. */
+  has<T>(ctor: ConstructorT<T>): boolean {
+    return this.#instances.has(ctor);
+  }
+
+  /**
+   * @deprecated Should only be used by existing `instance` accessors and the bootstrapper.
+   * Exists on the public interface only for migration purposes for now.
+   */
+  set<T>(ctor: ConstructorT<T>, instance: T): void {
+    // TODO(crbug.com/458180550): We need to throw here if an instance was already set!
+    this.#instances.set(ctor, instance);
+  }
+
+  /** @deprecated Should only be used by existing `removeInstance` static methods. */
+  delete<T>(ctor: ConstructorT<T>): void {
+    this.#instances.delete(ctor);
+  }
+}
+
+let gInstance: DevToolsContext|null = null;
+
+/**
+ * @deprecated Exists to migrate instance() methods.
+ */
+export function globalInstance(): DevToolsContext {
+  if (!gInstance) {
+    // TODO(crbug.com/458180550): This should really throw to prevent side-effects and globals
+    //                            from leaking all over the place.
+    gInstance = new DevToolsContext();
+  }
+  return gInstance;
+}
+
+/**
+ * @deprecated Should only be called by test setup and MainImpl
+ */
+export function setGlobalInstance(context: DevToolsContext|null): void {
+  gInstance = context;
+}

package/front_end/core/root/root.ts

@@ -1,6 +1,11 @@
 // 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.
+
+import * as DevToolsContext from './DevToolsContext.js';
 import * as Runtime from './Runtime.js';
 
-export {Runtime};
+export {
+  DevToolsContext,
+  Runtime,
+};

package/front_end/core/sdk/TargetManager.ts

@@ -13,7 +13,6 @@ import * as Root from '../root/root.js';
 import {SDKModel} from './SDKModel.js';
 import {Target, Type as TargetType} from './Target.js';
 
-let targetManagerInstance: TargetManager|undefined;
 type ModelClass<T = SDKModel> = new (arg1: Target) => T;
 
 export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
@@ -35,7 +34,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   #defaultScopeSet: boolean;
   readonly #scopeChangeListeners: Set<() => void>;
 
-  private constructor() {
+  constructor() {
     super();
     this.#targets = new Set();
     this.#observers = new Set();
@@ -52,15 +51,15 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   static instance({forceNew}: {
     forceNew: boolean,
   } = {forceNew: false}): TargetManager {
-    if (!targetManagerInstance || forceNew) {
-      targetManagerInstance = new TargetManager();
+    if (!Root.DevToolsContext.globalInstance().has(TargetManager) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(TargetManager, new TargetManager());
     }
 
-    return targetManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(TargetManager);
   }
 
   static removeInstance(): void {
-    targetManagerInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(TargetManager);
   }
 
   onInspectedURLChange(target: Target): void {

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -46,20 +46,8 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/InspectorMain.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-let inspectorMainImplInstance: InspectorMainImpl;
 
 export class InspectorMainImpl implements Common.Runnable.Runnable {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): InspectorMainImpl {
-    const {forceNew} = opts;
-    if (!inspectorMainImplInstance || forceNew) {
-      inspectorMainImplInstance = new InspectorMainImpl();
-    }
-
-    return inspectorMainImplInstance;
-  }
-
   async run(): Promise<void> {
     let firstCall = true;
     await SDK.Connections.initMainConnection(async () => {
@@ -162,7 +150,7 @@ export class InspectorMainImpl implements Common.Runnable.Runnable {
   }
 }
 
-Common.Runnable.registerEarlyInitializationRunnable(InspectorMainImpl.instance);
+Common.Runnable.registerEarlyInitializationRunnable(() => new InspectorMainImpl());
 
 export class ReloadActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, actionId: string): boolean {

package/front_end/entrypoints/main/MainImpl.ts

@@ -175,7 +175,8 @@ export class MainImpl {
         runSettingsMigration: !Host.InspectorFrontendHost.isUnderTest(),
       },
     };
-    new Foundation.Universe.Universe(creationOptions);
+    const universe = new Foundation.Universe.Universe(creationOptions);
+    Root.DevToolsContext.setGlobalInstance(universe.context);
 
     await this.requestAndRegisterLocaleData();
 
@@ -445,7 +446,6 @@ export class MainImpl {
         SDK.TargetManager.Events.SUSPEND_STATE_CHANGED, this.#onSuspendStateChanged.bind(this));
 
     Workspace.FileManager.FileManager.instance({forceNew: true});
-    Workspace.Workspace.WorkspaceImpl.instance();
 
     Bindings.NetworkProject.NetworkProjectManager.instance();
     const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(
@@ -458,14 +458,12 @@ export class MainImpl {
       resourceMapping,
       targetManager,
     });
-    Workspace.IgnoreListManager.IgnoreListManager.instance({
-      forceNew: true,
-    });
     Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
       resourceMapping,
       targetManager,
       ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager.instance(),
+      workspace: Workspace.Workspace.WorkspaceImpl.instance(),
     });
     targetManager.setScopeTarget(targetManager.primaryPageTarget());
     UI.Context.Context.instance().addFlavorChangeListener(SDK.Target.Target, ({data}) => {

package/front_end/foundation/Universe.ts

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 
 import * as Common from '../core/common/common.js';
+import * as Root from '../core/root/root.js';
+import * as SDK from '../core/sdk/sdk.js';
+import * as Workspace from '../models/workspace/workspace.js';
 
 export interface CreationOptions {
   // Settings things
@@ -10,12 +13,21 @@ export interface CreationOptions {
 }
 
 export class Universe {
+  readonly context = new Root.DevToolsContext.DevToolsContext();
+
   constructor(options: CreationOptions) {
     // TODO(crbug.com/458180550): Store instance on a "DevToolsContext" instead.
     //                            For now the global is fine as we don't anticipate the MCP server to change settings.
-    Common.Settings.Settings.instance({
+    const settings = Common.Settings.Settings.instance({
       forceNew: true,
       ...options.settingsCreationOptions,
     });
+
+    const targetManager = new SDK.TargetManager.TargetManager();
+    this.context.set(SDK.TargetManager.TargetManager, targetManager);
+    this.context.set(Workspace.Workspace.WorkspaceImpl, new Workspace.Workspace.WorkspaceImpl());
+
+    const ignoreListManager = new Workspace.IgnoreListManager.IgnoreListManager(settings, targetManager);
+    this.context.set(Workspace.IgnoreListManager.IgnoreListManager, ignoreListManager);
   }
 }

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -28,12 +28,14 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
   readonly #liveLocationPromises: Set<Promise<void|Location|StackTraceTopFrameLocation|null>>;
   readonly pluginManager: DebuggerLanguagePluginManager;
   readonly ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager;
+  readonly workspace: Workspace.Workspace.WorkspaceImpl;
 
   private constructor(
       resourceMapping: ResourceMapping, targetManager: SDK.TargetManager.TargetManager,
-      ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager) {
+      ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager, workspace: Workspace.Workspace.WorkspaceImpl) {
     this.resourceMapping = resourceMapping;
     this.ignoreListManager = ignoreListManager;
+    this.workspace = workspace;
 
     this.#debuggerModelToData = new Map();
     targetManager.addModelListener(
@@ -62,17 +64,19 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     resourceMapping: ResourceMapping|null,
     targetManager: SDK.TargetManager.TargetManager|null,
     ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager|null,
-  } = {forceNew: null, resourceMapping: null, targetManager: null, ignoreListManager: null}): DebuggerWorkspaceBinding {
-    const {forceNew, resourceMapping, targetManager, ignoreListManager} = opts;
+    workspace: Workspace.Workspace.WorkspaceImpl|null,
+  } = {forceNew: null, resourceMapping: null, targetManager: null, ignoreListManager: null, workspace: null}):
+      DebuggerWorkspaceBinding {
+    const {forceNew, resourceMapping, targetManager, ignoreListManager, workspace} = opts;
     if (!debuggerWorkspaceBindingInstance || forceNew) {
-      if (!resourceMapping || !targetManager || !ignoreListManager) {
+      if (!resourceMapping || !targetManager || !ignoreListManager || !workspace) {
         throw new Error(
             `Unable to create DebuggerWorkspaceBinding: resourceMapping, targetManager and IgnoreLIstManager must be provided: ${
                 new Error().stack}`);
       }
 
       debuggerWorkspaceBindingInstance =
-          new DebuggerWorkspaceBinding(resourceMapping, targetManager, ignoreListManager);
+          new DebuggerWorkspaceBinding(resourceMapping, targetManager, ignoreListManager, workspace);
     }
 
     return debuggerWorkspaceBindingInstance;
@@ -271,11 +275,10 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
   waitForUISourceCodeAdded(url: Platform.DevToolsPath.UrlString, target: SDK.Target.Target):
       Promise<Workspace.UISourceCode.UISourceCode> {
     return new Promise(resolve => {
-      const workspace = Workspace.Workspace.WorkspaceImpl.instance();
-      const descriptor = workspace.addEventListener(Workspace.Workspace.Events.UISourceCodeAdded, event => {
+      const descriptor = this.workspace.addEventListener(Workspace.Workspace.Events.UISourceCodeAdded, event => {
         const uiSourceCode = event.data;
         if (uiSourceCode.url() === url && NetworkProject.targetForUISourceCode(uiSourceCode) === target) {
-          workspace.removeEventListener(Workspace.Workspace.Events.UISourceCodeAdded, descriptor.listener);
+          this.workspace.removeEventListener(Workspace.Workspace.Events.UISourceCodeAdded, descriptor.listener);
           resolve(uiSourceCode);
         }
       });

package/front_end/models/trace/handlers/SamplesHandler.ts

@@ -22,25 +22,73 @@ let entryToNode = new Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode
 // events matched by thread id.
 let preprocessedData = new Map<Types.Events.ProcessID, Map<Types.Events.ProfileID, PreprocessedData>>();
 
+/**
+ * Profile source selection priority when multiple profiles exist for the same thread.
+ *
+ * Profile sources and their typical scenarios:
+ * - 'Internal': Browser-initiated profiling performance panel traces.
+ *   This is the profiling mechanism when users click "Record" in the Devtools UI.
+ * - 'Inspector': User-initiated via console.profile()/profileEnd() calls.
+ *   Represents explicit developer intent to profile specific code.
+ * - 'SelfProfiling': Page-initiated via JS Self-Profiling API.
+ *    Lower signal vs the two above; treated as fallback.
+ *
+ * Selection strategy:
+ * - CPU Profile mode: Prefer 'Inspector' (explicit user request).
+ * - Performance trace: Prefer 'Internal' (integrated timeline context), then 'Inspector'.
+ * - Sources not in the priority list (including 'SelfProfiling') act as fallbacks.
+ *   When no priority source matches, the first candidate profile is selected.
+ */
+const PROFILE_SOURCES_BY_PRIORITY = {
+  cpuProfile: ['Inspector'] as Types.Events.ProfileSource[],
+  performanceTrace: ['Internal', 'Inspector'] as Types.Events.ProfileSource[],
+};
+
 function parseCPUProfileData(parseOptions: Types.Configuration.ParseOptions): void {
+  const priorityList =
+      parseOptions.isCPUProfile ? PROFILE_SOURCES_BY_PRIORITY.cpuProfile : PROFILE_SOURCES_BY_PRIORITY.performanceTrace;
+
   for (const [processId, profiles] of preprocessedData) {
+    const profilesByThread =
+        new Map<Types.Events.ThreadID, Array<{id: Types.Events.ProfileID, data: PreprocessedData}>>();
     for (const [profileId, preProcessedData] of profiles) {
       const threadId = preProcessedData.threadId;
-      if (!preProcessedData.rawProfile.nodes.length || threadId === undefined) {
+      if (threadId === undefined) {
+        continue;
+      }
+      const listForThread = Platform.MapUtilities.getWithDefault(profilesByThread, threadId, () => []);
+      listForThread.push({id: profileId, data: preProcessedData});
+    }
+
+    for (const [threadId, candidates] of profilesByThread) {
+      if (!candidates.length) {
+        continue;
+      }
+      let chosen = candidates[0];
+      for (const source of priorityList) {
+        const match = candidates.find(p => p.data.source === source);
+        if (match) {
+          chosen = match;
+          break;
+        }
+      }
+      const chosenData = chosen.data;
+      if (!chosenData.rawProfile.nodes.length) {
         continue;
       }
       const indexStack: number[] = [];
 
-      const profileModel = new CPUProfile.CPUProfileDataModel.CPUProfileDataModel(preProcessedData.rawProfile);
+      const profileModel = new CPUProfile.CPUProfileDataModel.CPUProfileDataModel(chosenData.rawProfile);
       const profileTree = Helpers.TreeHelpers.makeEmptyTraceEntryTree();
       profileTree.maxDepth = profileModel.maxDepth;
 
+      const selectedProfileId = chosen.id;
       const finalizedData: ProfileData = {
-        rawProfile: preProcessedData.rawProfile,
+        rawProfile: chosenData.rawProfile,
         parsedProfile: profileModel,
         profileCalls: [],
         profileTree,
-        profileId,
+        profileId: selectedProfileId,
       };
       const dataByThread = Platform.MapUtilities.getWithDefault(profilesInProcess, processId, () => new Map());
       dataByThread.set(threadId, finalizedData);
@@ -62,7 +110,8 @@ function parseCPUProfileData(parseOptions: Types.Configuration.ParseOptions): vo
           const ts = Helpers.Timing.milliToMicro(Types.Timing.Milli(timeStampMilliseconds));
           const nodeId = node.id as Helpers.TreeHelpers.TraceEntryNodeId;
 
-          const profileCall = Helpers.Trace.makeProfileCall(node, profileId, sampleIndex, ts, processId, threadId);
+          const profileCall =
+              Helpers.Trace.makeProfileCall(node, selectedProfileId, sampleIndex, ts, processId, threadId);
           finalizedData.profileCalls.push(profileCall);
           indexStack.push(finalizedData.profileCalls.length - 1);
           const traceEntryNode = Helpers.TreeHelpers.makeEmptyTraceEntryNode(profileCall, nodeId);
@@ -83,7 +132,7 @@ function parseCPUProfileData(parseOptions: Types.Configuration.ParseOptions): vo
           }
           const {callFrame, ts, pid, tid} = profileCall;
           const traceEntryNode = entryToNode.get(profileCall);
-          if (callFrame === undefined || ts === undefined || pid === undefined || profileId === undefined ||
+          if (callFrame === undefined || ts === undefined || pid === undefined || selectedProfileId === undefined ||
               tid === undefined || traceEntryNode === undefined) {
             return;
           }
@@ -138,6 +187,7 @@ export function handleEvent(event: Types.Events.Event): void {
     const profileData = getOrCreatePreProcessedData(event.pid, event.id);
     profileData.rawProfile.startTime = event.ts;
     profileData.threadId = event.tid;
+    assignProfileSourceIfKnown(profileData, event.args?.data?.source);
     return;
   }
   if (Types.Events.isProfileChunk(event)) {
@@ -186,6 +236,7 @@ export function handleEvent(event: Types.Events.Event): void {
       const timeDeltas: number[] = cdpProfile.timeDeltas;
       cdpProfile.endTime = timeDeltas.reduce((x, y) => x + y, cdpProfile.startTime);
     }
+    assignProfileSourceIfKnown(profileData, event.args?.data?.source);
     return;
   }
 }
@@ -194,6 +245,12 @@ export async function finalize(parseOptions: Types.Configuration.ParseOptions =
   parseCPUProfileData(parseOptions);
 }
 
+function assignProfileSourceIfKnown(profileData: PreprocessedData, source: unknown): void {
+  if (Types.Events.VALID_PROFILE_SOURCES.includes(source as Types.Events.ProfileSource)) {
+    profileData.source = source as Types.Events.ProfileSource;
+  }
+}
+
 export function data(): SamplesHandlerData {
   return {
     profilesInProcess,
@@ -251,6 +308,7 @@ interface PreprocessedData {
   rawProfile: CPUProfile.CPUProfileDataModel.ExtendedProfile;
   profileId: Types.Events.ProfileID;
   threadId?: Types.Events.ThreadID;
+  source?: Types.Events.ProfileSource;
 }
 
 /**

package/front_end/models/trace/types/TraceEvents.ts

@@ -161,6 +161,7 @@ export interface Profile extends Sample {
   args: Args&{
     data: ArgsData & {
       startTime: Micro,
+      source?: ProfileSource,
     },
   };
 }
@@ -174,6 +175,7 @@ export interface ProfileChunk extends Sample {
       cpuProfile?: PartialProfile,
       timeDeltas?: Micro[],
       lines?: Micro[],
+      source?: ProfileSource,
     },
   };
 }
@@ -191,6 +193,20 @@ export interface PartialProfile {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
+/**
+ * Source of profile data, used to select the most relevant profile when
+ * multiple profiles exist for the same thread.
+ *
+ * - 'Inspector': User-initiated via console.profile()/profileEnd().
+ * - 'Internal': Browser-initiated during performance traces.
+ * - 'SelfProfiling': Page-initiated via JS Self-Profiling API.
+ *
+ * Selection priority (see PROFILE_SOURCES_BY_PRIORITY in SamplesHandler.ts).
+ */
+export type ProfileSource = 'Inspector'|'SelfProfiling'|'Internal';
+
+export const VALID_PROFILE_SOURCES: readonly ProfileSource[] = ['Inspector', 'SelfProfiling', 'Internal'] as const;
+
 export interface PartialNode {
   callFrame: CallFrame;
   id: CallFrameID;

package/front_end/models/workspace/IgnoreListManager.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
 import type {UISourceCode} from './UISourceCode.js';
@@ -40,8 +41,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/workspace/IgnoreListManager.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-let ignoreListManagerInstance: IgnoreListManager|undefined;
-
 export interface IgnoreListGeneralRules {
   isContentScript?: boolean;
   isKnownThirdParty?: boolean;
@@ -57,7 +56,7 @@ export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventT
   readonly #isIgnoreListedURLCache = new Map<string, boolean>();
   readonly #contentScriptExecutionContexts = new Set<string>();
 
-  private constructor(settings: Common.Settings.Settings, targetManager: SDK.TargetManager.TargetManager) {
+  constructor(settings: Common.Settings.Settings, targetManager: SDK.TargetManager.TargetManager) {
     super();
     this.#settings = settings;
     this.#targetManager = targetManager;
@@ -89,17 +88,19 @@ export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     forceNew: null,
   }): IgnoreListManager {
     const {forceNew} = opts;
-    if (!ignoreListManagerInstance || forceNew) {
-      ignoreListManagerInstance = new IgnoreListManager(
-          opts.settings ?? Common.Settings.Settings.instance(),
-          opts.targetManager ?? SDK.TargetManager.TargetManager.instance());
+    if (forceNew) {
+      Root.DevToolsContext.globalInstance().set(
+          IgnoreListManager,
+          new IgnoreListManager(
+              opts.settings ?? Common.Settings.Settings.instance(),
+              opts.targetManager ?? SDK.TargetManager.TargetManager.instance()));
     }
 
-    return ignoreListManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(IgnoreListManager);
   }
 
   static removeInstance(): void {
-    ignoreListManagerInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(IgnoreListManager);
   }
 
   addChangeListener(listener: () => void): void {

package/front_end/models/workspace/WorkspaceImpl.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
 
 import type {SearchConfig} from './SearchConfig.js';
@@ -183,27 +184,21 @@ export abstract class ProjectStore implements Project {
       progress: Common.Progress.Progress): Promise<Map<UISourceCode, TextUtils.ContentProvider.SearchMatch[]|null>>;
 }
 
-let workspaceInstance: WorkspaceImpl|undefined;
-
 export class WorkspaceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #projects = new Map<string, Project>();
   #hasResourceContentTrackingExtensions = false;
 
-  private constructor() {
-    super();
-  }
-
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): WorkspaceImpl {
     const {forceNew} = opts;
-    if (!workspaceInstance || forceNew) {
-      workspaceInstance = new WorkspaceImpl();
+    if (!Root.DevToolsContext.globalInstance().has(WorkspaceImpl) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(WorkspaceImpl, new WorkspaceImpl());
     }
 
-    return workspaceInstance;
+    return Root.DevToolsContext.globalInstance().get(WorkspaceImpl);
   }
 
   static removeInstance(): void {
-    workspaceInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(WorkspaceImpl);
   }
 
   uiSourceCode(projectId: string, url: Platform.DevToolsPath.UrlString): UISourceCode|null {

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1158,7 +1158,6 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
     self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
     const emptyView = new UI.EmptyWidget.EmptyWidget(
         i18nString(UIStrings.noManifestDetected), i18nString(UIStrings.manifestDescription));
-    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     const reportView = new UI.ReportView.ReportView(i18nString(UIStrings.appManifest));
     this.view = new AppManifestView(emptyView, reportView, new Common.Throttler.Throttler(1000));
     UI.ARIAUtils.setLabel(this.listItemElement, i18nString(UIStrings.onInvokeManifestAlert));

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -153,7 +153,6 @@ export class OpenedWindowDetailsView extends UI.Widget.VBox {
     this.isWindowClosed = isWindowClosed;
 
     this.contentElement.classList.add('frame-details-container');
-    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.reportView = new UI.ReportView.ReportView(this.buildTitle());
 
     this.reportView.show(this.contentElement);
@@ -221,7 +220,6 @@ export class WorkerDetailsView extends UI.Widget.VBox {
     this.targetInfo = targetInfo;
 
     this.contentElement.classList.add('frame-details-container');
-    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.reportView =
         new UI.ReportView.ReportView(this.targetInfo.title || this.targetInfo.url || i18nString(UIStrings.worker));
 

package/front_end/panels/application/ServiceWorkersView.ts

@@ -202,7 +202,6 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     });
     this.registerRequiredCSS(serviceWorkersViewStyles);
 
-    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.currentWorkersView = new UI.ReportView.ReportView(i18n.i18n.lockedString('Service workers'));
     this.currentWorkersView.setBodyScrollable(false);
     this.contentElement.classList.add('service-worker-list');
@@ -221,7 +220,6 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
 
     const othersDiv = this.contentElement.createChild('div', 'service-workers-other-origin');
     othersDiv.setAttribute('jslog', `${VisualLogging.section('other-origin')}`);
-    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     const othersView = new UI.ReportView.ReportView();
     othersView.setHeaderVisible(false);
     othersView.show(othersDiv);

package/front_end/panels/application/StorageView.ts

@@ -181,7 +181,6 @@ export class StorageView extends UI.Widget.VBox {
       [Protocol.Storage.StorageType.Service_workers, 'rgb(255, 167, 36)'],  // orange
     ]);
 
-    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.reportView = new UI.ReportView.ReportView(i18nString(UIStrings.storageTitle));
     this.reportView.registerRequiredCSS(storageViewStyles);