chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/third_party/web-vitals/package/src/onLCP.ts

@@ -15,18 +15,23 @@
  */
 
 import {LCPEntryManager} from './lib/LCPEntryManager.js';
-import {onBFCacheRestore} from './lib/bfcache.js';
+import {getBFCacheRestoreTime, onBFCacheRestore} from './lib/bfcache.js';
 import {bindReporter} from './lib/bindReporter.js';
 import {doubleRAF} from './lib/doubleRAF.js';
 import {getActivationStart} from './lib/getActivationStart.js';
+import {checkSoftNavsEnabled, storeSoftNavEntry} from './lib/softNavs.js';
 import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
 import {initMetric} from './lib/initMetric.js';
 import {initUnique} from './lib/initUnique.js';
 import {observe} from './lib/observe.js';
-import {runOnce} from './lib/runOnce.js';
 import {whenActivated} from './lib/whenActivated.js';
 import {whenIdleOrHidden} from './lib/whenIdleOrHidden.js';
-import {LCPMetric, MetricRatingThresholds, ReportOpts} from './types.js';
+import type {
+  LCPMetric,
+  Metric,
+  MetricRatingThresholds,
+  ReportOpts,
+} from './types.js';
 
 /** Thresholds for LCP. See https://web.dev/articles/lcp#what_is_a_good_lcp_score */
 export const LCPThresholds: MetricRatingThresholds = [2500, 4000];
@@ -46,76 +51,199 @@ export const onLCP = (
   onReport: (metric: LCPMetric) => void,
   opts: ReportOpts = {},
 ) => {
+  // As InteractionContentfulPaint entries used by soft navs can emit after
+  // LCP is finalized, we need a flag to know to ignore them.
+  let isFinalized = false;
+  const softNavsEnabled = checkSoftNavsEnabled(opts);
+
   whenActivated(() => {
-    const visibilityWatcher = getVisibilityWatcher();
+    let visibilityWatcher = getVisibilityWatcher();
     let metric = initMetric('LCP');
     let report: ReturnType<typeof bindReporter>;
 
     const lcpEntryManager = initUnique(opts, LCPEntryManager);
 
-    const handleEntries = (entries: LCPMetric['entries']) => {
-      // If reportAllChanges is set then call this function for each entry,
-      // otherwise only consider the last one.
-      if (!opts!.reportAllChanges) {
+    const initNewLCPMetric = (
+      navigation?: Metric['navigationType'],
+      navigationId?: number,
+      navigationInteractionId?: number,
+      navigationURL?: string,
+      navigationStartTime?: number,
+    ) => {
+      metric = initMetric(
+        'LCP',
+        -1,
+        navigation,
+        navigationId,
+        navigationInteractionId,
+        navigationURL,
+        navigationStartTime,
+      );
+      report = bindReporter(
+        onReport,
+        metric,
+        LCPThresholds,
+        opts.reportAllChanges,
+      );
+      // Reset the finalized flag
+      isFinalized = false;
+      // If it's a soft nav, then need to reset the visibilityWatcher
+      if (navigation === 'soft-navigation') {
+        visibilityWatcher = getVisibilityWatcher(true);
+      }
+    };
+
+    const handleSoftNavEntry = (entry: PerformanceSoftNavigation) => {
+      if (lcpEntryManager._softNavigationEntryMap && entry.navigationId) {
+        storeSoftNavEntry(lcpEntryManager._softNavigationEntryMap, entry);
+      }
+
+      if (!isFinalized) report(true);
+      initNewLCPMetric(
+        'soft-navigation',
+        entry.navigationId,
+        entry.interactionId,
+        entry.name,
+        entry.startTime,
+      );
+      // Soft Navs should contain the largest paint until now, so handle that
+      // as if it just happened, then listen for more.
+      // It can however be null in rare circumstances
+      // (see https://github.com/GoogleChrome/web-vitals/issues/725)
+      const largestInteractionContentfulPaint =
+        entry.getLargestInteractionContentfulPaint?.();
+      if (largestInteractionContentfulPaint) {
+        handleEntries([largestInteractionContentfulPaint]);
+      }
+    };
+
+    const handleEntries = (
+      entries: (
+        | LargestContentfulPaint
+        | InteractionContentfulPaint
+        | PerformanceSoftNavigation
+      )[],
+    ) => {
+      // If reportAllChanges is set or soft navs is enabled then call this
+      // function for each entry, otherwise only consider the last one.
+      if (!opts.reportAllChanges && !softNavsEnabled) {
         entries = entries.slice(-1);
       }
 
       for (const entry of entries) {
-        lcpEntryManager._processEntry(entry);
+        if (!entry) continue;
 
-        // Only report if the page wasn't hidden prior to LCP.
-        if (entry.startTime < visibilityWatcher.firstHiddenTime) {
+        if (entry.entryType === 'soft-navigation') {
+          handleSoftNavEntry(entry as PerformanceSoftNavigation);
+          continue;
+        }
+
+        let value = 0;
+        let metricEntries: LargestContentfulPaint[] = [];
+        let renderTime = entry.startTime;
+        if (entry.entryType === 'largest-contentful-paint') {
           // The startTime attribute returns the value of the renderTime if it is
           // not 0, and the value of the loadTime otherwise. The activationStart
           // reference is used because LCP should be relative to page activation
           // rather than navigation start if the page was prerendered. But in cases
           // where `activationStart` occurs after the LCP, this time should be
           // clamped at 0.
-          metric.value = Math.max(entry.startTime - getActivationStart(), 0);
-          metric.entries = [entry];
+          value = Math.max(entry.startTime - getActivationStart(), 0);
+
+          lcpEntryManager._processEntry(entry as LargestContentfulPaint);
+          metricEntries = [entry as LargestContentfulPaint];
+        } else if (entry.entryType === 'interaction-contentful-paint') {
+          const ICPEntry = entry as InteractionContentfulPaint;
+          // InteractionContentfulPaints should only happen after a
+          // PerformanceSoftNavigation so the metric should have been set
+          // with a non-zero navigationId mapping to a soft nav.
+          if (!metric.navigationId) continue;
+
+          // Ignore interactions not for this soft nav
+          // (either paints that have bled into this interaction or paints when
+          // we should have already finalized)
+          if (
+            'interactionId' in ICPEntry &&
+            ICPEntry.interactionId != metric.navigationInteractionId
+          ) {
+            continue;
+          }
+
+          renderTime = ICPEntry.largestContentfulPaint?.renderTime || 0;
+
+          // Paints should never be less than 0 but add cap just in case
+          value = Math.max(renderTime - entry.startTime, 0);
+
+          if (ICPEntry.largestContentfulPaint) {
+            lcpEntryManager._processEntry(ICPEntry.largestContentfulPaint);
+            metricEntries = [ICPEntry.largestContentfulPaint];
+          }
+        }
+
+        // Only report if the page wasn't hidden prior to LCP.
+        if (renderTime < visibilityWatcher.firstHiddenTime) {
+          metric.value = value;
+          metric.entries = metricEntries;
           report();
         }
       }
     };
 
-    const po = observe('largest-contentful-paint', handleEntries);
+    const types = ['largest-contentful-paint'] as (
+      | 'largest-contentful-paint'
+      | 'interaction-contentful-paint'
+      | 'soft-navigation'
+    )[];
+    if (softNavsEnabled) {
+      types.push('interaction-contentful-paint', 'soft-navigation');
+    }
+    const po = observe(types, handleEntries);
 
     if (po) {
       report = bindReporter(
         onReport,
         metric,
         LCPThresholds,
-        opts!.reportAllChanges,
+        opts.reportAllChanges,
       );
 
-      // Ensure this logic only runs once, since it can be triggered from
-      // any of three different event listeners below.
-      const stopListening = runOnce(() => {
-        handleEntries(po!.takeRecords() as LCPMetric['entries']);
-        po!.disconnect();
-        report(true);
-      });
+      const finalizeEventTypes = ['keydown', 'click', 'visibilitychange'];
 
-      // Need a separate wrapper to ensure the `runOnce` function above is
-      // common for all three functions
-      const stopListeningWrapper = (event: Event) => {
-        if (event.isTrusted) {
+      const finalizeLCP = (event: Event) => {
+        if (event.isTrusted && !isFinalized) {
           // Wrap the listener in an idle callback so it's run in a separate
           // task to reduce potential INP impact.
           // https://github.com/GoogleChrome/web-vitals/issues/383
-          whenIdleOrHidden(stopListening);
-          removeEventListener(event.type, stopListeningWrapper, {
-            capture: true,
+          const metricIdToFinalize = metric.id;
+          whenIdleOrHidden(() => {
+            if (!isFinalized) {
+              if (!softNavsEnabled) {
+                // Do some clean up since these won't be needed anymore.
+                po!.disconnect();
+                for (const type of finalizeEventTypes) {
+                  removeEventListener(type, finalizeLCP, {capture: true});
+                }
+              }
+              // As this is in a whenIdleOrHidden check, whether we're still
+              // on the metric you meant to finalize, and ignore if we've moved
+              // on in the meantime.
+              if (metricIdToFinalize === metric.id) {
+                isFinalized = true;
+                report(true);
+              }
+            }
           });
         }
       };
 
-      // Stop listening after input or visibilitychange.
+      // Finalize the current LCP after input or visibilitychange.
+      // Although the browser will automatically stop emitting entries in these
+      // cases, we don't know it's finalized, so we track to allow early report.
       // Note: while scrolling is an input that stops LCP observation, it's
       // unreliable since it can be programmatically generated.
       // See: https://github.com/GoogleChrome/web-vitals/issues/75
-      for (const type of ['keydown', 'click', 'visibilitychange']) {
-        addEventListener(type, stopListeningWrapper, {
+      for (const type of finalizeEventTypes) {
+        addEventListener(type, finalizeLCP, {
           capture: true,
         });
       }
@@ -123,16 +251,23 @@ export const onLCP = (
       // Only report after a bfcache restore if the `PerformanceObserver`
       // successfully registered.
       onBFCacheRestore((event) => {
-        metric = initMetric('LCP');
+        initNewLCPMetric(
+          'back-forward-cache',
+          metric.navigationId,
+          metric.navigationInteractionId,
+          metric.navigationURL,
+          getBFCacheRestoreTime(),
+        );
         report = bindReporter(
           onReport,
           metric,
           LCPThresholds,
-          opts!.reportAllChanges,
+          opts.reportAllChanges,
         );
 
         doubleRAF(() => {
           metric.value = performance.now() - event.timeStamp;
+          isFinalized = true;
           report(true);
         });
       });

package/front_end/third_party/web-vitals/package/src/onTTFB.ts

@@ -15,12 +15,14 @@
  */
 
 import {bindReporter} from './lib/bindReporter.js';
-import {initMetric} from './lib/initMetric.js';
-import {onBFCacheRestore} from './lib/bfcache.js';
+import {checkSoftNavsEnabled} from './lib/softNavs.js';
 import {getNavigationEntry} from './lib/getNavigationEntry.js';
-import {MetricRatingThresholds, ReportOpts, TTFBMetric} from './types.js';
 import {getActivationStart} from './lib/getActivationStart.js';
+import {initMetric} from './lib/initMetric.js';
+import {observe} from './lib/observe.js';
+import {getBFCacheRestoreTime, onBFCacheRestore} from './lib/bfcache.js';
 import {whenActivated} from './lib/whenActivated.js';
+import type {MetricRatingThresholds, ReportOpts, TTFBMetric} from './types.js';
 
 /** Thresholds for TTFB. See https://web.dev/articles/ttfb#what_is_a_good_ttfb_score */
 export const TTFBThresholds: MetricRatingThresholds = [800, 1800];
@@ -59,6 +61,8 @@ export const onTTFB = (
   onReport: (metric: TTFBMetric) => void,
   opts: ReportOpts = {},
 ) => {
+  const softNavsEnabled = checkSoftNavsEnabled(opts);
+
   let metric = initMetric('TTFB');
   let report = bindReporter(
     onReport,
@@ -68,34 +72,67 @@ export const onTTFB = (
   );
 
   whenReady(() => {
-    const navigationEntry = getNavigationEntry();
-
-    if (navigationEntry) {
+    const hardNavEntry = getNavigationEntry();
+    if (hardNavEntry) {
+      const responseStart = hardNavEntry.responseStart;
       // The activationStart reference is used because TTFB should be
       // relative to page activation rather than navigation start if the
       // page was prerendered. But in cases where `activationStart` occurs
       // after the first byte is received, this time should be clamped at 0.
-      metric.value = Math.max(
-        navigationEntry.responseStart - getActivationStart(),
-        0,
-      );
+      metric.value = Math.max(responseStart - getActivationStart(), 0);
 
-      metric.entries = [navigationEntry];
+      metric.entries = [hardNavEntry];
       report(true);
 
       // Only report TTFB after bfcache restores if a `navigation` entry
       // was reported for the initial load.
       onBFCacheRestore(() => {
-        metric = initMetric('TTFB', 0);
+        metric = initMetric(
+          'TTFB',
+          0,
+          'back-forward-cache',
+          metric.navigationId,
+          metric.navigationInteractionId,
+          metric.navigationURL,
+          getBFCacheRestoreTime(),
+        );
         report = bindReporter(
           onReport,
           metric,
           TTFBThresholds,
-          opts!.reportAllChanges,
+          opts.reportAllChanges,
         );
 
         report(true);
       });
+
+      // Listen for soft-navigation entries and emit a dummy 0 TTFB entry
+      if (softNavsEnabled) {
+        const reportSoftNavTTFBs = (entries: PerformanceSoftNavigation[]) => {
+          entries.forEach((entry) => {
+            if (entry.navigationId) {
+              metric = initMetric(
+                'TTFB',
+                0,
+                'soft-navigation',
+                entry.navigationId,
+                entry.interactionId,
+                entry.name,
+                entry.startTime,
+              );
+              metric.entries = [entry];
+              report = bindReporter(
+                onReport,
+                metric,
+                TTFBThresholds,
+                opts.reportAllChanges,
+              );
+              report(true);
+            }
+          });
+        };
+        observe(['soft-navigation'], reportSoftNavTTFBs, opts);
+      }
     }
   });
 };

package/front_end/third_party/web-vitals/package/src/types/base.ts

@@ -72,6 +72,7 @@ export interface Metric {
    * - 'prerender': for pages that were prerendered.
    * - 'restore': for pages that were discarded by the browser and then
    * restored by the user.
+   * - 'soft-navigation': for soft navigations.
    */
   navigationType:
     | 'navigate'
@@ -79,16 +80,37 @@ export interface Metric {
     | 'back-forward'
     | 'back-forward-cache'
     | 'prerender'
-    | 'restore';
+    | 'restore'
+    | 'soft-navigation';
+
+  /**
+   * The navigationId the metric happened for. This is particularly relevant for soft navigations where
+   * the metric may be reported for a previous URL.
+   */
+  navigationId: number;
+
+  /**
+   * For metrics specific to a soft navigation, the interactionId of the
+   * interaction that triggered that soft navigation.
+   */
+  navigationInteractionId?: number;
+
+  /**
+   * The navigation startTime the metric is based from. This is particularly
+   * relevant for soft navigations where time origin is not 0.
+   */
+  navigationStartTime?: number;
+
+  /**
+   * The navigation URL the metric happened for. This is particularly relevant for soft navigations where
+   * the metric may be reported for a previous URL.
+   */
+  navigationURL?: string;
 }
 
 /** The union of supported metric types. */
 export type MetricType =
-  | CLSMetric
-  | FCPMetric
-  | INPMetric
-  | LCPMetric
-  | TTFBMetric;
+  CLSMetric | FCPMetric | INPMetric | LCPMetric | TTFBMetric;
 
 /** The union of supported metric attribution types. */
 export type MetricWithAttribution =
@@ -124,6 +146,8 @@ export interface ReportCallback {
 
 export interface ReportOpts {
   reportAllChanges?: boolean;
+  durationThreshold?: number;
+  reportSoftNavs?: boolean;
 }
 
 export interface AttributionReportOpts extends ReportOpts {
@@ -146,7 +170,4 @@ export interface AttributionReportOpts extends ReportOpts {
  *   loading. This is equivalent to the corresponding `readyState` value.
  */
 export type LoadState =
-  | 'loading'
-  | 'dom-interactive'
-  | 'dom-content-loaded'
-  | 'complete';
+  'loading' | 'dom-interactive' | 'dom-content-loaded' | 'complete';

package/front_end/third_party/web-vitals/package/src/types/fcp.ts

@@ -54,7 +54,7 @@ export interface FCPAttribution {
    * general page load issues. This can be used to access `serverTiming` for example:
    * navigationEntry?.serverTiming
    */
-  navigationEntry?: PerformanceNavigationTiming;
+  navigationEntry?: PerformanceNavigationTiming | PerformanceSoftNavigation;
 }
 
 /**

package/front_end/third_party/web-vitals/package/src/types/inp.ts

@@ -69,35 +69,43 @@ export interface INPAttribution {
    * `generateTarget` configuration option was passed, then this will instead
    * be the return value of that function, falling back to the default if that
    * returns null or undefined.
+   * This value may not be set in cases where the event duration was less than
+   * the browser minimum reporting threshold, and thus no entry was dispatched.
    */
-  interactionTarget: string;
+  interactionTarget?: string;
   /**
    * The time when the user first interacted during the frame where the INP
    * candidate interaction occurred (if more than one interaction occurred
    * within the frame, only the first time is reported).
+   * This value may not be set in cases where the event duration was less than
+   * the browser minimum reporting threshold, and thus no entry was dispatched.
    */
-  interactionTime: DOMHighResTimeStamp;
+  interactionTime?: DOMHighResTimeStamp;
   /**
    * The type of interaction, based on the event type of the `event` entry
    * that corresponds to the interaction (i.e. the first `event` entry
    * containing an `interactionId` dispatched in a given animation frame).
    * For "pointerdown", "pointerup", or "click" events this will be "pointer",
    * and for "keydown" or "keyup" events this will be "keyboard".
+   * This value may not be set in cases where the event duration was less than
+   * the browser minimum reporting threshold, and thus no entry was dispatched.
    */
-  interactionType: 'pointer' | 'keyboard';
+  interactionType?: 'pointer' | 'keyboard';
   /**
    * The best-guess timestamp of the next paint after the interaction.
    * In general, this timestamp is the same as the `startTime + duration` of
    * the event timing entry. However, since duration values are rounded to the
    * nearest 8ms (and can be rounded down), this value is clamped to always be
    * reported after the processing times.
+   * This value may not be set in cases where the event duration was less than
+   * the browser minimum reporting threshold, and thus no entry was dispatched.
    */
-  nextPaintTime: DOMHighResTimeStamp;
+  nextPaintTime?: DOMHighResTimeStamp;
   /**
    * An array of Event Timing entries that were processed within the same
    * animation frame as the INP candidate interaction.
-   * This array can be quite large so it will be empty if the
-   * `includeProcessedEventEntries` configuration option is set to `false` to
+   * This array can be quite large so it will be empty unless the
+   * `includeProcessedEventEntries` configuration option is set to `true` to
    * conserve memory if these entries are not required.
    */
   processedEventEntries: PerformanceEventTiming[];

package/front_end/third_party/web-vitals/package/src/types/lcp.ts

@@ -72,7 +72,7 @@ export interface LCPAttribution {
    * general page load issues. This can be used to access `serverTiming` for example:
    * navigationEntry?.serverTiming
    */
-  navigationEntry?: PerformanceNavigationTiming;
+  navigationEntry?: PerformanceNavigationTiming | PerformanceSoftNavigation;
   /**
    * The `resource` entry for the LCP resource (if applicable), which is useful
    * for diagnosing resource load issues.

package/front_end/third_party/web-vitals/package/src/types/ttfb.ts

@@ -21,7 +21,7 @@ import type {Metric} from './base.js';
  */
 export interface TTFBMetric extends Metric {
   name: 'TTFB';
-  entries: PerformanceNavigationTiming[];
+  entries: PerformanceNavigationTiming[] | PerformanceSoftNavigation[];
 }
 
 /**
@@ -67,7 +67,7 @@ export interface TTFBAttribution {
    * general page load issues. This can be used to access `serverTiming` for
    * example: navigationEntry?.serverTiming
    */
-  navigationEntry?: PerformanceNavigationTiming;
+  navigationEntry?: PerformanceNavigationTiming | PerformanceSoftNavigation;
 }
 
 /**

package/front_end/third_party/web-vitals/package/src/types.ts

@@ -27,9 +27,13 @@ export * from './types/ttfb.js';
 // --------------------------------------------------------------------------
 
 interface PerformanceEntryMap {
-  navigation: PerformanceNavigationTiming;
-  resource: PerformanceResourceTiming;
-  paint: PerformancePaintTiming;
+  'event': PerformanceEventTiming;
+  'interaction-contentful-paint': InteractionContentfulPaint;
+  'layout-shift': LayoutShift;
+  'navigation': PerformanceNavigationTiming;
+  'paint': PerformancePaintTiming;
+  'resource': PerformanceResourceTiming;
+  'soft-navigation': PerformanceSoftNavigation;
 }
 
 // Update built-in types to be more accurate.
@@ -47,13 +51,18 @@ declare global {
     ): PerformanceEntryMap[K][];
   }
 
+  // https://w3c.github.io/event-timing/#sec-modifications-perf-timeline
+  interface PerformanceEntry {
+    navigationId?: number;
+  }
+
   // https://w3c.github.io/event-timing/#sec-modifications-perf-timeline
   interface PerformanceObserverInit {
     durationThreshold?: number;
   }
 
   // https://wicg.github.io/nav-speculation/prerendering.html#performance-navigation-timing-extension
-  interface PerformanceNavigationTiming {
+  interface PerformanceNavigationTiming extends PerformanceEntry {
     activationStart?: number;
   }
 
@@ -61,6 +70,7 @@ declare global {
   interface PerformanceEventTiming extends PerformanceEntry {
     duration: DOMHighResTimeStamp;
     readonly interactionId: number;
+    readonly targetSelector: string;
   }
 
   // https://wicg.github.io/layout-instability/#sec-layout-shift-attribution
@@ -87,6 +97,23 @@ declare global {
     readonly element: Element | null;
   }
 
+  // https://github.com/WICG/soft-navigations
+  interface InteractionContentfulPaint extends PerformanceEntry {
+    readonly interactionId: number;
+    readonly largestContentfulPaint?: LargestContentfulPaint;
+  }
+  interface PerformanceSoftNavigation extends PerformanceEntry {
+    readonly interactionId: number;
+    readonly navigationType?: NavigationType;
+    readonly paintTime?: number;
+    readonly presentationTime?: number;
+    readonly getLargestInteractionContentfulPaint?: () => InteractionContentfulPaint | null;
+  }
+
+  var PerformanceSoftNavigation: {
+    prototype: PerformanceSoftNavigation;
+  };
+
   // https://w3c.github.io/long-animation-frame/#sec-PerformanceLongAnimationFrameTiming
   export type ScriptInvokerType =
     | 'classic-script'
@@ -98,11 +125,7 @@ declare global {
 
   // https://w3c.github.io/long-animation-frame/#sec-PerformanceLongAnimationFrameTiming
   export type ScriptWindowAttribution =
-    | 'self'
-    | 'descendant'
-    | 'ancestor'
-    | 'same-page'
-    | 'other';
+    'self' | 'descendant' | 'ancestor' | 'same-page' | 'other';
 
   // https://w3c.github.io/long-animation-frame/#sec-PerformanceLongAnimationFrameTiming
   interface PerformanceScriptTiming extends PerformanceEntry {