chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

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

@@ -15,9 +15,10 @@
  */
 import { getLoadState } from '../lib/getLoadState.js';
 import { getSelector } from '../lib/getSelector.js';
-import { longestInteractionList, entryPreProcessingCallbacks, longestInteractionMap, } from '../lib/interactions.js';
+import { initUnique } from '../lib/initUnique.js';
+import { InteractionManager } from '../lib/InteractionManager.js';
 import { observe } from '../lib/observe.js';
-import { whenIdle } from '../lib/whenIdle.js';
+import { whenIdleOrHidden } from '../lib/whenIdleOrHidden.js';
 import { onINP as unattributedOnINP } from '../onINP.js';
 // The maximum number of previous frames for which data is kept.
 // Storing data about previous frames is necessary to handle cases where event
@@ -27,212 +28,19 @@ import { onINP as unattributedOnINP } from '../onINP.js';
 // In most cases this out-of-order data is only off by a frame or two, so
 // keeping the most recent 50 should be more than sufficient.
 const MAX_PREVIOUS_FRAMES = 50;
-// A PerformanceObserver, observing new `long-animation-frame` entries.
-// If this variable is defined it means the browser supports LoAF.
-let loafObserver;
-// A list of LoAF entries that have been dispatched and could potentially
-// intersect with the INP candidate interaction. Note that periodically this
-// list is cleaned up and entries that are known to not match INP are removed.
-let pendingLoAFs = [];
-// An array of groups of all the event timing entries that occurred within a
-// particular frame. Note that periodically this array is cleaned up and entries
-// that are known to not match INP are removed.
-let pendingEntriesGroups = [];
-// The `processingEnd` time of most recently-processed event, chronologically.
-let latestProcessingEnd = 0;
-// A WeakMap to look up the event-timing-entries group of a given entry.
-// Note that this only maps from "important" entries: either the first input or
-// those with an `interactionId`.
-const entryToEntriesGroupMap = new WeakMap();
-// A mapping of interactionIds to the target Node.
-export const interactionTargetMap = new Map();
-// A reference to the idle task used to clean up entries from the above
-// variables. If the value is -1 it means no task is queue, and if it's
-// greater than -1 the value corresponds to the idle callback handle.
-let idleHandle = -1;
-/**
- * Adds new LoAF entries to the `pendingLoAFs` list.
- */
-const handleLoAFEntries = (entries) => {
-    pendingLoAFs = pendingLoAFs.concat(entries);
-    queueCleanup();
-};
-// Get a reference to the interaction target element in case it's removed
-// from the DOM later.
-const saveInteractionTarget = (entry) => {
-    // TODO(b/376777343): Remove this modification when web-vitals.js doesn't retain DOM nodes anymore
-    // Although it is useful for DevTools to retain nodes for diagnostic purposes, it is not preferable
-    // to retaining Nodes in memory when the user does not expect them to.
-    //
-    // if (entry.interactionId &&
-    //     entry.target &&
-    //     !interactionTargetMap.has(entry.interactionId)) {
-    //     interactionTargetMap.set(entry.interactionId, entry.target);
-    // }
-};
-/**
- * Groups entries that were presented within the same animation frame by
- * a common `renderTime`. This function works by referencing
- * `pendingEntriesGroups` and using an existing render time if one is found
- * (otherwise creating a new one). This function also adds all interaction
- * entries to an `entryToRenderTimeMap` WeakMap so that the "grouped" entries
- * can be looked up later.
- */
-const groupEntriesByRenderTime = (entry) => {
-    const renderTime = entry.startTime + entry.duration;
-    let group;
-    latestProcessingEnd = Math.max(latestProcessingEnd, entry.processingEnd);
-    // Iterate over all previous render times in reverse order to find a match.
-    // Go in reverse since the most likely match will be at the end.
-    for (let i = pendingEntriesGroups.length - 1; i >= 0; i--) {
-        const potentialGroup = pendingEntriesGroups[i];
-        // If a group's render time is within 8ms of the entry's render time,
-        // assume they were part of the same frame and add it to the group.
-        if (Math.abs(renderTime - potentialGroup.renderTime) <= 8) {
-            group = potentialGroup;
-            group.startTime = Math.min(entry.startTime, group.startTime);
-            group.processingStart = Math.min(entry.processingStart, group.processingStart);
-            group.processingEnd = Math.max(entry.processingEnd, group.processingEnd);
-            group.entries.push(entry);
-            break;
-        }
-    }
-    // If there was no matching group, assume this is a new frame.
-    if (!group) {
-        group = {
-            startTime: entry.startTime,
-            processingStart: entry.processingStart,
-            processingEnd: entry.processingEnd,
-            renderTime,
-            entries: [entry],
-        };
-        pendingEntriesGroups.push(group);
-    }
-    // Store the grouped render time for this entry for reference later.
-    if (entry.interactionId || entry.entryType === 'first-input') {
-        entryToEntriesGroupMap.set(entry, group);
-    }
-    queueCleanup();
-};
-const queueCleanup = () => {
-    // Queue cleanup of entries that are not part of any INP candidates.
-    if (idleHandle < 0) {
-        idleHandle = whenIdle(cleanupEntries);
-    }
-};
-const cleanupEntries = () => {
-    // Delete any stored interaction target elements if they're not part of one
-    // of the 10 longest interactions.
-    if (interactionTargetMap.size > 10) {
-        interactionTargetMap.forEach((_, key) => {
-            if (!longestInteractionMap.has(key)) {
-                interactionTargetMap.delete(key);
-            }
-        });
-    }
-    // Keep all render times that are part of a pending INP candidate or
-    // that occurred within the 50 most recently-dispatched groups of events.
-    const longestInteractionGroups = longestInteractionList.map((i) => {
-        return entryToEntriesGroupMap.get(i.entries[0]);
-    });
-    const minIndex = pendingEntriesGroups.length - MAX_PREVIOUS_FRAMES;
-    pendingEntriesGroups = pendingEntriesGroups.filter((group, index) => {
-        if (index >= minIndex)
-            return true;
-        return longestInteractionGroups.includes(group);
-    });
-    // Keep all pending LoAF entries that either:
-    // 1) intersect with entries in the newly cleaned up `pendingEntriesGroups`
-    // 2) occur after the most recently-processed event entry (for up to MAX_PREVIOUS_FRAMES)
-    const loafsToKeep = new Set();
-    for (let i = 0; i < pendingEntriesGroups.length; i++) {
-        const group = pendingEntriesGroups[i];
-        getIntersectingLoAFs(group.startTime, group.processingEnd).forEach((loaf) => {
-            loafsToKeep.add(loaf);
-        });
-    }
-    const prevFrameIndexCutoff = pendingLoAFs.length - 1 - MAX_PREVIOUS_FRAMES;
-    // Filter `pendingLoAFs` to preserve LoAF order.
-    pendingLoAFs = pendingLoAFs.filter((loaf, index) => {
-        if (loaf.startTime > latestProcessingEnd && index > prevFrameIndexCutoff) {
-            return true;
-        }
-        return loafsToKeep.has(loaf);
-    });
-    // Reset the idle callback handle so it can be queued again.
-    idleHandle = -1;
-};
-entryPreProcessingCallbacks.push(saveInteractionTarget, groupEntriesByRenderTime);
-const getIntersectingLoAFs = (start, end) => {
-    const intersectingLoAFs = [];
-    for (let i = 0, loaf; (loaf = pendingLoAFs[i]); i++) {
-        // If the LoAF ends before the given start time, ignore it.
-        if (loaf.startTime + loaf.duration < start)
-            continue;
-        // If the LoAF starts after the given end time, ignore it and all
-        // subsequent pending LoAFs (because they're in time order).
-        if (loaf.startTime > end)
-            break;
-        // Still here? If so this LoAF intersects with the interaction.
-        intersectingLoAFs.push(loaf);
-    }
-    return intersectingLoAFs;
-};
-export const attributeINP = (metric) => {
-    const firstEntry = metric.entries[0];
-    const group = entryToEntriesGroupMap.get(firstEntry);
-    const processingStart = firstEntry.processingStart;
-    const processingEnd = group.processingEnd;
-    // Sort the entries in processing time order.
-    const processedEventEntries = group.entries.sort((a, b) => {
-        return a.processingStart - b.processingStart;
-    });
-    const longAnimationFrameEntries = getIntersectingLoAFs(firstEntry.startTime, processingEnd);
-    // The first interaction entry may not have a target defined, so use the
-    // first one found in the entry list.
-    // TODO: when the following bug is fixed just use `firstInteractionEntry`.
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1367329
-    // As a fallback, also check the interactionTargetMap (to account for
-    // cases where the element is removed from the DOM before reporting happens).
-    const firstEntryWithTarget = metric.entries.find((entry) => entry.target);
-    const interactionTargetElement = (firstEntryWithTarget && firstEntryWithTarget.target) ||
-        interactionTargetMap.get(firstEntry.interactionId);
-    // Since entry durations are rounded to the nearest 8ms, we need to clamp
-    // the `nextPaintTime` value to be higher than the `processingEnd` or
-    // end time of any LoAF entry.
-    const nextPaintTimeCandidates = [
-        firstEntry.startTime + firstEntry.duration,
-        processingEnd,
-    ].concat(longAnimationFrameEntries.map((loaf) => loaf.startTime + loaf.duration));
-    const nextPaintTime = Math.max.apply(Math, nextPaintTimeCandidates);
-    const attribution = {
-        interactionTarget: getSelector(interactionTargetElement),
-        interactionTargetElement: interactionTargetElement,
-        interactionType: firstEntry.name.startsWith('key') ? 'keyboard' : 'pointer',
-        interactionTime: firstEntry.startTime,
-        nextPaintTime: nextPaintTime,
-        processedEventEntries: processedEventEntries,
-        longAnimationFrameEntries: longAnimationFrameEntries,
-        inputDelay: processingStart - firstEntry.startTime,
-        processingDuration: processingEnd - processingStart,
-        presentationDelay: Math.max(nextPaintTime - processingEnd, 0),
-        loadState: getLoadState(firstEntry.startTime),
-    };
-    // Use Object.assign to set property to keep tsc happy.
-    const metricWithAttribution = Object.assign(metric, { attribution });
-    return metricWithAttribution;
-};
 /**
  * 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
@@ -242,17 +50,310 @@ export const attributeINP = (metric) => {
  *
  * _**Important:** INP should be continually monitored for changes throughout
  * the entire lifespan of a page—including if the user returns to the page after
- * it's been hidden/backgrounded. However, since browsers often [will not fire
+ * it has been hidden/backgrounded. However, since browsers often [will not fire
  * additional callbacks once the user has backgrounded a
  * page](https://developer.chrome.com/blog/page-lifecycle-api/#advice-hidden),
  * `callback` is always called when the page's visibility state changes to
  * hidden. As a result, the `callback` function might be called multiple times
  * during the same page load._
  */
-export const onINP = (onReport, opts) => {
-    if (!loafObserver) {
-        loafObserver = observe('long-animation-frame', handleLoAFEntries);
+export const onINP = (onReport, opts = {}) => {
+    // Clone the opts object to ensure it's unique, so we can initialize a
+    // single instance of the `InteractionManager` class that's shared only with
+    // this function invocation and the `unattributedOnINP()` invocation below
+    // (which is passed the same `opts` object).
+    opts = Object.assign({}, opts);
+    const interactionManager = initUnique(opts, InteractionManager);
+    // A list of LoAF entries that have been dispatched and could potentially
+    // intersect with the INP candidate interaction. Note that periodically this
+    // list is cleaned up and entries that are known to not match INP are removed.
+    let pendingLoAFs = [];
+    // An array of groups of all the event timing entries that occurred within a
+    // particular frame. Note that periodically this array is cleaned up and entries
+    // that are known to not match INP are removed.
+    let pendingEntriesGroups = [];
+    // The `processingEnd` time of most recently-processed event, chronologically.
+    let latestProcessingEnd = 0;
+    // A WeakMap to look up the event-timing-entries group of a given entry.
+    // Note that this only maps from "important" entries: either the first input or
+    // those with an `interactionId`.
+    const entryToEntriesGroupMap = new WeakMap();
+    // A mapping of interactionIds to the target Node.
+    const interactionTargetMap = new WeakMap();
+    // A boolean flag indicating whether or not a cleanup task has been queued.
+    let cleanupPending = false;
+    /**
+     * Adds new LoAF entries to the `pendingLoAFs` list.
+     */
+    const handleLoAFEntries = (entries) => {
+        pendingLoAFs = pendingLoAFs.concat(entries);
+        queueCleanup();
+    };
+    const saveInteractionTarget = (interaction) => {
+        if (!interactionTargetMap.get(interaction)) {
+            const node = interaction.entries[0].target;
+            if (node) {
+                const customTarget = opts.generateTarget?.(node) ?? getSelector(node);
+                interactionTargetMap.set(interaction, customTarget);
+            }
+        }
+    };
+    /**
+     * Groups entries that were presented within the same animation frame by
+     * a common `renderTime`. This function works by referencing
+     * `pendingEntriesGroups` and using an existing render time if one is found
+     * (otherwise creating a new one). This function also adds all interaction
+     * entries to an `entryToRenderTimeMap` WeakMap so that the "grouped" entries
+     * can be looked up later.
+     */
+    const groupEntriesByRenderTime = (entry) => {
+        const renderTime = entry.startTime + entry.duration;
+        let group;
+        latestProcessingEnd = Math.max(latestProcessingEnd, entry.processingEnd);
+        // Iterate over all previous render times in reverse order to find a match.
+        // Go in reverse since the most likely match will be at the end.
+        for (let i = pendingEntriesGroups.length - 1; i >= 0; i--) {
+            const potentialGroup = pendingEntriesGroups[i];
+            // If a group's render time is within 8ms of the entry's render time,
+            // assume they were part of the same frame and add it to the group.
+            if (Math.abs(renderTime - potentialGroup.renderTime) <= 8) {
+                group = potentialGroup;
+                group.startTime = Math.min(entry.startTime, group.startTime);
+                group.processingStart = Math.min(entry.processingStart, group.processingStart);
+                group.processingEnd = Math.max(entry.processingEnd, group.processingEnd);
+                group.entries.push(entry);
+                break;
+            }
+        }
+        // If there was no matching group, assume this is a new frame.
+        if (!group) {
+            group = {
+                startTime: entry.startTime,
+                processingStart: entry.processingStart,
+                processingEnd: entry.processingEnd,
+                renderTime,
+                entries: [entry],
+            };
+            pendingEntriesGroups.push(group);
+        }
+        // Store the grouped render time for this entry for reference later.
+        if (entry.interactionId || entry.entryType === 'first-input') {
+            entryToEntriesGroupMap.set(entry, group);
+        }
+        queueCleanup();
+    };
+    const queueCleanup = () => {
+        // Queue cleanup of entries that are not part of any INP candidates.
+        if (!cleanupPending) {
+            whenIdleOrHidden(cleanupEntries);
+            cleanupPending = true;
+        }
+    };
+    const cleanupEntries = () => {
+        // Keep all render times that are part of a pending INP candidate or
+        // that occurred within the 50 most recently-dispatched groups of events.
+        const longestInteractionGroups = interactionManager._longestInteractionList.map((i) => {
+            return entryToEntriesGroupMap.get(i.entries[0]);
+        });
+        const minIndex = pendingEntriesGroups.length - MAX_PREVIOUS_FRAMES;
+        pendingEntriesGroups = pendingEntriesGroups.filter((group, index) => {
+            if (index >= minIndex)
+                return true;
+            return longestInteractionGroups.includes(group);
+        });
+        // Keep all pending LoAF entries that either:
+        // 1) intersect with entries in the newly cleaned up `pendingEntriesGroups`
+        // 2) occur after the most recently-processed event entry (for up to MAX_PREVIOUS_FRAMES)
+        const loafsToKeep = new Set();
+        for (const group of pendingEntriesGroups) {
+            const loafs = getIntersectingLoAFs(group.startTime, group.processingEnd);
+            for (const loaf of loafs) {
+                loafsToKeep.add(loaf);
+            }
+        }
+        const prevFrameIndexCutoff = pendingLoAFs.length - 1 - MAX_PREVIOUS_FRAMES;
+        // Filter `pendingLoAFs` to preserve LoAF order.
+        pendingLoAFs = pendingLoAFs.filter((loaf, index) => {
+            if (loaf.startTime > latestProcessingEnd &&
+                index > prevFrameIndexCutoff) {
+                return true;
+            }
+            return loafsToKeep.has(loaf);
+        });
+        cleanupPending = false;
+    };
+    async function handleOnEachInteractionCallback(entry) {
+        if (!opts.onEachInteraction) {
+            return;
+        }
+        // Wait a microtask so this "pre" processing callback actually
+        // becomes a "post" processing callback.
+        void (await Promise.resolve());
+        if (!entry.interactionId) {
+            return;
+        }
+        const interaction = attributeINP({
+            entries: [entry],
+            // The only value we really need for `attributeINP` is `entries`
+            // Everything else is included to fill out the type.
+            name: 'INP',
+            rating: 'good',
+            value: entry.duration,
+            delta: entry.duration,
+            navigationType: 'navigate',
+            id: 'N/A',
+        });
+        opts.onEachInteraction(interaction);
     }
+    interactionManager._onBeforeProcessingEntry = (entry) => {
+        void handleOnEachInteractionCallback(entry);
+        groupEntriesByRenderTime(entry);
+    };
+    interactionManager._onAfterProcessingINPCandidate = saveInteractionTarget;
+    const getIntersectingLoAFs = (start, end) => {
+        const intersectingLoAFs = [];
+        for (const loaf of pendingLoAFs) {
+            // If the LoAF ends before the given start time, ignore it.
+            if (loaf.startTime + loaf.duration < start)
+                continue;
+            // If the LoAF starts after the given end time, ignore it and all
+            // subsequent pending LoAFs (because they're in time order).
+            if (loaf.startTime > end)
+                break;
+            // Still here? If so this LoAF intersects with the interaction.
+            intersectingLoAFs.push(loaf);
+        }
+        return intersectingLoAFs;
+    };
+    const attributeLoAFDetails = (attribution) => {
+        // If there is no LoAF data then nothing further to attribute
+        if (!attribution.longAnimationFrameEntries?.length) {
+            return;
+        }
+        const interactionTime = attribution.interactionTime;
+        const inputDelay = attribution.inputDelay;
+        const processingDuration = attribution.processingDuration;
+        // Stats across all LoAF entries and scripts.
+        let totalScriptDuration = 0;
+        let totalStyleAndLayoutDuration = 0;
+        let totalPaintDuration = 0;
+        let longestScriptDuration = 0;
+        let longestScriptEntry;
+        let longestScriptSubpart;
+        for (const loafEntry of attribution.longAnimationFrameEntries) {
+            totalStyleAndLayoutDuration =
+                totalStyleAndLayoutDuration +
+                    loafEntry.startTime +
+                    loafEntry.duration -
+                    loafEntry.styleAndLayoutStart;
+            for (const script of loafEntry.scripts) {
+                const scriptEndTime = script.startTime + script.duration;
+                if (scriptEndTime < interactionTime) {
+                    continue;
+                }
+                const intersectingScriptDuration = scriptEndTime - Math.max(interactionTime, script.startTime);
+                // Since forcedStyleAndLayoutDuration doesn't provide timestamps, we
+                // apportion the total based on the intersectingScriptDuration. Not
+                // correct depending on when it occurred, but the best we can do.
+                const intersectingForceStyleAndLayoutDuration = script.duration
+                    ? (intersectingScriptDuration / script.duration) *
+                        script.forcedStyleAndLayoutDuration
+                    : 0;
+                // For scripts we exclude forcedStyleAndLayout (same as DevTools does
+                // in its summary totals) and instead include that in
+                // totalStyleAndLayoutDuration
+                totalScriptDuration +=
+                    intersectingScriptDuration - intersectingForceStyleAndLayoutDuration;
+                totalStyleAndLayoutDuration += intersectingForceStyleAndLayoutDuration;
+                if (intersectingScriptDuration > longestScriptDuration) {
+                    // Set the subpart this occurred in.
+                    longestScriptSubpart =
+                        script.startTime < interactionTime + inputDelay
+                            ? 'input-delay'
+                            : script.startTime >=
+                                interactionTime + inputDelay + processingDuration
+                                ? 'presentation-delay'
+                                : 'processing-duration';
+                    longestScriptEntry = script;
+                    longestScriptDuration = intersectingScriptDuration;
+                }
+            }
+        }
+        // Calculate the totalPaintDuration from the last LoAF after
+        // presentationDelay starts (where available)
+        const lastLoAF = attribution.longAnimationFrameEntries.at(-1);
+        const lastLoAFEndTime = lastLoAF
+            ? lastLoAF.startTime + lastLoAF.duration
+            : 0;
+        if (lastLoAFEndTime >= interactionTime + inputDelay + processingDuration) {
+            totalPaintDuration = attribution.nextPaintTime - lastLoAFEndTime;
+        }
+        if (longestScriptEntry && longestScriptSubpart) {
+            attribution.longestScript = {
+                entry: longestScriptEntry,
+                subpart: longestScriptSubpart,
+                intersectingDuration: longestScriptDuration,
+            };
+        }
+        attribution.totalScriptDuration = totalScriptDuration;
+        attribution.totalStyleAndLayoutDuration = totalStyleAndLayoutDuration;
+        attribution.totalPaintDuration = totalPaintDuration;
+        attribution.totalUnattributedDuration =
+            attribution.nextPaintTime -
+                interactionTime -
+                totalScriptDuration -
+                totalStyleAndLayoutDuration -
+                totalPaintDuration;
+    };
+    const attributeINP = (metric) => {
+        const firstEntry = metric.entries[0];
+        const group = entryToEntriesGroupMap.get(firstEntry);
+        const processingStart = firstEntry.processingStart;
+        // Due to the fact that durations can be rounded down to the nearest 8ms,
+        // we have to clamp `nextPaintTime` so it doesn't appear to occur before
+        // processing starts. Note: we can't use `processingEnd` since processing
+        // can extend beyond the event duration in some cases (see next comment).
+        const nextPaintTime = Math.max(firstEntry.startTime + firstEntry.duration, processingStart);
+        // For the purposes of attribution, clamp `processingEnd` to `nextPaintTime`,
+        // so processing is never reported as taking longer than INP (which can
+        // happen via the web APIs in the case of sync modals, e.g. `alert()`).
+        // See: https://github.com/GoogleChrome/web-vitals/issues/492
+        const processingEnd = Math.min(group.processingEnd, nextPaintTime);
+        // Sort the entries in processing time order.
+        const processedEventEntries = group.entries.sort((a, b) => {
+            return a.processingStart - b.processingStart;
+        });
+        const longAnimationFrameEntries = getIntersectingLoAFs(firstEntry.startTime, processingEnd);
+        const interaction = interactionManager._longestInteractionMap.get(firstEntry.interactionId);
+        const attribution = {
+            // TS flags the next line because `interactionTargetMap.get()` might
+            // return `undefined`, but we ignore this assuming the user knows what
+            // they are doing.
+            interactionTarget: interactionTargetMap.get(interaction),
+            interactionType: firstEntry.name.startsWith('key')
+                ? 'keyboard'
+                : 'pointer',
+            interactionTime: firstEntry.startTime,
+            nextPaintTime: nextPaintTime,
+            processedEventEntries: processedEventEntries,
+            longAnimationFrameEntries: longAnimationFrameEntries,
+            inputDelay: processingStart - firstEntry.startTime,
+            processingDuration: processingEnd - processingStart,
+            presentationDelay: nextPaintTime - processingEnd,
+            loadState: getLoadState(firstEntry.startTime),
+            longestScript: undefined,
+            totalScriptDuration: undefined,
+            totalStyleAndLayoutDuration: undefined,
+            totalPaintDuration: undefined,
+            totalUnattributedDuration: undefined,
+        };
+        attributeLoAFDetails(attribution);
+        // Use `Object.assign()` to ensure the original metric object is returned.
+        const metricWithAttribution = Object.assign(metric, { attribution });
+        return metricWithAttribution;
+    };
+    // Start observing LoAF entries for attribution.
+    observe('long-animation-frame', handleLoAFEntries);
     unattributedOnINP((metric) => {
         const metricWithAttribution = attributeINP(metric);
         onReport(metricWithAttribution);

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

@@ -1,4 +1,4 @@
-import { LCPMetricWithAttribution, ReportOpts } from '../types.js';
+import { LCPMetricWithAttribution, AttributionReportOpts } from '../types.js';
 /**
  * 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
@@ -10,4 +10,4 @@ import { LCPMetricWithAttribution, ReportOpts } from '../types.js';
  * performance entry is dispatched, or once the final value of the metric has
  * been determined.
  */
-export declare const onLCP: (onReport: (metric: LCPMetricWithAttribution) => void, opts?: ReportOpts) => void;
+export declare const onLCP: (onReport: (metric: LCPMetricWithAttribution) => void, opts?: AttributionReportOpts) => void;