chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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

@@ -0,0 +1,255 @@
+// Copyright 2024 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 type * as Common from '../../../core/common/common.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Handlers from '../handlers/handlers.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+import {calculateDocFirstByteTs} from './Common.js';
+import {
+  InsightCategory,
+  InsightKeys,
+  type InsightModel,
+  type InsightSetContext,
+  InsightWarning,
+  type PartialInsightModel,
+} from './types.js';
+
+export const UIStrings = {
+  /**
+   * @description Title of an insight that provides details about the LCP metric, broken down by parts.
+   */
+  title: 'LCP breakdown',
+  /**
+   * @description Description of a DevTools insight that presents a breakdown for the LCP metric by subparts.
+   * This is displayed after a user expands the section to see more. No character length limits.
+   */
+  description:
+      'Each [subpart 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 subparts timespan breakdown.
+   */
+  timeToFirstByte: 'Time to first byte',
+  /**
+   * @description Resource load delay title for the Largest Contentful Paint subparts timespan breakdown.
+   */
+  resourceLoadDelay: 'Resource load delay',
+  /**
+   * @description Resource load duration title for the Largest Contentful Paint subparts timespan breakdown.
+   */
+  resourceLoadDuration: 'Resource load duration',
+  /**
+   * @description Element render delay title for the Largest Contentful Paint subparts timespan breakdown.
+   */
+  elementRenderDelay: 'Element render delay',
+  /**
+   * @description Label used for the subpart (section) of a larger duration.
+   */
+  subpart: 'Subpart',
+  /**
+   * @description Label used for the duration a single subpart (section) takes up of a larger duration.
+   */
+  duration: 'Duration',
+  /**
+   * @description Label used for the duration a single subpart (section) takes up of a larger duration. The value will be the 75th percentile of aggregate data. "Field" means that the data was collected from real users in the field as opposed to the developers local environment. "Field" is synonymous with "Real user data".
+   */
+  fieldDuration: 'Field p75',
+  /**
+   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
+   */
+  noLcp: 'No LCP detected',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPBreakdown.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+// A TraceWindow plus its UIString.
+export type Subpart = Types.Timing.TraceWindowMicro&{label: Common.UIString.LocalizedString};
+interface LCPSubparts {
+  /**
+   * The time between when the user initiates loading the page until when
+   * the browser receives the first byte of the html response.
+   */
+  ttfb: Subpart;
+  /**
+   * The time between ttfb and the LCP request request being started.
+   * For a text LCP, this is undefined given no request is loaded.
+   */
+  loadDelay?: Subpart;
+  /**
+   * The time it takes to load the LCP request.
+   */
+  loadDuration?: Subpart;
+  /**
+   * The time between when the LCP request finishes loading and when
+   * the LCP element is rendered.
+   */
+  renderDelay: Subpart;
+}
+
+export function isLCPBreakdown(model: InsightModel): model is LCPBreakdownInsightModel {
+  return model.insightKey === 'LCPBreakdown';
+}
+export type LCPBreakdownInsightModel = InsightModel<typeof UIStrings, {
+  lcpMs?: Types.Timing.Milli,
+  lcpTs?: Types.Timing.Milli,
+  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,
+  /** The network request for the LCP image, if there was one. */
+  lcpRequest?: Types.Events.SyntheticNetworkRequest,
+  subparts?: LCPSubparts,
+}>;
+
+function anyValuesNaN(...values: number[]): boolean {
+  return values.some(v => Number.isNaN(v));
+}
+/**
+ * Calculates the 2–4 subparts of an LCP as bounds.
+ * Will return `null` if any required values were missing. We don't ever expect
+ * them to be missing on newer traces, but old trace files may lack some of the
+ * data we rely on, so we want to handle that case.
+ */
+function determineSubparts(
+    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,
+    lcpEvent: Types.Events.LargestContentfulPaintCandidate,
+    lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPSubparts|null {
+  const firstDocByteTs = calculateDocFirstByteTs(docRequest);
+  if (firstDocByteTs === null) {
+    return null;
+  }
+
+  const ttfb = Helpers.Timing.traceWindowFromMicroSeconds(nav.ts, firstDocByteTs) as Subpart;
+  ttfb.label = i18nString(UIStrings.timeToFirstByte);
+
+  let renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpEvent.ts) as Subpart;
+  renderDelay.label = i18nString(UIStrings.elementRenderDelay);
+
+  // If the LCP is text, we don't have a request, so just 2 subparts.
+  if (!lcpRequest) {
+    /**
+     * Text LCP. 2 subparts, thus 3 timestamps
+     *
+     *       |          ttfb           |             renderDelay              |
+     *                                                                        ^ lcpEvent.ts
+     *                                 ^ firstDocByteTs
+     *       ^ navStartTs
+     */
+    if (anyValuesNaN(ttfb.range, renderDelay.range)) {
+      return null;
+    }
+    return {ttfb, renderDelay};
+  }
+
+  /**
+   * Image LCP. 4 subparts means 5 timestamps
+   *
+   *       |  ttfb   |    loadDelay     |     loadTime    |    renderDelay    |
+   *                                                                          ^ lcpEvent.ts
+   *                                                      ^ lcpReqEndTs
+   *                                    ^ lcpStartTs
+   *                 ^ ttfbTs
+   *       ^ navStartTs
+   */
+  const lcpStartTs = lcpRequest.ts;
+  const lcpReqEndTs = lcpRequest.args.data.syntheticData.finishTime;
+
+  const loadDelay = Helpers.Timing.traceWindowFromMicroSeconds(ttfb.max, lcpStartTs) as Subpart;
+  const loadDuration = Helpers.Timing.traceWindowFromMicroSeconds(lcpStartTs, lcpReqEndTs) as Subpart;
+  renderDelay = Helpers.Timing.traceWindowFromMicroSeconds(lcpReqEndTs, lcpEvent.ts) as Subpart;
+  loadDelay.label = i18nString(UIStrings.resourceLoadDelay);
+  loadDuration.label = i18nString(UIStrings.resourceLoadDuration);
+  renderDelay.label = i18nString(UIStrings.elementRenderDelay);
+  if (anyValuesNaN(ttfb.range, loadDelay.range, loadDuration.range, renderDelay.range)) {
+    return null;
+  }
+
+  return {
+    ttfb,
+    loadDelay,
+    loadDuration,
+    renderDelay,
+  };
+}
+
+function finalize(partialModel: PartialInsightModel<LCPBreakdownInsightModel>): LCPBreakdownInsightModel {
+  const relatedEvents = [];
+  if (partialModel.lcpEvent) {
+    relatedEvents.push(partialModel.lcpEvent);
+  }
+  if (partialModel.lcpRequest) {
+    relatedEvents.push(partialModel.lcpRequest);
+  }
+  return {
+    insightKey: InsightKeys.LCP_BREAKDOWN,
+    strings: UIStrings,
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.LCP,
+    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',
+    ...partialModel,
+    relatedEvents,
+  };
+}
+
+export function generateInsight(
+    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPBreakdownInsightModel {
+  if (!context.navigation) {
+    return finalize({});
+  }
+
+  const networkRequests = parsedTrace.NetworkRequests;
+
+  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);
+  if (!frameMetrics) {
+    throw new Error('no frame metrics');
+  }
+
+  const navMetrics = frameMetrics.get(context.navigationId);
+  if (!navMetrics) {
+    throw new Error('no navigation metrics');
+  }
+  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);
+  const lcpEvent = metricScore?.event;
+  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+    return finalize({warnings: [InsightWarning.NO_LCP]});
+  }
+
+  // This helps calculate the subparts.
+  const lcpMs = Helpers.Timing.microToMilli(metricScore.timing);
+  // This helps position things on the timeline's UI accurately for a trace.
+  const lcpTs = metricScore.event?.ts ? Helpers.Timing.microToMilli(metricScore.event?.ts) : undefined;
+  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);
+
+  const docRequest = networkRequests.byId.get(context.navigationId);
+  if (!docRequest) {
+    return finalize({lcpMs, lcpTs, lcpEvent, lcpRequest, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
+  }
+
+  return finalize({
+    lcpMs,
+    lcpTs,
+    lcpEvent,
+    lcpRequest,
+    subparts: determineSubparts(context.navigation, docRequest, lcpEvent, lcpRequest) ?? undefined,
+  });
+}
+
+export function createOverlays(model: LCPBreakdownInsightModel): Types.Overlays.Overlay[] {
+  if (!model.subparts || !model.lcpTs) {
+    return [];
+  }
+
+  const overlays: Types.Overlays.Overlay[] = [
+    {
+      type: 'TIMESPAN_BREAKDOWN',
+      sections: Object.values(model.subparts)
+                    .map((subpart: Subpart) => ({bounds: subpart, label: subpart.label, showDuration: true})),
+    },
+  ];
+  if (model.lcpRequest) {
+    overlays.push({type: 'ENTRY_OUTLINE', entry: model.lcpRequest, outlineReason: 'INFO'});
+  }
+
+  return overlays;
+}

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

@@ -7,6 +7,7 @@ import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
+import {calculateDocFirstByteTs} from './Common.js';
 import {
   type Checklist,
   InsightCategory,
@@ -19,11 +20,11 @@ import {
 
 export const UIStrings = {
   /**
-   *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
+   * @description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
    */
   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 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)',
@@ -116,7 +117,7 @@ export function generateInsight(
     return finalize({warnings: [InsightWarning.NO_LCP]});
   }
 
-  const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
+  const docRequest = networkRequests.byId.get(context.navigationId);
   if (!docRequest) {
     return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
   }
@@ -135,11 +136,8 @@ export function generateInsight(
 
   const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;
   const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;
-  // This is the earliest discovery time an LCP request could have - it's TTFB.
-  const earliestDiscoveryTime = docRequest?.args.data.timing ?
-      Helpers.Timing.secondsToMicro(docRequest.args.data.timing.requestTime) +
-          Helpers.Timing.milliToMicro(docRequest.args.data.timing.receiveHeadersStart) :
-      undefined;
+  // This is the earliest discovery time an LCP request could have - it's TTFB (as an absolute timestamp).
+  const earliestDiscoveryTime = calculateDocFirstByteTs(docRequest);
 
   const priorityHintFound = imageFetchPriorityHint === 'high';
 
@@ -158,3 +156,81 @@ export function generateInsight(
     },
   });
 }
+
+interface LCPImageDiscoveryData {
+  checklist: Exclude<LCPDiscoveryInsightModel['checklist'], undefined>;
+  request: Types.Events.SyntheticNetworkRequest;
+  discoveryDelay: Types.Timing.Micro|null;
+  estimatedSavings: Types.Timing.Milli|null;
+}
+
+/**
+ * TODO: this extra transformation (getImageData) should not be necessary.
+ */
+export function getImageData(model: LCPDiscoveryInsightModel): LCPImageDiscoveryData|null {
+  if (!model.lcpRequest || !model.checklist) {
+    return null;
+  }
+
+  const shouldIncreasePriorityHint = !model.checklist.priorityHinted.value;
+  const shouldPreloadImage = !model.checklist.requestDiscoverable.value;
+  const shouldRemoveLazyLoading = !model.checklist.eagerlyLoaded.value;
+
+  const imageLCP = shouldIncreasePriorityHint !== undefined && shouldPreloadImage !== undefined &&
+      shouldRemoveLazyLoading !== undefined;
+
+  // Shouldn't render anything if lcp insight is null or lcp is text.
+  if (!imageLCP) {
+    return null;
+  }
+
+  const data: LCPImageDiscoveryData = {
+    checklist: model.checklist,
+    request: model.lcpRequest,
+    discoveryDelay: null,
+    estimatedSavings: model.metricSavings?.LCP ?? null,
+  };
+
+  if (model.earliestDiscoveryTimeTs && model.lcpRequest) {
+    const discoveryDelay = model.lcpRequest.ts - model.earliestDiscoveryTimeTs;
+    data.discoveryDelay = Types.Timing.Micro(discoveryDelay);
+  }
+
+  return data;
+}
+
+export function createOverlays(model: LCPDiscoveryInsightModel): Types.Overlays.Overlay[] {
+  const imageResults = getImageData(model);
+  if (!imageResults?.discoveryDelay) {
+    return [];
+  }
+
+  const delay = Helpers.Timing.traceWindowFromMicroSeconds(
+      Types.Timing.Micro(imageResults.request.ts - imageResults.discoveryDelay),
+      imageResults.request.ts,
+  );
+
+  return [
+    {
+      type: 'ENTRY_OUTLINE',
+      entry: imageResults.request,
+      outlineReason: 'ERROR',
+    },
+    {
+      type: 'CANDY_STRIPED_TIME_RANGE',
+      bounds: delay,
+      entry: imageResults.request,
+    },
+    {
+      type: 'TIMESPAN_BREAKDOWN',
+      sections: [{
+        bounds: delay,
+        // This is overridden in the component.
+        label: `${imageResults.discoveryDelay} microseconds`,
+        showDuration: false,
+      }],
+      entry: imageResults.request,
+      renderLocation: 'ABOVE_EVENT',
+    },
+  ];
+}

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

@@ -6,6 +6,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as LegacyJavaScriptLib from '../../../third_party/legacy-javascript/legacy-javascript.js';
 import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
+import type * as Types from '../types/types.js';
 
 import {estimateCompressionRatioForScript, metricSavingsForWastedBytes} from './Common.js';
 import {
@@ -71,13 +72,13 @@ function finalize(partialModel: PartialInsightModel<LegacyJavaScriptInsightModel
   };
 }
 
+export function isLegacyJavaScript(model: InsightModel): model is LegacyJavaScriptInsightModel {
+  return model.insightKey === InsightKeys.LEGACY_JAVASCRIPT;
+}
+
 export function generateInsight(
     parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LegacyJavaScriptInsightModel {
   const scripts = parsedTrace.Scripts.scripts.filter(script => {
-    if (!context.navigation) {
-      return false;
-    }
-
     if (script.frame !== context.frameId) {
       return false;
     }
@@ -124,3 +125,12 @@ export function generateInsight(
     wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),
   });
 }
+export function createOverlays(model: LegacyJavaScriptInsightModel): Types.Overlays.Overlay[] {
+  return [...model.legacyJavaScriptResults.keys()].map(script => script.request).filter(e => !!e).map(request => {
+    return {
+      type: 'ENTRY_OUTLINE',
+      entry: request,
+      outlineReason: 'ERROR',
+    };
+  });
+}

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

@@ -10,9 +10,9 @@ export * as DuplicatedJavaScript from './DuplicatedJavaScript.js';
 export * as FontDisplay from './FontDisplay.js';
 export * as ForcedReflow from './ForcedReflow.js';
 export * as ImageDelivery from './ImageDelivery.js';
-export * as InteractionToNextPaint from './InteractionToNextPaint.js';
+export * as INPBreakdown from './INPBreakdown.js';
+export * as LCPBreakdown from './LCPBreakdown.js';
 export * as LCPDiscovery from './LCPDiscovery.js';
-export * as LCPPhases from './LCPPhases.js';
 export * as LegacyJavaScript from './LegacyJavaScript.js';
 export * as ModernHTTP from './ModernHTTP.js';
 export * as NetworkDependencyTree from './NetworkDependencyTree.js';

package/front_end/models/trace/insights/ModernHTTP.test.ts

@@ -7,7 +7,7 @@ import {getFirstOrError, getInsightOrError, processTrace} from '../../../testing
 import * as Trace from '../trace.js';
 
 import * as ModernHTTP from './ModernHTTP.js';
-const {determineNonHttp2Resources} = ModernHTTP;
+const {determineHttp1Requests: determineNonHttp2Resources} = ModernHTTP;
 
 describeWithEnvironment('Cache', function() {
   describe('determineNonHttp2Resources', () => {
@@ -35,6 +35,7 @@ describeWithEnvironment('Cache', function() {
         createdEntityCache: new Map(),
         entityByEvent: new Map(),
         eventsByEntity: new Map(),
+        entityByUrlCache: new Map(),
       };
       for (const event of events) {
         Trace.Handlers.Helpers.addEventToEntityMapping(event, entityMappings);
@@ -328,7 +329,7 @@ describeWithEnvironment('Cache', function() {
     const {data, insights} = await processTrace(this, 'http1.1.json.gz');
     const insight =
         getInsightOrError('ModernHTTP', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
-    assert.deepEqual(insight.requests.map(r => r.args.data.url), [
+    assert.deepEqual(insight.http1Requests.map(r => r.args.data.url), [
       'https://ads.jetpackdigital.com/sites/_uploads/1742278386bg_opt_640x350-avif.avif',
       'https://ads.jetpackdigital.com/sites/_uploads/1583540859Play.png',
       'https://ads.jetpackdigital.com/sites/_uploads/1583540859Muted.png',

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

@@ -39,16 +39,21 @@ export const UIStrings = {
   /**
    * @description Text explaining that there were not requests that were slowed down by using HTTP/1.1. "HTTP/1.1" should not be translated.
    */
-  noOldProtocolRequests: 'No requests used HTTP/1.1'
+  noOldProtocolRequests:
+      'No requests used HTTP/1.1, or its current use of HTTP/1.1 does not present a significant optimization opportunity. HTTP/1.1 requests are only flagged if six or more static assets originate from the same origin, and they are not served from a local development environment or a third-party source.'
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/ModernHTTP.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export type UseModernHTTPInsightModel = InsightModel<typeof UIStrings, {
-  requests: Types.Events.SyntheticNetworkRequest[],
+export type ModernHTTPInsightModel = InsightModel<typeof UIStrings, {
+  http1Requests: Types.Events.SyntheticNetworkRequest[],
 }>;
 
+export function isModernHTTP(model: InsightModel): model is ModernHTTPInsightModel {
+  return model.insightKey === InsightKeys.MODERN_HTTP;
+}
+
 /**
  * Determines whether a network request is a "static resource" that would benefit from H2 multiplexing.
  * XHRs, tracking pixels, etc generally don't benefit as much because they aren't requested en-masse
@@ -99,10 +104,10 @@ function isMultiplexableStaticAsset(
  * [2] https://www.twilio.com/blog/2017/10/http2-issues.html
  * [3] https://www.cachefly.com/http-2-is-not-a-magic-bullet/
  */
-export function determineNonHttp2Resources(
+export function determineHttp1Requests(
     requests: Types.Events.SyntheticNetworkRequest[], entityMappings: Handlers.Helpers.EntityMappings,
     firstPartyEntity: Handlers.Helpers.Entity|null): Types.Events.SyntheticNetworkRequest[] {
-  const nonHttp2Resources: Types.Events.SyntheticNetworkRequest[] = [];
+  const http1Requests: Types.Events.SyntheticNetworkRequest[] = [];
 
   const groupedByOrigin = new Map<string, Types.Events.SyntheticNetworkRequest[]>();
   for (const record of requests) {
@@ -146,10 +151,10 @@ export function determineNonHttp2Resources(
     }
 
     seenURLs.add(request.args.data.url);
-    nonHttp2Resources.push(request);
+    http1Requests.push(request);
   }
 
-  return nonHttp2Resources;
+  return http1Requests;
 }
 
 /**
@@ -193,12 +198,12 @@ function computeWasteWithGraph(
 }
 
 function computeMetricSavings(
-    nonHttp2Requests: Types.Events.SyntheticNetworkRequest[], context: InsightSetContext): MetricSavings|undefined {
+    http1Requests: Types.Events.SyntheticNetworkRequest[], context: InsightSetContext): MetricSavings|undefined {
   if (!context.navigation || !context.lantern) {
     return;
   }
 
-  const urlsToChange = new Set(nonHttp2Requests.map(r => r.args.data.url));
+  const urlsToChange = new Set(http1Requests.map(r => r.args.data.url));
 
   const fcpGraph = context.lantern.metrics.firstContentfulPaint.optimisticGraph;
   const lcpGraph = context.lantern.metrics.largestContentfulPaint.optimisticGraph;
@@ -209,32 +214,44 @@ function computeMetricSavings(
   };
 }
 
-function finalize(partialModel: PartialInsightModel<UseModernHTTPInsightModel>): UseModernHTTPInsightModel {
+function finalize(partialModel: PartialInsightModel<ModernHTTPInsightModel>): ModernHTTPInsightModel {
   return {
-    insightKey: InsightKeys.IMAGE_DELIVERY,
+    insightKey: InsightKeys.MODERN_HTTP,
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.LCP,
-    state: partialModel.requests.length > 0 ? 'fail' : 'pass',
+    state: partialModel.http1Requests.length > 0 ? 'fail' : 'pass',
     ...partialModel,
-    relatedEvents: partialModel.requests,
+    relatedEvents: partialModel.http1Requests,
   };
 }
 
 export function generateInsight(
-    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): UseModernHTTPInsightModel {
+    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ModernHTTPInsightModel {
   const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);
 
   const contextRequests = parsedTrace.NetworkRequests.byTime.filter(isWithinContext);
 
   const entityMappings = parsedTrace.NetworkRequests.entityMappings;
   const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
-  const firstPartyEntity = Handlers.Helpers.getEntityForUrl(firstPartyUrl, entityMappings.createdEntityCache);
-  const nonHttp2Requests = determineNonHttp2Resources(contextRequests, entityMappings, firstPartyEntity ?? null);
+  const firstPartyEntity = Handlers.Helpers.getEntityForUrl(firstPartyUrl, entityMappings);
+  const http1Requests = determineHttp1Requests(contextRequests, entityMappings, firstPartyEntity ?? null);
 
   return finalize({
-    requests: nonHttp2Requests,
-    metricSavings: computeMetricSavings(nonHttp2Requests, context),
+    http1Requests,
+    metricSavings: computeMetricSavings(http1Requests, context),
   });
 }
+
+export function createOverlayForRequest(request: Types.Events.SyntheticNetworkRequest): Types.Overlays.EntryOutline {
+  return {
+    type: 'ENTRY_OUTLINE',
+    entry: request,
+    outlineReason: 'ERROR',
+  };
+}
+
+export function createOverlays(model: ModernHTTPInsightModel): Types.Overlays.Overlay[] {
+  return model.http1Requests.map(req => createOverlayForRequest(req)) ?? [];
+}

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

@@ -130,7 +130,7 @@ describe('generatePreconnectedOrigins', () => {
     const mockParsedTrace = {
       NetworkRequests: {
         linkPreconnectEvents: [] as Trace.Types.Events.LinkPreconnect[],
-        byTime: [] as Trace.Types.Events.SyntheticNetworkRequest[],
+        byId: new Map<string, Trace.Types.Events.SyntheticNetworkRequest>(),
       },
     } as Trace.Handlers.Types.ParsedTrace;
 
@@ -376,6 +376,12 @@ describe('generatePreconnectedOrigins', () => {
       const result = Trace.Insights.Models.NetworkDependencyTree.handleLinkResponseHeader(linkHeader);
       assert.deepEqual(result, [{url: 'https://example.com', headerText: '<https://example.com>; rel="preconnect"'}]);
     });
+
+    it('should not loop infinitely on a malformed link part at the end', () => {
+      const linkHeader = '<https://a.com>; rel=preconnect, <https://b.com';
+      const result = Trace.Insights.Models.NetworkDependencyTree.handleLinkResponseHeader(linkHeader);
+      assert.deepEqual(result, [{url: 'https://a.com', headerText: '<https://a.com>; rel=preconnect'}]);
+    });
   });
 });
 
@@ -384,6 +390,7 @@ describeWithEnvironment('generatePreconnectCandidates', () => {
     NetworkRequests: {
       eventToInitiator: new Map<Trace.Types.Events.SyntheticNetworkRequest, Trace.Types.Events.Event>(),
       byTime: [] as Trace.Types.Events.SyntheticNetworkRequest[],
+      byId: new Map<string, Trace.Types.Events.SyntheticNetworkRequest>(),
       linkPreconnectEvents: [] as Trace.Types.Events.LinkPreconnect[],
     },
   } as Trace.Handlers.Types.ParsedTrace;
@@ -445,8 +452,10 @@ describeWithEnvironment('generatePreconnectCandidates', () => {
   beforeEach(() => {
     mockParsedTrace.NetworkRequests.eventToInitiator.clear();
     mockParsedTrace.NetworkRequests.byTime.length = 0;
+    mockParsedTrace.NetworkRequests.byId.clear();
     mockParsedTrace.NetworkRequests.linkPreconnectEvents.length = 0;
     mockParsedTrace.NetworkRequests.byTime.push(mainRequest);
+    mockParsedTrace.NetworkRequests.byId.set(mainRequest.args.data.requestId, mainRequest);
   });
 
   it('generates preconnect results for valid requests', () => {