chrome-devtools-frontend 1.0.1656897 → 1.0.1657110

package/AUTHORS

@@ -24,6 +24,7 @@ Anna Agoha <annaagoha@gmail.com>
 Anthony Xie <anthonyxie64@gmail.com>
 Axel Chong <haxatron1@gmail.com>
 Anton Bershanskyi <bershanskyi@gmail.com>
+Aviv Keller <me@aviv.sh>
 Biboswan Roy <biboswan98@gmail.com>
 Boris Verkhovskiy <boris.verk@gmail.com>
 Carl Espe <carl@cpespe.com>
@@ -62,6 +63,7 @@ Juba Borgohain <chromiumjuba@gmail.com>
 Julian Geppert <spctstr@gmail.com>
 Junseo Yoo <joon.yoo181@berkeley.edu>
 Kanishk Ranjan <kanishkranjan17@gmail.com>
+Karim El Harim <karimelharim@gmail.com>
 Karntino Areros <karntino.c.areros@gmail.com>
 Kohei Ueno <kohei.ueno119@gmail.com>
 Krishnal Ciccolella <ciccolella.krishnal@gmail.com>

package/docs/get_the_code.md

@@ -53,10 +53,10 @@ a build time cost. If you want an even fast fast build, you might want to opt
 out of bundling by setting `devtools_bundle` to `false`
 
 ```bash
-gn gen out/fast-build --args="devtools_skip_typecheck=true devtools_bundle=false"
+gn gen out/Fast --args="devtools_skip_typecheck=true devtools_bundle=false"
 ```
 
-and use `npm run build -- -t fast-build` to build this target.
+and use `npm run build -- -t Fast` to build this target.
 
 ### Rebuilding automatically
 
@@ -111,10 +111,10 @@ The `.env.template` file lists all supported variables. Copy it to `.env` to get
 cp .env.template .env
 ```
 
-As mentioned earlier, you might create a fast build target. Instead of always typing `npm run build -- -t fast-build`, to remove the flag repetition you simple run `npm run build` you can set the following variable in your `.env` file:
+As mentioned earlier, you might create a fast build target. Instead of always typing `npm run build -- -t Fast`, to remove the flag repetition you simple run `npm run build` you can set the following variable in your `.env` file:
 
 ```shell
-DEVTOOLS_TARGET=fast-build
+DEVTOOLS_TARGET=Fast
 ```
 
 Another example - by default running `npm start` auto-opens DevTools for new Tabs.
@@ -468,8 +468,8 @@ In the `custom_deps` section, insert this line:
 "src/third_party/devtools-frontend/src": None,
 ```
 
-For the integrated checkout, create a single gclient project that automatically gclient sync's all dependencies for both
-repositories. After checking out chromium, modify the .gclient file for `chromium/src` to add the DevTools project:
+For the integrated checkout, create a single gclient project that automatically `gclient sync`s all dependencies for both
+repositories. After checking out chromium, modify the `.gclient` file for `chromium/src` to add the DevTools project:
 
 ```python
 solutions = [

package/front_end/Tests.js

@@ -761,7 +761,7 @@
       this.releaseControl();
     });
 
-    Common.Settings.moduleSetting('active-keybind-set').set('vsCode');
+    Common.Settings.Settings.instance().moduleSetting('active-keybind-set').set('vsCode');
   };
 
   TestSuite.prototype.testDispatchKeyEventDoesNotCrash = function() {

package/front_end/core/common/Settings.ts

@@ -715,14 +715,6 @@ export const enum SettingStorageType {
   SESSION = 'Session',
 }
 
-export function moduleSetting(settingName: string): Setting<unknown> {
-  return Settings.instance().moduleSetting(settingName);
-}
-
-export function settingForTest(settingName: string): Setting<unknown> {
-  return Settings.instance().settingForTest(settingName);
-}
-
 export {
   getLocalizedSettingsCategory,
   maybeRemoveSettingExtension,

package/front_end/core/host/Platform.ts

@@ -65,3 +65,7 @@ export function fontFamily(): string {
   }
   return _fontFamily;
 }
+
+export function setFontFamilyForTests(family: string): void {
+  _fontFamily = family;
+}

package/front_end/core/sdk/CSSMetadata.ts

@@ -1517,6 +1517,17 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'ex alphabetic',
     ]),
   ],
+  [
+    'text-wrap',
+    new Set([
+      'auto',
+      'wrap',
+      'nowrap',
+      'balance',
+      'pretty',
+      'stable',
+    ]),
+  ],
   [
     'corner-shape',
     new Set([

package/front_end/core/sdk/CSSModel.ts

@@ -38,6 +38,7 @@ export interface LayoutProperties {
   isGrid: boolean;
   isSubgrid: boolean;
   isGridLanes: boolean;
+  isContents?: boolean;
   containerType?: string;
   hasScroll: boolean;
 }
@@ -392,6 +393,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
 
     const display = styles.get('display');
+    const isContents = display === 'contents';
     const isFlex = display === 'flex' || display === 'inline-flex';
     const isGrid = display === 'grid' || display === 'inline-grid';
     const isSubgrid = (isGrid &&
@@ -408,6 +410,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       isGrid,
       isSubgrid,
       isGridLanes,
+      isContents,
       containerType: isContainer ? containerType : undefined,
       hasScroll,
     };

package/front_end/core/sdk/DOMModel.ts

@@ -38,6 +38,7 @@ import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
+import * as Root from '../root/root.js';
 
 import {CSSModel} from './CSSModel.js';
 import type {FrameManager} from './FrameManager.js';
@@ -1016,6 +1017,27 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
     return Boolean(this.#xmlVersion);
   }
 
+  isCustomElement(): boolean {
+    if (this.nodeType() !== Node.ELEMENT_NODE || this.isXMLNode()) {
+      return false;
+    }
+    const localName = this.localName() || this.nodeName().toLowerCase();
+    if (localName.includes('-')) {
+      const builtInExclusionList = [
+        'annotation-xml',
+        'color-profile',
+        'font-face',
+        'font-face-src',
+        'font-face-uri',
+        'font-face-format',
+        'font-face-name',
+        'missing-glyph',
+      ];
+      return !builtInExclusionList.includes(localName);
+    }
+    return this.getAttribute('is') !== undefined;
+  }
+
   setMarker(name: string, value: unknown): void {
     if (value === null) {
       if (!this.#markers.has(name)) {
@@ -1698,7 +1720,7 @@ export class DOMModel extends SDKModel<EventTypes> {
     } else {
       this.#document = null;
     }
-    DOMModelUndoStack.instance().dispose(this);
+    this.#undoStack().dispose(this);
 
     if (!this.parentModel()) {
       this.dispatchEventToListeners(Events.DocumentUpdated, this);
@@ -2034,7 +2056,7 @@ export class DOMModel extends SDKModel<EventTypes> {
   }
 
   markUndoableState(minorChange?: boolean): void {
-    void DOMModelUndoStack.instance().markUndoableState(this, minorChange || false);
+    void this.#undoStack().markUndoableState(this, minorChange || false);
   }
 
   async nodeForLocation(x: number, y: number, includeUserAgentShadowDOM: boolean): Promise<DOMNode|null> {
@@ -2071,7 +2093,16 @@ export class DOMModel extends SDKModel<EventTypes> {
 
   override dispose(): void {
     this.#resourceTreeModel?.removeEventListener(ResourceTreeModelEvents.DocumentOpened, this.onDocumentOpened, this);
-    DOMModelUndoStack.instance().dispose(this);
+    this.#undoStack().dispose(this);
+  }
+
+  // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
+  #undoStack(): DOMModelUndoStack {
+    const context = this.target().targetManager().context;
+    if ('has' in context && typeof context.has === 'function' && context.has(DOMModelUndoStack)) {
+      return context.get(DOMModelUndoStack);
+    }
+    return DOMModelUndoStack.instance();
   }
 
   parentModel(): DOMModel|null {
@@ -2212,8 +2243,6 @@ class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
   }
 }
 
-let domModelUndoStackInstance: DOMModelUndoStack|null = null;
-
 export class DOMModelUndoStack {
   #stack: DOMModel[];
   #index: number;
@@ -2228,11 +2257,11 @@ export class DOMModelUndoStack {
     forceNew: boolean|null,
   } = {forceNew: null}): DOMModelUndoStack {
     const {forceNew} = opts;
-    if (!domModelUndoStackInstance || forceNew) {
-      domModelUndoStackInstance = new DOMModelUndoStack();
+    if (!Root.DevToolsContext.globalInstance().has(DOMModelUndoStack) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(DOMModelUndoStack, new DOMModelUndoStack());
     }
 
-    return domModelUndoStackInstance;
+    return Root.DevToolsContext.globalInstance().get(DOMModelUndoStack);
   }
 
   async markUndoableState(model: DOMModel, minorChange: boolean): Promise<void> {

package/front_end/core/sdk/DebuggerModel.ts

@@ -194,7 +194,8 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     }
   }
 
-  static selectSymbolSource(debugSymbols: Protocol.Debugger.DebugSymbols[]|null): Protocol.Debugger.DebugSymbols|null {
+  static selectSymbolSource(debugSymbols: Protocol.Debugger.DebugSymbols[]|null,
+                            devToolsConsole: Common.Console.Console): Protocol.Debugger.DebugSymbols|null {
     if (!debugSymbols || debugSymbols.length === 0) {
       return null;
     }
@@ -221,8 +222,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
         debugSymbolsSource !== null,
         'Unknown symbol types. Front-end and back-end should be kept in sync regarding Protocol.Debugger.DebugSymbolTypes');
     if (debugSymbolsSource && debugSymbols.length > 1) {
-      Common.Console.Console.instance().warn(
-          `Multiple debug symbols for script were found. Using ${debugSymbolsSource.type}`);
+      devToolsConsole.warn(`Multiple debug symbols for script were found. Using ${debugSymbolsSource.type}`);
     }
     return debugSymbolsSource;
   }
@@ -661,7 +661,8 @@ export class DebuggerModel extends SDKModel<EventTypes> {
       isContentScript = !executionContextAuxData['isDefault'];
     }
 
-    const selectedDebugSymbol = DebuggerModel.selectSymbolSource(debugSymbols);
+    const selectedDebugSymbol =
+        DebuggerModel.selectSymbolSource(debugSymbols, this.target().targetManager().getConsole());
     const script = new Script(
         this, scriptId, sourceURL, startLine, startColumn, endLine, endColumn, executionContextId, hash,
         isContentScript, isLiveEdit, sourceMapURL, hasSourceURLComment, length, isModule, originStackTrace, codeOffset,

package/front_end/core/sdk/EmulationModel.ts

@@ -6,7 +6,7 @@ import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
 import {CSSModel} from './CSSModel.js';
-import {MultitargetNetworkManager} from './NetworkManager.js';
+import type {MultitargetNetworkManager} from './NetworkManager.js';
 import {Events, OverlayModel} from './OverlayModel.js';
 import {SDKModel} from './SDKModel.js';
 import {Capability, type Target} from './Target.js';
@@ -18,6 +18,7 @@ export const enum DataSaverOverride {
 }
 
 export class EmulationModel extends SDKModel<EmulationModelEventTypes> implements ProtocolProxyApi.EmulationDispatcher {
+  readonly #multitargetNetworkManager: MultitargetNetworkManager;
   readonly #emulationAgent: ProtocolProxyApi.EmulationApi;
   readonly #deviceOrientationAgent: ProtocolProxyApi.DeviceOrientationApi;
   #cssModel: CSSModel|null;
@@ -37,6 +38,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
 
   constructor(target: Target) {
     super(target);
+    this.#multitargetNetworkManager = target.targetManager().getNetworkManager();
     this.#emulationAgent = target.emulationAgent();
     this.#deviceOrientationAgent = target.deviceOrientationAgent();
     this.#screenOrientationLocked = false;
@@ -277,7 +279,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
         this.#emulationAgent.invoke_setTimezoneOverride({timezoneId: ''}),
         this.#emulationAgent.invoke_setLocaleOverride({locale: ''}),
         this.#emulationAgent.invoke_setUserAgentOverride(
-            {userAgent: MultitargetNetworkManager.instance().currentUserAgent()}),
+            {userAgent: this.#multitargetNetworkManager.currentUserAgent()}),
       ]);
     } else if (location.unavailable) {
       await Promise.all([
@@ -285,7 +287,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
         this.#emulationAgent.invoke_setTimezoneOverride({timezoneId: ''}),
         this.#emulationAgent.invoke_setLocaleOverride({locale: ''}),
         this.#emulationAgent.invoke_setUserAgentOverride(
-            {userAgent: MultitargetNetworkManager.instance().currentUserAgent()}),
+            {userAgent: this.#multitargetNetworkManager.currentUserAgent()}),
       ]);
     } else {
       function processEmulationResult(errorType: string, result: Protocol.ProtocolResponseWithError): Promise<void> {
@@ -319,7 +321,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
             .then(result => processEmulationResult('emulation-set-locale', result)),
         this.#emulationAgent
             .invoke_setUserAgentOverride({
-              userAgent: MultitargetNetworkManager.instance().currentUserAgent(),
+              userAgent: this.#multitargetNetworkManager.currentUserAgent(),
               acceptLanguage: location.locale,
             })
             .then(result => processEmulationResult('emulation-set-user-agent', result)),

package/front_end/core/sdk/NetworkManager.ts

@@ -133,14 +133,13 @@ const CONNECTION_TYPES = new Map([
  * to in multiple places, and this ensures we don't have accidental typos which
  * mean extra settings get mistakenly created.
  */
-export function customUserNetworkConditionsSetting(
-    settings: Common.Settings.Settings = Common.Settings.Settings.instance()): Common.Settings.Setting<Conditions[]> {
+export function customUserNetworkConditionsSetting(settings: Common.Settings.Settings):
+    Common.Settings.Setting<Conditions[]> {
   return settings.moduleSetting<Conditions[]>('custom-network-conditions');
 }
 
-export function activeNetworkThrottlingKeySetting(
-    settings: Common.Settings.Settings =
-        Common.Settings.Settings.instance()): Common.Settings.Setting<ThrottlingConditionKey> {
+export function activeNetworkThrottlingKeySetting(settings: Common.Settings.Settings):
+    Common.Settings.Setting<ThrottlingConditionKey> {
   return settings.createSetting('active-network-condition-key', PredefinedThrottlingConditionKey.NO_THROTTLING);
 }
 
@@ -578,10 +577,12 @@ const MAX_RESPONSE_BODY_TOTAL_BUFFER_LENGTH = 250 * 1024 * 1024;  // bytes
 export class FetchDispatcher implements ProtocolProxyApi.FetchDispatcher {
   readonly #fetchAgent: ProtocolProxyApi.FetchApi;
   readonly #manager: NetworkManager;
+  readonly #multitargetNetworkManager;
 
   constructor(agent: ProtocolProxyApi.FetchApi, manager: NetworkManager) {
     this.#fetchAgent = agent;
     this.#manager = manager;
+    this.#multitargetNetworkManager = this.#manager.target().targetManager().getNetworkManager();
   }
 
   requestPaused({requestId, request, resourceType, responseStatusCode, responseHeaders, networkId}:
@@ -592,8 +593,9 @@ export class FetchDispatcher implements ProtocolProxyApi.FetchDispatcher {
     if (networkRequest?.originalResponseHeaders.length === 0 && responseHeaders) {
       networkRequest.originalResponseHeaders = responseHeaders;
     }
-    void MultitargetNetworkManager.instance().requestIntercepted(new InterceptedRequest(
-        this.#fetchAgent, request, resourceType, requestId, networkRequest, responseStatusCode, responseHeaders));
+    void this.#multitargetNetworkManager.requestIntercepted(
+        new InterceptedRequest(this.#multitargetNetworkManager, this.#fetchAgent, request, resourceType, requestId,
+                               networkRequest, responseStatusCode, responseHeaders));
   }
 
   authRequired({}: Protocol.Fetch.AuthRequiredEvent): void {
@@ -602,6 +604,7 @@ export class FetchDispatcher implements ProtocolProxyApi.FetchDispatcher {
 
 export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   readonly #manager: NetworkManager;
+  readonly #multitargetNetworkManager: MultitargetNetworkManager;
   readonly #requestsById = new Map<string, NetworkRequest>();
   readonly #requestsByURL = new Map<Platform.DevToolsPath.UrlString, NetworkRequest>();
   readonly #requestsByLoaderId = new Map<Protocol.Network.LoaderId, NetworkRequest>();
@@ -618,9 +621,10 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
 
   constructor(manager: NetworkManager) {
     this.#manager = manager;
+    this.#multitargetNetworkManager = this.#manager.target().targetManager().getNetworkManager();
 
-    MultitargetNetworkManager.instance().addEventListener(
-        MultitargetNetworkManager.Events.REQUEST_INTERCEPTED, this.#markAsIntercepted.bind(this));
+    this.#multitargetNetworkManager.addEventListener(MultitargetNetworkManager.Events.REQUEST_INTERCEPTED,
+                                                     this.#markAsIntercepted.bind(this));
   }
 
   #markAsIntercepted(event: Common.EventTarget.EventTargetEvent<string>): void {
@@ -1178,7 +1182,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
   }
 
   private maybeAdoptMainResourceRequest(requestId: string): NetworkRequest|null {
-    const request = MultitargetNetworkManager.instance().inflightMainResourceRequests.get(requestId);
+    const request = this.#multitargetNetworkManager.inflightMainResourceRequests.get(requestId);
     if (!request) {
       return null;
     }
@@ -1216,7 +1220,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
     // request to fetch the main worker script, the request ID is the future
     // worker target ID and, therefore, it is unique.
     if (networkRequest.loaderId === networkRequest.requestId() || networkRequest.loaderId === '') {
-      MultitargetNetworkManager.instance().inflightMainResourceRequests.set(networkRequest.requestId(), networkRequest);
+      this.#multitargetNetworkManager.inflightMainResourceRequests.set(networkRequest.requestId(), networkRequest);
     }
 
     this.#manager.dispatchEventToListeners(Events.RequestStarted, {request: networkRequest, originalRequest});
@@ -1244,7 +1248,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
       }
     }
     this.#manager.dispatchEventToListeners(Events.RequestFinished, networkRequest);
-    MultitargetNetworkManager.instance().inflightMainResourceRequests.delete(networkRequest.requestId());
+    this.#multitargetNetworkManager.inflightMainResourceRequests.delete(networkRequest.requestId());
 
     const settings = this.#manager.target().targetManager().settings;
     if (settings.moduleSetting('monitoring-xhr-enabled').get() &&
@@ -2385,6 +2389,7 @@ export namespace MultitargetNetworkManager {
 }
 
 export class InterceptedRequest {
+  readonly #multitargetNetworkManager: MultitargetNetworkManager;
   readonly #fetchAgent: ProtocolProxyApi.FetchApi;
   #hasResponded = false;
   request: Protocol.Network.Request;
@@ -2395,6 +2400,7 @@ export class InterceptedRequest {
   networkRequest: NetworkRequest|null;
 
   constructor(
+      multitargetNetworkManager: MultitargetNetworkManager,
       fetchAgent: ProtocolProxyApi.FetchApi,
       request: Protocol.Network.Request,
       resourceType: Protocol.Network.ResourceType,
@@ -2403,6 +2409,7 @@ export class InterceptedRequest {
       responseStatusCode?: number,
       responseHeaders?: Protocol.Fetch.HeaderEntry[],
   ) {
+    this.#multitargetNetworkManager = multitargetNetworkManager;
     this.#fetchAgent = fetchAgent;
     this.request = request;
     this.resourceType = resourceType;
@@ -2494,8 +2501,8 @@ export class InterceptedRequest {
     }
 
     void this.#fetchAgent.invoke_fulfillRequest({requestId: this.requestId, responseCode, body, responseHeaders});
-    MultitargetNetworkManager.instance().dispatchEventToListeners(
-        MultitargetNetworkManager.Events.REQUEST_FULFILLED, this.request.url as Platform.DevToolsPath.UrlString);
+    this.#multitargetNetworkManager.dispatchEventToListeners(MultitargetNetworkManager.Events.REQUEST_FULFILLED,
+                                                             this.request.url as Platform.DevToolsPath.UrlString);
   }
 
   continueRequestWithoutChange(): void {

package/front_end/core/sdk/RuntimeModel.ts

@@ -337,7 +337,7 @@ export class RuntimeModel extends SDKModel<EventTypes> {
     const result = await this.queryObjects(object);
     object.release();
     if ('error' in result) {
-      Common.Console.Console.instance().error(result.error);
+      this.target().targetManager().getConsole().error(result.error);
       return;
     }
     this.dispatchEventToListeners(Events.QueryObjectRequested, {objects: result.objects, executionContextId});

package/front_end/core/sdk/TargetManager.ts

@@ -11,6 +11,7 @@ import type * as ProtocolClient from '../protocol_client/protocol_client.js';
 import * as Root from '../root/root.js';
 
 import {FrameManager} from './FrameManager.js';
+import {MultitargetNetworkManager} from './NetworkManager.js';
 import {type RegistrationInfo, SDKModel, type SDKModelConstructor} from './SDKModel.js';
 import {Target, Type as TargetType} from './Target.js';
 
@@ -48,6 +49,15 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     return this.context.get(FrameManager);
   }
 
+  // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
+  getNetworkManager(): MultitargetNetworkManager {
+    if ('has' in this.context && typeof this.context.has === 'function' &&
+        !this.context.has(MultitargetNetworkManager)) {
+      return MultitargetNetworkManager.instance();
+    }
+    return this.context.get(MultitargetNetworkManager);
+  }
+
   /* eslint-disable @typescript-eslint/no-explicit-any */
   #modelListeners: Platform.MapUtilities.Multimap<string|symbol|number, {
     modelClass: SDKModelConstructor,

package/front_end/design_system_tokens.css

@@ -639,6 +639,12 @@
   }
 
   &.platform-screenshot-test {
+    --default-font-family: ahem;
+    --monospace-font-family: ahem;
+    --source-code-font-family: ahem;
+  }
+
+  &.platform-screenshot-e2e-test {
     --default-font-family: roboto;
     --monospace-font-family: roboto;
     --source-code-font-family: roboto;

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -207,12 +207,11 @@ export class NodeIndicator extends UI.Widget.Widget {
   }
 }
 
-let nodeIndicatorProviderInstance: NodeIndicatorProvider;
 export class NodeIndicatorProvider implements UI.Toolbar.Provider {
   #toolbarItem: UI.Toolbar.ToolbarItem;
   #widgetElement: UI.Widget.WidgetElement<NodeIndicator>;
 
-  private constructor() {
+  constructor() {
     this.#widgetElement = document.createElement('devtools-widget') as UI.Widget.WidgetElement<NodeIndicator>;
     new NodeIndicator(this.#widgetElement);
 
@@ -223,15 +222,6 @@ export class NodeIndicatorProvider implements UI.Toolbar.Provider {
   item(): UI.Toolbar.ToolbarItem|null {
     return this.#toolbarItem;
   }
-
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): NodeIndicatorProvider {
-    const {forceNew} = opts;
-    if (!nodeIndicatorProviderInstance || forceNew) {
-      nodeIndicatorProviderInstance = new NodeIndicatorProvider();
-    }
-
-    return nodeIndicatorProviderInstance;
-  }
 }
 
 export class SourcesPanelIndicator {

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

@@ -257,7 +257,7 @@ Common.Settings.registerSettingExtension({
 UI.Toolbar.registerToolbarItem({
   async loadItem() {
     const InspectorMain = await loadInspectorMainModule();
-    return InspectorMain.InspectorMain.NodeIndicatorProvider.instance();
+    return new InspectorMain.InspectorMain.NodeIndicatorProvider();
   },
   order: 2,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_LEFT,

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;
-  }
 }