report(devtools): fix wrong emulation string in meta block (#14672)

GoogleChrome · Jan 13, 2023 · 231a7f5 · 231a7f5
1 parent 3d8befd
commit 231a7f5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/core/util.cjs b/core/util.cjs
@@ -516,14 +516,24 @@ class Util {
         summary = cpuThrottling = networkThrottling = Util.i18n.strings.runtimeUnknown;
     }
 
+    // devtools-entry.js always sets `screenEmulation.disabled` when using mobile emulation,
+    // because we handle the emulation outside of Lighthouse. Since the screen truly is emulated
+    // as a mobile device, ignore `.disabled` in devtools and just check the form factor
+    const isScreenEmulationDisabled = settings.channel === 'devtools' ?
+      false :
+      settings.screenEmulation.disabled;
+    const isScreenEmulationMobile = settings.channel === 'devtools' ?
+      settings.formFactor === 'mobile' :
+      settings.screenEmulation.mobile;
+
     let deviceEmulation = Util.i18n.strings.runtimeMobileEmulation;
-    if (settings.screenEmulation.disabled) {
+    if (isScreenEmulationDisabled) {
       deviceEmulation = Util.i18n.strings.runtimeNoEmulation;
-    } else if (!settings.screenEmulation.mobile) {
+    } else if (!isScreenEmulationMobile) {
       deviceEmulation = Util.i18n.strings.runtimeDesktopEmulation;
     }
 
-    const screenEmulation = settings.screenEmulation.disabled ?
+    const screenEmulation = isScreenEmulationDisabled ?
       undefined :
       // eslint-disable-next-line max-len
       `${settings.screenEmulation.width}x${settings.screenEmulation.height}, DPR ${settings.screenEmulation.deviceScaleFactor}`;

diff --git a/report/renderer/util.js b/report/renderer/util.js
@@ -512,14 +512,24 @@ class Util {
         summary = cpuThrottling = networkThrottling = Util.i18n.strings.runtimeUnknown;
     }
 
+    // devtools-entry.js always sets `screenEmulation.disabled` when using mobile emulation,
+    // because we handle the emulation outside of Lighthouse. Since the screen truly is emulated
+    // as a mobile device, ignore `.disabled` in devtools and just check the form factor
+    const isScreenEmulationDisabled = settings.channel === 'devtools' ?
+      false :
+      settings.screenEmulation.disabled;
+    const isScreenEmulationMobile = settings.channel === 'devtools' ?
+      settings.formFactor === 'mobile' :
+      settings.screenEmulation.mobile;
+
     let deviceEmulation = Util.i18n.strings.runtimeMobileEmulation;
-    if (settings.screenEmulation.disabled) {
+    if (isScreenEmulationDisabled) {
       deviceEmulation = Util.i18n.strings.runtimeNoEmulation;
-    } else if (!settings.screenEmulation.mobile) {
+    } else if (!isScreenEmulationMobile) {
       deviceEmulation = Util.i18n.strings.runtimeDesktopEmulation;
     }
 
-    const screenEmulation = settings.screenEmulation.disabled ?
+    const screenEmulation = isScreenEmulationDisabled ?
       undefined :
       // eslint-disable-next-line max-len
       `${settings.screenEmulation.width}x${settings.screenEmulation.height}, DPR ${settings.screenEmulation.deviceScaleFactor}`;

diff --git a/report/test/renderer/util-test.js b/report/test/renderer/util-test.js
@@ -37,8 +37,10 @@ describe('util helpers', () => {
     /* eslint-disable max-len */
     assert.equal(get({formFactor: 'mobile', screenEmulation: {disabled: false, mobile: true}}), 'Emulated Moto G4');
     assert.equal(get({formFactor: 'mobile', screenEmulation: {disabled: true, mobile: true}}), 'No emulation');
+    assert.equal(get({formFactor: 'mobile', screenEmulation: {disabled: true, mobile: true}, channel: 'devtools'}), 'Emulated Moto G4');
     assert.equal(get({formFactor: 'desktop', screenEmulation: {disabled: false, mobile: false}}), 'Emulated Desktop');
     assert.equal(get({formFactor: 'desktop', screenEmulation: {disabled: true, mobile: false}}), 'No emulation');
+    assert.equal(get({formFactor: 'desktop', screenEmulation: {disabled: true, mobile: true}, channel: 'devtools'}), 'Emulated Desktop');
     /* eslint-enable max-len */
   });