chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

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

@@ -15,55 +15,9 @@
  */
 import { getNavigationEntry } from '../lib/getNavigationEntry.js';
 import { getSelector } from '../lib/getSelector.js';
+import { initUnique } from '../lib/initUnique.js';
+import { LCPEntryManager } from '../lib/LCPEntryManager.js';
 import { onLCP as unattributedOnLCP } from '../onLCP.js';
-const attributeLCP = (metric) => {
-    // Use a default object if no other attribution has been set.
-    let attribution = {
-        timeToFirstByte: 0,
-        resourceLoadDelay: 0,
-        resourceLoadDuration: 0,
-        elementRenderDelay: metric.value,
-    };
-    if (metric.entries.length) {
-        const navigationEntry = getNavigationEntry();
-        if (navigationEntry) {
-            const activationStart = navigationEntry.activationStart || 0;
-            const lcpEntry = metric.entries[metric.entries.length - 1];
-            const lcpResourceEntry = lcpEntry.url &&
-                performance
-                    .getEntriesByType('resource')
-                    .filter((e) => e.name === lcpEntry.url)[0];
-            const ttfb = Math.max(0, navigationEntry.responseStart - activationStart);
-            const lcpRequestStart = Math.max(ttfb, 
-            // Prefer `requestStart` (if TOA is set), otherwise use `startTime`.
-            lcpResourceEntry
-                ? (lcpResourceEntry.requestStart || lcpResourceEntry.startTime) -
-                    activationStart
-                : 0);
-            const lcpResponseEnd = Math.max(lcpRequestStart, lcpResourceEntry ? lcpResourceEntry.responseEnd - activationStart : 0);
-            const lcpRenderTime = Math.max(lcpResponseEnd, lcpEntry.startTime - activationStart);
-            attribution = {
-                element: getSelector(lcpEntry.element),
-                timeToFirstByte: ttfb,
-                resourceLoadDelay: lcpRequestStart - ttfb,
-                resourceLoadDuration: lcpResponseEnd - lcpRequestStart,
-                elementRenderDelay: lcpRenderTime - lcpResponseEnd,
-                navigationEntry,
-                lcpEntry,
-            };
-            // Only attribution the URL and resource entry if they exist.
-            if (lcpEntry.url) {
-                attribution.url = lcpEntry.url;
-            }
-            if (lcpResourceEntry) {
-                attribution.lcpResourceEntry = lcpResourceEntry;
-            }
-        }
-    }
-    // Use Object.assign to set property to keep tsc happy.
-    const metricWithAttribution = Object.assign(metric, { attribution });
-    return metricWithAttribution;
-};
 /**
  * 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
@@ -75,7 +29,73 @@ const attributeLCP = (metric) => {
  * performance entry is dispatched, or once the final value of the metric has
  * been determined.
  */
-export const onLCP = (onReport, opts) => {
+export const onLCP = (onReport, opts = {}) => {
+    // Clone the opts object to ensure it's unique, so we can initialize a
+    // single instance of the `LCPEntryManager` class that's shared only with
+    // this function invocation and the `unattributedOnLCP()` invocation below
+    // (which is passed the same `opts` object).
+    opts = Object.assign({}, opts);
+    const lcpEntryManager = initUnique(opts, LCPEntryManager);
+    const lcpTargetMap = new WeakMap();
+    lcpEntryManager._onBeforeProcessingEntry = (entry) => {
+        const node = entry.element;
+        if (node) {
+            const customTarget = opts.generateTarget?.(node) ?? getSelector(node);
+            lcpTargetMap.set(entry, customTarget);
+        }
+    };
+    const attributeLCP = (metric) => {
+        // Use a default object if no other attribution has been set.
+        let attribution = {
+            timeToFirstByte: 0,
+            resourceLoadDelay: 0,
+            resourceLoadDuration: 0,
+            elementRenderDelay: metric.value,
+        };
+        if (metric.entries.length) {
+            const navigationEntry = getNavigationEntry();
+            if (navigationEntry) {
+                const activationStart = navigationEntry.activationStart || 0;
+                // The `metric.entries.length` check ensures there will be an entry.
+                const lcpEntry = metric.entries.at(-1);
+                const lcpResourceEntry = lcpEntry.url &&
+                    performance
+                        .getEntriesByType('resource')
+                        .filter((e) => e.name === lcpEntry.url)[0];
+                const ttfb = Math.max(0, navigationEntry.responseStart - activationStart);
+                const lcpRequestStart = Math.max(ttfb, 
+                // Prefer `requestStart` (if TOA is set), otherwise use `startTime`.
+                lcpResourceEntry
+                    ? (lcpResourceEntry.requestStart || lcpResourceEntry.startTime) -
+                        activationStart
+                    : 0);
+                const lcpResponseEnd = Math.min(
+                // Cap at LCP time (videos continue downloading after LCP for example)
+                metric.value, Math.max(lcpRequestStart, lcpResourceEntry
+                    ? lcpResourceEntry.responseEnd - activationStart
+                    : 0));
+                attribution = {
+                    target: lcpTargetMap.get(lcpEntry),
+                    timeToFirstByte: ttfb,
+                    resourceLoadDelay: lcpRequestStart - ttfb,
+                    resourceLoadDuration: lcpResponseEnd - lcpRequestStart,
+                    elementRenderDelay: metric.value - lcpResponseEnd,
+                    navigationEntry,
+                    lcpEntry,
+                };
+                // Only attribute the URL and resource entry if they exist.
+                if (lcpEntry.url) {
+                    attribution.url = lcpEntry.url;
+                }
+                if (lcpResourceEntry) {
+                    attribution.lcpResourceEntry = lcpResourceEntry;
+                }
+            }
+        }
+        // Use `Object.assign()` to ensure the original metric object is returned.
+        const metricWithAttribution = Object.assign(metric, { attribution });
+        return metricWithAttribution;
+    };
     unattributedOnLCP((metric) => {
         const metricWithAttribution = attributeLCP(metric);
         onReport(metricWithAttribution);

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

@@ -1,4 +1,4 @@
-import { TTFBMetricWithAttribution, ReportOpts } from '../types.js';
+import { TTFBMetricWithAttribution, AttributionReportOpts } from '../types.js';
 /**
  * Calculates the [TTFB](https://web.dev/articles/ttfb) value for the
  * current page and calls the `callback` function once the page has loaded,
@@ -14,4 +14,4 @@ import { TTFBMetricWithAttribution, ReportOpts } from '../types.js';
  * includes time spent on DNS lookup, connection negotiation, network latency,
  * and server processing time.
  */
-export declare const onTTFB: (onReport: (metric: TTFBMetricWithAttribution) => void, opts?: ReportOpts) => void;
+export declare const onTTFB: (onReport: (metric: TTFBMetricWithAttribution) => void, opts?: AttributionReportOpts) => void;

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

@@ -49,7 +49,7 @@ const attributeTTFB = (metric) => {
             navigationEntry: navigationEntry,
         };
     }
-    // Use Object.assign to set property to keep tsc happy.
+    // Use `Object.assign()` to ensure the original metric object is returned.
     const metricWithAttribution = Object.assign(metric, { attribution });
     return metricWithAttribution;
 };
@@ -68,7 +68,7 @@ const attributeTTFB = (metric) => {
  * includes time spent on DNS lookup, connection negotiation, network latency,
  * and server processing time.
  */
-export const onTTFB = (onReport, opts) => {
+export const onTTFB = (onReport, opts = {}) => {
     unattributedOnTTFB((metric) => {
         const metricWithAttribution = attributeTTFB(metric);
         onReport(metricWithAttribution);

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

@@ -3,5 +3,4 @@ export { onFCP, FCPThresholds } from './onFCP.js';
 export { onINP, INPThresholds } from './onINP.js';
 export { onLCP, LCPThresholds } from './onLCP.js';
 export { onTTFB, TTFBThresholds } from './onTTFB.js';
-export * from './deprecated.js';
 export * from './types.js';

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

@@ -18,5 +18,4 @@ export { onFCP, FCPThresholds } from './onFCP.js';
 export { onINP, INPThresholds } from './onINP.js';
 export { onLCP, LCPThresholds } from './onLCP.js';
 export { onTTFB, TTFBThresholds } from './onTTFB.js';
-export * from './deprecated.js';
 export * from './types.js';

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

@@ -0,0 +1,33 @@
+export interface Interaction {
+    _latency: number;
+    id: number;
+    entries: PerformanceEventTiming[];
+}
+export declare class InteractionManager {
+    /**
+     * A list of longest interactions on the page (by latency) sorted so the
+     * longest one is first. The list is at most MAX_INTERACTIONS_TO_CONSIDER
+     * long.
+     */
+    _longestInteractionList: Interaction[];
+    /**
+     * A mapping of longest interactions by their interaction ID.
+     * This is used for faster lookup.
+     */
+    _longestInteractionMap: Map<number, Interaction>;
+    _onBeforeProcessingEntry?: (entry: PerformanceEventTiming) => void;
+    _onAfterProcessingINPCandidate?: (interaction: Interaction) => void;
+    _resetInteractions(): void;
+    /**
+     * Returns the estimated p98 longest interaction based on the stored
+     * interaction candidates and the interaction count for the current page.
+     */
+    _estimateP98LongestInteraction(): Interaction;
+    /**
+     * Takes a performance entry and adds it to the list of worst interactions
+     * if its duration is long enough to make it among the worst. If the
+     * entry is part of an existing interaction, it is merged and the latency
+     * and entries list is updated as needed.
+     */
+    _processEntry(entry: PerformanceEventTiming): void;
+}

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

@@ -0,0 +1,111 @@
+/*
+ * 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.
+ * 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.
+ */
+import { getInteractionCount } from './polyfills/interactionCountPolyfill.js';
+// To prevent unnecessary memory usage on pages with lots of interactions,
+// store at most 10 of the longest interactions to consider as INP candidates.
+const MAX_INTERACTIONS_TO_CONSIDER = 10;
+// Used to store the interaction count after a bfcache restore, since p98
+// interaction latencies should only consider the current navigation.
+let prevInteractionCount = 0;
+/**
+ * Returns the interaction count since the last bfcache restore (or for the
+ * full page lifecycle if there were no bfcache restores).
+ */
+const getInteractionCountForNavigation = () => {
+    return getInteractionCount() - prevInteractionCount;
+};
+export class InteractionManager {
+    /**
+     * A list of longest interactions on the page (by latency) sorted so the
+     * longest one is first. The list is at most MAX_INTERACTIONS_TO_CONSIDER
+     * long.
+     */
+    _longestInteractionList = [];
+    /**
+     * A mapping of longest interactions by their interaction ID.
+     * This is used for faster lookup.
+     */
+    _longestInteractionMap = new Map();
+    _onBeforeProcessingEntry;
+    _onAfterProcessingINPCandidate;
+    _resetInteractions() {
+        prevInteractionCount = getInteractionCount();
+        this._longestInteractionList.length = 0;
+        this._longestInteractionMap.clear();
+    }
+    /**
+     * Returns the estimated p98 longest interaction based on the stored
+     * interaction candidates and the interaction count for the current page.
+     */
+    _estimateP98LongestInteraction() {
+        const candidateInteractionIndex = Math.min(this._longestInteractionList.length - 1, Math.floor(getInteractionCountForNavigation() / 50));
+        return this._longestInteractionList[candidateInteractionIndex];
+    }
+    /**
+     * Takes a performance entry and adds it to the list of worst interactions
+     * if its duration is long enough to make it among the worst. If the
+     * entry is part of an existing interaction, it is merged and the latency
+     * and entries list is updated as needed.
+     */
+    _processEntry(entry) {
+        this._onBeforeProcessingEntry?.(entry);
+        // Skip further processing for entries that cannot be INP candidates.
+        if (!(entry.interactionId || entry.entryType === 'first-input'))
+            return;
+        // The least-long of the 10 longest interactions.
+        const minLongestInteraction = this._longestInteractionList.at(-1);
+        let interaction = this._longestInteractionMap.get(entry.interactionId);
+        // Only process the entry if it's possibly one of the ten longest,
+        // or if it's part of an existing interaction.
+        if (interaction ||
+            this._longestInteractionList.length < MAX_INTERACTIONS_TO_CONSIDER ||
+            // If the above conditions are false, `minLongestInteraction` will be set.
+            entry.duration > minLongestInteraction._latency) {
+            // If the interaction already exists, update it. Otherwise create one.
+            if (interaction) {
+                // If the new entry has a longer duration, replace the old entries,
+                // otherwise add to the array.
+                if (entry.duration > interaction._latency) {
+                    interaction.entries = [entry];
+                    interaction._latency = entry.duration;
+                }
+                else if (entry.duration === interaction._latency &&
+                    entry.startTime === interaction.entries[0].startTime) {
+                    interaction.entries.push(entry);
+                }
+            }
+            else {
+                interaction = {
+                    id: entry.interactionId,
+                    entries: [entry],
+                    _latency: entry.duration,
+                };
+                this._longestInteractionMap.set(interaction.id, interaction);
+                this._longestInteractionList.push(interaction);
+            }
+            // Sort the entries by latency (descending) and keep only the top ten.
+            this._longestInteractionList.sort((a, b) => b._latency - a._latency);
+            if (this._longestInteractionList.length > MAX_INTERACTIONS_TO_CONSIDER) {
+                const removedInteractions = this._longestInteractionList.splice(MAX_INTERACTIONS_TO_CONSIDER);
+                for (const interaction of removedInteractions) {
+                    this._longestInteractionMap.delete(interaction.id);
+                }
+            }
+            // Call any post-processing on the interaction
+            this._onAfterProcessingINPCandidate?.(interaction);
+        }
+    }
+}

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

@@ -0,0 +1,4 @@
+export declare class LCPEntryManager {
+    _onBeforeProcessingEntry?: (entry: LargestContentfulPaint) => void;
+    _processEntry(entry: LargestContentfulPaint): void;
+}

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

@@ -13,10 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { 
-/**
- * @deprecated Use `onINP()` instead.
- */
-onFID, } from './onFID.js';
-export { FIDThresholds } from '../onFID.js';
-export * from '../types.js';
+export class LCPEntryManager {
+    _onBeforeProcessingEntry;
+    _processEntry(entry) {
+        this._onBeforeProcessingEntry?.(entry);
+    }
+}

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

@@ -0,0 +1,6 @@
+export declare class LayoutShiftManager {
+    _onAfterProcessingUnexpectedShift?: (entry: LayoutShift) => void;
+    _sessionValue: number;
+    _sessionEntries: LayoutShift[];
+    _processEntry(entry: LayoutShift): void;
+}

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

@@ -0,0 +1,44 @@
+/*
+ * 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.
+ * 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 class LayoutShiftManager {
+    _onAfterProcessingUnexpectedShift;
+    _sessionValue = 0;
+    _sessionEntries = [];
+    _processEntry(entry) {
+        // Only count layout shifts without recent user input.
+        if (entry.hadRecentInput)
+            return;
+        const firstSessionEntry = this._sessionEntries[0];
+        const lastSessionEntry = this._sessionEntries.at(-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 (this._sessionValue &&
+            firstSessionEntry &&
+            lastSessionEntry &&
+            entry.startTime - lastSessionEntry.startTime < 1000 &&
+            entry.startTime - firstSessionEntry.startTime < 5000) {
+            this._sessionValue += entry.value;
+            this._sessionEntries.push(entry);
+        }
+        else {
+            this._sessionValue = entry.value;
+            this._sessionEntries = [entry];
+        }
+        this._onAfterProcessingUnexpectedShift?.(entry);
+    }
+}

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

@@ -28,7 +28,7 @@ export const bindReporter = (callback, metric, thresholds, reportAllChanges) =>
     return (forceReport) => {
         if (metric.value >= 0) {
             if (forceReport || reportAllChanges) {
-                delta = metric.value - (prevValue || 0);
+                delta = metric.value - (prevValue ?? 0);
                 // Report the metric if there's a non-zero delta or if no previous
                 // value exists (which can happen in the case of the document becoming
                 // hidden when the metric value is 0).

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

@@ -19,5 +19,5 @@
  * @return {string}
  */
 export const generateUniqueID = () => {
-    return `v4-${Date.now()}-${Math.floor(Math.random() * (9e12 - 1)) + 1e12}`;
+    return `v5-${Date.now()}-${Math.floor(Math.random() * (9e12 - 1)) + 1e12}`;
 };

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

@@ -16,5 +16,5 @@
 import { getNavigationEntry } from './getNavigationEntry.js';
 export const getActivationStart = () => {
     const navEntry = getNavigationEntry();
-    return (navEntry && navEntry.activationStart) || 0;
+    return navEntry?.activationStart ?? 0;
 };

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

@@ -14,16 +14,14 @@
  * limitations under the License.
  */
 export const getNavigationEntry = () => {
-    const navigationEntry = self.performance &&
-        performance.getEntriesByType &&
-        performance.getEntriesByType('navigation')[0];
+    const navigationEntry = performance.getEntriesByType('navigation')[0];
     // Check to ensure the `responseStart` property is present and valid.
-    // In some cases no value is reported by the browser (for
+    // In some cases a zero value is reported by the browser (for
     // privacy/security reasons), and in other cases (bugs) the value is
     // negative or is larger than the current page time. Ignore these cases:
-    // https://github.com/GoogleChrome/web-vitals/issues/137
-    // https://github.com/GoogleChrome/web-vitals/issues/162
-    // https://github.com/GoogleChrome/web-vitals/issues/275
+    // - https://github.com/GoogleChrome/web-vitals/issues/137
+    // - https://github.com/GoogleChrome/web-vitals/issues/162
+    // - https://github.com/GoogleChrome/web-vitals/issues/275
     if (navigationEntry &&
         navigationEntry.responseStart > 0 &&
         navigationEntry.responseStart < performance.now()) {

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

@@ -1 +1 @@
-export declare const getSelector: (node: Node | null | undefined, maxLen?: number) => string;
+export declare const getSelector: (node: Node | null) => string;

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

@@ -19,29 +19,26 @@ const getName = (node) => {
         ? name.toLowerCase()
         : name.toUpperCase().replace(/^#/, '');
 };
-export const getSelector = (node, maxLen) => {
+const MAX_LEN = 100;
+export const getSelector = (node) => {
     let sel = '';
     try {
-        while (node && node.nodeType !== 9) {
+        while (node?.nodeType !== 9) {
             const el = node;
             const part = el.id
                 ? '#' + el.id
-                : getName(el) +
-                    (el.classList &&
-                        el.classList.value &&
-                        el.classList.value.trim() &&
-                        el.classList.value.trim().length
-                        ? '.' + el.classList.value.trim().replace(/\s+/g, '.')
-                        : '');
-            if (sel.length + part.length > (maxLen || 100) - 1)
+                : [getName(el), ...Array.from(el.classList).sort()].join('.');
+            if (sel.length + part.length > MAX_LEN - 1) {
                 return sel || part;
+            }
             sel = sel ? part + '>' + sel : part;
-            if (el.id)
+            if (el.id) {
                 break;
+            }
             node = el.parentNode;
         }
     }
-    catch (err) {
+    catch {
         // Do nothing...
     }
     return sel;

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

@@ -1,3 +1,4 @@
 export declare const getVisibilityWatcher: () => {
     readonly firstHiddenTime: number;
+    onHidden(cb: () => void): void;
 };

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

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 import { onBFCacheRestore } from './bfcache.js';
+import { getActivationStart } from './getActivationStart.js';
 let firstHiddenTime = -1;
+const onHiddenFunctions = new Set();
 const initHiddenTime = () => {
     // If the document is hidden when this code runs, assume it was always
     // hidden and the page was loaded in the background, with the one exception
@@ -26,41 +28,56 @@ const initHiddenTime = () => {
         : Infinity;
 };
 const onVisibilityUpdate = (event) => {
-    // If the document is 'hidden' and no previous hidden timestamp has been
-    // set, update it based on the current event data.
-    if (document.visibilityState === 'hidden' && firstHiddenTime > -1) {
-        // If the event is a 'visibilitychange' event, it means the page was
-        // visible prior to this change, so the event timestamp is the first
-        // hidden time.
-        // However, if the event is not a 'visibilitychange' event, then it must
-        // be a 'prerenderingchange' event, and the fact that the document is
-        // still 'hidden' from the above check means the tab was activated
-        // in a background state and so has always been hidden.
-        firstHiddenTime = event.type === 'visibilitychange' ? event.timeStamp : 0;
-        // Remove all listeners now that a `firstHiddenTime` value has been set.
-        removeChangeListeners();
+    // Handle changes to hidden state
+    if (document.visibilityState === 'hidden') {
+        if (event.type === 'visibilitychange') {
+            for (const onHiddenFunction of onHiddenFunctions) {
+                onHiddenFunction();
+            }
+        }
+        // If the document is 'hidden' and no previous hidden timestamp has been
+        // set (so is infinity), update it based on the current event data.
+        if (!isFinite(firstHiddenTime)) {
+            // If the event is a 'visibilitychange' event, it means the page was
+            // visible prior to this change, so the event timestamp is the first
+            // hidden time.
+            // However, if the event is not a 'visibilitychange' event, then it must
+            // be a 'prerenderingchange' event, and the fact that the document is
+            // still 'hidden' from the above check means the tab was activated
+            // in a background state and so has always been hidden.
+            firstHiddenTime = event.type === 'visibilitychange' ? event.timeStamp : 0;
+            // We no longer need the `prerenderingchange` event listener now we've
+            // set an initial init time so remove that
+            // (we'll keep the visibilitychange one for onHiddenFunction above)
+            removeEventListener('prerenderingchange', onVisibilityUpdate, true);
+        }
     }
 };
-const addChangeListeners = () => {
-    addEventListener('visibilitychange', onVisibilityUpdate, true);
-    // IMPORTANT: when a page is prerendering, its `visibilityState` is
-    // 'hidden', so in order to account for cases where this module checks for
-    // visibility during prerendering, an additional check after prerendering
-    // completes is also required.
-    addEventListener('prerenderingchange', onVisibilityUpdate, true);
-};
-const removeChangeListeners = () => {
-    removeEventListener('visibilitychange', onVisibilityUpdate, true);
-    removeEventListener('prerenderingchange', onVisibilityUpdate, true);
-};
 export const getVisibilityWatcher = () => {
     if (firstHiddenTime < 0) {
-        // If the document is hidden when this code runs, assume it was hidden
-        // since navigation start. This isn't a perfect heuristic, but it's the
-        // best we can do until an API is available to support querying past
-        // visibilityState.
-        firstHiddenTime = initHiddenTime();
-        addChangeListeners();
+        // Check if we have a previous hidden `visibility-state` performance entry.
+        const activationStart = getActivationStart();
+        /* eslint-disable indent */
+        const firstVisibilityStateHiddenTime = !document.prerendering
+            ? globalThis.performance
+                .getEntriesByType('visibility-state')
+                .filter((e) => e.name === 'hidden' && e.startTime > activationStart)[0]?.startTime
+            : undefined;
+        /* eslint-enable indent */
+        // Prefer that, but if it's not available and the document is hidden when
+        // this code runs, assume it was hidden since navigation start. This isn't
+        // a perfect heuristic, but it's the best we can do until the
+        // `visibility-state` performance entry becomes available in all browsers.
+        firstHiddenTime = firstVisibilityStateHiddenTime ?? initHiddenTime();
+        // Listen for visibility changes so we can handle things like bfcache
+        // restores and/or prerender without having to examine individual
+        // timestamps in detail and also for onHidden function calls.
+        addEventListener('visibilitychange', onVisibilityUpdate, true);
+        // IMPORTANT: when a page is prerendering, its `visibilityState` is
+        // 'hidden', so in order to account for cases where this module checks for
+        // visibility during prerendering, an additional check after prerendering
+        // completes is also required.
+        addEventListener('prerenderingchange', onVisibilityUpdate, true);
         // Reset the time on bfcache restores.
         onBFCacheRestore(() => {
             // Schedule a task in order to track the `visibilityState` once it's
@@ -68,13 +85,15 @@ export const getVisibilityWatcher = () => {
             // https://bugs.chromium.org/p/chromium/issues/detail?id=1133363
             setTimeout(() => {
                 firstHiddenTime = initHiddenTime();
-                addChangeListeners();
-            }, 0);
+            });
         });
     }
     return {
         get firstHiddenTime() {
             return firstHiddenTime;
         },
+        onHidden(cb) {
+            onHiddenFunctions.add(cb);
+        },
     };
 };

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

@@ -8,8 +8,6 @@ export declare const initMetric: <MetricName extends MetricType["name"]>(name: M
         name: MetricName;
     }> | Extract<import("../types.js").FCPMetric, {
         name: MetricName;
-    }> | Extract<import("../types.js").FIDMetric, {
-        name: MetricName;
     }> | Extract<import("../types.js").INPMetric, {
         name: MetricName;
     }> | Extract<import("../types.js").LCPMetric, {

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

@@ -17,7 +17,7 @@ import { getBFCacheRestoreTime } from './bfcache.js';
 import { generateUniqueID } from './generateUniqueID.js';
 import { getActivationStart } from './getActivationStart.js';
 import { getNavigationEntry } from './getNavigationEntry.js';
-export const initMetric = (name, value) => {
+export const initMetric = (name, value = -1) => {
     const navEntry = getNavigationEntry();
     let navigationType = 'navigate';
     if (getBFCacheRestoreTime() >= 0) {
@@ -38,7 +38,7 @@ export const initMetric = (name, value) => {
     const entries = [];
     return {
         name,
-        value: typeof value === 'undefined' ? -1 : value,
+        value,
         rating: 'good', // If needed, will be updated when reported. `const` to keep the type from widening to `string`.
         delta: 0,
         entries,