chrome-devtools-frontend 1.0.1656897 → 1.0.1657855

package/front_end/generated/protocol.ts

@@ -7040,6 +7040,10 @@ export namespace DigitalCredentials {
      * Required when |action| is "respond", forbidden otherwise.
      */
     response?: any;
+    /**
+     * The frame to scope the virtual wallet behavior to.
+     */
+    frameId?: Page.FrameId;
   }
 }
 

package/front_end/models/ai_assistance/AiUtils.ts

@@ -12,21 +12,21 @@ import {debugLog} from './debug.js';
 
 const UIStrings = {
   /**
-   * @description Message shown to the user if the age check is not successful.
+   * @description Message shown to the user if the age check isn’t successful.
    */
-  ageRestricted: 'This feature is only available to users who are 18 years of age or older.',
+  ageRestricted: 'This feature is only available to users 18 years or older.',
   /**
-   * @description The error message when the user is not logged in into Chrome.
+   * @description The error message when the user isn’t logged in to Chrome.
    */
-  notLoggedIn: 'This feature is only available when you sign into Chrome with your Google account.',
+  notLoggedIn: 'This feature is only available when you sign in to Chrome with your Google account.',
   /**
    * @description Message shown when the user is offline.
    */
   offline: 'This feature is only available with an active internet connection.',
   /**
-   * @description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
+   * @description Text informing the user that AI assistance isn’t available in Incognito mode or Guest mode.
    */
-  notAvailableInIncognitoMode: 'AI assistance is not available in Incognito mode or Guest mode.',
+  notAvailableInIncognitoMode: 'AI assistance isn’t available in Incognito mode or Guest mode.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('models/ai_assistance/AiUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/models/bindings/CSSWorkspaceBinding.ts

@@ -152,6 +152,7 @@ export interface SourceMapping {
 
 export class ModelInfo {
   readonly #eventListeners: Common.EventTarget.EventDescriptor[];
+  readonly #cssWorkspaceBinding: CSSWorkspaceBinding;
   readonly #resourceMapping: ResourceMapping;
   #stylesSourceMapping: StylesSourceMapping;
   #sassSourceMapping: SASSSourceMapping;
@@ -159,6 +160,7 @@ export class ModelInfo {
   readonly #unboundLocations: Platform.MapUtilities.Multimap<Platform.DevToolsPath.UrlString, LiveLocation>;
   constructor(
       cssModel: SDK.CSSModel.CSSModel, resourceMapping: ResourceMapping, cssWorkspaceBinding: CSSWorkspaceBinding) {
+    this.#cssWorkspaceBinding = cssWorkspaceBinding;
     this.#eventListeners = [
       cssModel.addEventListener(
           SDK.CSSModel.Events.StyleSheetAdded,
@@ -191,7 +193,7 @@ export class ModelInfo {
   async createLiveLocation(
       rawLocation: SDK.CSSModel.CSSLocation, updateDelegate: (arg0: LiveLocationInterface) => Promise<void>,
       locationPool: LiveLocationPool): Promise<LiveLocation> {
-    const location = new LiveLocation(rawLocation, this, updateDelegate, locationPool);
+    const location = new LiveLocation(rawLocation, this, this.#cssWorkspaceBinding, updateDelegate, locationPool);
     const header = rawLocation.header();
     if (header) {
       location.setHeader(header);
@@ -286,15 +288,16 @@ export class LiveLocation extends LiveLocationWithPool {
   readonly #lineNumber: number;
   readonly #columnNumber: number;
   readonly #info: ModelInfo;
+  readonly #cssWorkspaceBinding: CSSWorkspaceBinding;
   #header: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null;
-  constructor(
-      rawLocation: SDK.CSSModel.CSSLocation, info: ModelInfo,
-      updateDelegate: (arg0: LiveLocationInterface) => Promise<void>, locationPool: LiveLocationPool) {
+  constructor(rawLocation: SDK.CSSModel.CSSLocation, info: ModelInfo, cssWorkspaceBinding: CSSWorkspaceBinding,
+              updateDelegate: (arg0: LiveLocationInterface) => Promise<void>, locationPool: LiveLocationPool) {
     super(updateDelegate, locationPool);
     this.url = rawLocation.url;
     this.#lineNumber = rawLocation.lineNumber;
     this.#columnNumber = rawLocation.columnNumber;
     this.#info = info;
+    this.#cssWorkspaceBinding = cssWorkspaceBinding;
     this.#header = null;
   }
 
@@ -311,7 +314,7 @@ export class LiveLocation extends LiveLocationWithPool {
       return null;
     }
     const rawLocation = new SDK.CSSModel.CSSLocation(this.#header, this.#lineNumber, this.#columnNumber);
-    return CSSWorkspaceBinding.instance().rawLocationToUILocation(rawLocation);
+    return this.#cssWorkspaceBinding.rawLocationToUILocation(rawLocation);
   }
 
   override dispose(): void {

package/front_end/models/bindings/DebuggerLanguagePlugins.ts

@@ -404,6 +404,7 @@ export class DebuggerLanguagePluginManager implements
     SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
   readonly #workspace: Workspace.Workspace.WorkspaceImpl;
   readonly #debuggerWorkspaceBinding: DebuggerWorkspaceBinding;
+  readonly #console: Common.Console.Console;
   #plugins: DebuggerLanguagePlugin[];
   readonly #debuggerModelToData: Map<SDK.DebuggerModel.DebuggerModel, ModelData>;
   readonly #rawModuleHandles: Map<string, {
@@ -417,11 +418,11 @@ export class DebuggerLanguagePluginManager implements
   private readonly stopIdByCallFrame = new Map<SDK.DebuggerModel.CallFrame, StopId>();
   private nextStopId: StopId = 0n;
 
-  constructor(
-      targetManager: SDK.TargetManager.TargetManager, workspace: Workspace.Workspace.WorkspaceImpl,
-      debuggerWorkspaceBinding: DebuggerWorkspaceBinding) {
+  constructor(targetManager: SDK.TargetManager.TargetManager, workspace: Workspace.Workspace.WorkspaceImpl,
+              debuggerWorkspaceBinding: DebuggerWorkspaceBinding, console: Common.Console.Console) {
     this.#workspace = workspace;
     this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+    this.#console = console;
 
     this.#plugins = [];
 
@@ -511,8 +512,8 @@ export class DebuggerLanguagePluginManager implements
       const scripts = rawModuleHandle.scripts.filter(script => script.debuggerModel !== debuggerModel);
       if (scripts.length === 0) {
         rawModuleHandle.plugin.removeRawModule(rawModuleId).catch(error => {
-          Common.Console.Console.instance().error(
-              i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
+          this.#console.error(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}),
+                              /* show=*/ false);
         });
         this.#rawModuleHandles.delete(rawModuleId);
       } else {
@@ -633,8 +634,7 @@ export class DebuggerLanguagePluginManager implements
             sourceLocation.lineNumber, sourceLocation.columnNumber >= 0 ? sourceLocation.columnNumber : undefined);
       }
     } catch (error) {
-      Common.Console.Console.instance().error(
-          i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
+      this.#console.error(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
     }
     return null;
   }
@@ -663,8 +663,7 @@ export class DebuggerLanguagePluginManager implements
     }
 
     return Promise.all(locationPromises).then(locations => locations.flat()).catch(error => {
-      Common.Console.Console.instance().error(
-          i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
+      this.#console.error(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
       return null;
     });
 
@@ -841,7 +840,7 @@ export class DebuggerLanguagePluginManager implements
       let rawModuleHandle = this.#rawModuleHandles.get(rawModuleId);
       if (!rawModuleHandle) {
         const sourceFileURLsPromise = (async () => {
-          const console = Common.Console.Console.instance();
+          const console = this.#console;
           const url = script.sourceURL;
           const symbolsUrl = (script.debugSymbols?.externalURL) || '';
           if (symbolsUrl) {
@@ -962,8 +961,7 @@ export class DebuggerLanguagePluginManager implements
       }
       return Array.from(scopes.values());
     } catch (error) {
-      Common.Console.Console.instance().error(
-          i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
+      this.#console.error(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}), /* show=*/ false);
       return null;
     }
   }
@@ -995,7 +993,7 @@ export class DebuggerLanguagePluginManager implements
       }
       return functionInfo;
     } catch (error) {
-      Common.Console.Console.instance().warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
+      this.#console.warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
       return {frames: []};
     }
   }
@@ -1032,7 +1030,7 @@ export class DebuggerLanguagePluginManager implements
                 script.debuggerModel, script.scriptId, 0, Number(m.endOffset) + (script.codeOffset() || 0)),
           }));
     } catch (error) {
-      Common.Console.Console.instance().warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
+      this.#console.warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
       return [];
     }
   }
@@ -1069,7 +1067,7 @@ export class DebuggerLanguagePluginManager implements
                 script.debuggerModel, script.scriptId, 0, Number(m.endOffset) + (script.codeOffset() || 0)),
           }));
     } catch (error) {
-      Common.Console.Console.instance().warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
+      this.#console.warn(i18nString(UIStrings.errorInDebuggerLanguagePlugin, {PH1: error.message}));
       return [];
     }
   }

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
+import type * 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';
@@ -34,6 +34,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
   readonly pluginManager: DebuggerLanguagePluginManager;
   readonly ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager;
   readonly workspace: Workspace.Workspace.WorkspaceImpl;
+  readonly #settings: Common.Settings.Settings;
 
   constructor(
       resourceMapping: ResourceMapping, targetManager: SDK.TargetManager.TargetManager,
@@ -42,6 +43,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     this.resourceMapping.debuggerWorkspaceBinding = this;
     this.ignoreListManager = ignoreListManager;
     this.workspace = workspace;
+    this.#settings = targetManager.settings;
 
     this.#debuggerModelToData = new Map();
     targetManager.observeModels(SDK.DebuggerModel.DebuggerModel, this);
@@ -50,7 +52,8 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
 
     this.#liveLocationPromises = new Set();
 
-    this.pluginManager = new DebuggerLanguagePluginManager(targetManager, resourceMapping.workspace, this);
+    this.pluginManager =
+        new DebuggerLanguagePluginManager(targetManager, resourceMapping.workspace, this, targetManager.getConsole());
   }
 
   setFunctionRanges(
@@ -489,7 +492,7 @@ 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() || !this.#settings.moduleSetting('wasm-auto-stepping').get() ||
         !this.pluginManager.hasPluginForScript(frame.script)) {
       return true;
     }

package/front_end/models/bindings/FileUtils.ts

@@ -170,10 +170,12 @@ export class ChunkedFileReader implements ChunkedReader {
 }
 
 export class FileOutputStream implements Common.StringOutputStream.OutputStream {
+  readonly #fileManager: Workspace.FileManager.FileManager;
   #writeCallbacks: Array<() => void>;
   #fileName!: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString;
   #closed?: boolean;
-  constructor() {
+  constructor(fileManager: Workspace.FileManager.FileManager) {
+    this.#fileManager = fileManager;
     this.#writeCallbacks = [];
   }
 
@@ -181,11 +183,10 @@ export class FileOutputStream implements Common.StringOutputStream.OutputStream
     this.#closed = false;
     this.#writeCallbacks = [];
     this.#fileName = fileName;
-    const saveResponse = await Workspace.FileManager.FileManager.instance().save(
-        this.#fileName, TextUtils.ContentData.EMPTY_TEXT_CONTENT_DATA, /* forceSaveAs=*/ true);
+    const saveResponse = await this.#fileManager.save(this.#fileName, TextUtils.ContentData.EMPTY_TEXT_CONTENT_DATA,
+                                                      /* forceSaveAs=*/ true);
     if (saveResponse) {
-      Workspace.FileManager.FileManager.instance().addEventListener(
-          Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
+      this.#fileManager.addEventListener(Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
     }
     return Boolean(saveResponse);
   }
@@ -193,7 +194,7 @@ export class FileOutputStream implements Common.StringOutputStream.OutputStream
   write(data: string): Promise<void> {
     return new Promise(resolve => {
       this.#writeCallbacks.push(resolve);
-      Workspace.FileManager.FileManager.instance().append(this.#fileName, data);
+      this.#fileManager.append(this.#fileName, data);
     });
   }
 
@@ -202,9 +203,8 @@ export class FileOutputStream implements Common.StringOutputStream.OutputStream
     if (this.#writeCallbacks.length) {
       return;
     }
-    Workspace.FileManager.FileManager.instance().removeEventListener(
-        Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
-    Workspace.FileManager.FileManager.instance().close(this.#fileName);
+    this.#fileManager.removeEventListener(Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
+    this.#fileManager.close(this.#fileName);
   }
 
   private onAppendDone(event: Common.EventTarget.EventTargetEvent<string>): void {
@@ -221,8 +221,7 @@ export class FileOutputStream implements Common.StringOutputStream.OutputStream
     if (!this.#closed) {
       return;
     }
-    Workspace.FileManager.FileManager.instance().removeEventListener(
-        Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
-    Workspace.FileManager.FileManager.instance().close(this.#fileName);
+    this.#fileManager.removeEventListener(Workspace.FileManager.Events.APPENDED_TO_URL, this.onAppendDone, this);
+    this.#fileManager.close(this.#fileName);
   }
 }

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';
@@ -20,62 +21,62 @@ import {
 
 const UIStrings = {
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an empty
+   * @description Error message shown on the Devices settings tab when the user enters an empty
    * width for a custom device.
    */
-  widthCannotBeEmpty: 'Width cannot be empty.',
+  widthCannotBeEmpty: 'Width can’t be empty.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an invalid
+   * @description Error message shown on the Devices settings tab when the user enters an invalid
    * width for a custom device.
    */
   widthMustBeANumber: 'Width must be a number.',
   /**
-   * @description Error message shown in the Devices settings pane when the user has entered a width
+   * @description Error message shown on the Devices settings tab when the user has entered a width
    * for a custom device that is too large.
    * @example {9999} PH1
    */
   widthMustBeLessThanOrEqualToS: 'Width must be less than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user has entered a width
+   * @description Error message shown on the Devices settings tab when the user has entered a width
    * for a custom device that is too small.
    * @example {50} PH1
    */
   widthMustBeGreaterThanOrEqualToS: 'Width must be greater than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an empty
+   * @description Error message shown on the Devices settings tab when the user enters an empty
    * height for a custom device.
    */
-  heightCannotBeEmpty: 'Height cannot be empty.',
+  heightCannotBeEmpty: 'Height can’t be empty.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an invalid
+   * @description Error message shown on the Devices settings tab when the user enters an invalid
    * height for a custom device.
    */
   heightMustBeANumber: 'Height must be a number.',
   /**
-   * @description Error message shown in the Devices settings pane when the user has entered a height
+   * @description Error message shown on the Devices settings tab when the user has entered a height
    * for a custom device that is too large.
    * @example {9999} PH1
    */
   heightMustBeLessThanOrEqualToS: 'Height must be less than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user has entered a height
+   * @description Error message shown on the Devices settings tab when the user has entered a height
    * for a custom device that is too small.
    * @example {50} PH1
    */
   heightMustBeGreaterThanOrEqualTo: 'Height must be greater than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters an invalid
+   * @description Error message shown on the Devices settings tab when the user enters an invalid
    * device pixel ratio for a custom device.
    */
   devicePixelRatioMustBeANumberOr: 'Device pixel ratio must be a number or blank.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters a device
+   * @description Error message shown on the Devices settings tab when the user enters a device
    * pixel ratio for a custom device that is too large.
    * @example {10} PH1
    */
   devicePixelRatioMustBeLessThanOr: 'Device pixel ratio must be less than or equal to {PH1}.',
   /**
-   * @description Error message shown in the Devices settings pane when the user enters a device
+   * @description Error message shown on the Devices settings tab when the user enters a device
    * pixel ratio for a custom device that is too small.
    * @example {0} PH1
    */
@@ -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.moduleSetting('emulation.show-device-outline');
     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);
     }
   }

package/front_end/models/emulation/EmulatedDevices.ts

@@ -14,15 +14,15 @@ import {Insets, MaxDeviceSize, MinDeviceSize} from './DeviceModeModel.js';
 
 const UIStrings = {
   /**
-   * @description Title of the Laptop with touch device
+   * @description Title of the Laptop with touch device.
    */
   laptopWithTouch: 'Laptop with touch',
   /**
-   * @description Title of the Laptop with HiDPI screen device
+   * @description Title of the Laptop with HiDPI screen device.
    */
   laptopWithHiDPIScreen: 'Laptop with HiDPI screen',
   /**
-   * @description Title of the Laptop with MDPI screen device
+   * @description Title of the Laptop with MDPI screen device.
    */
   laptopWithMDPIScreen: 'Laptop with MDPI screen',
 } as const;