lighthouse 8.6.0-dev.20211025 → 8.6.0-dev.20211029

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,13 +13,14 @@ module.exports = {
     '**/lighthouse-cli/**/*-test.js',
     '**/report/**/*-test.js',
     '**/lighthouse-core/test/fraggle-rock/**/*-test-pptr.js',
-    '**/lighthouse-treemap/**/*-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-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/errors-in-console.js

@@ -88,8 +88,6 @@ class ErrorLogs extends Audit {
         return {
           source: item.source,
           description: item.text,
-          // TODO: remove for v8 (url is covered in sourceLocation)
-          url: item.url,
           sourceLocation: Audit.makeSourceLocationFromConsoleMessage(item),
         };
       });

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
@@ -88,8 +89,7 @@ class ImageAspectRatio extends Audit {
       // - filter all svgs as they have no natural dimensions to audit
       // - filter out images that have falsy naturalWidth or naturalHeight
       return !image.isCss &&
-        image.mimeType &&
-        image.mimeType !== 'image/svg+xml' &&
+        URL.guessMimeType(image.src) !== 'image/svg+xml' &&
         image.naturalDimensions &&
         image.naturalDimensions.height > 5 &&
         image.naturalDimensions.width > 5 &&
@@ -105,7 +105,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, displayedSize: string, actualSize: string, actualPixels: number, expectedSize: string, expectedPixels: number}} Result */
 
 /**
  * @param {{top: number, bottom: number, left: number, right: number}} imageRect
@@ -95,7 +95,7 @@ function isCandidate(image) {
   ) {
     return false;
   }
-  if (image.mimeType === 'image/svg+xml') {
+  if (URL.guessMimeType(image.src) === 'image/svg+xml') {
     return false;
   }
   if (image.isCss) {
@@ -146,8 +146,8 @@ function getResult(image, DPR) {
   const [expectedWidth, expectedHeight] =
       expectedImageSize(image.displayedWidth, image.displayedHeight, DPR);
   return {
-    url: image.src,
-    elidedUrl: URL.elideDataURI(image.src),
+    url: URL.elideDataURI(image.src),
+    node: Audit.makeNodeItem(image.node),
     displayedSize: `${image.displayedWidth} x ${image.displayedHeight}`,
     actualSize: `${image.naturalDimensions.width} x ${image.naturalDimensions.height}`,
     actualPixels: image.naturalDimensions.width * image.naturalDimensions.height,
@@ -263,8 +263,8 @@ class ImageSizeResponsive extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'thumbnail', text: ''},
-      {key: 'elidedUrl', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'node', itemType: 'node', text: ''},
+      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
       {key: 'displayedSize', itemType: 'text', text: str_(UIStrings.columnDisplayed)},
       {key: 'actualSize', itemType: 'text', text: str_(UIStrings.columnActual)},
       {key: 'expectedSize', itemType: 'text', text: str_(UIStrings.columnExpected)},

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

@@ -106,7 +106,7 @@ class UnsizedImages extends Audit {
    * @return {boolean}
    */
   static isNonNetworkSvg(image) {
-    const isSvg = image.mimeType === 'image/svg+xml';
+    const isSvg = URL.guessMimeType(image.src) === 'image/svg+xml';
     const urlScheme = image.src.slice(0, image.src.indexOf(':'));
     const isNonNetwork = URL.isNonNetworkProtocol(urlScheme);
     return isSvg && isNonNetwork;
@@ -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/lighthouse-core/computed/image-records.js

@@ -5,6 +5,7 @@
  */
 'use strict';
 
+const URL = require('../lib/url-shim.js');
 const makeComputedArtifact = require('./computed-artifact.js');
 
 class ImageRecords {
@@ -28,12 +29,12 @@ class ImageRecords {
 
   /**
    * @param {{ImageElements: LH.Artifacts['ImageElements'], networkRecords: LH.Artifacts.NetworkRequest[]}} data
-   * @return {Promise<LH.Artifacts.ImageElement[]>}
+   * @return {Promise<LH.Artifacts.ImageElementRecord[]>}
    */
   static async compute_(data) {
     const indexedNetworkRecords = ImageRecords.indexNetworkRecords(data.networkRecords);
 
-    /** @type {LH.Artifacts.ImageElement[]} */
+    /** @type {LH.Artifacts.ImageElementRecord[]} */
     const imageRecords = [];
 
     for (const element of data.ImageElements) {
@@ -43,7 +44,7 @@ class ImageRecords {
       // Don't change the guessed mime type if no mime type was found.
       imageRecords.push({
         ...element,
-        mimeType: mimeType ? mimeType : element.mimeType,
+        mimeType: mimeType ? mimeType : URL.guessMimeType(element.src),
       });
     }
 

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

@@ -147,7 +147,6 @@ const defaultConfig = {
       'form-elements',
       'main-document-content',
       'global-listeners',
-      'dobetterweb/appcache',
       'dobetterweb/doctype',
       'dobetterweb/domstats',
       'dobetterweb/optimized-images',
@@ -301,7 +300,6 @@ const defaultConfig = {
     'byte-efficiency/efficient-animated-content',
     'byte-efficiency/duplicated-javascript',
     'byte-efficiency/legacy-javascript',
-    'dobetterweb/appcache-manifest',
     'dobetterweb/doctype',
     'dobetterweb/charset',
     'dobetterweb/dom-size',
@@ -565,7 +563,6 @@ const defaultConfig = {
         {id: 'charset', weight: 1, group: 'best-practices-browser-compat'},
         // General Group
         {id: 'no-unload-listeners', weight: 1, group: 'best-practices-general'},
-        {id: 'appcache-manifest', weight: 1, group: 'best-practices-general'},
         {id: 'js-libraries', weight: 0, group: 'best-practices-general'},
         {id: 'deprecations', weight: 1, group: 'best-practices-general'},
         {id: 'errors-in-console', weight: 1, group: 'best-practices-general'},