chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/models/breakpoints/BreakpointManager.test.ts

@@ -410,6 +410,7 @@ describeWithMockConnection('BreakpointManager', () => {
     assert.exists(modelBreakpoint);
 
     // Make sure that we do not have a linked script yet.
+    // eslint-disable-next-line rulesdir/no-assert-equal-boolean-null-undefined
     assert.strictEqual(modelBreakpoint.currentState, null);
 
     // Now await restoring the breakpoint.
@@ -546,7 +547,7 @@ describeWithMockConnection('BreakpointManager', () => {
     await breakpointManager.debuggerWorkspaceBinding.updateLocations(script);
 
     // Verify that the location of the breakpoint was updated.
-    assert.strictEqual(breakpointManager.breakpointLocationsForUISourceCode(uiSourceCodeTs).length, 1);
+    assert.lengthOf(breakpointManager.breakpointLocationsForUISourceCode(uiSourceCodeTs), 1);
     assert.strictEqual(breakpointManager.breakpointLocationsForUISourceCode(uiSourceCodeTs)[0].breakpoint, breakpoint);
     assert.strictEqual(
         breakpointManager.breakpointLocationsForUISourceCode(uiSourceCodeTs)[0].uiLocation.lineNumber,
@@ -555,7 +556,7 @@ describeWithMockConnection('BreakpointManager', () => {
     // Remove the target and verify that the UI source codes were removed from the breakpoint.
     breakpointManager.targetManager.removeTarget(target);
     assert.strictEqual(breakpoint.getUiSourceCodes().size, 0);
-    assert.strictEqual(breakpointManager.breakpointLocationsForUISourceCode(uiSourceCodeTs).length, 0);
+    assert.lengthOf(breakpointManager.breakpointLocationsForUISourceCode(uiSourceCodeTs), 0);
 
     Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().removeSourceMapping(mapping);
     await breakpoint.remove(false);
@@ -596,7 +597,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
     // Check that the breakpoint was set at the correct location?
     const locations = breakpointManager.breakpointLocationsForUISourceCode(uiSourceCode);
-    assert.strictEqual(1, locations.length);
+    assert.lengthOf(locations, 1);
     assert.strictEqual(1, locations[0].uiLocation.lineNumber);
     assert.strictEqual(5, locations[0].uiLocation.columnNumber);
   });
@@ -659,7 +660,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
     // Verify the breakpoint was restored at the oriignal unbound location (before the backend binds it).
     const unboundLocations = breakpointManager.breakpointLocationsForUISourceCode(reloadedUiSourceCode);
-    assert.strictEqual(1, unboundLocations.length);
+    assert.lengthOf(unboundLocations, 1);
     assert.strictEqual(1, unboundLocations[0].uiLocation.lineNumber);
     assert.strictEqual(2, unboundLocations[0].uiLocation.columnNumber);
 
@@ -678,7 +679,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
     // Verify the restored position.
     const boundLocations = breakpointManager.breakpointLocationsForUISourceCode(reloadedUiSourceCode);
-    assert.strictEqual(1, boundLocations.length);
+    assert.lengthOf(boundLocations, 1);
     assert.strictEqual(1, boundLocations[0].uiLocation.lineNumber);
     assert.strictEqual(5, boundLocations[0].uiLocation.columnNumber);
   });
@@ -924,7 +925,7 @@ describeWithMockConnection('BreakpointManager', () => {
       // Verify that the network uiSourceCode has the breakpoint that we originally set
       // on the file system uiSourceCode.
       const reloadedBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(uiSourceCode);
-      assert.strictEqual(1, reloadedBoundLocations.length);
+      assert.lengthOf(reloadedBoundLocations, 1);
       assert.strictEqual(resolvedBreakpointLine, reloadedBoundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(0, reloadedBoundLocations[0].uiLocation.columnNumber);
 
@@ -966,7 +967,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the restored position.
       const boundLocations = breakpointManager.breakpointLocationsForUISourceCode(uiSourceCode);
-      assert.strictEqual(1, boundLocations.length);
+      assert.lengthOf(boundLocations, 1);
       assert.strictEqual(resolvedBreakpointLine, boundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(0, boundLocations[0].uiLocation.columnNumber);
 
@@ -1017,7 +1018,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the restored position.
       const reloadedBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(reloadedUiSourceCode);
-      assert.strictEqual(1, reloadedBoundLocations.length);
+      assert.lengthOf(reloadedBoundLocations, 1);
       assert.strictEqual(resolvedBreakpointLine, reloadedBoundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(0, reloadedBoundLocations[0].uiLocation.columnNumber);
     });
@@ -1056,7 +1057,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the position.
       const boundLocations = breakpointManager.breakpointLocationsForUISourceCode(uiSourceCode);
-      assert.strictEqual(1, boundLocations.length);
+      assert.lengthOf(boundLocations, 1);
       assert.strictEqual(BREAKPOINT_SCRIPT_LINE, boundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(0, boundLocations[0].uiLocation.columnNumber);
 
@@ -1109,7 +1110,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the restored position.
       const reloadedBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(reloadedUiSourceCode);
-      assert.strictEqual(1, reloadedBoundLocations.length);
+      assert.lengthOf(reloadedBoundLocations, 1);
       assert.deepEqual(reloadedBoundLocations[0].uiLocation.uiSourceCode, reloadedUiSourceCode);
       assert.strictEqual(BREAKPOINT_SCRIPT_LINE, reloadedBoundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(0, reloadedBoundLocations[0].uiLocation.columnNumber);
@@ -1165,7 +1166,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the position.
       const boundLocations = breakpointManager.breakpointLocationsForUISourceCode(uiSourceCode);
-      assert.strictEqual(1, boundLocations.length);
+      assert.lengthOf(boundLocations, 1);
       assert.strictEqual(INLINE_BREAKPOINT_RAW_LINE, boundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(0, boundLocations[0].uiLocation.columnNumber);
 
@@ -1219,7 +1220,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the restored position.
       const reloadedBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(reloadedUiSourceCode);
-      assert.strictEqual(1, reloadedBoundLocations.length);
+      assert.lengthOf(reloadedBoundLocations, 1);
       assert.deepEqual(reloadedBoundLocations[0].uiLocation.uiSourceCode, reloadedUiSourceCode);
       assert.strictEqual(INLINE_BREAKPOINT_RAW_LINE, reloadedBoundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(0, reloadedBoundLocations[0].uiLocation.columnNumber);
@@ -1261,7 +1262,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the restored position.
       const boundLocations = breakpointManager.breakpointLocationsForUISourceCode(uiSourceCode);
-      assert.strictEqual(1, boundLocations.length);
+      assert.lengthOf(boundLocations, 1);
       assert.strictEqual(0, boundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(9, boundLocations[0].uiLocation.columnNumber);
 
@@ -1290,7 +1291,7 @@ describeWithMockConnection('BreakpointManager', () => {
       assert.exists(uiSourceCode);
 
       const unboundLocation = breakpointManager.breakpointLocationsForUISourceCode(reloadedUiSourceCode);
-      assert.strictEqual(1, unboundLocation.length);
+      assert.lengthOf(unboundLocation, 1);
       assert.strictEqual(0, unboundLocation[0].uiLocation.lineNumber);
       assert.strictEqual(0, unboundLocation[0].uiLocation.columnNumber);
 
@@ -1316,7 +1317,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the restored position.
       const reloadedBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(reloadedUiSourceCode);
-      assert.strictEqual(1, reloadedBoundLocations.length);
+      assert.lengthOf(reloadedBoundLocations, 1);
       assert.strictEqual(0, reloadedBoundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(9, reloadedBoundLocations[0].uiLocation.columnNumber);
     });
@@ -1402,7 +1403,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the bound position.
       const boundLocations = breakpointManager.breakpointLocationsForUISourceCode(uiSourceCode);
-      assert.strictEqual(1, boundLocations.length);
+      assert.lengthOf(boundLocations, 1);
       assert.strictEqual(0, boundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(0, boundLocations[0].uiLocation.columnNumber);
 
@@ -1452,7 +1453,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
       // Verify the restored position.
       const reloadedBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(reloadedUiSourceCode);
-      assert.strictEqual(1, reloadedBoundLocations.length);
+      assert.lengthOf(reloadedBoundLocations, 1);
       assert.strictEqual(0, reloadedBoundLocations[0].uiLocation.lineNumber);
       assert.strictEqual(0, reloadedBoundLocations[0].uiLocation.columnNumber);
     });
@@ -1582,7 +1583,7 @@ describeWithMockConnection('BreakpointManager', () => {
     // After this, the breakpoint manager should not refer to the file system source code anymore, but
     // the file system breakpoint location should be in the storage.
     assert.isEmpty(breakpointManager.breakpointLocationsForUISourceCode(fileSystemUiSourceCode));
-    assert.strictEqual(breakpointManager.storage.breakpointItems(fileSystemUiSourceCode.url()).length, 1);
+    assert.lengthOf(breakpointManager.storage.breakpointItems(fileSystemUiSourceCode.url()), 1);
 
     Root.Runtime.experiments.disableForTest(Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS);
   });
@@ -1636,7 +1637,7 @@ describeWithMockConnection('BreakpointManager', () => {
 
     // Expect that the breakpoint is only added to the network UI source code.
     assert.strictEqual(breakpoint, addedBreakpoint);
-    assert.deepStrictEqual(Array.from(breakpoint.getUiSourceCodes()), [uiSourceCode]);
+    assert.deepEqual(Array.from(breakpoint.getUiSourceCodes()), [uiSourceCode]);
   });
 
   it('updates a breakpoint after live editing the underlying script', async () => {
@@ -1781,10 +1782,10 @@ describeWithMockConnection('BreakpointManager', () => {
       assert.deepEqual(Array.from(breakpoint.getUiSourceCodes()), [mainUiSourceCode, workerUiSourceCode]);
 
       const mainBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(mainUiSourceCode);
-      assert.strictEqual(1, mainBoundLocations.length);
+      assert.lengthOf(mainBoundLocations, 1);
 
       const workerBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(workerUiSourceCode);
-      assert.strictEqual(1, workerBoundLocations.length);
+      assert.lengthOf(workerBoundLocations, 1);
     });
 
     it('if the target whose uiSourceCode was used for breakpoint setting is handled first', async () => {
@@ -1819,10 +1820,10 @@ describeWithMockConnection('BreakpointManager', () => {
       assert.deepEqual(Array.from(breakpoint.getUiSourceCodes()), [mainUiSourceCode, workerUiSourceCode]);
 
       const mainBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(mainUiSourceCode);
-      assert.strictEqual(1, mainBoundLocations.length);
+      assert.lengthOf(mainBoundLocations, 1);
 
       const workerBoundLocations = breakpointManager.breakpointLocationsForUISourceCode(workerUiSourceCode);
-      assert.strictEqual(1, workerBoundLocations.length);
+      assert.lengthOf(workerBoundLocations, 1);
     });
   });
 

package/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(() => {
@@ -130,7 +137,7 @@ describeWithMockConnection('CrUXManager', () => {
                               .sort()
                               .map(body => JSON.parse(body) as CrUXManager.CrUXRequest);
 
-      assert.deepStrictEqual(pageResult, {
+      assert.deepEqual(pageResult, {
         'origin-ALL': mockResponse(),
         'origin-DESKTOP': mockResponse(),
         'origin-PHONE': mockResponse(),
@@ -142,7 +149,7 @@ describeWithMockConnection('CrUXManager', () => {
         warnings: [],
       });
 
-      assert.deepStrictEqual(fetchBodies, [
+      assert.deepEqual(fetchBodies, [
         {
           formFactor: 'DESKTOP',
           metrics: [
@@ -215,7 +222,7 @@ describeWithMockConnection('CrUXManager', () => {
                             status: 404,
                           }));
       const pageResult = await cruxManager.getFieldDataForPage('https://example.com');
-      assert.deepStrictEqual(pageResult, {
+      assert.deepEqual(pageResult, {
         'origin-ALL': null,
         'origin-DESKTOP': null,
         'origin-PHONE': null,
@@ -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: [],
       });
@@ -335,7 +342,7 @@ describeWithMockConnection('CrUXManager', () => {
 
       const result = await cruxManager.getFieldDataForCurrentPage();
 
-      assert.deepStrictEqual(result.warnings, []);
+      assert.deepEqual(result.warnings, []);
       assert.strictEqual(getFieldDataMock.callCount, 1);
       assert.strictEqual(getFieldDataMock.firstCall.args[0], 'https://example.com/main/');
     });
@@ -347,7 +354,7 @@ describeWithMockConnection('CrUXManager', () => {
 
       const result = await cruxManager.getFieldDataForCurrentPage();
 
-      assert.deepStrictEqual(result.warnings, ['Field data is configured for a different URL than the current page.']);
+      assert.deepEqual(result.warnings, ['Field data is configured for a different URL than the current page.']);
       assert.strictEqual(getFieldDataMock.callCount, 1);
       assert.strictEqual(getFieldDataMock.firstCall.args[0], 'https://example.com/override');
     });
@@ -364,7 +371,7 @@ describeWithMockConnection('CrUXManager', () => {
 
       const result = await cruxManager.getFieldDataForCurrentPage();
 
-      assert.deepStrictEqual(result.warnings, ['Field data is configured for a different URL than the current page.']);
+      assert.deepEqual(result.warnings, ['Field data is configured for a different URL than the current page.']);
       assert.strictEqual(getFieldDataMock.callCount, 1);
       assert.strictEqual(getFieldDataMock.firstCall.args[0], 'https://example.com/inspected');
     });
@@ -383,7 +390,7 @@ describeWithMockConnection('CrUXManager', () => {
 
       const result = await cruxManager.getFieldDataForCurrentPage();
 
-      assert.deepStrictEqual(result.warnings, ['Field data is configured for a different URL than the current page.']);
+      assert.deepEqual(result.warnings, ['Field data is configured for a different URL than the current page.']);
       assert.strictEqual(getFieldDataMock.callCount, 1);
       assert.strictEqual(getFieldDataMock.firstCall.args[0], 'https://google.com');
     });
@@ -393,7 +400,7 @@ describeWithMockConnection('CrUXManager', () => {
 
       const result = await cruxManager.getFieldDataForCurrentPage();
 
-      assert.deepStrictEqual(result.warnings, []);
+      assert.deepEqual(result.warnings, []);
       assert.strictEqual(getFieldDataMock.callCount, 1);
       assert.strictEqual(getFieldDataMock.firstCall.args[0], 'https://example.com/inspected');
     });
@@ -409,10 +416,64 @@ describeWithMockConnection('CrUXManager', () => {
 
       const result = await finishPromise;
 
-      assert.deepStrictEqual(result.warnings, []);
+      assert.deepEqual(result.warnings, []);
       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', () => {

package/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;
   }

package/front_end/models/emulation/DeviceModeModel.ts

@@ -187,6 +187,21 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return deviceModeModelInstance;
   }
 
+  /**
+   * This wraps `instance()` in a try/catch because in some DevTools entry points
+   * (such as worker_app.ts) the Emulation panel is not included and as such
+   * the below code fails; it tries to instantiate the model which requires
+   * reading the value of a setting which has not been registered.
+   * See crbug.com/361515458 for an example bug that this resolves.
+   */
+  static tryInstance(opts?: {forceNew: boolean}): DeviceModeModel|null {
+    try {
+      return this.instance(opts);
+    } catch {
+      return null;
+    }
+  }
+
   static widthValidator(value: string): {
     valid: boolean,
     errorMessage: (string|undefined),

package/front_end/models/emulation/EmulatedDevices.test.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import * as EmulationModel from '../emulation/emulation.js';
 
 const BASE_URL = new URL('../../../front_end/emulated_devices/', import.meta.url).toString();
@@ -39,3 +40,22 @@ describe('EmulatedDevices can compute CSS image URLs', () => {
             'a lot of @url(stuff) in a @url(single)line and more url() @@url (not/a/resource.gif)'));
   });
 });
+
+describeWithEnvironment('emulatedDevices', () => {
+  it('before parsing, all Chrome UAs all have %s placeholder for major version patching', () => {
+    const devices = EmulationModel.EmulatedDevices.EmulatedDevicesList.rawEmulatedDevicesForTest();
+    const chromeRawDevices = devices.filter(d => d['user-agent'].includes(' Chrome/'));
+    assert.isAtLeast(chromeRawDevices.length, 20);
+    // We should not add any new UAs without the %s that gets patched via `patchUserAgentWithChromeVersion`
+    assert.isTrue(chromeRawDevices.every(d => d['user-agent'].includes('Chrome/%s')));
+  });
+
+  it('after parsing, all Chrome UAs all have %s placeholder for major version patching', () => {
+    const edList = new EmulationModel.EmulatedDevices.EmulatedDevicesList();
+    const parsedDevices = edList.standard();
+    const chromeDevices = parsedDevices.filter(d => d.userAgent.includes(' Chrome/'));
+    assert.isAtLeast(chromeDevices.length, 20);
+    // They are patched while parsed, so there should be none remaining
+    assert.lengthOf(chromeDevices.filter(d => d.userAgent.includes('Chrome/%s')), 0);
+  });
+});