lighthouse 9.6.7 → 10.0.0

package/lighthouse-core/gather/gatherers/seo/tap-targets.js

@@ -1,370 +0,0 @@
-/**
- * @license Copyright 2018 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';
-
-/* global document, window, getComputedStyle, getElementsInDocument, Node, getNodeDetails, getRectCenterPoint */
-
-const FRGatherer = require('../../../fraggle-rock/gather/base-gatherer.js');
-const pageFunctions = require('../../../lib/page-functions.js');
-const RectHelpers = require('../../../lib/rect-helpers.js');
-
-const TARGET_SELECTORS = [
-  'button',
-  'a',
-  'input',
-  'textarea',
-  'select',
-  'option',
-  '[role=button]',
-  '[role=checkbox]',
-  '[role=link]',
-  '[role=menuitem]',
-  '[role=menuitemcheckbox]',
-  '[role=menuitemradio]',
-  '[role=option]',
-  '[role=scrollbar]',
-  '[role=slider]',
-  '[role=spinbutton]',
-];
-const tapTargetsSelector = TARGET_SELECTORS.join(',');
-
-/**
- * @param {HTMLElement} element
- * @return {boolean}
- */
-/* c8 ignore start */
-function elementIsVisible(element) {
-  return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
-}
-/* c8 ignore stop */
-
-/**
- * @param {Element} element
- * @return {LH.Artifacts.Rect[]}
- */
-/* c8 ignore start */
-function getClientRects(element) {
-  const clientRects = Array.from(
-    element.getClientRects()
-  ).map(clientRect => {
-    // Contents of DOMRect get lost when returned from Runtime.evaluate call,
-    // so we convert them to plain objects.
-    const {width, height, left, top, right, bottom} = clientRect;
-    return {width, height, left, top, right, bottom};
-  });
-
-  for (const child of element.children) {
-    clientRects.push(...getClientRects(child));
-  }
-
-  return clientRects;
-}
-/* c8 ignore stop */
-
-/**
- * @param {Element} element
- * @param {string} tapTargetsSelector
- * @return {boolean}
- */
-/* c8 ignore start */
-function elementHasAncestorTapTarget(element, tapTargetsSelector) {
-  if (!element.parentElement) {
-    return false;
-  }
-  if (element.parentElement.matches(tapTargetsSelector)) {
-    return true;
-  }
-  return elementHasAncestorTapTarget(element.parentElement, tapTargetsSelector);
-}
-/* c8 ignore stop */
-
-/**
- * @param {Element} element
- */
-/* c8 ignore start */
-function hasTextNodeSiblingsFormingTextBlock(element) {
-  if (!element.parentElement) {
-    return false;
-  }
-
-  const parentElement = element.parentElement;
-
-  const nodeText = element.textContent || '';
-  const parentText = parentElement.textContent || '';
-  if (parentText.length - nodeText.length < 5) {
-    // Parent text mostly consists of this node, so the parent
-    // is not a text block container
-    return false;
-  }
-
-  for (const sibling of element.parentElement.childNodes) {
-    if (sibling === element) {
-      continue;
-    }
-    const siblingTextContent = (sibling.textContent || '').trim();
-    // Only count text in text nodes so that a series of e.g. buttons isn't counted
-    // as a text block.
-    // This works reasonably well, but means we miss text blocks where all text is e.g.
-    // wrapped in spans
-    if (sibling.nodeType === Node.TEXT_NODE && siblingTextContent.length > 0) {
-      return true;
-    }
-  }
-
-  return false;
-}
-/* c8 ignore stop */
-
-/**
- * Check if element is in a block of text, such as paragraph with a bunch of links in it.
- * Makes a reasonable guess, but for example gets it wrong if the element is surrounded by other
- * HTML elements instead of direct text nodes.
- * @param {Element} element
- * @return {boolean}
- */
-/* c8 ignore start */
-function elementIsInTextBlock(element) {
-  const {display} = getComputedStyle(element);
-  if (display !== 'inline' && display !== 'inline-block') {
-    return false;
-  }
-
-  if (hasTextNodeSiblingsFormingTextBlock(element)) {
-    return true;
-  } else if (element.parentElement) {
-    return elementIsInTextBlock(element.parentElement);
-  } else {
-    return false;
-  }
-}
-/* c8 ignore stop */
-
-/**
- * @param {Element} el
- * @param {{x: number, y: number}} elCenterPoint
- */
-/* c8 ignore start */
-function elementCenterIsAtZAxisTop(el, elCenterPoint) {
-  const viewportHeight = window.innerHeight;
-  const targetScrollY = Math.floor(elCenterPoint.y / viewportHeight) * viewportHeight;
-  if (window.scrollY !== targetScrollY) {
-    window.scrollTo(0, targetScrollY);
-  }
-
-  const topEl = document.elementFromPoint(
-    elCenterPoint.x,
-    elCenterPoint.y - window.scrollY
-  );
-
-  return topEl === el || el.contains(topEl);
-}
-/* c8 ignore stop */
-
-/**
- * Finds all position sticky/absolute elements on the page and adds a class
- * that disables pointer events on them.
- * @param {string} className
- * @return {() => void} - undo function to re-enable pointer events
- */
-/* c8 ignore start */
-function disableFixedAndStickyElementPointerEvents(className) {
-  document.querySelectorAll('*').forEach(el => {
-    const position = getComputedStyle(el).position;
-    if (position === 'fixed' || position === 'sticky') {
-      el.classList.add(className);
-    }
-  });
-
-  return function undo() {
-    Array.from(document.getElementsByClassName(className)).forEach(el => {
-      el.classList.remove(className);
-    });
-  };
-}
-/* c8 ignore stop */
-
-/**
- * @param {string} tapTargetsSelector
- * @param {string} className
- * @return {LH.Artifacts.TapTarget[]}
- */
-/* c8 ignore start */
-function gatherTapTargets(tapTargetsSelector, className) {
-  /** @type {LH.Artifacts.TapTarget[]} */
-  const targets = [];
-
-  // Capture element positions relative to the top of the page
-  window.scrollTo(0, 0);
-
-  /** @type {HTMLElement[]} */
-  // @ts-expect-error - getElementsInDocument put into scope via stringification
-  const tapTargetElements = getElementsInDocument(tapTargetsSelector);
-
-  /** @type {{
-    tapTargetElement: Element,
-    clientRects: LH.Artifacts.Rect[]
-  }[]} */
-  const tapTargetsWithClientRects = [];
-  tapTargetElements.forEach(tapTargetElement => {
-    // Filter out tap targets that are likely to cause false failures:
-    if (elementHasAncestorTapTarget(tapTargetElement, tapTargetsSelector)) {
-      // This is usually intentional, either the tap targets trigger the same action
-      // or there's a child with a related action (like a delete button for an item)
-      return;
-    }
-    if (elementIsInTextBlock(tapTargetElement)) {
-      // Links inside text blocks cause a lot of failures, and there's also an exception for them
-      // in the Web Content Accessibility Guidelines https://www.w3.org/TR/WCAG21/#target-size
-      return;
-    }
-    if (!elementIsVisible(tapTargetElement)) {
-      return;
-    }
-
-    tapTargetsWithClientRects.push({
-      tapTargetElement,
-      clientRects: getClientRects(tapTargetElement),
-    });
-  });
-
-  // Disable pointer events so that tap targets below them don't get
-  // detected as non-tappable (they are tappable, just not while the viewport
-  // is at the current scroll position)
-  const reenableFixedAndStickyElementPointerEvents =
-    disableFixedAndStickyElementPointerEvents(className);
-
-  /** @type {{
-    tapTargetElement: Element,
-    visibleClientRects: LH.Artifacts.Rect[]
-  }[]} */
-  const tapTargetsWithVisibleClientRects = [];
-  // We use separate loop here to get visible client rects because that involves
-  // scrolling around the page for elementCenterIsAtZAxisTop, which would affect the
-  // client rect positions.
-  tapTargetsWithClientRects.forEach(({tapTargetElement, clientRects}) => {
-    // Filter out empty client rects
-    let visibleClientRects = clientRects.filter(cr => cr.width !== 0 && cr.height !== 0);
-
-    // Filter out client rects that are invisible, e.g because they are in a position absolute element
-    // with a lower z-index than the main content.
-    // This will also filter out all position fixed or sticky tap targets elements because we disable pointer
-    // events on them before running this. That's the correct behavior because whether a position fixed/stick
-    // element overlaps with another tap target depends on the scroll position.
-    visibleClientRects = visibleClientRects.filter(rect => {
-      // Just checking the center can cause false failures for large partially hidden tap targets,
-      // but that should be a rare edge case
-      // @ts-expect-error - put into scope via stringification
-      const rectCenterPoint = getRectCenterPoint(rect);
-      return elementCenterIsAtZAxisTop(tapTargetElement, rectCenterPoint);
-    });
-
-    if (visibleClientRects.length > 0) {
-      tapTargetsWithVisibleClientRects.push({
-        tapTargetElement,
-        visibleClientRects,
-      });
-    }
-  });
-
-  for (const {tapTargetElement, visibleClientRects} of tapTargetsWithVisibleClientRects) {
-    targets.push({
-      clientRects: visibleClientRects,
-      href: /** @type {HTMLAnchorElement} */(tapTargetElement)['href'] || '',
-      // @ts-expect-error - getNodeDetails put into scope via stringification
-      node: getNodeDetails(tapTargetElement),
-    });
-  }
-
-  reenableFixedAndStickyElementPointerEvents();
-
-  return targets;
-}
-/* c8 ignore stop */
-
-class TapTargets extends FRGatherer {
-  constructor() {
-    super();
-    /**
-     * This needs to be in the constructor.
-     * https://github.com/GoogleChrome/lighthouse/issues/12134
-     * @type {LH.Gatherer.GathererMeta}
-     */
-    this.meta = {
-      supportedModes: ['snapshot', 'navigation'],
-    };
-  }
-
-  /**
-   * @param {LH.Gatherer.FRProtocolSession} session
-   * @param {string} className
-   * @return {Promise<string>}
-   */
-  async addStyleRule(session, className) {
-    const frameTreeResponse = await session.sendCommand('Page.getFrameTree');
-    const {styleSheetId} = await session.sendCommand('CSS.createStyleSheet', {
-      frameId: frameTreeResponse.frameTree.frame.id,
-    });
-    const ruleText = `.${className} { pointer-events: none !important }`;
-    await session.sendCommand('CSS.setStyleSheetText', {
-      styleSheetId,
-      text: ruleText,
-    });
-    return styleSheetId;
-  }
-
-  /**
-   * @param {LH.Gatherer.FRProtocolSession} session
-   * @param {string} styleSheetId
-   */
-  async removeStyleRule(session, styleSheetId) {
-    await session.sendCommand('CSS.setStyleSheetText', {
-      styleSheetId,
-      text: '',
-    });
-  }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalContext} passContext
-   * @return {Promise<LH.Artifacts.TapTarget[]>} All visible tap targets with their positions and sizes
-   */
-  async getArtifact(passContext) {
-    const session = passContext.driver.defaultSession;
-    await session.sendCommand('DOM.enable');
-    await session.sendCommand('CSS.enable');
-
-    const className = 'lighthouse-disable-pointer-events';
-    const styleSheetId = await this.addStyleRule(session, className);
-
-    const tapTargets = await passContext.driver.executionContext.evaluate(gatherTapTargets, {
-      args: [tapTargetsSelector, className],
-      useIsolation: true,
-      deps: [
-        pageFunctions.getNodeDetailsString,
-        pageFunctions.getElementsInDocument,
-        disableFixedAndStickyElementPointerEvents,
-        elementIsVisible,
-        elementHasAncestorTapTarget,
-        elementCenterIsAtZAxisTop,
-        getClientRects,
-        hasTextNodeSiblingsFormingTextBlock,
-        elementIsInTextBlock,
-        RectHelpers.getRectCenterPoint,
-        pageFunctions.getNodePath,
-        pageFunctions.getNodeSelector,
-        pageFunctions.getNodeLabel,
-      ],
-    });
-
-    await this.removeStyleRule(session, styleSheetId);
-
-    await session.sendCommand('CSS.disable');
-    await session.sendCommand('DOM.disable');
-
-    return tapTargets;
-  }
-}
-
-module.exports = TapTargets;

package/lighthouse-core/gather/gatherers/service-worker.js

@@ -1,45 +0,0 @@
-/**
- * @license Copyright 2016 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 FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
-const serviceWorkers = require('../driver/service-workers.js');
-
-class ServiceWorker extends FRGatherer {
-  /** @type {LH.Gatherer.GathererMeta} */
-  meta = {
-    supportedModes: ['navigation'],
-  };
-
-  /**
-   * @param {LH.Gatherer.PassContext} passContext
-   * @return {Promise<LH.Artifacts['ServiceWorker']>}
-   */
-  async beforePass(passContext) {
-    return this.getArtifact({...passContext, dependencies: {}});
-  }
-
-  // This gatherer is run in a separate pass for legacy mode.
-  // Legacy compat code is in `beforePass`.
-  async afterPass() { }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalContext} context
-   * @return {Promise<LH.Artifacts['ServiceWorker']>}
-   */
-  async getArtifact(context) {
-    const session = context.driver.defaultSession;
-    const {versions} = await serviceWorkers.getServiceWorkerVersions(session);
-    const {registrations} = await serviceWorkers.getServiceWorkerRegistrations(session);
-
-    return {
-      versions,
-      registrations,
-    };
-  }
-}
-
-module.exports = ServiceWorker;

package/lighthouse-core/gather/gatherers/source-maps.js

@@ -1,150 +0,0 @@
-/**
- * @license Copyright 2019 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 FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
-const URL = require('../../lib/url-shim.js');
-
-/**
- * @fileoverview Gets JavaScript source maps.
- */
-class SourceMaps extends FRGatherer {
-  /** @type {LH.Gatherer.GathererMeta} */
-  meta = {
-    supportedModes: ['timespan', 'navigation'],
-  };
-
-  constructor() {
-    super();
-    /** @type {LH.Crdp.Debugger.ScriptParsedEvent[]} */
-    this._scriptParsedEvents = [];
-    this.onScriptParsed = this.onScriptParsed.bind(this);
-  }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalDriver} driver
-   * @param {string} sourceMapUrl
-   * @return {Promise<LH.Artifacts.RawSourceMap>}
-   */
-  async fetchSourceMap(driver, sourceMapUrl) {
-    const response = await driver.fetcher.fetchResource(sourceMapUrl, {timeout: 1500});
-    if (response.content === null) {
-      throw new Error(`Failed fetching source map (${response.status})`);
-    }
-    return JSON.parse(response.content);
-  }
-
-  /**
-   * @param {string} sourceMapURL
-   * @return {LH.Artifacts.RawSourceMap}
-   */
-  parseSourceMapFromDataUrl(sourceMapURL) {
-    const buffer = Buffer.from(sourceMapURL.split(',')[1], 'base64');
-    return JSON.parse(buffer.toString());
-  }
-
-  /**
-   * @param {LH.Crdp.Debugger.ScriptParsedEvent} event
-   */
-  onScriptParsed(event) {
-    if (event.sourceMapURL) {
-      this._scriptParsedEvents.push(event);
-    }
-  }
-
-  /**
-   * @param {string} url
-   * @param {string} base
-   * @return {string|undefined}
-   */
-  _resolveUrl(url, base) {
-    try {
-      return new URL(url, base).href;
-    } catch (e) {
-      return;
-    }
-  }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalDriver} driver
-   * @param {LH.Crdp.Debugger.ScriptParsedEvent} event
-   * @return {Promise<LH.Artifacts.SourceMap>}
-   */
-  async _retrieveMapFromScriptParsedEvent(driver, event) {
-    if (!event.sourceMapURL) {
-      throw new Error('precondition failed: event.sourceMapURL should exist');
-    }
-
-    // `sourceMapURL` is simply the URL found in either a magic comment or an x-sourcemap header.
-    // It has not been resolved to a base url.
-    const isSourceMapADataUri = event.sourceMapURL.startsWith('data:');
-    const scriptUrl = event.url;
-    const rawSourceMapUrl = isSourceMapADataUri ?
-        event.sourceMapURL :
-        this._resolveUrl(event.sourceMapURL, event.url);
-
-    if (!rawSourceMapUrl) {
-      return {
-        scriptUrl,
-        errorMessage: `Could not resolve map url: ${event.sourceMapURL}`,
-      };
-    }
-
-    // sourceMapUrl isn't included in the the artifact if it was a data URL.
-    const sourceMapUrl = isSourceMapADataUri ? undefined : rawSourceMapUrl;
-
-    try {
-      const map = isSourceMapADataUri ?
-          this.parseSourceMapFromDataUrl(rawSourceMapUrl) :
-          await this.fetchSourceMap(driver, rawSourceMapUrl);
-      if (map.sections) {
-        map.sections = map.sections.filter(section => section.map);
-      }
-      return {
-        scriptUrl,
-        sourceMapUrl,
-        map,
-      };
-    } catch (err) {
-      return {
-        scriptUrl,
-        sourceMapUrl,
-        errorMessage: err.toString(),
-      };
-    }
-  }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalContext} context
-   */
-  async startSensitiveInstrumentation(context) {
-    const session = context.driver.defaultSession;
-    session.on('Debugger.scriptParsed', this.onScriptParsed);
-    await session.sendCommand('Debugger.enable');
-  }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalContext} context
-   */
-  async stopSensitiveInstrumentation(context) {
-    const session = context.driver.defaultSession;
-    await session.sendCommand('Debugger.disable');
-    session.off('Debugger.scriptParsed', this.onScriptParsed);
-  }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalContext} context
-   * @return {Promise<LH.Artifacts['SourceMaps']>}
-   */
-  async getArtifact(context) {
-    await context.driver.fetcher.enable();
-    const eventProcessPromises = this._scriptParsedEvents
-      .map((event) => this._retrieveMapFromScriptParsedEvent(context.driver, event));
-    return Promise.all(eventProcessPromises);
-  }
-}
-
-module.exports = SourceMaps;

package/lighthouse-core/gather/gatherers/stacks.js

@@ -1,125 +0,0 @@
-/**
- * @license Copyright 2019 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';
-
-/**
- * @fileoverview Gathers a list of detected JS libraries and their versions.
- */
-
-/* global window */
-/* global d41d8cd98f00b204e9800998ecf8427e_LibraryDetectorTests */
-
-const fs = require('fs');
-const log = require('lighthouse-logger');
-const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
-const libDetectorSource = fs.readFileSync(
-  require.resolve('js-library-detector/library/libraries.js'), 'utf8');
-
-/** @typedef {false | {version: string|number|null}} JSLibraryDetectorTestResult */
-/**
- * @typedef JSLibraryDetectorTest
- * @property {string} id
- * @property {string} icon
- * @property {string} url
- * @property {string|null} npm npm module name, if applicable to library.
- * @property {function(Window): JSLibraryDetectorTestResult | Promise<JSLibraryDetectorTestResult>} test Returns false if library is not present, otherwise returns an object that contains the library version (set to null if the version is not detected).
- */
-
-/**
- * @typedef JSLibrary
- * @property {string} id
- * @property {string} name
- * @property {string|number|null} version
- * @property {string|null} npm
- */
-
-/**
- * Obtains a list of detected JS libraries and their versions.
- */
-/* c8 ignore start */
-async function detectLibraries() {
-  /** @type {JSLibrary[]} */
-  const libraries = [];
-
-  // d41d8cd98f00b204e9800998ecf8427e_ is a consistent prefix used by the detect libraries
-  // see https://github.com/HTTPArchive/httparchive/issues/77#issuecomment-291320900
-  /** @type {Record<string, JSLibraryDetectorTest>} */
-  // @ts-expect-error - injected libDetectorSource var
-  const libraryDetectorTests = d41d8cd98f00b204e9800998ecf8427e_LibraryDetectorTests; // eslint-disable-line
-
-  for (const [name, lib] of Object.entries(libraryDetectorTests)) {
-    try {
-      /** @type {NodeJS.Timeout|undefined} */
-      let timeout;
-      // Some library detections are async that can never return.
-      // Guard ourselves from PROTOCL_TIMEOUT by limiting each detection to a max of 1s.
-      // See https://github.com/GoogleChrome/lighthouse/issues/11124.
-      const timeoutPromise = new Promise(r => timeout = setTimeout(() => r(false), 1000));
-
-      const result = await Promise.race([lib.test(window), timeoutPromise]);
-      if (timeout) clearTimeout(timeout);
-      if (result) {
-        libraries.push({
-          id: lib.id,
-          name: name,
-          version: result.version,
-          npm: lib.npm,
-        });
-      }
-    } catch (e) {}
-  }
-
-  return libraries;
-}
-/* c8 ignore stop */
-
-
-/** @implements {LH.Gatherer.FRGathererInstance} */
-class Stacks extends FRGatherer {
-  constructor() {
-    super();
-
-    /** @type {LH.Gatherer.GathererMeta} */
-    this.meta = {
-      supportedModes: ['snapshot', 'navigation'],
-    };
-  }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalDriver['executionContext']} executionContext
-   * @return {Promise<LH.Artifacts['Stacks']>}
-   */
-  static async collectStacks(executionContext) {
-    const status = {msg: 'Collect stacks', id: 'lh:gather:collectStacks'};
-    log.time(status);
-
-    const jsLibraries = await executionContext.evaluate(detectLibraries, {
-      args: [],
-      deps: [libDetectorSource],
-    });
-
-    /** @type {LH.Artifacts['Stacks']} */
-    const stacks = jsLibraries.map(lib => ({
-      detector: 'js',
-      id: lib.id,
-      name: lib.name,
-      version: typeof lib.version === 'number' ? String(lib.version) : (lib.version || undefined),
-      npm: lib.npm || undefined,
-    }));
-    log.timeEnd(status);
-    return stacks;
-  }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalContext} context
-   * @return {Promise<LH.Artifacts['Stacks']>}
-   */
-  async getArtifact(context) {
-    return Stacks.collectStacks(context.driver.executionContext);
-  }
-}
-
-module.exports = Stacks;