lighthouse 8.6.0-dev.20211027 → 8.6.0-dev.20211028

package/flow-report/src/common.tsx

@@ -8,7 +8,7 @@ import {FunctionComponent} from 'preact';
 import {useEffect, useState} from 'preact/hooks';
 
 import {NavigationIcon, SnapshotIcon, TimespanIcon} from './icons';
-import {getFilmstripFrames, getScreenDimensions, getScreenshot} from './util';
+import {getFilmstripFrames, getScreenDimensions, getFullPageScreenshot} from './util';
 
 const ANIMATION_FRAME_DURATION_MS = 500;
 
@@ -72,15 +72,15 @@ const FlowStepAnimatedThumbnail: FunctionComponent<{
 };
 
 export const FlowStepThumbnail: FunctionComponent<{
-  reportResult: LH.ReportResult,
+  lhr: LH.Result,
   width?: number,
   height?: number,
-}> = ({reportResult, width, height}) => {
-  const screenshot = getScreenshot(reportResult);
-  const frames = getFilmstripFrames(reportResult);
+}> = ({lhr, width, height}) => {
+  const screenshot = getFullPageScreenshot(lhr);
+  const frames = getFilmstripFrames(lhr);
 
   // Resize the image to fit the viewport aspect ratio.
-  const dimensions = getScreenDimensions(reportResult);
+  const dimensions = getScreenDimensions(lhr);
   if (width && height === undefined) {
     height = dimensions.height * width / dimensions.width;
   } else if (height && width === undefined) {
@@ -92,7 +92,7 @@ export const FlowStepThumbnail: FunctionComponent<{
     return <></>;
   }
 
-  if (reportResult.gatherMode === 'timespan' && frames && frames.length) {
+  if (lhr.gatherMode === 'timespan' && frames && frames.length) {
     return <FlowStepAnimatedThumbnail frames={frames} width={width} height={height} />;
   }
 
@@ -101,7 +101,7 @@ export const FlowStepThumbnail: FunctionComponent<{
       screenshot &&
         <img
           className="FlowStepThumbnail"
-          src={screenshot}
+          src={screenshot.screenshot.data}
           style={{width, height}}
           alt="Screenshot of a page tested by Lighthouse"
         />

package/flow-report/src/header.tsx

@@ -6,7 +6,6 @@
 
 import {FunctionComponent} from 'preact';
 
-import {Util} from '../../report/renderer/util';
 import {FlowStepIcon, FlowStepThumbnail} from './common';
 import {useLocalizedStrings} from './i18n/i18n';
 import {getModeDescription, useFlowResult} from './util';
@@ -15,16 +14,16 @@ const SIDE_THUMBNAIL_HEIGHT = 80;
 const MAIN_THUMBNAIL_HEIGHT = 120;
 
 const HeaderThumbnail: FunctionComponent<{
-  reportResult: LH.ReportResult,
+  lhr: LH.Result,
   position: 'prev'|'next'|'main'
 }> =
-({reportResult, position}) => {
+({lhr, position}) => {
   const height = position === 'main' ? MAIN_THUMBNAIL_HEIGHT : SIDE_THUMBNAIL_HEIGHT;
   return (
     <div className={`HeaderThumbnail HeaderThumbnail--${position}`}>
-      <FlowStepThumbnail reportResult={reportResult} height={height}/>
+      <FlowStepThumbnail lhr={lhr} height={height}/>
       <div className="HeaderThumbnail__icon">
-        <FlowStepIcon mode={reportResult.gatherMode}/>
+        <FlowStepIcon mode={lhr.gatherMode}/>
       </div>
     </div>
   );
@@ -50,7 +49,7 @@ export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
             flowResult.steps[index - 2] && <div className="Header__segment"/>
           }
           <div className="Header__prev-thumbnail">
-            <HeaderThumbnail reportResult={Util.prepareReportResult(prevStep.lhr)} position="prev"/>
+            <HeaderThumbnail lhr={prevStep.lhr} position="prev"/>
             <div className="Header__segment"/>
           </div>
           <a
@@ -60,7 +59,7 @@ export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
         </>
       }
       <div className="Header__current-thumbnail">
-        <HeaderThumbnail reportResult={Util.prepareReportResult(step.lhr)} position="main"/>
+        <HeaderThumbnail lhr={step.lhr} position="main"/>
       </div>
       <div className="Header__current-title">
         {step.name}
@@ -72,7 +71,7 @@ export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
         nextStep && <>
           <div className="Header__next-thumbnail">
             <div className="Header__segment"/>
-            <HeaderThumbnail reportResult={Util.prepareReportResult(nextStep.lhr)} position="next"/>
+            <HeaderThumbnail lhr={nextStep.lhr} position="next"/>
           </div>
           <a
             className="Header__next-title"

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

@@ -63,7 +63,7 @@ export const SummaryFlowStep: FunctionComponent<{
             <Separator/>
           </div>
       }
-      <FlowStepThumbnail reportResult={reportResult} width={THUMBNAIL_WIDTH}/>
+      <FlowStepThumbnail lhr={lhr} width={THUMBNAIL_WIDTH}/>
       <FlowSegment mode={lhr.gatherMode}/>
       <div className="SummaryFlowStep__label">
         <div className="SummaryFlowStep__mode">{modeDescription}</div>

package/flow-report/src/util.ts

@@ -35,24 +35,24 @@ export function classNames(...args: Array<string|undefined|Record<string, boolea
   return classes.join(' ');
 }
 
-export function getScreenDimensions(reportResult: LH.ReportResult) {
+export function getScreenDimensions(reportResult: LH.Result) {
   const {width, height} = reportResult.configSettings.screenEmulation;
   return {width, height};
 }
 
-export function getScreenshot(reportResult: LH.ReportResult) {
+export 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
+  reportResult: LH.Result
 ): Array<{data: string}> | undefined {
   const filmstripAudit = reportResult.audits['screenshot-thumbnails'];
   if (!filmstripAudit) return undefined;

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';
 
 /**
@@ -41,6 +43,16 @@ export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
       dom.clearComponentCache();
       reportRenderer.renderReport(currentLhr.value, ref.current);
       convertChildAnchors(ref.current, currentLhr.index);
+      const fullPageScreenshot = getFullPageScreenshot(currentLhr.value);
+      if (fullPageScreenshot) {
+        const container = dom.find('.lh-container', ref.current);
+        ElementScreenshotRenderer.installOverlayFeature({
+          dom,
+          reportEl: container,
+          overlayContainerEl: container,
+          fullPageScreenshot,
+        });
+      }
       const topbar = ref.current.querySelector('.lh-topbar');
       if (topbar) topbar.remove();
     }

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();
 
@@ -33,7 +33,7 @@ describe('FlowStepThumbnail', () => {
   });
 
   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 +41,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,7 +56,7 @@ 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');
@@ -74,7 +74,7 @@ describe('FlowStepThumbnail', () => {
         ],
       },
     } 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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.6.0-dev.20211027",
+  "version": "8.6.0-dev.20211028",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -37,7 +37,7 @@
     "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=\"**/viewer/**/*-test-pptr.js\"",
     "test-treemap": "yarn unit-treemap && yarn jest --testMatch=\"**/treemap/**/*-test-pptr.js\"",
@@ -129,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/shared/localization/format.js

@@ -17,18 +17,14 @@ const DEFAULT_LOCALE = 'en-US';
 
 /**
  * The locale tags for the localized messages available to Lighthouse on disk.
- * When bundled, these will be inlined by brfs.
+ * When bundled, these will be inlined by `inline-fs`.
  * These locales are considered the "canonical" locales. We support other locales which
  * are simply aliases to one of these. ex: es-AR (alias) -> es-419 (canonical)
  */
-let CANONICAL_LOCALES = ['__availableLocales__'];
-// TODO: need brfs in gh-pages-app. For now, above is replaced, see build-i18n.module.js
-if (fs.readdirSync) {
-  CANONICAL_LOCALES = fs.readdirSync(__dirname + '/locales/')
-    .filter(basename => basename.endsWith('.json') && !basename.endsWith('.ctc.json'))
-    .map(locale => locale.replace('.json', ''))
-    .sort();
-}
+const CANONICAL_LOCALES = fs.readdirSync(__dirname + '/locales/')
+  .filter(basename => basename.endsWith('.json') && !basename.endsWith('.ctc.json'))
+  .map(locale => locale.replace('.json', ''))
+  .sort();
 
 /** @typedef {import('intl-messageformat-parser').Element} MessageElement */
 /** @typedef {import('intl-messageformat-parser').ArgumentElement} ArgumentElement */