From 2663a9c3aa534bebdfec36c73e325bd333d2784c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 2 Dec 2020 17:19:05 -0800 Subject: [PATCH 01/63] batch rename emulatedFormFactor to formFactor --- clients/test/lightrider-entry-test.js | 4 +- docs/understanding-results.md | 2 +- .../test/cli/__snapshots__/index-test.js.snap | 4 +- .../screenshot/screenshot-config.js | 2 +- lighthouse-core/config/constants.js | 2 +- lighthouse-core/config/lr-desktop-config.js | 2 +- lighthouse-core/gather/gather-runner.js | 6 +-- .../gather/gatherers/full-page-screenshot.js | 2 +- lighthouse-core/lib/emulation.js | 4 +- lighthouse-core/lib/proto-preprocessor.js | 4 +- lighthouse-core/lib/sentry.js | 2 +- .../renderer/performance-category-renderer.js | 2 +- lighthouse-core/report/html/renderer/util.js | 4 +- .../test/audits/content-width-test.js | 2 +- lighthouse-core/test/config/config-test.js | 6 +-- .../test/gather/gather-runner-test.js | 14 ++--- .../gatherers/full-page-screenshot-test.js | 10 ++-- lighthouse-core/test/lib/emulation-test.js | 14 ++--- .../test/lib/proto-preprocessor-test.js | 4 +- lighthouse-core/test/lib/sentry-test.js | 4 +- .../performance-category-renderer-test.js | 2 +- .../test/report/html/renderer/util-test.js | 6 +-- .../test/results/artifacts/artifacts.json | 2 +- lighthouse-core/test/results/sample_v2.json | 2 +- lighthouse-core/test/runner-test.js | 4 +- lighthouse-treemap/app/debug.json | 2 +- proto/lighthouse-result.proto | 54 +++++++++---------- .../lighthouse-flags-run-expected.txt | 2 +- .../lighthouse/lighthouse-flags-run.js | 2 +- types/externs.d.ts | 4 +- 30 files changed, 87 insertions(+), 87 deletions(-) diff --git a/clients/test/lightrider-entry-test.js b/clients/test/lightrider-entry-test.js index c7e6c09fdd43..7ddd9e544f95 100644 --- a/clients/test/lightrider-entry-test.js +++ b/clients/test/lightrider-entry-test.js @@ -80,7 +80,7 @@ describe('lightrider-entry', () => { const lrDevice = 'desktop'; await lhBackground.runLighthouseInLR(mockConnection, url, {}, {lrDevice}); const config = runStub.mock.calls[0][1].config; - assert.equal(config.settings.emulatedFormFactor, 'desktop'); + assert.equal(config.settings.formFactor, 'desktop'); runStub.mockRestore(); }); @@ -94,7 +94,7 @@ describe('lightrider-entry', () => { const lrDevice = 'mobile'; await lhBackground.runLighthouseInLR(mockConnection, url, {}, {lrDevice}); const config = runStub.mock.calls[0][1].config; - assert.equal(config.settings.emulatedFormFactor, 'mobile'); + assert.equal(config.settings.formFactor, 'mobile'); runStub.mockRestore(); }); diff --git a/docs/understanding-results.md b/docs/understanding-results.md index 7d795f455912..fa399d2c0046 100644 --- a/docs/understanding-results.md +++ b/docs/understanding-results.md @@ -121,7 +121,7 @@ An object containing information about the configuration used by Lighthouse. }, "gatherMode": false, "disableStorageReset": false, - "emulatedFormFactor": "mobile", + "formFactor": "mobile", "blockedUrlPatterns": null, "additionalTraceCategories": null, "extraHeaders": null, diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap index 1f5d44001b89..47b56ec09ef5 100644 --- a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap +++ b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap @@ -1508,7 +1508,7 @@ Object { "budgets": null, "channel": "cli", "disableStorageReset": false, - "emulatedFormFactor": "mobile", + "formFactor": "mobile", "extraHeaders": null, "gatherMode": false, "internalDisableDeviceScreenEmulation": false, @@ -1657,7 +1657,7 @@ Object { "budgets": null, "channel": "cli", "disableStorageReset": false, - "emulatedFormFactor": "mobile", + "formFactor": "mobile", "extraHeaders": null, "gatherMode": false, "internalDisableDeviceScreenEmulation": false, diff --git a/lighthouse-cli/test/smokehouse/test-definitions/screenshot/screenshot-config.js b/lighthouse-cli/test/smokehouse/test-definitions/screenshot/screenshot-config.js index b9e3917980a3..8a905d088c6c 100644 --- a/lighthouse-cli/test/smokehouse/test-definitions/screenshot/screenshot-config.js +++ b/lighthouse-cli/test/smokehouse/test-definitions/screenshot/screenshot-config.js @@ -11,6 +11,6 @@ const experimentalConfig = require('../../../../../lighthouse-core/config/experi module.exports = { ...experimentalConfig, settings: { - emulatedFormFactor: 'desktop', + formFactor: 'desktop', }, }; diff --git a/lighthouse-core/config/constants.js b/lighthouse-core/config/constants.js index 55cb8c347746..859b3ebe6df8 100644 --- a/lighthouse-core/config/constants.js +++ b/lighthouse-core/config/constants.js @@ -60,7 +60,7 @@ const defaultSettings = { auditMode: false, gatherMode: false, disableStorageReset: false, - emulatedFormFactor: 'mobile', + formFactor: 'mobile', internalDisableDeviceScreenEmulation: false, channel: 'node', diff --git a/lighthouse-core/config/lr-desktop-config.js b/lighthouse-core/config/lr-desktop-config.js index bf6d74b86291..f5eec966dec2 100644 --- a/lighthouse-core/config/lr-desktop-config.js +++ b/lighthouse-core/config/lr-desktop-config.js @@ -13,7 +13,7 @@ const config = { settings: { maxWaitForFcp: 15 * 1000, maxWaitForLoad: 35 * 1000, - emulatedFormFactor: 'desktop', + formFactor: 'desktop', throttling: desktopDense4G, }, }; diff --git a/lighthouse-core/gather/gather-runner.js b/lighthouse-core/gather/gather-runner.js index 78661df26195..8ba11e66b2db 100644 --- a/lighthouse-core/gather/gather-runner.js +++ b/lighthouse-core/gather/gather-runner.js @@ -511,12 +511,12 @@ class GatherRunner { static async initializeBaseArtifacts(options) { const hostUserAgent = (await options.driver.getBrowserVersion()).userAgent; - const {emulatedFormFactor} = options.settings; + const {formFactor} = options.settings; // Whether Lighthouse was run on a mobile device (i.e. not on a desktop machine). const HostFormFactor = hostUserAgent.includes('Android') || hostUserAgent.includes('Mobile') ? 'mobile' : 'desktop'; - const TestedAsMobileDevice = emulatedFormFactor === 'mobile' || - (emulatedFormFactor !== 'desktop' && HostFormFactor === 'mobile'); + const TestedAsMobileDevice = formFactor === 'mobile' || + (formFactor !== 'desktop' && HostFormFactor === 'mobile'); return { fetchTime: (new Date()).toJSON(), diff --git a/lighthouse-core/gather/gatherers/full-page-screenshot.js b/lighthouse-core/gather/gatherers/full-page-screenshot.js index 4e03a28c21d9..73c9d0bda748 100644 --- a/lighthouse-core/gather/gatherers/full-page-screenshot.js +++ b/lighthouse-core/gather/gatherers/full-page-screenshot.js @@ -116,7 +116,7 @@ class FullPageScreenshot extends Gatherer { // In case some other program is controlling emulation, try to remember what the device looks // like now and reset after gatherer is done. - const lighthouseControlsEmulation = passContext.settings.emulatedFormFactor !== 'none' && + const lighthouseControlsEmulation = passContext.settings.formFactor !== 'none' && !passContext.settings.internalDisableDeviceScreenEmulation; try { diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index 405362e9adf4..ed682614a307 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -84,8 +84,8 @@ const emulationParams = { * @return {Promise} */ async function emulate(driver, settings) { - if (!settings.emulatedFormFactor || settings.emulatedFormFactor === 'none') return; - const params = emulationParams[settings.emulatedFormFactor]; + if (!settings.formFactor || settings.formFactor === 'none') return; + const params = emulationParams[settings.formFactor]; // In DevTools, emulation is applied before Lighthouse starts (to deal with viewport emulation bugs) // As a result, we don't double-apply viewport emulation (devtools sets `internalDisableDeviceScreenEmulation`). diff --git a/lighthouse-core/lib/proto-preprocessor.js b/lighthouse-core/lib/proto-preprocessor.js index e7a121051afe..4b7d0a554b5f 100644 --- a/lighthouse-core/lib/proto-preprocessor.js +++ b/lighthouse-core/lib/proto-preprocessor.js @@ -29,10 +29,10 @@ function processForProto(lhr) { // 'ignore unknown fields' in the language of conversion. if (reportJson.configSettings) { // The settings that are in both proto and LHR - const {emulatedFormFactor, locale, onlyCategories, channel} = reportJson.configSettings; + const {formFactor, locale, onlyCategories, channel} = reportJson.configSettings; // @ts-expect-error - intentionally only a subset of settings. - reportJson.configSettings = {emulatedFormFactor, locale, onlyCategories, channel}; + reportJson.configSettings = {formFactor, locale, onlyCategories, channel}; } // Remove runtimeError if it is NO_ERROR diff --git a/lighthouse-core/lib/sentry.js b/lighthouse-core/lib/sentry.js index ae48200c6001..895c79edc4ad 100644 --- a/lighthouse-core/lib/sentry.js +++ b/lighthouse-core/lib/sentry.js @@ -110,7 +110,7 @@ function init(opts) { const context = Object.assign({ url: opts.url, - emulatedFormFactor: opts.flags.emulatedFormFactor, + formFactor: opts.flags.formFactor, throttlingMethod: opts.flags.throttlingMethod, }, opts.flags.throttling); Sentry.mergeContext({extra: Object.assign({}, opts.environmentData.extra, context)}); diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index c0e8762aa4f9..e6fd233ba9de 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -150,7 +150,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { const paramPairs = [...metricPairs]; if (Util.reportJson) { - paramPairs.push(['device', Util.reportJson.configSettings.emulatedFormFactor]); + paramPairs.push(['device', Util.reportJson.configSettings.formFactor]); paramPairs.push(['version', Util.reportJson.lighthouseVersion]); } diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index 9a80d3fbf80b..7b393d3e3ff1 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -425,9 +425,9 @@ class Util { } let deviceEmulation = Util.i18n.strings.runtimeNoEmulation; - if (settings.emulatedFormFactor === 'mobile') { + if (settings.formFactor === 'mobile') { deviceEmulation = Util.i18n.strings.runtimeMobileEmulation; - } else if (settings.emulatedFormFactor === 'desktop') { + } else if (settings.formFactor === 'desktop') { deviceEmulation = Util.i18n.strings.runtimeDesktopEmulation; } diff --git a/lighthouse-core/test/audits/content-width-test.js b/lighthouse-core/test/audits/content-width-test.js index ae88d8211f96..409563de637d 100644 --- a/lighthouse-core/test/audits/content-width-test.js +++ b/lighthouse-core/test/audits/content-width-test.js @@ -31,7 +31,7 @@ describe('Mobile-friendly: content-width audit', () => { innerWidth: 300, outerWidth: 300, }, - }, {settings: {emulatedFormFactor: 'mobile'}}).score, 1); + }, {settings: {formFactor: 'mobile'}}).score, 1); }); it('not applicable when run on desktop', () => { diff --git a/lighthouse-core/test/config/config-test.js b/lighthouse-core/test/config/config-test.js index eeb83a05bcc9..f66e2475783b 100644 --- a/lighthouse-core/test/config/config-test.js +++ b/lighthouse-core/test/config/config-test.js @@ -789,16 +789,16 @@ describe('Config', () => { extends: 'lighthouse:default', settings: { disableStorageReset: true, - emulatedFormFactor: 'mobile', + formFactor: 'mobile', }, }, - {emulatedFormFactor: 'desktop'} + {formFactor: 'desktop'} ); assert.ok(config, 'failed to generate config'); assert.ok(typeof config.settings.maxWaitForLoad === 'number', 'missing setting from default'); assert.ok(config.settings.disableStorageReset, 'missing setting from extension config'); - assert.ok(config.settings.emulatedFormFactor === 'desktop', 'missing setting from flags'); + assert.ok(config.settings.formFactor === 'desktop', 'missing setting from flags'); }); it('inherits default settings when undefined', () => { diff --git a/lighthouse-core/test/gather/gather-runner-test.js b/lighthouse-core/test/gather/gather-runner-test.js index 4944823beba8..b0e1ee37a877 100644 --- a/lighthouse-core/test/gather/gather-runner-test.js +++ b/lighthouse-core/test/gather/gather-runner-test.js @@ -239,7 +239,7 @@ describe('GatherRunner', function() { const driver = fakeDriver; const config = makeConfig({ passes: [], - settings: {emulatedFormFactor: 'none', internalDisableDeviceScreenEmulation: false}, + settings: {formFactor: 'none', internalDisableDeviceScreenEmulation: false}, }); const options = {requestedUrl, driver, settings: config.settings}; @@ -251,7 +251,7 @@ describe('GatherRunner', function() { const driver = fakeDriver; const config = makeConfig({ passes: [], - settings: {emulatedFormFactor: 'mobile', internalDisableDeviceScreenEmulation: false}, + settings: {formFactor: 'mobile', internalDisableDeviceScreenEmulation: false}, }); const options = {requestedUrl, driver, settings: config.settings}; @@ -263,7 +263,7 @@ describe('GatherRunner', function() { const driver = fakeDriverUsingRealMobileDevice; const config = makeConfig({ passes: [], - settings: {emulatedFormFactor: 'none', internalDisableDeviceScreenEmulation: false}, + settings: {formFactor: 'none', internalDisableDeviceScreenEmulation: false}, }); const options = {requestedUrl, driver, settings: config.settings}; @@ -275,7 +275,7 @@ describe('GatherRunner', function() { const driver = fakeDriverUsingRealMobileDevice; const config = makeConfig({ passes: [], - settings: {emulatedFormFactor: 'desktop', internalDisableDeviceScreenEmulation: false}, + settings: {formFactor: 'desktop', internalDisableDeviceScreenEmulation: false}, }); const options = {requestedUrl, driver, settings: config.settings}; @@ -324,7 +324,7 @@ describe('GatherRunner', function() { it('sets up the driver to begin emulation when all flags are undefined', async () => { await GatherRunner.setupDriver(driver, { settings: { - emulatedFormFactor: 'mobile', + formFactor: 'mobile', throttlingMethod: 'provided', internalDisableDeviceScreenEmulation: false, }, @@ -341,7 +341,7 @@ describe('GatherRunner', function() { it('applies the correct emulation given a particular emulationFormFactor', async () => { /** @param {'mobile'|'desktop'|'none'} formFactor */ const getSettings = formFactor => ({ - emulatedFormFactor: formFactor, + formFactor: formFactor, internalDisableDeviceScreenEmulation: false, }); @@ -363,7 +363,7 @@ describe('GatherRunner', function() { it('sets throttling according to settings', async () => { await GatherRunner.setupDriver(driver, { settings: { - emulatedFormFactor: 'mobile', internalDisableDeviceScreenEmulation: false, + formFactor: 'mobile', internalDisableDeviceScreenEmulation: false, throttlingMethod: 'devtools', throttling: { requestLatencyMs: 100, diff --git a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js index c53469afb0b6..c5a1fc830b15 100644 --- a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js +++ b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js @@ -61,7 +61,7 @@ describe('FullPageScreenshot gatherer', () => { }); const passContext = { settings: { - emulatedFormFactor: 'mobile', + formFactor: 'mobile', }, driver, baseArtifacts: {}, @@ -88,7 +88,7 @@ describe('FullPageScreenshot gatherer', () => { }); const passContext = { settings: { - emulatedFormFactor: 'mobile', + formFactor: 'mobile', }, driver, baseArtifacts: {}, @@ -96,7 +96,7 @@ describe('FullPageScreenshot gatherer', () => { await fpsGatherer.afterPass(passContext); - expect(driver.beginEmulation).toHaveBeenCalledWith({emulatedFormFactor: 'mobile'}); + expect(driver.beginEmulation).toHaveBeenCalledWith({formFactor: 'mobile'}); expect(driver.beginEmulation).toHaveBeenCalledTimes(1); }); @@ -115,7 +115,7 @@ describe('FullPageScreenshot gatherer', () => { }); const passContext = { settings: { - emulatedFormFactor: 'none', + formFactor: 'none', }, driver, baseArtifacts: { @@ -165,7 +165,7 @@ describe('FullPageScreenshot gatherer', () => { }); const passContext = { settings: { - emulatedFormFactor: 'mobile', + formFactor: 'mobile', }, driver, baseArtifacts: {}, diff --git a/lighthouse-core/test/lib/emulation-test.js b/lighthouse-core/test/lib/emulation-test.js index a6475b73c13e..89b02bcc3530 100644 --- a/lighthouse-core/test/lib/emulation-test.js +++ b/lighthouse-core/test/lib/emulation-test.js @@ -32,11 +32,11 @@ describe('emulation', () => { }); const getSettings = (formFactor, disableDeviceScreenEmulation) => ({ - emulatedFormFactor: formFactor, + formFactor: formFactor, internalDisableDeviceScreenEmulation: disableDeviceScreenEmulation, }); - it('handles: emulatedFormFactor: mobile / disableDeviceScreenEmulation: false', async () => { + it('handles: formFactor: mobile / disableDeviceScreenEmulation: false', async () => { await emulation.emulate(driver, getSettings('mobile', false)); const uaArgs = connectionStub.sendCommand.findInvocation('Network.setUserAgentOverride'); @@ -48,7 +48,7 @@ describe('emulation', () => { expect(emulateArgs).toMatchObject({mobile: true}); }); - it('handles: emulatedFormFactor: desktop / disableDeviceScreenEmulation: false', async () => { + it('handles: formFactor: desktop / disableDeviceScreenEmulation: false', async () => { await emulation.emulate(driver, getSettings('desktop', false)); const uaArgs = connectionStub.sendCommand.findInvocation('Network.setUserAgentOverride'); @@ -60,7 +60,7 @@ describe('emulation', () => { expect(emulateArgs).toMatchObject({mobile: false}); }); - it('handles: emulatedFormFactor: none / disableDeviceScreenEmulation: false', async () => { + it('handles: formFactor: none / disableDeviceScreenEmulation: false', async () => { await emulation.emulate(driver, getSettings('none', false)); expect(connectionStub.sendCommand).not.toHaveBeenCalledWith( 'Network.setUserAgentOverride', @@ -72,7 +72,7 @@ describe('emulation', () => { ); }); - it('handles: emulatedFormFactor: mobile / disableDeviceScreenEmulation: true', async () => { + it('handles: formFactor: mobile / disableDeviceScreenEmulation: true', async () => { await emulation.emulate(driver, getSettings('mobile', true)); const uaArgs = connectionStub.sendCommand.findInvocation('Network.setUserAgentOverride'); expect(uaArgs).toMatchObject({userAgent: emulation.MOBILE_USERAGENT}); @@ -83,7 +83,7 @@ describe('emulation', () => { ); }); - it('handles: emulatedFormFactor: desktop / disableDeviceScreenEmulation: true', async () => { + it('handles: formFactor: desktop / disableDeviceScreenEmulation: true', async () => { await emulation.emulate(driver, getSettings('desktop', true)); const uaArgs = connectionStub.sendCommand.findInvocation('Network.setUserAgentOverride'); expect(uaArgs).toMatchObject({userAgent: emulation.DESKTOP_USERAGENT}); @@ -94,7 +94,7 @@ describe('emulation', () => { ); }); - it('handles: emulatedFormFactor: none / disableDeviceScreenEmulation: true', async () => { + it('handles: formFactor: none / disableDeviceScreenEmulation: true', async () => { await emulation.emulate(driver, getSettings('none', true)); expect(connectionStub.sendCommand).not.toHaveBeenCalledWith( 'Network.setUserAgentOverride', diff --git a/lighthouse-core/test/lib/proto-preprocessor-test.js b/lighthouse-core/test/lib/proto-preprocessor-test.js index 44afc8a20d35..80ab96c6cd0c 100644 --- a/lighthouse-core/test/lib/proto-preprocessor-test.js +++ b/lighthouse-core/test/lib/proto-preprocessor-test.js @@ -34,7 +34,7 @@ describe('processing for proto', () => { }, 'gatherMode': false, 'disableStorageReset': false, - 'emulatedFormFactor': 'mobile', + 'formFactor': 'mobile', 'locale': 'en-US', 'blockedUrlPatterns': null, 'additionalTraceCategories': null, @@ -46,7 +46,7 @@ describe('processing for proto', () => { }; const expectation = { 'configSettings': { - 'emulatedFormFactor': 'mobile', + 'formFactor': 'mobile', 'locale': 'en-US', 'onlyCategories': null, }, diff --git a/lighthouse-core/test/lib/sentry-test.js b/lighthouse-core/test/lib/sentry-test.js index 5e2fa3f5b928..4e452234f81b 100644 --- a/lighthouse-core/test/lib/sentry-test.js +++ b/lighthouse-core/test/lib/sentry-test.js @@ -57,7 +57,7 @@ describe('Sentry', () => { url: 'http://example.com', flags: { enableErrorReporting: true, - emulatedFormFactor: 'desktop', + formFactor: 'desktop', throttlingMethod: 'devtools', }, environmentData: {}, @@ -68,7 +68,7 @@ describe('Sentry', () => { expect(raven.mergeContext.mock.calls[0][0]).toEqual({ extra: { url: 'http://example.com', - emulatedFormFactor: 'desktop', + formFactor: 'desktop', throttlingMethod: 'devtools', }, }); diff --git a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js index c3a0e2a351e5..38fa8b37e79d 100644 --- a/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js +++ b/lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js @@ -263,7 +263,7 @@ describe('PerfCategoryRenderer', () => { it('also appends device and version number', () => { Util.reportJson = { - configSettings: {emulatedFormFactor: 'mobile'}, + configSettings: {formFactor: 'mobile'}, lighthouseVersion: '6.0.0', }; const href = renderer._getScoringCalculatorHref(category.auditRefs); diff --git a/lighthouse-core/test/report/html/renderer/util-test.js b/lighthouse-core/test/report/html/renderer/util-test.js index fa5b0422e14b..8acd745870cb 100644 --- a/lighthouse-core/test/report/html/renderer/util-test.js +++ b/lighthouse-core/test/report/html/renderer/util-test.js @@ -35,9 +35,9 @@ describe('util helpers', () => { it('builds device emulation string', () => { const get = opts => Util.getEmulationDescriptions(opts).deviceEmulation; - assert.equal(get({emulatedFormFactor: 'none'}), 'No emulation'); - assert.equal(get({emulatedFormFactor: 'mobile'}), 'Emulated Moto G4'); - assert.equal(get({emulatedFormFactor: 'desktop'}), 'Emulated Desktop'); + assert.equal(get({formFactor: 'none'}), 'No emulation'); + assert.equal(get({formFactor: 'mobile'}), 'Emulated Moto G4'); + assert.equal(get({formFactor: 'desktop'}), 'Emulated Desktop'); }); it('builds throttling strings when provided', () => { diff --git a/lighthouse-core/test/results/artifacts/artifacts.json b/lighthouse-core/test/results/artifacts/artifacts.json index 071dd61a099b..6b1d098aa20f 100644 --- a/lighthouse-core/test/results/artifacts/artifacts.json +++ b/lighthouse-core/test/results/artifacts/artifacts.json @@ -28,7 +28,7 @@ "auditMode": false, "gatherMode": "lighthouse-core/test/results/artifacts", "disableStorageReset": false, - "emulatedFormFactor": "mobile", + "formFactor": "mobile", "internalDisableDeviceScreenEmulation": false, "channel": "cli", "budgets": [ diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 9a495b82cd60..6648b4a74620 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -4350,7 +4350,7 @@ "auditMode": true, "gatherMode": false, "disableStorageReset": false, - "emulatedFormFactor": "mobile", + "formFactor": "mobile", "internalDisableDeviceScreenEmulation": false, "channel": "cli", "budgets": [ diff --git a/lighthouse-core/test/runner-test.js b/lighthouse-core/test/runner-test.js index 0e6e5cbfdb5f..5253f2d0671d 100644 --- a/lighthouse-core/test/runner-test.js +++ b/lighthouse-core/test/runner-test.js @@ -112,7 +112,7 @@ describe('Runner', () => { }); it('-A throws if the settings change', async () => { - const settings = {auditMode: artifactsPath, emulatedFormFactor: 'desktop'}; + const settings = {auditMode: artifactsPath, formFactor: 'desktop'}; const opts = {config: generateConfig(settings), driverMock}; try { await Runner.run(defaultGatherFn, opts); @@ -123,7 +123,7 @@ describe('Runner', () => { }); it('-A throws if the URL changes', async () => { - const settings = {auditMode: artifactsPath, emulatedFormFactor: 'desktop'}; + const settings = {auditMode: artifactsPath, formFactor: 'desktop'}; const opts = {url: 'https://differenturl.com', config: generateConfig(settings), driverMock}; try { await Runner.run(defaultGatherFn, opts); diff --git a/lighthouse-treemap/app/debug.json b/lighthouse-treemap/app/debug.json index 9de67df256ab..d6114711738f 100644 --- a/lighthouse-treemap/app/debug.json +++ b/lighthouse-treemap/app/debug.json @@ -16864,7 +16864,7 @@ "auditMode": true, "gatherMode": false, "disableStorageReset": false, - "emulatedFormFactor": "mobile", + "formFactor": "mobile", "internalDisableDeviceScreenEmulation": false, "channel": "cli", "budgets": null, diff --git a/proto/lighthouse-result.proto b/proto/lighthouse-result.proto index c103c44ef87a..e7b911c9d639 100644 --- a/proto/lighthouse-result.proto +++ b/proto/lighthouse-result.proto @@ -55,7 +55,7 @@ enum LighthouseError { DNS_FAILURE = 19; // A timeout in the initial connection to the debugger protocol. CRI_TIMEOUT = 20; - // The page requested was not HTML. + // The page requested was not HTML. NOT_HTML = 21; // The trace did not contain a ResourceSendRequest event. NO_RESOURCE_REQUEST = 22; @@ -127,7 +127,7 @@ message LighthouseResult { // Message containing the configuration settings for the LH run message ConfigSettings { // The possible form factors an audit can be run in - enum EmulatedFormFactor { + enum formFactor { // Unknown form factor. This should not be used UNKNOWN_FORM_FACTOR = 0; @@ -142,7 +142,7 @@ message LighthouseResult { } // The form factor used in the audit - EmulatedFormFactor emulated_form_factor = 1; + formFactor emulated_form_factor = 1; // The locale that was active during the audit string locale = 2; @@ -376,70 +376,70 @@ message I18n { // Descriptive explanation for emulation setting when emulating a generic desktop form factor, as opposed to a mobile-device like form factor. string runtime_desktop_emulation = 21; - + // Descriptive explanation for emulation setting when emulating a Nexus 5X mobile device. string runtime_mobile_emulation = 22; - + // Descriptive explanation for emulation setting when no device emulation is set. string runtime_no_emulation = 23; - + // Label for a row in a table that shows the estimated CPU power of the machine running Lighthouse. Example row values: 532, 1492, 783. string runtime_settings_benchmark = 24; - + // Label for a row in a table that describes the CPU throttling conditions that were used during a Lighthouse run, if any. string runtime_settings_CPU_throttling = 25; - + // Label for a row in a table that describes the kind of device that was emulated for the Lighthouse run. Example values for row elements: 'No Emulation', 'Emulated Desktop', etc. string runtime_settings_device = 26; - + // Label for a row in a table that shows the time at which a Lighthouse run was conducted; formatted as a timestamp, e.g. Jan 1, 1970 12:00 AM UTC. string runtime_settings_fetch_time = 27; - + // Label for a row in a table that describes the network throttling conditions that were used during a Lighthouse run, if any. string runtime_settings_network_throttling = 28; - + // Title of the Runtime settings table in a Lighthouse report. Runtime settings are the environment configurations that a specific report used at auditing time. string runtime_settings_title = 29; - + // Label for a row in a table that shows the User Agent that was detected on the Host machine that ran Lighthouse. string runtime_settings_UA = 30; - + // Label for a row in a table that shows the User Agent that was used to send out all network requests during the Lighthouse run. string runtime_settings_UA_network = 31; - + // Label for a row in a table that shows the URL that was audited during a Lighthouse run. string runtime_settings_Url = 32; - + // Descriptive explanation for a runtime setting that is set to an unknown value. string runtime_unknown = 33; - + // Option in a dropdown menu that copies the Lighthouse JSON object to the system clipboard. string dropdown_copy_JSON = 34; - + // Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes. string dropdown_dark_theme = 35; - - // Option in a dropdown menu that opens a full Lighthouse report in a print dialog. + + // Option in a dropdown menu that opens a full Lighthouse report in a print dialog. string dropdown_print_expanded = 36; - - // Option in a dropdown menu that opens a small, summary report in a print dialog. + + // Option in a dropdown menu that opens a small, summary report in a print dialog. string dropdown_print_summary = 37; - + // Option in a dropdown menu that saves the current report as a new Github Gist. string dropdown_save_gist = 38; - + // Option in a dropdown menu that saves the Lighthouse report HTML locally to the system as a '.html' file. string dropdown_save_HTML = 39; - + // Option in a dropdown menu that saves the Lighthouse JSON object to the local system as a '.json' file. string dropdown_save_JSON = 40; - + // Option in a dropdown menu that opens the current report in the Lighthouse Viewer Application. string dropdown_viewer = 41; - + // Label for button to create an issue against the Lighthouse Github project. string footer_issue = 42; - + // Descriptive explanation for environment throttling that was provided by the runtime environment instead of provided by Lighthouse throttling. string throttling_provided = 43; diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run-expected.txt b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run-expected.txt index 04281a8bb36f..18462d1674e2 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run-expected.txt +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run-expected.txt @@ -13,7 +13,7 @@ Tests that lighthouse panel passes flags. Generate report: enabled visible =============== Lighthouse Results =============== -emulatedFormFactor: desktop +formFactor: desktop disableStorageReset: false throttlingMethod: devtools TestedAsMobileDevice: false diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run.js b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run.js index 2ade417e58ec..c792d678f9c6 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run.js +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run.js @@ -21,7 +21,7 @@ const {artifacts, lhr} = await LighthouseTestRunner.waitForResults(); TestRunner.addResult('\n=============== Lighthouse Results ==============='); - TestRunner.addResult(`emulatedFormFactor: ${lhr.configSettings.emulatedFormFactor}`); + TestRunner.addResult(`formFactor: ${lhr.configSettings.formFactor}`); TestRunner.addResult(`disableStorageReset: ${lhr.configSettings.disableStorageReset}`); TestRunner.addResult(`throttlingMethod: ${lhr.configSettings.throttlingMethod}`); TestRunner.addResult(`TestedAsMobileDevice: ${artifacts.TestedAsMobileDevice}`); diff --git a/types/externs.d.ts b/types/externs.d.ts index 6a85747329a9..cf424999d4cc 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -121,8 +121,8 @@ declare global { /** Flag indicating that the browser storage should not be reset for the audit. */ disableStorageReset?: boolean; /** How emulation (useragent, device screen metrics, touch) should be applied. `none` indicates Lighthouse should leave the host browser as-is. */ - emulatedFormFactor?: 'mobile'|'desktop'|'none'; - /** Dangerous setting only to be used by Lighthouse team. Disables the device metrics and touch emulation that emulatedFormFactor defines. Details in emulation.js */ + formFactor?: 'mobile'|'desktop'|'none'; + /** Dangerous setting only to be used by Lighthouse team. Disables the device metrics and touch emulation that formFactor defines. Details in emulation.js */ internalDisableDeviceScreenEmulation?: boolean /** The method used to throttle the network. */ throttlingMethod?: 'devtools'|'simulate'|'provided'; From 565ee83a0076a88a23b5c5ee1e7d4004b25a4dad Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 2 Dec 2020 17:26:01 -0800 Subject: [PATCH 02/63] throw if eFF or internalDDSE are set --- lighthouse-core/config/config.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index 1190ecff58d4..d8d48dbcefbb 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -162,6 +162,17 @@ function assertValidGatherer(gathererInstance, gathererName) { } } +/** + * + * @param {LH.Config.Settings} settings + */ +function assertValidSettings(settings) { + // @ts-expect-error Checking for removed settings + if (settings['emulatedFormFactor'] || settings['internalDisableDeviceScreenEmulation']) { + throw new Error('Emulation setting changed in LH 7.0. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md'); // eslint-disable-line max-len + } +} + /** * Throws if pluginName is invalid or (somehow) collides with a category in the * configJSON being added to. @@ -354,6 +365,7 @@ class Config { Config.filterConfigIfNeeded(this); + assertValidSettings(this.settings); assertValidPasses(this.passes, this.audits); assertValidCategories(this.categories, this.audits, this.groups); From bd19dd8573658dec3e5e79239bf3ee9ced2a4f81 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 2 Dec 2020 17:31:54 -0800 Subject: [PATCH 03/63] mostly remove internalDisableDeviceScreenEmulation --- .../gather/gatherers/full-page-screenshot.js | 1 + lighthouse-core/test/gather/gather-runner-test.js | 14 +++++++------- lighthouse-core/test/lib/emulation-test.js | 1 - .../test/results/artifacts/artifacts.json | 1 - lighthouse-core/test/results/sample_v2.json | 1 - lighthouse-treemap/app/debug.json | 1 - types/externs.d.ts | 6 ++---- 7 files changed, 10 insertions(+), 15 deletions(-) diff --git a/lighthouse-core/gather/gatherers/full-page-screenshot.js b/lighthouse-core/gather/gatherers/full-page-screenshot.js index 73c9d0bda748..fe4cd2ba3158 100644 --- a/lighthouse-core/gather/gatherers/full-page-screenshot.js +++ b/lighthouse-core/gather/gatherers/full-page-screenshot.js @@ -116,6 +116,7 @@ class FullPageScreenshot extends Gatherer { // In case some other program is controlling emulation, try to remember what the device looks // like now and reset after gatherer is done. + // TODO(paulirish).. pull this from disableScreenEmu probably *** const lighthouseControlsEmulation = passContext.settings.formFactor !== 'none' && !passContext.settings.internalDisableDeviceScreenEmulation; diff --git a/lighthouse-core/test/gather/gather-runner-test.js b/lighthouse-core/test/gather/gather-runner-test.js index b0e1ee37a877..b15e130be7f3 100644 --- a/lighthouse-core/test/gather/gather-runner-test.js +++ b/lighthouse-core/test/gather/gather-runner-test.js @@ -239,7 +239,7 @@ describe('GatherRunner', function() { const driver = fakeDriver; const config = makeConfig({ passes: [], - settings: {formFactor: 'none', internalDisableDeviceScreenEmulation: false}, + settings: {formFactor: 'none'}, }); const options = {requestedUrl, driver, settings: config.settings}; @@ -251,7 +251,7 @@ describe('GatherRunner', function() { const driver = fakeDriver; const config = makeConfig({ passes: [], - settings: {formFactor: 'mobile', internalDisableDeviceScreenEmulation: false}, + settings: {formFactor: 'mobile'}, }); const options = {requestedUrl, driver, settings: config.settings}; @@ -263,7 +263,7 @@ describe('GatherRunner', function() { const driver = fakeDriverUsingRealMobileDevice; const config = makeConfig({ passes: [], - settings: {formFactor: 'none', internalDisableDeviceScreenEmulation: false}, + settings: {formFactor: 'none'}, }); const options = {requestedUrl, driver, settings: config.settings}; @@ -275,7 +275,7 @@ describe('GatherRunner', function() { const driver = fakeDriverUsingRealMobileDevice; const config = makeConfig({ passes: [], - settings: {formFactor: 'desktop', internalDisableDeviceScreenEmulation: false}, + settings: {formFactor: 'desktop'}, }); const options = {requestedUrl, driver, settings: config.settings}; @@ -326,7 +326,7 @@ describe('GatherRunner', function() { settings: { formFactor: 'mobile', throttlingMethod: 'provided', - internalDisableDeviceScreenEmulation: false, + , }, }); @@ -342,7 +342,7 @@ describe('GatherRunner', function() { /** @param {'mobile'|'desktop'|'none'} formFactor */ const getSettings = formFactor => ({ formFactor: formFactor, - internalDisableDeviceScreenEmulation: false, + , }); await GatherRunner.setupDriver(driver, {settings: getSettings('mobile')}); @@ -363,7 +363,7 @@ describe('GatherRunner', function() { it('sets throttling according to settings', async () => { await GatherRunner.setupDriver(driver, { settings: { - formFactor: 'mobile', internalDisableDeviceScreenEmulation: false, + formFactor: 'mobile', throttlingMethod: 'devtools', throttling: { requestLatencyMs: 100, diff --git a/lighthouse-core/test/lib/emulation-test.js b/lighthouse-core/test/lib/emulation-test.js index 89b02bcc3530..0f0f16239816 100644 --- a/lighthouse-core/test/lib/emulation-test.js +++ b/lighthouse-core/test/lib/emulation-test.js @@ -33,7 +33,6 @@ describe('emulation', () => { const getSettings = (formFactor, disableDeviceScreenEmulation) => ({ formFactor: formFactor, - internalDisableDeviceScreenEmulation: disableDeviceScreenEmulation, }); it('handles: formFactor: mobile / disableDeviceScreenEmulation: false', async () => { diff --git a/lighthouse-core/test/results/artifacts/artifacts.json b/lighthouse-core/test/results/artifacts/artifacts.json index 6b1d098aa20f..90cd1412ada3 100644 --- a/lighthouse-core/test/results/artifacts/artifacts.json +++ b/lighthouse-core/test/results/artifacts/artifacts.json @@ -29,7 +29,6 @@ "gatherMode": "lighthouse-core/test/results/artifacts", "disableStorageReset": false, "formFactor": "mobile", - "internalDisableDeviceScreenEmulation": false, "channel": "cli", "budgets": [ { diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 6648b4a74620..1d62d838691b 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -4351,7 +4351,6 @@ "gatherMode": false, "disableStorageReset": false, "formFactor": "mobile", - "internalDisableDeviceScreenEmulation": false, "channel": "cli", "budgets": [ { diff --git a/lighthouse-treemap/app/debug.json b/lighthouse-treemap/app/debug.json index d6114711738f..1977764ce1ab 100644 --- a/lighthouse-treemap/app/debug.json +++ b/lighthouse-treemap/app/debug.json @@ -16865,7 +16865,6 @@ "gatherMode": false, "disableStorageReset": false, "formFactor": "mobile", - "internalDisableDeviceScreenEmulation": false, "channel": "cli", "budgets": null, "locale": "en-US", diff --git a/types/externs.d.ts b/types/externs.d.ts index cf424999d4cc..2a88a9fa25bc 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -120,10 +120,8 @@ declare global { gatherMode?: boolean | string; /** Flag indicating that the browser storage should not be reset for the audit. */ disableStorageReset?: boolean; - /** How emulation (useragent, device screen metrics, touch) should be applied. `none` indicates Lighthouse should leave the host browser as-is. */ - formFactor?: 'mobile'|'desktop'|'none'; - /** Dangerous setting only to be used by Lighthouse team. Disables the device metrics and touch emulation that formFactor defines. Details in emulation.js */ - internalDisableDeviceScreenEmulation?: boolean + /** How Lighthouse should interpret this run in regards to perf scoring and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ + formFactor: 'mobile'|'desktop'; /** The method used to throttle the network. */ throttlingMethod?: 'devtools'|'simulate'|'provided'; /** The throttling config settings. */ From fac4b4650a4fd2340ebadb44e2b3c139f4ab7fa5 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 2 Dec 2020 18:25:23 -0800 Subject: [PATCH 04/63] remove TestedAsMobileDevice --- docs/plugins.md | 3 +- .../test/cli/__snapshots__/index-test.js.snap | 2 - .../dobetterweb/dbw-expectations.js | 1 - lighthouse-core/audits/content-width.js | 8 +-- .../audits/metrics/first-contentful-paint.js | 5 +- .../audits/metrics/first-cpu-idle.js | 6 +-- .../audits/metrics/first-meaningful-paint.js | 6 +-- lighthouse-core/audits/metrics/interactive.js | 6 +-- .../metrics/largest-contentful-paint.js | 6 +-- lighthouse-core/audits/metrics/speed-index.js | 6 +-- .../audits/metrics/total-blocking-time.js | 6 +-- lighthouse-core/audits/seo/font-size.js | 4 +- lighthouse-core/audits/seo/tap-targets.js | 4 +- lighthouse-core/config/config.js | 1 - lighthouse-core/config/constants.js | 1 - lighthouse-core/gather/gather-runner.js | 4 -- .../gather/gatherers/full-page-screenshot.js | 7 ++- lighthouse-core/lib/emulation.js | 1 + lighthouse-core/report/html/renderer/util.js | 9 ++-- .../build-report-for-autodeployment.js | 1 - .../test/audits/content-width-test.js | 2 - .../metrics/largest-contentful-paint-test.js | 7 +-- .../metrics/total-blocking-time-test.js | 9 ++-- .../test/audits/seo/font-size-test.js | 15 ++---- .../test/audits/seo/tap-targets-test.js | 10 ++-- .../metrics/first-contentful-paint-test.js | 6 +-- .../metrics/first-meaningful-paint-test.js | 7 ++- .../test/computed/metrics/interactive-test.js | 7 ++- .../test/computed/metrics/speed-index-test.js | 9 ++-- .../test/gather/gather-runner-test.js | 52 ------------------- .../gatherers/full-page-screenshot-test.js | 5 +- lighthouse-core/test/lib/emulation-test.js | 1 + .../test/report/html/renderer/util-test.js | 1 - .../test/results/artifacts/artifacts.json | 1 - lighthouse-core/test/runner-test.js | 3 +- .../lighthouse-emulate-run-expected.txt | 1 - .../lighthouse/lighthouse-emulate-run.js | 1 - .../lighthouse-flags-run-expected.txt | 1 - .../lighthouse/lighthouse-flags-run.js | 1 - .../lighthouse-successful-run-expected.txt | 1 - .../lighthouse/lighthouse-successful-run.js | 1 - types/artifacts.d.ts | 2 - 42 files changed, 65 insertions(+), 165 deletions(-) diff --git a/docs/plugins.md b/docs/plugins.md index e108ec15af37..06942b7ae875 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -223,7 +223,6 @@ The following artifacts are available for use in the audits of Lighthouse plugin - `RuntimeExceptions` - `ScriptElements` - `Stacks` -- `TestedAsMobileDevice` - `Timing` - `URL` - `ViewportDimensions` @@ -371,6 +370,6 @@ Most artifacts will try to represent as truthfully as possible what was observed - [Field Performance](https://github.com/treosh/lighthouse-plugin-field-performance) - A plugin to gather and display Chrome UX Report field data - [AMP Plugin](https://github.com/ampproject/amp-toolbox/tree/main/packages/lighthouse-plugin-amp) - Runs pages through the AMP validator. - [Publisher Ads Audits](https://github.com/googleads/pub-ads-lighthouse-plugin) - a well-written, but complex, plugin -- [Green Web Foundation](https://github.com/thegreenwebfoundation/lighthouse-plugin-greenhouse) - A plugin to see which domains run on renewable power. +- [Green Web Foundation](https://github.com/thegreenwebfoundation/lighthouse-plugin-greenhouse) - A plugin to see which domains run on renewable power. - [requests-content-md5](https://www.npmjs.com/package/lighthouse-plugin-md5) - Generates MD5 hashes from the content of network requests.. diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap index 47b56ec09ef5..feda53ff6361 100644 --- a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap +++ b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap @@ -1511,7 +1511,6 @@ Object { "formFactor": "mobile", "extraHeaders": null, "gatherMode": false, - "internalDisableDeviceScreenEmulation": false, "locale": "en-US", "maxWaitForFcp": 30000, "maxWaitForLoad": 45000, @@ -1660,7 +1659,6 @@ Object { "formFactor": "mobile", "extraHeaders": null, "gatherMode": false, - "internalDisableDeviceScreenEmulation": false, "locale": "en-US", "maxWaitForFcp": 30000, "maxWaitForLoad": 45000, diff --git a/lighthouse-cli/test/smokehouse/test-definitions/dobetterweb/dbw-expectations.js b/lighthouse-cli/test/smokehouse/test-definitions/dobetterweb/dbw-expectations.js index 2a972c8de923..40690e7aeee2 100644 --- a/lighthouse-cli/test/smokehouse/test-definitions/dobetterweb/dbw-expectations.js +++ b/lighthouse-cli/test/smokehouse/test-definitions/dobetterweb/dbw-expectations.js @@ -13,7 +13,6 @@ const expectations = [ { artifacts: { HostFormFactor: 'desktop', - TestedAsMobileDevice: true, Stacks: [{ id: 'jquery', }, { diff --git a/lighthouse-core/audits/content-width.js b/lighthouse-core/audits/content-width.js index 0c214925eae1..2881d6a9b984 100644 --- a/lighthouse-core/audits/content-width.js +++ b/lighthouse-core/audits/content-width.js @@ -38,21 +38,21 @@ class ContentWidth extends Audit { title: str_(UIStrings.title), failureTitle: str_(UIStrings.failureTitle), description: str_(UIStrings.description), - requiredArtifacts: ['ViewportDimensions', 'TestedAsMobileDevice'], + requiredArtifacts: ['ViewportDimensions'], }; } /** * @param {LH.Artifacts} artifacts + * @param {LH.Audit.Context} context * @return {LH.Audit.Product} */ - static audit(artifacts) { - const IsMobile = artifacts.TestedAsMobileDevice; + static audit(artifacts, context) { const viewportWidth = artifacts.ViewportDimensions.innerWidth; const windowWidth = artifacts.ViewportDimensions.outerWidth; const widthsMatch = viewportWidth === windowWidth; - if (!IsMobile) { + if (context.settings.formFactor !== 'mobile') { return { score: 1, notApplicable: true, diff --git a/lighthouse-core/audits/metrics/first-contentful-paint.js b/lighthouse-core/audits/metrics/first-contentful-paint.js index cbc0dc48d04a..226c9b73139c 100644 --- a/lighthouse-core/audits/metrics/first-contentful-paint.js +++ b/lighthouse-core/audits/metrics/first-contentful-paint.js @@ -27,7 +27,7 @@ class FirstContentfulPaint extends Audit { title: str_(i18n.UIStrings.firstContentfulPaintMetric), description: str_(UIStrings.description), scoreDisplayMode: Audit.SCORING_MODES.NUMERIC, - requiredArtifacts: ['traces', 'devtoolsLogs', 'TestedAsMobileDevice'], + requiredArtifacts: ['traces', 'devtoolsLogs'], }; } @@ -65,8 +65,7 @@ class FirstContentfulPaint extends Audit { const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS]; const metricComputationData = {trace, devtoolsLog, settings: context.settings}; const metricResult = await ComputedFcp.request(metricComputationData, context); - const isDesktop = artifacts.TestedAsMobileDevice === false; - const options = isDesktop ? context.options.desktop : context.options.mobile; + const options = context.options[context.settings.formFactor]; return { score: Audit.computeLogNormalScore( diff --git a/lighthouse-core/audits/metrics/first-cpu-idle.js b/lighthouse-core/audits/metrics/first-cpu-idle.js index f67de2aa03c2..192c70432fb4 100644 --- a/lighthouse-core/audits/metrics/first-cpu-idle.js +++ b/lighthouse-core/audits/metrics/first-cpu-idle.js @@ -27,7 +27,7 @@ class FirstCPUIdle extends Audit { title: str_(i18n.UIStrings.firstCPUIdleMetric), description: str_(UIStrings.description), scoreDisplayMode: Audit.SCORING_MODES.NUMERIC, - requiredArtifacts: ['traces', 'devtoolsLogs', 'TestedAsMobileDevice'], + requiredArtifacts: ['traces', 'devtoolsLogs'], }; } @@ -68,8 +68,8 @@ class FirstCPUIdle extends Audit { const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS]; const metricComputationData = {trace, devtoolsLog, settings: context.settings}; const metricResult = await ComputedFci.request(metricComputationData, context); - const isDesktop = artifacts.TestedAsMobileDevice === false; - const options = isDesktop ? context.options.desktop : context.options.mobile; + const options = context.options[context.settings.formFactor]; + return { score: Audit.computeLogNormalScore( diff --git a/lighthouse-core/audits/metrics/first-meaningful-paint.js b/lighthouse-core/audits/metrics/first-meaningful-paint.js index e9de3fabc0f1..cf6390cb102e 100644 --- a/lighthouse-core/audits/metrics/first-meaningful-paint.js +++ b/lighthouse-core/audits/metrics/first-meaningful-paint.js @@ -27,7 +27,7 @@ class FirstMeaningfulPaint extends Audit { title: str_(i18n.UIStrings.firstMeaningfulPaintMetric), description: str_(UIStrings.description), scoreDisplayMode: Audit.SCORING_MODES.NUMERIC, - requiredArtifacts: ['traces', 'devtoolsLogs', 'TestedAsMobileDevice'], + requiredArtifacts: ['traces', 'devtoolsLogs'], }; } @@ -68,8 +68,8 @@ class FirstMeaningfulPaint extends Audit { const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS]; const metricComputationData = {trace, devtoolsLog, settings: context.settings}; const metricResult = await ComputedFmp.request(metricComputationData, context); - const isDesktop = artifacts.TestedAsMobileDevice === false; - const options = isDesktop ? context.options.desktop : context.options.mobile; + const options = context.options[context.settings.formFactor]; + return { score: Audit.computeLogNormalScore( diff --git a/lighthouse-core/audits/metrics/interactive.js b/lighthouse-core/audits/metrics/interactive.js index b4435b47735a..ad3f36bb8028 100644 --- a/lighthouse-core/audits/metrics/interactive.js +++ b/lighthouse-core/audits/metrics/interactive.js @@ -33,7 +33,7 @@ class InteractiveMetric extends Audit { title: str_(i18n.UIStrings.interactiveMetric), description: str_(UIStrings.description), scoreDisplayMode: Audit.SCORING_MODES.NUMERIC, - requiredArtifacts: ['traces', 'devtoolsLogs', 'TestedAsMobileDevice'], + requiredArtifacts: ['traces', 'devtoolsLogs'], }; } @@ -72,8 +72,8 @@ class InteractiveMetric extends Audit { const metricComputationData = {trace, devtoolsLog, settings: context.settings}; const metricResult = await Interactive.request(metricComputationData, context); const timeInMs = metricResult.timing; - const isDesktop = artifacts.TestedAsMobileDevice === false; - const options = isDesktop ? context.options.desktop : context.options.mobile; + const options = context.options[context.settings.formFactor]; + return { score: Audit.computeLogNormalScore( diff --git a/lighthouse-core/audits/metrics/largest-contentful-paint.js b/lighthouse-core/audits/metrics/largest-contentful-paint.js index a560fe92fa2d..6cf411138f8d 100644 --- a/lighthouse-core/audits/metrics/largest-contentful-paint.js +++ b/lighthouse-core/audits/metrics/largest-contentful-paint.js @@ -28,7 +28,7 @@ class LargestContentfulPaint extends Audit { title: str_(i18n.UIStrings.largestContentfulPaintMetric), description: str_(UIStrings.description), scoreDisplayMode: Audit.SCORING_MODES.NUMERIC, - requiredArtifacts: ['HostUserAgent', 'traces', 'devtoolsLogs', 'TestedAsMobileDevice'], + requiredArtifacts: ['HostUserAgent', 'traces', 'devtoolsLogs'], }; } @@ -93,8 +93,8 @@ class LargestContentfulPaint extends Audit { throw err; } - const isDesktop = artifacts.TestedAsMobileDevice === false; - const options = isDesktop ? context.options.desktop : context.options.mobile; + const options = context.options[context.settings.formFactor]; + return { score: Audit.computeLogNormalScore( diff --git a/lighthouse-core/audits/metrics/speed-index.js b/lighthouse-core/audits/metrics/speed-index.js index df5306fcf2d2..c0b191752b8b 100644 --- a/lighthouse-core/audits/metrics/speed-index.js +++ b/lighthouse-core/audits/metrics/speed-index.js @@ -27,7 +27,7 @@ class SpeedIndex extends Audit { title: str_(i18n.UIStrings.speedIndexMetric), description: str_(UIStrings.description), scoreDisplayMode: Audit.SCORING_MODES.NUMERIC, - requiredArtifacts: ['traces', 'devtoolsLogs', 'TestedAsMobileDevice'], + requiredArtifacts: ['traces', 'devtoolsLogs'], }; } @@ -67,8 +67,8 @@ class SpeedIndex extends Audit { const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS]; const metricComputationData = {trace, devtoolsLog, settings: context.settings}; const metricResult = await ComputedSi.request(metricComputationData, context); - const isDesktop = artifacts.TestedAsMobileDevice === false; - const options = isDesktop ? context.options.desktop : context.options.mobile; + const options = context.options[context.settings.formFactor]; + return { score: Audit.computeLogNormalScore( diff --git a/lighthouse-core/audits/metrics/total-blocking-time.js b/lighthouse-core/audits/metrics/total-blocking-time.js index 038535bdc729..43a2126a84cd 100644 --- a/lighthouse-core/audits/metrics/total-blocking-time.js +++ b/lighthouse-core/audits/metrics/total-blocking-time.js @@ -27,7 +27,7 @@ class TotalBlockingTime extends Audit { title: str_(i18n.UIStrings.totalBlockingTimeMetric), description: str_(UIStrings.description), scoreDisplayMode: Audit.SCORING_MODES.NUMERIC, - requiredArtifacts: ['traces', 'devtoolsLogs', 'TestedAsMobileDevice'], + requiredArtifacts: ['traces', 'devtoolsLogs'], }; } @@ -83,8 +83,8 @@ class TotalBlockingTime extends Audit { const metricComputationData = {trace, devtoolsLog, settings: context.settings}; const metricResult = await ComputedTBT.request(metricComputationData, context); - const isDesktop = artifacts.TestedAsMobileDevice === false; - const options = isDesktop ? context.options.desktop : context.options.mobile; + const options = context.options[context.settings.formFactor]; + return { score: Audit.computeLogNormalScore( diff --git a/lighthouse-core/audits/seo/font-size.js b/lighthouse-core/audits/seo/font-size.js index 0484d20eeb4a..20944eabfb27 100644 --- a/lighthouse-core/audits/seo/font-size.js +++ b/lighthouse-core/audits/seo/font-size.js @@ -233,7 +233,7 @@ class FontSize extends Audit { title: str_(UIStrings.title), failureTitle: str_(UIStrings.failureTitle), description: str_(UIStrings.description), - requiredArtifacts: ['FontSize', 'URL', 'MetaElements', 'TestedAsMobileDevice'], + requiredArtifacts: ['FontSize', 'URL', 'MetaElements'], }; } @@ -243,7 +243,7 @@ class FontSize extends Audit { * @return {Promise} */ static async audit(artifacts, context) { - if (!artifacts.TestedAsMobileDevice) { + if (context.settings.formFactor === 'desktop') { // Font size isn't important to desktop SEO return { score: 1, diff --git a/lighthouse-core/audits/seo/tap-targets.js b/lighthouse-core/audits/seo/tap-targets.js index bbde34bc7c2a..b669d022abc1 100644 --- a/lighthouse-core/audits/seo/tap-targets.js +++ b/lighthouse-core/audits/seo/tap-targets.js @@ -268,7 +268,7 @@ class TapTargets extends Audit { title: str_(UIStrings.title), failureTitle: str_(UIStrings.failureTitle), description: str_(UIStrings.description), - requiredArtifacts: ['MetaElements', 'TapTargets', 'TestedAsMobileDevice'], + requiredArtifacts: ['MetaElements', 'TapTargets'], }; } @@ -278,7 +278,7 @@ class TapTargets extends Audit { * @return {Promise} */ static async audit(artifacts, context) { - if (!artifacts.TestedAsMobileDevice) { + if (context.settings.formFactor === 'desktop') { // Tap target sizes aren't important for desktop SEO, so disable the audit there. // On desktop people also tend to have more precise pointing devices than fingers. return { diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index d8d48dbcefbb..908eb6f74c87 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -28,7 +28,6 @@ const {requireAudits, resolveModule} = require('./config-helpers.js'); const BASE_ARTIFACT_BLANKS = { fetchTime: '', LighthouseRunWarnings: '', - TestedAsMobileDevice: '', HostFormFactor: '', HostUserAgent: '', NetworkUserAgent: '', diff --git a/lighthouse-core/config/constants.js b/lighthouse-core/config/constants.js index 859b3ebe6df8..bb40e79b279c 100644 --- a/lighthouse-core/config/constants.js +++ b/lighthouse-core/config/constants.js @@ -61,7 +61,6 @@ const defaultSettings = { gatherMode: false, disableStorageReset: false, formFactor: 'mobile', - internalDisableDeviceScreenEmulation: false, channel: 'node', // the following settings have no defaults but we still want ensure that `key in settings` diff --git a/lighthouse-core/gather/gather-runner.js b/lighthouse-core/gather/gather-runner.js index 8ba11e66b2db..a51190a44810 100644 --- a/lighthouse-core/gather/gather-runner.js +++ b/lighthouse-core/gather/gather-runner.js @@ -511,17 +511,13 @@ class GatherRunner { static async initializeBaseArtifacts(options) { const hostUserAgent = (await options.driver.getBrowserVersion()).userAgent; - const {formFactor} = options.settings; // Whether Lighthouse was run on a mobile device (i.e. not on a desktop machine). const HostFormFactor = hostUserAgent.includes('Android') || hostUserAgent.includes('Mobile') ? 'mobile' : 'desktop'; - const TestedAsMobileDevice = formFactor === 'mobile' || - (formFactor !== 'desktop' && HostFormFactor === 'mobile'); return { fetchTime: (new Date()).toJSON(), LighthouseRunWarnings: [], - TestedAsMobileDevice, HostFormFactor, HostUserAgent: hostUserAgent, NetworkUserAgent: '', // updated later diff --git a/lighthouse-core/gather/gatherers/full-page-screenshot.js b/lighthouse-core/gather/gatherers/full-page-screenshot.js index fe4cd2ba3158..bd6f33d57371 100644 --- a/lighthouse-core/gather/gatherers/full-page-screenshot.js +++ b/lighthouse-core/gather/gatherers/full-page-screenshot.js @@ -42,7 +42,7 @@ class FullPageScreenshot extends Gatherer { const height = Math.min(metrics.contentSize.height, MAX_SCREENSHOT_HEIGHT); await driver.sendCommand('Emulation.setDeviceMetricsOverride', { - mobile: passContext.baseArtifacts.TestedAsMobileDevice, + mobile: passContext.settings.formFactor === 'mobile', height, width, deviceScaleFactor: 1, @@ -117,8 +117,7 @@ class FullPageScreenshot extends Gatherer { // In case some other program is controlling emulation, try to remember what the device looks // like now and reset after gatherer is done. // TODO(paulirish).. pull this from disableScreenEmu probably *** - const lighthouseControlsEmulation = passContext.settings.formFactor !== 'none' && - !passContext.settings.internalDisableDeviceScreenEmulation; + const lighthouseControlsEmulation = passContext.settings.formFactor !== 'none' && !passContext.settings.internalDisableDeviceScreenEmulation; try { return { @@ -152,7 +151,7 @@ class FullPageScreenshot extends Gatherer { observedDeviceMetrics.screenOrientation.type = snakeCaseToCamelCase(observedDeviceMetrics.screenOrientation.type); await driver.sendCommand('Emulation.setDeviceMetricsOverride', { - mobile: passContext.baseArtifacts.TestedAsMobileDevice, // could easily be wrong + mobile: passContext.settings.formFactor === 'mobile', ...observedDeviceMetrics, }); } diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index ed682614a307..1447e1a5f63d 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -84,6 +84,7 @@ const emulationParams = { * @return {Promise} */ async function emulate(driver, settings) { + // TODO this is keeyed off the disable flags OR config if (!settings.formFactor || settings.formFactor === 'none') return; const params = emulationParams[settings.formFactor]; diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index 7b393d3e3ff1..e61958ce34a1 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -424,12 +424,9 @@ class Util { networkThrottling = Util.i18n.strings.runtimeUnknown; } - let deviceEmulation = Util.i18n.strings.runtimeNoEmulation; - if (settings.formFactor === 'mobile') { - deviceEmulation = Util.i18n.strings.runtimeMobileEmulation; - } else if (settings.formFactor === 'desktop') { - deviceEmulation = Util.i18n.strings.runtimeDesktopEmulation; - } + const deviceEmulation = settings.formFactor === 'mobile' + ? Util.i18n.strings.runtimeMobileEmulation + : Util.i18n.strings.runtimeDesktopEmulation; return { deviceEmulation, diff --git a/lighthouse-core/scripts/build-report-for-autodeployment.js b/lighthouse-core/scripts/build-report-for-autodeployment.js index 47d126f76ac2..752412db14d2 100644 --- a/lighthouse-core/scripts/build-report-for-autodeployment.js +++ b/lighthouse-core/scripts/build-report-for-autodeployment.js @@ -76,7 +76,6 @@ async function generateErrorLHR() { LighthouseRunWarnings: [ `Something went wrong with recording the trace over your page load. Please run Lighthouse again. (NO_FCP)`, // eslint-disable-line max-len ], - TestedAsMobileDevice: true, HostFormFactor: 'desktop', HostUserAgent: 'Mozilla/5.0 ErrorUserAgent Chrome/66', NetworkUserAgent: 'Mozilla/5.0 ErrorUserAgent Chrome/66', diff --git a/lighthouse-core/test/audits/content-width-test.js b/lighthouse-core/test/audits/content-width-test.js index 409563de637d..b061a437e018 100644 --- a/lighthouse-core/test/audits/content-width-test.js +++ b/lighthouse-core/test/audits/content-width-test.js @@ -13,7 +13,6 @@ const assert = require('assert').strict; describe('Mobile-friendly: content-width audit', () => { it('fails when scroll width differs from viewport width', () => { const result = Audit.audit({ - TestedAsMobileDevice: true, ViewportDimensions: { innerWidth: 100, outerWidth: 300, @@ -36,7 +35,6 @@ describe('Mobile-friendly: content-width audit', () => { it('not applicable when run on desktop', () => { return assert.equal(Audit.audit({ - TestedAsMobileDevice: false, ViewportDimensions: { innerWidth: 300, outerWidth: 450, diff --git a/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js b/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js index 3d9bf74ab77f..940c3bb1ca60 100644 --- a/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js +++ b/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js @@ -14,11 +14,10 @@ const devtoolsLog = require('../../fixtures/traces/lcp-m78.devtools.log.json'); const preLcpTrace = require('../../fixtures/traces/progressive-app-m60.json'); const preLcpDevtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); -function generateArtifacts({trace, devtoolsLog, TestedAsMobileDevice, HostUserAgent}) { +function generateArtifacts({trace, devtoolsLog, HostUserAgent}) { return { traces: {[LCPAudit.DEFAULT_PASS]: trace}, devtoolsLogs: {[LCPAudit.DEFAULT_PASS]: devtoolsLog}, - TestedAsMobileDevice, HostUserAgent, }; } @@ -34,7 +33,6 @@ describe('Performance: largest-contentful-paint audit', () => { const artifactsMobile = generateArtifacts({ trace, devtoolsLog, - TestedAsMobileDevice: true, HostUserAgent: 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) ' + 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 ' + 'Mobile Safari/537.36 Chrome-Lighthouse', @@ -49,7 +47,6 @@ describe('Performance: largest-contentful-paint audit', () => { const artifactsDesktop = generateArtifacts({ trace, devtoolsLog, - TestedAsMobileDevice: false, HostUserAgent: 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) ' + 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 ' + 'Mobile Safari/537.36 Chrome-Lighthouse', @@ -66,7 +63,6 @@ describe('Performance: largest-contentful-paint audit', () => { const artifactsOldChrome = generateArtifacts({ trace: preLcpTrace, devtoolsLog: preLcpDevtoolsLog, - TestedAsMobileDevice: true, HostUserAgent: 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) ' + 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 ' + 'Mobile Safari/537.36 Chrome-Lighthouse', @@ -79,7 +75,6 @@ describe('Performance: largest-contentful-paint audit', () => { const artifactsNewChrome = generateArtifacts({ trace: preLcpTrace, devtoolsLog: preLcpDevtoolsLog, - TestedAsMobileDevice: true, HostUserAgent: 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) ' + 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 ' + 'Mobile Safari/537.36 Chrome-Lighthouse', diff --git a/lighthouse-core/test/audits/metrics/total-blocking-time-test.js b/lighthouse-core/test/audits/metrics/total-blocking-time-test.js index 1e2718f3a00a..b4c44ed542d9 100644 --- a/lighthouse-core/test/audits/metrics/total-blocking-time-test.js +++ b/lighthouse-core/test/audits/metrics/total-blocking-time-test.js @@ -14,11 +14,10 @@ const devtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools. const lcpTrace = require('../../fixtures/traces/lcp-m78.json'); const lcpDevtoolsLog = require('../../fixtures/traces/lcp-m78.devtools.log.json'); -function generateArtifacts({trace, devtoolsLog, TestedAsMobileDevice}) { +function generateArtifacts({trace, devtoolsLog}) { return { traces: {[TBTAudit.DEFAULT_PASS]: trace}, devtoolsLogs: {[TBTAudit.DEFAULT_PASS]: devtoolsLog}, - TestedAsMobileDevice, }; } @@ -30,7 +29,7 @@ function generateContext({throttlingMethod}) { describe('Performance: total-blocking-time audit', () => { it('evaluates Total Blocking Time metric properly', async () => { - const artifacts = generateArtifacts({trace, devtoolsLog, TestedAsMobileDevice: true}); + const artifacts = generateArtifacts({trace, devtoolsLog}); const context = generateContext({throttlingMethod: 'provided'}); const output = await TBTAudit.audit(artifacts, context); @@ -41,7 +40,7 @@ describe('Performance: total-blocking-time audit', () => { it('adjusts scoring based on form factor', async () => { const artifactsMobile = generateArtifacts({trace: lcpTrace, - devtoolsLog: lcpDevtoolsLog, TestedAsMobileDevice: true}); + devtoolsLog: lcpDevtoolsLog}); const contextMobile = generateContext({throttlingMethod: 'provided'}); const outputMobile = await TBTAudit.audit(artifactsMobile, contextMobile); @@ -50,7 +49,7 @@ describe('Performance: total-blocking-time audit', () => { expect(outputMobile.displayValue).toBeDisplayString('330\xa0ms'); const artifactsDesktop = generateArtifacts({trace: lcpTrace, - devtoolsLog: lcpDevtoolsLog, TestedAsMobileDevice: false}); + devtoolsLog: lcpDevtoolsLog}); const contextDesktop = generateContext({throttlingMethod: 'provided'}); const outputDesktop = await TBTAudit.audit(artifactsDesktop, contextDesktop); diff --git a/lighthouse-core/test/audits/seo/font-size-test.js b/lighthouse-core/test/audits/seo/font-size-test.js index 6957b1be6325..5c3b8649764a 100644 --- a/lighthouse-core/test/audits/seo/font-size-test.js +++ b/lighthouse-core/test/audits/seo/font-size-test.js @@ -25,7 +25,6 @@ describe('SEO: Font size audit', () => { URL, MetaElements: [], FontSize: [], - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); @@ -48,7 +47,6 @@ describe('SEO: Font size audit', () => { {nodeId: 2, textLength: 31, fontSize: 11, parentNode: {nodeName: 'p', attributes: []}}, ], }, - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); @@ -68,7 +66,6 @@ describe('SEO: Font size audit', () => { {nodeId: 1, textLength: 0, fontSize: 11, parentNode: {nodeName: 'p', attributes: []}}, ], }, - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); @@ -88,7 +85,6 @@ describe('SEO: Font size audit', () => { {nodeId: 2, textLength: 22, fontSize: 11, parentNode: {nodeName: 'p', attributes: []}}, ], }, - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); assert.equal(auditResult.score, 1); @@ -125,7 +121,6 @@ describe('SEO: Font size audit', () => { {nodeId: 3, textLength: 2, fontSize: 10, parentNode: {}, cssRule: style2}, ], }, - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); @@ -147,7 +142,6 @@ describe('SEO: Font size audit', () => { {textLength: 10, fontSize: 10, parentNode: {nodeId: 1, nodeName: 'p', attributes: []}}, ], }, - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); assert.equal(auditResult.score, 0); @@ -170,7 +164,6 @@ describe('SEO: Font size audit', () => { {textLength: 50, fontSize: 10, parentNode: {nodeId: 1, nodeName: 'p', attributes: []}}, ], }, - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); assert.equal(auditResult.score, 0); @@ -190,7 +183,6 @@ describe('SEO: Font size audit', () => { {textLength: 22, fontSize: 11, parentNode: {nodeId: 2, nodeName: 'p', attributes: []}}, ], }, - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); expect(auditResult.displayValue).toBeDisplayString('89.78% legible text'); @@ -209,7 +201,6 @@ describe('SEO: Font size audit', () => { {textLength: 4, fontSize: 11, parentNode: {nodeId: 2, nodeName: 'p', attributes: []}}, ], }, - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); expect(auditResult.displayValue).toBeDisplayString('2.48% legible text'); @@ -220,9 +211,10 @@ describe('SEO: Font size audit', () => { URL, MetaElements: [], FontSize: {}, - TestedAsMobileDevice: false, }; - const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); + const desktopContext = getFakeContext(); + desktopContext.settings = {formFactor: 'desktop'}; + const auditResult = await FontSizeAudit.audit(artifacts, desktopContext); expect(auditResult.score).toBe(1); expect(auditResult.notApplicable).toBe(true); }); @@ -237,7 +229,6 @@ describe('SEO: Font size audit', () => { {textLength: 1, fontSize: 1, parentNode: {...nodeProperties}, cssRule: style}, ], }, - TestedAsMobileDevice: true, }; const auditResult = await FontSizeAudit.audit(artifacts, getFakeContext()); expect(auditResult.details.items).toHaveLength(1); diff --git a/lighthouse-core/test/audits/seo/tap-targets-test.js b/lighthouse-core/test/audits/seo/tap-targets-test.js index a6466de114e9..2a7630e236ea 100644 --- a/lighthouse-core/test/audits/seo/tap-targets-test.js +++ b/lighthouse-core/test/audits/seo/tap-targets-test.js @@ -15,14 +15,13 @@ const getFakeContext = () => ({computedCache: new Map()}); function auditTapTargets(tapTargets, {MetaElements = [{ name: 'viewport', content: 'width=device-width', -}], TestedAsMobileDevice = true} = {}) { +}]} = {}, context = getFakeContext()) { const artifacts = { TapTargets: tapTargets, MetaElements, - TestedAsMobileDevice, }; - return TapTargetsAudit.audit(artifacts, getFakeContext()); + return TapTargetsAudit.audit(artifacts, context); } const tapTargetSize = 10; @@ -213,9 +212,12 @@ describe('SEO: Tap targets audit', () => { }); it('is not applicable on desktop', async () => { + const desktopContext = getFakeContext(); + desktopContext.settings = {formFactor: 'desktop'}; + const auditResult = await auditTapTargets(getBorderlineTapTargets({ overlapSecondClientRect: true, - }), {TestedAsMobileDevice: false}); + }), desktopContext); assert.equal(auditResult.score, 1); assert.equal(auditResult.notApplicable, true); }); diff --git a/lighthouse-core/test/computed/metrics/first-contentful-paint-test.js b/lighthouse-core/test/computed/metrics/first-contentful-paint-test.js index 329f8107aba5..4eb38adef1d8 100644 --- a/lighthouse-core/test/computed/metrics/first-contentful-paint-test.js +++ b/lighthouse-core/test/computed/metrics/first-contentful-paint-test.js @@ -31,7 +31,7 @@ describe('Metrics: FCP', () => { }); it('should compute an observed value (desktop)', async () => { - const settings = {throttlingMethod: 'provided'}; + const settings = {throttlingMethod: 'provided', formFactor: 'desktop'}; const context = {settings, computedCache: new Map()}; const result = await FirstContentfulPaint.request({trace, devtoolsLog, settings}, context); @@ -40,10 +40,10 @@ describe('Metrics: FCP', () => { }); it('should compute an observed value (mobile)', async () => { - const settings = {throttlingMethod: 'provided'}; + const settings = {throttlingMethod: 'provided', formFactor: 'mobile'}; const context = {settings, computedCache: new Map()}; const result = await FirstContentfulPaint.request( - {trace, devtoolsLog, settings, TestedAsMobileDevice: true}, context); + {trace, devtoolsLog, settings}, context); assert.equal(Math.round(result.timing), 499); assert.equal(result.timestamp, 225414670885); diff --git a/lighthouse-core/test/computed/metrics/first-meaningful-paint-test.js b/lighthouse-core/test/computed/metrics/first-meaningful-paint-test.js index f5f3a6378dc7..998b99d6c044 100644 --- a/lighthouse-core/test/computed/metrics/first-meaningful-paint-test.js +++ b/lighthouse-core/test/computed/metrics/first-meaningful-paint-test.js @@ -58,7 +58,7 @@ describe('Metrics: FMP', () => { }); it('should compute an observed value (desktop)', async () => { - settings = {throttlingMethod: 'provided'}; + settings = {throttlingMethod: 'provided', formFactor: 'desktop'}; const context = {computedCache: new Map()}; const result = await FirstMeaningfulPaint.request({trace, devtoolsLog, settings}, context); @@ -67,10 +67,9 @@ describe('Metrics: FMP', () => { }); it('should compute an observed value (mobile)', async () => { - settings = {throttlingMethod: 'provided'}; + settings = {throttlingMethod: 'provided', formFactor: 'mobile'}; const context = {computedCache: new Map()}; - const result = await FirstMeaningfulPaint.request( - {trace, devtoolsLog, settings, TestedAsMobileDevice: true}, context); + const result = await FirstMeaningfulPaint.request({trace, devtoolsLog, settings}, context); assert.equal(Math.round(result.timing), 783); assert.equal(result.timestamp, 225414955343); diff --git a/lighthouse-core/test/computed/metrics/interactive-test.js b/lighthouse-core/test/computed/metrics/interactive-test.js index 6a263bd7c5a8..a3b6105009e1 100644 --- a/lighthouse-core/test/computed/metrics/interactive-test.js +++ b/lighthouse-core/test/computed/metrics/interactive-test.js @@ -45,7 +45,7 @@ describe('Metrics: TTI', () => { }); it('should compute an observed value (desktop)', async () => { - const settings = {throttlingMethod: 'provided'}; + const settings = {throttlingMethod: 'provided', formFactor: 'desktop'}; const context = {settings, computedCache: new Map()}; const result = await Interactive.request({trace, devtoolsLog, settings}, context); @@ -54,10 +54,9 @@ describe('Metrics: TTI', () => { }); it('should compute an observed value (mobile)', async () => { - const settings = {throttlingMethod: 'provided'}; + const settings = {throttlingMethod: 'provided', formFactor: 'mobile'}; const context = {settings, computedCache: new Map()}; - const result = await Interactive.request( - {trace, devtoolsLog, settings, TestedAsMobileDevice: true}, context); + const result = await Interactive.request({trace, devtoolsLog, settings}, context); assert.equal(Math.round(result.timing), 1582); assert.equal(result.timestamp, 225415754204); diff --git a/lighthouse-core/test/computed/metrics/speed-index-test.js b/lighthouse-core/test/computed/metrics/speed-index-test.js index f9103e3e2024..1981bd394fb8 100644 --- a/lighthouse-core/test/computed/metrics/speed-index-test.js +++ b/lighthouse-core/test/computed/metrics/speed-index-test.js @@ -68,7 +68,7 @@ describe('Metrics: Speed Index', () => { }); it('should compute an observed value (desktop)', async () => { - const settings = {throttlingMethod: 'provided'}; + const settings = {throttlingMethod: 'provided', formFactor: 'desktop'}; const context = {settings, computedCache: new Map()}; const result = await SpeedIndex.request({trace, devtoolsLog, settings}, context); @@ -77,12 +77,9 @@ describe('Metrics: Speed Index', () => { }); it('should compute an observed value (mobile)', async () => { - const settings = {throttlingMethod: 'provided'}; + const settings = {throttlingMethod: 'provided', formFactor: 'mobile'}; const context = {settings, computedCache: new Map()}; - const result = await SpeedIndex.request( - {trace, devtoolsLog, settings, TestedAsMobileDevice: true}, - context - ); + const result = await SpeedIndex.request({trace, devtoolsLog, settings}, context); assert.equal(result.timing, 605); assert.equal(result.timestamp, 225414777015); diff --git a/lighthouse-core/test/gather/gather-runner-test.js b/lighthouse-core/test/gather/gather-runner-test.js index b15e130be7f3..3adbb209808e 100644 --- a/lighthouse-core/test/gather/gather-runner-test.js +++ b/lighthouse-core/test/gather/gather-runner-test.js @@ -232,58 +232,6 @@ describe('GatherRunner', function() { }); }); - describe('collects TestedAsMobileDevice as an artifact', () => { - const requestedUrl = 'https://example.com'; - - it('works when running on desktop device without emulation', async () => { - const driver = fakeDriver; - const config = makeConfig({ - passes: [], - settings: {formFactor: 'none'}, - }); - const options = {requestedUrl, driver, settings: config.settings}; - - const results = await GatherRunner.run(config.passes, options); - expect(results.TestedAsMobileDevice).toBe(false); - }); - - it('works when running on desktop device with mobile emulation', async () => { - const driver = fakeDriver; - const config = makeConfig({ - passes: [], - settings: {formFactor: 'mobile'}, - }); - const options = {requestedUrl, driver, settings: config.settings}; - - const results = await GatherRunner.run(config.passes, options); - expect(results.TestedAsMobileDevice).toBe(true); - }); - - it('works when running on mobile device without emulation', async () => { - const driver = fakeDriverUsingRealMobileDevice; - const config = makeConfig({ - passes: [], - settings: {formFactor: 'none'}, - }); - const options = {requestedUrl, driver, settings: config.settings}; - - const results = await GatherRunner.run(config.passes, options); - expect(results.TestedAsMobileDevice).toBe(true); - }); - - it('works when running on mobile device with desktop emulation', async () => { - const driver = fakeDriverUsingRealMobileDevice; - const config = makeConfig({ - passes: [], - settings: {formFactor: 'desktop'}, - }); - const options = {requestedUrl, driver, settings: config.settings}; - - const results = await GatherRunner.run(config.passes, options); - expect(results.TestedAsMobileDevice).toBe(false); - }); - }); - describe('collects HostFormFactor as an artifact', () => { const requestedUrl = 'https://example.com'; diff --git a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js index c5a1fc830b15..a6e4f69f07cf 100644 --- a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js +++ b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js @@ -115,12 +115,9 @@ describe('FullPageScreenshot gatherer', () => { }); const passContext = { settings: { - formFactor: 'none', + formFactor: 'mobile', }, driver, - baseArtifacts: { - TestedAsMobileDevice: true, - }, }; await fpsGatherer.afterPass(passContext); diff --git a/lighthouse-core/test/lib/emulation-test.js b/lighthouse-core/test/lib/emulation-test.js index 0f0f16239816..f159f286a000 100644 --- a/lighthouse-core/test/lib/emulation-test.js +++ b/lighthouse-core/test/lib/emulation-test.js @@ -59,6 +59,7 @@ describe('emulation', () => { expect(emulateArgs).toMatchObject({mobile: false}); }); + // TODO it('handles: formFactor: none / disableDeviceScreenEmulation: false', async () => { await emulation.emulate(driver, getSettings('none', false)); expect(connectionStub.sendCommand).not.toHaveBeenCalledWith( diff --git a/lighthouse-core/test/report/html/renderer/util-test.js b/lighthouse-core/test/report/html/renderer/util-test.js index 8acd745870cb..0ddce23239ad 100644 --- a/lighthouse-core/test/report/html/renderer/util-test.js +++ b/lighthouse-core/test/report/html/renderer/util-test.js @@ -35,7 +35,6 @@ describe('util helpers', () => { it('builds device emulation string', () => { const get = opts => Util.getEmulationDescriptions(opts).deviceEmulation; - assert.equal(get({formFactor: 'none'}), 'No emulation'); assert.equal(get({formFactor: 'mobile'}), 'Emulated Moto G4'); assert.equal(get({formFactor: 'desktop'}), 'Emulated Desktop'); }); diff --git a/lighthouse-core/test/results/artifacts/artifacts.json b/lighthouse-core/test/results/artifacts/artifacts.json index 90cd1412ada3..bd7c6e8d72c6 100644 --- a/lighthouse-core/test/results/artifacts/artifacts.json +++ b/lighthouse-core/test/results/artifacts/artifacts.json @@ -2,7 +2,6 @@ "LighthouseRunWarnings": [], "BenchmarkIndex": 1000, "HostFormFactor": "desktop", - "TestedAsMobileDevice": true, "HostUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4232.0 Safari/537.36", "NetworkUserAgent": "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36(KHTML, like Gecko) Chrome/66.0.3359.30 Mobile Safari/537.36", "fetchTime": "2018-03-13T00:55:45.840Z", diff --git a/lighthouse-core/test/runner-test.js b/lighthouse-core/test/runner-test.js index 5253f2d0671d..d5b085bcee47 100644 --- a/lighthouse-core/test/runner-test.js +++ b/lighthouse-core/test/runner-test.js @@ -412,7 +412,6 @@ describe('Runner', () => { const artifacts = { ...baseArtifacts, ViewportDimensions: new Error(errorMessage), - TestedAsMobileDevice: true, }; const artifactsPath = '.tmp/test_artifacts'; const resolvedPath = path.resolve(process.cwd(), artifactsPath); @@ -424,7 +423,7 @@ describe('Runner', () => { auditMode: resolvedPath, }, audits: [ - // requires ViewportDimensions and TestedAsMobileDevice artifacts + // requires ViewportDimensions artifact 'content-width', ], }); diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt index c5305d63fa80..5e1e37020c5c 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt @@ -15,7 +15,6 @@ Generate report: enabled visible =============== Lighthouse Results =============== URL: http://127.0.0.1:8000/devtools/lighthouse/resources/lighthouse-emulate-pass.html Version: 6.5.0 -TestedAsMobileDevice: true ViewportDimensions: { "innerWidth": 360, "innerHeight": 640, diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run.js b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run.js index 82d73e7b19f1..8d2c42f8bd98 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run.js +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run.js @@ -16,7 +16,6 @@ TestRunner.addResult('\n=============== Lighthouse Results ==============='); TestRunner.addResult(`URL: ${lhr.finalUrl}`); TestRunner.addResult(`Version: ${lhr.lighthouseVersion}`); - TestRunner.addResult(`TestedAsMobileDevice: ${artifacts.TestedAsMobileDevice}`); TestRunner.addResult(`ViewportDimensions: ${JSON.stringify(artifacts.ViewportDimensions, null, 2)}`); TestRunner.addResult('\n'); diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run-expected.txt b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run-expected.txt index 18462d1674e2..0970a6eca503 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run-expected.txt +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run-expected.txt @@ -16,7 +16,6 @@ Generate report: enabled visible formFactor: desktop disableStorageReset: false throttlingMethod: devtools -TestedAsMobileDevice: false View Trace Button Text: "View Trace" View Trace Button Title: "" diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run.js b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run.js index c792d678f9c6..17a8f422aaaf 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run.js +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-flags-run.js @@ -24,7 +24,6 @@ TestRunner.addResult(`formFactor: ${lhr.configSettings.formFactor}`); TestRunner.addResult(`disableStorageReset: ${lhr.configSettings.disableStorageReset}`); TestRunner.addResult(`throttlingMethod: ${lhr.configSettings.throttlingMethod}`); - TestRunner.addResult(`TestedAsMobileDevice: ${artifacts.TestedAsMobileDevice}`); const viewTraceButton = LighthouseTestRunner.getResultsElement().querySelector('.view-trace'); TestRunner.addResult(`\nView Trace Button Text: "${viewTraceButton.textContent}"`); diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run-expected.txt b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run-expected.txt index 791a6cb71326..e5a7dbf73972 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run-expected.txt +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run-expected.txt @@ -390,7 +390,6 @@ Generating results... =============== Lighthouse Results =============== URL: http://127.0.0.1:8000/devtools/lighthouse/resources/lighthouse-basic.html Version: 6.5.0 -TestedAsMobileDevice: true ViewportDimensions: { "innerWidth": 980, "innerHeight": 1743, diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run.js b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run.js index 9ce7d9db370f..8f42d25682f8 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run.js +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-successful-run.js @@ -60,7 +60,6 @@ TestRunner.addResult('\n=============== Lighthouse Results ==============='); TestRunner.addResult(`URL: ${lhr.finalUrl}`); TestRunner.addResult(`Version: ${lhr.lighthouseVersion}`); - TestRunner.addResult(`TestedAsMobileDevice: ${artifacts.TestedAsMobileDevice}`); TestRunner.addResult(`ViewportDimensions: ${JSON.stringify(artifacts.ViewportDimensions, null, 2)}`); TestRunner.addResult('\n'); diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts index 9db440524d6a..3b3fc20a7123 100644 --- a/types/artifacts.d.ts +++ b/types/artifacts.d.ts @@ -28,8 +28,6 @@ declare global { fetchTime: string; /** A set of warnings about unexpected things encountered while loading and testing the page. */ LighthouseRunWarnings: Array; - /** Whether the page was loaded on either a real or emulated mobile device. */ - TestedAsMobileDevice: boolean; /** Device which Chrome is running on. */ HostFormFactor: 'desktop'|'mobile'; /** The user agent string of the version of Chrome used. */ From 40e26172f9c49c12bffe2c4415e067acf19686d4 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 2 Dec 2020 18:36:08 -0800 Subject: [PATCH 05/63] add disableScreenEmulation --- lighthouse-core/config/constants.js | 1 + lighthouse-core/lib/emulation.js | 4 ++-- types/externs.d.ts | 2 ++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/config/constants.js b/lighthouse-core/config/constants.js index bb40e79b279c..19761afe0755 100644 --- a/lighthouse-core/config/constants.js +++ b/lighthouse-core/config/constants.js @@ -61,6 +61,7 @@ const defaultSettings = { gatherMode: false, disableStorageReset: false, formFactor: 'mobile', + disableScreenEmulation: false, channel: 'node', // the following settings have no defaults but we still want ensure that `key in settings` diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index 1447e1a5f63d..e4d58b73d6d7 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -85,7 +85,7 @@ const emulationParams = { */ async function emulate(driver, settings) { // TODO this is keeyed off the disable flags OR config - if (!settings.formFactor || settings.formFactor === 'none') return; + const params = emulationParams[settings.formFactor]; // In DevTools, emulation is applied before Lighthouse starts (to deal with viewport emulation bugs) @@ -96,7 +96,7 @@ async function emulate(driver, settings) { await driver.sendCommand('Network.enable'); await driver.sendCommand('Network.setUserAgentOverride', {userAgent: params.userAgent}); - if (!settings.internalDisableDeviceScreenEmulation) { + if (settings.disableScreenEmulation) { await driver.sendCommand('Emulation.setDeviceMetricsOverride', params.metrics); await driver.sendCommand('Emulation.setTouchEmulationEnabled', {enabled: params.touchEnabled}); } diff --git a/types/externs.d.ts b/types/externs.d.ts index 2a88a9fa25bc..e0f97670e2a5 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -122,6 +122,8 @@ declare global { disableStorageReset?: boolean; /** How Lighthouse should interpret this run in regards to perf scoring and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor: 'mobile'|'desktop'; + /** If true, Lighthouse will not apply any screen/viewport emulation. Typically set to true if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. **TODO: What do we recommend for desktop?** */ + disableScreenEmulation: boolean /** The method used to throttle the network. */ throttlingMethod?: 'devtools'|'simulate'|'provided'; /** The throttling config settings. */ From 1e97bf8b81cb512aab514987d55213993a71822c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 2 Dec 2020 18:57:34 -0800 Subject: [PATCH 06/63] add screenEmulation and emulatedUserAgent to config --- lighthouse-core/config/constants.js | 51 +++++++++++++++- lighthouse-core/config/lr-desktop-config.js | 6 +- lighthouse-core/config/lr-mobile-config.js | 1 + lighthouse-core/lib/emulation.js | 66 ++------------------- types/externs.d.ts | 6 +- 5 files changed, 63 insertions(+), 67 deletions(-) diff --git a/lighthouse-core/config/constants.js b/lighthouse-core/config/constants.js index 19761afe0755..345e7302f1a0 100644 --- a/lighthouse-core/config/constants.js +++ b/lighthouse-core/config/constants.js @@ -50,18 +50,61 @@ const throttling = { }, }; +/** + * @type {LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest} + */ +const MOTOG4_EMULATION_METRICS = { + mobile: true, + width: 360, + height: 640, + // Moto G4 is really 3, but a higher value here works against + // our perf recommendations. + // https://github.com/GoogleChrome/lighthouse/issues/10741#issuecomment-626903508 + deviceScaleFactor: 2.625, +}; + +/** + * Desktop metrics adapted from emulated_devices/module.json + * @type {LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest} + */ +const DESKTOP_EMULATION_METRICS = { + mobile: false, + width: 1350, + height: 940, + deviceScaleFactor: 1, +}; + +const screenEmulationMetrics = { + mobile: MOTOG4_EMULATION_METRICS, + desktop: DESKTOP_EMULATION_METRICS, +} + +// eslint-disable-next-line max-len +const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse'; +// eslint-disable-next-line max-len +const DESKTOP_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Safari/537.36 Chrome-Lighthouse'; + +const userAgents = { + mobile: MOTOG4_USERAGENT, + desktop: DESKTOP_USERAGENT, +}; + /** @type {LH.Config.Settings} */ const defaultSettings = { output: 'json', maxWaitForFcp: 30 * 1000, maxWaitForLoad: 45 * 1000, - throttlingMethod: 'simulate', + + formFactor: 'mobile', throttling: throttling.mobileSlow4G, + throttlingMethod: 'simulate', + disableScreenEmulation: false, + screenEmulation: screenEmulationMetrics.mobile, + emulatedUserAgent: userAgents.mobile, + auditMode: false, gatherMode: false, disableStorageReset: false, - formFactor: 'mobile', - disableScreenEmulation: false, channel: 'node', // the following settings have no defaults but we still want ensure that `key in settings` @@ -101,6 +144,8 @@ const nonSimulatedPassConfigOverrides = { module.exports = { throttling, + screenEmulationMetrics, + userAgents, defaultSettings, defaultPassConfig, nonSimulatedPassConfigOverrides, diff --git a/lighthouse-core/config/lr-desktop-config.js b/lighthouse-core/config/lr-desktop-config.js index f5eec966dec2..9b9c9479d02f 100644 --- a/lighthouse-core/config/lr-desktop-config.js +++ b/lighthouse-core/config/lr-desktop-config.js @@ -5,7 +5,7 @@ */ 'use strict'; -const desktopDense4G = require('./constants.js').throttling.desktopDense4G; +const constants = require('./constants.js') /** @type {LH.Config.Json} */ const config = { @@ -14,7 +14,9 @@ const config = { maxWaitForFcp: 15 * 1000, maxWaitForLoad: 35 * 1000, formFactor: 'desktop', - throttling: desktopDense4G, + throttling: constants.throttling.desktopDense4G, + screenEmulation: constants.screenEmulationMetrics.desktop, + emulatedUserAgent: constants.userAgents.desktop }, }; diff --git a/lighthouse-core/config/lr-mobile-config.js b/lighthouse-core/config/lr-mobile-config.js index 04fed4896f63..cbf2e90925d6 100644 --- a/lighthouse-core/config/lr-mobile-config.js +++ b/lighthouse-core/config/lr-mobile-config.js @@ -11,6 +11,7 @@ const config = { settings: { maxWaitForFcp: 15 * 1000, maxWaitForLoad: 35 * 1000, + formFactor: 'mobile', }, audits: [ 'metrics/first-contentful-paint-3g', diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index e4d58b73d6d7..2575cad1c4b7 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -7,44 +7,6 @@ /** @typedef {import('../gather/driver.js')} Driver */ -/** - * @type {LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest} - */ -const MOTOG4_EMULATION_METRICS = { - mobile: true, - screenWidth: 360, - screenHeight: 640, - width: 360, - height: 640, - positionX: 0, - positionY: 0, - scale: 1, - // Moto G4 is really 3, but a higher value here works against - // our perf recommendations. - // https://github.com/GoogleChrome/lighthouse/issues/10741#issuecomment-626903508 - deviceScaleFactor: 2.625, - screenOrientation: { - angle: 0, - type: 'portraitPrimary', - }, -}; - -/** - * Desktop metrics adapted from emulated_devices/module.json - * @type {LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest} - */ -const DESKTOP_EMULATION_METRICS = { - mobile: false, - width: 1350, - height: 940, - deviceScaleFactor: 1, -}; - -// eslint-disable-next-line max-len -const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse'; -// eslint-disable-next-line max-len -const DESKTOP_USERAGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Safari/537.36 Chrome-Lighthouse'; - const OFFLINE_METRICS = { offline: true, // values of 0 remove any active throttling. crbug.com/456324#c9 @@ -64,19 +26,6 @@ const NO_CPU_THROTTLE_METRICS = { rate: 1, }; -const emulationParams = { - mobile: { - userAgent: MOTOG4_USERAGENT, - metrics: MOTOG4_EMULATION_METRICS, - touchEnabled: true, - }, - desktop: { - userAgent: DESKTOP_USERAGENT, - metrics: DESKTOP_EMULATION_METRICS, - touchEnabled: false, - }, -}; - /** * * @param {Driver} driver @@ -84,21 +33,18 @@ const emulationParams = { * @return {Promise} */ async function emulate(driver, settings) { - // TODO this is keeyed off the disable flags OR config - - const params = emulationParams[settings.formFactor]; // In DevTools, emulation is applied before Lighthouse starts (to deal with viewport emulation bugs) - // As a result, we don't double-apply viewport emulation (devtools sets `internalDisableDeviceScreenEmulation`). - // UA emulation, however, is lost in the protocol handover from devtools frontend to the audits_worker. So it's always applied. + // As a result, we don't double-apply viewport emulation (devtools sets `disableScreenEmulation`). + // UA emulation, however, is lost in the protocol handover from devtools frontend to the lighthouse_worker. So it's always applied. // Network.enable must be called for UA overriding to work await driver.sendCommand('Network.enable'); - await driver.sendCommand('Network.setUserAgentOverride', {userAgent: params.userAgent}); + await driver.sendCommand('Network.setUserAgentOverride', {userAgent: settings.emulatedUserAgent}); if (settings.disableScreenEmulation) { - await driver.sendCommand('Emulation.setDeviceMetricsOverride', params.metrics); - await driver.sendCommand('Emulation.setTouchEmulationEnabled', {enabled: params.touchEnabled}); + await driver.sendCommand('Emulation.setDeviceMetricsOverride', settings.screenEmulation); + await driver.sendCommand('Emulation.setTouchEmulationEnabled', {enabled: settings.screenEmulation.mobile}); } } @@ -164,6 +110,4 @@ module.exports = { enableCPUThrottling, disableCPUThrottling, goOffline, - MOBILE_USERAGENT: MOTOG4_USERAGENT, - DESKTOP_USERAGENT, }; diff --git a/types/externs.d.ts b/types/externs.d.ts index e0f97670e2a5..4a107ee2fa4d 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -123,7 +123,11 @@ declare global { /** How Lighthouse should interpret this run in regards to perf scoring and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor: 'mobile'|'desktop'; /** If true, Lighthouse will not apply any screen/viewport emulation. Typically set to true if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. **TODO: What do we recommend for desktop?** */ - disableScreenEmulation: boolean + disableScreenEmulation?: boolean; + /** Screen emulation properties (width, height, dpr, mobile viewport) to apply */ + screenEmulation?: LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest; + /** User Agent to apply */ + emulatedUserAgent?: string; /** The method used to throttle the network. */ throttlingMethod?: 'devtools'|'simulate'|'provided'; /** The throttling config settings. */ From 8f38c6a06717e22a85fb4ab166e2e2a4eb3d49ca Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 2 Dec 2020 19:10:32 -0800 Subject: [PATCH 07/63] lint. plenty of TS errors awaiting me. :) --- lighthouse-core/config/constants.js | 2 +- lighthouse-core/config/lr-desktop-config.js | 4 ++-- lighthouse-core/lib/emulation.js | 1 - lighthouse-core/report/html/renderer/util.js | 4 ++-- lighthouse-core/test/gather/gather-runner-test.js | 2 -- lighthouse-core/test/lib/emulation-test.js | 3 ++- 6 files changed, 7 insertions(+), 9 deletions(-) diff --git a/lighthouse-core/config/constants.js b/lighthouse-core/config/constants.js index 345e7302f1a0..65709ad2b9f1 100644 --- a/lighthouse-core/config/constants.js +++ b/lighthouse-core/config/constants.js @@ -77,7 +77,7 @@ const DESKTOP_EMULATION_METRICS = { const screenEmulationMetrics = { mobile: MOTOG4_EMULATION_METRICS, desktop: DESKTOP_EMULATION_METRICS, -} +}; // eslint-disable-next-line max-len const MOTOG4_USERAGENT = 'Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse'; diff --git a/lighthouse-core/config/lr-desktop-config.js b/lighthouse-core/config/lr-desktop-config.js index 9b9c9479d02f..4039984c97c2 100644 --- a/lighthouse-core/config/lr-desktop-config.js +++ b/lighthouse-core/config/lr-desktop-config.js @@ -5,7 +5,7 @@ */ 'use strict'; -const constants = require('./constants.js') +const constants = require('./constants.js'); /** @type {LH.Config.Json} */ const config = { @@ -16,7 +16,7 @@ const config = { formFactor: 'desktop', throttling: constants.throttling.desktopDense4G, screenEmulation: constants.screenEmulationMetrics.desktop, - emulatedUserAgent: constants.userAgents.desktop + emulatedUserAgent: constants.userAgents.desktop, }, }; diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index 2575cad1c4b7..e2b0f20771aa 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -33,7 +33,6 @@ const NO_CPU_THROTTLE_METRICS = { * @return {Promise} */ async function emulate(driver, settings) { - // In DevTools, emulation is applied before Lighthouse starts (to deal with viewport emulation bugs) // As a result, we don't double-apply viewport emulation (devtools sets `disableScreenEmulation`). // UA emulation, however, is lost in the protocol handover from devtools frontend to the lighthouse_worker. So it's always applied. diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index e61958ce34a1..4a03ae0595a5 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -425,8 +425,8 @@ class Util { } const deviceEmulation = settings.formFactor === 'mobile' - ? Util.i18n.strings.runtimeMobileEmulation - : Util.i18n.strings.runtimeDesktopEmulation; + ? Util.i18n.strings.runtimeMobileEmulation + : Util.i18n.strings.runtimeDesktopEmulation; return { deviceEmulation, diff --git a/lighthouse-core/test/gather/gather-runner-test.js b/lighthouse-core/test/gather/gather-runner-test.js index 3adbb209808e..ba4bea60cd19 100644 --- a/lighthouse-core/test/gather/gather-runner-test.js +++ b/lighthouse-core/test/gather/gather-runner-test.js @@ -274,7 +274,6 @@ describe('GatherRunner', function() { settings: { formFactor: 'mobile', throttlingMethod: 'provided', - , }, }); @@ -290,7 +289,6 @@ describe('GatherRunner', function() { /** @param {'mobile'|'desktop'|'none'} formFactor */ const getSettings = formFactor => ({ formFactor: formFactor, - , }); await GatherRunner.setupDriver(driver, {settings: getSettings('mobile')}); diff --git a/lighthouse-core/test/lib/emulation-test.js b/lighthouse-core/test/lib/emulation-test.js index f159f286a000..d33c5adcd8c5 100644 --- a/lighthouse-core/test/lib/emulation-test.js +++ b/lighthouse-core/test/lib/emulation-test.js @@ -31,10 +31,11 @@ describe('emulation', () => { .mockResponse('Emulation.setTouchEmulationEnabled'); }); - const getSettings = (formFactor, disableDeviceScreenEmulation) => ({ + const getSettings = (formFactor) => ({ formFactor: formFactor, }); + // TODO it('handles: formFactor: mobile / disableDeviceScreenEmulation: false', async () => { await emulation.emulate(driver, getSettings('mobile', false)); From 2716b92c5ad32d7b081618ae1d58b3d98c0e13ae Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Sat, 5 Dec 2020 14:20:20 -0800 Subject: [PATCH 08/63] move disableScreenEmulation to screenEmulation===false --- lighthouse-core/config/constants.js | 1 - lighthouse-core/lib/emulation.js | 4 ++-- types/externs.d.ts | 6 ++---- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/lighthouse-core/config/constants.js b/lighthouse-core/config/constants.js index 65709ad2b9f1..223f7d3766c2 100644 --- a/lighthouse-core/config/constants.js +++ b/lighthouse-core/config/constants.js @@ -98,7 +98,6 @@ const defaultSettings = { formFactor: 'mobile', throttling: throttling.mobileSlow4G, throttlingMethod: 'simulate', - disableScreenEmulation: false, screenEmulation: screenEmulationMetrics.mobile, emulatedUserAgent: userAgents.mobile, diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index e2b0f20771aa..8c1aabf7ad7a 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -34,14 +34,14 @@ const NO_CPU_THROTTLE_METRICS = { */ async function emulate(driver, settings) { // In DevTools, emulation is applied before Lighthouse starts (to deal with viewport emulation bugs) - // As a result, we don't double-apply viewport emulation (devtools sets `disableScreenEmulation`). + // As a result, we don't double-apply viewport emulation (devtools sets `screenEmulation` to `false`). // UA emulation, however, is lost in the protocol handover from devtools frontend to the lighthouse_worker. So it's always applied. // Network.enable must be called for UA overriding to work await driver.sendCommand('Network.enable'); await driver.sendCommand('Network.setUserAgentOverride', {userAgent: settings.emulatedUserAgent}); - if (settings.disableScreenEmulation) { + if (settings.screenEmulation !== false) { await driver.sendCommand('Emulation.setDeviceMetricsOverride', settings.screenEmulation); await driver.sendCommand('Emulation.setTouchEmulationEnabled', {enabled: settings.screenEmulation.mobile}); } diff --git a/types/externs.d.ts b/types/externs.d.ts index 4a107ee2fa4d..e298bfe02ee9 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -122,10 +122,8 @@ declare global { disableStorageReset?: boolean; /** How Lighthouse should interpret this run in regards to perf scoring and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor: 'mobile'|'desktop'; - /** If true, Lighthouse will not apply any screen/viewport emulation. Typically set to true if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. **TODO: What do we recommend for desktop?** */ - disableScreenEmulation?: boolean; - /** Screen emulation properties (width, height, dpr, mobile viewport) to apply */ - screenEmulation?: LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest; + /** Screen emulation properties (width, height, dpr, mobile viewport) to apply. Typically set to false if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. **TODO: What do we recommend for desktop?** */ + screenEmulation?: LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest | false; /** User Agent to apply */ emulatedUserAgent?: string; /** The method used to throttle the network. */ From f413348e6aa071349d98724c920583ee1abf1695 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Sat, 5 Dec 2020 15:08:33 -0800 Subject: [PATCH 09/63] add emulatedUserAgent === false --- lighthouse-core/lib/emulation.js | 14 ++++++++++---- types/externs.d.ts | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index 8c1aabf7ad7a..301195bdd289 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -37,13 +37,19 @@ async function emulate(driver, settings) { // As a result, we don't double-apply viewport emulation (devtools sets `screenEmulation` to `false`). // UA emulation, however, is lost in the protocol handover from devtools frontend to the lighthouse_worker. So it's always applied. - // Network.enable must be called for UA overriding to work - await driver.sendCommand('Network.enable'); - await driver.sendCommand('Network.setUserAgentOverride', {userAgent: settings.emulatedUserAgent}); + if (settings.emulatedUserAgent !== false) { + // Network.enable must be called for UA overriding to work + await driver.sendCommand('Network.enable'); + await driver.sendCommand('Network.setUserAgentOverride', { + userAgent: settings.emulatedUserAgent, + }); + } if (settings.screenEmulation !== false) { await driver.sendCommand('Emulation.setDeviceMetricsOverride', settings.screenEmulation); - await driver.sendCommand('Emulation.setTouchEmulationEnabled', {enabled: settings.screenEmulation.mobile}); + await driver.sendCommand('Emulation.setTouchEmulationEnabled', { + enabled: settings.screenEmulation.mobile, + }); } } diff --git a/types/externs.d.ts b/types/externs.d.ts index e298bfe02ee9..77e62212dca7 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -125,7 +125,7 @@ declare global { /** Screen emulation properties (width, height, dpr, mobile viewport) to apply. Typically set to false if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. **TODO: What do we recommend for desktop?** */ screenEmulation?: LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest | false; /** User Agent to apply */ - emulatedUserAgent?: string; + emulatedUserAgent?: string | false; /** The method used to throttle the network. */ throttlingMethod?: 'devtools'|'simulate'|'provided'; /** The throttling config settings. */ From ce850ef077ddcdd0f0d303b92dbaaf27c844a6ab Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Sat, 5 Dec 2020 15:36:39 -0800 Subject: [PATCH 10/63] artifacts + samplejson --- .../gather/gatherers/full-page-screenshot.js | 3 +-- lighthouse-core/test/gather/gather-runner-test.js | 10 ++-------- lighthouse-core/test/results/artifacts/artifacts.json | 7 +++++++ lighthouse-core/test/results/sample_v2.json | 11 +++++++++-- types/externs.d.ts | 4 +++- 5 files changed, 22 insertions(+), 13 deletions(-) diff --git a/lighthouse-core/gather/gatherers/full-page-screenshot.js b/lighthouse-core/gather/gatherers/full-page-screenshot.js index bd6f33d57371..1adcae50dbc3 100644 --- a/lighthouse-core/gather/gatherers/full-page-screenshot.js +++ b/lighthouse-core/gather/gatherers/full-page-screenshot.js @@ -116,8 +116,7 @@ class FullPageScreenshot extends Gatherer { // In case some other program is controlling emulation, try to remember what the device looks // like now and reset after gatherer is done. - // TODO(paulirish).. pull this from disableScreenEmu probably *** - const lighthouseControlsEmulation = passContext.settings.formFactor !== 'none' && !passContext.settings.internalDisableDeviceScreenEmulation; + const lighthouseControlsEmulation = passContext.settings.screenEmulation !== false; try { return { diff --git a/lighthouse-core/test/gather/gather-runner-test.js b/lighthouse-core/test/gather/gather-runner-test.js index ba4bea60cd19..9259f7317139 100644 --- a/lighthouse-core/test/gather/gather-runner-test.js +++ b/lighthouse-core/test/gather/gather-runner-test.js @@ -109,7 +109,6 @@ class EmulationDriver extends Driver { } const fakeDriver = require('./fake-driver.js'); -const fakeDriverUsingRealMobileDevice = fakeDriver.fakeDriverUsingRealMobileDevice; /** @type {EmulationDriver} */ let driver; @@ -285,8 +284,8 @@ describe('GatherRunner', function() { connectionStub.sendCommand.findInvocation('Emulation.setCPUThrottlingRate')).toThrow(); }); - it('applies the correct emulation given a particular emulationFormFactor', async () => { - /** @param {'mobile'|'desktop'|'none'} formFactor */ + it('applies the correct emulation given a particular formFactor', async () => { + /** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ const getSettings = formFactor => ({ formFactor: formFactor, }); @@ -299,11 +298,6 @@ describe('GatherRunner', function() { await GatherRunner.setupDriver(driver, {settings: getSettings('desktop')}); expect(connectionStub.sendCommand.findInvocation('Emulation.setDeviceMetricsOverride')) .toMatchObject({mobile: false}); - - resetDefaultMockResponses(); - await GatherRunner.setupDriver(driver, {settings: getSettings('none')}); - expect(() => - connectionStub.sendCommand.findInvocation('Emulation.setDeviceMetricsOverride')).toThrow(); }); it('sets throttling according to settings', async () => { diff --git a/lighthouse-core/test/results/artifacts/artifacts.json b/lighthouse-core/test/results/artifacts/artifacts.json index bd7c6e8d72c6..f83232f98c82 100644 --- a/lighthouse-core/test/results/artifacts/artifacts.json +++ b/lighthouse-core/test/results/artifacts/artifacts.json @@ -28,6 +28,13 @@ "gatherMode": "lighthouse-core/test/results/artifacts", "disableStorageReset": false, "formFactor": "mobile", + "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse", + "screenEmulation": { + "deviceScaleFactor": 2.625, + "height": 640, + "mobile": true, + "width": 360 + }, "channel": "cli", "budgets": [ { diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 1d62d838691b..2c9239ddb605 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -4338,7 +4338,7 @@ ], "maxWaitForFcp": 30000, "maxWaitForLoad": 45000, - "throttlingMethod": "devtools", + "formFactor": "mobile", "throttling": { "rttMs": 150, "throughputKbps": 1638.4, @@ -4347,10 +4347,17 @@ "uploadThroughputKbps": 675, "cpuSlowdownMultiplier": 4 }, + "throttlingMethod": "devtools", + "screenEmulation": { + "mobile": true, + "width": 360, + "height": 640, + "deviceScaleFactor": 2.625 + }, + "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse", "auditMode": true, "gatherMode": false, "disableStorageReset": false, - "formFactor": "mobile", "channel": "cli", "budgets": [ { diff --git a/types/externs.d.ts b/types/externs.d.ts index 77e62212dca7..b9c293d2f49b 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -120,8 +120,10 @@ declare global { gatherMode?: boolean | string; /** Flag indicating that the browser storage should not be reset for the audit. */ disableStorageReset?: boolean; + + // TODO: formFactor should really be required, but since this type is shared in Flags, we can't reasonably do that. We'll likely need to separate SharedFlagsSettings into CLI Flags and Config Settings. /** How Lighthouse should interpret this run in regards to perf scoring and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ - formFactor: 'mobile'|'desktop'; + formFactor?: 'mobile'|'desktop'; /** Screen emulation properties (width, height, dpr, mobile viewport) to apply. Typically set to false if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. **TODO: What do we recommend for desktop?** */ screenEmulation?: LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest | false; /** User Agent to apply */ From c7c2d9ce836ed56231e6459a900204eee494fad4 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Sat, 5 Dec 2020 16:19:01 -0800 Subject: [PATCH 11/63] tests. fixing up to match. emulation-test got the most significant attention --- .../test/audits/content-width-test.js | 26 +++++-- .../metrics/first-contentful-paint-test.js | 16 ++++- .../metrics/first-meaningful-paint-test.js | 18 ++++- .../test/audits/metrics/interactive-test.js | 18 +++-- .../metrics/largest-contentful-paint-test.js | 31 +++++---- .../test/audits/metrics/speed-index-test.js | 18 ++++- .../metrics/total-blocking-time-test.js | 23 +++++-- .../test/audits/seo/font-size-test.js | 14 +++- .../test/audits/seo/tap-targets-test.js | 15 ++-- .../test/gather/gather-runner-test.js | 20 +++--- .../gatherers/full-page-screenshot-test.js | 1 + lighthouse-core/test/lib/emulation-test.js | 69 +++++++++++-------- 12 files changed, 185 insertions(+), 84 deletions(-) diff --git a/lighthouse-core/test/audits/content-width-test.js b/lighthouse-core/test/audits/content-width-test.js index b061a437e018..384586d31502 100644 --- a/lighthouse-core/test/audits/content-width-test.js +++ b/lighthouse-core/test/audits/content-width-test.js @@ -6,21 +6,31 @@ 'use strict'; const Audit = require('../../audits/content-width.js'); +const constants = require('../../config/constants.js'); const assert = require('assert').strict; /* eslint-env jest */ +/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ +const getFakeContext = (formFactor = 'mobile') => ({ + computedCache: new Map(), + settings: { + formFactor: formFactor, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }, +}); + describe('Mobile-friendly: content-width audit', () => { it('fails when scroll width differs from viewport width', () => { - const result = Audit.audit({ + const product = Audit.audit({ ViewportDimensions: { innerWidth: 100, outerWidth: 300, }, - }); + }, getFakeContext()); - assert.equal(result.score, 0); - assert.ok(result.explanation); + assert.equal(product.score, 0); + assert.ok(product.explanation); }); it('passes when widths match', () => { @@ -30,15 +40,17 @@ describe('Mobile-friendly: content-width audit', () => { innerWidth: 300, outerWidth: 300, }, - }, {settings: {formFactor: 'mobile'}}).score, 1); + }, getFakeContext()).score, 1); }); it('not applicable when run on desktop', () => { - return assert.equal(Audit.audit({ + const product = Audit.audit({ ViewportDimensions: { innerWidth: 300, outerWidth: 450, }, - }).notApplicable, true); + }, getFakeContext('desktop')); + + assert.equal(product.notApplicable, true); }); }); diff --git a/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js b/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js index 34b9bda9552b..1b5f40672d70 100644 --- a/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js +++ b/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js @@ -7,10 +7,23 @@ const Audit = require('../../../audits/metrics/first-contentful-paint.js'); const assert = require('assert').strict; const options = Audit.defaultOptions; +const constants = require('../../../config/constants.js'); const pwaTrace = require('../../fixtures/traces/progressive-app-m60.json'); const pwaDevtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); +/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ +/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ +const getFakeContext = (formFactor, throttlingMethod) => ({ + options, + computedCache: new Map(), + settings: { + formFactor: formFactor, + throttlingMethod, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }, +}); + /* eslint-env jest */ describe('Performance: first-contentful-paint audit', () => { @@ -24,8 +37,7 @@ describe('Performance: first-contentful-paint audit', () => { }, }; - const settings = {throttlingMethod: 'provided'}; - const result = await Audit.audit(artifacts, {settings, options, computedCache: new Map()}); + const result = await Audit.audit(artifacts, getFakeContext('mobile', 'provided')); assert.equal(result.score, 1); assert.equal(result.numericValue, 498.87); }); diff --git a/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js b/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js index abab64d89e00..19b491ba1dad 100644 --- a/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js +++ b/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js @@ -7,11 +7,23 @@ const FMPAudit = require('../../../audits/metrics/first-meaningful-paint.js'); const Audit = require('../../../audits/audit.js'); +const constants = require('../../../config/constants.js'); const assert = require('assert').strict; const options = FMPAudit.defaultOptions; const trace = require('../../fixtures/traces/progressive-app-m60.json'); const devtoolsLogs = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); + +/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ +const getFakeContext = (formFactor = 'mobile') => ({ + options, + computedCache: new Map(), + settings: { + formFactor: formFactor, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }, +}); + /* eslint-env jest */ describe('Performance: first-meaningful-paint audit', () => { it('computes FMP correctly for valid trace', async () => { @@ -19,7 +31,8 @@ describe('Performance: first-meaningful-paint audit', () => { traces: {[Audit.DEFAULT_PASS]: trace}, devtoolsLogs: {[Audit.DEFAULT_PASS]: devtoolsLogs}, }; - const context = {options, settings: {throttlingMethod: 'provided'}, computedCache: new Map()}; + const context = getFakeContext(); + context.settings.throttlingMethod = 'provided'; const fmpResult = await FMPAudit.audit(artifacts, context); assert.equal(fmpResult.score, 1); @@ -32,7 +45,8 @@ describe('Performance: first-meaningful-paint audit', () => { traces: {[Audit.DEFAULT_PASS]: trace}, devtoolsLogs: {[Audit.DEFAULT_PASS]: devtoolsLogs}, }; - const context = {options, settings: {throttlingMethod: 'simulate'}, computedCache: new Map()}; + const context = getFakeContext(); + context.settings.throttlingMethod = 'simulate'; const fmpResult = await FMPAudit.audit(artifacts, context); expect({ diff --git a/lighthouse-core/test/audits/metrics/interactive-test.js b/lighthouse-core/test/audits/metrics/interactive-test.js index 34d9c143f61b..ac5ebe9fd029 100644 --- a/lighthouse-core/test/audits/metrics/interactive-test.js +++ b/lighthouse-core/test/audits/metrics/interactive-test.js @@ -8,6 +8,7 @@ const Interactive = require('../../../audits/metrics/interactive.js'); const assert = require('assert').strict; const options = Interactive.defaultOptions; +const constants = require('../../../config/constants.js'); const acceptableTrace = require('../../fixtures/traces/progressive-app-m60.json'); const acceptableDevToolsLog = @@ -16,6 +17,17 @@ const acceptableDevToolsLog = const redirectTrace = require('../../fixtures/traces/site-with-redirect.json'); const redirectDevToolsLog = require('../../fixtures/traces/site-with-redirect.devtools.log.json'); +/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ +/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ +const getFakeContext = (formFactor, throttlingMethod) => ({ + options: options, + computedCache: new Map(), + settings: { + formFactor: formFactor, + throttlingMethod, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }, +}); /* eslint-env jest */ describe('Performance: interactive audit', () => { @@ -29,8 +41,7 @@ describe('Performance: interactive audit', () => { }, }; - const context = {options, settings: {throttlingMethod: 'provided'}, computedCache: new Map()}; - return Interactive.audit(artifacts, context).then(output => { + return Interactive.audit(artifacts, getFakeContext('mobile', 'provided')).then(output => { assert.equal(output.score, 1); assert.equal(Math.round(output.numericValue), 1582); expect(output.displayValue).toBeDisplayString('1.6\xa0s'); @@ -47,8 +58,7 @@ describe('Performance: interactive audit', () => { }, }; - const context = {options, settings: {throttlingMethod: 'provided'}, computedCache: new Map()}; - return Interactive.audit(artifacts, context).then(output => { + return Interactive.audit(artifacts, getFakeContext('mobile', 'provided')).then(output => { assert.equal(output.score, 0.97); assert.equal(Math.round(output.numericValue), 2712); expect(output.displayValue).toBeDisplayString('2.7\xa0s'); diff --git a/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js b/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js index 940c3bb1ca60..da125f74255b 100644 --- a/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js +++ b/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js @@ -7,6 +7,7 @@ const LCPAudit = require('../../../audits/metrics/largest-contentful-paint.js'); const defaultOptions = LCPAudit.defaultOptions; +const constants = require('../../../config/constants.js'); const trace = require('../../fixtures/traces/lcp-m78.json'); const devtoolsLog = require('../../fixtures/traces/lcp-m78.devtools.log.json'); @@ -22,10 +23,18 @@ function generateArtifacts({trace, devtoolsLog, HostUserAgent}) { }; } -function generateContext({throttlingMethod}) { - const settings = {throttlingMethod}; - return {options: defaultOptions, settings, computedCache: new Map()}; -} +/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ +/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ +const getFakeContext = (formFactor, throttlingMethod) => ({ + options: defaultOptions, + computedCache: new Map(), + settings: { + formFactor: formFactor, + throttlingMethod, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }, +}); + /* eslint-env jest */ describe('Performance: largest-contentful-paint audit', () => { @@ -33,11 +42,8 @@ describe('Performance: largest-contentful-paint audit', () => { const artifactsMobile = generateArtifacts({ trace, devtoolsLog, - HostUserAgent: 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) ' + - 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 ' + - 'Mobile Safari/537.36 Chrome-Lighthouse', }); - const contextMobile = generateContext({throttlingMethod: 'provided'}); + const contextMobile = getFakeContext('mobile', 'provided'); const outputMobile = await LCPAudit.audit(artifactsMobile, contextMobile); expect(outputMobile.numericValue).toBeCloseTo(1121.711, 1); @@ -47,11 +53,8 @@ describe('Performance: largest-contentful-paint audit', () => { const artifactsDesktop = generateArtifacts({ trace, devtoolsLog, - HostUserAgent: 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) ' + - 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 ' + - 'Mobile Safari/537.36 Chrome-Lighthouse', }); - const contextDesktop = generateContext({throttlingMethod: 'provided'}); + const contextDesktop = getFakeContext('desktop', 'provided'); const outputDesktop = await LCPAudit.audit(artifactsDesktop, contextDesktop); expect(outputDesktop.numericValue).toBeCloseTo(1121.711, 1); @@ -67,7 +70,7 @@ describe('Performance: largest-contentful-paint audit', () => { 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 ' + 'Mobile Safari/537.36 Chrome-Lighthouse', }); - const contextOldChrome = generateContext({throttlingMethod: 'provided'}); + const contextOldChrome = getFakeContext('mobile', 'provided'); await expect(LCPAudit.audit(artifactsOldChrome, contextOldChrome)) .rejects.toThrow(/UNSUPPORTED_OLD_CHROME/); @@ -79,7 +82,7 @@ describe('Performance: largest-contentful-paint audit', () => { 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 ' + 'Mobile Safari/537.36 Chrome-Lighthouse', }); - const contextNewChrome = generateContext({throttlingMethod: 'provided'}); + const contextNewChrome = getFakeContext('mobile', 'provided'); await expect(LCPAudit.audit(artifactsNewChrome, contextNewChrome)).rejects.toThrow(/NO_LCP/); }); diff --git a/lighthouse-core/test/audits/metrics/speed-index-test.js b/lighthouse-core/test/audits/metrics/speed-index-test.js index afdb1e15c201..b31f294eedd1 100644 --- a/lighthouse-core/test/audits/metrics/speed-index-test.js +++ b/lighthouse-core/test/audits/metrics/speed-index-test.js @@ -10,10 +10,24 @@ const Audit = require('../../../audits/metrics/speed-index.js'); const assert = require('assert').strict; const options = Audit.defaultOptions; +const constants = require('../../../config/constants.js'); const pwaTrace = require('../../fixtures/traces/progressive-app-m60.json'); const pwaDevtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); +/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ +/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ +const getFakeContext = (formFactor, throttlingMethod) => ({ + options, + computedCache: new Map(), + settings: { + formFactor: formFactor, + throttlingMethod, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }, +}); + + describe('Performance: speed-index audit', () => { it('works on a real trace', () => { const artifacts = { @@ -21,8 +35,8 @@ describe('Performance: speed-index audit', () => { devtoolsLogs: {defaultPass: pwaDevtoolsLog}, }; - const settings = {throttlingMethod: 'provided'}; - return Audit.audit(artifacts, {options, settings, computedCache: new Map()}).then(result => { + const context = getFakeContext('mobile', 'provided'); + return Audit.audit(artifacts, context).then(result => { assert.equal(result.score, 1); assert.equal(result.numericValue, 605); }); diff --git a/lighthouse-core/test/audits/metrics/total-blocking-time-test.js b/lighthouse-core/test/audits/metrics/total-blocking-time-test.js index b4c44ed542d9..aa197248a65f 100644 --- a/lighthouse-core/test/audits/metrics/total-blocking-time-test.js +++ b/lighthouse-core/test/audits/metrics/total-blocking-time-test.js @@ -7,6 +7,7 @@ const TBTAudit = require('../../../audits/metrics/total-blocking-time.js'); const defaultOptions = TBTAudit.defaultOptions; +const constants = require('../../../config/constants.js'); const trace = require('../../fixtures/traces/progressive-app-m60.json'); const devtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); @@ -21,16 +22,24 @@ function generateArtifacts({trace, devtoolsLog}) { }; } -function generateContext({throttlingMethod}) { - const settings = {throttlingMethod}; - return {options: defaultOptions, settings, computedCache: new Map()}; -} +/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ +/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ +const getFakeContext = (formFactor, throttlingMethod) => ({ + options: defaultOptions, + computedCache: new Map(), + settings: { + formFactor: formFactor, + throttlingMethod, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }, +}); + /* eslint-env jest */ describe('Performance: total-blocking-time audit', () => { it('evaluates Total Blocking Time metric properly', async () => { const artifacts = generateArtifacts({trace, devtoolsLog}); - const context = generateContext({throttlingMethod: 'provided'}); + const context = getFakeContext('mobile', 'provided'); const output = await TBTAudit.audit(artifacts, context); expect(output.numericValue).toBeCloseTo(48.3, 1); @@ -41,7 +50,7 @@ describe('Performance: total-blocking-time audit', () => { it('adjusts scoring based on form factor', async () => { const artifactsMobile = generateArtifacts({trace: lcpTrace, devtoolsLog: lcpDevtoolsLog}); - const contextMobile = generateContext({throttlingMethod: 'provided'}); + const contextMobile = getFakeContext('mobile', 'provided'); const outputMobile = await TBTAudit.audit(artifactsMobile, contextMobile); expect(outputMobile.numericValue).toBeCloseTo(333, 1); @@ -50,7 +59,7 @@ describe('Performance: total-blocking-time audit', () => { const artifactsDesktop = generateArtifacts({trace: lcpTrace, devtoolsLog: lcpDevtoolsLog}); - const contextDesktop = generateContext({throttlingMethod: 'provided'}); + const contextDesktop = getFakeContext('desktop', 'provided'); const outputDesktop = await TBTAudit.audit(artifactsDesktop, contextDesktop); expect(outputDesktop.numericValue).toBeCloseTo(333, 1); diff --git a/lighthouse-core/test/audits/seo/font-size-test.js b/lighthouse-core/test/audits/seo/font-size-test.js index 5c3b8649764a..15731b3d32ff 100644 --- a/lighthouse-core/test/audits/seo/font-size-test.js +++ b/lighthouse-core/test/audits/seo/font-size-test.js @@ -6,6 +6,7 @@ 'use strict'; const FontSizeAudit = require('../../../audits/seo/font-size.js'); +const constants = require('../../../config/constants.js'); const assert = require('assert').strict; const URL = { @@ -18,7 +19,15 @@ const validViewport = 'width=device-width'; describe('SEO: Font size audit', () => { const makeMetaElements = viewport => [{name: 'viewport', content: viewport}]; - const getFakeContext = () => ({computedCache: new Map()}); + + /** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ + const getFakeContext = (formFactor = 'mobile') => ({ + computedCache: new Map(), + settings: { + formFactor: formFactor, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }, + }); it('fails when viewport is not set', async () => { const artifacts = { @@ -212,8 +221,7 @@ describe('SEO: Font size audit', () => { MetaElements: [], FontSize: {}, }; - const desktopContext = getFakeContext(); - desktopContext.settings = {formFactor: 'desktop'}; + const desktopContext = getFakeContext('desktop'); const auditResult = await FontSizeAudit.audit(artifacts, desktopContext); expect(auditResult.score).toBe(1); expect(auditResult.notApplicable).toBe(true); diff --git a/lighthouse-core/test/audits/seo/tap-targets-test.js b/lighthouse-core/test/audits/seo/tap-targets-test.js index 2a7630e236ea..99deb7d724eb 100644 --- a/lighthouse-core/test/audits/seo/tap-targets-test.js +++ b/lighthouse-core/test/audits/seo/tap-targets-test.js @@ -8,9 +8,17 @@ /* eslint-env jest */ const TapTargetsAudit = require('../../../audits/seo/tap-targets.js'); +const constants = require('../../../config/constants.js'); const assert = require('assert').strict; -const getFakeContext = () => ({computedCache: new Map()}); +/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ +const getFakeContext = (formFactor = 'mobile') => ({ + computedCache: new Map(), + settings: { + formFactor: formFactor, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }, +}); function auditTapTargets(tapTargets, {MetaElements = [{ name: 'viewport', @@ -212,12 +220,11 @@ describe('SEO: Tap targets audit', () => { }); it('is not applicable on desktop', async () => { - const desktopContext = getFakeContext(); - desktopContext.settings = {formFactor: 'desktop'}; + const desktopContext = getFakeContext('desktop'); const auditResult = await auditTapTargets(getBorderlineTapTargets({ overlapSecondClientRect: true, - }), desktopContext); + }), undefined, desktopContext); assert.equal(auditResult.score, 1); assert.equal(auditResult.notApplicable, true); }); diff --git a/lighthouse-core/test/gather/gather-runner-test.js b/lighthouse-core/test/gather/gather-runner-test.js index 9259f7317139..b1eff14c5a0b 100644 --- a/lighthouse-core/test/gather/gather-runner-test.js +++ b/lighthouse-core/test/gather/gather-runner-test.js @@ -13,6 +13,7 @@ const Gatherer = require('../../gather/gatherers/gatherer.js'); const GatherRunner_ = require('../../gather/gather-runner.js'); const assert = require('assert').strict; const Config = require('../../config/config.js'); +const constants = require('../../config/constants.js'); const unresolvedPerfLog = require('./../fixtures/unresolved-perflog.json'); const NetworkRequest = require('../../lib/network-request.js'); const LHError = require('../../lib/lh-error.js'); @@ -268,13 +269,14 @@ describe('GatherRunner', function() { test('works when running on desktop device', DESKTOP_UA, 'desktop'); }); + /** @param {'mobile' | 'desktop'} formFactor */ + const getSettings = formFactor => ({ + formFactor: formFactor, + screenEmulation: constants.screenEmulationMetrics[formFactor], + }); + it('sets up the driver to begin emulation when all flags are undefined', async () => { - await GatherRunner.setupDriver(driver, { - settings: { - formFactor: 'mobile', - throttlingMethod: 'provided', - }, - }); + await GatherRunner.setupDriver(driver, {settings: getSettings('mobile')}); connectionStub.sendCommand.findInvocation('Emulation.setDeviceMetricsOverride'); expect(connectionStub.sendCommand.findInvocation('Network.emulateNetworkConditions')).toEqual({ @@ -285,11 +287,6 @@ describe('GatherRunner', function() { }); it('applies the correct emulation given a particular formFactor', async () => { - /** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ - const getSettings = formFactor => ({ - formFactor: formFactor, - }); - await GatherRunner.setupDriver(driver, {settings: getSettings('mobile')}); expect(connectionStub.sendCommand.findInvocation('Emulation.setDeviceMetricsOverride')) .toMatchObject({mobile: true}); @@ -304,6 +301,7 @@ describe('GatherRunner', function() { await GatherRunner.setupDriver(driver, { settings: { formFactor: 'mobile', + screenEmulation: constants.screenEmulationMetrics.mobile, throttlingMethod: 'devtools', throttling: { requestLatencyMs: 100, diff --git a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js index a6e4f69f07cf..91647fd29e8f 100644 --- a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js +++ b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js @@ -115,6 +115,7 @@ describe('FullPageScreenshot gatherer', () => { }); const passContext = { settings: { + screenEmulation: false, formFactor: 'mobile', }, driver, diff --git a/lighthouse-core/test/lib/emulation-test.js b/lighthouse-core/test/lib/emulation-test.js index d33c5adcd8c5..3c274f35a71c 100644 --- a/lighthouse-core/test/lib/emulation-test.js +++ b/lighthouse-core/test/lib/emulation-test.js @@ -7,6 +7,7 @@ const emulation = require('../../lib/emulation.js'); const Driver = require('../../gather/driver.js'); +const constants = require('../../config/constants.js'); const Connection = require('../../gather/connections/connection.js'); const {createMockSendCommandFn} = require('../gather/mock-commands.js'); @@ -31,16 +32,22 @@ describe('emulation', () => { .mockResponse('Emulation.setTouchEmulationEnabled'); }); - const getSettings = (formFactor) => ({ + /** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ + /** @param {LH.SharedFlagsSettings['screenEmulation']} screenEmulation */ + /** @param {LH.SharedFlagsSettings['emulatedUserAgent']} emulatedUserAgent */ + const getSettings = (formFactor, screenEmulation, emulatedUserAgent) => ({ formFactor: formFactor, + screenEmulation, + emulatedUserAgent: emulatedUserAgent === undefined ? constants.userAgents[formFactor] : false, }); - // TODO - it('handles: formFactor: mobile / disableDeviceScreenEmulation: false', async () => { - await emulation.emulate(driver, getSettings('mobile', false)); + const metrics = constants.screenEmulationMetrics; + + it('default: mobile w/ screenEmulation', async () => { + await emulation.emulate(driver, getSettings('mobile', metrics.mobile)); const uaArgs = connectionStub.sendCommand.findInvocation('Network.setUserAgentOverride'); - expect(uaArgs).toMatchObject({userAgent: emulation.MOBILE_USERAGENT}); + expect(uaArgs).toMatchObject({userAgent: constants.userAgents.mobile}); const emulateArgs = connectionStub.sendCommand.findInvocation( 'Emulation.setDeviceMetricsOverride' @@ -48,35 +55,34 @@ describe('emulation', () => { expect(emulateArgs).toMatchObject({mobile: true}); }); - it('handles: formFactor: desktop / disableDeviceScreenEmulation: false', async () => { - await emulation.emulate(driver, getSettings('desktop', false)); + it('default desktop: w/ desktop screen emu', async () => { + await emulation.emulate(driver, getSettings('desktop', metrics.desktop)); const uaArgs = connectionStub.sendCommand.findInvocation('Network.setUserAgentOverride'); - expect(uaArgs).toMatchObject({userAgent: emulation.DESKTOP_USERAGENT}); + expect(uaArgs).toMatchObject({userAgent: constants.userAgents.desktop}); const emulateArgs = connectionStub.sendCommand.findInvocation( 'Emulation.setDeviceMetricsOverride' ); + expect(emulateArgs).toMatchObject(metrics.desktop); expect(emulateArgs).toMatchObject({mobile: false}); }); - // TODO - it('handles: formFactor: none / disableDeviceScreenEmulation: false', async () => { - await emulation.emulate(driver, getSettings('none', false)); - expect(connectionStub.sendCommand).not.toHaveBeenCalledWith( - 'Network.setUserAgentOverride', - expect.anything() - ); + it('mobile but screenEmu disabled (scenarios: on-device or external emu applied)', async () => { + await emulation.emulate(driver, getSettings('mobile', false)); + const uaArgs = connectionStub.sendCommand.findInvocation('Network.setUserAgentOverride'); + expect(uaArgs).toMatchObject({userAgent: constants.userAgents.mobile}); + expect(connectionStub.sendCommand).not.toHaveBeenCalledWith( 'Emulation.setDeviceMetricsOverride', expect.anything() ); }); - it('handles: formFactor: mobile / disableDeviceScreenEmulation: true', async () => { - await emulation.emulate(driver, getSettings('mobile', true)); + it('desktop but screenEmu disabled (scenario: DevTools or external emu applied)', async () => { + await emulation.emulate(driver, getSettings('desktop', false)); const uaArgs = connectionStub.sendCommand.findInvocation('Network.setUserAgentOverride'); - expect(uaArgs).toMatchObject({userAgent: emulation.MOBILE_USERAGENT}); + expect(uaArgs).toMatchObject({userAgent: constants.userAgents.desktop}); expect(connectionStub.sendCommand).not.toHaveBeenCalledWith( 'Emulation.setDeviceMetricsOverride', @@ -84,27 +90,34 @@ describe('emulation', () => { ); }); - it('handles: formFactor: desktop / disableDeviceScreenEmulation: true', async () => { - await emulation.emulate(driver, getSettings('desktop', true)); - const uaArgs = connectionStub.sendCommand.findInvocation('Network.setUserAgentOverride'); - expect(uaArgs).toMatchObject({userAgent: emulation.DESKTOP_USERAGENT}); + it('mobile but UA emu disabled', async () => { + await emulation.emulate(driver, getSettings('mobile', metrics.mobile, false)); expect(connectionStub.sendCommand).not.toHaveBeenCalledWith( - 'Emulation.setDeviceMetricsOverride', + 'Network.setUserAgentOverride', expect.anything() ); + + const emulateArgs = connectionStub.sendCommand.findInvocation( + 'Emulation.setDeviceMetricsOverride' + ); + expect(emulateArgs).toMatchObject(metrics.mobile); + expect(emulateArgs).toMatchObject({mobile: true}); }); - it('handles: formFactor: none / disableDeviceScreenEmulation: true', async () => { - await emulation.emulate(driver, getSettings('none', true)); + it('desktop but UA emu disabled', async () => { + await emulation.emulate(driver, getSettings('desktop', metrics.desktop, false)); + expect(connectionStub.sendCommand).not.toHaveBeenCalledWith( 'Network.setUserAgentOverride', expect.anything() ); - expect(connectionStub.sendCommand).not.toHaveBeenCalledWith( - 'Emulation.setDeviceMetricsOverride', - expect.anything() + + const emulateArgs = connectionStub.sendCommand.findInvocation( + 'Emulation.setDeviceMetricsOverride' ); + expect(emulateArgs).toMatchObject(metrics.desktop); + expect(emulateArgs).toMatchObject({mobile: false}); }); }); }); From 4a61dbf22c3d96767f5a139cc5b66413efa3a31f Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Sat, 5 Dec 2020 18:20:15 -0800 Subject: [PATCH 12/63] add desktop preset --- lighthouse-core/config/desktop-config.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 lighthouse-core/config/desktop-config.js diff --git a/lighthouse-core/config/desktop-config.js b/lighthouse-core/config/desktop-config.js new file mode 100644 index 000000000000..2703b4d9b645 --- /dev/null +++ b/lighthouse-core/config/desktop-config.js @@ -0,0 +1,21 @@ +/** + * @license Copyright 2020 The Lighthouse Authors. All Rights Reserved. + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + */ +'use strict'; + +const constants = require('./constants.js'); + +/** @type {LH.Config.Json} */ +const config = { + extends: 'lighthouse:default', + settings: { + formFactor: 'desktop', + throttling: constants.throttling.desktopDense4G, + screenEmulation: constants.screenEmulationMetrics.desktop, + emulatedUserAgent: constants.userAgents.desktop, + }, +}; + +module.exports = config; From 36b99a3e2cdbb6abd6be17c35bdc1096325c905a Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 12:36:15 -0800 Subject: [PATCH 13/63] add docs --- docs/emulation.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 docs/emulation.md diff --git a/docs/emulation.md b/docs/emulation.md new file mode 100644 index 000000000000..a43e92af84eb --- /dev/null +++ b/docs/emulation.md @@ -0,0 +1,32 @@ + +# Emulation in Lighthouse + +In Lighthouse, "Emulation" refers to the screen/viewport emulation and UserAgent string spoofing. +["Throttling"](./throttling.md) covers the similar topics around network connection throttling/simulation and CPU throttling. + +In Lighthouse v7, most of the configuration regarding emulation changed to be more intuitive and clear. The [tracking issue](https://github.com/GoogleChrome/lighthouse/issues/10910 +) captures additional motivations. + +With the default configuration, Lighthouse emulates a mobile device. There's [a `desktop` configuration](../lighthouse-core/config/desktop-config.js), available to CLI users with `--preset=desktop`, which applies a consistent desktop environment and scoring calibration. + +### Advanced emulation setups + +Some products use Lighthouse in scenarios where emulation is applied outside of Lighthouse (eg by Puppeteer) or running against Chrome on real mobile devices. + +You must always set `formFactor`. It doesn't control emulation, but it determines how Lighthouse should interpret the run in regards to scoring performance metrics and skipping mobile-only tests in desktop. + +You can choose how `screenEmulation` is applied. It can accept an object of `{width: number, height: number, deviceScaleRatio: number, mobile: boolean}` to apply that screen emulation or `false` if Lighthouse should avoid applying screen emulation. It's typically set to `false` if either emulation is applied outside of Lighthouse, or it's being run on a mobile device. The `mobile` boolean applies overlay scrollbars and a few other mobile-specific screen emulation characteristics. + +You can choose how to handle userAgent emulation. The `emulatedUserAgent` property accepts either a `string` to apply the provided userAgent or `false` if no UA spoofing should be applied. Typically `false` is used if UA spoofing is apply outside of Lighthouse or on a mobile device. You can also redundantly apply userAgent emulation with no risk. + +If you're using Lighthouse against a mobile device, you want to set `--no-screenEmulation` and `--throttling.cpuSlowdownMultiplier=1`. (`--formFactor=mobile` is the default already). + +### Changes made in v7 + +* Removed: The `emulatedFormFactor` property (which determined how emulation is applied). +* Removed: The `TestedAsMobileDevice` artifact is removed. Instead of being inferred, the `formFactor` property is used. +* The `internalDisableDeviceScreenEmulation` property is removed. It's equivalent to the new `screenEmulation: false`. +* Added: The `formFactor` property. +* Added: The `screenEmulation` property. +* Added: The `emulatedUserAgent` property. +* (`throttling` and `throttlingMethod` remain unchanged) \ No newline at end of file From 2f378ff62ba27621f8e55aa88cbc70496354021c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 13:14:25 -0800 Subject: [PATCH 14/63] cli flags --- docs/readme.md | 4 ++-- lighthouse-cli/bin.js | 6 ------ lighthouse-cli/cli-flags.js | 16 +++++++++++----- types/externs.d.ts | 2 +- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/readme.md b/docs/readme.md index 682c8e0fa11b..e29542e5ed45 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -116,7 +116,7 @@ Alternatively, you can instruct Chrome to ignore the invalid certificate by addi Lighthouse can run against a real mobile device. You can follow the [Remote Debugging on Android (Legacy Workflow)](https://developer.chrome.com/devtools/docs/remote-debugging-legacy) up through step 3.3, but the TL;DR is install & run adb, enable USB debugging, then port forward 9222 from the device to the machine with Lighthouse. -You'll likely want to use the CLI flags `--emulated-form-factor=none --throttling.cpuSlowdownMultiplier=1` to disable any additional emulation. +You'll likely want to use the CLI flags `--no-screenEmulation --throttling.cpuSlowdownMultiplier=1` to disable any additional emulation. ```sh $ adb kill-server @@ -128,7 +128,7 @@ $ adb devices -l $ adb forward tcp:9222 localabstract:chrome_devtools_remote -$ lighthouse --port=9222 --emulated-form-factor=none --throttling.cpuSlowdownMultiplier=1 https://example.com +$ lighthouse --port=9222 --no-screenEmulation --throttling.cpuSlowdownMultiplier=1 https://example.com ``` ## Lighthouse as trace processor diff --git a/lighthouse-cli/bin.js b/lighthouse-cli/bin.js index 6462c9998940..2ae79b886d98 100644 --- a/lighthouse-cli/bin.js +++ b/lighthouse-cli/bin.js @@ -96,12 +96,6 @@ async function begin() { cliFlags.outputPath = 'stdout'; } - // @ts-expect-error - deprecation message for removed disableDeviceEmulation; can remove warning in v6. - if (cliFlags.disableDeviceEmulation) { - log.warn('config', 'The "--disable-device-emulation" has been removed in v5.' + - ' Please use "--emulated-form-factor=none" instead.'); - } - if (typeof cliFlags.extraHeaders === 'string') { // TODO: LH.Flags.extraHeaders is sometimes actually a string at this point, but needs to be // copied over to LH.Settings.extraHeaders, which is LH.Crdp.Network.Headers. Force diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index e131126429b4..c5aaa316aa36 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -44,7 +44,7 @@ function getFlags(manualArgv) { 'lighthouse --output=json --output-path=./report.json --save-assets', 'Save trace, screenshots, and named JSON report.') .example( - 'lighthouse --emulated-form-factor=none --throttling-method=provided', + 'lighthouse --no-screenEmulation --throttling-method=provided --no-emulatedUserAgent', 'Disable device emulation and all throttling') .example( 'lighthouse --chrome-flags="--window-size=412,660"', @@ -82,7 +82,7 @@ function getFlags(manualArgv) { .group( [ 'save-assets', 'list-all-audits', 'list-trace-categories', 'print-config', 'additional-trace-categories', - 'config-path', 'preset', 'chrome-flags', 'port', 'hostname', 'emulated-form-factor', + 'config-path', 'preset', 'chrome-flags', 'port', 'hostname', 'form-factor', 'max-wait-for-load', 'enable-error-reporting', 'gather-mode', 'audit-mode', 'only-audits', 'only-categories', 'skip-audits', 'budget-path', ], @@ -96,7 +96,11 @@ function getFlags(manualArgv) { 'blocked-url-patterns': 'Block any network requests to the specified URL patterns', 'disable-storage-reset': 'Disable clearing the browser cache and other storage APIs before a run', - 'emulated-form-factor': 'Controls the emulated device form factor (mobile vs. desktop) if not disabled', + + 'form-factor': 'Determines how performance metrics are scored and if mobile-only audits are skipped.', + 'screenEmulation': 'Sets screen emulation parameters. Use --no-screenEmulation to disable. Otherwise set the 4 parameters individually: --screenEmulation.mobile=true --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2', + 'emulatedUserAgent': 'Sets useragent emulation', + 'throttling-method': 'Controls throttling method', 'throttling.rttMs': 'Controls simulated network RTT (TCP layer)', 'throttling.throughputKbps': 'Controls simulated network download throughput', @@ -104,6 +108,7 @@ function getFlags(manualArgv) { 'throttling.downloadThroughputKbps': 'Controls emulated network download throughput', 'throttling.uploadThroughputKbps': 'Controls emulated network upload throughput', 'throttling.cpuSlowdownMultiplier': 'Controls simulated + emulated CPU throttling', + 'gather-mode': 'Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.', 'audit-mode': 'Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)', @@ -151,9 +156,9 @@ function getFlags(manualArgv) { .boolean([ 'disable-storage-reset', 'save-assets', 'list-all-audits', 'list-trace-categories', 'view', 'verbose', 'quiet', 'help', 'print-config', - 'chrome-ignore-default-flags', + 'chrome-ignore-default-flags', 'screenEmulation.mobile', ]) - .choices('emulated-form-factor', ['mobile', 'desktop', 'none']) + .choices('form-factor', ['mobile', 'desktop']) .choices('throttling-method', ['devtools', 'provided', 'simulate']) .choices('preset', ['perf', 'experimental']) // force as an array @@ -174,6 +179,7 @@ function getFlags(manualArgv) { .default('chrome-flags', '') .default('output', ['html']) .default('port', 0) + .default('form-factor', 'mobile') .default('hostname', 'localhost') .default('enable-error-reporting', undefined) // Undefined so prompted by default .default('channel', 'cli') diff --git a/types/externs.d.ts b/types/externs.d.ts index b9c293d2f49b..d2573353c47f 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -122,7 +122,7 @@ declare global { disableStorageReset?: boolean; // TODO: formFactor should really be required, but since this type is shared in Flags, we can't reasonably do that. We'll likely need to separate SharedFlagsSettings into CLI Flags and Config Settings. - /** How Lighthouse should interpret this run in regards to perf scoring and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ + /** How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor?: 'mobile'|'desktop'; /** Screen emulation properties (width, height, dpr, mobile viewport) to apply. Typically set to false if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. **TODO: What do we recommend for desktop?** */ screenEmulation?: LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest | false; From ce9b4f8268bb031e617cd44a287cd5ed290c9d8c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 13:36:41 -0800 Subject: [PATCH 15/63] assert valid flags and settings --- .../test/cli/__snapshots__/index-test.js.snap | 18 ++++++++++-- lighthouse-core/config/config.js | 28 ++++++++++++++++--- .../test/config/default-config-test.js | 1 + .../test/gather/gather-runner-test.js | 2 +- lighthouse-core/test/index-test.js | 3 ++ types/externs.d.ts | 2 +- 6 files changed, 46 insertions(+), 8 deletions(-) diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap index feda53ff6361..eab5bb635377 100644 --- a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap +++ b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap @@ -1508,8 +1508,9 @@ Object { "budgets": null, "channel": "cli", "disableStorageReset": false, - "formFactor": "mobile", + "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse", "extraHeaders": null, + "formFactor": "mobile", "gatherMode": false, "locale": "en-US", "maxWaitForFcp": 30000, @@ -1520,6 +1521,12 @@ Object { "html", ], "precomputedLanternData": null, + "screenEmulation": Object { + "deviceScaleFactor": 2.625, + "height": 640, + "mobile": false, + "width": 360, + }, "skipAudits": null, "throttling": Object { "cpuSlowdownMultiplier": 4, @@ -1656,8 +1663,9 @@ Object { "budgets": null, "channel": "cli", "disableStorageReset": false, - "formFactor": "mobile", + "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse", "extraHeaders": null, + "formFactor": "mobile", "gatherMode": false, "locale": "en-US", "maxWaitForFcp": 30000, @@ -1670,6 +1678,12 @@ Object { "json", ], "precomputedLanternData": null, + "screenEmulation": Object { + "deviceScaleFactor": 2.625, + "height": 640, + "mobile": false, + "width": 360, + }, "skipAudits": null, "throttling": Object { "cpuSlowdownMultiplier": 4, diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index 908eb6f74c87..7c530f59a421 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -161,14 +161,31 @@ function assertValidGatherer(gathererInstance, gathererName) { } } + +/** + * Validate the LH.Flags + * @param {LH.Flags} flags + */ +function assertValidFlags(flags) { + // @ts-expect-error Checking for removed flags + if (flags.emulatedFormFactor || flags.internalDisableDeviceScreenEmulation) { + throw new Error('Invalid emulation flag. Emulation configuration changed in LH 7.0. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md'); // eslint-disable-line max-len + } +} + /** - * + * Validate the settings after they've been built * @param {LH.Config.Settings} settings */ function assertValidSettings(settings) { - // @ts-expect-error Checking for removed settings - if (settings['emulatedFormFactor'] || settings['internalDisableDeviceScreenEmulation']) { - throw new Error('Emulation setting changed in LH 7.0. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md'); // eslint-disable-line max-len + if (!settings.formFactor) { + throw new Error(`\`settings.formFactor\` must be defined as 'mobile' or 'desktop'. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md`); // eslint-disable-line max-len + } + + if (settings.screenEmulation) { + if (settings.screenEmulation.mobile !== (settings.formFactor === 'mobile')) { + log.error('config', `Screen emulation mobile setting (${settings.screenEmulation.mobile}) does not match formFactor setting (${settings.formFactor})`); // eslint-disable-line max-len + } } } @@ -344,6 +361,9 @@ class Config { // Validate and merge in plugins (if any). configJSON = Config.mergePlugins(configJSON, flags, configDir); + if (flags) { + assertValidFlags(flags); + } const settings = Config.initSettings(configJSON.settings, flags); // Augment passes with necessary defaults and require gatherers. diff --git a/lighthouse-core/test/config/default-config-test.js b/lighthouse-core/test/config/default-config-test.js index 7c5524a4e600..89a372672af4 100644 --- a/lighthouse-core/test/config/default-config-test.js +++ b/lighthouse-core/test/config/default-config-test.js @@ -15,6 +15,7 @@ describe('Default Config', () => { it('only has opportunity audits that return opportunities details', async () => { const flags = { auditMode: __dirname + '/../results/artifacts/', + formFactor: 'mobile', // sample_v2 was run with these settings, so need to match them. throttlingMethod: 'devtools', diff --git a/lighthouse-core/test/gather/gather-runner-test.js b/lighthouse-core/test/gather/gather-runner-test.js index b1eff14c5a0b..110ddaa896f8 100644 --- a/lighthouse-core/test/gather/gather-runner-test.js +++ b/lighthouse-core/test/gather/gather-runner-test.js @@ -269,7 +269,7 @@ describe('GatherRunner', function() { test('works when running on desktop device', DESKTOP_UA, 'desktop'); }); - /** @param {'mobile' | 'desktop'} formFactor */ + /** @param {NonNullable}formFactor */ const getSettings = formFactor => ({ formFactor: formFactor, screenEmulation: constants.screenEmulationMetrics[formFactor], diff --git a/lighthouse-core/test/index-test.js b/lighthouse-core/test/index-test.js index c0c5a1fc81b7..e05d87aee618 100644 --- a/lighthouse-core/test/index-test.js +++ b/lighthouse-core/test/index-test.js @@ -116,6 +116,7 @@ describe('Module Tests', function() { }, { settings: { auditMode: __dirname + '/fixtures/artifacts/perflog/', + formFactor: 'mobile', }, audits: [ 'viewport', @@ -141,6 +142,7 @@ describe('Module Tests', function() { const results = await lighthouse(exampleUrl, {}, { settings: { auditMode: __dirname + '/fixtures/artifacts/perflog/', + formFactor: 'mobile', }, audits: [], }); @@ -152,6 +154,7 @@ describe('Module Tests', function() { const results = await lighthouse(exampleUrl, {}, { settings: { auditMode: __dirname + '/fixtures/artifacts/perflog/', + formFactor: 'mobile', channel: 'custom', }, audits: [], diff --git a/types/externs.d.ts b/types/externs.d.ts index d2573353c47f..42ab79a1869f 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -124,7 +124,7 @@ declare global { // TODO: formFactor should really be required, but since this type is shared in Flags, we can't reasonably do that. We'll likely need to separate SharedFlagsSettings into CLI Flags and Config Settings. /** How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor?: 'mobile'|'desktop'; - /** Screen emulation properties (width, height, dpr, mobile viewport) to apply. Typically set to false if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. **TODO: What do we recommend for desktop?** */ + /** Screen emulation properties (width, height, dpr, mobile viewport) to apply. Typically set to false if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. For desktop, we recommend applying consistent desktop screen emulation. */ screenEmulation?: LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest | false; /** User Agent to apply */ emulatedUserAgent?: string | false; From 3e5fe7575a8486e23e8a50f5e8cae6da1846c6f9 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 16:58:19 -0800 Subject: [PATCH 16/63] toe Pick --- types/externs.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/externs.d.ts b/types/externs.d.ts index 42ab79a1869f..528e4b3cb7f3 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -125,7 +125,7 @@ declare global { /** How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor?: 'mobile'|'desktop'; /** Screen emulation properties (width, height, dpr, mobile viewport) to apply. Typically set to false if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. For desktop, we recommend applying consistent desktop screen emulation. */ - screenEmulation?: LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest | false; + screenEmulation?: Pick | false; /** User Agent to apply */ emulatedUserAgent?: string | false; /** The method used to throttle the network. */ From bab1c15d2fa337e2e173d090a5aa32e439ba81e1 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 17:12:15 -0800 Subject: [PATCH 17/63] undefined default for a boolean yargs --- lighthouse-cli/cli-flags.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index c5aaa316aa36..807fe5fd0a09 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -179,8 +179,10 @@ function getFlags(manualArgv) { .default('chrome-flags', '') .default('output', ['html']) .default('port', 0) - .default('form-factor', 'mobile') .default('hostname', 'localhost') + .default('form-factor', 'mobile') + // TODO: Remove undefined defaults when yargs-parser is >= v10. https://github.com/yargs/yargs-parser/issues/116 + .default('screenEmulation.mobile', undefined) .default('enable-error-reporting', undefined) // Undefined so prompted by default .default('channel', 'cli') .check(/** @param {LH.CliFlags} argv */ (argv) => { From f3c6d3528eab9cdd1b5c0978eafe3b617e0fc45a Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 17:18:11 -0800 Subject: [PATCH 18/63] devtools-entry tweak. webtests will fail until internalDisableDeviceScreenEmulation is dropped from devtools --- clients/devtools-entry.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/clients/devtools-entry.js b/clients/devtools-entry.js index 0b434bcfe522..d03b8ead8ff4 100644 --- a/clients/devtools-entry.js +++ b/clients/devtools-entry.js @@ -28,6 +28,8 @@ function createConfig(categoryIDs, device) { /** @type {LH.SharedFlagsSettings} */ const settings = { onlyCategories: categoryIDs, + // DevTools handles all the emulation + screenEmulation: false, }; if (device === 'desktop') { settings.throttling = desktopDense4G; From 04f623cf6a6816e3cb930548fd2561c559804f26 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 20:38:38 -0800 Subject: [PATCH 19/63] fix/update proto --- proto/lighthouse-result.proto | 70 +++++++++++++++++------------------ 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/proto/lighthouse-result.proto b/proto/lighthouse-result.proto index e7b911c9d639..a2b7fb88fa20 100644 --- a/proto/lighthouse-result.proto +++ b/proto/lighthouse-result.proto @@ -55,7 +55,7 @@ enum LighthouseError { DNS_FAILURE = 19; // A timeout in the initial connection to the debugger protocol. CRI_TIMEOUT = 20; - // The page requested was not HTML. + // The page requested was not HTML. NOT_HTML = 21; // The trace did not contain a ResourceSendRequest event. NO_RESOURCE_REQUEST = 22; @@ -126,23 +126,18 @@ message LighthouseResult { // Message containing the configuration settings for the LH run message ConfigSettings { + // The possible form factors an audit can be run in - enum formFactor { - // Unknown form factor. This should not be used + enum EmulatedFormFactor { // Deprecated UNKNOWN_FORM_FACTOR = 0; - - // Mobile form factor mobile = 1; - - // Desktop form factor desktop = 2; - - // No emulation used, uses system directly - none = 3; + none = 3 [deprecated = true]; } - // The form factor used in the audit - formFactor emulated_form_factor = 1; + + // The form factor emulation to apply. Do not use. + EmulatedFormFactor emulated_form_factor = 1 [deprecated = true]; // The locale that was active during the audit string locale = 2; @@ -154,6 +149,9 @@ message LighthouseResult { // How Lighthouse was run, e.g. from the Chrome extension or from the npm // module string channel = 4; + + // How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. + EmulatedFormFactor form_factor = 5; } // The settings that were used to run this audit @@ -376,70 +374,70 @@ message I18n { // Descriptive explanation for emulation setting when emulating a generic desktop form factor, as opposed to a mobile-device like form factor. string runtime_desktop_emulation = 21; - + // Descriptive explanation for emulation setting when emulating a Nexus 5X mobile device. string runtime_mobile_emulation = 22; - + // Descriptive explanation for emulation setting when no device emulation is set. string runtime_no_emulation = 23; - + // Label for a row in a table that shows the estimated CPU power of the machine running Lighthouse. Example row values: 532, 1492, 783. string runtime_settings_benchmark = 24; - + // Label for a row in a table that describes the CPU throttling conditions that were used during a Lighthouse run, if any. string runtime_settings_CPU_throttling = 25; - + // Label for a row in a table that describes the kind of device that was emulated for the Lighthouse run. Example values for row elements: 'No Emulation', 'Emulated Desktop', etc. string runtime_settings_device = 26; - + // Label for a row in a table that shows the time at which a Lighthouse run was conducted; formatted as a timestamp, e.g. Jan 1, 1970 12:00 AM UTC. string runtime_settings_fetch_time = 27; - + // Label for a row in a table that describes the network throttling conditions that were used during a Lighthouse run, if any. string runtime_settings_network_throttling = 28; - + // Title of the Runtime settings table in a Lighthouse report. Runtime settings are the environment configurations that a specific report used at auditing time. string runtime_settings_title = 29; - + // Label for a row in a table that shows the User Agent that was detected on the Host machine that ran Lighthouse. string runtime_settings_UA = 30; - + // Label for a row in a table that shows the User Agent that was used to send out all network requests during the Lighthouse run. string runtime_settings_UA_network = 31; - + // Label for a row in a table that shows the URL that was audited during a Lighthouse run. string runtime_settings_Url = 32; - + // Descriptive explanation for a runtime setting that is set to an unknown value. string runtime_unknown = 33; - + // Option in a dropdown menu that copies the Lighthouse JSON object to the system clipboard. string dropdown_copy_JSON = 34; - + // Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes. string dropdown_dark_theme = 35; - - // Option in a dropdown menu that opens a full Lighthouse report in a print dialog. + + // Option in a dropdown menu that opens a full Lighthouse report in a print dialog. string dropdown_print_expanded = 36; - - // Option in a dropdown menu that opens a small, summary report in a print dialog. + + // Option in a dropdown menu that opens a small, summary report in a print dialog. string dropdown_print_summary = 37; - + // Option in a dropdown menu that saves the current report as a new Github Gist. string dropdown_save_gist = 38; - + // Option in a dropdown menu that saves the Lighthouse report HTML locally to the system as a '.html' file. string dropdown_save_HTML = 39; - + // Option in a dropdown menu that saves the Lighthouse JSON object to the local system as a '.json' file. string dropdown_save_JSON = 40; - + // Option in a dropdown menu that opens the current report in the Lighthouse Viewer Application. string dropdown_viewer = 41; - + // Label for button to create an issue against the Lighthouse Github project. string footer_issue = 42; - + // Descriptive explanation for environment throttling that was provided by the runtime environment instead of provided by Lighthouse throttling. string throttling_provided = 43; From 055f99fbc22cba305297970c89786f8fdee6f7c9 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 20:39:22 -0800 Subject: [PATCH 20/63] Update docs/emulation.md Co-authored-by: Patrick Hulce --- docs/emulation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/emulation.md b/docs/emulation.md index a43e92af84eb..5647ee1ba042 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -2,7 +2,7 @@ # Emulation in Lighthouse In Lighthouse, "Emulation" refers to the screen/viewport emulation and UserAgent string spoofing. -["Throttling"](./throttling.md) covers the similar topics around network connection throttling/simulation and CPU throttling. +["Throttling"](./throttling.md) covers the similar topics around network and CPU throttling/simulation. In Lighthouse v7, most of the configuration regarding emulation changed to be more intuitive and clear. The [tracking issue](https://github.com/GoogleChrome/lighthouse/issues/10910 ) captures additional motivations. @@ -29,4 +29,4 @@ If you're using Lighthouse against a mobile device, you want to set `--no-screen * Added: The `formFactor` property. * Added: The `screenEmulation` property. * Added: The `emulatedUserAgent` property. -* (`throttling` and `throttlingMethod` remain unchanged) \ No newline at end of file +* (`throttling` and `throttlingMethod` remain unchanged) From 2f4bc4cd6c129d0248c54cbf4e2837a721d94073 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 20:40:16 -0800 Subject: [PATCH 21/63] Update docs/emulation.md Co-authored-by: Patrick Hulce --- docs/emulation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/emulation.md b/docs/emulation.md index 5647ee1ba042..80e33c5b0fb6 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -17,7 +17,7 @@ You must always set `formFactor`. It doesn't control emulation, but it determine You can choose how `screenEmulation` is applied. It can accept an object of `{width: number, height: number, deviceScaleRatio: number, mobile: boolean}` to apply that screen emulation or `false` if Lighthouse should avoid applying screen emulation. It's typically set to `false` if either emulation is applied outside of Lighthouse, or it's being run on a mobile device. The `mobile` boolean applies overlay scrollbars and a few other mobile-specific screen emulation characteristics. -You can choose how to handle userAgent emulation. The `emulatedUserAgent` property accepts either a `string` to apply the provided userAgent or `false` if no UA spoofing should be applied. Typically `false` is used if UA spoofing is apply outside of Lighthouse or on a mobile device. You can also redundantly apply userAgent emulation with no risk. +You can choose how to handle userAgent emulation. The `emulatedUserAgent` property accepts either a `string` to apply the provided userAgent or `false` if no UA spoofing should be applied. Typically `false` is used if UA spoofing is applied outside of Lighthouse or on a mobile device. You can also redundantly apply userAgent emulation with no risk. If you're using Lighthouse against a mobile device, you want to set `--no-screenEmulation` and `--throttling.cpuSlowdownMultiplier=1`. (`--formFactor=mobile` is the default already). From 667368bf2f0c576c91de66c8536e6da7bf8e9b28 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 20:40:34 -0800 Subject: [PATCH 22/63] Update docs/emulation.md Co-authored-by: Patrick Hulce --- docs/emulation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/emulation.md b/docs/emulation.md index 80e33c5b0fb6..f0ec5276738a 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -19,7 +19,7 @@ You can choose how `screenEmulation` is applied. It can accept an object of `{wi You can choose how to handle userAgent emulation. The `emulatedUserAgent` property accepts either a `string` to apply the provided userAgent or `false` if no UA spoofing should be applied. Typically `false` is used if UA spoofing is applied outside of Lighthouse or on a mobile device. You can also redundantly apply userAgent emulation with no risk. -If you're using Lighthouse against a mobile device, you want to set `--no-screenEmulation` and `--throttling.cpuSlowdownMultiplier=1`. (`--formFactor=mobile` is the default already). +If you're using Lighthouse on a mobile device, you want to set `--no-screenEmulation` and `--throttling.cpuSlowdownMultiplier=1`. (`--formFactor=mobile` is the default already). ### Changes made in v7 From c416277f87a9e051bd81c9059af11af0802d969d Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 7 Dec 2020 20:56:49 -0800 Subject: [PATCH 23/63] small initial feedback --- docs/emulation.md | 6 +++--- lighthouse-cli/cli-flags.js | 6 ++---- lighthouse-core/audits/content-width.js | 2 +- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/docs/emulation.md b/docs/emulation.md index f0ec5276738a..ecda13abc2a4 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -4,9 +4,6 @@ In Lighthouse, "Emulation" refers to the screen/viewport emulation and UserAgent string spoofing. ["Throttling"](./throttling.md) covers the similar topics around network and CPU throttling/simulation. -In Lighthouse v7, most of the configuration regarding emulation changed to be more intuitive and clear. The [tracking issue](https://github.com/GoogleChrome/lighthouse/issues/10910 -) captures additional motivations. - With the default configuration, Lighthouse emulates a mobile device. There's [a `desktop` configuration](../lighthouse-core/config/desktop-config.js), available to CLI users with `--preset=desktop`, which applies a consistent desktop environment and scoring calibration. ### Advanced emulation setups @@ -23,6 +20,9 @@ If you're using Lighthouse on a mobile device, you want to set `--no-screenEmula ### Changes made in v7 +In Lighthouse v7, most of the configuration regarding emulation changed to be more intuitive and clear. The [tracking issue](https://github.com/GoogleChrome/lighthouse/issues/10910 +) captures additional motivations. + * Removed: The `emulatedFormFactor` property (which determined how emulation is applied). * Removed: The `TestedAsMobileDevice` artifact is removed. Instead of being inferred, the `formFactor` property is used. * The `internalDisableDeviceScreenEmulation` property is removed. It's equivalent to the new `screenEmulation: false`. diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index 807fe5fd0a09..aa93309a2f4f 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -98,7 +98,7 @@ function getFlags(manualArgv) { 'Disable clearing the browser cache and other storage APIs before a run', 'form-factor': 'Determines how performance metrics are scored and if mobile-only audits are skipped.', - 'screenEmulation': 'Sets screen emulation parameters. Use --no-screenEmulation to disable. Otherwise set the 4 parameters individually: --screenEmulation.mobile=true --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2', + 'screenEmulation': 'Sets screen emulation parameters. See also --preset. Use --no-screenEmulation to disable. Otherwise set the 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2', 'emulatedUserAgent': 'Sets useragent emulation', 'throttling-method': 'Controls throttling method', @@ -156,7 +156,7 @@ function getFlags(manualArgv) { .boolean([ 'disable-storage-reset', 'save-assets', 'list-all-audits', 'list-trace-categories', 'view', 'verbose', 'quiet', 'help', 'print-config', - 'chrome-ignore-default-flags', 'screenEmulation.mobile', + 'chrome-ignore-default-flags', ]) .choices('form-factor', ['mobile', 'desktop']) .choices('throttling-method', ['devtools', 'provided', 'simulate']) @@ -181,8 +181,6 @@ function getFlags(manualArgv) { .default('port', 0) .default('hostname', 'localhost') .default('form-factor', 'mobile') - // TODO: Remove undefined defaults when yargs-parser is >= v10. https://github.com/yargs/yargs-parser/issues/116 - .default('screenEmulation.mobile', undefined) .default('enable-error-reporting', undefined) // Undefined so prompted by default .default('channel', 'cli') .check(/** @param {LH.CliFlags} argv */ (argv) => { diff --git a/lighthouse-core/audits/content-width.js b/lighthouse-core/audits/content-width.js index 2881d6a9b984..718ae991abf2 100644 --- a/lighthouse-core/audits/content-width.js +++ b/lighthouse-core/audits/content-width.js @@ -52,7 +52,7 @@ class ContentWidth extends Audit { const windowWidth = artifacts.ViewportDimensions.outerWidth; const widthsMatch = viewportWidth === windowWidth; - if (context.settings.formFactor !== 'mobile') { + if (context.settings.formFactor === 'desktop') { return { score: 1, notApplicable: true, From ed863bd411ec402ce8ca079351bc37c6b08bb381 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 8 Dec 2020 17:52:20 -0800 Subject: [PATCH 24/63] Apply brendan's suggestions from code review Co-authored-by: Brendan Kenny --- lighthouse-core/config/config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index 14ed3bf70904..e7b0270a17e9 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -169,7 +169,7 @@ function assertValidGatherer(gathererInstance, gathererName) { function assertValidFlags(flags) { // @ts-expect-error Checking for removed flags if (flags.emulatedFormFactor || flags.internalDisableDeviceScreenEmulation) { - throw new Error('Invalid emulation flag. Emulation configuration changed in LH 7.0. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md'); // eslint-disable-line max-len + throw new Error('Invalid emulation flag. Emulation configuration changed in LH 7.0. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md'); } } @@ -179,7 +179,7 @@ function assertValidFlags(flags) { */ function assertValidSettings(settings) { if (!settings.formFactor) { - throw new Error(`\`settings.formFactor\` must be defined as 'mobile' or 'desktop'. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md`); // eslint-disable-line max-len + throw new Error(`\`settings.formFactor\` must be defined as 'mobile' or 'desktop'. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md`); } if (settings.screenEmulation) { From 314f9e993da6188f20c207c2b9c1538332daf373 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 10 Dec 2020 16:13:25 -0800 Subject: [PATCH 25/63] tweaked types based on feedback --- types/externs.d.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/types/externs.d.ts b/types/externs.d.ts index 528e4b3cb7f3..4cc065b26339 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -125,9 +125,10 @@ declare global { /** How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor?: 'mobile'|'desktop'; /** Screen emulation properties (width, height, dpr, mobile viewport) to apply. Typically set to false if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. For desktop, we recommend applying consistent desktop screen emulation. */ - screenEmulation?: Pick | false; + screenEmulation?: Pick & {disabled: boolean}; /** User Agent to apply */ - emulatedUserAgent?: string | false; + emulatedUserAgent?: string | boolean; + /** The method used to throttle the network. */ throttlingMethod?: 'devtools'|'simulate'|'provided'; /** The throttling config settings. */ From 163c1d59f4654d1c75bcbea2a20250f3aa8f8940 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 14 Dec 2020 06:07:35 +0000 Subject: [PATCH 26/63] propagating new type changes --- docs/emulation.md | 6 ++-- docs/readme.md | 4 +-- lighthouse-cli/cli-flags.js | 4 +-- lighthouse-core/config/config.js | 2 +- lighthouse-core/config/constants.js | 6 ++-- .../gather/gatherers/full-page-screenshot.js | 2 +- lighthouse-core/lib/emulation.js | 2 +- lighthouse-core/lib/i18n/locales/en-US.json | 30 +++++++++---------- lighthouse-core/lib/i18n/locales/en-XL.json | 30 +++++++++---------- lighthouse-core/runner.js | 2 ++ .../test/results/artifacts/artifacts.json | 5 ++-- lighthouse-core/test/results/sample_v2.json | 3 +- 12 files changed, 51 insertions(+), 45 deletions(-) diff --git a/docs/emulation.md b/docs/emulation.md index ecda13abc2a4..75f6df438d6b 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -12,11 +12,11 @@ Some products use Lighthouse in scenarios where emulation is applied outside of You must always set `formFactor`. It doesn't control emulation, but it determines how Lighthouse should interpret the run in regards to scoring performance metrics and skipping mobile-only tests in desktop. -You can choose how `screenEmulation` is applied. It can accept an object of `{width: number, height: number, deviceScaleRatio: number, mobile: boolean}` to apply that screen emulation or `false` if Lighthouse should avoid applying screen emulation. It's typically set to `false` if either emulation is applied outside of Lighthouse, or it's being run on a mobile device. The `mobile` boolean applies overlay scrollbars and a few other mobile-specific screen emulation characteristics. +You can choose how `screenEmulation` is applied. It can accept an object of `{width: number, height: number, deviceScaleRatio: number, mobile: boolean, disabled: false}` to apply that screen emulation or an object of `{disabled: true}` if Lighthouse should avoid applying screen emulation. It's typically set to disabled if either emulation is applied outside of Lighthouse, or it's being run on a mobile device. The `mobile` boolean applies overlay scrollbars and a few other mobile-specific screen emulation characteristics. -You can choose how to handle userAgent emulation. The `emulatedUserAgent` property accepts either a `string` to apply the provided userAgent or `false` if no UA spoofing should be applied. Typically `false` is used if UA spoofing is applied outside of Lighthouse or on a mobile device. You can also redundantly apply userAgent emulation with no risk. +You can choose how to handle userAgent emulation. The `emulatedUserAgent` property accepts either a `string` to apply the provided userAgent or a `boolean` -- `true` if the default UA spoofing should be applied (default) or `false` if no UA spoofing should be applied. Typically `false` is used if UA spoofing is applied outside of Lighthouse or on a mobile device. You can also redundantly apply userAgent emulation with no risk. -If you're using Lighthouse on a mobile device, you want to set `--no-screenEmulation` and `--throttling.cpuSlowdownMultiplier=1`. (`--formFactor=mobile` is the default already). +If you're using Lighthouse on a mobile device, you want to set `--screenEmulation.disabled` and `--throttling.cpuSlowdownMultiplier=1`. (`--formFactor=mobile` is the default already). ### Changes made in v7 diff --git a/docs/readme.md b/docs/readme.md index e29542e5ed45..a82952ce86e8 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -116,7 +116,7 @@ Alternatively, you can instruct Chrome to ignore the invalid certificate by addi Lighthouse can run against a real mobile device. You can follow the [Remote Debugging on Android (Legacy Workflow)](https://developer.chrome.com/devtools/docs/remote-debugging-legacy) up through step 3.3, but the TL;DR is install & run adb, enable USB debugging, then port forward 9222 from the device to the machine with Lighthouse. -You'll likely want to use the CLI flags `--no-screenEmulation --throttling.cpuSlowdownMultiplier=1` to disable any additional emulation. +You'll likely want to use the CLI flags `--screenEmulation.disabled --throttling.cpuSlowdownMultiplier=1` to disable any additional emulation. ```sh $ adb kill-server @@ -128,7 +128,7 @@ $ adb devices -l $ adb forward tcp:9222 localabstract:chrome_devtools_remote -$ lighthouse --port=9222 --no-screenEmulation --throttling.cpuSlowdownMultiplier=1 https://example.com +$ lighthouse --port=9222 --screenEmulation.disabled --throttling.cpuSlowdownMultiplier=1 https://example.com ``` ## Lighthouse as trace processor diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index aa93309a2f4f..25f96ce70786 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -44,7 +44,7 @@ function getFlags(manualArgv) { 'lighthouse --output=json --output-path=./report.json --save-assets', 'Save trace, screenshots, and named JSON report.') .example( - 'lighthouse --no-screenEmulation --throttling-method=provided --no-emulatedUserAgent', + 'lighthouse --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent', 'Disable device emulation and all throttling') .example( 'lighthouse --chrome-flags="--window-size=412,660"', @@ -98,7 +98,7 @@ function getFlags(manualArgv) { 'Disable clearing the browser cache and other storage APIs before a run', 'form-factor': 'Determines how performance metrics are scored and if mobile-only audits are skipped.', - 'screenEmulation': 'Sets screen emulation parameters. See also --preset. Use --no-screenEmulation to disable. Otherwise set the 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2', + 'screenEmulation': 'Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2', 'emulatedUserAgent': 'Sets useragent emulation', 'throttling-method': 'Controls throttling method', diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index e7b0270a17e9..8e9f1c55d4f9 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -182,7 +182,7 @@ function assertValidSettings(settings) { throw new Error(`\`settings.formFactor\` must be defined as 'mobile' or 'desktop'. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md`); } - if (settings.screenEmulation) { + if (!settings.screenEmulation.disabled) { if (settings.screenEmulation.mobile !== (settings.formFactor === 'mobile')) { log.error('config', `Screen emulation mobile setting (${settings.screenEmulation.mobile}) does not match formFactor setting (${settings.formFactor})`); // eslint-disable-line max-len } diff --git a/lighthouse-core/config/constants.js b/lighthouse-core/config/constants.js index 223f7d3766c2..bf696e2d7639 100644 --- a/lighthouse-core/config/constants.js +++ b/lighthouse-core/config/constants.js @@ -51,7 +51,7 @@ const throttling = { }; /** - * @type {LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest} + * @type {LH.SharedFlagsSettings['screenEmulation']} */ const MOTOG4_EMULATION_METRICS = { mobile: true, @@ -61,17 +61,19 @@ const MOTOG4_EMULATION_METRICS = { // our perf recommendations. // https://github.com/GoogleChrome/lighthouse/issues/10741#issuecomment-626903508 deviceScaleFactor: 2.625, + disabled: false, }; /** * Desktop metrics adapted from emulated_devices/module.json - * @type {LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest} + * @type {LH.SharedFlagsSettings['screenEmulation']} */ const DESKTOP_EMULATION_METRICS = { mobile: false, width: 1350, height: 940, deviceScaleFactor: 1, + disabled: false, }; const screenEmulationMetrics = { diff --git a/lighthouse-core/gather/gatherers/full-page-screenshot.js b/lighthouse-core/gather/gatherers/full-page-screenshot.js index 537270fc6ba6..f500162ebef4 100644 --- a/lighthouse-core/gather/gatherers/full-page-screenshot.js +++ b/lighthouse-core/gather/gatherers/full-page-screenshot.js @@ -116,7 +116,7 @@ class FullPageScreenshot extends Gatherer { // In case some other program is controlling emulation, try to remember what the device looks // like now and reset after gatherer is done. - const lighthouseControlsEmulation = passContext.settings.screenEmulation !== false; + const lighthouseControlsEmulation = passContext.settings.screenEmulation.disabled !== false; try { return { diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index 301195bdd289..ec413d98fdaa 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -45,7 +45,7 @@ async function emulate(driver, settings) { }); } - if (settings.screenEmulation !== false) { + if (settings.screenEmulation.disabled !== false) { await driver.sendCommand('Emulation.setDeviceMetricsOverride', settings.screenEmulation); await driver.sendCommand('Emulation.setTouchEmulationEnabled', { enabled: settings.screenEmulation.mobile, diff --git a/lighthouse-core/lib/i18n/locales/en-US.json b/lighthouse-core/lib/i18n/locales/en-US.json index d47550bc84c1..5f99e085a151 100644 --- a/lighthouse-core/lib/i18n/locales/en-US.json +++ b/lighthouse-core/lib/i18n/locales/en-US.json @@ -2064,7 +2064,7 @@ "message": "Consider uploading your GIF to a service which will make it available to embed as an HTML5 video." }, "node_modules/lighthouse-stack-packs/packs/joomla.js | offscreen-images": { - "message": "Install a [lazy-load Joomla plugin](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=lazy%20loading) that provides the ability to defer any offscreen images, or switch to a template that provides that functionality. Starting with Joomla 4.0, a dedicated lazy-loading plugin can be enabled by using the \"Content - Lazy Loading Images\" plugin. Also consider using [an AMP plugin](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=amp)." + "message": "Install a [lazy-load Joomla plugin](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=lazy%20loading) that provides the ability to defer any offscreen images, or switch to a template that provides that functionality. Starting with Joomla 4.0, all new images will [automatically](https://github.com/joomla/joomla-cms/pull/30748) get the `loading` attribute from the core." }, "node_modules/lighthouse-stack-packs/packs/joomla.js | render-blocking-resources": { "message": "There are a number of Joomla plugins that can help you [inline critical assets](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=performance) or [defer less important resources](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=performance). Beware that optimizations provided by these plugins may break features of your templates or plugins, so you will need to test these thoroughly." @@ -2138,46 +2138,46 @@ "node_modules/lighthouse-stack-packs/packs/magento.js | uses-webp-images": { "message": "Consider searching the [Magento Marketplace](https://marketplace.magento.com/catalogsearch/result/?q=webp) for a variety of third-party extensions to leverage newer image formats." }, - "node_modules/lighthouse-stack-packs/packs/october.js | efficient-animated-content": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | efficient-animated-content": { "message": "[Replace animated GIFs with video](https://web.dev/replace-gifs-with-videos/) for faster web page loads and consider using modern file formats such as [WebM](https://web.dev/replace-gifs-with-videos/#create-webm-videos) or [AV1](https://developers.google.com/web/updates/2018/09/chrome-70-media-updates#av1-decoder) to improve compression efficiency by greater than 30% over the current state-of-the-art video codec, VP9." }, - "node_modules/lighthouse-stack-packs/packs/october.js | offscreen-images": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | offscreen-images": { "message": "Consider installing an [image lazy loading plugin](https://octobercms.com/plugins?search=lazy) that provides the ability to defer any offscreen images, or switch to a theme that provides that functionality. Also consider using [the AMP plugin](https://octobercms.com/plugins?search=Accelerated+Mobile+Pages)." }, - "node_modules/lighthouse-stack-packs/packs/october.js | render-blocking-resources": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | render-blocking-resources": { "message": "There are many plugins that help [inline critical assets](https://octobercms.com/plugins?search=css). These plugins may break other plugins, so you should test thoroughly." }, - "node_modules/lighthouse-stack-packs/packs/october.js | time-to-first-byte": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | time-to-first-byte": { "message": "Themes, plugins and server specifications all contribute to the server response time. Consider finding a more optimized theme, carefully selecting an optimization plugin and/or upgrade the server. October CMS also allows developers to use [`Queues`](https://octobercms.com/docs/services/queues) to defer the processing of a time consuming task, such as sending an e-mail. This drastically speeds up web requests." }, - "node_modules/lighthouse-stack-packs/packs/october.js | total-byte-weight": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | total-byte-weight": { "message": "Consider showing excerpts in the post lists (e.g. using a `show more` button), reducing the number of posts shown on a given web page, breaking long posts into multiple web pages, or using a plugin to lazy-load comments." }, - "node_modules/lighthouse-stack-packs/packs/october.js | unminified-css": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | unminified-css": { "message": "There are many [plugins](https://octobercms.com/plugins?search=css) that can speed up a website by concatenating, minifying and compressing the styles. Using a build process to do this minification up-front can speed up development." }, - "node_modules/lighthouse-stack-packs/packs/october.js | unminified-javascript": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | unminified-javascript": { "message": "There are many [plugins](https://octobercms.com/plugins?search=javascript) that can speed up a website by concatenating, minifying and compressing the scripts. Using a build process to do this minification up-front can speed up development." }, - "node_modules/lighthouse-stack-packs/packs/october.js | unused-css-rules": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | unused-css-rules": { "message": "Consider reviewing the [plugins](https://octobercms.com/plugins) loading unused CSS on the website. To identify plugins that add unnecessary CSS, run [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. Identify the theme/plugin responsible from the stylesheet URL. Look for plugins with many stylesheets with lots of red in code coverage. A plugin should only add a stylesheet if it is actually used on the web page." }, - "node_modules/lighthouse-stack-packs/packs/october.js | unused-javascript": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | unused-javascript": { "message": "Consider reviewing the [plugins](https://octobercms.com/plugins?search=javascript) that load unused JavaScript in the web page. To identify plugins that add unnecessary JavaScript, run [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. Identify the theme/plugin responsible from the URL of the script. Look for plugins with many scripts with lots of red in code coverage. A plugin should only add a script if it is actually used on the web page." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-long-cache-ttl": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-long-cache-ttl": { "message": "Read about [preventing unnecessary network requests with the HTTP Cache](https://web.dev/http-cache/#caching-checklist). There are many [plugins](https://octobercms.com/plugins?search=Caching) that can be used to speed up caching." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-optimized-images": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-optimized-images": { "message": "Consider using an [image optimization plugin](https://octobercms.com/plugins?search=image) to compresses images while retaining the quality." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-responsive-images": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-responsive-images": { "message": "Upload images directly in the media manager to ensure the required image sizes are available. Consider using the [resize filter](https://octobercms.com/docs/markup/filter-resize) or an [image resizing plugin](https://octobercms.com/plugins?search=image) to ensure the optimal image sizes are used." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-text-compression": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-text-compression": { "message": "Enable text compression in the web server configuration." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-webp-images": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-webp-images": { "message": "Consider using a [plugin](https://octobercms.com/plugins?search=image) or service that will automatically convert the uploaded images to the optimal formats. [WebP lossless images](https://developers.google.com/speed/webp) are 26% smaller in size compared to PNGs and 25-34% smaller than comparable JPEG images at the equivalent SSIM quality index. Another next-gen image format to consider is [AVIF](https://jakearchibald.com/2020/avif-has-landed/)." }, "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": { diff --git a/lighthouse-core/lib/i18n/locales/en-XL.json b/lighthouse-core/lib/i18n/locales/en-XL.json index 9a355341c4f1..771191bab71a 100644 --- a/lighthouse-core/lib/i18n/locales/en-XL.json +++ b/lighthouse-core/lib/i18n/locales/en-XL.json @@ -2064,7 +2064,7 @@ "message": "Ĉón̂śîd́êŕ ûṕl̂óâd́îńĝ ýôúr̂ ǴÎF́ t̂ó â śêŕv̂íĉé ŵh́îćĥ ẃîĺl̂ ḿâḱê ít̂ áv̂áîĺâb́l̂é t̂ó êḿb̂éd̂ áŝ án̂ H́T̂ḾL̂5 v́îd́êó." }, "node_modules/lighthouse-stack-packs/packs/joomla.js | offscreen-images": { - "message": "Îńŝt́âĺl̂ á [l̂áẑý-l̂óâd́ Ĵóôḿl̂á p̂ĺûǵîń](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=lazy%20loading) t̂h́ât́ p̂ŕôv́îd́êś t̂h́ê áb̂íl̂ít̂ý t̂ó d̂éf̂ér̂ án̂ý ôf́f̂śĉŕêén̂ ím̂áĝéŝ, ór̂ śŵít̂ćĥ t́ô á t̂ém̂ṕl̂át̂é t̂h́ât́ p̂ŕôv́îd́êś t̂h́ât́ f̂ún̂ćt̂íôńâĺît́ŷ. Śt̂ár̂t́îńĝ ẃît́ĥ J́ôóm̂ĺâ 4.0, á d̂éd̂íĉát̂éd̂ ĺâźŷ-ĺôád̂ín̂ǵ p̂ĺûǵîń ĉán̂ b́ê én̂áb̂ĺêd́ b̂ý ûśîńĝ t́ĥé \"Ĉón̂t́êńt̂ - Ĺâźŷ Ĺôád̂ín̂ǵ Îḿâǵêś\" p̂ĺûǵîń. Âĺŝó ĉón̂śîd́êŕ ûśîńĝ [án̂ ÁM̂Ṕ p̂ĺûǵîń](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=amp)." + "message": "Îńŝt́âĺl̂ á [l̂áẑý-l̂óâd́ Ĵóôḿl̂á p̂ĺûǵîń](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=lazy%20loading) t̂h́ât́ p̂ŕôv́îd́êś t̂h́ê áb̂íl̂ít̂ý t̂ó d̂éf̂ér̂ án̂ý ôf́f̂śĉŕêén̂ ím̂áĝéŝ, ór̂ śŵít̂ćĥ t́ô á t̂ém̂ṕl̂át̂é t̂h́ât́ p̂ŕôv́îd́êś t̂h́ât́ f̂ún̂ćt̂íôńâĺît́ŷ. Śt̂ár̂t́îńĝ ẃît́ĥ J́ôóm̂ĺâ 4.0, ál̂ĺ n̂éŵ ím̂áĝéŝ ẃîĺl̂ [áût́ôḿât́îćâĺl̂ý](https://github.com/joomla/joomla-cms/pull/30748) ĝét̂ t́ĥé `loading` ât́t̂ŕîb́ût́ê f́r̂óm̂ t́ĥé ĉór̂é." }, "node_modules/lighthouse-stack-packs/packs/joomla.js | render-blocking-resources": { "message": "T̂h́êŕê ár̂é â ńûḿb̂ér̂ óf̂ J́ôóm̂ĺâ ṕl̂úĝín̂ś t̂h́ât́ ĉán̂ h́êĺp̂ ýôú [îńl̂ín̂é ĉŕît́îćâĺ âśŝét̂ś](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=performance) ôŕ [d̂éf̂ér̂ ĺêśŝ ím̂ṕôŕt̂án̂t́ r̂éŝóûŕĉéŝ](https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=performance). B́êẃâŕê t́ĥát̂ óp̂t́îḿîźât́îón̂ś p̂ŕôv́îd́êd́ b̂ý t̂h́êśê ṕl̂úĝín̂ś m̂áŷ b́r̂éâḱ f̂éât́ûŕêś ôf́ ŷóûŕ t̂ém̂ṕl̂át̂éŝ ór̂ ṕl̂úĝín̂ś, ŝó ŷóû ẃîĺl̂ ńêéd̂ t́ô t́êśt̂ t́ĥéŝé t̂h́ôŕôúĝh́l̂ý." @@ -2138,46 +2138,46 @@ "node_modules/lighthouse-stack-packs/packs/magento.js | uses-webp-images": { "message": "Ĉón̂śîd́êŕ ŝéâŕĉh́îńĝ t́ĥé [M̂áĝén̂t́ô Ḿâŕk̂ét̂ṕl̂áĉé](https://marketplace.magento.com/catalogsearch/result/?q=webp) f̂ór̂ á v̂ár̂íêt́ŷ óf̂ t́ĥír̂d́-p̂ár̂t́ŷ éx̂t́êńŝíôńŝ t́ô ĺêv́êŕâǵê ńêẃêŕ îḿâǵê f́ôŕm̂át̂ś." }, - "node_modules/lighthouse-stack-packs/packs/october.js | efficient-animated-content": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | efficient-animated-content": { "message": "[R̂ép̂ĺâćê án̂ím̂át̂éd̂ ǴÎF́ŝ ẃît́ĥ v́îd́êó](https://web.dev/replace-gifs-with-videos/) f̂ór̂ f́âśt̂ér̂ ẃêb́ p̂áĝé l̂óâd́ŝ án̂d́ ĉón̂śîd́êŕ ûśîńĝ ḿôd́êŕn̂ f́îĺê f́ôŕm̂át̂ś ŝúĉh́ âś [Ŵéb̂Ḿ](https://web.dev/replace-gifs-with-videos/#create-webm-videos) ôŕ [ÂV́1](https://developers.google.com/web/updates/2018/09/chrome-70-media-updates#av1-decoder) t̂ó îḿp̂ŕôv́ê ćôḿp̂ŕêśŝíôń êf́f̂íĉíêńĉý b̂ý ĝŕêát̂ér̂ t́ĥán̂ 30% óv̂ér̂ t́ĥé ĉúr̂ŕêńt̂ śt̂át̂é-ôf́-t̂h́ê-ár̂t́ v̂íd̂éô ćôd́êć, V̂Ṕ9." }, - "node_modules/lighthouse-stack-packs/packs/october.js | offscreen-images": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | offscreen-images": { "message": "Ĉón̂śîd́êŕ îńŝt́âĺl̂ín̂ǵ âń [îḿâǵê ĺâźŷ ĺôád̂ín̂ǵ p̂ĺûǵîń](https://octobercms.com/plugins?search=lazy) t̂h́ât́ p̂ŕôv́îd́êś t̂h́ê áb̂íl̂ít̂ý t̂ó d̂éf̂ér̂ án̂ý ôf́f̂śĉŕêén̂ ím̂áĝéŝ, ór̂ śŵít̂ćĥ t́ô á t̂h́êḿê t́ĥát̂ ṕr̂óv̂íd̂éŝ t́ĥát̂ f́ûńĉt́îón̂ál̂ít̂ý. Âĺŝó ĉón̂śîd́êŕ ûśîńĝ [t́ĥé ÂḾP̂ ṕl̂úĝín̂](https://octobercms.com/plugins?search=Accelerated+Mobile+Pages)." }, - "node_modules/lighthouse-stack-packs/packs/october.js | render-blocking-resources": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | render-blocking-resources": { "message": "T̂h́êŕê ár̂é m̂án̂ý p̂ĺûǵîńŝ t́ĥát̂ h́êĺp̂ [ín̂ĺîńê ćr̂ít̂íĉál̂ áŝśêt́ŝ](https://octobercms.com/plugins?search=css). T́ĥéŝé p̂ĺûǵîńŝ ḿâý b̂ŕêák̂ ót̂h́êŕ p̂ĺûǵîńŝ, śô ýôú ŝh́ôúl̂d́ t̂éŝt́ t̂h́ôŕôúĝh́l̂ý." }, - "node_modules/lighthouse-stack-packs/packs/october.js | time-to-first-byte": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | time-to-first-byte": { "message": "T̂h́êḿêś, p̂ĺûǵîńŝ án̂d́ ŝér̂v́êŕ ŝṕêćîf́îćât́îón̂ś âĺl̂ ćôńt̂ŕîb́ût́ê t́ô t́ĥé ŝér̂v́êŕ r̂éŝṕôńŝé t̂ím̂é. Ĉón̂śîd́êŕ f̂ín̂d́îńĝ á m̂ór̂é ôṕt̂ím̂íẑéd̂ t́ĥém̂é, ĉár̂éf̂úl̂ĺŷ śêĺêćt̂ín̂ǵ âń ôṕt̂ím̂íẑát̂íôń p̂ĺûǵîń âńd̂/ór̂ úp̂ǵr̂ád̂é t̂h́ê śêŕv̂ér̂. Óĉt́ôb́êŕ ĈḾŜ ál̂śô ál̂ĺôẃŝ d́êv́êĺôṕêŕŝ t́ô úŝé [`Queues`](https://octobercms.com/docs/services/queues) t̂ó d̂éf̂ér̂ t́ĥé p̂ŕôćêśŝín̂ǵ ôf́ â t́îḿê ćôńŝúm̂ín̂ǵ t̂áŝḱ, ŝúĉh́ âś ŝén̂d́îńĝ án̂ é-m̂áîĺ. T̂h́îś d̂ŕâśt̂íĉál̂ĺŷ śp̂éêd́ŝ úp̂ ẃêb́ r̂éq̂úêśt̂ś." }, - "node_modules/lighthouse-stack-packs/packs/october.js | total-byte-weight": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | total-byte-weight": { "message": "Ĉón̂śîd́êŕ ŝh́ôẃîńĝ éx̂ćêŕp̂t́ŝ ín̂ t́ĥé p̂óŝt́ l̂íŝt́ŝ (é.ĝ. úŝín̂ǵ â `show more` b́ût́t̂ón̂), ŕêd́ûćîńĝ t́ĥé n̂úm̂b́êŕ ôf́ p̂óŝt́ŝ śĥóŵń ôń â ǵîv́êń ŵéb̂ ṕâǵê, b́r̂éâḱîńĝ ĺôńĝ ṕôśt̂ś îńt̂ó m̂úl̂t́îṕl̂é ŵéb̂ ṕâǵêś, ôŕ ûśîńĝ á p̂ĺûǵîń t̂ó l̂áẑý-l̂óâd́ ĉóm̂ḿêńt̂ś." }, - "node_modules/lighthouse-stack-packs/packs/october.js | unminified-css": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | unminified-css": { "message": "T̂h́êŕê ár̂é m̂án̂ý [p̂ĺûǵîńŝ](https://octobercms.com/plugins?search=css) t́ĥát̂ ćâń ŝṕêéd̂ úp̂ á ŵéb̂śît́ê b́ŷ ćôńĉát̂én̂át̂ín̂ǵ, m̂ín̂íf̂ýîńĝ án̂d́ ĉóm̂ṕr̂éŝśîńĝ t́ĥé ŝt́ŷĺêś. Ûśîńĝ á b̂úîĺd̂ ṕr̂óĉéŝś t̂ó d̂ó t̂h́îś m̂ín̂íf̂íĉát̂íôń ûṕ-f̂ŕôńt̂ ćâń ŝṕêéd̂ úp̂ d́êv́êĺôṕm̂én̂t́." }, - "node_modules/lighthouse-stack-packs/packs/october.js | unminified-javascript": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | unminified-javascript": { "message": "T̂h́êŕê ár̂é m̂án̂ý [p̂ĺûǵîńŝ](https://octobercms.com/plugins?search=javascript) t́ĥát̂ ćâń ŝṕêéd̂ úp̂ á ŵéb̂śît́ê b́ŷ ćôńĉát̂én̂át̂ín̂ǵ, m̂ín̂íf̂ýîńĝ án̂d́ ĉóm̂ṕr̂éŝśîńĝ t́ĥé ŝćr̂íp̂t́ŝ. Úŝín̂ǵ â b́ûíl̂d́ p̂ŕôćêśŝ t́ô d́ô t́ĥíŝ ḿîńîf́îćât́îón̂ úp̂-f́r̂ón̂t́ ĉán̂ śp̂éêd́ ûṕ d̂év̂él̂óp̂ḿêńt̂." }, - "node_modules/lighthouse-stack-packs/packs/october.js | unused-css-rules": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | unused-css-rules": { "message": "Ĉón̂śîd́êŕ r̂év̂íêẃîńĝ t́ĥé [p̂ĺûǵîńŝ](https://octobercms.com/plugins) ĺôád̂ín̂ǵ ûńûśêd́ ĈŚŜ ón̂ t́ĥé ŵéb̂śît́ê. T́ô íd̂én̂t́îf́ŷ ṕl̂úĝín̂ś t̂h́ât́ âd́d̂ ún̂ńêćêśŝár̂ý ĈŚŜ, ŕûń [ĉód̂é ĉóv̂ér̂áĝé](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) îń Ĉh́r̂óm̂é D̂év̂T́ôól̂ś. Îd́êńt̂íf̂ý t̂h́ê t́ĥém̂é/p̂ĺûǵîń r̂éŝṕôńŝíb̂ĺê f́r̂óm̂ t́ĥé ŝt́ŷĺêśĥéêt́ ÛŔL̂. Ĺôók̂ f́ôŕ p̂ĺûǵîńŝ ẃît́ĥ ḿâńŷ śt̂ýl̂éŝh́êét̂ś ŵít̂h́ l̂ót̂ś ôf́ r̂éd̂ ín̂ ćôd́ê ćôv́êŕâǵê. Á p̂ĺûǵîń ŝh́ôúl̂d́ ôńl̂ý âd́d̂ á ŝt́ŷĺêśĥéêt́ îf́ ît́ îś âćt̂úâĺl̂ý ûśêd́ ôń t̂h́ê ẃêb́ p̂áĝé." }, - "node_modules/lighthouse-stack-packs/packs/october.js | unused-javascript": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | unused-javascript": { "message": "Ĉón̂śîd́êŕ r̂év̂íêẃîńĝ t́ĥé [p̂ĺûǵîńŝ](https://octobercms.com/plugins?search=javascript) t́ĥát̂ ĺôád̂ ún̂úŝéd̂ J́âv́âŚĉŕîṕt̂ ín̂ t́ĥé ŵéb̂ ṕâǵê. T́ô íd̂én̂t́îf́ŷ ṕl̂úĝín̂ś t̂h́ât́ âd́d̂ ún̂ńêćêśŝár̂ý Ĵáv̂áŜćr̂íp̂t́, r̂ún̂ [ćôd́ê ćôv́êŕâǵê](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) ín̂ Ćĥŕôḿê D́êv́T̂óôĺŝ. Íd̂én̂t́îf́ŷ t́ĥé t̂h́êḿê/ṕl̂úĝín̂ ŕêśp̂ón̂śîb́l̂é f̂ŕôḿ t̂h́ê ÚR̂Ĺ ôf́ t̂h́ê śĉŕîṕt̂. Ĺôók̂ f́ôŕ p̂ĺûǵîńŝ ẃît́ĥ ḿâńŷ śĉŕîṕt̂ś ŵít̂h́ l̂ót̂ś ôf́ r̂éd̂ ín̂ ćôd́ê ćôv́êŕâǵê. Á p̂ĺûǵîń ŝh́ôúl̂d́ ôńl̂ý âd́d̂ á ŝćr̂íp̂t́ îf́ ît́ îś âćt̂úâĺl̂ý ûśêd́ ôń t̂h́ê ẃêb́ p̂áĝé." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-long-cache-ttl": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-long-cache-ttl": { "message": "R̂éâd́ âb́ôút̂ [ṕr̂év̂én̂t́îńĝ ún̂ńêćêśŝár̂ý n̂ét̂ẃôŕk̂ ŕêq́ûéŝt́ŝ ẃît́ĥ t́ĥé ĤT́T̂Ṕ Ĉáĉh́ê](https://web.dev/http-cache/#caching-checklist). T́ĥér̂é âŕê ḿâńŷ [ṕl̂úĝín̂ś](https://octobercms.com/plugins?search=Caching) t̂h́ât́ ĉán̂ b́ê úŝéd̂ t́ô śp̂éêd́ ûṕ ĉáĉh́îńĝ." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-optimized-images": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-optimized-images": { "message": "Ĉón̂śîd́êŕ ûśîńĝ án̂ [ím̂áĝé ôṕt̂ím̂íẑát̂íôń p̂ĺûǵîń](https://octobercms.com/plugins?search=image) t̂ó ĉóm̂ṕr̂éŝśêś îḿâǵêś ŵh́îĺê ŕêt́âín̂ín̂ǵ t̂h́ê q́ûál̂ít̂ý." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-responsive-images": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-responsive-images": { "message": "Ûṕl̂óâd́ îḿâǵêś d̂ír̂éĉt́l̂ý îń t̂h́ê ḿêd́îá m̂án̂áĝér̂ t́ô én̂śûŕê t́ĥé r̂éq̂úîŕêd́ îḿâǵê śîźêś âŕê áv̂áîĺâb́l̂é. Ĉón̂śîd́êŕ ûśîńĝ t́ĥé [r̂éŝíẑé f̂íl̂t́êŕ](https://octobercms.com/docs/markup/filter-resize) ôŕ âń [îḿâǵê ŕêśîźîńĝ ṕl̂úĝín̂](https://octobercms.com/plugins?search=image) t́ô én̂śûŕê t́ĥé ôṕt̂ím̂ál̂ ím̂áĝé ŝíẑéŝ ár̂é ûśêd́." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-text-compression": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-text-compression": { "message": "Êńâb́l̂é t̂éx̂t́ ĉóm̂ṕr̂éŝśîón̂ ín̂ t́ĥé ŵéb̂ śêŕv̂ér̂ ćôńf̂íĝúr̂át̂íôń." }, - "node_modules/lighthouse-stack-packs/packs/october.js | uses-webp-images": { + "node_modules/lighthouse-stack-packs/packs/octobercms.js | uses-webp-images": { "message": "Ĉón̂śîd́êŕ ûśîńĝ á [p̂ĺûǵîń](https://octobercms.com/plugins?search=image) ôŕ ŝér̂v́îćê t́ĥát̂ ẃîĺl̂ áût́ôḿât́îćâĺl̂ý ĉón̂v́êŕt̂ t́ĥé ûṕl̂óâd́êd́ îḿâǵêś t̂ó t̂h́ê óp̂t́îḿâĺ f̂ór̂ḿât́ŝ. [Ẃêb́P̂ ĺôśŝĺêśŝ ím̂áĝéŝ](https://developers.google.com/speed/webp) ár̂é 26% ŝḿâĺl̂ér̂ ín̂ śîźê ćôḿp̂ár̂éd̂ t́ô ṔN̂Ǵŝ án̂d́ 25-34% ŝḿâĺl̂ér̂ t́ĥán̂ ćôḿp̂ár̂áb̂ĺê J́P̂ÉĜ ím̂áĝéŝ át̂ t́ĥé êq́ûív̂ál̂én̂t́ ŜŚÎḾ q̂úâĺît́ŷ ín̂d́êx́. Âńôt́ĥér̂ ńêx́t̂-ǵêń îḿâǵê f́ôŕm̂át̂ t́ô ćôńŝíd̂ér̂ íŝ [ÁV̂ÍF̂](https://jakearchibald.com/2020/avif-has-landed/)." }, "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": { diff --git a/lighthouse-core/runner.js b/lighthouse-core/runner.js index 0f37254c8368..c95e7745d382 100644 --- a/lighthouse-core/runner.js +++ b/lighthouse-core/runner.js @@ -258,6 +258,8 @@ class Runner { const normalizedGatherSettings = Object.assign({}, artifacts.settings, overrides); const normalizedAuditSettings = Object.assign({}, settings, overrides); + require('assert').deepStrictEqual(normalizedGatherSettings, normalizedAuditSettings); + if (!isDeepEqual(normalizedGatherSettings, normalizedAuditSettings)) { throw new Error('Cannot change settings between gathering and auditing'); } diff --git a/lighthouse-core/test/results/artifacts/artifacts.json b/lighthouse-core/test/results/artifacts/artifacts.json index f12fd31ddc4b..4e7f39639a85 100644 --- a/lighthouse-core/test/results/artifacts/artifacts.json +++ b/lighthouse-core/test/results/artifacts/artifacts.json @@ -33,7 +33,8 @@ "deviceScaleFactor": 2.625, "height": 640, "mobile": true, - "width": 360 + "width": 360, + "disabled": false }, "channel": "cli", "budgets": [ @@ -3381,4 +3382,4 @@ "columnNumber": 36 } ] -} \ No newline at end of file +} diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 368ed645d647..b34bbaf12cce 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -4385,7 +4385,8 @@ "mobile": true, "width": 360, "height": 640, - "deviceScaleFactor": 2.625 + "deviceScaleFactor": 2.625, + "disabled": false }, "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse", "auditMode": true, From f3d8daf18848806f580b282263920418247ba402 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 14 Dec 2020 06:23:57 +0000 Subject: [PATCH 27/63] tests --- .../gather/gatherers/full-page-screenshot.js | 2 +- lighthouse-core/lib/emulation.js | 9 +++++---- lighthouse-core/runner.js | 2 +- .../gatherers/full-page-screenshot-test.js | 16 ++++++++++++++-- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/lighthouse-core/gather/gatherers/full-page-screenshot.js b/lighthouse-core/gather/gatherers/full-page-screenshot.js index f500162ebef4..9c0751b5e5fd 100644 --- a/lighthouse-core/gather/gatherers/full-page-screenshot.js +++ b/lighthouse-core/gather/gatherers/full-page-screenshot.js @@ -116,7 +116,7 @@ class FullPageScreenshot extends Gatherer { // In case some other program is controlling emulation, try to remember what the device looks // like now and reset after gatherer is done. - const lighthouseControlsEmulation = passContext.settings.screenEmulation.disabled !== false; + const lighthouseControlsEmulation = passContext.settings.screenEmulation.disabled !== true; try { return { diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index ec413d98fdaa..ca4efeb62396 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -44,11 +44,12 @@ async function emulate(driver, settings) { userAgent: settings.emulatedUserAgent, }); } - - if (settings.screenEmulation.disabled !== false) { - await driver.sendCommand('Emulation.setDeviceMetricsOverride', settings.screenEmulation); + if (settings.screenEmulation.disabled !== true) { + const {width, height, deviceScaleFactor, mobile} = settings.screenEmulation; + const params = {width, height, deviceScaleFactor, mobile}; + await driver.sendCommand('Emulation.setDeviceMetricsOverride', params); await driver.sendCommand('Emulation.setTouchEmulationEnabled', { - enabled: settings.screenEmulation.mobile, + enabled: params.mobile, }); } } diff --git a/lighthouse-core/runner.js b/lighthouse-core/runner.js index c95e7745d382..9ee5adf45f9c 100644 --- a/lighthouse-core/runner.js +++ b/lighthouse-core/runner.js @@ -258,7 +258,7 @@ class Runner { const normalizedGatherSettings = Object.assign({}, artifacts.settings, overrides); const normalizedAuditSettings = Object.assign({}, settings, overrides); - require('assert').deepStrictEqual(normalizedGatherSettings, normalizedAuditSettings); + // require('assert').deepStrictEqual(normalizedGatherSettings, normalizedAuditSettings); if (!isDeepEqual(normalizedGatherSettings, normalizedAuditSettings)) { throw new Error('Cannot change settings between gathering and auditing'); diff --git a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js index 91647fd29e8f..266c7ce3d6cc 100644 --- a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js +++ b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js @@ -62,6 +62,9 @@ describe('FullPageScreenshot gatherer', () => { const passContext = { settings: { formFactor: 'mobile', + screenEmulation: { + disabled: false, + }, }, driver, baseArtifacts: {}, @@ -89,6 +92,9 @@ describe('FullPageScreenshot gatherer', () => { const passContext = { settings: { formFactor: 'mobile', + screenEmulation: { + disabled: false, + }, }, driver, baseArtifacts: {}, @@ -96,7 +102,8 @@ describe('FullPageScreenshot gatherer', () => { await fpsGatherer.afterPass(passContext); - expect(driver.beginEmulation).toHaveBeenCalledWith({formFactor: 'mobile'}); + const expectedArgs = {formFactor: 'mobile', screenEmulation: {disabled: false}}; + expect(driver.beginEmulation).toHaveBeenCalledWith(expectedArgs); expect(driver.beginEmulation).toHaveBeenCalledTimes(1); }); @@ -115,7 +122,9 @@ describe('FullPageScreenshot gatherer', () => { }); const passContext = { settings: { - screenEmulation: false, + screenEmulation: { + disabled: true, + }, formFactor: 'mobile', }, driver, @@ -164,6 +173,9 @@ describe('FullPageScreenshot gatherer', () => { const passContext = { settings: { formFactor: 'mobile', + screenEmulation: { + disabled: false, + }, }, driver, baseArtifacts: {}, From 0640d2227ae5af9b8ae652ff28c1d7afcf65949b Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 14 Dec 2020 06:34:12 +0000 Subject: [PATCH 28/63] adjustments but tests not passing --- clients/devtools-entry.js | 2 +- lighthouse-core/config/config.js | 4 ++++ lighthouse-core/lib/emulation.js | 2 +- lighthouse-core/test/lib/emulation-test.js | 15 ++++++++++++--- 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/clients/devtools-entry.js b/clients/devtools-entry.js index d03b8ead8ff4..ace8303714aa 100644 --- a/clients/devtools-entry.js +++ b/clients/devtools-entry.js @@ -29,7 +29,7 @@ function createConfig(categoryIDs, device) { const settings = { onlyCategories: categoryIDs, // DevTools handles all the emulation - screenEmulation: false, + screenEmulation: {disabled: true}, }; if (device === 'desktop') { settings.throttling = desktopDense4G; diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index 8e9f1c55d4f9..7f08051cd7b7 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -515,6 +515,10 @@ class Config { // Locale is special and comes only from flags/settings/lookupLocale. settingsWithFlags.locale = locale; + if (settingsWithFlags.emulatedUserAgent === true) { + settingsWithFlags.emulatedUserAgent = constants.userAgents[settingsWithFlags.formFactor]; + } + return settingsWithFlags; } diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index ca4efeb62396..4373779743ed 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -41,7 +41,7 @@ async function emulate(driver, settings) { // Network.enable must be called for UA overriding to work await driver.sendCommand('Network.enable'); await driver.sendCommand('Network.setUserAgentOverride', { - userAgent: settings.emulatedUserAgent, + userAgent: /** @type {string} */ (settings.emulatedUserAgent), }); } if (settings.screenEmulation.disabled !== true) { diff --git a/lighthouse-core/test/lib/emulation-test.js b/lighthouse-core/test/lib/emulation-test.js index 3c274f35a71c..2381381c6959 100644 --- a/lighthouse-core/test/lib/emulation-test.js +++ b/lighthouse-core/test/lib/emulation-test.js @@ -64,7 +64,10 @@ describe('emulation', () => { const emulateArgs = connectionStub.sendCommand.findInvocation( 'Emulation.setDeviceMetricsOverride' ); - expect(emulateArgs).toMatchObject(metrics.desktop); + expect(emulateArgs).toMatchObject({ + ...metrics.desktop, + ...{disabled: undefined}, + }); expect(emulateArgs).toMatchObject({mobile: false}); }); @@ -101,7 +104,10 @@ describe('emulation', () => { const emulateArgs = connectionStub.sendCommand.findInvocation( 'Emulation.setDeviceMetricsOverride' ); - expect(emulateArgs).toMatchObject(metrics.mobile); + expect(emulateArgs).toMatchObject({ + ...metrics.mobile, + ...{disabled: undefined}, + }); expect(emulateArgs).toMatchObject({mobile: true}); }); @@ -116,7 +122,10 @@ describe('emulation', () => { const emulateArgs = connectionStub.sendCommand.findInvocation( 'Emulation.setDeviceMetricsOverride' ); - expect(emulateArgs).toMatchObject(metrics.desktop); + expect(emulateArgs).toMatchObject({ + ...metrics.desktop, + ...{disabled: undefined}, + }); expect(emulateArgs).toMatchObject({mobile: false}); }); }); From c7e0f79a8332d31ca6b775994191340fec17e228 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 14 Dec 2020 20:48:07 +0000 Subject: [PATCH 29/63] partial to resolve dt-entry use --- lighthouse-core/config/constants.js | 2 -- lighthouse-core/fraggle-rock/api.js | 1 - types/config.d.ts | 1 + types/externs.d.ts | 6 ++++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lighthouse-core/config/constants.js b/lighthouse-core/config/constants.js index bf696e2d7639..cb93c4827a9d 100644 --- a/lighthouse-core/config/constants.js +++ b/lighthouse-core/config/constants.js @@ -61,7 +61,6 @@ const MOTOG4_EMULATION_METRICS = { // our perf recommendations. // https://github.com/GoogleChrome/lighthouse/issues/10741#issuecomment-626903508 deviceScaleFactor: 2.625, - disabled: false, }; /** @@ -73,7 +72,6 @@ const DESKTOP_EMULATION_METRICS = { width: 1350, height: 940, deviceScaleFactor: 1, - disabled: false, }; const screenEmulationMetrics = { diff --git a/lighthouse-core/fraggle-rock/api.js b/lighthouse-core/fraggle-rock/api.js index 184571a8c1f2..5d1947dc5365 100644 --- a/lighthouse-core/fraggle-rock/api.js +++ b/lighthouse-core/fraggle-rock/api.js @@ -38,7 +38,6 @@ async function snapshot(options) { settings: config.settings, // TODO(FR-COMPAT): convert these to regular artifacts HostFormFactor: 'mobile', - TestedAsMobileDevice: true, HostUserAgent: 'unknown', NetworkUserAgent: 'unknown', BenchmarkIndex: 0, diff --git a/types/config.d.ts b/types/config.d.ts index c36d3d09e939..9586ae33695d 100644 --- a/types/config.d.ts +++ b/types/config.d.ts @@ -84,6 +84,7 @@ declare global { export interface Settings extends Required { throttling: Required; + screenEmulation: deviceMetricsOverrideParams & {disabled: boolean}; } export interface Pass extends Required { diff --git a/types/externs.d.ts b/types/externs.d.ts index 4cc065b26339..7f6a527fa4cd 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -97,6 +97,8 @@ declare global { export type OutputMode = 'json' | 'html' | 'csv'; + export type deviceMetricsOverrideParams = Pick; + /** * Options that are found in both the flags used by the Lighthouse module * interface and the Config's `settings` object. @@ -124,8 +126,8 @@ declare global { // TODO: formFactor should really be required, but since this type is shared in Flags, we can't reasonably do that. We'll likely need to separate SharedFlagsSettings into CLI Flags and Config Settings. /** How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor?: 'mobile'|'desktop'; - /** Screen emulation properties (width, height, dpr, mobile viewport) to apply. Typically set to false if mobile emulation is applied outside of Lighthouse, or its being run on a mobile device. For desktop, we recommend applying consistent desktop screen emulation. */ - screenEmulation?: Pick & {disabled: boolean}; + /** Screen emulation properties (width, height, dpr, mobile viewport) to apply or an object of `{disabled: true}` if Lighthouse should avoid applying screen emulation. It's typically set to disabled if either emulation is applied outside of Lighthouse, or it's being run on a mobile device. For desktop, we recommend applying consistent desktop screen emulation. */ + screenEmulation?: Partial; /** User Agent to apply */ emulatedUserAgent?: string | boolean; From d612f158ec04452a901de8cf68350efff8ce6f74 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 14 Dec 2020 20:55:46 +0000 Subject: [PATCH 30/63] feedback on test methods --- .../audits/metrics/total-blocking-time-test.js | 16 ++++++++++------ lighthouse-core/test/lib/emulation-test.js | 8 +++++--- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/lighthouse-core/test/audits/metrics/total-blocking-time-test.js b/lighthouse-core/test/audits/metrics/total-blocking-time-test.js index aa197248a65f..880d4f0afc64 100644 --- a/lighthouse-core/test/audits/metrics/total-blocking-time-test.js +++ b/lighthouse-core/test/audits/metrics/total-blocking-time-test.js @@ -22,9 +22,13 @@ function generateArtifacts({trace, devtoolsLog}) { }; } -/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ -/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ -const getFakeContext = (formFactor, throttlingMethod) => ({ +/** + * @param {{ + * {LH.SharedFlagsSettings['formFactor']} formFactor + * {LH.SharedFlagsSettings['formFactor']} formFactor + * }} param0 + */ +const getFakeContext = ({formFactor, throttlingMethod}) => ({ options: defaultOptions, computedCache: new Map(), settings: { @@ -39,7 +43,7 @@ const getFakeContext = (formFactor, throttlingMethod) => ({ describe('Performance: total-blocking-time audit', () => { it('evaluates Total Blocking Time metric properly', async () => { const artifacts = generateArtifacts({trace, devtoolsLog}); - const context = getFakeContext('mobile', 'provided'); + const context = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); const output = await TBTAudit.audit(artifacts, context); expect(output.numericValue).toBeCloseTo(48.3, 1); @@ -50,7 +54,7 @@ describe('Performance: total-blocking-time audit', () => { it('adjusts scoring based on form factor', async () => { const artifactsMobile = generateArtifacts({trace: lcpTrace, devtoolsLog: lcpDevtoolsLog}); - const contextMobile = getFakeContext('mobile', 'provided'); + const contextMobile = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); const outputMobile = await TBTAudit.audit(artifactsMobile, contextMobile); expect(outputMobile.numericValue).toBeCloseTo(333, 1); @@ -59,7 +63,7 @@ describe('Performance: total-blocking-time audit', () => { const artifactsDesktop = generateArtifacts({trace: lcpTrace, devtoolsLog: lcpDevtoolsLog}); - const contextDesktop = getFakeContext('desktop', 'provided'); + const contextDesktop = getFakeContext({formFactor: 'desktop', throttlingMethod: 'provided'}); const outputDesktop = await TBTAudit.audit(artifactsDesktop, contextDesktop); expect(outputDesktop.numericValue).toBeCloseTo(333, 1); diff --git a/lighthouse-core/test/lib/emulation-test.js b/lighthouse-core/test/lib/emulation-test.js index 2381381c6959..2b4f7ddfd618 100644 --- a/lighthouse-core/test/lib/emulation-test.js +++ b/lighthouse-core/test/lib/emulation-test.js @@ -32,9 +32,11 @@ describe('emulation', () => { .mockResponse('Emulation.setTouchEmulationEnabled'); }); - /** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ - /** @param {LH.SharedFlagsSettings['screenEmulation']} screenEmulation */ - /** @param {LH.SharedFlagsSettings['emulatedUserAgent']} emulatedUserAgent */ + /** + * @param {LH.SharedFlagsSettings['formFactor']} formFactor + * @param {LH.SharedFlagsSettings['screenEmulation']} screenEmulation + * @param {LH.SharedFlagsSettings['emulatedUserAgent']} emulatedUserAgent + */ const getSettings = (formFactor, screenEmulation, emulatedUserAgent) => ({ formFactor: formFactor, screenEmulation, From 3200813afd40f65ae9c2c297255401afa6166e4c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 14 Dec 2020 21:11:49 +0000 Subject: [PATCH 31/63] types. --- lighthouse-core/config/constants.js | 6 ++++-- lighthouse-core/test/lib/emulation-test.js | 18 ++++++++++++------ 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/lighthouse-core/config/constants.js b/lighthouse-core/config/constants.js index cb93c4827a9d..1d40fa893b19 100644 --- a/lighthouse-core/config/constants.js +++ b/lighthouse-core/config/constants.js @@ -51,7 +51,7 @@ const throttling = { }; /** - * @type {LH.SharedFlagsSettings['screenEmulation']} + * @type {Required} */ const MOTOG4_EMULATION_METRICS = { mobile: true, @@ -61,17 +61,19 @@ const MOTOG4_EMULATION_METRICS = { // our perf recommendations. // https://github.com/GoogleChrome/lighthouse/issues/10741#issuecomment-626903508 deviceScaleFactor: 2.625, + disabled: false, }; /** * Desktop metrics adapted from emulated_devices/module.json - * @type {LH.SharedFlagsSettings['screenEmulation']} + * @type {Required} */ const DESKTOP_EMULATION_METRICS = { mobile: false, width: 1350, height: 940, deviceScaleFactor: 1, + disabled: false, }; const screenEmulationMetrics = { diff --git a/lighthouse-core/test/lib/emulation-test.js b/lighthouse-core/test/lib/emulation-test.js index 2b4f7ddfd618..0aef39d85fc9 100644 --- a/lighthouse-core/test/lib/emulation-test.js +++ b/lighthouse-core/test/lib/emulation-test.js @@ -67,8 +67,10 @@ describe('emulation', () => { 'Emulation.setDeviceMetricsOverride' ); expect(emulateArgs).toMatchObject({ - ...metrics.desktop, - ...{disabled: undefined}, + mobile: metrics.desktop.mobile, + width: metrics.desktop.width, + height: metrics.desktop.height, + deviceScaleFactor: metrics.desktop.deviceScaleFactor, }); expect(emulateArgs).toMatchObject({mobile: false}); }); @@ -107,8 +109,10 @@ describe('emulation', () => { 'Emulation.setDeviceMetricsOverride' ); expect(emulateArgs).toMatchObject({ - ...metrics.mobile, - ...{disabled: undefined}, + mobile: metrics.mobile.mobile, + width: metrics.mobile.width, + height: metrics.mobile.height, + deviceScaleFactor: metrics.mobile.deviceScaleFactor, }); expect(emulateArgs).toMatchObject({mobile: true}); }); @@ -125,8 +129,10 @@ describe('emulation', () => { 'Emulation.setDeviceMetricsOverride' ); expect(emulateArgs).toMatchObject({ - ...metrics.desktop, - ...{disabled: undefined}, + mobile: metrics.desktop.mobile, + width: metrics.desktop.width, + height: metrics.desktop.height, + deviceScaleFactor: metrics.desktop.deviceScaleFactor, }); expect(emulateArgs).toMatchObject({mobile: false}); }); From 79af0a75fa64093c564e3ac602963fdf4d9e520b Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 14 Dec 2020 21:13:34 +0000 Subject: [PATCH 32/63] cli test snapshot --- lighthouse-cli/test/cli/__snapshots__/index-test.js.snap | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap index 573174c14557..7361052925c7 100644 --- a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap +++ b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap @@ -1506,8 +1506,9 @@ Object { "precomputedLanternData": null, "screenEmulation": Object { "deviceScaleFactor": 2.625, + "disabled": false, "height": 640, - "mobile": false, + "mobile": true, "width": 360, }, "skipAudits": null, @@ -1663,8 +1664,9 @@ Object { "precomputedLanternData": null, "screenEmulation": Object { "deviceScaleFactor": 2.625, + "disabled": false, "height": 640, - "mobile": false, + "mobile": true, "width": 360, }, "skipAudits": null, From 40698f51e3f7b2c3243beedf97c8a40fcc1dc594 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 14 Dec 2020 21:48:56 +0000 Subject: [PATCH 33/63] feedback from review --- lighthouse-core/config/config.js | 2 +- lighthouse-core/config/lr-mobile-config.js | 2 +- lighthouse-core/report/html/renderer/util.js | 1 + lighthouse-core/runner.js | 2 -- .../test/audits/metrics/first-contentful-paint-test.js | 6 ++++-- lighthouse-core/test/audits/metrics/interactive-test.js | 6 ++++-- .../test/audits/metrics/largest-contentful-paint-test.js | 6 ++++-- lighthouse-core/test/audits/metrics/speed-index-test.js | 6 ++++-- 8 files changed, 19 insertions(+), 12 deletions(-) diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index 7f08051cd7b7..18e70108f3e5 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -184,7 +184,7 @@ function assertValidSettings(settings) { if (!settings.screenEmulation.disabled) { if (settings.screenEmulation.mobile !== (settings.formFactor === 'mobile')) { - log.error('config', `Screen emulation mobile setting (${settings.screenEmulation.mobile}) does not match formFactor setting (${settings.formFactor})`); // eslint-disable-line max-len + throw new Error(`Screen emulation mobile setting (${settings.screenEmulation.mobile}) does not match formFactor setting (${settings.formFactor})`); // eslint-disable-line max-len } } } diff --git a/lighthouse-core/config/lr-mobile-config.js b/lighthouse-core/config/lr-mobile-config.js index 7310659fcc49..66719f7fa982 100644 --- a/lighthouse-core/config/lr-mobile-config.js +++ b/lighthouse-core/config/lr-mobile-config.js @@ -11,7 +11,7 @@ const config = { settings: { maxWaitForFcp: 15 * 1000, maxWaitForLoad: 35 * 1000, - formFactor: 'mobile', + // lighthouse:default is mobile by default }, // Skip the h2 audit so it doesn't lie to us. See https://github.com/GoogleChrome/lighthouse/issues/6539 skipAudits: ['uses-http2'], diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index 4a03ae0595a5..3be1e2b78323 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -424,6 +424,7 @@ class Util { networkThrottling = Util.i18n.strings.runtimeUnknown; } + // TODO(paulirish): revise Runtime Settings strings: https://github.com/GoogleChrome/lighthouse/pull/11796 const deviceEmulation = settings.formFactor === 'mobile' ? Util.i18n.strings.runtimeMobileEmulation : Util.i18n.strings.runtimeDesktopEmulation; diff --git a/lighthouse-core/runner.js b/lighthouse-core/runner.js index 9ee5adf45f9c..0f37254c8368 100644 --- a/lighthouse-core/runner.js +++ b/lighthouse-core/runner.js @@ -258,8 +258,6 @@ class Runner { const normalizedGatherSettings = Object.assign({}, artifacts.settings, overrides); const normalizedAuditSettings = Object.assign({}, settings, overrides); - // require('assert').deepStrictEqual(normalizedGatherSettings, normalizedAuditSettings); - if (!isDeepEqual(normalizedGatherSettings, normalizedAuditSettings)) { throw new Error('Cannot change settings between gathering and auditing'); } diff --git a/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js b/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js index 1b5f40672d70..9e1173f2fd22 100644 --- a/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js +++ b/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js @@ -12,8 +12,10 @@ const constants = require('../../../config/constants.js'); const pwaTrace = require('../../fixtures/traces/progressive-app-m60.json'); const pwaDevtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); -/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ -/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ +/** + * @param {LH.SharedFlagsSettings['formFactor']} formFactor + * @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + */ const getFakeContext = (formFactor, throttlingMethod) => ({ options, computedCache: new Map(), diff --git a/lighthouse-core/test/audits/metrics/interactive-test.js b/lighthouse-core/test/audits/metrics/interactive-test.js index ac5ebe9fd029..df1193c0eb88 100644 --- a/lighthouse-core/test/audits/metrics/interactive-test.js +++ b/lighthouse-core/test/audits/metrics/interactive-test.js @@ -17,8 +17,10 @@ const acceptableDevToolsLog = const redirectTrace = require('../../fixtures/traces/site-with-redirect.json'); const redirectDevToolsLog = require('../../fixtures/traces/site-with-redirect.devtools.log.json'); -/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ -/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ +/** + * @param {LH.SharedFlagsSettings['formFactor']} formFactor + * @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + */ const getFakeContext = (formFactor, throttlingMethod) => ({ options: options, computedCache: new Map(), diff --git a/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js b/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js index da125f74255b..39ec1f0836a6 100644 --- a/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js +++ b/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js @@ -23,8 +23,10 @@ function generateArtifacts({trace, devtoolsLog, HostUserAgent}) { }; } -/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ -/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ +/** + * @param {LH.SharedFlagsSettings['formFactor']} formFactor + * @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + */ const getFakeContext = (formFactor, throttlingMethod) => ({ options: defaultOptions, computedCache: new Map(), diff --git a/lighthouse-core/test/audits/metrics/speed-index-test.js b/lighthouse-core/test/audits/metrics/speed-index-test.js index b31f294eedd1..5ca922e0a436 100644 --- a/lighthouse-core/test/audits/metrics/speed-index-test.js +++ b/lighthouse-core/test/audits/metrics/speed-index-test.js @@ -15,8 +15,10 @@ const constants = require('../../../config/constants.js'); const pwaTrace = require('../../fixtures/traces/progressive-app-m60.json'); const pwaDevtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); -/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ -/** @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod */ +/** + * @param {LH.SharedFlagsSettings['formFactor']} formFactor + * @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + */ const getFakeContext = (formFactor, throttlingMethod) => ({ options, computedCache: new Map(), From a2ad362e5b265989a408911501c1527b047a2e15 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Mon, 14 Dec 2020 22:00:48 +0000 Subject: [PATCH 34/63] fix tests --- lighthouse-core/test/config/config-test.js | 6 +++++- lighthouse-core/test/runner-test.js | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/lighthouse-core/test/config/config-test.js b/lighthouse-core/test/config/config-test.js index f66e2475783b..dcc4cc1ddfd8 100644 --- a/lighthouse-core/test/config/config-test.js +++ b/lighthouse-core/test/config/config-test.js @@ -9,6 +9,7 @@ const Config = require('../../config/config.js'); const assert = require('assert').strict; const path = require('path'); const defaultConfig = require('../../config/default-config.js'); +const constants = require('../../config/constants.js'); const log = require('lighthouse-logger'); const Gatherer = require('../../gather/gatherers/gatherer.js'); const Audit = require('../../audits/audit.js'); @@ -789,7 +790,10 @@ describe('Config', () => { extends: 'lighthouse:default', settings: { disableStorageReset: true, - formFactor: 'mobile', + formFactor: 'desktop', + throttling: constants.throttling.desktopDense4G, + screenEmulation: constants.screenEmulationMetrics.desktop, + emulatedUserAgent: constants.userAgents.desktop, }, }, {formFactor: 'desktop'} diff --git a/lighthouse-core/test/runner-test.js b/lighthouse-core/test/runner-test.js index d5b085bcee47..76ee3c2331c0 100644 --- a/lighthouse-core/test/runner-test.js +++ b/lighthouse-core/test/runner-test.js @@ -112,7 +112,7 @@ describe('Runner', () => { }); it('-A throws if the settings change', async () => { - const settings = {auditMode: artifactsPath, formFactor: 'desktop'}; + const settings = {auditMode: artifactsPath, throttlingMethod: 'provided'}; const opts = {config: generateConfig(settings), driverMock}; try { await Runner.run(defaultGatherFn, opts); @@ -123,7 +123,7 @@ describe('Runner', () => { }); it('-A throws if the URL changes', async () => { - const settings = {auditMode: artifactsPath, formFactor: 'desktop'}; + const settings = {auditMode: artifactsPath, formFactor: 'mobile'}; const opts = {url: 'https://differenturl.com', config: generateConfig(settings), driverMock}; try { await Runner.run(defaultGatherFn, opts); From 9242bf7e0dcd98505e0e1cde7e8fad976f1f9e1b Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 08:56:00 -0800 Subject: [PATCH 35/63] resolve cli conflicts, still need to readd cli flag changes --- lighthouse-cli/bin.js | 22 --------- lighthouse-cli/cli-flags.js | 93 ------------------------------------- 2 files changed, 115 deletions(-) diff --git a/lighthouse-cli/bin.js b/lighthouse-cli/bin.js index 76b86a83f66d..fb0784bb3acd 100644 --- a/lighthouse-cli/bin.js +++ b/lighthouse-cli/bin.js @@ -96,28 +96,6 @@ async function begin() { cliFlags.outputPath = 'stdout'; } -<<<<<<< HEAD - if (typeof cliFlags.extraHeaders === 'string') { - // TODO: LH.Flags.extraHeaders is sometimes actually a string at this point, but needs to be - // copied over to LH.Settings.extraHeaders, which is LH.Crdp.Network.Headers. Force - // the conversion here, but long term either the CLI flag or the setting should have - // a different name. - /** @type {string} */ - let extraHeadersStr = cliFlags.extraHeaders; - // If not a JSON object, assume it's a path to a JSON file. - if (extraHeadersStr.substr(0, 1) !== '{') { - extraHeadersStr = fs.readFileSync(extraHeadersStr, 'utf-8'); - } - - cliFlags.extraHeaders = JSON.parse(extraHeadersStr); -======= - // @ts-expect-error - deprecation message for removed disableDeviceEmulation; can remove warning in v6. - if (cliFlags.disableDeviceEmulation) { - log.warn('config', 'The "--disable-device-emulation" has been removed in v5.' + - ' Please use "--emulated-form-factor=none" instead.'); ->>>>>>> master - } - if (cliFlags.precomputedLanternDataPath) { const lanternDataStr = fs.readFileSync(cliFlags.precomputedLanternDataPath, 'utf8'); /** @type {LH.PrecomputedLanternData} */ diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index e0dc01c44381..5d4693a17965 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -190,31 +190,6 @@ function getFlags(manualArgv) { 'only-audits', 'only-categories', 'skip-audits', 'budget-path', ], 'Configuration:') -<<<<<<< HEAD - .group( - [ - 'save-assets', 'list-all-audits', 'list-trace-categories', 'print-config', 'additional-trace-categories', - 'config-path', 'preset', 'chrome-flags', 'port', 'hostname', 'form-factor', - 'max-wait-for-load', 'enable-error-reporting', 'gather-mode', 'audit-mode', - 'only-audits', 'only-categories', 'skip-audits', 'budget-path', - ], - 'Configuration:') - .describe({ - 'cli-flags-path': 'The path to a JSON file that contains the desired CLI flags to apply. Flags specified at the command line will still override the file-based ones.', - // We don't allowlist specific locales. Why? So we can support the user who requests 'es-MX' (unsupported) and we'll fall back to 'es' (supported) - 'locale': 'The locale/language the report should be formatted in', - 'enable-error-reporting': - 'Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://git.io/vFFTO', - 'blocked-url-patterns': 'Block any network requests to the specified URL patterns', - 'disable-storage-reset': - 'Disable clearing the browser cache and other storage APIs before a run', - - 'form-factor': 'Determines how performance metrics are scored and if mobile-only audits are skipped.', - 'screenEmulation': 'Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2', - 'emulatedUserAgent': 'Sets useragent emulation', - - 'throttling-method': 'Controls throttling method', -======= // Output .options({ 'output': { @@ -265,45 +240,12 @@ function getFlags(manualArgv) { coerce: coerceThrottling, }) .describe({ ->>>>>>> master 'throttling.rttMs': 'Controls simulated network RTT (TCP layer)', 'throttling.throughputKbps': 'Controls simulated network download throughput', 'throttling.requestLatencyMs': 'Controls emulated network RTT (HTTP layer)', 'throttling.downloadThroughputKbps': 'Controls emulated network download throughput', 'throttling.uploadThroughputKbps': 'Controls emulated network upload throughput', 'throttling.cpuSlowdownMultiplier': 'Controls simulated + emulated CPU throttling', -<<<<<<< HEAD - - 'gather-mode': - 'Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.', - 'audit-mode': 'Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)', - 'save-assets': 'Save the trace contents & devtools logs to disk', - 'list-all-audits': 'Prints a list of all available audits and exits', - 'list-trace-categories': 'Prints a list of all required trace categories and exits', - 'additional-trace-categories': - 'Additional categories to capture with the trace (comma-delimited).', - 'config-path': `The path to the config JSON. - An example config file: lighthouse-core/config/lr-desktop-config.js`, - 'budget-path': `The path to the budget.json file for LightWallet.`, - 'preset': `Use a built-in configuration. - WARNING: If the --config-path flag is provided, this preset will be ignored.`, - 'chrome-flags': - `Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags - Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used.`, - 'hostname': 'The hostname to use for the debugging protocol.', - 'port': 'The port to use for the debugging protocol. Use 0 for a random port', - 'max-wait-for-load': - 'The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability', - 'extra-headers': 'Set extra HTTP Headers to pass with request', - 'precomputed-lantern-data-path': 'Path to the file where lantern simulation data should be read from, overwriting the lantern observed estimates for RTT and server latency.', - 'lantern-data-output-path': 'Path to the file where lantern simulation data should be written to, can be used in a future run with the `precomputed-lantern-data-path` flag.', - 'only-audits': 'Only run the specified audits', - 'only-categories': 'Only run the specified categories. Available categories: accessibility, best-practices, performance, pwa, seo', - 'skip-audits': 'Run everything except these audits', - 'plugins': 'Run the specified plugins', - 'print-config': 'Print the normalized config for the given config and options, then exit.', -======= ->>>>>>> master }) .options({ @@ -335,47 +277,12 @@ function getFlags(manualArgv) { }, }) -<<<<<<< HEAD - // boolean values - .boolean([ - 'disable-storage-reset', 'save-assets', 'list-all-audits', - 'list-trace-categories', 'view', 'verbose', 'quiet', 'help', 'print-config', - 'chrome-ignore-default-flags', - ]) - .choices('form-factor', ['mobile', 'desktop']) - .choices('throttling-method', ['devtools', 'provided', 'simulate']) - .choices('preset', ['perf', 'experimental']) - // force as an array - // note MUST use camelcase versions or only the kebab-case version will be forced - .array('blockedUrlPatterns') - .array('onlyAudits') - .array('onlyCategories') - .array('skipAudits') - .array('output') - .array('plugins') - .string('extraHeaders') - .string('channel') - .string('precomputedLanternDataPath') - .string('lanternDataOutputPath') - .string('budgetPath') - - // default values - .default('chrome-flags', '') - .default('output', ['html']) - .default('port', 0) - .default('hostname', 'localhost') - .default('form-factor', 'mobile') - .default('enable-error-reporting', undefined) // Undefined so prompted by default - .default('channel', 'cli') - .check(/** @param {LH.CliFlags} argv */ (argv) => { -======= // Choices added outside of `options()` and cast so tsc picks them up. .choices('emulated-form-factor', /** @type {['mobile', 'desktop', 'none']} */ (['mobile', 'desktop', 'none'])) .choices('throttling-method', /** @type {['devtools', 'provided', 'simulate']} */ (['devtools', 'provided', 'simulate'])) .choices('preset', /** @type {['perf', 'experimental']} */ (['perf', 'experimental'])) .check(argv => { ->>>>>>> master // Lighthouse doesn't need a URL if... // - We're just listing the available options. // - We're just printing the config. From 90196121287794d638eeefddb068a1843e979f24 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 09:00:46 -0800 Subject: [PATCH 36/63] restored cli flag changes --- lighthouse-cli/cli-flags.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index 5d4693a17965..e7d26e7b8543 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -137,9 +137,18 @@ function getFlags(manualArgv) { default: 'localhost', describe: 'The hostname to use for the debugging protocol.', }, - 'emulated-form-factor': { + 'form-factor': { type: 'string', - describe: 'Controls the emulated device form factor (mobile vs. desktop) if not disabled', + describe: 'Determines how performance metrics are scored and if mobile-only audits are skipped.', + default: 'mobile', + }, + 'screenEmulation': { + type: 'string', + describe: 'Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2', + }, + 'emulatedUserAgent': { + type: 'string', + describe: 'Sets useragent emulation', }, 'max-wait-for-load': { type: 'number', @@ -185,7 +194,7 @@ function getFlags(manualArgv) { }) .group([ 'save-assets', 'list-all-audits', 'list-trace-categories', 'print-config', 'additional-trace-categories', - 'config-path', 'preset', 'chrome-flags', 'port', 'hostname', 'emulated-form-factor', + 'config-path', 'preset', 'chrome-flags', 'port', 'hostname', 'form-factor', 'screenEmulation', 'emulatedUserAgent', 'max-wait-for-load', 'enable-error-reporting', 'gather-mode', 'audit-mode', 'only-audits', 'only-categories', 'skip-audits', 'budget-path', ], 'Configuration:') @@ -278,7 +287,7 @@ function getFlags(manualArgv) { }) // Choices added outside of `options()` and cast so tsc picks them up. - .choices('emulated-form-factor', /** @type {['mobile', 'desktop', 'none']} */ (['mobile', 'desktop', 'none'])) + .choices('form-factor', /** @type {['mobile', 'desktop']} */ (['mobile', 'desktop'])) .choices('throttling-method', /** @type {['devtools', 'provided', 'simulate']} */ (['devtools', 'provided', 'simulate'])) .choices('preset', /** @type {['perf', 'experimental']} */ (['perf', 'experimental'])) From 4c915155bb2489400b30b126bd279e29e1a4430e Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 09:13:07 -0800 Subject: [PATCH 37/63] desktop preset needs help :/ --- docs/emulation.md | 2 +- lighthouse-cli/cli-flags.js | 3 ++- lighthouse-core/config/config.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/emulation.md b/docs/emulation.md index 75f6df438d6b..f04a20dcd045 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -4,7 +4,7 @@ In Lighthouse, "Emulation" refers to the screen/viewport emulation and UserAgent string spoofing. ["Throttling"](./throttling.md) covers the similar topics around network and CPU throttling/simulation. -With the default configuration, Lighthouse emulates a mobile device. There's [a `desktop` configuration](../lighthouse-core/config/desktop-config.js), available to CLI users with `--preset=desktop`, which applies a consistent desktop environment and scoring calibration. +With the default configuration, Lighthouse emulates a mobile device. There's [a `desktop` configuration](../lighthouse-core/config/desktop-config.js), available to CLI users with `--preset=desktop`, which applies a consistent desktop environment and scoring calibration. This is recommended as a replacement for `--emulation-form-factor=desktop`. ### Advanced emulation setups diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index e7d26e7b8543..0d6758945dc0 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -140,6 +140,7 @@ function getFlags(manualArgv) { 'form-factor': { type: 'string', describe: 'Determines how performance metrics are scored and if mobile-only audits are skipped.', + // TODO: don't overwrite the formFactor consumed via preset. eg. --preset=desktop default: 'mobile', }, 'screenEmulation': { @@ -289,7 +290,7 @@ function getFlags(manualArgv) { // Choices added outside of `options()` and cast so tsc picks them up. .choices('form-factor', /** @type {['mobile', 'desktop']} */ (['mobile', 'desktop'])) .choices('throttling-method', /** @type {['devtools', 'provided', 'simulate']} */ (['devtools', 'provided', 'simulate'])) - .choices('preset', /** @type {['perf', 'experimental']} */ (['perf', 'experimental'])) + .choices('preset', /** @type {['perf', 'experimental', 'desktop']} */ (['perf', 'experimental', 'desktop'])) .check(argv => { // Lighthouse doesn't need a URL if... diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index 18e70108f3e5..a472059f8eb8 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -184,7 +184,7 @@ function assertValidSettings(settings) { if (!settings.screenEmulation.disabled) { if (settings.screenEmulation.mobile !== (settings.formFactor === 'mobile')) { - throw new Error(`Screen emulation mobile setting (${settings.screenEmulation.mobile}) does not match formFactor setting (${settings.formFactor})`); // eslint-disable-line max-len + throw new Error(`Screen emulation mobile setting (${settings.screenEmulation.mobile}) does not match formFactor setting (${settings.formFactor}). See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md`); } } } From 391a7b085a9ad25faaa673aadfc821dc99cc2c13 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 09:29:59 -0800 Subject: [PATCH 38/63] add failing test for desktop vs config --- lighthouse-cli/test/cli/index-test.js | 40 +++++++++++++++++++++++++++ types/externs.d.ts | 2 +- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/lighthouse-cli/test/cli/index-test.js b/lighthouse-cli/test/cli/index-test.js index 1b002095ed79..891dc062ec75 100644 --- a/lighthouse-cli/test/cli/index-test.js +++ b/lighthouse-cli/test/cli/index-test.js @@ -95,4 +95,44 @@ describe('CLI Tests', function() { expect(config).toMatchSnapshot(); }); }); + + describe('preset', () => { + it('desktop should set appropriate config', () => { + const ret = spawnSync('node', [indexPath, '--print-config', '--preset=desktop'], { + encoding: 'utf8', + }); + + const config = JSON.parse(ret.stdout); + const {emulatedUserAgent, formFactor, screenEmulation, throttling, throttlingMethod} = config.settings; + const emulationSettings = { + emulatedUserAgent, + formFactor, + screenEmulation, + throttling, + throttlingMethod, + }; + expect(emulationSettings).toMatchInlineSnapshot(` + Object { + "emulatedUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Safari/537.36 Chrome-Lighthouse", + "formFactor": "desktop", + "screenEmulation": Object { + "deviceScaleFactor": 1, + "disabled": false, + "height": 940, + "mobile": false, + "width": 1350, + }, + "throttling": Object { + "cpuSlowdownMultiplier": 1, + "downloadThroughputKbps": 0, + "requestLatencyMs": 0, + "rttMs": 40, + "throughputKbps": 10240, + "uploadThroughputKbps": 0, + }, + "throttlingMethod": "simulate", + } + `); + }); + }); }); diff --git a/types/externs.d.ts b/types/externs.d.ts index 0f1730d30700..9928a29d498c 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -217,7 +217,7 @@ declare global { /** Flag to print a list of all required trace categories. */ listTraceCategories: boolean; /** A preset audit of selected audit categories to run. */ - preset?: 'experimental'|'perf'; + preset?: 'experimental'|'perf'|'desktop'; /** A flag to enable logLevel 'verbose'. */ verbose: boolean; /** A flag to enable logLevel 'silent'. */ From 1a91693f7968e01b21abebeafde4a5fee283ba10 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 09:47:04 -0800 Subject: [PATCH 39/63] formFactor CLI no longer gets default --- lighthouse-cli/cli-flags.js | 4 +--- readme.md | 4 ++++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index 0d6758945dc0..4a3a2c1de411 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -139,9 +139,7 @@ function getFlags(manualArgv) { }, 'form-factor': { type: 'string', - describe: 'Determines how performance metrics are scored and if mobile-only audits are skipped.', - // TODO: don't overwrite the formFactor consumed via preset. eg. --preset=desktop - default: 'mobile', + describe: 'Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead.', }, 'screenEmulation': { type: 'string', diff --git a/readme.md b/readme.md index 40d6e840f217..80016406653d 100644 --- a/readme.md +++ b/readme.md @@ -67,6 +67,10 @@ By default, Lighthouse writes the report to an HTML file. You can control the ou ### CLI options + + ``` $ lighthouse --help From 9adf3039539185f364055a16702b7b82c340a878 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 09:53:19 -0800 Subject: [PATCH 40/63] update readme CLI flags --- readme.md | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/readme.md b/readme.md index 80016406653d..21eba73c7457 100644 --- a/readme.md +++ b/readme.md @@ -87,14 +87,16 @@ Configuration: --print-config Print the normalized config for the given config and options, then exit. [boolean] [default: false] --additional-trace-categories Additional categories to capture with the trace (comma-delimited). [string] --config-path The path to the config JSON. - An example config file: lighthouse-core/config/lr-desktop-config.js [string] + An example config file: lighthouse-core/config/lr-desktop-config.js [string] --preset Use a built-in configuration. - WARNING: If the --config-path flag is provided, this preset will be ignored. [string] [choices: "perf", "experimental"] + WARNING: If the --config-path flag is provided, this preset will be ignored. [string] [choices: "perf", "experimental", "desktop"] --chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags - Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used. [string] [default: ""] + Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used. [string] [default: ""] --port The port to use for the debugging protocol. Use 0 for a random port [number] [default: 0] --hostname The hostname to use for the debugging protocol. [string] [default: "localhost"] - --emulated-form-factor Controls the emulated device form factor (mobile vs. desktop) if not disabled [string] [choices: "mobile", "desktop", "none"] + --form-factor Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead. [string] [choices: "mobile", "desktop"] + --screenEmulation Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2 [string] + --emulatedUserAgent Sets useragent emulation [string] --max-wait-for-load The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability [number] --enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://git.io/vFFTO [boolean] --gather-mode, -G Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early. @@ -107,10 +109,10 @@ Configuration: Output: --output Reporter for the results, supports multiple values. choices: "json", "html", "csv" [array] [default: ["html"]] --output-path The file path to output the results. Use 'stdout' to write to stdout. - If using JSON output, default is stdout. - If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date. - If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc. - Example: --output-path=./lighthouse-results.html [string] + If using JSON output, default is stdout. + If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date. + If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc. + Example: --output-path=./lighthouse-results.html [string] --view Open HTML report in your browser [boolean] [default: false] Options: @@ -136,15 +138,15 @@ Options: --chrome-ignore-default-flags [boolean] [default: false] Examples: - lighthouse --view Opens the HTML report in a browser after the run completes - lighthouse --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report generation, etc. - lighthouse --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report. - lighthouse --emulated-form-factor=none --throttling-method=provided Disable device emulation and all throttling - lighthouse --chrome-flags="--window-size=412,660" Launch Chrome with a specific window size - lighthouse --quiet --chrome-flags="--headless" Launch Headless Chrome, turn off logging - lighthouse --extra-headers "{\"Cookie\":\"monster=blue\", \"x-men\":\"wolverine\"}" Stringify'd JSON HTTP Header key/value pairs to send in requests - lighthouse --extra-headers=./path/to/file.json Path to JSON file of HTTP Header key/value pairs to send in requests - lighthouse --only-categories=performance,pwa Only run the specified categories. Available categories: accessibility, best-practices, performance, pwa, seo + lighthouse --view Opens the HTML report in a browser after the run completes + lighthouse --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report generation, etc. + lighthouse --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report. + lighthouse --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent Disable device emulation and all throttling + lighthouse --chrome-flags="--window-size=412,660" Launch Chrome with a specific window size + lighthouse --quiet --chrome-flags="--headless" Launch Headless Chrome, turn off logging + lighthouse --extra-headers "{\"Cookie\":\"monster=blue\", \"x-men\":\"wolverine\"}" Stringify'd JSON HTTP Header key/value pairs to send in requests + lighthouse --extra-headers=./path/to/file.json Path to JSON file of HTTP Header key/value pairs to send in requests + lighthouse --only-categories=performance,pwa Only run the specified categories. Available categories: accessibility, best-practices, performance, pwa, seo For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/. ``` From 55247d9a6ceebfb8a0b69cd6b5a3745d6e7b0df5 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 11:46:09 -0800 Subject: [PATCH 41/63] fix screenEmulation cli flags type --- lighthouse-cli/cli-flags.js | 44 ++++++++++++++++++++++++++++++++++++- readme.md | 2 +- types/externs.d.ts | 5 +++-- 3 files changed, 47 insertions(+), 4 deletions(-) diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index 4a3a2c1de411..2141d2051b99 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -142,8 +142,8 @@ function getFlags(manualArgv) { describe: 'Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead.', }, 'screenEmulation': { - type: 'string', describe: 'Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2', + coerce: coerceScreenEmulation, }, 'emulatedUserAgent': { type: 'string', @@ -426,6 +426,48 @@ function coerceThrottling(value) { return throttlingSettings; } +/** + * Take yarg's unchecked object value and ensure it's proper screenEmulation settings. + * @param {unknown} value + * @return {LH.screenEmulationSettings} + */ +function coerceScreenEmulation(value) { + if (!isObjectOfUnknownValues(value)) { + throw new Error(`Invalid value: Argument 'screenEmulation' must be an object, specified per-property ('screenEmulation.width', 'screenEmulation.deviceScaleFactor', etc)`); + } + + /** @type {Array} */ + const keys = ['width', 'height', 'deviceScaleFactor', 'mobile', 'disabled']; + /** @type {LH.screenEmulationSettings} */ + const screenEmulationSettings = {}; + + for (const key of keys) { + const possibleSetting = value[key]; + switch (key) { + case 'width': + case 'height': + case 'deviceScaleFactor': + if (possibleSetting !== undefined && typeof possibleSetting !== 'number') { + throw new Error(`Invalid value: 'screenEmulation.${key}' must be a number`); + } + screenEmulationSettings[key] = possibleSetting; + + break; + case 'mobile': + case 'disabled': + if (possibleSetting !== undefined && typeof possibleSetting !== 'boolean') { + throw new Error(`Invalid value: 'screenEmulation.${key}' must be a boolean`); + } + screenEmulationSettings[key] = possibleSetting; + break; + default: + throw new Error(`Unrecognized screenEmulation option: ${key}`); + } + } + + return screenEmulationSettings; +} + module.exports = { getFlags, }; diff --git a/readme.md b/readme.md index 21eba73c7457..46badd4d9f97 100644 --- a/readme.md +++ b/readme.md @@ -95,7 +95,7 @@ Configuration: --port The port to use for the debugging protocol. Use 0 for a random port [number] [default: 0] --hostname The hostname to use for the debugging protocol. [string] [default: "localhost"] --form-factor Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead. [string] [choices: "mobile", "desktop"] - --screenEmulation Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2 [string] + --screenEmulation Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2 --emulatedUserAgent Sets useragent emulation [string] --max-wait-for-load The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability [number] --enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://git.io/vFFTO [boolean] diff --git a/types/externs.d.ts b/types/externs.d.ts index 9928a29d498c..770637df622e 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -125,7 +125,8 @@ declare global { export type OutputMode = 'json' | 'html' | 'csv'; - export type deviceMetricsOverrideParams = Pick; + type deviceMetricsOverrideParams = Pick; + export type screenEmulationSettings = Partial; /** * Options that are found in both the flags used by the Lighthouse module @@ -155,7 +156,7 @@ declare global { /** How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor?: 'mobile'|'desktop'; /** Screen emulation properties (width, height, dpr, mobile viewport) to apply or an object of `{disabled: true}` if Lighthouse should avoid applying screen emulation. It's typically set to disabled if either emulation is applied outside of Lighthouse, or it's being run on a mobile device. For desktop, we recommend applying consistent desktop screen emulation. */ - screenEmulation?: Partial; + screenEmulation?: screenEmulationSettings; /** User Agent to apply */ emulatedUserAgent?: string | boolean; From 584277c037b62fe84512d42540dd28595756b038 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 11:49:38 -0800 Subject: [PATCH 42/63] lint --- lighthouse-cli/test/cli/index-test.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/lighthouse-cli/test/cli/index-test.js b/lighthouse-cli/test/cli/index-test.js index 891dc062ec75..dd0b495c9569 100644 --- a/lighthouse-cli/test/cli/index-test.js +++ b/lighthouse-cli/test/cli/index-test.js @@ -103,14 +103,12 @@ describe('CLI Tests', function() { }); const config = JSON.parse(ret.stdout); - const {emulatedUserAgent, formFactor, screenEmulation, throttling, throttlingMethod} = config.settings; - const emulationSettings = { - emulatedUserAgent, - formFactor, - screenEmulation, - throttling, - throttlingMethod, - }; + const {emulatedUserAgent, formFactor, screenEmulation, throttling, throttlingMethod} = + config.settings; + const emulationSettings = + {emulatedUserAgent, formFactor, screenEmulation, throttling, throttlingMethod}; + + /* eslint-disable max-len */ expect(emulationSettings).toMatchInlineSnapshot(` Object { "emulatedUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Safari/537.36 Chrome-Lighthouse", @@ -133,6 +131,7 @@ describe('CLI Tests', function() { "throttlingMethod": "simulate", } `); + /* eslint-enable max-len */ }); }); }); From dd4acce814e40a66cf8831939d97d95f9d3c75c6 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 12:36:49 -0800 Subject: [PATCH 43/63] devtools compat and remapping --- clients/devtools-entry.js | 6 ++++-- lighthouse-core/config/config.js | 13 +++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/clients/devtools-entry.js b/clients/devtools-entry.js index ace8303714aa..7b9df047bb26 100644 --- a/clients/devtools-entry.js +++ b/clients/devtools-entry.js @@ -9,7 +9,7 @@ const lighthouse = require('../lighthouse-core/index.js'); const RawProtocol = require('../lighthouse-core/gather/connections/raw.js'); const log = require('lighthouse-logger'); const {registerLocaleData, lookupLocale} = require('../lighthouse-core/lib/i18n/i18n.js'); -const desktopDense4G = require('../lighthouse-core/config/constants.js').throttling.desktopDense4G; +const constants = require('../lighthouse-core/config/constants.js'); /** @typedef {import('../lighthouse-core/gather/connections/connection.js')} Connection */ @@ -32,7 +32,9 @@ function createConfig(categoryIDs, device) { screenEmulation: {disabled: true}, }; if (device === 'desktop') { - settings.throttling = desktopDense4G; + settings.throttling = constants.throttling.desktopDense4G; + settings.emulatedUserAgent = constants.userAgents.desktop; + settings.formFactor = 'desktop'; } return { diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index a472059f8eb8..82ae83eeacdc 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -167,6 +167,16 @@ function assertValidGatherer(gathererInstance, gathererName) { * @param {LH.Flags} flags */ function assertValidFlags(flags) { + // COMPAT: compatibility layer for devtools as it uses the old way and we need tests to pass + // TODO(paulirish): remove this from LH once emulation refactor has rolled into DevTools + if (flags.channel === 'devtools') { + // @ts-expect-error Deprecated flag + flags.formFactor = flags.emulatedFormFactor; + // @ts-expect-error Deprecated flag + flags.emulatedFormFactor = flags.internalDisableDeviceScreenEmulation = undefined; + } + + // @ts-expect-error Checking for removed flags if (flags.emulatedFormFactor || flags.internalDisableDeviceScreenEmulation) { throw new Error('Invalid emulation flag. Emulation configuration changed in LH 7.0. See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md'); @@ -183,6 +193,9 @@ function assertValidSettings(settings) { } if (!settings.screenEmulation.disabled) { + // formFactor doesn't control emulation. So we don't want a mismatch: + // Bad mismatch A: user wants mobile emulation but scoring is configured for desktop + // Bad mismtach B: user wants everything desktop and set formFactor, but accidentally not screenEmulation if (settings.screenEmulation.mobile !== (settings.formFactor === 'mobile')) { throw new Error(`Screen emulation mobile setting (${settings.screenEmulation.mobile}) does not match formFactor setting (${settings.formFactor}). See https://github.com/GoogleChrome/lighthouse/blob/master/docs/emulation.md`); } From 702feced15ada5823f79a95f7c9799148150c30e Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 12:48:19 -0800 Subject: [PATCH 44/63] Update lighthouse-cli/cli-flags.js Co-authored-by: Connor Clark --- lighthouse-cli/cli-flags.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index 2141d2051b99..1f5e24b74944 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -427,7 +427,7 @@ function coerceThrottling(value) { } /** - * Take yarg's unchecked object value and ensure it's proper screenEmulation settings. + * Take yarg's unchecked object value and ensure it is a proper LH.screenEmulationSettings. * @param {unknown} value * @return {LH.screenEmulationSettings} */ From c23a4eaa8a3cfac014081d37a9c7e610f7ab6546 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 13:06:59 -0800 Subject: [PATCH 45/63] type capitalization --- lighthouse-cli/cli-flags.js | 6 +++--- types/externs.d.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index 1f5e24b74944..d41a923fe03f 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -429,16 +429,16 @@ function coerceThrottling(value) { /** * Take yarg's unchecked object value and ensure it is a proper LH.screenEmulationSettings. * @param {unknown} value - * @return {LH.screenEmulationSettings} + * @return {LH.ScreenEmulationSettings} */ function coerceScreenEmulation(value) { if (!isObjectOfUnknownValues(value)) { throw new Error(`Invalid value: Argument 'screenEmulation' must be an object, specified per-property ('screenEmulation.width', 'screenEmulation.deviceScaleFactor', etc)`); } - /** @type {Array} */ + /** @type {Array} */ const keys = ['width', 'height', 'deviceScaleFactor', 'mobile', 'disabled']; - /** @type {LH.screenEmulationSettings} */ + /** @type {LH.ScreenEmulationSettings} */ const screenEmulationSettings = {}; for (const key of keys) { diff --git a/types/externs.d.ts b/types/externs.d.ts index 770637df622e..5d95ac1b630c 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -125,8 +125,8 @@ declare global { export type OutputMode = 'json' | 'html' | 'csv'; - type deviceMetricsOverrideParams = Pick; - export type screenEmulationSettings = Partial; + type DeviceMetricsOverrideParams = Pick; + export type ScreenEmulationSettings = Partial; /** * Options that are found in both the flags used by the Lighthouse module @@ -156,7 +156,7 @@ declare global { /** How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor?: 'mobile'|'desktop'; /** Screen emulation properties (width, height, dpr, mobile viewport) to apply or an object of `{disabled: true}` if Lighthouse should avoid applying screen emulation. It's typically set to disabled if either emulation is applied outside of Lighthouse, or it's being run on a mobile device. For desktop, we recommend applying consistent desktop screen emulation. */ - screenEmulation?: screenEmulationSettings; + screenEmulation?: ScreenEmulationSettings; /** User Agent to apply */ emulatedUserAgent?: string | boolean; From af2946dffd81aa9ce69b106acfa7c4db7758742e Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 13:08:07 -0800 Subject: [PATCH 46/63] devtools emulate-run: assert more emulation items --- .../lighthouse-emulate-run-expected.txt | 17 +++++++++++------ .../lighthouse/lighthouse-emulate-run.js | 7 ++++++- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt index 5e1e37020c5c..cfbbf99e9e87 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run-expected.txt @@ -15,13 +15,18 @@ Generate report: enabled visible =============== Lighthouse Results =============== URL: http://127.0.0.1:8000/devtools/lighthouse/resources/lighthouse-emulate-pass.html Version: 6.5.0 -ViewportDimensions: { - "innerWidth": 360, - "innerHeight": 640, - "outerWidth": 360, - "outerHeight": 640, - "devicePixelRatio": 3 +formFactor: mobile +screenEmulation: { + "mobile": true, + "width": 360, + "height": 640, + "deviceScaleFactor": 2.625, + "disabled": true } +Mobile network UA?: true +Mobile configured UA?: true +throttlingMethod: simulate +throttling.rttMs: 150 content-width: pass undefined diff --git a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run.js b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run.js index 8d2c42f8bd98..7cdf274d5865 100644 --- a/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run.js +++ b/third-party/chromium-webtests/webtests/http/tests/devtools/lighthouse/lighthouse-emulate-run.js @@ -16,7 +16,12 @@ TestRunner.addResult('\n=============== Lighthouse Results ==============='); TestRunner.addResult(`URL: ${lhr.finalUrl}`); TestRunner.addResult(`Version: ${lhr.lighthouseVersion}`); - TestRunner.addResult(`ViewportDimensions: ${JSON.stringify(artifacts.ViewportDimensions, null, 2)}`); + TestRunner.addResult(`formFactor: ${lhr.configSettings.formFactor}`); + TestRunner.addResult(`screenEmulation: ${JSON.stringify(lhr.configSettings.screenEmulation, null, 2)}`); + TestRunner.addResult(`Mobile network UA?: ${lhr.environment.networkUserAgent.includes('Mobile')}`); + TestRunner.addResult(`Mobile configured UA?: ${lhr.configSettings.emulatedUserAgent.includes('Mobile')}`); + TestRunner.addResult(`throttlingMethod: ${lhr.configSettings.throttlingMethod}`); + TestRunner.addResult(`throttling.rttMs: ${lhr.configSettings.throttling.rttMs}`); TestRunner.addResult('\n'); const auditName = 'content-width'; From cec15867928e3eac6c57bd78e9da6e31b80a57c5 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 13:23:43 -0800 Subject: [PATCH 47/63] minor --- lighthouse-core/test/runner-test.js | 3 ++- types/config.d.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/test/runner-test.js b/lighthouse-core/test/runner-test.js index 76ee3c2331c0..6e4130efdac7 100644 --- a/lighthouse-core/test/runner-test.js +++ b/lighthouse-core/test/runner-test.js @@ -112,6 +112,7 @@ describe('Runner', () => { }); it('-A throws if the settings change', async () => { + // Change throttlingMethod from its default of 'simulate' const settings = {auditMode: artifactsPath, throttlingMethod: 'provided'}; const opts = {config: generateConfig(settings), driverMock}; try { @@ -123,7 +124,7 @@ describe('Runner', () => { }); it('-A throws if the URL changes', async () => { - const settings = {auditMode: artifactsPath, formFactor: 'mobile'}; + const settings = {auditMode: artifactsPath}; const opts = {url: 'https://differenturl.com', config: generateConfig(settings), driverMock}; try { await Runner.run(defaultGatherFn, opts); diff --git a/types/config.d.ts b/types/config.d.ts index 9586ae33695d..0b894fe9b6c6 100644 --- a/types/config.d.ts +++ b/types/config.d.ts @@ -84,7 +84,7 @@ declare global { export interface Settings extends Required { throttling: Required; - screenEmulation: deviceMetricsOverrideParams & {disabled: boolean}; + screenEmulation: DeviceMetricsOverrideParams & {disabled: boolean}; } export interface Pass extends Required { From 4a848405eb0899937a6d93c2391f878089c52d3a Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 13:26:07 -0800 Subject: [PATCH 48/63] Update lighthouse-core/config/config.js Co-authored-by: Connor Clark --- lighthouse-core/config/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index 82ae83eeacdc..9eb7758bb094 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -169,7 +169,7 @@ function assertValidGatherer(gathererInstance, gathererName) { function assertValidFlags(flags) { // COMPAT: compatibility layer for devtools as it uses the old way and we need tests to pass // TODO(paulirish): remove this from LH once emulation refactor has rolled into DevTools - if (flags.channel === 'devtools') { + if (flags.channel === 'devtools' && flags.internalDisableDeviceScreenEmulation) { // @ts-expect-error Deprecated flag flags.formFactor = flags.emulatedFormFactor; // @ts-expect-error Deprecated flag From a84d0b80ce9296bd49e65e90842ae3ab3d1d8ff3 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 13:26:33 -0800 Subject: [PATCH 49/63] Update docs/emulation.md Co-authored-by: Adam Raine <6752989+adamraine@users.noreply.github.com> --- docs/emulation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/emulation.md b/docs/emulation.md index f04a20dcd045..840ec88ccbd8 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -24,8 +24,8 @@ In Lighthouse v7, most of the configuration regarding emulation changed to be mo ) captures additional motivations. * Removed: The `emulatedFormFactor` property (which determined how emulation is applied). -* Removed: The `TestedAsMobileDevice` artifact is removed. Instead of being inferred, the `formFactor` property is used. -* The `internalDisableDeviceScreenEmulation` property is removed. It's equivalent to the new `screenEmulation: false`. +* Removed: The `TestedAsMobileDevice` artifact. Instead of being inferred, the `formFactor` property is used. +* Removed: The `internalDisableDeviceScreenEmulation` property. It's equivalent to the new `screenEmulation: false`. * Added: The `formFactor` property. * Added: The `screenEmulation` property. * Added: The `emulatedUserAgent` property. From 39d80f8729af8e4a653b236ae4efbd4879718acd Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 13:39:31 -0800 Subject: [PATCH 50/63] ts-expect-error --- lighthouse-core/config/config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index 9eb7758bb094..32d4b435752a 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -169,6 +169,7 @@ function assertValidGatherer(gathererInstance, gathererName) { function assertValidFlags(flags) { // COMPAT: compatibility layer for devtools as it uses the old way and we need tests to pass // TODO(paulirish): remove this from LH once emulation refactor has rolled into DevTools + // @ts-expect-error Deprecated flag if (flags.channel === 'devtools' && flags.internalDisableDeviceScreenEmulation) { // @ts-expect-error Deprecated flag flags.formFactor = flags.emulatedFormFactor; From d833938b46a8f8bdb0aa0792af550ebd7aaeb954 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 13:53:35 -0800 Subject: [PATCH 51/63] Update docs/emulation.md Co-authored-by: Patrick Hulce --- docs/emulation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/emulation.md b/docs/emulation.md index 840ec88ccbd8..146277b46c0d 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -8,7 +8,7 @@ With the default configuration, Lighthouse emulates a mobile device. There's [a ### Advanced emulation setups -Some products use Lighthouse in scenarios where emulation is applied outside of Lighthouse (eg by Puppeteer) or running against Chrome on real mobile devices. +Some products use Lighthouse in scenarios where emulation is applied outside of Lighthouse (e.g. by Puppeteer) or running against Chrome on real mobile devices. You must always set `formFactor`. It doesn't control emulation, but it determines how Lighthouse should interpret the run in regards to scoring performance metrics and skipping mobile-only tests in desktop. From 2e8b139bab9cb33e2b4754d5c8faf0703dae3fac Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 13:53:23 -0800 Subject: [PATCH 52/63] typo fix from patrick ( and 2 other minor wording tweaks) --- clients/devtools-entry.js | 2 +- docs/emulation.md | 2 +- lighthouse-cli/cli-flags.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/clients/devtools-entry.js b/clients/devtools-entry.js index 7b9df047bb26..693080a33c18 100644 --- a/clients/devtools-entry.js +++ b/clients/devtools-entry.js @@ -28,7 +28,7 @@ function createConfig(categoryIDs, device) { /** @type {LH.SharedFlagsSettings} */ const settings = { onlyCategories: categoryIDs, - // DevTools handles all the emulation + // DevTools handles all the screen emulation screenEmulation: {disabled: true}, }; if (device === 'desktop') { diff --git a/docs/emulation.md b/docs/emulation.md index 146277b46c0d..268fc154caf1 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -4,7 +4,7 @@ In Lighthouse, "Emulation" refers to the screen/viewport emulation and UserAgent string spoofing. ["Throttling"](./throttling.md) covers the similar topics around network and CPU throttling/simulation. -With the default configuration, Lighthouse emulates a mobile device. There's [a `desktop` configuration](../lighthouse-core/config/desktop-config.js), available to CLI users with `--preset=desktop`, which applies a consistent desktop environment and scoring calibration. This is recommended as a replacement for `--emulation-form-factor=desktop`. +With the default configuration, Lighthouse emulates a mobile device. There's [a `desktop` configuration](../lighthouse-core/config/desktop-config.js), available to CLI users with `--preset=desktop`, which applies a consistent desktop environment and scoring calibration. This is recommended as a replacement for `--emulated-form-factor=desktop`. ### Advanced emulation setups diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index d41a923fe03f..bf1e3b4c1c2a 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -33,7 +33,7 @@ function getFlags(manualArgv) { 'Save trace, screenshots, and named JSON report.') .example( 'lighthouse --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent', - 'Disable device emulation and all throttling') + 'Disable emulation and all throttling') .example( 'lighthouse --chrome-flags="--window-size=412,660"', 'Launch Chrome with a specific window size') From 1c3731e3f7a14d6c7d38ad55c56cb97dc8c40e15 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 14:03:07 -0800 Subject: [PATCH 53/63] object arg format for all existing and new uses of getFakeContext() --- .../metrics/first-contentful-paint-test.js | 14 +++++++++----- .../metrics/first-meaningful-paint-test.js | 19 +++++++++++-------- .../test/audits/metrics/interactive-test.js | 14 +++++++++----- .../metrics/largest-contentful-paint-test.js | 16 +++++++++------- .../test/audits/metrics/speed-index-test.js | 12 +++++++----- .../metrics/total-blocking-time-test.js | 2 +- 6 files changed, 46 insertions(+), 31 deletions(-) diff --git a/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js b/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js index 9e1173f2fd22..9ee471d1a572 100644 --- a/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js +++ b/lighthouse-core/test/audits/metrics/first-contentful-paint-test.js @@ -13,11 +13,13 @@ const pwaTrace = require('../../fixtures/traces/progressive-app-m60.json'); const pwaDevtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); /** - * @param {LH.SharedFlagsSettings['formFactor']} formFactor - * @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + * @param {{ + * {LH.SharedFlagsSettings['formFactor']} formFactor + * {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + * }} param0 */ -const getFakeContext = (formFactor, throttlingMethod) => ({ - options, +const getFakeContext = ({formFactor, throttlingMethod}) => ({ + options: options, computedCache: new Map(), settings: { formFactor: formFactor, @@ -26,6 +28,7 @@ const getFakeContext = (formFactor, throttlingMethod) => ({ }, }); + /* eslint-env jest */ describe('Performance: first-contentful-paint audit', () => { @@ -39,7 +42,8 @@ describe('Performance: first-contentful-paint audit', () => { }, }; - const result = await Audit.audit(artifacts, getFakeContext('mobile', 'provided')); + const context = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); + const result = await Audit.audit(artifacts, context); assert.equal(result.score, 1); assert.equal(result.numericValue, 498.87); }); diff --git a/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js b/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js index 19b491ba1dad..fa59ad274e77 100644 --- a/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js +++ b/lighthouse-core/test/audits/metrics/first-meaningful-paint-test.js @@ -13,13 +13,18 @@ const options = FMPAudit.defaultOptions; const trace = require('../../fixtures/traces/progressive-app-m60.json'); const devtoolsLogs = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); - -/** @param {LH.SharedFlagsSettings['formFactor']} formFactor */ -const getFakeContext = (formFactor = 'mobile') => ({ - options, +/** + * @param {{ + * {LH.SharedFlagsSettings['formFactor']} formFactor + * {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + * }} param0 + */ +const getFakeContext = ({formFactor, throttlingMethod}) => ({ + options: options, computedCache: new Map(), settings: { formFactor: formFactor, + throttlingMethod, screenEmulation: constants.screenEmulationMetrics[formFactor], }, }); @@ -31,8 +36,7 @@ describe('Performance: first-meaningful-paint audit', () => { traces: {[Audit.DEFAULT_PASS]: trace}, devtoolsLogs: {[Audit.DEFAULT_PASS]: devtoolsLogs}, }; - const context = getFakeContext(); - context.settings.throttlingMethod = 'provided'; + const context = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); const fmpResult = await FMPAudit.audit(artifacts, context); assert.equal(fmpResult.score, 1); @@ -45,8 +49,7 @@ describe('Performance: first-meaningful-paint audit', () => { traces: {[Audit.DEFAULT_PASS]: trace}, devtoolsLogs: {[Audit.DEFAULT_PASS]: devtoolsLogs}, }; - const context = getFakeContext(); - context.settings.throttlingMethod = 'simulate'; + const context = getFakeContext({formFactor: 'mobile', throttlingMethod: 'simulate'}); const fmpResult = await FMPAudit.audit(artifacts, context); expect({ diff --git a/lighthouse-core/test/audits/metrics/interactive-test.js b/lighthouse-core/test/audits/metrics/interactive-test.js index df1193c0eb88..8abeeca6dace 100644 --- a/lighthouse-core/test/audits/metrics/interactive-test.js +++ b/lighthouse-core/test/audits/metrics/interactive-test.js @@ -18,10 +18,12 @@ const redirectTrace = require('../../fixtures/traces/site-with-redirect.json'); const redirectDevToolsLog = require('../../fixtures/traces/site-with-redirect.devtools.log.json'); /** - * @param {LH.SharedFlagsSettings['formFactor']} formFactor - * @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + * @param {{ + * {LH.SharedFlagsSettings['formFactor']} formFactor + * {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + * }} param0 */ -const getFakeContext = (formFactor, throttlingMethod) => ({ +const getFakeContext = ({formFactor, throttlingMethod}) => ({ options: options, computedCache: new Map(), settings: { @@ -43,7 +45,8 @@ describe('Performance: interactive audit', () => { }, }; - return Interactive.audit(artifacts, getFakeContext('mobile', 'provided')).then(output => { + const context = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); + return Interactive.audit(artifacts, context).then(output => { assert.equal(output.score, 1); assert.equal(Math.round(output.numericValue), 1582); expect(output.displayValue).toBeDisplayString('1.6\xa0s'); @@ -60,7 +63,8 @@ describe('Performance: interactive audit', () => { }, }; - return Interactive.audit(artifacts, getFakeContext('mobile', 'provided')).then(output => { + const context = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); + return Interactive.audit(artifacts, context).then(output => { assert.equal(output.score, 0.97); assert.equal(Math.round(output.numericValue), 2712); expect(output.displayValue).toBeDisplayString('2.7\xa0s'); diff --git a/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js b/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js index 39ec1f0836a6..a35da8e0bc05 100644 --- a/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js +++ b/lighthouse-core/test/audits/metrics/largest-contentful-paint-test.js @@ -24,10 +24,12 @@ function generateArtifacts({trace, devtoolsLog, HostUserAgent}) { } /** - * @param {LH.SharedFlagsSettings['formFactor']} formFactor - * @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + * @param {{ + * {LH.SharedFlagsSettings['formFactor']} formFactor + * {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + * }} param0 */ -const getFakeContext = (formFactor, throttlingMethod) => ({ +const getFakeContext = ({formFactor, throttlingMethod}) => ({ options: defaultOptions, computedCache: new Map(), settings: { @@ -45,7 +47,7 @@ describe('Performance: largest-contentful-paint audit', () => { trace, devtoolsLog, }); - const contextMobile = getFakeContext('mobile', 'provided'); + const contextMobile = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); const outputMobile = await LCPAudit.audit(artifactsMobile, contextMobile); expect(outputMobile.numericValue).toBeCloseTo(1121.711, 1); @@ -56,7 +58,7 @@ describe('Performance: largest-contentful-paint audit', () => { trace, devtoolsLog, }); - const contextDesktop = getFakeContext('desktop', 'provided'); + const contextDesktop = getFakeContext({formFactor: 'desktop', throttlingMethod: 'provided'}); const outputDesktop = await LCPAudit.audit(artifactsDesktop, contextDesktop); expect(outputDesktop.numericValue).toBeCloseTo(1121.711, 1); @@ -72,7 +74,7 @@ describe('Performance: largest-contentful-paint audit', () => { 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.78 ' + 'Mobile Safari/537.36 Chrome-Lighthouse', }); - const contextOldChrome = getFakeContext('mobile', 'provided'); + const contextOldChrome = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); await expect(LCPAudit.audit(artifactsOldChrome, contextOldChrome)) .rejects.toThrow(/UNSUPPORTED_OLD_CHROME/); @@ -84,7 +86,7 @@ describe('Performance: largest-contentful-paint audit', () => { 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 ' + 'Mobile Safari/537.36 Chrome-Lighthouse', }); - const contextNewChrome = getFakeContext('mobile', 'provided'); + const contextNewChrome = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); await expect(LCPAudit.audit(artifactsNewChrome, contextNewChrome)).rejects.toThrow(/NO_LCP/); }); diff --git a/lighthouse-core/test/audits/metrics/speed-index-test.js b/lighthouse-core/test/audits/metrics/speed-index-test.js index 5ca922e0a436..8d77fb3d1703 100644 --- a/lighthouse-core/test/audits/metrics/speed-index-test.js +++ b/lighthouse-core/test/audits/metrics/speed-index-test.js @@ -16,11 +16,13 @@ const pwaTrace = require('../../fixtures/traces/progressive-app-m60.json'); const pwaDevtoolsLog = require('../../fixtures/traces/progressive-app-m60.devtools.log.json'); /** - * @param {LH.SharedFlagsSettings['formFactor']} formFactor - * @param {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + * @param {{ + * {LH.SharedFlagsSettings['formFactor']} formFactor + * {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod + * }} param0 */ -const getFakeContext = (formFactor, throttlingMethod) => ({ - options, +const getFakeContext = ({formFactor, throttlingMethod}) => ({ + options: options, computedCache: new Map(), settings: { formFactor: formFactor, @@ -37,7 +39,7 @@ describe('Performance: speed-index audit', () => { devtoolsLogs: {defaultPass: pwaDevtoolsLog}, }; - const context = getFakeContext('mobile', 'provided'); + const context = getFakeContext({formFactor: 'mobile', throttlingMethod: 'provided'}); return Audit.audit(artifacts, context).then(result => { assert.equal(result.score, 1); assert.equal(result.numericValue, 605); diff --git a/lighthouse-core/test/audits/metrics/total-blocking-time-test.js b/lighthouse-core/test/audits/metrics/total-blocking-time-test.js index 880d4f0afc64..ab351c410f9e 100644 --- a/lighthouse-core/test/audits/metrics/total-blocking-time-test.js +++ b/lighthouse-core/test/audits/metrics/total-blocking-time-test.js @@ -25,7 +25,7 @@ function generateArtifacts({trace, devtoolsLog}) { /** * @param {{ * {LH.SharedFlagsSettings['formFactor']} formFactor - * {LH.SharedFlagsSettings['formFactor']} formFactor + * {LH.SharedFlagsSettings['throttlingMethod']} throttlingMethod * }} param0 */ const getFakeContext = ({formFactor, throttlingMethod}) => ({ From 8b272525817f34d26cf80dc02678aafc41854777 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 15:17:49 -0800 Subject: [PATCH 54/63] Apply suggestions from code review Co-authored-by: Brendan Kenny --- types/config.d.ts | 2 +- types/externs.d.ts | 20 +++++++++++++++----- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/types/config.d.ts b/types/config.d.ts index 0b894fe9b6c6..17841ff9da7f 100644 --- a/types/config.d.ts +++ b/types/config.d.ts @@ -84,7 +84,7 @@ declare global { export interface Settings extends Required { throttling: Required; - screenEmulation: DeviceMetricsOverrideParams & {disabled: boolean}; + screenEmulation: ScreenEmulationSettings; } export interface Pass extends Required { diff --git a/types/externs.d.ts b/types/externs.d.ts index 5d95ac1b630c..f761d5e5ee9f 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -125,8 +125,18 @@ declare global { export type OutputMode = 'json' | 'html' | 'csv'; - type DeviceMetricsOverrideParams = Pick; - export type ScreenEmulationSettings = Partial; + export type ScreenEmulationSettings = { + /** Overriding width value in pixels (minimum 0, maximum 10000000). 0 disables the override. */ + width: number, + /** Overriding height value in pixels (minimum 0, maximum 10000000). 0 disables the override. */ + height: number, + /** Overriding device scale factor value. 0 disables the override. */ + deviceScaleFactor: number, + /** Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more. */ + mobile: boolean, + /** Whether screen emulation is disabled. If true, the other emulation settings are ignored. */ + disabled: boolean, + }; /** * Options that are found in both the flags used by the Lighthouse module @@ -155,9 +165,9 @@ declare global { // TODO: formFactor should really be required, but since this type is shared in Flags, we can't reasonably do that. We'll likely need to separate SharedFlagsSettings into CLI Flags and Config Settings. /** How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor?: 'mobile'|'desktop'; - /** Screen emulation properties (width, height, dpr, mobile viewport) to apply or an object of `{disabled: true}` if Lighthouse should avoid applying screen emulation. It's typically set to disabled if either emulation is applied outside of Lighthouse, or it's being run on a mobile device. For desktop, we recommend applying consistent desktop screen emulation. */ - screenEmulation?: ScreenEmulationSettings; - /** User Agent to apply */ + /** Screen emulation properties (width, height, dpr, mobile viewport) to apply or an object of `{disabled: true}` if Lighthouse should avoid applying screen emulation. If either emulation is applied outside of Lighthouse, or it's being run on a mobile device, it typically should be set to disabled. For desktop, we recommend applying consistent desktop screen emulation. */ + screenEmulation?: Partial; + /** User Agent string to apply, `false` to not change the host's UA string, or `true` to use Lighthouse's default UA string. */ emulatedUserAgent?: string | boolean; /** The method used to throttle the network. */ From 3caee8279662e3887ac8db6e544a5023b894175c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 15:20:12 -0800 Subject: [PATCH 55/63] Apply suggestions from code review Co-authored-by: Patrick Hulce Co-authored-by: Brendan Kenny --- docs/emulation.md | 4 ++-- lighthouse-cli/cli-flags.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/emulation.md b/docs/emulation.md index 268fc154caf1..d47277d042a1 100644 --- a/docs/emulation.md +++ b/docs/emulation.md @@ -24,8 +24,8 @@ In Lighthouse v7, most of the configuration regarding emulation changed to be mo ) captures additional motivations. * Removed: The `emulatedFormFactor` property (which determined how emulation is applied). -* Removed: The `TestedAsMobileDevice` artifact. Instead of being inferred, the `formFactor` property is used. -* Removed: The `internalDisableDeviceScreenEmulation` property. It's equivalent to the new `screenEmulation: false`. +* Removed: The `TestedAsMobileDevice` artifact. Instead of being inferred, the explicit `formFactor` property is used. +* Removed: The `internalDisableDeviceScreenEmulation` property. It's equivalent to the new `--screenEmulation.disabled=true`. * Added: The `formFactor` property. * Added: The `screenEmulation` property. * Added: The `emulatedUserAgent` property. diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index bf1e3b4c1c2a..ded98f446285 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -429,7 +429,7 @@ function coerceThrottling(value) { /** * Take yarg's unchecked object value and ensure it is a proper LH.screenEmulationSettings. * @param {unknown} value - * @return {LH.ScreenEmulationSettings} + * @return {Partial} */ function coerceScreenEmulation(value) { if (!isObjectOfUnknownValues(value)) { @@ -438,7 +438,7 @@ function coerceScreenEmulation(value) { /** @type {Array} */ const keys = ['width', 'height', 'deviceScaleFactor', 'mobile', 'disabled']; - /** @type {LH.ScreenEmulationSettings} */ + /** @type {Partial} */ const screenEmulationSettings = {}; for (const key of keys) { From f31a89dfb07dbc68d4c3a2dadca64f05a2e058f5 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 15:22:20 -0800 Subject: [PATCH 56/63] screenshot smoketest fix --- .../test-definitions/screenshot/screenshot-config.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lighthouse-cli/test/smokehouse/test-definitions/screenshot/screenshot-config.js b/lighthouse-cli/test/smokehouse/test-definitions/screenshot/screenshot-config.js index e7b013aa6fad..c90cc351fcb0 100644 --- a/lighthouse-cli/test/smokehouse/test-definitions/screenshot/screenshot-config.js +++ b/lighthouse-cli/test/smokehouse/test-definitions/screenshot/screenshot-config.js @@ -10,5 +10,12 @@ module.exports = { extends: 'lighthouse:default', settings: { formFactor: 'desktop', + screenEmulation: { + width: 1024, + height: 768, + deviceScaleFactor: 1, + mobile: false, + disabled: false, + }, }, }; From 05917d149e904bba1cad9ff7cdc70f4f2746bfa9 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 15:23:23 -0800 Subject: [PATCH 57/63] semicolon-gate --- types/externs.d.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/types/externs.d.ts b/types/externs.d.ts index f761d5e5ee9f..d49bf33ae694 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -127,15 +127,15 @@ declare global { export type ScreenEmulationSettings = { /** Overriding width value in pixels (minimum 0, maximum 10000000). 0 disables the override. */ - width: number, + width: number; /** Overriding height value in pixels (minimum 0, maximum 10000000). 0 disables the override. */ - height: number, + height: number; /** Overriding device scale factor value. 0 disables the override. */ - deviceScaleFactor: number, + deviceScaleFactor: number; /** Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more. */ - mobile: boolean, + mobile: boolean; /** Whether screen emulation is disabled. If true, the other emulation settings are ignored. */ - disabled: boolean, + disabled: boolean; }; /** From 31a7b554fc66201b86d6d6d32c473f053472f20e Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 15:28:16 -0800 Subject: [PATCH 58/63] drop todo on formfactor --- types/externs.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/types/externs.d.ts b/types/externs.d.ts index d49bf33ae694..587d3772fc53 100644 --- a/types/externs.d.ts +++ b/types/externs.d.ts @@ -162,7 +162,6 @@ declare global { /** Flag indicating that the browser storage should not be reset for the audit. */ disableStorageReset?: boolean; - // TODO: formFactor should really be required, but since this type is shared in Flags, we can't reasonably do that. We'll likely need to separate SharedFlagsSettings into CLI Flags and Config Settings. /** How Lighthouse should interpret this run in regards to scoring performance metrics and skipping mobile-only tests in desktop. Must be set even if throttling/emulation is being applied outside of Lighthouse. */ formFactor?: 'mobile'|'desktop'; /** Screen emulation properties (width, height, dpr, mobile viewport) to apply or an object of `{disabled: true}` if Lighthouse should avoid applying screen emulation. If either emulation is applied outside of Lighthouse, or it's being run on a mobile device, it typically should be set to disabled. For desktop, we recommend applying consistent desktop screen emulation. */ From 09fb5585f7e6a43a16276e7c2e8780f1eb0af029 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 16:16:32 -0800 Subject: [PATCH 59/63] feedback from brendan. emuUA cast still outstanding --- clients/devtools-entry.js | 4 +++- lighthouse-cli/cli-flags.js | 3 ++- lighthouse-core/gather/gatherers/full-page-screenshot.js | 5 +++-- lighthouse-core/lib/emulation.js | 5 +---- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/clients/devtools-entry.js b/clients/devtools-entry.js index 693080a33c18..305e76220f3e 100644 --- a/clients/devtools-entry.js +++ b/clients/devtools-entry.js @@ -28,11 +28,13 @@ function createConfig(categoryIDs, device) { /** @type {LH.SharedFlagsSettings} */ const settings = { onlyCategories: categoryIDs, - // DevTools handles all the screen emulation + // In DevTools, emulation is applied _before_ Lighthouse starts (to deal with viewport emulation bugs). go/xcnjf + // As a result, we don't double-apply viewport emulation. screenEmulation: {disabled: true}, }; if (device === 'desktop') { settings.throttling = constants.throttling.desktopDense4G; + // UA emulation, however, is lost in the protocol handover from devtools frontend to the lighthouse_worker. So it's always applied. settings.emulatedUserAgent = constants.userAgents.desktop; settings.formFactor = 'desktop'; } diff --git a/lighthouse-cli/cli-flags.js b/lighthouse-cli/cli-flags.js index ded98f446285..c12180988d87 100644 --- a/lighthouse-cli/cli-flags.js +++ b/lighthouse-cli/cli-flags.js @@ -32,7 +32,7 @@ function getFlags(manualArgv) { 'lighthouse --output=json --output-path=./report.json --save-assets', 'Save trace, screenshots, and named JSON report.') .example( - 'lighthouse --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent', + 'lighthouse --screenEmulation.disabled --throttling-method=provided --no-emulated-user-agent', 'Disable emulation and all throttling') .example( 'lighthouse --chrome-flags="--window-size=412,660"', @@ -147,6 +147,7 @@ function getFlags(manualArgv) { }, 'emulatedUserAgent': { type: 'string', + coerce: coerceOptionalStringBoolean, describe: 'Sets useragent emulation', }, 'max-wait-for-load': { diff --git a/lighthouse-core/gather/gatherers/full-page-screenshot.js b/lighthouse-core/gather/gatherers/full-page-screenshot.js index 9c0751b5e5fd..a807965f0651 100644 --- a/lighthouse-core/gather/gatherers/full-page-screenshot.js +++ b/lighthouse-core/gather/gatherers/full-page-screenshot.js @@ -42,7 +42,8 @@ class FullPageScreenshot extends Gatherer { const height = Math.min(metrics.contentSize.height, MAX_SCREENSHOT_HEIGHT); await driver.sendCommand('Emulation.setDeviceMetricsOverride', { - mobile: passContext.settings.formFactor === 'mobile', + // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot. + mobile: passContext.settings.screenEmulation.mobile, height, width, deviceScaleFactor: 1, @@ -116,7 +117,7 @@ class FullPageScreenshot extends Gatherer { // In case some other program is controlling emulation, try to remember what the device looks // like now and reset after gatherer is done. - const lighthouseControlsEmulation = passContext.settings.screenEmulation.disabled !== true; + const lighthouseControlsEmulation = !passContext.settings.screenEmulation.disabled; try { return { diff --git a/lighthouse-core/lib/emulation.js b/lighthouse-core/lib/emulation.js index 4373779743ed..70ce2fc0c9c2 100644 --- a/lighthouse-core/lib/emulation.js +++ b/lighthouse-core/lib/emulation.js @@ -33,10 +33,6 @@ const NO_CPU_THROTTLE_METRICS = { * @return {Promise} */ async function emulate(driver, settings) { - // In DevTools, emulation is applied before Lighthouse starts (to deal with viewport emulation bugs) - // As a result, we don't double-apply viewport emulation (devtools sets `screenEmulation` to `false`). - // UA emulation, however, is lost in the protocol handover from devtools frontend to the lighthouse_worker. So it's always applied. - if (settings.emulatedUserAgent !== false) { // Network.enable must be called for UA overriding to work await driver.sendCommand('Network.enable'); @@ -44,6 +40,7 @@ async function emulate(driver, settings) { userAgent: /** @type {string} */ (settings.emulatedUserAgent), }); } + // See devtools-entry for one usecase for disabling screenEmulation if (settings.screenEmulation.disabled !== true) { const {width, height, deviceScaleFactor, mobile} = settings.screenEmulation; const params = {width, height, deviceScaleFactor, mobile}; From 77d98c73d76abe97678c9c34fa933d8f42ebd756 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 16:20:12 -0800 Subject: [PATCH 60/63] readme whitespace yay --- readme.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index 46badd4d9f97..07a852885d83 100644 --- a/readme.md +++ b/readme.md @@ -87,11 +87,11 @@ Configuration: --print-config Print the normalized config for the given config and options, then exit. [boolean] [default: false] --additional-trace-categories Additional categories to capture with the trace (comma-delimited). [string] --config-path The path to the config JSON. - An example config file: lighthouse-core/config/lr-desktop-config.js [string] + An example config file: lighthouse-core/config/lr-desktop-config.js [string] --preset Use a built-in configuration. WARNING: If the --config-path flag is provided, this preset will be ignored. [string] [choices: "perf", "experimental", "desktop"] --chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags - Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used. [string] [default: ""] + Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used. [string] [default: ""] --port The port to use for the debugging protocol. Use 0 for a random port [number] [default: 0] --hostname The hostname to use for the debugging protocol. [string] [default: "localhost"] --form-factor Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead. [string] [choices: "mobile", "desktop"] @@ -109,10 +109,10 @@ Configuration: Output: --output Reporter for the results, supports multiple values. choices: "json", "html", "csv" [array] [default: ["html"]] --output-path The file path to output the results. Use 'stdout' to write to stdout. - If using JSON output, default is stdout. - If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date. - If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc. - Example: --output-path=./lighthouse-results.html [string] + If using JSON output, default is stdout. + If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date. + If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc. + Example: --output-path=./lighthouse-results.html [string] --view Open HTML report in your browser [boolean] [default: false] Options: From 7a0e1b9b067c8dcfef19f34c384a6d91ec206a31 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 16:25:00 -0800 Subject: [PATCH 61/63] bespoke emuUA initialization comment --- lighthouse-core/config/config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lighthouse-core/config/config.js b/lighthouse-core/config/config.js index 32d4b435752a..4aa9bd82d216 100644 --- a/lighthouse-core/config/config.js +++ b/lighthouse-core/config/config.js @@ -529,6 +529,8 @@ class Config { // Locale is special and comes only from flags/settings/lookupLocale. settingsWithFlags.locale = locale; + // Default constants uses the mobile UA. Explicitly stating to true asks LH to use the associated UA. + // It's a little awkward, but the alternatives are not allowing `true` or a dedicated `disableUAEmulation` setting. if (settingsWithFlags.emulatedUserAgent === true) { settingsWithFlags.emulatedUserAgent = constants.userAgents[settingsWithFlags.formFactor]; } From c4a19c6106967fb2256a4b954bada3391858687d Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 16:28:46 -0800 Subject: [PATCH 62/63] emulatedUserAgent tests, authored by Brendan Kenny --- lighthouse-core/test/config/config-test.js | 35 ++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/lighthouse-core/test/config/config-test.js b/lighthouse-core/test/config/config-test.js index 28b3214b5d39..36c9aa13888c 100644 --- a/lighthouse-core/test/config/config-test.js +++ b/lighthouse-core/test/config/config-test.js @@ -833,6 +833,41 @@ describe('Config', () => { }); }); + describe('emulatedUserAgent', () => { + it('uses the default UA string when emulatedUserAgent is undefined', () => { + const config = new Config({}); + expect(config.settings.emulatedUserAgent).toMatch(/^Mozilla\/5.*Chrome-Lighthouse$/); + }); + + it('uses the default UA string when emulatedUserAgent is true', () => { + const config = new Config({ + settings: { + emulatedUserAgent: true, + }, + }); + expect(config.settings.emulatedUserAgent).toMatch(/^Mozilla\/5.*Chrome-Lighthouse$/); + }); + + it('does not use a UA string when emulatedUserAgent is false', () => { + const config = new Config({ + settings: { + emulatedUserAgent: false, + }, + }); + expect(config.settings.emulatedUserAgent).toEqual(false); + }); + + it('uses the UA string provided if it is a string', () => { + const emulatedUserAgent = 'one weird trick to get a perfect LH score'; + const config = new Config({ + settings: { + emulatedUserAgent, + }, + }); + expect(config.settings.emulatedUserAgent).toEqual(emulatedUserAgent); + }); + }); + it('is idempotent when accepting a canonicalized Config as valid ConfigJson input', () => { const config = new Config(defaultConfig); const configAgain = new Config(config); From 58179b0e688aa4efc12a790c3ef8a4a1ab2c1642 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 15 Dec 2020 17:10:58 -0800 Subject: [PATCH 63/63] tests arent typed --- .../test/gather/gatherers/full-page-screenshot-test.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js index 266c7ce3d6cc..12282d72313b 100644 --- a/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js +++ b/lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js @@ -63,6 +63,7 @@ describe('FullPageScreenshot gatherer', () => { settings: { formFactor: 'mobile', screenEmulation: { + mobile: true, disabled: false, }, }, @@ -93,6 +94,7 @@ describe('FullPageScreenshot gatherer', () => { settings: { formFactor: 'mobile', screenEmulation: { + mobile: true, disabled: false, }, }, @@ -102,7 +104,7 @@ describe('FullPageScreenshot gatherer', () => { await fpsGatherer.afterPass(passContext); - const expectedArgs = {formFactor: 'mobile', screenEmulation: {disabled: false}}; + const expectedArgs = {formFactor: 'mobile', screenEmulation: {disabled: false, mobile: true}}; expect(driver.beginEmulation).toHaveBeenCalledWith(expectedArgs); expect(driver.beginEmulation).toHaveBeenCalledTimes(1); }); @@ -123,6 +125,7 @@ describe('FullPageScreenshot gatherer', () => { const passContext = { settings: { screenEmulation: { + mobile: true, disabled: true, }, formFactor: 'mobile', @@ -174,6 +177,7 @@ describe('FullPageScreenshot gatherer', () => { settings: { formFactor: 'mobile', screenEmulation: { + mobile: true, disabled: false, }, },