lighthouse 8.3.0-dev.20210904 → 8.3.0

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>
-  );
-};

package/flow-report/src/util.ts

@@ -1,160 +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 {createContext} from 'preact';
-import {useContext, useEffect, useMemo, useState} from 'preact/hooks';
-
-export const FlowResultContext = createContext<LH.FlowResult|undefined>(undefined);
-
-function getHashParam(param: string): string|null {
-  const params = new URLSearchParams(location.hash.replace('#', '?'));
-  return params.get(param);
-}
-
-function shortenUrl(longUrl: string) {
-  const url = new URL(longUrl);
-  return `${url.hostname}${url.pathname}`;
-}
-
-/**
- * The step label should be enumerated if there is another report of the same gather mode in the same section.
- * Navigation reports will never be enumerated.
- */
-function shouldEnumerate(flowResult: LH.FlowResult, index: number) {
-  const {lhrs} = flowResult;
-  if (lhrs[index].gatherMode === 'navigation') return false;
-
-  for (let i = index + 1; lhrs[i] && lhrs[i].gatherMode !== 'navigation'; ++i) {
-    if (lhrs[i].gatherMode === lhrs[index].gatherMode) {
-      return true;
-    }
-  }
-  for (let i = index - 1; lhrs[i] && lhrs[i].gatherMode !== 'navigation'; --i) {
-    if (lhrs[i].gatherMode === lhrs[index].gatherMode) {
-      return true;
-    }
-  }
-  return false;
-}
-
-
-export function classNames(...args: Array<string|undefined|Record<string, boolean>>): string {
-  const classes = [];
-  for (const arg of args) {
-    if (!arg) continue;
-
-    if (typeof arg === 'string') {
-      classes.push(arg);
-      continue;
-    }
-
-    const applicableClasses = Object.entries(arg)
-      .filter(([_, shouldApply]) => shouldApply)
-      .map(([className]) => className);
-    classes.push(...applicableClasses);
-  }
-
-  return classes.join(' ');
-}
-
-export function getScreenDimensions(reportResult: LH.ReportResult) {
-  const {width, height} = reportResult.configSettings.screenEmulation;
-  return {width, height};
-}
-
-export function getScreenshot(reportResult: LH.ReportResult) {
-  const fullPageScreenshotAudit = reportResult.audits['full-page-screenshot'];
-  const fullPageScreenshot =
-    fullPageScreenshotAudit.details &&
-    fullPageScreenshotAudit.details.type === 'full-page-screenshot' &&
-    fullPageScreenshotAudit.details.screenshot.data;
-
-  return fullPageScreenshot || null;
-}
-
-export 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.lhrs[0].configSettings.locale;
-}
-
-export function useHashParam(param: string) {
-  const [paramValue, setParamValue] = useState(getHashParam(param));
-
-  // Use two-way-binding on the URL hash.
-  // Triggers a re-render if the param changes.
-  useEffect(() => {
-    function hashListener() {
-      const newIndexString = getHashParam(param);
-      if (newIndexString === paramValue) return;
-      setParamValue(newIndexString);
-    }
-    window.addEventListener('hashchange', hashListener);
-    return () => window.removeEventListener('hashchange', hashListener);
-  }, [paramValue]);
-
-  return paramValue;
-}
-
-export function useCurrentLhr(): {value: LH.Result, index: number}|null {
-  const flowResult = useFlowResult();
-  const indexString = useHashParam('index');
-
-  // Memoize result so a new object is not created on every call.
-  return useMemo(() => {
-    if (!indexString) return null;
-
-    const index = Number(indexString);
-    if (!Number.isFinite(index)) {
-      console.warn(`Invalid hash index: ${indexString}`);
-      return null;
-    }
-
-    const value = flowResult.lhrs[index];
-    if (!value) {
-      console.warn(`No LHR at index ${index}`);
-      return null;
-    }
-
-    return {value, index};
-  }, [indexString, flowResult]);
-}
-
-export function useDerivedStepNames() {
-  const flowResult = useFlowResult();
-
-  return useMemo(() => {
-    let numTimespan = 1;
-    let numSnapshot = 1;
-
-    // TODO(FR-COMPAT): Override with a provided step name.
-    return flowResult.lhrs.map((lhr, index) => {
-      const shortUrl = shortenUrl(lhr.finalUrl);
-
-      switch (lhr.gatherMode) {
-        case 'navigation':
-          numTimespan = 1;
-          numSnapshot = 1;
-          return `Navigation report (${shortUrl})`;
-        case 'timespan':
-          if (shouldEnumerate(flowResult, index)) {
-            return `Timespan report ${numTimespan++} (${shortUrl})`;
-          }
-          return `Timespan report (${shortUrl})`;
-        case 'snapshot':
-          if (shouldEnumerate(flowResult, index)) {
-            return `Snapshot report ${numSnapshot++} (${shortUrl})`;
-          }
-          return `Snapshot report (${shortUrl})`;
-      }
-    });
-  }, [flowResult]);
-}

package/flow-report/src/wrappers/gauge.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 {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
-
-import {useReportRenderer} from './report-renderer';
-
-export const Gauge: FunctionComponent<{category: LH.ReportResult.Category, href: string}> =
-({category, href}) => {
-  const {categoryRenderer} = useReportRenderer();
-  const ref = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const el = categoryRenderer.renderScoreGauge(category, {});
-
-    // Category label is displayed in the navigation header.
-    const label = el.querySelector('.lh-gauge__label');
-    if (label) label.remove();
-
-    if (ref.current) ref.current.append(el);
-    return () => {
-      if (ref.current && ref.current.contains(el)) {
-        ref.current.removeChild(el);
-      }
-    };
-  }, [categoryRenderer, category]);
-
-  useEffect(() => {
-    const anchor = ref.current && ref.current.querySelector('a') as HTMLAnchorElement;
-    if (anchor) anchor.href = href;
-  }, [href]);
-
-  return (
-    <div ref={ref} data-testid="Gauge"/>
-  );
-};

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

@@ -1,46 +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 {createContext, FunctionComponent} from 'preact';
-import {useContext, useMemo} from 'preact/hooks';
-
-import {CategoryRenderer} from '../../../report/renderer/category-renderer';
-import {DetailsRenderer} from '../../../report/renderer/details-renderer';
-import {DOM} from '../../../report/renderer/dom';
-import {ReportRenderer} from '../../../report/renderer/report-renderer';
-
-interface ReportRendererGlobals {
-   dom: DOM,
-   detailsRenderer: DetailsRenderer,
-   categoryRenderer: CategoryRenderer,
-   reportRenderer: ReportRenderer,
-}
-
-const ReportRendererContext = createContext<ReportRendererGlobals|undefined>(undefined);
-
-export function useReportRenderer() {
-  const globals = useContext(ReportRendererContext);
-  if (!globals) throw Error('Globals not defined');
-  return globals;
-}
-
-export const ReportRendererProvider: FunctionComponent = ({children}) => {
-  const globals = useMemo(() => {
-    const dom = new DOM(document);
-    const detailsRenderer = new DetailsRenderer(dom);
-    const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
-    const reportRenderer = new ReportRenderer(dom);
-    return {
-      dom,
-      detailsRenderer,
-      categoryRenderer,
-      reportRenderer,
-    };
-  }, []);
-  return (
-    <ReportRendererContext.Provider value={globals}>{children}</ReportRendererContext.Provider>
-  );
-};