chrome-devtools-frontend 1.0.1681498 → 1.0.1682249

package/front_end/panels/timeline/components/insights/SlowCSSSelector.ts

@@ -8,7 +8,6 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
-import type {SlowCSSSelectorInsightModel} from '../../../../models/trace/insights/SlowCSSSelector.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import type * as Linkifier from '../../../../ui/components/linkifier/linkifier.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
@@ -22,7 +21,8 @@ const {UIStrings, i18nString} = Trace.Insights.Models.SlowCSSSelector;
 const {html} = Lit;
 const {widget} = UI.Widget;
 
-export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
+export class SlowCSSSelector extends
+    BaseInsightComponent<Trace.Insights.Models.SlowCSSSelector.SlowCSSSelectorInsightModel> {
   override internalName = 'slow-css-selector';
   #selectorLocations = new Map<string, Protocol.CSS.SourceRange[]>();
 

package/front_end/panels/timeline/components/insights/ThirdParties.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {ThirdPartiesInsightModel} from '../../../../models/trace/insights/ThirdParties.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -18,7 +17,7 @@ const {widget} = UI.Widget;
 
 const MAX_TO_SHOW = 5;
 
-export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel> {
+export class ThirdParties extends BaseInsightComponent<Trace.Insights.Models.ThirdParties.ThirdPartiesInsightModel> {
   override internalName = 'third-parties';
 
   #mainThreadTimeAggregator: RowLimitAggregator<Trace.Extras.ThirdParties.EntitySummary> = {

package/front_end/panels/timeline/components/insights/Viewport.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type {ViewportInsightModel} from '../../../../models/trace/insights/Viewport.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
@@ -11,7 +10,7 @@ import {nodeLink} from './NodeLink.js';
 
 const {html} = Lit;
 
-export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
+export class Viewport extends BaseInsightComponent<Trace.Insights.Models.Viewport.ViewportInsightModel> {
   override internalName = 'viewport';
 
   protected override hasAskAiSupport(): boolean {

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -15,7 +15,6 @@ import {html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as Components from './components/components.js';
-import type {SectionPosition} from './components/TimespanBreakdownOverlay.js';
 
 const UIStrings = {
   /**
@@ -939,7 +938,7 @@ export class Overlays extends EventTarget {
     widget.left = leftEdgePixel;
     widget.width = rangeWidth;
 
-    const widths: SectionPosition[] = [];
+    const widths: Components.TimespanBreakdownOverlay.SectionPosition[] = [];
     for (const section of overlay.sections) {
       const leftPixel = this.#xPixelForMicroSeconds('main', section.bounds.min);
       const rightPixel = this.#xPixelForMicroSeconds('main', section.bounds.max);

package/front_end/panels/timeline/timeline.ts

@@ -7,7 +7,6 @@ import * as AnnotationHelpers from './AnnotationHelpers.js';
 import * as AppenderUtils from './AppenderUtils.js';
 import * as BenchmarkEvents from './BenchmarkEvents.js';
 import * as CompatibilityTracksAppender from './CompatibilityTracksAppender.js';
-import * as NetworkTrackWidget from './components/NetworkTrackWidget.js';
 import * as CountersGraph from './CountersGraph.js';
 import * as EntriesFilter from './EntriesFilter.js';
 import * as EventsTimelineTreeView from './EventsTimelineTreeView.js';
@@ -62,7 +61,6 @@ export {
   LayoutShiftsTrackAppender,
   ModificationsManager,
   NetworkTrackAppender,
-  NetworkTrackWidget,
   RecordingMetadata,
   SaveFileFormatter,
   TargetForEvent,

package/front_end/panels/web_audio/WebAudioView.ts

@@ -132,7 +132,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             link: WEBAUDIO_EXPLANATION_URL,
           })}
         </div>` : html`<div class="web-audio-details-container vbox flex-auto">
-          <div class="context-detail-container">
+          <div class="context-detail-container" jslog=${VisualLogging.section('audio-context-details')}>
             <div class="context-detail-header">
               <div class="context-detail-title">
                 ${selectedContext.contextType === 'realtime' ? i18n.i18n.lockedString('AudioContext')
@@ -140,24 +140,24 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
               </div>
               <div class="context-detail-subtitle">${selectedContext.contextId}</div>
             </div>
-            <div class="context-detail-row">
+            <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
               <div class="context-detail-row-entry">${i18nString(UIStrings.state)}</div>
               <div class="context-detail-row-value">${selectedContext.contextState}</div>
             </div>
-            <div class="context-detail-row">
+            <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
               <div class="context-detail-row-entry">${i18nString(UIStrings.sampleRate)}</div>
               <div class="context-detail-row-value">${selectedContext.sampleRate} Hz</div>
             </div>
             ${selectedContext.contextType === 'realtime' ? html`
-              <div class="context-detail-row">
+              <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
                 <div class="context-detail-row-entry">${i18nString(UIStrings.callbackBufferSize)}</div>
                 <div class="context-detail-row-value">${selectedContext.callbackBufferSize} frames</div>
               </div>` : ''}
-            <div class="context-detail-row">
+            <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
               <div class="context-detail-row-entry">${i18nString(UIStrings.renderQuantumSize)}</div>
               <div class="context-detail-row-value">${selectedContext.renderQuantumSize} frames</div>
             </div>
-            <div class="context-detail-row">
+            <div class="context-detail-row" jslog=${VisualLogging.item('detail-row')}>
               <div class="context-detail-row-entry">${i18nString(UIStrings.maxOutputChannels)}</div>
               <div class="context-detail-row-value">${selectedContext.maxOutputChannelCount} ch</div>
             </div>
@@ -165,7 +165,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </div>`}
       <div class="web-audio-summary-container">
         ${contextRealtimeData ?
-            html`<div class="context-summary-container">
+            html`<div class="context-summary-container" jslog=${VisualLogging.section('audio-context-summary')}>
             <span>${i18nString(UIStrings.currentTime)}: ${contextRealtimeData.currentTime.toFixed(3)} s</span>
             <span>\u2758</span>
             <span>${i18nString(UIStrings.callbackInterval)}: μ = ${

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -189,7 +189,7 @@ function renderCredentialsDataGrid(
         </thead>
         <tbody>
         ${credentials.length ? repeat(credentials, c => c.credentialId, credential => html`
-          <tr>
+          <tr jslog=${VisualLogging.tableRow('credential')}>
             <td>${credential.credentialId}</td>
             <td>${credential.isResidentCredential}</td>
             <td>${credential.rpId}</td>
@@ -492,19 +492,19 @@ function renderAuthenticatorFields(
   // clang-format off
   return html`
     <div class="authenticator-fields">
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">${i18nString(UIStrings.uuid)}</label>
         <div class="authenticator-field-value">${authenticatorId}</div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">${i18nString(UIStrings.protocol)}</label>
         <div class="authenticator-field-value">${options.protocol}</div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">${i18nString(UIStrings.transport)}</label>
         <div class="authenticator-field-value">${options.transport}</div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsResidentKeys)}
         </label>
@@ -512,7 +512,7 @@ function renderAuthenticatorFields(
           ${options.hasResidentKey ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
         </div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsLargeBlob)}
         </label>
@@ -520,7 +520,7 @@ function renderAuthenticatorFields(
           ${options.hasLargeBlob ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
         </div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsUserVerification)}
         </label>
@@ -528,7 +528,7 @@ function renderAuthenticatorFields(
           ${options.hasUserVerification ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
         </div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsHmacSecret)}
         </label>
@@ -536,7 +536,7 @@ function renderAuthenticatorFields(
           ${options.hasHmacSecret ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
         </div>
       </div>
-      <div class="authenticator-field">
+      <div class="authenticator-field" jslog=${VisualLogging.item('authenticator-field')}>
         <label class="authenticator-option-label">
           ${i18nString(UIStrings.supportsHmacSecretMc)}
         </label>

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: ca1960ebbf919625140331d83f55552e8fe05333
+Revision: e35c9c6a769bb2bfc92bbbd8270b7ef6b330b939
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/diff_view/DiffView.ts

@@ -201,7 +201,8 @@ class DiffRenderer {
     return html`
       <style>${diffViewStyles}</style>
       <style>${CodeHighlighter.codeHighlighterStyles}</style>
-      <div class="diff-listing" aria-label=${i18nString(UIStrings.changesDiffViewer)}>
+      <div class="diff-listing" aria-label=${i18nString(UIStrings.changesDiffViewer)} jslog=${
+        VisualLogging.section('diff-view')}>
         ${rows.map(row => this.#renderRow(row))}
       </div>`;
   }

package/front_end/ui/components/report_view/ReportView.docs.ts

@@ -6,7 +6,7 @@ import './report_view.js';
 
 import * as Lit from '../../lit/lit.js';
 
-import type {ReportData} from './ReportView.js';
+import type * as ReportView from './report_view.js';
 
 const {html} = Lit;
 
@@ -19,7 +19,7 @@ export function render(container: HTMLElement) {
   // clang-format off
   Lit.render(
       html`
-        <devtools-report .data=${{reportTitle: 'Optional Title'} as ReportData}>
+        <devtools-report .data=${{reportTitle: 'Optional Title'} as ReportView.ReportView.ReportData}>
           <devtools-report-section-header>Section 1</devtools-report-section-header>
           <devtools-report-key>Basic plain text field</devtools-report-key>
           <devtools-report-value>And this is the value</devtools-report-value>

package/front_end/ui/components/text_editor/javascript.ts

@@ -237,19 +237,18 @@ async function evaluateExpression(
     expression: string,
     group: string,
     ): Promise<SDK.RemoteObject.RemoteObject|null> {
-  const result = await context.evaluate(
-      {
-        expression,
-        objectGroup: group,
-        includeCommandLineAPI: true,
-        silent: true,
-        returnByValue: false,
-        generatePreview: false,
-        throwOnSideEffect: true,
-        timeout: 500,
-        replMode: true,
-      },
-      false, false);
+  const result = await context.evaluateWithSelectedFrameFallback({
+    expression,
+    objectGroup: group,
+    includeCommandLineAPI: true,
+    silent: true,
+    returnByValue: false,
+    generatePreview: false,
+    throwOnSideEffect: true,
+    timeout: 500,
+    replMode: true,
+  },
+                                                                 false, false);
   if ('error' in result || result.exceptionDetails || !result.object) {
     return null;
   }

package/front_end/ui/legacy/GlassPane.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
-import type {Size} from '../../models/geometry/geometry.js';
+import type * as Geometry from '../../models/geometry/geometry.js';
 
 import glassPaneStyles from './glassPane.css.js';
 import {deepElementFromEvent, measuredScrollbarWidth} from './UIUtils.js';
@@ -16,7 +16,7 @@ export class GlassPane {
   private readonly onMouseDownBound: (event: Event) => void;
   private onClickOutsideCallback: ((arg0: Event) => void)|null = null;
   #onHideCallback: (() => void)|null = null;
-  private maxSize: Size|null = null;
+  private maxSize: Geometry.Size|null = null;
   private positionX: number|null = null;
   private positionY: number|null = null;
   private anchorBox: AnchorBox|null = null;
@@ -60,9 +60,13 @@ export class GlassPane {
 
   setPointerEventsBehavior(pointerEventsBehavior: PointerEventsBehavior): void {
     this.element.classList.toggle(
-        'no-pointer-events', pointerEventsBehavior !== PointerEventsBehavior.BLOCKED_BY_GLASS_PANE);
+        'no-pointer-events',
+        pointerEventsBehavior !== PointerEventsBehavior.BLOCKED_BY_GLASS_PANE,
+    );
     this.contentElement.classList.toggle(
-        'no-pointer-events', pointerEventsBehavior === PointerEventsBehavior.PIERCE_CONTENTS);
+        'no-pointer-events',
+        pointerEventsBehavior === PointerEventsBehavior.PIERCE_CONTENTS,
+    );
   }
 
   setOutsideClickCallback(callback: ((arg0: Event) => void)|null): void {
@@ -73,7 +77,7 @@ export class GlassPane {
     this.#onHideCallback = cb;
   }
 
-  setMaxContentSize(size: Size|null): void {
+  setMaxContentSize(size: Geometry.Size|null): void {
     this.maxSize = size;
     this.positionContent();
   }
@@ -133,8 +137,16 @@ export class GlassPane {
 
   #onDetach(): void {
     panes.delete(this);
-    this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
-    this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
+    this.element.ownerDocument.body.removeEventListener(
+        'mousedown',
+        this.onMouseDownBound,
+        true,
+    );
+    this.element.ownerDocument.body.removeEventListener(
+        'pointerdown',
+        this.onMouseDownBound,
+        true,
+    );
   }
 
   private onMouseDown(event: Event): void {
@@ -157,7 +169,7 @@ export class GlassPane {
     const scrollbarSize = measuredScrollbarWidth(this.element.ownerDocument);
     const offsetSize = 10;
 
-    const container = (containers.get((this.element.ownerDocument))) as HTMLElement;
+    const container = containers.get(this.element.ownerDocument) as HTMLElement;
     if (this.sizeBehavior === SizeBehavior.MEASURE_CONTENT) {
       this.contentElement.positionAt(0, 0);
       this.contentElement.style.width = '';
@@ -189,7 +201,7 @@ export class GlassPane {
 
     if (this.anchorBox) {
       const anchorBox = this.anchorBox.relativeToElement(container);
-      let behavior: AnchorBehavior.PREFER_BOTTOM|AnchorBehavior.PREFER_TOP|AnchorBehavior.PREFER_RIGHT|
+      let behavior:|AnchorBehavior.PREFER_BOTTOM|AnchorBehavior.PREFER_TOP|AnchorBehavior.PREFER_RIGHT|
           AnchorBehavior.PREFER_LEFT|AnchorBehavior = this.anchorBehavior;
 
       if (behavior === AnchorBehavior.PREFER_TOP || behavior === AnchorBehavior.PREFER_BOTTOM) {
@@ -226,14 +238,20 @@ export class GlassPane {
           }
         }
 
-        const naturalPositionX = Math.min(anchorBox.x, containerWidth - width - gutterSize);
+        const naturalPositionX = Math.min(
+            anchorBox.x,
+            containerWidth - width - gutterSize,
+        );
         positionX = Math.max(gutterSize, naturalPositionX);
         if (this.#ignoreLeftMargin && gutterSize > naturalPositionX) {
           positionX = 0;
         }
 
         if (!enoughHeight) {
-          positionX = Math.min(positionX + offsetSize, containerWidth - width - gutterSize);
+          positionX = Math.min(
+              positionX + offsetSize,
+              containerWidth - width - gutterSize,
+          );
         } else if (positionX - offsetSize >= gutterSize) {
           positionX -= offsetSize;
         }
@@ -272,9 +290,15 @@ export class GlassPane {
           }
         }
 
-        positionY = Math.max(gutterSize, Math.min(anchorBox.y, containerHeight - height - gutterSize));
+        positionY = Math.max(
+            gutterSize,
+            Math.min(anchorBox.y, containerHeight - height - gutterSize),
+        );
         if (!enoughWidth) {
-          positionY = Math.min(positionY + offsetSize, containerHeight - height - gutterSize);
+          positionY = Math.min(
+              positionY + offsetSize,
+              containerHeight - height - gutterSize,
+          );
         } else if (positionY - offsetSize >= gutterSize) {
           positionY -= offsetSize;
         }
@@ -303,7 +327,7 @@ export class GlassPane {
   }
 
   static setContainer(element: Element): void {
-    containers.set((element.ownerDocument), element);
+    containers.set(element.ownerDocument, element);
     GlassPane.containerMoved(element);
   }
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -1876,20 +1876,26 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
   }
 
   #getParentTreeElement(element: HTMLLIElement|TreeElementWrapper):
-      {treeElement: TreeElement, expanded: boolean, classes: DOMTokenList}|null {
+      {treeElement: TreeElement, expanded: boolean, classes: DOMTokenList, attributes?: NamedNodeMap}|null {
     const subtreeRoot = element.parentElement;
     if (!(subtreeRoot instanceof HTMLUListElement)) {
       return null;
     }
     if (subtreeRoot.role === 'tree') {
-      return {treeElement: this.#treeOutline.rootElement(), expanded: false, classes: subtreeRoot.classList};
+      return {
+        treeElement: this.#treeOutline.rootElement(),
+        expanded: false,
+        classes: subtreeRoot.classList,
+        attributes: subtreeRoot.attributes,
+      };
     }
     if (subtreeRoot.role !== 'group' || !subtreeRoot.parentElement) {
       return null;
     }
     const treeElement = TreeViewTreeElement.get(subtreeRoot.parentElement);
     const expanded = treeElement ? treeElement.expanded : hasBooleanAttribute(subtreeRoot.parentElement, 'open');
-    return treeElement ? {expanded, treeElement, classes: subtreeRoot.classList} : null;
+    return treeElement ? {expanded, treeElement, classes: subtreeRoot.classList, attributes: subtreeRoot.attributes} :
+                         null;
   }
 
   protected override updateNode(node: Node, attributeName: string|null): void {
@@ -1929,6 +1935,11 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       }
       if (parent.treeElement.childCount() === 0) {
         parent.treeElement.childrenListElement.classList.add(...parent.classes.values());
+        for (const attr of parent.attributes || []) {
+          if (attr.name !== 'role' && attr.name !== 'class') {
+            parent.treeElement.childrenListElement.setAttribute(attr.name, attr.value);
+          }
+        }
       }
       let nextElement: TreeElement|null = null;
       for (let e: Element|null = node.nextElementSibling; e; e = e.nextElementSibling) {

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

@@ -23,7 +23,7 @@ import {
 
 const UIStrings = {
   /**
-   * @description A context menu item in the Custom Preview Component
+   * @description Context menu item to show a custom formatted object as a standard JavaScript object.
    */
   showAsJavascriptObject: 'Show as JavaScript object',
 } as const;

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

@@ -78,7 +78,7 @@ export class JavaScriptREPL {
       replMode,
       silent,
     };
-    return await executionContext.evaluate(options, false /* userGesture */, awaitPromise);
+    return await executionContext.evaluateWithSelectedFrameFallback(options, false /* userGesture */, awaitPromise);
   }
 
   static async evaluateAndBuildPreview(

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

@@ -20,7 +20,7 @@ import objectValueStyles from './objectValue.css.js';
 
 const UIStrings = {
   /**
-   * @description Text that is usually a hyperlink to more documentation
+   * @description Link text for opening documentation in an object popover.
    */
   learnMore: 'Learn more',
 } as const;

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

@@ -68,92 +68,83 @@ const {widget, widgetRef} = UI.Widget;
 const {ref, repeat, ifDefined, classMap} = Directives;
 const UIStrings = {
   /**
-   * @description Text in Object Properties Section
+   * @description Text shown in an object properties tree when evaluating a property throws an exception.
    * @example {function alert()  [native code] } PH1
    */
   exceptionS: '[Exception: {PH1}]',
   /**
-   * @description Text in Object Properties Section
+   * @description Placeholder text shown for a property value whose type or value is unknown.
    */
   unknown: 'unknown',
   /**
-   * @description Text to expand something recursively
+   * @description Context menu item to expand an object and all of its child properties recursively.
    */
   expandRecursively: 'Expand recursively',
   /**
-   * @description Text to collapse children of a parent group
+   * @description Context menu item to collapse all child properties of an object.
    */
   collapseChildren: 'Collapse children',
   /**
-   * @description A context menu item in the Object Properties Section to choose property ordering.
+   * @description Context menu item to sort object properties alphabetically.
    */
   sortPropertiesAlphabetically: 'Sort properties alphabetically',
   /**
-   * @description Text in Object Properties Section
+   * @description Message displayed in an object properties tree when an object has no properties.
    */
   noProperties: 'No properties',
   /**
-   * @description Element text content in Object Properties Section
+   * @description Placeholder text indicating more content or an invocable getter in an object properties tree.
    */
   dots: '(...)',
   /**
-   * @description Element title in Object Properties Section
+   * @description Tooltip text for the button that invokes an object property getter.
    */
   invokePropertyGetter: 'Invoke property getter',
   /**
-   * @description Show all text content in Show More Data Grid Node of a data grid
+   * @description Tooltip text on a button to expand and show all hidden child properties.
    * @example {50} PH1
    */
   showAllD: 'Show all {PH1}',
   /**
-   * @description Show all properties including those with null or undefined values
+   * @description Context menu checkbox item to show all properties, including null and undefined values.
    */
   showAll: 'Show all',
   /**
-   * @description Value element text content in Object Properties Section. Shown when the developer is
-   * viewing a variable in the Scope view, whose value is not available (i.e. because it was optimized
-   * out) by the JavaScript engine, or inspecting a JavaScript object accessor property, which has no
-   * getter. This string should be translated.
+   * @description Text shown when a variable or property value is unavailable, such as when optimized out by the JavaScript engine or missing a getter.
    */
   valueUnavailable: '<value unavailable>',
   /**
-   * @description Tooltip for value elements in the Scope view that refer to variables whose values
-   * aren't accessible to the debugger (potentially due to being optimized out by the JavaScript
-   * engine), or for JavaScript object accessor properties which have no getter.
+   * @description Tooltip text for property values that aren't accessible to the debugger.
    */
-  valueNotAccessibleToTheDebugger: 'Value is not accessible to the debugger',
+  valueNotAccessibleToTheDebugger: 'Value isn’t accessible to the debugger',
   /**
-   * @description A context menu item in the Watch Expressions Sidebar Pane of the Sources panel and Network pane request.
+   * @description Context menu item to copy the value of a property to the clipboard.
    */
   copyValue: 'Copy value',
   /**
-   * @description A context menu item in the Object Properties Section
+   * @description Context menu item to copy the property path of an object property to the clipboard.
    */
   copyPropertyPath: 'Copy property path',
   /**
-   * @description Text shown when displaying a JavaScript object that has a string property that is
-   * too large for DevTools to properly display a text editor. This is shown instead of the string in
-   * question. Should be translated.
+   * @description Placeholder text shown when a string property is too large to display in a text editor.
    */
   stringIsTooLargeToEdit: '<string is too large to edit>',
   /**
-   * @description Text of attribute value when text is too long
+   * @description Context menu item and button text to expand truncated long text and show the remaining size.
    * @example {30 MB} PH1
    */
   showMoreS: 'Show more ({PH1})',
   /**
-   * @description Text of attribute value when text is too long
+   * @description Button text indicating that a long text string was truncated and showing its total size.
    * @example {30 MB} PH1
    */
-  longTextWasTruncatedS: 'long text was truncated ({PH1})',
+  longTextWasTruncatedS: 'Long text was truncated ({PH1})',
   /**
-   * @description Text for copying
+   * @description Button and context menu item to copy text to the clipboard.
    */
   copy: 'Copy',
   /**
-   * @description A tooltip text that shows when hovering over a button next to value objects,
-   * which are based on bytes and can be shown in a hexadecimal viewer.
-   * Clicking on the button will display that object in the Memory inspector panel.
+   * @description Tooltip text for the button to open a memory buffer object in the Memory inspector panel.
    */
   openInMemoryInpector: 'Open in Memory inspector panel',
 } as const;

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

@@ -11,21 +11,16 @@ import {Directives, html, type LitTemplate, nothing, render} from '../../../lit/
 const {ifDefined, repeat} = Directives;
 const UIStrings = {
   /**
-   * @description Text shown in the console object preview. Shown when the user is inspecting a
-   * JavaScript object and there are multiple empty properties on the object (x =
-   * 'times'/'multiply').
+   * @description Placeholder text shown in an object preview when there are multiple consecutive empty slots in an array.
    * @example {3} PH1
    */
   emptyD: 'empty × {PH1}',
   /**
-   * @description Shown when the user is inspecting a JavaScript object in the console and there is
-   * an empty property on the object..
+   * @description Placeholder text shown in an object preview when there is a single empty slot in an array.
    */
   empty: 'empty',
   /**
-   * @description Text shown when the user is inspecting a JavaScript object, but of the properties
-   * is not immediately available because it is a JavaScript 'getter' function, which means we have
-   * to run some code first in order to compute this property.
+   * @description Tooltip text for an accessor property in an object preview when its value needs to be evaluated via a getter.
    */
   thePropertyIsComputedWithAGetter: 'The property is computed with a getter',
 } as const;