[RPP] Add marker for LCP after a soft navigation

Bug: 450673887
Change-Id: Id3f470f94c89a9e9784058f2105fc27403fa015f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7214929
Reviewed-by: Paul Irish <paulirish@chromium.org>
Commit-Queue: Connor Clark <cjamcl@chromium.org>
Auto-Submit: Connor Clark <cjamcl@chromium.org>

Author: Connor Clark

front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -28,7 +28,7 @@ function getLCPData(parsedTrace: Trace.TraceModel.ParsedTrace, frameId: string,
     return null;
   }
   const lcpEvent = metric?.event;
-  if (!lcpEvent || !Trace.Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+  if (!lcpEvent || !Trace.Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
     return null;
   }
 

front_end/models/trace/Styles.ts

@@ -879,6 +879,11 @@ export function maybeInitSylesMap(): EventStylesMap {
         defaultCategoryStyles.rendering,
         true,
         ),
+    [Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: new TimelineRecordStyle(
+        i18nString(UIStrings.largestContentfulPaint),
+        defaultCategoryStyles.rendering,
+        true,
+        ),
 
     [Types.Events.Name.TIME_STAMP]:
         new TimelineRecordStyle(i18nString(UIStrings.timestamp), defaultCategoryStyles.scripting),
@@ -1118,7 +1123,7 @@ export function markerDetailsForEvent(event: Types.Events.Event): {
     color = 'var(--sys-color-green-bright)';
     title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.FCP;
   }
-  if (Types.Events.isLargestContentfulPaintCandidate(event)) {
+  if (Types.Events.isAnyLargestContentfulPaintCandidate(event)) {
     color = 'var(--sys-color-green)';
     title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP;
   }

front_end/models/trace/handlers/LargestImagePaintHandler.ts

@@ -57,7 +57,7 @@ export async function finalize(): Promise<void> {
   for (const [navigationId, navigation] of navigationsByNavigationId) {
     const lcpMetric = metricScoresByFrameId.get(navigation.args.frame)?.get(navigationId)?.get(MetricName.LCP);
     const lcpEvent = lcpMetric?.event;
-    if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+    if (!lcpEvent || !Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
       continue;
     }
 

front_end/models/trace/handlers/PageLoadMetricsHandler.test.ts

@@ -251,11 +251,18 @@ describeWithEnvironment('PageLoadMetricsHandler', function() {
 
     it('extracts all marker events from a trace correctly', () => {
       for (const metricName of Trace.Types.Events.MarkerName) {
+        if (metricName === 'largestContentfulPaint::CandidateForSoftNavigation') {
+          continue;
+        }
+
         const markerEventsOfThisType = allMarkerEvents.filter(event => event.name === metricName);
         // There should be 2 events for each marker and all of them should correspond to the main frame
-        assert.lengthOf(markerEventsOfThisType, 2);
-        assert.isTrue(markerEventsOfThisType.every(
-            marker => Trace.Handlers.ModelHandlers.PageLoadMetrics.getFrameIdForPageLoadEvent(marker) === mainFrameId));
+        assert.lengthOf(markerEventsOfThisType, 2, `failed for ${metricName}`);
+        assert.isTrue(
+            markerEventsOfThisType.every(
+                marker =>
+                    Trace.Handlers.ModelHandlers.PageLoadMetrics.getFrameIdForPageLoadEvent(marker) === mainFrameId),
+            `failed for ${metricName}`);
       }
     });
 
@@ -269,20 +276,20 @@ describeWithEnvironment('PageLoadMetricsHandler', function() {
       const {data} = await TraceLoader.traceEngine(this, 'multiple-lcp-main-frame.json.gz');
       const {PageLoadMetrics} = data;
       const pageLoadMarkers = PageLoadMetrics.allMarkerEvents;
-      const largestContentfulPaints = pageLoadMarkers.filter(Trace.Types.Events.isLargestContentfulPaintCandidate);
+      const largestContentfulPaints = pageLoadMarkers.filter(Trace.Types.Events.isAnyLargestContentfulPaintCandidate);
       assert.lengthOf(largestContentfulPaints, 1);
       assert.strictEqual(largestContentfulPaints[0].args.data?.candidateIndex, 2);
     });
   });
 
   describe('soft navs', () => {
-    it('detects SoftNavigationStart', async function() {
+    it('detects SoftNavigationStart and LCP for soft-nav', async function() {
       const {data} = await TraceLoader.traceEngine(this, 'soft-navs.json.gz');
       const {PageLoadMetrics} = data;
       assert.deepEqual(PageLoadMetrics.allMarkerEvents.map(e => e.name), [
-        'SoftNavigationStart',
-        'SoftNavigationStart',
-        'SoftNavigationStart',
+        'SoftNavigationStart', 'largestContentfulPaint::CandidateForSoftNavigation', 'SoftNavigationStart',
+        'largestContentfulPaint::CandidateForSoftNavigation', 'SoftNavigationStart',
+        'largestContentfulPaint::CandidateForSoftNavigation'
       ]);
     });
   });

front_end/models/trace/handlers/PageLoadMetricsHandler.ts

@@ -7,6 +7,9 @@
  * and exports them in the shape of a map with the following shape:
  * Map(FrameId -> Map(navigationID -> metrics) )
  *
+ * It also includes soft navigations as separate "navigations", though since soft
+ * navs use different events, the "navigationID" for them is created in this handler.
+ *
  * It also exports all markers in a trace in an array.
  *
  * Some metrics are taken directly from a page load events (AKA markers) like DCL.
@@ -22,8 +25,9 @@ import type {HandlerName} from './types.js';
 
 // Small helpers to make the below type easier to read.
 type FrameId = string;
-type NavigationId = string;
+type NavigationId = string|`softnav-${string}`;
 type AnyNavigationStart = Types.Events.NavigationStart|Types.Events.SoftNavigationStart;
+
 /**
  * This represents the metric scores for all navigations, for all frames in a trace.
  * Given a frame id, the map points to another map from navigation id to metric scores.
@@ -55,7 +59,7 @@ let pageLoadEventsArray: Types.Events.PageLoadEvent[] = [];
 // trace, we store that and delete the prior event. When we've parsed the
 // entire trace this set will contain all the LCP events that were used - e.g.
 // the candidates that were the actual LCP events.
-let selectedLCPCandidateEvents = new Set<Types.Events.LargestContentfulPaintCandidate>();
+let selectedLCPCandidateEvents = new Set<Types.Events.AnyLargestContentfulPaintCandidate>();
 
 export function handleEvent(event: Types.Events.Event): void {
   if (!Types.Events.eventIsPageLoadEvent(event)) {
@@ -159,7 +163,7 @@ function storePageLoadMetricAgainstNavigationId(
     return;
   }
 
-  if (Types.Events.isLargestContentfulPaintCandidate(event)) {
+  if (Types.Events.isAnyLargestContentfulPaintCandidate(event)) {
     const candidateIndex = event.args.data?.candidateIndex;
     if (!candidateIndex) {
       throw new Error('Largest Contentful Paint unexpectedly had no candidateIndex.');
@@ -182,7 +186,7 @@ function storePageLoadMetricAgainstNavigationId(
     }
     const lastLCPCandidateEvent = lastLCPCandidate.event;
 
-    if (!Types.Events.isLargestContentfulPaintCandidate(lastLCPCandidateEvent)) {
+    if (!Types.Events.isAnyLargestContentfulPaintCandidate(lastLCPCandidateEvent)) {
       return;
     }
     const lastCandidateIndex = lastLCPCandidateEvent.args.data?.candidateIndex;
@@ -220,7 +224,7 @@ function storeMetricScore(frameId: string, navigationId: string, metricScore: Me
 
 export function getFrameIdForPageLoadEvent(event: Types.Events.PageLoadEvent): string {
   if (Types.Events.isFirstContentfulPaint(event) || Types.Events.isInteractiveTime(event) ||
-      Types.Events.isLargestContentfulPaintCandidate(event) || Types.Events.isNavigationStart(event) ||
+      Types.Events.isAnyLargestContentfulPaintCandidate(event) || Types.Events.isNavigationStart(event) ||
       Types.Events.isSoftNavigationStart(event) || Types.Events.isLayoutShift(event) ||
       Types.Events.isFirstPaint(event)) {
     return event.args.frame;
@@ -236,15 +240,22 @@ export function getFrameIdForPageLoadEvent(event: Types.Events.PageLoadEvent): s
 }
 
 function getNavigationForPageLoadEvent(event: Types.Events.PageLoadEvent): AnyNavigationStart|null {
-  if (Types.Events.isFirstContentfulPaint(event) || Types.Events.isLargestContentfulPaintCandidate(event) ||
+  if (Types.Events.isFirstContentfulPaint(event) || Types.Events.isAnyLargestContentfulPaintCandidate(event) ||
       Types.Events.isFirstPaint(event)) {
-    const navigationId = event.args.data?.navigationId;
-    if (!navigationId) {
-      throw new Error('Trace event unexpectedly had no navigation ID.');
+    const {navigationsByNavigationId, softNavigationsById} = metaHandlerData();
+    let navigation;
+    if (event.name === Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION &&
+        event.args.data?.performanceTimelineNavigationId) {
+      navigation = softNavigationsById.get(event.args.data.performanceTimelineNavigationId);
     }
-    const {navigationsByNavigationId} = metaHandlerData();
-    const navigation = navigationsByNavigationId.get(navigationId);
+    if (!navigation) {
+      const navigationId = event.args.data?.navigationId;
+      if (!navigationId) {
+        throw new Error('Trace event unexpectedly had no navigation ID.');
+      }
 
+      navigation = navigationsByNavigationId.get(navigationId);
+    }
     if (!navigation) {
       // This event's navigation has been filtered out by the meta handler as a noise event.
       return null;
@@ -390,7 +401,8 @@ export async function finalize(): Promise<void> {
   const allFinalLCPEvents = gatherFinalLCPEvents();
   const mainFrame = metaHandlerData().mainFrameId;
   // Filter out LCP candidates to use only definitive LCP values
-  const allEventsButLCP = pageLoadEventsArray.filter(event => !Types.Events.isLargestContentfulPaintCandidate(event));
+  const allEventsButLCP =
+      pageLoadEventsArray.filter(event => !Types.Events.isAnyLargestContentfulPaintCandidate(event));
   const markerEvents = [...allFinalLCPEvents, ...allEventsButLCP].filter(Types.Events.isMarkerEvent);
   // Filter by main frame and sort.
   allMarkerEvents =
@@ -403,8 +415,10 @@ export interface PageLoadMetricsData {
    * Given a frame id, the map points to another map from navigation id to metric scores.
    * The metric scores include the event related to the metric as well as the data regarding
    * the score itself.
+   *
+   * Soft navigations have a faked NavigationId that starts with `softnav-`.
    */
-  metricScoresByFrameId: Map<string, Map<string, Map<MetricName, MetricScore>>>;
+  metricScoresByFrameId: Map<string, Map<NavigationId, Map<MetricName, MetricScore>>>;
   /**
    * Page load events with no associated duration that happened in the
    * main frame.

front_end/models/trace/helpers/Timing.test.ts

@@ -80,6 +80,7 @@ describeWithEnvironment('Timing helpers', () => {
           lcpEvent,
           data.Meta.traceBounds,
           data.Meta.navigationsByNavigationId,
+          data.Meta.softNavigationsById,
           data.Meta.navigationsByFrameId,
       );
 
@@ -112,6 +113,7 @@ describeWithEnvironment('Timing helpers', () => {
           dclEvent,
           data.Meta.traceBounds,
           data.Meta.navigationsByNavigationId,
+          data.Meta.softNavigationsById,
           data.Meta.navigationsByFrameId,
       );
 

front_end/models/trace/helpers/Timing.ts

@@ -22,10 +22,17 @@ export function timeStampForEventAdjustedByClosestNavigation(
     event: Types.Events.Event,
     traceBounds: Types.Timing.TraceWindowMicro,
     navigationsByNavigationId: Map<string, Types.Events.NavigationStart>,
+    softNavigationsById: Map<number, Types.Events.SoftNavigationStart>,
     navigationsByFrameId: Map<string, Types.Events.NavigationStart[]>,
     ): Types.Timing.Micro {
   let eventTimeStamp = event.ts - traceBounds.min;
-  if (event.args?.data?.navigationId) {
+  if (event.name === Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION &&
+      event.args?.data?.performanceTimelineNavigationId) {
+    const navigationForEvent = softNavigationsById.get(event.args.data.performanceTimelineNavigationId);
+    if (navigationForEvent) {
+      eventTimeStamp = event.ts - navigationForEvent.ts;
+    }
+  } else if (event.args?.data?.navigationId) {
     const navigationForEvent = navigationsByNavigationId.get(event.args.data.navigationId);
     if (navigationForEvent) {
       eventTimeStamp = event.ts - navigationForEvent.ts;

front_end/models/trace/insights/Common.ts

@@ -27,7 +27,7 @@ export function getInsight<InsightName extends keyof InsightModels>(
 }
 
 export function getLCP(insightSet: InsightSet):
-    {value: Types.Timing.Micro, event: Types.Events.LargestContentfulPaintCandidate}|null {
+    {value: Types.Timing.Micro, event: Types.Events.AnyLargestContentfulPaintCandidate}|null {
   const insight = getInsight(InsightKeys.LCP_BREAKDOWN, insightSet);
   if (!insight || !insight.lcpMs || !insight.lcpEvent) {
     return null;

front_end/models/trace/insights/LCPBreakdown.ts

@@ -95,7 +95,7 @@ export function isLCPBreakdownInsight(model: InsightModel): model is LCPBreakdow
 export type LCPBreakdownInsightModel = InsightModel<typeof UIStrings, {
   lcpMs?: Types.Timing.Milli,
   lcpTs?: Types.Timing.Milli,
-  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,
+  lcpEvent?: Types.Events.AnyLargestContentfulPaintCandidate,
   /** The network request for the LCP image, if there was one. */
   lcpRequest?: Types.Events.SyntheticNetworkRequest,
   subparts?: LCPSubparts,
@@ -112,7 +112,7 @@ function anyValuesNaN(...values: number[]): boolean {
  */
 function determineSubparts(
     nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest,
-    lcpEvent: Types.Events.LargestContentfulPaintCandidate,
+    lcpEvent: Types.Events.AnyLargestContentfulPaintCandidate,
     lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPSubparts|null {
   const firstDocByteTs = calculateDocFirstByteTs(docRequest);
   if (firstDocByteTs === null) {
@@ -224,7 +224,7 @@ export function generateInsight(
   }
   const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);
   const lcpEvent = metricScore?.event;
-  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+  if (!lcpEvent || !Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
     return finalize({warnings: [InsightWarning.NO_LCP]});
   }
 

front_end/models/trace/insights/LCPDiscovery.ts

@@ -66,7 +66,7 @@ export function isLCPDiscoveryInsight(model: InsightModel): model is LCPDiscover
   return model.insightKey === 'LCPDiscovery';
 }
 export type LCPDiscoveryInsightModel = InsightModel<typeof UIStrings, {
-  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,
+  lcpEvent?: Types.Events.AnyLargestContentfulPaintCandidate,
   /** The network request for the LCP image, if there was one. */
   lcpRequest?: Types.Events.SyntheticNetworkRequest,
   earliestDiscoveryTimeTs?: Types.Timing.Micro,
@@ -114,7 +114,7 @@ export function generateInsight(
   }
   const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);
   const lcpEvent = metricScore?.event;
-  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+  if (!lcpEvent || !Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
     return finalize({warnings: [InsightWarning.NO_LCP]});
   }