lighthouse 9.6.8 → 10.0.0

package/core/audits/autocomplete.js

@@ -0,0 +1,290 @@
+/**
+ * @license Copyright 2020 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.
+ */
+
+/**
+ * @fileoverview Audits a page to make sure all input elements
+ *  have an autocomplete attribute set.
+ * See https://docs.google.com/document/d/1yiulNnV8uEy1jPaAEmWeHxHcQOzxpqvAV4hOFpXLJ1M/edit?usp=sharing
+ */
+
+
+import log from 'lighthouse-logger';
+
+import {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that lets the user know if there are any missing or invalid autocomplete attributes on page inputs. This descriptive title is shown to users when all input attributes have a valid autocomplete attribute. */
+  title: '`<input>` elements correctly use `autocomplete`',
+  /** Title of a Lighthouse audit that lets the user know if there are any missing or invalid autocomplete attributes on page inputs. This descriptive title is shown to users when one or more inputs do not have autocomplete set or has an invalid autocomplete set. */
+  failureTitle: '`<input>` elements do not have correct `autocomplete` attributes',
+  /** Description of a Lighthouse audit that lets the user know if there are any missing or invalid autocomplete attributes on page inputs. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: '`autocomplete` helps users submit forms quicker. To reduce user ' +
+   'effort, consider enabling by setting the `autocomplete` ' +
+   'attribute to a valid value.' +
+  ' [Learn more about `autocomplete` in forms](https://developers.google.com/web/fundamentals/design-and-ux/input/forms#use_metadata_to_enable_auto-complete)',
+  /** Label for a column in a data table; entries will be the autocomplete token suggestions based on heuristics. */
+  columnSuggestions: 'Suggested Token',
+  /** Label for a column in a data table; entries will be the incorrect optional autocomplete tokens or prompting user to review them. */
+  columnCurrent: 'Current Value',
+  /**
+   * @description Warning that autocomplete token is invalid.
+   * @example {invalid-token name} token
+   * @example {<autocomplete="invalid-token name">} snippet
+   */
+  warningInvalid: '`autocomplete` token(s): "{token}" is invalid in {snippet}',
+  /**
+   * @description Warning that autocomplete token order is invalid.
+   * @example {mobile section-red cc-name} tokens
+   * @example {<autocomplete="mobile section-red cc-name">} snippet
+   */
+  warningOrder: 'Review order of tokens: "{tokens}" in {snippet}',
+  /** Entry for under the Autocomplete Suggested Token Column that tells users to review the ordering of their tokens if they are valid. */
+  reviewOrder: 'Review order of tokens',
+  /** Entry for under the Autocomplete Suggested Token Column that appears when we have no autocomplete suggestion. */
+  manualReview: 'Requires manual review',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+/** @type {string[]} This array contains all acceptable autocomplete attributes from the WHATWG standard. More found at https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill */
+const validAutocompleteTokens = ['name', 'honorific-prefix', 'given-name',
+  'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'username', 'new-password',
+  'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address',
+  'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3',
+  'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name',
+  'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp',
+  'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency',
+  'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year',
+  'sex', 'url', 'photo', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'on',
+  'tel-local', 'tel-local-prefix', 'tel-local-suffix', 'tel-extension', 'email', 'impp', 'off',
+  'additional-name-initial', 'home', 'work', 'mobile', 'fax', 'pager', 'shipping', 'billing'];
+
+/** @type {string[]} This array contains all autofull suggestions that have no prediction tied to it. Autofill predictions found at https://source.chromium.org/chromium/chromium/src/+/main:components/autofill/core/browser/field_types.h;l=26 */
+const noPrediction = ['NO_SERVER_DATA', 'UNKNOWN_TYPE', 'EMPTY_TYPE', 'HTML_TYPE_UNSPECIFIED',
+  'HTML_TYPE_UNRECOGNIZED'];
+
+/** This mapping contains all autofill predictions to corresponding autocomplete attributes. Autofill predictions are found at https://source.chromium.org/chromium/chromium/src/+/main:components/autofill/core/browser/field_types.h;l=34*/
+const predictionTypesToTokens = {
+  'NO_SERVER_DATA': str_(UIStrings.manualReview),
+  'UNKNOWN_TYPE': str_(UIStrings.manualReview),
+  'EMPTY_TYPE': str_(UIStrings.manualReview),
+  'NAME_FIRST': 'given-name',
+  'NAME_MIDDLE': 'additional-name',
+  'NAME_LAST': 'family-name',
+  'NAME_FULL': 'name',
+  'NAME_MIDDLE_INITIAL': 'additional-name-initial',
+  'NAME_SUFFIX': 'honorific-suffix',
+  'NAME_BILLING_FIRST': 'billing given-name',
+  'NAME_BILLING_MIDDLE': 'billing additional-name',
+  'NAME_BILLING_LAST': 'billing family-name',
+  'NAME_BILLING_MIDDLE_INITIAL': 'billing additional-name-initial',
+  'NAME_BILLING_FULL': 'billing name',
+  'NAME_BILLING_SUFFIX': 'billing honorific-suffix',
+  'EMAIL_ADDRESS': 'email',
+  'MERCHANT_EMAIL_SIGNUP': 'email',
+  'PHONE_HOME_NUMBER': 'tel-local',
+  'PHONE_HOME_CITY_CODE': 'tel-area-code',
+  'PHONE_HOME_COUNTRY_CODE': 'tel-country-code',
+  'PHONE_HOME_CITY_AND_NUMBER': 'tel-national',
+  'PHONE_HOME_WHOLE_NUMBER': 'tel',
+  'PHONE_HOME_EXTENSION': 'tel-extension',
+  'PHONE_BILLING_NUMBER': 'billing tel-local',
+  'PHONE_BILLING_CITY_CODE': 'billing tel-area-code',
+  'PHONE_BILLING_COUNTRY_CODE': 'tel-country-code',
+  'PHONE_BILLING_CITY_AND_NUMBER': 'tel-national',
+  'PHONE_BILLING_WHOLE_NUMBER': 'tel',
+  'ADDRESS_HOME_STREET_ADDRESS': 'street-address',
+  'ADDRESS_HOME_LINE1': 'address-line1',
+  'ADDRESS_HOME_LINE2': 'address-line2',
+  'ADDRESS_HOME_LINE3': 'address-line3',
+  'ADDRESS_HOME_STATE': 'address-level1',
+  'ADDRESS_HOME_CITY': 'address-level2',
+  'ADDRESS_HOME_DEPENDENT_LOCALITY': 'address-level3',
+  'ADDRESS_HOME_ZIP': 'postal-code',
+  'ADDRESS_HOME_COUNTRY': 'country-name',
+  'ADDRESS_BILLING_DEPENDENT_LOCALITY': 'billing address-level3',
+  'ADDRESS_BILLING_STREET_ADDRESS': 'billing street-address',
+  'ADDRESS_BILLING_LINE1': 'billing address-line1',
+  'ADDRESS_BILLING_LINE2': 'billing address-line2',
+  'ADDRESS_BILLING_LINE3': 'billing address-line3',
+  'ADDRESS_BILLING_APT_NUM': 'billing address-level3',
+  'ADDRESS_BILLING_CITY': 'billing address-level2',
+  'ADDRESS_BILLING_STATE': 'billing address-level1',
+  'ADDRESS_BILLING_ZIP': 'billing postal-code',
+  'ADDRESS_BILLING_COUNTRY': 'billing country-name',
+  'CREDIT_CARD_NAME_FULL': 'cc-name',
+  'CREDIT_CARD_NAME_FIRST': 'cc-given-name',
+  'CREDIT_CARD_NAME_LAST': 'cc-family-name',
+  'CREDIT_CARD_NUMBER': 'cc-number',
+  'CREDIT_CARD_EXP_MONTH': 'cc-exp-month',
+  'CREDIT_CARD_EXP_2_DIGIT_YEAR': 'cc-exp-year',
+  'CREDIT_CARD_EXP_4_DIGIT_YEAR': 'cc-exp-year',
+  'CREDIT_CARD_EXP_DATE_2_DIGIT_YEAR': 'cc-exp',
+  'CREDIT_CARD_EXP_DATE_4_DIGIT_YEAR': 'cc-exp',
+  'CREDIT_CARD_TYPE': 'cc-type',
+  'CREDIT_CARD_VERIFICATION_CODE': 'cc-csc',
+  'COMPANY_NAME': 'organization',
+  'PASSWORD': 'current-password',
+  'ACCOUNT_CREATION_PASSWORD': 'new-password',
+  'HTML_TYPE_UNSPECIFIED': str_(UIStrings.manualReview),
+  'HTML_TYPE_NAME': 'name',
+  'HTML_TYPE_HONORIFIC_PREFIX': 'honorific-prefix',
+  'HTML_TYPE_GIVEN_NAME': 'given-name',
+  'HTML_TYPE_ADDITIONAL_NAME': 'additional-name',
+  'HTML_TYPE_FAMILY_NAME': 'family-name',
+  'HTML_TYPE_ORGANIZATION': 'organization',
+  'HTML_TYPE_STREET_ADDRESS': 'street-address',
+  'HTML_TYPE_ADDRESS_LINE1': 'address-line1',
+  'HTML_TYPE_ADDRESS_LINE2': 'address-line2',
+  'HTML_TYPE_ADDRESS_LINE3': 'address-line3',
+  'HTML_TYPE_ADDRESS_LEVEL1': 'address-level1',
+  'HTML_TYPE_ADDRESS_LEVEL2': 'address-level2',
+  'HTML_TYPE_ADDRESS_LEVEL3': 'address-level3',
+  'HTML_TYPE_COUNTRY_CODE': 'tel-country-code',
+  'HTML_TYPE_COUNTRY_NAME': 'country-name',
+  'HTML_TYPE_POSTAL_CODE': 'postal-code',
+  'HTML_TYPE_FULL_ADDRESS': 'street-address',
+  'HTML_TYPE_CREDIT_CARD_NAME_FULL': 'cc-name',
+  'HTML_TYPE_CREDIT_CARD_NAME_FIRST': 'cc-given-name',
+  'HTML_TYPE_CREDIT_CARD_NAME_LAST': 'cc-family-name',
+  'HTML_TYPE_CREDIT_CARD_NUMBER': 'cc-number',
+  'HTML_TYPE_CREDIT_CARD_EXP': 'cc-exp',
+  'HTML_TYPE_CREDIT_CARD_EXP_MONTH': 'cc-exp-month',
+  'HTML_TYPE_CREDIT_CARD_EXP_YEAR': 'cc-exp-year',
+  'HTML_TYPE_CREDIT_CARD_VERIFICATION_CODE': 'cc-csc',
+  'HTML_TYPE_CREDIT_CARD_TYPE': 'cc-csc',
+  'HTML_TYPE_TEL': 'tel',
+  'HTML_TYPE_TEL_COUNTRY_CODE': 'tel-country-code',
+  'HTML_TYPE_TEL_NATIONAL': 'tel-national',
+  'HTML_TYPE_TEL_AREA_CODE': 'tel-area-code',
+  'HTML_TYPE_TEL_LOCAL': 'tel-local',
+  'HTML_TYPE_TEL_LOCAL_PREFIX': 'tel-local-prefix',
+  'HTML_TYPE_TEL_LOCAL_SUFFIX': 'tel-local-suffix',
+  'HTML_TYPE_TEL_EXTENSION': 'tel-extension',
+  'HTML_TYPE_EMAIL': 'email',
+  'HTML_TYPE_ADDITIONAL_NAME_INITIAL': 'additional-name-initial',
+  'HTML_TYPE_CREDIT_CARD_EXP_DATE_2_DIGIT_YEAR': 'cc-exp-year',
+  'HTML_TYPE_CREDIT_CARD_EXP_DATE_4_DIGIT_YEAR': 'cc-exp-year',
+  'HTML_TYPE_CREDIT_CARD_EXP_2_DIGIT_YEAR': 'cc-exp-year',
+  'HTML_TYPE_CREDIT_CARD_EXP_4_DIGIT_YEAR': 'cc-exp-year',
+  'HTML_TYPE_UPI_VPA': str_(UIStrings.manualReview),
+  'HTML_TYPE_ONE_TIME_CODE': 'one-time-code',
+  'HTML_TYPE_UNRECOGNIZED': str_(UIStrings.manualReview),
+  'HTML_TYPE_TRANSACTION_AMOUNT': 'transaction-amount',
+  'HTML_TYPE_TRANSACTION_CURRENCY': 'transaction-currency',
+};
+
+/**
+ * The autocomplete attribute can have multiple tokens in it. All tokens should be valid and in the correct order.
+ * For example, cc-namez is an invalid token. tel mobile shipping section-foo are valid tokens, but out of order. The spec defines correct ordering, but in short, correct order is:
+ *
+ * [section-*] [shipping|billing] [home|work|mobile|fax|pager] <autofill field name>
+ *
+ * If either of these invalid situations, the autocomplete property will be an empty string. */
+class AutocompleteAudit extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'autocomplete',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Inputs'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts.InputElement} input
+   * @return {{hasValidTokens: boolean, isValidOrder?: boolean}}
+   */
+  static checkAttributeValidity(input) {
+    if (!input.autocomplete.attribute) return {hasValidTokens: false};
+    const tokenArray = input.autocomplete.attribute.split(' ');
+    for (const token of tokenArray) {
+      // A `section-` prefix indicates a unique autofill scope.
+      // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#:~:text=section-
+      if (token.slice(0, 8) === 'section-') continue;
+      if (validAutocompleteTokens.includes(token)) continue;
+      return {hasValidTokens: false};
+    }
+    // If all autocomplete tokens are valid but there is still no property attribute, then that means the tokens are out of order.
+    // https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/#all-the-tokens
+    if (!input.autocomplete.property) return {hasValidTokens: true, isValidOrder: false};
+    return {hasValidTokens: true, isValidOrder: true};
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {LH.Audit.Product}
+   */
+  static audit(artifacts) {
+    const failingFormsData = [];
+    const warnings = [];
+    let foundPrediction = false;
+    for (const input of artifacts.Inputs.inputs) {
+      const validity = this.checkAttributeValidity(input);
+      if (validity.hasValidTokens && validity.isValidOrder) continue;
+      if (!input.autocomplete.prediction) continue;
+      if (noPrediction.includes(input.autocomplete.prediction) &&
+        !input.autocomplete.attribute) continue;
+
+      foundPrediction = true;
+
+      // @ts-ignore
+      let suggestion = predictionTypesToTokens[input.autocomplete.prediction];
+      // This is here to satisfy typescript because the possible null value of autocomplete.attribute is not compatible with Audit details.
+      if (!input.autocomplete.attribute) input.autocomplete.attribute = '';
+      // Warning is created because while there is an autocomplete attribute, the autocomplete property does not exsist, thus the attribute's value is invalid.
+      if (input.autocomplete.attribute) {
+        warnings.push(str_(UIStrings.warningInvalid, {token: input.autocomplete.attribute,
+          snippet: input.node.snippet}));
+      }
+      if (validity.isValidOrder === false) {
+        warnings.push(str_(UIStrings.warningOrder, {tokens: input.autocomplete.attribute,
+          snippet: input.node.snippet}));
+        suggestion = UIStrings.reviewOrder;
+      }
+      // If the autofill prediction is not in our autofill suggestion mapping, then we warn
+      if (!(input.autocomplete.prediction in predictionTypesToTokens) &&
+          validity.isValidOrder) {
+        log.warn(`Autocomplete prediction (${input.autocomplete.prediction})
+            not found in our mapping`);
+        continue;
+      }
+      failingFormsData.push({
+        node: Audit.makeNodeItem(input.node),
+        suggestion: suggestion,
+        current: input.autocomplete.attribute,
+      });
+    }
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'node', valueType: 'node', label: str_(i18n.UIStrings.columnFailingElem)},
+      {key: 'current', valueType: 'text', label: str_(UIStrings.columnCurrent)},
+      {key: 'suggestion', valueType: 'text', label: str_(UIStrings.columnSuggestions)},
+    ];
+    const details = Audit.makeTableDetails(headings, failingFormsData);
+    let displayValue;
+    if (failingFormsData.length > 0) {
+      displayValue = str_(i18n.UIStrings.displayValueElementsFound,
+        {nodeCount: failingFormsData.length});
+    }
+    return {
+      score: (failingFormsData.length > 0) ? 0 : 1,
+      notApplicable: !foundPrediction,
+      displayValue,
+      details,
+      warnings,
+    };
+  }
+}
+
+export default AutocompleteAudit;
+export {UIStrings};

package/core/audits/bf-cache.d.ts

@@ -0,0 +1,21 @@
+export default BFCache;
+declare class BFCache extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+    const actionableFailureType: string;
+    const notActionableFailureType: string;
+    const supportPendingFailureType: string;
+    const failureReasonColumn: string;
+    const failureTypeColumn: string;
+    const displayValue: string;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=bf-cache.d.ts.map

package/core/audits/bf-cache.js

@@ -0,0 +1,120 @@
+/**
+ * @license Copyright 2022 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 {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {NotRestoredReasonDescription} from '../lib/bf-cache-strings.js';
+
+/* eslint-disable max-len */
+const UIStrings = {
+  /** Title of a diagnostic Lighthouse audit that identifies when the back/forward cache is being used. "back/forward" refers to the back and forward buttons found in modern browsers. This title is shown to users if the back/forward cache was used, or if the there was no attempt to restore the page from the back/forward cache. */
+  title: `Page didn't prevent back/forward cache restoration`,
+  /** Title of a diagnostic Lighthouse audit that identifies when the back/forward cache is being used. "back/forward" refers to the back and forward buttons found in modern browsers. This title is shown to users if the page attempted to restore from the back/forward cache but the back/forward cache was not used. */
+  failureTitle: 'Page prevented back/forward cache restoration',
+  /** Description of a diagnostic Lighthouse audit that identifies when the back/forward cache is being used. "back/forward" refers to the back and forward buttons found in modern browsers. */
+  description: 'Many navigations are performed by going back to a previous page, or forwards again. The back/forward cache (bfcache) can speed up these return navigations. [Learn more about the bfcache](https://developer.chrome.com/docs/lighthouse/performance/bf-cache/)',
+  /** Failure type for an error that the user should be able to address themselves. Shown in a table column with other failure types. */
+  actionableFailureType: 'Actionable',
+  /** Failure type for an error that the user cannot address in the page's code. Shown in a table column with other failure types. */
+  notActionableFailureType: 'Not actionable',
+  /** Failure type for an error caused by missing browser support. Shown in a table column with other failure types. */
+  supportPendingFailureType: 'Pending browser support',
+  /** Label for a column in a data table; entries in the column will be a string explaining why a failure occurred. */
+  failureReasonColumn: 'Failure reason',
+  /** Label for a column in a data table; entries in the column will be a string representing the type of failure preventing the back/forward cache from being used. */
+  failureTypeColumn: 'Failure type',
+  /**
+   * @description [ICU Syntax] Label for an audit identifying the number of back/forward cache failure reasons found in the page.
+   */
+  displayValue: `{itemCount, plural,
+    =1 {1 failure reason}
+    other {# failure reasons}
+    }`,
+};
+/* eslint-enable max-len */
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+/** @type {LH.Crdp.Page.BackForwardCacheNotRestoredReasonType[]} */
+const ORDERED_FAILURE_TYPES = ['PageSupportNeeded', 'SupportPending', 'Circumstantial'];
+
+/** @type {Record<LH.Crdp.Page.BackForwardCacheNotRestoredReasonType, string | LH.IcuMessage>} */
+const FAILURE_TYPE_TO_STRING = {
+  PageSupportNeeded: str_(UIStrings.actionableFailureType),
+  Circumstantial: str_(UIStrings.notActionableFailureType),
+  SupportPending: str_(UIStrings.supportPendingFailureType),
+};
+
+class BFCache extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'bf-cache',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      supportedModes: ['navigation', 'timespan'],
+      requiredArtifacts: ['BFCacheFailures'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts) {
+    const failures = artifacts.BFCacheFailures;
+    if (!failures.length) return {score: 1};
+
+    // TODO: Analyze more than one bf cache failure.
+    const {notRestoredReasonsTree} = failures[0];
+
+    /** @type {LH.Audit.Details.TableItem[]} */
+    const results = [];
+
+    for (const failureType of ORDERED_FAILURE_TYPES) {
+      const reasonsMap = notRestoredReasonsTree[failureType];
+
+      for (const [reason, frameUrls] of Object.entries(reasonsMap)) {
+        results.push({
+          reason: NotRestoredReasonDescription[reason]?.name ?? reason,
+          failureType: FAILURE_TYPE_TO_STRING[failureType],
+          subItems: {
+            type: 'subitems',
+            items: frameUrls.map(frameUrl => ({frameUrl})),
+          },
+          // Include hidden protocol reason code for debugging.
+          protocolReason: reason,
+        });
+      }
+    }
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      /* eslint-disable max-len */
+      {key: 'reason', valueType: 'text', subItemsHeading: {key: 'frameUrl', valueType: 'url'}, label: str_(UIStrings.failureReasonColumn)},
+      {key: 'failureType', valueType: 'text', label: str_(UIStrings.failureTypeColumn)},
+      /* eslint-enable max-len */
+    ];
+
+    const details = Audit.makeTableDetails(headings, results);
+
+    const displayValue = results.length ?
+      str_(UIStrings.displayValue, {itemCount: results.length}) :
+      undefined;
+
+    return {
+      score: results.length ? 0 : 1,
+      displayValue,
+      details,
+    };
+  }
+}
+
+export default BFCache;
+export {UIStrings};

package/core/audits/bootup-time.d.ts

@@ -0,0 +1,26 @@
+export default BootupTime;
+declare class BootupTime extends Audit {
+    /**
+     * @return {LH.Audit.ScoreOptions & {thresholdInMs: number}}
+     */
+    static get defaultOptions(): import("../../types/audit.js").default.ScoreOptions & {
+        thresholdInMs: number;
+    };
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+    const columnTotal: string;
+    const columnScriptEval: string;
+    const columnScriptParse: string;
+    const chromeExtensionsWarning: string;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=bootup-time.d.ts.map

package/core/audits/bootup-time.js

@@ -0,0 +1,151 @@
+/**
+ * @license Copyright 2017 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 {Audit} from './audit.js';
+import {taskGroups} from '../lib/tracehouse/task-groups.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {NetworkRecords} from '../computed/network-records.js';
+import {MainThreadTasks} from '../computed/main-thread-tasks.js';
+import {getExecutionTimingsByURL} from '../lib/tracehouse/task-summary.js';
+
+const UIStrings = {
+  /** Title of a diagnostic audit that provides detail on the time spent executing javascript files during the load. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
+  title: 'JavaScript execution time',
+  /** Title of a diagnostic audit that provides detail on the time spent executing javascript files during the load. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */
+  failureTitle: 'Reduce JavaScript execution time',
+  /** Description of a Lighthouse audit that tells the user that they should reduce the amount of time spent executing javascript and one method of doing so. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Consider reducing the time spent parsing, compiling, and executing JS. ' +
+    'You may find delivering smaller JS payloads helps with this. ' +
+    '[Learn how to reduce Javascript execution time](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/).',
+  /** Label for the total time column in a data table; entries will be the number of milliseconds spent executing per resource loaded by the page. */
+  columnTotal: 'Total CPU Time',
+  /** Label for a time column in a data table; entries will be the number of milliseconds spent evaluating script for every script loaded by the page. */
+  columnScriptEval: 'Script Evaluation',
+  /** Label for a time column in a data table; entries will be the number of milliseconds spent parsing script files for every script loaded by the page. */
+  columnScriptParse: 'Script Parse',
+  /** A message displayed in a Lighthouse audit result warning that Chrome extensions on the user's system substantially affected Lighthouse's measurements and instructs the user on how to run again without those extensions. */
+  chromeExtensionsWarning: 'Chrome extensions negatively affected this page\'s load performance. ' +
+    'Try auditing the page in incognito mode or from a Chrome profile without extensions.',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class BootupTime extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'bootup-time',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
+    };
+  }
+
+  /**
+   * @return {LH.Audit.ScoreOptions & {thresholdInMs: number}}
+   */
+  static get defaultOptions() {
+    return {
+      // see https://www.desmos.com/calculator/ynl8fzh1wd
+      // <500ms ~= 100, >1.3s is yellow, >3.5s is red
+      p10: 1282,
+      median: 3500,
+      thresholdInMs: 50,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const settings = context.settings || {};
+    const trace = artifacts.traces[BootupTime.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[BootupTime.DEFAULT_PASS];
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    const tasks = await MainThreadTasks.request(trace, context);
+    const multiplier = settings.throttlingMethod === 'simulate' ?
+      settings.throttling.cpuSlowdownMultiplier : 1;
+
+    const executionTimings = getExecutionTimingsByURL(tasks, networkRecords);
+
+    let hadExcessiveChromeExtension = false;
+    let totalBootupTime = 0;
+    const results = Array.from(executionTimings)
+      .map(([url, timingByGroupId]) => {
+        // Add up the totalExecutionTime for all the taskGroups
+        let totalExecutionTimeForURL = 0;
+        for (const [groupId, timespanMs] of Object.entries(timingByGroupId)) {
+          timingByGroupId[groupId] = timespanMs * multiplier;
+          totalExecutionTimeForURL += timespanMs * multiplier;
+        }
+
+        const scriptingTotal = timingByGroupId[taskGroups.scriptEvaluation.id] || 0;
+        const parseCompileTotal = timingByGroupId[taskGroups.scriptParseCompile.id] || 0;
+
+        // Add up all the JavaScript time of shown URLs
+        if (totalExecutionTimeForURL >= context.options.thresholdInMs) {
+          totalBootupTime += scriptingTotal + parseCompileTotal;
+        }
+
+        hadExcessiveChromeExtension = hadExcessiveChromeExtension ||
+          (url.startsWith('chrome-extension:') && scriptingTotal > 100);
+
+        return {
+          url: url,
+          total: totalExecutionTimeForURL,
+          // Highlight the JavaScript task costs
+          scripting: scriptingTotal,
+          scriptParseCompile: parseCompileTotal,
+        };
+      })
+      .filter(result => result.total >= context.options.thresholdInMs)
+      .sort((a, b) => b.total - a.total);
+
+
+    // TODO: consider moving this to core gathering so you don't need to run the audit for warning
+    let runWarnings;
+    if (hadExcessiveChromeExtension) {
+      runWarnings = [str_(UIStrings.chromeExtensionsWarning)];
+    }
+
+    const summary = {wastedMs: totalBootupTime};
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+      {key: 'total', granularity: 1, valueType: 'ms', label: str_(UIStrings.columnTotal)},
+      {key: 'scripting', granularity: 1, valueType: 'ms', label: str_(UIStrings.columnScriptEval)},
+      {key: 'scriptParseCompile', granularity: 1, valueType: 'ms',
+        label: str_(UIStrings.columnScriptParse)},
+    ];
+
+    const details = BootupTime.makeTableDetails(headings, results, summary);
+
+    const score = Audit.computeLogNormalScore(
+      {p10: context.options.p10, median: context.options.median},
+      totalBootupTime
+    );
+
+    return {
+      score,
+      numericValue: totalBootupTime,
+      numericUnit: 'millisecond',
+      displayValue: totalBootupTime > 0 ?
+        str_(i18n.UIStrings.seconds, {timeInMs: totalBootupTime}) : '',
+      details,
+      runWarnings,
+    };
+  }
+}
+
+export default BootupTime;
+export {UIStrings};