chrome-devtools-frontend 1.0.1657855 → 1.0.1661063

package/front_end/entrypoints/inspector_main/OutermostTargetSelector.ts

@@ -15,11 +15,11 @@ import outermostTargetSelectorStyles from './outermostTargetSelector.css.js';
 
 const UIStrings = {
   /**
-   * @description Title of toolbar item in outermost target selector in the main toolbar
+   * @description Title of toolbar item in outermost target selector in the main toolbar.
    */
   targetNotSelected: 'Page: Not selected',
   /**
-   * @description Title of toolbar item in outermost target selector in the main toolbar
+   * @description Title of toolbar item in outermost target selector in the main toolbar.
    * @example {top} PH1
    */
   targetS: 'Page: {PH1}',

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -16,153 +16,152 @@ import renderingOptionsStyles from './renderingOptions.css.js';
 
 const UIStrings = {
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting highlights areas
+   * @description The name of a checkbox setting in the Rendering panel. This setting highlights areas
    * of the webpage that need to be repainted (re-drawn by the browser).
    */
   paintFlashing: 'Paint flashing',
   /**
-   * @description Explanation text for the 'Paint flashing' setting in the Rendering tool.
+   * @description Explanation text for the 'Paint flashing' setting in the Rendering panel.
    */
   highlightsAreasOfThePageGreen:
       'Highlights areas of the page (green) that need to be repainted. May not be suitable for people prone to photosensitive epilepsy.',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting highlights areas
+   * @description The name of a checkbox setting in the Rendering panel. This setting highlights areas
    * (regions) of the page that were shifted (where a 'layout shift' occurred). A layout shift is
    * where elements on the webpage move around and cause other nearby elements to move as well.
    */
   layoutShiftRegions: 'Layout shift regions',
   /**
-   * @description Explanation text for the 'Layout Shift Regions' setting in the Rendering tool.
+   * @description Explanation text for the 'Layout shift regions' setting in the Rendering panel.
    */
   highlightsAreasOfThePageBlueThat:
       'Highlights areas of the page (blue) that were shifted. May not be suitable for people prone to photosensitive epilepsy.',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting shows the
+   * @description The name of a checkbox setting in the Rendering panel. This setting shows the
    * borders of layers on the page. Layer is a noun.
    */
   layerBorders: 'Layer borders',
   /**
-   * @description Explanation text for the 'Layer borders' setting in the Rendering tool.
+   * @description Explanation text for the 'Layer borders' setting in the Rendering panel.
    */
   showsLayerBordersOrangeoliveAnd: 'Shows layer borders (orange/olive) and tiles (cyan).',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting shows the
+   * @description The name of a checkbox setting in the Rendering panel. This setting shows the
    * rendering statistics for frames e.g. frames per second. Frame is a noun.
    */
-  frameRenderingStats: 'Frame Rendering Stats',
+  frameRenderingStats: 'Frame rendering stats',
   /**
-   * @description Explanation text for the 'Frame Rendering Stats' setting in the Rendering tool.
+   * @description Explanation text for the 'Frame rendering stats' setting in the Rendering panel.
    * Plots is a verb. GPU = Graphics Processing Unit.
    */
   plotsFrameThroughputDropped: 'Plots frame throughput, dropped frames distribution, and GPU memory.',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting highlights
+   * @description The name of a checkbox setting in the Rendering panel. This setting highlights
    * elements that can slow down scrolling on the page.
    */
   scrollingPerformanceIssues: 'Scrolling performance issues',
   /**
-   * @description Explanation text for the 'Scrolling performance issues' setting in the Rendering tool.
+   * @description Explanation text for the 'Scrolling performance issues' setting in the Rendering panel.
    */
   highlightsElementsTealThatCan:
       'Highlights elements (teal) that can slow down scrolling, including touch & wheel event handlers and other main-thread scrolling situations.',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting highlights the
+   * @description The name of a checkbox setting in the Rendering panel. This setting highlights the
    * rendering elements for ads that are found on the page.
    */
   highlightAds: 'Highlight ads',
   /**
-   * @description Explanation text for the 'Highlight ads' setting in the Rendering tool.
+   * @description Explanation text for the 'Highlight ads' setting in the Rendering panel.
    */
   highlightsElementsRedDetectedToBe: 'Highlights elements (red) detected to be ads.',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting prevents the
+   * @description The name of a checkbox setting in the Rendering panel. This setting prevents the
    * webpage from loading 'local' fonts. Local fonts are fonts that are installed on the user's
    * computer, and not loaded over the network.
    */
   disableLocalFonts: 'Disable local fonts',
   /**
-   * @description Explanation text for the 'Disable local fonts' setting in the Rendering tool.
+   * @description Explanation text for the 'Disable local fonts' setting in the Rendering panel.
    */
   disablesLocalSourcesInFontface: 'Disables `local()` sources in `@font-face` rules. Requires a page reload to apply.',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting
+   * @description The name of a checkbox setting in the Rendering panel. This setting
    * emulates/pretends that the webpage is focused i.e. that the user interacted with it most
    * recently.
    */
   emulateAFocusedPage: 'Emulate a focused page',
   /**
-   * @description Explanation text for the 'Emulate a focused page' setting in the Rendering tool.
+   * @description Explanation text for the 'Emulate a focused page' setting in the Rendering panel.
    */
   emulatesAFocusedPage: 'Keep page focused. Commonly used for debugging disappearing elements.',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting enables auto dark mode emulation.
+   * @description The name of a checkbox setting in the Rendering panel. This setting enables auto dark mode emulation.
    */
   emulateAutoDarkMode: 'Enable automatic dark mode',
   /**
-   * @description Explanation text for the 'Emulate automatic dark mode' setting in the Rendering tool.
+   * @description Explanation text for the 'Emulate automatic dark mode' setting in the Rendering panel.
    */
   emulatesAutoDarkMode: 'Enables automatic dark mode and sets `prefers-color-scheme` to `dark`.',
   /**
-   * @description Explanation text for the 'Emulate CSS media type' setting in the Rendering tool.
-   * This setting overrides the CSS media type on the page:
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types
+   * @description Explanation text for the 'Emulate CSS media type' setting in the Rendering panel.
+   * This setting overrides the CSS media type on the page (https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types).
    */
-  forcesMediaTypeForTestingPrint: 'Forces media type for testing print and screen styles',
+  forcesMediaTypeForTestingPrint: 'Forces media type for testing `print` and `screen` styles',
   /**
-   * @description Explanation text for the 'Forces CSS prefers-color-scheme media' setting in the Rendering tool.
+   * @description Explanation text for the 'Forces CSS prefers-color-scheme media' setting in the Rendering panel.
    */
   forcesCssPreferscolorschemeMedia: 'Forces CSS `prefers-color-scheme` media feature',
   /**
-   * @description Explanation text for the 'Forces CSS prefers-reduced-motion media' setting in the Rendering tool.
+   * @description Explanation text for the 'Forces CSS prefers-reduced-motion media' setting in the Rendering panel.
    */
   forcesCssPrefersreducedmotion: 'Forces CSS `prefers-reduced-motion` media feature',
   /**
-   * @description Explanation text for the 'Forces CSS prefers-contrast media' setting in the Rendering tool.
+   * @description Explanation text for the 'Forces CSS prefers-contrast media' setting in the Rendering panel.
    */
   forcesCssPreferscontrastMedia: 'Forces CSS `prefers-contrast` media feature',
   /**
-   * @description Explanation text for the 'Forces CSS prefers-reduced-data media' setting in the Rendering tool.
+   * @description Explanation text for the 'Forces CSS prefers-reduced-data media' setting in the Rendering panel.
    */
   forcesCssPrefersreduceddataMedia: 'Forces CSS `prefers-reduced-data` media feature',
   /**
-   * @description Explanation text for the 'Forces CSS prefers-reduced-transparency media' setting in the Rendering tool.
+   * @description Explanation text for the 'Forces CSS prefers-reduced-transparency media' setting in the Rendering panel.
    */
   forcesCssPrefersreducedtransparencyMedia: 'Forces CSS `prefers-reduced-transparency` media feature',
   /**
-   * @description Explanation text for the 'Forces CSS color-gamut media' setting in the Rendering tool.
+   * @description Explanation text for the 'Forces CSS color-gamut media' setting in the Rendering panel.
    */
   forcesCssColorgamutMediaFeature: 'Forces CSS `color-gamut` media feature',
   /**
-   * @description Explanation text for the 'Emulate vision deficiencies' setting in the Rendering tool.
+   * @description Explanation text for the 'Emulate vision deficiencies' setting in the Rendering panel.
    */
   forcesVisionDeficiencyEmulation: 'Forces vision deficiency emulation',
   /**
-   * @description Explanation text for the 'Emulate OS text scale' setting in the Rendering tool.
+   * @description Explanation text for the 'Emulate OS text scale' setting in the Rendering panel.
    */
   forcesOsTextScaleEmulation: 'Forces OS text scale emulation',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting disables the
+   * @description The name of a checkbox setting in the Rendering panel. This setting disables the
    * page from loading images with the AVIF format.
    */
   disableAvifImageFormat: 'Disable `AVIF` image format',
   /**
-   * @description Explanation text for the image format disabling settings in the Rendering tool.
+   * @description Explanation text for the image format disabling settings in the Rendering panel.
    */
   requiresAPageReloadToApplyAnd: 'Requires a page reload to apply and disables caching for image requests.',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting disables the
+   * @description The name of a checkbox setting in the Rendering panel. This setting disables the
    * page from loading images with the JPEG XL format.
    */
   disableJpegXlImageFormat: 'Disable `JPEG XL` image format',
   /**
-   * @description The name of a checkbox setting in the Rendering tool. This setting disables the
+   * @description The name of a checkbox setting in the Rendering panel. This setting disables the
    * page from loading images with the WebP format.
    */
   disableWebpImageFormat: 'Disable `WebP` image format',
   /**
-   * @description Explanation text for the 'Forces CSS forced-colors' setting in the Rendering tool.
+   * @description Explanation text for the 'Forces CSS forced-colors' setting in the Rendering panel.
    */
-  forcesCssForcedColors: 'Forces CSS forced-colors media feature',
+  forcesCssForcedColors: 'Forces CSS `forced-colors` media feature',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/RenderingOptions.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

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

@@ -10,53 +10,52 @@ import type * as InspectorMain from './inspector_main.js';
 
 const UIStrings = {
   /**
-   * @description Title of the Rendering tool. The rendering tool is a collection of settings that
+   * @description Title of the Rendering panel. The Rendering panel is a collection of settings that
    * lets the user debug the rendering (i.e. how the website is drawn onto the screen) of the
-   * website.
-   * https://developer.chrome.com/docs/devtools/evaluate-performance/reference#rendering
+   * website (https://developer.chrome.com/docs/devtools/evaluate-performance/reference#rendering).
    */
   rendering: 'Rendering',
   /**
-   * @description Command for showing the 'Rendering' tool
+   * @description Command for showing the Rendering panel.
    */
   showRendering: 'Show Rendering',
   /**
-   * @description Command Menu search query that points to the Rendering tool. This refers to the
+   * @description Command Menu search query that points to the Rendering panel. This refers to the
    * process of drawing pixels onto the screen (called painting).
    */
   paint: 'paint',
   /**
-   * @description Command Menu search query that points to the Rendering tool. Layout is a phase of
+   * @description Command Menu search query that points to the Rendering panel. Layout is a phase of
    * rendering a website where the browser calculates where different elements in the website will go
    * on the screen.
    */
   layout: 'layout',
   /**
-   * @description Command Menu search query that points to the Rendering tool. 'fps' is an acronym
+   * @description Command Menu search query that points to the Rendering panel. 'fps' is an acronym
    * for 'Frames per second'. It is in lowercase here because the search box the user will type this
    * into is case-insensitive. If there is an equivalent acronym/shortening in the target language
    * then a translation would be appropriate, otherwise it can be left in English.
    */
   fps: 'fps',
   /**
-   * @description Command Menu search query that points to the Rendering tool.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types. This is something the user
+   * @description Command Menu search query that points to the Rendering panel
+   * (https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types). This is something the user
    * might type in to search for the setting to change the CSS media type.
    */
   cssMediaType: 'CSS media type',
   /**
-   * @description Command Menu search query that points to the Rendering tool.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features This is something the
+   * @description Command Menu search query that points to the Rendering panel
+   * (https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features). This is something the
    * user might type in to search for the setting to change the value of various CSS media features.
    */
   cssMediaFeature: 'CSS media feature',
   /**
-   * @description Command Menu search query that points to the Rendering tool. Possible search term
+   * @description Command Menu search query that points to the Rendering panel. Possible search term
    * when the user wants to find settings related to visual impairment e.g. blurry vision, blindness.
    */
   visionDeficiency: 'vision deficiency',
   /**
-   * @description Command Menu search query that points to the Rendering tool. Possible search term
+   * @description Command Menu search query that points to the Rendering panel. Possible search term
    * when the user wants to find settings related to color vision deficiency/color blindness.
    */
   colorVisionDeficiency: 'color vision deficiency',
@@ -65,7 +64,7 @@ const UIStrings = {
    */
   reloadPage: 'Reload page',
   /**
-   * @description Title of an action that 'hard' reloads the inspected page. A hard reload also
+   * @description Title of an action that hard reloads the inspected page. A hard reload also
    * clears the browser's cache, forcing it to reload the most recent version of the page.
    */
   hardReloadPage: 'Hard reload page',
@@ -93,17 +92,9 @@ const UIStrings = {
    */
   doNotAutoOpen: 'Do not auto-open DevTools for popups',
   /**
-   * @description Title of a setting under the Appearance category in Settings. When the webpage is
-   * paused by devtools, an overlay is shown on top of the page to indicate that it is paused. The
-   * overlay is a pause/unpause button and some text, which appears on top of the paused page. This
-   * setting turns off this overlay.
+   * @description Title of an action that toggles the "forces CSS prefers-color-scheme" media feature.
    */
-  disablePaused: 'Disable paused state overlay',
-  /**
-   * @description Title of an action that toggle
-   * "forces CSS prefers-color-scheme" color
-   */
-  toggleCssPrefersColorSchemeMedia: 'Toggle CSS media feature prefers-color-scheme',
+  toggleCssPrefersColorSchemeMedia: 'Toggle CSS media feature `prefers-color-scheme`',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/inspector_main-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -245,15 +236,6 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.APPEARANCE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.disablePaused),
-  settingName: 'disable-paused-state-overlay',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
-});
-
 UI.Toolbar.registerToolbarItem({
   async loadItem() {
     const InspectorMain = await loadInspectorMainModule();

package/front_end/entrypoints/js_app/js_app.ts

@@ -18,15 +18,15 @@ import * as Main from '../main/main.js';
 
 const UIStrings = {
   /**
-   * @description Text that refers to the main target.
+   * @description Name of the primary target connection when debugging Node.js.
    */
   main: 'Main',
   /**
-   * @description Title of the 'Scripts' tool in the Network Navigator View, which is part of the Sources tool
+   * @description Title of the 'Scripts' tab in the navigation tree inside the Sources panel.
    */
   networkTitle: 'Scripts',
   /**
-   * @description Command for showing the 'Scripts' tool in the Network Navigator View, which is part of the Sources tool
+   * @description Command in the command menu for showing the 'Scripts' tab in the navigation tree inside the Sources panel.
    */
   showNode: 'Show Scripts',
 } as const;
@@ -71,9 +71,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/main/GlobalAiButton.ts

@@ -16,19 +16,19 @@ const {render, html, Directives: {classMap}} = Lit;
 
 const UIStrings = {
   /**
-   * @description Button's string in promotion state.
+   * @description Text label for the AI assistance button in the main DevTools toolbar when expanded.
    */
   aiAssistance: 'AI assistance',
   /**
-   * @description Button's tooltip text.
+   * @description Tooltip for the AI assistance button in the main DevTools toolbar.
    */
   openAiAssistance: 'Open AI assistance panel',
   /**
-   * @description Button's string in promotion state.
+   * @description Text label for the Gemini button in the main DevTools toolbar when expanded.
    */
   gemini: 'Gemini',
   /**
-   * @description Button's tooltip text.
+   * @description Tooltip for the Gemini button in the main DevTools toolbar.
    */
   openGemini: 'Open Gemini panel',
 } as const;

package/front_end/entrypoints/main/MainImpl.ts

@@ -64,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',
   /**
@@ -121,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;
@@ -445,7 +445,8 @@ export class MainImpl {
     IssuesManager.IssuesManager.IssuesManager.instance({
       forceNew: true,
       ensureFirst: true,
-      showThirdPartyIssuesSetting: IssuesManager.Issue.getShowThirdPartyIssuesSetting(),
+      showThirdPartyIssuesSetting:
+          IssuesManager.Issue.getShowThirdPartyIssuesSetting(Common.Settings.Settings.instance()),
       hideIssueSetting: IssuesManager.IssuesManager.getHideIssueByCodeSetting(),
     });
 
@@ -454,9 +455,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}) => {
@@ -466,8 +464,6 @@ 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());
 
@@ -476,6 +472,8 @@ export class MainImpl {
 
     new ExecutionContextSelector(targetManager, UI.Context.Context.instance());
 
+    this.#universe.domDebuggerManager.initialize();
+    this.#universe.cpuThrottlingManager.initialize();
     void this.#universe.liveMetrics.enable();
     CrUXManager.CrUXManager.instance();