lighthouse 8.6.0-dev.20211028 → 8.6.0-dev.20211101

package/flow-report/src/app.tsx

@@ -5,25 +5,24 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useEffect, useRef, useState} from 'preact/hooks';
+import {useLayoutEffect, useRef, useState} from 'preact/hooks';
 
 import {ReportRendererProvider} from './wrappers/report-renderer';
 import {Sidebar} from './sidebar/sidebar';
 import {Summary} from './summary/summary';
-import {classNames, FlowResultContext, useCurrentLhr, useHashParam} from './util';
+import {classNames, FlowResultContext, useHashState} from './util';
 import {Report} from './wrappers/report';
 import {Topbar} from './topbar';
 import {Header} from './header';
 import {I18nProvider} from './i18n/i18n';
 
 const Content: FunctionComponent = () => {
-  const currentLhr = useCurrentLhr();
-  const anchor = useHashParam('anchor');
+  const hashState = useHashState();
   const ref = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (anchor) {
-      const el = document.getElementById(anchor);
+  useLayoutEffect(() => {
+    if (hashState && hashState.anchor) {
+      const el = document.getElementById(hashState.anchor);
       if (el) {
         el.scrollIntoView({behavior: 'smooth'});
         return;
@@ -32,15 +31,15 @@ const Content: FunctionComponent = () => {
 
     // Scroll to top no anchor is found.
     if (ref.current) ref.current.scrollTop = 0;
-  }, [anchor, currentLhr]);
+  }, [hashState]);
 
   return (
     <div ref={ref} className="Content">
       {
-        currentLhr ?
+        hashState ?
           <>
-            <Header currentLhr={currentLhr}/>
-            <Report currentLhr={currentLhr}/>
+            <Header hashState={hashState}/>
+            <Report hashState={hashState}/>
           </> :
           <Summary/>
       }

package/flow-report/src/common.tsx

@@ -76,7 +76,7 @@ export const FlowStepThumbnail: FunctionComponent<{
   width?: number,
   height?: number,
 }> = ({lhr, width, height}) => {
-  const screenshot = getFullPageScreenshot(lhr);
+  const fullPageScreenshot = getFullPageScreenshot(lhr);
   const frames = getFilmstripFrames(lhr);
 
   // Resize the image to fit the viewport aspect ratio.
@@ -92,16 +92,22 @@ export const FlowStepThumbnail: FunctionComponent<{
     return <></>;
   }
 
-  if (lhr.gatherMode === 'timespan' && frames && frames.length) {
-    return <FlowStepAnimatedThumbnail frames={frames} width={width} height={height} />;
+  let thumbnail;
+  if (frames && frames.length) {
+    thumbnail = frames[frames.length - 1].data;
+    if (lhr.gatherMode === 'timespan') {
+      return <FlowStepAnimatedThumbnail frames={frames} width={width} height={height} />;
+    }
+  } else {
+    thumbnail = fullPageScreenshot?.screenshot.data;
   }
 
   return <>
     {
-      screenshot &&
+      thumbnail &&
         <img
           className="FlowStepThumbnail"
-          src={screenshot.screenshot.data}
+          src={thumbnail}
           style={{width, height}}
           alt="Screenshot of a page tested by Lighthouse"
         />

package/flow-report/src/header.tsx

@@ -29,10 +29,10 @@ const HeaderThumbnail: FunctionComponent<{
   );
 };
 
-export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
-({currentLhr}) => {
+export const Header: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
+({hashState}) => {
   const flowResult = useFlowResult();
-  const {index} = currentLhr;
+  const {index} = hashState;
 
   const step = flowResult.steps[index];
   const prevStep = flowResult.steps[index - 1];

package/flow-report/src/sidebar/flow.tsx

@@ -7,7 +7,7 @@
 import {FunctionComponent} from 'preact';
 
 import {FlowSegment} from '../common';
-import {classNames, useCurrentLhr, useFlowResult} from '../util';
+import {classNames, useHashState, useFlowResult} from '../util';
 import {Separator} from '../common';
 
 const SidebarFlowStep: FunctionComponent<{
@@ -41,7 +41,7 @@ const SidebarFlowSeparator: FunctionComponent = () => {
 
 export const SidebarFlow: FunctionComponent = () => {
   const flowResult = useFlowResult();
-  const currentLhr = useCurrentLhr();
+  const hashState = useHashState();
 
   return (
     <div className="SidebarFlow">
@@ -61,7 +61,7 @@ export const SidebarFlow: FunctionComponent = () => {
               mode={lhr.gatherMode}
               href={url.href}
               label={name}
-              isCurrent={index === (currentLhr && currentLhr.index)}
+              isCurrent={index === (hashState && hashState.index)}
             />
           </>;
         })

package/flow-report/src/sidebar/sidebar.tsx

@@ -9,11 +9,11 @@ import {FunctionComponent} from 'preact';
 import {Separator} from '../common';
 import {useI18n, useLocalizedStrings} from '../i18n/i18n';
 import {CpuIcon, EnvIcon, SummaryIcon} from '../icons';
-import {classNames, useCurrentLhr, useFlowResult} from '../util';
+import {classNames, useHashState, useFlowResult} from '../util';
 import {SidebarFlow} from './flow';
 
 export const SidebarSummary: FunctionComponent = () => {
-  const currentLhr = useCurrentLhr();
+  const hashState = useHashState();
   const strings = useLocalizedStrings();
 
   const url = new URL(location.href);
@@ -21,7 +21,7 @@ export const SidebarSummary: FunctionComponent = () => {
   return (
     <a
       href={url.href}
-      className={classNames('SidebarSummary', {'Sidebar--current': currentLhr === null})}
+      className={classNames('SidebarSummary', {'Sidebar--current': hashState === null})}
       data-testid="SidebarSummary"
     >
       <div className="SidebarSummary__icon">

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

@@ -64,8 +64,8 @@ const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Categor
     return audit.result.score !== null &&
       // Metrics should not be displayed in this group.
       audit.group !== 'metrics' &&
-      // Audits in performance without a group are hidden.
-      (audit.group !== undefined || category.id !== 'performance') &&
+      // Audits in performance group "hidden" should not be counted.
+      (audit.group !== 'hidden' || category.id !== 'performance') &&
       // We don't want unweighted audits except for opportunities with potential savings.
       (audit.weight > 0 || getOverallSavings(audit) > 0) &&
       // Passing audits should never be high impact.

package/flow-report/src/util.ts

@@ -79,27 +79,27 @@ export function useFlowResult(): LH.FlowResult {
   return flowResult;
 }
 
-export function useHashParam(param: string) {
-  const [paramValue, setParamValue] = useState(getHashParam(param));
+export function useHashParams(...params: string[]) {
+  const [paramValues, setParamValues] = useState(params.map(getHashParam));
 
   // Use two-way-binding on the URL hash.
-  // Triggers a re-render if the param changes.
+  // Triggers a re-render if any param changes.
   useEffect(() => {
     function hashListener() {
-      const newIndexString = getHashParam(param);
-      if (newIndexString === paramValue) return;
-      setParamValue(newIndexString);
+      const newParamValues = params.map(getHashParam);
+      if (newParamValues.every((value, i) => value === paramValues[i])) return;
+      setParamValues(newParamValues);
     }
     window.addEventListener('hashchange', hashListener);
     return () => window.removeEventListener('hashchange', hashListener);
-  }, [paramValue]);
+  }, [paramValues]);
 
-  return paramValue;
+  return paramValues;
 }
 
-export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
+export function useHashState(): LH.FlowResult.HashState|null {
   const flowResult = useFlowResult();
-  const indexString = useHashParam('index');
+  const [indexString, anchor] = useHashParams('index', 'anchor');
 
   // Memoize result so a new object is not created on every call.
   return useMemo(() => {
@@ -117,6 +117,6 @@ export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
       return null;
     }
 
-    return {value: step.lhr, index};
-  }, [indexString, flowResult]);
+    return {currentLhr: step.lhr, index, anchor};
+  }, [indexString, flowResult, anchor]);
 }

package/flow-report/src/wrappers/report.tsx

@@ -30,20 +30,25 @@ export function convertChildAnchors(element: HTMLElement, index: number) {
 
     const nodeId = link.hash.substr(1);
     link.hash = `#index=${index}&anchor=${nodeId}`;
+    link.onclick = e => {
+      e.preventDefault();
+      const el = document.getElementById(nodeId);
+      if (el) el.scrollIntoView();
+    };
   }
 }
 
-export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
-({currentLhr}) => {
+export const Report: FunctionComponent<{hashState: LH.FlowResult.HashState}> =
+({hashState}) => {
   const {dom, reportRenderer} = useReportRenderer();
   const ref = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
     if (ref.current) {
       dom.clearComponentCache();
-      reportRenderer.renderReport(currentLhr.value, ref.current);
-      convertChildAnchors(ref.current, currentLhr.index);
-      const fullPageScreenshot = getFullPageScreenshot(currentLhr.value);
+      reportRenderer.renderReport(hashState.currentLhr, ref.current);
+      convertChildAnchors(ref.current, hashState.index);
+      const fullPageScreenshot = getFullPageScreenshot(hashState.currentLhr);
       if (fullPageScreenshot) {
         const container = dom.find('.lh-container', ref.current);
         ElementScreenshotRenderer.installOverlayFeature({
@@ -60,7 +65,7 @@ export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
     return () => {
       if (ref.current) ref.current.textContent = '';
     };
-  }, [reportRenderer, currentLhr]);
+  }, [reportRenderer, hashState]);
 
   return (
     <div ref={ref} className="lh-root" data-testid="Report"/>

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/flow-report-pptr-test.ts

@@ -0,0 +1,46 @@
+/**
+ * @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 {jest} from '@jest/globals';
+import puppeteer, {Browser, Page} from 'puppeteer';
+
+import ReportGenerator from '../../report/generator/report-generator.js';
+import {flowResult} from './sample-flow';
+
+jest.setTimeout(35_000);
+
+describe('Lighthouse Flow Report', () => {
+  console.log('\n✨ Be sure to have recently run this: yarn build-report');
+
+  let browser: Browser;
+  let page: Page;
+  const pageErrors: Error[] = [];
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: true,
+    });
+    page = await browser.newPage();
+    page.on('pageerror', pageError => pageErrors.push(pageError));
+  });
+
+  afterAll(async () => {
+    if (pageErrors.length > 0) console.error(pageErrors);
+
+    await browser.close();
+  });
+
+  describe('Renders the flow report', () => {
+    beforeAll(async () => {
+      const html = ReportGenerator.generateFlowReportHtml(flowResult);
+      await page.setContent(html);
+    });
+
+    it('should load with no errors', async () => {
+      expect(pageErrors).toHaveLength(0);
+    });
+  });
+});

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/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/jest.config.js

@@ -20,6 +20,7 @@ module.exports = {
     '**/shared/**/*-test.js',
     '**/build/**/*-test.js',
   ],
+  modulePathIgnorePatterns: ['<rootDir>/.tmp'],
   transform: {},
   prettierPath: null,
   projects: [

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/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

@@ -89,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 &&

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, node: LH.Audit.Details.NodeValue, 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,9 +146,8 @@ function getResult(image, DPR) {
   const [expectedWidth, expectedHeight] =
       expectedImageSize(image.displayedWidth, image.displayedHeight, DPR);
   return {
-    url: image.src,
+    url: URL.elideDataURI(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}`,
     actualPixels: image.naturalDimensions.width * image.naturalDimensions.height,
@@ -265,7 +264,7 @@ class ImageSizeResponsive extends Audit {
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       {key: 'node', itemType: 'node', text: ''},
-      {key: 'elidedUrl', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {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/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;