chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/timeline/timeline-meta.ts

@@ -74,6 +74,58 @@ const UIStrings = {
    * @description Title of a setting under the Performance category in Settings
    */
   timelineInvalidationTracking: 'Invalidation tracking',
+  /**
+   * @description Title of a setting in Performance panel.
+   */
+  disableJavascriptSamples: 'Disable JavaScript samples',
+  /**
+   * @description Title of a setting in Performance panel.
+   */
+  enableAdvancedPaint: 'Enable advanced paint instrumentation (slow)',
+  /**
+   * @description Title of a setting in Performance panel.
+   */
+  enableSelectorStats: 'Enable CSS selector stats (slow)',
+  /**
+   * @description Title of a setting in Performance panel.
+   */
+  screenshotCapture: 'Screenshot capture',
+  /**
+   * @description Title of a setting in Performance panel.
+   */
+  screenshots: 'Screenshots',
+  /**
+   * @description Title of a setting in Performance panel.
+   */
+  memory: 'Memory',
+  /**
+   * @description Title of a setting in Performance panel.
+   */
+  dimThirdParties: 'Dim 3rd parties',
+  /**
+   * @description Title of a setting in Performance panel.
+   */
+  showCustomtracks: 'Show custom tracks',
+  /**
+   * @description Title of a setting in Performance panel counters graph.
+   */
+  jsHeap: 'JS heap',
+  /**
+   * @description Title of a setting in Performance panel counters graph.
+   */
+  documents: 'Documents',
+  /**
+   * @description Title of a setting in Performance panel counters graph.
+   */
+  nodes: 'Nodes',
+  /**
+   * @description Title of a setting in Performance panel counters graph.
+   */
+  listeners: 'Listeners',
+  /**
+   * @description Title of a setting in Performance panel counters graph.
+   */
+  gpuMemory: 'GPU memory',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/timeline-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -469,3 +521,120 @@ Common.Revealer.registerRevealer({
     return new Timeline.TimelinePanel.ProfileFinishedRevealer();
   },
 });
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+  title: i18nLazyString(UIStrings.disableJavascriptSamples),
+  settingName: 'timeline-disable-js-sampling',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+  title: i18nLazyString(UIStrings.enableAdvancedPaint),
+  settingName: 'timeline-capture-layers-and-pictures',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+  title: i18nLazyString(UIStrings.enableSelectorStats),
+  settingName: 'timeline-capture-selector-stats',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+  title: i18nLazyString(UIStrings.screenshotCapture),
+  settingName: 'timeline-screenshot-capture-mode',
+  settingType: Common.Settings.SettingType.ENUM,
+  defaultValue: 'auto',
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.screenshots),
+  settingName: 'timeline-show-screenshots',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+  title: i18nLazyString(UIStrings.memory),
+  settingName: 'timeline-show-memory',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+  title: i18nLazyString(UIStrings.dimThirdParties),
+  settingName: 'timeline-dim-third-parties',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.showCustomtracks),
+  settingName: 'timeline-show-extension-data',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.jsHeap),
+  settingName: 'timeline-counters-graph-js-heap-size-used',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.documents),
+  settingName: 'timeline-counters-graph-documents',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.nodes),
+  settingName: 'timeline-counters-graph-nodes',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.listeners),
+  settingName: 'timeline-counters-graph-js-event-listeners',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.gpuMemory),
+  settingName: 'timeline-counters-graph-gpu-memory-used-kb',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});

package/front_end/panels/timeline/timelineFlameChartView.css

@@ -157,6 +157,11 @@
   top: unset;
   bottom: 0;
   height: 100px;
+
+  &.positioned-by-event {
+    top: 0;
+    bottom: unset;
+  }
 }
 
 .overlay-type-TIMINGS_MARKER {

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -341,7 +341,7 @@ function renderNewAuthenticatorSection(
               Protocol.WebAuthn.AuthenticatorTransport.Usb,
               Protocol.WebAuthn.AuthenticatorTransport.Ble,
               Protocol.WebAuthn.AuthenticatorTransport.Nfc,
-                ...(isCtap2 ? [Protocol.WebAuthn.AuthenticatorTransport.Internal] : [])
+                ...(isCtap2 ? [Protocol.WebAuthn.AuthenticatorTransport.Internal] : []),
             ].map(option => html`
                 <option value=${option} jslog=${VisualLogging.item(option).track({click: true})}
                         .selected=${options.transport === option}

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -40,28 +40,28 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 150,
-  header: 'What’s new in DevTools 150',
+  version: 151,
+  header: 'What’s new in DevTools 151',
   markdownLinks: [
     {
       key: 'devtools-for-agents',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-150/#devtools-for-agents',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-151/#devtools-for-agents',
     },
     {
       key: 'ai-assistance',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-150/#ai-assistance',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-151/#ai-assistance',
     },
     {
-      key: 'css-container-function',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-150/#css-container-function',
-    }
+      key: 'css-specificity',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-151/#css-specificity',
+    },
   ],
   videoLinks: [
     {
       description: 'See all highlights from Chrome 148-150',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-150' as Platform.DevToolsPath.UrlString,
+      link: 'https://www.youtube.com/watch?v=wBNCPp5gdqg' as Platform.DevToolsPath.UrlString,
       type: VideoType.WHATS_NEW,
     },
   ],
-  link: 'https://developer.chrome.com/blog/new-in-devtools-150/',
+  link: 'https://developer.chrome.com/blog/new-in-devtools-151/',
 };

package/front_end/panels/whats_new/resources/WNDT.md

@@ -1,15 +1,14 @@
 ### [DevTools for agents](devtools-for-agents)
 
-DevTools for agents 1.4 and later bring new experimental memory debugging tools,
-experimental TOON support for structured content output, and improved skill discovery.
+DevTools for agents 1.6 and later brings various improvements to the memory debugging tools,
+experimental GCF support as an alternative to JSON for token savings, and improved multi-page support.
 
 ### [AI assistance](ai-assistance)
 
-The agent walkthrough in the updated AI assistance panel now renders rich widgets
-for performance network tracks, timeline event summaries, network requests,
-syntax-highlighted source code, and inspected file lists.
+AI assistance continues to evolve with additional Network track and Network requests list
+widgets for the agent walkthrough, as well as support for table rendering in responses.
 
-### [@container and @function](css-container-function)
+### [CSS specificity breakdowns](css-specificity)
 
-You can now directly edit `@container` and `@function`
-rules within the Styles tab, allowing for seamless experimentation.
+Hovering over selector names in the Styles tab now shows a tooltip breaking down
+how each part contributes to the (a, b, c) specificity calculation.

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 0710d8bfc99da895041ed5684b55ab2f262173b6
+Revision: 8e5dd02f11d866b080045c734fbb8cbb99e9064c
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

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

@@ -1,10 +1,10 @@
 Name: Web Vitals
 Short Name: Web Vitals
 URL: https://github.com/GoogleChrome/web-vitals
-Version: 5.2.0
+Version: 6.0.0
 License: Apache-2.0
 License File: package/LICENSE
-Revision: 331486c02721e1d37835177ffc89589a580ba57e
+Revision: 67a9ddb4cf77f8d1cb2c877ccd870b9c821aa853
 Update Mechanism: Manual
 Security Critical: no
 Shipped: yes

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

@@ -28,7 +28,7 @@
 
 ## Overview
 
-The `web-vitals` library is a tiny (~2K, brotli'd), modular library for measuring all the [Web Vitals](https://web.dev/articles/vitals) metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report), [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/), [Search Console's Speed Report](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)).
+The `web-vitals` library is a tiny (~3K, brotli'd), modular library for measuring all the [Web Vitals](https://web.dev/articles/vitals) metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report), [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/), [Search Console's Speed Report](https://webmasters.googleblog.com/2019/11/search-console-speed-report.html)).
 
 The library supports all of the [Core Web Vitals](https://web.dev/articles/vitals#core_web_vitals) as well as a number of other metrics that are useful in diagnosing [real-user](https://web.dev/articles/user-centric-performance-metrics) performance issues.
 
@@ -210,7 +210,7 @@ In other cases, a metric callback may be called more than once:
 - 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.
+> Avoid calling the Web Vitals functions (e.g. `onCLS()`, `onINP()`, `onLCP()`) repeatedly per page load without a good reason. 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 increased memory overhead.
 
 ### Report the value on every change
 
@@ -252,6 +252,65 @@ onLCP(logDelta);
 
 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).
 
+### Report metrics for soft navigations
+
+When originally launched, Core Web Vitals are only tracked for full page navigations, which can affect how [Single Page Applications](https://web.dev/vitals-spa-faq/) that use so called "soft navigations" to update the browser URL and history outside of the normal browser's handling of this.
+
+The Chrome team have added a feature from Chrome 151 to enable [measuring these soft navigations](https://github.com/WICG/soft-navigations) and report on Core Web Vitals separately for them.
+
+A "soft navigation" is tracked automatically when the following three things happen:
+
+- A user interaction occurs
+- The URL changes
+- Something is painted to screen.
+
+For some sites, this definition may lead to false positives (that users would not really consider a "navigation"), or false negatives (where the user does consider a navigation to have happened despite not missing the above criteria). However, by having the browser define the soft navigation, rather than depending on SPA frameworks to call an API when happens, allows for soft navigations to be measured for existing SPA applications and also provides a more consistent experience across frameworks.
+
+Some important points to note:
+
+- TTFB is reported as 0, and not the time of the first network call (if any) after the soft navigation.
+- FCP and LCP are the first and largest contentful paints after the soft navigation. Elements that remain between soft navigations will not count since they are not repainted. This can lead to differences between measuring performance for a page from a soft navigation and a hard navigation.
+- INP is reset to measure only interactions after the the soft navigation.
+- CLS is reset to measure again separate to the first page.
+
+The metrics can be reported for Soft Navigations using the `reportSoftNavs: true` reporting option:
+
+```js
+import {
+  onCLS,
+  onINP,
+  onLCP,
+} from 'https://unpkg.com/web-vitals@soft-navs/dist/web-vitals.js?module';
+
+onCLS(console.log, {reportSoftNavs: true});
+onINP(console.log, {reportSoftNavs: true});
+onLCP(console.log, {reportSoftNavs: true});
+```
+
+Note that this will change the way the first page loads are measured as the metrics for the initial URL will be finalized once the first soft nav occurs.
+
+This will also lead to differences with browsers that support soft navigations (Chromium-based browsers on version 151+) and other browsers (that will not change reporting even with the `reportSoftNavs` flag).
+
+To measure both you need to register two callbacks:
+
+```js
+import {
+  onCLS,
+  onINP,
+  onLCP,
+} from 'https://unpkg.com/web-vitals@soft-navs/dist/web-vitals.js?module';
+
+onCLS(doTraditionalProcessing);
+onINP(doTraditionalProcessing);
+onLCP(doTraditionalProcessing);
+
+onCLS(doSoftNavProcessing, {reportSoftNavs: true});
+onINP(doSoftNavProcessing, {reportSoftNavs: true});
+onLCP(doSoftNavProcessing, {reportSoftNavs: true});
+```
+
+In both cases the `navigationURL` property will provide the URL the metrics are for. This should be used rather than assuming the current URL is the page URL, since metrics may be reported after the fact.
+
 ### Send the results to an analytics endpoint
 
 The following example measures each of the Core Web Vitals metrics and reports them to a hypothetical `/analytics` endpoint, as soon as each is ready to be sent.
@@ -267,6 +326,9 @@ function sendToAnalytics(metric) {
     value: metric.value,
     id: metric.id,
 
+    // Override the page location for soft nav support
+    page_location: navigationURL,
+
     // Include additional data as needed...
   });
 
@@ -300,6 +362,9 @@ function sendToGoogleAnalytics({name, delta, value, id}) {
     metric_value: value, // Optional.
     metric_delta: delta, // Optional.
 
+    // Override the page location as metrics can be reported late for soft navs
+    page_location: navigationURL,
+
     // OPTIONAL: any additional params or debug info here.
     // See: https://web.dev/articles/debug-performance-in-the-field
     // metric_rating: 'good' | 'needs-improvement' | 'poor',
@@ -339,6 +404,9 @@ function sendToGoogleAnalytics({name, delta, value, id, attribution}) {
     metric_id: id, // Needed to aggregate events.
     metric_value: value, // Optional.
     metric_delta: delta, // Optional.
+
+    // Override the page location for soft nav support
+    page_location: navigationURL,
   };
 
   switch (name) {
@@ -546,6 +614,7 @@ interface Metric {
    * - 'prerender': for pages that were prerendered.
    * - 'restore': for pages that were discarded by the browser and then
    * restored by the user.
+   * - 'soft-navigation': for soft navigations.
    */
   navigationType:
     | 'navigate'
@@ -553,7 +622,32 @@ interface Metric {
     | 'back-forward'
     | 'back-forward-cache'
     | 'prerender'
-    | 'restore';
+    | 'restore'
+    | 'soft-navigation';
+
+  /**
+   * The navigationId the metric happened for. This is particularly relevant for soft navigations where
+   * the metric may be reported for a previous URL.
+   */
+  navigationId: number;
+
+  /**
+   * For metrics specific to a soft navigation, the interactionId of the
+   * interaction that triggered that soft navigation.
+   */
+  navigationInteractionId?: number;
+
+  /**
+   * The navigation startTime the metric is based from. This is particularly
+   * relevant for soft navigations where time origin is not 0.
+   */
+  navigationStartTime?: number;
+
+  /**
+   * The navigation URL the metric happened for. This is particularly relevant for soft navigations where
+   * the metric may be reported for a previous URL.
+   */
+  navigationURL?: string;
 }
 ```
 
@@ -600,7 +694,7 @@ interface LCPMetric extends Metric {
 ```ts
 interface TTFBMetric extends Metric {
   name: 'TTFB';
-  entries: PerformanceNavigationTiming[];
+  entries: (PerformanceNavigationTiming | PeformanceSoftNavigation)[];
 }
 ```
 
@@ -660,6 +754,7 @@ Metric-specific subclasses:
 interface INPAttributionReportOpts extends AttributionReportOpts {
   durationThreshold?: number;
   includeProcessedEventEntries?: boolean;
+  reportSoftNavs?: boolean;
 }
 ```
 
@@ -684,10 +779,7 @@ The `LoadState` type is used in several of the metric [attribution objects](#att
  *   loading. This is equivalent to the corresponding `readyState` value.
  */
 type LoadState =
-  | 'loading'
-  | 'dom-interactive'
-  | 'dom-content-loaded'
-  | 'complete';
+  'loading' | 'dom-interactive' | 'dom-content-loaded' | 'complete';
 ```
 
 ### Functions:
@@ -815,7 +907,7 @@ In the [attribution build](#attribution-build) each of the metric functions has
    onLCP(sendToAnalytics, {generateTarget: customGenerateTarget});
    ```
 
-3. The `onINP` `AttributionReportOpts` supports an additional, optional, `includeProcessedEventEntries` configuration option. When set to `false`, the `event` performance entries will not be included in the `attribution` object to conserve memory if these entries are not needed. The default value is `true`.
+3. The `onINP` `AttributionReportOpts` supports an additional, optional, `includeProcessedEventEntries` configuration option. When set to `true`, _all_ the `event` performance entries processed during the INP duration will be included in the `attribution.processedEventEntries` object. This can include a lot of events and increased memory on very interactive or event-heavy pages. The default value is `false`. Regardless of this setting, the `entries` object will include the entries with an `interactionId` (which are the entries relevant for INP), but use this setting to include all entries (whether they have an `interactionId` or not) in `attribution.processedEventEntries` if you need more attribution information to identify delays to INP events.
 
 ```ts
 interface INPAttributionReportOpts extends AttributionReportOpts {
@@ -897,7 +989,7 @@ interface FCPAttribution {
    * general page load issues. This can be used to access `serverTiming` for example:
    * navigationEntry?.serverTiming
    */
-  navigationEntry?: PerformanceNavigationTiming;
+  navigationEntry?: PerformanceNavigationTiming | PerformanceSoftNavigation;
 }
 ```
 
@@ -913,35 +1005,43 @@ interface INPAttribution {
    * `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.
+   * This value may not be set in cases where the event duration was less than
+   * the browser minimum reporting threshold, and thus no entry was dispatched.
    */
-  interactionTarget: string;
+  interactionTarget?: string;
   /**
    * 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).
+   * This value may not be set in cases where the event duration was less than
+   * the browser minimum reporting threshold, and thus no entry was dispatched.
    */
-  interactionTime: DOMHighResTimeStamp;
+  interactionTime?: 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
    * containing an `interactionId` dispatched in a given animation frame).
    * For "pointerdown", "pointerup", or "click" events this will be "pointer",
    * and for "keydown" or "keyup" events this will be "keyboard".
+   * This value may not be set in cases where the event duration was less than
+   * the browser minimum reporting threshold, and thus no entry was dispatched.
    */
-  interactionType: 'pointer' | '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.
+   * This value may not be set in cases where the event duration was less than
+   * the browser minimum reporting threshold, and thus no entry was dispatched.
    */
-  nextPaintTime: DOMHighResTimeStamp;
+  nextPaintTime?: DOMHighResTimeStamp;
   /**
    * 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
+   * This array can be quite large so it will be empty unless the
+   * `includeProcessedEventEntries` configuration option is set to `true` to
    * conserve memory if these entries are not required.
    */
   processedEventEntries: PerformanceEventTiming[];
@@ -1084,7 +1184,7 @@ interface LCPAttribution {
    * general page load issues. This can be used to access `serverTiming` for example:
    * navigationEntry?.serverTiming
    */
-  navigationEntry?: PerformanceNavigationTiming;
+  navigationEntry?: PerformanceNavigationTiming | PerformanceSoftNavigation;
   /**
    * The `resource` entry for the LCP resource (if applicable), which is useful
    * for diagnosing resource load issues.
@@ -1134,7 +1234,7 @@ interface TTFBAttribution {
    * general page load issues. This can be used to access `serverTiming` for
    * example: navigationEntry?.serverTiming
    */
-  navigationEntry?: PerformanceNavigationTiming;
+  navigationEntry?: PerformanceNavigationTiming | PerformanceSoftNavigation;
 }
 ```
 
@@ -1142,13 +1242,14 @@ interface TTFBAttribution {
 
 The `web-vitals` code is tested in Chrome, Firefox, and Safari. In addition, all JavaScript features used in the code are part of ([Baseline Widely Available](https://web.dev/baseline)), and thus should run without error in all versions of these browsers released within the last 30 months.
 
-However, some of the APIs required to capture these metrics (notable CLS) are currently only available in some browsers. The latest browser support for each function is as follows:
+However, some of the APIs required to capture these metrics (notable CLS and soft navigations) are currently only available in some browsers. The latest browser support for each function is as follows:
 
 - `onCLS()`: Chromium
 - `onFCP()`: Chromium, Firefox, Safari
 - `onINP()`: Chromium, Firefox, Safari
 - `onLCP()`: Chromium, Firefox, Safari
 - `onTTFB()`: Chromium, Firefox, Safari
+- Core Web Vitals for soft navigations: Chromium 151+
 
 ## Limitations
 

package/front_end/third_party/web-vitals/package/attribution.d.ts

@@ -0,0 +1,16 @@
+/*
+ Copyright 2022 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.
+*/
+
+export * from './dist/modules/attribution/index.js';

package/front_end/third_party/web-vitals/package/attribution.js

@@ -0,0 +1,18 @@
+/*
+ Copyright 2022 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.
+*/
+
+// Creates the `web-vitals/attribution` import in node-based bundlers.
+// This will not be needed when export maps are widely supported.
+export * from './dist/web-vitals.attribution.js';

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

@@ -1,4 +1,4 @@
-import { CLSMetricWithAttribution, AttributionReportOpts } from '../types.js';
+import type { CLSMetricWithAttribution, AttributionReportOpts } from '../types.js';
 /**
  * Calculates the [CLS](https://web.dev/articles/cls) value for the current page and
  * calls the `callback` function once the value is ready to be reported, along

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

@@ -1,8 +1,2 @@
-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`.
- */
+import type { FCPMetricWithAttribution, AttributionReportOpts } from '../types.js';
 export declare const onFCP: (onReport: (metric: FCPMetricWithAttribution) => void, opts?: AttributionReportOpts) => void;