lighthouse 8.6.0 → 9.0.0

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

@@ -11,6 +11,7 @@ import {SummaryTooltip} from '../../src/summary/category';
 import {flowResult} from '../sample-flow';
 import {I18nProvider} from '../../src/i18n/i18n';
 import {FlowResultContext} from '../../src/util';
+import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
 
 let wrapper: FunctionComponent;
 
@@ -18,9 +19,11 @@ beforeEach(() => {
   // Include sample flowResult for locale in I18nProvider.
   wrapper = ({children}) => (
     <FlowResultContext.Provider value={flowResult}>
-      <I18nProvider>
-        {children}
-      </I18nProvider>
+      <ReportRendererProvider>
+        <I18nProvider>
+          {children}
+        </I18nProvider>
+      </ReportRendererProvider>
     </FlowResultContext.Provider>
   );
 });
@@ -31,20 +34,24 @@ describe('SummaryTooltip', () => {
       id: 'performance',
       score: 1,
       auditRefs: [
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
-        {result: {score: 0, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
+        /* eslint-disable max-len */
+        {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 1'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 3'}, weight: 1, group: 'diagnostics'},
+        /* eslint-enable max-len */
       ],
     };
 
     const root = render(
-      <SummaryTooltip category={category} gatherMode="snapshot"/>,
+      <SummaryTooltip category={category} gatherMode="snapshot" url="https://example.com"/>,
       {wrapper}
     );
 
     expect(root.getByText('Average')).toBeTruthy();
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
-    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed')).toBeTruthy();
+    expect(root.getByText('3 passable audits')).toBeTruthy();
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders tooltip without rating', async () => {
@@ -52,20 +59,24 @@ describe('SummaryTooltip', () => {
       id: 'performance',
       score: 1,
       auditRefs: [
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 0, group: 'diagnostics'},
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 0, group: 'diagnostics'},
-        {result: {score: 0, scoreDisplayMode: 'binary'}, weight: 0, group: 'diagnostics'},
+        /* eslint-disable max-len */
+        {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 1'}, weight: 0, group: 'diagnostics'},
+        {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 0, group: 'diagnostics'},
+        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 3'}, weight: 0, group: 'diagnostics'},
+        /* eslint-enable max-len */
       ],
     };
 
     const root = render(
-      <SummaryTooltip category={category} gatherMode="snapshot"/>,
+      <SummaryTooltip category={category} gatherMode="snapshot" url="https://example.com"/>,
       {wrapper}
     );
 
     expect(() => root.getByText(/^(Average|Good|Poor)$/)).toThrow();
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
-    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed')).toBeTruthy();
+    expect(root.getByText('3 passable audits')).toBeTruthy();
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders scored category tooltip with score', async () => {
@@ -73,20 +84,24 @@ describe('SummaryTooltip', () => {
       id: 'performance',
       score: 1,
       auditRefs: [
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
-        {result: {score: 0, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
+        /* eslint-disable max-len */
+        {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 1'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 3'}, weight: 1, group: 'diagnostics'},
+        /* eslint-enable max-len */
       ],
     };
 
     const root = render(
-      <SummaryTooltip category={category} gatherMode="navigation"/>,
+      <SummaryTooltip category={category} gatherMode="navigation" url="https://example.com"/>,
       {wrapper}
     );
 
     expect(root.getByText('Good')).toBeTruthy();
     expect(root.getByText('100')).toBeTruthy();
-    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed')).toBeTruthy();
+    expect(root.getByText('3 passable audits')).toBeTruthy();
+    expect(root.getByText('https://example.com')).toBeTruthy();
   });
 
   it('renders informative audit count if any', async () => {
@@ -94,20 +109,101 @@ describe('SummaryTooltip', () => {
       id: 'performance',
       score: 1,
       auditRefs: [
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
-        {result: {score: 0, scoreDisplayMode: 'informative'}, weight: 1, group: 'diagnostics'},
+        /* eslint-disable max-len */
+        {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 1'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 1, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 1, group: 'diagnostics'},
+        {result: {score: null, scoreDisplayMode: 'informative', title: 'Audit 3'}, weight: 1, group: 'diagnostics'},
+        /* eslint-enable max-len */
       ],
     };
 
     const root = render(
-      <SummaryTooltip category={category} gatherMode="navigation"/>,
+      <SummaryTooltip category={category} gatherMode="navigation" url="https://example.com"/>,
       {wrapper}
     );
 
     expect(root.getByText('Good')).toBeTruthy();
     expect(root.getByText('100')).toBeTruthy();
-    expect(root.getByText('2 audits passed / 2 passable audits')).toBeTruthy();
-    expect(root.getByText('1 informative audits')).toBeTruthy();
+    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')).toBeTruthy();
+  });
+
+  it('renders highest impact audits', async () => {
+    const category: any = {
+      id: 'seo',
+      score: 1,
+      auditRefs: [
+        /* eslint-disable max-len */
+        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 1'}, weight: 1, group: 'group'},
+        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 2'}, weight: 2, group: 'group'},
+        {result: {score: 0, scoreDisplayMode: 'binary', title: 'Audit 3'}, weight: 3, group: 'group'},
+        /* eslint-enable max-len */
+      ],
+    };
+
+    const root = render(
+      <SummaryTooltip category={category} gatherMode="navigation" url="https://example.com"/>,
+      {wrapper}
+    );
+
+    const audits = root.getAllByText(/^Audit [0-9]$/);
+
+    expect(root.getByText('Highest impact')).toBeTruthy();
+    expect(audits.map(a => a.textContent)).toEqual([
+      'Audit 3',
+      'Audit 2',
+    ]);
+  });
+
+  it('renders highest impact audits in performance', async () => {
+    const category: any = {
+      id: 'performance',
+      score: 0.75,
+      auditRefs: [
+        /* eslint-disable max-len */
+        {result: {score: 0.75, scoreDisplayMode: 'numeric', title: 'Metric 1'}, weight: 1, group: 'metrics'},
+        {result: {score: 0, scoreDisplayMode: 'numeric', title: 'Audit 1', details: {type: 'opportunity', overallSavingsMs: 500}}, weight: 0, group: 'opportunities'},
+        {result: {score: 0, scoreDisplayMode: 'numeric', title: 'Audit 2', details: {type: 'opportunity', overallSavingsMs: 1000}}, weight: 0, group: 'opportunities'},
+        {result: {score: 0, scoreDisplayMode: 'numeric', title: 'Audit 3', details: {type: 'opportunity', overallSavingsMs: 100}}, weight: 0, group: 'opportunities'},
+        /* eslint-enable max-len */
+      ],
+    };
+
+    const root = render(
+      <SummaryTooltip category={category} gatherMode="navigation" url="https://example.com"/>,
+      {wrapper}
+    );
+
+    const audits = root.getAllByText(/^(Audit|Metric) [0-9]$/);
+
+    expect(root.getByText('Highest impact')).toBeTruthy();
+    expect(audits.map(a => a.textContent)).toEqual([
+      'Audit 2',
+      'Audit 1',
+    ]);
+  });
+
+  it('hides highest impact if nothing to show', async () => {
+    const category: any = {
+      id: 'performance',
+      score: 1,
+      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, group: 'hidden'},
+        {result: {score: null, scoreDisplayMode: 'informative', title: 'Audit 3'}, weight: 1, group: 'diagnostics'},
+        /* eslint-enable max-len */
+      ],
+    };
+
+    const root = render(
+      <SummaryTooltip category={category} gatherMode="navigation" url="https://example.com"/>,
+      {wrapper}
+    );
+
+    expect(() => root.getByText('Highest impact')).toThrow();
+    expect(() => root.getByText(/^Audit [0-9]$/)).toThrow();
   });
 });

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

@@ -34,7 +34,7 @@ describe('SummaryHeader', () => {
     const lhrCounts = root.getByText(/·/);
     expect(root.getByText('Summary')).toBeTruthy();
     expect(lhrCounts.textContent).toEqual(
-      '2 navigation reports · 1 timespan reports · 1 snapshot reports'
+      '2 navigation reports · 1 timespan report · 1 snapshot report'
     );
   });
 });

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

@@ -18,6 +18,7 @@ const flowResult = {
   steps: [{lhr: {
     fetchTime: '2021-09-14T22:24:22.462Z',
     configSettings: {locale: 'en-US'},
+    i18n: {rendererFormattedStrings: {}},
   }}],
 } as any;
 

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/flow-report/test/wrappers/category-score-test.tsx

@@ -0,0 +1,87 @@
+/**
+ * @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.
+ */
+
+import {FunctionComponent} from 'preact';
+import {render} from '@testing-library/preact';
+
+import {CategoryScore} from '../../src/wrappers/category-score';
+import {FlowResultContext} from '../../src/util';
+import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
+import {I18nProvider} from '../../src/i18n/i18n';
+import {flowResult} from '../sample-flow';
+
+let wrapper: FunctionComponent;
+
+beforeEach(() => {
+  wrapper = ({children}) => (
+    <FlowResultContext.Provider value={flowResult}>
+      <ReportRendererProvider>
+        <I18nProvider>
+          {children}
+        </I18nProvider>
+      </ReportRendererProvider>
+    </FlowResultContext.Provider>
+  );
+});
+
+describe('CategoryScore', () => {
+  it('renders score gauge', () => {
+    const category: any = {
+      id: 'seo',
+      score: 0.95,
+      auditRefs: [],
+    };
+    const root = render(
+      <CategoryScore category={category} href="#seo" gatherMode="navigation"/>,
+      {wrapper}
+    );
+
+    const link = root.getByRole('link') as HTMLAnchorElement;
+
+    expect(link.href).toEqual('file:///Users/example/report.html/#seo');
+    expect(root.getByText('95')).toBeTruthy();
+    expect(root.baseElement.querySelector('.lh-gauge__label')).toBeFalsy();
+  });
+
+  it('renders error gauge', () => {
+    const category: any = {
+      id: 'seo',
+      score: null,
+      auditRefs: [],
+    };
+    const root = render(
+      <CategoryScore category={category} href="#seo" gatherMode="navigation"/>,
+      {wrapper}
+    );
+
+    const link = root.getByRole('link') as HTMLAnchorElement;
+
+    expect(link.href).toEqual('file:///Users/example/report.html/#seo');
+    expect(root.getByText('?')).toBeTruthy();
+  });
+
+  it('renders category fraction', () => {
+    const category: any = {
+      id: 'seo',
+      auditRefs: [
+        {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
+        {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
+        {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}},
+        {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}},
+      ],
+    };
+    const root = render(
+      <CategoryScore category={category} href="#seo" gatherMode="timespan"/>,
+      {wrapper}
+    );
+
+    const link = root.getByRole('link') as HTMLAnchorElement;
+
+    expect(link.href).toEqual('file:///Users/example/report.html/#seo');
+    expect(root.getByText('2/4')).toBeTruthy();
+    expect(root.baseElement.querySelector('.lh-fraction__label')).toBeFalsy();
+  });
+});

package/flow-report/test/wrappers/markdown-test.tsx

@@ -0,0 +1,29 @@
+/**
+ * @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.
+ */
+
+import {render} from '@testing-library/preact';
+import {FunctionComponent} from 'preact';
+
+import {Markdown} from '../../src/wrappers/markdown';
+import {ReportRendererProvider} from '../../src/wrappers/report-renderer';
+
+let wrapper: FunctionComponent;
+
+beforeEach(() => {
+  wrapper = ({children}) => (
+    <ReportRendererProvider>
+      {children}
+    </ReportRendererProvider>
+  );
+});
+
+describe('Markdown', () => {
+  it('renders markdown text', () => {
+    const root = render(<Markdown text="Some `fancy` text"/>, {wrapper});
+    const text = root.getByText(/^Some.*text$/);
+    expect(text.innerHTML).toEqual('Some <code>fancy</code> text');
+  });
+});

package/flow-report/tsconfig.json

@@ -14,6 +14,7 @@
   "references": [
     {"path": "../types/lhr/"},
     {"path": "../report"},
+    {"path": "../shared"},
   ],
   "include": [
     "**/*.js",

package/jest.config.js

@@ -13,12 +13,14 @@ module.exports = {
     '**/lighthouse-cli/**/*-test.js',
     '**/report/**/*-test.js',
     '**/lighthouse-core/test/fraggle-rock/**/*-test-pptr.js',
-    '**/lighthouse-treemap/**/*-test.js',
-    '**/lighthouse-viewer/**/*-test.js',
+    '**/treemap/**/*-test.js',
+    '**/viewer/**/*-test.js',
     '**/third-party/**/*-test.js',
     '**/clients/test/**/*-test.js',
     '**/shared/**/*-test.js',
+    '**/build/**/*-test.js',
   ],
+  modulePathIgnorePatterns: ['<rootDir>/.tmp'],
   transform: {},
   prettierPath: null,
   projects: [

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/run.js

@@ -175,7 +175,7 @@ async function potentiallyKillChrome(launchedChrome) {
   /** @type {NodeJS.Timeout} */
   let timeout;
   const timeoutPromise = new Promise((_, reject) => {
-    timeout = setTimeout(() => reject(new Error('Timed out waiting to kill Chrome')), 5000);
+    timeout = setTimeout(reject, 5000, new Error('Timed out waiting to kill Chrome'));
   });
 
   return Promise.race([

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/lighthouse-runners/cli.js

@@ -39,7 +39,7 @@ async function runLighthouse(url, configJson, testRunnerOptions = {}) {
   const tmpPath = await fs.mkdtemp(`${tmpDir}/smokehouse-`);
   return internalRun(url, tmpPath, configJson, testRunnerOptions)
     // Wait for internalRun() before removing scratch directory.
-    .finally(() => !isDebug && fs.rmdir(tmpPath, {recursive: true}));
+    .finally(() => !isDebug && fs.rm(tmpPath, {recursive: true, force: true}));
 }
 
 /**

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/accessibility/axe-audit.js

@@ -79,12 +79,18 @@ class AxeAudit extends Audit {
           ...Audit.makeNodeItem(axeNode.node),
           explanation: axeNode.failureSummary,
         },
+        subItems: axeNode.relatedNodes.length ? {
+          type: 'subitems',
+          items: axeNode.relatedNodes.map(node => ({relatedNode: Audit.makeNodeItem(node)})),
+        } : undefined,
       }));
     }
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'node', itemType: 'node', text: str_(UIStrings.failingElementsHeader)},
+      /* eslint-disable max-len */
+      {key: 'node', itemType: 'node', subItemsHeading: {key: 'relatedNode', itemType: 'node'}, text: str_(UIStrings.failingElementsHeader)},
+      /* eslint-enable max-len */
     ];
 
     /** @type {LH.Audit.Details.DebugData|undefined} */

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/audits/byte-efficiency/byte-efficiency-audit.js

@@ -206,6 +206,8 @@ class UnusedBytes extends Audit {
    */
   static computeWastedMsWithThroughput(wastedBytes, simulator) {
     const bitsPerSecond = simulator.getOptions().throughput;
+    // https://github.com/GoogleChrome/lighthouse/pull/13323#issuecomment-962031709
+    if (bitsPerSecond === 0) return 0;
     const wastedBits = wastedBytes * 8;
     const wastedMs = wastedBits / bitsPerSecond * 1000;
     return wastedMs;

package/lighthouse-core/audits/byte-efficiency/modern-image-formats.js

@@ -103,6 +103,8 @@ class ModernImageFormats extends ByteEfficiencyAudit {
     const items = [];
     const warnings = [];
     for (const image of images) {
+      const imageElement = imageElementsByURL.get(image.url);
+
       if (image.failed) {
         warnings.push(`Unable to decode ${URL.getURLDisplayName(image.url)}`);
         continue;
@@ -120,7 +122,6 @@ class ModernImageFormats extends ByteEfficiencyAudit {
       let fromProtocol = true;
 
       if (typeof webpSize === 'undefined') {
-        const imageElement = imageElementsByURL.get(image.url);
         if (!imageElement) {
           warnings.push(`Unable to locate resource ${URL.getURLDisplayName(image.url)}`);
           continue;
@@ -155,6 +156,7 @@ class ModernImageFormats extends ByteEfficiencyAudit {
       const isCrossOrigin = !URL.originsMatch(pageURL, image.url);
 
       items.push({
+        node: imageElement ? ByteEfficiencyAudit.makeNodeItem(imageElement.node) : undefined,
         url,
         fromProtocol,
         isCrossOrigin,
@@ -166,7 +168,7 @@ class ModernImageFormats extends ByteEfficiencyAudit {
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
-      {key: 'url', valueType: 'thumbnail', label: ''},
+      {key: 'node', valueType: 'node', label: ''},
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
       {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnResourceSize)},
       {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},