lighthouse 9.5.0-dev.20230131 → 9.5.0-dev.20230202

package/core/audits/dobetterweb/{password-inputs-can-be-pasted-into.d.ts → paste-preventing-inputs.d.ts}

@@ -1,5 +1,5 @@
-export default PasswordInputsCanBePastedIntoAudit;
-declare class PasswordInputsCanBePastedIntoAudit extends Audit {
+export default PastePreventingInputsAudit;
+declare class PastePreventingInputsAudit extends Audit {
     /**
      * @param {LH.Artifacts} artifacts
      * @return {LH.Audit.Product}
@@ -12,4 +12,4 @@ export namespace UIStrings {
     const description: string;
 }
 import { Audit } from "../audit.js";
-//# sourceMappingURL=password-inputs-can-be-pasted-into.d.ts.map
+//# sourceMappingURL=paste-preventing-inputs.d.ts.map

package/core/audits/dobetterweb/{password-inputs-can-be-pasted-into.js → paste-preventing-inputs.js}

@@ -1,5 +1,5 @@
 /**
- * @license Copyright 2016 The Lighthouse Authors. All Rights Reserved.
+ * @license Copyright 2023 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.
  */
@@ -8,28 +8,29 @@ import {Audit} from '../audit.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 
 const UIStrings = {
-  /** Title of a Lighthouse audit that provides detail on the ability to paste into password fields. This descriptive title is shown to users when the page allows pasting of content into password fields. */
-  title: 'Allows users to paste into password fields',
-  /** Title of a Lighthouse audit that provides detail on the ability to paste into password fields. This descriptive title is shown to users when the page does not allow pasting of content into password fields. */
-  failureTitle: 'Prevents users to paste into password fields',
-  /** Description of a Lighthouse audit that tells the user why they should allow pasting of content into password fields. 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: 'Preventing password pasting undermines good security policy. ' +
-      '[Learn more about user-friendly password fields](https://developer.chrome.com/docs/lighthouse/best-practices/password-inputs-can-be-pasted-into/).',
+  /** Title of a Lighthouse audit that provides detail on the ability to paste into input fields. This descriptive title is shown to users when the page allows pasting of content into input fields. */
+  title: 'Allows users to paste into input fields',
+  /** Title of a Lighthouse audit that provides detail on the ability to paste into input fields. This descriptive title is shown to users when the page does not allow pasting of content into input fields. */
+  failureTitle: 'Prevents users from pasting into input fields',
+  /** Description of a Lighthouse audit that tells the user why they should allow pasting of content into input fields. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Preventing input pasting is a UX anti-pattern, ' +
+      'and undermines good security policy. ' +
+      '[Learn more about user-friendly input fields](https://developer.chrome.com/docs/lighthouse/best-practices/paste-preventing-inputs/).',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
 
-class PasswordInputsCanBePastedIntoAudit extends Audit {
+class PastePreventingInputsAudit extends Audit {
   /**
    * @return {LH.Audit.Meta}
    */
   static get meta() {
     return {
-      id: 'password-inputs-can-be-pasted-into',
+      id: 'paste-preventing-inputs',
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['PasswordInputsWithPreventedPaste'],
+      requiredArtifacts: ['Inputs'],
     };
   }
 
@@ -38,14 +39,15 @@ class PasswordInputsCanBePastedIntoAudit extends Audit {
    * @return {LH.Audit.Product}
    */
   static audit(artifacts) {
-    const passwordInputsWithPreventedPaste = artifacts.PasswordInputsWithPreventedPaste;
+    const inputsWithPreventsPaste = artifacts.Inputs.inputs.filter(input => input.preventsPaste);
 
     /** @type {LH.Audit.Details.Table['items']} */
     const items = [];
 
-    passwordInputsWithPreventedPaste.forEach(input => {
+    inputsWithPreventsPaste.forEach(input => {
       items.push({
         node: Audit.makeNodeItem(input.node),
+        type: input.type,
       });
     });
 
@@ -55,11 +57,11 @@ class PasswordInputsCanBePastedIntoAudit extends Audit {
     ];
 
     return {
-      score: Number(passwordInputsWithPreventedPaste.length === 0),
+      score: Number(inputsWithPreventsPaste.length === 0),
       details: Audit.makeTableDetails(headings, items),
     };
   }
 }
 
-export default PasswordInputsCanBePastedIntoAudit;
+export default PastePreventingInputsAudit;
 export {UIStrings};

package/core/config/default-config.js

@@ -150,7 +150,6 @@ const artifacts = {
   MetaElements: '',
   NetworkUserAgent: '',
   OptimizedImages: '',
-  PasswordInputsWithPreventedPaste: '',
   ResponseCompression: '',
   RobotsTxt: '',
   ServiceWorker: '',
@@ -200,7 +199,6 @@ const defaultConfig = {
     {id: artifacts.MetaElements, gatherer: 'meta-elements'},
     {id: artifacts.NetworkUserAgent, gatherer: 'network-user-agent'},
     {id: artifacts.OptimizedImages, gatherer: 'dobetterweb/optimized-images'},
-    {id: artifacts.PasswordInputsWithPreventedPaste, gatherer: 'dobetterweb/password-inputs-with-prevented-paste'},
     {id: artifacts.ResponseCompression, gatherer: 'dobetterweb/response-compression'},
     {id: artifacts.RobotsTxt, gatherer: 'seo/robots-txt'},
     {id: artifacts.ServiceWorker, gatherer: 'service-worker'},
@@ -361,7 +359,7 @@ const defaultConfig = {
     'dobetterweb/no-document-write',
     'dobetterweb/js-libraries',
     'dobetterweb/notification-on-start',
-    'dobetterweb/password-inputs-can-be-pasted-into',
+    'dobetterweb/paste-preventing-inputs',
     'dobetterweb/uses-http2',
     'dobetterweb/uses-passive-event-listeners',
     'seo/meta-description',
@@ -614,7 +612,7 @@ const defaultConfig = {
         {id: 'notification-on-start', weight: 1, group: 'best-practices-trust-safety'},
         {id: 'csp-xss', weight: 0, group: 'best-practices-trust-safety'},
         // User Experience
-        {id: 'password-inputs-can-be-pasted-into', weight: 1, group: 'best-practices-ux'},
+        {id: 'paste-preventing-inputs', weight: 1, group: 'best-practices-ux'},
         {id: 'image-aspect-ratio', weight: 1, group: 'best-practices-ux'},
         {id: 'image-size-responsive', weight: 1, group: 'best-practices-ux'},
         {id: 'preload-fonts', weight: 1, group: 'best-practices-ux'},

package/core/gather/driver/prepare.d.ts

@@ -43,4 +43,10 @@ export function prepareTargetForIndividualNavigation(session: LH.Gatherer.FRProt
 }): Promise<{
     warnings: Array<LH.IcuMessage>;
 }>;
+/**
+ * Enables `Debugger` domain to receive async stacktrace information on network request initiators.
+ * This is critical for tracking attribution of tasks and performance simulation accuracy.
+ * @param {LH.Gatherer.FRProtocolSession} session
+ */
+export function enableAsyncStacks(session: LH.Gatherer.FRProtocolSession): Promise<() => Promise<void>>;
 //# sourceMappingURL=prepare.d.ts.map

package/core/gather/driver/prepare.js

@@ -22,17 +22,33 @@ async function enableAsyncStacks(session) {
     await session.sendCommand('Debugger.setAsyncCallStackDepth', {maxDepth: 8});
   };
 
-  // Resume any pauses that make it through `setSkipAllPauses`
-  session.on('Debugger.paused', () => session.sendCommand('Debugger.resume'));
+  /**
+   * Resume any pauses that make it through `setSkipAllPauses`
+   */
+  function onDebuggerPaused() {
+    session.sendCommand('Debugger.resume');
+  }
 
-  // `Debugger.setSkipAllPauses` is reset after every navigation, so retrigger it on main frame navigations.
-  // See https://bugs.chromium.org/p/chromium/issues/detail?id=990945&q=setSkipAllPauses&can=2
-  session.on('Page.frameNavigated', event => {
+  /**
+   * `Debugger.setSkipAllPauses` is reset after every navigation, so retrigger it on main frame navigations.
+   * See https://bugs.chromium.org/p/chromium/issues/detail?id=990945&q=setSkipAllPauses&can=2
+   * @param {LH.Crdp.Page.FrameNavigatedEvent} event
+   */
+  function onFrameNavigated(event) {
     if (event.frame.parentId) return;
     enable().catch(err => log.error('Driver', err));
-  });
+  }
+
+  session.on('Debugger.paused', onDebuggerPaused);
+  session.on('Page.frameNavigated', onFrameNavigated);
 
   await enable();
+
+  return async () => {
+    await session.sendCommand('Debugger.disable');
+    session.off('Debugger.paused', onDebuggerPaused);
+    session.off('Page.frameNavigated', onFrameNavigated);
+  };
 }
 
 /**
@@ -128,15 +144,12 @@ async function prepareThrottlingAndNetwork(session, settings, options) {
  * @param {LH.Gatherer.FRTransitionalDriver} driver
  * @param {LH.Config.Settings} settings
  */
-async function prepareDeviceEmulationAndAsyncStacks(driver, settings) {
+async function prepareDeviceEmulation(driver, settings) {
   // Enable network domain here so future calls to `emulate()` don't clear cache (https://github.com/GoogleChrome/lighthouse/issues/12631)
   await driver.defaultSession.sendCommand('Network.enable');
 
   // Emulate our target device screen and user agent.
   await emulation.emulate(driver.defaultSession, settings);
-
-  // Enable better stacks on network requests.
-  await enableAsyncStacks(driver.defaultSession);
 }
 
 /**
@@ -149,7 +162,7 @@ async function prepareTargetForTimespanMode(driver, settings) {
   const status = {msg: 'Preparing target for timespan mode', id: 'lh:prepare:timespanMode'};
   log.time(status);
 
-  await prepareDeviceEmulationAndAsyncStacks(driver, settings);
+  await prepareDeviceEmulation(driver, settings);
   await prepareThrottlingAndNetwork(driver.defaultSession, settings, {
     disableThrottling: false,
     blockedUrlPatterns: undefined,
@@ -171,7 +184,7 @@ async function prepareTargetForNavigationMode(driver, settings) {
   const status = {msg: 'Preparing target for navigation mode', id: 'lh:prepare:navigationMode'};
   log.time(status);
 
-  await prepareDeviceEmulationAndAsyncStacks(driver, settings);
+  await prepareDeviceEmulation(driver, settings);
 
   // Automatically handle any JavaScript dialogs to prevent a hung renderer.
   await dismissJavaScriptDialogs(driver.defaultSession);
@@ -227,4 +240,5 @@ export {
   prepareTargetForTimespanMode,
   prepareTargetForNavigationMode,
   prepareTargetForIndividualNavigation,
+  enableAsyncStacks,
 };

package/core/gather/gatherers/bf-cache-failures.js

@@ -9,6 +9,7 @@ import {waitForFrameNavigated, waitForLoadEvent} from '../driver/wait-for-condit
 import DevtoolsLog from './devtools-log.js';
 
 const FAILURE_EVENT_TIMEOUT = 100;
+const TEMP_PAGE_PAUSE_TIMEOUT = 100;
 
 class BFCacheFailures extends FRGatherer {
   /** @type {LH.Gatherer.GathererMeta<'DevtoolsLog'>} */
@@ -109,7 +110,9 @@ class BFCacheFailures extends FRGatherer {
     // https://github.com/GoogleChrome/lighthouse/issues/14665
     await Promise.all([
       session.sendCommand('Page.navigate', {url: 'chrome://terms'}),
-      waitForLoadEvent(session, 0).promise,
+      // DevTools e2e tests can sometimes fail on the next command if we progress too fast.
+      // The only reliable way to prevent this is to wait for an arbitrary period of time after load.
+      waitForLoadEvent(session, TEMP_PAGE_PAUSE_TIMEOUT).promise,
     ]);
 
     const [, frameNavigatedEvent] = await Promise.all([

package/core/gather/gatherers/inputs.js

@@ -61,6 +61,11 @@ function collectElements() {
       return [...labelElToArtifact.keys()].indexOf(labelEl);
     });
 
+    let preventsPaste;
+    if (!inputEl.readOnly) {
+      preventsPaste = !inputEl.dispatchEvent(new ClipboardEvent('paste', {cancelable: true}));
+    }
+
     inputArtifacts.push({
       parentFormIndex,
       labelIndices,
@@ -74,6 +79,7 @@ function collectElements() {
         // Requires `--enable-features=AutofillShowTypePredictions`.
         prediction: inputEl.getAttribute('autofill-prediction'),
       },
+      preventsPaste,
       // @ts-expect-error - getNodeDetails put into scope via stringification
       node: getNodeDetails(inputEl),
     });

package/core/gather/navigation-runner.js

@@ -227,6 +227,10 @@ async function _navigation(navigationContext) {
   };
 
   const setupResult = await _setupNavigation(navigationContext);
+
+  const disableAsyncStacks =
+    await prepare.enableAsyncStacks(navigationContext.driver.defaultSession);
+
   await collectPhaseArtifacts({phase: 'startInstrumentation', ...phaseState});
   await collectPhaseArtifacts({phase: 'startSensitiveInstrumentation', ...phaseState});
   const navigateResult = await _navigate(navigationContext);
@@ -244,6 +248,12 @@ async function _navigation(navigationContext) {
 
   await collectPhaseArtifacts({phase: 'stopSensitiveInstrumentation', ...phaseState});
   await collectPhaseArtifacts({phase: 'stopInstrumentation', ...phaseState});
+
+  // bf-cache-failures can emit `Page.frameNavigated` at the end of the run.
+  // This can cause us to issue protocol commands after the target closes.
+  // We should disable our `Page.frameNavigated` handlers before that.
+  await disableAsyncStacks();
+
   await _cleanupNavigation(navigationContext);
 
   return _computeNavigationResult(navigationContext, phaseState, setupResult, navigateResult);

package/core/gather/timespan-runner.js

@@ -9,7 +9,7 @@ import log from 'lighthouse-logger';
 import {Driver} from './driver.js';
 import {Runner} from '../runner.js';
 import {getEmptyArtifactState, collectPhaseArtifacts, awaitArtifacts} from './runner-helpers.js';
-import {prepareTargetForTimespanMode} from './driver/prepare.js';
+import {enableAsyncStacks, prepareTargetForTimespanMode} from './driver/prepare.js';
 import {initializeConfig} from '../config/config.js';
 import {getBaseArtifacts, finalizeArtifacts} from './base-artifacts.js';
 
@@ -44,6 +44,9 @@ async function startTimespanGather(page, options = {}) {
   };
 
   await prepareTargetForTimespanMode(driver, resolvedConfig.settings);
+
+  const disableAsyncStacks = await enableAsyncStacks(driver.defaultSession);
+
   await collectPhaseArtifacts({phase: 'startInstrumentation', ...phaseOptions});
   await collectPhaseArtifacts({phase: 'startSensitiveInstrumentation', ...phaseOptions});
 
@@ -58,6 +61,12 @@ async function startTimespanGather(page, options = {}) {
 
           await collectPhaseArtifacts({phase: 'stopSensitiveInstrumentation', ...phaseOptions});
           await collectPhaseArtifacts({phase: 'stopInstrumentation', ...phaseOptions});
+
+          // bf-cache-failures can emit `Page.frameNavigated` at the end of the run.
+          // This can cause us to issue protocol commands after the target closes.
+          // We should disable our `Page.frameNavigated` handlers before that.
+          await disableAsyncStacks();
+
           await collectPhaseArtifacts({phase: 'getArtifact', ...phaseOptions});
           await driver.disconnect();
 

package/core/legacy/config/legacy-default-config.js

@@ -59,7 +59,6 @@ legacyDefaultConfig.passes = [{
     'dobetterweb/doctype',
     'dobetterweb/domstats',
     'dobetterweb/optimized-images',
-    'dobetterweb/password-inputs-with-prevented-paste',
     'dobetterweb/response-compression',
     'dobetterweb/tags-blocking-first-paint',
     'seo/font-size',

package/core/legacy/gather/driver.d.ts

@@ -200,12 +200,13 @@ export class Driver implements LH.Gatherer.FRTransitionalDriver {
     /**
      * Begin recording devtools protocol messages.
      */
-    beginDevtoolsLog(): void;
+    beginDevtoolsLog(): Promise<void>;
+    _disableAsyncStacks: (() => Promise<void>) | undefined;
     /**
      * Stop recording to devtoolsLog and return log contents.
-     * @return {LH.DevtoolsLog}
+     * @return {Promise<LH.DevtoolsLog>}
      */
-    endDevtoolsLog(): LH.DevtoolsLog;
+    endDevtoolsLog(): Promise<LH.DevtoolsLog>;
     url(): Promise<string>;
 }
 import * as LH from "../../../types/lh.js";

package/core/legacy/gather/driver.js

@@ -16,6 +16,7 @@ import {fetchResponseBodyFromCache} from '../../gather/driver/network.js';
 import {DevtoolsMessageLog} from '../../gather/gatherers/devtools-log.js';
 import TraceGatherer from '../../gather/gatherers/trace.js';
 import {getBrowserVersion} from '../../gather/driver/environment.js';
+import {enableAsyncStacks} from '../../gather/driver/prepare.js';
 
 // Controls how long to wait for a response after sending a DevTools protocol command.
 const DEFAULT_PROTOCOL_TIMEOUT = 30000;
@@ -443,17 +444,19 @@ class Driver {
   /**
    * Begin recording devtools protocol messages.
    */
-  beginDevtoolsLog() {
+  async beginDevtoolsLog() {
+    this._disableAsyncStacks = await enableAsyncStacks(this);
     this._devtoolsLog.reset();
     this._devtoolsLog.beginRecording();
   }
 
   /**
    * Stop recording to devtoolsLog and return log contents.
-   * @return {LH.DevtoolsLog}
+   * @return {Promise<LH.DevtoolsLog>}
    */
-  endDevtoolsLog() {
+  async endDevtoolsLog() {
     this._devtoolsLog.endRecording();
+    await this._disableAsyncStacks?.();
     return this._devtoolsLog.messages;
   }
 

package/core/legacy/gather/gather-runner.js

@@ -235,7 +235,7 @@ class GatherRunner {
       id: `lh:gather:getDevtoolsLog`,
     };
     log.time(status);
-    const devtoolsLog = driver.endDevtoolsLog();
+    const devtoolsLog = await driver.endDevtoolsLog();
     const networkRecords = await NetworkRecords.request(devtoolsLog, passContext);
     log.timeEnd(status);
 

package/core/runner.d.ts

@@ -20,12 +20,7 @@ export class Runner {
      * @param {LH.Artifacts} artifacts
      * @param {LH.Artifacts.ComputedContext} context
      */
-    static getEntityClassification(artifacts: LH.Artifacts, context: LH.Artifacts.ComputedContext): Promise<{
-        list: import("../types/lhr/lhr.js").default.LhrEntity[];
-        firstParty: string | undefined;
-        entityIndexByOrigin: Record<string, number>;
-        entityIndexByName: Record<string, number>;
-    } | undefined>;
+    static getEntityClassification(artifacts: LH.Artifacts, context: LH.Artifacts.ComputedContext): Promise<import("../types/lhr/lhr.js").default.LhrEntity[] | undefined>;
     /**
      * User can run -G solo, -A solo, or -GA together
      * -G and -A will run partial lighthouse pipelines,

package/core/runner.js

@@ -154,37 +154,26 @@ class Runner {
 
     /** @type {Array<LH.Result.LhrEntity>} */
     const entities = [];
-    /** @type {Record<string, number>} */
-    const entityIndexByOrigin = {};
-    /** @type {Record<string, number>} */
-    const entityIndexByName = {};
-
     for (const [entity, entityUrls] of classifiedEntities.urlsByEntity) {
+      const uniqueOrigins = new Set();
+      for (const url of entityUrls) {
+        const origin = UrlUtils.getOrigin(url);
+        if (origin) uniqueOrigins.add(origin);
+      }
+
       /** @type {LH.Result.LhrEntity} */
       const shortEntity = {
         name: entity.name,
         homepage: entity.homepage,
+        origins: [...uniqueOrigins],
       };
-
       // Reduce payload size in LHR JSON by omitting whats falsy.
       if (entity === classifiedEntities.firstParty) shortEntity.isFirstParty = true;
       if (entity.isUnrecognized) shortEntity.isUnrecognized = true;
-
-      const id = entities.push(shortEntity) - 1;
-      for (const url of entityUrls) {
-        const origin = UrlUtils.getOrigin(url);
-        if (!origin) continue;
-        entityIndexByOrigin[origin] = id;
-      }
-      entityIndexByName[shortEntity.name] = id;
+      entities.push(shortEntity);
     }
 
-    return {
-      list: entities,
-      firstParty: classifiedEntities.firstParty?.name,
-      entityIndexByOrigin,
-      entityIndexByName,
-    };
+    return entities;
   }
 
   /**

package/dist/report/bundle.esm.js

@@ -1626,11 +1626,11 @@ class ReportUtils {
 
   /**
    * Mark TableItems/OpportunityItems with entity names.
-   * @param {LH.Result.Entities|undefined} entityClassification
+   * @param {LH.Result.Entities|undefined} entities
    * @param {import('../../types/lhr/audit-result').Result} audit
    */
-  static classifyEntities(entityClassification, audit) {
-    if (!entityClassification) return;
+  static classifyEntities(entities, audit) {
+    if (!entities) return;
     if (audit.details?.type !== 'opportunity' && audit.details?.type !== 'table') {
       return;
     }
@@ -1647,17 +1647,15 @@ class ReportUtils {
       const url = urlLocatorFn(item);
       if (!url) continue;
 
-      let origin;
+      let origin = '';
       try {
         // Non-URLs can appear in valueType: url columns, like 'Unattributable'
         origin = Util.parseURL(url).origin;
       } catch {}
       if (!origin) continue;
 
-      const entityIndex = entityClassification.entityIndexByOrigin[origin];
-      if (entityIndex === undefined) return;
-      const entity = entityClassification.list[entityIndex];
-      item.entity = entity.name;
+      const entity = entities.find(e => e.origins.includes(origin));
+      if (entity) item.entity = entity.name;
     }
   }
 
@@ -5832,7 +5830,7 @@ class ReportUIFeatures {
    */
   _getThirdPartyRows(rowEls, finalDisplayedUrl) {
     const finalDisplayedUrlRootDomain = Util.getRootDomain(finalDisplayedUrl);
-    const firstPartyEntityName = this.json.entities?.firstParty;
+    const firstPartyEntityName = this.json.entities?.find(e => e.isFirstParty === true)?.name;
 
     /** @type {Array<HTMLElement>} */
     const thirdPartyRowEls = [];