core(full-page-screenshot): add full page screenshot to artifacts

lighthouse-cli/test/cli/__snapshots__/index-test.js.snap

@@ -1165,6 +1165,9 @@ Object {
         Object {
           "path": "accessibility",
         },
+        Object {
+          "path": "full-page-screenshot",
+        },
       ],
       "networkQuietThresholdMs": 1000,
       "passName": "defaultPass",

lighthouse-core/audits/final-screenshot.js

@@ -7,7 +7,6 @@
 
 const Audit = require('./audit.js');
 const LHError = require('../lib/lh-error.js');
-const TraceOfTab = require('../computed/trace-of-tab.js');
 const Screenshots = require('../computed/screenshots.js');
 
 class FinalScreenshot extends Audit {
@@ -31,9 +30,7 @@ class FinalScreenshot extends Audit {
    */
   static async audit(artifacts, context) {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
-    const traceOfTab = await TraceOfTab.request(trace, context);
     const screenshots = await Screenshots.request(trace, context);
-    const {navigationStart} = traceOfTab.timestamps;
     const finalScreenshot = screenshots[screenshots.length - 1];
 
     if (!finalScreenshot) {
@@ -44,8 +41,6 @@ class FinalScreenshot extends Audit {
       score: 1,
       details: {
         type: 'screenshot',
-        timing: Math.round((finalScreenshot.timestamp - navigationStart) / 1000),
-        timestamp: finalScreenshot.timestamp,
         data: finalScreenshot.datauri,
       },
     };

lighthouse-core/audits/full-page-screenshot.js

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright 2019 Google Inc. 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 Audit = require('./audit.js');
+
+class FullPageScreenshot extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'full-page-screenshot',
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      title: 'Full-page screenshot',
+      description: 'A full-height screenshot of the final rendered page',
+      requiredArtifacts: ['FullPageScreenshot'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts) {
+    return {
+      score: 1,
+      details: {
+        type: 'screenshot',
+        ...artifacts.FullPageScreenshot,
+      },
+    };
+  }
+}
+
+module.exports = FullPageScreenshot;

lighthouse-core/config/default-config.js

@@ -137,6 +137,7 @@ const defaultConfig = {
       'seo/tap-targets',
       // Always run axe last because it scrolls the page down to the bottom
       'accessibility',
+      'full-page-screenshot',
     ],
   },
   {
@@ -169,6 +170,8 @@ const defaultConfig = {
     'metrics/speed-index',
     'screenshot-thumbnails',
     'final-screenshot',
+    // Disable for now since we don't need it in the LHR yet and it's quite big
+    // 'full-page-screenshot',
     'metrics/estimated-input-latency',
     'metrics/max-potential-fid',
     'errors-in-console',

lighthouse-core/gather/driver.js

@@ -1423,13 +1423,15 @@ class Driver {
 
   /**
    * @param {LH.Config.Settings} settings
+   * @param {{height?: number, screenHeight: number?, deviceScaleFactor?: number}} [deviceMetricOverrides]
+   * Override device size for taking screenshots.
    * @return {Promise<void>}
    */
-  async beginEmulation(settings) {
+  async beginEmulation(settings, deviceMetricOverrides) {
     if (settings.emulatedFormFactor === 'mobile') {
-      await emulation.enableNexus5X(this);
+      await emulation.enableNexus5X(this, deviceMetricOverrides);
     } else if (settings.emulatedFormFactor === 'desktop') {
-      await emulation.enableDesktop(this);
+      await emulation.enableDesktop(this, deviceMetricOverrides);
     }
 
     await this.setThrottling(settings, {useThrottling: true});

lighthouse-core/gather/gatherers/full-page-screenshot.js

@@ -0,0 +1,71 @@
+/**
+ * @license Copyright 2019 Google Inc. 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 Gatherer = require('./gatherer.js');
+
+// JPEG quality setting
+// Exploration and examples of reports using different quality settings: https://docs.google.com/document/d/1ZSffucIca9XDW2eEwfoevrk-OTl7WQFeMf0CgeJAA8M/edit#
+const FULL_PAGE_SCREENSHOT_QUALITY = 30;
+// Maximum screenshot height in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=770769
+const MAX_SCREENSHOT_HEIGHT = 16384;
+// Maximum data URL size in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=69227
+const MAX_DATA_URL_SIZE = 2 * 1024 * 1024;
+
+class FullPageScreenshot extends Gatherer {
+  /**
+   * @param {LH.Gatherer.PassContext} passContext
+   * @param {number} maxScreenshotHeight
+   * @return {Promise<LH.Artifacts.FullPageScreenshot>}
+   */
+  async _takeScreenshot(passContext, maxScreenshotHeight) {
+    const driver = passContext.driver;
+    const metrics = await driver.sendCommand('Page.getLayoutMetrics');
+    const width = await driver.evaluateAsync(`window.innerWidth`);
+    const height = Math.min(metrics.contentSize.height, maxScreenshotHeight);
+
+    await driver.beginEmulation(passContext.settings, {
+      height,
+      screenHeight: height,
+      deviceScaleFactor: 1,
+    });
+
+    const result = await driver.sendCommand('Page.captureScreenshot', {
+      format: 'jpeg',
+      quality: FULL_PAGE_SCREENSHOT_QUALITY,
+    });
+    const data = 'data:image/jpeg;base64,' + result.data;
+
+    // Revert resized page
+    await driver.beginEmulation(passContext.settings);
+
+    return {
+      data,
+      width,
+      height,
+    };
+  }
+
+  /**
+   * @param {LH.Gatherer.PassContext} passContext
+   * @return {Promise<LH.Artifacts.FullPageScreenshot>}
+   */
+  async afterPass(passContext) {
+    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
+      // desktop sites with lots of images.
+      // So just cutting down the height a bit fixes the issue.
+      screenshot = await this._takeScreenshot(passContext, 5000);
+    }
+
+    return screenshot;
+  }
+}
+
+module.exports = FullPageScreenshot;
+module.exports.MAX_SCREENSHOT_HEIGHT = MAX_SCREENSHOT_HEIGHT;

lighthouse-core/lib/emulation.js

@@ -64,30 +64,51 @@ const NO_CPU_THROTTLE_METRICS = {
 
 /**
  * @param {Driver} driver
- * @return {Promise<void>}
+ * @param {EnableEmulationOptions} emulationOptions
  */
-async function enableNexus5X(driver) {
-  await Promise.all([
-    driver.sendCommand('Emulation.setDeviceMetricsOverride', NEXUS5X_EMULATION_METRICS),
+async function enableEmulation(
+  driver,
+  {deviceMetrics, setTouchEmulationEnabled, userAgent, deviceMetricOverrides}
+) {
+  if (deviceMetricOverrides) {
+    deviceMetrics = Object.assign({}, deviceMetrics, deviceMetricOverrides);
+  }
+
+  return Promise.all([
+    driver.sendCommand('Emulation.setDeviceMetricsOverride', deviceMetrics),
     // Network.enable must be called for UA overriding to work
     driver.sendCommand('Network.enable'),
-    driver.sendCommand('Network.setUserAgentOverride', {userAgent: NEXUS5X_USERAGENT}),
-    driver.sendCommand('Emulation.setTouchEmulationEnabled', {enabled: true}),
+    driver.sendCommand('Network.setUserAgentOverride', {userAgent}),
+    driver.sendCommand('Emulation.setTouchEmulationEnabled', {enabled: setTouchEmulationEnabled}),
   ]);
 }
 
 /**
  * @param {Driver} driver
+ * @param {DeviceMetricOverrides} [deviceMetricOverrides]
  * @return {Promise<void>}
  */
-async function enableDesktop(driver) {
-  await Promise.all([
-    driver.sendCommand('Emulation.setDeviceMetricsOverride', DESKTOP_EMULATION_METRICS),
-    // Network.enable must be called for UA overriding to work
-    driver.sendCommand('Network.enable'),
-    driver.sendCommand('Network.setUserAgentOverride', {userAgent: DESKTOP_USERAGENT}),
-    driver.sendCommand('Emulation.setTouchEmulationEnabled', {enabled: false}),
-  ]);
+async function enableNexus5X(driver, deviceMetricOverrides) {
+  await enableEmulation(driver, {
+    deviceMetrics: NEXUS5X_EMULATION_METRICS,
+    userAgent: NEXUS5X_USERAGENT,
+    setTouchEmulationEnabled: true,
+    deviceMetricOverrides,
+  });
+}
+
+/**
+ * @param {Driver} driver
+ * @param {DeviceMetricOverrides} [deviceMetricOverrides]
+ * @return {Promise<void>}
+ */
+async function enableDesktop(driver, deviceMetricOverrides) {
+  await enableEmulation(driver, {
+    deviceMetrics: DESKTOP_EMULATION_METRICS,
+    userAgent: DESKTOP_USERAGENT,
+    setTouchEmulationEnabled: false,
+    deviceMetricOverrides,
+  });
 }
 
 /**
@@ -155,3 +176,16 @@ module.exports = {
   MOBILE_USERAGENT: NEXUS5X_USERAGENT,
   DESKTOP_USERAGENT,
 };
+
+/** @typedef {{
+ *   deviceMetrics: LH.Crdp.Emulation.SetDeviceMetricsOverrideRequest;
+ *   userAgent: string;
+ *   setTouchEmulationEnabled: boolean;
+ *   deviceMetricOverrides?: DeviceMetricOverrides;
+ * }} EnableEmulationOptions */
+
+/** @typedef {{
+ *   height?: number;
+ *   screenHeight: number?;
+ *   deviceScaleFactor?: number;
+ * }} DeviceMetricOverrides */

lighthouse-core/test/audits/final-screenshot-test.js

@@ -20,8 +20,6 @@ describe('Final screenshot', () => {
     const results = await FinalScreenshotAudit.audit(artifacts, {computedCache: new Map()});
 
     assert.equal(results.score, 1);
-    assert.equal(results.details.timing, 818);
-    assert.equal(results.details.timestamp, 225414990064);
     assert.ok(results.details.data.startsWith('data:image/jpeg;base64,/9j/4AAQSkZJRgABA'));
   });
 });