lighthouse 8.6.0-dev.20211029 → 8.6.0-dev.20211102

package/flow-report/test/common-test.tsx

@@ -24,10 +24,19 @@ describe('FlowStepThumbnail', () => {
         'full-page-screenshot': {
           details: {
             type: 'full-page-screenshot',
-            screenshot: {data: 'baef01', width: 400, height: 600},
+            screenshot: {data: 'FPS', width: 400, height: 600},
             nodes: {},
           },
         },
+        'screenshot-thumbnails': {
+          details: {
+            type: 'filmstrip',
+            items: [
+              {data: 'frame1'},
+              {data: 'frame2'},
+            ],
+          },
+        },
       },
     } as any;
   });
@@ -63,17 +72,23 @@ describe('FlowStepThumbnail', () => {
     expect(thumbnail.style.height).toEqual('150px');
   });
 
+  it('uses last filmstrip thumbnail', () => {
+    const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/) as HTMLImageElement;
+    expect(thumbnail.src).toContain('frame2');
+  });
+
+  it('uses full page screenshot if filmstrip unavailable', () => {
+    delete lhr.audits['screenshot-thumbnails'];
+    const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/) as HTMLImageElement;
+    expect(thumbnail.src).toContain('FPS');
+  });
+
   it('renders animated thumbnail for timespan', async () => {
     lhr.gatherMode = 'timespan';
-    lhr.audits['screenshot-thumbnails'] = {
-      details: {
-        type: 'filmstrip',
-        items: [
-          {data: 'frame1'},
-          {data: 'frame2'},
-        ],
-      },
-    } as any;
     const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
 
     const thumbnail = root.getByAltText(/Animated/) as HTMLImageElement;

package/flow-report/test/header-test.tsx

@@ -25,8 +25,8 @@ beforeEach(() => {
 });
 
 it('renders all sections for a middle step', () => {
-  const currentLhr = {index: 1} as any;
-  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+  const hashState = {index: 1} as any;
+  const root = render(<Header hashState={hashState}/>, {wrapper});
 
   expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeTruthy();
   expect(root.baseElement.querySelector('.Header__prev-title')).toBeTruthy();
@@ -35,8 +35,8 @@ it('renders all sections for a middle step', () => {
 });
 
 it('renders only next section for first step', () => {
-  const currentLhr = {index: 0} as any;
-  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+  const hashState = {index: 0} as any;
+  const root = render(<Header hashState={hashState}/>, {wrapper});
 
   expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeFalsy();
   expect(root.baseElement.querySelector('.Header__prev-title')).toBeFalsy();
@@ -45,8 +45,8 @@ it('renders only next section for first step', () => {
 });
 
 it('renders only previous section for last step', () => {
-  const currentLhr = {index: 3} as any;
-  const root = render(<Header currentLhr={currentLhr}/>, {wrapper});
+  const hashState = {index: 3} as any;
+  const root = render(<Header hashState={hashState}/>, {wrapper});
 
   expect(root.baseElement.querySelector('.Header__prev-thumbnail')).toBeTruthy();
   expect(root.baseElement.querySelector('.Header__prev-title')).toBeTruthy();

package/flow-report/test/setup/env-setup.ts

@@ -10,7 +10,7 @@ import {JSDOM} from 'jsdom';
 /**
  * The jest environment "jsdom" does not work when preact is combined with the report renderer.
  */
-export function setupJsDom() {
+function setupJsDom() {
   const {window} = new JSDOM(undefined, {
     url: 'file:///Users/example/report.html/',
   });

package/flow-report/test/summary/category-test.tsx

@@ -51,7 +51,7 @@ describe('SummaryTooltip', () => {
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('3 passable audits')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders tooltip without rating', async () => {
@@ -76,7 +76,7 @@ describe('SummaryTooltip', () => {
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('3 passable audits')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders scored category tooltip with score', async () => {
@@ -101,7 +101,7 @@ describe('SummaryTooltip', () => {
     expect(root.getByText('100')).toBeTruthy();
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('3 passable audits')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders informative audit count if any', async () => {
@@ -127,7 +127,7 @@ describe('SummaryTooltip', () => {
     expect(root.getByText('2 audits passed')).toBeTruthy();
     expect(root.getByText('2 passable audits')).toBeTruthy();
     expect(root.getByText('1 informative audit')).toBeTruthy();
-    expect(root.getByText('https://example.com'));
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders highest impact audits', async () => {
@@ -192,7 +192,7 @@ describe('SummaryTooltip', () => {
       auditRefs: [
         /* eslint-disable max-len */
         {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 1'}, weight: 1, group: 'diagnostics'},
-        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 1},
+        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 1, group: 'hidden'},
         {result: {score: null, scoreDisplayMode: 'informative', title: 'Audit 3'}, weight: 1, group: 'diagnostics'},
         /* eslint-enable max-len */
       ],

package/flow-report/test/util-test.tsx

@@ -9,7 +9,7 @@ import {renderHook} from '@testing-library/preact-hooks';
 import {FunctionComponent} from 'preact';
 import {act} from 'preact/test-utils';
 
-import {FlowResultContext, useCurrentLhr} from '../src/util';
+import {FlowResultContext, useHashState} from '../src/util';
 import {flowResult} from './sample-flow';
 
 let wrapper: FunctionComponent;
@@ -21,54 +21,75 @@ beforeEach(() => {
   );
 });
 
-describe('useCurrentLhr', () => {
+describe('useHashState', () => {
   it('gets current lhr index from url hash', () => {
     global.location.hash = '#index=1';
-    const {result} = renderHook(() => useCurrentLhr(), {wrapper});
+    const {result} = renderHook(() => useHashState(), {wrapper});
     expect(console.warn).not.toHaveBeenCalled();
     expect(result.current).toEqual({
       index: 1,
-      value: flowResult.steps[1].lhr,
+      currentLhr: flowResult.steps[1].lhr,
+      anchor: null,
+    });
+  });
+
+  it('gets anchor id from url hash', () => {
+    global.location.hash = '#index=1&anchor=seo';
+    const {result} = renderHook(() => useHashState(), {wrapper});
+    expect(console.warn).not.toHaveBeenCalled();
+    expect(result.current).toEqual({
+      index: 1,
+      currentLhr: flowResult.steps[1].lhr,
+      anchor: 'seo',
     });
   });
 
   it('changes on navigation', async () => {
     global.location.hash = '#index=1';
-    const render = renderHook(() => useCurrentLhr(), {wrapper});
+    const render = renderHook(() => useHashState(), {wrapper});
 
     expect(render.result.current).toEqual({
       index: 1,
-      value: flowResult.steps[1].lhr,
+      currentLhr: flowResult.steps[1].lhr,
+      anchor: null,
     });
 
     await act(() => {
-      global.location.hash = '#index=2';
+      global.location.hash = '#index=2&anchor=seo';
     });
     await render.waitForNextUpdate();
 
     expect(console.warn).not.toHaveBeenCalled();
     expect(render.result.current).toEqual({
       index: 2,
-      value: flowResult.steps[2].lhr,
+      currentLhr: flowResult.steps[2].lhr,
+      anchor: 'seo',
     });
   });
 
   it('return null if lhr index is unset', () => {
-    const {result} = renderHook(() => useCurrentLhr(), {wrapper});
+    const {result} = renderHook(() => useHashState(), {wrapper});
     expect(console.warn).not.toHaveBeenCalled();
     expect(result.current).toBeNull();
   });
 
   it('return null if lhr index is out of bounds', () => {
     global.location.hash = '#index=5';
-    const {result} = renderHook(() => useCurrentLhr(), {wrapper});
+    const {result} = renderHook(() => useHashState(), {wrapper});
     expect(console.warn).toHaveBeenCalled();
     expect(result.current).toBeNull();
   });
 
   it('returns null for invalid value', () => {
     global.location.hash = '#index=OHNO';
-    const {result} = renderHook(() => useCurrentLhr(), {wrapper});
+    const {result} = renderHook(() => useHashState(), {wrapper});
+    expect(console.warn).toHaveBeenCalled();
+    expect(result.current).toBeNull();
+  });
+
+  it('returns null for invalid value with valid anchor', () => {
+    global.location.hash = '#index=OHNO&anchor=seo';
+    const {result} = renderHook(() => useHashState(), {wrapper});
     expect(console.warn).toHaveBeenCalled();
     expect(result.current).toBeNull();
   });

package/lighthouse-cli/.eslintrc.cjs

@@ -23,5 +23,7 @@ module.exports = {
       ],
       'newlines-between': 'always',
     }],
+    'import/group-exports': 2,
+    'import/exports-last': 2,
   },
 };

package/lighthouse-cli/cli-flags.js

@@ -156,7 +156,7 @@ function getFlags(manualArgv, options = {}) {
         },
         'hostname': {
           type: 'string',
-          default: 'localhost',
+          default: '127.0.0.1',
           describe: 'The hostname to use for the debugging protocol.',
         },
         'form-factor': {

package/lighthouse-cli/test/smokehouse/lighthouse-runners/bundle.js

@@ -11,9 +11,12 @@
  * Currently uses `lighthouse-dt-bundle.js`.
  */
 
+import fs from 'fs';
+
 import ChromeLauncher from 'chrome-launcher';
 
 import ChromeProtocol from '../../../../lighthouse-core/gather/connections/cri.js';
+import {LH_ROOT} from '../../../../root.js';
 
 const originalRequire = global.require;
 if (typeof globalThis === 'undefined') {
@@ -22,8 +25,7 @@ if (typeof globalThis === 'undefined') {
 }
 
 // Load bundle, which creates a `global.runBundledLighthouse`.
-// @ts-ignore - file exists if `yarn build-all` is run, but not used for types anyways.
-import '../../../../dist/lighthouse-dt-bundle.js'; // eslint-disable-line
+eval(fs.readFileSync(LH_ROOT + '/dist/lighthouse-dt-bundle.js', 'utf-8'));
 
 global.require = originalRequire;
 

package/lighthouse-cli/test/smokehouse/smokehouse.js

@@ -215,7 +215,7 @@ function logChildProcessError(localConsole, err) {
     localConsole.adoptStdStrings(err);
   }
 
-  localConsole.log(log.redify('Error: ') + err.message);
+  localConsole.log(log.redify('Error: ') + err + '\n' + err.stack);
 }
 
 /**

package/lighthouse-core/audits/audit.js

@@ -7,7 +7,7 @@
 
 const {isUnderTest} = require('../lib/lh-env.js');
 const statistics = require('../lib/statistics.js');
-const Util = require('../util-commonjs.js');
+const {Util} = require('../util-commonjs.js');
 
 const DEFAULT_PASS = 'defaultPass';
 

package/lighthouse-core/computed/metrics/lantern-total-blocking-time.js

@@ -10,6 +10,7 @@ const LanternMetric = require('./lantern-metric.js');
 const BaseNode = require('../../lib/dependency-graph/base-node.js');
 const LanternFirstContentfulPaint = require('./lantern-first-contentful-paint.js');
 const LanternInteractive = require('./lantern-interactive.js');
+const {BLOCKING_TIME_THRESHOLD, calculateSumOfBlockingTime} = require('./tbt-utils.js');
 
 /** @typedef {BaseNode.Node} Node */
 
@@ -66,9 +67,7 @@ class LanternTotalBlockingTime extends LanternMetric {
       ? extras.interactiveResult.optimisticEstimate.timeInMs
       : extras.interactiveResult.pessimisticEstimate.timeInMs;
 
-    // Require here to resolve circular dependency.
-    const TotalBlockingTime = require('./total-blocking-time.js');
-    const minDurationMs = TotalBlockingTime.BLOCKING_TIME_THRESHOLD;
+    const minDurationMs = BLOCKING_TIME_THRESHOLD;
 
     const events = LanternTotalBlockingTime.getTopLevelEvents(
       simulation.nodeTimings,
@@ -76,7 +75,7 @@ class LanternTotalBlockingTime extends LanternMetric {
     );
 
     return {
-      timeInMs: TotalBlockingTime.calculateSumOfBlockingTime(
+      timeInMs: calculateSumOfBlockingTime(
         events,
         fcpTimeInMs,
         interactiveTimeMs

package/lighthouse-core/computed/metrics/tbt-utils.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright 2021 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 BLOCKING_TIME_THRESHOLD = 50;
+
+/**
+ * @param {Array<{start: number, end: number, duration: number}>} topLevelEvents
+ * @param {number} startTimeMs
+ * @param {number} endTimeMs
+ * @return {number}
+ */
+function calculateSumOfBlockingTime(topLevelEvents, startTimeMs, endTimeMs) {
+  if (endTimeMs <= startTimeMs) return 0;
+
+  const threshold = BLOCKING_TIME_THRESHOLD;
+  let sumBlockingTime = 0;
+  for (const event of topLevelEvents) {
+    // Early exit for small tasks, which should far outnumber long tasks.
+    if (event.duration < threshold) continue;
+
+    // We only want to consider tasks that fall in our time range (FCP and TTI for navigations).
+    // FCP is picked as the lower bound because there is little risk of user input happening
+    // before FCP so Long Queuing Qelay regions do not harm user experience. Developers should be
+    // optimizing to reach FCP as fast as possible without having to worry about task lengths.
+    if (event.end < startTimeMs) continue;
+
+    // TTI is picked as the upper bound because we want a well defined end point for page load.
+    if (event.start > endTimeMs) continue;
+
+    // We first perform the clipping, and then calculate Blocking Region. So if we have a 150ms
+    // task [0, 150] and FCP happens midway at 50ms, we first clip the task to [50, 150], and then
+    // calculate the Blocking Region to be [100, 150]. The rational here is that tasks before FCP
+    // are unimportant, so we care whether the main thread is busy more than 50ms at a time only
+    // after FCP.
+    const clippedStart = Math.max(event.start, startTimeMs);
+    const clippedEnd = Math.min(event.end, endTimeMs);
+    const clippedDuration = clippedEnd - clippedStart;
+    if (clippedDuration < threshold) continue;
+
+    // The duration of the task beyond 50ms at the beginning is considered the Blocking Region.
+    // Example:
+    //   [              250ms Task                   ]
+    //   | First 50ms |   Blocking Region (200ms)    |
+    sumBlockingTime += clippedDuration - threshold;
+  }
+
+  return sumBlockingTime;
+}
+
+module.exports = {
+  BLOCKING_TIME_THRESHOLD,
+  calculateSumOfBlockingTime,
+};

package/lighthouse-core/computed/metrics/total-blocking-time.js

@@ -10,6 +10,7 @@ const ComputedMetric = require('./metric.js');
 const TraceProcessor = require('../../lib/tracehouse/trace-processor.js');
 const LanternTotalBlockingTime = require('./lantern-total-blocking-time.js');
 const TimetoInteractive = require('./interactive.js');
+const {calculateSumOfBlockingTime} = require('./tbt-utils.js');
 
 /**
  * @fileoverview This audit determines Total Blocking Time.
@@ -25,57 +26,6 @@ const TimetoInteractive = require('./interactive.js');
  * to smaller improvements to main thread responsiveness.
  */
 class TotalBlockingTime extends ComputedMetric {
-  /**
-   * @return {number}
-   */
-  static get BLOCKING_TIME_THRESHOLD() {
-    return 50;
-  }
-
-  /**
-   * @param {Array<{start: number, end: number, duration: number}>} topLevelEvents
-   * @param {number} startTimeMs
-   * @param {number} endTimeMs
-   * @return {number}
-   */
-  static calculateSumOfBlockingTime(topLevelEvents, startTimeMs, endTimeMs) {
-    if (endTimeMs <= startTimeMs) return 0;
-
-    const threshold = TotalBlockingTime.BLOCKING_TIME_THRESHOLD;
-    let sumBlockingTime = 0;
-    for (const event of topLevelEvents) {
-      // Early exit for small tasks, which should far outnumber long tasks.
-      if (event.duration < threshold) continue;
-
-      // We only want to consider tasks that fall in our time range (FCP and TTI for navigations).
-      // FCP is picked as the lower bound because there is little risk of user input happening
-      // before FCP so Long Queuing Qelay regions do not harm user experience. Developers should be
-      // optimizing to reach FCP as fast as possible without having to worry about task lengths.
-      if (event.end < startTimeMs) continue;
-
-      // TTI is picked as the upper bound because we want a well defined end point for page load.
-      if (event.start > endTimeMs) continue;
-
-      // We first perform the clipping, and then calculate Blocking Region. So if we have a 150ms
-      // task [0, 150] and FCP happens midway at 50ms, we first clip the task to [50, 150], and then
-      // calculate the Blocking Region to be [100, 150]. The rational here is that tasks before FCP
-      // are unimportant, so we care whether the main thread is busy more than 50ms at a time only
-      // after FCP.
-      const clippedStart = Math.max(event.start, startTimeMs);
-      const clippedEnd = Math.min(event.end, endTimeMs);
-      const clippedDuration = clippedEnd - clippedStart;
-      if (clippedDuration < threshold) continue;
-
-      // The duration of the task beyond 50ms at the beginning is considered the Blocking Region.
-      // Example:
-      //   [              250ms Task                   ]
-      //   | First 50ms |   Blocking Region (200ms)    |
-      sumBlockingTime += clippedDuration - threshold;
-    }
-
-    return sumBlockingTime;
-  }
-
   /**
    * @param {LH.Artifacts.MetricComputationData} data
    * @param {LH.Artifacts.ComputedContext} context
@@ -100,7 +50,7 @@ class TotalBlockingTime extends ComputedMetric {
       const interactiveTimeMs = (await TimetoInteractive.request(metricData, context)).timing;
 
       return {
-        timing: TotalBlockingTime.calculateSumOfBlockingTime(
+        timing: calculateSumOfBlockingTime(
           events,
           firstContentfulPaint,
           interactiveTimeMs
@@ -108,7 +58,7 @@ class TotalBlockingTime extends ComputedMetric {
       };
     } else {
       return {
-        timing: TotalBlockingTime.calculateSumOfBlockingTime(
+        timing: calculateSumOfBlockingTime(
           events,
           0,
           data.processedTrace.timestamps.traceEnd

package/lighthouse-core/computed/resource-summary.js

@@ -10,7 +10,7 @@ const NetworkRecords = require('./network-records.js');
 const URL = require('../lib/url-shim.js');
 const NetworkRequest = require('../lib/network-request.js');
 const Budget = require('../config/budget.js');
-const Util = require('../util-commonjs.js');
+const {Util} = require('../util-commonjs.js');
 
 /** @typedef {{count: number, resourceSize: number, transferSize: number}} ResourceEntry */
 

package/lighthouse-core/config/config-helpers.js

@@ -203,6 +203,18 @@ function expandAuditShorthand(audit) {
   }
 }
 
+/** @type {Map<string, any>} */
+const bundledModules = new Map(/* BUILD_REPLACE_BUNDLED_MODULES */);
+
+/**
+ * Wraps `require` with an entrypoint for bundled dynamic modules.
+ * See build-bundle.js
+ * @param {string} requirePath
+ */
+function requireWrapper(requirePath) {
+  return bundledModules.get(requirePath) || require(requirePath);
+}
+
 /**
  * @param {string} gathererPath
  * @param {Array<string>} coreGathererList
@@ -218,7 +230,7 @@ function requireGatherer(gathererPath, coreGathererList, configDir) {
     requirePath = resolveModulePath(gathererPath, configDir, 'gatherer');
   }
 
-  const GathererClass = /** @type {GathererConstructor} */ (require(requirePath));
+  const GathererClass = /** @type {GathererConstructor} */ (requireWrapper(requirePath));
 
   return {
     instance: new GathererClass(),
@@ -228,14 +240,13 @@ function requireGatherer(gathererPath, coreGathererList, configDir) {
 }
 
 /**
- *
  * @param {string} auditPath
  * @param {Array<string>} coreAuditList
  * @param {string=} configDir
  * @return {LH.Config.AuditDefn['implementation']}
  */
 function requireAudit(auditPath, coreAuditList, configDir) {
-// See if the audit is a Lighthouse core audit.
+  // See if the audit is a Lighthouse core audit.
   const auditPathJs = `${auditPath}.js`;
   const coreAudit = coreAuditList.find(a => a === auditPathJs);
   let requirePath = `../audits/${auditPath}`;
@@ -244,14 +255,14 @@ function requireAudit(auditPath, coreAuditList, configDir) {
       // This is for pubads bundling.
       requirePath = auditPath;
     } else {
-    // Otherwise, attempt to find it elsewhere. This throws if not found.
+      // Otherwise, attempt to find it elsewhere. This throws if not found.
       const absolutePath = resolveModulePath(auditPath, configDir, 'audit');
       // Use a relative path so bundler can easily expose it.
       requirePath = path.relative(__dirname, absolutePath);
     }
   }
 
-  return require(requirePath);
+  return requireWrapper(requirePath);
 }
 
 /**
@@ -313,7 +324,6 @@ function resolveSettings(settingsJson = {}, overrides = undefined) {
   return settingsWithFlags;
 }
 
-
 /**
  * @param {LH.Config.Json} configJSON
  * @param {string | undefined} configDir
@@ -332,7 +342,7 @@ function mergePlugins(configJSON, configDir, flags) {
     const pluginPath = isBundledEnvironment() ?
         pluginName :
         resolveModulePath(pluginName, configDir, 'plugin');
-    const rawPluginJson = require(pluginPath);
+    const rawPluginJson = requireWrapper(pluginPath);
     const pluginJson = ConfigPlugin.parsePlugin(rawPluginJson, pluginName);
 
     configJSON = mergeConfigFragment(configJSON, pluginJson);
@@ -569,12 +579,12 @@ function deepCloneConfigJson(json) {
 module.exports = {
   deepClone,
   deepCloneConfigJson,
-  mergeOptionsOfItems,
   mergeConfigFragment,
   mergeConfigFragmentArrayByKey,
+  mergeOptionsOfItems,
   mergePlugins,
-  resolveSettings,
-  resolveGathererToDefn,
   resolveAuditsToDefns,
+  resolveGathererToDefn,
   resolveModulePath,
+  resolveSettings,
 };