chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/timeline/components/SidebarSingleInsightSet.test.ts

@@ -96,8 +96,8 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     // Does not include "font display", which is experimental.
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
+      'LCP request discovery',
       'Layout shift culprits',
-      'Document request latency',
       'Third parties',
     ]);
   });
@@ -125,8 +125,8 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     // Does not include "font display", which is experimental.
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
+      'LCP request discovery',
       'Layout shift culprits',
-      'Document request latency',
       'Font display',
       'Third parties',
     ]);
@@ -153,6 +153,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
         name: 'lcp-by-phase',
         insightSetKey: navigationId,
         overlays: [],
+        relatedEvents: [],
       },
     };
     await coordinator.done();

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

@@ -40,27 +40,27 @@ export interface SidebarSingleInsightSetData {
  * "enable experimental performance insights" experiment. This is used to enable
  * us to ship incrementally without turning insights on by default for all
  * users. */
-const EXPERIMENTAL_INSIGHTS: ReadonlySet<typeof Insights.Helpers.BaseInsight> = new Set([
-  Insights.FontDisplay.FontDisplay,
+const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
+  'FontDisplay',
 ]);
 
 /**
  * Every insight (INCLUDING experimental ones)
- * The order of this array is the order the insights will be shown in the sidebar.
+ * The order of these properties is the order the insights will be shown in the sidebar.
  * TODO(crbug.com/368135130): sort this in a smart way!
  */
-const ALL_INSIGHTS: typeof Insights.Helpers.BaseInsight[] = [
-  Insights.InteractionToNextPaint.InteractionToNextPaint,
-  Insights.LCPPhases.LCPPhases,
-  Insights.LCPDiscovery.LCPDiscovery,
-  Insights.CLSCulprits.CLSCulprits,
-  Insights.RenderBlocking.RenderBlockingRequests,
-  Insights.DocumentLatency.DocumentLatency,
-  Insights.FontDisplay.FontDisplay,
-  Insights.Viewport.Viewport,
-  Insights.ThirdParties.ThirdParties,
-  Insights.SlowCSSSelector.SlowCSSSelector,
-] as const;
+const INSIGHT_NAME_TO_COMPONENT = {
+  InteractionToNextPaint: Insights.InteractionToNextPaint.InteractionToNextPaint,
+  LCPPhases: Insights.LCPPhases.LCPPhases,
+  LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
+  CLSCulprits: Insights.CLSCulprits.CLSCulprits,
+  RenderBlocking: Insights.RenderBlocking.RenderBlocking,
+  DocumentLatency: Insights.DocumentLatency.DocumentLatency,
+  FontDisplay: Insights.FontDisplay.FontDisplay,
+  Viewport: Insights.Viewport.Viewport,
+  ThirdParties: Insights.ThirdParties.ThirdParties,
+  SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
+};
 
 export class SidebarSingleInsightSet extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -135,7 +135,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
   #getLCP(insightSetKey: string):
       {value: Trace.Types.Timing.MicroSeconds, event: Trace.Types.Events.LargestContentfulPaintCandidate}|null {
-    const insight = Trace.Insights.Common.getInsight('LargestContentfulPaint', this.#data.insights, insightSetKey);
+    const insight = Trace.Insights.Common.getInsight('LCPPhases', this.#data.insights, insightSetKey);
     if (!insight || !insight.lcpMs || !insight.lcpEvent) {
       return null;
     }
@@ -145,7 +145,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
   }
 
   #getCLS(insightSetKey: string): {value: number, worstShiftEvent: Trace.Types.Events.Event|null} {
-    const insight = Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.#data.insights, insightSetKey);
+    const insight = Trace.Insights.Common.getInsight('CLSCulprits', this.#data.insights, insightSetKey);
     if (!insight) {
       // Unlike the other metrics, there is still a value for this metric even with no data.
       // This means this view will always display a CLS score.
@@ -193,37 +193,42 @@ export class SidebarSingleInsightSet extends HTMLElement {
     `;
   }
 
-  #insightsForRendering(): typeof Insights.Helpers.BaseInsight[] {
+  #renderInsights(
+      insightSets: Trace.Insights.Types.TraceInsightSets|null,
+      parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
+      insightSetKey: string,
+      ): LitHtml.TemplateResult {
     const includeExperimental = Root.Runtime.experiments.isEnabled(
         Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
     );
 
-    if (includeExperimental) {
-      return ALL_INSIGHTS;
+    const models = insightSets?.get(insightSetKey)?.model;
+    if (!models) {
+      return html``;
     }
 
-    return ALL_INSIGHTS.filter(insight => !EXPERIMENTAL_INSIGHTS.has(insight));
-  }
+    const components: LitHtml.TemplateResult[] = [];
+    for (const [name, componentClass] of Object.entries(INSIGHT_NAME_TO_COMPONENT)) {
+      if (!includeExperimental && EXPERIMENTAL_INSIGHTS.has(name)) {
+        continue;
+      }
 
-  #renderInsights(
-      insights: Trace.Insights.Types.TraceInsightSets|null,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
-      insightSetKey: string,
-      ): LitHtml.TemplateResult {
-    const insightComponents = this.#insightsForRendering();
-    // clang-format off
-    return html`${insightComponents.map(component => {
-      return html`<div data-single-insight-wrapper>
-        <${component.litTagName}
-          .insights=${insights}
+      // clang-format off
+      const component = html`<div data-single-insight-wrapper>
+        <${componentClass.litTagName}
+          .model=${models[name as keyof typeof models]}
           .parsedTrace=${parsedTrace}
           .insightSetKey=${insightSetKey}
           .activeInsight=${this.#data.activeInsight}
           .activeCategory=${this.#data.activeCategory}>
-        </${component.litTagName}>
+        </${componentClass.litTagName}>
       </div>`;
-    })}`;
-    // clang-format on
+      // clang-format on
+
+      components.push(component);
+    }
+
+    return html`${components}`;
   }
 
   #render(): void {

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

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as Protocol from '../../../generated/protocol.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as ThemeSupport from '../../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -39,44 +40,42 @@ export enum NetworkCategory {
   OTHER = 'Other',
 }
 
-function syntheticNetworkRequestCategory(request: Trace.Types.Events.SyntheticNetworkRequest): NetworkCategory {
-  switch (request.args.data.mimeType) {
-    case 'text/html':
+export function networkResourceCategory(request: Trace.Types.Events.SyntheticNetworkRequest): NetworkCategory {
+  const {mimeType} = request.args.data;
+  switch (request.args.data.resourceType) {
+    case Protocol.Network.ResourceType.Document:
       return NetworkCategory.DOC;
-    case 'application/javascript':
-    case 'application/x-javascript':
-    case 'text/javascript':
-      return NetworkCategory.JS;
-    case 'text/css':
+    case Protocol.Network.ResourceType.Stylesheet:
       return NetworkCategory.CSS;
-    case 'image/gif':
-    case 'image/jpeg':
-    case 'image/png':
-    case 'image/svg+xml':
-    case 'image/webp':
-    case 'image/x-icon':
+    case Protocol.Network.ResourceType.Image:
       return NetworkCategory.IMG;
-    case 'audio/aac':
-    case 'audio/midi':
-    case 'audio/x-midi':
-    case 'audio/mpeg':
-    case 'audio/ogg':
-    case 'audio/wav':
-    case 'audio/webm':
+    case Protocol.Network.ResourceType.Media:
       return NetworkCategory.MEDIA;
-    case 'font/opentype':
-    case 'font/woff2':
-    case 'font/ttf':
-    case 'application/font-woff':
+    case Protocol.Network.ResourceType.Font:
       return NetworkCategory.FONT;
-    case 'application/wasm':
-      return NetworkCategory.WASM;
+    case Protocol.Network.ResourceType.Script:
+    case Protocol.Network.ResourceType.WebSocket:
+      return NetworkCategory.JS;
     default:
-      return NetworkCategory.OTHER;
+      // FWIW, all the other (current) resourceTypes are:
+      //     TextTrack, XHR, Fetch, Prefetch, EventSource, Manifest, SignedExchange, Ping, CSPViolationReport, Preflight, Other
+
+      // Traces before Feb 2024 don't have `resourceType`.
+      // We'll keep mimeType logic for a couple years to avoid grey network requests for last year's traces.
+      return mimeType.startsWith('text/')                                ? NetworkCategory.DOC :
+          mimeType.endsWith('/css')                                      ? NetworkCategory.CSS :
+          mimeType.endsWith('javascript')                                ? NetworkCategory.JS :
+          mimeType.startsWith('image/')                                  ? NetworkCategory.IMG :
+          mimeType.startsWith('audio/') || mimeType.startsWith('video/') ? NetworkCategory.MEDIA :
+          mimeType.startsWith('font/') || mimeType.includes('font-')     ? NetworkCategory.FONT :
+          mimeType === 'application/wasm'                                ? NetworkCategory.WASM :
+                                                                           // Ultimate fallback:
+                                                                           NetworkCategory.OTHER;
   }
 }
 
 export function colorForNetworkCategory(category: NetworkCategory): string {
+  // TODO: These should align with `baseResourceTypeColors` from `NetworkWaterfallColumn`.
   let cssVarName = '--app-color-system';
   switch (category) {
     case NetworkCategory.DOC:
@@ -109,7 +108,7 @@ export function colorForNetworkCategory(category: NetworkCategory): string {
 }
 
 export function colorForNetworkRequest(request: Trace.Types.Events.SyntheticNetworkRequest): string {
-  const category = syntheticNetworkRequestCategory(request);
+  const category = networkResourceCategory(request);
   return colorForNetworkCategory(category);
 }
 

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

@@ -6,8 +6,6 @@ import * as Breadcrumbs from './Breadcrumbs.js';
 import * as BreadcrumbsUI from './BreadcrumbsUI.js';
 import * as CPUThrottlingSelector from './CPUThrottlingSelector.js';
 import * as DetailsView from './DetailsView.js';
-import * as EntryName from './EntryName.js';
-import * as EntryStyles from './EntryStyles.js';
 import * as FieldSettingsDialog from './FieldSettingsDialog.js';
 import * as InteractionBreakdown from './InteractionBreakdown.js';
 import * as LayoutShiftDetails from './LayoutShiftDetails.js';
@@ -28,8 +26,6 @@ export {
   BreadcrumbsUI,
   CPUThrottlingSelector,
   DetailsView,
-  EntryName,
-  EntryStyles,
   FieldSettingsDialog,
   InteractionBreakdown,
   LayoutShiftDetails,

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

@@ -3,26 +3,18 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type {CLSCulpritsInsightModel} from '../../../../models/trace/insights/CLSCulprits.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import {EventReferenceClick} from './EventRef.js';
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import type * as SidebarInsight from './SidebarInsight.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
-  /** Title of an insight that provides details about why elements shift/move on the page. The causes for these shifts are referred to as culprits ("reasons"). */
-  title: 'Layout shift culprits',
-  /**
-   * @description Description of a DevTools insight that identifies the reasons that elements shift on the page.
-   * This is displayed after a user expands the section to see more. No character length limits.
-   */
-  description:
-      'Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.',
   /**
    *@description Text indicating the worst layout shift cluster.
    */
@@ -52,23 +44,22 @@ const UIStrings = {
    * @description Text for a culprit type of Animation.
    */
   animation: 'Animation',
+  /**
+   * @description Text for a culprit type of Unsized images.
+   */
+  unsizedImages: 'Unsized Images',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/CLSCulprits.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class CLSCulprits extends BaseInsight {
+export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-cls-culprits`;
   override insightCategory: Category = Category.CLS;
   override internalName: string = 'cls-culprits';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const insight =
-        Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
-
     const clustersByScore =
-        insight?.clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore) ?? [];
+        this.model?.clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore) ?? [];
     const worstCluster = clustersByScore[0];
     if (!worstCluster) {
       return [];
@@ -95,8 +86,7 @@ export class CLSCulprits extends BaseInsight {
   getTopCulprits(
       cluster: Trace.Types.Events.SyntheticLayoutShiftCluster,
       culpritsByShift:
-          Map<Trace.Types.Events.LayoutShift,
-              Trace.Insights.InsightRunners.CumulativeLayoutShift.LayoutShiftRootCausesData>): string[] {
+          Map<Trace.Types.Events.LayoutShift, Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData>): string[] {
     const MAX_TOP_CULPRITS = 3;
     const causes: Array<string> = [];
     if (causes.length === MAX_TOP_CULPRITS) {
@@ -115,6 +105,7 @@ export class CLSCulprits extends BaseInsight {
       const fontReq = culprits.fontRequests;
       const iframes = culprits.iframeIds;
       const animations = culprits.nonCompositedAnimations;
+      const unsizedImages = culprits.unsizedImages;
 
       for (let i = 0; i < fontReq.length && causes.length < MAX_TOP_CULPRITS; i++) {
         causes.push(i18nString(UIStrings.fontRequest));
@@ -125,6 +116,9 @@ export class CLSCulprits extends BaseInsight {
       for (let i = 0; i < animations.length && causes.length < MAX_TOP_CULPRITS; i++) {
         causes.push(i18nString(UIStrings.animation));
       }
+      for (let i = 0; i < unsizedImages.length && causes.length < MAX_TOP_CULPRITS; i++) {
+        causes.push(i18nString(UIStrings.unsizedImages));
+      }
     }
     return causes.slice(0, MAX_TOP_CULPRITS);
   }
@@ -133,8 +127,11 @@ export class CLSCulprits extends BaseInsight {
     this.dispatchEvent(new EventReferenceClick(event));
   }
 
-  #render(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster):
-      LitHtml.TemplateResult {
+  #render(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const ts = Trace.Types.Timing.MicroSeconds(worstCluster.ts - (this.data.parsedTrace?.Meta.traceBounds.min ?? 0));
     const clusterTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
 
@@ -143,11 +140,11 @@ export class CLSCulprits extends BaseInsight {
     return html`
         <div class="insights">
             <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
+              title: this.model.title,
+              description: this.model.description,
               internalName: this.internalName,
               expanded: this.isActive(),
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content" class="insight-section">
                   <span class="worst-cluster">${i18nString(UIStrings.worstCluster)}: <button type="button" class="timeline-link" @click=${() => this.#clickEvent(worstCluster)}>${i18nString(UIStrings.layoutShiftCluster, {PH1: clusterTs})}</button></span>
@@ -160,29 +157,25 @@ export class CLSCulprits extends BaseInsight {
                 </div>
             </devtools-performance-sidebar-insight>
         </div>`;
-    // clang-format on
+              // clang-format on
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight =
-        Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight =
-        Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return;
     }
 
-    const culpritsByShift = insight.shifts;
-    const clusters = insight.clusters ?? [];
-    if (!clusters.length || !insight.worstCluster) {
+    const culpritsByShift = this.model.shifts;
+    const clusters = this.model.clusters ?? [];
+    if (!clusters.length || !this.model.worstCluster) {
       return;
     }
 
-    const causes = this.getTopCulprits(insight.worstCluster, culpritsByShift);
+    const causes = this.getTopCulprits(this.model.worstCluster, culpritsByShift);
 
     const hasCulprits = causes.length > 0;
 
@@ -190,7 +183,7 @@ export class CLSCulprits extends BaseInsight {
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = hasCulprits && matchesCategory ? this.#render(causes, insight.worstCluster) : LitHtml.nothing;
+    const output = hasCulprits && matchesCategory ? this.#render(causes, this.model.worstCluster) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -5,26 +5,17 @@
 import '../../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type {DocumentLatencyInsightModel} from '../../../../models/trace/insights/DocumentLatency.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import type * as SidebarInsight from './SidebarInsight.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   *@description Title of an insight that provides a breakdown for how long it took to download the main document.
-   */
-  title: 'Document request latency',
-  /**
-   *@description Description of an insight that provides a breakdown for how long it took to download the main document.
-   */
-  description:
-      'Your first network request is the most important.  Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',
   /**
    * @description Text to tell the user that the document request does not have redirects.
    */
@@ -76,12 +67,10 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/DocumentLatency.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class DocumentLatency extends BaseInsight {
+export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-document-latency`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'document-latency';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   #check(didPass: boolean, good: string, bad: string): LitHtml.TemplateResult {
     const icon = didPass ? 'check-circle' : 'clear';
@@ -99,17 +88,16 @@ export class DocumentLatency extends BaseInsight {
   }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
-    if (!insight?.data?.documentRequest) {
+    if (!this.model?.data?.documentRequest) {
       return [];
     }
 
     const overlays: Overlays.Overlays.TimelineOverlay[] = [];
-    const event = insight.data.documentRequest;
-    const redirectDurationMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.data.redirectDuration);
+    const event = this.model.data.documentRequest;
+    const redirectDurationMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(this.model.data.redirectDuration);
 
     const sections = [];
-    if (insight.data.redirectDuration) {
+    if (this.model.data.redirectDuration) {
       const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
           event.ts,
           (event.ts + redirectDurationMicro) as Trace.Types.Timing.MicroSeconds,
@@ -117,8 +105,9 @@ export class DocumentLatency extends BaseInsight {
       sections.push({bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true});
       overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});
     }
-    if (insight.data.serverResponseTooSlow) {
-      const serverResponseTimeMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.data.serverResponseTime);
+    if (this.model.data.serverResponseTooSlow) {
+      const serverResponseTimeMicro =
+          Trace.Helpers.Timing.millisecondsToMicroseconds(this.model.data.serverResponseTime);
       // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.
       const sendEnd = event.args.data.timing?.sendEnd ?? Trace.Types.Timing.MilliSeconds(0);
       const sendEndMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(sendEnd);
@@ -128,7 +117,7 @@ export class DocumentLatency extends BaseInsight {
       );
       sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});
     }
-    if (insight.data.uncompressedResponseBytes) {
+    if (this.model.data.uncompressedResponseBytes) {
       const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
           event.args.data.syntheticData.downloadStart,
           (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as
@@ -142,7 +131,7 @@ export class DocumentLatency extends BaseInsight {
       overlays.push({
         type: 'TIMESPAN_BREAKDOWN',
         sections,
-        entry: insight.data.documentRequest,
+        entry: this.model.data.documentRequest,
         // Always render below because the document request is guaranteed to be
         // the first request in the network track.
         renderLocation: 'BELOW_EVENT',
@@ -150,14 +139,14 @@ export class DocumentLatency extends BaseInsight {
     }
     overlays.push({
       type: 'ENTRY_SELECTED',
-      entry: insight.data.documentRequest,
+      entry: this.model.data.documentRequest,
     });
 
     return overlays;
   }
 
-  #renderInsight(insight: Trace.Insights.Types.InsightResults['DocumentLatency']): LitHtml.LitTemplate {
-    if (!insight.data) {
+  #renderInsight(): LitHtml.LitTemplate {
+    if (!this.model?.data) {
       return LitHtml.nothing;
     }
 
@@ -165,48 +154,52 @@ export class DocumentLatency extends BaseInsight {
     return html`
     <div class="insights">
       <devtools-performance-sidebar-insight .data=${{
-            title: this.userVisibleTitle,
-            description: this.description,
+            title: this.model.title,
+            description: this.model.description,
             expanded: this.isActive(),
             internalName: this.internalName,
-            estimatedSavingsTime: insight.metricSavings?.FCP,
-            estimatedSavingsBytes: insight.data.uncompressedResponseBytes,
-        } as SidebarInsight.InsightDetails}
+            estimatedSavingsTime: this.model.metricSavings?.FCP,
+            estimatedSavingsBytes: this.model.data.uncompressedResponseBytes,
+        }}
         @insighttoggleclick=${this.onSidebarClick}
       >
         <div slot="insight-content" class="insight-section">
           <ul class="insight-results insight-icon-results">
             <li class="insight-entry">
-              ${this.#check(insight.data.redirectDuration === 0,
+              ${this.#check(this.model.data.redirectDuration === 0,
                 i18nString(UIStrings.passingRedirects), i18nString(UIStrings.failedRedirects))}
             </li>
             <li class="insight-entry">
-              ${this.#check(!insight.data.serverResponseTooSlow,
+              ${this.#check(!this.model.data.serverResponseTooSlow,
                 i18nString(UIStrings.passingServerResponseTime), i18nString(UIStrings.failedServerResponseTime))}
             </li>
             <li class="insight-entry">
-              ${this.#check(insight.data.uncompressedResponseBytes === 0,
+              ${this.#check(this.model.data.uncompressedResponseBytes === 0,
                 i18nString(UIStrings.passingTextCompression), i18nString(UIStrings.failedTextCompression))}
             </li>
           </ul>
         </div>
       </devtools-performance-sidebar-insight>
     </div>`;
-    // clang-format on
+        // clang-format on
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
+    if (this.model?.data === undefined) {
+      return;
+    }
+
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = matchesCategory && insight?.data ? this.#renderInsight(insight) : LitHtml.nothing;
+    const hasFailure = this.model?.data?.redirectDuration > 0 || this.model?.data?.serverResponseTooSlow ||
+        this.model.data.uncompressedResponseBytes > 0;
+    const output = (matchesCategory && hasFailure) ? this.#renderInsight() : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -21,7 +21,6 @@ export class EventReferenceClick extends Event {
 }
 
 class EventRef extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-event-ref`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);