chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/sources/scopeChainSidebarPane.css

@@ -36,6 +36,6 @@
 }
 
 .scope-chain-sidebar-pane-section {
-  padding: 2px 4px;
+  padding: var(--sys-size-2) var(--sys-size-3);
   flex: none;
 }

package/front_end/panels/sources/sourcesNavigator.css

@@ -5,7 +5,7 @@
  */
 
 .border-container {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   flex-shrink: 0;
 }
 

package/front_end/panels/sources/sourcesPanel.css

@@ -37,7 +37,7 @@
   top: 0;
   width: 100%;
   background-color: var(--app-color-toolbar-background);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
   z-index: 1;
 }
@@ -59,7 +59,7 @@
 .scripts-debug-toolbar-drawer > devtools-checkbox {
   display: none;
   padding-left: 3px;
-  height: 28px;
+  height: var(--sys-size-12);
 }
 
 .scripts-debug-toolbar-drawer.expanded > devtools-checkbox {

package/front_end/panels/sources/sourcesView.css

@@ -17,7 +17,7 @@
   flex: 0 0 auto;
   min-height: 27px;
   background-color: var(--sys-color-cdt-base-container);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: hidden;
   z-index: 0;
   align-items: flex-end;

package/front_end/panels/sources/threadsSidebarPane.css

@@ -5,7 +5,7 @@
  */
 
 .thread-item {
-  padding: 3px 8px 3px 20px;
+  padding: 3px var(--sys-size-5) 3px var(--sys-size-9);
   position: relative;
   min-height: 18px;
   line-height: 15px;
@@ -18,7 +18,7 @@
 }
 
 .thread-item + .thread-item {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .thread-item:hover {
@@ -45,9 +45,9 @@
 .selected-thread-icon {
   position: absolute;
   top: 3px;
-  left: 4px;
-  width: 16px;
-  height: 16px;
+  left: var(--sys-size-3);
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -38,7 +38,7 @@
 
 .watch-expression-title {
   white-space: nowrap;
-  line-height: 20px;
+  line-height: var(--sys-typescale-body3-line-height);
   display: flex;
 }
 
@@ -53,13 +53,13 @@ li.watch-expression-tree-item > span.tree-element-title {
 }
 
 .watch-expression-object-header .watch-expression-title {
-  margin-left: 1px;
+  margin-left: var(--sys-size-1);
 }
 
 .watch-expression {
   position: relative;
   flex: auto;
-  min-height: 20px;
+  min-height: var(--sys-size-9);
   display: block;
   width: 100%;
 }
@@ -86,7 +86,7 @@ li.watch-expression-tree-item > span.tree-element-title {
   white-space: nowrap;
   display: inline;
   overflow: hidden;
-  padding-left: 4px;
+  padding-left: var(--sys-size-3);
   text-overflow: ellipsis;
   flex-shrink: 1;
 }
@@ -95,27 +95,27 @@ li.watch-expression-tree-item > span.tree-element-title {
   text-overflow: clip;
   overflow: hidden;
   white-space: nowrap;
-  padding-left: 4px;
+  padding-left: var(--sys-size-3);
   min-height: 18px;
   line-height: 18px;
   user-select: text;
 }
 
 .watch-expression-text-prompt-proxy {
-  margin: 2px 12px 2px -4px;
+  margin: var(--sys-size-2) var(--sys-size-6) var(--sys-size-2) calc(-1 * var(--sys-size-3));
   padding-bottom: 3px;
 }
 
 .watch-expression-header {
   flex: auto;
-  margin-left: -16px;
+  margin-left: calc(-1 * var(--sys-size-8));
   padding-left: 15px;
 }
 
 li.watch-expression-tree-item {
   container-type: inline-size;
   container-name: watch-expression;
-  padding-left: 4px;
+  padding-left: var(--sys-size-3);
 
   --watch-expression-delete-button-background-color: var(--sys-color-cdt-base);
 }

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -86,7 +86,8 @@ export class TimelineDetailsPane extends
   private lazyLayersView?: TimelineLayersView|null;
   private preferredTabId?: string;
   private selection?: TimelineSelection|null;
-  private updateContentsScheduled: boolean;
+  #debouncedUpdateContentsFromWindow: (() => void)&
+      {cancel: () => void} = Common.Debouncer.debounce(() => this.updateContentsFromWindow(), 100);
   private lazySelectorStatsView: TimelineSelectorStatsView|null;
   #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
@@ -147,7 +148,6 @@ export class TimelineDetailsPane extends
     this.setPreferredTab(Tab.Details);
 
     this.rangeDetailViews = new Map();
-    this.updateContentsScheduled = false;
 
     const bottomUpView = new BottomUpTimelineTreeView();
     this.appendTab(Tab.BottomUp, i18nString(UIStrings.bottomup), bottomUpView);
@@ -384,13 +384,11 @@ export class TimelineDetailsPane extends
   }
 
   /**
-   * This forces a recalculation and rerendering of the timings
-   * breakdown of a track.
-   * User actions like zooming or scrolling can trigger many updates in
-   * short time windows, so we debounce the calls in those cases. Single
-   * sporadic calls (like selecting a new track) don't need to be
-   * debounced. The forceImmediateUpdate param configures the debouncing
-   * behaviour.
+   * Recalculates and renders the timing breakdown for the active details tab.
+   * Panning or zooming triggers rapid bounds updates, so we debounce this call
+   * using a trailing debounce. This ensures expensive tree recalculations in
+   * detailed views (e.g. Call Tree, Bottom-Up) only run once after user
+   * interaction finishes, preventing main-thread CPU spikes mid-gesture.
    */
   private scheduleUpdateContentsFromWindow(forceImmediateUpdate = false): void {
     if (!this.#parsedTrace) {
@@ -402,17 +400,7 @@ export class TimelineDetailsPane extends
       return;
     }
 
-    // Debounce this update as it's not critical.
-    if (!this.updateContentsScheduled) {
-      this.updateContentsScheduled = true;
-      setTimeout(() => {
-        if (!this.updateContentsScheduled) {
-          return;
-        }
-        this.updateContentsScheduled = false;
-        this.updateContentsFromWindow();
-      }, 100);
-    }
+    this.#debouncedUpdateContentsFromWindow();
   }
 
   private updateContentsFromWindow(): void {
@@ -468,7 +456,7 @@ export class TimelineDetailsPane extends
 
     if (selectionIsEvent(selection)) {
       // Cancel any pending debounced range stats update
-      this.updateContentsScheduled = false;
+      this.#debouncedUpdateContentsFromWindow.cancel();
 
       if (Trace.Types.Events.isLegacyTimelineFrame(selection.event)) {
         this.#addLayerTreeForSelectedFrame(selection.event);

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -139,6 +139,8 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   #eventToRelatedInsightsMap: TimelineComponents.RelatedInsightChips.EventToRelatedInsightsMap|null = null;
   #selectedGroupName: string|null = null;
   #onTraceBoundsChangeBound = this.#onTraceBoundsChange.bind(this);
+  #debouncedUpdateSearchResults: () => void = Common.Debouncer.debounce(() => this.updateSearchResults(false, false),
+                                                                        100);
   #gameKeyMatches = 0;
   #gameTimeout = setTimeout(() => ({}), 0);
 
@@ -1146,11 +1148,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.mainFlameChart.setWindowTimes(visibleWindow.min, visibleWindow.max, shouldAnimate);
     this.networkDataProvider.setWindowTimes(visibleWindow.min, visibleWindow.max);
     this.networkFlameChart.setWindowTimes(visibleWindow.min, visibleWindow.max, shouldAnimate);
-    // Updating search results can be very expensive. Debounce to avoid over-calling it.
-    const debouncedUpdate = Common.Debouncer.debounce(() => {
-      this.updateSearchResults(false, false);
-    }, 100);
-    debouncedUpdate();
+    this.#debouncedUpdateSearchResults();
   }
 
   getLinkSelectionAnnotation(): Trace.Types.File.EntriesLinkAnnotation|null {

package/front_end/panels/timeline/TimelineMiniMap.ts

@@ -108,9 +108,9 @@ export class TimelineMiniMap extends
       return;
     }
 
-    const left = (event.data.startTime > 0) ? event.data.startTime : traceBoundsState.milli.entireTraceBounds.min;
+    const left = (event.data.startTime > 0) ? event.data.startTime : traceBoundsState.milli.minimapTraceBounds.min;
     const right =
-        Number.isFinite(event.data.endTime) ? event.data.endTime : traceBoundsState.milli.entireTraceBounds.max;
+        Number.isFinite(event.data.endTime) ? event.data.endTime : traceBoundsState.milli.minimapTraceBounds.max;
 
     TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
         Trace.Helpers.Timing.traceWindowFromMilliSeconds(
@@ -118,7 +118,7 @@ export class TimelineMiniMap extends
             Trace.Types.Timing.Milli(right),
             ),
         {
-          shouldAnimate: true,
+          shouldAnimate: false,
         },
     );
   }

package/front_end/panels/timeline/components/BreadcrumbsUI.ts

@@ -17,17 +17,13 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   * @description A context menu item in the Minimap Breadcrumb context menu.
-   * This context menu option activates the breadcrumb that the context menu was opened on.
+   * @description Context menu item in the Performance panel to activate the selected breadcrumb.
    */
   activateBreadcrumb: 'Activate breadcrumb',
   /**
-   * @description A context menu item in the Minimap Breadcrumb context menu.
-   * This context menu option removed all the child breadcrumbs and activates
-   * the breadcrumb that the context menu was opened on.
+   * @description Context menu item in the Performance panel to remove all child breadcrumbs and activate the selected breadcrumb.
    */
   removeChildBreadcrumbs: 'Remove child breadcrumbs',
-
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/BreadcrumbsUI.ts', UIStrings);

package/front_end/panels/timeline/components/CWVMetrics.ts

@@ -20,44 +20,43 @@ const {html} = Lit.StaticHtml;
 
 const UIStrings = {
   /**
-   * @description title used for a metric value to tell the user about its score classification
+   * @description Tooltip and aria label for a metric value indicating its score classification in the Performance panel.
    * @example {INP} PH1
    * @example {1.2s} PH2
    * @example {poor} PH3
    */
   metricScore: '{PH1}: {PH2} {PH3} score',
   /**
-   * @description title used for a metric value to tell the user that the data is unavailable
+   * @description Tooltip and aria label for a metric value indicating that the data is unavailable in the Performance panel.
    * @example {INP} PH1
    */
   metricScoreUnavailable: '{PH1}: unavailable',
   /**
-   * @description Label denoting that metrics were observed in the field, from real use data (CrUX). Also denotes if from URL or Origin dataset.
+   * @description Label denoting that metrics were observed in the field from real user data (CrUX), and whether the data is from the URL or origin dataset in the Performance panel.
    * @example {URL} PH1
    */
   fieldScoreLabel: 'Field ({PH1})',
   /**
-   * @description Label for an option that selects the page's specific URL as opposed to it's entire origin/domain.
+   * @description Label for an option that selects the specific URL in the Performance panel.
    */
   urlOption: 'URL',
   /**
-   * @description Label for an option that selects the page's entire origin/domain as opposed to it's specific URL.
+   * @description Label for an option that selects the entire origin in the Performance panel.
    */
   originOption: 'Origin',
   /**
-   * @description Title for button that closes a warning popup.
+   * @description Tooltip text for the dismiss button that closes a warning popup in the Performance panel.
    */
   dismissTitle: 'Dismiss',
   /**
-   * @description Title shown in a warning dialog when field metrics (collected from real users) is worse than the locally observed metrics.
+   * @description Title shown in a warning dialog when field metrics are worse than locally observed metrics in the Performance panel.
    */
   fieldMismatchTitle: 'Field & local metrics mismatch',
   /**
-   * @description Text shown in a warning dialog when field metrics (collected from real users) is worse than the locally observed metrics.
-   * Asks user to use features such as throttling and device emulation.
+   * @description Warning notice shown when field metrics are worse than locally observed metrics in the Performance panel.
    */
   fieldMismatchNotice:
-      'There are many reasons why local and field metrics [may not match](https://web.dev/articles/lab-and-field-data-differences). ' +
+      'Local and field metrics [may not match](https://web.dev/articles/lab-and-field-data-differences) for several reasons. ' +
       'Adjust [throttling settings and device emulation](https://developer.chrome.com/docs/devtools/device-mode) to analyze traces more similar to the average user’s environment.',
 } as const;
 

package/front_end/panels/timeline/components/DetailsView.ts

@@ -18,53 +18,49 @@ import {Link} from '../../../ui/kit/kit.js';
 
 const UIStrings = {
   /**
-   * @description Text in the Performance panel for a forced style and layout calculation of elements
-   * in a page. See https://developer.mozilla.org/en-US/docs/Glossary/Reflow
+   * @description Text in the Performance panel for a forced style and layout calculation of elements in a page.
    */
   forcedReflow: 'Forced reflow',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Warning message indicating that an event is likely a performance bottleneck in the Performance panel.
    * @example {Forced reflow} PH1
    */
   sIsALikelyPerformanceBottleneck: '{PH1} is a likely performance bottleneck.',
   /**
-   * @description Text in the Performance panel for a function called during a time the browser was
-   * idle (inactive), which to longer to execute than a predefined deadline.
+   * @description Warning message in the Performance panel for an idle callback function that took longer to execute than its predefined deadline.
    * @example {10ms} PH1
    */
   idleCallbackExecutionExtended: 'Idle callback execution extended beyond deadline by {PH1}',
   /**
-   * @description Text in the Performance panel which describes how long a task took.
-   * @example {task} PH1
+   * @description Warning message in the Performance panel describing how long a task took.
+   * @example {Task} PH1
    * @example {10ms} PH2
    */
   sTookS: '{PH1} took {PH2}.',
   /**
-   * @description Text in the Performance panel for a task that took long. See
-   * https://developer.mozilla.org/en-US/docs/Glossary/Long_task
+   * @description Label in the Performance panel for a task that took a long time.
    */
   longTask: 'Long task',
   /**
-   * @description Text used to highlight a long interaction and link to web.dev/inp
+   * @description Label in the Performance panel for an interaction that took a long time.
    */
   longInteractionINP: 'Long interaction',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel when the
-   *             user clicks on a long interaction.
+   * @description Warning message in the Performance panel indicating that an interaction caused poor responsiveness.
    * @example {Long interaction} PH1
    */
-  sIsLikelyPoorPageResponsiveness: '{PH1} is indicating poor page responsiveness.',
+  sIsLikelyPoorPageResponsiveness: '{PH1} indicates poor page responsiveness.',
   /**
-   * @description Text in Timeline UIUtils of the Performance panel
+   * @description Label for the WebSocket sub-protocol in the event details view of the Performance panel.
    */
   websocketProtocol: 'WebSocket protocol',
   /**
-   * @description Details text indicating how many bytes were received in a WebSocket message
+   * @description Details text indicating how many bytes were transferred in a WebSocket message in the Performance panel.
    * @example {1024} PH1
    */
   webSocketBytes: '{PH1} byte(s)',
   /**
-   * @description Details text indicating how many bytes were sent in a WebSocket message
+   * @description Details label indicating the data length of a WebSocket message in the Performance panel.
    */
   webSocketDataLength: 'Data length',
 } as const;

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -22,49 +22,49 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Text title for the Save performance trace dialog.
+   * @description Dialog title for saving a performance trace in the Performance panel.
    */
-  exportTraceOptionsDialogTitle: 'Save performance trace ',
+  exportTraceOptionsDialogTitle: 'Save performance trace',
   /**
-   * @description Tooltip for the Save performance trace dialog.
+   * @description Tooltip text for the toolbar button that opens the save trace dialog in the Performance panel.
    */
   showExportTraceOptionsDialogTitle: 'Save trace…',
   /**
-   * @description Text for the include script content option.
+   * @description Checkbox label to include resource content when saving a trace in the Performance panel.
    */
   includeResourceContent: 'Include resource content',
   /**
-   * @description Text for the include script source maps option.
+   * @description Checkbox label to include script source maps when saving a trace in the Performance panel.
    */
   includeSourcemap: 'Include script source maps',
   /**
-   * @description Text for the include annotations option.
+   * @description Checkbox label to include annotations when saving a trace in the Performance panel.
    */
   includeAnnotations: 'Include annotations',
   /**
-   * @description Text for the compression option.
+   * @description Checkbox label to compress the saved trace with gzip in the Performance panel.
    */
   shouldCompress: 'Compress with gzip',
   /**
-   * @description Text for the explanation link
+   * @description Link text to documentation explaining trace export options in the Performance panel.
    */
   explanation: 'Explanation',
   /**
-   * @description Text for the save trace button
+   * @description Button label to save the trace in the Performance panel.
    */
   saveButtonTitle: 'Save',
   /**
-   * @description Text shown in the information pop-up next to the "Include resource content" option.
+   * @description Tooltip text explaining the privacy implications of including resource content when saving a trace in the Performance panel.
    */
   resourceContentPrivacyInfo: 'Includes the full content of all loaded HTML, CSS, and scripts (except extensions).',
   /**
-   * @description Text shown in the information pop-up next to the "Include script sourcemaps" option.
+   * @description Tooltip text explaining the privacy implications of including script source maps when saving a trace in the Performance panel.
    */
   sourceMapsContentPrivacyInfo: 'Includes available source maps, which may expose authored code.',
   /**
-   * @description Text used as the start of the accessible label for the information button which shows additional context when the user focuses / hovers.
+   * @description Accessible label prefix for the information button in the Performance panel.
    */
-  moreInfoLabel: 'Additional information:',
+  moreInfoLabel: 'More information:',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/ExportTraceOptions.ts', UIStrings);

package/front_end/panels/timeline/components/FieldSettingsDialog.ts

@@ -21,74 +21,74 @@ import {OriginMap} from './OriginMap.js';
 
 const UIStrings = {
   /**
-   * @description Text label for a button that opens a dialog to set up field metrics.
+   * @description Button label that opens a dialog to set up field metrics in the Performance panel.
    */
   setUp: 'Set up',
   /**
-   * @description Text label for a button that opens a dialog to configure field metrics.
+   * @description Button label that opens a dialog to configure field metrics in the Performance panel.
    */
   configure: 'Configure',
   /**
-   * @description Text label for a button that enables the collection of field metrics.
+   * @description Button label that enables the collection of field metrics in the Performance panel.
    */
   ok: 'Ok',
   /**
-   * @description Text label for a button that opts out of the collection of field metrics.
+   * @description Button label that opts out of the collection of field metrics in the Performance panel.
    */
   optOut: 'Opt out',
   /**
-   * @description Text label for a button that cancels the setup of field metrics collection.
+   * @description Button label that cancels the setup of field metrics collection in the Performance panel.
    */
   cancel: 'Cancel',
   /**
-   * @description Text label for a checkbox that controls if a manual URL override is enabled for field metrics.
+   * @description Checkbox label that controls if a manual URL override is enabled for field metrics in the Performance panel.
    */
   onlyFetchFieldData: 'Always show field metrics for the below URL',
   /**
-   * @description Text label for a text box that that contains the manual override URL for fetching field metrics.
+   * @description Label for a text input that contains the manual override URL for fetching field metrics in the Performance panel.
    */
   url: 'URL',
   /**
-   * @description Warning message explaining that the Chrome UX Report could not find enough real world speed data for the page. "Chrome UX Report" is a product name and should not be translated.
+   * @description Warning message explaining that the Chrome UX Report could not find enough real-world speed data for the page in the Performance panel.
    */
-  doesNotHaveSufficientData: 'The Chrome UX Report does not have sufficient real-world speed data for this page.',
+  doesNotHaveSufficientData: 'The Chrome UX Report doesn’t have enough real-world speed data for this page.',
   /**
-   * @description Title for a dialog that contains information and settings related to fetching field metrics.
+   * @description Title for a dialog that contains settings related to fetching field metrics in the Performance panel.
    */
   configureFieldData: 'Configure field metrics fetching',
   /**
-   * @description Paragraph explaining where field metrics comes from and and how it can be used. PH1 will be a link with text "Chrome UX Report" that is untranslated because it is a product name.
+   * @description Explanation of where field metrics come from and how they can be used in the Performance panel.
    * @example {Chrome UX Report} PH1
    */
   fetchAggregated:
       'Fetch aggregated field metrics from the {PH1} to help you contextualize local measurements with what real users experience on the site.',
   /**
-   * @description Heading for a section that explains what user data needs to be collected to fetch field metrics.
+   * @description Heading for a section that explains what user data needs to be collected to fetch field metrics in the Performance panel.
    */
   privacyDisclosure: 'Privacy disclosure',
   /**
-   * @description Paragraph explaining what data needs to be sent to Google to fetch field metrics, and when that data will be sent.
+   * @description Explanation of what data is sent to Google to fetch field metrics in the Performance panel.
    */
   whenPerformanceIsShown:
-      'When DevTools is open, the URLs you visit will be sent to Google to query field metrics. These requests are not tied to your Google account.',
+      'When DevTools is open, the URLs you visit will be sent to Google to query field metrics. These requests aren’t tied to your Google account.',
   /**
-   * @description Header for a section containing advanced settings
+   * @description Header for a section containing advanced settings in the Performance panel.
    */
   advanced: 'Advanced',
   /**
-   * @description Paragraph explaining that the user can associate a development origin with a production origin for the purposes of fetching real user data.
+   * @description Explanation of how associating a development origin with a production origin works for fetching real user data in the Performance panel.
    */
   mapDevelopmentOrigins:
       'Set a development origin to automatically get relevant field metrics for its production origin.',
   /**
-   * @description Text label for a button that adds a new editable row to a data table
+   * @description Button label to add a new editable row to the origin mapping table in the Performance panel.
    */
   new: 'New',
   /**
-   * @description Warning message explaining that an input origin is not a valid origin or URL.
+   * @description Warning message explaining that an entered origin is not a valid origin or URL in the Performance panel.
    * @example {http//malformed.com} PH1
    */
-  invalidOrigin: '"{PH1}" is not a valid origin or URL.',
+  invalidOrigin: '"{PH1}" isn’t a valid origin or URL.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/FieldSettingsDialog.ts', UIStrings);

package/front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -20,35 +20,33 @@ const {live} = Directives;
 
 const UIStrings = {
   /**
-   * @description Text title for the button to open the ignore list setting.
+   * @description Tooltip text for the button to open the ignore list settings dialog in the Performance panel.
    */
   showIgnoreListSettingDialog: 'Show ignore list setting dialog',
   /**
-   * @description Text title for ignore list setting.
+   * @description Header title for the ignore list settings dialog in the Performance panel.
    */
   ignoreList: 'Ignore list',
   /**
-   * @description Text description for ignore list setting.
+   * @description Description text in the ignore list settings dialog of the Performance panel.
    */
   ignoreListDescription: 'Add regular expression rules to remove matching scripts from the flame chart.',
   /**
-   * @description Pattern title in Framework Ignore List Settings Tab of the Settings
+   * @description Label for a pattern rule in the ignore list settings dialog of the Performance panel.
    * @example {ad.*?} regex
    */
   ignoreScriptsWhoseNamesMatchS: 'Ignore scripts whose names match \'\'{regex}\'\'',
   /**
-   * @description Label for the button to remove an regex
+   * @description Accessible label for the button to remove a regular expression rule in the ignore list settings dialog of the Performance panel.
    * @example {ad.*?} regex
    */
   removeRegex: 'Remove the regex: \'\'{regex}\'\'',
   /**
-   * @description Aria accessible name in Ignore List Settings Dialog in Performance panel. It labels the input
-   * field used to add new or edit existing regular expressions that match file names to ignore in the debugger.
+   * @description Accessible label for the text input to add a regular expression rule in the ignore list settings dialog of the Performance panel.
    */
   addNewRegex: 'Add a regular expression rule for the script’s URL',
   /**
-   * @description Aria accessible name in Ignore List Settings Dialog in Performance panel. It labels the checkbox of
-   * the input field used to enable the new regular expressions that match file names to ignore in the debugger.
+   * @description Accessible label for the checkbox to enable a new regular expression rule in the ignore list settings dialog of the Performance panel.
    */
   ignoreScriptsWhoseNamesMatchNewRegex: 'Ignore scripts whose names match the new regex',
 } as const;

package/front_end/panels/timeline/components/InteractionBreakdown.ts

@@ -13,15 +13,15 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Text shown next to the interaction event's input delay time in the detail view.
+   * @description Label for the input delay phase of an interaction event in the event details view of the Performance panel.
    */
   inputDelay: 'Input delay',
   /**
-   * @description Text shown next to the interaction event's thread processing duration in the detail view.
+   * @description Label for the processing duration phase of an interaction event in the event details view of the Performance panel.
    */
   processingDuration: 'Processing duration',
   /**
-   * @description Text shown next to the interaction event's presentation delay time in the detail view.
+   * @description Label for the presentation delay phase of an interaction event in the event details view of the Performance panel.
    */
   presentationDelay: 'Presentation delay',
 } as const;