Bug 1898745 - P6. Update formautofill iOS library to accommodate the new architecture r=credential-management-reviewers,issammani

Differential Revision: https://phabricator.services.mozilla.com/D212239

browser/extensions/formautofill/test/unit/test_autofill_ios_library.js

@@ -0,0 +1,160 @@
+/* Any copyright is dedicated to the Public Domain.
+https://creativecommons.org/publicdomain/zero/1.0/ */
+
+const { FormAutofillChild } = ChromeUtils.importESModule(
+  "resource://autofill/FormAutofillChild.ios.sys.mjs"
+);
+
+("use strict");
+
+class Callback {
+  waitForCallback() {
+    this.promise = new Promise(resolve => {
+      this._resolve = resolve;
+    });
+    return this.promise;
+  }
+
+  address = {
+    autofill: fieldsWithValues => this._resolve?.(fieldsWithValues),
+    submit: records => this._resolve?.(records),
+  };
+
+  creditCard = {
+    autofill: fieldsWithValues => this._resolve?.(fieldsWithValues),
+    submit: records => this._resolve?.(records),
+  };
+}
+
+const TEST_CASES = [
+  {
+    description: `basic credit card form`,
+    document: `<form>
+                 <input id="cc-number" autocomplete="cc-number">
+                 <input id="cc-name" autocomplete="cc-name">
+                 <input id="cc-exp-month" autocomplete="cc-exp-month">
+                 <input id="cc-exp-year" autocomplete="cc-exp-year">
+               </form>`,
+    fillPayload: {
+      "cc-number": "4111111111111111",
+      "cc-name": "test name",
+      "cc-exp-month": 6,
+      "cc-exp-year": 25,
+    },
+
+    expectedDetectedFields: {
+      "cc-number": "",
+      "cc-name": "",
+      "cc-exp-month": "",
+      "cc-exp-year": "",
+      "cc-type": "",
+    },
+
+    expectedFill: {
+      "#cc-number": "4111111111111111",
+      "#cc-name": "test name",
+      "#cc-exp-month": 6,
+      "#cc-exp-year": 25,
+    },
+
+    expectedSubmit: [
+      {
+        "cc-number": "4111111111111111",
+        "cc-name": "test name",
+        "cc-exp-month": 6,
+        "cc-exp-year": 2025,
+        "cc-type": "visa",
+      },
+    ],
+  },
+  {
+    description: `basic address form`,
+    document: `<form>
+                 <input id="given-name" autocomplete="given-name">
+                 <input id="family-name" autocomplete="family-name">
+                 <input id="street-address" autocomplete="street-address">
+                 <input id="address-level2" autocomplete="address-level2">
+                 <select id="country" autocomplete="country">
+                   <option/>
+                   <option value="US">United States</option>
+                 </select>
+                 <input id="email" autocomplete="email">
+                 <input id="tel" autocomplete="tel">
+                <form>`,
+    fillPayload: {
+      "street-address": "2 Harrison St line2",
+      "address-level2": "San Francisco",
+      country: "US",
+      email: "foo@mozilla.com",
+      tel: "1234567",
+    },
+
+    expectedFill: {
+      "#street-address": "2 Harrison St line2",
+      "#address-level2": "San Francisco",
+      "#country": "US",
+      "#email": "foo@mozilla.com",
+      "#tel": "1234567",
+    },
+
+    expectedDetectedFields: {
+      "given-name": "",
+      "family-name": "",
+      "street-address": "",
+      "address-level2": "",
+      country: "",
+      email: "",
+      tel: "",
+    },
+
+    expectedSubmit: null,
+  },
+];
+
+add_task(async function test_ios_api() {
+  for (const TEST of TEST_CASES) {
+    info(`Test ${TEST.description}`);
+    const doc = MockDocument.createTestDocument(
+      "http://localhost:8080/test/",
+      TEST.document
+    );
+
+    const callbacks = new Callback();
+    const fac = new FormAutofillChild(callbacks);
+
+    // Test `onFocusIn` API
+    let promise = callbacks.waitForCallback();
+    fac.onFocusIn({ target: doc.querySelector("input") });
+    const autofillCallbackResult = await promise;
+
+    Assert.deepEqual(
+      autofillCallbackResult,
+      TEST.expectedDetectedFields,
+      "Should receive autofill callback"
+    );
+
+    // Test `fillFormFields` API
+    fac.fillFormFields(TEST.fillPayload);
+    Object.entries(TEST.expectedFill).forEach(([selector, expectedValue]) => {
+      const element = doc.querySelector(selector);
+      Assert.equal(
+        element.value,
+        expectedValue,
+        `Should fill ${element.id} field correctly`
+      );
+    });
+
+    // Test `onSubmit` API
+    if (TEST.expectedSubmit) {
+      promise = callbacks.waitForCallback();
+      fac.onSubmit();
+      const submitCallbackResult = await promise;
+
+      Assert.deepEqual(
+        submitCallbackResult,
+        TEST.expectedSubmit,
+        "Should receive submit callback"
+      );
+    }
+  }
+});

browser/extensions/formautofill/test/unit/xpcshell.toml

@@ -50,6 +50,8 @@ skip-if = [
   "apple_silicon", # bug 1729554
 ]
 
+["test_autofill_ios_library.js"]
+
 ["test_collectFormFields.js"]
 
 ["test_createRecords.js"]

toolkit/components/formautofill/FormAutofillChild.ios.sys.mjs

@@ -3,10 +3,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-disable no-undef,mozilla/balanced-listeners */
+import { AddressRecord } from "resource://gre/modules/shared/AddressRecord.sys.mjs";
 import { FormAutofillUtils } from "resource://gre/modules/shared/FormAutofillUtils.sys.mjs";
 import { FormStateManager } from "resource://gre/modules/shared/FormStateManager.sys.mjs";
 import { CreditCardRecord } from "resource://gre/modules/shared/CreditCardRecord.sys.mjs";
-import { AddressRecord } from "resource://gre/modules/shared/AddressRecord.sys.mjs";
+import {
+  FormAutofillAddressSection,
+  FormAutofillCreditCardSection,
+  FormAutofillSection,
+} from "resource://gre/modules/shared/FormAutofillSection.sys.mjs";
 
 export class FormAutofillChild {
   /**
@@ -28,34 +33,11 @@ export class FormAutofillChild {
 
     this.fieldDetailsManager = new FormStateManager();
 
-    document.addEventListener("focusin", this.onFocusIn);
-    document.addEventListener("submit", this.onSubmit);
-  }
-
-  _doIdentifyAutofillFields(element) {
-    this.fieldDetailsManager.updateActiveInput(element);
-    this.fieldDetailsManager.identifyAutofillFields(element);
-
-    const activeFieldName =
-      this.fieldDetailsManager.activeFieldDetail?.fieldName;
-
-    const activeFieldDetails =
-      this.fieldDetailsManager.activeSection?.fieldDetails;
-
-    // Only ping swift if current field is either a cc or address field
-    if (!activeFieldDetails?.find(field => field.element === element)) {
-      return;
-    }
-
-    const fieldNamesWithValues =
-      this.transformToFieldNamesWithValues(activeFieldDetails);
-    if (FormAutofillUtils.isAddressField(activeFieldName)) {
-      this.callbacks.address.autofill(fieldNamesWithValues);
-    } else if (FormAutofillUtils.isCreditCardField(activeFieldName)) {
-      // Normalize record format so we always get a consistent
-      // credit card record format: {cc-number, cc-name, cc-exp-month, cc-exp-year}
-      CreditCardRecord.normalizeFields(fieldNamesWithValues);
-      this.callbacks.creditCard.autofill(fieldNamesWithValues);
+    try {
+      document.addEventListener("focusin", this.onFocusIn);
+      document.addEventListener("submit", this.onSubmit);
+    } catch {
+      // We don't have `document` when running in xpcshell-test
     }
   }
 
@@ -69,35 +51,112 @@ export class FormAutofillChild {
     );
   }
 
-  onFocusIn(evt) {
-    const element = evt.target;
-    this.fieldDetailsManager.updateActiveInput(element);
+  _doIdentifyAutofillFields(element) {
+    if (this.#focusedElement == element) {
+      return;
+    }
+    this.#focusedElement = element;
+
     if (!FormAutofillUtils.isCreditCardOrAddressFieldType(element)) {
       return;
     }
-    this._doIdentifyAutofillFields(element);
+
+    // Find the autofill handler for this form and identify all the fields.
+    const { handler, newFieldsIdentified } =
+      this.fieldDetailsManager.identifyAutofillFields(element);
+
+    // If we found newly identified fields, run section classification heuristic
+    if (newFieldsIdentified) {
+      this.#sections = FormAutofillSection.classifySections(
+        handler.fieldDetails
+      );
+    }
   }
 
-  onSubmit(_event) {
-    if (!this.fieldDetailsManager.activeHandler) {
+  #focusedElement = null;
+
+  // This is a cache contains the classified section for the active form.
+  #sections = null;
+
+  get activeSection() {
+    const elementId = this.activeFieldDetail?.elementId;
+    return this.#sections?.find(section =>
+      section.getFieldDetailByElementId(elementId)
+    );
+  }
+
+  // active field detail only exists if we identified its field name
+  get activeFieldDetail() {
+    return this.activeHandler?.getFieldDetailByElement(this.#focusedElement);
+  }
+
+  get activeHandler() {
+    return this.fieldDetailsManager.getFormHandler(this.#focusedElement);
+  }
+
+  onFocusIn(evt) {
+    const element = evt.target;
+
+    this._doIdentifyAutofillFields(element);
+
+    // Only ping swift if current field is either a cc or address field
+    if (!this.activeFieldDetail) {
       return;
     }
 
-    this.fieldDetailsManager.activeHandler.onFormSubmitted();
-    const records = this.fieldDetailsManager.activeHandler.createRecords();
+    const fieldNamesWithValues = this.transformToFieldNamesWithValues(
+      this.activeSection.fieldDetails
+    );
 
-    if (records.creditCard.length) {
+    if (FormAutofillUtils.isAddressField(this.activeFieldDetail.fieldName)) {
+      this.callbacks.address.autofill(fieldNamesWithValues);
+    } else if (
+      FormAutofillUtils.isCreditCardField(this.activeFieldDetail.fieldName)
+    ) {
       // Normalize record format so we always get a consistent
       // credit card record format: {cc-number, cc-name, cc-exp-month, cc-exp-year}
-      const creditCardRecords = records.creditCard.map(entry => {
+      CreditCardRecord.normalizeFields(fieldNamesWithValues);
+      this.callbacks.creditCard.autofill(fieldNamesWithValues);
+    }
+  }
+
+  onSubmit(_event) {
+    if (!this.activeHandler) {
+      return;
+    }
+
+    // Get filled value for the form
+    const formFilledData = this.activeHandler.collectFormFilledData();
+
+    // Should reference `_onFormSubmit` in `FormAutofillParent.sys.mjs`
+    const creditCard = [];
+
+    for (const section of this.#sections) {
+      const secRecord = section.createRecord(formFilledData);
+      if (!secRecord) {
+        continue;
+      }
+
+      if (section instanceof FormAutofillAddressSection) {
+        // TODO(FXSP-133 Phase 3): Support address capture
+        // this.callbacks.address.submit();
+        continue;
+      } else if (section instanceof FormAutofillCreditCardSection) {
+        creditCard.push(secRecord);
+      } else {
+        throw new Error("Unknown section type");
+      }
+    }
+
+    if (creditCard.length) {
+      // Normalize record format so we always get a consistent
+      // credit card record format: {cc-number, cc-name, cc-exp-month, cc-exp-year}
+      const creditCardRecords = creditCard.map(entry => {
         CreditCardRecord.normalizeFields(entry.record);
         return entry.record;
       });
       this.callbacks.creditCard.submit(creditCardRecords);
     }
-
-    // TODO(FXSP-133 Phase 3): Support address capture
-    // this.callbacks.address.submit();
   }
 
   fillFormFields(payload) {
@@ -105,14 +164,16 @@ export class FormAutofillChild {
     // all additional data must be computed. On Desktop, computed fields are handled in FormAutofillStorageBase.sys.mjs at the time of saving. Ideally, we should centralize
     // all transformations, computations, and normalization processes within AddressRecord.sys.mjs to maintain a unified implementation across both platforms.
     // This will be addressed in FXCM-810, aiming to simplify our data representation for both credit cards and addresses.
-    if (
-      FormAutofillUtils.isAddressField(
-        this.fieldDetailsManager.activeFieldDetail?.fieldName
-      )
-    ) {
+
+    if (FormAutofillUtils.isAddressField(this.activeFieldDetail?.fieldName)) {
       AddressRecord.computeFields(payload);
     }
-    this.fieldDetailsManager.activeHandler.autofillFormFields(payload);
+
+    this.activeHandler.fillFields(
+      FormAutofillUtils.getElementIdentifier(this.#focusedElement),
+      this.activeSection.fieldDetails.map(f => f.elementId),
+      payload
+    );
   }
 }
 

toolkit/components/formautofill/Overrides.ios.js

@@ -11,6 +11,7 @@ const ModuleOverrides = {
   "XPCOMUtils.sys.mjs": "Helpers.ios.mjs",
   "Region.sys.mjs": "Helpers.ios.mjs",
   "OSKeyStore.sys.mjs": "Helpers.ios.mjs",
+  "ContentDOMReference.sys.mjs": "Helpers.ios.mjs",
   "FormAutofill.sys.mjs": "FormAutofill.ios.sys.mjs",
   "EntryFile.sys.mjs": "FormAutofillChild.ios.sys.mjs",
 };