chrome-devtools-frontend 1.0.1558690 → 1.0.1559913

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]});
   }
 

package/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,
@@ -108,13 +108,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]});
   }
 

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

@@ -185,7 +185,7 @@ export function generateInsight(
   }
 
   const firstPaintTs = data.PageLoadMetrics.metricScoresByFrameId.get(context.frameId)
-                           ?.get(context.navigationId)
+                           ?.get(context.navigation)
                            ?.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.FP)
                            ?.event?.ts;
   if (!firstPaintTs) {

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

@@ -96,7 +96,7 @@ export type InsightModel<UIStrings extends Record<string, string> = Record<strin
       /**
        * If this insight is attached to a navigation, this stores its ID.
        */
-      navigationId?: string,
+      navigation?: Types.Events.NavigationStart,
       /** This is lazily-generated because some insights may create many overlays. */
       createOverlays?: () => Types.Overlays.Overlay[],
     };

package/front_end/models/trace/types/TraceEvents.ts

@@ -100,6 +100,8 @@ export interface ArgsData {
   sampleTraceId?: number;
   url?: string;
   navigationId?: string;
+  /** For soft navs. */
+  performanceTimelineNavigationId?: number;
   frame?: string;
 }
 
@@ -702,6 +704,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&{
@@ -722,27 +747,30 @@ export interface FirstPaint extends Mark {
   };
 }
 
-export type PageLoadEvent = FirstContentfulPaint|MarkDOMContent|InteractiveTime|LargestContentfulPaintCandidate|
-    LayoutShift|FirstPaint|MarkLoad|NavigationStart;
+export type PageLoadEvent = FirstContentfulPaint|MarkDOMContent|InteractiveTime|AnyLargestContentfulPaintCandidate|
+    LayoutShift|FirstPaint|MarkLoad|NavigationStart|SoftNavigationStart;
 
 const markerTypeGuards = [
   isMarkDOMContent,
   isMarkLoad,
   isFirstPaint,
   isFirstContentfulPaint,
-  isLargestContentfulPaintCandidate,
+  isAnyLargestContentfulPaintCandidate,
   isNavigationStart,
+  isSoftNavigationStart,
 ];
 
-export const MarkerName =
-    ['MarkDOMContent', 'MarkLoad', 'firstPaint', 'firstContentfulPaint', 'largestContentfulPaint::Candidate'] as const;
+export const MarkerName = [
+  'MarkDOMContent', 'MarkLoad', 'firstPaint', 'firstContentfulPaint', 'largestContentfulPaint::Candidate',
+  'largestContentfulPaint::CandidateForSoftNavigation'
+] as const;
 
 export interface MarkerEvent extends Event {
   name: typeof MarkerName[number];
 }
 
 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 +782,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;
@@ -777,6 +805,28 @@ export interface LargestContentfulPaintCandidate extends Mark {
     },
   };
 }
+
+export interface LargestContentfulPaintCandidateForSoftNavigation extends Mark {
+  name: Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION;
+  args: Args&{
+    frame: string,
+    data?: ArgsData&{
+      candidateIndex: number,
+      isOutermostMainFrame: boolean,
+      isMainFrame: boolean,
+      nodeId: Protocol.DOM.BackendNodeId,
+      loadingAttr: string,
+      performanceTimelineNavigationId: number,
+      type?: string,
+      // Landed in Chrome M140: crrev.com/c/6702010
+      nodeName?: string,
+    },
+  };
+}
+
+export type AnyLargestContentfulPaintCandidate =
+    LargestContentfulPaintCandidate|LargestContentfulPaintCandidateForSoftNavigation;
+
 export interface LargestImagePaintCandidate extends Mark {
   name: 'LargestImagePaint::Candidate';
   args: Args&{
@@ -2209,8 +2259,8 @@ export function isFirstContentfulPaint(event: Event): event is FirstContentfulPa
   return event.name === 'firstContentfulPaint';
 }
 
-export function isLargestContentfulPaintCandidate(event: Event): event is LargestContentfulPaintCandidate {
-  return event.name === Name.MARK_LCP_CANDIDATE;
+export function isAnyLargestContentfulPaintCandidate(event: Event): event is AnyLargestContentfulPaintCandidate {
+  return event.name === Name.MARK_LCP_CANDIDATE || event.name === Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION;
 }
 export function isLargestImagePaintCandidate(event: Event): event is LargestImagePaintCandidate {
   return event.name === 'LargestImagePaint::Candidate';
@@ -2336,7 +2386,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 {
@@ -3089,8 +3139,10 @@ export const enum Name {
   MARK_FIRST_PAINT = 'firstPaint',
   MARK_FCP = 'firstContentfulPaint',
   MARK_LCP_CANDIDATE = 'largestContentfulPaint::Candidate',
+  MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION = 'largestContentfulPaint::CandidateForSoftNavigation',
   MARK_LCP_INVALIDATE = 'largestContentfulPaint::Invalidate',
   NAVIGATION_START = 'navigationStart',
+  SOFT_NAVIGATION_START = 'SoftNavigationStart',
   CONSOLE_TIME = 'ConsoleTime',
   USER_TIMING = 'UserTiming',
   INTERACTIVE_TIME = 'InteractiveTime',

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -5,7 +5,9 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
+
+import styles from './aiCodeGenerationTeaser.css.js';
 
 const UIStringsNotTranslate = {
   /**
@@ -20,23 +22,56 @@ const UIStringsNotTranslate = {
    * Text for teaser when generating suggestion.
    */
   generating: 'Generating... (esc to cancel)',
+  /**
+   * Text for teaser for discoverability.
+   */
+  writeACommentToGenerateCode: 'Write a comment to generate code',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
+const PROMOTION_ID = 'ai-code-generation';
+
+export enum AiCodeGenerationTeaserDisplayState {
+  TRIGGER = 'trigger',
+  DISCOVERY = 'discovery',
+  LOADING = 'loading',
+}
 
 export interface ViewInput {
-  loading: boolean;
+  displayState: AiCodeGenerationTeaserDisplayState;
 }
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
-  const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
-                                                 lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
-  const teaserLabel = input.loading ? lockedString(UIStringsNotTranslate.generating) : toGenerateCode;
+  let teaserLabel;
+  switch (input.displayState) {
+    case AiCodeGenerationTeaserDisplayState.DISCOVERY: {
+      const newBadge = UI.UIUtils.maybeCreateNewBadge(PROMOTION_ID);
+      teaserLabel = newBadge ?
+          html`${lockedString(UIStringsNotTranslate.writeACommentToGenerateCode)} ${newBadge}` :
+          nothing;
+      break;
+    }
+
+    case AiCodeGenerationTeaserDisplayState.LOADING: {
+      teaserLabel = html`${lockedString(UIStringsNotTranslate.generating)}`;
+      break;
+    }
+
+    case AiCodeGenerationTeaserDisplayState.TRIGGER: {
+      const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
+                                                     lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
+      teaserLabel = html`${toGenerateCode}`;
+      break;
+    }
+  }
+
   // clang-format off
   render(
         html`
+          <style>${styles}</style>
+          <style>@scope to (devtools-widget > *) { ${UI.inspectorCommonStyles} }</style>
           <div class="ai-code-generation-teaser">
             &nbsp;${teaserLabel}
           </div>
@@ -45,10 +80,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
+// TODO(b/448063927): Add "Dont show again" for discovery teaser.
 export class AiCodeGenerationTeaser extends UI.Widget.Widget {
   readonly #view: View;
 
-  #loading = false;
+  #displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
 
   constructor(view?: View) {
     super();
@@ -61,20 +97,20 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
     const output = {};
     this.#view(
         {
-          loading: this.#loading,
+          displayState: this.#displayState,
         },
         output, this.contentElement);
   }
 
-  get loading(): boolean {
-    return this.#loading;
+  get displayState(): AiCodeGenerationTeaserDisplayState {
+    return this.#displayState;
   }
 
-  set loading(loading: boolean) {
-    if (loading === this.#loading) {
+  set displayState(displayState: AiCodeGenerationTeaserDisplayState) {
+    if (displayState === this.#displayState) {
       return;
     }
-    this.#loading = loading;
+    this.#displayState = displayState;
     this.requestUpdate();
   }
 }