chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

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

@@ -1,4 +1,11 @@
-import type { LoadState, Metric } from './base.js';
+import type { LoadState, Metric, ReportOpts, AttributionReportOpts } from './base.js';
+export interface INPReportOpts extends ReportOpts {
+    durationThreshold?: number;
+}
+export interface INPAttributionReportOpts extends AttributionReportOpts {
+    durationThreshold?: number;
+    onEachInteraction?: (interaction: INPMetricWithAttribution) => void;
+}
 /**
  * An INP-specific version of the Metric object.
  */
@@ -6,6 +13,21 @@ export interface INPMetric extends Metric {
     name: 'INP';
     entries: PerformanceEventTiming[];
 }
+export interface INPLongestScriptSummary {
+    /**
+     * The longest Long Animation Frame script entry that intersects the INP
+     * interaction.
+     */
+    entry: PerformanceScriptTiming;
+    /**
+     * The INP subpart where the longest script ran.
+     */
+    subpart: 'input-delay' | 'processing-duration' | 'presentation-delay';
+    /**
+     * The amount of time the longest script intersected the INP duration.
+     */
+    intersectingDuration: number;
+}
 /**
  * An object containing potentially-helpful debugging information that
  * can be sent along with the INP value for the current page visit in order
@@ -13,37 +35,21 @@ export interface INPMetric extends Metric {
  */
 export interface INPAttribution {
     /**
-     * A selector identifying the element that the user first interacted with
-     * as part of the frame where the INP candidate interaction occurred.
-     * If this value is an empty string, that generally means the element was
-     * removed from the DOM after the interaction.
+     * By default, a selector identifying the element that the user first
+     * interacted with as part of the frame where the INP candidate interaction
+     * occurred. If this value is an empty string, that generally means the
+     * element was removed from the DOM after the interaction. If the
+     * `generateTarget` configuration option was passed, then this will instead
+     * be the return value of that function, falling back to the default if that
+     * returns null or undefined.
      */
     interactionTarget: string;
-    /**
-     * A reference to the HTML element identified by `interactionTargetSelector`.
-     * NOTE: for attribution purpose, a selector identifying the element is
-     * typically more useful than the element itself. However, the element is
-     * also made available in case additional context is needed.
-     */
-    interactionTargetElement: Node | undefined;
     /**
      * The time when the user first interacted during the frame where the INP
      * candidate interaction occurred (if more than one interaction occurred
      * within the frame, only the first time is reported).
      */
     interactionTime: DOMHighResTimeStamp;
-    /**
-     * The best-guess timestamp of the next paint after the interaction.
-     * In general, this timestamp is the same as the `startTime + duration` of
-     * the event timing entry. However, since `duration` values are rounded to
-     * the nearest 8ms, it can sometimes appear that the paint occurred before
-     * processing ended (which cannot happen). This value clamps the paint time
-     * so it's always after `processingEnd` from the Event Timing API and
-     * `renderStart` from the Long Animation Frame API (where available).
-     * It also averages the duration values for all entries in the same
-     * animation frame, which should be closer to the "real" value.
-     */
-    nextPaintTime: DOMHighResTimeStamp;
     /**
      * The type of interaction, based on the event type of the `event` entry
      * that corresponds to the interaction (i.e. the first `event` entry
@@ -52,20 +58,19 @@ export interface INPAttribution {
      * and for "keydown" or "keyup" events this will be "keyboard".
      */
     interactionType: 'pointer' | 'keyboard';
+    /**
+     * The best-guess timestamp of the next paint after the interaction.
+     * In general, this timestamp is the same as the `startTime + duration` of
+     * the event timing entry. However, since duration values are rounded to the
+     * nearest 8ms (and can be rounded down), this value is clamped to always be
+     * reported after the processing times.
+     */
+    nextPaintTime: DOMHighResTimeStamp;
     /**
      * An array of Event Timing entries that were processed within the same
      * animation frame as the INP candidate interaction.
      */
     processedEventEntries: PerformanceEventTiming[];
-    /**
-     * If the browser supports the Long Animation Frame API, this array will
-     * include any `long-animation-frame` entries that intersect with the INP
-     * candidate interaction's `startTime` and the `processingEnd` time of the
-     * last event processed within that animation frame. If the browser does not
-     * support the Long Animation Frame API or no `long-animation-frame` entries
-     * are detect, this array will be empty.
-     */
-    longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[];
     /**
      * The time from when the user interacted with the page until when the
      * browser was first able to start processing event listeners for that
@@ -94,6 +99,48 @@ export interface INPAttribution {
      * (e.g. usually in the `dom-interactive` phase) it can result in long delays.
      */
     loadState: LoadState;
+    /**
+     * If the browser supports the Long Animation Frame API, this array will
+     * include any `long-animation-frame` entries that intersect with the INP
+     * candidate interaction's `startTime` and the `processingEnd` time of the
+     * last event processed within that animation frame. If the browser does not
+     * support the Long Animation Frame API or no `long-animation-frame` entries
+     * are detected, this array will be empty.
+     */
+    longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[];
+    /**
+     * Summary information about the longest script entry intersecting the INP
+     * duration. Note, only script entries above 5 milliseconds are reported by
+     * the Long Animation Frame API.
+     */
+    longestScript?: INPLongestScriptSummary;
+    /**
+     * The total duration of Long Animation Frame scripts that intersect the INP
+     * duration excluding any forced style and layout (that is included in
+     * totalStyleAndLayout). Note, this is limited to scripts > 5 milliseconds.
+     */
+    totalScriptDuration?: number;
+    /**
+     * The total style and layout duration from any Long Animation Frames
+     * intersecting the INP interaction. This includes any end-of-frame style and
+     * layout duration + any forced style and layout duration.
+     */
+    totalStyleAndLayoutDuration?: number;
+    /**
+     * The off main-thread presentation delay from the end of the last Long
+     * Animation Frame (where available) until the INP end point.
+     */
+    totalPaintDuration?: number;
+    /**
+     * The total unattributed time not included in any of the previous totals.
+     * This includes scripts < 5 milliseconds and other timings not attributed
+     * by Long Animation Frame (including when a frame is < 50ms and so has no
+     * Long Animation Frame).
+     * When no Long Animation Frames are present this will be undefined, rather
+     * than everything being unattributed to make it clearer when it's expected
+     * to be small.
+     */
+    totalUnattributedDuration?: number;
 }
 /**
  * An INP-specific version of the Metric object with attribution.

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

@@ -13,9 +13,13 @@ export interface LCPMetric extends Metric {
  */
 export interface LCPAttribution {
     /**
-     * The element corresponding to the largest contentful paint for the page.
+     * By default, a selector identifying the element corresponding to the
+     * largest contentful paint for the page. If the `generateTarget`
+     * configuration option was passed, then this will instead be the return
+     * value of that function, falling back to the default if that returns null
+     * or undefined.
      */
-    element?: string;
+    target?: string;
     /**
      * The URL (if applicable) of the LCP image resource. If the LCP element
      * is a text node, this value will not be set.

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

@@ -2,7 +2,6 @@ export * from './types/base.js';
 export * from './types/polyfills.js';
 export * from './types/cls.js';
 export * from './types/fcp.js';
-export * from './types/fid.js';
 export * from './types/inp.js';
 export * from './types/lcp.js';
 export * from './types/ttfb.js';
@@ -30,7 +29,7 @@ declare global {
         interactionId: number;
     }
     interface LayoutShiftAttribution {
-        node?: Node;
+        node: Node | null;
         previousRect: DOMRectReadOnly;
         currentRect: DOMRectReadOnly;
     }
@@ -47,8 +46,33 @@ declare global {
         readonly url: string;
         readonly element: Element | null;
     }
+    export type ScriptInvokerType = 'classic-script' | 'module-script' | 'event-listener' | 'user-callback' | 'resolve-promise' | 'reject-promise';
+    export type ScriptWindowAttribution = 'self' | 'descendant' | 'ancestor' | 'same-page' | 'other';
+    interface PerformanceScriptTiming extends PerformanceEntry {
+        readonly startTime: DOMHighResTimeStamp;
+        readonly duration: DOMHighResTimeStamp;
+        readonly name: string;
+        readonly entryType: string;
+        readonly invokerType: ScriptInvokerType;
+        readonly invoker: string;
+        readonly executionStart: DOMHighResTimeStamp;
+        readonly sourceURL: string;
+        readonly sourceFunctionName: string;
+        readonly sourceCharPosition: number;
+        readonly pauseDuration: DOMHighResTimeStamp;
+        readonly forcedStyleAndLayoutDuration: DOMHighResTimeStamp;
+        readonly window?: Window;
+        readonly windowAttribution: ScriptWindowAttribution;
+    }
     interface PerformanceLongAnimationFrameTiming extends PerformanceEntry {
-        renderStart: DOMHighResTimeStamp;
-        duration: DOMHighResTimeStamp;
+        readonly startTime: DOMHighResTimeStamp;
+        readonly duration: DOMHighResTimeStamp;
+        readonly name: string;
+        readonly entryType: string;
+        readonly renderStart: DOMHighResTimeStamp;
+        readonly styleAndLayoutStart: DOMHighResTimeStamp;
+        readonly blockingDuration: DOMHighResTimeStamp;
+        readonly firstUIEventTimestamp: DOMHighResTimeStamp;
+        readonly scripts: PerformanceScriptTiming[];
     }
 }

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

@@ -17,7 +17,6 @@ export * from './types/base.js';
 export * from './types/polyfills.js';
 export * from './types/cls.js';
 export * from './types/fcp.js';
-export * from './types/fid.js';
 export * from './types/inp.js';
 export * from './types/lcp.js';
 export * from './types/ttfb.js';

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

@@ -1,6 +1,6 @@
 {
   "name": "web-vitals",
-  "version": "4.2.4",
+  "version": "5.1.0",
   "description": "Easily measure performance metrics in JavaScript",
   "type": "module",
   "typings": "dist/modules/index.d.ts",
@@ -31,10 +31,6 @@
       "types": "./dist/modules/onFCP.d.ts",
       "default": "./dist/modules/onFCP.js"
     },
-    "./onFID.js": {
-      "types": "./dist/modules/onFID.d.ts",
-      "default": "./dist/modules/onFID.js"
-    },
     "./onINP.js": {
       "types": "./dist/modules/onINP.d.ts",
       "default": "./dist/modules/onINP.js"
@@ -55,10 +51,6 @@
       "types": "./dist/modules/attribution/onFCP.d.ts",
       "default": "./dist/modules/attribution/onFCP.js"
     },
-    "./attribution/onFID.js": {
-      "types": "./dist/modules/attribution/onFID.d.ts",
-      "default": "./dist/modules/attribution/onFID.js"
-    },
     "./attribution/onINP.js": {
       "types": "./dist/modules/attribution/onINP.d.ts",
       "default": "./dist/modules/attribution/onINP.js"
@@ -92,6 +84,9 @@
     "release:major": "npm version major -m 'Release v%s' && npm publish",
     "release:minor": "npm version minor -m 'Release v%s' && npm publish",
     "release:patch": "npm version patch -m 'Release v%s' && npm publish",
+    "release:alpha": "npm version prerelease --preid=alpha -m 'Release v%s' && npm publish --tag next",
+    "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:server": "node test/server.js",
@@ -110,7 +105,6 @@
     "Core Web Vitals",
     "CLS",
     "FCP",
-    "FID",
     "INP",
     "LCP",
     "TTFB"

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

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

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

@@ -14,51 +14,24 @@
  * limitations under the License.
  */
 
+import {LayoutShiftManager} from '../lib/LayoutShiftManager.js';
 import {getLoadState} from '../lib/getLoadState.js';
 import {getSelector} from '../lib/getSelector.js';
+import {initUnique} from '../lib/initUnique.js';
 import {onCLS as unattributedOnCLS} from '../onCLS.js';
 import {
   CLSAttribution,
   CLSMetric,
   CLSMetricWithAttribution,
-  ReportOpts,
+  AttributionReportOpts,
 } from '../types.js';
 
 const getLargestLayoutShiftEntry = (entries: LayoutShift[]) => {
-  return entries.reduce((a, b) => (a && a.value > b.value ? a : b));
+  return entries.reduce((a, b) => (a.value > b.value ? a : b));
 };
 
 const getLargestLayoutShiftSource = (sources: LayoutShiftAttribution[]) => {
-  return sources.find((s) => s.node && s.node.nodeType === 1) || sources[0];
-};
-
-const attributeCLS = (metric: CLSMetric): CLSMetricWithAttribution => {
-  // Use an empty object if no other attribution has been set.
-  let attribution: CLSAttribution = {};
-
-  if (metric.entries.length) {
-    const largestEntry = getLargestLayoutShiftEntry(metric.entries);
-    if (largestEntry && largestEntry.sources && largestEntry.sources.length) {
-      const largestSource = getLargestLayoutShiftSource(largestEntry.sources);
-      if (largestSource) {
-        attribution = {
-          largestShiftTarget: getSelector(largestSource.node),
-          largestShiftTime: largestEntry.startTime,
-          largestShiftValue: largestEntry.value,
-          largestShiftSource: largestSource,
-          largestShiftEntry: largestEntry,
-          loadState: getLoadState(largestEntry.startTime),
-        };
-      }
-    }
-  }
-
-  // Use Object.assign to set property to keep tsc happy.
-  const metricWithAttribution: CLSMetricWithAttribution = Object.assign(
-    metric,
-    {attribution},
-  );
-  return metricWithAttribution;
+  return sources.find((s) => s.node?.nodeType === 1) || sources[0];
 };
 
 /**
@@ -84,8 +57,60 @@ const attributeCLS = (metric: CLSMetric): CLSMetricWithAttribution => {
  */
 export const onCLS = (
   onReport: (metric: CLSMetricWithAttribution) => void,
-  opts?: ReportOpts,
+  opts: AttributionReportOpts = {},
 ) => {
+  // Clone the opts object to ensure it's unique, so we can initialize a
+  // single instance of the `LayoutShiftManager` class that's shared only with
+  // this function invocation and the `unattributedOnCLS()` invocation below
+  // (which is passed the same `opts` object).
+  opts = Object.assign({}, opts);
+
+  const layoutShiftManager = initUnique(opts, LayoutShiftManager);
+  const layoutShiftTargetMap: WeakMap<LayoutShiftAttribution, string> =
+    new WeakMap();
+
+  layoutShiftManager._onAfterProcessingUnexpectedShift = (
+    entry: LayoutShift,
+  ) => {
+    if (entry?.sources?.length) {
+      const largestSource = getLargestLayoutShiftSource(entry.sources);
+      const node = largestSource?.node;
+      if (node) {
+        const customTarget = opts.generateTarget?.(node) ?? getSelector(node);
+        layoutShiftTargetMap.set(largestSource, customTarget);
+      }
+    }
+  };
+
+  const attributeCLS = (metric: CLSMetric): CLSMetricWithAttribution => {
+    // Use an empty object if no other attribution has been set.
+    let attribution: CLSAttribution = {};
+
+    if (metric.entries.length) {
+      const largestEntry = getLargestLayoutShiftEntry(metric.entries);
+      if (largestEntry?.sources?.length) {
+        const largestSource = getLargestLayoutShiftSource(largestEntry.sources);
+        if (largestSource) {
+          attribution = {
+            largestShiftTarget: layoutShiftTargetMap.get(largestSource),
+            largestShiftTime: largestEntry.startTime,
+            largestShiftValue: largestEntry.value,
+            largestShiftSource: largestSource,
+            largestShiftEntry: largestEntry,
+            loadState: getLoadState(largestEntry.startTime),
+          };
+        }
+      }
+    }
+
+    // Use `Object.assign()` to ensure the original metric object is returned.
+    const metricWithAttribution: CLSMetricWithAttribution = Object.assign(
+      metric,
+      {attribution},
+    );
+    return metricWithAttribution;
+  };
+
   unattributedOnCLS((metric: CLSMetric) => {
     const metricWithAttribution = attributeCLS(metric);
     onReport(metricWithAttribution);

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

@@ -22,7 +22,7 @@ import {
   FCPAttribution,
   FCPMetric,
   FCPMetricWithAttribution,
-  ReportOpts,
+  AttributionReportOpts,
 } from '../types.js';
 
 const attributeFCP = (metric: FCPMetric): FCPMetricWithAttribution => {
@@ -35,7 +35,7 @@ const attributeFCP = (metric: FCPMetric): FCPMetricWithAttribution => {
 
   if (metric.entries.length) {
     const navigationEntry = getNavigationEntry();
-    const fcpEntry = metric.entries[metric.entries.length - 1];
+    const fcpEntry = metric.entries.at(-1);
 
     if (navigationEntry) {
       const activationStart = navigationEntry.activationStart || 0;
@@ -51,7 +51,7 @@ const attributeFCP = (metric: FCPMetric): FCPMetricWithAttribution => {
     }
   }
 
-  // Use Object.assign to set property to keep tsc happy.
+  // Use `Object.assign()` to ensure the original metric object is returned.
   const metricWithAttribution: FCPMetricWithAttribution = Object.assign(
     metric,
     {attribution},
@@ -67,7 +67,7 @@ const attributeFCP = (metric: FCPMetric): FCPMetricWithAttribution => {
  */
 export const onFCP = (
   onReport: (metric: FCPMetricWithAttribution) => void,
-  opts?: ReportOpts,
+  opts: AttributionReportOpts = {},
 ) => {
   unattributedOnFCP((metric: FCPMetric) => {
     const metricWithAttribution = attributeFCP(metric);