[RPP] Display network recommendation in Perf panel toolbar

This required significant refactors to CrUXManager/LiveMetricView,
moving all the state to the CrUXManager so that it can also be
used from TimelinePanel.

Bug: 311438203
Change-Id: Ic67b4bf0362955dbbddf3df7a2cb2800daa3c12d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6044331
Auto-Submit: Connor Clark <[email protected]>
Reviewed-by: Adam Raine <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/models/crux-manager/BUILD.gn

@@ -12,6 +12,7 @@ devtools_module("crux-manager") {
   deps = [
     "../../core/common:bundle",
     "../../core/sdk:bundle",
+    "../emulation:bundle",
   ]
 }
 

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

@@ -6,12 +6,14 @@ import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import type * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as EmulationModel from '../../models/emulation/emulation.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 
 import * as CrUXManager from './crux-manager.js';
 
-function mockResponse(): CrUXManager.CrUXResponse {
+function mockResponse(scopes: {pageScope: CrUXManager.PageScope, deviceScope: CrUXManager.DeviceScope}|null = null):
+    CrUXManager.CrUXResponse {
   return {
     record: {
       key: {},
@@ -23,6 +25,8 @@ function mockResponse(): CrUXManager.CrUXResponse {
             {start: 4000, density: 0.2},
           ],
           percentiles: {p75: 1000},
+          // @ts-expect-error
+          testScopes: scopes,
         },
         cumulative_layout_shift: {
           histogram: [
@@ -31,6 +35,8 @@ function mockResponse(): CrUXManager.CrUXResponse {
             {start: 0.25, density: 0.8},
           ],
           percentiles: {p75: 0.25},
+          // @ts-expect-error
+          testScopes: scopes,
         },
       },
       collectionPeriod: {
@@ -60,6 +66,7 @@ describeWithMockConnection('CrUXManager', () => {
     cruxManager = CrUXManager.CrUXManager.instance({forceNew: true});
     mockFetch = sinon.stub(window, 'fetch');
     mockConsoleError = sinon.stub(console, 'error');
+    EmulationModel.DeviceModeModel.DeviceModeModel.instance({forceNew: true});
   });
 
   afterEach(() => {
@@ -307,13 +314,13 @@ describeWithMockConnection('CrUXManager', () => {
     beforeEach(() => {
       getFieldDataMock = sinon.stub(cruxManager, 'getFieldDataForPage');
       getFieldDataMock.resolves({
-        'origin-ALL': mockResponse(),
-        'origin-DESKTOP': mockResponse(),
-        'origin-PHONE': mockResponse(),
+        'origin-ALL': mockResponse({pageScope: 'origin', deviceScope: 'ALL'}),
+        'origin-DESKTOP': mockResponse({pageScope: 'origin', deviceScope: 'DESKTOP'}),
+        'origin-PHONE': mockResponse({pageScope: 'origin', deviceScope: 'PHONE'}),
         'origin-TABLET': null,
-        'url-ALL': mockResponse(),
-        'url-DESKTOP': mockResponse(),
-        'url-PHONE': mockResponse(),
+        'url-ALL': mockResponse({pageScope: 'url', deviceScope: 'ALL'}),
+        'url-DESKTOP': mockResponse({pageScope: 'url', deviceScope: 'DESKTOP'}),
+        'url-PHONE': mockResponse({pageScope: 'url', deviceScope: 'PHONE'}),
         'url-TABLET': null,
         warnings: [],
       });
@@ -413,6 +420,60 @@ describeWithMockConnection('CrUXManager', () => {
       assert.strictEqual(getFieldDataMock.callCount, 1);
       assert.strictEqual(getFieldDataMock.firstCall.args[0], 'https://example.com/awaitInspected');
     });
+
+    it('getSelectedFieldMetricData - should take from selected page scope', async () => {
+      await cruxManager.getFieldDataForCurrentPage();
+
+      let data: CrUXManager.MetricResponse|undefined;
+
+      cruxManager.fieldPageScope = 'origin';
+      data = cruxManager.getSelectedFieldMetricData('largest_contentful_paint');
+      assert.strictEqual(data?.percentiles?.p75, 1000);
+      // @ts-expect-error
+      assert.strictEqual(data?.testScopes.pageScope, 'origin');
+
+      cruxManager.fieldPageScope = 'url';
+      data = cruxManager.getSelectedFieldMetricData('largest_contentful_paint');
+      assert.strictEqual(data?.percentiles?.p75, 1000);
+      // @ts-expect-error
+      assert.strictEqual(data?.testScopes.pageScope, 'url');
+    });
+
+    it('should take from selected device scope', async () => {
+      await cruxManager.getFieldDataForCurrentPage();
+      cruxManager.fieldPageScope = 'url';
+
+      let data: CrUXManager.MetricResponse|undefined;
+
+      cruxManager.fieldDeviceOption = 'ALL';
+      data = cruxManager.getSelectedFieldMetricData('largest_contentful_paint');
+      assert.strictEqual(data?.percentiles?.p75, 1000);
+      // @ts-expect-error
+      assert.strictEqual(data?.testScopes?.deviceScope, 'ALL');
+
+      cruxManager.fieldDeviceOption = 'PHONE';
+      data = cruxManager.getSelectedFieldMetricData('largest_contentful_paint');
+      assert.strictEqual(data?.percentiles?.p75, 1000);
+      // @ts-expect-error
+      assert.strictEqual(data?.testScopes?.deviceScope, 'PHONE');
+    });
+
+    it('auto device option should chose based on emulation', async () => {
+      cruxManager.fieldDeviceOption = 'AUTO';
+      assert.strictEqual(cruxManager.getSelectedDeviceScope(), 'ALL');
+
+      await cruxManager.getFieldDataForCurrentPage();
+      assert.strictEqual(cruxManager.getSelectedDeviceScope(), 'DESKTOP');
+
+      for (const device of EmulationModel.EmulatedDevices.EmulatedDevicesList.instance().standard()) {
+        if (device.title === 'Moto G Power') {
+          EmulationModel.DeviceModeModel.DeviceModeModel.instance().emulate(
+              EmulationModel.DeviceModeModel.Type.Device, device, device.modes[0], 1);
+        }
+      }
+
+      assert.strictEqual(cruxManager.getSelectedDeviceScope(), 'PHONE');
+    });
   });
 
   describe('automatic refresh', () => {

front_end/models/crux-manager/CrUXManager.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as EmulationModel from '../../models/emulation/emulation.js';
 
 const UIStrings = {
   /**
@@ -26,6 +27,7 @@ export type StandardMetricNames = 'cumulative_layout_shift'|'first_contentful_pa
 export type MetricNames = StandardMetricNames|'form_factors';
 export type FormFactor = 'DESKTOP'|'PHONE'|'TABLET';
 export type DeviceScope = FormFactor|'ALL';
+export type DeviceOption = DeviceScope|'AUTO';
 export type PageScope = 'url'|'origin';
 export type ConnectionType = 'offline'|'slow-2G'|'2G'|'3G'|'4G';
 
@@ -114,6 +116,9 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #mainDocumentUrl?: string;
   #configSetting: Common.Settings.Setting<ConfigSetting>;
   #endpoint = DEFAULT_ENDPOINT;
+  #pageResult?: PageResult;
+  fieldDeviceOption: DeviceOption = 'AUTO';
+  fieldPageScope: PageScope = 'url';
 
   private constructor() {
     super();
@@ -139,7 +144,7 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         storageTypeForConsent);
 
     this.#configSetting.addChangeListener(() => {
-      void this.#automaticRefresh();
+      void this.refresh();
     });
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -156,6 +161,11 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return cruxManagerInstance;
   }
 
+  /** The most recent page result from the CrUX service. */
+  get pageResult(): PageResult|undefined {
+    return this.#pageResult;
+  }
+
   getConfigSetting(): Common.Settings.Setting<ConfigSetting> {
     return this.#configSetting;
   }
@@ -191,6 +201,7 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       }
 
       await Promise.all(promises);
+      this.#pageResult = pageResult;
     } catch (err) {
       console.error(err);
     } finally {
@@ -231,6 +242,7 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
                                                                    this.#getMappedUrl(currentUrl);
 
     const result = await this.getFieldDataForPage(urlForCrux);
+    this.#pageResult = result;
     if (currentUrl !== urlForCrux) {
       result.warnings.push(i18nString(UIStrings.fieldOverrideWarning));
     }
@@ -262,22 +274,22 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
     this.#mainDocumentUrl = event.data.url;
 
-    await this.#automaticRefresh();
+    await this.refresh();
   }
 
-  async #automaticRefresh(): Promise<void> {
+  async refresh(): Promise<void> {
     // This does 2 things:
     // - Tells listeners to clear old data so it isn't shown during a URL transition
     // - Tells listeners to clear old data when field data is disabled.
+    this.#pageResult = undefined;
     this.dispatchEventToListeners(Events.FIELD_DATA_CHANGED, undefined);
 
     if (!this.#configSetting.get().enabled) {
       return;
     }
 
-    const pageResult = await this.getFieldDataForCurrentPage();
-
-    this.dispatchEventToListeners(Events.FIELD_DATA_CHANGED, pageResult);
+    this.#pageResult = await this.getFieldDataForCurrentPage();
+    this.dispatchEventToListeners(Events.FIELD_DATA_CHANGED, this.#pageResult);
   }
 
   #normalizeUrl(inputUrl: string): URL {
@@ -344,6 +356,45 @@ export class CrUXManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return responseData;
   }
 
+  #getAutoDeviceScope(): DeviceScope {
+    const emulationModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
+    if (emulationModel === null) {
+      return 'ALL';
+    }
+
+    if (emulationModel.isMobile()) {
+      if (this.#pageResult?.[`${this.fieldPageScope}-PHONE`]) {
+        return 'PHONE';
+      }
+
+      return 'ALL';
+    }
+
+    if (this.#pageResult?.[`${this.fieldPageScope}-DESKTOP`]) {
+      return 'DESKTOP';
+    }
+
+    return 'ALL';
+  }
+
+  getSelectedDeviceScope(): DeviceScope {
+    return this.fieldDeviceOption === 'AUTO' ? this.#getAutoDeviceScope() : this.fieldDeviceOption;
+  }
+
+  getSelectedFieldResponse(): CrUXResponse|null|undefined {
+    const pageScope = this.fieldPageScope;
+    const deviceScope = this.getSelectedDeviceScope();
+    return this.getFieldResponse(pageScope, deviceScope);
+  }
+
+  getSelectedFieldMetricData(fieldMetric: StandardMetricNames): MetricResponse|undefined {
+    return this.getSelectedFieldResponse()?.record.metrics[fieldMetric];
+  }
+
+  getFieldResponse(pageScope: PageScope, deviceScope: DeviceScope): CrUXResponse|null|undefined {
+    return this.#pageResult?.[`${pageScope}-${deviceScope}`];
+  }
+
   setEndpointForTesting(endpoint: string): void {
     this.#endpoint = endpoint;
   }

front_end/models/emulation/BUILD.gn

@@ -34,6 +34,7 @@ devtools_entrypoint("bundle") {
     ":*",
     "../*",
     "../../panels/emulation/*",
+    "../crux-manager/*",
   ]
 
   visibility += devtools_models_visibility

front_end/panels/mobile_throttling/ThrottlingManager.test.ts

@@ -65,7 +65,7 @@ describeWithEnvironment('ThrottlingManager', () => {
     it('listens to changes in cpu throttling setting', () => {
       const cpuThrottlingPresets = MobileThrottling.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets;
       const throttlingManager = MobileThrottling.ThrottlingManager.throttlingManager();
-      const selector = throttlingManager.createCPUThrottlingSelector();
+      const selector = throttlingManager.createCPUThrottlingSelector().control;
       assert.strictEqual(
           cpuThrottlingPresets[selector.selectedIndex()], SDK.CPUThrottlingManager.CPUThrottlingRates.NO_THROTTLING);