From f84a3953f1b97c1a3c321fa480ba9936e6b0e7f6 Mon Sep 17 00:00:00 2001 From: Patrick Hulce Date: Wed, 22 Aug 2018 10:21:51 -0700 Subject: [PATCH 1/2] core(content-width): not applicable on desktop --- lighthouse-core/audits/content-width.js | 10 +++++++++- lighthouse-core/test/audits/content-width-test.js | 13 +++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/lighthouse-core/audits/content-width.js b/lighthouse-core/audits/content-width.js index 334206f71310..ca53c3eff74d 100644 --- a/lighthouse-core/audits/content-width.js +++ b/lighthouse-core/audits/content-width.js @@ -25,13 +25,21 @@ class ContentWidth extends Audit { /** * @param {LH.Artifacts} artifacts + * @param {LH.Audit.Context} context * @return {LH.Audit.Product} */ - static audit(artifacts) { + static audit(artifacts, context) { const viewportWidth = artifacts.ViewportDimensions.innerWidth; const windowWidth = artifacts.ViewportDimensions.outerWidth; const widthsMatch = viewportWidth === windowWidth; + if (context.settings.disableDeviceEmulation) { + return { + rawValue: true, + notApplicable: true, + }; + } + return { rawValue: widthsMatch, explanation: this.createExplanation(widthsMatch, artifacts.ViewportDimensions), diff --git a/lighthouse-core/test/audits/content-width-test.js b/lighthouse-core/test/audits/content-width-test.js index 41f8f2ed30c1..2ed03d8f8fdd 100644 --- a/lighthouse-core/test/audits/content-width-test.js +++ b/lighthouse-core/test/audits/content-width-test.js @@ -17,7 +17,7 @@ describe('Mobile-friendly: content-width audit', () => { innerWidth: 100, outerWidth: 300, }, - }); + }, {settings: {}}); assert.equal(result.rawValue, false); assert.ok(result.explanation); @@ -29,6 +29,15 @@ describe('Mobile-friendly: content-width audit', () => { innerWidth: 300, outerWidth: 300, }, - }).rawValue, true); + }, {settings: {}}).rawValue, true); + }); + + it('not applicable when device emulation is turned off', () => { + return assert.equal(Audit.audit({ + ViewportDimensions: { + innerWidth: 300, + outerWidth: 450, + }, + }, {settings: {disableDeviceEmulation: true}}).notApplicable, true); }); }); From b380544b3bdabff6d6323591029467991fcb0c06 Mon Sep 17 00:00:00 2001 From: Patrick Hulce Date: Wed, 26 Sep 2018 14:43:55 -0400 Subject: [PATCH 2/2] rebase on emualtedformfactor --- lighthouse-core/audits/content-width.js | 20 +++++++++++------ .../test/audits/content-width-test.js | 22 ++++++++++++++++--- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/lighthouse-core/audits/content-width.js b/lighthouse-core/audits/content-width.js index ca53c3eff74d..7de0b62fb11a 100644 --- a/lighthouse-core/audits/content-width.js +++ b/lighthouse-core/audits/content-width.js @@ -19,7 +19,7 @@ class ContentWidth extends Audit { description: 'If the width of your app\'s content doesn\'t match the width ' + 'of the viewport, your app might not be optimized for mobile screens. ' + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/content-sized-correctly-for-viewport).', - requiredArtifacts: ['ViewportDimensions'], + requiredArtifacts: ['ViewportDimensions', 'HostUserAgent'], }; } @@ -29,21 +29,27 @@ class ContentWidth extends Audit { * @return {LH.Audit.Product} */ static audit(artifacts, context) { + const userAgent = artifacts.HostUserAgent; const viewportWidth = artifacts.ViewportDimensions.innerWidth; const windowWidth = artifacts.ViewportDimensions.outerWidth; const widthsMatch = viewportWidth === windowWidth; - if (context.settings.disableDeviceEmulation) { + // TODO(phulce): refactor this `isMobile` boolean to be on context + const isMobileHost = userAgent.includes('Android') || userAgent.includes('Mobile'); + const isMobile = context.settings.emulatedFormFactor === 'mobile' || + (context.settings.emulatedFormFactor !== 'desktop' && isMobileHost); + + if (isMobile) { + return { + rawValue: widthsMatch, + explanation: this.createExplanation(widthsMatch, artifacts.ViewportDimensions), + }; + } else { return { rawValue: true, notApplicable: true, }; } - - return { - rawValue: widthsMatch, - explanation: this.createExplanation(widthsMatch, artifacts.ViewportDimensions), - }; } /** diff --git a/lighthouse-core/test/audits/content-width-test.js b/lighthouse-core/test/audits/content-width-test.js index 2ed03d8f8fdd..e4ce6e8b4d05 100644 --- a/lighthouse-core/test/audits/content-width-test.js +++ b/lighthouse-core/test/audits/content-width-test.js @@ -13,11 +13,25 @@ const assert = require('assert'); describe('Mobile-friendly: content-width audit', () => { it('fails when scroll width differs from viewport width', () => { const result = Audit.audit({ + HostUserAgent: 'Desktop', ViewportDimensions: { innerWidth: 100, outerWidth: 300, }, - }, {settings: {}}); + }, {settings: {emulatedFormFactor: 'mobile'}}); + + assert.equal(result.rawValue, false); + assert.ok(result.explanation); + }); + + it('fails when host user agent is a phone', () => { + const result = Audit.audit({ + HostUserAgent: 'Mobile Android', + ViewportDimensions: { + innerWidth: 100, + outerWidth: 300, + }, + }, {settings: {emulatedFormFactor: 'none'}}); assert.equal(result.rawValue, false); assert.ok(result.explanation); @@ -25,19 +39,21 @@ describe('Mobile-friendly: content-width audit', () => { it('passes when widths match', () => { return assert.equal(Audit.audit({ + HostUserAgent: '', ViewportDimensions: { innerWidth: 300, outerWidth: 300, }, - }, {settings: {}}).rawValue, true); + }, {settings: {emulatedFormFactor: 'mobile'}}).rawValue, true); }); it('not applicable when device emulation is turned off', () => { return assert.equal(Audit.audit({ + HostUserAgent: 'Mobile Android Chrome', ViewportDimensions: { innerWidth: 300, outerWidth: 450, }, - }, {settings: {disableDeviceEmulation: true}}).notApplicable, true); + }, {settings: {emulatedFormFactor: 'desktop'}}).notApplicable, true); }); });