[RPP] Add marker for soft navigations

Bug: 450673886
Change-Id: I978f4093126bd9e045be7cc931c04a2ea054f747
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7214928
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/trace/Styles.ts

@@ -1126,6 +1126,10 @@ export function markerDetailsForEvent(event: Types.Events.Event): {
     color = 'var(--color-text-primary)';
     title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.NAV;
   }
+  if (Types.Events.isSoftNavigationStart(event)) {
+    color = 'var(--sys-color-blue)';
+    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.SOFT_NAV;
+  }
   if (Types.Events.isMarkDOMContent(event)) {
     color = 'var(--color-text-disabled)';
     title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.DCL;

front_end/models/trace/handlers/MetaHandler.ts

@@ -59,6 +59,7 @@ let traceBounds: Types.Timing.TraceWindowMicro = makeNewTraceBounds();
  */
 let navigationsByFrameId = new Map<string, Types.Events.NavigationStart[]>();
 let navigationsByNavigationId = new Map<string, Types.Events.NavigationStart>();
+let softNavigationsById = new Map<number, Types.Events.SoftNavigationStart>();
 let finalDisplayUrlByNavigationId = new Map<string, string>();
 let mainFrameNavigations: Types.Events.NavigationStart[] = [];
 
@@ -92,6 +93,7 @@ const CHROME_WEB_TRACE_EVENTS = new Set([
 export function reset(): void {
   navigationsByFrameId = new Map();
   navigationsByNavigationId = new Map();
+  softNavigationsById = new Map();
   finalDisplayUrlByNavigationId = new Map();
   processNames = new Map();
   mainFrameNavigations = [];
@@ -324,6 +326,10 @@ export function handleEvent(event: Types.Events.Event): void {
     return;
   }
 
+  if (Types.Events.isSoftNavigationStart(event)) {
+    softNavigationsById.set(event.args.context.performanceTimelineNavigationId, event);
+  }
+
   // Update `finalDisplayUrlByNavigationId` to reflect the latest redirect for each navigation.
   if (Types.Events.isResourceSendRequest(event)) {
     if (event.args.data.resourceType !== 'Document') {
@@ -445,7 +451,14 @@ export interface MetaHandlerData {
   browserThreadId: Types.Events.ThreadID;
   gpuProcessId: Types.Events.ProcessID;
   navigationsByFrameId: Map<string, Types.Events.NavigationStart[]>;
+  /**
+   * This does not include soft navigations.
+   *
+   * TODO(crbug.com/414468047): include soft navs here, so that
+   * PageLoadMetricsHandler and insights can use this map for all navigation types.
+   */
   navigationsByNavigationId: Map<string, Types.Events.NavigationStart>;
+  softNavigationsById: Map<number, Types.Events.SoftNavigationStart>;
   /**
    * The user-visible URL displayed to users in the address bar.
    * This captures:
@@ -514,6 +527,7 @@ export function data(): MetaHandlerData {
     mainFrameURL,
     navigationsByFrameId,
     navigationsByNavigationId,
+    softNavigationsById,
     finalDisplayUrlByNavigationId,
     threadsInProcess,
     rendererProcessesByFrame: rendererProcessesByFrameId,

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

@@ -241,12 +241,14 @@ describeWithEnvironment('PageLoadMetricsHandler', function() {
   describe('Marker events', () => {
     let mainFrameId: string;
     let allMarkerEvents: Trace.Types.Events.PageLoadEvent[];
+
     beforeEach(async function() {
       const {data} = await TraceLoader.traceEngine(this, 'multiple-navigations-with-iframes.json.gz');
       const {PageLoadMetrics, Meta} = data;
       mainFrameId = Meta.mainFrameId;
       allMarkerEvents = PageLoadMetrics.allMarkerEvents;
     });
+
     it('extracts all marker events from a trace correctly', () => {
       for (const metricName of Trace.Types.Events.MarkerName) {
         const markerEventsOfThisType = allMarkerEvents.filter(event => event.name === metricName);
@@ -256,6 +258,7 @@ describeWithEnvironment('PageLoadMetricsHandler', function() {
             marker => Trace.Handlers.ModelHandlers.PageLoadMetrics.getFrameIdForPageLoadEvent(marker) === mainFrameId));
       }
     });
+
     it('only marker events are exported in allMarkerEvents', () => {
       for (const marker of allMarkerEvents) {
         assert.isTrue(Trace.Types.Events.isMarkerEvent(marker));
@@ -271,4 +274,16 @@ describeWithEnvironment('PageLoadMetricsHandler', function() {
       assert.strictEqual(largestContentfulPaints[0].args.data?.candidateIndex, 2);
     });
   });
+
+  describe('soft navs', () => {
+    it('detects SoftNavigationStart', 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',
+      ]);
+    });
+  });
 });

front_end/models/trace/handlers/PageLoadMetricsHandler.ts

@@ -23,6 +23,7 @@ import type {HandlerName} from './types.js';
 // Small helpers to make the below type easier to read.
 type FrameId = string;
 type NavigationId = 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.
@@ -64,8 +65,10 @@ export function handleEvent(event: Types.Events.Event): void {
 }
 
 function storePageLoadMetricAgainstNavigationId(
-    navigation: Types.Events.NavigationStart, event: Types.Events.PageLoadEvent): void {
-  const navigationId = navigation.args.data?.navigationId;
+    navigation: AnyNavigationStart, event: Types.Events.PageLoadEvent): void {
+  const navigationId = Types.Events.isSoftNavigationStart(navigation) ?
+      `softnav-${navigation.args.context.performanceTimelineNavigationId}` :
+      navigation.args.data?.navigationId;
   if (!navigationId) {
     throw new Error('Navigation event unexpectedly had no navigation ID.');
   }
@@ -199,6 +202,9 @@ function storePageLoadMetricAgainstNavigationId(
   if (Types.Events.isLayoutShift(event)) {
     return;
   }
+  if (Types.Events.isSoftNavigationStart(event)) {
+    return;
+  }
   return Platform.assertNever(event, `Unexpected event type: ${event}`);
 }
 
@@ -215,7 +221,8 @@ 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.isLayoutShift(event) || Types.Events.isFirstPaint(event)) {
+      Types.Events.isSoftNavigationStart(event) || Types.Events.isLayoutShift(event) ||
+      Types.Events.isFirstPaint(event)) {
     return event.args.frame;
   }
   if (Types.Events.isMarkDOMContent(event) || Types.Events.isMarkLoad(event)) {
@@ -228,7 +235,7 @@ export function getFrameIdForPageLoadEvent(event: Types.Events.PageLoadEvent): s
   Platform.assertNever(event, `Unexpected event type: ${event}`);
 }
 
-function getNavigationForPageLoadEvent(event: Types.Events.PageLoadEvent): Types.Events.NavigationStart|null {
+function getNavigationForPageLoadEvent(event: Types.Events.PageLoadEvent): AnyNavigationStart|null {
   if (Types.Events.isFirstContentfulPaint(event) || Types.Events.isLargestContentfulPaintCandidate(event) ||
       Types.Events.isFirstPaint(event)) {
     const navigationId = event.args.data?.navigationId;
@@ -245,6 +252,11 @@ function getNavigationForPageLoadEvent(event: Types.Events.PageLoadEvent): Types
     return navigation;
   }
 
+  if (Types.Events.isSoftNavigationStart(event)) {
+    const {softNavigationsById} = metaHandlerData();
+    return softNavigationsById.get(event.args.context.performanceTimelineNavigationId) ?? null;
+  }
+
   if (Types.Events.isMarkDOMContent(event) || Types.Events.isInteractiveTime(event) ||
       Types.Events.isLayoutShift(event) || Types.Events.isMarkLoad(event)) {
     const frameId = getFrameIdForPageLoadEvent(event);
@@ -437,6 +449,8 @@ export const enum MetricName {
   CLS = 'CLS',
   // Navigation
   NAV = 'Nav',
+  // Soft Navigation (just "Nav" b/c space is limited in flame chart)
+  SOFT_NAV = 'Nav',
   // Note: INP is handled in UserInteractionsHandler
 }
 
@@ -445,7 +459,7 @@ export interface MetricScore {
   classification: ScoreClassification;
   event?: Types.Events.PageLoadEvent;
   // The last navigation that occurred before this metric score.
-  navigation?: Types.Events.NavigationStart;
+  navigation?: AnyNavigationStart;
   estimated?: boolean;
   timing: Types.Timing.Micro;
 }

front_end/models/trace/types/TraceEvents.ts

@@ -702,6 +702,29 @@ export interface NavigationStart extends Mark {
   };
 }
 
+export interface SoftNavigationStart extends Event {
+  name: Name.SOFT_NAVIGATION_START;
+  ph: Phase.ASYNC_NESTABLE_INSTANT;
+  args: Args&{
+    frame: string,
+    context: {
+      softNavContextId: number,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      URL: string,
+      timeOrigin: number,
+      domModifications: number,
+      firstContentfulPaint: number,
+      paintedArea: number,
+      performanceTimelineNavigationId: number,
+      repaintedArea: number,
+    },
+  };
+}
+
+export function isSoftNavigationStart(event: Event): event is SoftNavigationStart {
+  return event.name === Name.SOFT_NAVIGATION_START;
+}
+
 export interface FirstContentfulPaint extends Mark {
   name: Name.MARK_FCP;
   args: Args&{
@@ -723,7 +746,7 @@ export interface FirstPaint extends Mark {
 }
 
 export type PageLoadEvent = FirstContentfulPaint|MarkDOMContent|InteractiveTime|LargestContentfulPaintCandidate|
-    LayoutShift|FirstPaint|MarkLoad|NavigationStart;
+    LayoutShift|FirstPaint|MarkLoad|NavigationStart|SoftNavigationStart;
 
 const markerTypeGuards = [
   isMarkDOMContent,
@@ -732,6 +755,7 @@ const markerTypeGuards = [
   isFirstContentfulPaint,
   isLargestContentfulPaintCandidate,
   isNavigationStart,
+  isSoftNavigationStart,
 ];
 
 export const MarkerName =
@@ -742,7 +766,7 @@ export interface MarkerEvent extends Event {
 }
 
 export function isMarkerEvent(event: Event): event is MarkerEvent {
-  if (event.ph === Phase.INSTANT || event.ph === Phase.MARK) {
+  if (event.ph === Phase.INSTANT || Phase.ASYNC_NESTABLE_INSTANT || event.ph === Phase.MARK) {
     return markerTypeGuards.some(fn => fn(event));
   }
   return false;
@@ -754,7 +778,7 @@ const pageLoadEventTypeGuards = [
 ];
 
 export function eventIsPageLoadEvent(event: Event): event is PageLoadEvent {
-  if (event.ph === Phase.INSTANT || event.ph === Phase.MARK) {
+  if (event.ph === Phase.INSTANT || Phase.ASYNC_NESTABLE_INSTANT || event.ph === Phase.MARK) {
     return pageLoadEventTypeGuards.some(fn => fn(event));
   }
   return false;
@@ -2336,7 +2360,7 @@ export function isPrePaint(
 
 /** A VALID navigation start (as it has a populated documentLoaderURL) */
 export function isNavigationStart(event: Event): event is NavigationStart {
-  return event.name === 'navigationStart' && (event as NavigationStart).args?.data?.documentLoaderURL !== '';
+  return event.name === Name.NAVIGATION_START && (event as NavigationStart).args?.data?.documentLoaderURL !== '';
 }
 
 export interface DidCommitSameDocumentNavigation extends Complete {
@@ -3091,6 +3115,7 @@ export const enum Name {
   MARK_LCP_CANDIDATE = 'largestContentfulPaint::Candidate',
   MARK_LCP_INVALIDATE = 'largestContentfulPaint::Invalidate',
   NAVIGATION_START = 'navigationStart',
+  SOFT_NAVIGATION_START = 'SoftNavigationStart',
   CONSOLE_TIME = 'ConsoleTime',
   USER_TIMING = 'UserTiming',
   INTERACTIVE_TIME = 'InteractiveTime',

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -66,10 +66,11 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  */
 export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
   [Trace.Types.Events.Name.NAVIGATION_START]: 0,
-  [Trace.Types.Events.Name.MARK_LOAD]: 1,
-  [Trace.Types.Events.Name.MARK_FCP]: 2,
-  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 3,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 4,
+  [Trace.Types.Events.Name.SOFT_NAVIGATION_START]: 1,
+  [Trace.Types.Events.Name.MARK_LOAD]: 2,
+  [Trace.Types.Events.Name.MARK_FCP]: 3,
+  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 4,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 5,
 };
 
 // Threshold to match up overlay markers that are off by a tiny amount so they aren't rendered
@@ -669,6 +670,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     // Set markers for Navigations, LCP, FCP, DCL, L.
     const markers = markerEvents.filter(
         event => event.name === Trace.Types.Events.Name.NAVIGATION_START ||
+            event.name === Trace.Types.Events.Name.SOFT_NAVIGATION_START ||
             event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE ||
             event.name === Trace.Types.Events.Name.MARK_FCP ||
             event.name === Trace.Types.Events.Name.MARK_DOM_CONTENT ||

front_end/panels/timeline/TimelineUIUtils.ts

@@ -1001,6 +1001,20 @@ export class TimelineUIUtils {
       return contentHelper.fragment;
     }
 
+    if (Trace.Types.Events.isNavigationStart(event)) {
+      url = (event.args.data?.documentLoaderURL ?? event.args.data?.url) as Platform.DevToolsPath.UrlString;
+      if (url) {
+        contentHelper.appendElementRow(i18nString(UIStrings.url), LegacyComponents.Linkifier.Linkifier.linkifyURL(url));
+      }
+    }
+
+    if (Trace.Types.Events.isSoftNavigationStart(event)) {
+      url = event.args.context.URL as Platform.DevToolsPath.UrlString;
+      if (url) {
+        contentHelper.appendElementRow(i18nString(UIStrings.url), LegacyComponents.Linkifier.Linkifier.linkifyURL(url));
+      }
+    }
+
     if (Trace.Types.Events.isV8Compile(event)) {
       url = event.args.data?.url as Platform.DevToolsPath.UrlString;
       if (url) {
@@ -2244,6 +2258,10 @@ export class TimelineUIUtils {
         color = 'var(--color-text-primary)';
         tall = true;
         break;
+      case Trace.Types.Events.Name.SOFT_NAVIGATION_START:
+        color = 'var(--sys-color-blue)';
+        tall = true;
+        break;
       case Trace.Types.Events.Name.FRAME_STARTED_LOADING:
         color = 'green';
         tall = true;
@@ -2523,7 +2541,8 @@ export function timeStampForEventAdjustedForClosestNavigationIfPossible(
 export function isMarkerEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Event): boolean {
   const {Name} = Trace.Types.Events;
 
-  if (event.name === Name.TIME_STAMP || event.name === Name.NAVIGATION_START) {
+  if (event.name === Name.TIME_STAMP || event.name === Name.NAVIGATION_START ||
+      event.name === Name.SOFT_NAVIGATION_START) {
     return true;
   }
 

front_end/panels/timeline/fixtures/traces/BUILD.gn

@@ -128,6 +128,7 @@ copy_to_gen("traces") {
     "simple-js-program.json.gz",
     "slow-interaction-button-click.json.gz",
     "slow-interaction-keydown.json.gz",
+    "soft-navs.json.gz",
     "style-invalidation-change-attribute.json.gz",
     "style-invalidation-change-id.json.gz",
     "sync-like-timings.json.gz",

front_end/panels/timeline/fixtures/traces/README.md

@@ -369,3 +369,7 @@ A trace of https://astro-news-1026410574114.us-central1.run.app/ used to test CL
 ### render-blocking-preload
 
 A trace of https://andydavies.github.io/agent-tests/render-blocking/css-preload.html that highlighted a bug where we do not update render blocking status based on PreloadRenderBlockingStatus events (crbug.com/457323832).
+
+### soft-navs
+
+A trace of https://developer.chrome.com/docs/web-platform/soft-navigations-experiment, navigating to many other pages on the same domain. All are soft navigations.