chrome-devtools-frontend 1.0.1667564 → 1.0.1669021

package/front_end/panels/sensors/locationsSettingsTab.css

@@ -4,18 +4,18 @@
  * found in the LICENSE file.
  */
 
-* {
-  font-family: var(--default-font-family);
-}
-
+devtools-button.add-locations-button:not(:first-child),
 .add-locations-button {
   margin-bottom: var(--sys-size-5);
   border: none;
 }
 
+devtools-list.locations-list,
 .locations-list {
   margin-top: var(--sys-size-3);
   flex: auto;
+  display: flex;
+  border: 1px solid var(--sys-color-divider);
 }
 
 .locations-list-item {
@@ -89,3 +89,77 @@
   align-items: center;
   gap: var(--sys-size-9);
 }
+
+.location-dialog-content {
+  padding: var(--sys-size-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-size-6);
+  width: var(--sys-size-33);
+  min-width: var(--sys-size-33);
+}
+
+.editor-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sys-size-5) var(--sys-size-6);
+}
+
+.editor-field-full-width {
+  grid-column: 1 / -1;
+}
+
+.editor-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-size-2);
+}
+
+.editor-field-label {
+  color: var(--sys-color-on-surface);
+  font-size: var(--sys-size-6);
+  font-weight: var(--ref-typeface-weight-medium);
+}
+
+.editor-field input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--sys-size-3) var(--sys-size-4);
+  height: var(--sys-size-11);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-size-2);
+  outline: none;
+}
+
+.editor-field.has-error input {
+  border-color: var(--sys-color-error);
+}
+
+.editor-field-error {
+  color: var(--sys-color-error);
+  font-size: var(--sys-size-6);
+  overflow-wrap: break-word;
+}
+
+.dialog-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sys-size-3);
+  margin-top: var(--sys-size-3);
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-title {
+  font-size: var(--sys-size-7);
+  font-weight: var(--ref-typeface-weight-medium);
+  color: var(--sys-color-on-surface);
+}
+
+.dialog-close-button {
+  flex-shrink: 0;
+}

package/front_end/panels/settings/AISettingsTab.ts

@@ -116,42 +116,25 @@ const UIStrings = {
   /**
    * @description Text describing the AI assistance feature.
    */
-  helpUnderstandStyling: 'Get help with understanding CSS styles',
+  aiAssistanceDescription: 'Get context-aware help on the inspected page',
   /**
-   * @description Text describing the AI assistance feature.
-   */
-  helpUnderstandStylingAndNetworkRequest: 'Get help with understanding CSS styles and network requests',
-  /**
-   * @description Text describing the AI assistance feature.
-   */
-  helpUnderstandStylingNetworkAndFile: 'Get help with understanding CSS styles, network requests, and files',
-  /**
-   * @description Text describing the AI assistance feature.
-   */
-  helpUnderstandStylingNetworkPerformanceAndFile:
-      'Get help with understanding CSS styles, network requests, performance, and files',
-  /**
-   * @description Text describing the AI assistance feature when V2 is enabled.
+   * @description First item in the description of the AI assistance feature.
    */
-  aiAssistanceDescriptionV2: 'Get context-aware help on the inspected page',
-  /**
-   * @description First item in the description of the AI assistance feature when V2 is enabled.
-   */
-  aiAssistanceWhenOnItem1V2:
+  aiAssistanceWhenOnItem1:
       'Debug styling, network, performance, source code, accessibility and storage issues with DevTools AI assistance',
   /**
-   * @description Second item in the description of the AI assistance feature when V2 is enabled.
+   * @description Second item in the description of the AI assistance feature.
    */
-  aiAssistanceWhenOnItem2V2: 'Follow the agent’s reasoning step-by-step and quickly jump to the relevant source data',
+  aiAssistanceWhenOnItem2: 'Follow the agent’s reasoning step-by-step and quickly jump to the relevant source data',
   /**
-   * @description Explainer for which data is being sent by the AI assistance feature when V2 is enabled.
+   * @description Explainer for which data is being sent by the AI assistance feature.
    */
-  aiAssistanceThingsToConsiderV2:
+  aiAssistanceThingsToConsider:
       'To generate explanations, chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
   /**
-   * @description Explainer for which data is being sent by the AI assistance feature when V2 is enabled and logging is disabled.
+   * @description Explainer for which data is being sent by the AI assistance feature when logging is disabled.
    */
-  aiAssistanceThingsToConsiderNoLoggingV2:
+  aiAssistanceThingsToConsiderNoLogging:
       'To generate explanations, chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
   /**
    * @description Text describing the code suggestions feature.
@@ -161,37 +144,6 @@ const UIStrings = {
    * @description Text which is a hyperlink to more documentation.
    */
   learnMore: 'Learn more',
-  /**
-   * @description Description of the AI assistance feature.
-   */
-  explainStyling: 'Understand CSS styles with AI-powered insights',
-  /**
-   * @description Description of the AI assistance feature.
-   */
-  explainStylingAndNetworkRequest: 'Understand CSS styles and network activity with AI-powered insights',
-  /**
-   * @description Description of the AI assistance feature.
-   */
-  explainStylingNetworkAndFile: 'Understand CSS styles, network activity, and file origins with AI-powered insights',
-  /**
-   * @description Description of the AI assistance feature.
-   */
-  explainStylingNetworkPerformanceAndFile:
-      'Understand CSS styles, network activity, performance bottlenecks, and file origins with AI-powered insights',
-  /**
-   * @description Description of the AI assistance feature.
-   */
-  receiveStylingSuggestions: 'Improve your development workflow with contextual explanations and suggestions',
-  /**
-   * @description Explainer for which data is being sent by the AI assistance feature.
-   */
-  freestylerSendsData:
-      'To generate explanations, your chat messages, any data the inspected page can see using Web APIs, and the items you select such as files, network requests, and performance traces are sent to Google. This data may be seen by human reviewers to improve this feature. Don’t use on pages with personal or sensitive information.',
-  /**
-   * @description Explainer for which data is being sent by the AI assistance feature without logging.
-   */
-  freestylerSendsDataNoLogging:
-      'To generate explanations, your chat messages, any data the inspected page can see using Web APIs, and the items you select such as files, network requests, and performance traces are sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
    * @description Explainer for which data is being sent by the AI-generated annotations feature.
    */
@@ -562,10 +514,9 @@ export class AISettingsTab extends UI.Widget.VBox {
     }
 
     if (this.#aiAssistanceSetting) {
-      const isV2 = Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled;
       const aiAssistanceData: AiSettingParams = {
-        settingName: i18n.i18n.lockedString(
-            AiAssistanceModel.AiUtils.isGeminiBranding() ? 'Gemini in Chrome DevTools' : 'AI assistance'),
+        settingName: i18n.i18n.lockedString(AiAssistanceModel.AiUtils.isGeminiBranding() ? 'Gemini in Chrome DevTools' :
+                                                                                           'AI assistance'),
         iconName: AiAssistanceModel.AiUtils.getIconName(),
         settingDescription: this.#getAiAssistanceSettingDescription(),
         enableSettingText: i18nString(UIStrings.enableAiAssistance),
@@ -573,16 +524,13 @@ export class AISettingsTab extends UI.Widget.VBox {
           {iconName: 'info', text: this.#getAiAssistanceSettingInfo()},
           {
             iconName: 'pen-spark',
-            text: isV2 ? i18nString(UIStrings.aiAssistanceWhenOnItem2V2) :
-                         i18nString(UIStrings.receiveStylingSuggestions),
+            text: i18nString(UIStrings.aiAssistanceWhenOnItem2),
           },
         ],
         toConsiderSettingItems: [{
           iconName: 'google',
-          text: isV2 ? (noLogging ? i18nString(UIStrings.aiAssistanceThingsToConsiderNoLoggingV2) :
-                                    i18nString(UIStrings.aiAssistanceThingsToConsiderV2)) :
-                       (noLogging ? i18nString(UIStrings.freestylerSendsDataNoLogging) :
-                                    i18nString(UIStrings.freestylerSendsData)),
+          text: noLogging ? i18nString(UIStrings.aiAssistanceThingsToConsiderNoLogging) :
+                            i18nString(UIStrings.aiAssistanceThingsToConsider),
         }],
         learnMoreLink: {
           url: 'https://developer.chrome.com/docs/devtools/ai-assistance',
@@ -673,37 +621,11 @@ export class AISettingsTab extends UI.Widget.VBox {
   }
 
   #getAiAssistanceSettingDescription(): Platform.UIString.LocalizedString {
-    const {hostConfig} = Root.Runtime;
-    if (hostConfig.devToolsAiAssistanceV2?.enabled) {
-      return i18nString(UIStrings.aiAssistanceDescriptionV2);
-    }
-    if (hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {
-      return i18nString(UIStrings.helpUnderstandStylingNetworkPerformanceAndFile);
-    }
-    if (hostConfig.devToolsAiAssistanceFileAgent?.enabled) {
-      return i18nString(UIStrings.helpUnderstandStylingNetworkAndFile);
-    }
-    if (hostConfig.devToolsAiAssistanceNetworkAgent?.enabled) {
-      return i18nString(UIStrings.helpUnderstandStylingAndNetworkRequest);
-    }
-    return i18nString(UIStrings.helpUnderstandStyling);
+    return i18nString(UIStrings.aiAssistanceDescription);
   }
 
   #getAiAssistanceSettingInfo(): Platform.UIString.LocalizedString {
-    const {hostConfig} = Root.Runtime;
-    if (hostConfig.devToolsAiAssistanceV2?.enabled) {
-      return i18nString(UIStrings.aiAssistanceWhenOnItem1V2);
-    }
-    if (hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {
-      return i18nString(UIStrings.explainStylingNetworkPerformanceAndFile);
-    }
-    if (hostConfig.devToolsAiAssistanceFileAgent?.enabled) {
-      return i18nString(UIStrings.explainStylingNetworkAndFile);
-    }
-    if (hostConfig.devToolsAiAssistanceNetworkAgent?.enabled) {
-      return i18nString(UIStrings.explainStylingAndNetworkRequest);
-    }
-    return i18nString(UIStrings.explainStyling);
+    return i18nString(UIStrings.aiAssistanceWhenOnItem1);
   }
 
   #expandSetting(setting: Common.Settings.Setting<boolean>): void {
@@ -753,12 +675,7 @@ export class AISettingsTab extends UI.Widget.VBox {
         void AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().deleteAll();
       }
 
-      if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled && setting.get()) {
-        // If the user turns on ai-assistance whilst on the V2 experiment, they
-        // do not need to see the opt-in change management dialog. This dialog
-        // exists to inform users who opted-in to "V1" that in "V2" there are
-        // some data access changes. But if a user opts-in when on "V2", they
-        // do not need to see that dialog.
+      if (setting.get()) {
         Common.Settings.Settings.instance().moduleSetting('ai-assistance-v2-opt-in-change-dialog-seen').set(true);
       }
     }

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -14,12 +14,12 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   * @description Default snippet name when a new snippet is created in the Sources panel
+   * @description Default snippet name when a new snippet is created in the Sources panel.
    * @example {1} PH1
    */
   scriptSnippet: 'Script snippet #{PH1}',
   /**
-   * @description Text to show something is linked to another
+   * @description Text to show something is linked to another.
    * @example {example.url} PH1
    */
   linkedTo: 'Linked to {PH1}',

package/front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -14,19 +14,19 @@ import {evaluateScriptSnippet, findSnippetsProject} from './ScriptSnippetFileSys
 
 const UIStrings = {
   /**
-   * @description Text in Snippets Quick Open of the Sources panel when opening snippets
+   * @description Text in Snippets Quick Open of the Sources panel when opening snippets.
    */
   noSnippetsFound: 'No snippets found.',
   /**
-   * @description Text for command prefix of run a code snippet
+   * @description Text for command prefix of running a code snippet.
    */
   run: 'Run',
   /**
-   * @description Text for suggestion of run a code snippet
+   * @description Text for suggestion of running a code snippet.
    */
   snippet: 'Snippet',
   /**
-   * @description Text for help title of run code snippet menu
+   * @description Text for help title of running a code snippet.
    */
   runSnippet: 'Run snippet',
 } as const;

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -13,15 +13,15 @@ import dialogStyles from './dialog.css.js';
 
 const UIStrings = {
   /**
-   * @description Text in Add Source Map URLDialog of the Sources panel
+   * @description Text in Add source map URL dialog of the Sources panel.
    */
   sourceMapUrl: 'Source map URL: ',
   /**
-   * @description Text in Add Debug Info URL Dialog of the Sources panel
+   * @description Text in Add debug info URL dialog of the Sources panel.
    */
   debugInfoUrl: 'DWARF symbols URL: ',
   /**
-   * @description Text to add something
+   * @description Text to add something.
    */
   add: 'Add',
 } as const;

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -59,7 +59,8 @@ export class AiCodeCompletionPlugin extends Plugin {
       onSuggestionAccepted: this.#onAiCodeCompletionSuggestionAccepted.bind(this),
       onRequestTriggered: this.#onAiRequestTriggered.bind(this),
       onResponseReceived: this.#onAiResponseReceived.bind(this),
-      panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES,
+      disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
+      disclaimerTextVariant: 'sources',
     };
     this.#aiCodeCompletionProvider =
         TextEditor.AiCodeCompletionProvider.AiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
@@ -105,7 +106,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     this.#aiCodeCompletionDisclaimer = new PanelCommon.AiCodeCompletionDisclaimer();
     this.#aiCodeCompletionDisclaimer.disclaimerTooltipId = DISCLAIMER_TOOLTIP_ID;
     this.#aiCodeCompletionDisclaimer.spinnerTooltipId = SPINNER_TOOLTIP_ID;
-    this.#aiCodeCompletionDisclaimer.panel = AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES;
+    this.#aiCodeCompletionDisclaimer.disclaimerTextVariant = 'sources';
     this.#aiCodeCompletionDisclaimer.show(this.#aiCodeCompletionDisclaimerContainer, undefined, true);
   }
 
@@ -117,7 +118,7 @@ export class AiCodeCompletionPlugin extends Plugin {
         new PanelCommon.AiCodeCompletionSummaryToolbar.AiCodeCompletionSummaryToolbar({
           citationsTooltipId: CITATIONS_TOOLTIP_ID,
           hasTopBorder: true,
-          panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES,
+          disclaimerTextVariant: 'sources',
         });
     this.#aiCodeCompletionCitationsToolbar.show(this.#aiCodeCompletionCitationsToolbarContainer, undefined, true);
   }

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -23,46 +23,46 @@ const {Direction} = TextEditor.TextEditorHistory;
 
 const UIStrings = {
   /**
-   * @description Screen reader label for a select box that chooses the breakpoint type in the Sources panel when editing a breakpoint
+   * @description Screen reader label for a select box that chooses the breakpoint type in the Sources panel when editing a breakpoint.
    */
   breakpointType: 'Breakpoint type',
   /**
-   * @description Text in Breakpoint Edit Dialog of the Sources panel
+   * @description Text in Breakpoint edit dialog of the Sources panel.
    */
   breakpoint: 'Breakpoint',
   /**
-   * @description Tooltip text in Breakpoint Edit Dialog of the Sources panel that shows up when hovering over the close icon
+   * @description Tooltip text in Breakpoint edit dialog of the Sources panel that shows up when hovering over the close icon.
    */
   closeDialog: 'Close edit dialog and save changes',
   /**
-   * @description Text in Breakpoint Edit Dialog of the Sources panel
+   * @description Text in Breakpoint edit dialog of the Sources panel.
    */
   conditionalBreakpoint: 'Conditional breakpoint',
   /**
-   * @description Text in Breakpoint Edit Dialog of the Sources panel
+   * @description Text in Breakpoint edit dialog of the Sources panel.
    */
   logpoint: 'Logpoint',
   /**
-   * @description Text in Breakpoint Edit Dialog of the Sources panel
+   * @description Text in Breakpoint edit dialog of the Sources panel.
    */
   expressionToCheckBeforePausingEg: 'Expression to check before pausing, e.g. x > 5',
   /**
-   * @description Type selector element title in Breakpoint Edit Dialog of the Sources panel
+   * @description Type selector element title in Breakpoint edit dialog of the Sources panel.
    */
   pauseOnlyWhenTheConditionIsTrue: 'Pause only when the condition is true',
   /**
-   * @description Link text in the Breakpoint Edit Dialog of the Sources panel
+   * @description Link text in the Breakpoint edit dialog of the Sources panel.
    */
-  learnMoreOnBreakpointTypes: 'Learn more: Breakpoint Types',
+  learnMoreOnBreakpointTypes: 'Learn more: Breakpoint types',
   /**
-   * @description Text in Breakpoint Edit Dialog of the Sources panel. It is used as
-   *the placeholder for a text input field before the user enters text. Provides the user with
-   *an example on how to use Logpoints. 'Log' is a verb and 'message' is a noun.
-   *See: https://developer.chrome.com/blog/new-in-devtools-73/#logpoints
+   * @description Text in Breakpoint edit dialog of the Sources panel. It is used as
+   * the placeholder for a text input field before the user enters text. Provides the user with
+   * an example on how to use Logpoints. 'Log' is a verb and 'message' is a noun.
+   * See: https://developer.chrome.com/blog/new-in-devtools-73/#logpoints
    */
   logMessageEgXIsX: 'Log message, e.g. `\'x is\', x`',
   /**
-   * @description Type selector element title in Breakpoint Edit Dialog of the Sources panel
+   * @description Type selector element title in Breakpoint edit dialog of the Sources panel.
    */
   logAMessageToConsoleDoNotBreak: 'Log a message to Console, do not break',
 } as const;

package/front_end/panels/sources/BreakpointsView.ts

@@ -31,7 +31,7 @@ const UIStrings = {
    */
   pauseOnUncaughtExceptions: 'Pause on uncaught exceptions',
   /**
-   * @description Label for a checkbox to toggling pausing on caught exceptions in the breakpoint sidebar of the Sources panel. When the checkbox is checked, DevTools will pause if an exception is thrown, but caught (handled) at runtime.
+   * @description Label for a checkbox to toggle pausing on caught exceptions in the breakpoint sidebar of the Sources panel. When the checkbox is checked, DevTools will pause if an exception is thrown, but caught (handled) at runtime.
    */
   pauseOnCaughtExceptions: 'Pause on caught exceptions',
   /**
@@ -52,43 +52,43 @@ const UIStrings = {
    */
   breakpointHit: '{PH1} breakpoint hit',
   /**
-   * @description Tooltip text that shows when hovered over a remove button that appears next to a filename in the breakpoint sidebar of the sources panel. Also used in the context menu for breakpoint groups.
+   * @description Tooltip text that shows when hovered over a remove button that appears next to a filename in the breakpoint sidebar of the Sources panel. Also used in the context menu for breakpoint groups.
    */
   removeAllBreakpointsInFile: 'Remove all breakpoints in file',
   /**
-   * @description Context menu item in the Breakpoints Sidebar Pane of the Sources panel that disables all breakpoints in a file.
+   * @description Context menu item in the breakpoint sidebar of the Sources panel that disables all breakpoints in a file.
    */
   disableAllBreakpointsInFile: 'Disable all breakpoints in file',
   /**
-   * @description Context menu item in the Breakpoints Sidebar Pane of the Sources panel that enables all breakpoints in a file.
+   * @description Context menu item in the breakpoint sidebar of the Sources panel that enables all breakpoints in a file.
    */
   enableAllBreakpointsInFile: 'Enable all breakpoints in file',
   /**
-   * @description Tooltip text that shows when hovered over an edit button that appears next to a breakpoint or conditional breakpoint in the breakpoint sidebar of the sources panel.
+   * @description Tooltip text that shows when hovered over an edit button that appears next to a breakpoint or conditional breakpoint in the breakpoint sidebar of the Sources panel.
    */
   editCondition: 'Edit condition',
   /**
-   * @description Tooltip text that shows when hovered over an edit button that appears next to a logpoint in the breakpoint sidebar of the sources panel.
+   * @description Tooltip text that shows when hovered over an edit button that appears next to a logpoint in the breakpoint sidebar of the Sources panel.
    */
   editLogpoint: 'Edit logpoint',
   /**
-   * @description Context menu item in the Breakpoints Sidebar Pane of the Sources panel that disables all breakpoints.
+   * @description Context menu item in the breakpoint sidebar of the Sources panel that disables all breakpoints.
    */
   disableAllBreakpoints: 'Disable all breakpoints',
   /**
-   * @description Context menu item in the Breakpoints Sidebar Pane of the Sources panel that enables all breakpoints.
+   * @description Context menu item in the breakpoint sidebar of the Sources panel that enables all breakpoints.
    */
   enableAllBreakpoints: 'Enable all breakpoints',
   /**
-   * @description Tooltip text that shows when hovered over a remove button that appears next to a breakpoint in the breakpoint sidebar of the sources panel. Also used in the context menu for breakpoint items.
+   * @description Tooltip text that shows when hovered over a remove button that appears next to a breakpoint in the breakpoint sidebar of the Sources panel. Also used in the context menu for breakpoint items.
    */
   removeBreakpoint: 'Remove breakpoint',
   /**
-   * @description Text to remove all breakpoints
+   * @description Text to remove all breakpoints.
    */
   removeAllBreakpoints: 'Remove all breakpoints',
   /**
-   * @description Text in Breakpoints Sidebar Pane of the Sources panel
+   * @description Text in the breakpoint sidebar of the Sources panel.
    */
   removeOtherBreakpoints: 'Remove other breakpoints',
   /**
@@ -96,12 +96,12 @@ const UIStrings = {
    */
   revealLocation: 'Reveal location',
   /**
-   * @description Tooltip text that shows when hovered over a piece of code of a breakpoint in the breakpoint sidebar of the sources panel. It shows the condition, on which the breakpoint will stop.
+   * @description Tooltip text that shows when hovered over a piece of code of a breakpoint in the breakpoint sidebar of the Sources panel. It shows the condition, on which the breakpoint will stop.
    * @example {x < 3} PH1
    */
   conditionCode: 'Condition: {PH1}',
   /**
-   * @description Tooltip text that shows when hovered over a piece of code of a breakpoint in the breakpoint sidebar of the sources panel. It shows what is going to be printed in the console, if execution hits this breakpoint.
+   * @description Tooltip text that shows when hovered over a piece of code of a breakpoint in the breakpoint sidebar of the Sources panel. It shows what is going to be printed in the console, if execution hits this breakpoint.
    * @example {'hello'} PH1
    */
   logpointCode: 'Logpoint: {PH1}',
@@ -174,7 +174,7 @@ export class BreakpointsSidebarController implements UI.ContextFlavorListener.Co
     this.#breakpointsActiveSetting.addChangeListener(this.update, this);
     this.#pauseOnUncaughtExceptionSetting = settings.moduleSetting('pause-on-uncaught-exception');
     this.#pauseOnUncaughtExceptionSetting.addChangeListener(this.update, this);
-    this.#pauseOnCaughtExceptionSetting = settings.moduleSetting('pause-on-caught-exception');
+    this.#pauseOnCaughtExceptionSetting = settings.resolve(SDK.SDKSettings.pauseOnCaughtExceptionSettingDescriptor);
     this.#pauseOnCaughtExceptionSetting.addChangeListener(this.update, this);
   }
 

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -48,11 +48,11 @@ import {QuickSourceView, SourcesPanel} from './SourcesPanel.js';
 
 const UIStrings = {
   /**
-   * @description Text in Call Stack Sidebar Pane of the Sources panel
+   * @description Text in the call stack sidebar of the Sources panel
    */
   callStack: 'Call Stack',
   /**
-   * @description Not paused message element text content in Call Stack Sidebar Pane of the Sources panel
+   * @description Not paused message element text content in the call stack sidebar of the Sources panel
    */
   notPaused: 'Not paused',
   /**
@@ -60,7 +60,7 @@ const UIStrings = {
    */
   onIgnoreList: 'on ignore list',
   /**
-   * @description Show all link text content in Call Stack Sidebar Pane of the Sources panel
+   * @description Show all link text content in the call stack sidebar of the Sources panel
    */
   showIgnorelistedFrames: 'Show ignore-listed frames',
   /**
@@ -68,11 +68,11 @@ const UIStrings = {
    */
   showMore: 'Show more',
   /**
-   * @description A context menu item in the Call Stack Sidebar Pane of the Sources panel
+   * @description A context menu item in the call stack sidebar of the Sources panel
    */
   copyStackTrace: 'Copy stack trace',
   /**
-   * @description Text in Call Stack Sidebar Pane of the Sources panel when some call frames have warnings
+   * @description Text in the call stack sidebar of the Sources panel when some call frames have warnings
    */
   callFrameWarnings: 'Some call frames have warnings',
   /**
@@ -81,7 +81,7 @@ const UIStrings = {
    */
   debugFileNotFound: 'Failed to load debug file "{PH1}".',
   /**
-   * @description A context menu item in the Call Stack Sidebar Pane. "Restart" is a verb and
+   * @description A context menu item in the call stack sidebar pane. "Restart" is a verb and
    * "frame" is a noun. "Frame" refers to an individual item in the call stack, i.e. a call frame.
    * The user opens this context menu by selecting a specific call frame in the call stack sidebar pane.
    */

package/front_end/panels/sources/CategorizedBreakpointL10n.ts

@@ -39,73 +39,73 @@ const UIStrings = {
    */
   beforeSellerWorkletReportingStart: 'Seller Reporting Phase Start',
   /**
-   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints panel of the JavaScript Debugger in the Sources panel.
    * @example {setTimeout} PH1
    */
   setTimeoutOrIntervalFired: '{PH1} fired',
   /**
-   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints panel of the JavaScript Debugger in the Sources panel.
    */
   scriptFirstStatement: 'Script First Statement',
   /**
-   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints panel of the JavaScript Debugger in the Sources panel.
    */
   scriptBlockedByContentSecurity: 'Script Blocked by Content Security Policy',
   /**
-   * @description Text for the request animation frame event
+   * @description Text for the request animation frame event.
    */
   requestAnimationFrame: 'Request Animation Frame',
   /**
-   * @description Text to cancel the animation frame
+   * @description Text to cancel the animation frame.
    */
   cancelAnimationFrame: 'Cancel Animation Frame',
   /**
-   * @description Text for the event that an animation frame is fired
+   * @description Text for the event that an animation frame is fired.
    */
   animationFrameFired: 'Animation Frame Fired',
   /**
-   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints panel of the JavaScript Debugger in the Sources panel.
    */
   webglErrorFired: 'WebGL Error Fired',
   /**
-   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints panel of the JavaScript Debugger in the Sources panel.
    */
   webglWarningFired: 'WebGL Warning Fired',
   /**
-   * @description Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel
+   * @description Text in the Event Listener Breakpoints panel of the JavaScript Debugger in the Sources panel.
    */
   setInnerhtml: 'Set `innerHTML`',
   /**
-   * @description Name of a breakpoint type in the Sources Panel.
+   * @description Name of a breakpoint type in the Sources panel.
    */
   createCanvasContext: 'Create canvas context',
   /**
-   * @description Name of a breakpoint type in the Sources Panel.
+   * @description Name of a breakpoint type in the Sources panel.
    */
   createAudiocontext: 'Create `AudioContext`',
   /**
-   * @description Name of a breakpoint type in the Sources Panel. Close is a verb.
+   * @description Name of a breakpoint type in the Sources panel. Close is a verb.
    */
   closeAudiocontext: 'Close `AudioContext`',
   /**
-   * @description Name of a breakpoint type in the Sources Panel. Resume is a verb.
+   * @description Name of a breakpoint type in the Sources panel. Resume is a verb.
    */
   resumeAudiocontext: 'Resume `AudioContext`',
   /**
-   * @description Name of a breakpoint type in the Sources Panel.
+   * @description Name of a breakpoint type in the Sources panel.
    */
   suspendAudiocontext: 'Suspend `AudioContext`',
   /**
    * @description Noun. Title for a checkbox that turns on breakpoints on Trusted Type sink violations.
    * "Trusted Types" is a Web API. A "Sink" (Noun, singular) is a special function, akin to a data sink, that expects
    * to receive data in a specific format. Should the data be in the wrong format, or something else
-   * go wrong, its called a "sink violation".
+   * go wrong, it's called a "sink violation".
    */
-  sinkViolations: 'Sink Violations',
+  sinkViolations: 'Sink violations',
   /**
-   * @description Title for a checkbox that turns on breakpoints on Trusted Type policy violations
+   * @description Title for a checkbox that turns on breakpoints on Trusted Type policy violations.
    */
-  policyViolations: 'Policy Violations',
+  policyViolations: 'Policy violations',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CategorizedBreakpointL10n.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);