chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,20 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../../ui/components/markdown_view/markdown_view.js';
+
 import * as Platform from '../../../../core/platform/platform.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Marked from '../../../../third_party/marked/marked.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
-import * as MarkdownView from '../../../../ui/components/markdown_view/markdown_view.js';
+import type * as MarkdownView from '../../../../ui/components/markdown_view/markdown_view.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import sidebarInsightStyles from './sidebarInsight.css.js';
 import * as SidebarInsight from './SidebarInsight.js';
-import {type TableState} from './Table.js';
+import type {TableState} from './Table.js';
 import {type ActiveInsight, Category} from './types.js';
 
+const {html} = LitHtml;
+
 export function shouldRenderForCategory(options: {
   activeCategory: Category,
   insightCategory: Category,
@@ -42,13 +46,16 @@ export interface BaseInsightData {
   activeCategory: Category;
 }
 
+// TODO(crbug.com/371615739): BaseInsight, SidebarInsight should be combined.
 // This is an abstract base class so the component naming rules do not apply.
-// eslint-disable-next-line rulesdir/check_component_naming
 export abstract class BaseInsight extends HTMLElement {
   abstract internalName: string;
   abstract insightCategory: Category;
   abstract userVisibleTitle: string;
   abstract description: string;
+  // So we can use the TypeScript BaseInsight class without getting warnings
+  // about litTagName. Every child should overrwrite this.
+  static readonly litTagName = LitHtml.literal``;
 
   protected readonly shadow = this.attachShadow({mode: 'open'});
 
@@ -60,12 +67,14 @@ export abstract class BaseInsight extends HTMLElement {
     activeCategory: Category.ALL,
   };
 
-  readonly #boundRender = this.render.bind(this);
+  // eslint-disable-next-line rulesdir/no_bound_component_methods
+  readonly #boundRender = this.#baseRender.bind(this);
   readonly sharedTableState: TableState = {
     selectedRowEl: null,
     selectionIsSticky: false,
   };
   #initialOverlays: Overlays.Overlays.TimelineOverlay[]|null = null;
+  #hasRegisteredRelatedEvents = false;
 
   protected scheduleRender(): void {
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
@@ -76,6 +85,17 @@ export abstract class BaseInsight extends HTMLElement {
     this.setAttribute('jslog', `${VisualLogging.section(`timeline.insights.${this.internalName}`)}`);
     // Used for unit test purposes when querying the DOM.
     this.dataset.insightName = this.internalName;
+
+    // TODO(crbug.com/371615739): this should be moved to model/trace/insights
+    if (!this.#hasRegisteredRelatedEvents) {
+      this.#hasRegisteredRelatedEvents = true;
+
+      const events = this.getRelatedEvents();
+      if (events.length) {
+        this.dispatchEvent(new SidebarInsight.InsightProvideRelatedEvents(
+            this.userVisibleTitle, events, this.#dispatchInsightActivatedEvent.bind(this)));
+      }
+    }
   }
 
   set insights(insights: Trace.Insights.Types.TraceInsightSets|null) {
@@ -108,6 +128,11 @@ export abstract class BaseInsight extends HTMLElement {
       this.dispatchEvent(new SidebarInsight.InsightDeactivated());
       return;
     }
+
+    this.#dispatchInsightActivatedEvent();
+  }
+
+  #dispatchInsightActivatedEvent(): void {
     if (!this.data.insightSetKey) {
       // Shouldn't happen, but needed to satisfy TS.
       return;
@@ -134,14 +159,11 @@ export abstract class BaseInsight extends HTMLElement {
    * This enables the hover/click table interactions.
    */
   toggleTemporaryOverlays(
-      overlays: Overlays.Overlays.TimelineOverlay[]|null, options?: Overlays.Overlays.TimelineOverlaySetOptions): void {
+      overlays: Overlays.Overlays.TimelineOverlay[]|null, options: Overlays.Overlays.TimelineOverlaySetOptions): void {
     if (!this.isActive()) {
       return;
     }
 
-    if (!options) {
-      options = {updateTraceWindow: true};
-    }
     this.dispatchEvent(new SidebarInsight.InsightProvideOverlays(overlays ?? this.getInitialOverlays(), options));
   }
 
@@ -154,8 +176,20 @@ export abstract class BaseInsight extends HTMLElement {
     return this.#initialOverlays;
   }
 
+  // Should be overrided by subclasses.
+  protected getRelatedEvents(): Trace.Types.Events.Event[] {
+    return [];
+  }
+
   protected abstract createOverlays(): Overlays.Overlays.TimelineOverlay[];
 
+  #baseRender(): void {
+    this.render();
+    if (this.isActive()) {
+      requestAnimationFrame(() => requestAnimationFrame(() => this.scrollIntoViewIfNeeded()));
+    }
+  }
+
   abstract render(): void;
 
   protected isActive(): boolean {
@@ -165,27 +199,12 @@ export abstract class BaseInsight extends HTMLElement {
       insightSetKey: this.data.insightSetKey,
     });
   }
-}
 
-// TODO(crbug.com/368170718): consider better treatments for shortening URLs.
-export function shortenUrl(url: string): string {
-  const maxLength = 20;
-
-  // TODO(crbug.com/368170718): This is something that should only be done if the origin is the same
-  // as the insight set's origin.
-  const elideOrigin = false;
-  if (elideOrigin) {
-    try {
-      url = new URL(url).pathname;
-    } catch {
-    }
+  getInsightSetUrl(): URL {
+    const url = this.data.insights?.get(this.data.insightSetKey ?? '')?.url;
+    Platform.TypeScriptUtilities.assertNotNullOrUndefined(url, 'Expected url for insight set');
+    return new URL(url);
   }
-
-  if (url.length <= maxLength) {
-    return url;
-  }
-
-  return Platform.StringUtilities.trimMiddle(url.split('/').at(-1) ?? '', maxLength);
 }
 
 /**
@@ -195,21 +214,7 @@ export function shortenUrl(url: string): string {
  */
 export function md(markdown: string): LitHtml.TemplateResult {
   const tokens = Marked.Marked.lexer(markdown);
-  return LitHtml.html`<${MarkdownView.MarkdownView.MarkdownView.litTagName}
+  return html`<devtools-markdown-view
     .data=${{tokens} as MarkdownView.MarkdownView.MarkdownViewData}>
-  </${MarkdownView.MarkdownView.MarkdownView.litTagName}>`;
-}
-
-export class EventReferenceClick extends Event {
-  static readonly eventName = 'eventreferenceclick';
-
-  constructor(public metricEvent: Trace.Types.Events.Event) {
-    super(EventReferenceClick.eventName, {bubbles: true, composed: true});
-  }
-}
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    [EventReferenceClick.eventName]: EventReferenceClick;
-  }
+  </devtools-markdown-view>`;
 }

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './Table.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Trace from '../../../../models/trace/trace.js';
@@ -9,24 +11,22 @@ 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 * as SidebarInsight from './SidebarInsight.js';
-import {Table, type TableData} from './Table.js';
+import type * as SidebarInsight from './SidebarInsight.js';
+import type {TableData} from './Table.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Text to tell the user about the longest user interaction.
    */
   description:
-      'Optimize user responsiveness by [improving the Interaction to Next Paint metric](https://web.dev/articles/optimize-inp).',
+      'Start investigating with the longest phase. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',
   /**
    * @description Title for the performance insight "INP by phase", which shows a breakdown of INP by phases / sections.
    */
   title: 'INP by phase',
-  /**
-   *@description Label used to denote the longest user interaction.
-   */
-  longestInteraction: 'Longest interaction',
   /**
    *@description Label used for the phase/component/stage/section of a larger duration.
    */
@@ -55,7 +55,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/In
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class InteractionToNextPaint extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-inp`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-inp`;
   override insightCategory: Category = Category.INP;
   override internalName: string = 'inp';
   override userVisibleTitle: string = i18nString(UIStrings.title);
@@ -104,12 +104,8 @@ export class InteractionToNextPaint extends BaseInsight {
       {
         type: 'TIMESPAN_BREAKDOWN',
         sections,
-      },
-      {
-        type: 'ENTRY_LABEL',
-        // TODO(b/366040373) why aren't annotations rendering for synthetic events?
+        renderLocation: 'BELOW_EVENT',
         entry: event,
-        label: i18nString(UIStrings.longestInteraction),
       },
     ];
   }
@@ -119,9 +115,9 @@ export class InteractionToNextPaint extends BaseInsight {
         i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(us));
 
     // clang-format off
-    return LitHtml.html`
+    return html`
         <div class="insights">
-            <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+            <devtools-performance-sidebar-insight .data=${{
             title: this.userVisibleTitle,
             description: this.description,
             internalName: this.internalName,
@@ -129,7 +125,7 @@ export class InteractionToNextPaint extends BaseInsight {
             } as SidebarInsight.InsightDetails}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content" class="insight-section">
-                  ${LitHtml.html`<${Table.litTagName}
+                  ${html`<devtools-performance-table
                     .data=${{
                       insight: this,
                       headers: [i18nString(UIStrings.phase), i18nString(UIStrings.duration)],
@@ -148,13 +144,19 @@ export class InteractionToNextPaint extends BaseInsight {
                         },
                       ],
                     } as TableData}>
-                  </${Table.litTagName}>`}
+                  </devtools-performance-table>`}
                 </div>
-            </${SidebarInsight.SidebarInsight}>
+            </devtools-performance-sidebar-insight>
         </div>`;
     // clang-format on
   }
 
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight =
+        Trace.Insights.Common.getInsight('InteractionToNextPaint', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
+  }
+
   override render(): void {
     const insight =
         Trace.Insights.Common.getInsight('InteractionToNextPaint', this.data.insights, this.data.insightSetKey);

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

@@ -2,24 +2,31 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../../../core/common/common.js';
+import '../../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Trace from '../../../../models/trace/trace.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
+import {eventRef} from './EventRef.js';
 import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import discoveryStyles from './lcpDiscovery.css.js';
-import * as SidebarInsight from './SidebarInsight.js';
+import type * as SidebarInsight from './SidebarInsight.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it.
    */
   title: 'LCP request discovery',
+  /**
+   *@description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
+   */
+  description:
+      'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',
   /**
    * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.
    * @example {401ms} PH1
@@ -37,6 +44,16 @@ const UIStrings = {
    * @description Text to tell the user that the LCP request does not have the lazy load property applied.
    */
   lazyLoadNotApplied: 'lazy load not applied',
+  /**
+   *@description Text for a screen-reader label to tell the user that the icon represents a successful insight check
+   *@example {Server response time} PH1
+   */
+  successAriaLabel: 'Insight check passed: {PH1}',
+  /**
+   *@description Text for a screen-reader label to tell the user that the icon represents an unsuccessful insight check
+   *@example {Server response time} PH1
+   */
+  failedAriaLabel: 'Insight check failed: {PH1}',
 
 };
 
@@ -49,6 +66,7 @@ interface LCPImageDiscoveryData {
   shouldRemoveLazyLoading: boolean;
   request: Trace.Types.Events.SyntheticNetworkRequest;
   discoveryDelay: Trace.Types.Timing.MicroSeconds|null;
+  estimatedSavings: Trace.Types.Timing.MilliSeconds|null;
 }
 
 function getImageData(
@@ -80,6 +98,7 @@ function getImageData(
     shouldRemoveLazyLoading,
     request: insight.lcpRequest,
     discoveryDelay: null,
+    estimatedSavings: insight.metricSavings?.LCP ?? null,
   };
 
   if (insight.earliestDiscoveryTimeTs && insight.lcpRequest) {
@@ -91,25 +110,23 @@ function getImageData(
 }
 
 export class LCPDiscovery extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-lcp-discovery`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-lcp-discovery`;
   override insightCategory: Category = Category.LCP;
   override internalName: string = 'lcp-discovery';
   override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = '';
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.shadow.adoptedStyleSheets.push(discoveryStyles);
-  }
+  override description: string = i18nString(UIStrings.description);
 
-  #adviceIcon(didFail: boolean): LitHtml.TemplateResult {
+  #adviceIcon(didFail: boolean, label: string): LitHtml.TemplateResult {
     const icon = didFail ? 'clear' : 'check-circle';
 
-    return LitHtml.html`
-      <${IconButton.Icon.Icon.litTagName}
-      name=${icon}
-      class=${didFail ? 'metric-value-bad' : 'metric-value-good'}
-      ></${IconButton.Icon.Icon.litTagName}>
+    const ariaLabel = didFail ? i18nString(UIStrings.failedAriaLabel, {PH1: label}) :
+                                i18nString(UIStrings.successAriaLabel, {PH1: label});
+    return html`
+      <devtools-icon
+        aria-label=${ariaLabel}
+        name=${icon}
+        class=${didFail ? 'metric-value-bad' : 'metric-value-good'}
+      ></devtools-icon>
     `;
   }
 
@@ -131,7 +148,7 @@ export class LCPDiscovery extends BaseInsight {
         imageResults.request.ts,
     );
 
-    const label = LitHtml.html`<div class="discovery-delay"> ${this.#renderDiscoveryDelay(delay.range)}</div>`;
+    const label = html`<div class="discovery-delay"> ${this.#renderDiscoveryDelay(delay.range)}</div>`;
 
     return [
       {
@@ -152,54 +169,82 @@ export class LCPDiscovery extends BaseInsight {
           showDuration: false,
         }],
         entry: imageResults.request,
+        renderLocation: 'ABOVE_EVENT',
       },
     ];
   }
 
+  #handleBadImage(event: Event): void {
+    const img = event.target as HTMLImageElement;
+    img.style.display = 'none';
+  }
+
+  #renderImage(imageData: LCPImageDiscoveryData): LitHtml.TemplateResult {
+    // clang-format off
+    return html`
+      <div class="lcp-element">
+        ${imageData.request.args.data.mimeType.includes('image') ?
+          html`
+        <img
+          class="element-img"
+          src=${imageData.request.args.data.url}
+          @error=${this.#handleBadImage}
+           />`: LitHtml.nothing}
+        <span class="element-img-details">
+          ${eventRef(imageData.request)}
+          <span class="element-img-details-size">${Platform.NumberUtilities.bytesToString(imageData.request.args.data.decodedBodyLength ?? 0)}</span>
+        </span>
+      </div>`;
+    // clang-format on
+  }
+
   #renderDiscovery(imageData: LCPImageDiscoveryData): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
+    return html`
         <div class="insights">
-          <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+          <devtools-performance-sidebar-insight .data=${{
             title: this.userVisibleTitle,
             description: this.description,
             internalName: this.internalName,
             expanded: this.isActive(),
+            estimatedSavingsTime: imageData.estimatedSavings,
           } as SidebarInsight.InsightDetails}
-          @insighttoggleclick=${this.onSidebarClick}
-        >
-          <div slot="insight-content" class="insight-section">
-            <div>
-              ${imageData.discoveryDelay ? LitHtml.html`<div class="discovery-delay">${this.#renderDiscoveryDelay(imageData.discoveryDelay)}</div>` : LitHtml.nothing}
-              <ul class="insight-results insight-icon-results">
-                <li class="insight-entry">
-                  ${this.#adviceIcon(imageData.shouldIncreasePriorityHint)}
-                  <span>${i18nString(UIStrings.fetchPriorityApplied)}</span>
-                </li>
-                <li class="insight-entry">
-                  ${this.#adviceIcon(imageData.shouldPreloadImage)}
-                  <span>${i18nString(UIStrings.requestDiscoverable)}</span>
-                </li>
-                <li class="insight-entry">
-                  ${this.#adviceIcon(imageData.shouldRemoveLazyLoading)}
-                  <span>${i18nString(UIStrings.lazyLoadNotApplied)}</span>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <img class="element-img" data-src=${imageData.request.args.data.url} src=${imageData.request.args.data.url}>
-              <div class="element-img-details">
-                ${Common.ParsedURL.ParsedURL.extractName(imageData.request.args.data.url ?? '')}
-                <div class="element-img-details-size">${Platform.NumberUtilities.bytesToString(imageData.request.args.data.decodedBodyLength ?? 0)}</div>
+          @insighttoggleclick=${this.onSidebarClick}>
+            <div slot="insight-content" class="insight-section">
+              <div class="insight-results">
+                <ul class="insight-icon-results">
+                  <li class="insight-entry">
+                    ${this.#adviceIcon(imageData.shouldIncreasePriorityHint, i18nString(UIStrings.fetchPriorityApplied))}
+                    <span>${i18nString(UIStrings.fetchPriorityApplied)}</span>
+                  </li>
+                  <li class="insight-entry">
+                    ${this.#adviceIcon(imageData.shouldPreloadImage, i18nString(UIStrings.requestDiscoverable))}
+                    <span>${i18nString(UIStrings.requestDiscoverable)}</span>
+                  </li>
+                  <li class="insight-entry">
+                    ${this.#adviceIcon(imageData.shouldRemoveLazyLoading, i18nString(UIStrings.lazyLoadNotApplied))}
+                    <span>${i18nString(UIStrings.lazyLoadNotApplied)}</span>
+                  </li>
+                </ul>
               </div>
+              ${this.#renderImage(imageData)}
             </div>
-          </div>
-        </${SidebarInsight.SidebarInsight}>
+          </devtools-performance-sidebar-insight>
       </div>`;
     // clang-format on
   }
 
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight =
+        Trace.Insights.Common.getInsight('LargestContentfulPaint', this.data.insights, this.data.insightSetKey);
+    if (!insight?.lcpEvent || !insight?.lcpRequest) {
+      return [];
+    }
+
+    // TODO: add entire request initiator chain?
+    return [insight.lcpEvent, insight.lcpRequest];
+  }
+
   override render(): void {
     const imageResults = getImageData(this.data.insights, this.data.insightSetKey);
     const matchesCategory = shouldRenderForCategory({

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

@@ -2,16 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './Table.js';
+
 import * as i18n from '../../../../core/i18n/i18n.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 * as SidebarInsight from './SidebarInsight.js';
-import {Table, type TableData} from './Table.js';
+import type * as SidebarInsight from './SidebarInsight.js';
+import type {TableData} from './Table.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Title of an insight that provides details about the LCP metric, broken down by phases / parts.
@@ -22,7 +26,7 @@ const UIStrings = {
    * This is displayed after a user expands the section to see more. No character length limits.
    */
   description:
-      'Learn about the [strategies for improving each phase of LCP](https://web.dev/articles/optimize-lcp#lcp-breakdown). Pages with great LCP have minimal durations for "Resource load delay" and "Element render delay".',
+      'Each [phase has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
   /**
    *@description Time to first byte title for the Largest Contentful Paint's phases timespan breakdown.
    */
@@ -58,7 +62,7 @@ interface PhaseData {
 }
 
 export class LCPPhases extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-lcp-by-phases`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-lcp-by-phases`;
   override insightCategory: Category = Category.LCP;
   override internalName: string = 'lcp-by-phase';
   override userVisibleTitle: string = i18nString(UIStrings.title);
@@ -222,9 +226,9 @@ export class LCPPhases extends BaseInsight {
     });
 
     // clang-format off
-    return LitHtml.html`
+    return html`
     <div class="insights">
-      <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+      <devtools-performance-sidebar-insight .data=${{
             title: this.userVisibleTitle,
             description: this.description,
             internalName: this.internalName,
@@ -233,15 +237,15 @@ export class LCPPhases extends BaseInsight {
         @insighttoggleclick=${this.onSidebarClick}
       >
         <div slot="insight-content" class="insight-section">
-          ${LitHtml.html`<${Table.litTagName}
+          ${html`<devtools-performance-table
             .data=${{
               insight: this,
               headers: [i18nString(UIStrings.phase), i18nString(UIStrings.percentLCP)],
               rows,
             } as TableData}>
-          </${Table.litTagName}>`}
+          </devtools-performance-table>`}
         </div>
-      </${SidebarInsight}>
+      </devtools-performance-sidebar-insight>
     </div>`;
     // clang-format on
   }
@@ -250,6 +254,21 @@ export class LCPPhases extends BaseInsight {
     return phaseData ? phaseData.length > 0 : false;
   }
 
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight =
+        Trace.Insights.Common.getInsight('LargestContentfulPaint', this.data.insights, this.data.insightSetKey);
+    if (!insight?.lcpEvent) {
+      return [];
+    }
+
+    const relatedEvents: Trace.Types.Events.Event[] = [insight.lcpEvent];
+    if (insight.lcpRequest) {
+      relatedEvents.push(insight.lcpRequest);
+    }
+
+    return relatedEvents;
+  }
+
   override render(): void {
     const phaseData = this.#getPhaseData(this.data.insights, this.data.insightSetKey);
     const matchesCategory = shouldRenderForCategory({

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

@@ -10,6 +10,8 @@ import type * as Protocol from '../../../../generated/protocol.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 
+const {html} = LitHtml;
+
 export interface NodeLinkData {
   backendNodeId: Protocol.DOM.BackendNodeId;
   options?: Common.Linkifier.Options;
@@ -66,7 +68,7 @@ export class NodeLink extends HTMLElement {
   async #render(): Promise<void> {
     const relatedNodeEl = await this.#linkify();
     LitHtml.render(
-        LitHtml.html`<div class='node-link'>
+        html`<div class='node-link'>
         ${relatedNodeEl}
       </div>`,
         this.#shadow, {host: this});