chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

package/front_end/third_party/web-vitals/package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "web-vitals",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Easily measure performance metrics in JavaScript",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "type": "module",
   "typings": "dist/modules/index.d.ts",
   "main": "dist/web-vitals.umd.cjs",
@@ -88,7 +91,7 @@
     "release:beta": "npm version prerelease --preid=beta -m 'Release v%s' && npm publish --tag next",
     "release:rc": "npm version prerelease --preid=rc -m 'Release v%s' && npm publish --tag next",
     "test": "npm-run-all build test:unit -p -r test:e2e test:server",
-    "test:e2e": "wdio wdio.conf.cjs",
+    "test:e2e": "wdio",
     "test:server": "node test/server.js",
     "test:unit": "node --test test/unit/*test.js",
     "start": "run-s build:ts test:server watch",
@@ -96,7 +99,7 @@
     "watch:ts": "tsc -b -w",
     "watch:js": "rollup -c -w",
     "version": "run-s build",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "keywords": [
     "crux",
@@ -134,35 +137,29 @@
     "singleQuote": true
   },
   "devDependencies": {
-    "@babel/core": "^7.23.6",
-    "@babel/preset-env": "^7.23.6",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-replace": "^5.0.5",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
-    "@wdio/cli": "^8.32.3",
-    "@wdio/local-runner": "^8.32.3",
-    "@wdio/mocha-framework": "^8.32.3",
-    "@wdio/spec-reporter": "^8.32.2",
-    "body-parser": "^1.20.2",
-    "chromedriver": "^122.0.4",
-    "eslint": "^8.56.0",
-    "express": "^4.18.2",
-    "fs-extra": "^11.2.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
+    "@wdio/cli": "^9.23.0",
+    "@wdio/local-runner": "^9.25.0",
+    "@wdio/mocha-framework": "^9.25.0",
+    "@wdio/spec-reporter": "^9.25.0",
+    "eslint": "^9.39.2",
+    "fs-extra": "^11.3.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
     "npm-run-all": "^4.1.5",
     "nunjucks": "^3.2.4",
-    "prettier": "^3.1.1",
-    "rollup": "^4.9.1",
-    "selenium-standalone": "^9.3.1",
-    "typescript": "^5.3.3",
-    "wdio-chromedriver-service": "^8.1.1",
-    "yargs": "^17.7.2"
+    "prettier": "^3.7.4",
+    "rollup": "^4.55.1",
+    "typescript": "^5.9.3",
+    "yargs": "^18.0.0"
   },
   "lint-staged": {
-    "**/*.{js,ts}": "eslint --fix --ignore-path .gitignore",
+    "**/*.{js,ts}": "eslint --fix",
     "**/*.{cjs,css,html,js,json,html,md,ts,yml,yaml}": "prettier --write --ignore-path .gitignore"
   }
 }

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

@@ -104,15 +104,10 @@ export const onCLS = (
     }
 
     // Use `Object.assign()` to ensure the original metric object is returned.
-    const metricWithAttribution: CLSMetricWithAttribution = Object.assign(
-      metric,
-      {attribution},
-    );
-    return metricWithAttribution;
+    return Object.assign(metric, {attribution});
   };
 
   unattributedOnCLS((metric: CLSMetric) => {
-    const metricWithAttribution = attributeCLS(metric);
-    onReport(metricWithAttribution);
+    onReport(attributeCLS(metric));
   }, opts);
 };

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

@@ -70,7 +70,6 @@ export const onFCP = (
   opts: AttributionReportOpts = {},
 ) => {
   unattributedOnFCP((metric: FCPMetric) => {
-    const metricWithAttribution = attributeFCP(metric);
-    onReport(metricWithAttribution);
+    onReport(attributeFCP(metric));
   }, opts);
 };

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

@@ -43,8 +43,8 @@ interface pendingEntriesGroup {
 // frame data is needed to determine various bits of INP attribution once all
 // the frame-related data has come in.
 // 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;
+// keeping the most recent 10 should be more than sufficient.
+const MAX_PENDING_FRAMES = 10;
 
 /**
  * Calculates the [INP](https://web.dev/articles/inp) value for the current
@@ -61,6 +61,10 @@ const MAX_PREVIOUS_FRAMES = 50;
  * less than 40 (well below the recommended
  * [good](https://web.dev/articles/inp#what_is_a_good_inp_score) threshold).
  *
+ * A custom `includeProcessedEventEntries` configuration option can optionally
+ * be passed to control whether the `processedEventEntries` array in the
+ * attribution object is populated. The default value is `true`.
+ *
  * If the `reportAllChanges` configuration option 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
@@ -146,6 +150,8 @@ export const onINP = (
     const renderTime = entry.startTime + entry.duration;
     let group;
 
+    // Update `latestProcessingEnd` to correspond to the `processingEnd`
+    // value of the most recently dispatched `event` entry.
     latestProcessingEnd = Math.max(latestProcessingEnd, entry.processingEnd);
 
     // Iterate over all previous render times in reverse order to find a match.
@@ -166,11 +172,11 @@ export const onINP = (
           entry.processingEnd,
           group.processingEnd,
         );
-        // Entries are not needed in DevTools since we're only displaying the
-        // summary information, and also emitting events as they come in. Stop
-        // holding a reference to avoid memory issues.
-        // See https://crbug.com/484342204
-        // group.entries.push(entry);
+        // processedEventEntries can be quite large, so only include them if
+        // the user explicitly requests them (default is to include).
+        if (opts.includeProcessedEventEntries !== false) {
+          group.entries.push(entry);
+        }
 
         break;
       }
@@ -183,12 +189,9 @@ export const onINP = (
         processingStart: entry.processingStart,
         processingEnd: entry.processingEnd,
         renderTime,
-        // Entries are not needed in DevTools since we're only displaying the
-        // summary information, and also emiting events as they come in. Stop
-        // holding a reference to avoid memory issues.
-        // See https://crbug.com/484342204
-        // entries: [entry],
-        entries: [],
+        // processedEventEntries can be quite large, so only include them if
+        // the user explicitly requests them (default is to include).
+        entries: opts.includeProcessedEventEntries !== false ? [entry] : [],
       };
 
       pendingEntriesGroups.push(group);
@@ -211,39 +214,47 @@ export const onINP = (
   };
 
   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 =
+    // Create a set of entries groups that are part of the longest
+    // interactions (for faster lookup below).
+    const longestInteractionGroups = new Set(
       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);
+      }),
+    );
+
+    // Clean up the `pendingEntriesGroups` list so it doesn't grow endlessly.
+    // Keep any groups that:
+    // 1) Correspond to one of the current longest interactions, OR
+    // 2) Are part of one of the most recent set of frames (which is
+    //    determined by checking if the index in the group is within
+    //    `MAX_PENDING_FRAMES` of the group's length).
+    const minIndexToKeep = pendingEntriesGroups.length - MAX_PENDING_FRAMES;
+    pendingEntriesGroups = pendingEntriesGroups.filter((group, i) => {
+      // Check index first because it's faster.
+      return i >= minIndexToKeep || longestInteractionGroups.has(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: Set<PerformanceLongAnimationFrameTiming> = new Set();
+    // Create a set of LoAF entries that intersect with entries in the newly
+    // cleaned up `pendingEntriesGroups` (for faster lookup below).
+    const intersectingLoAFs: Set<PerformanceLongAnimationFrameTiming> =
+      new Set();
+
     for (const group of pendingEntriesGroups) {
       const loafs = getIntersectingLoAFs(group.startTime, group.processingEnd);
       for (const loaf of loafs) {
-        loafsToKeep.add(loaf);
+        intersectingLoAFs.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);
+    // Clean up the `pendingLoAFs` list so it doesn't grow endlessly.
+    // Keep all LoAFs that either:
+    // 1) Intersect with one of the above pending entries groups, OR
+    // 2) Occurred more recently than the most recently process event entry.
+    pendingLoAFs = pendingLoAFs.filter((loaf) => {
+      return (
+        // Compare times first because it's faster.
+        loaf.startTime > latestProcessingEnd || intersectingLoAFs.has(loaf)
+      );
     });
 
     cleanupPending = false;
@@ -454,18 +465,13 @@ export const onINP = (
     attributeLoAFDetails(attribution);
 
     // Use `Object.assign()` to ensure the original metric object is returned.
-    const metricWithAttribution: INPMetricWithAttribution = Object.assign(
-      metric,
-      {attribution},
-    );
-    return metricWithAttribution;
+    return Object.assign(metric, {attribution});
   };
 
   // Start observing LoAF entries for attribution.
   observe('long-animation-frame', handleLoAFEntries);
 
   unattributedOnINP((metric: INPMetric) => {
-    const metricWithAttribution = attributeINP(metric);
-    onReport(metricWithAttribution);
+    onReport(attributeINP(metric));
   }, opts);
 };

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

@@ -57,6 +57,10 @@ export const onLCP = (
     if (node) {
       const customTarget = opts.generateTarget?.(node) ?? getSelector(node);
       lcpTargetMap.set(entry, customTarget);
+    } else if (entry.id) {
+      // Use the LargestContentfulPaint.id property when the element has been
+      // removed from the DOM (and so node is null), but still has an ID.
+      lcpTargetMap.set(entry, `#${entry.id}`);
     }
   };
 
@@ -70,16 +74,29 @@ export const onLCP = (
     };
 
     if (metric.entries.length) {
+      // The `metric.entries.length` check ensures there will be an entry.
+      const lcpEntry = metric.entries.at(-1)!;
+      const lcpResourceEntry =
+        lcpEntry.url &&
+        performance
+          .getEntriesByType('resource')
+          .find((e) => e.name === lcpEntry.url);
+
+      attribution.target = lcpTargetMap.get(lcpEntry);
+      attribution.lcpEntry = lcpEntry;
+      // Only attribute the URL and resource entry if they exist.
+      if (lcpEntry.url) {
+        attribution.url = lcpEntry.url;
+      }
+      if (lcpResourceEntry) {
+        attribution.lcpResourceEntry = lcpResourceEntry;
+      }
+
+      // Get subparts from navigation entry. Do this last as occasionally
+      // Safari seems to fail to find a navigation entry.
       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,
@@ -106,35 +123,21 @@ export const onLCP = (
         );
 
         attribution = {
-          target: lcpTargetMap.get(lcpEntry),
+          ...attribution,
           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;
+    return Object.assign(metric, {attribution});
   };
 
   unattributedOnLCP((metric: LCPMetric) => {
-    const metricWithAttribution = attributeLCP(metric);
-    onReport(metricWithAttribution);
+    onReport(attributeLCP(metric));
   }, opts);
 };

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

@@ -101,7 +101,6 @@ export const onTTFB = (
   opts: AttributionReportOpts = {},
 ) => {
   unattributedOnTTFB((metric: TTFBMetric) => {
-    const metricWithAttribution = attributeTTFB(metric);
-    onReport(metricWithAttribution);
+    onReport(attributeTTFB(metric));
   }, opts);
 };

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

@@ -15,5 +15,5 @@
  */
 
 export const doubleRAF = (cb: () => unknown) => {
-  requestAnimationFrame(() => requestAnimationFrame(() => cb()));
+  requestAnimationFrame(() => requestAnimationFrame(cb));
 };

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

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

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

@@ -22,26 +22,27 @@ export const getLoadState = (timestamp: number): LoadState => {
     // If the `readyState` is 'loading' there's no need to look at timestamps
     // since the timestamp has to be the current time or earlier.
     return 'loading';
-  } else {
-    const navigationEntry = getNavigationEntry();
-    if (navigationEntry) {
-      if (timestamp < navigationEntry.domInteractive) {
-        return 'loading';
-      } else if (
-        navigationEntry.domContentLoadedEventStart === 0 ||
-        timestamp < navigationEntry.domContentLoadedEventStart
-      ) {
-        // If the `domContentLoadedEventStart` timestamp has not yet been
-        // set, or if the given timestamp is less than that value.
-        return 'dom-interactive';
-      } else if (
-        navigationEntry.domComplete === 0 ||
-        timestamp < navigationEntry.domComplete
-      ) {
-        // If the `domComplete` timestamp has not yet been
-        // set, or if the given timestamp is less than that value.
-        return 'dom-content-loaded';
-      }
+  }
+  const navigationEntry = getNavigationEntry();
+  if (navigationEntry) {
+    if (timestamp < navigationEntry.domInteractive) {
+      return 'loading';
+    }
+    if (
+      navigationEntry.domContentLoadedEventStart === 0 ||
+      timestamp < navigationEntry.domContentLoadedEventStart
+    ) {
+      // If the `domContentLoadedEventStart` timestamp has not yet been
+      // set, or if the given timestamp is less than that value.
+      return 'dom-interactive';
+    }
+    if (
+      navigationEntry.domComplete === 0 ||
+      timestamp < navigationEntry.domComplete
+    ) {
+      // If the `domComplete` timestamp has not yet been
+      // set, or if the given timestamp is less than that value.
+      return 'dom-content-loaded';
     }
   }
   // If any of the above fail, default to loaded. This could really only

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

@@ -68,9 +68,8 @@ export const getVisibilityWatcher = () => {
     const firstVisibilityStateHiddenTime = !document.prerendering
       ? globalThis.performance
           .getEntriesByType('visibility-state')
-          .filter(
-            (e) => e.name === 'hidden' && e.startTime > activationStart,
-          )[0]?.startTime
+          .find((e) => e.name === 'hidden' && e.startTime >= activationStart)
+          ?.startTime
       : undefined;
     /* eslint-enable indent */
 

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

@@ -44,7 +44,7 @@ export const observe = <K extends keyof PerformanceEntryMap>(
         // Delay by a microtask to workaround a bug in Safari where the
         // callback is invoked immediately, rather than in a separate task.
         // See: https://github.com/GoogleChrome/web-vitals/issues/277
-        Promise.resolve().then(() => {
+        queueMicrotask(() => {
           callback(list.getEntries() as PerformanceEntryMap[K]);
         });
       });

package/front_end/third_party/web-vitals/package/src/lib/polyfills/interactionCountPolyfill.ts

@@ -18,7 +18,7 @@ import {observe} from '../observe.js';
 
 declare global {
   interface Performance {
-    interactionCount: number;
+    readonly interactionCount: number;
   }
 }
 
@@ -52,7 +52,7 @@ let po: PerformanceObserver | undefined;
  * or the polyfill estimate in this module.
  */
 export const getInteractionCount = () => {
-  return po ? interactionCountEstimate : performance.interactionCount ?? 0;
+  return po ? interactionCountEstimate : (performance.interactionCount ?? 0);
 };
 
 /**
@@ -62,8 +62,6 @@ export const initInteractionCountPolyfill = () => {
   if ('interactionCount' in performance || po) return;
 
   po = observe('event', updateEstimate, {
-    type: 'event',
-    buffered: true,
     durationThreshold: 0,
   } as PerformanceObserverInit);
 };

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

@@ -16,7 +16,7 @@
 
 export const whenActivated = (callback: () => void) => {
   if (document.prerendering) {
-    addEventListener('prerenderingchange', () => callback(), true);
+    addEventListener('prerenderingchange', callback, true);
   } else {
     callback();
   }

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

@@ -22,19 +22,25 @@ import {runOnce} from './runOnce.js';
  */
 export const whenIdleOrHidden = (cb: () => void) => {
   const rIC = globalThis.requestIdleCallback || setTimeout;
+  const cIC = globalThis.cancelIdleCallback || clearTimeout;
 
   // If the document is hidden, run the callback immediately, otherwise
   // race an idle callback with the next `visibilitychange` event.
   if (document.visibilityState === 'hidden') {
     cb();
   } else {
-    cb = runOnce(cb);
-    addEventListener('visibilitychange', cb, {once: true, capture: true});
-    rIC(() => {
-      cb();
-      // Remove the above event listener since no longer required.
-      // See: https://github.com/GoogleChrome/web-vitals/issues/622
-      removeEventListener('visibilitychange', cb, {capture: true});
+    const wrappedCb = runOnce(cb);
+
+    let idleHandle = -1;
+    const onHidden = () => {
+      cIC(idleHandle);
+      wrappedCb();
+    };
+
+    addEventListener('visibilitychange', onHidden, {once: true, capture: true});
+    idleHandle = rIC(() => {
+      removeEventListener('visibilitychange', onHidden, {capture: true});
+      wrappedCb();
     });
   }
 };

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

@@ -104,7 +104,7 @@ export const onCLS = (
             opts!.reportAllChanges,
           );
 
-          doubleRAF(() => report());
+          doubleRAF(report);
         });
 
         // Queue a task to report (if nothing else triggers a report first).

package/front_end/third_party/web-vitals/package/src/types/inp.ts

@@ -27,6 +27,7 @@ export interface INPReportOpts extends ReportOpts {
 
 export interface INPAttributionReportOpts extends AttributionReportOpts {
   durationThreshold?: number;
+  includeProcessedEventEntries?: boolean;
   onEachInteraction?: (interaction: INPMetricWithAttribution) => void;
 }
 
@@ -95,6 +96,9 @@ export interface INPAttribution {
   /**
    * An array of Event Timing entries that were processed within the same
    * animation frame as the INP candidate interaction.
+   * This array can be quite large so it will be empty if the
+   * `includeProcessedEventEntries` configuration option is set to `false` to
+   * conserve memory if these entries are not required.
    */
   processedEventEntries: PerformanceEventTiming[];
   /**

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

@@ -15,7 +15,6 @@
  */
 
 export * from './types/base.js';
-export * from './types/polyfills.js';
 
 export * from './types/cls.js';
 export * from './types/fcp.js';
@@ -61,7 +60,7 @@ declare global {
   // https://wicg.github.io/event-timing/#sec-performance-event-timing
   interface PerformanceEventTiming extends PerformanceEntry {
     duration: DOMHighResTimeStamp;
-    interactionId: number;
+    readonly interactionId: number;
   }
 
   // https://wicg.github.io/layout-instability/#sec-layout-shift-attribution