chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/third_party/web-vitals/package/dist/modules/lib/observe.d.ts

@@ -1,12 +1,14 @@
 interface PerformanceEntryMap {
     'event': PerformanceEventTiming[];
     'first-input': PerformanceEventTiming[];
+    'interaction-contentful-paint': InteractionContentfulPaint[];
     'layout-shift': LayoutShift[];
     'largest-contentful-paint': LargestContentfulPaint[];
     'long-animation-frame': PerformanceLongAnimationFrameTiming[];
     'paint': PerformancePaintTiming[];
     'navigation': PerformanceNavigationTiming[];
     'resource': PerformanceResourceTiming[];
+    'soft-navigation': PerformanceSoftNavigation[];
 }
 /**
  * Takes a performance entry type and a callback function, and creates a
@@ -16,5 +18,5 @@ interface PerformanceEntryMap {
  * This function also feature-detects entry support and wraps the logic in a
  * try/catch to avoid errors in unsupporting browsers.
  */
-export declare const observe: <K extends keyof PerformanceEntryMap>(type: K, callback: (entries: PerformanceEntryMap[K]) => void, opts?: PerformanceObserverInit) => PerformanceObserver | undefined;
+export declare const observe: <K extends keyof PerformanceEntryMap>(types: K[], callback: (entries: Array<PerformanceEntryMap[K][number]>) => void, opts?: PerformanceObserverInit) => PerformanceObserver | undefined;
 export {};

package/front_end/third_party/web-vitals/package/dist/modules/lib/observe.js

@@ -21,18 +21,33 @@
  * This function also feature-detects entry support and wraps the logic in a
  * try/catch to avoid errors in unsupporting browsers.
  */
-export const observe = (type, callback, opts = {}) => {
+export const observe = (types, callback, opts = {}) => {
     try {
-        if (PerformanceObserver.supportedEntryTypes.includes(type)) {
+        const supportedTypes = types.filter((t) => PerformanceObserver.supportedEntryTypes.includes(t));
+        if (supportedTypes.length > 0) {
             const po = new PerformanceObserver((list) => {
                 // Delay by a microtask to workaround a bug in Safari where the
                 // callback is invoked immediately, rather than in a separate task.
                 // See: https://github.com/GoogleChrome/web-vitals/issues/277
                 queueMicrotask(() => {
-                    callback(list.getEntries());
+                    const entries = list.getEntries();
+                    // When observing more than one entry type, entries from different
+                    // types can be delivered out of order, so sort by end time
+                    // (startTime + duration) to ensure they're in the right order.
+                    // See: https://github.com/w3c/performance-timeline/issues/224
+                    if (supportedTypes.length > 1) {
+                        entries.sort((a, b) => {
+                            const scoreA = a.startTime + a.duration;
+                            const scoreB = b.startTime + b.duration;
+                            return scoreA - scoreB;
+                        });
+                    }
+                    callback(entries);
                 });
             });
-            po.observe({ type, buffered: true, ...opts });
+            for (const t of supportedTypes) {
+                po.observe({ type: t, buffered: true, ...opts });
+            }
             return po;
         }
     }

package/front_end/third_party/web-vitals/package/dist/modules/lib/polyfills/interactionCountPolyfill.js

@@ -42,7 +42,7 @@ export const getInteractionCount = () => {
 export const initInteractionCountPolyfill = () => {
     if ('interactionCount' in performance || po)
         return;
-    po = observe('event', updateEstimate, {
+    po = observe(['event'], updateEstimate, {
         durationThreshold: 0,
     });
 };

package/front_end/third_party/web-vitals/package/dist/modules/lib/softNavs.d.ts

@@ -0,0 +1,3 @@
+import type { ReportOpts } from '../types.js';
+export declare const checkSoftNavsEnabled: (opts?: ReportOpts) => boolean | undefined;
+export declare const storeSoftNavEntry: (map: Map<number, PerformanceSoftNavigation>, entry: PerformanceSoftNavigation) => void;

package/front_end/third_party/web-vitals/package/dist/modules/lib/softNavs.js

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const checkSoftNavsEnabled = (opts) => {
+    return (PerformanceObserver.supportedEntryTypes.includes('soft-navigation') &&
+        // Older implementations expose the value as an attribute rather than the
+        // method. We only support the newer method as that was what was launched
+        // to stable unflagged.
+        typeof globalThis.PerformanceSoftNavigation?.prototype
+            ?.getLargestInteractionContentfulPaint === 'function' &&
+        opts &&
+        opts.reportSoftNavs);
+};
+// Stores a soft navigation entry keyed by its navigationId, keeping only
+// the 2 most recent entries so the map cannot grow unbounded.
+export const storeSoftNavEntry = (map, entry) => {
+    map.set(entry.navigationId, entry);
+    // Clean up older entries to prevent memory leaks, keeping only
+    // the 2 most recent entries.
+    if (map.size > 2) {
+        const firstKey = map.keys().next().value;
+        if (firstKey !== undefined) {
+            map.delete(firstKey);
+        }
+    }
+};

package/front_end/third_party/web-vitals/package/dist/modules/lib/whenIdleOrHidden.js

@@ -19,6 +19,10 @@ import { runOnce } from './runOnce.js';
  * if the browser's visibility state is (or becomes) hidden.
  */
 export const whenIdleOrHidden = (cb) => {
+    // Cap the requestIdleCallback to 1 sec for very busy apps
+    // https://github.com/GoogleChrome/web-vitals/issues/754
+    // If not using rIC, then the setTimeout timeout should be 0
+    const timeout = 'requestIdleCallback' in globalThis ? 1000 : 0;
     const rIC = globalThis.requestIdleCallback || setTimeout;
     const cIC = globalThis.cancelIdleCallback || clearTimeout;
     // If the document is hidden, run the callback immediately, otherwise
@@ -37,6 +41,6 @@ export const whenIdleOrHidden = (cb) => {
         idleHandle = rIC(() => {
             removeEventListener('visibilitychange', onHidden, { capture: true });
             wrappedCb();
-        });
+        }, { timeout: timeout });
     }
 };

package/front_end/third_party/web-vitals/package/dist/modules/onCLS.d.ts

@@ -1,4 +1,4 @@
-import { CLSMetric, MetricRatingThresholds, ReportOpts } from './types.js';
+import type { CLSMetric, MetricRatingThresholds, ReportOpts } from './types.js';
 /** Thresholds for CLS. See https://web.dev/articles/cls#what_is_a_good_cls_score */
 export declare const CLSThresholds: MetricRatingThresholds;
 /**

package/front_end/third_party/web-vitals/package/dist/modules/onCLS.js

@@ -13,16 +13,17 @@
  * See the License for the specific language governing permissions and
  * 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';
 /** Thresholds for CLS. See https://web.dev/articles/cls#what_is_a_good_cls_score */
 export const CLSThresholds = [0.1, 0.25];
 /**
@@ -54,19 +55,39 @@ export const onCLS = (onReport, opts = {}) => {
         let metric = initMetric('CLS', 0);
         let report;
         const layoutShiftManager = initUnique(opts, LayoutShiftManager);
-        const handleEntries = (entries) => {
-            for (const entry of entries) {
-                layoutShiftManager._processEntry(entry);
-            }
+        const initNewCLSMetric = (navigationType, navigationId, navigationInteractionId, navigationURL, navigationStartTime) => {
+            metric = initMetric('CLS', 0, navigationType, navigationId, navigationInteractionId, navigationURL, navigationStartTime);
+            layoutShiftManager._sessionValue = 0;
+            report = bindReporter(onReport, metric, CLSThresholds, opts.reportAllChanges);
+        };
+        const updateAndReportMetric = (forceReport = 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) => {
+            updateAndReportMetric(true);
+            initNewCLSMetric('soft-navigation', entry.navigationId, entry.interactionId, entry.name, entry.startTime);
+        };
+        const handleEntries = (entries) => {
+            for (const entry of entries) {
+                if (entry.entryType === 'soft-navigation') {
+                    handleSoftNavEntry(entry);
+                    continue;
+                }
+                layoutShiftManager._processEntry(entry);
+            }
+            updateAndReportMetric();
+        };
+        const types = ['layout-shift'];
+        if (checkSoftNavsEnabled(opts)) {
+            types.push('soft-navigation');
+        }
+        const po = observe(types, handleEntries);
         if (po) {
             report = bindReporter(onReport, metric, CLSThresholds, opts.reportAllChanges);
             visibilityWatcher.onHidden(() => {
@@ -76,9 +97,7 @@ export const onCLS = (onReport, opts = {}) => {
             // 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);
             });
             // Queue a task to report (if nothing else triggers a report first).

package/front_end/third_party/web-vitals/package/dist/modules/onFCP.d.ts

@@ -1,4 +1,4 @@
-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 declare const FCPThresholds: MetricRatingThresholds;
 /**

package/front_end/third_party/web-vitals/package/dist/modules/onFCP.js

@@ -13,13 +13,16 @@
  * See the License for the specific language governing permissions and
  * 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';
 /** Thresholds for FCP. See https://web.dev/articles/fcp#what_is_a_good_fcp_score */
 export const FCPThresholds = [1800, 3000];
@@ -30,7 +33,12 @@ export const FCPThresholds = [1800, 3000];
  * value is a `DOMHighResTimeStamp`.
  */
 export const onFCP = (onReport, opts = {}) => {
+    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;
@@ -38,7 +46,7 @@ export const onFCP = (onReport, opts = {}) => {
             for (const entry of entries) {
                 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
@@ -46,18 +54,20 @@ export const onFCP = (onReport, opts = {}) => {
                         // 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);
             // 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);
                 doubleRAF(() => {
                     metric.value = performance.now() - event.timeStamp;
@@ -65,5 +75,27 @@ export const onFCP = (onReport, opts = {}) => {
                 });
             });
         }
+        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) => {
+                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/dist/modules/onINP.d.ts

@@ -1,4 +1,4 @@
-import { INPMetric, MetricRatingThresholds, INPReportOpts } from './types.js';
+import type { INPMetric, MetricRatingThresholds, INPReportOpts } from './types.js';
 /** Thresholds for INP. See https://web.dev/articles/inp#what_is_a_good_inp_score */
 export declare const INPThresholds: MetricRatingThresholds;
 /**

package/front_end/third_party/web-vitals/package/dist/modules/onINP.js

@@ -13,12 +13,13 @@
  * See the License for the specific language governing permissions and
  * 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';
@@ -27,6 +28,12 @@ import { whenIdleOrHidden } from './lib/whenIdleOrHidden.js';
 export const INPThresholds = [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;
 /**
  * Calculates the [INP](https://web.dev/articles/inp) value for the current
@@ -70,7 +77,25 @@ export const onINP = (onReport, opts = {}) => {
         let metric = initMetric('INP');
         let report;
         const interactionManager = initUnique(opts, InteractionManager);
-        const handleEntries = (entries) => {
+        const initNewINPMetric = (navigationType, navigationId, navigationInteractionId, navigationURL, navigationStartTime) => {
+            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) => {
+            updateINPMetric();
+            report(true);
+            initNewINPMetric('soft-navigation', entry.navigationId, entry.interactionId, entry.name, entry.startTime);
+        };
+        const handleEntries = (entries, forceReport = 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
@@ -79,40 +104,35 @@ export const onINP = (onReport, opts = {}) => {
             // 123+ that if rolled out fully may make this no longer necessary.
             whenIdleOrHidden(() => {
                 for (const entry of entries) {
+                    if (entry.entryType === 'soft-navigation') {
+                        handleSoftNavEntry(entry);
+                        continue;
+                    }
                     interactionManager._processEntry(entry);
                 }
-                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'];
+        if (checkSoftNavsEnabled(opts)) {
+            types.push('soft-navigation');
+        }
+        const po = observe(types, handleEntries, {
+            ...opts,
             durationThreshold: opts.durationThreshold ?? DEFAULT_DURATION_THRESHOLD,
         });
         report = bindReporter(onReport, metric, INPThresholds, opts.reportAllChanges);
         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());
-                report(true);
+                handleEntries(po.takeRecords(), true);
             });
             // 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());
             });
         }
     });

package/front_end/third_party/web-vitals/package/dist/modules/onLCP.d.ts

@@ -1,4 +1,4 @@
-import { LCPMetric, MetricRatingThresholds, ReportOpts } from './types.js';
+import type { LCPMetric, MetricRatingThresholds, ReportOpts } from './types.js';
 /** Thresholds for LCP. See https://web.dev/articles/lcp#what_is_a_good_lcp_score */
 export declare const LCPThresholds: MetricRatingThresholds;
 /**

package/front_end/third_party/web-vitals/package/dist/modules/onLCP.js

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 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';
 /** Thresholds for LCP. See https://web.dev/articles/lcp#what_is_a_good_lcp_score */
@@ -39,72 +39,151 @@ export const LCPThresholds = [2500, 4000];
  * been determined.
  */
 export const onLCP = (onReport, opts = {}) => {
+    // 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;
         const lcpEntryManager = initUnique(opts, LCPEntryManager);
+        const initNewLCPMetric = (navigation, navigationId, navigationInteractionId, navigationURL, navigationStartTime) => {
+            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) => {
+            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) => {
-            // If reportAllChanges is set then call this function for each entry,
-            // otherwise only consider the last one.
-            if (!opts.reportAllChanges) {
+            // 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);
-                // Only report if the page wasn't hidden prior to LCP.
-                if (entry.startTime < visibilityWatcher.firstHiddenTime) {
+                if (!entry)
+                    continue;
+                if (entry.entryType === 'soft-navigation') {
+                    handleSoftNavEntry(entry);
+                    continue;
+                }
+                let value = 0;
+                let metricEntries = [];
+                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);
+                    metricEntries = [entry];
+                }
+                else if (entry.entryType === 'interaction-contentful-paint') {
+                    const ICPEntry = entry;
+                    // 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'];
+        if (softNavsEnabled) {
+            types.push('interaction-contentful-paint', 'soft-navigation');
+        }
+        const po = observe(types, handleEntries);
         if (po) {
             report = bindReporter(onReport, metric, LCPThresholds, 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());
-                po.disconnect();
-                report(true);
-            });
-            // Need a separate wrapper to ensure the `runOnce` function above is
-            // common for all three functions
-            const stopListeningWrapper = (event) => {
-                if (event.isTrusted) {
+            const finalizeEventTypes = ['keydown', 'click', 'visibilitychange'];
+            const finalizeLCP = (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,
                 });
             }
             // 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);
                 doubleRAF(() => {
                     metric.value = performance.now() - event.timeStamp;
+                    isFinalized = true;
                     report(true);
                 });
             });