chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.ts

@@ -7,20 +7,20 @@ import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
-import {createIcon, type Icon} from '../../../kit/kit.js';
-import {render} from '../../../lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../../lit/lit.js';
 import * as UI from '../../legacy.js';
 
 import {sanitizeStyle} from './CSSStyleSanitizer.js';
 import customPreviewComponentStyles from './customPreviewComponent.css.js';
 import {
-  defaultObjectPresentation as defaultObjectPresentationTemplate,
+  defaultObjectPresentation,
   ObjectPropertiesMode,
-  ObjectPropertiesSectionsTreeOutline,
-  ObjectPropertyTreeElement,
+  ObjectPropertiesSectionWidget,
   ObjectTree,
 } from './ObjectPropertiesSection.js';
 
+const {widget} = UI.Widget;
+
 const UIStrings = {
   /**
    * @description Context menu item to show a custom formatted object as a standard JavaScript object.
@@ -33,54 +33,76 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class CustomPreviewSection {
   private readonly sectionElement: HTMLSpanElement;
   private readonly object: SDK.RemoteObject.RemoteObject;
-  private expanded: boolean;
-  private cachedContent: Node|null;
-  private readonly header: Node|undefined;
-  private readonly expandIcon: Icon|undefined;
+  private expanded = false;
+  private cachedContent?: unknown|ObjectTree|null;
+  private headerJsonML?: unknown;
   constructor(object: SDK.RemoteObject.RemoteObject) {
     this.sectionElement = document.createElement('span');
     this.sectionElement.classList.add('custom-expandable-section');
     this.object = object;
-    this.expanded = false;
-    this.cachedContent = null;
     const customPreview = object.customPreview();
 
     if (!customPreview) {
       return;
     }
 
-    let headerJSON;
     try {
-      headerJSON = JSON.parse(customPreview.header);
+      this.headerJsonML = JSON.parse(customPreview.header);
     } catch (e) {
       Common.Console.Console.instance().error('Broken formatter: header is invalid json ' + e);
       return;
     }
-    this.header = this.renderJSONMLTag(headerJSON);
-    if (this.header.nodeType === Node.TEXT_NODE) {
-      Common.Console.Console.instance().error('Broken formatter: header should be an element node.');
+    this.render();
+  }
+
+  private render(): void {
+    const customPreview = this.object.customPreview();
+    if (!customPreview || !this.headerJsonML) {
       return;
     }
 
+    const headerTemplate = this.renderJSONMLTag(this.headerJsonML);
     if (customPreview.bodyGetterId) {
-      if (this.header instanceof Element) {
-        this.header.classList.add('custom-expandable-section-header');
+      let bodyContent: LitTemplate|Node|undefined;
+      if (this.cachedContent instanceof ObjectTree) {
+        bodyContent = html`<devtools-widget class="custom-expandable-section-default-body" ${
+            widget(ObjectPropertiesSectionWidget, {
+              objectTree: this.cachedContent,
+              showOverflow: false,
+            })}></devtools-widget>`;
+      } else if (this.cachedContent !== undefined) {
+        bodyContent = this.renderJSONMLTag(this.cachedContent);
       }
-      this.header.addEventListener('click', this.onClick.bind(this), false);
-      this.expandIcon = createIcon('triangle-right', 'custom-expand-icon');
-      this.header.insertBefore(this.expandIcon, this.header.firstChild);
-    }
 
-    this.sectionElement.appendChild(this.header);
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(
+          html`
+        <span class=${
+              Directives.classMap({'custom-expandable-section-header': true,
+                                   expanded: this.expanded})} @click=${(event: Event) => this.onClick(event)}>
+          <devtools-icon name=${
+              this.expanded ? 'triangle-down' : 'triangle-right'} class="custom-expand-icon"></devtools-icon>
+          ${headerTemplate}
+        </span>
+        ${
+              bodyContent ?
+                  html`<span class="custom-expandable-section-body" ?hidden=${!this.expanded}>${bodyContent}</span>` :
+                  nothing}
+      `,
+          this.sectionElement);
+    } else {
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(html`${headerTemplate}`, this.sectionElement);
+    }
   }
 
   element(): Element {
     return this.sectionElement;
   }
 
-  private renderJSONMLTag(jsonML: unknown): Node {
+  private renderJSONMLTag(jsonML: unknown): LitTemplate {
     if (!Array.isArray(jsonML)) {
-      return document.createTextNode(String(jsonML));
+      return html`${String(jsonML)}`;
     }
 
     if (jsonML[0] !== 'object') {
@@ -88,22 +110,24 @@ export class CustomPreviewSection {
     }
     if (jsonML.length !== 2) {
       Common.Console.Console.instance().error('Broken formatter: object reference must contain exactly two elements');
-      return document.createElement('span');
+      return html`<span></span>`;
     }
     return this.layoutObjectTag(jsonML);
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private renderElement(object: any[]): Node {
-    const tagName = object.shift();
+  private renderElement(object: any[]): LitTemplate {
+    const it = object[Symbol.iterator]();
+    const tagName = it.next().value as string;
     if (!ALLOWED_TAGS.includes(tagName)) {
       Common.Console.Console.instance().error('Broken formatter: element ' + tagName + ' is not allowed!');
-      return document.createElement('span');
+      return html`<span></span>`;
     }
-    const element = document.createElement((tagName as string));
-    if ((typeof object[0] === 'object') && !Array.isArray(object[0])) {
-      const attributes = object.shift();
+
+    let next = it.next();
+    const stylePropertyMap: Record<string, string> = {};
+    if (typeof next.value === 'object' && !Array.isArray(next.value) && next.value !== null) {
+      const attributes = next.value as Record<string, string>;
       for (const key in attributes) {
         const value = attributes[key];
         if ((key !== 'style') || (typeof value !== 'string')) {
@@ -113,37 +137,55 @@ export class CustomPreviewSection {
         const sanitizedStyle = new Map<string, {value: string, priority: string}>();
         sanitizeStyle(sanitizedStyle, value);
         for (const [property, {value: propertyValue, priority}] of sanitizedStyle) {
-          element.style.setProperty(property, propertyValue, priority);
+          stylePropertyMap[property] = priority ? `${propertyValue} !${priority}` : propertyValue;
         }
       }
+      next = it.next();
     }
 
-    this.appendJsonMLTags(element, object);
-    return element;
+    const children: LitTemplate[] = [];
+    while (!next.done) {
+      children.push(this.renderJSONMLTag(next.value));
+      next = it.next();
+    }
+    const style = Directives.styleMap(stylePropertyMap);
+
+    switch (tagName) {
+      case 'span':
+        return html`<span style=${style}>${children}</span>`;
+      case 'div':
+        return html`<div style=${style}>${children}</div>`;
+      case 'ol':
+        return html`<ol style=${style}>${children}</ol>`;
+      case 'li':
+        return html`<li style=${style}>${children}</li>`;
+      case 'table':
+        return html`<table style=${style}>${children}</table>`;
+      case 'tr':
+        return html`<tr style=${style}>${children}</tr>`;
+      case 'td':
+        return html`<td style=${style}>${children}</td>`;
+      default:
+        return html`<span>${children}</span>`;
+    }
   }
 
-  private layoutObjectTag(objectTag: unknown[]): Node {
-    objectTag.shift();
-    const attributes = objectTag.shift();
+  private layoutObjectTag(objectTag: unknown[]): LitTemplate {
+    const it = objectTag[Symbol.iterator]();
+    it.next();  // skip 'object'
+    const attributes = it.next().value;
     const remoteObject = this.object.runtimeModel().createRemoteObject((attributes as Protocol.Runtime.RemoteObject));
     if (remoteObject.customPreview()) {
-      return (new CustomPreviewSection(remoteObject)).element();
+      return html`${(new CustomPreviewSection(remoteObject)).element()}`;
     }
 
-    const sectionElement = defaultObjectPresentation(remoteObject);
-    sectionElement.classList.toggle('custom-expandable-section-standard-section', remoteObject.hasChildren);
-    return sectionElement;
-  }
-
-  private appendJsonMLTags(parentElement: Node, jsonMLTags: unknown[]): void {
-    for (let i = 0; i < jsonMLTags.length; ++i) {
-      parentElement.appendChild(this.renderJSONMLTag(jsonMLTags[i]));
-    }
+    return defaultObjectPresentation(remoteObject, undefined, undefined, undefined,
+                                     {'custom-expandable-section-standard-section': remoteObject.hasChildren});
   }
 
   private onClick(event: Event): void {
     event.consume(true);
-    if (this.cachedContent) {
+    if (this.cachedContent !== undefined) {
       this.toggleExpand();
     } else {
       void this.loadBody();
@@ -152,21 +194,8 @@ export class CustomPreviewSection {
 
   private toggleExpand(): void {
     this.expanded = !this.expanded;
-    if (this.header instanceof Element) {
-      this.header.classList.toggle('expanded', this.expanded);
-    }
-    if (this.cachedContent instanceof Element) {
-      this.cachedContent.classList.toggle('hidden', !this.expanded);
-    }
-    if (this.expandIcon) {
-      if (this.expanded) {
-        this.expandIcon.name = 'triangle-down';
-      } else {
-        this.expandIcon.name = 'triangle-right';
-      }
-    }
+    this.render();
   }
-  private defaultBodyTreeOutline: ObjectPropertiesSectionsTreeOutline|undefined;
 
   async loadBody(): Promise<void> {
     const customPreview = this.object.customPreview();
@@ -181,23 +210,18 @@ export class CustomPreviewSection {
       if (bodyJsonML === null) {
         // Per https://firefox-source-docs.mozilla.org/devtools-user/custom_formatters/index.html#custom-formatter-structure
         // we are supposed to fall back to the default format when the `body()` callback returns `null`.
-        this.defaultBodyTreeOutline = new ObjectPropertiesSectionsTreeOutline();
-        this.defaultBodyTreeOutline.setShowSelectionOnKeyboardFocus(/* show */ true, /* preventTabOrder */ false);
-        this.defaultBodyTreeOutline.element.classList.add('custom-expandable-section-default-body');
-        void ObjectPropertyTreeElement.populate(
-            this.defaultBodyTreeOutline.rootElement(), new ObjectTree(this.object, {
-              readOnly: true,
-              propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-            }),
-            false, false);
-
-        this.cachedContent = this.defaultBodyTreeOutline.element;
+        const objectTree = new ObjectTree(this.object, {
+          readOnly: true,
+          propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        });
+        objectTree.expanded = true;
+        this.cachedContent = objectTree;
       } else {
-        this.cachedContent = this.renderJSONMLTag(bodyJsonML);
+        this.cachedContent = bodyJsonML;
       }
 
-      this.sectionElement.appendChild(this.cachedContent);
-      this.toggleExpand();
+      this.expanded = true;
+      this.render();
     }
   }
 }
@@ -240,14 +264,8 @@ export class CustomPreviewComponent {
     if (this.element.shadowRoot) {
       this.element.shadowRoot.textContent = '';
       this.customPreviewSection = null;
-      this.element.shadowRoot.appendChild(defaultObjectPresentation(this.object));
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(defaultObjectPresentation(this.object), this.element.shadowRoot);
     }
   }
 }
-
-function defaultObjectPresentation(object: SDK.RemoteObject.RemoteObject): Element {
-  const element = document.createElement('span');
-  // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-  render(defaultObjectPresentationTemplate(object), element);
-  return element;
-}

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -1638,20 +1638,22 @@ export function renderPropertyValue(value: SDK.RemoteObject.RemoteObject, wasThr
 
 export function defaultObjectPresentation(objectOrTree: SDK.RemoteObject.RemoteObject|ObjectTree,
                                           linkifier?: Components.Linkifier.Linkifier, skipProto?: boolean,
-                                          readOnly?: boolean): LitTemplate {
+                                          readOnly?: boolean, extraClasses?: Record<string, boolean>): LitTemplate {
   const objectTree = objectOrTree instanceof ObjectTree ? objectOrTree : new ObjectTree(objectOrTree, {
     readOnly: Boolean(readOnly),
     propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
   });
   const object = objectTree.object;
-  const title = html`<span class="source-code"><style>${objectValueStyles}</style>${
-      renderPropertyValue(object, /* wasThrown= */ false, /* showPreview= */ true)}</span>`;
+  const title = html`<span class=${
+      classMap({'source-code': true, ...(!object.hasChildren ? extraClasses : undefined)})}><style>${
+      objectValueStyles}</style>${renderPropertyValue(object, /* wasThrown= */ false, /* showPreview= */ true)}</span>`;
   if (!object.hasChildren) {
     return title;
   }
-  return html`${
-      widget(ObjectPropertiesSectionWidget,
-             {objectTree, title, linkifier, skipProto: !!skipProto, showOverflow: !readOnly})}`;
+  return html`<devtools-widget class=${classMap(extraClasses ?? {})} ${
+      widget(
+          ObjectPropertiesSectionWidget,
+          {objectTree, title, linkifier, skipProto: Boolean(skipProto), showOverflow: !readOnly})}></devtools-widget>`;
 }
 
 /**

package/front_end/ui/legacy/components/object_ui/objectPopover.css

@@ -23,13 +23,13 @@
   white-space: nowrap;
   font-weight: bold;
   padding-left: 18px;
-  padding-bottom: 2px;
+  padding-bottom: var(--sys-size-2);
   padding-top: var(--sys-size-3);
   flex-shrink: 0;
 }
 
 .object-popover-tree {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   overflow: auto;
   width: 100%;
   height: calc(100% - 13px);
@@ -40,11 +40,11 @@
 }
 
 .object-popover-description-box {
-  padding: 6px;
+  padding: var(--sys-size-4);
   max-width: 350px;
   line-height: 1.4;
 }
 
 .object-popover-footer {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -27,14 +27,14 @@ li.object-properties-section  {
 
   &::before {
     flex-shrink: 0;
-    margin-right: 2px;
+    margin-right: var(--sys-size-2);
     align-self: flex-start;
   }
 }
 
 .object-properties-section li.editing-sub-part {
-  padding: 3px 12px 8px 6px;
-  margin: -1px -6px -8px;
+  padding: 3px var(--sys-size-6) var(--sys-size-5) var(--sys-size-4);
+  margin: calc(-1 * var(--sys-size-1)) calc(-1 * var(--sys-size-4)) calc(-1 * var(--sys-size-5));
   text-overflow: clip;
 }
 
@@ -69,7 +69,7 @@ li.object-properties-section  {
 }
 
 .name-and-value {
-  line-height: 16px;
+  line-height: var(--sys-size-8);
   display: flex;
   white-space: nowrap;
 }
@@ -85,7 +85,7 @@ li.object-properties-section  {
 }
 
 .property-prompt {
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .tree-outline.hide-selection-when-blurred .selected:focus-visible {
@@ -97,7 +97,7 @@ li.object-properties-section  {
 .tree-outline.hide-selection-when-blurred .selected:focus-visible .name-and-value,
 .tree-outline.hide-selection-when-blurred .selected:focus-visible .gray-info-message {
   background: var(--sys-color-state-focus-highlight);
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
 }
 
 @media (forced-colors: active) {

package/front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -11,11 +11,11 @@ import type {FlameChart} from './FlameChart.js';
 
 const UIStrings = {
   /**
-   * @description Message congratulating the user for having won a game.
+   * @description Message congratulating the user for winning the brick breaker game.
    */
   congrats: 'Congrats, you win!',
   /**
-   * @description A Postscript hinting the user the possibility to open the game using a keycombo.
+   * @description Postscript message explaining how to open the brick breaker game using a keyboard shortcut.
    */
   ps: 'PS: You can also open the game by typing `fixme`',
 } as const;

package/front_end/ui/legacy/components/perf_ui/ChartViewport.ts

@@ -504,31 +504,48 @@ export class ChartViewport extends UI.Widget.VBox {
     // that if the view is restored, the time shown is correct.
     if (this.cancelWindowTimesAnimation) {
       this.cancelWindowTimesAnimation();
+      this.cancelWindowTimesAnimation = null;
       this.setWindowTimes(this.targetLeftTime, this.targetRightTime, false);
     }
   }
 
   setWindowTimes(startTime: number, endTime: number, animate?: boolean): void {
-    if (startTime === this.targetLeftTime && endTime === this.targetRightTime) {
+    // If already animating to the requested target, let the active animation continue.
+    if (animate && this.cancelWindowTimesAnimation && this.targetLeftTime === startTime &&
+        this.targetRightTime === endTime) {
       return;
     }
-    if (!animate || this.visibleLeftTime === 0 || this.visibleRightTime === Infinity ||
-        (startTime === 0 && endTime === Infinity) || (startTime === Infinity && endTime === Infinity)) {
-      // Skip animation, move instantly.
-      this.targetLeftTime = startTime;
-      this.targetRightTime = endTime;
-      this.visibleLeftTime = startTime;
-      this.visibleRightTime = endTime;
-      this.scheduleUpdate();
+
+    // If already at rest at the target window with no active animation, nothing to do.
+    if (!this.cancelWindowTimesAnimation && this.visibleLeftTime === startTime && this.visibleRightTime === endTime) {
       return;
     }
+
+    // Cancel any in-flight animation before starting a new transition or snapping.
     if (this.cancelWindowTimesAnimation) {
       this.cancelWindowTimesAnimation();
-      this.visibleLeftTime = this.targetLeftTime;
-      this.visibleRightTime = this.targetRightTime;
+      this.cancelWindowTimesAnimation = null;
     }
+
     this.targetLeftTime = startTime;
     this.targetRightTime = endTime;
+
+    // Only animate if requested and both current and target bounds are finite, valid ranges.
+    // Initial loads (where visibleLeftTime/RightTime are 0 or uninitialized) and sentinel
+    // ranges (like Infinity) snap instantly to prevent animation glitches or NaN calculations.
+    const hasInitialWindow = Number.isFinite(this.visibleLeftTime) && Number.isFinite(this.visibleRightTime) &&
+        this.visibleRightTime > this.visibleLeftTime;
+    const isFiniteTarget = Number.isFinite(startTime) && Number.isFinite(endTime) && endTime > startTime;
+    const canAnimate = Boolean(animate) && hasInitialWindow && isFiniteTarget;
+
+    if (!canAnimate) {
+      // Snap instantly.
+      this.visibleLeftTime = startTime;
+      this.visibleRightTime = endTime;
+      this.scheduleUpdate();
+      return;
+    }
+
     this.cancelWindowTimesAnimation = UI.UIUtils.animateFunction(
         this.element.window(), animateWindowTimes.bind(this),
         [{from: this.visibleLeftTime, to: startTime}, {from: this.visibleRightTime, to: endTime}], 100, () => {

package/front_end/ui/legacy/components/perf_ui/FilmStripView.ts

@@ -14,24 +14,24 @@ import filmStripViewStyles from './filmStripView.css.js';
 
 const UIStrings = {
   /**
-   * @description Element title in Film Strip View of the Performance panel
+   * @description Tooltip text for a screenshot frame in the film strip view of the Performance panel.
    */
-  doubleclickToZoomImageClickTo: 'Doubleclick to zoom image. Click to view preceding requests.',
+  doubleclickToZoomImageClickTo: 'Double-click to zoom image. Click to view preceding requests.',
   /**
-   * @description Aria label for captured screenshots in network panel.
+   * @description Accessible label for a screenshot frame in the film strip view of the Network panel.
    * @example {3ms} PH1
    */
   screenshotForSSelectToView: 'Screenshot for {PH1} - select to view preceding requests.',
   /**
-   * @description Text for one or a group of screenshots
+   * @description Alt text for a screenshot thumbnail image in the film strip view.
    */
   screenshot: 'Screenshot',
   /**
-   * @description Prev button title in Film Strip View of the Performance panel
+   * @description Tooltip text for the previous frame button in the film strip dialog.
    */
   previousFrame: 'Previous frame',
   /**
-   * @description Next button title in Film Strip View of the Performance panel
+   * @description Tooltip text for the next frame button in the film strip dialog.
    */
   nextFrame: 'Next frame',
 } as const;

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -36,58 +36,57 @@ const SUBTITLE_FONT_SIZE_AND_STYLE = 'italic 10px';
 
 const UIStrings = {
   /**
-   * @description Aria alert used to notify the user when an event has been selected because they tabbed into a group.
+   * @description Accessible announcement when an event is selected by tabbing into a group in the flame chart.
    * @example {Paint} PH1
    * @example {Main thread} PH2
-   *
    */
-  eventSelectedFromGroup: 'Selected a {PH1} event within {PH2}. Press enter to focus this event.',
+  eventSelectedFromGroup: 'Selected a {PH1} event within {PH2}. Press Enter to focus this event.',
   /**
-   * @description Aria accessible name in Flame Chart of the Performance panel
+   * @description Accessible name for the flame chart canvas.
    */
-  flameChart: 'Flame Chart',
+  flameChart: 'Flame chart',
   /**
-   * @description Text for the screen reader to announce a hovered group
+   * @description Accessible announcement when hovering over a group in the flame chart.
    * @example {Network} PH1
    */
   sHovered: '{PH1} hovered',
   /**
-   * @description Text for screen reader to announce a selected group.
+   * @description Accessible announcement when selecting a group in the flame chart.
    * @example {Network} PH1
    */
   sSelected: '{PH1} selected',
   /**
-   * @description Text for screen reader to announce an expanded group
+   * @description Accessible announcement when expanding a group in the flame chart.
    * @example {Network} PH1
    */
   sExpanded: '{PH1} expanded',
   /**
-   * @description Text for screen reader to announce a collapsed group
+   * @description Accessible announcement when collapsing a group in the flame chart.
    * @example {Network} PH1
    */
   sCollapsed: '{PH1} collapsed',
   /**
-   * @description Text for an action that adds a label annotation to an entry in the Flame Chart
+   * @description Context menu option to add a label annotation to an entry in the flame chart.
    */
   labelEntry: 'Label entry',
   /**
-   * @description Text for an action that adds link annotation between entries in the Flame Chart
+   * @description Context menu option to add a link annotation between entries in the flame chart.
    */
   linkEntries: 'Link entries',
   /**
-   * @description Shown in the context menu when right clicking on a track header to enable the user to enter the track configuration mode.
+   * @description Context menu option to enter track configuration mode in the flame chart.
    */
   enterTrackConfigurationMode: 'Configure tracks',
   /**
-   * @description Shown in the context menu when right clicking on a track header to allow the user to exit track configuration mode.
+   * @description Context menu option to exit track configuration mode in the flame chart.
    */
   exitTrackConfigurationMode: 'Finish configuring tracks',
   /**
-   * @description Context menu option to copy the name of the track.
+   * @description Context menu option to copy the track name in the flame chart.
    */
   copyTrackName: 'Copy track name',
   /**
-   * @description Context menu option to copy the URL of the track.
+   * @description Context menu option to copy the track URL in the flame chart.
    */
   copyTrackUrl: 'Copy track URL',
 } as const;

package/front_end/ui/legacy/components/perf_ui/GCActionDelegate.ts

@@ -9,7 +9,7 @@ import type * as UI from '../../legacy.js';
 
 const UIStrings = {
   /**
-   * @description Notification message shown to the user when garbage collection has completed.
+   * @description Notification message shown when garbage collection completes.
    */
   garbageCollectionCompleted: 'Garbage collection completed',
 } as const;

package/front_end/ui/legacy/components/perf_ui/NetworkPriorities.ts

@@ -7,23 +7,23 @@ import * as Protocol from '../../../../generated/protocol.js';
 
 const UIStrings = {
   /**
-   * @description Text in Network Priorities of the Performance panel
+   * @description Label for lowest network priority.
    */
   lowest: 'Lowest',
   /**
-   * @description Text in Network Priorities of the Performance panel
+   * @description Label for low network priority.
    */
   low: 'Low',
   /**
-   * @description Text in Network Priorities of the Performance panel
+   * @description Label for medium network priority.
    */
   medium: 'Medium',
   /**
-   * @description Text in Network Priorities of the Performance panel
+   * @description Label for high network priority.
    */
   high: 'High',
   /**
-   * @description Text in Network Priorities of the Performance panel
+   * @description Label for highest network priority.
    */
   highest: 'Highest',
 } as const;

package/front_end/ui/legacy/components/perf_ui/OverviewGrid.ts

@@ -16,17 +16,17 @@ import {TimelineGrid} from './TimelineGrid.js';
 
 const UIStrings = {
   /**
-   * @description Label for the window for Overview grids
+   * @description Accessible label for the selection window in the overview grid.
    */
   overviewGridWindow: 'Overview grid window',
   /**
-   * @description Label for left window resizer for Overview grids
+   * @description Accessible label for the left window resizer in the overview grid.
    */
-  leftResizer: 'Left Resizer',
+  leftResizer: 'Left resizer',
   /**
-   * @description Label for right window resizer for Overview grids
+   * @description Accessible label for the right window resizer in the overview grid.
    */
-  rightResizer: 'Right Resizer',
+  rightResizer: 'Right resizer',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/perf_ui/OverviewGrid.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);