chrome-devtools-frontend 1.0.1656897 → 1.0.1657110

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/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,

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

@@ -10,6 +10,7 @@ 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';
@@ -60,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);
@@ -84,6 +89,14 @@ export class Universe {
     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);
 
@@ -155,19 +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);
   }
@@ -191,4 +219,8 @@ export class Universe {
   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/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/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);
     }
   }

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -6,6 +6,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 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 Protocol from '../../generated/protocol.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
@@ -29,8 +30,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const LIVE_METRICS_WORLD_NAME = 'DevTools Performance Metrics';
 
-let liveMetricsInstance: LiveMetrics;
-
 class InjectedScript {
   static #injectedScript?: string;
   static async get(): Promise<string> {
@@ -47,6 +46,7 @@ export type InteractionMap = Map<InteractionId, Interaction>;
 
 export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements SDK.TargetManager.Observer {
   #enabled = false;
+  #isCollectingMetrics = false;
   #target?: SDK.Target.Target;
   #scriptIdentifier?: Protocol.Page.ScriptIdentifier;
   #lastResetContextId?: Protocol.Runtime.ExecutionContextId;
@@ -58,21 +58,24 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #layoutShifts: LayoutShift[] = [];
   #lastEmulationChangeTime?: number;
   #mutex = new Common.Mutex.Mutex();
-  #deviceModeModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
+  readonly #targetManager: SDK.TargetManager.TargetManager;
+  readonly #deviceModeModel: EmulationModel.DeviceModeModel.DeviceModeModel|null;
 
-  private constructor() {
+  constructor(targetManager: SDK.TargetManager.TargetManager,
+              deviceModeModel: EmulationModel.DeviceModeModel.DeviceModeModel|null) {
     super();
-    const targetManager = SDK.TargetManager.TargetManager.instance();
-    targetManager.observeTargets(this, {scoped: true});
-    targetManager.addModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
-        this.#onPrimaryPageChanged, this);
+    this.#targetManager = targetManager;
+    this.#deviceModeModel = deviceModeModel;
+    this.#targetManager.observeTargets(this, {scoped: true});
+    this.#targetManager.addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                         SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.#onPrimaryPageChanged,
+                                         this);
   }
 
   #onPrimaryPageChanged(
       event: Common.EventTarget.EventTargetEvent<
           {frame: SDK.ResourceTreeModel.ResourceTreeFrame, type: SDK.ResourceTreeModel.PrimaryPageChangeType}>): void {
-    const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const primaryTarget = this.#targetManager.primaryPageTarget();
     if (!primaryTarget) {
       return;
     }
@@ -86,19 +89,22 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   async #switchToTarget(newTarget: SDK.Target.Target): Promise<void> {
     if (this.#target) {
-      await this.disable();
+      await this.#stopCollectingMetrics();
     }
     this.#target = newTarget;
-    await this.enable();
+    await this.#startCollectingMetrics();
   }
 
   static instance(opts: {forceNew?: boolean} = {forceNew: false}): LiveMetrics {
     const {forceNew} = opts;
-    if (!liveMetricsInstance || forceNew) {
-      liveMetricsInstance = new LiveMetrics();
+    if (!Root.DevToolsContext.globalInstance().has(LiveMetrics) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(
+          LiveMetrics,
+          new LiveMetrics(SDK.TargetManager.TargetManager.instance(),
+                          EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance()));
     }
 
-    return liveMetricsInstance;
+    return Root.DevToolsContext.globalInstance().get(LiveMetrics);
   }
 
   get lcpValue(): LcpValue|undefined {
@@ -481,11 +487,11 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   async targetAdded(target: SDK.Target.Target): Promise<void> {
     // Scoped observers can also receive events for OOPIFs and workers.
-    if (target !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
+    if (target !== this.#targetManager.primaryPageTarget()) {
       return;
     }
     this.#target = target;
-    await this.enable();
+    await this.#startCollectingMetrics();
   }
 
   async targetRemoved(target: SDK.Target.Target): Promise<void> {
@@ -493,11 +499,29 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     if (target !== this.#target) {
       return;
     }
-    await this.disable();
+    await this.#stopCollectingMetrics();
     this.#target = undefined;
   }
 
   async enable(): Promise<void> {
+    if (this.#enabled) {
+      return;
+    }
+    this.#enabled = true;
+    if (this.#target) {
+      await this.#startCollectingMetrics();
+    }
+  }
+
+  async disable(): Promise<void> {
+    if (!this.#enabled) {
+      return;
+    }
+    this.#enabled = false;
+    await this.#stopCollectingMetrics();
+  }
+
+  async #startCollectingMetrics(): Promise<void> {
     if (Host.InspectorFrontendHost.isUnderTest()) {
       // Enabling this impacts a lot of layout tests; we will work on fixing
       // them but for now it is easier to not run this page in layout tests.
@@ -505,7 +529,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return;
     }
 
-    if (!this.#target || this.#enabled) {
+    if (!this.#target || !this.#enabled || this.#isCollectingMetrics) {
       return;
     }
 
@@ -556,11 +580,11 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.#deviceModeModel?.addEventListener(
         EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
 
-    this.#enabled = true;
+    this.#isCollectingMetrics = true;
   }
 
-  async disable(): Promise<void> {
-    if (!this.#target || !this.#enabled) {
+  async #stopCollectingMetrics(): Promise<void> {
+    if (!this.#target || !this.#isCollectingMetrics) {
       return;
     }
 
@@ -594,7 +618,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.#deviceModeModel?.removeEventListener(
         EmulationModel.DeviceModeModel.Events.UPDATED, this.#onEmulationChanged, this);
 
-    this.#enabled = false;
+    this.#isCollectingMetrics = false;
   }
 }
 

package/front_end/models/project_settings/ProjectSettingsModel.ts

@@ -4,7 +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 type * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
 /** The security origin for all DevTools (front-end) resources. */
@@ -127,42 +127,7 @@ export class ProjectSettingsModel extends Common.ObjectWrapper.ObjectWrapper<Eve
     }
   }
 
-  /**
-   * Yields the `ProjectSettingsModel` singleton.
-   *
-   * @returns the singleton.
-   */
-  static instance({forceNew, hostConfig, pageResourceLoader, targetManager}: {
-    forceNew: boolean|null,
-    hostConfig: Root.Runtime.HostConfig|null,
-    pageResourceLoader: SDK.PageResourceLoader.PageResourceLoader|null,
-    targetManager: SDK.TargetManager.TargetManager|null,
-  }): ProjectSettingsModel {
-    if (!Root.DevToolsContext.globalInstance().has(ProjectSettingsModel) || forceNew) {
-      if (!hostConfig || !pageResourceLoader || !targetManager) {
-        throw new Error(
-            'Unable to create ProjectSettingsModel: ' +
-            'hostConfig, pageResourceLoader, and targetManager must be provided');
-      }
-      Root.DevToolsContext.globalInstance().set(
-          ProjectSettingsModel,
-          new ProjectSettingsModel(hostConfig, pageResourceLoader, targetManager),
-      );
-    }
-    return Root.DevToolsContext.globalInstance().get(ProjectSettingsModel);
-  }
-
-  /**
-   * Clears the `ProjectSettingsModel` singleton (if any);
-   */
-  static removeInstance(): void {
-    if (Root.DevToolsContext.globalInstance().has(ProjectSettingsModel)) {
-      Root.DevToolsContext.globalInstance().get(ProjectSettingsModel).#dispose();
-      Root.DevToolsContext.globalInstance().delete(ProjectSettingsModel);
-    }
-  }
-
-  #dispose(): void {
+  disposeForTest(): void {
     this.#targetManager.removeEventListener(
         SDK.TargetManager.Events.INSPECTED_URL_CHANGED,
         this.#inspectedURLChanged,

package/front_end/models/workspace/FileManager.ts

@@ -5,10 +5,9 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.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';
 
-let fileManagerInstance: FileManager|null;
-
 export interface SaveCallbackParam {
   fileSystemPath?: Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString;
 }
@@ -16,7 +15,7 @@ export interface SaveCallbackParam {
 export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #saveCallbacks = new Map<
       Platform.DevToolsPath.RawPathString|Platform.DevToolsPath.UrlString, (arg0: SaveCallbackParam|null) => void>();
-  private constructor() {
+  constructor() {
     super();
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.SavedURL, this.savedURL, this);
@@ -28,11 +27,15 @@ export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): FileManager {
     const {forceNew} = opts;
-    if (!fileManagerInstance || forceNew) {
-      fileManagerInstance = new FileManager();
+    if (!Root.DevToolsContext.globalInstance().has(FileManager) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(FileManager, new FileManager());
     }
 
-    return fileManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(FileManager);
+  }
+
+  static removeInstance(): void {
+    Root.DevToolsContext.globalInstance().delete(FileManager);
   }
 
   /**

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -950,7 +950,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
     try {
-      return Common.Settings.moduleSetting('ai-assistance-enabled') as Common.Settings.Setting<boolean>;
+      return Common.Settings.Settings.instance().moduleSetting('ai-assistance-enabled') as
+          Common.Settings.Setting<boolean>;
     } catch {
       return;
     }

package/front_end/panels/application/ServiceWorkersView.ts

@@ -509,9 +509,12 @@ export class Section {
     this.section.appendButtonToHeader(this.deleteButton);
 
     // Preserve the order.
-    this.sourceField = this.wrapWidget(this.section.appendField(i18nString(UIStrings.source)));
-    this.statusField = this.wrapWidget(this.section.appendField(i18nString(UIStrings.status)));
-    this.clientsField = this.wrapWidget(this.section.appendField(i18nString(UIStrings.clients)));
+    this.sourceField = this.section.appendField(i18nString(UIStrings.source));
+    this.statusField = this.section.appendField(i18nString(UIStrings.status));
+    this.clientsField = this.section.appendField(i18nString(UIStrings.clients));
+
+    UI.DOMUtilities.appendStyle(this.section.getFieldElement(), serviceWorkersViewStyles,
+                                serviceWorkerUpdateCycleViewStyles);
     this.createSyncNotificationField(i18nString(UIStrings.pushString), this.pushNotificationDataSetting.get(),
                                      i18nString(UIStrings.pushData), this.push.bind(this), 'push-message');
     this.createSyncNotificationField(i18nString(UIStrings.syncString), this.syncTagNameSetting.get(),
@@ -528,7 +531,7 @@ export class Section {
 
   private createSyncNotificationField(label: string, initialValue: string, placeholder: string,
                                       callback: (arg0: string) => void, jslogContext: string): void {
-    const fieldElement = this.wrapWidget(this.section.appendField(label));
+    const fieldElement = this.section.appendField(label);
 
     // clang-format off
     // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
@@ -714,7 +717,7 @@ export class Section {
   }
 
   private createUpdateCycleField(): void {
-    this.updateCycleField = this.wrapWidget(this.section.appendField(i18nString(UIStrings.updateCycle)));
+    this.updateCycleField = this.section.appendField(i18nString(UIStrings.updateCycle));
     this.updateCycleField.appendChild(this.updateCycleView.tableElement);
   }
 
@@ -725,7 +728,7 @@ export class Section {
     if (active?.routerRules && active.routerRules.length > 0) {
       // If there is at least one registered rule in the active version, append the router filed.
       if (!this.routerField) {
-        this.routerField = this.wrapWidget(this.section.appendField(title));
+        this.routerField = this.section.appendField(title);
       }
       if (!this.routerField.lastElementChild) {
         this.routerView.show(this.routerField);
@@ -819,18 +822,4 @@ export class Section {
   private stopButtonClicked(versionId: string): void {
     void this.manager.stopWorker(versionId);
   }
-
-  private wrapWidget(container: Element): HTMLElement {
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(container, {
-      cssFile: [
-        serviceWorkersViewStyles,
-        /* These styles are for the timing table in serviceWorkerUpdateCycleView but this is the widget that it is rendered
-           * inside so we are registering the files here. */
-        serviceWorkerUpdateCycleViewStyles,
-      ],
-    });
-    const contentElement = document.createElement('div');
-    shadowRoot.appendChild(contentElement);
-    return contentElement;
-  }
 }

package/front_end/panels/application/components/StorageMetadataView.ts

@@ -254,6 +254,9 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
         ${this.key(i18nString(UIStrings.bucketName))}
         ${this.value(renderBucketName())}`;
     }
+    // If quota is 0, it means no custom quota limit has been set on the bucket.
+    // We do not render it here to avoid confusing the user (who might interpret
+    // a 0 quota as a full bucket/0 capacity rather than sharing the default origin limit).
     // clang-format off
     return html`
       ${this.key(i18nString(UIStrings.bucketName))}
@@ -262,8 +265,10 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
       ${this.value(persistent ? i18nString(UIStrings.yes) : i18nString(UIStrings.no))}
       ${this.key(i18nString(UIStrings.durability))}
       ${this.value(durability)}
-      ${this.key(i18nString(UIStrings.quota))}
-      ${this.value(i18n.ByteUtilities.bytesToString(quota))}
+      ${quota !== 0 ? html`
+        ${this.key(i18nString(UIStrings.quota))}
+        ${this.value(i18n.ByteUtilities.bytesToString(quota))}
+      ` : nothing}
       ${this.key(i18nString(UIStrings.expiration))}
       ${this.value(this.#getExpirationString())}`;
   }

package/front_end/panels/common/BadgeNotification.ts

@@ -139,7 +139,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 type View = typeof DEFAULT_VIEW;
 
 function revealBadgeSettings(): void {
-  void Common.Revealer.reveal(Common.Settings.moduleSetting('receive-gdp-badges'));
+  void Common.Revealer.reveal(Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges'));
 }
 
 export class BadgeNotification extends UI.Widget.Widget {