lighthouse 8.6.0 → 9.0.0

package/flow-report/src/topbar.tsx

@@ -9,8 +9,8 @@ import {useState} from 'preact/hooks';
 
 import {HelpDialog} from './help-dialog';
 import {getFilenamePrefix} from '../../report/generator/file-namer';
-import {useUIStrings} from './i18n/i18n';
-import {HamburgerIcon} from './icons';
+import {useLocalizedStrings} from './i18n/i18n';
+import {HamburgerIcon, InfoIcon} from './icons';
 import {useFlowResult} from './util';
 import {useReportRenderer} from './wrappers/report-renderer';
 
@@ -79,7 +79,7 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
 ({onMenuClick}) => {
   const flowResult = useFlowResult();
   const {dom} = useReportRenderer();
-  const strings = useUIStrings();
+  const strings = useLocalizedStrings();
   const [showHelpDialog, setShowHelpDialog] = useState(false);
 
   return (
@@ -98,8 +98,12 @@ export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLB
       <div style={{flexGrow: 1}} />
       <TopbarButton
         onClick={() => setShowHelpDialog(previous => !previous)}
-        label="Button that toggles the help dialog">
-        {strings.helpLabel}
+        label="Button that toggles the help dialog"
+      >
+        <div className="Topbar__help-label">
+          <InfoIcon/>
+          {strings.helpLabel}
+        </div>
       </TopbarButton>
       {showHelpDialog ?
         <HelpDialog onClose={() => setShowHelpDialog(false)} /> :

package/flow-report/src/util.ts

@@ -9,14 +9,14 @@ import {useContext, useEffect, useMemo, useState} from 'preact/hooks';
 
 import type {UIStringsType} from './i18n/ui-strings';
 
-export const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
+const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
 
 function getHashParam(param: string): string|null {
   const params = new URLSearchParams(location.hash.replace('#', '?'));
   return params.get(param);
 }
 
-export function classNames(...args: Array<string|undefined|Record<string, boolean>>): string {
+function classNames(...args: Array<string|undefined|Record<string, boolean>>): string {
   const classes = [];
   for (const arg of args) {
     if (!arg) continue;
@@ -35,24 +35,24 @@ export function classNames(...args: Array<string|undefined|Record<string, boolea
   return classes.join(' ');
 }
 
-export function getScreenDimensions(reportResult: LH.ReportResult) {
+function getScreenDimensions(reportResult: LH.Result) {
   const {width, height} = reportResult.configSettings.screenEmulation;
   return {width, height};
 }
 
-export function getScreenshot(reportResult: LH.ReportResult) {
+function getFullPageScreenshot(reportResult: LH.Result) {
   const fullPageScreenshotAudit = reportResult.audits['full-page-screenshot'];
   const fullPageScreenshot =
     fullPageScreenshotAudit &&
     fullPageScreenshotAudit.details &&
     fullPageScreenshotAudit.details.type === 'full-page-screenshot' &&
-    fullPageScreenshotAudit.details.screenshot.data;
+    fullPageScreenshotAudit.details;
 
   return fullPageScreenshot || null;
 }
 
-export function getFilmstripFrames(
-  reportResult: LH.ReportResult
+function getFilmstripFrames(
+  reportResult: LH.Result
 ): Array<{data: string}> | undefined {
   const filmstripAudit = reportResult.audits['screenshot-thumbnails'];
   if (!filmstripAudit) return undefined;
@@ -65,7 +65,7 @@ export function getFilmstripFrames(
   return frameItems || undefined;
 }
 
-export function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType) {
+function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType) {
   switch (mode) {
     case 'navigation': return strings.navigationDescription;
     case 'timespan': return strings.timespanDescription;
@@ -73,38 +73,33 @@ export function getModeDescription(mode: LH.Result.GatherMode, strings: UIString
   }
 }
 
-export function useFlowResult(): LH.FlowResult {
+function useFlowResult(): LH.FlowResult {
   const flowResult = useContext(FlowResultContext);
   if (!flowResult) throw Error('useFlowResult must be called in the FlowResultContext');
   return flowResult;
 }
 
-export function useLocale(): LH.Locale {
-  const flowResult = useFlowResult();
-  return flowResult.steps[0].lhr.configSettings.locale;
-}
-
-export function useHashParam(param: string) {
-  const [paramValue, setParamValue] = useState(getHashParam(param));
+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 {
+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(() => {
@@ -122,6 +117,18 @@ 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]);
 }
+
+export {
+  FlowResultContext,
+  classNames,
+  getScreenDimensions,
+  getFullPageScreenshot,
+  getFilmstripFrames,
+  getModeDescription,
+  useFlowResult,
+  useHashParams,
+  useHashState,
+};

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

@@ -23,9 +23,6 @@ export const CategoryScore: FunctionComponent<{
     // Category label is displayed in the navigation header.
     const label = el.querySelector('.lh-gauge__label,.lh-fraction__label');
     if (label) label.remove();
-    // Background is displayed in individual reports, but not on the summary page.
-    const bg = el.querySelector('.lh-fraction__background');
-    if (bg) bg.remove();
 
     if (ref.current) ref.current.append(el);
     return () => {

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

@@ -0,0 +1,27 @@
+/**
+ * @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 {useLayoutEffect, useRef} from 'preact/hooks';
+
+import {useReportRenderer} from '../wrappers/report-renderer';
+
+export const Markdown: FunctionComponent<{text: string}> = ({text}) => {
+  const {dom} = useReportRenderer();
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const md = dom.convertMarkdownCodeSnippets(text);
+      ref.current.appendChild(md);
+    }
+    return () => {
+      if (ref.current) ref.current.innerHTML = '';
+    };
+  }, [text]);
+
+  return <span ref={ref}/>;
+};

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

@@ -19,16 +19,17 @@ interface ReportRendererGlobals {
    reportRenderer: ReportRenderer,
 }
 
-export const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
+const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
 
-export function useReportRenderer() {
+function useReportRenderer() {
   const globals = useContext(ReportRendererContext);
   if (!globals) throw Error('Globals not defined');
   return globals;
 }
 
-export const ReportRendererProvider: FunctionComponent = ({children}) => {
+const ReportRendererProvider: FunctionComponent = ({children}) => {
   const globals = useMemo(() => {
+    // @ts-expect-error Still using legacy
     const dom = new DOM(document);
     const detailsRenderer = new DetailsRenderer(dom);
     const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
@@ -44,3 +45,9 @@ export const ReportRendererProvider: FunctionComponent = ({children}) => {
     <ReportRendererContext.Provider value={globals}>{children}</ReportRendererContext.Provider>
   );
 };
+
+export {
+  ReportRendererContext,
+  ReportRendererProvider,
+  useReportRenderer,
+};

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

@@ -7,6 +7,8 @@
 import {FunctionComponent} from 'preact';
 import {useLayoutEffect, useRef} from 'preact/hooks';
 
+import {ElementScreenshotRenderer} from '../../../report/renderer/element-screenshot-renderer';
+import {getFullPageScreenshot} from '../util';
 import {useReportRenderer} from './report-renderer';
 
 /**
@@ -14,7 +16,7 @@ import {useReportRenderer} from './report-renderer';
  * This function converts any anchor links under the provided element to a flow report link.
  * e.g. <a href="#link"> -> <a href="#index=0&anchor=link">
  */
-export function convertChildAnchors(element: HTMLElement, index: number) {
+function convertChildAnchors(element: HTMLElement, index: number) {
   const links = element.querySelectorAll('a[href]') as NodeListOf<HTMLAnchorElement>;
   for (const link of links) {
     // Check if the link destination is in the report.
@@ -28,19 +30,33 @@ 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}) => {
+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);
+      reportRenderer.renderReport(hashState.currentLhr, ref.current);
+      convertChildAnchors(ref.current, hashState.index);
+      const fullPageScreenshot = getFullPageScreenshot(hashState.currentLhr);
+      if (fullPageScreenshot) {
+        ElementScreenshotRenderer.installOverlayFeature({
+          dom,
+          rootEl: ref.current,
+          overlayContainerEl: ref.current,
+          fullPageScreenshot,
+        });
+      }
       const topbar = ref.current.querySelector('.lh-topbar');
       if (topbar) topbar.remove();
     }
@@ -48,9 +64,14 @@ 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"/>
   );
 };
+
+export {
+  convertChildAnchors,
+  Report,
+};

package/flow-report/standalone-flow.tsx

@@ -15,9 +15,10 @@ import {App} from './src/app';
 
 // Used by standalone-flow.html
 function __initLighthouseFlowReport__() {
-  const root = document.body.querySelector('main');
-  if (!root) throw Error('Root element not found');
-  render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, root);
+  // TODO(adamraine): add lh-vars, etc classes programmatically instead of in the HTML template
+  const container = document.body.querySelector('main');
+  if (!container) throw Error('Container element not found');
+  render(<App flowResult={window.__LIGHTHOUSE_FLOW_JSON__} />, container);
 }
 
 window.__initLighthouseFlowReport__ = __initLighthouseFlowReport__;

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

@@ -9,7 +9,7 @@ import {act, render} from '@testing-library/preact';
 
 import {FlowStepThumbnail} from '../src/common';
 
-let lhr: LH.ReportResult;
+let lhr: LH.Result;
 
 jest.useFakeTimers();
 
@@ -24,16 +24,25 @@ 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;
   });
 
   it('renders a thumbnail', () => {
-    const root = render(<FlowStepThumbnail reportResult={lhr} width={200} height={200} />);
+    const root = render(<FlowStepThumbnail lhr={lhr} width={200} height={200} />);
 
     const thumbnail = root.getByAltText(/Screenshot/);
     expect(thumbnail.style.width).toEqual('200px');
@@ -41,14 +50,14 @@ describe('FlowStepThumbnail', () => {
   });
 
   it('renders nothing without dimensions', () => {
-    const root = render(<FlowStepThumbnail reportResult={lhr} />);
+    const root = render(<FlowStepThumbnail lhr={lhr} />);
 
     expect(() => root.getByAltText(/Screenshot/)).toThrow();
     expect(global.console.warn).toHaveBeenCalled();
   });
 
   it('interpolates height', () => {
-    const root = render(<FlowStepThumbnail reportResult={lhr} width={200} />);
+    const root = render(<FlowStepThumbnail lhr={lhr} width={200} />);
 
     const thumbnail = root.getByAltText(/Screenshot/);
     expect(thumbnail.style.width).toEqual('200px');
@@ -56,25 +65,31 @@ describe('FlowStepThumbnail', () => {
   });
 
   it('interpolates width', () => {
-    const root = render(<FlowStepThumbnail reportResult={lhr} height={150} />);
+    const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
 
     const thumbnail = root.getByAltText(/Screenshot/);
     expect(thumbnail.style.width).toEqual('100px');
     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 reportResult={lhr} height={150} />);
+    const root = render(<FlowStepThumbnail lhr={lhr} height={150} />);
 
     const thumbnail = root.getByAltText(/Animated/) as HTMLImageElement;
     expect(thumbnail.style.width).toEqual('100px');
@@ -82,7 +97,7 @@ describe('FlowStepThumbnail', () => {
 
     expect(thumbnail.src).toContain('frame1');
     await act(() => {
-      jest.advanceTimersByTime(251);
+      jest.advanceTimersByTime(501);
     });
     expect(thumbnail.src).toContain('frame2');
   });

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/setup/env-setup.ts

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

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

@@ -8,7 +8,7 @@ import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
 
 import {I18nProvider} from '../../src/i18n/i18n';
-import {SidebarHeader, SidebarSummary} from '../../src/sidebar/sidebar';
+import {SidebarHeader, SidebarRuntimeSettings, SidebarSummary} from '../../src/sidebar/sidebar';
 import {FlowResultContext} from '../../src/util';
 import {flowResult} from '../sample-flow';
 
@@ -45,3 +45,45 @@ describe('SidebarSummary', () => {
     expect(link.classList).toContain('Sidebar--current');
   });
 });
+
+describe('SidebarRuntimeSettings', () => {
+  it('displays default runtime settings', async () => {
+    const settings = {
+      formFactor: 'mobile',
+      throttlingMethod: 'simulate',
+      throttling: {
+        cpuSlowdownMultiplier: 4,
+        requestLatencyMs: 150 * 3.75,
+        downloadThroughputKbps: 1.6 * 1024 * 0.9,
+        uploadThroughputKbps: 750 * 0.9,
+        throughputKbps: 1.6 * 1024,
+        rttMs: 150,
+      },
+    } as any;
+    const root = render(<SidebarRuntimeSettings settings={settings}/>, {wrapper});
+
+    expect(root.getByText('Emulated Moto G4')).toBeTruthy();
+    expect(root.getByText('Slow 4G throttling')).toBeTruthy();
+    expect(root.getByText('4x slowdown'));
+  });
+
+  it('displays custom runtime settings', async () => {
+    const settings = {
+      formFactor: 'desktop',
+      throttlingMethod: 'devtools',
+      throttling: {
+        cpuSlowdownMultiplier: 1,
+        requestLatencyMs: 1,
+        downloadThroughputKbps: 1,
+        uploadThroughputKbps: 1,
+        throughputKbps: 1,
+        rttMs: 1,
+      },
+    } as any;
+    const root = render(<SidebarRuntimeSettings settings={settings}/>, {wrapper});
+
+    expect(root.getByText('Emulated Desktop')).toBeTruthy();
+    expect(root.getByText('Custom throttling')).toBeTruthy();
+    expect(root.getByText('1x slowdown'));
+  });
+});