chrome-devtools-frontend 1.0.1526630 → 1.0.1528866

package/front_end/third_party/web-vitals/package/src/attribution/onLCP.ts

@@ -16,81 +16,16 @@
 
 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';
 import {
   LCPAttribution,
   LCPMetric,
   LCPMetricWithAttribution,
-  ReportOpts,
+  AttributionReportOpts,
 } from '../types.js';
 
-const attributeLCP = (metric: LCPMetric): LCPMetricWithAttribution => {
-  // Use a default object if no other attribution has been set.
-  let attribution: LCPAttribution = {
-    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: LCPMetricWithAttribution = 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
@@ -104,8 +39,100 @@ const attributeLCP = (metric: LCPMetric): LCPMetricWithAttribution => {
  */
 export const onLCP = (
   onReport: (metric: LCPMetricWithAttribution) => void,
-  opts?: ReportOpts,
+  opts: AttributionReportOpts = {},
 ) => {
+  // 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: WeakMap<LargestContentfulPaint, string> = new WeakMap();
+
+  lcpEntryManager._onBeforeProcessingEntry = (
+    entry: LargestContentfulPaint,
+  ) => {
+    const node = entry.element;
+    if (node) {
+      const customTarget = opts.generateTarget?.(node) ?? getSelector(node);
+      lcpTargetMap.set(entry, customTarget);
+    }
+  };
+
+  const attributeLCP = (metric: LCPMetric): LCPMetricWithAttribution => {
+    // Use a default object if no other attribution has been set.
+    let attribution: LCPAttribution = {
+      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: LCPMetricWithAttribution = Object.assign(
+      metric,
+      {attribution},
+    );
+    return metricWithAttribution;
+  };
+
   unattributedOnLCP((metric: LCPMetric) => {
     const metricWithAttribution = attributeLCP(metric);
     onReport(metricWithAttribution);

package/front_end/third_party/web-vitals/package/src/attribution/onTTFB.ts

@@ -18,7 +18,7 @@ import {onTTFB as unattributedOnTTFB} from '../onTTFB.js';
 import {
   TTFBMetric,
   TTFBMetricWithAttribution,
-  ReportOpts,
+  AttributionReportOpts,
   TTFBAttribution,
 } from '../types.js';
 
@@ -73,7 +73,7 @@ const attributeTTFB = (metric: TTFBMetric): TTFBMetricWithAttribution => {
     };
   }
 
-  // Use Object.assign to set property to keep tsc happy.
+  // Use `Object.assign()` to ensure the original metric object is returned.
   const metricWithAttribution: TTFBMetricWithAttribution = Object.assign(
     metric,
     {attribution},
@@ -98,7 +98,7 @@ const attributeTTFB = (metric: TTFBMetric): TTFBMetricWithAttribution => {
  */
 export const onTTFB = (
   onReport: (metric: TTFBMetricWithAttribution) => void,
-  opts?: ReportOpts,
+  opts: AttributionReportOpts = {},
 ) => {
   unattributedOnTTFB((metric: TTFBMetric) => {
     const metricWithAttribution = attributeTTFB(metric);

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

@@ -20,5 +20,4 @@ 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/src/lib/InteractionManager.ts

@@ -0,0 +1,146 @@
+/*
+ * 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';
+
+export interface Interaction {
+  _latency: number;
+  // While the `id` and `entries` properties are also internal and could be
+  // mangled by prefixing with an underscore, since they correspond to public
+  // symbols there is no need to mangle them as the library will compress
+  // better if we reuse the existing names.
+  id: number;
+  entries: PerformanceEventTiming[];
+}
+
+// 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: Interaction[] = [];
+
+  /**
+   * A mapping of longest interactions by their interaction ID.
+   * This is used for faster lookup.
+   */
+  _longestInteractionMap: Map<number, Interaction> = new Map();
+
+  _onBeforeProcessingEntry?: (entry: PerformanceEventTiming) => void;
+
+  _onAfterProcessingINPCandidate?: (interaction: Interaction) => void;
+
+  _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: PerformanceEventTiming) {
+    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/src/{attribution/deprecated.ts → lib/LCPEntryManager.ts}

@@ -14,13 +14,10 @@
  * limitations under the License.
  */
 
-export {
-  /**
-   * @deprecated Use `onINP()` instead.
-   */
-  onFID,
-} from './onFID.js';
+export class LCPEntryManager {
+  _onBeforeProcessingEntry?: (entry: LargestContentfulPaint) => void;
 
-export {FIDThresholds} from '../onFID.js';
-
-export * from '../types.js';
+  _processEntry(entry: LargestContentfulPaint) {
+    this._onBeforeProcessingEntry?.(entry);
+  }
+}

package/front_end/third_party/web-vitals/package/src/lib/LayoutShiftManager.ts

@@ -0,0 +1,50 @@
+/*
+ * 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?: (entry: LayoutShift) => void;
+
+  _sessionValue = 0;
+  _sessionEntries: LayoutShift[] = [];
+
+  _processEntry(entry: LayoutShift) {
+    // 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/src/lib/bindReporter.ts

@@ -40,7 +40,7 @@ export const bindReporter = <MetricName extends MetricType['name']>(
   return (forceReport?: boolean) => {
     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

package/front_end/third_party/web-vitals/package/src/lib/generateUniqueID.ts

@@ -20,5 +20,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/src/lib/getActivationStart.ts

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

package/front_end/third_party/web-vitals/package/src/lib/getNavigationEntry.ts

@@ -15,18 +15,15 @@
  */
 
 export const getNavigationEntry = (): PerformanceNavigationTiming | void => {
-  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 &&

package/front_end/third_party/web-vitals/package/src/lib/getSelector.ts

@@ -21,27 +21,27 @@ const getName = (node: Node) => {
     : name.toUpperCase().replace(/^#/, '');
 };
 
-export const getSelector = (node: Node | null | undefined, maxLen?: number) => {
+const MAX_LEN = 100;
+
+export const getSelector = (node: Node | null) => {
   let sel = '';
 
   try {
-    while (node && node.nodeType !== 9) {
+    while (node?.nodeType !== 9) {
       const el: Element = node as Element;
       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) return sel || part;
+        : [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) break;
+      if (el.id) {
+        break;
+      }
       node = el.parentNode;
     }
-  } catch (err) {
+  } catch {
     // Do nothing...
   }
   return sel;

package/front_end/third_party/web-vitals/package/src/lib/getVisibilityWatcher.ts

@@ -15,8 +15,10 @@
  */
 
 import {onBFCacheRestore} from './bfcache.js';
+import {getActivationStart} from './getActivationStart.js';
 
 let firstHiddenTime = -1;
+const onHiddenFunctions: Set<() => void> = new Set();
 
 const initHiddenTime = () => {
   // If the document is hidden when this code runs, assume it was always
@@ -30,45 +32,63 @@ const initHiddenTime = () => {
 };
 
 const onVisibilityUpdate = (event: 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;
+  // Handle changes to hidden state
+  if (document.visibilityState === 'hidden') {
+    if (event.type === 'visibilitychange') {
+      for (const onHiddenFunction of onHiddenFunctions) {
+        onHiddenFunction();
+      }
+    }
 
-    // Remove all listeners now that a `firstHiddenTime` value has been set.
-    removeChangeListeners();
-  }
-};
-
-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);
-};
+    // 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;
 
-const removeChangeListeners = () => {
-  removeEventListener('visibilitychange', onVisibilityUpdate, true);
-  removeEventListener('prerenderingchange', onVisibilityUpdate, true);
+      // 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);
+    }
+  }
 };
 
 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(() => {
@@ -77,13 +97,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: () => void) {
+      onHiddenFunctions.add(cb);
+    },
   };
 };