chrome-devtools-frontend 1.0.1543472 → 1.0.1544076

package/AUTHORS

@@ -18,6 +18,7 @@ Alex Ho <wjhe1016@gmail.com>
 Alexander Stammbach <alexander@stammbach.io>
 Alexey Rodionov <fluorescent.hallucinogen@gmail.com>
 Ameen Basha <ameenbasha111@gmail.com>
+Ankit Kumar Sahu <sahuankit.murhu@gmail.com>
 Ankit Mishra <ankit.mishra131990@gmail.com>
 Anna Agoha <annaagoha@gmail.com>
 Anthony Xie <anthonyxie64@gmail.com>

package/front_end/core/host/AidaClient.ts

@@ -707,13 +707,16 @@ export class AidaClient {
     return {generatedSamples, metadata};
   }
 
-  async generateCode(request: GenerateCodeRequest): Promise<GenerateCodeResponse|null> {
-    const response = await DispatchHttpRequestClient.makeHttpRequest<GenerateCodeResponse>({
-      service: SERVICE_NAME,
-      path: '/v1/aida:generateCode',
-      method: 'POST',
-      body: JSON.stringify(request),
-    });
+  async generateCode(request: GenerateCodeRequest, options?: {signal?: AbortSignal}):
+      Promise<GenerateCodeResponse|null> {
+    const response = await DispatchHttpRequestClient.makeHttpRequest<GenerateCodeResponse>(
+        {
+          service: SERVICE_NAME,
+          path: '/v1/aida:generateCode',
+          method: 'POST',
+          body: JSON.stringify(request),
+        },
+        options);
 
     return response;
   }

package/front_end/core/host/DispatchHttpRequestClient.ts

@@ -8,6 +8,7 @@ import type {DispatchHttpRequestRequest, DispatchHttpRequestResult} from './Insp
 export enum ErrorType {
   HTTP_RESPONSE_UNAVAILABLE = 'HTTP_RESPONSE_UNAVAILABLE',
   NOT_FOUND = 'NOT_FOUND',
+  ABORT = 'ABORT',
 }
 
 export class DispatchHttpRequestError extends Error {
@@ -16,9 +17,23 @@ export class DispatchHttpRequestError extends Error {
   }
 }
 
-export async function makeHttpRequest<R>(request: DispatchHttpRequestRequest): Promise<R> {
-  const response = await new Promise<DispatchHttpRequestResult>(resolve => {
-    InspectorFrontendHostInstance.dispatchHttpRequest(request, resolve);
+export async function makeHttpRequest<R>(
+    request: DispatchHttpRequestRequest, options?: {signal?: AbortSignal}): Promise<R> {
+  const signal = options?.signal;
+  if (signal?.aborted) {
+    throw new DispatchHttpRequestError(ErrorType.ABORT);
+  }
+
+  const response = await new Promise<DispatchHttpRequestResult>((resolve, reject) => {
+    const onAbort = (): void => {
+      reject(new DispatchHttpRequestError(ErrorType.ABORT));
+    };
+
+    signal?.addEventListener('abort', onAbort, {once: true});
+    InspectorFrontendHostInstance.dispatchHttpRequest(request, result => {
+      signal?.removeEventListener('abort', onAbort);
+      resolve(result);
+    });
   });
 
   debugLog({request, response});

package/front_end/core/root/Runtime.ts

@@ -70,21 +70,22 @@ export class Runtime {
     runtimeInstance = undefined;
   }
 
-  static queryParamsObject: URLSearchParams;
+  static #queryParamsObject: URLSearchParams;
 
-  static getSearchParams(): URLSearchParams {
-    if (!Runtime.queryParamsObject) {
-      Runtime.queryParamsObject = new URLSearchParams(location.search);
+  static #getSearchParams(): URLSearchParams|null {
+    // TODO(crbug.com/451502260): Find a more explicit way to support running in Node.js
+    if (!Runtime.#queryParamsObject && 'location' in globalThis) {
+      Runtime.#queryParamsObject = new URLSearchParams(location.search);
     }
-    return Runtime.queryParamsObject;
+    return Runtime.#queryParamsObject;
   }
 
   static queryParam(name: string): string|null {
-    return Runtime.getSearchParams().get(name);
+    return Runtime.#getSearchParams()?.get(name) ?? null;
   }
 
   static setQueryParamForTesting(name: string, value: string): void {
-    Runtime.getSearchParams().set(name, value);
+    Runtime.#getSearchParams()?.set(name, value);
   }
 
   static isNode(): boolean {

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -184,10 +184,6 @@ export interface EventTypes {
   [Events.HARDWARE_CONCURRENCY_CHANGED]: number;
 }
 
-export function throttlingManager(): CPUThrottlingManager {
-  return CPUThrottlingManager.instance();
-}
-
 export enum CPUThrottlingRates {
   NO_THROTTLING = 1,
   MID_TIER_MOBILE = 4,

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -41,7 +41,7 @@ import {
   VariableMatcher
 } from './CSSPropertyParserMatchers.js';
 import {
-  CSSFontPaletteValuesRule,
+  CSSAtRule,
   CSSFunctionRule,
   CSSKeyframeRule,
   CSSKeyframesRule,
@@ -210,7 +210,7 @@ export interface CSSMatchedStylesPayload {
   positionTryRules: Protocol.CSS.CSSPositionTryRule[];
   propertyRules: Protocol.CSS.CSSPropertyRule[];
   cssPropertyRegistrations: Protocol.CSS.CSSPropertyRegistration[];
-  fontPaletteValuesRule: Protocol.CSS.CSSFontPaletteValuesRule|undefined;
+  atRules: Protocol.CSS.CSSAtRule[];
   animationStylesPayload: Protocol.CSS.CSSAnimationStyle[];
   transitionsStylePayload: Protocol.CSS.CSSStyle|null;
   inheritedAnimatedPayload: Protocol.CSS.InheritedAnimatedStyleEntry[];
@@ -305,8 +305,8 @@ export class CSSMatchedStyles {
   #pseudoDOMCascades?: Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>;
   #customHighlightPseudoDOMCascades?: Map<string, DOMInheritanceCascade>;
   #functionRules: CSSFunctionRule[];
+  #atRules: CSSAtRule[];
   #functionRuleMap = new Map<string, CSSFunctionRule>();
-  readonly #fontPaletteValuesRule: CSSFontPaletteValuesRule|undefined;
   #environmentVariables: Record<string, string> = {};
 
   static async create(payload: CSSMatchedStylesPayload): Promise<CSSMatchedStyles> {
@@ -323,9 +323,9 @@ export class CSSMatchedStyles {
     positionTryRules,
     propertyRules,
     cssPropertyRegistrations,
-    fontPaletteValuesRule,
     activePositionFallbackIndex,
     functionRules,
+    atRules,
   }: CSSMatchedStylesPayload) {
     this.#cssModel = cssModel;
     this.#node = node;
@@ -338,11 +338,9 @@ export class CSSMatchedStyles {
     }
     this.#positionTryRules = positionTryRules.map(rule => new CSSPositionTryRule(cssModel, rule));
     this.#parentLayoutNodeId = parentLayoutNodeId;
-    this.#fontPaletteValuesRule =
-        fontPaletteValuesRule ? new CSSFontPaletteValuesRule(cssModel, fontPaletteValuesRule) : undefined;
-
     this.#activePositionFallbackIndex = activePositionFallbackIndex;
     this.#functionRules = functionRules.map(rule => new CSSFunctionRule(cssModel, rule));
+    this.#atRules = atRules.map(rule => new CSSAtRule(cssModel, rule));
   }
 
   private async init({
@@ -799,8 +797,8 @@ export class CSSMatchedStyles {
     return this.#functionRules;
   }
 
-  fontPaletteValuesRule(): CSSFontPaletteValuesRule|undefined {
-    return this.#fontPaletteValuesRule;
+  atRules(): CSSAtRule[] {
+    return this.#atRules;
   }
 
   keyframes(): CSSKeyframesRule[] {

package/front_end/core/sdk/CSSModel.ts

@@ -358,7 +358,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       propertyRules: matchedStylesResponse.cssPropertyRules ?? [],
       functionRules: matchedStylesResponse.cssFunctionRules ?? [],
       cssPropertyRegistrations: matchedStylesResponse.cssPropertyRegistrations ?? [],
-      fontPaletteValuesRule: matchedStylesResponse.cssFontPaletteValuesRule,
+      atRules: matchedStylesResponse.cssAtRules ?? [],
       activePositionFallbackIndex: matchedStylesResponse.activePositionFallbackIndex ?? -1,
       animationStylesPayload: animatedStylesResponse?.animationStyles || [],
       inheritedAnimatedPayload: animatedStylesResponse?.inherited || [],

package/front_end/core/sdk/CSSRule.ts

@@ -268,20 +268,32 @@ export class CSSPropertyRule extends CSSRule {
   }
 }
 
-export class CSSFontPaletteValuesRule extends CSSRule {
-  readonly #paletteName: CSSValue;
-  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSFontPaletteValuesRule) {
+export class CSSAtRule extends CSSRule {
+  readonly #name: CSSValue|null;
+  readonly #type: string;
+  readonly #subsection: string|null;
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSAtRule) {
     super(cssModel, {
       origin: payload.origin,
       style: payload.style,
       header: styleSheetHeaderForRule(cssModel, payload),
       originTreeScopeNodeId: undefined
     });
-    this.#paletteName = new CSSValue(payload.fontPaletteName);
+    this.#name = payload.name ? new CSSValue(payload.name) : null;
+    this.#type = payload.type;
+    this.#subsection = payload.subsection ?? null;
   }
 
-  name(): CSSValue {
-    return this.#paletteName;
+  name(): CSSValue|null {
+    return this.#name;
+  }
+
+  type(): string {
+    return this.#type;
+  }
+
+  subsection(): string|null {
+    return this.#subsection;
   }
 }
 

package/front_end/core/sdk/ChildTargetManager.ts

@@ -13,7 +13,7 @@ import {SDKModel} from './SDKModel.js';
 import {SecurityOriginManager} from './SecurityOriginManager.js';
 import {StorageKeyManager} from './StorageKeyManager.js';
 import {Capability, type Target, Type} from './Target.js';
-import {Events as TargetManagerEvents, TargetManager} from './TargetManager.js';
+import {Events as TargetManagerEvents, type TargetManager} from './TargetManager.js';
 
 const UIStrings = {
   /**
@@ -126,7 +126,7 @@ export class ChildTargetManager extends SDKModel<EventTypes> implements Protocol
   }
 
   private fireAvailableTargetsChanged(): void {
-    TargetManager.instance().dispatchEventToListeners(
+    this.#targetManager.dispatchEventToListeners(
         TargetManagerEvents.AVAILABLE_TARGETS_CHANGED, [...this.#targetInfos.values()]);
   }
 

package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshotLoader.ts

@@ -46,6 +46,8 @@ export class HeapSnapshotLoader {
   }
 
   async buildSnapshot(secondWorker: MessagePort): Promise<JSHeapSnapshot> {
+    await this.parsingComplete;
+
     this.#snapshot = this.#snapshot || {};
 
     this.#progress.updateStatus('Processing snapshot…');

package/front_end/entrypoints/main/MainImpl.ts

@@ -448,23 +448,7 @@ export class MainImpl {
     Workspace.FileManager.FileManager.instance({forceNew: true});
 
     Bindings.NetworkProject.NetworkProjectManager.instance();
-    const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(
-        targetManager,
-        Workspace.Workspace.WorkspaceImpl.instance(),
-    );
     new Bindings.PresentationConsoleMessageHelper.PresentationConsoleMessageManager();
-    Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance({
-      forceNew: true,
-      resourceMapping,
-      targetManager,
-    });
-    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}) => {
       const outermostTarget = data?.outermostTarget();

package/front_end/foundation/Universe.ts

@@ -5,6 +5,7 @@
 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 Bindings from '../models/bindings/bindings.js';
 import * as Workspace from '../models/workspace/workspace.js';
 
 export interface CreationOptions {
@@ -25,9 +26,19 @@ export class Universe {
 
     const targetManager = new SDK.TargetManager.TargetManager();
     this.context.set(SDK.TargetManager.TargetManager, targetManager);
-    this.context.set(Workspace.Workspace.WorkspaceImpl, new Workspace.Workspace.WorkspaceImpl());
+
+    const workspace = new Workspace.Workspace.WorkspaceImpl();
+    this.context.set(Workspace.Workspace.WorkspaceImpl, workspace);
 
     const ignoreListManager = new Workspace.IgnoreListManager.IgnoreListManager(settings, targetManager);
     this.context.set(Workspace.IgnoreListManager.IgnoreListManager, ignoreListManager);
+
+    const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
+    const cssWorkspaceBinding = new Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding(resourceMapping, targetManager);
+    this.context.set(Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding, cssWorkspaceBinding);
+
+    const debuggerWorkspaceBinding = new Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding(
+        resourceMapping, targetManager, ignoreListManager, workspace);
+    this.context.set(Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding, debuggerWorkspaceBinding);
   }
 }

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -204,6 +204,15 @@ export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,
 }|{error: string};
 
+export interface FunctionHandlerOptions {
+  /**
+   * Shows that the user approved
+   * the execution if it was required
+   */
+  approved?: boolean;
+  signal?: AbortSignal;
+}
+
 export interface FunctionDeclaration<Args extends Record<string, unknown>, ReturnType> {
   /**
    * Description of function, this is send to the LLM
@@ -228,14 +237,7 @@ export interface FunctionDeclaration<Args extends Record<string, unknown>, Retur
   /**
    * Function implementation that the LLM will try to execute,
    */
-  handler: (args: Args, options?: {
-    /**
-     * Shows that the user approved
-     * the execution if it was required
-     */
-    approved?: boolean,
-    signal?: AbortSignal,
-  }) => Promise<FunctionCallHandlerResult<ReturnType>>;
+  handler: (args: Args, options?: FunctionHandlerOptions) => Promise<FunctionCallHandlerResult<ReturnType>>;
 }
 
 interface AidaFetchResult {

package/front_end/models/ai_assistance/agents/PatchAgent.ts

@@ -151,7 +151,13 @@ export class PatchAgent extends AiAgent<Workspace.Workspace.Project> {
         return {
           result: {
             matches: await this.#project.searchFiles(
-                args.query, args.caseSensitive, args.isRegex, {signal: options?.signal}),
+                args.query,
+                args.caseSensitive,
+                args.isRegex,
+                {
+                  signal: options?.signal,
+                },
+                ),
           }
         };
       },

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -10,7 +10,6 @@ import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Tracing from '../../../services/tracing/tracing.js';
 import * as Trace from '../../trace/trace.js';
-import {ConversationType} from '../AiHistoryStorage.js';
 import {
   PerformanceInsightFormatter,
 } from '../data_formatters/PerformanceInsightFormatter.js';
@@ -323,10 +322,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     };
   }
 
-  getConversationType(): ConversationType {
-    return ConversationType.PERFORMANCE;
-  }
-
   async *
       handleContextDetails(context: ConversationContext<AgentFocus>|null): AsyncGenerator<ContextResponse, void, void> {
     if (!context) {

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -21,9 +21,10 @@ import {
   ConversationContext,
   type ConversationSuggestions,
   type FunctionCallHandlerResult,
+  type FunctionHandlerOptions,
   MultimodalInputType,
   type RequestOptions,
-  ResponseType,
+  ResponseType
 } from './AiAgent.js';
 
 /*
@@ -268,11 +269,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   #createExtensionScope: CreateExtensionScopeFunction;
 
   constructor(opts: AgentOptions) {
-    super({
-      aidaClient: opts.aidaClient,
-      serverSideLoggingEnabled: opts.serverSideLoggingEnabled,
-      confirmSideEffectForTest: opts.confirmSideEffectForTest,
-    });
+    super(opts);
 
     this.#changes = opts.changeManager || new ChangeManager();
     this.#execJs = opts.execJs ?? executeJsCode;
@@ -633,8 +630,7 @@ const data = {
     };
   }
 
-  async executeAction(action: string, options?: {signal?: AbortSignal, approved?: boolean}):
-      Promise<FunctionCallHandlerResult<unknown>> {
+  async executeAction(action: string, options?: FunctionHandlerOptions): Promise<FunctionCallHandlerResult<unknown>> {
     debugLog(`Action to execute: ${action}`);
 
     if (options?.approved === false) {

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -46,7 +46,7 @@ export interface Callbacks {
 }
 
 /* clang-format off */
-const consoleAdditionalContextFileContent = `/**
+export const consoleAdditionalContextFileContent = `/**
  * This file describes the execution environment of the Chrome DevTools Console.
  * The code is JavaScript, but with special global functions and variables.
  * Top-level await is available.

package/front_end/models/ai_code_generation/AiCodeGeneration.ts

@@ -73,6 +73,7 @@ export class AiCodeGeneration {
         inference_language: inferenceLanguage,
         temperature: validTemperature(this.#options.temperature),
         model_id: this.#options.modelId || undefined,
+        expect_code_output: true,
       },
       metadata: {
         disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
@@ -139,10 +140,11 @@ export class AiCodeGeneration {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeGenerationSuggestionAccepted);
   }
 
-  async generateCode(prompt: string, preamble: string, inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage):
-      Promise<Host.AidaClient.GenerateCodeResponse|null> {
+  async generateCode(
+      prompt: string, preamble: string, inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage,
+      options?: {signal?: AbortSignal}): Promise<Host.AidaClient.GenerateCodeResponse|null> {
     const request = this.#buildRequest(prompt, preamble, inferenceLanguage);
-    const response = await this.#aidaClient.generateCode(request);
+    const response = await this.#aidaClient.generateCode(request, options);
 
     debugLog({request, response});
 

package/front_end/models/bindings/CSSWorkspaceBinding.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.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 * as Workspace from '../workspace/workspace.js';
 
@@ -16,15 +17,14 @@ import type {ResourceMapping} from './ResourceMapping.js';
 import {SASSSourceMapping} from './SASSSourceMapping.js';
 import {StylesSourceMapping} from './StylesSourceMapping.js';
 
-let cssWorkspaceBindingInstance: CSSWorkspaceBinding|undefined;
-
 export class CSSWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<SDK.CSSModel.CSSModel> {
   readonly #resourceMapping: ResourceMapping;
   readonly #modelToInfo: Map<SDK.CSSModel.CSSModel, ModelInfo>;
   readonly #liveLocationPromises: Set<Promise<unknown>>;
 
-  private constructor(resourceMapping: ResourceMapping, targetManager: SDK.TargetManager.TargetManager) {
+  constructor(resourceMapping: ResourceMapping, targetManager: SDK.TargetManager.TargetManager) {
     this.#resourceMapping = resourceMapping;
+    this.#resourceMapping.cssWorkspaceBinding = this;
     this.#modelToInfo = new Map();
     targetManager.observeModels(SDK.CSSModel.CSSModel, this);
 
@@ -37,20 +37,21 @@ export class CSSWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<S
     targetManager: SDK.TargetManager.TargetManager|null,
   } = {forceNew: null, resourceMapping: null, targetManager: null}): CSSWorkspaceBinding {
     const {forceNew, resourceMapping, targetManager} = opts;
-    if (!cssWorkspaceBindingInstance || forceNew) {
+    if (forceNew) {
       if (!resourceMapping || !targetManager) {
         throw new Error(`Unable to create CSSWorkspaceBinding: resourceMapping and targetManager must be provided: ${
             new Error().stack}`);
       }
 
-      cssWorkspaceBindingInstance = new CSSWorkspaceBinding(resourceMapping, targetManager);
+      Root.DevToolsContext.globalInstance().set(
+          CSSWorkspaceBinding, new CSSWorkspaceBinding(resourceMapping, targetManager));
     }
 
-    return cssWorkspaceBindingInstance;
+    return Root.DevToolsContext.globalInstance().get(CSSWorkspaceBinding);
   }
 
   static removeInstance(): void {
-    cssWorkspaceBindingInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(CSSWorkspaceBinding);
   }
 
   get modelToInfo(): Map<SDK.CSSModel.CSSModel, ModelInfo> {

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.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 * as Protocol from '../../generated/protocol.js';
 import type * as StackTrace from '../stack_trace/stack_trace.js';
@@ -20,8 +21,6 @@ import {NetworkProject} from './NetworkProject.js';
 import type {ResourceMapping} from './ResourceMapping.js';
 import {type ResourceScriptFile, ResourceScriptMapping} from './ResourceScriptMapping.js';
 
-let debuggerWorkspaceBindingInstance: DebuggerWorkspaceBinding|undefined;
-
 export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
   readonly resourceMapping: ResourceMapping;
   readonly #debuggerModelToData: Map<SDK.DebuggerModel.DebuggerModel, ModelData>;
@@ -30,10 +29,11 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
   readonly ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager;
   readonly workspace: Workspace.Workspace.WorkspaceImpl;
 
-  private constructor(
+  constructor(
       resourceMapping: ResourceMapping, targetManager: SDK.TargetManager.TargetManager,
       ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager, workspace: Workspace.Workspace.WorkspaceImpl) {
     this.resourceMapping = resourceMapping;
+    this.resourceMapping.debuggerWorkspaceBinding = this;
     this.ignoreListManager = ignoreListManager;
     this.workspace = workspace;
 
@@ -68,22 +68,23 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
   } = {forceNew: null, resourceMapping: null, targetManager: null, ignoreListManager: null, workspace: null}):
       DebuggerWorkspaceBinding {
     const {forceNew, resourceMapping, targetManager, ignoreListManager, workspace} = opts;
-    if (!debuggerWorkspaceBindingInstance || forceNew) {
+    if (forceNew) {
       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, workspace);
+      Root.DevToolsContext.globalInstance().set(
+          DebuggerWorkspaceBinding,
+          new DebuggerWorkspaceBinding(resourceMapping, targetManager, ignoreListManager, workspace));
     }
 
-    return debuggerWorkspaceBindingInstance;
+    return Root.DevToolsContext.globalInstance().get(DebuggerWorkspaceBinding);
   }
 
   static removeInstance(): void {
-    debuggerWorkspaceBindingInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(DebuggerWorkspaceBinding);
   }
 
   private async computeAutoStepRanges(mode: SDK.DebuggerModel.StepMode, callFrame: SDK.DebuggerModel.CallFrame):