chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/entrypoints/main/MainImpl.ts

@@ -47,7 +47,6 @@ import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-import * as LiveMetrics from '../../models/live-metrics/live-metrics.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
@@ -65,56 +64,56 @@ import {ExecutionContextSelector} from './ExecutionContextSelector.js';
 
 const UIStrings = {
   /**
-   * @description Title of item in main
+   * @description Title of the menu item in the main toolbar to customize and control DevTools.
    */
   customizeAndControlDevtools: 'Customize and control DevTools',
   /**
-   * @description Title element text content in Main
+   * @description Label for the dock side menu options in the customize and control menu.
    */
   dockSide: 'Dock side',
   /**
-   * @description Title element title in Main
+   * @description Tooltip for the dock side menu options explaining how to restore the last dock position.
    * @example {Ctrl+Shift+D} PH1
    */
   placementOfDevtoolsRelativeToThe: 'Placement of DevTools relative to the page. ({PH1} to restore last position)',
   /**
-   * @description Text to undock the DevTools
+   * @description Tooltip and label for the button to undock DevTools into a separate window.
    */
   undockIntoSeparateWindow: 'Undock into separate window',
   /**
-   * @description Text to dock the DevTools to the bottom of the browser tab
+   * @description Tooltip and label for the button to dock DevTools to the bottom of the browser window.
    */
   dockToBottom: 'Dock to bottom',
   /**
-   * @description Text to dock the DevTools to the right of the browser tab
+   * @description Tooltip and label for the button to dock DevTools to the right of the browser window.
    */
   dockToRight: 'Dock to right',
   /**
-   * @description Text to dock the DevTools to the left of the browser tab
+   * @description Tooltip and label for the button to dock DevTools to the left of the browser window.
    */
   dockToLeft: 'Dock to left',
   /**
-   * @description Text in Main
+   * @description Action item in the customize and control menu to focus the page being debugged.
    */
   focusDebuggee: 'Focus page',
   /**
-   * @description Text in Main
+   * @description Action item in the customize and control menu to hide the Console drawer.
    */
-  hideConsoleDrawer: 'Hide console drawer',
+  hideConsoleDrawer: 'Hide Console drawer',
   /**
-   * @description Text in Main
+   * @description Action item in the customize and control menu to show the Console drawer.
    */
-  showConsoleDrawer: 'Show console drawer',
+  showConsoleDrawer: 'Show Console drawer',
   /**
-   * @description A context menu item in the Main
+   * @description Submenu item in the customize and control menu to open additional tools and panels.
    */
   moreTools: 'More tools',
   /**
-   * @description Text for the viewing the help options
+   * @description Submenu item in the customize and control menu to view help and documentation options.
    */
   help: 'Help',
   /**
-   * @description Text describing how to navigate the dock side menu
+   * @description Screen reader announcement explaining how to navigate the dock side options using arrow keys.
    */
   dockSideNavigation: 'Use left and right arrow keys to navigate the options',
   /**
@@ -122,7 +121,7 @@ const UIStrings = {
    */
   aiModelDownloaded: 'AI model downloaded',
   /**
-   * @description A title of the menu item in the main menu leading to https://github.com/ChromeDevTools/chrome-devtools-mcp.
+   * @description Title of the menu item in the customize and control menu leading to the DevTools MCP repository.
    */
   getDevToolsMcp: 'Get `DevTools MCP`'
 } as const;
@@ -158,9 +157,11 @@ export class MainImpl {
   #readyForTestPromise = Promise.withResolvers<void>();
   #veStartPromise!: Promise<void>;
   #universe!: Foundation.Universe.Universe;
+  #supportsEmulation = false;
 
-  constructor() {
+  constructor(opts?: {supportsEmulation: boolean}) {
     MainImpl.instanceForTest = this;
+    this.#supportsEmulation = opts?.supportsEmulation ?? false;
     void this.#loaded();
   }
 
@@ -209,6 +210,7 @@ export class MainImpl {
       },
       hostConfig: Root.Runtime.hostConfig,
       inspectorFrontendHost: Host.InspectorFrontendHost.InspectorFrontendHostInstance,
+      supportsEmulation: this.#supportsEmulation,
     };
     this.#universe = new Foundation.Universe.Universe(creationOptions);
     Root.DevToolsContext.setGlobalInstance(this.#universe.context as Root.DevToolsContext.WritableDevToolsContext);
@@ -452,9 +454,6 @@ export class MainImpl {
     targetManager.addEventListener(
         SDK.TargetManager.Events.SUSPEND_STATE_CHANGED, this.#onSuspendStateChanged.bind(this));
 
-    Workspace.FileManager.FileManager.instance({forceNew: true});
-
-    Bindings.NetworkProject.NetworkProjectManager.instance();
     new Bindings.PresentationConsoleMessageHelper.PresentationConsoleMessageManager();
     targetManager.setScopeTarget(targetManager.primaryPageTarget());
     UI.Context.Context.instance().addFlavorChangeListener(SDK.Target.Target, ({data}) => {
@@ -464,20 +463,17 @@ export class MainImpl {
     // @ts-expect-error e2e test global
     self.Extensions.extensionServer = PanelCommon.ExtensionServer.ExtensionServer.instance({forceNew: true});
 
-    new Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding(
-        isolatedFileSystemManager, Workspace.Workspace.WorkspaceImpl.instance());
     isolatedFileSystemManager.addPlatformFileSystem(
         'snippet://' as Platform.DevToolsPath.UrlString, new Snippets.ScriptSnippetFileSystem.SnippetFileSystem());
 
-    const persistenceImpl = Persistence.Persistence.PersistenceImpl.instance();
-    const linkDecorator = new PanelCommon.PersistenceUtils.LinkDecorator(persistenceImpl);
+    const linkDecorator = new PanelCommon.PersistenceUtils.LinkDecorator(this.#universe.persistence);
     Components.Linkifier.Linkifier.setLinkDecorator(linkDecorator);
-    Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance(
-        {forceNew: true, workspace: Workspace.Workspace.WorkspaceImpl.instance()});
 
     new ExecutionContextSelector(targetManager, UI.Context.Context.instance());
 
-    void LiveMetrics.LiveMetrics.instance().enable();
+    this.#universe.domDebuggerManager.initialize();
+    this.#universe.cpuThrottlingManager.initialize();
+    void this.#universe.liveMetrics.enable();
     CrUXManager.CrUXManager.instance();
 
     const builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
@@ -761,8 +757,6 @@ export class SearchActionDelegate implements UI.ActionRegistration.ActionDelegat
     return false;
   }
 }
-let mainMenuItemInstance: MainMenuItem;
-
 export class MainMenuItem implements UI.Toolbar.Provider {
   readonly #item: UI.Toolbar.ToolbarMenuButton;
   constructor() {
@@ -773,17 +767,6 @@ export class MainMenuItem implements UI.Toolbar.Provider {
     this.#item.setTitle(i18nString(UIStrings.customizeAndControlDevtools));
   }
 
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): MainMenuItem {
-    const {forceNew} = opts;
-    if (!mainMenuItemInstance || forceNew) {
-      mainMenuItemInstance = new MainMenuItem();
-    }
-
-    return mainMenuItemInstance;
-  }
-
   item(): UI.Toolbar.ToolbarItem|null {
     return this.#item;
   }
@@ -945,25 +928,12 @@ export class MainMenuItem implements UI.Toolbar.Provider {
   }
 }
 
-let settingsButtonProviderInstance: SettingsButtonProvider;
-
 export class SettingsButtonProvider implements UI.Toolbar.Provider {
   readonly #settingsButton: UI.Toolbar.ToolbarButton;
-  private constructor() {
+  constructor() {
     this.#settingsButton = UI.Toolbar.Toolbar.createActionButton('settings.show');
   }
 
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): SettingsButtonProvider {
-    const {forceNew} = opts;
-    if (!settingsButtonProviderInstance || forceNew) {
-      settingsButtonProviderInstance = new SettingsButtonProvider();
-    }
-
-    return settingsButtonProviderInstance;
-  }
-
   item(): UI.Toolbar.ToolbarItem|null {
     return this.#settingsButton;
   }

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

@@ -17,163 +17,163 @@ import type * as Main from './main.js';
 
 const UIStrings = {
   /**
-   * @description Text in Main
+   * @description Action title to focus the page being debugged.
    */
   focusDebuggee: 'Focus page',
   /**
-   * @description Text in the Shortcuts page in settings to explain a keyboard shortcut
+   * @description Action title and shortcut description to toggle the Console drawer.
    */
   toggleDrawer: 'Toggle drawer',
   /**
-   * @description Title of an action that navigates to the next panel
+   * @description Title of an action that navigates to the next panel.
    */
   nextPanel: 'Next panel',
   /**
-   * @description Title of an action that navigates to the previous panel
+   * @description Title of an action that navigates to the previous panel.
    */
   previousPanel: 'Previous panel',
   /**
-   * @description Title of an action that reloads the DevTools
+   * @description Title of an action that reloads DevTools.
    */
   reloadDevtools: 'Reload DevTools',
   /**
-   * @description Title of an action in the main tool to toggle dock
+   * @description Title of an action in the main toolbar to restore the last dock position.
    */
   restoreLastDockPosition: 'Restore last dock position',
   /**
-   * @description Text in the Shortcuts page to explain a keyboard shortcut (zoom in)
+   * @description Shortcut description and action title to zoom in.
    */
   zoomIn: 'Zoom in',
   /**
-   * @description Text in the Shortcuts page to explain a keyboard shortcut (zoom out)
+   * @description Shortcut description and action title to zoom out.
    */
   zoomOut: 'Zoom out',
   /**
-   * @description Title of an action that reset the zoom level to its default
+   * @description Title of an action that resets the zoom level to default.
    */
   resetZoomLevel: 'Reset zoom level',
   /**
-   * @description Title of an action to search in panel
+   * @description Title of an action to search within the current panel.
    */
   searchInPanel: 'Search in panel',
   /**
-   * @description Title of an action that cancels the current search
+   * @description Title of an action that cancels the current search.
    */
   cancelSearch: 'Cancel search',
   /**
-   * @description Title of an action that finds the next search result
+   * @description Title of an action that finds the next search result.
    */
   findNextResult: 'Find next result',
   /**
-   * @description Title of an action to find the previous search result
+   * @description Title of an action to find the previous search result.
    */
   findPreviousResult: 'Find previous result',
   /**
-   * @description Title of a setting under the Appearance category in Settings
+   * @description Title of the theme setting under the Appearance category in Settings.
    */
   theme: 'Theme:',
   /**
-   * @description Title of a setting under the Appearance category that can be invoked through the Command Menu
+   * @description Command menu option to switch to the browser's preferred color theme.
    */
-  switchToBrowserPreferredTheme: 'Switch to browser\'s preferred theme',
+  switchToBrowserPreferredTheme: 'Switch to browser’s preferred theme',
   /**
-   * @description A drop-down menu option to switch to the same (light or dark) theme as the browser
+   * @description Drop-down menu option to match the browser's color theme.
    */
   autoTheme: 'Auto',
   /**
-   * @description Title of a setting under the Appearance category that can be invoked through the Command Menu
+   * @description Command menu option to switch to the light color theme.
    */
   switchToLightTheme: 'Switch to light theme',
   /**
-   * @description A drop-down menu option to switch to light theme
+   * @description Drop-down menu option to select the light color theme.
    */
   lightCapital: 'Light',
   /**
-   * @description Title of a setting under the Appearance category that can be invoked through the Command Menu
+   * @description Command menu option to switch to the dark color theme.
    */
   switchToDarkTheme: 'Switch to dark theme',
   /**
-   * @description A drop-down menu option to switch to dark theme
+   * @description Drop-down menu option to select the dark color theme.
    */
   darkCapital: 'Dark',
   /**
-   * @description A tag of theme preference settings that can be searched in the command menu
+   * @description Tag for theme preference settings when searched in the command menu.
    */
   darkLower: 'dark',
   /**
-   * @description A tag of theme preference settings that can be searched in the command menu
+   * @description Tag for theme preference settings when searched in the command menu.
    */
   lightLower: 'light',
   /**
-   * @description Title of a setting under the Appearance category in Settings
+   * @description Title of the panel layout setting under the Appearance category in Settings.
    */
   panelLayout: 'Panel layout:',
   /**
-   * @description Title of a setting under the Appearance category that can be invoked through the Command Menu
+   * @description Command menu option to use a horizontal panel layout.
    */
   useHorizontalPanelLayout: 'Use horizontal panel layout',
   /**
-   * @description A drop-down menu option to use horizontal panel layout
+   * @description Drop-down menu option for horizontal panel layout.
    */
   horizontal: 'horizontal',
   /**
-   * @description Title of a setting under the Appearance category that can be invoked through the Command Menu
+   * @description Command menu option to use a vertical panel layout.
    */
   useVerticalPanelLayout: 'Use vertical panel layout',
   /**
-   * @description A drop-down menu option to use vertical panel layout
+   * @description Drop-down menu option for vertical panel layout.
    */
   vertical: 'vertical',
   /**
-   * @description Title of a setting under the Appearance category that can be invoked through the Command Menu
+   * @description Command menu option to use automatic panel layout.
    */
   useAutomaticPanelLayout: 'Use automatic panel layout',
   /**
-   * @description Text short for automatic
+   * @description Drop-down menu option for automatic panel layout.
    */
   auto: 'auto',
   /**
-   * @description Title of a setting under the Appearance category in Settings
+   * @description Checkbox label for the setting to use Ctrl plus number keys to switch panels.
    */
   enableCtrlShortcutToSwitchPanels: 'Use Ctrl + 1-9 to switch panels',
   /**
-   * @description (Mac only) Title of a setting under the Appearance category in Settings
+   * @description Checkbox label for the setting to use Command plus number keys to switch panels on Mac.
    */
   enableShortcutToSwitchPanels: 'Use ⌘ + 1-9 to switch panels',
   /**
-   * @description A drop-down menu option to dock to right
+   * @description Drop-down menu option to dock DevTools to the right.
    */
   right: 'Right',
   /**
-   * @description Text to dock the DevTools to the right of the browser tab
+   * @description Title of the action and setting option to dock DevTools to the right of the browser window.
    */
   dockToRight: 'Dock to right',
   /**
-   * @description A drop-down menu option to dock to bottom
+   * @description Drop-down menu option to dock DevTools to the bottom.
    */
   bottom: 'Bottom',
   /**
-   * @description Text to dock the DevTools to the bottom of the browser tab
+   * @description Title of the action and setting option to dock DevTools to the bottom of the browser window.
    */
   dockToBottom: 'Dock to bottom',
   /**
-   * @description A drop-down menu option to dock to left
+   * @description Drop-down menu option to dock DevTools to the left.
    */
   left: 'Left',
   /**
-   * @description Text to dock the DevTools to the left of the browser tab
+   * @description Title of the action and setting option to dock DevTools to the left of the browser window.
    */
   dockToLeft: 'Dock to left',
   /**
-   * @description A drop-down menu option to undock into separate window
+   * @description Drop-down menu option for undocked DevTools in a separate window.
    */
   undocked: 'Undocked',
   /**
-   * @description Text to undock the DevTools
+   * @description Title of the action and setting option to undock DevTools into a separate window.
    */
   undockIntoSeparateWindow: 'Undock into separate window',
   /**
-   * @description Name of the default set of DevTools keyboard shortcuts
+   * @description Option label for the default set of DevTools keyboard shortcuts.
    */
   devtoolsDefault: 'DevTools (Default)',
   /**
@@ -228,7 +228,7 @@ const UIStrings = {
   /**
    * @description Command to turn the browser color scheme matching off through the command menu.
    */
-  dontMatchChromeColorSchemeCommand: 'Don\'t match Chrome color scheme',
+  dontMatchChromeColorSchemeCommand: 'Don’t match Chrome color scheme',
   /**
    * @description Command to toggle the drawer orientation.
    */
@@ -911,29 +911,29 @@ UI.Toolbar.registerToolbarItem({
     const isPolicyRestricted = config?.aidaAvailability?.blockedByEnterprisePolicy === true;
     return Boolean(isFlagEnabled && !isGeoRestricted && !isPolicyRestricted);
   },
-  async loadItem() {
+  loadItem: Common.Lazy.lazy(async () => {
     const Main = await loadMainModule();
     return new Main.GlobalAiButton.GlobalAiButtonToolbarProvider();
-  },
+  }) as () => Promise<UI.Toolbar.Provider>,
   order: 98,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_RIGHT,
 });
 
 UI.Toolbar.registerToolbarItem({
-  async loadItem() {
+  loadItem: Common.Lazy.lazy(async () => {
     const Main = await loadMainModule();
-    return Main.MainImpl.SettingsButtonProvider.instance();
-  },
+    return new Main.MainImpl.SettingsButtonProvider();
+  }) as () => Promise<UI.Toolbar.Provider>,
   order: 99,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_RIGHT,
 });
 
 UI.Toolbar.registerToolbarItem({
   condition: () => !Root.Runtime.Runtime.isTraceApp(),
-  async loadItem() {
+  loadItem: Common.Lazy.lazy(async () => {
     const Main = await loadMainModule();
-    return Main.MainImpl.MainMenuItem.instance();
-  },
+    return new Main.MainImpl.MainMenuItem();
+  }) as () => Promise<UI.Toolbar.Provider>,
   order: 100,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_RIGHT,
 });

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

@@ -15,25 +15,25 @@ import nodeConnectionsPanelStyles from './nodeConnectionsPanel.css.js';
 
 const UIStrings = {
   /**
-   * @description Text in Node Connections Panel of the Sources panel when debugging a Node.js app
+   * @description Text in Node connections panel of the Sources panel when debugging a Node.js app.
    */
   nodejsDebuggingGuide: 'Node.js debugging guide',
   /**
-   * @description Text in Node Connections Panel of the Sources panel when debugging a Node.js app
+   * @description Text in Node connections panel of the Sources panel when debugging a Node.js app.
    * @example {Node.js debugging guide} PH1
    */
   specifyNetworkEndpointAnd:
       'Specify network endpoint and DevTools will connect to it automatically. Read {PH1} to learn more.',
   /**
-   * @description Placeholder text content in Node Connections Panel of the Sources panel when debugging a Node.js app
+   * @description Placeholder text content in Node connections panel of the Sources panel when debugging a Node.js app.
    */
   noConnectionsSpecified: 'No connections specified',
   /**
-   * @description Text of add network target button in Node Connections Panel of the Sources panel when debugging a Node.js app
+   * @description Text of add network target button in Node connections panel of the Sources panel when debugging a Node.js app.
    */
   addConnection: 'Add connection',
   /**
-   * @description Text in Node Connections Panel of the Sources panel when debugging a Node.js app
+   * @description Text in Node connections panel of the Sources panel when debugging a Node.js app.
    */
   networkAddressEgLocalhost: 'Network address (e.g. localhost:9229)',
 } as const;

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

@@ -14,16 +14,16 @@ import * as Components from '../../../ui/legacy/components/utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text that refers to the main target
+   * @description Text that refers to the main target.
    */
   main: 'Main',
   /**
-   * @description Text in Node Main of the Sources panel when debugging a Node.js app
+   * @description Text in Node main of the Sources panel when debugging a Node.js app.
    * @example {example.com} PH1
    */
   nodejsS: 'Node.js: {PH1}',
   /**
-   * @description Text in DevTools window title when debugging a Node.js app
+   * @description Text in DevTools window title when debugging a Node.js app.
    * @example {example.com} PH1
    */
   NodejsTitleS: 'DevTools - Node.js: {PH1}',

package/front_end/entrypoints/node_app/node_app.ts

@@ -21,31 +21,31 @@ const {NodeMainImpl} = App.NodeMain;
 
 const UIStrings = {
   /**
-   * @description Text that refers to the network connection
+   * @description Text that refers to the network connection.
    */
   connection: 'Connection',
   /**
-   * @description A tag of Node.js Connection Panel that can be searched in the command menu
+   * @description A tag of Node.js connection panel that can be searched in the command menu.
    */
   node: 'node',
   /**
-   * @description Command for showing the Connection tool
+   * @description Command for showing the Connection tool.
    */
   showConnection: 'Show Connection',
   /**
-   * @description Title of the 'Node' tool in the Network Navigator View, which is part of the Sources tool
+   * @description Title of the 'Node' tool in the Network navigator view, which is part of the Sources tool.
    */
   networkTitle: 'Node',
   /**
-   * @description Command for showing the 'Node' tool in the Network Navigator View, which is part of the Sources tool
+   * @description Command for showing the 'Node' tool in the Network navigator view, which is part of the Sources tool.
    */
   showNode: 'Show Node',
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application panel sidebar of the Application panel.
    */
   application: 'Application',
   /**
-   * @description Command for showing the 'Application' tool
+   * @description Command for showing the Application tool.
    */
   showApplication: 'Show Application',
 } as const;
@@ -81,9 +81,10 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showNode),
   order: 2,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
-  async loadView() {
+  async loadView(universe) {
     const Sources = await loadSourcesModule();
-    return Sources.SourcesNavigator.NetworkNavigatorView.instance();
+    return Sources.SourcesNavigator.NetworkNavigatorView.instance(
+        {forceNew: null, networkProjectManager: universe.networkProjectManager});
   },
 });
 

package/front_end/entrypoints/worker_app/WorkerMain.ts

@@ -10,7 +10,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 
 const UIStrings = {
   /**
-   * @description Text that refers to the main target.
+   * @description Name of the primary target connection when debugging a service worker or dedicated worker.
    */
   main: 'Main',
 } as const;