chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -6,16 +6,13 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {
-  type InsightResult,
-  type InsightSetContext,
-  type RequiredData,
-} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export type CLSInsightResult = InsightResult<{
-  animationFailures?: readonly NoncompositedAnimationFailure[],
-  shifts?: Map<Types.Events.LayoutShift, LayoutShiftRootCausesData>,
-        clusters: Types.Events.SyntheticLayoutShiftCluster[],
+  animationFailures: readonly NoncompositedAnimationFailure[],
+  shifts: Map<Types.Events.SyntheticLayoutShift, LayoutShiftRootCausesData>,
+  clusters: Types.Events.SyntheticLayoutShiftCluster[],
+  worstCluster: Types.Events.SyntheticLayoutShiftCluster | undefined,
 }>;
 
 export function deps(): ['Meta', 'Animations', 'LayoutShifts', 'NetworkRequests'] {
@@ -23,12 +20,25 @@ export function deps(): ['Meta', 'Animations', 'LayoutShifts', 'NetworkRequests'
 }
 
 export const enum AnimationFailureReasons {
-  UNSUPPORTED_CSS_PROPERTY = 'UNSUPPORTED_CSS_PROPERTY',
+  ACCELERATED_ANIMATIONS_DISABLED = 'ACCELERATED_ANIMATIONS_DISABLED',
+  EFFECT_SUPPRESSED_BY_DEVTOOLS = 'EFFECT_SUPPRESSED_BY_DEVTOOLS',
+  INVALID_ANIMATION_OR_EFFECT = 'INVALID_ANIMATION_OR_EFFECT',
+  EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS = 'EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS',
+  EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE = 'EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE',
+  TARGET_HAS_INVALID_COMPOSITING_STATE = 'TARGET_HAS_INVALID_COMPOSITING_STATE',
+  TARGET_HAS_INCOMPATIBLE_ANIMATIONS = 'TARGET_HAS_INCOMPATIBLE_ANIMATIONS',
+  TARGET_HAS_CSS_OFFSET = 'TARGET_HAS_CSS_OFFSET',
+  ANIMATION_AFFECTS_NON_CSS_PROPERTIES = 'ANIMATION_AFFECTS_NON_CSS_PROPERTIES',
+  TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET =
+      'TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET',
   TRANSFROM_BOX_SIZE_DEPENDENT = 'TRANSFROM_BOX_SIZE_DEPENDENT',
-  FILTER_MAY_MOVE_PIXELS = 'FILTER_MAY_MOVE_PIXELS',
-  NON_REPLACE_COMPOSITE_MODE = 'NON_REPLACE_COMPOSITE_MODE',
-  INCOMPATIBLE_ANIMATIONS = 'INCOMPATIBLE_ANIMATIONS',
-  UNSUPPORTED_TIMING_PARAMS = 'UNSUPPORTED_TIMING_PARAMS',
+  FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS = 'FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS',
+  UNSUPPORTED_CSS_PROPERTY = 'UNSUPPORTED_CSS_PROPERTY',
+  MIXED_KEYFRAME_VALUE_TYPES = 'MIXED_KEYFRAME_VALUE_TYPES',
+  TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE = 'TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE',
+  ANIMATION_HAS_NO_VISIBLE_CHANGE = 'ANIMATION_HAS_NO_VISIBLE_CHANGE',
+  AFFECTS_IMPORTANT_PROPERTY = 'AFFECTS_IMPORTANT_PROPERTY',
+  SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY = 'SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY',
 }
 
 export interface NoncompositedAnimationFailure {
@@ -45,6 +55,10 @@ export interface NoncompositedAnimationFailure {
    * Unsupported properties.
    */
   unsupportedProperties?: Types.Events.Animation['args']['data']['unsupportedProperties'];
+  /**
+   * Animation event.
+   */
+  animation?: Types.Events.SyntheticAnimationPair;
 }
 
 /**
@@ -55,8 +69,45 @@ export interface NoncompositedAnimationFailure {
  */
 const ACTIONABLE_FAILURE_REASONS = [
   {
-    flag: 1 << 13,
-    failure: AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,
+    flag: 1 << 0,
+    failure: AnimationFailureReasons.ACCELERATED_ANIMATIONS_DISABLED,
+  },
+  {
+    flag: 1 << 1,
+    failure: AnimationFailureReasons.EFFECT_SUPPRESSED_BY_DEVTOOLS,
+  },
+  {
+    flag: 1 << 2,
+    failure: AnimationFailureReasons.INVALID_ANIMATION_OR_EFFECT,
+  },
+  {
+    flag: 1 << 3,
+    failure: AnimationFailureReasons.EFFECT_HAS_UNSUPPORTED_TIMING_PARAMS,
+  },
+  {
+    flag: 1 << 4,
+    failure: AnimationFailureReasons.EFFECT_HAS_NON_REPLACE_COMPOSITE_MODE,
+  },
+  {
+    flag: 1 << 5,
+    failure: AnimationFailureReasons.TARGET_HAS_INVALID_COMPOSITING_STATE,
+  },
+  {
+    flag: 1 << 6,
+    failure: AnimationFailureReasons.TARGET_HAS_INCOMPATIBLE_ANIMATIONS,
+  },
+  {
+    flag: 1 << 7,
+    failure: AnimationFailureReasons.TARGET_HAS_CSS_OFFSET,
+  },
+  // The failure 1 << 8 is marked as obsolete in Blink
+  {
+    flag: 1 << 9,
+    failure: AnimationFailureReasons.ANIMATION_AFFECTS_NON_CSS_PROPERTIES,
+  },
+  {
+    flag: 1 << 10,
+    failure: AnimationFailureReasons.TRANSFORM_RELATED_PROPERTY_CANNOT_BE_ACCELERATED_ON_TARGET,
   },
   {
     flag: 1 << 11,
@@ -64,19 +115,32 @@ const ACTIONABLE_FAILURE_REASONS = [
   },
   {
     flag: 1 << 12,
-    failure: AnimationFailureReasons.FILTER_MAY_MOVE_PIXELS,
+    failure: AnimationFailureReasons.FILTER_RELATED_PROPERTY_MAY_MOVE_PIXELS,
   },
   {
-    flag: 1 << 4,
-    failure: AnimationFailureReasons.NON_REPLACE_COMPOSITE_MODE,
+    flag: 1 << 13,
+    failure: AnimationFailureReasons.UNSUPPORTED_CSS_PROPERTY,
   },
+  // The failure 1 << 14 is marked as obsolete in Blink
   {
-    flag: 1 << 6,
-    failure: AnimationFailureReasons.INCOMPATIBLE_ANIMATIONS,
+    flag: 1 << 15,
+    failure: AnimationFailureReasons.MIXED_KEYFRAME_VALUE_TYPES,
   },
   {
-    flag: 1 << 3,
-    failure: AnimationFailureReasons.UNSUPPORTED_TIMING_PARAMS,
+    flag: 1 << 16,
+    failure: AnimationFailureReasons.TIMELINE_SOURCE_HAS_INVALID_COMPOSITING_STATE,
+  },
+  {
+    flag: 1 << 17,
+    failure: AnimationFailureReasons.ANIMATION_HAS_NO_VISIBLE_CHANGE,
+  },
+  {
+    flag: 1 << 18,
+    failure: AnimationFailureReasons.AFFECTS_IMPORTANT_PROPERTY,
+  },
+  {
+    flag: 1 << 19,
+    failure: AnimationFailureReasons.SVG_TARGET_HAS_INDEPENDENT_TRANSFORM_PROPERTY,
   },
 ];
 
@@ -95,10 +159,11 @@ function isInInvalidationWindow(event: Types.Events.Event, targetEvent: Types.Ev
   return eventEnd < targetEvent.ts && eventEnd >= targetEvent.ts - INVALIDATION_WINDOW;
 }
 
-export function getNonCompositedFailure(event: Types.Events.SyntheticAnimationPair): NoncompositedAnimationFailure[] {
+export function getNonCompositedFailure(animationEvent: Types.Events.SyntheticAnimationPair):
+    NoncompositedAnimationFailure[] {
   const failures: NoncompositedAnimationFailure[] = [];
-  const beginEvent = event.args.data.beginEvent;
-  const instantEvents = event.args.data.instantEvents || [];
+  const beginEvent = animationEvent.args.data.beginEvent;
+  const instantEvents = animationEvent.args.data.instantEvents || [];
   /**
    * Animation events containing composite information are ASYNC_NESTABLE_INSTANT ('n').
    * An animation may also contain multiple 'n' events, so we look through those with useful non-composited data.
@@ -106,7 +171,7 @@ export function getNonCompositedFailure(event: Types.Events.SyntheticAnimationPa
   for (const event of instantEvents) {
     const failureMask = event.args.data.compositeFailed;
     const unsupportedProperties = event.args.data.unsupportedProperties;
-    if (!failureMask || !unsupportedProperties) {
+    if (!failureMask) {
       continue;
     }
     const failureReasons =
@@ -115,6 +180,7 @@ export function getNonCompositedFailure(event: Types.Events.SyntheticAnimationPa
       name: beginEvent.args.data.displayName,
       failureReasons,
       unsupportedProperties,
+      animation: animationEvent,
     };
     failures.push(failure);
   }
@@ -311,11 +377,13 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
 
   const clusterKey = context.navigation ? context.navigationId : Types.Events.NO_NAVIGATION;
   const clusters = parsedTrace.LayoutShifts.clustersByNavigationId.get(clusterKey) ?? [];
+  const clustersByScore = clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore);
+  const worstCluster = clustersByScore.at(0);
   const layoutShifts = clusters.flatMap(cluster => cluster.events);
   const prePaintEvents = parsedTrace.LayoutShifts.prePaintEvents.filter(isWithinContext);
 
   // Get root causes.
-  const rootCausesByShift = new Map<Types.Events.LayoutShift, LayoutShiftRootCausesData>();
+  const rootCausesByShift = new Map<Types.Events.SyntheticLayoutShift, LayoutShiftRootCausesData>();
   const shiftsByPrePaint = getShiftsByPrePaintEvents(layoutShifts, prePaintEvents);
 
   for (const shift of layoutShifts) {
@@ -328,9 +396,16 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
   const animationFailures =
       getNonCompositedFailureRootCauses(compositeAnimationEvents, prePaintEvents, shiftsByPrePaint, rootCausesByShift);
 
+  const relatedEvents: Types.Events.Event[] = [...layoutShifts];
+  if (worstCluster) {
+    relatedEvents.push(worstCluster);
+  }
+
   return {
+    relatedEvents,
     animationFailures,
     shifts: rootCausesByShift,
     clusters,
+    worstCluster,
   };
 }

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

@@ -23,19 +23,19 @@ describeWithEnvironment('DocumentLatency', function() {
     const insight =
         getInsightOrError('DocumentLatency', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
     assert.strictEqual(insight.data?.redirectDuration, 1779);
-    assert.deepEqual(insight.metricSavings, {FCP: 1779, LCP: 1779});
+    assert.deepEqual(insight.metricSavings, {FCP: 1779, LCP: 1779} as Trace.Insights.Types.MetricSavings);
   });
 
-  it('reports no savings for server with low response time', async () => {
+  it('reports no savings for server with fast server response time', async () => {
     const {data, insights} = await processTrace(this, 'lantern/paul/trace.json.gz');
     const insight =
         getInsightOrError('DocumentLatency', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
     assert.strictEqual(insight.data?.serverResponseTime, 43);
     assert(!insight.data?.serverResponseTooSlow);
-    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0});
+    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0} as Trace.Insights.Types.MetricSavings);
   });
 
-  it('reports savings for server with high response time', async function() {
+  it('reports savings for server with slow server response time', async function() {
     const traceEvents = [...await TraceLoader.rawEvents(this, 'lantern/paul/trace.json.gz')];
     const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
 
@@ -46,11 +46,11 @@ describeWithEnvironment('DocumentLatency', function() {
     if (!mainRequestEvent.args.data.timing) {
       throw new Error('missing timing field');
     }
-    mainRequestEvent.args.data.timing.receiveHeadersStart =
-        Types.Timing.MilliSeconds(mainRequestEvent.args.data.timing.receiveHeadersStart + 1000);
+    mainRequestEvent.args.data.timing.receiveHeadersEnd =
+        Types.Timing.MilliSeconds(mainRequestEvent.args.data.timing.receiveHeadersEnd + 1000);
     traceEvents[mainRequestEventIndex] = mainRequestEvent;
 
-    await processor.parse(traceEvents);
+    await processor.parse(traceEvents, {isCPUProfile: false, isFreshRecording: true});
     const data = processor.parsedTrace;
     if (!data) {
       throw new Error('missing parsedTrace');
@@ -61,7 +61,7 @@ describeWithEnvironment('DocumentLatency', function() {
     const insight = Trace.Insights.InsightRunners.DocumentLatency.generateInsight(data, context);
     assert.strictEqual(insight.data?.serverResponseTime, 1043);
     assert(insight.data?.serverResponseTooSlow);
-    assert.deepEqual(insight.metricSavings, {FCP: 943, LCP: 943});
+    assert.deepEqual(insight.metricSavings, {FCP: 943, LCP: 943} as Trace.Insights.Types.MetricSavings);
   });
 
   it('reports no compression savings for compressed text', async () => {
@@ -69,7 +69,7 @@ describeWithEnvironment('DocumentLatency', function() {
     const insight =
         getInsightOrError('DocumentLatency', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
     assert.strictEqual(insight.data?.uncompressedResponseBytes, 0);
-    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0});
+    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0} as Trace.Insights.Types.MetricSavings);
   });
 
   it('reports compression savings for uncompressed text', async function() {
@@ -84,7 +84,7 @@ describeWithEnvironment('DocumentLatency', function() {
     mainRequestEvent.args.data.headers = mainRequestEvent.args.data.headers?.filter(h => h.name !== 'content-encoding');
     traceEvents[mainRequestEventIndex] = mainRequestEvent;
 
-    await processor.parse(traceEvents);
+    await processor.parse(traceEvents, {isCPUProfile: false, isFreshRecording: true});
     const data = processor.parsedTrace;
     if (!data) {
       throw new Error('missing parsedTrace');
@@ -94,6 +94,17 @@ describeWithEnvironment('DocumentLatency', function() {
     const context = createContextForNavigation(data, navigation, data.Meta.mainFrameId);
     const insight = Trace.Insights.InsightRunners.DocumentLatency.generateInsight(data, context);
     assert.strictEqual(insight.data?.uncompressedResponseBytes, 39799);
-    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0});
+    assert.deepEqual(insight.metricSavings, {FCP: 0, LCP: 0} as Trace.Insights.Types.MetricSavings);
+  });
+
+  it('reports savings for main document with many issues, many redirects', async () => {
+    const {data, insights} = await processTrace(this, 'many-redirects.json.gz');
+    const insight =
+        getInsightOrError('DocumentLatency', insights, getFirstOrError(data.Meta.navigationsByNavigationId.values()));
+    assert.strictEqual(insight.data?.redirectDuration, 6059);
+    assert.strictEqual(insight.data?.uncompressedResponseBytes, 111506);
+    assert.strictEqual(insight.data?.serverResponseTime, 2008);
+    assert(insight.data?.serverResponseTooSlow);
+    assert.deepEqual(insight.metricSavings, {FCP: 7967, LCP: 7967} as Trace.Insights.Types.MetricSavings);
   });
 });

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

@@ -2,9 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 // Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.
 // We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.
@@ -28,13 +29,14 @@ export function deps(): ['Meta', 'NetworkRequests'] {
   return ['Meta', 'NetworkRequests'];
 }
 
-function getServerTiming(request: Types.Events.SyntheticNetworkRequest): Types.Timing.MilliSeconds|null {
+function getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.MilliSeconds|null {
   const timing = request.args.data.timing;
   if (!timing) {
     return null;
   }
 
-  return Types.Timing.MilliSeconds(Math.round(timing.receiveHeadersStart - timing.sendEnd));
+  const ms = Helpers.Timing.microSecondsToMilliseconds(request.args.data.syntheticData.waiting);
+  return Math.round(ms) as Types.Timing.MilliSeconds;
 }
 
 function getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {
@@ -113,7 +115,7 @@ export function generateInsight(
     throw new Error('missing document request');
   }
 
-  const serverResponseTime = getServerTiming(documentRequest);
+  const serverResponseTime = getServerResponseTime(documentRequest);
   if (serverResponseTime === null) {
     throw new Error('missing document request timing');
   }
@@ -129,11 +131,12 @@ export function generateInsight(
   overallSavingsMs += redirectDuration;
 
   const metricSavings = {
-    FCP: overallSavingsMs,
-    LCP: overallSavingsMs,
+    FCP: overallSavingsMs as Types.Timing.MilliSeconds,
+    LCP: overallSavingsMs as Types.Timing.MilliSeconds,
   };
 
   return {
+    relatedEvents: [documentRequest],
     data: {
       serverResponseTime,
       serverResponseTooSlow,

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

@@ -6,7 +6,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export function deps(): ['Meta', 'NetworkRequests', 'LayoutShifts'] {
   return ['Meta', 'NetworkRequests', 'LayoutShifts'];
@@ -55,7 +55,11 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
 
   fonts.sort((a, b) => b.wastedTime - a.wastedTime);
 
+  const savings = Math.max(...fonts.map(f => f.wastedTime)) as Types.Timing.MilliSeconds;
+
   return {
+    relatedEvents: fonts.map(f => f.request),
     fonts,
+    metricSavings: {FCP: savings},
   };
 }

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

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 
 import * as Helpers from '../helpers/helpers.js';
-import {type SyntheticInteractionPair} from '../types/TraceEvents.js';
+import type {SyntheticInteractionPair} from '../types/TraceEvents.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export function deps(): ['UserInteractions'] {
   return ['UserInteractions'];
@@ -17,7 +17,7 @@ export type INPInsightResult = InsightResult<{
 }>;
 
 export function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): INPInsightResult {
-  const interactionEvents = parsedTrace.UserInteractions.interactionEvents.filter(event => {
+  const interactionEvents = parsedTrace.UserInteractions.interactionEventsWithNoNesting.filter(event => {
     return Helpers.Timing.eventIsInBounds(event, context.bounds);
   });
 
@@ -44,6 +44,7 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
   const highPercentileIndex = Math.min(9, Math.floor(normalizedInteractionEvents.length / 50));
 
   return {
+    relatedEvents: [normalizedInteractionEvents[0]],
     longestInteractionEvent: normalizedInteractionEvents[0],
     highPercentileInteractionEvent: normalizedInteractionEvents[highPercentileIndex],
   };

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

@@ -56,7 +56,7 @@ describeWithEnvironment('LargestContentfulPaint', function() {
     const {shouldIncreasePriorityHint, shouldPreloadImage, shouldRemoveLazyLoading} = insight;
 
     assert.strictEqual(shouldRemoveLazyLoading, false);
-    assert.strictEqual(shouldPreloadImage, true);
+    assert.strictEqual(shouldPreloadImage, false);
     assert.strictEqual(shouldIncreasePriorityHint, true);
   });
 
@@ -92,4 +92,12 @@ describeWithEnvironment('LargestContentfulPaint', function() {
       assert.strictEqual(insight.warnings?.[0], 'NO_DOCUMENT_REQUEST');
     });
   });
+
+  it('can handle old traces with missing data and return null for breakdowns of the phases', async () => {
+    const {data, insights} = await processTrace(this, 'multiple-navigations.json.gz');
+    const firstNav = getFirstOrError(data.Meta.navigationsByNavigationId.values());
+    const insight = getInsightOrError('LargestContentfulPaint', insights, firstNav);
+    // This insight has invalid phase data, so we expect the value to be undefined.
+    assert.isUndefined(insight.phases);
+  });
 });

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

@@ -48,9 +48,18 @@ export type LCPInsightResult = InsightResult<{
   earliestDiscoveryTimeTs?: Types.Timing.MicroSeconds,
 }>;
 
+function anyValuesNaN(...values: number[]): boolean {
+  return values.some(v => Number.isNaN(v));
+}
+/**
+ * Calculates the 4 phases of an LCP and the timings of each.
+ * 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 breakdownPhases(
     nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,
-    lcpMs: Types.Timing.MilliSeconds, lcpRequest: Types.Events.SyntheticNetworkRequest|null): LCPPhases {
+    lcpMs: Types.Timing.MilliSeconds, lcpRequest: Types.Events.SyntheticNetworkRequest|null): LCPPhases|null {
   const docReqTiming = docRequest.args.data.timing;
   if (!docReqTiming) {
     throw new Error('no timing for document request');
@@ -63,6 +72,9 @@ function breakdownPhases(
   let renderDelay = Types.Timing.MilliSeconds(lcpMs - ttfb);
 
   if (!lcpRequest) {
+    if (anyValuesNaN(ttfb, renderDelay)) {
+      return null;
+    }
     return {ttfb, renderDelay};
   }
 
@@ -75,6 +87,9 @@ function breakdownPhases(
   const loadDelay = Types.Timing.MilliSeconds(requestStart - ttfb);
   const loadTime = Types.Timing.MilliSeconds(requestEnd - requestStart);
   renderDelay = Types.Timing.MilliSeconds(lcpMs - requestEnd);
+  if (anyValuesNaN(ttfb, loadDelay, loadTime, renderDelay)) {
+    return null;
+  }
 
   return {
     ttfb,
@@ -121,14 +136,19 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
       lcpMs,
       lcpTs,
       lcpEvent,
-      phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest),
+      phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
     };
   }
 
+  const initiatorUrl = lcpRequest.args.data.initiator?.url;
+  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request
+  // is discovered by the preload scanner.
+  const initiatedByMainDoc =
+      lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;
+  const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;
+
   const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;
-  const imagePreloaded = lcpRequest?.args.data.isLinkPreload || lcpRequest?.args.data.initiator?.type === 'preload';
   const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;
-
   // This is the earliest discovery time an LCP request could have - it's TTFB.
   const earliestDiscoveryTime = docRequest && docRequest.args.data.timing ?
       Helpers.Timing.secondsToMicroseconds(docRequest.args.data.timing.requestTime) +
@@ -139,10 +159,10 @@ export function generateInsight(parsedTrace: RequiredData<typeof deps>, context:
     lcpMs,
     lcpTs,
     lcpEvent,
-    phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest),
+    phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
     shouldRemoveLazyLoading: imageLoadingAttr === 'lazy',
     shouldIncreasePriorityHint: imageFetchPriorityHint !== 'high',
-    shouldPreloadImage: !imagePreloaded,
+    shouldPreloadImage: !imgPreloadedOrFoundInHTML,
     lcpRequest,
     earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.MicroSeconds(earliestDiscoveryTime) : undefined,
   };

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

@@ -106,6 +106,9 @@ describeWithEnvironment('RenderBlockingRequests', function() {
     ]);
   });
 
+  // TODO(crbug.com/372674229): when swapping to 'provided' instead of 'simulated', all these test traces give
+  // uninteresting results. must get new traces.
+
   it('estimates savings with Lantern (image LCP)', async () => {
     const {data, insights} = await processTrace(this, 'lantern/render-blocking/trace.json.gz');
     assert.strictEqual(insights.size, 1);
@@ -113,19 +116,16 @@ describeWithEnvironment('RenderBlockingRequests', function() {
         getInsightOrError('RenderBlocking', insights, data.Meta.navigationsByNavigationId.values().next().value);
 
     assert.deepStrictEqual(insight.metricSavings, {
-      FCP: 2250,
+      FCP: 0,
       LCP: 0,
-    });
+    } as Trace.Insights.Types.MetricSavings);
 
     assert.exists(insight.requestIdToWastedMs);
     const urlToWastedMs = [...insight.requestIdToWastedMs].map(([requestId, wastedMs]) => {
       const url = insight.renderBlockingRequests.find(r => r.args.data.requestId === requestId)?.args.data.url;
       return [url, wastedMs];
     });
-    assert.deepStrictEqual(urlToWastedMs, [
-      ['http://localhost:50049/style.css', 2254],
-      ['http://localhost:50049/script.js', 304],
-    ]);
+    assert.deepStrictEqual(urlToWastedMs, []);
   });
 
   it('estimates savings with Lantern (text LCP)', async () => {
@@ -135,20 +135,14 @@ describeWithEnvironment('RenderBlockingRequests', function() {
         getInsightOrError('RenderBlocking', insights, data.Meta.navigationsByNavigationId.values().next().value);
 
     assert.deepStrictEqual(insight.metricSavings, {
-      FCP: 13,
-      LCP: 13,
-    });
+      FCP: 0,
+      LCP: 0,
+    } as Trace.Insights.Types.MetricSavings);
     assert.exists(insight.requestIdToWastedMs);
     const urlToWastedMs = [...insight.requestIdToWastedMs].map(([requestId, wastedMs]) => {
       const url = insight.renderBlockingRequests.find(r => r.args.data.requestId === requestId)?.args.data.url;
       return [url, wastedMs];
     });
-    assert.deepStrictEqual(urlToWastedMs, [
-      ['http://[::]:8000/typescript-angular/node_modules/todomvc-common/base.css', 153],
-      ['http://[::]:8000/typescript-angular/node_modules/todomvc-app-css/index.css', 303],
-      ['http://[::]:8000/typescript-angular/node_modules/todomvc-common/base.js', 303],
-      ['http://[::]:8000/typescript-angular/node_modules/angular/angular.js', 303],
-      ['http://[::]:8000/typescript-angular/js/Application.js', 303],
-    ]);
+    assert.deepStrictEqual(urlToWastedMs, []);
   });
 });

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

@@ -52,7 +52,8 @@ function getNodesAndTimingByRequestId(nodeTimings: Lantern.Simulation.Result['no
   return requestIdToNode;
 }
 
-function estimateSavingsWithGraphs(deferredIds: Set<string>, lanternContext: LanternContext): number {
+function estimateSavingsWithGraphs(
+    deferredIds: Set<string>, lanternContext: LanternContext): Types.Timing.MilliSeconds {
   const simulator = lanternContext.simulator;
   const fcpGraph = lanternContext.metrics.firstContentfulPaint.optimisticGraph;
   const {nodeTimings} = lanternContext.simulator.simulate(fcpGraph);
@@ -80,7 +81,7 @@ function estimateSavingsWithGraphs(deferredIds: Set<string>, lanternContext: Lan
   minimalFCPGraph.request.transferSize = safeTransferSize + totalChildNetworkBytes;
   const estimateAfterInline = simulator.simulate(minimalFCPGraph).timeInMs;
   minimalFCPGraph.request.transferSize = originalTransferSize;
-  return Math.round(Math.max(estimateBeforeInline - estimateAfterInline, 0));
+  return Math.round(Math.max(estimateBeforeInline - estimateAfterInline, 0)) as Types.Timing.MilliSeconds;
 }
 
 function hasImageLCP(parsedTrace: RequiredData<typeof deps>, context: InsightSetContextWithNavigation): boolean {
@@ -113,7 +114,7 @@ function computeSavings(
   const nodesAndTimingsByRequestId =
       getNodesAndTimingByRequestId(context.lantern.metrics.firstContentfulPaint.optimisticEstimate.nodeTimings);
 
-  const metricSavings = {FCP: 0, LCP: 0};
+  const metricSavings = {FCP: 0 as Types.Timing.MilliSeconds, LCP: 0 as Types.Timing.MilliSeconds};
   const requestIdToWastedMs = new Map<string, number>();
   const deferredNodeIds = new Set<string>();
   for (const request of renderBlockingRequests) {
@@ -173,7 +174,7 @@ export function generateInsight(
       continue;
     }
 
-    if (req.args.data.renderBlocking !== 'blocking' && req.args.data.renderBlocking !== 'in_body_parser_blocking') {
+    if (!Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(req)) {
       continue;
     }
 
@@ -211,6 +212,7 @@ export function generateInsight(
   });
 
   return {
+    relatedEvents: renderBlockingRequests,
     renderBlockingRequests,
     ...savings,
   };

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

@@ -6,7 +6,7 @@ import * as Helpers from '../helpers/helpers.js';
 import {type SelectorTiming, SelectorTimingsKey} from '../types/TraceEvents.js';
 import * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export function deps(): ['SelectorStats'] {
   return ['SelectorStats'];
@@ -82,6 +82,8 @@ export function generateInsight(
   });
 
   return {
+    // TODO: should we identify UpdateLayout events as linked to this insight?
+    relatedEvents: [],
     totalElapsedMs: Types.Timing.MilliSeconds(totalElapsedUs / 1000.0),
     totalMatchAttempts,
     totalMatchCount,

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

@@ -8,7 +8,7 @@ import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type InsightResult, type InsightSetContext, type RequiredData} from './types.js';
+import type {InsightResult, InsightSetContext, RequiredData} from './types.js';
 
 export function deps(): ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'] {
   return ['Meta', 'NetworkRequests', 'Renderer', 'ImagePainting'];
@@ -184,6 +184,18 @@ function getSummaries(
   return {byEntity, byRequest, requestsByEntity};
 }
 
+function getRelatedEvents(summaries: SummaryMaps, firstPartyEntity: Entity|undefined): Types.Events.Event[] {
+  const events = [];
+
+  for (const [entity, requests] of summaries.requestsByEntity.entries()) {
+    if (entity !== firstPartyEntity) {
+      events.push(...requests);
+    }
+  }
+
+  return events;
+}
+
 export function generateInsight(
     parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): ThirdPartyWebInsightResult {
   const networkRequests = parsedTrace.NetworkRequests.byTime.filter(event => {
@@ -212,11 +224,12 @@ export function generateInsight(
   // TODO(crbug.com/352244718): re-work to still collect main thread activity if no request is present
   const summaries = getSummaries(networkRequests, entityByRequest, selfTimeByUrl);
 
-  const firstPartyUrl = context.navigation?.args.data?.url ?? parsedTrace.Meta.mainFrameURL;
+  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
   const firstPartyEntity =
       ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) || makeUpEntity(madeUpEntityCache, firstPartyUrl);
 
   return {
+    relatedEvents: getRelatedEvents(summaries, firstPartyEntity),
     entityByRequest,
     requestsByEntity: summaries.requestsByEntity,
     summaryByRequest: summaries.byRequest,