lighthouse 9.3.1-dev.20220213 → 9.3.1-dev.20220214

package/lighthouse-cli/test/smokehouse/core-tests.js

@@ -14,7 +14,7 @@ import dbw from './test-definitions/dobetterweb.js';
 import errorsExpiredSsl from './test-definitions/errors-expired-ssl.js';
 import errorsIframeExpiredSsl from './test-definitions/errors-iframe-expired-ssl.js';
 import errorsInfiniteLoop from './test-definitions/errors-infinite-loop.js';
-// import formsAutoComplete from './test-definitions/forms-autocomplete.js';
+import formsAutoComplete from './test-definitions/forms-autocomplete.js';
 import issuesMixedContent from './test-definitions/issues-mixed-content.js';
 import lanternFetch from './test-definitions/lantern-fetch.js';
 import lanternIdleCallbackLong from './test-definitions/lantern-idle-callback-long.js';
@@ -72,8 +72,7 @@ const smokeTests = [
   errorsExpiredSsl,
   errorsIframeExpiredSsl,
   errorsInfiniteLoop,
-  // TODO: restore when --enable-features=AutofillShowTypePredictions is not needed.
-  // formsAutoComplete,
+  formsAutoComplete,
   issuesMixedContent,
   lanternOnline,
   lanternSetTimeout,

package/lighthouse-core/audits/autocomplete.js

@@ -195,12 +195,12 @@ class AutocompleteAudit extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['FormElements'],
+      requiredArtifacts: ['Inputs'],
     };
   }
 
   /**
-   * @param {LH.Artifacts.FormInput} input
+   * @param {LH.Artifacts.InputElement} input
    * @return {{hasValidTokens: boolean, isValidOrder?: boolean}}
    */
   static checkAttributeValidity(input) {
@@ -224,47 +224,44 @@ class AutocompleteAudit extends Audit {
    * @return {LH.Audit.Product}
    */
   static audit(artifacts) {
-    const forms = artifacts.FormElements;
     const failingFormsData = [];
     const warnings = [];
     let foundPrediction = false;
-    for (const form of forms) {
-      for (const input of form.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;
+    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;
+      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,
-        });
+      // @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']} */

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

@@ -144,7 +144,7 @@ const defaultConfig = {
       'meta-elements',
       'script-elements',
       'iframe-elements',
-      'form-elements',
+      'inputs',
       'main-document-content',
       'global-listeners',
       'dobetterweb/doctype',

package/lighthouse-core/fraggle-rock/config/default-config.js

@@ -46,7 +46,7 @@ const artifacts = {
   DOMStats: '',
   EmbeddedContent: '',
   FontSize: '',
-  FormElements: '',
+  Inputs: '',
   FullPageScreenshot: '',
   GlobalListeners: '',
   IFrameElements: '',
@@ -96,7 +96,7 @@ const defaultConfig = {
     {id: artifacts.DOMStats, gatherer: 'dobetterweb/domstats'},
     {id: artifacts.EmbeddedContent, gatherer: 'seo/embedded-content'},
     {id: artifacts.FontSize, gatherer: 'seo/font-size'},
-    {id: artifacts.FormElements, gatherer: 'form-elements'},
+    {id: artifacts.Inputs, gatherer: 'inputs'},
     {id: artifacts.FullPageScreenshot, gatherer: 'full-page-screenshot'},
     {id: artifacts.GlobalListeners, gatherer: 'global-listeners'},
     {id: artifacts.IFrameElements, gatherer: 'iframe-elements'},
@@ -148,7 +148,7 @@ const defaultConfig = {
         artifacts.DOMStats,
         artifacts.EmbeddedContent,
         artifacts.FontSize,
-        artifacts.FormElements,
+        artifacts.Inputs,
         artifacts.GlobalListeners,
         artifacts.IFrameElements,
         artifacts.ImageElements,

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

@@ -0,0 +1,113 @@
+/**
+ * @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.
+ */
+'use strict';
+
+/* global getNodeDetails */
+
+const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
+const pageFunctions = require('../../lib/page-functions.js');
+
+/* eslint-env browser, node */
+
+/**
+ * @return {LH.Artifacts['Inputs']}
+ */
+/* c8 ignore start */
+function collectElements() {
+  /** @type {LH.Artifacts.InputElement[]} */
+  const inputArtifacts = [];
+  /** @type {Map<HTMLFormElement, LH.Artifacts.FormElement>} */
+  const formElToArtifact = new Map();
+  /** @type {Map<HTMLLabelElement, LH.Artifacts.LabelElement>} */
+  const labelElToArtifact = new Map();
+
+  /** @type {HTMLFormElement[]} */
+  // @ts-expect-error - put into scope via stringification
+  const formEls = getElementsInDocument('form'); // eslint-disable-line no-undef
+  for (const formEl of formEls) {
+    formElToArtifact.set(formEl, {
+      id: formEl.id,
+      name: formEl.name,
+      autocomplete: formEl.autocomplete,
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(formEl),
+    });
+  }
+
+  /** @type {HTMLLabelElement[]} */
+  // @ts-expect-error - put into scope via stringification
+  const labelEls = getElementsInDocument('label'); // eslint-disable-line no-undef
+  for (const labelEl of labelEls) {
+    labelElToArtifact.set(labelEl, {
+      for: labelEl.htmlFor,
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(labelEl),
+    });
+  }
+
+  /** @type {HTMLInputElement[]} */
+  // @ts-expect-error - put into scope via stringification
+  const inputEls = getElementsInDocument('textarea, input, select'); // eslint-disable-line no-undef
+  for (const inputEl of inputEls) {
+    // If the input element is in a form (either because an ancestor element is <form> or the
+    // form= attribute is associated with a <form> element's id), this will be set.
+    const parentFormEl = inputEl.form;
+    const parentFormIndex = parentFormEl ?
+      [...formElToArtifact.keys()].indexOf(parentFormEl) :
+      undefined;
+    const labelIndicies = [...inputEl.labels || []].map((labelEl) => {
+      return [...labelElToArtifact.keys()].indexOf(labelEl);
+    });
+
+    inputArtifacts.push({
+      parentFormIndex,
+      labelIndicies,
+      id: inputEl.id,
+      name: inputEl.name,
+      type: inputEl.type,
+      placeholder: inputEl instanceof HTMLSelectElement ? undefined : inputEl.placeholder,
+      autocomplete: {
+        property: inputEl.autocomplete,
+        attribute: inputEl.getAttribute('autocomplete'),
+        // Requires `--enable-features=AutofillShowTypePredictions`.
+        prediction: inputEl.getAttribute('autofill-prediction'),
+      },
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(inputEl),
+    });
+  }
+
+  return {
+    inputs: inputArtifacts,
+    forms: [...formElToArtifact.values()],
+    labels: [...labelElToArtifact.values()],
+  };
+}
+/* c8 ignore stop */
+
+class Inputs extends FRGatherer {
+  /** @type {LH.Gatherer.GathererMeta} */
+  meta = {
+    supportedModes: ['snapshot', 'navigation'],
+  };
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} passContext
+   * @return {Promise<LH.Artifacts['Inputs']>}
+   */
+  async getArtifact(passContext) {
+    return passContext.driver.executionContext.evaluate(collectElements, {
+      args: [],
+      useIsolation: true,
+      deps: [
+        pageFunctions.getElementsInDocumentString,
+        pageFunctions.getNodeDetailsString,
+      ],
+    });
+  }
+}
+
+module.exports = Inputs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.3.1-dev.20220213",
+  "version": "9.3.1-dev.20220214",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/types/artifacts.d.ts

@@ -139,8 +139,8 @@ export interface GathererArtifacts extends PublicGathererArtifacts,LegacyBaseArt
   Fonts: Artifacts.Font[];
   /** Information on poorly sized font usage and the text affected by it. */
   FontSize: Artifacts.FontSize;
-  /** All the form elements in the page and formless inputs. */
-  FormElements: Artifacts.Form[];
+  /** All the input elements, including associated form and label elements. */
+  Inputs: {inputs: Artifacts.InputElement[]; forms: Artifacts.FormElement[]; labels: Artifacts.LabelElement[]};
   /** Screenshot of the entire page (rather than just the above the fold content). */
   FullPageScreenshot: Artifacts.FullPageScreenshot | null;
   /** Information about event listeners registered on the global object. */
@@ -787,22 +787,22 @@ declare module Artifacts {
     observedSpeedIndexTs: number;
   }
 
-  interface Form {
-    /** If attributes is missing that means this is a formless set of elements. */
-    attributes?: {
-      id: string;
-      name: string;
-      autocomplete: string;
-    };
-    node: NodeDetails | null;
-    inputs: Array<FormInput>;
-    labels: Array<FormLabel>;
+  interface FormElement {
+    id: string;
+    name: string;
+    autocomplete: string;
+    node: NodeDetails;
   }
 
   /** Attributes collected for every input element in the inputs array from the forms interface. */
-  interface FormInput {
+  interface InputElement {
+    /** If set, the parent form is the index into the associated FormElement array. Otherwise, the input element has no parent form. */
+    parentFormIndex?: number;
+    /** Array of indices into associated LabelElement array. */
+    labelIndicies: number[];
     id: string;
     name: string;
+    type: string;
     placeholder?: string;
     autocomplete: {
       property: string;
@@ -813,7 +813,7 @@ declare module Artifacts {
   }
 
   /** Attributes collected for every label element in the labels array from the forms interface */
-  interface FormLabel {
+  interface LabelElement {
     for: string;
     node: NodeDetails;
   }

package/lighthouse-core/gather/gatherers/form-elements.js

@@ -1,113 +0,0 @@
-/**
- * @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.
- */
-'use strict';
-
-/* global getNodeDetails */
-
-const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
-const pageFunctions = require('../../lib/page-functions.js');
-
-/* eslint-env browser, node */
-
-/**
- * @return {LH.Artifacts['FormElements']}
- */
-/* c8 ignore start */
-function collectFormElements() {
-  // @ts-expect-error - put into scope via stringification
-  const formChildren = getElementsInDocument('textarea, input, label, select'); // eslint-disable-line no-undef
-  /** @type {Map<HTMLFormElement|string, LH.Artifacts.Form>} */
-  const forms = new Map();
-  /** @type {LH.Artifacts.Form} */
-  const formlessObj = {
-    node: null,
-    inputs: [],
-    labels: [],
-  };
-  for (const child of formChildren) {
-    const isButton = child instanceof HTMLInputElement &&
-      (child.type === 'submit' || child.type === 'button');
-    if (isButton) continue;
-
-    const parentFormElement = child.form;
-    const hasForm = !!parentFormElement;
-    if (hasForm && !forms.has(parentFormElement)) {
-      const newFormObj = {
-        attributes: {
-          id: parentFormElement.id,
-          name: parentFormElement.name,
-          autocomplete: parentFormElement.autocomplete,
-        },
-        // @ts-expect-error - getNodeDetails put into scope via stringification
-        node: getNodeDetails(parentFormElement),
-        inputs: [],
-        labels: [],
-      };
-      forms.set(parentFormElement, newFormObj);
-    }
-    const formObj = forms.get(parentFormElement) || formlessObj;
-    if (child instanceof HTMLInputElement || child instanceof HTMLTextAreaElement ||
-      child instanceof HTMLSelectElement) {
-      formObj.inputs.push({
-        id: child.id,
-        name: child.name,
-        placeholder: child instanceof HTMLSelectElement ? undefined : child.placeholder,
-        autocomplete: {
-          property: child.autocomplete,
-          // Requires `--enable-features=AutofillShowTypePredictions`.
-          attribute: child.getAttribute('autocomplete'),
-          prediction: child.getAttribute('autofill-prediction'),
-        },
-        // @ts-expect-error - getNodeDetails put into scope via stringification
-        node: getNodeDetails(child),
-      });
-    }
-    if (child instanceof HTMLLabelElement) {
-      formObj.labels.push({
-        for: child.htmlFor,
-        // @ts-expect-error - getNodeDetails put into scope via stringification
-        node: getNodeDetails(child),
-      });
-    }
-  }
-
-  if (formlessObj.inputs.length > 0 || formlessObj.labels.length > 0) {
-    forms.set('formless', {
-      node: formlessObj.node,
-      inputs: formlessObj.inputs,
-      labels: formlessObj.labels,
-    });
-  }
-  return [...forms.values()];
-}
-/* c8 ignore stop */
-
-class FormElements extends FRGatherer {
-  /** @type {LH.Gatherer.GathererMeta} */
-  meta = {
-    supportedModes: ['snapshot', 'navigation'],
-  };
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalContext} passContext
-   * @return {Promise<LH.Artifacts['FormElements']>}
-   */
-  async getArtifact(passContext) {
-    const driver = passContext.driver;
-
-    const formElements = await driver.executionContext.evaluate(collectFormElements, {
-      args: [],
-      useIsolation: true,
-      deps: [
-        pageFunctions.getElementsInDocumentString,
-        pageFunctions.getNodeDetailsString,
-      ],
-    });
-    return formElements;
-  }
-}
-
-module.exports = FormElements;