chrome-devtools-frontend 1.0.1656291 → 1.0.1657110

package/front_end/entrypoints/main/GlobalAiButton.ts

@@ -38,13 +38,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const DELAY_BEFORE_PROMOTION_COLLAPSE_IN_MS = 5000;
 const PROMOTION_END_DATE = new Date('2026-09-30');
 
-function getClickCountSetting(): Common.Settings.Setting<number> {
-  return Common.Settings.Settings.instance().createSetting<number>(
-      'global-ai-button-click-count', 0, Common.Settings.SettingStorageType.SYNCED);
+function getClickCountSetting(settings: Common.Settings.Settings): Common.Settings.Setting<number> {
+  return settings.createSetting<number>('global-ai-button-click-count', 0, Common.Settings.SettingStorageType.SYNCED);
 }
 
-function incrementClickCountSetting(): void {
-  const setting = getClickCountSetting();
+function incrementClickCountSetting(settings: Common.Settings.Settings): void {
+  const setting = getClickCountSetting(settings);
   setting.set(setting.get() + 1);
 }
 
@@ -89,10 +88,19 @@ export class GlobalAiButton extends UI.Widget.Widget {
   #buttonState: GlobalAiButtonState = GlobalAiButtonState.DEFAULT;
   #mouseOnMainToolbar = false;
   #returnToDefaultStateTimeout?: number;
-
-  constructor(element?: HTMLElement, view?: View) {
+  readonly #settings: Common.Settings.Settings;
+  readonly #inspectorView: UI.InspectorView.InspectorView;
+  readonly #viewManager: UI.ViewManager.ViewManager;
+
+  constructor(element?: HTMLElement, view?: View,
+              settings: Common.Settings.Settings = Common.Settings.Settings.instance(),
+              inspectorView: UI.InspectorView.InspectorView = UI.InspectorView.InspectorView.instance(),
+              viewManager: UI.ViewManager.ViewManager = UI.ViewManager.ViewManager.instance()) {
     super(element);
     this.#view = view ?? DEFAULT_VIEW;
+    this.#settings = settings;
+    this.#inspectorView = inspectorView;
+    this.#viewManager = viewManager;
     this.requestUpdate();
 
     if (this.#shouldTriggerPromotion()) {
@@ -118,17 +126,13 @@ export class GlobalAiButton extends UI.Widget.Widget {
   };
 
   #addHoverEventListeners(): void {
-    UI.InspectorView.InspectorView.instance().tabbedPane.headerElement().addEventListener(
-        'mouseenter', this.#handleMainToolbarMouseEnter);
-    UI.InspectorView.InspectorView.instance().tabbedPane.headerElement().addEventListener(
-        'mouseleave', this.#handleMainToolbarMouseLeave);
+    this.#inspectorView.tabbedPane.headerElement().addEventListener('mouseenter', this.#handleMainToolbarMouseEnter);
+    this.#inspectorView.tabbedPane.headerElement().addEventListener('mouseleave', this.#handleMainToolbarMouseLeave);
   }
 
   #removeHoverEventListeners(): void {
-    UI.InspectorView.InspectorView.instance().tabbedPane.headerElement().removeEventListener(
-        'mouseenter', this.#handleMainToolbarMouseEnter);
-    UI.InspectorView.InspectorView.instance().tabbedPane.headerElement().removeEventListener(
-        'mouseleave', this.#handleMainToolbarMouseLeave);
+    this.#inspectorView.tabbedPane.headerElement().removeEventListener('mouseenter', this.#handleMainToolbarMouseEnter);
+    this.#inspectorView.tabbedPane.headerElement().removeEventListener('mouseleave', this.#handleMainToolbarMouseLeave);
   }
 
   // We only want to enable promotion when:
@@ -138,7 +142,7 @@ export class GlobalAiButton extends UI.Widget.Widget {
   #shouldTriggerPromotion(): boolean {
     const isFlagEnabled = Boolean(Root.Runtime.hostConfig.devToolsGlobalAiButton?.promotionEnabled);
     const isBeforeEndDate = (new Date()) < PROMOTION_END_DATE;
-    return isFlagEnabled && isBeforeEndDate && getClickCountSetting().get() < 2;
+    return isFlagEnabled && isBeforeEndDate && getClickCountSetting(this.#settings).get() < 2;
   }
 
   #triggerPromotion(): void {
@@ -173,23 +177,21 @@ export class GlobalAiButton extends UI.Widget.Widget {
   }
 
   #onClick(): void {
-    UI.ViewManager.ViewManager.instance().showViewInLocation('freestyler', 'drawer-view');
-    incrementClickCountSetting();
+    this.#viewManager.showViewInLocation('freestyler', 'drawer-view');
+    incrementClickCountSetting(this.#settings);
 
-    const hasExplicitUserPreference =
-        UI.InspectorView.InspectorView.instance().isUserExplicitlyUpdatedDrawerOrientation();
+    const hasExplicitUserPreference = this.#inspectorView.isUserExplicitlyUpdatedDrawerOrientation();
     const isVerticalDrawerFeatureEnabled =
         Boolean(Root.Runtime.hostConfig.devToolsFlexibleLayout?.verticalDrawerEnabled);
     if (isVerticalDrawerFeatureEnabled && !hasExplicitUserPreference) {
       // This mimics what we're doing while showing the drawer via `ESC`.
       // There is a bug where opening the sidebar directly for the first time,
       // and triggering a drawer rotation without calling `showDrawer({focus: true})` makes the drawer disappear.
-      UI.InspectorView.InspectorView.instance().showDrawer({
+      this.#inspectorView.showDrawer({
         focus: true,
         hasTargetDrawer: false,
       });
-      UI.InspectorView.InspectorView.instance().toggleDrawerOrientation(
-          {force: UI.InspectorView.DrawerOrientation.VERTICAL});
+      this.#inspectorView.toggleDrawerOrientation({force: UI.InspectorView.DrawerOrientation.VERTICAL});
     }
   }
 
@@ -203,14 +205,15 @@ export class GlobalAiButton extends UI.Widget.Widget {
   }
 }
 
-let globalAiButtonToolbarProviderInstance: GlobalAiButtonToolbarProvider;
 export class GlobalAiButtonToolbarProvider implements UI.Toolbar.Provider {
   #toolbarItem: UI.Toolbar.ToolbarItemWithCompactLayout;
   #widgetElement: UI.Widget.WidgetElement<GlobalAiButton>;
 
-  private constructor() {
+  constructor(settings: Common.Settings.Settings = Common.Settings.Settings.instance(),
+              inspectorView: UI.InspectorView.InspectorView = UI.InspectorView.InspectorView.instance(),
+              viewManager: UI.ViewManager.ViewManager = UI.ViewManager.ViewManager.instance()) {
     this.#widgetElement = document.createElement('devtools-widget') as UI.Widget.WidgetElement<GlobalAiButton>;
-    new GlobalAiButton(this.#widgetElement);
+    new GlobalAiButton(this.#widgetElement, undefined, settings, inspectorView, viewManager);
 
     this.#toolbarItem = new UI.Toolbar.ToolbarItemWithCompactLayout(this.#widgetElement);
     this.#toolbarItem.setVisible(false);
@@ -219,13 +222,4 @@ export class GlobalAiButtonToolbarProvider implements UI.Toolbar.Provider {
   item(): UI.Toolbar.ToolbarItem|null {
     return this.#toolbarItem;
   }
-
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): GlobalAiButtonToolbarProvider {
-    const {forceNew} = opts;
-    if (!globalAiButtonToolbarProviderInstance || forceNew) {
-      globalAiButtonToolbarProviderInstance = new GlobalAiButtonToolbarProvider();
-    }
-
-    return globalAiButtonToolbarProviderInstance;
-  }
 }

package/front_end/entrypoints/main/MainImpl.ts

@@ -477,7 +477,7 @@ export class MainImpl {
 
     new ExecutionContextSelector(targetManager, UI.Context.Context.instance());
 
-    LiveMetrics.LiveMetrics.instance();
+    void LiveMetrics.LiveMetrics.instance().enable();
     CrUXManager.CrUXManager.instance();
 
     const builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance();

package/front_end/entrypoints/main/SimpleApp.ts

@@ -13,20 +13,7 @@ export class SimpleApp implements UI.App.App {
   }
 }
 
-let simpleAppProviderInstance: SimpleAppProvider;
-
 export class SimpleAppProvider implements UI.AppProvider.AppProvider {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): SimpleAppProvider {
-    const {forceNew} = opts;
-    if (!simpleAppProviderInstance || forceNew) {
-      simpleAppProviderInstance = new SimpleAppProvider();
-    }
-
-    return simpleAppProviderInstance;
-  }
-
   createApp(): UI.App.App {
     return new SimpleApp();
   }

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

@@ -913,7 +913,7 @@ UI.Toolbar.registerToolbarItem({
   },
   async loadItem() {
     const Main = await loadMainModule();
-    return Main.GlobalAiButton.GlobalAiButtonToolbarProvider.instance();
+    return new Main.GlobalAiButton.GlobalAiButtonToolbarProvider();
   },
   order: 98,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_RIGHT,
@@ -949,7 +949,7 @@ UI.Toolbar.registerToolbarItem({
 UI.AppProvider.registerAppProvider({
   async loadAppProvider() {
     const Main = await loadMainModule();
-    return Main.SimpleApp.SimpleAppProvider.instance();
+    return new Main.SimpleApp.SimpleAppProvider();
   },
   order: 10,
 });

package/front_end/entrypoints/node_app/app/NodeConnectionsPanel.ts

@@ -95,9 +95,8 @@ export class NodeConnectionsView extends UI.Widget.VBox implements UI.ListWidget
     this.element.classList.add('network-discovery-view');
 
     const networkDiscoveryFooter = this.element.createChild('div', 'network-discovery-footer');
-    const documentationLink = Link.create(
-        'https://nodejs.org/en/docs/inspector/', i18nString(UIStrings.nodejsDebuggingGuide), undefined,
-        'node-js-debugging');
+    const documentationLink = Link.create('https://nodejs.org/learn/getting-started/debugging',
+                                          i18nString(UIStrings.nodejsDebuggingGuide), undefined, 'node-js-debugging');
     networkDiscoveryFooter.appendChild(
         uiI18n.getFormatLocalizedString(str_, UIStrings.specifyNetworkEndpointAnd, {PH1: documentationLink}));
 

package/front_end/foundation/Universe.ts

@@ -9,6 +9,8 @@ import * as SDK from '../core/sdk/sdk.js';
 import * as AutofillManager from '../models/autofill_manager/autofill_manager.js';
 import * as Bindings from '../models/bindings/bindings.js';
 import * as Breakpoints from '../models/breakpoints/breakpoints.js';
+import * as CrUXManager from '../models/crux-manager/crux-manager.js';
+import * as Emulation from '../models/emulation/emulation.js';
 import * as JavaScriptMetadata from '../models/javascript_metadata/javascript_metadata.js';
 import * as Logs from '../models/logs/logs.js';
 import * as Persistence from '../models/persistence/persistence.js';
@@ -59,6 +61,10 @@ export class Universe {
     const multitargetNetworkManager = new SDK.NetworkManager.MultitargetNetworkManager(targetManager);
     context.set(SDK.NetworkManager.MultitargetNetworkManager, multitargetNetworkManager);
 
+    const deviceModeModel =
+        new Emulation.DeviceModeModel.DeviceModeModel(targetManager, settings, multitargetNetworkManager);
+    context.set(Emulation.DeviceModeModel.DeviceModeModel, deviceModeModel);
+
     const pageResourceLoader =
         new SDK.PageResourceLoader.PageResourceLoader(targetManager, settings, multitargetNetworkManager, null);
     context.set(SDK.PageResourceLoader.PageResourceLoader, pageResourceLoader);
@@ -80,6 +86,17 @@ export class Universe {
     const domDebuggerManager = new SDK.DOMDebuggerModel.DOMDebuggerManager(targetManager);
     context.set(SDK.DOMDebuggerModel.DOMDebuggerManager, domDebuggerManager);
 
+    const cruxManager = new CrUXManager.CrUXManager(targetManager, settings);
+    context.set(CrUXManager.CrUXManager, cruxManager);
+
+    const isolateManager = new SDK.IsolateManager.IsolateManager(targetManager);
+    context.set(SDK.IsolateManager.IsolateManager, isolateManager);
+    const eventBreakpointsManager = new SDK.EventBreakpointsModel.EventBreakpointsManager(targetManager);
+    context.set(SDK.EventBreakpointsModel.EventBreakpointsManager, eventBreakpointsManager);
+
+    const domModelUndoStack = new SDK.DOMModel.DOMModelUndoStack();
+    context.set(SDK.DOMModel.DOMModelUndoStack, domModelUndoStack);
+
     const workspace = new Workspace.Workspace.WorkspaceImpl();
     context.set(Workspace.Workspace.WorkspaceImpl, workspace);
 
@@ -151,15 +168,34 @@ export class Universe {
   get cpuThrottlingManager(): SDK.CPUThrottlingManager.CPUThrottlingManager {
     return this.context.get(SDK.CPUThrottlingManager.CPUThrottlingManager);
   }
+  get cruxManager(): CrUXManager.CrUXManager {
+    return this.context.get(CrUXManager.CrUXManager);
+  }
+
+  get deviceModeModel(): Emulation.DeviceModeModel.DeviceModeModel {
+    return this.context.get(Emulation.DeviceModeModel.DeviceModeModel);
+  }
 
   get domDebuggerManager(): SDK.DOMDebuggerModel.DOMDebuggerManager {
     return this.context.get(SDK.DOMDebuggerModel.DOMDebuggerManager);
   }
 
+  get domModelUndoStack(): SDK.DOMModel.DOMModelUndoStack {
+    return this.context.get(SDK.DOMModel.DOMModelUndoStack);
+  }
+
+  get eventBreakpointsManager(): SDK.EventBreakpointsModel.EventBreakpointsManager {
+    return this.context.get(SDK.EventBreakpointsModel.EventBreakpointsManager);
+  }
+
   get isolatedFileSystemManager(): Persistence.IsolatedFileSystemManager.IsolatedFileSystemManager {
     return this.context.get(Persistence.IsolatedFileSystemManager.IsolatedFileSystemManager);
   }
 
+  get isolateManager(): SDK.IsolateManager.IsolateManager {
+    return this.context.get(SDK.IsolateManager.IsolateManager);
+  }
+
   get networkPersistenceManager(): Persistence.NetworkPersistenceManager.NetworkPersistenceManager {
     return this.context.get(Persistence.NetworkPersistenceManager.NetworkPersistenceManager);
   }
@@ -179,4 +215,12 @@ export class Universe {
   get settings(): Common.Settings.Settings {
     return this.context.get(Common.Settings.Settings);
   }
+
+  get targetManager(): SDK.TargetManager.TargetManager {
+    return this.context.get(SDK.TargetManager.TargetManager);
+  }
+
+  get workspace(): Workspace.Workspace.WorkspaceImpl {
+    return this.context.get(Workspace.Workspace.WorkspaceImpl);
+  }
 }

package/front_end/generated/InspectorBackendCommands.ts

@@ -510,8 +510,8 @@ inspectorBackend.registerCommand("DeviceOrientation.clearDeviceOrientationOverri
 inspectorBackend.registerCommand("DeviceOrientation.setDeviceOrientationOverride", [{"name": "alpha", "type": "number", "optional": false, "description": "Mock alpha", "typeRef": null}, {"name": "beta", "type": "number", "optional": false, "description": "Mock beta", "typeRef": null}, {"name": "gamma", "type": "number", "optional": false, "description": "Mock gamma", "typeRef": null}], [], "Overrides the Device Orientation.");
 
 // DigitalCredentials.
-inspectorBackend.registerEnum("DigitalCredentials.VirtualWalletBehavior", {Respond: "respond", Decline: "decline", Wait: "wait", Clear: "clear"});
-inspectorBackend.registerCommand("DigitalCredentials.setVirtualWalletBehavior", [{"name": "behavior", "type": "string", "optional": false, "description": "The behavior of the virtual wallet.", "typeRef": "DigitalCredentials.VirtualWalletBehavior"}, {"name": "protocol", "type": "string", "optional": true, "description": "The protocol identifier (e.g. \\\"openid4vp\\\"). Required when |behavior| is \\\"respond\\\", forbidden otherwise.", "typeRef": null}, {"name": "response", "type": "object", "optional": true, "description": "The response data object returned by the wallet. Required when |behavior| is \\\"respond\\\", forbidden otherwise.", "typeRef": null}], [], "Sets the behavior of the virtual wallet for digital credential requests issued from this frame.");
+inspectorBackend.registerEnum("DigitalCredentials.VirtualWalletAction", {Respond: "respond", Decline: "decline", Wait: "wait", Clear: "clear"});
+inspectorBackend.registerCommand("DigitalCredentials.setVirtualWalletBehavior", [{"name": "action", "type": "string", "optional": false, "description": "The action of the virtual wallet.", "typeRef": "DigitalCredentials.VirtualWalletAction"}, {"name": "protocol", "type": "string", "optional": true, "description": "The protocol identifier (e.g. \\\"openid4vp\\\"). Required when |action| is \\\"respond\\\", forbidden otherwise.", "typeRef": null}, {"name": "response", "type": "object", "optional": true, "description": "The response data object returned by the wallet. Required when |action| is \\\"respond\\\", forbidden otherwise.", "typeRef": null}], [], "Sets the behavior of the virtual wallet for digital credential requests issued from this frame.");
 
 // Emulation.
 inspectorBackend.registerEnum("Emulation.ScreenOrientationType", {PortraitPrimary: "portraitPrimary", PortraitSecondary: "portraitSecondary", LandscapePrimary: "landscapePrimary", LandscapeSecondary: "landscapeSecondary"});

package/front_end/generated/protocol.ts

@@ -7018,7 +7018,7 @@ export namespace DigitalCredentials {
   /**
    * The type of virtual wallet action.
    */
-  export const enum VirtualWalletBehavior {
+  export const enum VirtualWalletAction {
     Respond = 'respond',
     Decline = 'decline',
     Wait = 'wait',
@@ -7027,17 +7027,17 @@ export namespace DigitalCredentials {
 
   export interface SetVirtualWalletBehaviorRequest {
     /**
-     * The behavior of the virtual wallet.
+     * The action of the virtual wallet.
      */
-    behavior: VirtualWalletBehavior;
+    action: VirtualWalletAction;
     /**
-     * The protocol identifier (e.g. "openid4vp"). Required when |behavior| is
+     * The protocol identifier (e.g. "openid4vp"). Required when |action| is
      * "respond", forbidden otherwise.
      */
     protocol?: string;
     /**
      * The response data object returned by the wallet.
-     * Required when |behavior| is "respond", forbidden otherwise.
+     * Required when |action| is "respond", forbidden otherwise.
      */
     response?: any;
   }

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -489,7 +489,8 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     }
     const functionLocation = frame.functionLocation();
     if (!autoSteppingContext || debuggerPausedDetails.reason !== Protocol.Debugger.PausedEventReason.Step ||
-        !functionLocation || !frame.script.isWasm() || !Common.Settings.moduleSetting('wasm-auto-stepping').get() ||
+        !functionLocation || !frame.script.isWasm() ||
+        !Common.Settings.Settings.instance().moduleSetting('wasm-auto-stepping').get() ||
         !this.pluginManager.hasPluginForScript(frame.script)) {
       return true;
     }

package/front_end/models/crux-manager/CrUXManager.ts

@@ -102,8 +102,6 @@ export interface ConfigSetting {
   originMappings?: OriginMapping[];
 }
 
-let cruxManagerInstance: CrUXManager;
-
 /** TODO: Potentially support `TABLET`. Tablet field data will always be `null` until then. **/
 export const DEVICE_SCOPE_LIST: DeviceScope[] = ['ALL', 'DESKTOP', 'PHONE'];
 
@@ -128,11 +126,13 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #configSetting: Common.Settings.Setting<ConfigSetting>;
   #endpoint = DEFAULT_ENDPOINT;
   #pageResult?: PageResult;
+  readonly #targetManager: SDK.TargetManager.TargetManager;
   fieldDeviceOption: DeviceOption = 'AUTO';
   fieldPageScope: PageScope = 'url';
 
-  private constructor() {
+  constructor(targetManager: SDK.TargetManager.TargetManager, settings: Common.Settings.Settings) {
     super();
+    this.#targetManager = targetManager;
 
     /**
      * In an incognito or guest window - which is called an "OffTheRecord"
@@ -149,7 +149,7 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     const storageTypeForConsent =
         useSessionStorage ? Common.Settings.SettingStorageType.SESSION : Common.Settings.SettingStorageType.GLOBAL;
 
-    this.#configSetting = Common.Settings.Settings.instance().createSetting<ConfigSetting>(
+    this.#configSetting = settings.createSetting<ConfigSetting>(
         'field-data', {enabled: false, override: '', originMappings: [], overrideEnabled: false},
         storageTypeForConsent);
 
@@ -157,18 +157,23 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       void this.refresh();
     });
 
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated,
-        this);
+    this.#targetManager.addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                         SDK.ResourceTreeModel.Events.FrameNavigated, this.#onFrameNavigated, this);
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): CrUXManager {
     const {forceNew} = opts;
-    if (!cruxManagerInstance || forceNew) {
-      cruxManagerInstance = new CrUXManager();
+    if (!Root.DevToolsContext.globalInstance().has(CrUXManager) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(
+          CrUXManager,
+          new CrUXManager(SDK.TargetManager.TargetManager.instance(), Common.Settings.Settings.instance()));
     }
 
-    return cruxManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(CrUXManager);
+  }
+
+  static removeInstance(): void {
+    Root.DevToolsContext.globalInstance().delete(CrUXManager);
   }
 
   /** The most recent page result from the CrUX service. */
@@ -264,7 +269,7 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   async #getInspectedURL(): Promise<string> {
-    const targetManager = SDK.TargetManager.TargetManager.instance();
+    const targetManager = this.#targetManager;
     let inspectedURL = targetManager.inspectedURL();
     if (!inspectedURL) {
       inspectedURL = await new Promise(resolve => {

package/front_end/models/emulation/DeviceModeModel.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.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 * as Geometry from '../geometry/geometry.js';
@@ -84,8 +85,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/emulation/DeviceModeModel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-let deviceModeModelInstance: DeviceModeModel|null;
-
 export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     SDK.TargetManager.SDKModelObserver<SDK.EmulationModel.EmulationModel> {
   #screenRect: Rect;
@@ -114,9 +113,19 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   #onModelAvailable: (() => void)|null;
   #outlineRect?: Rect;
   #screenOrientationLocked: boolean;
-
-  private constructor() {
+  readonly #targetManager: SDK.TargetManager.TargetManager;
+  readonly #settings: Common.Settings.Settings;
+  readonly #multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager;
+
+  constructor(
+      targetManager: SDK.TargetManager.TargetManager,
+      settings: Common.Settings.Settings,
+      multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager,
+  ) {
     super();
+    this.#targetManager = targetManager;
+    this.#settings = settings;
+    this.#multitargetNetworkManager = multitargetNetworkManager;
     this.#screenRect = new Rect(0, 0, 1, 1);
     this.#visiblePageRect = new Rect(0, 0, 1, 1);
     this.#availableSize = new Geometry.Size(1, 1);
@@ -126,7 +135,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#appliedDeviceScaleFactor = globalThis.devicePixelRatio;
     this.#appliedUserAgentType = UA.DESKTOP;
 
-    this.#scaleSetting = Common.Settings.Settings.instance().createSetting('emulation.device-scale', 1);
+    this.#scaleSetting = this.#settings.createSetting('emulation.device-scale', 1);
     // We've used to allow zero before.
     if (!this.#scaleSetting.get()) {
       this.#scaleSetting.set(1);
@@ -134,7 +143,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#scaleSetting.addChangeListener(this.scaleSettingChanged, this);
     this.#scale = 1;
 
-    this.#widthSetting = Common.Settings.Settings.instance().createSetting('emulation.device-width', 400);
+    this.#widthSetting = this.#settings.createSetting('emulation.device-width', 400);
     if (this.#widthSetting.get() < MinDeviceSize) {
       this.#widthSetting.set(MinDeviceSize);
     }
@@ -143,7 +152,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
     this.#widthSetting.addChangeListener(this.widthSettingChanged, this);
 
-    this.#heightSetting = Common.Settings.Settings.instance().createSetting('emulation.device-height', 0);
+    this.#heightSetting = this.#settings.createSetting('emulation.device-height', 0);
     if (this.#heightSetting.get() && this.#heightSetting.get() < MinDeviceSize) {
       this.#heightSetting.set(MinDeviceSize);
     }
@@ -152,17 +161,16 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
     this.#heightSetting.addChangeListener(this.heightSettingChanged, this);
 
-    this.#uaSetting = Common.Settings.Settings.instance().createSetting('emulation.device-ua', UA.MOBILE);
+    this.#uaSetting = this.#settings.createSetting('emulation.device-ua', UA.MOBILE);
     this.#uaSetting.addChangeListener(this.uaSettingChanged, this);
-    this.#deviceScaleFactorSetting =
-        Common.Settings.Settings.instance().createSetting('emulation.device-scale-factor', 0);
+    this.#deviceScaleFactorSetting = this.#settings.createSetting('emulation.device-scale-factor', 0);
     this.#deviceScaleFactorSetting.addChangeListener(this.deviceScaleFactorSettingChanged, this);
 
-    this.#deviceOutlineSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-device-outline');
+    this.#deviceOutlineSetting = this.#settings.createSetting('emulation.show-device-outline', false);
     this.#deviceOutlineSetting.addChangeListener(this.deviceOutlineSettingChanged, this);
 
-    this.#toolbarControlsEnabledSetting = Common.Settings.Settings.instance().createSetting(
-        'emulation.toolbar-controls-enabled', true, Common.Settings.SettingStorageType.SESSION);
+    this.#toolbarControlsEnabledSetting = this.#settings.createSetting('emulation.toolbar-controls-enabled', true,
+                                                                       Common.Settings.SettingStorageType.SESSION);
 
     this.#type = Type.None;
     this.#device = null;
@@ -174,15 +182,20 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#emulationModel = null;
     this.#onModelAvailable = null;
     this.#screenOrientationLocked = false;
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.EmulationModel.EmulationModel, this);
+    this.#targetManager.observeModels(SDK.EmulationModel.EmulationModel, this);
   }
 
   static instance(opts?: {forceNew: boolean}): DeviceModeModel {
-    if (!deviceModeModelInstance || opts?.forceNew) {
-      deviceModeModelInstance = new DeviceModeModel();
+    if (!Root.DevToolsContext.globalInstance().has(DeviceModeModel) || opts?.forceNew) {
+      Root.DevToolsContext.globalInstance().set(DeviceModeModel,
+                                                new DeviceModeModel(
+                                                    SDK.TargetManager.TargetManager.instance(),
+                                                    Common.Settings.Settings.instance(),
+                                                    SDK.NetworkManager.MultitargetNetworkManager.instance(),
+                                                    ));
     }
 
-    return deviceModeModelInstance;
+    return Root.DevToolsContext.globalInstance().get(DeviceModeModel);
   }
 
   /**
@@ -201,11 +214,14 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   static removeInstance(): void {
-    deviceModeModelInstance = null;
+    if (Root.DevToolsContext.globalInstance().has(DeviceModeModel)) {
+      Root.DevToolsContext.globalInstance().get(DeviceModeModel).dispose();
+    }
+    Root.DevToolsContext.globalInstance().delete(DeviceModeModel);
   }
 
   dispose(): void {
-    SDK.TargetManager.TargetManager.instance().unobserveModels(SDK.EmulationModel.EmulationModel, this);
+    this.#targetManager.unobserveModels(SDK.EmulationModel.EmulationModel, this);
   }
 
   static widthValidator(value: string): {
@@ -363,6 +379,10 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
                                                                               '';
   }
 
+  canShowDeviceFrame(): boolean {
+    return Boolean(this.#device && this.#mode && this.#device.outlineImage(this.#mode));
+  }
+
   outlineRect(): Rect|null {
     return this.#outlineRect || null;
   }
@@ -412,7 +432,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   enabledSetting(): Common.Settings.Setting<boolean> {
-    return Common.Settings.Settings.instance().createSetting('emulation.show-device-mode', false);
+    return this.#settings.createSetting('emulation.show-device-mode', false);
   }
 
   scaleSetting(): Common.Settings.Setting<number> {
@@ -444,7 +464,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   modelAdded(emulationModel: SDK.EmulationModel.EmulationModel): void {
-    if (emulationModel.target() === SDK.TargetManager.TargetManager.instance().primaryPageTarget() &&
+    if (emulationModel.target() === this.#targetManager.primaryPageTarget() &&
         emulationModel.supportsDeviceEmulation()) {
       this.#emulationModel = emulationModel;
       if (this.#onModelAvailable) {
@@ -713,8 +733,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     // When the user agent string is empty (e.g. custom desktop device without
     // a UA override), metadata must also be cleared. The backend rejects
     // setUserAgentOverride calls that provide metadata without a UA string.
-    SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(
-        userAgent, userAgent ? userAgentMetadata : null);
+    this.#multitargetNetworkManager.setUserAgentOverride(userAgent, userAgent ? userAgentMetadata : null);
   }
 
   private applyDeviceMetrics(
@@ -854,7 +873,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private applyTouch(touchEnabled: boolean, mobile: boolean): void {
     this.#touchEnabled = touchEnabled;
     this.#touchMobile = mobile;
-    for (const emulationModel of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel)) {
+    for (const emulationModel of this.#targetManager.models(SDK.EmulationModel.EmulationModel)) {
       void emulationModel.emulateTouch(touchEnabled, mobile);
     }
   }