chrome-devtools-frontend 1.0.1522585 → 1.0.1525561

package/front_end/models/trace/helpers/Trace.ts

@@ -85,8 +85,10 @@ export function extractOriginFromTrace(firstNavigationURL: string): string|null
 }
 
 export type EventsInThread<T extends Types.Events.Event> = Map<Types.Events.ThreadID, T[]>;
-// Each thread contains events. Events indicate the thread and process IDs, which are
-// used to store the event in the correct process thread entry below.
+/**
+ * Each thread contains events. Events indicate the thread and process IDs, which are
+ * used to store the event in the correct process thread entry below.
+ **/
 export function addEventToProcessThread<T extends Types.Events.Event>(
     event: T,
     eventsInProcessThread: Map<Types.Events.ProcessID, EventsInThread<T>>,
@@ -822,8 +824,10 @@ export function extractSampleTraceId(event: Types.Events.Event): number|null {
   return event.args?.sampleTraceId ?? event.args?.data?.sampleTraceId ?? null;
 }
 
-// This exactly matches Trace.Styles.visibleTypes. See the runtime verification in maybeInitStylesMap.
-// TODO(crbug.com/410884528)
+/**
+ * This exactly matches Trace.Styles.visibleTypes. See the runtime verification in maybeInitStylesMap.
+ * TODO(crbug.com/410884528)
+ **/
 export const VISIBLE_TRACE_EVENT_TYPES = new Set<Types.Events.Name>([
   Types.Events.Name.ABORT_POST_TASK_CALLBACK,
   Types.Events.Name.ANIMATION,

package/front_end/models/trace/insights/DocumentLatency.ts

@@ -110,7 +110,7 @@ function getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): T
     return null;
   }
 
-  const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.waiting);
+  const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.serverResponseTime);
   return Math.round(ms) as Types.Timing.Milli;
 }
 

package/front_end/models/trace/insights/INPBreakdown.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Handlers from '../handlers/handlers.js';
+import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type {SyntheticInteractionPair} from '../types/TraceEvents.js';
 import type * as Types from '../types/types.js';
@@ -67,13 +67,24 @@ export function isINPBreakdownInsight(insight: InsightModel): insight is INPBrea
 }
 
 function finalize(partialModel: PartialInsightModel<INPBreakdownInsightModel>): INPBreakdownInsightModel {
+  let state: INPBreakdownInsightModel['state'] = 'pass';
+  if (partialModel.longestInteractionEvent) {
+    const classification = Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(
+        partialModel.longestInteractionEvent.dur);
+    if (classification === Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD) {
+      state = 'informative';
+    } else {
+      state = 'fail';
+    }
+  }
+
   return {
     insightKey: InsightKeys.INP_BREAKDOWN,
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.INP,
-    state: partialModel.longestInteractionEvent ? 'informative' : 'pass',
+    state,
     ...partialModel,
   };
 }

package/front_end/models/trace/insights/LCPBreakdown.ts

@@ -65,7 +65,7 @@ export const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPBreakdown.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// A TraceWindow plus its UIString.
+/** A TraceWindow plus its UIString. **/
 export type Subpart = Types.Timing.TraceWindowMicro&{label: Common.UIString.LocalizedString};
 interface LCPSubparts {
   /**
@@ -180,13 +180,25 @@ function finalize(partialModel: PartialInsightModel<LCPBreakdownInsightModel>):
   if (partialModel.lcpRequest) {
     relatedEvents.push(partialModel.lcpRequest);
   }
+
+  let state: LCPBreakdownInsightModel['state'] = 'pass';
+  if (partialModel.lcpMs !== undefined) {
+    const classification = Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(
+        Helpers.Timing.milliToMicro(partialModel.lcpMs));
+    if (classification === Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD) {
+      state = 'informative';
+    } else {
+      state = 'fail';
+    }
+  }
+
   return {
     insightKey: InsightKeys.LCP_BREAKDOWN,
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.LCP,
-    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',
+    state,
     ...partialModel,
     relatedEvents,
   };

package/front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -458,7 +458,7 @@ export function handleLinkResponseHeader(linkHeaderValue: string): Array<{url: s
   return preconnectedOrigins;
 }
 
-// Export the function for test purpose.
+/** Export the function for test purpose. **/
 export function generatePreconnectedOrigins(
     data: Handlers.Types.HandlerData, context: InsightSetContextWithNavigation,
     contextRequests: Types.Events.SyntheticNetworkRequest[],
@@ -584,7 +584,7 @@ function candidateRequestsByOrigin(
   return origins;
 }
 
-// Export the function for test purpose.
+/** Export the function for test purpose. **/
 export function generatePreconnectCandidates(
     data: Handlers.Types.HandlerData, context: InsightSetContextWithNavigation,
     contextRequests: Types.Events.SyntheticNetworkRequest[]): PreconnectCandidate[] {

package/front_end/models/trace/types/File.ts

@@ -124,17 +124,19 @@ export function isEntriesLinkAnnotation(annotation: Annotation): annotation is E
   return annotation.type === 'ENTRIES_LINK';
 }
 
-// Serializable keys are created for trace events to be able to save
-// references to timeline events in a trace file. These keys enable
-// user modifications that can be saved. See go/cpq:event-data-json for
-// more details on the key format.
+/**
+ * Serializable keys are created for trace events to be able to save
+ * references to timeline events in a trace file. These keys enable
+ * user modifications that can be saved. See go/cpq:event-data-json for
+ * more details on the key format.
+ **/
 export type RawEventKey = `${EventKeyType.RAW_EVENT}-${number}`;
 export type SyntheticEventKey = `${EventKeyType.SYNTHETIC_EVENT}-${number}`;
 export type ProfileCallKey = `${EventKeyType.PROFILE_CALL}-${ProcessID}-${ThreadID}-${SampleIndex}-${Protocol.integer}`;
 export type LegacyTimelineFrameKey = `${EventKeyType.LEGACY_TIMELINE_FRAME}-${number}`;
 export type SerializableKey = RawEventKey|ProfileCallKey|SyntheticEventKey|LegacyTimelineFrameKey;
 
-// Serializable keys values objects contain data that maps the keys to original Trace Events
+/** Serializable keys values objects contain data that maps the keys to original Trace Events **/
 export interface RawEventKeyValues {
   type: EventKeyType.RAW_EVENT;
   rawIndex: number;
@@ -172,9 +174,11 @@ export interface Modifications {
   annotations: SerializedAnnotations;
 }
 
-// IMPORTANT: this is the same as PerfUI.FlameChart.PersistedGroupConfig
-// However, the PerfUI code should not depend on the model/trace, and similarly
-// this model cannot depend on that code, so we duplicate it.
+/**
+ * IMPORTANT: this is the same as PerfUI.FlameChart.PersistedGroupConfig
+ * However, the PerfUI code should not depend on the model/trace, and similarly
+ * this model cannot depend on that code, so we duplicate it.
+ **/
 export interface TrackVisualConfig {
   hidden: boolean;
   expanded: boolean;

package/front_end/models/trace/types/Timing.ts

@@ -25,6 +25,6 @@ export interface TraceWindow<TimeFormat extends Micro|Milli> {
   range: TimeFormat;
 }
 
-// See front_end/models/trace/helpers/Timing.ts for helpful utility functions like traceWindowFromMicroSeconds
+/** See front_end/models/trace/helpers/Timing.ts for helpful utility functions like traceWindowFromMicroSeconds **/
 export type TraceWindowMicro = TraceWindow<Micro>;
 export type TraceWindowMilli = TraceWindow<Milli>;

package/front_end/models/trace/types/TraceEvents.ts

@@ -8,7 +8,7 @@ import type * as Protocol from '../../../generated/protocol.js';
 
 import type {Micro, Milli, Seconds, TraceWindowMicro} from './Timing.js';
 
-// Trace Events.
+/** Trace Events. **/
 export const enum Phase {
   // Standard
   BEGIN = 'B',
@@ -282,8 +282,10 @@ export interface End extends Event {
  */
 export type SyntheticComplete = Complete;
 
-// TODO(paulirish): Migrate to the new (Sept 2024) EventTiming trace events.
-// See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7
+/**
+ * TODO(paulirish): Migrate to the new (Sept 2024) EventTiming trace events.
+ * See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7
+ **/
 export type EventTimingBeginOrEnd = EventTimingBegin|EventTimingEnd;
 
 export interface EventTimingBegin extends Event {
@@ -336,9 +338,11 @@ export interface SyntheticNetworkRedirect {
   dur: Micro;
 }
 
-// ProcessedArgsData is used to store the processed data of a network
-// request. Which is used to distinguish from the date we extract from the
-// trace event directly.
+/**
+ * ProcessedArgsData is used to store the processed data of a network
+ * request. Which is used to distinguish from the date we extract from the
+ * trace event directly.
+ **/
 interface SyntheticArgsData {
   dnsLookup: Micro;
   download: Micro;
@@ -359,8 +363,10 @@ interface SyntheticArgsData {
   ssl: Micro;
   stalled: Micro;
   totalTime: Micro;
-  /** Server response time (receiveHeadersEnd - sendEnd) */
+  /** receiveHeadersEnd - sendEnd */
   waiting: Micro;
+  /** receiveHeadersStart - sendEnd */
+  serverResponseTime: Micro;
 }
 
 export interface SyntheticNetworkRequest extends Complete, SyntheticBased<Phase.COMPLETE> {
@@ -1618,8 +1624,10 @@ const enum FrameType {
   BACKFILL = 'BACKFILL',
 }
 
-// TODO(crbug.com/409484302): Remove once Chrome migrates from
-// ChromeTrackEvent.chrome_frame_reporter to ChromeTrackEvent.frame_reporter.
+/**
+ * TODO(crbug.com/409484302): Remove once Chrome migrates from
+ * ChromeTrackEvent.chrome_frame_reporter to ChromeTrackEvent.frame_reporter.
+ **/
 export interface OldChromeFrameReporterArgs {
   chrome_frame_reporter: ChromeFrameReporter;
 }
@@ -1640,13 +1648,15 @@ export function isPipelineReporter(event: Event): event is PipelineReporter {
   return event.name === Name.PIPELINE_REPORTER;
 }
 
-// A type used for synthetic events created based on a raw trace event.
-// A branded type is used to ensure not all events can be typed as
-// SyntheticBased and prevent places different to the
-// SyntheticEventsManager from creating synthetic events. This is
-// because synthetic events need to be registered in order to resolve
-// serialized event keys into event objects, so we ensure events are
-// registered at the time they are created by the SyntheticEventsManager.
+/**
+ * A type used for synthetic events created based on a raw trace event.
+ * A branded type is used to ensure not all events can be typed as
+ * SyntheticBased and prevent places different to the
+ * SyntheticEventsManager from creating synthetic events. This is
+ * because synthetic events need to be registered in order to resolve
+ * serialized event keys into event objects, so we ensure events are
+ * registered at the time they are created by the SyntheticEventsManager.
+ **/
 export interface SyntheticBased<Ph extends Phase = Phase, T extends Event = Event> extends Event {
   ph: Ph;
   rawSourceEvent: T;
@@ -1657,9 +1667,11 @@ export function isSyntheticBased(event: Event): event is SyntheticBased {
   return 'rawSourceEvent' in event;
 }
 
-// Nestable async events with a duration are made up of two distinct
-// events: the begin, and the end. We need both of them to be able to
-// display the right information, so we create these synthetic events.
+/**
+ * Nestable async events with a duration are made up of two distinct
+ * events: the begin, and the end. We need both of them to be able to
+ * display the right information, so we create these synthetic events.
+ **/
 export interface SyntheticEventPair<T extends PairableAsync = PairableAsync> extends SyntheticBased<Phase, T> {
   rawSourceEvent: T;
   name: T['name'];
@@ -1856,7 +1868,7 @@ export function isRasterTask(event: Event): event is RasterTask {
   return event.name === Name.RASTER_TASK;
 }
 
-// CompositeLayers has been replaced by "Commit", but we support both to not break old traces being imported.
+/** CompositeLayers has been replaced by "Commit", but we support both to not break old traces being imported. **/
 export interface CompositeLayers extends Instant {
   name: Name.COMPOSITE_LAYERS;
   args: Args&{
@@ -2273,7 +2285,7 @@ export function isResourceReceivedData(
   return event.name === 'ResourceReceivedData';
 }
 
-// Any event where we receive data (and get an encodedDataLength)
+/** Any event where we receive data (and get an encodedDataLength) **/
 export function isReceivedDataEvent(
     event: Event,
     ): event is ResourceReceivedData|ResourceFinish|ResourceReceiveResponse {
@@ -3132,8 +3144,10 @@ export const enum Name {
   LINK_PRECONNECT = 'LinkPreconnect',
 }
 
-// NOT AN EXHAUSTIVE LIST: just some categories we use and refer
-// to in multiple places.
+/**
+ * NOT AN EXHAUSTIVE LIST: just some categories we use and refer
+ * to in multiple places.
+ **/
 export const Categories = {
   Console: 'blink.console',
   UserTiming: 'blink.user_timing',

package/front_end/models/trace_source_maps_resolver/SourceMapsResolver.ts

@@ -22,7 +22,7 @@ export class SourceMappingsUpdated extends Event {
   }
 }
 
-// The code location key is created as a concatenation of its fields.
+/** The code location key is created as a concatenation of its fields. **/
 export const resolvedCodeLocationDataNames = new Map<string, ResolvedCodeLocationData|null>();
 
 export class SourceMapsResolver extends EventTarget {

package/front_end/panels/ai_assistance/components/MarkdownRendererWithCodeBlock.ts

@@ -6,16 +6,18 @@ import type * as Marked from '../../../third_party/marked/marked.js';
 import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import type * as Lit from '../../../ui/lit/lit.js';
 
-// The model returns multiline code blocks in an erroneous way with the language being in new line.
-// This renderer takes that into account and correctly updates the parsed multiline token with the language
-// correctly identified and stripped from the content.
-// Example:
-// ```
-// css <-- This should have been on the first line.
-// * {
-//   color: red;
-// }
-// ```
+/**
+ * The model returns multiline code blocks in an erroneous way with the language being in new line.
+ * This renderer takes that into account and correctly updates the parsed multiline token with the language
+ * correctly identified and stripped from the content.
+ * Example:
+ * ```
+ * css <-- This should have been on the first line.
+ * * {
+ * color: red;
+ * }
+ * ```
+ **/
 export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.TemplateResult|null {
     if (token.type === 'code') {

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -77,13 +77,12 @@ export interface ViewInput {
   selectedKey: string|null;
   editable: boolean;
   preview: Widget;
-  onSelect: (event: CustomEvent<HTMLElement|null>) => void;
-  onSort: (event: CustomEvent<{columnId: string, ascending: boolean}>) => void;
-  onCreate: (event: CustomEvent<{key: string, value: string}>) => void;
+  onSelect: (item: {key: string, value: string}|null) => void;
+  onSort: (ascending: boolean) => void;
+  onCreate: (key: string, value: string) => void;
   onReferesh: () => void;
-  onEdit:
-      (event: CustomEvent<{node: HTMLElement, columnId: string, valueBeforeEditing: string, newText: string}>) => void;
-  onDelete: (event: CustomEvent<HTMLElement>) => void;
+  onEdit: (key: string, value: string, columnId: string, valueBeforeEditing: string, newText: string) => void;
+  onDelete: (key: string) => void;
 }
 
 interface ViewOutput {
@@ -130,12 +129,10 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                   .name=${`${id}-datagrid-with-preview`}
                   striped
                   style="flex: auto"
-                  @select=${input.onSelect}
-                  @sort=${input.onSort}
+                  @sort=${(e: CustomEvent<{columnId: string, ascending: boolean}>) => input.onSort(e.detail.ascending)}
                   @refresh=${input.onReferesh}
-                  @create=${input.onCreate}
-                  @edit=${input.onEdit}
-                  @delete=${input.onDelete}
+                  @create=${(e: CustomEvent<{key: string, value: string}>) => input.onCreate(e.detail.key, e.detail.value)}
+                  @deselect=${() => input.onSelect(null)}
                 >
                   <table>
                     <tr>
@@ -148,6 +145,10 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                     </tr>
                     ${repeat(input.items, item => item.key, item => html`
                       <tr data-key=${item.key} data-value=${item.value}
+                          @select=${() => input.onSelect(item)}
+                          @edit=${(e: CustomEvent<{columnId: string, valueBeforeEditing: string, newText: string}>) =>
+                            input.onEdit(item.key, item.value, e.detail.columnId, e.detail.valueBeforeEditing, e.detail.newText)}
+                          @delete=${() => input.onDelete(item.key)}
                           selected=${(input.selectedKey === item.key) || nothing}>
                         <td>${item.key}</td>
                         <td>${item.value.substr(0, MAX_VALUE_LENGTH)}</td>
@@ -202,27 +203,25 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
       selectedKey: this.#selectedKey,
       editable: this.#editable,
       preview: this.#preview,
-      onSelect: (event: CustomEvent<HTMLElement|null>) => {
-        this.#toolbar?.setCanDeleteSelected(Boolean(event.detail));
-        if (!event.detail) {
+      onSelect: (item: {key: string, value: string}|null) => {
+        this.#toolbar?.setCanDeleteSelected(Boolean(item));
+        if (!item) {
           void this.#previewEntry(null);
         } else {
-          void this.#previewEntry({key: event.detail.dataset.key || '', value: event.detail.dataset.value || ''});
+          void this.#previewEntry(item);
         }
       },
-      onSort: (event: CustomEvent<{columnId: string, ascending: boolean}>) => {
-        this.#isSortOrderAscending = event.detail.ascending;
+      onSort: (ascending: boolean) => {
+        this.#isSortOrderAscending = ascending;
       },
-      onCreate: (event: CustomEvent<{key: string, value: string}>) => {
-        this.#createCallback(event.detail.key, event.detail.value || '');
+      onCreate: (key: string, value: string) => {
+        this.#createCallback(key, value);
       },
-      onEdit:
-          (event: CustomEvent<{node: HTMLElement, columnId: string, valueBeforeEditing: string, newText: string}>) => {
-            this.#editingCallback(
-                event.detail.node, event.detail.columnId, event.detail.valueBeforeEditing, event.detail.newText);
-          },
-      onDelete: (event: CustomEvent<HTMLElement>) => {
-        this.#deleteCallback(event.detail.dataset.key || '');
+      onEdit: (key: string, value: string, columnId: string, valueBeforeEditing: string, newText: string) => {
+        this.#editingCallback(key, value, columnId, valueBeforeEditing, newText);
+      },
+      onDelete: (key: string) => {
+        this.#deleteCallback(key);
       },
       onReferesh: () => {
         this.refreshItems();
@@ -316,7 +315,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     return true;
   }
 
-  #editingCallback(editingNode: HTMLElement, columnIdentifier: string, oldText: string, newText: string): void {
+  #editingCallback(key: string, value: string, columnIdentifier: string, oldText: string, newText: string): void {
     if (!this.isEditAllowed(columnIdentifier, oldText, newText)) {
       return;
     }
@@ -324,13 +323,12 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
       if (typeof oldText === 'string') {
         this.removeItem(oldText);
       }
-      this.setItem(newText, editingNode.dataset.value || '');
-      this.#removeDupes(newText, editingNode.dataset.value || '');
-      editingNode.dataset.key = newText;
-      void this.#previewEntry({key: newText, value: editingNode.dataset.value || ''});
+      this.setItem(newText, value);
+      this.#removeDupes(newText, value);
+      void this.#previewEntry({key: newText, value});
     } else {
-      this.setItem(editingNode.dataset.key || '', newText);
-      void this.#previewEntry({key: editingNode.dataset.key || '', value: newText});
+      this.setItem(key, newText);
+      void this.#previewEntry({key, value: newText});
     }
   }
 

package/front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -102,8 +102,9 @@ export class InterestGroupAccessGrid extends HTMLElement {
   }
 
   #renderGrid(): Lit.TemplateResult {
+    // clang-format off
     return html`
-      <devtools-data-grid @select=${this.#onSelect} striped inline>
+      <devtools-data-grid striped inline>
         <table>
           <tr>
             <th id="event-time" sortable weight="10">${i18nString(UIStrings.eventTime)}</td>
@@ -111,8 +112,8 @@ export class InterestGroupAccessGrid extends HTMLElement {
             <th id="event-group-owner" sortable weight="10">${i18nString(UIStrings.groupOwner)}</td>
             <th id="event-group-name" sortable weight="10">${i18nString(UIStrings.groupName)}</td>
           </tr>
-          ${this.#datastores.map((event, index) => html`
-          <tr data-index=${index}>
+          ${this.#datastores.map(event => html`
+          <tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: event}))}>
             <td>${new Date(1e3 * event.accessTime).toLocaleString()}</td>
             <td>${event.type}</td>
             <td>${event.ownerOrigin}</td>
@@ -120,14 +121,8 @@ export class InterestGroupAccessGrid extends HTMLElement {
           </tr>
         `)}
         </table>
-      </devtools-data-grid>
-    `;
-  }
-
-  #onSelect(event: CustomEvent<HTMLElement|null>): void {
-    if (event.detail) {
-      this.dispatchEvent(new CustomEvent('select', {detail: this.#datastores[Number(event.detail.dataset.index)]}));
-    }
+      </devtools-data-grid>`;
+    // clang-format on
   }
 }
 

package/front_end/panels/application/components/OriginTrialTreeView.ts

@@ -109,11 +109,13 @@ customElements.define('devtools-resources-origin-trial-tree-view-badge', Badge);
 
 type TreeNode<DataType> = TreeOutline.TreeOutlineUtils.TreeNode<DataType>;
 
-// The Origin Trial Tree has 4 levels of content:
-// - Origin Trial (has multiple Origin Trial tokens)
-// - Origin Trial Token (has only 1 raw token text)
-// - Fields in Origin Trial Token
-// - Raw Origin Trial Token text (folded because the content is long)
+/**
+ * The Origin Trial Tree has 4 levels of content:
+ * - Origin Trial (has multiple Origin Trial tokens)
+ * - Origin Trial Token (has only 1 raw token text)
+ * - Fields in Origin Trial Token
+ * - Raw Origin Trial Token text (folded because the content is long)
+ **/
 export type OriginTrialTreeNodeData = Protocol.Page.OriginTrial|Protocol.Page.OriginTrialTokenWithStatus|string;
 
 function constructOriginTrialTree(originTrial: Protocol.Page.OriginTrial): TreeNode<OriginTrialTreeNodeData> {

package/front_end/panels/application/components/PermissionsPolicySection.ts

@@ -79,6 +79,7 @@ export function renderIconLink(
   <devtools-button
     .iconName=${iconName}
     title=${title}
+    aria-label=${title}
     .variant=${Buttons.Button.Variant.ICON}
     .size=${Buttons.Button.Size.SMALL}
     @click=${clickHandler}

package/front_end/panels/application/components/ReportsGrid.ts

@@ -58,7 +58,7 @@ export interface ReportsGridData {
 export interface ViewInput {
   reports: Protocol.Network.ReportingApiReport[];
   protocolMonitorExperimentEnabled: boolean;
-  onSelect: (e: CustomEvent<HTMLElement|null>) => void;
+  onSelect: (id: string) => void;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
@@ -69,7 +69,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
     <div class="reporting-container" jslog=${VisualLogging.section('reports')}>
       <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
       ${input.reports.length > 0 ? html`
-        <devtools-data-grid striped @select=${input.onSelect}>
+        <devtools-data-grid striped>
           <table>
             <tr>
               ${input.protocolMonitorExperimentEnabled ? html`
@@ -91,7 +91,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
               <th id="body" weight="20">${i18n.i18n.lockedString('Body')}</th>
             </tr>
             ${input.reports.map(report => html`
-              <tr data-id=${report.id}>
+              <tr @select=${() =>input.onSelect(report.id)}>
                 ${input.protocolMonitorExperimentEnabled ? html`<td>${report.id}</td>` : ''}
                 <td>${report.initiatorUrl}</td>
                 <td>${report.type}</td>
@@ -133,17 +133,11 @@ export class ReportsGrid extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  #onSelect = (e: CustomEvent<HTMLElement|null>): void => {
-    if (e.detail?.dataset.id) {
-      this.onReportSelected(e.detail.dataset.id);
-    }
-  };
-
   override performUpdate(): void {
     const viewInput = {
       reports: this.reports,
       protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
-      onSelect: this.#onSelect,
+      onSelect: this.onReportSelected,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/application/components/SharedStorageAccessGrid.ts

@@ -84,7 +84,7 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {
   events: Protocol.Storage.SharedStorageAccessedEvent[];
-  onSelect: (event: CustomEvent<HTMLElement>) => void;
+  onSelect: (event: Protocol.Storage.SharedStorageAccessedEvent) => void;
 }
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, _output, target) => {
@@ -108,7 +108,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <devtools-icon class="info-icon medium" name="info"
                           title=${i18nString(UIStrings.allSharedStorageEvents)}>
           </devtools-icon>
-          <devtools-data-grid striped inline @select=${input.onSelect}>
+          <devtools-data-grid striped inline>
             <table>
               <thead>
                 <tr>
@@ -133,8 +133,8 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                 </tr>
               </thead>
               <tbody>
-                ${input.events.map((event, index) => html`
-                  <tr data-index=${index}>
+                ${input.events.map(event => html`
+                  <tr @select=${() =>input.onSelect(event)}>
                     <td data-value=${event.accessTime}>
                       ${new Date(1e3 * event.accessTime).toLocaleString()}
                     </td>
@@ -181,16 +181,8 @@ export class SharedStorageAccessGrid extends UI.Widget.Widget {
     this.#view(
         {
           events: this.#events,
-          onSelect: this.#onSelectEvent.bind(this),
+          onSelect: this.#onSelect.bind(this),
         },
         {}, this.contentElement);
   }
-
-  #onSelectEvent(event: CustomEvent<HTMLElement>): void {
-    const index = parseInt(event.detail?.dataset.index || '', 10);
-    const datastore = isNaN(index) ? undefined : this.#events[index];
-    if (datastore) {
-      this.#onSelect(datastore);
-    }
-  }
 }

package/front_end/panels/application/preloading/components/MismatchedPreloadingGrid.ts

@@ -99,7 +99,7 @@ export interface MismatchedPreloadingGridData {
   rows: MismatchedPreloadingGridRow[];
 }
 
-// Grid component to show prerendering attempts.
+/** Grid component to show prerendering attempts. **/
 export class MismatchedPreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: MismatchedPreloadingGridData|null = null;