Audits: Fix viewport emulation invisibility bugs

Bug: 979126, 816849, 984743
Change-Id: I454cee9d75c24b4b703b8dd71cb83be4eff0fb11
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1699018
Commit-Queue: Paul Irish <paulirish@chromium.org>
Auto-Submit: Paul Irish <paulirish@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#678036}

third_party/blink/renderer/devtools/front_end/audits/AuditsController.js

@@ -237,7 +237,9 @@ Audits.RuntimeSettings = [
     setting: Common.settings.createSetting('audits.device_type', 'mobile'),
     description: ls`Apply mobile emulation during auditing`,
     setFlags: (flags, value) => {
-      flags.emulatedFormFactor = value;
+      flags._devtoolsEmulationType = value;
+      // See Audits.AuditsPanel._setupEmulationAndProtocolConnection()
+      flags.emulatedFormFactor = 'none';
     },
     options: [
       {label: ls`Mobile`, value: 'mobile'},

third_party/blink/renderer/devtools/front_end/audits/AuditsPanel.js

@@ -244,6 +244,12 @@ Audits.AuditsPanel = class extends UI.Panel {
     this._renderStartView();
   }
 
+  /**
+   * We set the device emulation on the DevTools-side for two reasons:
+   * 1. To workaround some odd device metrics emulation bugs like occuluding viewports
+   * 2. To get the attractive device outline
+   * flags.emulatedFormFactor is always set to none, so Lighthouse doesn't apply its own emulation.
+   */
   async _setupEmulationAndProtocolConnection() {
     const flags = this._controller.getFlags();
 
@@ -252,11 +258,10 @@ Audits.AuditsPanel = class extends UI.Panel {
     this._emulationOutlineEnabledBefore = emulationModel.deviceOutlineSetting().get();
     emulationModel.toolbarControlsEnabledSetting().set(false);
 
-    if (flags.emulatedFormFactor === 'desktop') {
+    if (flags._devtoolsEmulationType === 'desktop') {
       emulationModel.enabledSetting().set(false);
-      emulationModel.deviceOutlineSetting().set(false);
       emulationModel.emulate(Emulation.DeviceModeModel.Type.None, null, null);
-    } else {
+    } else if (flags._devtoolsEmulationType === 'mobile') {
       emulationModel.enabledSetting().set(true);
       emulationModel.deviceOutlineSetting().set(true);
 

third_party/blink/web_tests/http/tests/devtools/audits/audits-flags-run-expected.txt

@@ -11,7 +11,7 @@ Tests that audits panel passes flags.
 Run audits: enabled visible
 
 =============== Lighthouse Results ===============
-emulatedFormFactor: desktop
+emulatedFormFactor: none
 disableStorageReset: false
 throttlingMethod: provided
 

third_party/blink/web_tests/http/tests/devtools/audits/audits-successful-run-expected.txt

@@ -298,7 +298,7 @@ button-name: notApplicable
 bypass: notApplicable
 canonical: notApplicable
 color-contrast: notApplicable
-content-width: fail
+content-width: notApplicable
 critical-request-chains: notApplicable
 custom-controls-labels: manual
 custom-controls-roles: manual
@@ -321,7 +321,7 @@ first-meaningful-paint: flaky
 focus-traps: manual
 focusable-controls: manual
 font-display: pass
-font-size: fail
+font-size: notApplicable
 frame-title: notApplicable
 geolocation-on-start: pass
 heading-levels: manual
@@ -381,7 +381,7 @@ speed-index: flaky
 splash-screen: fail
 structured-data: manual
 tabindex: notApplicable
-tap-targets: fail
+tap-targets: notApplicable
 td-headers-attr: notApplicable
 th-has-data-cells: notApplicable
 themed-omnibox: fail