chrome-devtools-frontend/front_end/panels/lighthouse/LighthouseStatusView.ts

Chrome DevTools UI

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import * as Common from '../../core/common/common.js';
import * as i18n from '../../core/i18n/i18n.js';
import * as UI from '../../ui/legacy/legacy.js';

import {RuntimeSettings} from './LighthouseController.js';
import lighthouseDialogStyles from './lighthouseDialog.css.js';

import {type LighthousePanel} from './LighthousePanel.js';

const UIStrings = {
  /**
   *@description Text to cancel something
   */
  cancel: 'Cancel',
  /**
   *@description Text when something is loading
   */
  loading: 'Loading…',
  /**
   *@description Status text in Lighthouse splash screen while an audit is being performed
   *@example {github.com} PH1
   */
  auditingS: 'Auditing {PH1}',
  /**
   *@description Status text in Lighthouse splash screen while an audit is being performed
   */
  auditingYourWebPage: 'Auditing your web page',
  /**
   *@description Status text in Lighthouse splash screen while an audit is being performed, and cancellation to take effect
   */
  cancelling: 'Cancelling…',
  /**
   *@description Status text in Lighthouse splash screen while preparing for an audit
   */
  lighthouseIsWarmingUp: '`Lighthouse` is warming up…',
  /**
   *@description Status text in Lighthouse splash screen while an audit is being performed
   */
  lighthouseIsLoadingYourPage: '`Lighthouse` is loading your page',
  /**
   *@description Text in Lighthouse Status View
   *@example {75% of global mobile users in 2016 were on 2G or 3G [Source: GSMA Mobile]} PH1
   */
  fastFactMessageWithPlaceholder: '💡 {PH1}',
  /**
   *@description Text of a DOM element in Lighthouse Status View
   */
  ahSorryWeRanIntoAnError: 'Ah, sorry! We ran into an error.',
  /**
   *@description Text in Lighthouse Status View
   */
  tryToNavigateToTheUrlInAFresh:
      'Try to navigate to the URL in a fresh `Chrome` profile without any other tabs or extensions open and try again.',
  /**
   *@description Text of a DOM element in Lighthouse Status View
   */
  ifThisIssueIsReproduciblePlease: 'If this issue is reproducible, please report it at the `Lighthouse` `GitHub` repo.',
  /**
   *@description Text in Lighthouse splash screen when loading the page for auditing
   */
  lighthouseIsLoadingThePage: 'Lighthouse is loading the page.',
  /**
   *@description Text in Lighthouse splash screen when Lighthouse is gathering information for display
   */
  lighthouseIsGatheringInformation: '`Lighthouse` is gathering information about the page to compute your score.',
  /**
   *@description Text in Lighthouse splash screen when Lighthouse is generating a report.
   */
  almostThereLighthouseIsNow: 'Almost there! `Lighthouse` is now generating your report.',
  /**
   *@description Text in Lighthouse splash screen when loading the page for auditing
   */
  lighthouseIsLoadingYourPageWith:
      '`Lighthouse` is loading your page with throttling to measure performance on a mobile device on 3G.',
  /**
   *@description Text in Lighthouse splash screen when loading the page for auditing
   */
  lighthouseIsLoadingYourPageWithThrottling:
      '`Lighthouse` is loading your page with throttling to measure performance on a slow desktop on 3G.',
  /**
   *@description Text in Lighthouse splash screen when loading the page for auditing
   */
  lighthouseIsLoadingYourPageWithMobile: '`Lighthouse` is loading your page with mobile emulation.',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  mbTakesAMinimumOfSecondsTo:
      '1MB takes a minimum of 5 seconds to download on a typical 3G connection [Source: `WebPageTest` and `DevTools` 3G definition].',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  rebuildingPinterestPagesFor:
      'Rebuilding Pinterest pages for performance increased conversion rates by 15% [Source: `WPO Stats`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  byReducingTheResponseSizeOfJson:
      'By reducing the response size of JSON needed for displaying comments, Instagram saw increased impressions [Source: `WPO Stats`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  walmartSawAIncreaseInRevenueFor:
      'Walmart saw a 1% increase in revenue for every 100ms improvement in page load [Source: `WPO Stats`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  ifASiteTakesSecondToBecome:
      'If a site takes >1 second to become interactive, users lose attention, and their perception of completing the page task is broken [Source: `Google Developers Blog`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  OfGlobalMobileUsersInWereOnGOrG: '75% of global mobile users in 2016 were on 2G or 3G [Source: `GSMA Mobile`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  theAverageUserDeviceCostsLess:
      'The average user device costs less than 200 USD. [Source: `International Data Corporation`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  SecondsIsTheAverageTimeAMobile:
      '19 seconds is the average time a mobile web page takes to load on a 3G connection [Source: `Google DoubleClick blog`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  OfMobilePagesTakeNearlySeconds:
      '70% of mobile pages take nearly 7 seconds for the visual content above the fold to display on the screen. [Source: `Think with Google`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  asPageLoadTimeIncreasesFromOne:
      'As page load time increases from one second to seven seconds, the probability of a mobile site visitor bouncing increases 113%. [Source: `Think with Google`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  asTheNumberOfElementsOnAPage:
      'As the number of elements on a page increases from 400 to 6,000, the probability of conversion drops 95%. [Source: `Think with Google`]',
  /**
   *@description Fast fact in the splash screen while Lighthouse is performing an audit
   */
  lighthouseOnlySimulatesMobile:
      '`Lighthouse` only simulates mobile performance; to measure performance on a real device, try WebPageTest.org [Source: `Lighthouse` team]',
};
const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStatusView.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);

export class StatusView {
  private readonly panel: LighthousePanel;
  private statusView: Element|null;
  private statusHeader: Element|null;
  private progressWrapper: Element|null;
  private progressBar: Element|null;
  private statusText: Element|null;
  private cancelButton: HTMLButtonElement|null;
  private inspectedURL: string;
  private textChangedAt: number;
  private fastFactsQueued: Common.UIString.LocalizedString[];
  private currentPhase: StatusPhase|null;
  private scheduledTextChangeTimeout: number|null;
  private scheduledFastFactTimeout: number|null;
  private readonly dialog: UI.Dialog.Dialog;

  constructor(panel: LighthousePanel) {
    this.panel = panel;

    this.statusView = null;
    this.statusHeader = null;
    this.progressWrapper = null;
    this.progressBar = null;
    this.statusText = null;
    this.cancelButton = null;

    this.inspectedURL = '';
    this.textChangedAt = 0;
    this.fastFactsQueued = FastFacts.map(lazyString => lazyString());
    this.currentPhase = null;
    this.scheduledTextChangeTimeout = null;
    this.scheduledFastFactTimeout = null;

    this.dialog = new UI.Dialog.Dialog();
    this.dialog.setDimmed(true);
    this.dialog.setCloseOnEscape(false);
    this.dialog.setOutsideClickCallback(event => event.consume(true));
    this.render();
  }

  private render(): void {
    const dialogRoot = UI.Utils.createShadowRootWithCoreStyles(
        this.dialog.contentElement, {cssFile: [lighthouseDialogStyles], delegatesFocus: undefined});
    const lighthouseViewElement = dialogRoot.createChild('div', 'lighthouse-view vbox');

    const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this));
    const fragment = UI.Fragment.Fragment.build`
  <div class="lighthouse-view vbox">
  <h2 $="status-header">Auditing your web page…</h2>
  <div class="lighthouse-status vbox" $="status-view">
  <div class="lighthouse-progress-wrapper" $="progress-wrapper">
  <div class="lighthouse-progress-bar" $="progress-bar"></div>
  </div>
  <div class="lighthouse-status-text" $="status-text"></div>
  </div>
  ${cancelButton}
  </div>
  `;

    lighthouseViewElement.appendChild(fragment.element());

    this.statusView = fragment.$('status-view');
    this.statusHeader = fragment.$('status-header');
    this.progressWrapper = fragment.$('progress-wrapper');
    this.progressBar = fragment.$('progress-bar');
    this.statusText = fragment.$('status-text');
    // Use StatusPhases array index as progress bar value
    UI.ARIAUtils.markAsProgressBar(this.progressBar, 0, StatusPhases.length - 1);
    this.cancelButton = cancelButton;
    UI.ARIAUtils.markAsStatus(this.statusText);

    this.dialog.setDefaultFocusedElement(cancelButton);
    this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
    this.dialog.setMaxContentSize(new UI.Geometry.Size(500, 400));
  }

  private reset(): void {
    this.resetProgressBarClasses();
    clearTimeout(this.scheduledFastFactTimeout as number);

    this.textChangedAt = 0;
    this.fastFactsQueued = FastFacts.map(lazyString => lazyString());
    this.currentPhase = null;
    this.scheduledTextChangeTimeout = null;
    this.scheduledFastFactTimeout = null;
  }

  show(dialogRenderElement: Element): void {
    this.reset();
    this.updateStatus(i18nString(UIStrings.loading));

    const parsedURL = Common.ParsedURL.ParsedURL.fromString(this.inspectedURL);
    const pageHost = parsedURL && parsedURL.host;
    const statusHeader =
        pageHost ? i18nString(UIStrings.auditingS, {PH1: pageHost}) : i18nString(UIStrings.auditingYourWebPage);
    this.renderStatusHeader(statusHeader);
    // @ts-ignore TS expects Document, but gets Element (show takes Element|Document)
    this.dialog.show(dialogRenderElement);
  }

  private renderStatusHeader(statusHeader?: string): void {
    if (this.statusHeader) {
      this.statusHeader.textContent = `${statusHeader}…`;
    }
  }

  hide(): void {
    if (this.dialog.isShowing()) {
      this.dialog.hide();
    }
  }

  setInspectedURL(url: string = ''): void {
    this.inspectedURL = url;
  }

  updateStatus(message: string|null): void {
    if (!message || !this.statusText) {
      return;
    }

    if (message.startsWith('Cancel')) {
      this.commitTextChange(i18nString(UIStrings.cancelling));
      clearTimeout(this.scheduledFastFactTimeout as number);
      return;
    }

    const nextPhase = this.getPhaseForMessage(message);

    // @ts-ignore indexOf null is valid.
    const nextPhaseIndex = StatusPhases.indexOf(nextPhase);

    // @ts-ignore indexOf null is valid.
    const currentPhaseIndex = StatusPhases.indexOf(this.currentPhase);
    if (!nextPhase && !this.currentPhase) {
      this.commitTextChange(i18nString(UIStrings.lighthouseIsWarmingUp));
      clearTimeout(this.scheduledFastFactTimeout as number);
    } else if (nextPhase && (!this.currentPhase || currentPhaseIndex < nextPhaseIndex)) {
      this.currentPhase = nextPhase;
      const text = this.getMessageForPhase(nextPhase);
      this.scheduleTextChange(text);
      this.scheduleFastFactCheck();
      this.resetProgressBarClasses();

      if (this.progressBar) {
        this.progressBar.classList.add(nextPhase.progressBarClass);
        UI.ARIAUtils.setProgressBarValue(this.progressBar, nextPhaseIndex, text);
      }
    }
  }

  private cancel(): void {
    void this.panel.handleRunCancel();
  }

  private getMessageForPhase(phase: StatusPhase): string {
    if (phase.message()) {
      return phase.message();
    }

    const deviceTypeSetting = RuntimeSettings.find(item => item.setting.name === 'lighthouse.device_type');
    const throttleSetting = RuntimeSettings.find(item => item.setting.name === 'lighthouse.throttling');
    const deviceType = deviceTypeSetting ? deviceTypeSetting.setting.get() : '';
    const throttling = throttleSetting ? throttleSetting.setting.get() : '';
    const match = LoadingMessages.find(item => {
      return item.deviceType === deviceType && item.throttling === throttling;
    });

    return match ? match.message() : i18nString(UIStrings.lighthouseIsLoadingYourPage);
  }

  private getPhaseForMessage(message: string): StatusPhase|null {
    return StatusPhases.find(phase => phase.statusMessageRegex.test(message)) || null;
  }

  private resetProgressBarClasses(): void {
    if (this.progressBar) {
      this.progressBar.className = 'lighthouse-progress-bar';
    }
  }

  private scheduleFastFactCheck(): void {
    if (!this.currentPhase || this.scheduledFastFactTimeout) {
      return;
    }

    this.scheduledFastFactTimeout = window.setTimeout(() => {
      this.updateFastFactIfNecessary();
      this.scheduledFastFactTimeout = null;

      this.scheduleFastFactCheck();
    }, 100);
  }

  private updateFastFactIfNecessary(): void {
    const now = performance.now();
    if (now - this.textChangedAt < fastFactRotationInterval) {
      return;
    }
    if (!this.fastFactsQueued.length) {
      return;
    }

    const fastFactIndex = Math.floor(Math.random() * this.fastFactsQueued.length);
    this.scheduleTextChange(
        i18nString(UIStrings.fastFactMessageWithPlaceholder, {PH1: this.fastFactsQueued[fastFactIndex]}));
    this.fastFactsQueued.splice(fastFactIndex, 1);
  }

  private commitTextChange(text: string): void {
    if (!this.statusText) {
      return;
    }
    this.textChangedAt = performance.now();
    this.statusText.textContent = text;
  }

  private scheduleTextChange(text: string): void {
    if (this.scheduledTextChangeTimeout) {
      clearTimeout(this.scheduledTextChangeTimeout);
    }

    const msSinceLastChange = performance.now() - this.textChangedAt;
    const msToTextChange = minimumTextVisibilityDuration - msSinceLastChange;

    this.scheduledTextChangeTimeout = window.setTimeout(() => {
      this.commitTextChange(text);
    }, Math.max(msToTextChange, 0));
  }

  renderBugReport(err: Error): void {
    console.error(err);
    if (this.scheduledFastFactTimeout) {
      window.clearTimeout(this.scheduledFastFactTimeout);
    }

    if (this.scheduledTextChangeTimeout) {
      window.clearTimeout(this.scheduledTextChangeTimeout);
    }

    this.resetProgressBarClasses();

    if (this.progressBar) {
      this.progressBar.classList.add('errored');
    }

    if (this.statusText) {
      this.commitTextChange('');
      UI.UIUtils.createTextChild(this.statusText.createChild('p'), i18nString(UIStrings.ahSorryWeRanIntoAnError));
      if (KnownBugPatterns.some(pattern => pattern.test(err.message))) {
        const message = i18nString(UIStrings.tryToNavigateToTheUrlInAFresh);
        UI.UIUtils.createTextChild(this.statusText.createChild('p'), message);
      } else {
        this.renderBugReportBody(err, this.inspectedURL);
      }
    }
  }

  renderText(statusHeader: string, text: string): void {
    this.renderStatusHeader(statusHeader);
    this.commitTextChange(text);
  }

  toggleCancelButton(show: boolean): void {
    if (this.cancelButton) {
      this.cancelButton.style.visibility = show ? 'visible' : 'hidden';
    }
  }

  private renderBugReportBody(err: Error, auditURL: string): void {
    const chromeVersion = navigator.userAgent.match(/Chrome\/(\S+)/) || ['', 'Unknown'];
    // @ts-ignore Lighthouse sets `friendlyMessage` on certain
    // important errors such as PROTOCOL_TIMEOUT.
    const errorMessage = err.friendlyMessage || err.message;
    const issueBody = `
${errorMessage}
\`\`\`
Channel: DevTools
Initial URL: ${auditURL}
Chrome Version: ${chromeVersion[1]}
Stack Trace: ${err.stack}
\`\`\`
`;
    if (this.statusText) {
      UI.UIUtils.createTextChild(
          this.statusText.createChild('p'), i18nString(UIStrings.ifThisIssueIsReproduciblePlease));
      UI.UIUtils.createTextChild(this.statusText.createChild('code', 'monospace'), issueBody.trim());
    }
  }
}

export const fastFactRotationInterval = 6000;

export const minimumTextVisibilityDuration = 3000;

const KnownBugPatterns: RegExp[] = [
  /PARSING_PROBLEM/,
  /DOCUMENT_REQUEST/,
  /READ_FAILED/,
  /TRACING_ALREADY_STARTED/,
  /^You must provide a url to the runner/,
  /^You probably have multiple tabs open/,
];

export interface StatusPhase {
  id: string;
  progressBarClass: string;
  message: () => Common.UIString.LocalizedString;
  statusMessageRegex: RegExp;
}

export const StatusPhases: StatusPhase[] = [
  {
    id: 'loading',
    progressBarClass: 'loading',
    message: i18nLazyString(UIStrings.lighthouseIsLoadingThePage),
    statusMessageRegex: /^(Loading page|Navigating to)/,
  },
  {
    id: 'gathering',
    progressBarClass: 'gathering',
    message: i18nLazyString(UIStrings.lighthouseIsGatheringInformation),
    statusMessageRegex: /^(Gathering|Computing artifact)/,
  },
  {
    id: 'auditing',
    progressBarClass: 'auditing',
    message: i18nLazyString(UIStrings.almostThereLighthouseIsNow),
    statusMessageRegex: /^Auditing/,
  },
];

const LoadingMessages = [
  {
    deviceType: 'mobile',
    throttling: 'on',
    message: i18nLazyString(UIStrings.lighthouseIsLoadingYourPageWith),
  },
  {
    deviceType: 'desktop',
    throttling: 'on',
    message: i18nLazyString(UIStrings.lighthouseIsLoadingYourPageWithThrottling),
  },
  {
    deviceType: 'mobile',
    throttling: 'off',
    message: i18nLazyString(UIStrings.lighthouseIsLoadingYourPageWithMobile),
  },
  {
    deviceType: 'desktop',
    throttling: 'off',
    message: i18nLazyString(UIStrings.lighthouseIsLoadingThePage),
  },
];

const FastFacts = [
  i18nLazyString(UIStrings.mbTakesAMinimumOfSecondsTo),
  i18nLazyString(UIStrings.rebuildingPinterestPagesFor),
  i18nLazyString(UIStrings.byReducingTheResponseSizeOfJson),
  i18nLazyString(UIStrings.walmartSawAIncreaseInRevenueFor),
  i18nLazyString(UIStrings.ifASiteTakesSecondToBecome),
  i18nLazyString(UIStrings.OfGlobalMobileUsersInWereOnGOrG),
  i18nLazyString(UIStrings.theAverageUserDeviceCostsLess),
  i18nLazyString(UIStrings.SecondsIsTheAverageTimeAMobile),
  i18nLazyString(UIStrings.OfMobilePagesTakeNearlySeconds),
  i18nLazyString(UIStrings.asPageLoadTimeIncreasesFromOne),
  i18nLazyString(UIStrings.asTheNumberOfElementsOnAPage),
  i18nLazyString(UIStrings.OfMobilePagesTakeNearlySeconds),
  i18nLazyString(UIStrings.lighthouseOnlySimulatesMobile),
];