chrome-devtools-frontend 1.0.1682249 → 1.0.1684555

package/front_end/panels/network/RequestPayloadView.ts

@@ -203,7 +203,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     });
     objectTree.expanded = true;
     return html`
-      <li role=treeitem class="source-code object-properties-section-root-element object-properties-section" open>
+      <li role=treeitem class="source-code object-properties-section-root-element object-properties-section" toggle-on-click open>
         ${object.description}
         ${object.hasChildren ? ObjectUI.ObjectPropertiesSection.renderObjectTree(objectTree) : nothing}
       </li>
@@ -241,13 +241,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
   // clang-format off
   render(html`<style>${requestPayloadViewStyles}</style>
-   <devtools-tree dense class=request-payload-tree .template=${html`
+   <devtools-tree dense show-selection-on-keyboard-focus class=request-payload-tree .template=${html`
      <style>${objectValueStyles}</style>
      <style>${objectPropertiesSectionStyles}</style>
      <style>${requestPayloadTreeStyles}</style>
      <ul role=tree>
       <li
           role=treeitem
+          toggle-on-click
           ?hidden=${!input.queryParameters}
           jslog=${VisualLogging.section().context('query-string')}
           @contextmenu=${onContextMenu(
@@ -280,6 +281,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       </li>
       <li
           role=treeitem
+          toggle-on-click
           ?hidden=${!input.formData || !input.formParameters}
           jslog=${VisualLogging.section().context('form-data')}
           @contextmenu=${onContextMenu(
@@ -311,6 +313,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       </li>
       <li
           role=treeitem
+          toggle-on-click
           ?hidden=${!input.formData || Boolean(input.formParameters) || Boolean(input.binaryPayloadContentData)}
           jslog=${VisualLogging.section().context('request-payload')}
           @contextmenu=${onContextMenu(

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -274,38 +274,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  // Used in web tests
-  elementsByOrigin(): Map<string, {
-    select: (omitFocus?: boolean, selectedByUser?: boolean) => void,
-    showElement: () => void,
-    origin: () => string,
-    securityState: () => Protocol.Security.SecurityState | undefined,
-  }> {
-    const map = new Map<string, {
-      select: (omitFocus?: boolean, selectedByUser?: boolean) => void,
-      showElement: () => void,
-      origin: () => string,
-      securityState: () => Protocol.Security.SecurityState | undefined,
-    }>();
-    for (const [origin, state] of this.#origins.entries()) {
-      const element = {
-        select: () => {
-          this.#selectedElementId = origin;
-          this.#securitySidebarLastItemSetting.set(origin);
-          this.requestUpdate();
-          this.#onShowOrigin?.(origin);
-        },
-        showElement: () => {
-          this.#onShowOrigin?.(origin);
-        },
-        origin: () => origin,
-        securityState: () => state,
-      };
-      map.set(origin, element);
-    }
-    return map;
-  }
-
   set selectedOrigin(origin: Platform.DevToolsPath.UrlString|null) {
     this.#selectedElementId = origin ?? 'overview';
     this.#securitySidebarLastItemSetting.set(this.#selectedElementId);

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -11,6 +11,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {createIcon, type Icon, Link} from '../../ui/kit/kit.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Settings from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import keybindsSettingsTabStyles from './keybindsSettingsTab.css.js';
@@ -121,8 +122,10 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
     settingsContent.classList.add('settings-card-container');
 
-    const keybindsSetSetting = Common.Settings.Settings.instance().moduleSetting('active-keybind-set');
-    const userShortcutsSetting = Common.Settings.Settings.instance().moduleSetting('user-shortcuts');
+    const keybindsSetSetting =
+        Common.Settings.Settings.instance().resolve(Settings.MainSettings.activeKeybindSetSettingDescriptor);
+    const userShortcutsSetting =
+        Common.Settings.Settings.instance().resolve(Settings.MainSettings.userShortcutsSettingDescriptor);
     keybindsSetSetting.addChangeListener(this.update, this);
     const keybindsSetSelect = SettingsUI.SettingsUI.createControlForSetting(
         keybindsSetSetting, i18nString(UIStrings.matchShortcutsFromPreset));

package/front_end/panels/sources/SourcesPanel.ts

@@ -48,6 +48,7 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Settings from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Snippets from '../snippets/snippets.js';
 
@@ -281,7 +282,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     this.callstackPane = CallStackSidebarPane.instance();
 
     Common.Settings.Settings.instance()
-        .moduleSetting('sidebar-position')
+        .resolve(Settings.MainSettings.sidebarPositionSettingDescriptor)
         .addChangeListener(this.updateSidebarPosition.bind(this));
     this.updateSidebarPosition();
 
@@ -414,7 +415,8 @@ export class SourcesPanel extends UI.Panel.Panel implements
   }
 
   override onResize(): void {
-    if (Common.Settings.Settings.instance().moduleSetting('sidebar-position').get() === 'auto') {
+    if (Common.Settings.Settings.instance().resolve(Settings.MainSettings.sidebarPositionSettingDescriptor).get() ===
+        'auto') {
       this.element.window().requestAnimationFrame(this.updateSidebarPosition.bind(this));
     }  // Do not force layout.
   }
@@ -1111,7 +1113,8 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
   private updateSidebarPosition(): void {
     let vertically;
-    const position = Common.Settings.Settings.instance().moduleSetting('sidebar-position').get();
+    const position =
+        Common.Settings.Settings.instance().resolve(Settings.MainSettings.sidebarPositionSettingDescriptor).get();
     if (position === 'right') {
       vertically = false;
     } else if (position === 'bottom') {

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;

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

@@ -23,57 +23,57 @@ const MAX_URL_LENGTH = 20;
 
 const UIStrings = {
   /**
-   * @description Text referring to the start time of a given event.
+   * @description Label for the start time of an event in the layout shift details view of the Performance panel.
    */
   startTime: 'Start time',
   /**
-   * @description Text for a table header referring to the score of a Layout Shift event.
+   * @description Table column header for the score of a layout shift event in the layout shift details view of the Performance panel.
    */
   shiftScore: 'Shift score',
   /**
-   * @description Text for a table header referring to the elements shifted for a Layout Shift event.
+   * @description Table column header for the shifted DOM elements in the layout shift details view of the Performance panel.
    */
   elementsShifted: 'Elements shifted',
   /**
-   * @description Text for a table header referring to the culprit of a Layout Shift event.
+   * @description Table column header for the root cause/culprit of a layout shift event in the layout shift details view of the Performance panel.
    */
   culprit: 'Culprit',
   /**
-   * @description Text for a culprit type of Injected iframe.
+   * @description Root cause culprit type indicating an injected iframe in the layout shift details view of the Performance panel.
    */
   injectedIframe: 'Injected iframe',
   /**
-   * @description Text for a culprit type of Font request.
+   * @description Root cause culprit type indicating a web font request in the layout shift details view of the Performance panel.
    */
   fontRequest: 'Font request',
   /**
-   * @description Text for a culprit type of non-composited animation.
+   * @description Root cause culprit type indicating a non-composited animation in the layout shift details view of the Performance panel.
    */
   nonCompositedAnimation: 'Non-composited animation',
   /**
-   * @description Text referring to an animation.
+   * @description Label for an animation culprit in the layout shift details view of the Performance panel.
    */
   animation: 'Animation',
   /**
-   * @description Text referring to a parent cluster.
+   * @description Link label to navigate to the parent cluster in the layout shift details view of the Performance panel.
    */
   parentCluster: 'Parent cluster',
   /**
-   * @description Text referring to a layout shift cluster and its start time.
+   * @description Header title for a layout shift cluster and its start time in the layout shift details view of the Performance panel.
    * @example {32 ms} PH1
    */
   cluster: 'Layout shift cluster @ {PH1}',
   /**
-   * @description Text referring to a layout shift and its start time.
+   * @description Title and table row label for an individual layout shift and its start time in the layout shift details view of the Performance panel.
    * @example {32 ms} PH1
    */
   layoutShift: 'Layout shift @ {PH1}',
   /**
-   * @description Text referring to the total cumulative score of a layout shift cluster.
+   * @description Label for the total cumulative score row in the layout shift cluster table of the Performance panel.
    */
   total: 'Total',
   /**
-   * @description Text for a culprit type of Unsized image.
+   * @description Root cause culprit type indicating an unsized image in the layout shift details view of the Performance panel.
    */
   unsizedImage: 'Unsized image',
 } as const;