chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

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

@@ -18,8 +18,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 {checkSoftNavsEnabled} from '../lib/softNavs.js';
 import {onLCP as unattributedOnLCP} from '../onLCP.js';
-import {
+import type {
   LCPAttribution,
   LCPMetric,
   LCPMetricWithAttribution,
@@ -50,6 +51,10 @@ export const onLCP = (
   const lcpEntryManager = initUnique(opts, LCPEntryManager);
   const lcpTargetMap: WeakMap<LargestContentfulPaint, string> = new WeakMap();
 
+  if (checkSoftNavsEnabled(opts)) {
+    lcpEntryManager._softNavigationEntryMap = new Map();
+  }
+
   lcpEntryManager._onBeforeProcessingEntry = (
     entry: LargestContentfulPaint,
   ) => {
@@ -94,14 +99,27 @@ export const onLCP = (
 
       // 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;
+      let navigationEntry;
+      let activationStart = 0;
+      let responseStart = 0;
 
-        const ttfb = Math.max(
-          0,
-          navigationEntry.responseStart - activationStart,
+      if (metric.navigationType !== 'soft-navigation') {
+        navigationEntry = getNavigationEntry();
+        activationStart = navigationEntry?.activationStart ?? 0;
+        responseStart = navigationEntry?.responseStart ?? 0;
+      } else {
+        // Set activationStart to the navigation start time
+        activationStart = metric.navigationStartTime || 0;
+        // Lookup the soft navigation entry. Do not use getEntriesByType since
+        // that is limited to the first 50 navigation entries due to buffer
+        // size.
+        navigationEntry = lcpEntryManager._softNavigationEntryMap?.get(
+          metric.navigationId,
         );
+      }
+
+      if (navigationEntry) {
+        const ttfb = Math.max(0, responseStart - activationStart);
 
         const lcpRequestStart = Math.max(
           ttfb,

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

@@ -15,7 +15,7 @@
  */
 
 import {onTTFB as unattributedOnTTFB} from '../onTTFB.js';
-import {
+import type {
   TTFBMetric,
   TTFBMetricWithAttribution,
   AttributionReportOpts,
@@ -23,6 +23,7 @@ import {
 } from '../types.js';
 
 const attributeTTFB = (metric: TTFBMetric): TTFBMetricWithAttribution => {
+  const navigationEntry = metric.entries[0];
   // Use a default object if no other attribution has been set.
   let attribution: TTFBAttribution = {
     waitingDuration: 0,
@@ -30,47 +31,52 @@ const attributeTTFB = (metric: TTFBMetric): TTFBMetricWithAttribution => {
     dnsDuration: 0,
     connectionDuration: 0,
     requestDuration: 0,
+    // There should only be one instance per TTFB metric
+    navigationEntry: navigationEntry,
   };
 
   if (metric.entries.length) {
-    const navigationEntry = metric.entries[0];
-    const activationStart = navigationEntry.activationStart || 0;
+    // If it's the hard nav, then can give attribution.
+    // Otherwise it's 0 so the defaults are fine.
+    if (navigationEntry instanceof PerformanceNavigationTiming) {
+      const activationStart = navigationEntry.activationStart || 0;
 
-    // Measure from workerStart or fetchStart so any service worker startup
-    // time is included in cacheDuration (which also includes other sw time
-    // anyway, that cannot be accurately split out cross-browser).
-    const waitEnd = Math.max(
-      (navigationEntry.workerStart || navigationEntry.fetchStart) -
-        activationStart,
-      0,
-    );
-    const dnsStart = Math.max(
-      navigationEntry.domainLookupStart - activationStart,
-      0,
-    );
-    const connectStart = Math.max(
-      navigationEntry.connectStart - activationStart,
-      0,
-    );
-    const connectEnd = Math.max(
-      navigationEntry.connectEnd - activationStart,
-      0,
-    );
+      // Measure from workerStart or fetchStart so any service worker startup
+      // time is included in cacheDuration (which also includes other sw time
+      // anyway, that cannot be accurately split out cross-browser).
+      const waitEnd = Math.max(
+        (navigationEntry.workerStart || navigationEntry.fetchStart || 0) -
+          activationStart,
+        0,
+      );
+      const dnsStart = Math.max(
+        navigationEntry.domainLookupStart - activationStart,
+        0,
+      );
+      const connectStart = Math.max(
+        navigationEntry.connectStart - activationStart,
+        0,
+      );
+      const connectEnd = Math.max(
+        navigationEntry.connectEnd - activationStart,
+        0,
+      );
 
-    attribution = {
-      waitingDuration: waitEnd,
-      cacheDuration: dnsStart - waitEnd,
-      // dnsEnd usually equals connectStart but use connectStart over dnsEnd
-      // for dnsDuration in case there ever is a gap.
-      dnsDuration: connectStart - dnsStart,
-      connectionDuration: connectEnd - connectStart,
-      // There is often a gap between connectEnd and requestStart. Attribute
-      // that to requestDuration so connectionDuration remains 0 for
-      // service worker controlled requests were connectStart and connectEnd
-      // are the same.
-      requestDuration: metric.value - connectEnd,
-      navigationEntry: navigationEntry,
-    };
+      attribution = {
+        waitingDuration: waitEnd,
+        cacheDuration: dnsStart - waitEnd,
+        // dnsEnd usually equals connectStart but use connectStart over dnsEnd
+        // for dnsDuration in case there ever is a gap.
+        dnsDuration: connectStart - dnsStart,
+        connectionDuration: connectEnd - connectStart,
+        // There is often a gap between connectEnd and requestStart. Attribute
+        // that to requestDuration so connectionDuration remains 0 for
+        // service worker controlled requests were connectStart and connectEnd
+        // are the same.
+        requestDuration: metric.value - connectEnd,
+        navigationEntry: navigationEntry,
+      };
+    }
   }
 
   // Use `Object.assign()` to ensure the original metric object is returned.

package/front_end/third_party/web-vitals/package/src/lib/{polyfills/getFirstHiddenTimePolyfill.ts → FCPEntryManager.ts}

@@ -1,5 +1,5 @@
 /*
- * Copyright 2020 Google LLC
+ * Copyright 2026 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,16 +14,6 @@
  * limitations under the License.
  */
 
-let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
-
-const onVisibilityChange = (event: Event) => {
-  if (document.visibilityState === 'hidden') {
-    firstHiddenTime = event.timeStamp;
-    removeEventListener('visibilitychange', onVisibilityChange, true);
-  }
-};
-
-// Note: do not add event listeners unconditionally (outside of polyfills).
-addEventListener('visibilitychange', onVisibilityChange, true);
-
-export const getFirstHiddenTime = () => firstHiddenTime;
+export class FCPEntryManager {
+  _softNavigationEntryMap?: Map<number, PerformanceSoftNavigation>;
+}

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

@@ -15,6 +15,7 @@
  */
 
 import {getInteractionCount} from './polyfills/interactionCountPolyfill.js';
+import type {Metric} from '../types.js';
 
 export interface Interaction {
   _latency: number;
@@ -70,12 +71,31 @@ export class InteractionManager {
    * Returns the estimated p98 longest interaction based on the stored
    * interaction candidates and the interaction count for the current page.
    */
-  _estimateP98LongestInteraction() {
+  _estimateP98LongestInteraction(navigationType: Metric['navigationType']) {
+    const interactionCountForNavigation = getInteractionCountForNavigation();
     const candidateInteractionIndex = Math.min(
       this._longestInteractionList.length - 1,
-      Math.floor(getInteractionCountForNavigation() / 50),
+      Math.floor(interactionCountForNavigation / 50),
     );
 
+    // If we have a non-zero interactionCountForNavigation but no
+    // candidateInteractionIndex, then it's below the 16ms limit
+    // so report a dummy 8ms interaction. This is only needed for
+    // soft-navs and bfcache restores as `first-input` handles the
+    // rest.
+    if (
+      interactionCountForNavigation &&
+      candidateInteractionIndex === -1 &&
+      (navigationType === 'soft-navigation' ||
+        navigationType === 'back-forward-cache')
+    ) {
+      return {
+        _latency: 8,
+        id: -1,
+        entries: [],
+      };
+    }
+
     return this._longestInteractionList[candidateInteractionIndex];
   }
 

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

@@ -16,6 +16,7 @@
 
 export class LCPEntryManager {
   _onBeforeProcessingEntry?: (entry: LargestContentfulPaint) => void;
+  _softNavigationEntryMap?: Map<number, PerformanceSoftNavigation>;
 
   _processEntry(entry: LargestContentfulPaint) {
     this._onBeforeProcessingEntry?.(entry);

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {MetricType, MetricRatingThresholds} from '../types.js';
+import type {MetricType, MetricRatingThresholds} from '../types.js';
 
 const getRating = (
   value: number,

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

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

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

@@ -15,7 +15,7 @@
  */
 
 import {getNavigationEntry} from './getNavigationEntry.js';
-import {LoadState} from '../types.js';
+import type {LoadState} from '../types.js';
 
 export const getLoadState = (timestamp: number): LoadState => {
   if (document.readyState === 'loading') {
@@ -23,22 +23,21 @@ export const getLoadState = (timestamp: number): LoadState => {
     // since the timestamp has to be the current time or earlier.
     return 'loading';
   }
-  const navigationEntry = getNavigationEntry();
-  if (navigationEntry) {
-    if (timestamp < navigationEntry.domInteractive) {
+
+  const hardNavEntry = getNavigationEntry();
+  if (hardNavEntry) {
+    if (timestamp < hardNavEntry.domInteractive) {
       return 'loading';
-    }
-    if (
-      navigationEntry.domContentLoadedEventStart === 0 ||
-      timestamp < navigationEntry.domContentLoadedEventStart
+    } else if (
+      hardNavEntry.domContentLoadedEventStart === 0 ||
+      timestamp < hardNavEntry.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
+    } else if (
+      hardNavEntry.domComplete === 0 ||
+      timestamp < hardNavEntry.domComplete
     ) {
       // If the `domComplete` timestamp has not yet been
       // set, or if the given timestamp is less than that value.

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

@@ -31,7 +31,7 @@ export const getSelector = (node: Node | null) => {
       const el: Element = node as Element;
       const part = el.id
         ? '#' + el.id
-        : [getName(el), ...Array.from(el.classList).sort()].join('.');
+        : [getName(el), ...Array.from(el.classList ?? []).sort()].join('.');
       if (sel.length + part.length > MAX_LEN - 1) {
         return sel || part;
       }

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

@@ -60,7 +60,10 @@ const onVisibilityUpdate = (event: Event) => {
   }
 };
 
-export const getVisibilityWatcher = () => {
+export const getVisibilityWatcher = (reset = false) => {
+  if (reset) {
+    firstHiddenTime = Infinity;
+  }
   if (firstHiddenTime < 0) {
     // Check if we have a previous hidden `visibility-state` performance entry.
     const activationStart = getActivationStart();

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

@@ -18,24 +18,33 @@ import {getBFCacheRestoreTime} from './bfcache.js';
 import {generateUniqueID} from './generateUniqueID.js';
 import {getActivationStart} from './getActivationStart.js';
 import {getNavigationEntry} from './getNavigationEntry.js';
-import {MetricType} from '../types.js';
+import type {MetricType} from '../types.js';
 
 export const initMetric = <MetricName extends MetricType['name']>(
   name: MetricName,
   value: number = -1,
+  navigationType?: MetricType['navigationType'],
+  navigationId: number = 0,
+  navigationInteractionId?: number,
+  navigationURL?: string,
+  navigationStartTime?: number,
 ) => {
-  const navEntry = getNavigationEntry();
-  let navigationType: MetricType['navigationType'] = 'navigate';
+  const hardNavEntry = getNavigationEntry();
+  const hardNavId = hardNavEntry?.navigationId || 0;
+  let _navigationType: MetricType['navigationType'] = 'navigate';
 
-  if (getBFCacheRestoreTime() >= 0) {
-    navigationType = 'back-forward-cache';
-  } else if (navEntry) {
+  if (navigationType) {
+    // If it was passed in, then use that
+    _navigationType = navigationType;
+  } else if (getBFCacheRestoreTime() >= 0) {
+    _navigationType = 'back-forward-cache';
+  } else if (hardNavEntry) {
     if (document.prerendering || getActivationStart() > 0) {
-      navigationType = 'prerender';
+      _navigationType = 'prerender';
     } else if (document.wasDiscarded) {
-      navigationType = 'restore';
-    } else if (navEntry.type) {
-      navigationType = navEntry.type.replace(
+      _navigationType = 'restore';
+    } else if (hardNavEntry.type) {
+      _navigationType = hardNavEntry.type.replace(
         /_/g,
         '-',
       ) as MetricType['navigationType'];
@@ -52,6 +61,10 @@ export const initMetric = <MetricName extends MetricType['name']>(
     delta: 0,
     entries,
     id: generateUniqueID(),
-    navigationType,
+    navigationType: _navigationType,
+    navigationId: navigationId || hardNavId,
+    navigationInteractionId: navigationInteractionId,
+    navigationURL: navigationURL || hardNavEntry?.name,
+    navigationStartTime: navigationStartTime || 0,
   };
 };

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

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-const instanceMap: WeakMap<object, unknown> = new WeakMap();
+const instanceMap: WeakMap<
+  new () => unknown,
+  WeakMap<object, unknown>
+> = new WeakMap();
 
 /**
  * A function that accepts and identity object and a class object and returns
@@ -22,8 +25,13 @@ const instanceMap: WeakMap<object, unknown> = new WeakMap();
  * identity object was previously used.
  */
 export function initUnique<T>(identityObj: object, ClassObj: new () => T): T {
-  if (!instanceMap.get(identityObj)) {
-    instanceMap.set(identityObj, new ClassObj());
+  let classInstances = instanceMap.get(ClassObj);
+  if (!classInstances) {
+    classInstances = new WeakMap();
+    instanceMap.set(ClassObj, classInstances);
   }
-  return instanceMap.get(identityObj)! as T;
+  if (!classInstances.get(identityObj)) {
+    classInstances.set(identityObj, new ClassObj());
+  }
+  return classInstances.get(identityObj)! as T;
 }

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

@@ -17,12 +17,14 @@
 interface PerformanceEntryMap {
   'event': PerformanceEventTiming[];
   'first-input': PerformanceEventTiming[];
+  'interaction-contentful-paint': InteractionContentfulPaint[];
   'layout-shift': LayoutShift[];
   'largest-contentful-paint': LargestContentfulPaint[];
   'long-animation-frame': PerformanceLongAnimationFrameTiming[];
   'paint': PerformancePaintTiming[];
   'navigation': PerformanceNavigationTiming[];
   'resource': PerformanceResourceTiming[];
+  'soft-navigation': PerformanceSoftNavigation[];
 }
 
 /**
@@ -34,21 +36,40 @@ interface PerformanceEntryMap {
  * try/catch to avoid errors in unsupporting browsers.
  */
 export const observe = <K extends keyof PerformanceEntryMap>(
-  type: K,
-  callback: (entries: PerformanceEntryMap[K]) => void,
+  types: K[],
+  callback: (entries: Array<PerformanceEntryMap[K][number]>) => void,
   opts: PerformanceObserverInit = {},
 ): PerformanceObserver | undefined => {
   try {
-    if (PerformanceObserver.supportedEntryTypes.includes(type)) {
+    const supportedTypes = types.filter((t) =>
+      PerformanceObserver.supportedEntryTypes.includes(t),
+    );
+    if (supportedTypes.length > 0) {
       const po = new PerformanceObserver((list) => {
         // 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
         queueMicrotask(() => {
-          callback(list.getEntries() as PerformanceEntryMap[K]);
+          const entries = list.getEntries();
+          // When observing more than one entry type, entries from different
+          // types can be delivered out of order, so sort by end time
+          // (startTime + duration) to ensure they're in the right order.
+          // See: https://github.com/w3c/performance-timeline/issues/224
+          if (supportedTypes.length > 1) {
+            entries.sort((a, b) => {
+              const scoreA = a.startTime + a.duration;
+              const scoreB = b.startTime + b.duration;
+
+              return scoreA - scoreB;
+            });
+          }
+          callback(entries as Array<PerformanceEntryMap[K][number]>);
         });
       });
-      po.observe({type, buffered: true, ...opts});
+
+      for (const t of supportedTypes) {
+        po.observe({type: t, buffered: true, ...opts});
+      }
       return po;
     }
   } catch {

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

@@ -61,7 +61,7 @@ export const getInteractionCount = () => {
 export const initInteractionCountPolyfill = () => {
   if ('interactionCount' in performance || po) return;
 
-  po = observe('event', updateEstimate, {
+  po = observe(['event'], updateEstimate, {
     durationThreshold: 0,
   } as PerformanceObserverInit);
 };

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

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2023 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 type {ReportOpts} from '../types.js';
+
+export const checkSoftNavsEnabled = (opts?: ReportOpts) => {
+  return (
+    PerformanceObserver.supportedEntryTypes.includes('soft-navigation') &&
+    // Older implementations expose the value as an attribute rather than the
+    // method. We only support the newer method as that was what was launched
+    // to stable unflagged.
+    typeof globalThis.PerformanceSoftNavigation?.prototype
+      ?.getLargestInteractionContentfulPaint === 'function' &&
+    opts &&
+    opts.reportSoftNavs
+  );
+};
+
+// Stores a soft navigation entry keyed by its navigationId, keeping only
+// the 2 most recent entries so the map cannot grow unbounded.
+export const storeSoftNavEntry = (
+  map: Map<number, PerformanceSoftNavigation>,
+  entry: PerformanceSoftNavigation,
+) => {
+  map.set(entry.navigationId!, entry);
+
+  // Clean up older entries to prevent memory leaks, keeping only
+  // the 2 most recent entries.
+  if (map.size > 2) {
+    const firstKey = map.keys().next().value;
+    if (firstKey !== undefined) {
+      map.delete(firstKey);
+    }
+  }
+};

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

@@ -21,6 +21,11 @@ import {runOnce} from './runOnce.js';
  * if the browser's visibility state is (or becomes) hidden.
  */
 export const whenIdleOrHidden = (cb: () => void) => {
+  // Cap the requestIdleCallback to 1 sec for very busy apps
+  // https://github.com/GoogleChrome/web-vitals/issues/754
+  // If not using rIC, then the setTimeout timeout should be 0
+  const timeout = 'requestIdleCallback' in globalThis ? 1000 : 0;
+
   const rIC = globalThis.requestIdleCallback || setTimeout;
   const cIC = globalThis.cancelIdleCallback || clearTimeout;
 
@@ -38,9 +43,12 @@ export const whenIdleOrHidden = (cb: () => void) => {
     };
 
     addEventListener('visibilitychange', onHidden, {once: true, capture: true});
-    idleHandle = rIC(() => {
-      removeEventListener('visibilitychange', onHidden, {capture: true});
-      wrappedCb();
-    });
+    idleHandle = rIC(
+      () => {
+        removeEventListener('visibilitychange', onHidden, {capture: true});
+        wrappedCb();
+      },
+      {timeout: timeout},
+    );
   }
 };