chrome-devtools-frontend 1.0.1522145 → 1.0.1524741

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',
@@ -124,10 +124,10 @@ export interface TraceFrame {
   processId: ProcessID;
   url: string;
   parent?: string;
-  // Added to Chromium in April 2024:
+  // Added to Chrome in April 2024:
   // crrev.com/c/5424783
   isOutermostMainFrame?: boolean;
-  // Added to Chromium in June 2024:
+  // Added to Chrome in June 2024:
   // crrev.com/c/5595033
   isInPrimaryMainFrame?: boolean;
 }
@@ -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> {
@@ -415,6 +421,8 @@ export interface SyntheticNetworkRequest extends Complete, SyntheticBased<Phase.
       initiator?: Initiator,
       requestMethod?: string,
       timing?: ResourceReceiveResponseTimingData,
+      /** Server response time according to Lightrider. */
+      lrServerResponseTime?: Milli,
     },
   };
   cat: 'loading';
@@ -549,7 +557,6 @@ export function isAuctionWorkletDoneWithProcess(event: Event): event is AuctionW
  *    consuming screenshot events from the ScreenshotHandler, you must make sure
  *    to have your code deal with the two different formats.
  */
-// These are nullable because in January 2025 a CL in Chromium
 export interface LegacyScreenshot extends Event {
   /**
    * @deprecated This value is incorrect. Use ScreenshotHandler.getPresentationTimestamp()
@@ -745,7 +752,7 @@ export interface LargestContentfulPaintCandidate extends Mark {
       nodeId: Protocol.DOM.BackendNodeId,
       loadingAttr: string,
       type?: string,
-      // Landed in Chromium M140: crrev.com/c/6702010
+      // Landed in Chrome M140: crrev.com/c/6702010
       nodeName?: string,
     },
   };
@@ -990,7 +997,7 @@ export interface SyntheticLayoutShift extends Omit<LayoutShift, 'name'>, Synthet
 export const NO_NAVIGATION = 'NO_NAVIGATION';
 
 /**
- * This maybe be a navigation id string from Chromium, or `NO_NAVIGATION`, which represents the
+ * This maybe be a navigation id string from Chrome, or `NO_NAVIGATION`, which represents the
  * portion of the trace for which we don't have any navigation event for (as it happeneded prior
  * to the trace start).
  */
@@ -1617,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;
 }
@@ -1639,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;
@@ -1656,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'];
@@ -1855,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&{
@@ -2272,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 {
@@ -3131,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;

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

@@ -54,7 +54,7 @@ export interface PreloadingGridRow {
   ruleSets: Protocol.Preload.RuleSet[];
 }
 
-// Grid component to show prerendering attempts.
+/** Grid component to show prerendering attempts. **/
 export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -81,7 +81,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
     render(html`
       <style>${preloadingGridStyles}</style>
       <div class="preloading-container">
-        <devtools-data-grid striped @select=${this.#onPreloadingGridCellFocused}>
+        <devtools-data-grid striped>
           <table>
             <tr>
               <th id="url" weight="40" sortable>${i18n.i18n.lockedString('URL')}</th>
@@ -97,7 +97,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
                   (prerenderStatus === PreloadingStatus.FAILURE &&
                   (prefetchStatus === PreloadingStatus.READY || prefetchStatus === PreloadingStatus.SUCCESS));
               const hasError = row.pipeline.getOriginallyTriggered().status === PreloadingStatus.FAILURE;
-              return html`<tr data-id=${row.id}>
+              return html`<tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: row.id}))}>
                 <td title=${attempt.key.url}>${this.#urlShort(row, securityOrigin)}</td>
                 <td>${capitalizedAction(attempt.action)}</td>
                 <td>${row.ruleSets.length === 0 ? '' : ruleSetTagOrLocationShort(row.ruleSets[0], pageURL)}</td>
@@ -125,10 +125,6 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
     // clang-format on
   }
 
-  #onPreloadingGridCellFocused(event: CustomEvent<HTMLElement>): void {
-    this.dispatchEvent(new CustomEvent('select', {detail: event.detail.dataset.id}));
-  }
-
   // Shorten URL if a preloading attempt is same-origin.
   #urlShort(row: PreloadingGridRow, securityOrigin: string|null): string {
     const url = row.pipeline.getOriginallyTriggered().key.url;

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

@@ -445,7 +445,7 @@ export const PrefetchReasonDescription: Record<string, {name: () => Platform.UIS
   PrefetchEvictedAfterBrowsingDataRemoved: {name: i18nLazyString(UIStrings.PrefetchEvictedAfterBrowsingDataRemoved)},
 };
 
-// Decoding PrefetchFinalStatus prefetchAttempt to failure description.
+/** Decoding PrefetchFinalStatus prefetchAttempt to failure description. **/
 export function prefetchFailureReason({prefetchStatus}: SDK.PreloadingModel.PrefetchAttempt): string|null {
   // If you face an error on rolling CDP changes, see
   // https://docs.google.com/document/d/1PnrfowsZMt62PX1EvvTp2Nqs3ji1zrklrAEe1JYbkTk
@@ -534,7 +534,7 @@ export function prefetchFailureReason({prefetchStatus}: SDK.PreloadingModel.Pref
   }
 }
 
-// Detailed failure reason for PrerenderFinalStatus.
+/** Detailed failure reason for PrerenderFinalStatus. **/
 export function prerenderFailureReason(attempt: SDK.PreloadingModel.PrerenderAttempt): string|null {
   // If you face an error on rolling CDP changes, see
   // https://docs.google.com/document/d/1PnrfowsZMt62PX1EvvTp2Nqs3ji1zrklrAEe1JYbkTk

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

@@ -63,7 +63,7 @@ export interface RuleSetGridRow {
   preloadsStatusSummary: string;
 }
 
-// Grid component to show SpeculationRules rule sets.
+/** Grid component to show SpeculationRules rule sets. **/
 export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: RuleSetGridData|null = null;
@@ -128,7 +128,7 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
       Lit.render(html`
         <style>${ruleSetGridStyles}</style>
         <div class="ruleset-container" jslog=${VisualLogging.pane('preloading-rules')}>
-          <devtools-data-grid striped @select=${this.#onRowSelected}>
+          <devtools-data-grid striped>
             <table>
               <tr>
                 <th id="rule-set" weight="20" sortable>
@@ -143,7 +143,7 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
                 const revealInElements = ruleSet.backendNodeId !== undefined;
                 const revealInNetwork = ruleSet.url !== undefined && ruleSet.requestId;
                 return html`
-                  <tr data-id=${ruleSet.id}>
+                  <tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: ruleSet.id}))}>
                     <td>
                       ${revealInElements || revealInNetwork ? html`
                         <button class="link" role="link"
@@ -204,13 +204,6 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
       `, this.#shadow, {host: this});
     // clang-format on
   }
-
-  #onRowSelected(event: CustomEvent<HTMLElement>): void {
-    const ruleSetId = event.detail.dataset.id;
-    if (ruleSetId !== undefined) {
-      this.dispatchEvent(new CustomEvent('select', {detail: ruleSetId}));
-    }
-  }
 }
 
 customElements.define('devtools-resources-ruleset-grid', RuleSetGrid);

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

@@ -138,8 +138,10 @@ export const enum UsedKind {
   NO_PRELOADS = 'NoPreloads',
 }
 
-// TODO(kenoss): Rename this class and file once https://crrev.com/c/4933567 landed.
-// This also shows summary of speculations initiated by this page.
+/**
+ * TODO(kenoss): Rename this class and file once https://crrev.com/c/4933567 landed.
+ * This also shows summary of speculations initiated by this page.
+ **/
 export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: UsedPreloadingViewData = {

package/front_end/panels/browser_debugger/browser_debugger-meta.ts

@@ -101,11 +101,13 @@ function maybeRetrieveContextTypes<T = unknown>(
 
 let loadedSourcesModule: (typeof Sources|undefined);
 
-//  The sources module is imported here because the view with id `navigator-network`
-//  is implemented by `NetworkNavigatorView` in sources. It cannot be registered
-//  in the sources module as it belongs to the shell app and thus all apps
-//  that extend from shell will have such view registered. This would cause a
-//  collision with node_app as a separate view with the same id is registered in it.
+/**
+ * The sources module is imported here because the view with id `navigator-network`
+ * is implemented by `NetworkNavigatorView` in sources. It cannot be registered
+ * in the sources module as it belongs to the shell app and thus all apps
+ * that extend from shell will have such view registered. This would cause a
+ * collision with node_app as a separate view with the same id is registered in it.
+ **/
 async function loadSourcesModule(): Promise<typeof Sources> {
   if (!loadedSourcesModule) {
     loadedSourcesModule = await import('../sources/sources.js');