chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/entrypoints/formatter_worker/FormatterWorker.ts

@@ -25,9 +25,23 @@ export interface Chunk {
 
 export type ChunkCallback = (arg0: Chunk) => void;
 
-export function createTokenizer(mimeType: string): (
-    arg0: string, arg1: (arg0: string, arg1: string|null, arg2: number, arg3: number) => (Object | undefined | void)) =>
-    void {
+export type TokenizerCallback = (value: string, style: string|null, start: number, end: number) =>
+    Object|undefined|void;
+
+/**
+ * A tokenizer function returned by {@link createTokenizer}.
+ *
+ * @param line The string content to tokenize.
+ * @param callback A callback function invoked for each token parsed.
+ * @param startOffset An optional offset pointing to where tokenization should start within
+ * the line, avoiding the need to allocate substrings when tokenizing a block inside a larger file.
+ */
+export type Tokenizer = (line: string, callback: TokenizerCallback, startOffset?: number) => void;
+
+/**
+ * Creates a tokenizer for the specified MIME type.
+ */
+export function createTokenizer(mimeType: string): Tokenizer {
   const mode = CodeMirror.getMode({indentUnit: 2}, mimeType);
   const state = CodeMirror.startState(mode);
 
@@ -40,8 +54,13 @@ export function createTokenizer(mimeType: string): (
   }
 
   return (line: string,
-          callback: (arg0: string, arg1: string|null, arg2: number, arg3: number) => void|Object|undefined) => {
+          callback: (arg0: string, arg1: string|null, arg2: number, arg3: number) => void|Object|undefined,
+          startOffset = 0) => {
     const stream = new CodeMirror.StringStream(line);
+    if (startOffset) {
+      stream.pos = startOffset;
+      stream.start = startOffset;
+    }
     while (!stream.eol()) {
       const style = mode.token(stream, state);
       const value = stream.current();

package/front_end/entrypoints/formatter_worker/HTMLFormatter.ts

@@ -107,10 +107,16 @@ export class HTMLFormatter {
   }
 
   #formatToken(element: FormatterElement, token: Token): void {
-    if (Platform.StringUtilities.isWhitespace(token.value)) {
+    const isBodyToken =
+        Boolean(element.openTag && !element.openTag.selfClosingTag && element.closeTag &&
+                element.openTag.endOffset <= token.startOffset && token.startOffset < element.closeTag.startOffset);
+    if (Platform.StringUtilities.isWhitespace(token.value) &&
+        (!isBodyToken || element.children.length > 0 ||
+         (!element.hasContent && !element.hasComments && /[\r\n]/.test(token.value)))) {
       return;
     }
-    if (hasTokenInSet(token.type, 'comment') || hasTokenInSet(token.type, 'meta')) {
+    if ((hasTokenInSet(token.type, 'comment') || hasTokenInSet(token.type, 'meta')) &&
+        (!isBodyToken || element.children.length > 0)) {
       this.#builder.addNewLine();
       this.#builder.addToken(token.value.trim(), token.startOffset);
       this.#builder.addNewLine();
@@ -121,8 +127,6 @@ export class HTMLFormatter {
       return;
     }
 
-    const isBodyToken =
-        element.openTag.endOffset <= token.startOffset && token.startOffset < element.closeTag.startOffset;
     if (isBodyToken && element.name === 'style') {
       this.#builder.addNewLine();
       this.#builder.increaseNestingLevel();
@@ -149,7 +153,15 @@ export class HTMLFormatter {
       this.#builder.addSoftSpace();
     }
 
+    // When adding tag brackets and tag names (<, </, /, div, >), disable word space enforcement so
+    // that FormattedContentBuilder does not insert unwanted spaces (e.g. splitting </title> into </ title>).
+    const restore = !isBodyToken && !hasTokenInSet(token.type, 'attribute') ?
+        this.#builder.setEnforceSpaceBetweenWords(false) :
+        false;
     this.#builder.addToken(token.value, token.startOffset);
+    if (!isBodyToken && !hasTokenInSet(token.type, 'attribute')) {
+      this.#builder.setEnforceSpaceBetweenWords(restore);
+    }
   }
 }
 
@@ -252,7 +264,7 @@ export class HTMLModel {
 
   #build(text: string): void {
     const tokenizer = createTokenizer('text/html');
-    let baseOffset = 0, lastOffset = 0;
+    let lastOffset = 0;
     let pendingToken: Token|null = null;
 
     const pushToken = (token: Token): Object|undefined => {
@@ -260,6 +272,14 @@ export class HTMLModel {
       this.#updateDOM(token);
 
       const element = this.#stack[this.#stack.length - 1];
+      if (element && (hasTokenInSet(token.type, 'comment') || hasTokenInSet(token.type, 'meta'))) {
+        element.hasComments = true;
+      }
+      if (element && !Platform.StringUtilities.isWhitespace(token.value) && !hasTokenInSet(token.type, 'tag') &&
+          !hasTokenInSet(token.type, 'attribute') && !hasTokenInSet(token.type, 'bracket') &&
+          !hasTokenInSet(token.type, 'comment') && !hasTokenInSet(token.type, 'meta')) {
+        element.hasContent = true;
+      }
       if (element && (element.name === 'script' || element.name === 'style') &&
           element.openTag?.endOffset === lastOffset) {
         return AbortTokenization;
@@ -274,8 +294,6 @@ export class HTMLModel {
         tokenStart: number,
         tokenEnd: number,
         ): Object|undefined => {
-      tokenStart += baseOffset;
-      tokenEnd += baseOffset;
       lastOffset = tokenEnd;
 
       const tokenType = type ? new Set<string>(type.split(' ')) : new Set<string>();
@@ -321,8 +339,7 @@ export class HTMLModel {
     };
 
     while (true) {
-      baseOffset = lastOffset;
-      tokenizer(text.substring(lastOffset), processToken);
+      tokenizer(text, processToken, lastOffset);
       if (pendingToken) {
         pushToken(pendingToken);
         pendingToken = null;
@@ -341,7 +358,11 @@ export class HTMLModel {
           lastOffset = text.length;
           break;
         }
-        if (text.substring(lastOffset + 2).toLowerCase().startsWith(element.name)) {
+        // Check if the tag at lastOffset matches the current element name (e.g. </script>).
+        // Slice only the length of the tag name to avoid allocating a large substring
+        // of the remainder of the document.
+        const sliced = text.slice(lastOffset + 2, lastOffset + 2 + element.name.length);
+        if (sliced.toLowerCase() === element.name) {
           break;
         }
         lastOffset += 2;
@@ -584,6 +605,8 @@ class FormatterElement {
   parent: FormatterElement|null = null;
   openTag: Tag|null = null;
   closeTag: Tag|null = null;
+  hasComments = false;
+  hasContent = false;
 
   constructor(name: string) {
     this.name = name;

package/front_end/entrypoints/formatter_worker/JavaScriptFormatter.ts

@@ -82,11 +82,12 @@ export class JavaScriptFormatter {
       const format = this.#formatToken(node.parent, token);
       this.#push(token, format);
     }
+    if (node.parent?.type === 'TemplateLiteral' && node.type !== 'TemplateElement' && node.type !== 'TemplateLiteral') {
+      this.#builder.setEnforceSpaceBetweenWords(true);
+    }
   }
 
   #afterVisit(node: Acorn.ESTree.Node): void {
-    // ${expressions} within a template literal need space enforced.
-    const restore = this.#builder.setEnforceSpaceBetweenWords(node.type !== 'TemplateElement');
     let token;
     while ((token = this.#tokenizer.peekToken()) && token.start < node.end) {
       const token = (this.#tokenizer.nextToken() as TokenOrComment);
@@ -94,7 +95,11 @@ export class JavaScriptFormatter {
       this.#push(token, format);
     }
     this.#push(null, this.#finishNode(node));
-    this.#builder.setEnforceSpaceBetweenWords(restore || node.type === 'TemplateLiteral');
+    if (node.parent?.type === 'TemplateLiteral' && node.type !== 'TemplateElement' && node.type !== 'TemplateLiteral') {
+      this.#builder.setEnforceSpaceBetweenWords(false);
+    } else if (node.type === 'TemplateLiteral' && node.parent?.type !== 'TemplateLiteral') {
+      this.#builder.setEnforceSpaceBetweenWords(true);
+    }
   }
 
   #inForLoopHeader(node: Acorn.ESTree.Node): boolean {

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -39,7 +39,7 @@ const UIStrings = {
    */
   javascriptIsDisabled: 'JavaScript is disabled',
   /**
-   * @description A message that prompts the user to open devtools for a specific environment (Node.js)
+   * @description Tooltip for the Node.js indicator prompting the user to open dedicated DevTools for Node.js.
    */
   openDedicatedTools: 'Open dedicated DevTools for `Node.js`',
 } as const;
@@ -107,7 +107,7 @@ export class InspectorMainImpl implements Common.Runnable.Runnable {
 
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.ReloadInspectedPage, ({data: hard}) => {
-          SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(hard);
+          SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(SDK.TargetManager.TargetManager.instance(), hard);
         });
   }
 }
@@ -118,10 +118,10 @@ export class ReloadActionDelegate implements UI.ActionRegistration.ActionDelegat
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     switch (actionId) {
       case 'inspector-main.reload':
-        SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(false);
+        SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(SDK.TargetManager.TargetManager.instance(), false);
         return true;
       case 'inspector-main.hard-reload':
-        SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(true);
+        SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(SDK.TargetManager.TargetManager.instance(), true);
         return true;
     }
     return false;

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;