lighthouse 8.3.0-dev.20210904 → 8.3.0

package/flow-report/tsconfig.json

@@ -1,39 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "outDir": "../.tmp/tsbuildinfo/flow-report",
-    "emitDeclarationOnly": false,
-    "declarationMap": true,
-
-    // Limit to base JS and DOM defs.
-    "lib": ["es2020", "dom", "dom.iterable"],
-    // Selectively include types from node_modules.
-    "types": ["node", "jest"],
-    "target": "es2020",
-    "module": "es2020",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-
-    "allowJs": true,
-    "checkJs": true,
-    "strict": true,
-    // TODO: remove the next line to be fully `strict`.
-    "useUnknownInCatchVariables": false,
-
-    // "listFiles": true,
-    // "noErrorTruncation": true,
-    "extendedDiagnostics": true,
-
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "./types",
-  ],
-  "references": [
-    {"path": "../types/lhr/"},
-    {"path": "../report"},
-  ],
-}

package/flow-report/types/flow-report.d.ts

@@ -1,27 +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 FlowResult_ from '../../types/lhr/flow';
-import * as Settings from '../../types/lhr/settings';
-
-// Import to augment querySelector/querySelectorAll with stricter type checking.
-import '../../types/query-selector';
-import '../../report/types/html-renderer';
-
-declare global {
-  interface Window {
-    __LIGHTHOUSE_FLOW_JSON__: FlowResult_;
-    __initLighthouseFlowReport__: () => void;
-  }
-
-  // Expose global types in LH namespace.
-  module LH {
-    export type FlowResult = FlowResult_;
-    export type ConfigSettings = Settings.ConfigSettings;
-  }
-}
-
-export {};

package/lighthouse-core/audits/lcp-lazy-loaded.js

@@ -1,83 +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.
- */
-'use strict';
-
-const Audit = require('./audit.js');
-const i18n = require('../lib/i18n/i18n.js');
-
-const UIStrings = {
-  /** Title of a Lighthouse audit that provides detail on whether the largest above-the-fold image was loaded with sufficient priority. This descriptive title is shown to users when the image was loaded properly. */
-  title: 'Largest Contentful Paint image was not lazily loaded',
-  /** Title of a Lighthouse audit that provides detail on whether the largest above-the-fold image was loaded with sufficient priority. This descriptive title is shown to users when the image was loaded inefficiently using the `loading=lazy` attribute. */
-  failureTitle: 'Largest Contentful Paint image was lazily loaded',
-  /** Description of a Lighthouse audit that tells the user why the advice is important. This is displayed after a user expands the section to see more. No character length limits. */
-  description: 'Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint. [Learn more](https://web.dev/lcp-lazy-loading/).',
-};
-
-const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
-
-class LargestContentfulPaintLazyLoaded extends Audit {
-  /**
-   * @return {LH.Audit.Meta}
-   */
-  static get meta() {
-    return {
-      id: 'lcp-lazy-loaded',
-      title: str_(UIStrings.title),
-      description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['TraceElements', 'ViewportDimensions', 'ImageElements'],
-    };
-  }
-
-  /**
-   * @param {LH.Artifacts.ImageElement} image
-   * @param {LH.Artifacts.ViewportDimensions} viewportDimensions
-   * @return {boolean}
-   */
-  static isImageInViewport(image, viewportDimensions) {
-    const imageTop = image.clientRect.top;
-    const viewportHeight = viewportDimensions.innerHeight;
-    return imageTop < viewportHeight;
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
-   */
-  static audit(artifacts) {
-    const lcpElement = artifacts.TraceElements
-      .find(element => element.traceEventType === 'largest-contentful-paint');
-    const lcpElementImage = lcpElement ? artifacts.ImageElements.find(elem => {
-      return elem.node.devtoolsNodePath === lcpElement.node.devtoolsNodePath;
-    }) : undefined;
-
-
-    if (!lcpElementImage ||
-      !this.isImageInViewport(lcpElementImage, artifacts.ViewportDimensions)) {
-      return {score: 1, notApplicable: true};
-    }
-
-    /** @type {LH.Audit.Details.Table['headings']} */
-    const headings = [
-      {key: 'node', itemType: 'node', text: str_(i18n.UIStrings.columnElement)},
-    ];
-
-    const details = Audit.makeTableDetails(headings, [
-      {
-        node: Audit.makeNodeItem(lcpElementImage.node),
-      },
-    ]);
-
-    return {
-      score: lcpElementImage.loading === 'lazy' ? 0 : 1,
-      details,
-    };
-  }
-}
-
-module.exports = LargestContentfulPaintLazyLoaded;
-module.exports.UIStrings = UIStrings;

package/report/.eslintrc.cjs

@@ -1,33 +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.
- */
-'use strict';
-
-/**
- * eslint does not support ESM rc files, so this must be a .cjs file.
- * @see https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-file-formats
- * @see https://github.com/eslint/eslint/issues/13481
- */
-
-module.exports = {
-  env: {
-    browser: true,
-  },
-  rules: {
-    // TODO(esmodules): move to root eslint when all code is ESM
-    // or when this is resolved: https://github.com/import-js/eslint-plugin-import/issues/2214
-    'import/order': [2, {
-      'groups': [
-        'builtin',
-        'external',
-        ['sibling', 'parent'],
-        'index',
-        'object',
-        'type',
-      ],
-      'newlines-between': 'always',
-    }],
-  },
-};

package/report/generator/README.md

@@ -1,9 +0,0 @@
-# Lighthouse Report Generator
-
-## Overview
-
-Lighthouse's report generator is the entry point for creating reports from an **LHR** (Lighthouse Result object). It returns results as HTML, JSON, and CSV.
-
-It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `brfs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
-
-Because it's shared between core and the report, dependencies (both code and types) should be kept minimal.

package/report/generator/flow-report-assets.js

@@ -1,20 +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.
- */
-'use strict';
-
-const fs = require('fs');
-
-/* eslint-disable max-len */
-const FLOW_REPORT_TEMPLATE = fs.readFileSync(`${__dirname}/../../flow-report/assets/standalone-flow-template.html`, 'utf8');
-const FLOW_REPORT_CSS = fs.readFileSync(`${__dirname}/../../flow-report/assets/styles.css`, 'utf8');
-const FLOW_REPORT_JAVASCRIPT = fs.readFileSync(`${__dirname}/../../dist/report/flow.js`, 'utf8');
-/* eslint-enable max-len */
-
-module.exports = {
-  FLOW_REPORT_TEMPLATE,
-  FLOW_REPORT_CSS,
-  FLOW_REPORT_JAVASCRIPT,
-};

package/report/generator/package.json

@@ -1,4 +0,0 @@
-{
-  "type": "commonjs",
-  "//": "Preserve commonjs in this directory. Temporary file until converted to type: module"
-}

package/report/generator/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "outDir": "../../.tmp/tsbuildinfo/report/generator",
-    "emitDeclarationOnly": true,
-    "declarationMap": true,
-
-    "target": "ES2020",
-    "module": "commonjs",
-    "moduleResolution": "node",
-
-    "allowJs": true,
-    "checkJs": true,
-    "strict": true,
-    // TODO: remove the next line to be fully `strict`.
-    "useUnknownInCatchVariables": false,
-
-    // "listFiles": true,
-    // "noErrorTruncation": true,
-    "extendedDiagnostics": true,
-  },
-  "references": [
-    {"path": "../../types/lhr/"},
-  ],
-  "include": [
-    "**/*.js",
-  ],
-}

package/report/renderer/drop-down-menu.js

@@ -1,215 +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.
- */
-'use strict';
-
-/* eslint-env browser */
-
-/** @typedef {import('./dom.js').DOM} DOM */
-
-export class DropDownMenu {
-  /**
-   * @param {DOM} dom
-   */
-  constructor(dom) {
-    /** @type {DOM} */
-    this._dom = dom;
-    /** @type {HTMLElement} */
-    this._toggleEl; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this._menuEl; // eslint-disable-line no-unused-expressions
-
-    this.onDocumentKeyDown = this.onDocumentKeyDown.bind(this);
-    this.onToggleClick = this.onToggleClick.bind(this);
-    this.onToggleKeydown = this.onToggleKeydown.bind(this);
-    this.onMenuFocusOut = this.onMenuFocusOut.bind(this);
-    this.onMenuKeydown = this.onMenuKeydown.bind(this);
-
-    this._getNextMenuItem = this._getNextMenuItem.bind(this);
-    this._getNextSelectableNode = this._getNextSelectableNode.bind(this);
-    this._getPreviousMenuItem = this._getPreviousMenuItem.bind(this);
-  }
-
-  /**
-   * @param {function(MouseEvent): any} menuClickHandler
-   */
-  setup(menuClickHandler) {
-    this._toggleEl = this._dom.find('button.lh-tools__button', this._dom.document());
-    this._toggleEl.addEventListener('click', this.onToggleClick);
-    this._toggleEl.addEventListener('keydown', this.onToggleKeydown);
-
-    this._menuEl = this._dom.find('div.lh-tools__dropdown', this._dom.document());
-    this._menuEl.addEventListener('keydown', this.onMenuKeydown);
-    this._menuEl.addEventListener('click', menuClickHandler);
-  }
-
-  close() {
-    this._toggleEl.classList.remove('lh-active');
-    this._toggleEl.setAttribute('aria-expanded', 'false');
-    if (this._menuEl.contains(this._dom.document().activeElement)) {
-      // Refocus on the tools button if the drop down last had focus
-      this._toggleEl.focus();
-    }
-    this._menuEl.removeEventListener('focusout', this.onMenuFocusOut);
-    this._dom.document().removeEventListener('keydown', this.onDocumentKeyDown);
-  }
-
-  /**
-   * @param {HTMLElement} firstFocusElement
-   */
-  open(firstFocusElement) {
-    if (this._toggleEl.classList.contains('lh-active')) {
-      // If the drop down is already open focus on the element
-      firstFocusElement.focus();
-    } else {
-      // Wait for drop down transition to complete so options are focusable.
-      this._menuEl.addEventListener('transitionend', () => {
-        firstFocusElement.focus();
-      }, {once: true});
-    }
-
-    this._toggleEl.classList.add('lh-active');
-    this._toggleEl.setAttribute('aria-expanded', 'true');
-    this._menuEl.addEventListener('focusout', this.onMenuFocusOut);
-    this._dom.document().addEventListener('keydown', this.onDocumentKeyDown);
-  }
-
-  /**
-   * Click handler for tools button.
-   * @param {Event} e
-   */
-  onToggleClick(e) {
-    e.preventDefault();
-    e.stopImmediatePropagation();
-
-    if (this._toggleEl.classList.contains('lh-active')) {
-      this.close();
-    } else {
-      this.open(this._getNextMenuItem());
-    }
-  }
-
-  /**
-   * Handler for tool button.
-   * @param {KeyboardEvent} e
-   */
-  onToggleKeydown(e) {
-    switch (e.code) {
-      case 'ArrowUp':
-        e.preventDefault();
-        this.open(this._getPreviousMenuItem());
-        break;
-      case 'ArrowDown':
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        this.open(this._getNextMenuItem());
-        break;
-      default:
-       // no op
-    }
-  }
-
-  /**
-   * Handler for tool DropDown.
-   * @param {KeyboardEvent} e
-   */
-  onMenuKeydown(e) {
-    const el = /** @type {?HTMLElement} */ (e.target);
-
-    switch (e.code) {
-      case 'ArrowUp':
-        e.preventDefault();
-        this._getPreviousMenuItem(el).focus();
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        this._getNextMenuItem(el).focus();
-        break;
-      case 'Home':
-        e.preventDefault();
-        this._getNextMenuItem().focus();
-        break;
-      case 'End':
-        e.preventDefault();
-        this._getPreviousMenuItem().focus();
-        break;
-      default:
-       // no op
-    }
-  }
-
-  /**
-   * Keydown handler for the document.
-   * @param {KeyboardEvent} e
-   */
-  onDocumentKeyDown(e) {
-    if (e.keyCode === 27) { // ESC
-      this.close();
-    }
-  }
-
-  /**
-   * Focus out handler for the drop down menu.
-   * @param {FocusEvent} e
-   */
-  onMenuFocusOut(e) {
-    const focusedEl = /** @type {?HTMLElement} */ (e.relatedTarget);
-
-    if (!this._menuEl.contains(focusedEl)) {
-      this.close();
-    }
-  }
-
-  /**
-   * @param {Array<Node>} allNodes
-   * @param {?HTMLElement=} startNode
-   * @return {HTMLElement}
-   */
-  _getNextSelectableNode(allNodes, startNode) {
-    const nodes = allNodes.filter(/** @return {node is HTMLElement} */ (node) => {
-      if (!(node instanceof HTMLElement)) {
-        return false;
-      }
-
-      // 'Save as Gist' option may be disabled.
-      if (node.hasAttribute('disabled')) {
-        return false;
-      }
-
-      // 'Save as Gist' option may have display none.
-      if (window.getComputedStyle(node).display === 'none') {
-        return false;
-      }
-
-      return true;
-    });
-
-    let nextIndex = startNode ? (nodes.indexOf(startNode) + 1) : 0;
-    if (nextIndex >= nodes.length) {
-      nextIndex = 0;
-    }
-
-    return nodes[nextIndex];
-  }
-
-  /**
-   * @param {?HTMLElement=} startEl
-   * @return {HTMLElement}
-   */
-  _getNextMenuItem(startEl) {
-    const nodes = Array.from(this._menuEl.childNodes);
-    return this._getNextSelectableNode(nodes, startEl);
-  }
-
-  /**
-   * @param {?HTMLElement=} startEl
-   * @return {HTMLElement}
-   */
-  _getPreviousMenuItem(startEl) {
-    const nodes = Array.from(this._menuEl.childNodes).reverse();
-    return this._getNextSelectableNode(nodes, startEl);
-  }
-}

package/report/renderer/features-util.js

@@ -1,26 +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.
- */
-'use strict';
-
-/* eslint-env browser */
-
-/** @typedef {import('./dom.js').DOM} DOM */
-
-/**
- * @param {DOM} dom
- * @param {boolean} [force]
- */
-export function toggleDarkTheme(dom, force) {
-  const el = dom.find('.lh-vars', dom.document());
-  // This seems unnecessary, but in DevTools, passing "undefined" as the second
-  // parameter acts like passing "false".
-  // https://github.com/ChromeDevTools/devtools-frontend/blob/dd6a6d4153647c2a4203c327c595692c5e0a4256/front_end/dom_extension/DOMExtension.js#L809-L819
-  if (typeof force === 'undefined') {
-    el.classList.toggle('lh-dark');
-  } else {
-    el.classList.toggle('lh-dark', force);
-  }
-}

package/report/renderer/open-tab.js

@@ -1,137 +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.
- */
-'use strict';
-
-import {TextEncoding} from './text-encoding.js';
-
-/* eslint-env browser */
-
-function getAppsOrigin() {
-  const isVercel = window.location.host.endsWith('.vercel.app');
-  const isDev = new URLSearchParams(window.location.search).has('dev');
-
-  if (isVercel) return `https://${window.location.host}/gh-pages`;
-  if (isDev) return 'http://localhost:8000';
-  return 'https://googlechrome.github.io/lighthouse';
-}
-
-/**
- * The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly.
- * @param {LH.Result} json
- * @protected
- */
-function computeWindowNameSuffix(json) {
-  // @ts-expect-error - If this is a v2 LHR, use old `generatedTime`.
-  const fallbackFetchTime = /** @type {string} */ (json.generatedTime);
-  const fetchTime = json.fetchTime || fallbackFetchTime;
-  return `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`;
-}
-
-/**
- * Opens a new tab to an external page and sends data using postMessage.
- * @param {{lhr: LH.Result} | LH.Treemap.Options} data
- * @param {string} url
- * @param {string} windowName
- * @protected
- */
-function openTabAndSendData(data, url, windowName) {
-  const origin = new URL(url).origin;
-  // Chrome doesn't allow us to immediately postMessage to a popup right
-  // after it's created. Normally, we could also listen for the popup window's
-  // load event, however it is cross-domain and won't fire. Instead, listen
-  // for a message from the target app saying "I'm open".
-  window.addEventListener('message', function msgHandler(messageEvent) {
-    if (messageEvent.origin !== origin) {
-      return;
-    }
-    if (popup && messageEvent.data.opened) {
-      popup.postMessage(data, origin);
-      window.removeEventListener('message', msgHandler);
-    }
-  });
-
-  const popup = window.open(url, windowName);
-}
-
-/**
- * Opens a new tab to an external page and sends data via base64 encoded url params.
- * @param {{lhr: LH.Result} | LH.Treemap.Options} data
- * @param {string} url_
- * @param {string} windowName
- * @protected
- */
-async function openTabWithUrlData(data, url_, windowName) {
-  const url = new URL(url_);
-  const gzip = Boolean(window.CompressionStream);
-  url.hash = await TextEncoding.toBase64(JSON.stringify(data), {
-    gzip,
-  });
-  if (gzip) url.searchParams.set('gzip', '1');
-  window.open(url.toString(), windowName);
-}
-
-/**
- * Opens a new tab to the online viewer and sends the local page's JSON results
- * to the online viewer using URL.fragment
- * @param {LH.Result} lhr
- * @protected
- */
-export async function openViewer(lhr) {
-  const windowName = 'viewer-' + computeWindowNameSuffix(lhr);
-  const url = getAppsOrigin() + '/viewer/';
-  await openTabWithUrlData({lhr}, url, windowName);
-}
-
-/**
- * Same as openViewer, but uses postMessage.
- * @param {LH.Result} lhr
- * @protected
- */
-export async function openViewerAndSendData(lhr) {
-  const windowName = 'viewer-' + computeWindowNameSuffix(lhr);
-  const url = getAppsOrigin() + '/viewer/';
-  openTabAndSendData({lhr}, url, windowName);
-}
-
-/**
- * Opens a new tab to the treemap app and sends the JSON results using URL.fragment
- * @param {LH.Result} json
- */
-export function openTreemap(json) {
-  const treemapData = json.audits['script-treemap-data'].details;
-  if (!treemapData) {
-    throw new Error('no script treemap data found');
-  }
-
-  /** @type {LH.Treemap.Options} */
-  const treemapOptions = {
-    lhr: {
-      requestedUrl: json.requestedUrl,
-      finalUrl: json.finalUrl,
-      audits: {
-        'script-treemap-data': json.audits['script-treemap-data'],
-      },
-      configSettings: {
-        locale: json.configSettings.locale,
-      },
-    },
-  };
-  const url = getAppsOrigin() + '/treemap/';
-  const windowName = 'treemap-' + computeWindowNameSuffix(json);
-
-  openTabWithUrlData(treemapOptions, url, windowName);
-}