chrome-devtools-frontend 1.0.1526630 → 1.0.1528866

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

@@ -13,37 +13,16 @@
  * See the License for the specific language governing permissions and
  * 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';
 const getLargestLayoutShiftEntry = (entries) => {
-    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) => {
-    return sources.find((s) => s.node && s.node.nodeType === 1) || sources[0];
-};
-const attributeCLS = (metric) => {
-    // Use an empty object if no other attribution has been set.
-    let attribution = {};
-    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 = Object.assign(metric, { attribution });
-    return metricWithAttribution;
+    return sources.find((s) => s.node?.nodeType === 1) || sources[0];
 };
 /**
  * Calculates the [CLS](https://web.dev/articles/cls) value for the current page and
@@ -66,7 +45,47 @@ const attributeCLS = (metric) => {
  * hidden. As a result, the `callback` function might be called multiple times
  * during the same page load._
  */
-export const onCLS = (onReport, opts) => {
+export const onCLS = (onReport, opts = {}) => {
+    // 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 = new WeakMap();
+    layoutShiftManager._onAfterProcessingUnexpectedShift = (entry) => {
+        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) => {
+        // Use an empty object if no other attribution has been set.
+        let attribution = {};
+        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 = Object.assign(metric, { attribution });
+        return metricWithAttribution;
+    };
     unattributedOnCLS((metric) => {
         const metricWithAttribution = attributeCLS(metric);
         onReport(metricWithAttribution);

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

@@ -1,8 +1,8 @@
-import { FCPMetricWithAttribution, ReportOpts } from '../types.js';
+import { FCPMetricWithAttribution, AttributionReportOpts } from '../types.js';
 /**
  * Calculates the [FCP](https://web.dev/articles/fcp) value for the current page and
  * calls the `callback` function once the value is ready, along with the
  * relevant `paint` performance entry used to determine the value. The reported
  * value is a `DOMHighResTimeStamp`.
  */
-export declare const onFCP: (onReport: (metric: FCPMetricWithAttribution) => void, opts?: ReportOpts) => void;
+export declare const onFCP: (onReport: (metric: FCPMetricWithAttribution) => void, opts?: AttributionReportOpts) => void;

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

@@ -26,7 +26,7 @@ const attributeFCP = (metric) => {
     };
     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;
             const ttfb = Math.max(0, navigationEntry.responseStart - activationStart);
@@ -39,7 +39,7 @@ const attributeFCP = (metric) => {
             };
         }
     }
-    // Use Object.assign to set property to keep tsc happy.
+    // Use `Object.assign()` to ensure the original metric object is returned.
     const metricWithAttribution = Object.assign(metric, { attribution });
     return metricWithAttribution;
 };
@@ -49,7 +49,7 @@ const attributeFCP = (metric) => {
  * relevant `paint` performance entry used to determine the value. The reported
  * value is a `DOMHighResTimeStamp`.
  */
-export const onFCP = (onReport, opts) => {
+export const onFCP = (onReport, opts = {}) => {
     unattributedOnFCP((metric) => {
         const metricWithAttribution = attributeFCP(metric);
         onReport(metricWithAttribution);

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

@@ -1,17 +1,17 @@
-import { INPMetric, INPMetricWithAttribution, ReportOpts } from '../types.js';
-export declare const interactionTargetMap: Map<number, Node>;
-export declare const attributeINP: (metric: INPMetric) => INPMetricWithAttribution;
+import { INPAttributionReportOpts, INPMetricWithAttribution } from '../types.js';
 /**
  * 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
  * the `event` performance entries reported for that interaction. The reported
  * value is a `DOMHighResTimeStamp`.
  *
- * A custom `durationThreshold` configuration option can optionally be passed to
- * control what `event-timing` entries are considered for INP reporting. The
- * default threshold is `40`, which means INP scores of less than 40 are
- * reported as 0. Note that this will not affect your 75th percentile INP value
- * unless that value is also less than 40 (well below the recommended
+ * A custom `durationThreshold` configuration option can optionally be passed
+ * to control what `event-timing` entries are considered for INP reporting. The
+ * default threshold is `40`, which means INP scores of less than 40 will not
+ * be reported. To avoid reporting no interactions in these cases, the library
+ * will fall back to the input delay of the first interaction. Note that this
+ * will not affect your 75th percentile INP value unless that value is also
+ * less than 40 (well below the recommended
  * [good](https://web.dev/articles/inp#what_is_a_good_inp_score) threshold).
  *
  * If the `reportAllChanges` configuration option is set to `true`, the
@@ -21,11 +21,11 @@ export declare const attributeINP: (metric: INPMetric) => INPMetricWithAttributi
  *
  * _**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
+ * it has 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._
  */
-export declare const onINP: (onReport: (metric: INPMetricWithAttribution) => void, opts?: ReportOpts) => void;
+export declare const onINP: (onReport: (metric: INPMetricWithAttribution) => void, opts?: INPAttributionReportOpts) => void;