chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

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

@@ -0,0 +1,6 @@
+/**
+ * A function that accepts and identity object and a class object and returns
+ * either a new instance of that class or an existing instance, if the
+ * identity object was previously used.
+ */
+export declare function initUnique<T>(identityObj: object, ClassObj: new () => T): T;

package/front_end/third_party/web-vitals/package/dist/modules/{deprecated.js → lib/initUnique.js}

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022 Google LLC
+ * Copyright 2024 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,8 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { 
+const instanceMap = new WeakMap();
 /**
- * @deprecated Use `onINP()` instead.
+ * A function that accepts and identity object and a class object and returns
+ * either a new instance of that class or an existing instance, if the
+ * identity object was previously used.
  */
-onFID, FIDThresholds, } from './onFID.js';
+export function initUnique(identityObj, ClassObj) {
+    if (!instanceMap.get(identityObj)) {
+        instanceMap.set(identityObj, new ClassObj());
+    }
+    return instanceMap.get(identityObj);
+}

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

@@ -21,7 +21,7 @@
  * 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 = (type, callback, opts = {}) => {
     try {
         if (PerformanceObserver.supportedEntryTypes.includes(type)) {
             const po = new PerformanceObserver((list) => {
@@ -32,14 +32,11 @@ export const observe = (type, callback, opts) => {
                     callback(list.getEntries());
                 });
             });
-            po.observe(Object.assign({
-                type,
-                buffered: true,
-            }, opts || {}));
+            po.observe({ type, buffered: true, ...opts });
             return po;
         }
     }
-    catch (e) {
+    catch {
         // Do nothing.
     }
     return;

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

@@ -18,15 +18,15 @@ let interactionCountEstimate = 0;
 let minKnownInteractionId = Infinity;
 let maxKnownInteractionId = 0;
 const updateEstimate = (entries) => {
-    entries.forEach((e) => {
-        if (e.interactionId) {
-            minKnownInteractionId = Math.min(minKnownInteractionId, e.interactionId);
-            maxKnownInteractionId = Math.max(maxKnownInteractionId, e.interactionId);
+    for (const entry of entries) {
+        if (entry.interactionId) {
+            minKnownInteractionId = Math.min(minKnownInteractionId, entry.interactionId);
+            maxKnownInteractionId = Math.max(maxKnownInteractionId, entry.interactionId);
             interactionCountEstimate = maxKnownInteractionId
                 ? (maxKnownInteractionId - minKnownInteractionId) / 7 + 1
                 : 0;
         }
-    });
+    }
 };
 let po;
 /**
@@ -34,7 +34,7 @@ let po;
  * or the polyfill estimate in this module.
  */
 export const getInteractionCount = () => {
-    return po ? interactionCountEstimate : performance.interactionCount || 0;
+    return po ? interactionCountEstimate : performance.interactionCount ?? 0;
 };
 /**
  * Feature detects native support or initializes the polyfill if needed.

package/front_end/third_party/web-vitals/package/dist/modules/lib/{whenIdle.d.ts → whenIdleOrHidden.d.ts}

@@ -2,4 +2,4 @@
  * Runs the passed callback during the next idle period, or immediately
  * if the browser's visibility state is (or becomes) hidden.
  */
-export declare const whenIdle: (cb: () => void) => number;
+export declare const whenIdleOrHidden: (cb: () => void) => void;

package/front_end/third_party/web-vitals/package/dist/modules/lib/{whenIdle.js → whenIdleOrHidden.js}

@@ -13,24 +13,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { onHidden } from './onHidden.js';
 import { runOnce } from './runOnce.js';
 /**
  * Runs the passed callback during the next idle period, or immediately
  * if the browser's visibility state is (or becomes) hidden.
  */
-export const whenIdle = (cb) => {
-    const rIC = self.requestIdleCallback || self.setTimeout;
-    let handle = -1;
-    cb = runOnce(cb);
+export const whenIdleOrHidden = (cb) => {
+    const rIC = globalThis.requestIdleCallback || setTimeout;
     // If the document is hidden, run the callback immediately, otherwise
     // race an idle callback with the next `visibilitychange` event.
     if (document.visibilityState === 'hidden') {
         cb();
     }
     else {
-        handle = rIC(cb);
-        onHidden(cb);
+        cb = runOnce(cb);
+        addEventListener('visibilitychange', cb, { once: true, capture: true });
+        rIC(() => {
+            cb();
+            // Remove the above event listener since no longer required.
+            // See: https://github.com/GoogleChrome/web-vitals/issues/622
+            removeEventListener('visibilitychange', cb, { capture: true });
+        });
     }
-    return handle;
 };

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

@@ -14,13 +14,15 @@
  * limitations under the License.
  */
 import { onBFCacheRestore } from './lib/bfcache.js';
-import { initMetric } from './lib/initMetric.js';
-import { observe } from './lib/observe.js';
 import { bindReporter } from './lib/bindReporter.js';
 import { doubleRAF } from './lib/doubleRAF.js';
-import { onHidden } from './lib/onHidden.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 { 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];
 /**
@@ -44,57 +46,37 @@ export const CLSThresholds = [0.1, 0.25];
  * hidden. As a result, the `callback` function might be called multiple times
  * during the same page load._
  */
-export const onCLS = (onReport, opts) => {
-    // Set defaults
-    opts = opts || {};
+export const onCLS = (onReport, opts = {}) => {
+    const visibilityWatcher = getVisibilityWatcher();
     // Start monitoring FCP so we can only report CLS if FCP is also reported.
     // Note: this is done to match the current behavior of CrUX.
     onFCP(runOnce(() => {
         let metric = initMetric('CLS', 0);
         let report;
-        let sessionValue = 0;
-        let sessionEntries = [];
+        const layoutShiftManager = initUnique(opts, LayoutShiftManager);
         const handleEntries = (entries) => {
-            entries.forEach((entry) => {
-                // Only count layout shifts without recent user input.
-                if (!entry.hadRecentInput) {
-                    const firstSessionEntry = sessionEntries[0];
-                    const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
-                    // If the entry occurred less than 1 second after the previous entry
-                    // and less than 5 seconds after the first entry in the session,
-                    // include the entry in the current session. Otherwise, start a new
-                    // session.
-                    if (sessionValue &&
-                        entry.startTime - lastSessionEntry.startTime < 1000 &&
-                        entry.startTime - firstSessionEntry.startTime < 5000) {
-                        sessionValue += entry.value;
-                        sessionEntries.push(entry);
-                    }
-                    else {
-                        sessionValue = entry.value;
-                        sessionEntries = [entry];
-                    }
-                }
-            });
+            for (const entry of entries) {
+                layoutShiftManager._processEntry(entry);
+            }
             // If the current session value is larger than the current CLS value,
             // update CLS and the entries contributing to it.
-            if (sessionValue > metric.value) {
-                metric.value = sessionValue;
-                metric.entries = sessionEntries;
+            if (layoutShiftManager._sessionValue > metric.value) {
+                metric.value = layoutShiftManager._sessionValue;
+                metric.entries = layoutShiftManager._sessionEntries;
                 report();
             }
         };
         const po = observe('layout-shift', handleEntries);
         if (po) {
             report = bindReporter(onReport, metric, CLSThresholds, opts.reportAllChanges);
-            onHidden(() => {
+            visibilityWatcher.onHidden(() => {
                 handleEntries(po.takeRecords());
                 report(true);
             });
             // Only report after a bfcache restore if the `PerformanceObserver`
             // successfully registered.
             onBFCacheRestore(() => {
-                sessionValue = 0;
+                layoutShiftManager._sessionValue = 0;
                 metric = initMetric('CLS', 0);
                 report = bindReporter(onReport, metric, CLSThresholds, opts.reportAllChanges);
                 doubleRAF(() => report());
@@ -102,7 +84,7 @@ export const onCLS = (onReport, opts) => {
             // Queue a task to report (if nothing else triggers a report first).
             // This allows CLS to be reported as soon as FCP fires when
             // `reportAllChanges` is true.
-            setTimeout(report, 0);
+            setTimeout(report);
         }
     }));
 };

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

@@ -29,15 +29,13 @@ export const FCPThresholds = [1800, 3000];
  * relevant `paint` performance entry used to determine the value. The reported
  * value is a `DOMHighResTimeStamp`.
  */
-export const onFCP = (onReport, opts) => {
-    // Set defaults
-    opts = opts || {};
+export const onFCP = (onReport, opts = {}) => {
     whenActivated(() => {
         const visibilityWatcher = getVisibilityWatcher();
         let metric = initMetric('FCP');
         let report;
         const handleEntries = (entries) => {
-            entries.forEach((entry) => {
+            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.
@@ -51,7 +49,7 @@ export const onFCP = (onReport, opts) => {
                         report(true);
                     }
                 }
-            });
+            }
         };
         const po = observe('paint', handleEntries);
         if (po) {

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

@@ -1,4 +1,4 @@
-import { INPMetric, MetricRatingThresholds, ReportOpts } from './types.js';
+import { 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;
 /**
@@ -7,11 +7,13 @@ export declare const INPThresholds: MetricRatingThresholds;
  * the `event` performance entries reported for that interaction. The reported
  * value is a `DOMHighResTimeStamp`.
  *
- * A custom `durationThreshold` configuration option can optionally be passed to
- * control what `event-timing` entries are considered for INP reporting. The
- * default threshold is `40`, which means INP scores of less than 40 are
- * reported as 0. Note that this will not affect your 75th percentile INP value
- * unless that value is also less than 40 (well below the recommended
+ * A custom `durationThreshold` configuration option can optionally be passed
+ * to control what `event-timing` entries are considered for INP reporting. The
+ * default threshold is `40`, which means INP scores of less than 40 will not
+ * be reported. To avoid reporting no interactions in these cases, the library
+ * will fall back to the input delay of the first interaction. Note that this
+ * will not affect your 75th percentile INP value unless that value is also
+ * less than 40 (well below the recommended
  * [good](https://web.dev/articles/inp#what_is_a_good_inp_score) threshold).
  *
  * If the `reportAllChanges` configuration option is set to `true`, the
@@ -28,4 +30,4 @@ export declare const INPThresholds: MetricRatingThresholds;
  * hidden. As a result, the `callback` function might be called multiple times
  * during the same page load._
  */
-export declare const onINP: (onReport: (metric: INPMetric) => void, opts?: ReportOpts) => void;
+export declare const onINP: (onReport: (metric: INPMetric) => void, opts?: INPReportOpts) => void;

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

@@ -16,25 +16,31 @@
 import { onBFCacheRestore } from './lib/bfcache.js';
 import { bindReporter } from './lib/bindReporter.js';
 import { initMetric } from './lib/initMetric.js';
-import { DEFAULT_DURATION_THRESHOLD, processInteractionEntry, estimateP98LongestInteraction, resetInteractions, } from './lib/interactions.js';
+import { initUnique } from './lib/initUnique.js';
+import { InteractionManager } from './lib/InteractionManager.js';
 import { observe } from './lib/observe.js';
-import { onHidden } from './lib/onHidden.js';
 import { initInteractionCountPolyfill } from './lib/polyfills/interactionCountPolyfill.js';
 import { whenActivated } from './lib/whenActivated.js';
-import { whenIdle } from './lib/whenIdle.js';
+import { getVisibilityWatcher } from './lib/getVisibilityWatcher.js';
+import { whenIdleOrHidden } from './lib/whenIdleOrHidden.js';
 /** Thresholds for INP. See https://web.dev/articles/inp#what_is_a_good_inp_score */
 export const INPThresholds = [200, 500];
+// The default `durationThreshold` used across this library for observing
+// `event` entries via PerformanceObserver.
+const DEFAULT_DURATION_THRESHOLD = 40;
 /**
  * Calculates the [INP](https://web.dev/articles/inp) value for the current
  * page and calls the `callback` function once the value is ready, along with
  * the `event` performance entries reported for that interaction. The reported
  * value is a `DOMHighResTimeStamp`.
  *
- * A custom `durationThreshold` configuration option can optionally be passed to
- * control what `event-timing` entries are considered for INP reporting. The
- * default threshold is `40`, which means INP scores of less than 40 are
- * reported as 0. Note that this will not affect your 75th percentile INP value
- * unless that value is also less than 40 (well below the recommended
+ * A custom `durationThreshold` configuration option can optionally be passed
+ * to control what `event-timing` entries are considered for INP reporting. The
+ * default threshold is `40`, which means INP scores of less than 40 will not
+ * be reported. To avoid reporting no interactions in these cases, the library
+ * will fall back to the input delay of the first interaction. Note that this
+ * will not affect your 75th percentile INP value unless that value is also
+ * less than 40 (well below the recommended
  * [good](https://web.dev/articles/inp#what_is_a_good_inp_score) threshold).
  *
  * If the `reportAllChanges` configuration option is set to `true`, the
@@ -51,19 +57,19 @@ export const INPThresholds = [200, 500];
  * hidden. As a result, the `callback` function might be called multiple times
  * during the same page load._
  */
-export const onINP = (onReport, opts) => {
+export const onINP = (onReport, opts = {}) => {
     // Return if the browser doesn't support all APIs needed to measure INP.
-    if (!('PerformanceEventTiming' in self &&
+    if (!(globalThis.PerformanceEventTiming &&
         'interactionId' in PerformanceEventTiming.prototype)) {
         return;
     }
-    // Set defaults
-    opts = opts || {};
+    const visibilityWatcher = getVisibilityWatcher();
     whenActivated(() => {
         // TODO(philipwalton): remove once the polyfill is no longer needed.
         initInteractionCountPolyfill();
         let metric = initMetric('INP');
         let report;
+        const interactionManager = initUnique(opts, InteractionManager);
         const handleEntries = (entries) => {
             // Queue the `handleEntries()` callback in the next idle task.
             // This is needed to increase the chances that all event entries that
@@ -71,11 +77,13 @@ export const onINP = (onReport, opts) => {
             // have been dispatched. Note: there is currently an experiment
             // running in Chrome (EventTimingKeypressAndCompositionInteractionId)
             // 123+ that if rolled out fully may make this no longer necessary.
-            whenIdle(() => {
-                entries.forEach(processInteractionEntry);
-                const inp = estimateP98LongestInteraction();
-                if (inp && inp.latency !== metric.value) {
-                    metric.value = inp.latency;
+            whenIdleOrHidden(() => {
+                for (const entry of entries) {
+                    interactionManager._processEntry(entry);
+                }
+                const inp = interactionManager._estimateP98LongestInteraction();
+                if (inp && inp._latency !== metric.value) {
+                    metric.value = inp._latency;
                     metric.entries = inp.entries;
                     report();
                 }
@@ -95,14 +103,14 @@ export const onINP = (onReport, opts) => {
             // 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 });
-            onHidden(() => {
+            visibilityWatcher.onHidden(() => {
                 handleEntries(po.takeRecords());
                 report(true);
             });
             // Only report after a bfcache restore if the `PerformanceObserver`
             // successfully registered.
             onBFCacheRestore(() => {
-                resetInteractions();
+                interactionManager._resetInteractions();
                 metric = initMetric('INP');
                 report = bindReporter(onReport, metric, INPThresholds, opts.reportAllChanges);
             });

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

@@ -13,20 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { LCPEntryManager } from './lib/LCPEntryManager.js';
 import { onBFCacheRestore } from './lib/bfcache.js';
 import { bindReporter } from './lib/bindReporter.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 { observe } from './lib/observe.js';
-import { onHidden } from './lib/onHidden.js';
 import { runOnce } from './lib/runOnce.js';
 import { whenActivated } from './lib/whenActivated.js';
-import { whenIdle } from './lib/whenIdle.js';
+import { whenIdleOrHidden } from './lib/whenIdleOrHidden.js';
 /** Thresholds for LCP. See https://web.dev/articles/lcp#what_is_a_good_lcp_score */
 export const LCPThresholds = [2500, 4000];
-const reportedMetricIDs = {};
 /**
  * Calculates the [LCP](https://web.dev/articles/lcp) value for the current page and
  * calls the `callback` function once the value is ready (along with the
@@ -38,20 +38,20 @@ const reportedMetricIDs = {};
  * performance entry is dispatched, or once the final value of the metric has
  * been determined.
  */
-export const onLCP = (onReport, opts) => {
-    // Set defaults
-    opts = opts || {};
+export const onLCP = (onReport, opts = {}) => {
     whenActivated(() => {
         const visibilityWatcher = getVisibilityWatcher();
         let metric = initMetric('LCP');
         let report;
+        const lcpEntryManager = initUnique(opts, LCPEntryManager);
         const handleEntries = (entries) => {
             // If reportAllChanges is set then call this function for each entry,
             // otherwise only consider the last one.
             if (!opts.reportAllChanges) {
                 entries = entries.slice(-1);
             }
-            entries.forEach((entry) => {
+            for (const entry of entries) {
+                lcpEntryManager._processEntry(entry);
                 // Only report if the page wasn't hidden prior to LCP.
                 if (entry.startTime < visibilityWatcher.firstHiddenTime) {
                     // The startTime attribute returns the value of the renderTime if it is
@@ -64,32 +64,40 @@ export const onLCP = (onReport, opts) => {
                     metric.entries = [entry];
                     report();
                 }
-            });
+            }
         };
         const po = observe('largest-contentful-paint', 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(() => {
-                if (!reportedMetricIDs[metric.id]) {
-                    handleEntries(po.takeRecords());
-                    po.disconnect();
-                    reportedMetricIDs[metric.id] = true;
-                    report(true);
-                }
+                handleEntries(po.takeRecords());
+                po.disconnect();
+                report(true);
             });
-            // Stop listening after input. 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
-            ['keydown', 'click'].forEach((type) => {
-                // Wrap in a setTimeout so the callback is run in a separate task
-                // to avoid extending the keyboard/click handler to reduce INP impact
-                // https://github.com/GoogleChrome/web-vitals/issues/383
-                addEventListener(type, () => whenIdle(stopListening), {
-                    once: true,
+            // Need a separate wrapper to ensure the `runOnce` function above is
+            // common for all three functions
+            const stopListeningWrapper = (event) => {
+                if (event.isTrusted) {
+                    // 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,
+                    });
+                }
+            };
+            // Stop listening after input or visibilitychange.
+            // 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, {
                     capture: true,
                 });
-            });
-            onHidden(stopListening);
+            }
             // Only report after a bfcache restore if the `PerformanceObserver`
             // successfully registered.
             onBFCacheRestore((event) => {
@@ -97,7 +105,6 @@ export const onLCP = (onReport, opts) => {
                 report = bindReporter(onReport, metric, LCPThresholds, opts.reportAllChanges);
                 doubleRAF(() => {
                     metric.value = performance.now() - event.timeStamp;
-                    reportedMetricIDs[metric.id] = true;
                     report(true);
                 });
             });

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

@@ -34,7 +34,7 @@ const whenReady = (callback) => {
     }
     else {
         // Queue a task so the callback runs after `loadEventEnd`.
-        setTimeout(callback, 0);
+        setTimeout(callback);
     }
 };
 /**
@@ -52,9 +52,7 @@ const whenReady = (callback) => {
  * includes time spent on DNS lookup, connection negotiation, network latency,
  * and server processing time.
  */
-export const onTTFB = (onReport, opts) => {
-    // Set defaults
-    opts = opts || {};
+export const onTTFB = (onReport, opts = {}) => {
     let metric = initMetric('TTFB');
     let report = bindReporter(onReport, metric, TTFBThresholds, opts.reportAllChanges);
     whenReady(() => {

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

@@ -1,6 +1,5 @@
 import type { CLSMetric, CLSMetricWithAttribution } from './cls.js';
 import type { FCPMetric, FCPMetricWithAttribution } from './fcp.js';
-import type { FIDMetric, FIDMetricWithAttribution } from './fid.js';
 import type { INPMetric, INPMetricWithAttribution } from './inp.js';
 import type { LCPMetric, LCPMetricWithAttribution } from './lcp.js';
 import type { TTFBMetric, TTFBMetricWithAttribution } from './ttfb.js';
@@ -8,7 +7,7 @@ export interface Metric {
     /**
      * The name of the metric (in acronym form).
      */
-    name: 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB';
+    name: 'CLS' | 'FCP' | 'INP' | 'LCP' | 'TTFB';
     /**
      * The current value of the metric.
      */
@@ -54,9 +53,9 @@ export interface Metric {
     navigationType: 'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender' | 'restore';
 }
 /** The union of supported metric types. */
-export type MetricType = CLSMetric | FCPMetric | FIDMetric | INPMetric | LCPMetric | TTFBMetric;
+export type MetricType = CLSMetric | FCPMetric | INPMetric | LCPMetric | TTFBMetric;
 /** The union of supported metric attribution types. */
-export type MetricWithAttribution = CLSMetricWithAttribution | FCPMetricWithAttribution | FIDMetricWithAttribution | INPMetricWithAttribution | LCPMetricWithAttribution | TTFBMetricWithAttribution;
+export type MetricWithAttribution = CLSMetricWithAttribution | FCPMetricWithAttribution | INPMetricWithAttribution | LCPMetricWithAttribution | TTFBMetricWithAttribution;
 /**
  * The thresholds of metric's "good", "needs improvement", and "poor" ratings.
  *
@@ -81,7 +80,9 @@ export interface ReportCallback {
 }
 export interface ReportOpts {
     reportAllChanges?: boolean;
-    durationThreshold?: number;
+}
+export interface AttributionReportOpts extends ReportOpts {
+    generateTarget?: (el: Node | null) => string | undefined;
 }
 /**
  * The loading state of the document. Note: this value is similar to

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

@@ -13,9 +13,11 @@ export interface CLSMetric extends Metric {
  */
 export interface CLSAttribution {
     /**
-     * A selector identifying the first element (in document order) that
-     * shifted when the single largest layout shift contributing to the page's
-     * CLS score occurred.
+     * By default, a selector identifying the first element (in document order)
+     * that shifted when the single largest layout shift that contributed to the
+     * page's CLS score occurred. If the `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.
      */
     largestShiftTarget?: string;
     /**