chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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

@@ -4,48 +4,51 @@
 
 import './Table.js';
 
-import type {UseModernHTTPInsightModel} from '../../../../models/trace/insights/ModernHTTP.js';
+import type {ModernHTTPInsightModel} from '../../../../models/trace/insights/ModernHTTP.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
-import type * as Overlays from '../../overlays/overlays.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
 import {createLimitedRows, renderOthersLabel, type TableData, type TableDataRow} from './Table.js';
 
-const {UIStrings, i18nString} = Trace.Insights.Models.ModernHTTP;
+const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.ModernHTTP;
 
 const {html} = Lit;
 
-export class ModernHTTP extends BaseInsightComponent<UseModernHTTPInsightModel> {
+export class ModernHTTP extends BaseInsightComponent<ModernHTTPInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-modern-http`;
   override internalName = 'modern-http';
 
+  protected override hasAskAiSupport(): boolean {
+    return true;
+  }
+
+  override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
+    return this.model?.metricSavings?.LCP ?? null;
+  }
+
+  override createOverlays(): Trace.Types.Overlays.Overlay[] {
+    return this.model?.http1Requests.map(req => createOverlayForRequest(req)) ?? [];
+  }
+
   mapToRow(req: Trace.Types.Events.SyntheticNetworkRequest): TableDataRow {
-    return {values: [eventRef(req), req.args.data.protocol], overlays: [this.#createOverlayForRequest(req)]};
+    return {values: [eventRef(req), req.args.data.protocol], overlays: [createOverlayForRequest(req)]};
   }
 
   createAggregatedTableRow(remaining: Trace.Types.Events.SyntheticNetworkRequest[]): TableDataRow {
     return {
       values: [renderOthersLabel(remaining.length), ''],
-      overlays: remaining.map(req => this.#createOverlayForRequest(req)),
+      overlays: remaining.map(req => createOverlayForRequest(req)),
     };
   }
 
-  override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
-    return this.model?.metricSavings?.LCP ?? null;
-  }
-
-  override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    return this.model?.requests.map(req => this.#createOverlayForRequest(req)) ?? [];
-  }
-
   override renderContent(): Lit.LitTemplate {
     if (!this.model) {
       return Lit.nothing;
     }
 
-    const rows = createLimitedRows(this.model.requests, this);
+    const rows = createLimitedRows(this.model.http1Requests, this);
 
     if (!rows.length) {
       return html`<div class="insight-section">${i18nString(UIStrings.noOldProtocolRequests)}</div>`;
@@ -64,14 +67,6 @@ export class ModernHTTP extends BaseInsightComponent<UseModernHTTPInsightModel>
       </div>`;
     // clang-format on
   }
-
-  #createOverlayForRequest(request: Trace.Types.Events.SyntheticNetworkRequest): Overlays.Overlays.EntryOutline {
-    return {
-      type: 'ENTRY_OUTLINE',
-      entry: request,
-      outlineReason: 'ERROR',
-    };
-  }
 }
 
 declare global {

package/front_end/panels/timeline/components/insights/NetworkDependencyTree.test.ts

@@ -0,0 +1,76 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Trace from '../../../../models/trace/trace.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+
+import * as Insights from './insights.js';
+
+describeWithEnvironment('NetworkDependencyTree', () => {
+  let component: Insights.NetworkDependencyTree.NetworkDependencyTree;
+
+  beforeEach(() => {
+    // Create a new instance of the component before each test, so the previous number of chains will be cleared.
+    component = new Insights.NetworkDependencyTree.NetworkDependencyTree();
+  });
+
+  /**
+   * Helper function to create a dummy CriticalRequestNode.
+   * For the purpose of these unit tests, we only care about the |children| field.
+   */
+  function createMockNode(options: {
+    children?: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode[],
+  } = {}): Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode {
+    return {
+      children: options.children ?? [],
+      relatedRequests: new Set(),
+      isLongest: false,
+      timeFromInitialRequest: Trace.Types.Timing.Micro(0),
+      request: createMockSyntheticNetworkRequest(),
+    };
+  }
+
+  function createMockSyntheticNetworkRequest(): Trace.Types.Events.SyntheticNetworkRequest {
+    return {
+      args: {
+        data: {
+          url: 'https://example.com/',
+        },
+      },
+      name: Trace.Types.Events.Name.SYNTHETIC_NETWORK_REQUEST
+    } as Trace.Types.Events.SyntheticNetworkRequest;
+  }
+
+  it('should return a TableDataRow for a node within the chain limit', () => {
+    const children = [];
+    for (let i = 0; i < Insights.NetworkDependencyTree.MAX_CHAINS_TO_SHOW; i++) {
+      const leaf = createMockNode();
+      const chain = createMockNode({children: [leaf]});
+      children.push(chain);
+    }
+    const root = createMockNode({children});
+
+    const rootRow = component.mapNetworkDependencyToRow(root);
+    assert.isNotNull(rootRow);
+    // There are 5 chains, so no chain will be hidden, so the length should be same as number of chains.
+    assert.strictEqual(rootRow.subRows?.length, children.length);
+  });
+
+  it('should return a TableDataRow for a node beyond the chain limit', () => {
+    const children = [];
+    for (let i = 0; i < Insights.NetworkDependencyTree.MAX_CHAINS_TO_SHOW + 1; i++) {
+      const leaf = createMockNode();
+      const child = createMockNode({
+        children: [leaf],
+      });
+      children.push(child);
+    }
+    const root = createMockNode({children});
+
+    const rootRow = component.mapNetworkDependencyToRow(root);
+    assert.isNotNull(rootRow);
+    // There are more than 5 chains, so will cut to 5.
+    assert.strictEqual(rootRow.subRows?.length, Insights.NetworkDependencyTree.MAX_CHAINS_TO_SHOW);
+  });
+});

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

@@ -12,38 +12,30 @@ import type {
   '../../../../models/trace/insights/NetworkDependencyTree.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
-import type * as Overlays from '../../overlays/overlays.js';
 import {md} from '../../utils/Helpers.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
 import networkDependencyTreeInsightStyles from './networkDependencyTreeInsight.css.js';
 import type {NodeLinkData} from './NodeLink.js';
-import type {TableData, TableDataRow} from './Table.js';
+import {renderOthersLabel, type TableData, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.NetworkDependencyTree;
 
 const {html} = Lit;
 
+export const MAX_CHAINS_TO_SHOW = 5;
+
 export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependencyTreeInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-long-critical-network-tree`;
   override internalName = 'long-critical-network-tree';
 
   #relatedRequests: Set<Trace.Types.Events.SyntheticNetworkRequest>|null = null;
+  #countOfChains = 0;
 
-  override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    if (!this.model) {
-      return [];
-    }
-
-    const overlays: Overlays.Overlays.TimelineOverlay[] = [];
-    getAllOverlays(this.model.rootNodes, overlays);
-
-    return overlays;
-  }
-
-  #createOverlayForChain(requests: Set<Trace.Types.Events.SyntheticNetworkRequest>): Overlays.Overlays.EntryOutline[] {
-    const overlays: Overlays.Overlays.EntryOutline[] = [];
+  #createOverlayForChain(requests: Set<Trace.Types.Events.SyntheticNetworkRequest>):
+      Trace.Types.Overlays.EntryOutline[] {
+    const overlays: Trace.Types.Overlays.EntryOutline[] = [];
     requests.forEach(entry => overlays.push({
       type: 'ENTRY_OUTLINE',
       entry,
@@ -75,11 +67,29 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     // clang-format on
   }
 
-  #mapNetworkDependencyToRow(node: CriticalRequestNode): TableDataRow {
+  mapNetworkDependencyToRow(node: CriticalRequestNode): TableDataRow|null {
+    // Check early if we've exceeded the maximum number of chains to show.
+    // If so, and this is a leaf node, increment count and then skip rendering.
+    // Otherwise, simply skip rendering.
+    if (this.#countOfChains >= MAX_CHAINS_TO_SHOW) {
+      if (node.children.length === 0) {
+        // This still counts the chain even if not rendered, so we can count how many chains are collapsed.
+        this.#countOfChains++;
+      }
+      return null;
+    }
+
+    // If this is a leaf node and we haven't exceeded the max chains, increment the count.
+    // This ensures we only count chains that will actually be rendered (or at least considered for rendering).
+    if (node.children.length === 0) {
+      this.#countOfChains++;
+    }
+
     return {
       values: [this.#renderNetworkTreeRow(node)],
       overlays: this.#createOverlayForChain(node.relatedRequests),
-      subRows: node.children.map(child => this.#mapNetworkDependencyToRow(child)),
+      // Filter out the empty rows otherwise the `Table`component will render a super short row
+      subRows: node.children.map(child => this.mapNetworkDependencyToRow(child)).filter(row => row !== null),
     };
   }
 
@@ -91,9 +101,16 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     const rows: TableDataRow[] = [{
       // Add one empty row so the main document request can also has a left border
       values: [],
-      subRows: nodes.map(node => this.#mapNetworkDependencyToRow(node))
+      // Filter out the empty rows otherwise the `Table` component will render a super short row
+      subRows: nodes.map(node => this.mapNetworkDependencyToRow(node)).filter(row => row !== null),
     }];
 
+    if (this.#countOfChains > MAX_CHAINS_TO_SHOW) {
+      rows.push({
+        values: [renderOthersLabel(this.#countOfChains - MAX_CHAINS_TO_SHOW)],
+      });
+    }
+
     // clang-format off
     return html`
       <devtools-performance-table
@@ -290,17 +307,6 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
   }
 }
 
-function getAllOverlays(nodes: CriticalRequestNode[], overlays: Overlays.Overlays.TimelineOverlay[]): void {
-  nodes.forEach(node => {
-    overlays.push({
-      type: 'ENTRY_OUTLINE',
-      entry: node.request,
-      outlineReason: 'ERROR',
-    });
-    getAllOverlays(node.children, overlays);
-  });
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-performance-long-critical-network-tree': NetworkDependencyTree;

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

@@ -0,0 +1,113 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// 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 * as SDK from '../../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../../generated/protocol.js';
+import {raf, renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
+import {createTarget} from '../../../../testing/EnvironmentHelpers.js';
+import {
+  clearAllMockConnectionResponseHandlers,
+  describeWithMockConnection,
+  setMockConnectionResponseHandler
+} from '../../../../testing/MockConnection.js';
+
+import * as Insights from './insights.js';
+
+function nodeId<T extends Protocol.DOM.BackendNodeId|Protocol.DOM.NodeId>(x: number): T {
+  return x as T;
+}
+
+describeWithMockConnection('NodeLink', () => {
+  beforeEach(async () => {
+    clearAllMockConnectionResponseHandlers();
+  });
+
+  it('renders a node link', async () => {
+    const linkifyStub = sinon.stub(Common.Linkifier.Linkifier, 'linkify').callsFake(() => {
+      const elem = document.createElement('div');
+      elem.classList.add('fake-linkify-node');
+      return Promise.resolve(elem);
+    });
+
+    // Create a mock target, dom model, document and node.
+    const target = createTarget();
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(domModel);
+    const documentNode = {nodeId: nodeId(1)};
+    const domNode = new SDK.DOMModel.DOMNode(domModel);
+    domNode.id = nodeId(2);
+    // Set related CDP methods responses to return our mock document and node.
+    setMockConnectionResponseHandler('DOM.pushNodesByBackendIdsToFrontend', () => ({nodeIds: [domNode.id]}));
+    setMockConnectionResponseHandler('DOM.getDocument', () => ({root: documentNode}));
+
+    // Register the mock document and node in DOMModel, these use the mock responses set above.
+    await domModel.requestDocument();
+    domModel.registerNode(domNode);
+
+    const component = new Insights.NodeLink.NodeLink();
+    component.data = {
+      backendNodeId: nodeId(2),
+      frame: domNode.frameId() as string,
+    };
+    renderElementIntoDOM(component);
+    // await new Promise(r => setTimeout(r, 1000));
+    await raf();
+    assert.isOk(component.shadowRoot);
+
+    // Check that linkify was called with the right Node and we rendered the linkified node.
+    sinon.assert.calledWith(linkifyStub, domNode);
+    assert.instanceOf(component.shadowRoot.querySelector('.fake-linkify-node'), Element);
+  });
+
+  it('falls back to an HTML snippet if one is passed in', async () => {
+    // Create a mock target, dom model, document and node.
+    const target = createTarget();
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(domModel);
+    const documentNode = {nodeId: nodeId(1)};
+    const domNode = new SDK.DOMModel.DOMNode(domModel);
+    domNode.id = nodeId(2);
+    // Return an empty array of NodeIds so that the frontend resolution fails.
+    setMockConnectionResponseHandler('DOM.pushNodesByBackendIdsToFrontend', () => ({nodeIds: []}));
+    setMockConnectionResponseHandler('DOM.getDocument', () => ({root: documentNode}));
+    await domModel.requestDocument();
+    domModel.registerNode(domNode);
+
+    const component = new Insights.NodeLink.NodeLink();
+    component.data = {
+      backendNodeId: nodeId(2),
+      frame: domNode.frameId() as string,
+      fallbackHtmlSnippet: '<p class="fallback">fallback html</p>'
+    };
+    renderElementIntoDOM(component);
+    await raf();
+    const fallback = component.shadowRoot?.querySelector('pre');
+    assert.isOk(fallback);
+    assert.strictEqual(fallback.innerText, '<p class=\"fallback\">fallback html</p>');
+  });
+
+  it('falls back to text if that is supplied', async () => {
+    // Create a mock target, dom model, document and node.
+    const target = createTarget();
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(domModel);
+    const documentNode = {nodeId: nodeId(1)};
+    const domNode = new SDK.DOMModel.DOMNode(domModel);
+    domNode.id = nodeId(2);
+    // Return an empty array of NodeIds so that the frontend resolution fails.
+    setMockConnectionResponseHandler('DOM.pushNodesByBackendIdsToFrontend', () => ({nodeIds: []}));
+    setMockConnectionResponseHandler('DOM.getDocument', () => ({root: documentNode}));
+    await domModel.requestDocument();
+    domModel.registerNode(domNode);
+
+    const component = new Insights.NodeLink.NodeLink();
+    component.data = {backendNodeId: nodeId(2), frame: domNode.frameId() as string, fallbackText: 'Fallback text'};
+    renderElementIntoDOM(component);
+    await raf();
+    const fallback = component.shadowRoot?.querySelector('span');
+    assert.isOk(fallback);
+    assert.strictEqual(fallback.innerText, 'Fallback text');
+  });
+});

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

@@ -6,9 +6,12 @@
 // TODO: move to ui/components/node_link?
 
 import * as Common from '../../../../core/common/common.js';
+import type * as Platform from '../../../../core/platform/platform.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
-import * as Trace from '../../../../models/trace/trace.js';
+import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as LegacyComponents from '../../../../ui/legacy/components/utils/utils.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 const {html} = Lit;
@@ -17,14 +20,19 @@ export interface NodeLinkData {
   backendNodeId: Protocol.DOM.BackendNodeId;
   frame: string;
   options?: Common.Linkifier.Options;
+  /**
+   * URL to display if backendNodeId cannot be resolved (ie for traces loaded from disk).
+   * Will be given to linkifyURL. Use this or one of the other fallback fields.
+   */
+  fallbackUrl?: Platform.DevToolsPath.UrlString;
   /**
    * Text to display if backendNodeId cannot be resolved (ie for traces loaded from disk).
-   * Displayed as monospace code. Use this or the next field.
+   * Displayed as monospace code.
    */
   fallbackHtmlSnippet?: string;
   /**
    * Text to display if backendNodeId cannot be resolved (ie for traces loaded from disk).
-   * Displayed as plain text. Use this or the previous field.
+   * Displayed as plain text.
    */
   fallbackText?: string;
 }
@@ -34,13 +42,20 @@ export class NodeLink extends HTMLElement {
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   #frame?: string;
   #options?: Common.Linkifier.Options;
+  #fallbackUrl?: Platform.DevToolsPath.UrlString;
   #fallbackHtmlSnippet?: string;
   #fallbackText?: string;
+  /**
+   * Track the linkified Node for a given backend NodeID to avoid repeated lookups on re-render.
+   * Also tracks if we fail to resolve a node, to ensure we don't try on each subsequent re-render.
+   */
+  #linkifiedNodeForBackendId = new Map<Protocol.DOM.BackendNodeId, Node|'NO_NODE_FOUND'>();
 
   set data(data: NodeLinkData) {
     this.#backendNodeId = data.backendNodeId;
     this.#frame = data.frame;
     this.#options = data.options;
+    this.#fallbackUrl = data.fallbackUrl;
     this.#fallbackHtmlSnippet = data.fallbackHtmlSnippet;
     this.#fallbackText = data.fallbackText;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
@@ -50,24 +65,36 @@ export class NodeLink extends HTMLElement {
     if (this.#backendNodeId === undefined) {
       return;
     }
+    const fromCache = this.#linkifiedNodeForBackendId.get(this.#backendNodeId);
+    if (fromCache) {
+      if (fromCache === 'NO_NODE_FOUND') {
+        return undefined;
+      }
+      return fromCache;
+    }
 
-    // Users of `NodeLink` do not have a parsed trace so this is a workaround. This
-    // is an abuse of this API, but it's currently alright since the first parameter
-    // is only used as a cache key.
-    const domNodesMap = await Trace.Extras.FetchNodes.domNodesForMultipleBackendNodeIds(
-        this as unknown as Trace.Handlers.Types.ParsedTrace, [this.#backendNodeId]);
-    const node = domNodesMap.get(this.#backendNodeId);
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([this.#backendNodeId]));
+    const node = domNodesMap?.get(this.#backendNodeId);
     if (!node) {
+      this.#linkifiedNodeForBackendId.set(this.#backendNodeId, 'NO_NODE_FOUND');
       return;
     }
 
     if (node.frameId() !== this.#frame) {
+      this.#linkifiedNodeForBackendId.set(this.#backendNodeId, 'NO_NODE_FOUND');
       return;
     }
 
     // TODO: it'd be nice if we could specify what attributes to render,
     // ex for the Viewport insight: <meta content="..."> (instead of just <meta>)
-    return await Common.Linkifier.Linkifier.linkify(node, this.#options);
+    const linkedNode = await Common.Linkifier.Linkifier.linkify(node, this.#options);
+    this.#linkifiedNodeForBackendId.set(this.#backendNodeId, linkedNode);
+    return linkedNode;
   }
 
   async #render(): Promise<void> {
@@ -76,6 +103,19 @@ export class NodeLink extends HTMLElement {
     let template;
     if (relatedNodeEl) {
       template = html`<div class='node-link'>${relatedNodeEl}</div>`;
+    } else if (this.#fallbackUrl) {
+      const MAX_URL_LENGTH = 20;
+      const options = {
+        tabStop: true,
+        showColumnNumber: false,
+        inlineFrameIndex: 0,
+        maxLength: MAX_URL_LENGTH,
+      };
+      const linkEl = LegacyComponents.Linkifier.Linkifier.linkifyURL(this.#fallbackUrl, options);
+      template = html`<div class='node-link'>
+        <style>${Buttons.textButtonStyles}</style>
+        ${linkEl}
+      </div>`;
     } else if (this.#fallbackHtmlSnippet) {
       // TODO: Use CodeHighlighter.
       template = html`<pre style='text-wrap: auto'>${this.#fallbackHtmlSnippet}</pre>`;

package/front_end/panels/timeline/components/insights/README.md

@@ -52,7 +52,7 @@ override renderContent(): LitHtml.LitTemplate {
 
 If your component should render overlays when it is expanded, you will need to define those in the `createOverlays` method.
 
-This should return an array of `Overlays.Overlays.TimelineOverlay` objects. When your insight is expanded/collapsed, they will automatically be created / destroyed.
+This should return an array of `Trace.Types.Overlays.TimelineOverlay` objects. When your insight is expanded/collapsed, they will automatically be created / destroyed.
 
 ## 4. Custom styling
 

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

@@ -6,18 +6,18 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import type {RenderBlockingInsightModel} from '../../../../models/trace/insights/RenderBlocking.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
-import type * as Overlays from '../../overlays/overlays.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
 import {createLimitedRows, renderOthersLabel, type TableDataRow} from './Table.js';
 
-const {UIStrings, i18nString} = Trace.Insights.Models.RenderBlocking;
+const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.RenderBlocking;
 
 const {html} = Lit;
 
 export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
   static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-render-blocking-requests`;
+  override internalName = 'render-blocking-requests';
 
   mapToRow(request: Trace.Types.Events.SyntheticNetworkRequest): TableDataRow {
     return {
@@ -25,39 +25,21 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
         eventRef(request),
         i18n.TimeUtilities.formatMicroSecondsTime(request.dur),
       ],
-      overlays: [this.#createOverlayForRequest(request)],
+      overlays: [createOverlayForRequest(request)],
     };
   }
 
   createAggregatedTableRow(remaining: Trace.Types.Events.SyntheticNetworkRequest[]): TableDataRow {
     return {
       values: [renderOthersLabel(remaining.length), ''],
-      overlays: remaining.map(r => this.#createOverlayForRequest(r)),
+      overlays: remaining.map(r => createOverlayForRequest(r)),
     };
   }
 
-  override internalName = 'render-blocking-requests';
-
   protected override hasAskAiSupport(): boolean {
     return !!this.model;
   }
 
-  override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    if (!this.model) {
-      return [];
-    }
-
-    return this.model.renderBlockingRequests.map(request => this.#createOverlayForRequest(request));
-  }
-
-  #createOverlayForRequest(request: Trace.Types.Events.SyntheticNetworkRequest): Overlays.Overlays.EntryOutline {
-    return {
-      type: 'ENTRY_OUTLINE',
-      entry: request,
-      outlineReason: 'ERROR',
-    };
-  }
-
   override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
     return this.model?.metricSavings?.FCP ?? null;
   }

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

@@ -48,8 +48,7 @@ export class InsightProvideOverlays extends Event {
   static readonly eventName = 'insightprovideoverlays';
 
   constructor(
-      public overlays: Overlays.Overlays.TimelineOverlay[],
-      public options: Overlays.Overlays.TimelineOverlaySetOptions) {
+      public overlays: Trace.Types.Overlays.Overlay[], public options: Overlays.Overlays.TimelineOverlaySetOptions) {
     super(InsightProvideOverlays.eventName, {bubbles: true, composed: true});
   }
 }