lighthouse 8.3.0-dev.20210907 → 8.3.0

package/flow-report/src/app.tsx

@@ -1,40 +0,0 @@
-/**
- * @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 {ReportRendererProvider} from './wrappers/report-renderer';
-import {Sidebar} from './sidebar/sidebar';
-import {Summary} from './summary/summary';
-import {FlowResultContext, useCurrentLhr} from './util';
-import {Report} from './wrappers/report';
-
-const Content: FunctionComponent = () => {
-  const currentLhr = useCurrentLhr();
-
-  return (
-    <div className="Content">
-      {
-        currentLhr ?
-          <Report/> :
-          <Summary/>
-      }
-    </div>
-  );
-};
-
-export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}) => {
-  return (
-    <FlowResultContext.Provider value={flowResult}>
-      <ReportRendererProvider>
-        <div className="App">
-          <Sidebar/>
-          <Content/>
-        </div>
-      </ReportRendererProvider>
-    </FlowResultContext.Provider>
-  );
-};

package/flow-report/src/common.tsx

@@ -1,72 +0,0 @@
-/**
- * @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 {Util} from '../../report/renderer/util';
-import {NavigationIcon, SnapshotIcon, TimespanIcon} from './icons';
-
-/**
- * Summarizes the category as a ratio of passed audits to total audits.
- * The rating color and icon are calculated from the passed/total ratio, not the category score.
- * A category will be given a null rating and color if none of its audits are weighted.
- */
-export const CategoryRatio: FunctionComponent<{
-  category: LH.ReportResult.Category,
-  audits: LH.Result['audits'],
-  href: string,
-}> = ({category, audits, href}) => {
-  const numAudits = category.auditRefs.length;
-
-  let numPassed = 0;
-  let totalWeight = 0;
-  for (const auditRef of category.auditRefs) {
-    totalWeight += auditRef.weight;
-    const audit = audits[auditRef.id];
-    if (!audit) {
-      console.warn(`Could not find score for audit '${auditRef.id}', treating as failed.`);
-      continue;
-    }
-    if (Util.showAsPassed(audit)) numPassed++;
-  }
-
-  const ratio = numPassed / numAudits;
-  let rating = Util.calculateRating(ratio);
-
-  // If none of the available audits can affect the score, a rating isn't useful.
-  // The flow report should display the ratio with neutral icon and coloring in this case.
-  if (totalWeight === 0) {
-    rating = 'null';
-  }
-
-  return (
-    <a href={href} className={`CategoryRatio CategoryRatio--${rating}`} data-testid="CategoryRatio">
-      {`${numPassed}/${numAudits}`}
-    </a>
-  );
-};
-
-export const Separator: FunctionComponent = () => {
-  return <div className="Separator" role="separator"></div>;
-};
-
-export const FlowSegment: FunctionComponent<{mode?: LH.Result.GatherMode}> = ({mode}) => {
-  return (
-    <div className="FlowSegment">
-      <div className="FlowSegment__top-line"/>
-      {
-        mode === 'navigation' && <NavigationIcon/>
-      }
-      {
-        mode === 'timespan' && <TimespanIcon/>
-      }
-      {
-        mode === 'snapshot' && <SnapshotIcon/>
-      }
-      <div className="FlowSegment__bottom-line"/>
-    </div>
-  );
-};

package/flow-report/src/icons.tsx

@@ -1,96 +0,0 @@
-/**
- * @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';
-
-/* eslint-disable max-len */
-
-export const SummaryIcon: FunctionComponent = () => {
-  return (
-    <svg width="14" viewBox="0 0 18 16" fill="none" role="img">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 1.17 0.67 0.5 1.5 0.5C2.33 0.5 3 1.17 3 2C3 2.83 2.33 3.5 1.5 3.5C0.67 3.5 0 2.83 0 2ZM0 8C0 7.17 0.67 6.5 1.5 6.5C2.33 6.5 3 7.17 3 8C3 8.83 2.33 9.5 1.5 9.5C0.67 9.5 0 8.83 0 8ZM1.5 12.5C0.67 12.5 0 13.18 0 14C0 14.82 0.68 15.5 1.5 15.5C2.32 15.5 3 14.82 3 14C3 13.18 2.33 12.5 1.5 12.5ZM18 15H5V13H18V15ZM5 9H18V7H5V9ZM5 3V1H18V3H5Z" fill="currentColor"/>
-    </svg>
-  );
-};
-
-export const NavigationIcon: FunctionComponent = () => {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      role="img"
-      aria-label="Icon representing a navigation report">
-      <circle
-        cx="8"
-        cy="8"
-        r="7"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"/>
-    </svg>
-  );
-};
-
-export const TimespanIcon: FunctionComponent = () => {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      role="img"
-      aria-label="Icon representing a timespan report">
-      <circle
-        cx="8"
-        cy="8"
-        r="7"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"/>
-      <path
-        d="m 8,4 v 4 l 4,1.9999998"
-        stroke="currentColor"
-        stroke-width="1.5"/>
-    </svg>
-  );
-};
-
-export const SnapshotIcon: FunctionComponent = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      role="img"
-      aria-label="Icon representing a snapshot report">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M 12.2038,12.2812 C 11.1212,13.3443 9.6372,14 8,14 7.81038,14 7.62281,13.9912 7.43768,13.974 L 10.3094,9 Z M 12.8925,11.4741 10.0207,6.5 H 13.811 C 13.9344,6.97943 14,7.48205 14,8 c 0,1.2947 -0.4101,2.4937 -1.1075,3.4741 z M 13.456,5.5 H 7.71135 L 9.6065,2.21749 C 11.3203,2.69259 12.7258,3.90911 13.456,5.5 Z M 8.5624,2.02601 C 8.3772,2.0088 8.1896,2 8,2 6.36282,2 4.8788,2.65572 3.79622,3.71885 L 5.69061,7.00002 Z M 3.10749,4.52594 C 2.4101,5.5063 2,6.70526 2,8 2,8.5179 2.06563,9.0206 2.18903,9.5 H 5.97927 Z M 2.54404,10.5 c 0.73017,1.5909 2.1357,2.8074 3.84949,3.2825 L 8.2887,10.5 Z M 16,8 c 0,4.4183 -3.5817,8 -8,8 C 3.58172,16 0,12.4183 0,8 0,3.58172 3.58172,0 8,0 c 4.4183,0 8,3.58172 8,8 z"
-        fill="currentColor"/>
-    </svg>
-  );
-};
-
-export const EnvIcon: FunctionComponent = () => {
-  return (
-    <svg width="15" height="12" viewBox="0 0 15 12" fill="none" role="img">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.33317 2.00008H13.9998V0.666748H3.33317C2.59984 0.666748 1.99984 1.26675 1.99984 2.00008V9.33341H0.666504V11.3334H7.99984V9.33341H3.33317V2.00008ZM13.9998 3.33341H9.99984C9.63317 3.33341 9.33317 3.63341 9.33317 4.00008V10.6667C9.33317 11.0334 9.63317 11.3334 9.99984 11.3334H13.9998C14.3665 11.3334 14.6665 11.0334 14.6665 10.6667V4.00008C14.6665 3.63341 14.3665 3.33341 13.9998 3.33341ZM10.6665 9.33341H13.3332V4.66675H10.6665V9.33341Z" fill="currentColor"/>
-    </svg>
-  );
-};
-
-export const CpuIcon: FunctionComponent = () => {
-  return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" role="img">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 7.16667V5.5H13.8333V3.83333C13.8333 2.91667 13.0833 2.16667 12.1667 2.16667H10.5V0.5H8.83333V2.16667H7.16667V0.5H5.5V2.16667H3.83333C2.91667 2.16667 2.16667 2.91667 2.16667 3.83333V5.5H0.5V7.16667H2.16667V8.83333H0.5V10.5H2.16667V12.1667C2.16667 13.0833 2.91667 13.8333 3.83333 13.8333H5.5V15.5H7.16667V13.8333H8.83333V15.5H10.5V13.8333H12.1667C13.0833 13.8333 13.8333 13.0833 13.8333 12.1667V10.5H15.5V8.83333H13.8333V7.16667H15.5ZM10.5 5.5H5.5V10.5H10.5V5.5ZM3.83333 12.1667H12.1667V3.83333H3.83333V12.1667Z" fill="currentColor"/>
-    </svg>
-  );
-};

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

@@ -1,72 +0,0 @@
-/**
- * @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 {FlowSegment} from '../common';
-import {classNames, useCurrentLhr, useDerivedStepNames, useFlowResult} from '../util';
-import {Separator} from '../common';
-
-const SidebarFlowStep: FunctionComponent<{
-  mode: LH.Result.GatherMode,
-  href: string,
-  label: string,
-  isCurrent: boolean,
-}> = ({href, label, mode, isCurrent}) => {
-  return (
-    <a
-      className={classNames('SidebarFlowStep', {'Sidebar--current': isCurrent})}
-      href={href}
-    >
-      <div>
-        <FlowSegment mode={mode}/>
-      </div>
-      <div className={`SidebarFlowStep__label SidebarFlowStep__label--${mode}`}>{label}</div>
-    </a>
-  );
-};
-
-const SidebarFlowSeparator: FunctionComponent = () => {
-  return (
-    <div className="SidebarFlowSeparator">
-      <FlowSegment/>
-      <Separator/>
-      <FlowSegment/>
-    </div>
-  );
-};
-
-export const SidebarFlow: FunctionComponent = () => {
-  const flowResult = useFlowResult();
-  const currentLhr = useCurrentLhr();
-  const stepNames = useDerivedStepNames();
-
-  return (
-    <div className="SidebarFlow">
-      {
-        flowResult.lhrs.map((lhr, index) => {
-          const stepName = stepNames[index];
-          const url = new URL(location.href);
-          url.hash = `#index=${index}`;
-          return <>
-            {
-              lhr.gatherMode === 'navigation' && index !== 0 ?
-                <SidebarFlowSeparator/> :
-                undefined
-            }
-            <SidebarFlowStep
-              key={lhr.fetchTime}
-              mode={lhr.gatherMode}
-              href={url.href}
-              label={stepName}
-              isCurrent={index === (currentLhr && currentLhr.index)}
-            />
-          </>;
-        })
-      }
-    </div>
-  );
-};

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

@@ -1,89 +0,0 @@
-/**
- * @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 {useMemo} from 'preact/hooks';
-
-import {Separator} from '../common';
-import {CpuIcon, EnvIcon, SummaryIcon} from '../icons';
-import {classNames, useCurrentLhr, useFlowResult, useLocale} from '../util';
-import {SidebarFlow} from './flow';
-
-export const SidebarSummary: FunctionComponent = () => {
-  const currentLhr = useCurrentLhr();
-  const url = new URL(location.href);
-  url.hash = '#';
-  return (
-    <a
-      href={url.href}
-      className={classNames('SidebarSummary', {'Sidebar--current': currentLhr === null})}
-      data-testid="SidebarSummary"
-    >
-      <div className="SidebarSummary__icon">
-        <SummaryIcon/>
-      </div>
-      <div className="SidebarSummary__label">Summary</div>
-    </a>
-  );
-};
-
-const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = ({settings}) => {
-  return (
-    <div className="SidebarRuntimeSettings">
-      <div className="SidebarRuntimeSettings__item">
-        <div className="SidebarRuntimeSettings__item--icon">
-          <EnvIcon/>
-        </div>
-        {
-          `${settings.formFactor === 'desktop' ? 'Desktop' : 'Mobile'} | ` +
-          `${settings.screenEmulation.height}x${settings.screenEmulation.width}px`
-        }
-      </div>
-      <div className="SidebarRuntimeSettings__item">
-        <div className="SidebarRuntimeSettings__item--icon">
-          <CpuIcon/>
-        </div>
-        {
-          `${settings.throttling.cpuSlowdownMultiplier}x slowdown`
-        }
-      </div>
-    </div>
-  );
-};
-
-export const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title, date}) => {
-  const locale = useLocale();
-  const formatter = useMemo(() => {
-    const options: Intl.DateTimeFormatOptions = {
-      month: 'short', day: 'numeric', year: 'numeric',
-      hour: 'numeric', minute: 'numeric', timeZoneName: 'short',
-    };
-    return new Intl.DateTimeFormat(locale, options);
-  }, [locale]);
-  const dateString = useMemo(() => formatter.format(new Date(date)), [date, formatter]);
-  return (
-    <div className="SidebarHeader">
-      <div className="SidebarHeader__title">{title}</div>
-      <div className="SidebarHeader__date">{dateString}</div>
-    </div>
-  );
-};
-
-export const Sidebar: FunctionComponent = () => {
-  const flowResult = useFlowResult();
-  const firstLhr = flowResult.lhrs[0];
-  return (
-    <div className="Sidebar">
-      <SidebarHeader title="Lighthouse User Flow Report" date={firstLhr.fetchTime}/>
-      <Separator/>
-      <SidebarSummary/>
-      <Separator/>
-      <SidebarFlow/>
-      <Separator/>
-      <SidebarRuntimeSettings settings={firstLhr.configSettings}/>
-    </div>
-  );
-};

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

@@ -1,178 +0,0 @@
-/**
- * @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 {useMemo} from 'preact/hooks';
-
-import {Gauge} from '../wrappers/gauge';
-import {FlowSegment} from '../common';
-import {CategoryRatio} from '../common';
-import {getScreenDimensions, getScreenshot, useDerivedStepNames, useFlowResult} from '../util';
-import {Util} from '../../../report/renderer/util';
-
-const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
-const THUMBNAIL_WIDTH = 50;
-
-const SummaryNavigationHeader: FunctionComponent<{url: string}> = ({url}) => {
-  return (
-    <div className="SummaryNavigationHeader" data-testid="SummaryNavigationHeader">
-      <FlowSegment/>
-      <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>
-  );
-};
-
-const SummaryCategory: FunctionComponent<{
-  gatherMode: LH.Result.GatherMode,
-  audits: LH.ReportResult['audits'],
-  category: LH.ReportResult.Category|undefined,
-  href: string,
-}> = ({gatherMode, audits, category, href}) => {
-  return (
-    <div className="SummaryCategory">
-      {
-        category ?
-          (
-            gatherMode === 'navigation' ?
-            <Gauge
-              category={category}
-              href={href}
-            /> :
-            <CategoryRatio
-              category={category}
-              audits={audits}
-              href={href}
-            />
-          ) :
-          <div
-            className="SummaryCategory__null"
-            data-testid="SummaryCategory__null"
-          />
-      }
-    </div>
-  );
-};
-
-/**
- * The div should behave like a JSX <>...</>. This still allows us to identify "rows" with CSS selectors.
- */
-export const SummaryFlowStep: FunctionComponent<{
-  lhr: LH.Result,
-  label: string,
-  hashIndex: number,
-}> = ({lhr, label, hashIndex}) => {
-  // TODO(FR-COMPAT): Store report results globally.
-  const reportResult = useMemo(() => Util.prepareReportResult(lhr), [lhr]);
-
-  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 url={lhr.finalUrl}/> :
-          <div className="SummaryFlowStep__divider">
-            <FlowSegment/>
-            <div className="SummaryFlowStep__divider--line"/>
-          </div>
-      }
-      <img
-        className="SummaryFlowStep__screenshot"
-        data-testid="SummaryFlowStep__screenshot"
-        src={screenshot || undefined}
-        style={{width: THUMBNAIL_WIDTH, maxHeight: thumbnailHeight}}
-      />
-      <FlowSegment mode={lhr.gatherMode}/>
-      <a className="SummaryFlowStep__label" href={`#index=${hashIndex}`}>{label}</a>
-      {
-        DISPLAYED_CATEGORIES.map(c => (
-          <SummaryCategory
-            key={c}
-            gatherMode={reportResult.gatherMode}
-            category={reportResult.categories[c]}
-            audits={reportResult.audits}
-            href={`#index=${hashIndex}&anchor=${c}`}
-          />
-        ))
-      }
-    </div>
-  );
-};
-
-/**
- * For the summary flow, there are many different cells with different contents and different display properties.
- * CSS grid makes it easier to enforce things like content alignment and column width (e.g. all category columns have the same width).
- */
-const SummaryFlow: FunctionComponent = () => {
-  const flowResult = useFlowResult();
-  const stepNames = useDerivedStepNames();
-  return (
-    <div className="SummaryFlow">
-      {
-        flowResult.lhrs.map((lhr, index) =>
-          <SummaryFlowStep
-            key={lhr.fetchTime}
-            lhr={lhr}
-            label={stepNames[index]}
-            hashIndex={index}
-          />
-        )
-      }
-    </div>
-  );
-};
-
-export const SummaryHeader: FunctionComponent = () => {
-  const flowResult = useFlowResult();
-
-  let numNavigation = 0;
-  let numTimespan = 0;
-  let numSnapshot = 0;
-  for (const lhr of flowResult.lhrs) {
-    switch (lhr.gatherMode) {
-      case 'navigation':
-        numNavigation++;
-        break;
-      case 'timespan':
-        numTimespan++;
-        break;
-      case 'snapshot':
-        numSnapshot++;
-        break;
-    }
-  }
-
-  // TODO(FR-COMPAT): Pluralize UI strings.
-  const subtitleCounts = [];
-  if (numNavigation) subtitleCounts.push(`${numNavigation} navigation reports`);
-  if (numTimespan) subtitleCounts.push(`${numTimespan} timespan reports`);
-  if (numSnapshot) subtitleCounts.push(`${numSnapshot} snapshot reports`);
-  const subtitle = subtitleCounts.join(' · ');
-
-  return (
-    <div className="SummaryHeader">
-      <div className="SummaryHeader__title">Summary</div>
-      <div className="SummaryHeader__subtitle">{subtitle}</div>
-    </div>
-  );
-};
-
-export const Summary: FunctionComponent = () => {
-  return (
-    <div className="Summary" data-testid="Summary">
-      <SummaryHeader/>
-      <SummaryFlow/>
-    </div>
-  );
-};