chrome-devtools-frontend 1.0.1556696 → 1.0.1559913

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -2,6 +2,7 @@
 // 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';
 
@@ -32,6 +33,7 @@ export type TranslateRawFrames = (frames: readonly RawFrame[], target: SDK.Targe
  */
 export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
   readonly #trie = new Trie();
+  readonly #mutex = new Common.Mutex.Mutex();
 
   /** @returns the {@link StackTraceModel} for the target, or the model for the primaryPageTarget when passing null/undefined */
   static #modelForTarget(target: SDK.Target.Target|null|undefined): StackTraceModel {
@@ -45,7 +47,7 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
   async createFromProtocolRuntime(stackTrace: Protocol.Runtime.StackTrace, rawFramesToUIFrames: TranslateRawFrames):
       Promise<StackTrace.StackTrace.StackTrace> {
     const [syncFragment, asyncFragments] = await Promise.all([
-      this.#createSyncFragment(stackTrace, rawFramesToUIFrames),
+      this.#createFragment(stackTrace.callFrames, rawFramesToUIFrames),
       this.#createAsyncFragments(stackTrace, rawFramesToUIFrames),
     ]);
 
@@ -65,53 +67,51 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
 
   /** Trigger re-translation of all fragments with the provide script in their call stack */
   async scriptInfoChanged(script: SDK.Script.Script, translateRawFrames: TranslateRawFrames): Promise<void> {
-    const translatePromises: Array<Promise<unknown>> = [];
-    let stackTracesToUpdate = new Set<AnyStackTraceImpl>();
-
-    for (const fragment of this.#affectedFragments(script)) {
-      // We trigger re-translation only for fragments of leaf-nodes. Any fragment along the ancestor-chain
-      // is re-translated as a side-effect.
-      // We just need to remember the stack traces of the skipped over fragments, so we can send the
-      // UPDATED event also to them.
-      if (fragment.node.children.length === 0) {
-        translatePromises.push(this.#translateFragment(fragment, translateRawFrames));
+    const release = await this.#mutex.acquire();
+    try {
+      const translatePromises: Array<Promise<unknown>> = [];
+      let stackTracesToUpdate = new Set<AnyStackTraceImpl>();
+
+      for (const fragment of this.#affectedFragments(script)) {
+        // We trigger re-translation only for fragments of leaf-nodes. Any fragment along the ancestor-chain
+        // is re-translated as a side-effect.
+        // We just need to remember the stack traces of the skipped over fragments, so we can send the
+        // UPDATED event also to them.
+        if (fragment.node.children.length === 0) {
+          translatePromises.push(this.#translateFragment(fragment, translateRawFrames));
+        }
+        stackTracesToUpdate = stackTracesToUpdate.union(fragment.stackTraces);
       }
-      stackTracesToUpdate = stackTracesToUpdate.union(fragment.stackTraces);
-    }
 
-    await Promise.all(translatePromises);
+      await Promise.all(translatePromises);
 
-    for (const stackTrace of stackTracesToUpdate) {
-      stackTrace.dispatchEventToListeners(StackTrace.StackTrace.Events.UPDATED);
+      for (const stackTrace of stackTracesToUpdate) {
+        stackTrace.dispatchEventToListeners(StackTrace.StackTrace.Events.UPDATED);
+      }
+    } finally {
+      release();
     }
   }
 
-  async #createSyncFragment(stackTrace: Protocol.Runtime.StackTrace, rawFramesToUIFrames: TranslateRawFrames):
-      Promise<FragmentImpl> {
-    const fragment = this.#createFragment(stackTrace.callFrames);
-    await this.#translateFragment(fragment, rawFramesToUIFrames);
-    return fragment;
-  }
-
   async #createDebuggableFragment(
       pausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,
       rawFramesToUIFrames: TranslateRawFrames): Promise<DebuggableFragmentImpl> {
-    const fragment = this.#createFragment(pausedDetails.callFrames.map(frame => ({
-                                                                         scriptId: frame.script.scriptId,
-                                                                         url: frame.script.sourceURL,
-                                                                         functionName: frame.functionName,
-                                                                         lineNumber: frame.location().lineNumber,
-                                                                         columnNumber: frame.location().columnNumber,
-                                                                       })));
-    await this.#translateFragment(fragment, rawFramesToUIFrames);
+    const fragment = await this.#createFragment(
+        pausedDetails.callFrames.map(frame => ({
+                                       scriptId: frame.script.scriptId,
+                                       url: frame.script.sourceURL,
+                                       functionName: frame.functionName,
+                                       lineNumber: frame.location().lineNumber,
+                                       columnNumber: frame.location().columnNumber,
+                                     })),
+        rawFramesToUIFrames);
     return new DebuggableFragmentImpl(fragment, pausedDetails.callFrames);
   }
 
   async #createAsyncFragments(
       stackTraceOrPausedEvent: Protocol.Runtime.StackTrace|SDK.DebuggerModel.DebuggerPausedDetails,
       rawFramesToUIFrames: TranslateRawFrames): Promise<AsyncFragmentImpl[]> {
-    const asyncFragments: AsyncFragmentImpl[] = [];
-    const translatePromises: Array<Promise<unknown>> = [];
+    const asyncFragments: Array<Promise<AsyncFragmentImpl>> = [];
 
     const debuggerModel = this.target().model(SDK.DebuggerModel.DebuggerModel);
     if (debuggerModel) {
@@ -122,18 +122,31 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
           continue;
         }
         const model = StackTraceModel.#modelForTarget(target);
-        const fragment = model.#createFragment(asyncStackTrace.callFrames);
-        translatePromises.push(model.#translateFragment(fragment, rawFramesToUIFrames));
-        asyncFragments.push(new AsyncFragmentImpl(asyncStackTrace.description ?? '', fragment));
+        const asyncFragmentPromise =
+            model.#createFragment(asyncStackTrace.callFrames, rawFramesToUIFrames)
+                .then(fragment => new AsyncFragmentImpl(asyncStackTrace.description ?? '', fragment));
+        asyncFragments.push(asyncFragmentPromise);
       }
     }
 
-    await Promise.all(translatePromises);
-    return asyncFragments;
+    return await Promise.all(asyncFragments);
   }
 
-  #createFragment(frames: RawFrame[]): FragmentImpl {
-    return FragmentImpl.getOrCreate(this.#trie.insert(frames));
+  async #createFragment(frames: RawFrame[], rawFramesToUIFrames: TranslateRawFrames): Promise<FragmentImpl> {
+    const release = await this.#mutex.acquire();
+    try {
+      const node = this.#trie.insert(frames);
+      const requiresTranslation = !Boolean(node.fragment);
+      const fragment = FragmentImpl.getOrCreate(node);
+
+      if (requiresTranslation) {
+        await this.#translateFragment(fragment, rawFramesToUIFrames);
+      }
+
+      return fragment;
+    } finally {
+      release();
+    }
   }
 
   async #translateFragment(fragment: FragmentImpl, rawFramesToUIFrames: TranslateRawFrames): Promise<void> {

package/front_end/models/trace/EventsSerializer.ts

@@ -20,9 +20,15 @@ export class EventsSerializer {
     }
 
     const rawEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents();
+    const isSynthetic = Types.Events.isSyntheticBased(event);
+    const index = rawEvents.indexOf(isSynthetic ? event.rawSourceEvent : event);
+    if (index === -1) {
+      throw new Error(`Unknown trace event: ${event.name}`);
+    }
+
     const key: Types.File.SyntheticEventKey|Types.File.RawEventKey = Types.Events.isSyntheticBased(event) ?
-        `${Types.File.EventKeyType.SYNTHETIC_EVENT}-${rawEvents.indexOf(event.rawSourceEvent)}` :
-        `${Types.File.EventKeyType.RAW_EVENT}-${rawEvents.indexOf(event)}`;
+        `${Types.File.EventKeyType.SYNTHETIC_EVENT}-${index}` :
+        `${Types.File.EventKeyType.RAW_EVENT}-${index}`;
     if (key.length < 3) {
       return null;
     }

package/front_end/models/trace/LanternComputationData.ts

@@ -10,14 +10,15 @@ import type * as Types from './types/types.js';
 
 type NetworkRequest = Lantern.Types.NetworkRequest<Types.Events.SyntheticNetworkRequest>;
 
-function createProcessedNavigation(data: Handlers.Types.HandlerData, frameId: string, navigationId: string):
-    Lantern.Types.Simulation.ProcessedNavigation {
+function createProcessedNavigation(
+    data: Handlers.Types.HandlerData, frameId: string,
+    navigation: Types.Events.NavigationStart): Lantern.Types.Simulation.ProcessedNavigation {
   const scoresByNav = data.PageLoadMetrics.metricScoresByFrameId.get(frameId);
   if (!scoresByNav) {
     throw new Lantern.Core.LanternError('missing metric scores for frame');
   }
 
-  const scores = scoresByNav.get(navigationId);
+  const scores = scoresByNav.get(navigation);
   if (!scores) {
     throw new Lantern.Core.LanternError('missing metric scores for specified navigation');
   }

package/front_end/models/trace/Processor.ts

@@ -268,7 +268,8 @@ export class TraceProcessor extends EventTarget {
 
   #createLanternContext(
       data: Handlers.Types.HandlerData, traceEvents: readonly Types.Events.Event[], frameId: string,
-      navigationId: string, options: Types.Configuration.ParseOptions): Insights.Types.LanternContext|undefined {
+      navigation: Types.Events.NavigationStart,
+      options: Types.Configuration.ParseOptions): Insights.Types.LanternContext|undefined {
     // Check for required handlers.
     if (!data.NetworkRequests || !data.Workers || !data.PageLoadMetrics) {
       return;
@@ -278,7 +279,7 @@ export class TraceProcessor extends EventTarget {
     }
 
     const navStarts = data.Meta.navigationsByFrameId.get(frameId);
-    const navStartIndex = navStarts?.findIndex(n => n.args.data?.navigationId === navigationId);
+    const navStartIndex = navStarts?.findIndex(n => n === navigation);
     if (!navStarts || navStartIndex === undefined || navStartIndex === -1) {
       throw new Lantern.Core.LanternError('Could not find navigation start');
     }
@@ -295,7 +296,7 @@ export class TraceProcessor extends EventTarget {
 
     const requests = LanternComputationData.createNetworkRequests(trace, data, startTime, endTime);
     const graph = LanternComputationData.createGraph(requests, trace, data);
-    const processedNavigation = LanternComputationData.createProcessedNavigation(data, frameId, navigationId);
+    const processedNavigation = LanternComputationData.createProcessedNavigation(data, frameId, navigation);
 
     const networkAnalysis = Lantern.Core.NetworkAnalyzer.analyze(requests);
     if (!networkAnalysis) {
@@ -455,7 +456,7 @@ export class TraceProcessor extends EventTarget {
         model.frameId = context.frameId;
         const navId = context.navigation?.args.data?.navigationId;
         if (navId) {
-          model.navigationId = navId;
+          model.navigation = context.navigation;
         }
         model.createOverlays = () => {
           // @ts-expect-error: model is a union of all possible insight model types.
@@ -571,7 +572,7 @@ export class TraceProcessor extends EventTarget {
     let lantern: Insights.Types.LanternContext|undefined;
     try {
       options.logger?.start('insights:createLanternContext');
-      lantern = this.#createLanternContext(data, traceEvents, frameId, navigationId, options);
+      lantern = this.#createLanternContext(data, traceEvents, frameId, navigation, options);
     } catch (e) {
       // Handle Lantern errors gracefully
       // Don't allow an error in constructing the Lantern graphs to break the rest of the trace processor.

package/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;
   }
@@ -1126,6 +1131,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;

package/front_end/models/trace/handlers/LargestImagePaintHandler.ts

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

package/front_end/models/trace/handlers/LayoutShiftsHandler.ts

@@ -443,7 +443,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
     }
 
     let largestScore = 0;
-    let worstShiftEvent: Types.Events.Event|null = null;
+    let worstShiftEvent: Types.Events.SyntheticLayoutShift|null = null;
 
     for (const shift of cluster.events) {
       weightedScore += shift.args.data ? shift.args.data.weighted_score_delta : 0;
@@ -504,7 +504,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
     // Update the cluster's worst layout shift.
     if (worstShiftEvent) {
       cluster.worstShiftEvent = worstShiftEvent;
-      cluster.rawSourceEvent = worstShiftEvent;
+      cluster.rawSourceEvent = worstShiftEvent.rawSourceEvent;
     }
 
     // layout shifts are already sorted by time ascending.

package/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,

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

@@ -5,7 +5,9 @@
 /**
  * This handler stores page load metrics, including web vitals,
  * and exports them in the shape of a map with the following shape:
- * Map(FrameId -> Map(navigationID -> metrics) )
+ * Map(FrameId -> Map(navigation -> metrics) )
+ *
+ * Includes soft navigations.
  *
  * It also exports all markers in a trace in an array.
  *
@@ -22,14 +24,15 @@ 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.
  * The metric scores include the event related to the metric as well as the data regarding
  * the score itself.
  */
-let metricScoresByFrameId = new Map<FrameId, Map<NavigationId, Map<MetricName, MetricScore>>>();
+let metricScoresByFrameId = new Map<FrameId, Map<AnyNavigationStart, Map<MetricName, MetricScore>>>();
 
 /**
  * Page load events with no associated duration that happened in the
@@ -54,7 +57,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)) {
@@ -64,11 +67,7 @@ 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;
-  if (!navigationId) {
-    throw new Error('Navigation event unexpectedly had no navigation ID.');
-  }
+    navigation: AnyNavigationStart, event: Types.Events.PageLoadEvent): void {
   const frameId = getFrameIdForPageLoadEvent(event);
   const {rendererProcessesByFrame} = metaHandlerData();
 
@@ -95,7 +94,7 @@ function storePageLoadMetricAgainstNavigationId(
     const fcpTime = Types.Timing.Micro(event.ts - navigation.ts);
     const classification = scoreClassificationForFirstContentfulPaint(fcpTime);
     const metricScore = {event, metricName: MetricName.FCP, classification, navigation, timing: fcpTime};
-    storeMetricScore(frameId, navigationId, metricScore);
+    storeMetricScore(frameId, navigation, metricScore);
     return;
   }
 
@@ -103,7 +102,7 @@ function storePageLoadMetricAgainstNavigationId(
     const paintTime = Types.Timing.Micro(event.ts - navigation.ts);
     const classification = ScoreClassification.UNCLASSIFIED;
     const metricScore = {event, metricName: MetricName.FP, classification, navigation, timing: paintTime};
-    storeMetricScore(frameId, navigationId, metricScore);
+    storeMetricScore(frameId, navigation, metricScore);
     return;
   }
 
@@ -116,7 +115,7 @@ function storePageLoadMetricAgainstNavigationId(
       navigation,
       timing: dclTime,
     };
-    storeMetricScore(frameId, navigationId, metricScore);
+    storeMetricScore(frameId, navigation, metricScore);
     return;
   }
 
@@ -129,7 +128,7 @@ function storePageLoadMetricAgainstNavigationId(
       navigation,
       timing: ttiValue,
     };
-    storeMetricScore(frameId, navigationId, tti);
+    storeMetricScore(frameId, navigation, tti);
 
     const tbtValue = Helpers.Timing.milliToMicro(Types.Timing.Milli(event.args.args.total_blocking_time_ms));
     const tbt = {
@@ -139,7 +138,7 @@ function storePageLoadMetricAgainstNavigationId(
       navigation,
       timing: tbtValue,
     };
-    storeMetricScore(frameId, navigationId, tbt);
+    storeMetricScore(frameId, navigation, tbt);
     return;
   }
 
@@ -152,11 +151,11 @@ function storePageLoadMetricAgainstNavigationId(
       navigation,
       timing: loadTime,
     };
-    storeMetricScore(frameId, navigationId, metricScore);
+    storeMetricScore(frameId, navigation, metricScore);
     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.');
@@ -170,16 +169,16 @@ function storePageLoadMetricAgainstNavigationId(
       timing: lcpTime,
     };
     const metricsByNavigation = Platform.MapUtilities.getWithDefault(metricScoresByFrameId, frameId, () => new Map());
-    const metrics = Platform.MapUtilities.getWithDefault(metricsByNavigation, navigationId, () => new Map());
+    const metrics = Platform.MapUtilities.getWithDefault(metricsByNavigation, navigation, () => new Map());
     const lastLCPCandidate = metrics.get(MetricName.LCP);
     if (lastLCPCandidate === undefined) {
       selectedLCPCandidateEvents.add(lcp.event);
-      storeMetricScore(frameId, navigationId, lcp);
+      storeMetricScore(frameId, navigation, lcp);
       return;
     }
     const lastLCPCandidateEvent = lastLCPCandidate.event;
 
-    if (!Types.Events.isLargestContentfulPaintCandidate(lastLCPCandidateEvent)) {
+    if (!Types.Events.isAnyLargestContentfulPaintCandidate(lastLCPCandidateEvent)) {
       return;
     }
     const lastCandidateIndex = lastLCPCandidateEvent.args.data?.candidateIndex;
@@ -192,19 +191,22 @@ function storePageLoadMetricAgainstNavigationId(
     if (lastCandidateIndex < candidateIndex) {
       selectedLCPCandidateEvents.delete(lastLCPCandidateEvent);
       selectedLCPCandidateEvents.add(lcp.event);
-      storeMetricScore(frameId, navigationId, lcp);
+      storeMetricScore(frameId, navigation, lcp);
     }
     return;
   }
   if (Types.Events.isLayoutShift(event)) {
     return;
   }
+  if (Types.Events.isSoftNavigationStart(event)) {
+    return;
+  }
   return Platform.assertNever(event, `Unexpected event type: ${event}`);
 }
 
-function storeMetricScore(frameId: string, navigationId: string, metricScore: MetricScore): void {
+function storeMetricScore(frameId: string, navigation: AnyNavigationStart, metricScore: MetricScore): void {
   const metricsByNavigation = Platform.MapUtilities.getWithDefault(metricScoresByFrameId, frameId, () => new Map());
-  const metrics = Platform.MapUtilities.getWithDefault(metricsByNavigation, navigationId, () => new Map());
+  const metrics = Platform.MapUtilities.getWithDefault(metricsByNavigation, navigation, () => new Map());
   // If an entry with that metric name is present, delete it so that the new entry that
   // will replace it is added at the end of the map. This way we guarantee the map entries
   // are ordered in ASC manner by timestamp.
@@ -214,8 +216,9 @@ 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.isAnyLargestContentfulPaintCandidate(event) || Types.Events.isNavigationStart(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,16 +231,23 @@ 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 {
-  if (Types.Events.isFirstContentfulPaint(event) || Types.Events.isLargestContentfulPaintCandidate(event) ||
+function getNavigationForPageLoadEvent(event: Types.Events.PageLoadEvent): AnyNavigationStart|null {
+  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;
@@ -245,6 +255,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);
@@ -378,7 +393,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 =
@@ -391,8 +407,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.
+   *
+   * Includes soft navigations.
    */
-  metricScoresByFrameId: Map<string, Map<string, Map<MetricName, MetricScore>>>;
+  metricScoresByFrameId: Map<string, Map<AnyNavigationStart, Map<MetricName, MetricScore>>>;
   /**
    * Page load events with no associated duration that happened in the
    * main frame.
@@ -437,6 +455,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 +465,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;
 }

package/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;

package/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;

package/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) {
@@ -218,13 +218,13 @@ export function generateInsight(
     throw new Error('no frame metrics');
   }
 
-  const navMetrics = frameMetrics.get(context.navigationId);
+  const navMetrics = frameMetrics.get(context.navigation);
   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)) {
+  if (!lcpEvent || !Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
     return finalize({warnings: [InsightWarning.NO_LCP]});
   }