chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

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

@@ -14,17 +14,23 @@
  * limitations under the License.
  */
 
-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 {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
 import {initMetric} from './lib/initMetric.js';
 import {initUnique} from './lib/initUnique.js';
 import {LayoutShiftManager} from './lib/LayoutShiftManager.js';
 import {observe} from './lib/observe.js';
+import {checkSoftNavsEnabled} from './lib/softNavs.js';
 import {runOnce} from './lib/runOnce.js';
 import {onFCP} from './onFCP.js';
-import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
-import {CLSMetric, MetricRatingThresholds, ReportOpts} from './types.js';
+import type {
+  CLSMetric,
+  Metric,
+  MetricRatingThresholds,
+  ReportOpts,
+} from './types.js';
 
 /** Thresholds for CLS. See https://web.dev/articles/cls#what_is_a_good_cls_score */
 export const CLSThresholds: MetricRatingThresholds = [0.1, 0.25];
@@ -64,44 +70,95 @@ export const onCLS = (
 
       const layoutShiftManager = initUnique(opts, LayoutShiftManager);
 
-      const handleEntries = (entries: LayoutShift[]) => {
-        for (const entry of entries) {
-          layoutShiftManager._processEntry(entry);
-        }
+      const initNewCLSMetric = (
+        navigationType?: Metric['navigationType'],
+        navigationId?: number,
+        navigationInteractionId?: number,
+        navigationURL?: string,
+        navigationStartTime?: number,
+      ) => {
+        metric = initMetric(
+          'CLS',
+          0,
+          navigationType,
+          navigationId,
+          navigationInteractionId,
+          navigationURL,
+          navigationStartTime,
+        );
+        layoutShiftManager._sessionValue = 0;
+        report = bindReporter(
+          onReport,
+          metric,
+          CLSThresholds,
+          opts.reportAllChanges,
+        );
+      };
 
+      const updateAndReportMetric = (forceReport: boolean = false) => {
         // If the current session value is larger than the current CLS value,
         // update CLS and the entries contributing to it.
         if (layoutShiftManager._sessionValue > metric.value) {
           metric.value = layoutShiftManager._sessionValue;
           metric.entries = layoutShiftManager._sessionEntries;
-          report();
         }
+        report(forceReport);
       };
 
-      const po = observe('layout-shift', handleEntries);
+      const handleSoftNavEntry = (entry: PerformanceSoftNavigation) => {
+        updateAndReportMetric(true);
+        initNewCLSMetric(
+          'soft-navigation',
+          entry.navigationId,
+          entry.interactionId,
+          entry.name,
+          entry.startTime,
+        );
+      };
+
+      const handleEntries = (
+        entries: (LayoutShift | PerformanceSoftNavigation)[],
+      ) => {
+        for (const entry of entries) {
+          if (entry.entryType === 'soft-navigation') {
+            handleSoftNavEntry(entry as PerformanceSoftNavigation);
+            continue;
+          }
+          layoutShiftManager._processEntry(entry as LayoutShift);
+        }
+
+        updateAndReportMetric();
+      };
+
+      const types = ['layout-shift'] as ('layout-shift' | 'soft-navigation')[];
+      if (checkSoftNavsEnabled(opts)) {
+        types.push('soft-navigation');
+      }
+      const po = observe(types, handleEntries);
       if (po) {
         report = bindReporter(
           onReport,
           metric,
           CLSThresholds,
-          opts!.reportAllChanges,
+          opts.reportAllChanges,
         );
 
         visibilityWatcher.onHidden(() => {
-          handleEntries(po.takeRecords() as CLSMetric['entries']);
+          handleEntries(
+            po.takeRecords() as [LayoutShift | PerformanceSoftNavigation],
+          );
           report(true);
         });
 
         // Only report after a bfcache restore if the `PerformanceObserver`
         // successfully registered.
         onBFCacheRestore(() => {
-          layoutShiftManager._sessionValue = 0;
-          metric = initMetric('CLS', 0);
-          report = bindReporter(
-            onReport,
-            metric,
-            CLSThresholds,
-            opts!.reportAllChanges,
+          initNewCLSMetric(
+            'back-forward-cache',
+            metric.navigationId,
+            metric.navigationInteractionId,
+            metric.navigationURL,
+            getBFCacheRestoreTime(),
           );
 
           doubleRAF(report);

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

@@ -14,15 +14,18 @@
  * limitations under the License.
  */
 
-import {onBFCacheRestore} from './lib/bfcache.js';
 import {bindReporter} from './lib/bindReporter.js';
+import {checkSoftNavsEnabled, storeSoftNavEntry} from './lib/softNavs.js';
 import {doubleRAF} from './lib/doubleRAF.js';
 import {getActivationStart} from './lib/getActivationStart.js';
 import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
 import {initMetric} from './lib/initMetric.js';
+import {initUnique} from './lib/initUnique.js';
+import {FCPEntryManager} from './lib/FCPEntryManager.js';
 import {observe} from './lib/observe.js';
+import {getBFCacheRestoreTime, onBFCacheRestore} from './lib/bfcache.js';
 import {whenActivated} from './lib/whenActivated.js';
-import {FCPMetric, MetricRatingThresholds, ReportOpts} from './types.js';
+import type {FCPMetric, MetricRatingThresholds, ReportOpts} from './types.js';
 
 /** Thresholds for FCP. See https://web.dev/articles/fcp#what_is_a_good_fcp_score */
 export const FCPThresholds: MetricRatingThresholds = [1800, 3000];
@@ -37,7 +40,13 @@ export const onFCP = (
   onReport: (metric: FCPMetric) => void,
   opts: ReportOpts = {},
 ) => {
+  const softNavsEnabled = checkSoftNavsEnabled(opts);
+
   whenActivated(() => {
+    // Create a new FCP entry manager for each page activation
+    // This allows us to track soft navigations separately
+    // needed when attribution is enabled.
+    const fcpEntryManager = initUnique(opts, FCPEntryManager);
     const visibilityWatcher = getVisibilityWatcher();
     let metric = initMetric('FCP');
     let report: ReturnType<typeof bindReporter>;
@@ -47,7 +56,7 @@ export const onFCP = (
         if (entry.name === 'first-contentful-paint') {
           po!.disconnect();
 
-          // Only report if the page wasn't hidden prior to the first paint.
+          // Only report if the page wasn't hidden prior to FCP.
           if (entry.startTime < visibilityWatcher.firstHiddenTime) {
             // The activationStart reference is used because FCP should be
             // relative to page activation rather than navigation start if the
@@ -55,31 +64,41 @@ export const onFCP = (
             // after the FCP, this time should be clamped at 0.
             metric.value = Math.max(entry.startTime - getActivationStart(), 0);
             metric.entries.push(entry);
+            metric.navigationId = entry.navigationId || metric.navigationId;
+            // FCP should only be reported once so can report right away
             report(true);
           }
         }
       }
     };
 
-    const po = observe('paint', handleEntries);
+    const po = observe(['paint'], handleEntries);
 
     if (po) {
       report = bindReporter(
         onReport,
         metric,
         FCPThresholds,
-        opts!.reportAllChanges,
+        opts.reportAllChanges,
       );
 
       // Only report after a bfcache restore if the `PerformanceObserver`
       // successfully registered or the `paint` entry exists.
       onBFCacheRestore((event) => {
-        metric = initMetric('FCP');
+        metric = initMetric(
+          'FCP',
+          -1,
+          'back-forward-cache',
+          metric.navigationId,
+          metric.navigationInteractionId,
+          metric.navigationURL,
+          getBFCacheRestoreTime(),
+        );
         report = bindReporter(
           onReport,
           metric,
           FCPThresholds,
-          opts!.reportAllChanges,
+          opts.reportAllChanges,
         );
 
         doubleRAF(() => {
@@ -88,5 +107,45 @@ export const onFCP = (
         });
       });
     }
+
+    if (softNavsEnabled) {
+      // As first-contentful-paint is only reported once, we can handle soft
+      // navigations afterwards on their own for simplicity, as no need to
+      // observe both and sort the entries like for the other metrics
+      const handleSoftNavEntries = (entries: PerformanceSoftNavigation[]) => {
+        entries.forEach((entry) => {
+          // Store the soft navigation entries in the entry manager so that
+          // they can be retrieved for attribution if necessary. This code
+          // is only used when attribution is enabled which sets the
+          // _softNavigationEntryMap.
+          if (fcpEntryManager._softNavigationEntryMap && entry.navigationId) {
+            storeSoftNavEntry(fcpEntryManager._softNavigationEntryMap, entry);
+          }
+
+          // Clamp FCP at 0. It should never be less, but better safe than sorry.
+          const FCPTime = Math.max(
+            (entry.presentationTime || entry.paintTime || 0) - entry.startTime,
+            0,
+          );
+          metric = initMetric(
+            'FCP',
+            FCPTime,
+            'soft-navigation',
+            entry.navigationId,
+            entry.interactionId,
+            entry.name,
+            entry.startTime,
+          );
+          report = bindReporter(
+            onReport,
+            metric,
+            FCPThresholds,
+            opts.reportAllChanges,
+          );
+          report(true);
+        });
+      };
+      observe(['soft-navigation'], handleSoftNavEntries, opts);
+    }
   });
 };

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

@@ -14,24 +14,36 @@
  * limitations under the License.
  */
 
-import {onBFCacheRestore} from './lib/bfcache.js';
+import {getBFCacheRestoreTime, onBFCacheRestore} from './lib/bfcache.js';
 import {bindReporter} from './lib/bindReporter.js';
 import {initMetric} from './lib/initMetric.js';
 import {initUnique} from './lib/initUnique.js';
 import {InteractionManager} from './lib/InteractionManager.js';
 import {observe} from './lib/observe.js';
+import {checkSoftNavsEnabled} from './lib/softNavs.js';
 import {initInteractionCountPolyfill} from './lib/polyfills/interactionCountPolyfill.js';
 import {whenActivated} from './lib/whenActivated.js';
 import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
 import {whenIdleOrHidden} from './lib/whenIdleOrHidden.js';
 
-import {INPMetric, MetricRatingThresholds, INPReportOpts} from './types.js';
+import type {
+  INPMetric,
+  Metric,
+  MetricRatingThresholds,
+  INPReportOpts,
+} from './types.js';
 
 /** Thresholds for INP. See https://web.dev/articles/inp#what_is_a_good_inp_score */
 export const INPThresholds: MetricRatingThresholds = [200, 500];
 
 // The default `durationThreshold` used across this library for observing
 // `event` entries via PerformanceObserver.
+// Event Timing entries have their durations rounded to the nearest 8ms,
+// so a duration of 40ms would be any event that spans 2.5 or more frames
+// at 60Hz. This threshold is chosen to strike a balance between usefulness
+// and performance. Running this callback for any interaction that spans
+// just one or two frames is likely not worth the insight that could be
+// gained.
 const DEFAULT_DURATION_THRESHOLD = 40;
 
 /**
@@ -68,12 +80,10 @@ export const onINP = (
   opts: INPReportOpts = {},
 ) => {
   // Return if the browser doesn't support all APIs needed to measure INP.
-  if (
-    !(
-      globalThis.PerformanceEventTiming &&
-      'interactionId' in PerformanceEventTiming.prototype
-    )
-  ) {
+  if (!(
+    globalThis.PerformanceEventTiming &&
+    'interactionId' in PerformanceEventTiming.prototype
+  )) {
     return;
   }
 
@@ -88,7 +98,59 @@ export const onINP = (
 
     const interactionManager = initUnique(opts, InteractionManager);
 
-    const handleEntries = (entries: INPMetric['entries']) => {
+    const initNewINPMetric = (
+      navigationType?: Metric['navigationType'],
+      navigationId?: number,
+      navigationInteractionId?: number,
+      navigationURL?: string,
+      navigationStartTime?: number,
+    ) => {
+      interactionManager._resetInteractions();
+      metric = initMetric(
+        'INP',
+        -1,
+        navigationType,
+        navigationId,
+        navigationInteractionId,
+        navigationURL,
+        navigationStartTime,
+      );
+      report = bindReporter(
+        onReport,
+        metric,
+        INPThresholds,
+        opts.reportAllChanges,
+      );
+    };
+
+    const updateINPMetric = () => {
+      const inp = interactionManager._estimateP98LongestInteraction(
+        metric.navigationType,
+      );
+
+      if (inp && inp._latency !== metric.value) {
+        metric.value = inp._latency;
+        metric.entries = inp.entries;
+        report();
+      }
+    };
+
+    const handleSoftNavEntry = (entry: PerformanceSoftNavigation) => {
+      updateINPMetric();
+      report(true);
+      initNewINPMetric(
+        'soft-navigation',
+        entry.navigationId,
+        entry.interactionId,
+        entry.name,
+        entry.startTime,
+      );
+    };
+
+    const handleEntries = (
+      entries: (PerformanceEventTiming | PerformanceSoftNavigation)[],
+      forceReport: boolean = false,
+    ) => {
       // Queue the `handleEntries()` callback in the next idle task.
       // This is needed to increase the chances that all event entries that
       // occurred between the user interaction and the next paint
@@ -97,28 +159,29 @@ export const onINP = (
       // 123+ that if rolled out fully may make this no longer necessary.
       whenIdleOrHidden(() => {
         for (const entry of entries) {
-          interactionManager._processEntry(entry);
+          if (entry.entryType === 'soft-navigation') {
+            handleSoftNavEntry(entry as PerformanceSoftNavigation);
+            continue;
+          }
+          interactionManager._processEntry(entry as PerformanceEventTiming);
         }
-
-        const inp = interactionManager._estimateP98LongestInteraction();
-
-        if (inp && inp._latency !== metric.value) {
-          metric.value = inp._latency;
-          metric.entries = inp.entries;
-          report();
+        updateINPMetric();
+        if (forceReport) {
+          report(true);
         }
       });
     };
 
-    const po = observe('event', handleEntries, {
-      // Event Timing entries have their durations rounded to the nearest 8ms,
-      // so a duration of 40ms would be any event that spans 2.5 or more frames
-      // at 60Hz. This threshold is chosen to strike a balance between usefulness
-      // and performance. Running this callback for any interaction that spans
-      // just one or two frames is likely not worth the insight that could be
-      // gained.
+    const types = ['event', 'first-input'] as (
+      'event' | 'first-input' | 'soft-navigation'
+    )[];
+    if (checkSoftNavsEnabled(opts)) {
+      types.push('soft-navigation');
+    }
+    const po = observe(types, handleEntries, {
+      ...opts,
       durationThreshold: opts.durationThreshold ?? DEFAULT_DURATION_THRESHOLD,
-    });
+    } as PerformanceObserverInit);
 
     report = bindReporter(
       onReport,
@@ -128,26 +191,24 @@ export const onINP = (
     );
 
     if (po) {
-      // Also observe entries of type `first-input`. This is useful in cases
-      // where the first interaction is less than the `durationThreshold`.
-      po.observe({type: 'first-input', buffered: true});
-
       visibilityWatcher.onHidden(() => {
-        handleEntries(po.takeRecords() as INPMetric['entries']);
-        report(true);
+        handleEntries(
+          po.takeRecords() as [
+            PerformanceEventTiming | PerformanceSoftNavigation,
+          ],
+          true, // forceReport after processing all entries
+        );
       });
 
       // Only report after a bfcache restore if the `PerformanceObserver`
       // successfully registered.
       onBFCacheRestore(() => {
-        interactionManager._resetInteractions();
-
-        metric = initMetric('INP');
-        report = bindReporter(
-          onReport,
-          metric,
-          INPThresholds,
-          opts.reportAllChanges,
+        initNewINPMetric(
+          'back-forward-cache',
+          metric.navigationId,
+          metric.navigationInteractionId,
+          metric.navigationURL,
+          getBFCacheRestoreTime(),
         );
       });
     }