lighthouse 8.5.1-dev.20211012 → 8.5.1

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

@@ -9,47 +9,34 @@ import {FunctionComponent} from 'preact';
 import {Util} from '../../../report/renderer/util';
 import {Separator} from '../common';
 import {CategoryScore} from '../wrappers/category-score';
-import {useUIStrings} from '../i18n/i18n';
 
-import type {UIStringsType} from '../i18n/ui-strings';
-
-function getGatherModeLabel(gatherMode: LH.Result.GatherMode, strings: UIStringsType) {
-  switch (gatherMode) {
-    case 'navigation': return strings.navigationReport;
-    case 'timespan': return strings.timespanReport;
-    case 'snapshot': return strings.snapshotReport;
-  }
-}
+const GATHER_MODE_LABELS: Record<LH.Result.GatherMode, string> = {
+  'navigation': 'Navigation report',
+  'timespan': 'Timespan report',
+  'snapshot': 'Snapshot report',
+};
 
-function getCategoryRating(rating: string, strings: UIStringsType) {
-  switch (rating) {
-    case 'pass': return strings.ratingPass;
-    case 'average': return strings.ratingAverage;
-    case 'fail': return strings.ratingFail;
-    case 'error': return strings.ratingError;
-  }
-}
+const RATING_LABELS: Record<string, string> = {
+  'pass': 'Good',
+  'fail': 'Poor',
+  'average': 'Average',
+  'error': 'Error',
+};
 
 export const SummaryTooltip: FunctionComponent<{
   category: LH.ReportResult.Category,
   gatherMode: LH.Result.GatherMode
 }> = ({category, gatherMode}) => {
-  const strings = useUIStrings();
-  const {
-    numPassed,
-    numPassableAudits,
-    numInformative,
-    totalWeight,
-  } = Util.calculateCategoryFraction(category);
+  const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
 
   const displayAsFraction = Util.shouldDisplayAsFraction(gatherMode);
   const rating = displayAsFraction ?
-    Util.calculateRating(numPassed / numPassableAudits) :
+    Util.calculateRating(numPassed / numAudits) :
     Util.calculateRating(category.score);
 
   return (
     <div className="SummaryTooltip">
-      <div className="SummaryTooltip__title">{getGatherModeLabel(gatherMode, strings)}</div>
+      <div className="SummaryTooltip__title">{GATHER_MODE_LABELS[gatherMode]}</div>
       <Separator/>
       <div className="SummaryTooltip__category">
         <div className="SummaryTooltip__category-title">
@@ -57,8 +44,11 @@ export const SummaryTooltip: FunctionComponent<{
         </div>
         {
           totalWeight !== 0 &&
-            <div className={`SummaryTooltip__rating SummaryTooltip__rating--${rating}`}>
-              <span>{getCategoryRating(rating, strings)}</span>
+            <div
+              className={`SummaryTooltip__rating SummaryTooltip__rating--${rating}`}
+              data-testid="SummaryTooltip__rating"
+            >
+              <span>{RATING_LABELS[rating]}</span>
               {
                 !displayAsFraction && category.score && <>
                   <span> · </span>
@@ -69,19 +59,8 @@ export const SummaryTooltip: FunctionComponent<{
         }
       </div>
       <div className="SummaryTooltip__fraction">
-        {
-          // TODO(FLOW-I18N): Placeholder format.
-          `${numPassed} audits passed / ${numPassableAudits} passable audits`
-        }
+        {`${numPassed} audits passed / ${numAudits} audits run`}
       </div>
-      {
-        // TODO(FLOW-I18N): Placeholder format.
-        numInformative ?
-          <div className="SummaryTooltip__informative">
-            {`${numInformative} informative audits`}
-          </div> :
-          null
-      }
     </div>
   );
 };
@@ -103,7 +82,10 @@ export const SummaryCategory: FunctionComponent<{
             />
             <SummaryTooltip category={category} gatherMode={gatherMode}/>
           </div> :
-          <div className="SummaryCategory__null" data-testid="SummaryCategory__null"/>
+          <div
+            className="SummaryCategory__null"
+            data-testid="SummaryCategory__null"
+          />
       }
     </div>
   );

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

@@ -7,36 +7,28 @@
 import {FunctionComponent} from 'preact';
 import {useMemo} from 'preact/hooks';
 
-import {FlowSegment, FlowStepThumbnail, Separator} from '../common';
-import {getModeDescription, useFlowResult} from '../util';
+import {FlowSegment, Separator} from '../common';
+import {getScreenDimensions, getScreenshot, useFlowResult} from '../util';
 import {Util} from '../../../report/renderer/util';
 import {SummaryCategory} from './category';
-import {useUIStrings} from '../i18n/i18n';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
 const THUMBNAIL_WIDTH = 50;
+const MODE_DESCRIPTIONS: Record<LH.Result.GatherMode, string> = {
+  'navigation': 'Page load',
+  'timespan': 'User interactions',
+  'snapshot': 'Captured state of page',
+};
 
-const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) => {
-  const strings = useUIStrings();
-
+const SummaryNavigationHeader: FunctionComponent<{url: string}> = ({url}) => {
   return (
     <div className="SummaryNavigationHeader" data-testid="SummaryNavigationHeader">
       <FlowSegment/>
-      <div className="SummaryNavigationHeader__url">
-        <a rel="noopener" target="_blank" href={lhr.finalUrl}>{lhr.finalUrl}</a>
-      </div>
-      <div className="SummaryNavigationHeader__category">
-        {strings.categoryPerformance}
-      </div>
-      <div className="SummaryNavigationHeader__category">
-        {strings.categoryAccessibility}
-      </div>
-      <div className="SummaryNavigationHeader__category">
-        {strings.categoryBestPractices}
-      </div>
-      <div className="SummaryNavigationHeader__category">
-        {strings.categorySeo}
-      </div>
+      <div className="SummaryNavigationHeader__url">{url}</div>
+      <div className="SummaryNavigationHeader__category">Performance</div>
+      <div className="SummaryNavigationHeader__category">Accessibility</div>
+      <div className="SummaryNavigationHeader__category">Best Practices</div>
+      <div className="SummaryNavigationHeader__category">SEO</div>
     </div>
   );
 };
@@ -50,23 +42,32 @@ export const SummaryFlowStep: FunctionComponent<{
   hashIndex: number,
 }> = ({lhr, label, hashIndex}) => {
   const reportResult = useMemo(() => Util.prepareReportResult(lhr), [lhr]);
-  const strings = useUIStrings();
-  const modeDescription = getModeDescription(lhr.gatherMode, strings);
+
+  const screenshot = reportResult.gatherMode !== 'timespan' ? getScreenshot(reportResult) : null;
+
+  // Crop the displayed image to the viewport dimensions.
+  const {width, height} = getScreenDimensions(reportResult);
+  const thumbnailHeight = height * THUMBNAIL_WIDTH / width;
 
   return (
     <div className="SummaryFlowStep">
       {
         lhr.gatherMode === 'navigation' || hashIndex === 0 ?
-          <SummaryNavigationHeader lhr={lhr}/> :
+          <SummaryNavigationHeader url={lhr.finalUrl}/> :
           <div className="SummaryFlowStep__separator">
             <FlowSegment/>
             <Separator/>
           </div>
       }
-      <FlowStepThumbnail reportResult={reportResult} width={THUMBNAIL_WIDTH}/>
+      <img
+        className="SummaryFlowStep__screenshot"
+        data-testid="SummaryFlowStep__screenshot"
+        src={screenshot || undefined}
+        style={{width: THUMBNAIL_WIDTH, maxHeight: thumbnailHeight}}
+      />
       <FlowSegment mode={lhr.gatherMode}/>
       <div className="SummaryFlowStep__label">
-        <div className="SummaryFlowStep__mode">{modeDescription}</div>
+        <div className="SummaryFlowStep__mode">{MODE_DESCRIPTIONS[lhr.gatherMode]}</div>
         <a className="SummaryFlowStep__link" href={`#index=${hashIndex}`}>{label}</a>
       </div>
       {
@@ -107,7 +108,6 @@ const SummaryFlow: FunctionComponent = () => {
 
 export const SummaryHeader: FunctionComponent = () => {
   const flowResult = useFlowResult();
-  const strings = useUIStrings();
 
   let numNavigation = 0;
   let numTimespan = 0;
@@ -126,7 +126,6 @@ export const SummaryHeader: FunctionComponent = () => {
     }
   }
 
-  // TODO(FLOW-I18N): Placeholder format.
   const subtitleCounts = [];
   if (numNavigation) subtitleCounts.push(`${numNavigation} navigation reports`);
   if (numTimespan) subtitleCounts.push(`${numTimespan} timespan reports`);
@@ -135,7 +134,7 @@ export const SummaryHeader: FunctionComponent = () => {
 
   return (
     <div className="SummaryHeader">
-      <div className="SummaryHeader__title">{strings.summary}</div>
+      <div className="SummaryHeader__title">Summary</div>
       <div className="SummaryHeader__subtitle">{subtitle}</div>
     </div>
   );
@@ -151,13 +150,11 @@ const SummarySectionHeader: FunctionComponent = ({children}) => {
 };
 
 export const Summary: FunctionComponent = () => {
-  const strings = useUIStrings();
-
   return (
     <div className="Summary" data-testid="Summary">
       <SummaryHeader/>
       <Separator/>
-      <SummarySectionHeader>{strings.allReports}</SummarySectionHeader>
+      <SummarySectionHeader>ALL REPORTS</SummarySectionHeader>
       <SummaryFlow/>
     </div>
   );

package/flow-report/src/topbar.tsx

@@ -5,27 +5,8 @@
  */
 
 import {FunctionComponent, JSX} from 'preact';
-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 {useFlowResult} from './util';
-import {useReportRenderer} from './wrappers/report-renderer';
-
-import type {DOM} from '../../report/renderer/dom';
-
-function saveHtml(flowResult: LH.FlowResult, dom: DOM) {
-  const htmlStr = document.documentElement.outerHTML;
-  const blob = new Blob([htmlStr], {type: 'text/html'});
-
-  const lhr = flowResult.steps[0].lhr;
-  const name = flowResult.name.replace(/\s/g, '-');
-  const filename = getFilenamePrefix(name, lhr.fetchTime);
-
-  dom.saveFile(blob, filename);
-}
 
 /* eslint-disable max-len */
 const Logo: FunctionComponent = () => {
@@ -63,48 +44,17 @@ const Logo: FunctionComponent = () => {
 };
 /* eslint-enable max-len */
 
-const TopbarButton: FunctionComponent<{
-  onClick: JSX.MouseEventHandler<HTMLButtonElement>,
-  label: string,
-}> =
-({onClick, label, children}) => {
-  return (
-    <button className="TopbarButton" onClick={onClick} aria-label={label}>
-      {children}
-    </button>
-  );
-};
-
-export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLButtonElement>}> =
+export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLDivElement>}> =
 ({onMenuClick}) => {
-  const flowResult = useFlowResult();
-  const {dom} = useReportRenderer();
-  const strings = useUIStrings();
-  const [showHelpDialog, setShowHelpDialog] = useState(false);
-
   return (
     <div className="Topbar">
-      <TopbarButton onClick={onMenuClick} label="Button that opens and closes the sidebar">
+      <div className="Topbar__menu" onClick={onMenuClick} role="button">
         <HamburgerIcon/>
-      </TopbarButton>
+      </div>
       <div className="Topbar__logo">
         <Logo/>
       </div>
-      <div className="Topbar__title">{strings.title}</div>
-      <TopbarButton
-        onClick={() => saveHtml(flowResult, dom)}
-        label="Button that saves the report as HTML"
-      >{strings.save}</TopbarButton>
-      <div style={{flexGrow: 1}} />
-      <TopbarButton
-        onClick={() => setShowHelpDialog(previous => !previous)}
-        label="Button that toggles the help dialog">
-        {strings.helpLabel}
-      </TopbarButton>
-      {showHelpDialog ?
-        <HelpDialog onClose={() => setShowHelpDialog(false)} /> :
-        null
-      }
+      <div className="Topbar__title">Lighthouse User Flow Report</div>
     </div>
   );
 };

package/flow-report/src/util.ts

@@ -7,8 +7,6 @@
 import {createContext} from 'preact';
 import {useContext, useEffect, useMemo, useState} from 'preact/hooks';
 
-import type {UIStringsType} from './i18n/ui-strings';
-
 export const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
 
 function getHashParam(param: string): string|null {
@@ -43,7 +41,6 @@ export function getScreenDimensions(reportResult: LH.ReportResult) {
 export function getScreenshot(reportResult: LH.ReportResult) {
   const fullPageScreenshotAudit = reportResult.audits['full-page-screenshot'];
   const fullPageScreenshot =
-    fullPageScreenshotAudit &&
     fullPageScreenshotAudit.details &&
     fullPageScreenshotAudit.details.type === 'full-page-screenshot' &&
     fullPageScreenshotAudit.details.screenshot.data;
@@ -51,28 +48,6 @@ export function getScreenshot(reportResult: LH.ReportResult) {
   return fullPageScreenshot || null;
 }
 
-export function getFilmstripFrames(
-  reportResult: LH.ReportResult
-): Array<{data: string}> | undefined {
-  const filmstripAudit = reportResult.audits['screenshot-thumbnails'];
-  if (!filmstripAudit) return undefined;
-
-  const frameItems =
-    filmstripAudit.details &&
-    filmstripAudit.details.type === 'filmstrip' &&
-    filmstripAudit.details.items;
-
-  return frameItems || undefined;
-}
-
-export function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType) {
-  switch (mode) {
-    case 'navigation': return strings.navigationDescription;
-    case 'timespan': return strings.timespanDescription;
-    case 'snapshot': return strings.snapshotDescription;
-  }
-}
-
 export function useFlowResult(): LH.FlowResult {
   const flowResult = useContext(FlowResultContext);
   if (!flowResult) throw Error('useFlowResult must be called in the FlowResultContext');
@@ -102,7 +77,7 @@ export function useHashParam(param: string) {
   return paramValue;
 }
 
-export function useCurrentLhr(): LH.FlowResult.LhrRef|null {
+export function useCurrentLhr(): {value: LH.Result, index: number}|null {
   const flowResult = useFlowResult();
   const indexString = useHashParam('index');
 

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

@@ -19,7 +19,7 @@ interface ReportRendererGlobals {
    reportRenderer: ReportRenderer,
 }
 
-export const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
+const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
 
 export function useReportRenderer() {
   const globals = useContext(ReportRendererContext);

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

@@ -5,8 +5,9 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useLayoutEffect, useRef} from 'preact/hooks';
+import {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
 
+import {useCurrentLhr, useHashParam} from '../util';
 import {useReportRenderer} from './report-renderer';
 
 /**
@@ -15,7 +16,7 @@ import {useReportRenderer} from './report-renderer';
  * e.g. <a href="#link"> -> <a href="#index=0&anchor=link">
  */
 export function convertChildAnchors(element: HTMLElement, index: number) {
-  const links = element.querySelectorAll('a[href]') as NodeListOf<HTMLAnchorElement>;
+  const links = element.querySelectorAll('a') as NodeListOf<HTMLAnchorElement>;
   for (const link of links) {
     // Check if the link destination is in the report.
     const currentUrl = new URL(location.href);
@@ -31,18 +32,19 @@ export function convertChildAnchors(element: HTMLElement, index: number) {
   }
 }
 
-export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
-({currentLhr}) => {
+export const Report: FunctionComponent = () => {
   const {dom, reportRenderer} = useReportRenderer();
   const ref = useRef<HTMLDivElement>(null);
+  const anchor = useHashParam('anchor');
+  const currentLhr = useCurrentLhr();
 
   useLayoutEffect(() => {
+    if (!currentLhr) return;
+
     if (ref.current) {
       dom.clearComponentCache();
       reportRenderer.renderReport(currentLhr.value, ref.current);
       convertChildAnchors(ref.current, currentLhr.index);
-      const topbar = ref.current.querySelector('.lh-topbar');
-      if (topbar) topbar.remove();
     }
 
     return () => {
@@ -50,6 +52,19 @@ export const Report: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
     };
   }, [reportRenderer, currentLhr]);
 
+  useEffect(() => {
+    if (anchor) {
+      const el = document.getElementById(anchor);
+      if (el) {
+        el.scrollIntoView({behavior: 'smooth'});
+        return;
+      }
+    }
+
+    // Scroll to top no anchor is found.
+    if (ref.current) ref.current.scrollIntoView();
+  }, [anchor, currentLhr]);
+
   return (
     <div ref={ref} className="lh-root" data-testid="Report"/>
   );

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

@@ -4,10 +4,21 @@
  * 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 {act, render} from '@testing-library/preact';
+import fs from 'fs';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+
+import {render} from '@testing-library/preact';
 
 import {App} from '../src/app';
-import {flowResult} from './sample-flow';
+
+const flowResult = JSON.parse(
+  fs.readFileSync(
+    // eslint-disable-next-line max-len
+    `${dirname(fileURLToPath(import.meta.url))}/../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
+    'utf-8'
+  )
+);
 
 it('renders a standalone report with summary', async () => {
   const root = render(<App flowResult={flowResult}/>);
@@ -35,18 +46,3 @@ it('renders the snapshot step', async () => {
 
   expect(root.getByTestId('Report')).toBeTruthy();
 });
-
-it('toggles collapsed mode when hamburger button clicked', async () => {
-  const root = render(<App flowResult={flowResult}/>);
-
-  const app = root.getByTestId('App');
-  const hamburgerButton = root.getByLabelText('Button that opens and closes the sidebar');
-
-  expect(app.classList).not.toContain('App--collapsed');
-
-  await act(() => {
-    hamburgerButton.click();
-  });
-
-  expect(app.classList).toContain('App--collapsed');
-});

package/flow-report/test/setup/env-setup.ts

@@ -17,7 +17,6 @@ export function setupJsDom() {
   global.window = window as any;
   global.document = window.document;
   global.location = window.location;
-  global.Blob = window.Blob;
 
   // Function not implemented in JSDOM.
   window.Element.prototype.scrollIntoView = jest.fn();

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

@@ -1,15 +1,21 @@
-/**
- * @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 fs from 'fs';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
 
 import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
 
 import {SidebarFlow} from '../../src/sidebar/flow';
 import {FlowResultContext} from '../../src/util';
-import {flowResult} from '../sample-flow';
+
+
+const flowResult = JSON.parse(
+  fs.readFileSync(
+    // eslint-disable-next-line max-len
+    `${dirname(fileURLToPath(import.meta.url))}/../../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
+    'utf-8'
+  )
+);
 
 let wrapper: FunctionComponent;
 

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

@@ -4,24 +4,30 @@
  * 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 fs from 'fs';
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
+
 import {render} from '@testing-library/preact';
 import {FunctionComponent} from 'preact';
 
-import {I18nProvider} from '../../src/i18n/i18n';
 import {SidebarHeader, SidebarSummary} from '../../src/sidebar/sidebar';
 import {FlowResultContext} from '../../src/util';
-import {flowResult} from '../sample-flow';
 
 
+const flowResult = JSON.parse(
+  fs.readFileSync(
+    // eslint-disable-next-line max-len
+    `${dirname(fileURLToPath(import.meta.url))}/../../../lighthouse-core/test/fixtures/fraggle-rock/reports/sample-lhrs.json`,
+    'utf-8'
+  )
+);
+
 let wrapper: FunctionComponent;
 
 beforeEach(() => {
   wrapper = ({children}) => (
-    <FlowResultContext.Provider value={flowResult}>
-      <I18nProvider>
-        {children}
-      </I18nProvider>
-    </FlowResultContext.Provider>
+    <FlowResultContext.Provider value={flowResult}>{children}</FlowResultContext.Provider>
   );
 });