Add CrUX Vis link to live metrics view (perf panel landing page).

This adds a link to the CrUX Vis viewer
(https://cruxvis.withgoogle.com/) for field data to the live metrics
view.

To be consistent with PageSpeed Insights, the link is placed in
parenthesis after the collection period. E.g.,

Collection period: Sep 15, 2025 - Oct 12, 2025 (View more history)

Note that when the collection period begin / end aren't rendered, then
this "(View more history)" link also won't be rendered. Also, the actual
link will use the same "scope" that the user has made in the panel, that
is url-level vs. origin level data as well as device type.

To get this done I added a normalizedUrl field to the CrUXManager; this
makes it so that we use the same URL for CrUX vis that we're using to
make CrUX API requests.

Bug: 405467537
Change-Id: I63271c6eab7ba30c69b948a07954b09a6e807a8c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7040531
Commit-Queue: Johannes Henkel <johannes@chromium.org>
Reviewed-by: Connor Clark <cjamcl@chromium.org>
Auto-Submit: Johannes Henkel <johannes@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>

Author: powdercloud

front_end/models/crux-manager/CrUXManager.test.ts

@@ -146,6 +146,7 @@ describeWithMockConnection('CrUXManager', () => {
         'url-PHONE': mockResponse(),
         'url-TABLET': null,
         warnings: [],
+        normalizedUrl: 'https://example.com/',
       });
 
       assert.deepEqual(fetchBodies, [
@@ -261,6 +262,7 @@ describeWithMockConnection('CrUXManager', () => {
         'url-PHONE': null,
         'url-TABLET': null,
         warnings: [],
+        normalizedUrl: 'https://example.com/',
       });
     });
 
@@ -352,6 +354,7 @@ describeWithMockConnection('CrUXManager', () => {
         'url-PHONE': mockResponse({pageScope: 'url', deviceScope: 'PHONE'}),
         'url-TABLET': null,
         warnings: [],
+        normalizedUrl: '',
       });
     });
 
@@ -528,6 +531,7 @@ describeWithMockConnection('CrUXManager', () => {
         'url-PHONE': null,
         'url-TABLET': null,
         warnings: [],
+        normalizedUrl: '',
       });
     });
 

front_end/models/crux-manager/CrUXManager.ts

@@ -87,6 +87,7 @@ export interface CrUXResponse {
 
 export type PageResult = Record<`${PageScope}-${DeviceScope}`, CrUXResponse|null>&{
   warnings: string[],
+  normalizedUrl: string,
 };
 
 export interface OriginMapping {
@@ -194,10 +195,12 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       'url-PHONE': null,
       'url-TABLET': null,
       warnings: [],
+      normalizedUrl: '',
     };
 
     try {
       const normalizedUrl = this.#normalizeUrl(pageUrl);
+      pageResult.normalizedUrl = normalizedUrl.href;
       const promises: Array<Promise<void>> = [];
 
       for (const pageScope of pageScopeList) {
@@ -250,11 +253,11 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
    */
   async #getFieldDataForCurrentPage(): Promise<PageResult> {
     const currentUrl = this.#mainDocumentUrl || await this.#getInspectedURL();
-    const urlForCrux = this.#configSetting.get().overrideEnabled ? this.#configSetting.get().override || '' :
-                                                                   this.#getMappedUrl(currentUrl);
+    const normalizedUrl = this.#configSetting.get().overrideEnabled ? this.#configSetting.get().override || '' :
+                                                                      this.#getMappedUrl(currentUrl);
 
-    const result = await this.getFieldDataForPage(urlForCrux);
-    if (currentUrl !== urlForCrux) {
+    const result = await this.getFieldDataForPage(normalizedUrl);
+    if (currentUrl !== normalizedUrl) {
       result.warnings.push(i18nString(UIStrings.fieldOverrideWarning));
     }
     return result;

front_end/panels/timeline/components/FieldSettingsDialog.test.ts

@@ -79,6 +79,7 @@ describeWithMockConnection('FieldSettingsDialog', () => {
       'url-PHONE': null,
       'url-TABLET': null,
       warnings: [],
+      normalizedUrl: '',
     };
 
     cruxManager.getConfigSetting().set({enabled: false, override: ''});

front_end/panels/timeline/components/LiveMetricsView.test.ts

@@ -85,6 +85,10 @@ function getFieldMessage(view: Element): HTMLElement|null {
   return view.shadowRoot!.querySelector('#field-setup .field-data-message');
 }
 
+function getFieldDataHistoryLink(view: Element): HTMLElement|null {
+  return view.shadowRoot!.querySelector<HTMLElement>('#field-setup .field-data-message .local-field-link');
+}
+
 function getLiveMetricsTitle(view: Element): HTMLElement {
   // There may be multiple, but this should always be the first one.
   return view.shadowRoot!.querySelector('.live-metrics > .section-title')!;
@@ -709,6 +713,7 @@ describeWithMockConnection('LiveMetricsView', () => {
         'url-PHONE': null,
         'url-TABLET': null,
         warnings: [],
+        normalizedUrl: '',
       };
 
       sinon.stub(CrUXManager.CrUXManager.instance(), 'getFieldDataForPage').callsFake(async () => mockFieldData);
@@ -800,6 +805,33 @@ describeWithMockConnection('LiveMetricsView', () => {
       assert.match(fieldMessage!.textContent!, /Warning from crux/);
     });
 
+    it('Should display field data history link', async () => {
+      const view = renderLiveMetrics();
+
+      await RenderCoordinator.done();
+
+      mockFieldData['url-ALL'] = createMockFieldData();
+      mockFieldData.normalizedUrl = 'https://www.example.com/';
+
+      target.model(SDK.ResourceTreeModel.ResourceTreeModel)
+          ?.dispatchEventToListeners(SDK.ResourceTreeModel.Events.FrameNavigated, {
+            url: 'https://example.com',
+            isPrimaryFrame: () => true,
+          } as SDK.ResourceTreeModel.ResourceTreeFrame);
+
+      await RenderCoordinator.done();
+
+      const fieldLink = getFieldDataHistoryLink(view);
+      assert.include(fieldLink!.textContent, 'View history');
+      assert.strictEqual(
+          fieldLink!.getAttribute('href'),
+          'https://cruxvis.withgoogle.com/#/?' +
+              'view=cwvsummary&' +
+              'url=https%3A%2F%2Fwww.example.com%2F&' +
+              'identifier=url&' +
+              'device=ALL');
+    });
+
     it('should make initial request on render when crux is enabled', async () => {
       mockFieldData['url-ALL'] = createMockFieldData();
 

front_end/panels/timeline/components/LiveMetricsView.ts

@@ -58,6 +58,14 @@ const UIStrings = {
    * @description Title of a view that shows performance metrics from the local environment.
    */
   localMetrics: 'Local metrics',
+  /**
+   *@description Text for the link to the historical field data for the specific URL or origin that is shown. This link text appears in parenthesis after the collection period information in the field data dialog. The link opens the CrUX Vis viewer (https://cruxvis.withgoogle.com).
+   */
+  fieldDataHistoryLink: 'View history',
+  /**
+   *@description Tooltip for the CrUX Vis viewer link which shows the history of the field data for the specific URL or origin.
+   */
+  fieldDataHistoryTooltip: 'View field data history in CrUX Vis',
   /**
    * @description Accessible label for a section that logs user interactions and layout shifts. A layout shift is an event that shifts content in the layout of the page causing a jarring experience for the user.
    */
@@ -840,6 +848,32 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
+  #renderFieldDataHistoryLink(): Lit.LitTemplate {
+    if (!this.#cruxManager.getConfigSetting().get().enabled) {
+      return Lit.nothing;
+    }
+    const normalizedUrl = this.#cruxManager.pageResult?.normalizedUrl;
+    if (!normalizedUrl) {
+      return Lit.nothing;
+    }
+    const tmp = new URL('https://cruxvis.withgoogle.com/');
+    tmp.searchParams.set('view', 'cwvsummary');
+    tmp.searchParams.set('url', normalizedUrl);
+    // identifier must be 'origin' or 'url'.
+    const identifier = this.#cruxManager.fieldPageScope;
+    tmp.searchParams.set('identifier', identifier);
+    // device must be one 'PHONE', 'DESKTOP', 'TABLET', or 'ALL'.
+    const device = this.#cruxManager.getSelectedDeviceScope();
+    tmp.searchParams.set('device', device);
+    const cruxVis = `${tmp.origin}/#/${tmp.search}`;
+    return html`
+        (<x-link href=${cruxVis}
+                 class="local-field-link"
+                 title=${i18nString(UIStrings.fieldDataHistoryTooltip)}
+        >${i18nString(UIStrings.fieldDataHistoryLink)}</x-link>)
+      `;
+  }
+
   #renderCollectionPeriod(): Lit.LitTemplate {
     const range = this.#getCollectionPeriodRange();
 
@@ -851,11 +885,13 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       PH1: dateEl,
     });
 
+    const fieldDataHistoryLink = range ? this.#renderFieldDataHistoryLink() : Lit.nothing;
+
     const warnings = this.#cruxManager.pageResult?.warnings || [];
 
     return html`
       <div class="field-data-message">
-        <div>${message}</div>
+        <div>${message} ${fieldDataHistoryLink}</div>
         ${warnings.map(warning => html`
           <div class="field-data-warning">${warning}</div>
         `)}

front_end/panels/timeline/components/OriginMap.test.ts

@@ -114,6 +114,7 @@ describeWithMockConnection('OriginMap', () => {
       'url-PHONE': null,
       'url-TABLET': null,
       warnings: [],
+      normalizedUrl: '',
     };
 
     cruxManager.getConfigSetting().set({enabled: true, override: ''});