Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

core(full-page-screenshot): use dpr 1 #11688

Merged
merged 7 commits into from
Nov 24, 2020
+17 −33
Merged

core(full-page-screenshot): use dpr 1 #11688

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7ef20f5
core(fpss): take screenshot with dpr: 1.
paulirish Nov 19, 2020
05640d9
clean up setDeviceMetricsOverride params that cdt/pptr dont set
paulirish Nov 19, 2020
8213d7f
fix tests for dpr1
paulirish Nov 19, 2020
91bdf1d
lint
paulirish Nov 20, 2020
6165bb1
drop remaining screenwidth items
paulirish Nov 20, 2020
dc1e1e7
we dun run this anymore
paulirish Nov 21, 2020
9d7307a
Merge branch 'master' into dpr1
paulirish Nov 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions lighthouse-core/gather/gatherers/full-page-screenshot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ class FullPageScreenshot extends Gatherer {
async _takeScreenshot(passContext, maxScreenshotHeight) {
const driver = passContext.driver;
const metrics = await driver.sendCommand('Page.getLayoutMetrics');
const deviceScaleFactor = await driver.evaluateAsync('window.devicePixelRatio');

// Width should match emulated width, without considering content overhang.
// Both layoutViewport and visualViewport capture this. visualViewport accounts
Expand All @@ -45,13 +44,9 @@ class FullPageScreenshot extends Gatherer {
await driver.sendCommand('Emulation.setDeviceMetricsOverride', {
mobile: passContext.baseArtifacts.TestedAsMobileDevice,
height,
screenHeight: height,
width,
screenWidth: width,
deviceScaleFactor,
deviceScaleFactor: 1,
scale: 1,
positionX: 0,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removing all of this is necessary? IIRC you suggested I add all the parameters in the original PR.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah i was being overly cautious back then. i looked and neither CDT nor PPTR uses these props.
i tested this heavily after these changes and feel good that they aren't important.

positionY: 0,
screenOrientation: {angle: 0, type: 'portraitPrimary'},
});

Expand All @@ -77,9 +72,7 @@ class FullPageScreenshot extends Gatherer {
* @return {Promise<LH.Artifacts.FullPageScreenshot | null>}
*/
async afterPass_(passContext) {
const deviceScaleFactor = await passContext.driver.evaluateAsync('window.devicePixelRatio');
const maxScreenshotHeight = Math.floor(MAX_SCREENSHOT_HEIGHT / deviceScaleFactor);
let screenshot = await this._takeScreenshot(passContext, maxScreenshotHeight);
let screenshot = await this._takeScreenshot(passContext, MAX_SCREENSHOT_HEIGHT);

if (screenshot.data.length > MAX_DATA_URL_SIZE) {
// Hitting the data URL size limit is rare, it only happens for pages on tall
Expand Down Expand Up @@ -126,8 +119,6 @@ class FullPageScreenshot extends Gatherer {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
screenWidth: window.screen.width,
screenHeight: window.screen.height,
screenOrientation: {
type: window.screen.orientation.type,
angle: window.screen.orientation.angle,
Expand Down
36 changes: 16 additions & 20 deletions lighthouse-core/test/gather/gatherers/full-page-screenshot-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
/* eslint-env jest */

const FullPageScreenshotGatherer = require('../../../gather/gatherers/full-page-screenshot.js');
const MAX_SCREENSHOT_HEIGHT = 16384;

/**
* @param {{contentSize: {width: number, height: number}, screenSize: {width?: number, height?: number, dpr: number}, screenshotData: string[]}}
Expand All @@ -20,7 +19,7 @@ function createMockDriver({contentSize, screenSize, screenshotData}) {
return contentSize.width;
}
if (code === 'window.devicePixelRatio') {
return screenSize ? screenSize.dpr : 1;
return screenSize ? screenSize.dpr : 2;
Copy link
Collaborator

@connorjclark connorjclark Nov 21, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't understand this change to the default

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good call. it's kind of a separate change. This is the mock driver so we're returning a DPR back to lighthouse.

Since we're now emulating DPR 1 to take the screenshot.. I figured I'd just pretend the browser is a non-1 DPR just to keep things separate

afaik this value is never even used.......

......

okay in that case i'll just delete this part of the mock.
done.

}
if (code.includes('document.documentElement.clientWidth')) {
return {
Expand Down Expand Up @@ -131,11 +130,9 @@ describe('Full-page screenshot gatherer', () => {
'Emulation.setDeviceMetricsOverride',
expect.objectContaining({
mobile: true,
deviceScaleFactor: 2,
deviceScaleFactor: 1,
height: 1500,
width: 500,
screenHeight: 1500,
screenWidth: 500,
})
);

Expand All @@ -147,8 +144,6 @@ describe('Full-page screenshot gatherer', () => {
deviceScaleFactor: 2,
height: 500,
width: 500,
screenHeight: 500,
screenWidth: 500,
screenOrientation: {
type: 'landscapePrimary',
angle: 30,
Expand Down Expand Up @@ -183,17 +178,18 @@ describe('Full-page screenshot gatherer', () => {
expect.objectContaining({
deviceScaleFactor: 1,
height: FullPageScreenshotGatherer.MAX_SCREENSHOT_HEIGHT,
screenHeight: FullPageScreenshotGatherer.MAX_SCREENSHOT_HEIGHT,
})
);
});

it('captures a smaller screenshot if the captured data URL is too large', async () => {
const fpsGatherer = new FullPageScreenshotGatherer();
const pageContentHeight = 15000;

const driver = createMockDriver({
contentSize: {
width: 412,
height: 15000,
height: pageContentHeight,
},
screenSize: {
dpr: 2,
Expand All @@ -216,17 +212,15 @@ describe('Full-page screenshot gatherer', () => {
expect(driver.sendCommand).toHaveBeenCalledWith(
'Emulation.setDeviceMetricsOverride',
expect.objectContaining({
deviceScaleFactor: 2,
height: Math.floor(MAX_SCREENSHOT_HEIGHT / 2),
screenHeight: Math.floor(MAX_SCREENSHOT_HEIGHT / 2),
deviceScaleFactor: 1,
height: pageContentHeight,
})
);
expect(driver.sendCommand).toHaveBeenCalledWith(
'Emulation.setDeviceMetricsOverride',
expect.objectContaining({
deviceScaleFactor: 2,
deviceScaleFactor: 1,
height: 5000,
screenHeight: 5000,
})
);

Expand All @@ -235,10 +229,12 @@ describe('Full-page screenshot gatherer', () => {

it('returns null if the captured data URL is way too large', async () => {
const fpsGatherer = new FullPageScreenshotGatherer();
const pageContentHeight = 15000;

const driver = createMockDriver({
contentSize: {
width: 412,
height: 15000,
height: pageContentHeight,
},
screenSize: {
dpr: 3,
Expand All @@ -259,20 +255,20 @@ describe('Full-page screenshot gatherer', () => {

const result = await fpsGatherer.afterPass(passContext);

// first attempt
expect(driver.sendCommand).toHaveBeenCalledWith(
'Emulation.setDeviceMetricsOverride',
expect.objectContaining({
deviceScaleFactor: 3,
height: Math.floor(MAX_SCREENSHOT_HEIGHT / 3),
screenHeight: Math.floor(MAX_SCREENSHOT_HEIGHT / 3),
deviceScaleFactor: 1,
height: pageContentHeight,
})
);
// second attempt
expect(driver.sendCommand).toHaveBeenCalledWith(
'Emulation.setDeviceMetricsOverride',
expect.objectContaining({
deviceScaleFactor: 3,
deviceScaleFactor: 1,
height: 5000,
screenHeight: 5000,
})
);

Expand Down