[third-party] Roll web-vitals v4.2.3

This also adds a rebuild.sh script to automatically modify the code
to export `attributeINP()`

Bug: None
Change-Id: I000c97d885a11bc0ea3d4cc4fb00418f7f9c7e61
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5939333
Reviewed-by: Jack Franklin <[email protected]>
Auto-Submit: Adam Raine <[email protected]>
Commit-Queue: Adam Raine <[email protected]>

Author: Adam Raine

front_end/third_party/web-vitals/BUILD.gn

@@ -6,7 +6,12 @@ import("../../../scripts/build/ninja/devtools_entrypoint.gni")
 import("../../../scripts/build/ninja/devtools_pre_built.gni")
 import("../visibility.gni")
 
-EXCLUDED_SOURCES = []
+EXCLUDED_SOURCES = [
+  "package/dist/web-vitals.attribution.iife.js",
+  "package/dist/web-vitals.attribution.js",
+  "package/dist/web-vitals.iife.js",
+  "package/dist/web-vitals.js",
+]
 
 SOURCES = [
   "package/dist/modules/attribution/deprecated.d.ts",

front_end/third_party/web-vitals/README.chromium

@@ -1,16 +1,16 @@
 Name: Web Vitals
 Short Name: Web Vitals
 URL: https://github.com/GoogleChrome/web-vitals
-Version: 4.2.1
+Version: 4.2.3
 License: Apache
 License File: package/LICENSE
-Revision: d6880fdaf669735716eaf3c163baf3f2c10fefaa
+Revision: 9b932519b16f72328c6d8e9814b811f1bc1a0bb5
 Security Critical: no
 Shipped: yes
 
 Description:
 Essential metrics for a healthy site.
 
 ```bash
-python3 scripts/deps/roll_front_end_third_party.py web-vitals web-vitals dist/modules
+./front_end/third_party/web-vitals/rebuild.sh
 ```

front_end/third_party/web-vitals/package/README.md

@@ -42,7 +42,10 @@ The library supports all of the [Core Web Vitals](https://web.dev/articles/vital
 
 - [First Contentful Paint (FCP)](https://web.dev/articles/fcp)
 - [Time to First Byte (TTFB)](https://web.dev/articles/ttfb)
-- [First Input Delay (FID)](https://web.dev/articles/fid) _Deprecated and will be removed in next major release_
+- [First Input Delay (FID)](https://web.dev/articles/fid)
+
+> [!CAUTION]
+> FID is deprecated and will be removed in the next major release.
 
 <a name="installation"><a>
 <a name="load-the-library"><a>
@@ -63,7 +66,8 @@ You can install this library from npm by running:
 npm install web-vitals
 ```
 
-_**Note:** If you're not using npm, you can still load `web-vitals` via `<script>` tags from a CDN like [unpkg.com](https://unpkg.com). See the [load `web-vitals` from a CDN](#load-web-vitals-from-a-cdn) usage example below for details._
+> [!NOTE]
+> If you're not using npm, you can still load `web-vitals` via `<script>` tags from a CDN like [unpkg.com](https://unpkg.com). See the [load `web-vitals` from a CDN](#load-web-vitals-from-a-cdn) usage example below for details.
 
 There are a few different builds of the `web-vitals` library, and how you load the library depends on which build you want to use.
 
@@ -81,7 +85,8 @@ onINP(console.log);
 onLCP(console.log);
 ```
 
-_**Note:** in version 2, these functions were named `getXXX()` rather than `onXXX()`. They've [been renamed](https://github.com/GoogleChrome/web-vitals/pull/222) in version 3 to reduce confusion (see [#217](https://github.com/GoogleChrome/web-vitals/pull/217) for details) and will continue to be available using the `getXXX()` until at least version 4. Users are encouraged to switch to the new names, though, for future compatibility._
+> [!NOTE]
+> In version 2, these functions were named `getXXX()` rather than `onXXX()`. They've [been renamed](https://github.com/GoogleChrome/web-vitals/pull/222) in version 3 to reduce confusion (see [#217](https://github.com/GoogleChrome/web-vitals/pull/217) for details) and will continue to be available using the `getXXX()` until at least version 4. Users are encouraged to switch to the new names, though, for future compatibility.
 
 <a name="attribution-build"><a>
 
@@ -213,13 +218,15 @@ In other cases, a metric callback may be called more than once:
 - CLS and INP should be reported any time the [page's `visibilityState` changes to hidden](https://developer.chrome.com/blog/page-lifecycle-api/#advice-hidden).
 - All metrics are reported again (with the above exceptions) after a page is restored from the [back/forward cache](https://web.dev/articles/bfcache).
 
-_**Warning:** do not call any of the Web Vitals functions (e.g. `onCLS()`, `onINP()`, `onLCP()`) more than once per page load. Each of these functions creates a `PerformanceObserver` instance and registers event listeners for the lifetime of the page. While the overhead of calling these functions once is negligible, calling them repeatedly on the same page may eventually result in a memory leak._
+> [!WARNING]
+> Do not call any of the Web Vitals functions (e.g. `onCLS()`, `onINP()`, `onLCP()`) more than once per page load. Each of these functions creates a `PerformanceObserver` instance and registers event listeners for the lifetime of the page. While the overhead of calling these functions once is negligible, calling them repeatedly on the same page may eventually result in a memory leak.
 
 ### Report the value on every change
 
 In most cases, you only want the `callback` function to be called when the metric is ready to be reported. However, it is possible to report every change (e.g. each larger layout shift as it happens) by setting `reportAllChanges` to `true` in the optional, [configuration object](#reportopts) (second parameter).
 
-_**Important:** `reportAllChanges` only reports when the **metric changes**, not for each **input to the metric**. For example, a new layout shift that does not increase the CLS metric will not be reported even with `reportAllChanges` set to `true` because the CLS metric has not changed. Similarly, for INP, each interaction is not reported even with `reportAllChanges` set to `true`—just when an interaction causes an increase to INP._
+> [!IMPORTANT]
+> `reportAllChanges` only reports when the **metric changes**, not for each **input to the metric**. For example, a new layout shift that does not increase the CLS metric will not be reported even with `reportAllChanges` set to `true` because the CLS metric has not changed. Similarly, for INP, each interaction is not reported even with `reportAllChanges` set to `true`—just when an interaction causes an increase to INP.
 
 This can be useful when debugging, but in general using `reportAllChanges` is not needed (or recommended) for measuring these metrics in production.
 
@@ -250,7 +257,8 @@ onINP(logDelta);
 onLCP(logDelta);
 ```
 
-_**Note:** the first time the `callback` function is called, its `value` and `delta` properties will be the same._
+> [!NOTE]
+> The first time the `callback` function is called, its `value` and `delta` properties will be the same.
 
 In addition to using the `id` field to group multiple deltas for the same metric, it can also be used to differentiate different metrics reported on the same page. For example, after a back/forward cache restore, a new metric object is created with a new `id` (since back/forward cache restores are considered separate page visits).
 
@@ -361,7 +369,8 @@ onINP(sendToGoogleAnalytics);
 onLCP(sendToGoogleAnalytics);
 ```
 
-_**Note:** this example relies on custom [event parameters](https://support.google.com/analytics/answer/11396839) in Google Analytics 4._
+> [!NOTE]
+> This example relies on custom [event parameters](https://support.google.com/analytics/answer/11396839) in Google Analytics 4.
 
 See [Debug performance in the field](https://web.dev/articles/debug-performance-in-the-field) for more information and examples.
 
@@ -405,14 +414,10 @@ addEventListener('visibilitychange', () => {
     flushQueue();
   }
 });
-
-// NOTE: Safari does not reliably fire the `visibilitychange` event when the
-// page is being unloaded. If Safari support is needed, you should also flush
-// the queue in the `pagehide` event.
-addEventListener('pagehide', flushQueue);
 ```
 
-_**Note:** see [the Page Lifecycle guide](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#legacy-lifecycle-apis-to-avoid) for an explanation of why `visibilitychange` and `pagehide` are recommended over events like `beforeunload` and `unload`._
+> [!NOTE]
+> See [the Page Lifecycle guide](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#legacy-lifecycle-apis-to-avoid) for an explanation of why `visibilitychange` is recommended over events like `beforeunload` and `unload`.
 
 <a name="bundle-versions"><a>
 
@@ -580,7 +585,8 @@ interface FCPMetric extends Metric {
 
 ##### `FIDMetric`
 
-_This interface is deprecated and will be removed in next major release_
+> [!CAUTION]
+> This interface is deprecated and will be removed in the next major release.
 
 ```ts
 interface FIDMetric extends Metric {
@@ -684,7 +690,8 @@ Calculates the [CLS](https://web.dev/articles/cls) value for the current page an
 
 If the `reportAllChanges` [configuration option](#reportopts) is set to `true`, the `callback` function will be called as soon as the value is initially determined as well as any time the value changes throughout the page lifespan (Note [not necessarily for every layout shift](#report-the-value-on-every-change)).
 
-_**Important:** CLS 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 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 (see [Reporting only the delta of changes](#report-only-the-delta-of-changes) for how to manage this)._
+> [!IMPORTANT]
+> CLS 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 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 (see [Reporting only the delta of changes](#report-only-the-delta-of-changes) for how to manage this).
 
 #### `onFCP()`
 
@@ -696,15 +703,17 @@ Calculates the [FCP](https://web.dev/articles/fcp) value for the current page an
 
 #### `onFID()`
 
-_This function is deprecated and will be removed in next major release_
+> [!CAUTION]
+> This function is deprecated and will be removed in the next major release.
 
 ```ts
 function onFID(callback: (metric: FIDMetric) => void, opts?: ReportOpts): void;
 ```
 
 Calculates the [FID](https://web.dev/articles/fid) value for the current page and calls the `callback` function once the value is ready, along with the relevant `first-input` performance entry used to determine the value. The reported value is a [`DOMHighResTimeStamp`](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp).
 
-_**Important:** since FID is only reported after the user interacts with the page, it's possible that it will not be reported for some page loads._
+> [!IMPORTANT]
+> Since FID is only reported after the user interacts with the page, it's possible that it will not be reported for some page loads.
 
 #### `onINP()`
 
@@ -718,7 +727,8 @@ A custom `durationThreshold` [configuration option](#reportopts) can optionally
 
 If the `reportAllChanges` [configuration option](#reportopts) is set to `true`, the `callback` function will be called as soon as the value is initially determined as well as any time the value changes throughout the page lifespan (Note [not necessarily for every interaction](#report-the-value-on-every-change)).
 
-_**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 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 (see [Reporting only the delta of changes](#report-only-the-delta-of-changes) for how to manage this)._
+> [!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 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 (see [Reporting only the delta of changes](#report-only-the-delta-of-changes) for how to manage this).
 
 #### `onLCP()`
 
@@ -756,8 +766,8 @@ onTTFB((metric) => {
 });
 ```
 
-_**Note:** browsers that do not support `navigation` entries will fall back to
-using `performance.timing` (with the timestamps converted from epoch time to [`DOMHighResTimeStamp`](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp)). This ensures code referencing these values (like in the example above) will work the same in all browsers._
+> [!NOTE]
+> Browsers that do not support `navigation` entries will fall back to using `performance.timing` (with the timestamps converted from epoch time to [`DOMHighResTimeStamp`](https://developer.mozilla.org/docs/Web/API/DOMHighResTimeStamp)). This ensures code referencing these values (like in the example above) will work the same in all browsers.
 
 ### Rating Thresholds:
 
@@ -773,7 +783,8 @@ console.log(INPThresholds); // [ 200, 500 ]
 console.log(LCPThresholds); // [ 2500, 4000 ]
 ```
 
-_**Note:** It's typically not necessary (or recommended) to manually calculate metric value ratings using these thresholds. Use the [`Metric['rating']`](#metric) instead._
+> [!NOTE]
+> It's typically not necessary (or recommended) to manually calculate metric value ratings using these thresholds. Use the [`Metric['rating']`](#metric) instead.
 
 ### Attribution:
 
@@ -858,7 +869,8 @@ interface FCPAttribution {
 
 #### `FIDAttribution`
 
-_This interface is deprecated and will be removed in next major release_
+> [!CAUTION]
+> This interface is deprecated and will be removed in the next major release.
 
 ```ts
 interface FIDAttribution {
@@ -1096,7 +1108,8 @@ The primary limitation of these APIs is they have no visibility into `<iframe>`
 
 For same-origin iframes, it's possible to use the `web-vitals` library to measure metrics, but it's tricky because it requires the developer to add the library to every frame and `postMessage()` the results to the parent frame for aggregation.
 
-_**Note:** given the lack of iframe support, the `onCLS()` function technically measures [DCLS](https://github.com/wicg/layout-instability#cumulative-scores) (Document Cumulative Layout Shift) rather than CLS, if the page includes iframes)._
+> [!NOTE]
+> Given the lack of iframe support, the `onCLS()` function technically measures [DCLS](https://github.com/wicg/layout-instability#cumulative-scores) (Document Cumulative Layout Shift) rather than CLS, if the page includes iframes).
 
 ## Development
 

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

@@ -1,5 +1,6 @@
 import { INPMetric, INPMetricWithAttribution, ReportOpts } from '../types.js';
 export declare const interactionTargetMap: Map<number, Node>;
+export declare const attributeINP: (metric: INPMetric) => INPMetricWithAttribution;
 /**
  * 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
@@ -28,4 +29,3 @@ export declare const interactionTargetMap: Map<number, Node>;
  * during the same page load._
  */
 export declare const onINP: (onReport: (metric: INPMetricWithAttribution) => void, opts?: ReportOpts) => void;
-export declare const attributeINP: (metric: INPMetric) => INPMetricWithAttribution;

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

@@ -39,7 +39,7 @@ let pendingLoAFs = [];
 // that are known to not match INP are removed.
 let pendingEntriesGroups = [];
 // The `processingEnd` time of most recently-processed event, chronologically.
-let latestProcessingEnd;
+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`.
@@ -139,24 +139,22 @@ const cleanupEntries = () => {
     });
     // 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.
+    // 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);
         });
     }
-    for (let i = 0; i < MAX_PREVIOUS_FRAMES; i++) {
-        // Look at pending LoAF in reverse order so the most recent are first.
-        const loaf = pendingLoAFs[pendingLoAFs.length - 1 - i];
-        // If we reach LoAFs that overlap with event processing,
-        // we can assume all previous ones have already been handled.
-        if (!loaf || loaf.startTime < latestProcessingEnd)
-            break;
-        loafsToKeep.add(loaf);
-    }
-    pendingLoAFs = Array.from(loafsToKeep);
+    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;
 };

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

@@ -1,26 +1,6 @@
 import { MetricType, MetricRatingThresholds } from '../types.js';
-export declare const bindReporter: <MetricName extends "CLS" | "FCP" | "FID" | "INP" | "LCP" | "TTFB">(callback: (metric: Extract<import("../types.js").CLSMetric, {
+export declare const bindReporter: <MetricName extends MetricType["name"]>(callback: (metric: Extract<MetricType, {
     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, {
-    name: MetricName;
-}> | Extract<import("../types.js").TTFBMetric, {
-    name: MetricName;
-}>) => void, metric: Extract<import("../types.js").CLSMetric, {
-    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, {
-    name: MetricName;
-}> | Extract<import("../types.js").TTFBMetric, {
+}>) => void, metric: Extract<MetricType, {
     name: MetricName;
 }>, thresholds: MetricRatingThresholds, reportAllChanges?: boolean) => (forceReport?: boolean) => void;

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

@@ -1,4 +1,5 @@
-export declare const initMetric: <MetricName extends "CLS" | "FCP" | "FID" | "INP" | "LCP" | "TTFB">(name: MetricName, value?: number) => {
+import { MetricType } from '../types.js';
+export declare const initMetric: <MetricName extends MetricType["name"]>(name: MetricName, value?: number) => {
     name: MetricName;
     value: number;
     rating: "good";
@@ -17,5 +18,5 @@ export declare const initMetric: <MetricName extends "CLS" | "FCP" | "FID" | "IN
         name: MetricName;
     }>)["entries"];
     id: string;
-    navigationType: "navigate" | "reload" | "back-forward" | "back-forward-cache" | "prerender" | "restore";
+    navigationType: "reload" | "navigate" | "prerender" | "back-forward" | "back-forward-cache" | "restore";
 };

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

@@ -34,7 +34,7 @@ const getInteractionCountForNavigation = () => {
     return getInteractionCount() - prevInteractionCount;
 };
 export const resetInteractions = () => {
-    prevInteractionCount = 0;
+    prevInteractionCount = getInteractionCount();
     longestInteractionList.length = 0;
     longestInteractionMap.clear();
 };