[RPP Observations] Add origin mapping table

Table:
https://screenshot.googleplex.com/94rENkKTqoxgXqa

Error message:
https://screenshot.googleplex.com/4m9Q34vTCCJ98AS

Bug: 353725216
Change-Id: I88aae7712d824d7a98845ae40e813541fcb536a4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5775242
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Adam Raine <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

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

@@ -314,6 +314,40 @@ describeWithMockConnection('CrUXManager', () => {
       assert.strictEqual(getFieldDataMock.firstCall.args[0], 'https://example.com/override');
     });
 
+    it('should use origin map if set', async () => {
+      target.setInspectedURL('http://localhost:8080/inspected?param' as Platform.DevToolsPath.UrlString);
+      cruxManager.getConfigSetting().set({
+        enabled: false,
+        override: '',
+        originMappings: [{
+          developmentOrigin: 'http://localhost:8080',
+          productionOrigin: 'https://example.com',
+        }],
+      });
+
+      await cruxManager.getFieldDataForCurrentPage();
+
+      assert.strictEqual(getFieldDataMock.callCount, 1);
+      assert.strictEqual(getFieldDataMock.firstCall.args[0], 'https://example.com/inspected');
+    });
+
+    it('should not use origin map if URL override is set', async () => {
+      target.setInspectedURL('http://localhost:8080/inspected?param' as Platform.DevToolsPath.UrlString);
+      cruxManager.getConfigSetting().set({
+        enabled: false,
+        override: 'https://google.com',
+        originMappings: [{
+          developmentOrigin: 'http://localhost:8080',
+          productionOrigin: 'https://example.com',
+        }],
+      });
+
+      await cruxManager.getFieldDataForCurrentPage();
+
+      assert.strictEqual(getFieldDataMock.callCount, 1);
+      assert.strictEqual(getFieldDataMock.firstCall.args[0], 'https://google.com');
+    });
+
     it('should use inspected URL if main document is unavailable', async () => {
       target.setInspectedURL('https://example.com/inspected' as Platform.DevToolsPath.UrlString);
 

front_end/models/crux-manager/CrUXManager.ts

@@ -69,9 +69,15 @@ export type PageResult = {
   [K in`${PageScope}-${DeviceScope}`]: CrUXResponse|null;
 };
 
+export interface OriginMapping {
+  developmentOrigin: string;
+  productionOrigin: string;
+}
+
 export interface ConfigSetting {
   enabled: boolean;
   override: string;
+  originMappings?: OriginMapping[];
 }
 
 let cruxManagerInstance: CrUXManager;
@@ -115,7 +121,7 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         useSessionStorage ? Common.Settings.SettingStorageType.Session : Common.Settings.SettingStorageType.Global;
 
     this.#configSetting = Common.Settings.Settings.instance().createSetting<ConfigSetting>(
-        'field-data', {enabled: false, override: ''}, storageTypeForConsent);
+        'field-data', {enabled: false, override: '', originMappings: []}, storageTypeForConsent);
 
     this.#configSetting.addChangeListener(() => {
       void this.#automaticRefresh();
@@ -172,6 +178,24 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     }
   }
 
+  #getMappedUrl(unmappedUrl: string): string {
+    try {
+      const unmapped = new URL(unmappedUrl);
+      const mappings = this.#configSetting.get().originMappings || [];
+      const mapping = mappings.find(m => m.developmentOrigin === unmapped.origin);
+      if (!mapping) {
+        return unmappedUrl;
+      }
+
+      const mapped = new URL(mapping.productionOrigin);
+      mapped.pathname = unmapped.pathname;
+
+      return mapped.href;
+    } catch {
+      return unmappedUrl;
+    }
+  }
+
   /**
    * In general, this function should use the main document URL
    * (i.e. the URL after all redirects but before SPA navigations)
@@ -182,7 +206,8 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
    * the main document URL cannot be found.
    */
   async getFieldDataForCurrentPage(): Promise<PageResult> {
-    const pageUrl = this.#configSetting.get().override || this.#mainDocumentUrl || await this.#getInspectedURL();
+    const pageUrl = this.#configSetting.get().override ||
+        this.#getMappedUrl(this.#mainDocumentUrl || await this.#getInspectedURL());
     return this.getFieldDataForPage(pageUrl);
   }
 

front_end/panels/timeline/components/BUILD.gn

@@ -48,6 +48,7 @@ devtools_module("components") {
     "../../../models/live-metrics:bundle",
     "../../../models/trace:bundle",
     "../../../services/trace_bounds:bundle",
+    "../../../ui/components/data_grid:bundle",
     "../../../ui/components/dialogs:bundle",
     "../../../ui/components/helpers:bundle",
     "../../../ui/components/icon_button:bundle",