text: // 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.
  
  Audits.StatusView = class {
    /**
     * @param {!Audits.AuditController} controller
     */
    constructor(controller) {
      this._controller = controller;
  
      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 = Audits.StatusView.FastFacts.slice();
      this._currentPhase = null;
      this._scheduledTextChangeTimeout = null;
      this._scheduledFastFactTimeout = null;
  
      this._dialog = new UI.Dialog();
      this._dialog.setDimmed(true);
      this._dialog.setCloseOnEscape(false);
      this._dialog.setOutsideClickCallback(event => event.consume(true));
      this._render();
    }
  
    _render() {
      const dialogRoot = UI.createShadowRootWithCoreStyles(this._dialog.contentElement, 'audits/auditsDialog.css');
      const auditsViewElement = dialogRoot.createChild('div', 'audits-view vbox');
  
      const cancelButton = UI.createTextButton(ls`Cancel`, this._cancel.bind(this));
      const fragment = UI.Fragment.build`
        <div class="audits-view vbox">
          <h2 $="status-header">Auditing your web page\u2026</h2>
          <div class="audits-status vbox" $="status-view">
            <div class="audits-progress-wrapper" $="progress-wrapper">
              <div class="audits-progress-bar" $="progress-bar"></div>
            </div>
            <div class="audits-status-text" $="status-text"></div>
          </div>
          ${cancelButton}
        </div>
      `;
  
      auditsViewElement.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');
      this._cancelButton = cancelButton;
      UI.ARIAUtils.markAsStatus(this._statusText);
  
      this._dialog.setDefaultFocusedElement(cancelButton);
      this._dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
      this._dialog.setMaxContentSize(new UI.Size(500, 400));
    }
  
    _reset() {
      this._resetProgressBarClasses();
      clearTimeout(this._scheduledFastFactTimeout);
  
      this._textChangedAt = 0;
      this._fastFactsQueued = Audits.StatusView.FastFacts.slice();
      this._currentPhase = null;
      this._scheduledTextChangeTimeout = null;
      this._scheduledFastFactTimeout = null;
    }
  
    /**
     * @param {!Element} dialogRenderElement
     */
    show(dialogRenderElement) {
      this._reset();
      this.updateStatus(ls`Loading\u2026`);
  
      const parsedURL = this._inspectedURL.asParsedURL();
      const pageHost = parsedURL && parsedURL.host;
      const statusHeader = pageHost ? ls`Auditing ${pageHost}` : ls`Auditing your web page`;
      this._renderStatusHeader(statusHeader);
      this._dialog.show(dialogRenderElement);
    }
  
    /**
     * @param {string=} statusHeader
     */
    _renderStatusHeader(statusHeader) {
      this._statusHeader.textContent = `${statusHeader}\u2026`;
    }
  
    hide() {
      if (this._dialog.isShowing())
        this._dialog.hide();
    }
  
    /**
     * @param {string=} url
     */
    setInspectedURL(url = '') {
      this._inspectedURL = url;
    }
  
    /**
     * @param {?string} message
     */
    updateStatus(message) {
      if (!message || !this._statusText)
        return;
  
      if (message.startsWith('Cancel')) {
        this._commitTextChange(Common.UIString('Cancelling\u2026'));
        clearTimeout(this._scheduledFastFactTimeout);
        return;
      }
  
      const nextPhase = this._getPhaseForMessage(message);
      if (!nextPhase && !this._currentPhase) {
        this._commitTextChange(Common.UIString('Lighthouse is warming up\u2026'));
        clearTimeout(this._scheduledFastFactTimeout);
      } else if (nextPhase && (!this._currentPhase || this._currentPhase.order < nextPhase.order)) {
        this._currentPhase = nextPhase;
        this._scheduleTextChange(this._getMessageForPhase(nextPhase));
        this._scheduleFastFactCheck();
        this._resetProgressBarClasses();
        this._progressBar.classList.add(nextPhase.progressBarClass);
      }
    }
  
    _cancel() {
      this._controller.dispatchEventToListeners(Audits.Events.RequestAuditCancel);
    }
  
    /**
     * @param {!Audits.StatusView.StatusPhases} phase
     * @return {string}
     */
    _getMessageForPhase(phase) {
      if (phase.message)
        return phase.message;
  
      const deviceType = Audits.RuntimeSettings.find(item => item.setting.name === 'audits.device_type').setting.get();
      const throttling = Audits.RuntimeSettings.find(item => item.setting.name === 'audits.throttling').setting.get();
      const match = Audits.StatusView.LoadingMessages.find(item => {
        return item.deviceType === deviceType && item.throttling === throttling;
      });
  
      return match ? match.message : ls`Lighthouse is loading your page`;
    }
  
    /**
     * @param {string} message
     * @return {?Audits.StatusView.StatusPhases}
     */
    _getPhaseForMessage(message) {
      return Audits.StatusView.StatusPhases.find(phase => message.startsWith(phase.statusMessagePrefix));
    }
  
    _resetProgressBarClasses() {
      if (!this._progressBar)
        return;
  
      this._progressBar.className = 'audits-progress-bar';
    }
  
    _scheduleFastFactCheck() {
      if (!this._currentPhase || this._scheduledFastFactTimeout)
        return;
  
      this._scheduledFastFactTimeout = setTimeout(() => {
        this._updateFastFactIfNecessary();
        this._scheduledFastFactTimeout = null;
  
        this._scheduleFastFactCheck();
      }, 100);
    }
  
    _updateFastFactIfNecessary() {
      const now = performance.now();
      if (now - this._textChangedAt < Audits.StatusView.fastFactRotationInterval)
        return;
      if (!this._fastFactsQueued.length)
        return;
  
      const fastFactIndex = Math.floor(Math.random() * this._fastFactsQueued.length);
      this._scheduleTextChange(ls`\ud83d\udca1 ${this._fastFactsQueued[fastFactIndex]}`);
      this._fastFactsQueued.splice(fastFactIndex, 1);
    }
  
    /**
     * @param {string} text
     */
    _commitTextChange(text) {
      if (!this._statusText)
        return;
      this._textChangedAt = performance.now();
      this._statusText.textContent = text;
    }
  
    /**
     * @param {string} text
     */
    _scheduleTextChange(text) {
      if (this._scheduledTextChangeTimeout)
        clearTimeout(this._scheduledTextChangeTimeout);
  
      const msSinceLastChange = performance.now() - this._textChangedAt;
      const msToTextChange = Audits.StatusView.minimumTextVisibilityDuration - msSinceLastChange;
  
      this._scheduledTextChangeTimeout = setTimeout(() => {
        this._commitTextChange(text);
      }, Math.max(msToTextChange, 0));
    }
  
    /**
     * @param {!Error} err
     */
    renderBugReport(err) {
      console.error(err);
      clearTimeout(this._scheduledFastFactTimeout);
      clearTimeout(this._scheduledTextChangeTimeout);
      this._resetProgressBarClasses();
      this._progressBar.classList.add('errored');
  
      this._commitTextChange('');
      this._statusText.createChild('p').createTextChild(Common.UIString('Ah, sorry! We ran into an error.'));
      if (Audits.StatusView.KnownBugPatterns.some(pattern => pattern.test(err.message))) {
        const message = Common.UIString(
            'Try to navigate to the URL in a fresh Chrome profile without any other tabs or extensions open and try again.');
        this._statusText.createChild('p').createTextChild(message);
      } else {
        this._renderBugReportBody(err, this._inspectedURL);
      }
    }
  
    /**
     * @param {string} statusHeader
     * @param {string} text
     */
    renderText(statusHeader, text) {
      this._renderStatusHeader(statusHeader);
      this._commitTextChange(text);
    }
  
    /**
     * @param {boolean} show
     */
    toggleCancelButton(show) {
      this._cancelButton.style.visibility = show ? 'visible' : 'hidden';
    }
  
    /**
     * @param {!Error} err
     * @param {string} auditURL
     */
    _renderBugReportBody(err, auditURL) {
      const issueBody = `
  ${err.message}
  \`\`\`
  Channel: DevTools
  Initial URL: ${auditURL}
  Chrome Version: ${navigator.userAgent.match(/Chrome\/(\S+)/)[1]}
  Stack Trace: ${err.stack}
  \`\`\`
  `;
      this._statusText.createChild('p').createTextChild(
          ls`If this issue is reproducible, please report it at the Lighthouse GitHub repo.`);
      this._statusText.createChild('code', 'monospace').createTextChild(issueBody.trim());
    }
  };
  
  
  /** @type {!Array.<!RegExp>} */
  Audits.StatusView.KnownBugPatterns = [
    /PARSING_PROBLEM/,
    /DOCUMENT_REQUEST/,
    /READ_FAILED/,
    /TRACING_ALREADY_STARTED/,
    /^You must provide a url to the runner/,
    /^You probably have multiple tabs open/,
  ];
  
  /** @typedef {{message: string, progressBarClass: string, order: number}} */
  Audits.StatusView.StatusPhases = [
    {
      id: 'loading',
      progressBarClass: 'loading',
      statusMessagePrefix: 'Loading page',
      order: 10,
    },
    {
      id: 'gathering',
      progressBarClass: 'gathering',
      message: ls`Lighthouse is gathering information about the page to compute your score.`,
      statusMessagePrefix: 'Gathering',
      order: 20,
    },
    {
      id: 'auditing',
      progressBarClass: 'auditing',
      message: ls`Almost there! Lighthouse is now generating your report.`,
      statusMessagePrefix: 'Auditing',
      order: 30,
    }
  ];
  
  /** @typedef {{message: string, deviceType: string, throttling: string}} */
  Audits.StatusView.LoadingMessages = [
    {
      deviceType: 'mobile',
      throttling: 'on',
      message: ls`Lighthouse is loading your page with throttling to measure performance on a mobile device on 3G.`,
    },
    {
      deviceType: 'desktop',
      throttling: 'on',
      message: ls`Lighthouse is loading your page with throttling to measure performance on a slow desktop on 3G.`,
    },
    {
      deviceType: 'mobile',
      throttling: 'off',
      message: ls`Lighthouse is loading your page with mobile emulation.`,
    },
    {
      deviceType: 'desktop',
      throttling: 'off',
      message: ls`Lighthouse is loading your page.`,
    },
  ];
  
  Audits.StatusView.FastFacts = [
    ls`1MB takes a minimum of 5 seconds to download on a typical 3G connection [Source: WebPageTest and DevTools 3G definition].`,
    ls`Rebuilding Pinterest pages for performance increased conversion rates by 15% [Source: WPO Stats]`,
    ls`BBC has seen a loss of 10% of their users for every extra second of page load [Source: WPO Stats]`,
    ls`By reducing the response size of JSON needed for displaying comments, Instagram saw increased impressions [Source: WPO Stats]`,
    ls`Walmart saw a 1% increase in revenue for every 100ms improvement in page load [Source: WPO Stats]`,
    ls`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]`,
    ls`75% of global mobile users in 2016 were on 2G or 3G [Source: GSMA Mobile]`,
    ls`The average user device costs less than 200 USD. [Source: International Data Corporation]`,
    ls`53% of all site visits are abandoned if page load takes more than 3 seconds [Source: Google DoubleClick blog]`,
    ls`19 seconds is the average time a mobile web page takes to load on a 3G connection [Source: Google DoubleClick blog]`,
    ls`14 seconds is the average time a mobile web page takes to load on a 4G connection [Source: Google DoubleClick blog]`,
    ls`70% of mobile pages take nearly 7 seconds for the visual content above the fold to display on the screen. [Source: Think with Google]`,
    ls`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]`,
    ls`As the number of elements on a page increases from 400 to 6,000, the probability of conversion drops 95%. [Source: Think with Google]`,
    ls`70% of mobile pages weigh over 1MB, 36% over 2MB, and 12% over 4MB. [Source: Think with Google]`,
    ls`Lighthouse only simulates mobile performance; to measure performance on a real device, try WebPageTest.org [Source: Lighthouse team]`,
  ];
  
  /** @const */
  Audits.StatusView.fastFactRotationInterval = 6000;
  /** @const */
  Audits.StatusView.minimumTextVisibilityDuration = 3000;
  