lighthouse 8.6.0-dev.20211024 → 8.6.0-dev.20211028

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,14 +34,16 @@ 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}
     );
 
@@ -46,6 +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'));
   });
 
   it('renders tooltip without rating', async () => {
@@ -53,14 +59,16 @@ 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}
     );
 
@@ -68,6 +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'));
   });
 
   it('renders scored category tooltip with score', async () => {
@@ -75,14 +84,16 @@ 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}
     );
 
@@ -90,6 +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'));
   });
 
   it('renders informative audit count if any', async () => {
@@ -97,14 +109,16 @@ 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}
     );
 
@@ -113,5 +127,83 @@ 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'));
+  });
+
+  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},
+        {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/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/jest.config.js

@@ -13,8 +13,8 @@ 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',

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)},

package/lighthouse-core/audits/byte-efficiency/offscreen-images.js

@@ -37,7 +37,7 @@ const IGNORE_THRESHOLD_IN_BYTES = 2048;
 const IGNORE_THRESHOLD_IN_PERCENT = 75;
 const IGNORE_THRESHOLD_IN_MS = 50;
 
-/** @typedef {{url: string, requestStartTime: number, totalBytes: number, wastedBytes: number, wastedPercent: number}} WasteResult */
+/** @typedef {{node: LH.Audit.Details.NodeValue, url: string, requestStartTime: number, totalBytes: number, wastedBytes: number, wastedPercent: number}} WasteResult */
 
 class OffscreenImages extends ByteEfficiencyAudit {
   /**
@@ -100,6 +100,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
     }
 
     return {
+      node: ByteEfficiencyAudit.makeNodeItem(image.node),
       url,
       requestStartTime: networkRecord.startTime,
       totalBytes,
@@ -184,26 +185,26 @@ class OffscreenImages extends ByteEfficiencyAudit {
 
     /** @type {string[]} */
     const warnings = [];
-    const resultsMap = images.reduce((results, image) => {
+    /** @type {Map<string, WasteResult>} */
+    const resultsMap = new Map();
+    for (const image of images) {
       const processed = OffscreenImages.computeWaste(image, viewportDimensions, networkRecords);
       if (processed === null) {
-        return results;
+        continue;
       }
 
       if (processed instanceof Error) {
         warnings.push(processed.message);
         Sentry.captureException(processed, {tags: {audit: this.meta.id}, level: 'warning'});
-        return results;
+        continue;
       }
 
       // If an image was used more than once, warn only about its least wasteful usage
-      const existing = results.get(processed.url);
+      const existing = resultsMap.get(processed.url);
       if (!existing || existing.wastedBytes > processed.wastedBytes) {
-        results.set(processed.url, processed);
+        resultsMap.set(processed.url, processed);
       }
-
-      return results;
-    }, /** @type {Map<string, WasteResult>} */ (new Map()));
+    }
 
     const settings = context.settings;
 
@@ -233,7 +234,7 @@ class OffscreenImages 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)},

package/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js

@@ -76,10 +76,12 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
     const imageElementsByURL = new Map();
     imageElements.forEach(img => imageElementsByURL.set(img.src, img));
 
-    /** @type {Array<{url: string, fromProtocol: boolean, isCrossOrigin: boolean, totalBytes: number, wastedBytes: number}>} */
+    /** @type {Array<{node?: LH.Audit.Details.NodeValue, url: string, fromProtocol: boolean, isCrossOrigin: boolean, totalBytes: number, wastedBytes: number}>} */
     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;
@@ -91,7 +93,6 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
       let fromProtocol = true;
 
       if (typeof jpegSize === 'undefined') {
-        const imageElement = imageElementsByURL.get(image.url);
         if (!imageElement) {
           warnings.push(`Unable to locate resource ${URL.getURLDisplayName(image.url)}`);
           continue;
@@ -115,6 +116,7 @@ class UsesOptimizedImages extends ByteEfficiencyAudit {
       const jpegSavings = UsesOptimizedImages.computeSavings({...image, jpegSize});
 
       items.push({
+        node: imageElement ? ByteEfficiencyAudit.makeNodeItem(imageElement.node) : undefined,
         url,
         fromProtocol,
         isCrossOrigin,
@@ -125,7 +127,7 @@ class UsesOptimizedImages 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)},

package/lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js

@@ -70,6 +70,7 @@ class UsesResponsiveImagesSnapshot extends Audit {
       if (actualPixels - usedPixels > IGNORE_THRESHOLD_IN_PIXELS) score = 0;
 
       items.push({
+        node: Audit.makeNodeItem(image.node),
         url: URL.elideDataURI(image.src),
         displayedDimensions: `${displayed.width}x${displayed.height}`,
         actualDimensions: `${actual.width}x${actual.height}`,
@@ -79,7 +80,7 @@ class UsesResponsiveImagesSnapshot extends Audit {
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       /* eslint-disable max-len */
-      {key: 'url', itemType: 'thumbnail', text: ''},
+      {key: 'node', itemType: 'node', text: ''},
       {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
       {key: 'displayedDimensions', itemType: 'text', text: str_(UIStrings.columnDisplayedDimensions)},
       {key: 'actualDimensions', itemType: 'text', text: str_(UIStrings.columnActualDimensions)},

package/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js

@@ -104,6 +104,7 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
     const wastedBytes = Math.round(totalBytes * wastedRatio);
 
     return {
+      node: ByteEfficiencyAudit.makeNodeItem(image.node),
       url,
       totalBytes,
       wastedBytes,
@@ -158,7 +159,7 @@ class UsesResponsiveImages 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)},

package/lighthouse-core/audits/image-aspect-ratio.js

@@ -51,7 +51,7 @@ class ImageAspectRatio extends Audit {
 
   /**
    * @param {WellDefinedImage} image
-   * @return {{url: string, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}}
+   * @return {{url: string, node: LH.Audit.Details.NodeValue, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}}
    */
   static computeAspectRatios(image) {
     const url = URL.elideDataURI(image.src);
@@ -63,6 +63,7 @@ class ImageAspectRatio extends Audit {
 
     return {
       url,
+      node: Audit.makeNodeItem(image.node),
       displayedAspectRatio: `${image.displayedWidth} x ${image.displayedHeight}
         (${displayedAspectRatio.toFixed(2)})`,
       actualAspectRatio: `${image.naturalDimensions.width} x ${image.naturalDimensions.height}
@@ -78,7 +79,7 @@ class ImageAspectRatio extends Audit {
   static audit(artifacts) {
     const images = artifacts.ImageElements;
 
-    /** @type {Array<{url: string, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}>} */
+    /** @type {Array<{url: string, node: LH.Audit.Details.NodeValue, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}>} */
     const results = [];
     images.filter(image => {
       // - filter out css background images since we don't have a reliable way to tell if it's a
@@ -105,7 +106,7 @@ class ImageAspectRatio extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'thumbnail', text: ''},
+      {key: 'node', itemType: 'node', text: ''},
       {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
       {key: 'displayedAspectRatio', itemType: 'text', text: str_(UIStrings.columnDisplayed)},
       {key: 'actualAspectRatio', itemType: 'text', text: str_(UIStrings.columnActual)},

package/lighthouse-core/audits/image-size-responsive.js

@@ -45,7 +45,7 @@ const LARGE_IMAGE_FACTOR = 0.75;
 // considered SMALL.
 const SMALL_IMAGE_THRESHOLD = 64;
 
-/** @typedef {{url: string, elidedUrl: string, displayedSize: string, actualSize: string, actualPixels: number, expectedSize: string, expectedPixels: number}} Result */
+/** @typedef {{url: string, node: LH.Audit.Details.NodeValue, elidedUrl: string, displayedSize: string, actualSize: string, actualPixels: number, expectedSize: string, expectedPixels: number}} Result */
 
 /**
  * @param {{top: number, bottom: number, left: number, right: number}} imageRect
@@ -147,6 +147,7 @@ function getResult(image, DPR) {
       expectedImageSize(image.displayedWidth, image.displayedHeight, DPR);
   return {
     url: image.src,
+    node: Audit.makeNodeItem(image.node),
     elidedUrl: URL.elideDataURI(image.src),
     displayedSize: `${image.displayedWidth} x ${image.displayedHeight}`,
     actualSize: `${image.naturalDimensions.width} x ${image.naturalDimensions.height}`,
@@ -263,7 +264,7 @@ class ImageSizeResponsive extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'thumbnail', text: ''},
+      {key: 'node', itemType: 'node', text: ''},
       {key: 'elidedUrl', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
       {key: 'displayedSize', itemType: 'text', text: str_(UIStrings.columnDisplayed)},
       {key: 'actualSize', itemType: 'text', text: str_(UIStrings.columnActual)},

package/lighthouse-core/audits/preload-lcp-image.js

@@ -106,13 +106,14 @@ class PreloadLCPImageAudit extends Audit {
 
   /**
    * Computes the estimated effect of preloading the LCP image.
+   * @param {LH.Artifacts.TraceElement|undefined} lcpElement
    * @param {LH.Gatherer.Simulation.GraphNetworkNode|undefined} lcpNode
    * @param {LH.Gatherer.Simulation.GraphNode} graph
    * @param {LH.Gatherer.Simulation.Simulator} simulator
-   * @return {{wastedMs: number, results: Array<{url: string, wastedMs: number}>}}
+   * @return {{wastedMs: number, results: Array<{node: LH.Audit.Details.NodeValue, url: string, wastedMs: number}>}}
    */
-  static computeWasteWithGraph(lcpNode, graph, simulator) {
-    if (!lcpNode) {
+  static computeWasteWithGraph(lcpElement, lcpNode, graph, simulator) {
+    if (!lcpElement || !lcpNode) {
       return {
         wastedMs: 0,
         results: [],
@@ -185,6 +186,7 @@ class PreloadLCPImageAudit extends Audit {
     return {
       wastedMs,
       results: [{
+        node: Audit.makeNodeItem(lcpElement.node),
         url: lcpNode.record.url,
         wastedMs,
       }],
@@ -216,11 +218,11 @@ class PreloadLCPImageAudit extends Audit {
     const lcpNode = PreloadLCPImageAudit.getLCPNodeToPreload(mainResource, graph, lcpElement, artifacts.ImageElements);
 
     const {results, wastedMs} =
-      PreloadLCPImageAudit.computeWasteWithGraph(lcpNode, graph, simulator);
+      PreloadLCPImageAudit.computeWasteWithGraph(lcpElement, lcpNode, graph, simulator);
 
     /** @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: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
     ];

package/lighthouse-core/audits/script-treemap-data.js

@@ -8,7 +8,7 @@
 /**
  * @fileoverview
  * Creates nodes for treemap app.
- * Example output: lighthouse-treemap/app/debug.json
+ * Example output: treemap/app/debug.json
  */
 
 /**

package/lighthouse-core/audits/unsized-images.js

@@ -147,9 +147,8 @@ class UnsizedImages extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'thumbnail', text: ''},
+      {key: 'node', itemType: 'node', text: ''},
       {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'node', itemType: 'node', text: str_(i18n.UIStrings.columnFailingElem)},
     ];
 
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.6.0-dev.20211024",
+  "version": "8.6.0-dev.20211028",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -12,6 +12,7 @@
     "node": ">=14.15"
   },
   "scripts": {
+    "prepack": "yarn build-report --standalone --flow",
     "build-all": "npm-run-posix-or-windows build-all:task",
     "build-all:task": "yarn build-report && yarn build-cdt-lib && yarn build-devtools && (yarn build-extension & yarn build-lr & yarn build-viewer & yarn build-treemap & yarn build-smokehouse-bundle & wait) && yarn build-pack",
     "build-all:task:windows": "yarn build-report && yarn build-cdt-lib && yarn build-extension && yarn build-devtools && yarn build-lr && yarn build-viewer && yarn build-treemap && yarn build-smokehouse-bundle",
@@ -36,10 +37,10 @@
     "start": "yarn build-report --standalone && node ./lighthouse-cli/index.js",
     "jest": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js",
     "test": "yarn diff:sample-json && yarn lint --quiet && yarn unit && yarn type-check",
-    "test-bundle": "yarn smoke --runner bundle -j=1 --retries=2 --invert-match forms",
+    "test-bundle": "yarn smoke --runner bundle -j=1 --retries=2 a11y dbw",
     "test-clients": "yarn jest \"$PWD/clients/\" && yarn jest --testMatch=\"**/clients/test/**/*-test-pptr.js\"",
-    "test-viewer": "yarn unit-viewer && yarn jest --testMatch=\"**/lighthouse-viewer/**/*-test-pptr.js\"",
-    "test-treemap": "yarn unit-treemap && yarn jest --testMatch=\"**/lighthouse-treemap/**/*-test-pptr.js\"",
+    "test-viewer": "yarn unit-viewer && yarn jest --testMatch=\"**/viewer/**/*-test-pptr.js\"",
+    "test-treemap": "yarn unit-treemap && yarn jest --testMatch=\"**/treemap/**/*-test-pptr.js\"",
     "test-lantern": "bash lighthouse-core/scripts/test-lantern.sh",
     "test-legacy-javascript": "bash lighthouse-core/scripts/test-legacy-javascript.sh",
     "test-docs": "yarn --cwd docs/recipes/ test",
@@ -47,8 +48,8 @@
     "unit-core": "yarn jest \"lighthouse-core\"",
     "unit-cli": "yarn jest \"lighthouse-cli/\"",
     "unit-report": "yarn jest \"report/\"",
-    "unit-treemap": "yarn jest \"lighthouse-treemap/.*-test.js\"",
-    "unit-viewer": "yarn jest \"lighthouse-viewer/.*-test.js\"",
+    "unit-treemap": "yarn jest \"treemap/.*-test.js\"",
+    "unit-viewer": "yarn jest \"viewer/.*-test.js\"",
     "unit-flow": "yarn jest \"flow-report/.*-test.[tj]s[x]?\"",
     "unit": "yarn jest",
     "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run jest --ci .",
@@ -128,7 +129,6 @@
     "@types/yargs-parser": "^15.0.0",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
-    "@wardpeet/brfs": "2.1.0",
     "acorn": "^8.5.0",
     "angular": "^1.7.4",
     "archiver": "^3.0.0",

package/report/README.md

@@ -9,7 +9,7 @@ Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.3.html`](htt
 ### Report Renderer components
 
 1. [`report/generator/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/report/generator/report-generator.js) is the entry point for generating the HTML from Node. It compiles together the HTML string with everything required within it.
-   - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `brfs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
+   - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `inline-fs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
 1. [`report/renderer`](https://github.com/GoogleChrome/lighthouse/tree/master/report/renderer) are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.
 1. [`report/assets/standalone-template.html`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/report-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities.
 

package/report/generator/README.md

@@ -4,6 +4,6 @@
 
 Lighthouse's report generator is the entry point for creating reports from an **LHR** (Lighthouse Result object). It returns results as HTML, JSON, and CSV.
 
-It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `brfs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
+It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `inline-fs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
 
 Because it's shared between core and the report, dependencies (both code and types) should be kept minimal.

package/report/renderer/category-renderer.js

@@ -532,6 +532,13 @@ export class CategoryRenderer {
       clumps.set(clumpId, clump);
     }
 
+    // Sort audits by weight.
+    for (const auditRefs of clumps.values()) {
+      auditRefs.sort((a, b) => {
+        return b.weight - a.weight;
+      });
+    }
+
     // Render each clump.
     for (const [clumpId, auditRefs] of clumps) {
       if (auditRefs.length === 0) continue;