From 60d697d08d1d87b78d619a561feeec22f7b611d1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 20 Oct 2024 00:14:50 +0000
Subject: [PATCH] Refactor [vXXX] auto update credential provider script

---
 .../AddressMetaDataExtension.sys.mjs          |    1 +
 .../CC_Script/AutofillTelemetry.sys.mjs       |  384 ++---
 .../Client/Assets/CC_Script/Constants.ios.mjs |    2 +
 .../CC_Script/CreditCardRuleset.sys.mjs       |    4 +-
 .../Assets/CC_Script/FieldScanner.sys.mjs     |  204 +--
 .../Assets/CC_Script/FormAutofill.sys.mjs     |    8 +
 .../CC_Script/FormAutofillChild.ios.sys.mjs   |  182 ++-
 .../CC_Script/FormAutofillHandler.sys.mjs     | 1037 ++++++++++---
 .../CC_Script/FormAutofillHeuristics.sys.mjs  |  484 ++++---
 .../CC_Script/FormAutofillSection.sys.mjs     | 1287 ++++-------------
 .../CC_Script/FormAutofillUtils.sys.mjs       |  129 +-
 .../Assets/CC_Script/FormLikeFactory.sys.mjs  |   98 +-
 .../Assets/CC_Script/FormStateManager.sys.mjs |  169 +--
 .../Client/Assets/CC_Script/Helpers.ios.mjs   |   96 +-
 .../Assets/CC_Script/HeuristicsRegExp.sys.mjs |   22 +-
 .../Assets/CC_Script/LabelUtils.sys.mjs       |   11 +-
 .../Client/Assets/CC_Script/Overrides.ios.js  |    2 +
 17 files changed, 2162 insertions(+), 1958 deletions(-)

diff --git a/firefox-ios/Client/Assets/CC_Script/AddressMetaDataExtension.sys.mjs b/firefox-ios/Client/Assets/CC_Script/AddressMetaDataExtension.sys.mjs
index da13b667849d3..f4dca18dde145 100644
--- a/firefox-ios/Client/Assets/CC_Script/AddressMetaDataExtension.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/AddressMetaDataExtension.sys.mjs
@@ -254,6 +254,7 @@ export const AddressMetaDataExtension = {
   },
   "data/DE": {
     alpha_3_code: "DEU",
+    address_reversed: true,
   },
   "data/GH": {
     alpha_3_code: "GHA",
diff --git a/firefox-ios/Client/Assets/CC_Script/AutofillTelemetry.sys.mjs b/firefox-ios/Client/Assets/CC_Script/AutofillTelemetry.sys.mjs
index 6a1fa974cc9cb..2987ec2c15cff 100644
--- a/firefox-ios/Client/Assets/CC_Script/AutofillTelemetry.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/AutofillTelemetry.sys.mjs
@@ -3,7 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { FormAutofillUtils } from "resource://gre/modules/shared/FormAutofillUtils.sys.mjs";
-import { FormAutofillCreditCardSection } from "resource://gre/modules/shared/FormAutofillSection.sys.mjs";
 
 const { FIELD_STATES } = FormAutofillUtils;
 
@@ -41,7 +40,7 @@ class AutofillTelemetryBase {
    * or `address_form` event and the Glean event `cc_form`, and `address_form`.
    * It indicates the detected credit card or address fields and which method (autocomplete property, regular expression heuristics or fathom) identified them.
    *
-   * @param {object} section Using section.fieldDetails to extract which fields were identified and how
+   * @param {Array<object>} fieldDetails fieldDetails to extract which fields were identified and how
    * @param {string} undetected Default value when a field is not detected: 'undetected' (Glean) and 'false' in (Legacy)
    * @param {string} autocomplete Value when a field is identified with autocomplete property: 'autocomplete' (Glean), 'true' (Legacy)
    * @param {string} regexp Value when a field is identified with regex expression heuristics: 'regexp' (Glean), '0' (Legacy)
@@ -49,7 +48,7 @@ class AutofillTelemetryBase {
    * @returns {object} Extra keys to include in the form event
    */
   #buildFormDetectedEventExtra(
-    section,
+    fieldDetails,
     undetected,
     autocomplete,
     regexp,
@@ -58,7 +57,7 @@ class AutofillTelemetryBase {
     let extra = this.#initFormEventExtra(undetected);
 
     let identified = new Set();
-    section.fieldDetails.forEach(detail => {
+    fieldDetails.forEach(detail => {
       identified.add(detail.fieldName);
 
       if (detail.reason == "autocomplete") {
@@ -86,140 +85,148 @@ class AutofillTelemetryBase {
     return extra;
   }
 
-  recordFormDetected(section) {
+  recordFormDetected(flowId, fieldDetails) {
     this.recordFormEvent(
       "detected",
-      section.flowId,
-      this.#buildFormDetectedEventExtra(section, "false", "true", "0", false)
+      flowId,
+      this.#buildFormDetectedEventExtra(
+        fieldDetails,
+        "false",
+        "true",
+        "0",
+        false
+      )
     );
 
     this.recordGleanFormEvent(
       "formDetected",
-      section.flowId,
+      flowId,
       this.#buildFormDetectedEventExtra(
-        section,
+        fieldDetails,
         "undetected",
         "autocomplete",
         "regexp",
         true
       )
     );
+
+    try {
+      this.recordIframeLayoutDetection(flowId, fieldDetails);
+    } catch {}
   }
 
-  recordPopupShown(section, fieldName) {
-    const extra = { field_name: fieldName };
-    this.recordFormEvent("popup_shown", section.flowId, extra);
-    this.recordGleanFormEvent("formPopupShown", section.flowId, extra);
+  recordPopupShown(flowId, fieldDetails) {
+    const extra = { field_name: fieldDetails[0].fieldName };
+    this.recordFormEvent("popup_shown", flowId, extra);
+    this.recordGleanFormEvent("formPopupShown", flowId, extra);
   }
 
-  recordFormFilled(section, profile) {
+  recordFormFilled(flowId, fieldDetails, data) {
     // Calculate values for telemetry
-    let extra = this.#initFormEventExtra("unavailable");
-
-    for (let fieldDetail of section.fieldDetails) {
-      let element = fieldDetail.element;
-      let state = profile[fieldDetail.fieldName] ? "filled" : "not_filled";
-      if (
-        section.handler.getFilledStateByElement(element) ==
-          FIELD_STATES.NORMAL &&
-        (HTMLSelectElement.isInstance(element) ||
-          (HTMLInputElement.isInstance(element) && element.value.length))
-      ) {
-        state = "user_filled";
+    const extra = this.#initFormEventExtra("unavailable");
+
+    for (const fieldDetail of fieldDetails) {
+      // It is possible that we don't autofill a field because it is cross-origin.
+      // When that happens, the data will not include that element.
+      let { filledState, filledValue } = data.get(fieldDetail.elementId) ?? {};
+      switch (filledState) {
+        case FIELD_STATES.AUTO_FILLED:
+          filledState = "filled";
+          break;
+        case FIELD_STATES.NORMAL:
+        default:
+          filledState =
+            fieldDetail.localName == "select" || filledValue?.length
+              ? "user_filled"
+              : "not_filled";
+          break;
       }
-      this.#setFormEventExtra(extra, fieldDetail.fieldName, state);
+      this.#setFormEventExtra(extra, fieldDetail.fieldName, filledState);
     }
 
-    this.recordFormEvent("filled", section.flowId, extra);
-    this.recordGleanFormEvent("formFilled", section.flowId, extra);
+    this.recordFormEvent("filled", flowId, extra);
+    this.recordGleanFormEvent("formFilled", flowId, extra);
   }
 
-  recordFilledModified(section, fieldName) {
-    const extra = { field_name: fieldName };
-    this.recordFormEvent("filled_modified", section.flowId, extra);
-    this.recordGleanFormEvent("formFilledModified", section.flowId, extra);
+  recordFilledModified(flowId, fieldDetails) {
+    const extra = { field_name: fieldDetails[0].fieldName };
+    this.recordFormEvent("filled_modified", flowId, extra);
+    this.recordGleanFormEvent("formFilledModified", flowId, extra);
   }
 
-  recordFormSubmitted(section, record, _form) {
-    let extra = this.#initFormEventExtra("unavailable");
+  recordFormSubmitted(flowId, fieldDetails, data) {
+    const extra = this.#initFormEventExtra("unavailable");
 
-    if (record.guid !== null) {
-      // If the `guid` is not null, it means we're editing an existing record.
-      // In that case, all fields in the record are autofilled, and fields in
-      // `untouchedFields` are unmodified.
-      for (const [fieldName, value] of Object.entries(record.record)) {
-        if (record.untouchedFields?.includes(fieldName)) {
-          this.#setFormEventExtra(extra, fieldName, "autofilled");
-        } else if (value) {
-          this.#setFormEventExtra(extra, fieldName, "user_filled");
-        } else {
-          this.#setFormEventExtra(extra, fieldName, "not_filled");
-        }
+    for (const fieldDetail of fieldDetails) {
+      let { filledState, filledValue } = data.get(fieldDetail.elementId) ?? {};
+      switch (filledState) {
+        case FIELD_STATES.AUTO_FILLED:
+          filledState = "autofilled";
+          break;
+        case FIELD_STATES.NORMAL:
+        default:
+          filledState =
+            fieldDetail.localName == "select" || filledValue?.length
+              ? "user_filled"
+              : "not_filled";
+          break;
       }
-    } else {
-      Object.keys(record.record).forEach(fieldName =>
-        this.#setFormEventExtra(extra, fieldName, "user_filled")
-      );
+      this.#setFormEventExtra(extra, fieldDetail.fieldName, filledState);
     }
 
-    this.recordFormEvent("submitted", section.flowId, extra);
-    this.recordGleanFormEvent("formSubmitted", section.flowId, extra);
+    this.recordFormEvent("submitted", flowId, extra);
+    this.recordGleanFormEvent("formSubmitted", flowId, extra);
   }
 
-  recordFormCleared(section, fieldName) {
-    const extra = { field_name: fieldName };
+  recordFormCleared(flowId, fieldDetails) {
+    const extra = { field_name: fieldDetails[0].fieldName };
 
     // Note that when a form is cleared, we also record `filled_modified` events
     // for all the fields that have been cleared.
-    this.recordFormEvent("cleared", section.flowId, extra);
-    this.recordGleanFormEvent("formCleared", section.flowId, extra);
+    this.recordFormEvent("cleared", flowId, extra);
+    this.recordGleanFormEvent("formCleared", flowId, extra);
   }
 
-  recordFormEvent(method, flowId, extra) {
-    Services.telemetry.recordEvent(
-      this.EVENT_CATEGORY,
-      method,
-      this.EVENT_OBJECT_FORM_INTERACTION,
-      flowId,
-      extra
-    );
+  recordFormEvent(_method, _flowId, _extra) {
+    throw new Error("Not implemented.");
   }
 
   recordGleanFormEvent(_eventName, _flowId, _extra) {
     throw new Error("Not implemented.");
   }
 
-  recordFormInteractionEvent(
-    method,
-    section,
-    { fieldName, profile, record, form } = {}
-  ) {
+  recordFormInteractionEvent(method, flowId, fieldDetails, data) {
     if (!this.EVENT_OBJECT_FORM_INTERACTION) {
       return undefined;
     }
     switch (method) {
       case "detected":
-        return this.recordFormDetected(section);
+        return this.recordFormDetected(flowId, fieldDetails);
       case "popup_shown":
-        return this.recordPopupShown(section, fieldName);
+        return this.recordPopupShown(flowId, fieldDetails);
       case "filled":
-        return this.recordFormFilled(section, profile);
+        return this.recordFormFilled(flowId, fieldDetails, data);
       case "filled_modified":
-        return this.recordFilledModified(section, fieldName);
+        return this.recordFilledModified(flowId, fieldDetails);
       case "submitted":
-        return this.recordFormSubmitted(section, record, form);
+        return this.recordFormSubmitted(flowId, fieldDetails, data);
       case "cleared":
-        return this.recordFormCleared(section, fieldName);
+        return this.recordFormCleared(flowId, fieldDetails);
     }
     return undefined;
   }
 
   recordDoorhangerEvent(method, object, flowId) {
-    Services.telemetry.recordEvent(this.EVENT_CATEGORY, method, object, flowId);
+    const eventName = `${method}_${object}`.replace(/(_[a-z])/g, c =>
+      c[1].toUpperCase()
+    );
+    Glean[this.EVENT_CATEGORY][eventName]?.record({ value: flowId });
   }
 
   recordManageEvent(method) {
-    Services.telemetry.recordEvent(this.EVENT_CATEGORY, method, "manage");
+    const eventName =
+      method.replace(/(_[a-z])/g, c => c[1].toUpperCase()) + "Manage";
+    Glean[this.EVENT_CATEGORY][eventName]?.record();
   }
 
   recordAutofillProfileCount(_count) {
@@ -252,12 +259,50 @@ class AutofillTelemetryBase {
       histogram.add(this.HISTOGRAM_PROFILE_NUM_USES_KEY, record.timesUsed);
     }
   }
+
+  recordIframeLayoutDetection(flowId, fieldDetails) {
+    const fieldsInMainFrame = [];
+    const fieldsInIframe = [];
+    const fieldsInSandboxedIframe = [];
+    const fieldsInCrossOrignIframe = [];
+
+    const iframes = new Set();
+    for (const fieldDetail of fieldDetails) {
+      const bc = BrowsingContext.get(fieldDetail.browsingContextId);
+      if (bc.top == bc) {
+        fieldsInMainFrame.push(fieldDetail);
+        continue;
+      }
+
+      iframes.add(bc);
+      fieldsInIframe.push(fieldDetail);
+      if (bc.sandboxFlags != 0) {
+        fieldsInSandboxedIframe.push(fieldDetail);
+      }
+
+      if (!FormAutofillUtils.isBCSameOriginWithTop(bc)) {
+        fieldsInCrossOrignIframe.push(fieldDetail);
+      }
+    }
+
+    const extra = {
+      category: this.EVENT_CATEGORY,
+      flow_id: flowId,
+      iframe_count: iframes.size,
+      main_frame: fieldsInMainFrame.map(f => f.fieldName).toString(),
+      iframe: fieldsInIframe.map(f => f.fieldName).toString(),
+      cross_origin: fieldsInCrossOrignIframe.map(f => f.fieldName).toString(),
+      sandboxed: fieldsInSandboxedIframe.map(f => f.fieldName).toString(),
+    };
+
+    Glean.formautofill.iframeLayoutDetection.record(extra);
+  }
 }
 
 export class AddressTelemetry extends AutofillTelemetryBase {
   EVENT_CATEGORY = "address";
-  EVENT_OBJECT_FORM_INTERACTION = "address_form";
-  EVENT_OBJECT_FORM_INTERACTION_EXT = "address_form_ext";
+  EVENT_OBJECT_FORM_INTERACTION = "AddressForm";
+  EVENT_OBJECT_FORM_INTERACTION_EXT = "AddressFormExt";
 
   SCALAR_DETECTED_SECTION_COUNT =
     "formautofill.addresses.detected_sections_count";
@@ -326,22 +371,16 @@ export class AddressTelemetry extends AutofillTelemetryBase {
       }
     }
 
-    Services.telemetry.recordEvent(
-      this.EVENT_CATEGORY,
-      method,
-      this.EVENT_OBJECT_FORM_INTERACTION,
-      flowId,
-      extra
-    );
+    const eventMethod = method.replace(/(_[a-z])/g, c => c[1].toUpperCase());
+    Glean.address[eventMethod + this.EVENT_OBJECT_FORM_INTERACTION]?.record({
+      value: flowId,
+      ...extra,
+    });
 
     if (Object.keys(extExtra).length) {
-      Services.telemetry.recordEvent(
-        this.EVENT_CATEGORY,
-        method,
-        this.EVENT_OBJECT_FORM_INTERACTION_EXT,
-        flowId,
-        extExtra
-      );
+      Glean.address[
+        eventMethod + this.EVENT_OBJECT_FORM_INTERACTION_EXT
+      ]?.record({ value: flowId, ...extExtra });
     }
   }
 
@@ -352,7 +391,7 @@ export class AddressTelemetry extends AutofillTelemetryBase {
 
 class CreditCardTelemetry extends AutofillTelemetryBase {
   EVENT_CATEGORY = "creditcard";
-  EVENT_OBJECT_FORM_INTERACTION = "cc_form_v2";
+  EVENT_OBJECT_FORM_INTERACTION = "CcFormV2";
 
   SCALAR_DETECTED_SECTION_COUNT =
     "formautofill.creditCards.detected_sections_count";
@@ -374,126 +413,18 @@ class CreditCardTelemetry extends AutofillTelemetryBase {
     "cc-exp-year": "cc_exp_year",
   };
 
-  recordLegacyFormEvent(method, flowId, extra = null) {
-    Services.telemetry.recordEvent(
-      this.EVENT_CATEGORY,
-      method,
-      "cc_form",
-      flowId,
-      extra
-    );
-  }
-
   recordGleanFormEvent(eventName, flowId, extra) {
     extra.flow_id = flowId;
     Glean.formautofillCreditcards[eventName].record(extra);
   }
 
-  recordFormDetected(section) {
-    super.recordFormDetected(section);
-
-    let identified = new Set();
-    section.fieldDetails.forEach(detail => {
-      identified.add(detail.fieldName);
-    });
-    let extra = {
-      cc_name_found: identified.has("cc-name") ? "true" : "false",
-      cc_number_found: identified.has("cc-number") ? "true" : "false",
-      cc_exp_found:
-        identified.has("cc-exp") ||
-        (identified.has("cc-exp-month") && identified.has("cc-exp-year"))
-          ? "true"
-          : "false",
-    };
-
-    this.recordLegacyFormEvent("detected", section.flowId, extra);
-  }
-
-  recordPopupShown(section, fieldName) {
-    super.recordPopupShown(section, fieldName);
-
-    this.recordLegacyFormEvent("popup_shown", section.flowId);
-  }
-
-  recordFormFilled(section, profile) {
-    super.recordFormFilled(section, profile);
-    // Calculate values for telemetry
-    let extra = {
-      cc_name: "unavailable",
-      cc_number: "unavailable",
-      cc_exp: "unavailable",
-    };
-
-    for (let fieldDetail of section.fieldDetails) {
-      let element = fieldDetail.element;
-      let state = profile[fieldDetail.fieldName] ? "filled" : "not_filled";
-      if (
-        section.handler.getFilledStateByElement(element) ==
-          FIELD_STATES.NORMAL &&
-        (HTMLSelectElement.isInstance(element) ||
-          (HTMLInputElement.isInstance(element) && element.value.length))
-      ) {
-        state = "user_filled";
-      }
-      switch (fieldDetail.fieldName) {
-        case "cc-name":
-          extra.cc_name = state;
-          break;
-        case "cc-number":
-          extra.cc_number = state;
-          break;
-        case "cc-exp":
-        case "cc-exp-month":
-        case "cc-exp-year":
-          extra.cc_exp = state;
-          break;
-      }
-    }
-
-    this.recordLegacyFormEvent("filled", section.flowId, extra);
-  }
-
-  recordFilledModified(section, fieldName) {
-    super.recordFilledModified(section, fieldName);
-
-    let extra = { field_name: fieldName };
-    this.recordLegacyFormEvent("filled_modified", section.flowId, extra);
-  }
-
-  /**
-   * Called when a credit card form is submitted
-   *
-   * @param {object} section Section that produces this record
-   * @param {object} record Credit card record filled in the form.
-   * @param {Array<HTMLForm>} form Form that contains the section
-   */
-  recordFormSubmitted(section, record, form) {
-    super.recordFormSubmitted(section, record, form);
-
-    // For legacy cc_form event telemetry
-    let extra = {
-      fields_not_auto: "0",
-      fields_auto: "0",
-      fields_modified: "0",
-    };
-
-    if (record.guid !== null) {
-      let totalCount = form.elements.length;
-      let autofilledCount = Object.keys(record.record).length;
-      let unmodifiedCount = record.untouchedFields.length;
-
-      extra.fields_not_auto = (totalCount - autofilledCount).toString();
-      extra.fields_auto = autofilledCount.toString();
-      extra.fields_modified = (autofilledCount - unmodifiedCount).toString();
-    } else {
-      // If the `guid` is null, we're filling a new form.
-      // In that case, all not-null fields are manually filled.
-      extra.fields_not_auto = Array.from(form.elements)
-        .filter(element => !!element.value?.trim().length)
-        .length.toString();
-    }
-
-    this.recordLegacyFormEvent("submitted", section.flowId, extra);
+  recordFormEvent(method, flowId, aExtra) {
+    // Don't modify the passed-in aExtra as it's reused.
+    const extra = Object.assign({ value: flowId }, aExtra);
+    const eventMethod = method.replace(/(_[a-z])/g, c => c[1].toUpperCase());
+    Glean.creditcard[eventMethod + this.EVENT_OBJECT_FORM_INTERACTION]?.record(
+      extra
+    );
   }
 
   recordNumberOfUse(records) {
@@ -526,10 +457,10 @@ export class AutofillTelemetry {
   static ADDRESS = "address";
   static CREDIT_CARD = "creditcard";
 
-  static #getTelemetryBySection(section) {
-    return section instanceof FormAutofillCreditCardSection
-      ? this.#creditCardTelemetry
-      : this.#addressTelemetry;
+  static #getTelemetryByFieldDetail(fieldDetail) {
+    return FormAutofillUtils.isAddressField(fieldDetail.fieldName)
+      ? this.#addressTelemetry
+      : this.#creditCardTelemetry;
   }
 
   static #getTelemetryByType(type) {
@@ -572,21 +503,12 @@ export class AutofillTelemetry {
    * Utility functions for form event (defined in Events.yaml)
    *
    * Category: address or creditcard
-   * Event name: cc_form, cc_form_v2, or address_form
+   * Event name: cc_form_v2, or address_form
    */
 
-  static recordFormInteractionEvent(
-    method,
-    section,
-    { fieldName, profile, record, form } = {}
-  ) {
-    const telemetry = this.#getTelemetryBySection(section);
-    telemetry.recordFormInteractionEvent(method, section, {
-      fieldName,
-      profile,
-      record,
-      form,
-    });
+  static recordFormInteractionEvent(method, flowId, fieldDetails, data) {
+    const telemetry = this.#getTelemetryByFieldDetail(fieldDetails[0]);
+    telemetry.recordFormInteractionEvent(method, flowId, fieldDetails, data);
   }
 
   /**
@@ -595,13 +517,13 @@ export class AutofillTelemetry {
    * Category: formautofill.creditCards or formautofill.addresses
    * Scalar name: submitted_sections_count
    */
-  static recordDetectedSectionCount(section) {
-    const telemetry = this.#getTelemetryBySection(section);
+  static recordDetectedSectionCount(fieldDetails) {
+    const telemetry = this.#getTelemetryByFieldDetail(fieldDetails[0]);
     telemetry.recordDetectedSectionCount();
   }
 
-  static recordSubmittedSectionCount(type, count) {
-    const telemetry = this.#getTelemetryByType(type);
+  static recordSubmittedSectionCount(fieldDetails, count) {
+    const telemetry = this.#getTelemetryByFieldDetail(fieldDetails[0]);
     telemetry.recordSubmittedSectionCount(count);
   }
 
diff --git a/firefox-ios/Client/Assets/CC_Script/Constants.ios.mjs b/firefox-ios/Client/Assets/CC_Script/Constants.ios.mjs
index 290e690ea6497..3001325c1df4f 100644
--- a/firefox-ios/Client/Assets/CC_Script/Constants.ios.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/Constants.ios.mjs
@@ -32,6 +32,8 @@ const IOS_DEFAULT_PREFERENCES = {
   "extensions.formautofill.heuristics.captureOnPageNavigation": false,
   "extensions.formautofill.focusOnAutofill": false,
   "extensions.formautofill.test.ignoreVisibilityCheck": false,
+  "extensions.formautofill.heuristics.autofillSameOriginWithTop": false,
+  "signon.generation.confidenceThreshold": 0.75,
 };
 
 // Used Mimic the behavior of .getAutocompleteInfo()
diff --git a/firefox-ios/Client/Assets/CC_Script/CreditCardRuleset.sys.mjs b/firefox-ios/Client/Assets/CC_Script/CreditCardRuleset.sys.mjs
index 26651fe65ab59..72a75cf27aa01 100644
--- a/firefox-ios/Client/Assets/CC_Script/CreditCardRuleset.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/CreditCardRuleset.sys.mjs
@@ -1207,7 +1207,9 @@ export var CreditCardRulesets = {
     );
 
     for (const type of this.types) {
-      this[type] = makeRuleset([...coefficients[type]], biases);
+      if (type) {
+        this[type] = makeRuleset([...coefficients[type]], biases);
+      }
     }
   },
 
diff --git a/firefox-ios/Client/Assets/CC_Script/FieldScanner.sys.mjs b/firefox-ios/Client/Assets/CC_Script/FieldScanner.sys.mjs
index 2118de3de890d..b1d4b3754904c 100644
--- a/firefox-ios/Client/Assets/CC_Script/FieldScanner.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/FieldScanner.sys.mjs
@@ -15,10 +15,25 @@ export class FieldDetail {
   // Reference to the elemenet
   elementWeakRef = null;
 
-  // id/name. This is only used for debugging
+  // The identifier generated via ContentDOMReference for the associated DOM element
+  // of this field
+  elementId = null;
+
+  // The identifier generated via ContentDOMReference for the root element of
+  // this field
+  rootElementId = null;
+
+  // If the element is an iframe, it is the id of the BrowsingContext of the iframe,
+  // Otherwise, it is the id of the BrowsingContext the element is in
+  browsingContextId = null;
+
+  // string with `${element.id}/{element.name}`. This is only used for debugging.
   identifier = "";
 
-  // The inferred field name for this element
+  // tag name attribute of the element
+  localName = null;
+
+  // The inferred field name for this element.
   fieldName = null;
 
   // The approach we use to infer the information for this element
@@ -48,43 +63,103 @@ export class FieldDetail {
   // Confidence value when the field name is inferred by "fathom"
   confidence = null;
 
-  constructor(
-    element,
-    fieldName = null,
-    { autocompleteInfo = {}, confidence = null } = {}
-  ) {
+  constructor(element) {
     this.elementWeakRef = new WeakRef(element);
-    this.identifier = `${element.id}/${element.name}`;
-    this.fieldName = fieldName;
-
-    if (autocompleteInfo) {
-      this.reason = "autocomplete";
-      this.section = autocompleteInfo.section;
-      this.addressType = autocompleteInfo.addressType;
-      this.contactType = autocompleteInfo.contactType;
-      this.credentialType = autocompleteInfo.credentialType;
-    } else if (confidence) {
-      this.reason = "fathom";
-      this.confidence = confidence;
-    } else {
-      this.reason = "regex-heuristic";
-    }
   }
 
   get element() {
     return this.elementWeakRef.deref();
   }
 
-  get sectionName() {
-    return this.section || this.addressType;
+  /**
+   * Convert FieldDetail class to an object that is suitable for
+   * sending over IPC. Avoid using this in other case.
+   */
+  toVanillaObject() {
+    const json = { ...this };
+    delete json.elementWeakRef;
+    return json;
   }
 
-  #isVisible = null;
-  get isVisible() {
-    if (this.#isVisible == null) {
-      this.#isVisible = lazy.FormAutofillUtils.isFieldVisible(this.element);
+  static fromVanillaObject(obj) {
+    const element = lazy.FormAutofillUtils.getElementByIdentifier(
+      obj.elementId
+    );
+    return element ? Object.assign(new FieldDetail(element), obj) : null;
+  }
+
+  static create(
+    element,
+    form,
+    fieldName = null,
+    { autocompleteInfo = {}, confidence = null, isVisible = true } = {}
+  ) {
+    const fieldDetail = new FieldDetail(element);
+
+    fieldDetail.elementId =
+      lazy.FormAutofillUtils.getElementIdentifier(element);
+    fieldDetail.rootElementId = lazy.FormAutofillUtils.getElementIdentifier(
+      form.rootElement
+    );
+    fieldDetail.identifier = `${element.id}/${element.name}`;
+    fieldDetail.localName = element.localName;
+
+    if (Array.isArray(fieldName)) {
+      fieldDetail.fieldName = fieldName[0] ?? "";
+      fieldDetail.alternativeFieldName = fieldName[1] ?? "";
+    } else {
+      fieldDetail.fieldName = fieldName;
+    }
+
+    if (!fieldDetail.fieldName) {
+      fieldDetail.reason = "unknown";
+    } else if (autocompleteInfo) {
+      fieldDetail.reason = "autocomplete";
+      fieldDetail.section = autocompleteInfo.section;
+      fieldDetail.addressType = autocompleteInfo.addressType;
+      fieldDetail.contactType = autocompleteInfo.contactType;
+      fieldDetail.credentialType = autocompleteInfo.credentialType;
+      fieldDetail.sectionName =
+        autocompleteInfo.section || autocompleteInfo.addressType;
+    } else if (confidence) {
+      fieldDetail.reason = "fathom";
+      fieldDetail.confidence = confidence;
+
+      // TODO: This should be removed once we support reference field info across iframe.
+      // Temporarily add an addtional "the field is the only visible input" constraint
+      // when determining whether a form has only a high-confidence cc-* field a valid
+      // credit card section. We can remove this restriction once we are confident
+      // about only using fathom.
+      fieldDetail.isOnlyVisibleFieldWithHighConfidence = false;
+      if (
+        fieldDetail.confidence >
+        lazy.FormAutofillUtils.ccFathomHighConfidenceThreshold
+      ) {
+        const root = element.form || element.ownerDocument;
+        const inputs = root.querySelectorAll("input:not([type=hidden])");
+        if (inputs.length == 1 && inputs[0] == element) {
+          fieldDetail.isOnlyVisibleFieldWithHighConfidence = true;
+        }
+      }
+    } else {
+      fieldDetail.reason = "regex-heuristic";
     }
-    return this.#isVisible;
+
+    try {
+      fieldDetail.browsingContextId =
+        element.localName == "iframe"
+          ? element.browsingContext.id
+          : BrowsingContext.getFromWindow(element.ownerGlobal).id;
+    } catch {
+      /* unit test doesn't have ownerGlobal */
+    }
+
+    fieldDetail.isVisible = isVisible;
+
+    // Info required by heuristics
+    fieldDetail.maxLength = element.maxLength;
+
+    return fieldDetail;
   }
 }
 
@@ -96,29 +171,19 @@ export class FieldDetail {
  * `inferFieldInfo` function.
  */
 export class FieldScanner {
-  #elementsWeakRef = null;
-  #inferFieldInfoFn = null;
-
   #parsingIndex = 0;
 
-  fieldDetails = [];
+  #fieldDetails = [];
 
   /**
    * Create a FieldScanner based on form elements with the existing
    * fieldDetails.
    *
-   * @param {Array.DOMElement} elements
-   *        The elements from a form for each parser.
-   * @param {Funcion} inferFieldInfoFn
-   *        The callback function that is used to infer the field info of a given element
+   * @param {Array<FieldDetails>} fieldDetails
+   *        An array of fieldDetail object to be scanned.
    */
-  constructor(elements, inferFieldInfoFn) {
-    this.#elementsWeakRef = new WeakRef(elements);
-    this.#inferFieldInfoFn = inferFieldInfoFn;
-  }
-
-  get #elements() {
-    return this.#elementsWeakRef.deref();
+  constructor(fieldDetails) {
+    this.#fieldDetails = fieldDetails;
   }
 
   /**
@@ -132,7 +197,7 @@ export class FieldScanner {
   }
 
   get parsingFinished() {
-    return this.parsingIndex >= this.#elements.length;
+    return this.parsingIndex >= this.#fieldDetails.length;
   }
 
   /**
@@ -143,7 +208,7 @@ export class FieldScanner {
    *        The latest index of elements waiting for parsing.
    */
   set parsingIndex(index) {
-    if (index > this.#elements.length) {
+    if (index > this.#fieldDetails.length) {
       throw new Error("The parsing index is out of range.");
     }
     this.#parsingIndex = index;
@@ -159,44 +224,11 @@ export class FieldScanner {
    *          The field detail at the specific index.
    */
   getFieldDetailByIndex(index) {
-    if (index >= this.#elements.length) {
+    if (index >= this.#fieldDetails.length) {
       return null;
     }
 
-    if (index < this.fieldDetails.length) {
-      return this.fieldDetails[index];
-    }
-
-    for (let i = this.fieldDetails.length; i < index + 1; i++) {
-      this.pushDetail();
-    }
-
-    return this.fieldDetails[index];
-  }
-
-  /**
-   * This function retrieves the first unparsed element and obtains its
-   * information by invoking the `inferFieldInfoFn` callback function.
-   * The field information is then stored in a FieldDetail object and
-   * appended to the `fieldDetails` array.
-   *
-   * Any element without the related detail will be used for adding the detail
-   * to the end of field details.
-   */
-  pushDetail() {
-    const elementIndex = this.fieldDetails.length;
-    if (elementIndex >= this.#elements.length) {
-      throw new Error("Try to push the non-existing element info.");
-    }
-    const element = this.#elements[elementIndex];
-    const [fieldName, autocompleteInfo, confidence] =
-      this.#inferFieldInfoFn(element);
-    const fieldDetail = new FieldDetail(element, fieldName, {
-      autocompleteInfo,
-      confidence,
-    });
-
-    this.fieldDetails.push(fieldDetail);
+    return this.#fieldDetails[index];
   }
 
   /**
@@ -212,11 +244,11 @@ export class FieldScanner {
    *        autocomplete attribute
    */
   updateFieldName(index, fieldName, ignoreAutocomplete = false) {
-    if (index >= this.fieldDetails.length) {
+    if (index >= this.#fieldDetails.length) {
       throw new Error("Try to update the non-existing field detail.");
     }
 
-    const fieldDetail = this.fieldDetails[index];
+    const fieldDetail = this.#fieldDetails[index];
     if (fieldDetail.fieldName == fieldName) {
       return;
     }
@@ -225,12 +257,12 @@ export class FieldScanner {
       return;
     }
 
-    this.fieldDetails[index].fieldName = fieldName;
-    this.fieldDetails[index].reason = "update-heuristic";
+    fieldDetail.fieldName = fieldName;
+    fieldDetail.reason = "update-heuristic";
   }
 
   elementExisting(index) {
-    return index < this.#elements.length;
+    return index < this.#fieldDetails.length;
   }
 }
 
diff --git a/firefox-ios/Client/Assets/CC_Script/FormAutofill.sys.mjs b/firefox-ios/Client/Assets/CC_Script/FormAutofill.sys.mjs
index 08b6acaee1830..751d1dacaa61c 100644
--- a/firefox-ios/Client/Assets/CC_Script/FormAutofill.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/FormAutofill.sys.mjs
@@ -37,12 +37,15 @@ const ENABLED_AUTOFILL_CAPTURE_ON_FORM_REMOVAL_PREF =
   "extensions.formautofill.heuristics.captureOnFormRemoval";
 const ENABLED_AUTOFILL_CAPTURE_ON_PAGE_NAVIGATION_PREF =
   "extensions.formautofill.heuristics.captureOnPageNavigation";
+const ENABLED_AUTOFILL_SAME_ORIGIN_WITH_TOP =
+  "extensions.formautofill.heuristics.autofillSameOriginWithTop";
 
 export const FormAutofill = {
   ENABLED_AUTOFILL_ADDRESSES_PREF,
   ENABLED_AUTOFILL_ADDRESSES_CAPTURE_PREF,
   ENABLED_AUTOFILL_CAPTURE_ON_FORM_REMOVAL_PREF,
   ENABLED_AUTOFILL_CAPTURE_ON_PAGE_NAVIGATION_PREF,
+  ENABLED_AUTOFILL_SAME_ORIGIN_WITH_TOP,
   ENABLED_AUTOFILL_CREDITCARDS_PREF,
   AUTOFILL_CREDITCARDS_REAUTH_PREF,
   AUTOFILL_CREDITCARDS_AUTOCOMPLETE_OFF_PREF,
@@ -284,6 +287,11 @@ XPCOMUtils.defineLazyPreferenceGetter(
   null,
   val => val?.split(",").filter(v => !!v)
 );
+XPCOMUtils.defineLazyPreferenceGetter(
+  FormAutofill,
+  "autofillSameOriginWithTop",
+  ENABLED_AUTOFILL_SAME_ORIGIN_WITH_TOP
+);
 
 XPCOMUtils.defineLazyPreferenceGetter(
   FormAutofill,
diff --git a/firefox-ios/Client/Assets/CC_Script/FormAutofillChild.ios.sys.mjs b/firefox-ios/Client/Assets/CC_Script/FormAutofillChild.ios.sys.mjs
index 3183319fd9376..b0a956a193042 100644
--- a/firefox-ios/Client/Assets/CC_Script/FormAutofillChild.ios.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/FormAutofillChild.ios.sys.mjs
@@ -3,10 +3,17 @@
  * 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 { FormAutofillHandler } from "resource://gre/modules/shared/FormAutofillHandler.sys.mjs";
+import { FormAutofillHeuristics } from "resource://gre/modules/shared/FormAutofillHeuristics.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 {
   /**
@@ -26,36 +33,16 @@ export class FormAutofillChild {
 
     this.callbacks = callbacks;
 
-    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;
-    }
+    this.fieldDetailsManager = new FormStateManager(fieldDetail =>
+      // Collect field_modified telemetry
+      this.activeSection?.onFilledModified(fieldDetail.elementId)
+    );
 
-    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 +56,130 @@ export class FormAutofillChild {
     );
   }
 
+  identifyFieldsWhenFocused(element) {
+    if (this.#focusedElement == element) {
+      return;
+    }
+    this.#focusedElement = element;
+
+    if (!FormAutofillUtils.isCreditCardOrAddressFieldType(element)) {
+      return;
+    }
+
+    // Find the autofill handler for this form and identify all the fields.
+    const handler = this.fieldDetailsManager.getOrCreateFormHandler(element);
+
+    if (!handler.hasIdentifiedFields() || handler.updateFormIfNeeded(element)) {
+      // If we found newly identified fields, run section classification heuristic
+      const detectedFields = FormAutofillHandler.collectFormFields(
+        handler.form
+      );
+
+      FormAutofillHeuristics.parseAndUpdateFieldNamesParent(detectedFields);
+      handler.setIdentifiedFieldDetails(detectedFields);
+
+      this.#sections = FormAutofillSection.classifySections(
+        handler.fieldDetails
+      );
+
+      // For telemetry
+      this.#sections.forEach(section => section.onDetected());
+    }
+  }
+
+  #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.fieldDetailsManager.updateActiveInput(element);
-    if (!FormAutofillUtils.isCreditCardOrAddressFieldType(element)) {
+
+    this.identifyFieldsWhenFocused(element);
+
+    // Only ping swift if current field is either a cc or address field
+    if (!this.activeFieldDetail) {
       return;
     }
-    this._doIdentifyAutofillFields(element);
+
+    // Since iOS doesn't support cross frame autofill,
+    // we should only call the autofill callback if the section is valid.
+    // TODO(issam): This will change when we have cross frame fill support.
+    if (!this.activeSection.isValidSection()) {
+      return;
+    }
+
+    const fieldNamesWithValues = this.transformToFieldNamesWithValues(
+      this.activeSection.fieldDetails
+    );
+
+    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}
+      CreditCardRecord.normalizeFields(fieldNamesWithValues);
+      this.callbacks.creditCard.autofill(fieldNamesWithValues);
+    }
   }
 
   onSubmit(_event) {
-    if (!this.fieldDetailsManager.activeHandler) {
+    if (!this.activeHandler) {
       return;
     }
 
-    this.fieldDetailsManager.activeHandler.onFormSubmitted();
-    const records = this.fieldDetailsManager.activeHandler.createRecords();
+    // 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");
+      }
+
+      section.onSubmitted(formFilledData);
+    }
 
-    if (records.creditCard.length) {
+    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 = records.creditCard.map(entry => {
+      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 +187,20 @@ 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
+    );
+
+    // For telemetry
+    const formFilledData = this.activeHandler.collectFormFilledData();
+    this.activeSection.onFilled(formFilledData);
   }
 }
 
diff --git a/firefox-ios/Client/Assets/CC_Script/FormAutofillHandler.sys.mjs b/firefox-ios/Client/Assets/CC_Script/FormAutofillHandler.sys.mjs
index 49f79be77a937..a7aec3ac1f648 100644
--- a/firefox-ios/Client/Assets/CC_Script/FormAutofillHandler.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/FormAutofillHandler.sys.mjs
@@ -7,14 +7,16 @@ import { FormAutofillUtils } from "resource://gre/modules/shared/FormAutofillUti
 
 const lazy = {};
 ChromeUtils.defineESModuleGetters(lazy, {
-  FormAutofillAddressSection:
-    "resource://gre/modules/shared/FormAutofillSection.sys.mjs",
-  FormAutofillCreditCardSection:
-    "resource://gre/modules/shared/FormAutofillSection.sys.mjs",
+  AddressParser: "resource://gre/modules/shared/AddressParser.sys.mjs",
+  AutofillFormFactory:
+    "resource://gre/modules/shared/AutofillFormFactory.sys.mjs",
+  CreditCard: "resource://gre/modules/CreditCard.sys.mjs",
+  FieldDetail: "resource://gre/modules/shared/FieldScanner.sys.mjs",
   FormAutofillHeuristics:
     "resource://gre/modules/shared/FormAutofillHeuristics.sys.mjs",
-  FormLikeFactory: "resource://gre/modules/FormLikeFactory.sys.mjs",
-  FormSection: "resource://gre/modules/shared/FormAutofillHeuristics.sys.mjs",
+  FormAutofillNameUtils:
+    "resource://gre/modules/shared/FormAutofillNameUtils.sys.mjs",
+  LabelUtils: "resource://gre/modules/shared/LabelUtils.sys.mjs",
 });
 
 const { FIELD_STATES } = FormAutofillUtils;
@@ -26,23 +28,15 @@ export class FormAutofillHandler {
   // The window to which this form belongs
   window = null;
 
-  // A WindowUtils reference of which Window the form belongs
-  winUtils = null;
-
   // DOM Form element to which this object is attached
   form = null;
 
-  // An array of section that are found in this form
-  sections = [];
-
-  // The section contains the focused input
-  #focusedSection = null;
-
-  // Caches the element to section mapping
-  #cachedSectionByElement = new WeakMap();
-
   // Keeps track of filled state for all identified elements
   #filledStateByElement = new WeakMap();
+
+  // An object that caches the current selected option, keyed by element.
+  #matchingSelectOption = null;
+
   /**
    * Array of collected data about relevant form fields.  Each item is an object
    * storing the identifying details of the field and a reference to the
@@ -56,120 +50,115 @@ export class FormAutofillHandler {
    * A direct reference to the associated element cannot be sent to the user
    * interface because processing may be done in the parent process.
    */
-  fieldDetails = null;
+  #fieldDetails = null;
 
   /**
    * Initialize the form from `FormLike` object to handle the section or form
    * operations.
    *
    * @param {FormLike} form Form that need to be auto filled
-   * @param {Function} onFormSubmitted Function that can be invoked
-   *                   to simulate form submission. Function is passed
-   *                   four arguments: (1) a FormLike for the form being
-   *                   submitted, (2) the reason for infering the form
-   *                   submission (3) the corresponding Window, and (4)
-   *                   the responsible FormAutofillHandler.
-   * @param {Function} onAutofillCallback Function that can be invoked
+   * @param {Function} onFilledModifiedCallback Function that can be invoked
    *                   when we want to suggest autofill on a form.
    */
-  constructor(form, onFormSubmitted = () => {}, onAutofillCallback = () => {}) {
+  constructor(form, onFilledModifiedCallback = () => {}) {
     this._updateForm(form);
 
     this.window = this.form.rootElement.ownerGlobal;
-    this.winUtils = this.window.windowUtils;
-
-    // Enum for form autofill MANUALLY_MANAGED_STATES values
-    this.FIELD_STATE_ENUM = {
-      // not themed
-      [FIELD_STATES.NORMAL]: null,
-      // highlighted
-      [FIELD_STATES.AUTO_FILLED]: "autofill",
-      // highlighted && grey color text
-      [FIELD_STATES.PREVIEW]: "-moz-autofill-preview",
-    };
 
-    /**
-     * This function is used if the form handler (or one of its sections)
-     * determines that it needs to act as if the form had been submitted.
-     */
-    this.onFormSubmitted = formSubmissionReason => {
-      onFormSubmitted(this.form, formSubmissionReason, this.window, this);
-    };
+    this.onFilledModifiedCallback = onFilledModifiedCallback;
 
-    this.onAutofillCallback = onAutofillCallback;
+    // The identifier generated via ContentDOMReference for the root element.
+    this.rootElementId = FormAutofillUtils.getElementIdentifier(
+      form.rootElement
+    );
 
     ChromeUtils.defineLazyGetter(this, "log", () =>
       FormAutofill.defineLogGetter(this, "FormAutofillHandler")
     );
   }
 
+  /**
+   * Retrieves the 'fieldDetails' property, ensuring it has been initialized by
+   * `setIdentifiedFieldDetails`. Throws an error if accessed before initialization.
+   *
+   * This is because 'fieldDetail'' contains information that need to be computed
+   * in the parent side first.
+   *
+   * @throws {Error} If `setIdentifiedFieldDetails` has not been called.
+   * @returns {Array<FieldDetail>}
+   *          The list of autofillable field details for this form.
+   */
+  get fieldDetails() {
+    if (!this.#fieldDetails) {
+      throw new Error(
+        `Should only use 'fieldDetails' after 'setIdentifiedFieldDetails' is called`
+      );
+    }
+    return this.#fieldDetails;
+  }
+
+  /**
+   * Sets the list of 'FieldDetail' objects for autofillable fields within the form.
+   *
+   * @param {Array<FieldDetail>} fieldDetails
+   *        An array of field details that has been computed on the parent side.
+   *        This method should be called before accessing `fieldDetails`.
+   */
+  setIdentifiedFieldDetails(fieldDetails) {
+    this.#fieldDetails = fieldDetails;
+  }
+
+  /**
+   * Determines whether 'setIdentifiedFieldDetails' has been called and the
+   * `fieldDetails` have been initialized.
+   *
+   * @returns {boolean}
+   *          True if 'fieldDetails' has been initialized; otherwise, False.
+   */
+  hasIdentifiedFields() {
+    return !!this.#fieldDetails;
+  }
+
   handleEvent(event) {
     switch (event.type) {
       case "input": {
         if (!event.isTrusted) {
           return;
         }
-        const target = event.target;
-        const targetFieldDetail = this.getFieldDetailByElement(target);
-        const isCreditCardField = FormAutofillUtils.isCreditCardField(
-          targetFieldDetail.fieldName
-        );
 
-        // If the user manually blanks a credit card field, then
-        // we want the popup to be activated.
-        if (
-          !HTMLSelectElement.isInstance(target) &&
-          isCreditCardField &&
-          target.value === ""
-        ) {
-          this.onAutofillCallback();
-        }
+        // This uses the #filledStateByElement map instead of
+        // autofillState as the state has already been cleared by the time
+        // the input event fires.
+        const fieldDetail = this.getFieldDetailByElement(event.target);
+        const previousState = this.getFilledStateByElement(event.target);
+        const newState = FIELD_STATES.NORMAL;
 
-        if (this.getFilledStateByElement(target) == FIELD_STATES.NORMAL) {
-          return;
+        if (previousState != newState) {
+          this.changeFieldState(fieldDetail, newState);
         }
 
-        this.changeFieldState(targetFieldDetail, FIELD_STATES.NORMAL);
-        const section = this.getSectionByElement(targetFieldDetail.element);
-        section?.clearFilled(targetFieldDetail);
+        this.onFilledModifiedCallback?.(fieldDetail, previousState, newState);
       }
     }
   }
 
-  set focusedInput(element) {
-    const section = this.getSectionByElement(element);
-    if (!section) {
-      return;
-    }
-
-    this.#focusedSection = section;
-    this.#focusedSection.focusedInput = element;
+  getFieldDetailByName(fieldName) {
+    return this.fieldDetails.find(detail => detail.fieldName == fieldName);
   }
 
-  getSectionByElement(element) {
-    const section =
-      this.#cachedSectionByElement.get(element) ??
-      this.sections.find(s => s.getFieldDetailByElement(element));
-    if (!section) {
-      return null;
-    }
-
-    this.#cachedSectionByElement.set(element, section);
-    return section;
+  getFieldDetailByElement(element) {
+    return this.fieldDetails.find(detail => detail.element == element);
   }
 
-  getFieldDetailByElement(element) {
-    for (const section of this.sections) {
-      const detail = section.getFieldDetailByElement(element);
-      if (detail) {
-        return detail;
-      }
-    }
-    return null;
+  getFieldDetailByElementId(elementId) {
+    return this.fieldDetails.find(detail => detail.elementId == elementId);
   }
 
-  get activeSection() {
-    return this.#focusedSection;
+  /**
+   * Only use this API within handleEvent
+   */
+  getFilledStateByElement(element) {
+    return this.#filledStateByElement.get(element);
   }
 
   /**
@@ -191,12 +180,12 @@ export class FormAutofillHandler {
     let _formLike;
     const getFormLike = () => {
       if (!_formLike) {
-        _formLike = lazy.FormLikeFactory.createFromField(element);
+        _formLike = lazy.AutofillFormFactory.createFromField(element);
       }
       return _formLike;
     };
 
-    const currentForm = element.form ?? getFormLike();
+    const currentForm = getFormLike();
     if (currentForm.elements.length != this.form.elements.length) {
       this.log.debug("The count of form elements is changed.");
       this._updateForm(getFormLike());
@@ -221,65 +210,40 @@ export class FormAutofillHandler {
   _updateForm(form) {
     this.form = form;
 
-    this.fieldDetails = null;
-
-    this.sections = [];
-    this.#cachedSectionByElement = new WeakMap();
+    this.#fieldDetails = null;
   }
 
   /**
-   * Set fieldDetails from the form about fields that can be autofilled.
+   * Collect <input>, <select>, and <iframe> elements from the specified form
+   * and return the correspond 'FieldDetail' objects.
    *
-   * @returns {Array} The valid address and credit card details.
+   * @param {HTMLFormElement} form
+   *        The form that we collect information from.
+   *
+   * @returns {Array<FieldDeail>}
+   *        An array containing eliglble fields for autofill, also
+   *        including iframe.
    */
-  collectFormFields(ignoreInvalid = true) {
-    const sections = lazy.FormAutofillHeuristics.getFormInfo(this.form);
-    const allValidDetails = [];
-    for (const section of sections) {
-      // We don't support csc field, so remove csc fields from section
-      const fieldDetails = section.fieldDetails.filter(
-        f => !["cc-csc"].includes(f.fieldName)
-      );
-      if (!fieldDetails.length) {
-        continue;
-      }
+  static collectFormFields(form) {
+    const fieldDetails = lazy.FormAutofillHeuristics.getFormInfo(form) ?? [];
 
-      let autofillableSection;
-      if (section.type == lazy.FormSection.ADDRESS) {
-        autofillableSection = new lazy.FormAutofillAddressSection(
-          fieldDetails,
-          this
-        );
-      } else {
-        autofillableSection = new lazy.FormAutofillCreditCardSection(
-          fieldDetails,
-          this
-        );
-      }
+    let index = 0;
+    const fieldDetailsIncludeIframe = [];
+    const elements = form.rootElement.querySelectorAll("input, select, iframe");
 
-      // Do not include section that is either disabled or invalid.
-      // We only include invalid section for testing purpose.
-      if (
-        !autofillableSection.isEnabled() ||
-        (ignoreInvalid && !autofillableSection.isValidSection())
+    for (const element of elements) {
+      if (fieldDetails[index]?.element == element) {
+        fieldDetailsIncludeIframe.push(fieldDetails[index]);
+        index++;
+      } else if (
+        element.localName == "iframe" &&
+        FormAutofillUtils.isFieldVisible(element)
       ) {
-        continue;
+        const iframeFd = lazy.FieldDetail.create(element, form, "iframe");
+        fieldDetailsIncludeIframe.push(iframeFd);
       }
-
-      this.sections.push(autofillableSection);
-      allValidDetails.push(...autofillableSection.fieldDetails);
     }
-
-    this.fieldDetails = allValidDetails;
-    return allValidDetails;
-  }
-
-  #hasFilledSection() {
-    return this.sections.some(section => section.isFilled());
-  }
-
-  getFilledStateByElement(element) {
-    return this.#filledStateByElement.get(element);
+    return fieldDetailsIncludeIframe;
   }
 
   /**
@@ -287,10 +251,10 @@ export class FormAutofillHandler {
    *
    * @param {object} fieldDetail
    *        A fieldDetail of which its element is about to update the state.
-   * @param {string} nextState
-   *        Used to determine the next state
+   * @param {string} state
+   *        The state to apply.
    */
-  changeFieldState(fieldDetail, nextState) {
+  changeFieldState(fieldDetail, state) {
     const element = fieldDetail.element;
     if (!element) {
       this.log.warn(
@@ -299,7 +263,8 @@ export class FormAutofillHandler {
       );
       return;
     }
-    if (!(nextState in this.FIELD_STATE_ENUM)) {
+
+    if (!Object.values(FIELD_STATES).includes(state)) {
       this.log.warn(
         fieldDetail.fieldName,
         "is trying to change to an invalid state"
@@ -307,105 +272,763 @@ export class FormAutofillHandler {
       return;
     }
 
-    if (this.#filledStateByElement.get(element) == nextState) {
-      return;
+    element.autofillState = state;
+    this.#filledStateByElement.set(element, state);
+
+    if (state == FIELD_STATES.AUTO_FILLED) {
+      element.addEventListener("input", this, { mozSystemGroup: true });
     }
+  }
 
-    let nextStateValue = null;
-    for (const [state, mmStateValue] of Object.entries(this.FIELD_STATE_ENUM)) {
-      // The NORMAL state is simply the absence of other manually
-      // managed states so we never need to add or remove it.
-      if (!mmStateValue) {
+  /**
+   * Populates result to the preview layers with given profile.
+   *
+   * @param {Array} elementIds
+   * @param {object} profile
+   *        A profile to be previewed with
+   */
+  previewFields(elementIds, profile) {
+    this.getAdaptedProfiles([profile]);
+
+    for (const fieldDetail of this.fieldDetails) {
+      const element = fieldDetail.element;
+
+      // Skip the field if it is null or readonly or disabled
+      if (
+        !elementIds.includes(fieldDetail.elementId) ||
+        !FormAutofillUtils.isFieldAutofillable(element)
+      ) {
         continue;
       }
 
-      if (state == nextState) {
-        nextStateValue = mmStateValue;
-      } else {
-        this.winUtils.removeManuallyManagedState(element, mmStateValue);
+      let value = this.getFilledValueFromProfile(fieldDetail, profile);
+      if (!value) {
+        this.changeFieldState(fieldDetail, FIELD_STATES.NORMAL);
+        continue;
       }
-    }
 
-    if (nextStateValue) {
-      this.winUtils.addManuallyManagedState(element, nextStateValue);
-    }
+      if (HTMLInputElement.isInstance(element)) {
+        if (element.value && element.value != element.defaultValue) {
+          // Skip the field if the user has already entered text and that text
+          // is not the site prefilled value.
+          continue;
+        }
+      } else if (HTMLSelectElement.isInstance(element)) {
+        // Unlike text input, select element is always previewed even if
+        // the option is already selected.
+        const option = this.matchSelectOptions(fieldDetail, profile);
+        value = option?.text ?? "";
+      } else {
+        continue;
+      }
 
-    if (nextState == FIELD_STATES.AUTO_FILLED) {
-      element.addEventListener("input", this, { mozSystemGroup: true });
+      element.previewValue = value?.toString().replaceAll("*", "•");
+      this.changeFieldState(fieldDetail, FIELD_STATES.PREVIEW);
     }
-
-    this.#filledStateByElement.set(element, nextState);
   }
 
   /**
    * Processes form fields that can be autofilled, and populates them with the
    * profile provided by backend.
    *
+   * @param {string} focusedId
+   *        The id of the element that triggers autofilling.
+   * @param {Array} elementIds
+   *        An array of IDs for the elements that should be autofilled.
    * @param {object} profile
-   *        A profile to be filled in.
+   *        The data profile containing the values to be autofilled into the form fields.
    */
-  async autofillFormFields(profile) {
-    const noFilledSectionsPreviously = !this.#hasFilledSection();
-    await this.activeSection.autofillFields(profile);
+  fillFields(focusedId, elementIds, profile) {
+    this.getAdaptedProfiles([profile]);
 
-    const onChangeHandler = e => {
+    for (const fieldDetail of this.fieldDetails) {
+      const { element, elementId } = fieldDetail;
+
+      if (
+        !elementIds.includes(elementId) ||
+        !FormAutofillUtils.isFieldAutofillable(element)
+      ) {
+        continue;
+      }
+
+      element.previewValue = "";
+
+      if (HTMLInputElement.isInstance(element)) {
+        // Bug 1687679: Since profile appears to be presentation ready data, we need to utilize the "x-formatted" field
+        // that is generated when presentation ready data doesn't fit into the autofilling element.
+        // For example, autofilling expiration month into an input element will not work as expected if
+        // the month is less than 10, since the input is expected a zero-padded string.
+        // See Bug 1722941 for follow up.
+        const value = this.getFilledValueFromProfile(fieldDetail, profile);
+        if (!value) {
+          continue;
+        }
+
+        // For the focused input element, it will be filled with a valid value
+        // anyway.
+        // For the others, the fields should be only filled when their values are empty
+        // or their values are equal to the site prefill value
+        // or are the result of an earlier auto-fill.
+        if (
+          elementId == focusedId ||
+          !element.value ||
+          element.value == element.defaultValue ||
+          element.autofillState == FIELD_STATES.AUTO_FILLED
+        ) {
+          FormAutofillHandler.fillFieldValue(element, value);
+          this.changeFieldState(fieldDetail, FIELD_STATES.AUTO_FILLED);
+        }
+      } else if (HTMLSelectElement.isInstance(element)) {
+        const option = this.matchSelectOptions(fieldDetail, profile);
+        if (!option) {
+          continue;
+        }
+
+        // Do not change value or dispatch events if the option is already selected.
+        // Use case for multiple select is not considered here.
+        if (!option.selected) {
+          option.selected = true;
+          FormAutofillHandler.fillFieldValue(element, option.value);
+        }
+        // Autofill highlight appears regardless if value is changed or not
+        this.changeFieldState(fieldDetail, FIELD_STATES.AUTO_FILLED);
+      } else {
+        continue;
+      }
+    }
+
+    FormAutofillUtils.getElementByIdentifier(focusedId)?.focus({
+      preventScroll: true,
+    });
+
+    this.registerFormChangeHandler();
+  }
+
+  registerFormChangeHandler() {
+    if (this.onChangeHandler) {
+      return;
+    }
+
+    this.log.debug("register change handler for filled form:", this.form);
+
+    this.onChangeHandler = e => {
       if (!e.isTrusted) {
         return;
       }
       if (e.type == "reset") {
-        this.sections.map(section => section.resetFieldStates());
+        for (const fieldDetail of this.fieldDetails) {
+          const element = fieldDetail.element;
+          element.removeEventListener("input", this, { mozSystemGroup: true });
+          this.changeFieldState(fieldDetail, FIELD_STATES.NORMAL);
+        }
       }
+
       // Unregister listeners once no field is in AUTO_FILLED state.
-      if (!this.#hasFilledSection()) {
-        this.form.rootElement.removeEventListener("input", onChangeHandler, {
-          mozSystemGroup: true,
-        });
-        this.form.rootElement.removeEventListener("reset", onChangeHandler, {
-          mozSystemGroup: true,
-        });
+      if (
+        this.fieldDetails.every(
+          detail => detail.element.autofillState != FIELD_STATES.AUTO_FILLED
+        )
+      ) {
+        this.form.rootElement.removeEventListener(
+          "input",
+          this.onChangeHandler,
+          {
+            mozSystemGroup: true,
+          }
+        );
+        this.form.rootElement.removeEventListener(
+          "reset",
+          this.onChangeHandler,
+          {
+            mozSystemGroup: true,
+          }
+        );
+        this.onChangeHandler = null;
       }
     };
 
-    if (noFilledSectionsPreviously) {
-      // Handle the highlight style resetting caused by user's correction afterward.
-      this.log.debug("register change handler for filled form:", this.form);
-      this.form.rootElement.addEventListener("input", onChangeHandler, {
-        mozSystemGroup: true,
-      });
-      this.form.rootElement.addEventListener("reset", onChangeHandler, {
-        mozSystemGroup: true,
+    // Handle the highlight style resetting caused by user's correction afterward.
+    this.log.debug("register change handler for filled form:", this.form);
+    this.form.rootElement.addEventListener("input", this.onChangeHandler, {
+      mozSystemGroup: true,
+    });
+    this.form.rootElement.addEventListener("reset", this.onChangeHandler, {
+      mozSystemGroup: true,
+    });
+  }
+
+  computeFillingValue(fieldDetail) {
+    const element = fieldDetail.element;
+    if (!element) {
+      return null;
+    }
+
+    let value = element.value.trim();
+    switch (fieldDetail.fieldName) {
+      case "address-level1":
+        if (HTMLSelectElement.isInstance(element)) {
+          // Don't save the record when the option value is empty *OR* there
+          // are multiple options being selected. The empty option is usually
+          // assumed to be default along with a meaningless text to users.
+          if (!value || element.selectedOptions.length != 1) {
+            // Keep the property and preserve more information for address updating
+            value = "";
+          } else {
+            const text = element.selectedOptions[0].text.trim();
+            value =
+              FormAutofillUtils.getAbbreviatedSubregionName([value, text]) ||
+              text;
+          }
+        }
+        break;
+      case "country":
+        // This is a temporary fix. Ideally we should have either case-insensitive comparison of country codes
+        // or handle this elsewhere see Bug 1889234 for more context.
+        value = value.toUpperCase();
+        break;
+      case "cc-type":
+        if (
+          HTMLSelectElement.isInstance(element) &&
+          !lazy.CreditCard.isValidNetwork(value)
+        ) {
+          // Don't save the record when the option value is empty *OR* there
+          // are multiple options being selected. The empty option is usually
+          // assumed to be default along with a meaningless text to users.
+          if (value && element.selectedOptions.length == 1) {
+            const selectedOption = element.selectedOptions[0];
+            const networkType =
+              lazy.CreditCard.getNetworkFromName(selectedOption.text) ??
+              lazy.CreditCard.getNetworkFromName(selectedOption.value);
+            if (networkType) {
+              value = networkType;
+            }
+          }
+        }
+        break;
+    }
+
+    return value;
+  }
+
+  /*
+   * Apply both address and credit card related transformers.
+   *
+   * @param {Object} profile
+   *        A profile for adjusting credit card related value.
+   * @override
+   */
+  applyTransformers(profile) {
+    this.addressTransformer(profile);
+    this.telTransformer(profile);
+    this.creditCardExpiryDateTransformer(profile);
+    this.creditCardExpMonthAndYearTransformer(profile);
+    this.creditCardNameTransformer(profile);
+    this.adaptFieldMaxLength(profile);
+  }
+
+  getAdaptedProfiles(originalProfiles) {
+    for (let profile of originalProfiles) {
+      this.applyTransformers(profile);
+    }
+    return originalProfiles;
+  }
+
+  /**
+   * Match the select option for a field if we autofill with the given profile.
+   * This function caches the matching result in the `#matchingSelectionOption`
+   * variable.
+   *
+   * @param {FieldDetail} fieldDetail
+   *        The field information of the matching element.
+   * @param {object} profile
+   *        The profile used for autofill.
+   *
+   * @returns {Option}
+   *        The matched option, or undefined if no matching option is found.
+   */
+  matchSelectOptions(fieldDetail, profile) {
+    if (!this.#matchingSelectOption) {
+      this.#matchingSelectOption = new WeakMap();
+    }
+
+    const { element, fieldName } = fieldDetail;
+    if (!HTMLSelectElement.isInstance(element)) {
+      return undefined;
+    }
+
+    const cache = this.#matchingSelectOption.get(element) || {};
+    const value = profile[fieldName];
+
+    let option = cache[value]?.deref();
+    if (!option) {
+      option = FormAutofillUtils.findSelectOption(element, profile, fieldName);
+
+      if (option) {
+        cache[value] = new WeakRef(option);
+        this.#matchingSelectOption.set(element, cache);
+      } else if (cache[value]) {
+        delete cache[value];
+        this.#matchingSelectOption.set(element, cache);
+      }
+    }
+
+    return option;
+  }
+
+  adaptFieldMaxLength(profile) {
+    for (let key in profile) {
+      let detail = this.getFieldDetailByName(key);
+      if (!detail || detail.part) {
+        continue;
+      }
+
+      let element = detail.element;
+      if (!element) {
+        continue;
+      }
+
+      let maxLength = element.maxLength;
+      if (
+        maxLength === undefined ||
+        maxLength < 0 ||
+        profile[key].toString().length <= maxLength
+      ) {
+        continue;
+      }
+
+      if (maxLength) {
+        switch (typeof profile[key]) {
+          case "string":
+            // If this is an expiration field and our previous
+            // adaptations haven't resulted in a string that is
+            // short enough to satisfy the field length, and the
+            // field is constrained to a length of 4 or 5, then we
+            // assume it is intended to hold an expiration of the
+            // form "MMYY" or "MM/YY".
+            if (key == "cc-exp" && (maxLength == 4 || maxLength == 5)) {
+              const month2Digits = (
+                "0" + profile["cc-exp-month"].toString()
+              ).slice(-2);
+              const year2Digits = profile["cc-exp-year"].toString().slice(-2);
+              const separator = maxLength == 5 ? "/" : "";
+              profile[key] = `${month2Digits}${separator}${year2Digits}`;
+            } else if (key == "cc-number") {
+              // We want to show the last four digits of credit card so that
+              // the masked credit card previews correctly and appears correctly
+              // in the autocomplete menu
+              profile[key] = profile[key].substr(
+                profile[key].length - maxLength
+              );
+            } else {
+              profile[key] = profile[key].substr(0, maxLength);
+            }
+            break;
+          case "number":
+            // There's no way to truncate a number smaller than a
+            // single digit.
+            if (maxLength < 1) {
+              maxLength = 1;
+            }
+            // The only numbers we store are expiration month/year,
+            // and if they truncate, we want the final digits, not
+            // the initial ones.
+            profile[key] = profile[key] % Math.pow(10, maxLength);
+            break;
+          default:
+        }
+      } else {
+        delete profile[key];
+        delete profile[`${key}-formatted`];
+      }
+    }
+  }
+
+  /**
+   * Handles credit card expiry date transformation when
+   * the expiry date exists in a cc-exp field.
+   *
+   * @param {object} profile
+   */
+  creditCardExpiryDateTransformer(profile) {
+    if (!profile["cc-exp"]) {
+      return;
+    }
+
+    const element = this.getFieldDetailByName("cc-exp")?.element;
+    if (!element) {
+      return;
+    }
+
+    function updateExpiry(_string, _month, _year) {
+      // Bug 1687681: This is a short term fix to other locales having
+      // different characters to represent year.
+      // - FR locales may use "A" to represent year.
+      // - DE locales may use "J" to represent year.
+      // - PL locales may use "R" to represent year.
+      // This approach will not scale well and should be investigated in a follow up bug.
+      const monthChars = "m";
+      const yearChars = "yy|aa|jj|rr";
+      const expiryDateFormatRegex = (firstChars, secondChars) =>
+        new RegExp(
+          "(?:\\b|^)((?:[" +
+            firstChars +
+            "]{2}){1,2})\\s*([\\-/])\\s*((?:[" +
+            secondChars +
+            "]{2}){1,2})(?:\\b|$)",
+          "i"
+        );
+
+      // If the month first check finds a result, where placeholder is "mm - yyyy",
+      // the result will be structured as such: ["mm - yyyy", "mm", "-", "yyyy"]
+      let result = expiryDateFormatRegex(monthChars, yearChars).exec(_string);
+      if (result) {
+        return (
+          _month.padStart(result[1].length, "0") +
+          result[2] +
+          _year.substr(-1 * result[3].length)
+        );
+      }
+
+      // If the year first check finds a result, where placeholder is "yyyy mm",
+      // the result will be structured as such: ["yyyy mm", "yyyy", " ", "mm"]
+      result = expiryDateFormatRegex(yearChars, monthChars).exec(_string);
+      if (result) {
+        return (
+          _year.substr(-1 * result[1].length) +
+          result[2] +
+          _month.padStart(result[3].length, "0")
+        );
+      }
+      return null;
+    }
+
+    let newExpiryString = null;
+    const month = profile["cc-exp-month"].toString();
+    const year = profile["cc-exp-year"].toString();
+    if (element.localName == "input") {
+      // Use the placeholder or label to determine the expiry string format.
+      const possibleExpiryStrings = [];
+      if (element.placeholder) {
+        possibleExpiryStrings.push(element.placeholder);
+      }
+      const labels = lazy.LabelUtils.findLabelElements(element);
+      if (labels) {
+        // Not consider multiple lable for now.
+        possibleExpiryStrings.push(element.labels[0]?.textContent);
+      }
+      if (element.previousElementSibling?.localName == "label") {
+        possibleExpiryStrings.push(element.previousElementSibling.textContent);
+      }
+
+      possibleExpiryStrings.some(string => {
+        newExpiryString = updateExpiry(string, month, year);
+        return !!newExpiryString;
       });
     }
+
+    // Bug 1688576: Change YYYY-MM to MM/YYYY since MM/YYYY is the
+    // preferred presentation format for credit card expiry dates.
+    profile["cc-exp"] = newExpiryString ?? `${month.padStart(2, "0")}/${year}`;
+  }
+
+  /**
+   * Handles credit card expiry date transformation when the expiry date exists in
+   * the separate cc-exp-month and cc-exp-year fields
+   *
+   * @param {object} profile
+   */
+  creditCardExpMonthAndYearTransformer(profile) {
+    const getInputElementByField = (field, self) => {
+      if (!field) {
+        return null;
+      }
+      const detail = self.getFieldDetailByName(field);
+      if (!detail) {
+        return null;
+      }
+      const element = detail.element;
+      return element.localName === "input" ? element : null;
+    };
+    const month = getInputElementByField("cc-exp-month", this);
+    if (month) {
+      // Transform the expiry month to MM since this is a common format needed for filling.
+      profile["cc-exp-month-formatted"] = profile["cc-exp-month"]
+        ?.toString()
+        .padStart(2, "0");
+    }
+    const year = getInputElementByField("cc-exp-year", this);
+    // If the expiration year element is an input,
+    // then we examine any placeholder to see if we should format the expiration year
+    // as a zero padded string in order to autofill correctly.
+    if (year) {
+      const placeholder = year.placeholder;
+
+      // Checks for 'YY'|'AA'|'JJ'|'RR' placeholder and converts the year to a two digit string using the last two digits.
+      const result = /\b(yy|aa|jj|rr)\b/i.test(placeholder);
+      if (result) {
+        profile["cc-exp-year-formatted"] = profile["cc-exp-year"]
+          ?.toString()
+          .substring(2);
+      }
+    }
+  }
+
+  /**
+   * Handles credit card name transformation when the name exists in
+   * the separate cc-given-name, cc-middle-name, and cc-family name fields
+   *
+   * @param {object} profile
+   */
+  creditCardNameTransformer(profile) {
+    const name = profile["cc-name"];
+    if (!name) {
+      return;
+    }
+
+    const given = this.getFieldDetailByName("cc-given-name");
+    const middle = this.getFieldDetailByName("cc-middle-name");
+    const family = this.getFieldDetailByName("cc-family-name");
+    if (given || middle || family) {
+      const nameParts = lazy.FormAutofillNameUtils.splitName(name);
+      if (given && nameParts.given) {
+        profile["cc-given-name"] = nameParts.given;
+      }
+      if (middle && nameParts.middle) {
+        profile["cc-middle-name"] = nameParts.middle;
+      }
+      if (family && nameParts.family) {
+        profile["cc-family-name"] = nameParts.family;
+      }
+    }
+  }
+
+  addressTransformer(profile) {
+    if (profile["street-address"]) {
+      // "-moz-street-address-one-line" is used by the labels in
+      // ProfileAutoCompleteResult.
+      profile["-moz-street-address-one-line"] =
+        FormAutofillUtils.toOneLineAddress(profile["street-address"]);
+      let streetAddressDetail = this.getFieldDetailByName("street-address");
+      if (
+        streetAddressDetail &&
+        HTMLInputElement.isInstance(streetAddressDetail.element)
+      ) {
+        profile["street-address"] = profile["-moz-street-address-one-line"];
+      }
+
+      let waitForConcat = [];
+      for (let f of ["address-line3", "address-line2", "address-line1"]) {
+        waitForConcat.unshift(profile[f]);
+        if (this.getFieldDetailByName(f)) {
+          if (waitForConcat.length > 1) {
+            profile[f] = FormAutofillUtils.toOneLineAddress(waitForConcat);
+          }
+          waitForConcat = [];
+        }
+      }
+    }
+
+    // If a house number field exists, split the address up into house number
+    // and street name.
+    if (this.getFieldDetailByName("address-housenumber")) {
+      let address = lazy.AddressParser.parseStreetAddress(
+        profile["street-address"]
+      );
+      if (address) {
+        profile["address-housenumber"] = address.street_number;
+        let field = this.getFieldDetailByName("address-line1")
+          ? "address-line1"
+          : "street-address";
+        profile[field] = address.street_name;
+      }
+    }
   }
 
   /**
-   * Collect the filled sections within submitted form and convert all the valid
-   * field data into multiple records.
+   * Replace tel with tel-national if tel violates the input element's
+   * restriction.
    *
-   * @returns {object} records
-   *          {Array.<Object>} records.address
-   *          {Array.<Object>} records.creditCard
+   * @param {object} profile
+   *        A profile to be converted.
    */
-  createRecords() {
-    const records = {
-      address: [],
-      creditCard: [],
+  telTransformer(profile) {
+    if (!profile.tel || !profile["tel-national"]) {
+      return;
+    }
+
+    let detail = this.getFieldDetailByName("tel");
+    if (!detail) {
+      return;
+    }
+
+    let element = detail.element;
+    let _pattern;
+    let testPattern = str => {
+      if (!_pattern) {
+        // The pattern has to match the entire value.
+        _pattern = new RegExp("^(?:" + element.pattern + ")$", "u");
+      }
+      return _pattern.test(str);
     };
+    if (element.pattern) {
+      if (testPattern(profile.tel)) {
+        return;
+      }
+    } else if (element.maxLength) {
+      if (
+        detail.reason == "autocomplete" &&
+        profile.tel.length <= element.maxLength
+      ) {
+        return;
+      }
+    }
+
+    if (detail.reason != "autocomplete") {
+      // Since we only target people living in US and using en-US websites in
+      // MVP, it makes more sense to fill `tel-national` instead of `tel`
+      // if the field is identified by heuristics and no other clues to
+      // determine which one is better.
+      // TODO: [Bug 1407545] This should be improved once more countries are
+      // supported.
+      profile.tel = profile["tel-national"];
+    } else if (element.pattern) {
+      if (testPattern(profile["tel-national"])) {
+        profile.tel = profile["tel-national"];
+      }
+    } else if (element.maxLength) {
+      if (profile["tel-national"].length <= element.maxLength) {
+        profile.tel = profile["tel-national"];
+      }
+    }
+  }
 
-    for (const section of this.sections) {
-      const secRecord = section.createRecord();
-      if (!secRecord) {
+  /**
+   *
+   * @param {object} fieldDetail A fieldDetail of the related element.
+   * @param {object} profile The profile to fill.
+   * @returns {string} The value to fill for the given field.
+   */
+  getFilledValueFromProfile(fieldDetail, profile) {
+    let value =
+      profile[`${fieldDetail.fieldName}-formatted`] ||
+      profile[fieldDetail.fieldName];
+
+    if (fieldDetail.fieldName == "cc-number" && fieldDetail.part != null) {
+      const part = fieldDetail.part;
+      return value.slice((part - 1) * 4, part * 4);
+    }
+    return value;
+  }
+  /**
+   * Fills the provided element with the specified value.
+   *
+   * @param {HTMLInputElement| HTMLSelectElement} element - The form field element to be filled.
+   * @param {string} value - The value to be filled into the form field.
+   */
+  static fillFieldValue(element, value) {
+    if (FormAutofillUtils.focusOnAutofill) {
+      element.focus({ preventScroll: true });
+    }
+    if (HTMLInputElement.isInstance(element)) {
+      element.setUserInput(value);
+    } else if (HTMLSelectElement.isInstance(element)) {
+      // Set the value of the select element so that web event handlers can react accordingly
+      element.value = value;
+      element.dispatchEvent(
+        new element.ownerGlobal.Event("input", { bubbles: true })
+      );
+      element.dispatchEvent(
+        new element.ownerGlobal.Event("change", { bubbles: true })
+      );
+    }
+  }
+
+  clearPreviewedFields(elementIds) {
+    for (const elementId of elementIds) {
+      const fieldDetail = this.getFieldDetailByElementId(elementId);
+      const element = fieldDetail?.element;
+      if (!element) {
+        this.log.warn(fieldDetail.fieldName, "is unreachable");
         continue;
       }
-      if (section instanceof lazy.FormAutofillAddressSection) {
-        records.address.push(secRecord);
-      } else if (section instanceof lazy.FormAutofillCreditCardSection) {
-        records.creditCard.push(secRecord);
-      } else {
-        throw new Error("Unknown section type");
+
+      element.previewValue = "";
+      if (element.autofillState == FIELD_STATES.AUTO_FILLED) {
+        continue;
       }
+      this.changeFieldState(fieldDetail, FIELD_STATES.NORMAL);
+    }
+  }
+
+  clearFilledFields(elementIds) {
+    const fieldDetails = elementIds.map(id =>
+      this.getFieldDetailByElementId(id)
+    );
+    for (const fieldDetail of fieldDetails) {
+      const element = fieldDetail?.element;
+      if (!element) {
+        this.log.warn(fieldDetail?.fieldName, "is unreachable");
+        continue;
+      }
+
+      if (element.autofillState == FIELD_STATES.AUTO_FILLED) {
+        if (HTMLInputElement.isInstance(element)) {
+          element.setUserInput("");
+        } else if (HTMLSelectElement.isInstance(element)) {
+          // If we can't find a selected option, then we should just reset to the first option's value
+          this.#resetSelectElementValue(element);
+        }
+      }
+    }
+  }
+
+  /**
+   * Resets a <select> element to its selected option or the first option if there is none selected.
+   *
+   * @param {HTMLElement} element
+   */
+  #resetSelectElementValue(element) {
+    if (!element.options.length) {
+      return;
     }
+    const selected = [...element.options].find(option =>
+      option.hasAttribute("selected")
+    );
+    element.value = selected ? selected.value : element.options[0].value;
+    element.dispatchEvent(
+      new element.ownerGlobal.Event("input", { bubbles: true })
+    );
+    element.dispatchEvent(
+      new element.ownerGlobal.Event("change", { bubbles: true })
+    );
+  }
 
-    return records;
+  /**
+   * Return the record that is keyed by element id and value is the normalized value
+   * done by computeFillingValue
+   *
+   * @returns {object} An object keyed by element id, and the value is
+   *                   an object that includes the following properties:
+   * filledState: The autofill state of the element
+   * filledvalue: The value of the element
+   */
+  collectFormFilledData() {
+    const filledData = new Map();
+
+    for (const fieldDetail of this.fieldDetails) {
+      const element = fieldDetail.element;
+      filledData.set(fieldDetail.elementId, {
+        filledState: element.autofillState,
+        filledValue: this.computeFillingValue(fieldDetail),
+      });
+    }
+    return filledData;
+  }
+
+  isFieldAutofillable(fieldDetail, profile) {
+    if (HTMLInputElement.isInstance(fieldDetail.element)) {
+      return !!profile[fieldDetail.fieldName];
+    }
+    return !!this.matchSelectOptions(fieldDetail, profile);
   }
 }
diff --git a/firefox-ios/Client/Assets/CC_Script/FormAutofillHeuristics.sys.mjs b/firefox-ios/Client/Assets/CC_Script/FormAutofillHeuristics.sys.mjs
index fb96e47caefdf..db68e36d32b86 100644
--- a/firefox-ios/Client/Assets/CC_Script/FormAutofillHeuristics.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/FormAutofillHeuristics.sys.mjs
@@ -9,26 +9,12 @@ const lazy = {};
 ChromeUtils.defineESModuleGetters(lazy, {
   CreditCard: "resource://gre/modules/CreditCard.sys.mjs",
   CreditCardRulesets: "resource://gre/modules/shared/CreditCardRuleset.sys.mjs",
+  FieldDetail: "resource://gre/modules/shared/FieldScanner.sys.mjs",
   FieldScanner: "resource://gre/modules/shared/FieldScanner.sys.mjs",
   FormAutofillUtils: "resource://gre/modules/shared/FormAutofillUtils.sys.mjs",
   LabelUtils: "resource://gre/modules/shared/LabelUtils.sys.mjs",
 });
 
-/**
- * To help us classify sections, we want to know what fields can appear
- * multiple times in a row.
- * Such fields, like `address-line{X}`, should not break sections.
- */
-const MULTI_FIELD_NAMES = [
-  "address-level3",
-  "address-level2",
-  "address-level1",
-  "tel",
-  "postal-code",
-  "email",
-  "street-address",
-];
-
 /**
  * To help us classify sections that can appear only N times in a row.
  * For example, the only time multiple cc-number fields are valid is when
@@ -39,44 +25,8 @@ const MULTI_N_FIELD_NAMES = {
   "cc-number": 4,
 };
 
-export class FormSection {
-  static ADDRESS = "address";
-  static CREDIT_CARD = "creditCard";
-
-  #fieldDetails = [];
-
-  #name = "";
-
-  constructor(fieldDetails) {
-    if (!fieldDetails.length) {
-      throw new TypeError("A section should contain at least one field");
-    }
-
-    fieldDetails.forEach(field => this.addField(field));
-
-    const fieldName = fieldDetails[0].fieldName;
-    if (lazy.FormAutofillUtils.isAddressField(fieldName)) {
-      this.type = FormSection.ADDRESS;
-    } else if (lazy.FormAutofillUtils.isCreditCardField(fieldName)) {
-      this.type = FormSection.CREDIT_CARD;
-    } else {
-      throw new Error("Unknown field type to create a section.");
-    }
-  }
-
-  get fieldDetails() {
-    return this.#fieldDetails;
-  }
-
-  get name() {
-    return this.#name;
-  }
-
-  addField(fieldDetail) {
-    this.#name ||= fieldDetail.sectionName;
-    this.#fieldDetails.push(fieldDetail);
-  }
-}
+const CC_TYPE = 1;
+const ADDR_TYPE = 2;
 
 /**
  * Returns the autocomplete information of fields according to heuristics.
@@ -171,6 +121,67 @@ export const FormAutofillHeuristics = {
     );
   },
 
+  /**
+   * In some languages such French (nom) and German (Name), name can mean either family name or
+   * full name in a form, depending on the context. We want to be sure that if "name" is
+   * detected in the context of "family-name" or "given-name", it is updated accordingly.
+   *
+   * Look for "given-name", "family-name", and "name" fields. If any two of those fields are detected
+   * and one of them is "name", then replace "name" with "family-name" if "name" is accompanied by
+   * "given-name" or vise-versa.
+   *
+   * @param {FieldScanner} scanner
+   *        The current parsing status for all elements
+   * @returns {boolean}
+   *        Return true if any field is recognized and updated, otherwise false.
+   */
+  _parseNameFields(scanner, fieldDetail) {
+    const TARGET_FIELDS = ["name", "given-name", "family-name"];
+
+    if (!TARGET_FIELDS.includes(fieldDetail.fieldName)) {
+      return false;
+    }
+
+    const fields = [];
+    let nameIndex = -1;
+
+    for (let idx = scanner.parsingIndex; ; idx++) {
+      const detail = scanner.getFieldDetailByIndex(idx);
+      if (!TARGET_FIELDS.includes(detail?.fieldName)) {
+        break;
+      }
+      if (detail.fieldName === "name") {
+        nameIndex = idx;
+      }
+      fields.push(detail);
+    }
+
+    if (nameIndex != -1 && fields.length == 2) {
+      //if name is detected and the other of the two fields detected is 'given-name'
+      //then update name to 'name' to 'family-name'
+      if (
+        fields[0].fieldName == "given-name" ||
+        fields[1].fieldName == "given-name"
+      ) {
+        scanner.updateFieldName(nameIndex, "family-name");
+        //if name is detected and the other of the two fields detected is 'family-name'
+        //then update name to 'name' to 'given-name'
+      } else if (
+        fields[0].fieldName == "family-name" ||
+        fields[1].fieldName == "family-name"
+      ) {
+        scanner.updateFieldName(nameIndex, "given-name");
+      } else {
+        return false;
+      }
+
+      scanner.parsingIndex += fields.length;
+      return true;
+    }
+
+    return false;
+  },
+
   /**
    * Try to match the telephone related fields to the grammar
    * list to see if there is any valid telephone set and correct their
@@ -285,13 +296,28 @@ export const FormAutofillHeuristics = {
       "address-line3",
     ];
 
+    let houseNumberFields = 0;
+
+    // We need to build a list of the address fields. A list of the indicies
+    // is also needed as the fields with a given name can change positions
+    // during the update.
     const fields = [];
+    const fieldIndicies = [];
     for (let idx = scanner.parsingIndex; !scanner.parsingFinished; idx++) {
       const detail = scanner.getFieldDetailByIndex(idx);
+
+      // Skip over any house number fields. There should only be zero or one,
+      // but we'll skip over them all anyway.
+      if (detail?.fieldName == "address-housenumber") {
+        houseNumberFields++;
+        continue;
+      }
+
       if (!INTERESTED_FIELDS.includes(detail?.fieldName)) {
         break;
       }
       fields.push(detail);
+      fieldIndicies.push(idx);
     }
 
     if (!fields.length) {
@@ -304,7 +330,7 @@ export const FormAutofillHeuristics = {
           fields[0].reason != "autocomplete" &&
           ["address-line2", "address-line3"].includes(fields[0].fieldName)
         ) {
-          scanner.updateFieldName(scanner.parsingIndex, "address-line1");
+          scanner.updateFieldName(fieldIndicies[0], "address-line1");
         }
         break;
       case 2:
@@ -314,27 +340,22 @@ export const FormAutofillHeuristics = {
             (fields[1].fieldName == "address-line2" ||
               fields[1].reason != "autocomplete")
           ) {
-            scanner.updateFieldName(
-              scanner.parsingIndex,
-              "address-line1",
-              true
-            );
+            scanner.updateFieldName(fieldIndicies[0], "address-line1", true);
           }
         } else {
-          scanner.updateFieldName(scanner.parsingIndex, "address-line1");
+          scanner.updateFieldName(fieldIndicies[0], "address-line1");
         }
-
-        scanner.updateFieldName(scanner.parsingIndex + 1, "address-line2");
+        scanner.updateFieldName(fieldIndicies[1], "address-line2");
         break;
       case 3:
       default:
-        scanner.updateFieldName(scanner.parsingIndex, "address-line1");
-        scanner.updateFieldName(scanner.parsingIndex + 1, "address-line2");
-        scanner.updateFieldName(scanner.parsingIndex + 2, "address-line3");
+        scanner.updateFieldName(fieldIndicies[0], "address-line1");
+        scanner.updateFieldName(fieldIndicies[1], "address-line2");
+        scanner.updateFieldName(fieldIndicies[2], "address-line3");
         break;
     }
 
-    scanner.parsingIndex += fields.length;
+    scanner.parsingIndex += fields.length + houseNumberFields;
     return true;
   },
 
@@ -362,21 +383,13 @@ export const FormAutofillHeuristics = {
     if (fields.length == 1) {
       if (fields[0].fieldName == "address-level2") {
         const prev = scanner.getFieldDetailByIndex(scanner.parsingIndex - 1);
-        if (
-          prev &&
-          !prev.fieldName &&
-          HTMLSelectElement.isInstance(prev.element)
-        ) {
+        if (prev && !prev.fieldName && prev.localName == "select") {
           scanner.updateFieldName(scanner.parsingIndex - 1, "address-level1");
           scanner.parsingIndex += 1;
           return true;
         }
         const next = scanner.getFieldDetailByIndex(scanner.parsingIndex + 1);
-        if (
-          next &&
-          !next.fieldName &&
-          HTMLSelectElement.isInstance(next.element)
-        ) {
+        if (next && !next.fieldName && next.localName == "select") {
           scanner.updateFieldName(scanner.parsingIndex + 1, "address-level1");
           scanner.parsingIndex += 2;
           return true;
@@ -462,6 +475,44 @@ export const FormAutofillHeuristics = {
     return false;
   },
 
+  _parseCreditCardNumberFields(scanner, fieldDetail) {
+    const INTERESTED_FIELDS = ["cc-number"];
+
+    if (!INTERESTED_FIELDS.includes(fieldDetail.fieldName)) {
+      return false;
+    }
+
+    const fieldDetails = [];
+    for (let idx = scanner.parsingIndex; ; idx++) {
+      const detail = scanner.getFieldDetailByIndex(idx);
+      if (!INTERESTED_FIELDS.includes(detail?.fieldName)) {
+        break;
+      }
+      fieldDetails.push(detail);
+    }
+
+    // This rule only applies when all the fields are visible
+    if (fieldDetails.some(field => !field.isVisible)) {
+      scanner.parsingIndex += fieldDetails.length;
+      return true;
+    }
+
+    // This is the heuristic to handle special cases where we can have multiple
+    // fields in one section, but only if the field has appeared N times in a row.
+    // For example, websites can use 4 consecutive 4-digit `cc-number` fields
+    // instead of one 16-digit `cc-number` field.
+    const N = MULTI_N_FIELD_NAMES["cc-number"];
+    if (fieldDetails.length == N) {
+      fieldDetails.forEach((fd, index) => {
+        // part starts with 1
+        fd.part = index + 1;
+      });
+      scanner.parsingIndex += fieldDetails.length;
+      return true;
+    }
+
+    return false;
+  },
   /**
    * Look for cc-*-name fields when *-name field is present
    *
@@ -536,6 +587,33 @@ export const FormAutofillHeuristics = {
     return false;
   },
 
+  /**
+   * If the given field is of a different type than the previous
+   * field, use the alternate field name instead.
+   */
+  _checkForAlternateField(scanner, fieldDetail) {
+    if (fieldDetail.alternativeFieldName) {
+      const previousField = scanner.getFieldDetailByIndex(
+        scanner.parsingIndex - 1
+      );
+      if (previousField) {
+        const preIsCC = lazy.FormAutofillUtils.isCreditCardField(
+          previousField.fieldName
+        );
+        const curIsCC = lazy.FormAutofillUtils.isCreditCardField(
+          fieldDetail.fieldName
+        );
+
+        // If the current type is different from the previous element's type, use
+        // the alternative fieldname instead.
+        if (preIsCC != curIsCC) {
+          fieldDetail.fieldName = fieldDetail.alternativeFieldName;
+          fieldDetail.reason = "update-heuristic-alternate";
+        }
+      }
+    }
+  },
+
   /**
    * This function should provide all field details of a form which are placed
    * in the belonging section. The details contain the autocomplete info
@@ -551,9 +629,50 @@ export const FormAutofillHeuristics = {
       lazy.FormAutofillUtils.isCreditCardOrAddressFieldType(element)
     );
 
-    const scanner = new lazy.FieldScanner(elements, element =>
-      this.inferFieldInfo(element, elements)
-    );
+    const fieldDetails = [];
+    for (const element of elements) {
+      // Ignore invisible <input>, we still keep invisible <select> since
+      // some websites implements their custom dropdown and use invisible <select>
+      // to store the value.
+      const isVisible = lazy.FormAutofillUtils.isFieldVisible(element);
+      if (!HTMLSelectElement.isInstance(element) && !isVisible) {
+        continue;
+      }
+
+      const [fieldName, autocompleteInfo, confidence] = this.inferFieldInfo(
+        element,
+        elements
+      );
+      fieldDetails.push(
+        lazy.FieldDetail.create(element, form, fieldName, {
+          autocompleteInfo,
+          confidence,
+          isVisible,
+        })
+      );
+    }
+
+    this.parseAndUpdateFieldNamesContent(fieldDetails);
+
+    lazy.LabelUtils.clearLabelMap();
+
+    return fieldDetails;
+  },
+
+  /**
+   * Similar to `parseAndUpdateFieldNamesParent`. The difference is that
+   * the parsing heuristics used in this function are based on information
+   * not currently passed to the parent process. For example,
+   * text strings from associated labels.
+   *
+   * Note that the heuristics run in this function will not be able
+   * to reference field information across frames.
+   *
+   * @param {Array<FieldDetail>} fieldDetails
+   *        An array of the identified fields.
+   */
+  parseAndUpdateFieldNamesContent(fieldDetails) {
+    const scanner = new lazy.FieldScanner(fieldDetails);
 
     while (!scanner.parsingFinished) {
       const savedIndex = scanner.parsingIndex;
@@ -561,136 +680,50 @@ export const FormAutofillHeuristics = {
       // First, we get the inferred field info
       const fieldDetail = scanner.getFieldDetailByIndex(scanner.parsingIndex);
 
-      if (
-        this._parsePhoneFields(scanner, fieldDetail) ||
-        this._parseStreetAddressFields(scanner, fieldDetail) ||
-        this._parseAddressFields(scanner, fieldDetail) ||
-        this._parseCreditCardExpiryFields(scanner, fieldDetail) ||
-        this._parseCreditCardNameFields(scanner, fieldDetail)
-      ) {
+      if (this._parsePhoneFields(scanner, fieldDetail)) {
         continue;
       }
 
-      // If there is no field parsed, the parsing cursor can be moved
-      // forward to the next one.
       if (savedIndex == scanner.parsingIndex) {
         scanner.parsingIndex++;
       }
     }
-
-    lazy.LabelUtils.clearLabelMap();
-
-    const fields = scanner.fieldDetails;
-    const sections = [
-      ...this._classifySections(
-        fields.filter(f => lazy.FormAutofillUtils.isAddressField(f.fieldName))
-      ),
-      ...this._classifySections(
-        fields.filter(f =>
-          lazy.FormAutofillUtils.isCreditCardField(f.fieldName)
-        )
-      ),
-    ];
-
-    return sections.sort(
-      (a, b) =>
-        fields.indexOf(a.fieldDetails[0]) - fields.indexOf(b.fieldDetails[0])
-    );
   },
 
   /**
-   * The result is an array contains the sections with its belonging field details.
+   * Iterates through the field details and updates the field names
+   * based on surrounding field information, using various parsing functions.
    *
-   * @param   {Array<FieldDetails>} fieldDetails field detail array to be classified
-   * @returns {Array<FormSection>} The array with the sections.
+   * @param {Array<FieldDetail>} fieldDetails
+   *        An array of the identified fields.
    */
-  _classifySections(fieldDetails) {
-    let sections = [];
-    for (let i = 0; i < fieldDetails.length; i++) {
-      const cur = fieldDetails[i];
-      const [currentSection] = sections.slice(-1);
-
-      // The section this field might be placed into.
-      let candidateSection = null;
-
-      // Use name group from autocomplete attribute (ex, section-xxx) to look for the section
-      // we might place this field into.
-      // If the field doesn't have a section name, the candidate section is the previous section.
-      if (!currentSection || !cur.sectionName) {
-        candidateSection = currentSection;
-      } else if (cur.sectionName) {
-        // If the field has a section name, the candidate section is the nearest section that
-        // either shares the same name or lacks a name.
-        for (let idx = sections.length - 1; idx >= 0; idx--) {
-          if (!sections[idx].name || sections[idx].name == cur.sectionName) {
-            candidateSection = sections[idx];
-            break;
-          }
-        }
-      }
+  parseAndUpdateFieldNamesParent(fieldDetails) {
+    const scanner = new lazy.FieldScanner(fieldDetails);
 
-      if (candidateSection) {
-        let createNewSection = true;
+    while (!scanner.parsingFinished) {
+      const savedIndex = scanner.parsingIndex;
 
-        // We might create a new section instead of placing the field in the candiate section if
-        // the section already has a field with the same field name.
-        // We also check visibility for both the fields with the same field name because we don't
-        // wanht to create a new section for an invisible field.
-        if (
-          candidateSection.fieldDetails.find(
-            f => f.fieldName == cur.fieldName && f.isVisible && cur.isVisible
-          )
-        ) {
-          // For some field type, it is common to have multiple fields in one section, for example,
-          // email. In that case, we will not create a new section even when the candidate section
-          // already has a field with the same field name.
-          const [lastFieldDetail] = candidateSection.fieldDetails.slice(-1);
-          if (lastFieldDetail.fieldName == cur.fieldName) {
-            if (MULTI_FIELD_NAMES.includes(cur.fieldName)) {
-              createNewSection = false;
-            } else if (cur.fieldName in MULTI_N_FIELD_NAMES) {
-              // This is the heuristic to handle special cases where we can have multiple
-              // fields in one section, but only if the field has appeared N times in a row.
-              // For example, websites can use 4 consecutive 4-digit `cc-number` fields
-              // instead of one 16-digit `cc-number` field.
-
-              const N = MULTI_N_FIELD_NAMES[cur.fieldName];
-              if (lastFieldDetail.part) {
-                // If `part` is set, we have already identified this field can be
-                // merged previously
-                if (lastFieldDetail.part < N) {
-                  createNewSection = false;
-                  fieldDetails[i].part = lastFieldDetail.part + 1;
-                }
-                // If the next N fields are all the same field, we can merge them
-              } else if (
-                N == 2 ||
-                fieldDetails
-                  .slice(i + 1, i + N - 1)
-                  .every(f => f.fieldName == cur.fieldName)
-              ) {
-                lastFieldDetail.part = 1;
-                fieldDetails[i].part = 2;
-                createNewSection = false;
-              }
-            }
-          }
-        } else {
-          // The field doesn't exist in the candidate section, add it.
-          createNewSection = false;
-        }
+      const fieldDetail = scanner.getFieldDetailByIndex(scanner.parsingIndex);
 
-        if (!createNewSection) {
-          candidateSection.addField(fieldDetails[i]);
-          continue;
-        }
+      this._checkForAlternateField(scanner, fieldDetail);
+
+      // Attempt to parse the field using different parsers.
+      if (
+        this._parseNameFields(scanner, fieldDetail) ||
+        this._parseStreetAddressFields(scanner, fieldDetail) ||
+        this._parseAddressFields(scanner, fieldDetail) ||
+        this._parseCreditCardExpiryFields(scanner, fieldDetail) ||
+        this._parseCreditCardNameFields(scanner, fieldDetail) ||
+        this._parseCreditCardNumberFields(scanner, fieldDetail)
+      ) {
+        continue;
       }
 
-      // Create a new section
-      sections.push(new FormSection([fieldDetails[i]]));
+      // Move the parsing cursor forward if no parser was applied.
+      if (savedIndex == scanner.parsingIndex) {
+        scanner.parsingIndex++;
+      }
     }
-
-    return sections;
   },
 
   _getPossibleFieldNames(element) {
@@ -729,7 +762,7 @@ export const FormAutofillHeuristics = {
    * @param {Array<HTMLElement>} elements - See `getFathomField` for details
    * @returns {Array} - An array containing:
    *                    [0]the inferred field name
-   *                    [1]autocomplete information if the element has autocompelte attribute, null otherwise.
+   *                    [1]autocomplete information if the element has autocomplete attribute, null otherwise.
    *                    [2]fathom confidence if fathom considers it a cc field, null otherwise.
    */
   inferFieldInfo(element, elements = []) {
@@ -817,8 +850,8 @@ export const FormAutofillHeuristics = {
     }
 
     // Find a matched field name using regexp-based heuristics
-    const matchedFieldName = this._findMatchedFieldName(element, fields);
-    return [matchedFieldName, null, null];
+    const matchedFieldNames = this._findMatchedFieldNames(element, fields);
+    return [matchedFieldNames, null, null];
   },
 
   /**
@@ -998,40 +1031,71 @@ export const FormAutofillHeuristics = {
   },
 
   /**
-   * Find the first matching field name from a given list of field names
+   * Find matching field names from a given list of field names
    * that matches an HTML element.
    *
    * The function first tries to match the element against a set of
    * pre-defined regular expression rules. If no match is found, it
    * then checks for label-specific rules, if they exist.
    *
+   * The return value can contain a maximum of two field names, the
+   * first item the first match found, and the second an alternate field
+   * name always of a different type, where the two type are credit card
+   * and address.
+   *
    * Note: For label rules, the keyword is often more general
    * (e.g., "^\\W*address"), hence they are only searched within labels
    * to reduce the occurrence of false positives.
    *
    * @param {HTMLElement} element The element to match.
    * @param {Array<string>} fieldNames An array of field names to compare against.
-   * @returns {string|null} The name of the matched field, or null if no match was found.
+   * @returns {Array} An array of the matching field names.
    */
-  _findMatchedFieldName(element, fieldNames) {
+  _findMatchedFieldNames(element, fieldNames) {
     if (!fieldNames.length) {
-      return null;
+      return [];
     }
 
-    // Attempt to match the element against the default set of rules
-    let matchedFieldName = fieldNames.find(fieldName =>
-      this._matchRegexp(element, this.RULES[fieldName])
-    );
+    // The first element is the field name, and the second element is the type.
+    let fields = fieldNames.map(name => [
+      name,
+      lazy.FormAutofillUtils.isCreditCardField(name) ? CC_TYPE : ADDR_TYPE,
+    ]);
 
-    // If no match is found, and if a label rule exists for the field,
-    // attempt to match against the label rules
-    if (!matchedFieldName) {
-      matchedFieldName = fieldNames.find(fieldName => {
-        const regexp = this.LABEL_RULES[fieldName];
-        return this._matchRegexp(element, regexp, { attribute: false });
-      });
+    let foundType;
+    let attribute = true;
+    let matchedFieldNames = [];
+
+    // Check RULES first, and only check LABEL_RULES if no match is found.
+    for (let rules of [this.RULES, this.LABEL_RULES]) {
+      // Attempt to match the element against the default set of rules.
+      if (
+        fields.find(field => {
+          const [fieldName, type] = field;
+
+          // The same type has been found already, so skip.
+          if (foundType == type) {
+            return false;
+          }
+
+          if (!this._matchRegexp(element, rules[fieldName], { attribute })) {
+            return false;
+          }
+
+          foundType = type;
+          matchedFieldNames.push(fieldName);
+
+          return matchedFieldNames.length == 2;
+        })
+      ) {
+        break;
+      }
+
+      // Don't match attributes for label rules.
+      attribute = false;
     }
-    return matchedFieldName;
+
+    return matchedFieldNames;
   },
 
   /**
diff --git a/firefox-ios/Client/Assets/CC_Script/FormAutofillSection.sys.mjs b/firefox-ios/Client/Assets/CC_Script/FormAutofillSection.sys.mjs
index aa4f79552188c..492cfb1e1b9b4 100644
--- a/firefox-ios/Client/Assets/CC_Script/FormAutofillSection.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/FormAutofillSection.sys.mjs
@@ -2,45 +2,81 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { FormAutofillUtils } from "resource://gre/modules/shared/FormAutofillUtils.sys.mjs";
-import { FormAutofill } from "resource://autofill/FormAutofill.sys.mjs";
-
 const lazy = {};
 ChromeUtils.defineESModuleGetters(lazy, {
   AutofillTelemetry: "resource://gre/modules/shared/AutofillTelemetry.sys.mjs",
-  CreditCard: "resource://gre/modules/CreditCard.sys.mjs",
-  FormAutofillNameUtils:
-    "resource://gre/modules/shared/FormAutofillNameUtils.sys.mjs",
-  LabelUtils: "resource://gre/modules/shared/LabelUtils.sys.mjs",
+  FormAutofillUtils: "resource://gre/modules/shared/FormAutofillUtils.sys.mjs",
+  FormAutofill: "resource://autofill/FormAutofill.sys.mjs",
+  OSKeyStore: "resource://gre/modules/OSKeyStore.sys.mjs",
 });
 
-const { FIELD_STATES } = FormAutofillUtils;
-
-export class FormAutofillSection {
-  static SHOULD_FOCUS_ON_AUTOFILL = true;
-  #focusedInput = null;
+/**
+ * To help us classify sections, we want to know what fields can appear
+ * multiple times in a row.
+ * Such fields, like `address-line{X}`, should not break sections.
+ */
+const MULTI_FIELD_NAMES = [
+  "address-level3",
+  "address-level2",
+  "address-level1",
+  "tel",
+  "postal-code",
+  "email",
+  "street-address",
+];
+
+class FormSection {
+  static ADDRESS = "address";
+  static CREDIT_CARD = "creditCard";
 
   #fieldDetails = [];
 
-  constructor(fieldDetails, handler) {
-    this.#fieldDetails = fieldDetails;
+  #name = "";
 
-    if (!this.isValidSection()) {
-      return;
+  constructor(fieldDetails) {
+    if (!fieldDetails.length) {
+      throw new TypeError("A section should contain at least one field");
     }
 
-    this.handler = handler;
-    this.filledRecordGUID = null;
+    fieldDetails.forEach(field => this.addField(field));
+
+    const fieldName = fieldDetails[0].fieldName;
+    if (lazy.FormAutofillUtils.isAddressField(fieldName)) {
+      this.type = FormSection.ADDRESS;
+    } else if (lazy.FormAutofillUtils.isCreditCardField(fieldName)) {
+      this.type = FormSection.CREDIT_CARD;
+    } else {
+      throw new Error("Unknown field type to create a section.");
+    }
+  }
+
+  get fieldDetails() {
+    return this.#fieldDetails;
+  }
+
+  get name() {
+    return this.#name;
+  }
+
+  addField(fieldDetail) {
+    this.#name ||= fieldDetail.sectionName;
+    this.#fieldDetails.push(fieldDetail);
+  }
+}
+
+export class FormAutofillSection {
+  /**
+   * Record information for fields that are in this section
+   */
+  #fieldDetails = [];
+
+  constructor(fieldDetails) {
+    this.#fieldDetails = fieldDetails;
 
     ChromeUtils.defineLazyGetter(this, "log", () =>
-      FormAutofill.defineLogGetter(this, "FormAutofillHandler")
+      lazy.FormAutofill.defineLogGetter(this, "FormAutofillSection")
     );
 
-    this._cacheValue = {
-      allFieldNames: null,
-      matchingSelectOption: null,
-    };
-
     // Identifier used to correlate events relating to the same form
     this.flowId = Services.uuid.generateUUID().toString();
     this.log.debug(
@@ -53,6 +89,10 @@ export class FormAutofillSection {
     return this.#fieldDetails;
   }
 
+  get allFieldNames() {
+    return this.fieldDetails.map(field => field.fieldName);
+  }
+
   /*
    * Examine the section is a valid section or not based on its fieldDetails or
    * other information. This method must be overrided.
@@ -87,22 +127,17 @@ export class FormAutofillSection {
     throw new TypeError("isRecordCreatable method must be overridden");
   }
 
-  /**
-   * Override this method if the profile is needed to apply some transformers.
-   *
-   * @param {object} _profile
-   *        A profile should be converted based on the specific requirement.
-   */
-  applyTransformers(_profile) {}
-
   /**
    * Override this method if the profile is needed to be customized for
    * previewing values.
    *
    * @param {object} _profile
    *        A profile for pre-processing before previewing values.
+   * @returns {boolean} Whether the profile should be previewed.
    */
-  preparePreviewProfile(_profile) {}
+  preparePreviewProfile(_profile) {
+    return true;
+  }
 
   /**
    * Override this method if the profile is needed to be customized for filling
@@ -117,581 +152,306 @@ export class FormAutofillSection {
   }
 
   /**
-   * Override this method if the profile is needed to be customized for filling
-   * values.
+   * The result is an array contains the sections with its belonging field details.
    *
-   * @param {object} fieldDetail A fieldDetail of the related element.
-   * @param {object} profile The profile to fill.
-   * @returns {string} The value to fill for the given field.
+   * @param   {Array<FieldDetails>} fieldDetails field detail array to be classified
+   * @param   {boolean} ignoreInvalid
+   *          True to keep invalid section in the return array. Only used by tests now.
+   * @returns {Array<FormSection>} The array with the sections.
    */
-  getFilledValueFromProfile(fieldDetail, profile) {
-    return (
-      profile[`${fieldDetail.fieldName}-formatted`] ||
-      profile[fieldDetail.fieldName]
+  static classifySections(fieldDetails, ignoreInvalid = false) {
+    const addressSections = FormAutofillSection.groupFields(
+      fieldDetails.filter(f =>
+        lazy.FormAutofillUtils.isAddressField(f.fieldName)
+      )
+    );
+    const creditCardSections = FormAutofillSection.groupFields(
+      fieldDetails.filter(f =>
+        lazy.FormAutofillUtils.isCreditCardField(f.fieldName)
+      )
     );
-  }
-
-  /*
-   * Override this method if there is any field value needs to compute for a
-   * specific case. Return the original value in the default case.
-   * @param {String} value
-   *        The original field value.
-   * @param {Object} _fieldName
-   *        A fieldDetail of the related element.
-   * @param {HTMLElement} _element
-   *        A element for checking converting value.
-   *
-   * @returns {String}
-   *          A string of the converted value.
-   */
-  computeFillingValue(value, _fieldName, _element) {
-    return value;
-  }
-
-  set focusedInput(element) {
-    this.#focusedInput = element;
-  }
-
-  getFieldDetailByElement(element) {
-    return this.fieldDetails.find(detail => detail.element == element);
-  }
-
-  getFieldDetailByName(fieldName) {
-    return this.fieldDetails.find(detail => detail.fieldName == fieldName);
-  }
-
-  get allFieldNames() {
-    if (!this._cacheValue.allFieldNames) {
-      this._cacheValue.allFieldNames = this.fieldDetails.map(
-        record => record.fieldName
-      );
-    }
-    return this._cacheValue.allFieldNames;
-  }
-
-  matchSelectOptions(profile) {
-    if (!this._cacheValue.matchingSelectOption) {
-      this._cacheValue.matchingSelectOption = new WeakMap();
-    }
-
-    for (const fieldName in profile) {
-      const fieldDetail = this.getFieldDetailByName(fieldName);
-      const element = fieldDetail?.element;
-
-      if (!HTMLSelectElement.isInstance(element)) {
-        continue;
-      }
-
-      const cache = this._cacheValue.matchingSelectOption.get(element) || {};
-      const value = profile[fieldName];
-      if (cache[value] && cache[value].deref()) {
-        continue;
-      }
-
-      const option = FormAutofillUtils.findSelectOption(
-        element,
-        profile,
-        fieldName
-      );
 
-      if (option) {
-        cache[value] = new WeakRef(option);
-        this._cacheValue.matchingSelectOption.set(element, cache);
-      } else {
-        if (cache[value]) {
-          delete cache[value];
-          this._cacheValue.matchingSelectOption.set(element, cache);
-        }
-        // Skip removing cc-type since this is needed for displaying the icon for credit card network
-        // TODO(Bug 1874339): Cleanup transformation and normalization of data to not remove any
-        // fields and be more consistent
-        if (!["cc-type"].includes(fieldName)) {
-          // Delete the field so the phishing hint won't treat it as a "also fill"
-          // field.
-          delete profile[fieldName];
-        }
-      }
-    }
-  }
+    const sections = [...addressSections, ...creditCardSections].sort(
+      (a, b) =>
+        fieldDetails.indexOf(a.fieldDetails[0]) -
+        fieldDetails.indexOf(b.fieldDetails[0])
+    );
 
-  adaptFieldMaxLength(profile) {
-    for (let key in profile) {
-      let detail = this.getFieldDetailByName(key);
-      if (!detail) {
+    const autofillableSections = [];
+    for (const section of sections) {
+      if (!section.fieldDetails.length) {
         continue;
       }
 
-      let element = detail.element;
-      if (!element) {
-        continue;
-      }
+      const autofillableSection =
+        section.type == FormSection.ADDRESS
+          ? new FormAutofillAddressSection(section.fieldDetails)
+          : new FormAutofillCreditCardSection(section.fieldDetails);
 
-      let maxLength = element.maxLength;
-      if (
-        maxLength === undefined ||
-        maxLength < 0 ||
-        profile[key].toString().length <= maxLength
-      ) {
+      if (ignoreInvalid && !autofillableSection.isValidSection()) {
         continue;
       }
 
-      if (maxLength) {
-        switch (typeof profile[key]) {
-          case "string":
-            // If this is an expiration field and our previous
-            // adaptations haven't resulted in a string that is
-            // short enough to satisfy the field length, and the
-            // field is constrained to a length of 4 or 5, then we
-            // assume it is intended to hold an expiration of the
-            // form "MMYY" or "MM/YY".
-            if (key == "cc-exp" && (maxLength == 4 || maxLength == 5)) {
-              const month2Digits = (
-                "0" + profile["cc-exp-month"].toString()
-              ).slice(-2);
-              const year2Digits = profile["cc-exp-year"].toString().slice(-2);
-              const separator = maxLength == 5 ? "/" : "";
-              profile[key] = `${month2Digits}${separator}${year2Digits}`;
-            } else if (key == "cc-number") {
-              // We want to show the last four digits of credit card so that
-              // the masked credit card previews correctly and appears correctly
-              // in the autocomplete menu
-              profile[key] = profile[key].substr(
-                profile[key].length - maxLength
-              );
-            } else {
-              profile[key] = profile[key].substr(0, maxLength);
-            }
-            break;
-          case "number":
-            // There's no way to truncate a number smaller than a
-            // single digit.
-            if (maxLength < 1) {
-              maxLength = 1;
-            }
-            // The only numbers we store are expiration month/year,
-            // and if they truncate, we want the final digits, not
-            // the initial ones.
-            profile[key] = profile[key] % Math.pow(10, maxLength);
-            break;
-          default:
-        }
-      } else {
-        delete profile[key];
-        delete profile[`${key}-formatted`];
-      }
-    }
-  }
-
-  fillFieldValue(element, value) {
-    if (FormAutofillUtils.focusOnAutofill) {
-      element.focus({ preventScroll: true });
-    }
-    if (HTMLInputElement.isInstance(element)) {
-      element.setUserInput(value);
-    } else if (HTMLSelectElement.isInstance(element)) {
-      // Set the value of the select element so that web event handlers can react accordingly
-      element.value = value;
-      element.dispatchEvent(
-        new element.ownerGlobal.Event("input", { bubbles: true })
-      );
-      element.dispatchEvent(
-        new element.ownerGlobal.Event("change", { bubbles: true })
-      );
-    }
-  }
-
-  getAdaptedProfiles(originalProfiles) {
-    for (let profile of originalProfiles) {
-      this.applyTransformers(profile);
+      autofillableSections.push(autofillableSection);
     }
-    return originalProfiles;
+    return autofillableSections;
   }
 
   /**
-   * Processes form fields that can be autofilled, and populates them with the
-   * profile provided by backend.
+   * Groups fields into sections based on:
+   * 1. Their `sectionName` attribute.
+   * 2. Whether the section already contains a field with the same `fieldName`,
+   *    If so, a new section is created.
    *
-   * @param {object} profile
-   *        A profile to be filled in.
-   * @returns {boolean}
-   *          True if successful, false if failed
+   * @param {Array} fieldDetails An array of field detail objects.
+   * @returns {Array} An array of FormSection objects.
    */
-  async autofillFields(profile) {
-    if (!this.#focusedInput) {
-      throw new Error("No focused input.");
-    }
-
-    const focusedDetail = this.getFieldDetailByElement(this.#focusedInput);
-    if (!focusedDetail) {
-      throw new Error("No fieldDetail for the focused input.");
-    }
-
-    this.getAdaptedProfiles([profile]);
-    if (!(await this.prepareFillingProfile(profile))) {
-      this.log.debug("profile cannot be filled");
-      return false;
-    }
-
-    this.filledRecordGUID = profile.guid;
-    for (const fieldDetail of this.fieldDetails) {
-      // Avoid filling field value in the following cases:
-      // 1. a non-empty input field for an unfocused input
-      // 2. the invalid value set
-      // 3. value already chosen in select element
-
-      const element = fieldDetail.element;
-      // Skip the field if it is null or readonly or disabled
-      if (!FormAutofillUtils.isFieldAutofillable(element)) {
-        continue;
+  static groupFields(fieldDetails) {
+    let sections = [];
+    for (let i = 0; i < fieldDetails.length; i++) {
+      const cur = fieldDetails[i];
+      const [currentSection] = sections.slice(-1);
+
+      // The section this field might be placed into.
+      let candidateSection = null;
+
+      // Use name group from autocomplete attribute (ex, section-xxx) to look for the section
+      // we might place this field into.
+      // If the field doesn't have a section name, the candidate section is the previous section.
+      if (!currentSection || !cur.sectionName) {
+        candidateSection = currentSection;
+      } else if (cur.sectionName) {
+        // If the field has a section name, the candidate section is the nearest section that
+        // either shares the same name or lacks a name.
+        for (let idx = sections.length - 1; idx >= 0; idx--) {
+          if (!sections[idx].name || sections[idx].name == cur.sectionName) {
+            candidateSection = sections[idx];
+            break;
+          }
+        }
       }
 
-      element.previewValue = "";
-      // Bug 1687679: Since profile appears to be presentation ready data, we need to utilize the "x-formatted" field
-      // that is generated when presentation ready data doesn't fit into the autofilling element.
-      // For example, autofilling expiration month into an input element will not work as expected if
-      // the month is less than 10, since the input is expected a zero-padded string.
-      // See Bug 1722941 for follow up.
-      const value = this.getFilledValueFromProfile(fieldDetail, profile);
-      if (HTMLInputElement.isInstance(element) && value) {
-        // For the focused input element, it will be filled with a valid value
-        // anyway.
-        // For the others, the fields should be only filled when their values are empty
-        // or their values are equal to the site prefill value
-        // or are the result of an earlier auto-fill.
+      if (candidateSection) {
+        let createNewSection = true;
+
+        // We might create a new section instead of placing the field in the candidate section if
+        // the section already has a field with the same field name.
+        // We also check visibility for both the fields with the same field name because we don't
+        // want to create a new section for an invisible field.
         if (
-          element == this.#focusedInput ||
-          (element != this.#focusedInput &&
-            (!element.value || element.value == element.defaultValue)) ||
-          this.handler.getFilledStateByElement(element) ==
-            FIELD_STATES.AUTO_FILLED
+          candidateSection.fieldDetails.find(
+            f => f.fieldName == cur.fieldName && f.isVisible && cur.isVisible
+          )
         ) {
-          this.fillFieldValue(element, value);
-          this.handler.changeFieldState(fieldDetail, FIELD_STATES.AUTO_FILLED);
+          // For some field type, it is common to have multiple fields in one section, for example,
+          // email. In that case, we will not create a new section even when the candidate section
+          // already has a field with the same field name.
+          const [last] = candidateSection.fieldDetails.slice(-1);
+          if (last.fieldName == cur.fieldName) {
+            if (
+              MULTI_FIELD_NAMES.includes(cur.fieldName) ||
+              (last.part && last.part + 1 == cur.part)
+            ) {
+              createNewSection = false;
+            }
+          }
+        } else {
+          // The field doesn't exist in the candidate section, add it.
+          createNewSection = false;
         }
-      } else if (HTMLSelectElement.isInstance(element)) {
-        let cache = this._cacheValue.matchingSelectOption.get(element) || {};
-        let option = cache[value] && cache[value].deref();
-        if (!option) {
+
+        if (!createNewSection) {
+          candidateSection.addField(fieldDetails[i]);
           continue;
         }
-        // Do not change value or dispatch events if the option is already selected.
-        // Use case for multiple select is not considered here.
-        if (!option.selected) {
-          option.selected = true;
-          this.fillFieldValue(element, option.value);
-        }
-        // Autofill highlight appears regardless if value is changed or not
-        this.handler.changeFieldState(fieldDetail, FIELD_STATES.AUTO_FILLED);
       }
-    }
-    this.#focusedInput.focus({ preventScroll: true });
 
-    lazy.AutofillTelemetry.recordFormInteractionEvent("filled", this, {
-      profile,
-    });
+      // Create a new section
+      sections.push(new FormSection([fieldDetails[i]]));
+    }
 
-    return true;
+    return sections;
   }
 
   /**
-   * Populates result to the preview layers with given profile.
+   * Return the record that is converted from the element's value.
+   * The `valueByElementId` is passed by the child process.
    *
-   * @param {object} profile
-   *        A profile to be previewed with
+   * @returns {object} object keyed by field name, and values are field values.
    */
-  previewFormFields(profile) {
-    this.preparePreviewProfile(profile);
-
-    for (const fieldDetail of this.fieldDetails) {
-      let element = fieldDetail.element;
-      // Skip the field if it is null or readonly or disabled
-      if (!FormAutofillUtils.isFieldAutofillable(element)) {
-        continue;
-      }
-
-      let value =
-        profile[`${fieldDetail.fieldName}-formatted`] ||
-        profile[fieldDetail.fieldName] ||
-        "";
-
-      if (HTMLSelectElement.isInstance(element)) {
-        // Unlike text input, select element is always previewed even if
-        // the option is already selected.
-        if (value) {
-          const cache =
-            this._cacheValue.matchingSelectOption.get(element) ?? {};
-          const option = cache[value]?.deref();
-          value = option?.text ?? "";
-        }
-      } else if (element.value && element.value != element.defaultValue) {
-        // Skip the field if the user has already entered text and that text is not the site prefilled value.
-        continue;
-      }
-      element.previewValue = value?.toString().replaceAll("*", "•");
-      this.handler.changeFieldState(
-        fieldDetail,
-        value ? FIELD_STATES.PREVIEW : FIELD_STATES.NORMAL
-      );
-    }
-  }
-
-  /**
-   * Clear a previously autofilled field in this section
-   */
-  clearFilled(fieldDetail) {
-    lazy.AutofillTelemetry.recordFormInteractionEvent("filled_modified", this, {
-      fieldName: fieldDetail.fieldName,
-    });
-
-    let isAutofilled = false;
-    const dimFieldDetails = [];
-    for (const fieldDetail of this.fieldDetails) {
-      const element = fieldDetail.element;
-
-      if (HTMLSelectElement.isInstance(element)) {
-        // Dim fields are those we don't attempt to revert their value
-        // when clear the target set, such as <select>.
-        dimFieldDetails.push(fieldDetail);
-      } else {
-        isAutofilled |=
-          this.handler.getFilledStateByElement(element) ==
-          FIELD_STATES.AUTO_FILLED;
-      }
-    }
-    if (!isAutofilled) {
-      // Restore the dim fields to initial state as well once we knew
-      // that user had intention to clear the filled form manually.
-      for (const fieldDetail of dimFieldDetails) {
-        // If we can't find a selected option, then we should just reset to the first option's value
-        let element = fieldDetail.element;
-        this._resetSelectElementValue(element);
-        this.handler.changeFieldState(fieldDetail, FIELD_STATES.NORMAL);
-      }
-      this.filledRecordGUID = null;
+  createRecord(formFilledData) {
+    if (!this.fieldDetails.length) {
+      return {};
     }
-  }
 
-  /**
-   * Clear preview text and background highlight of all fields.
-   */
-  clearPreviewedFormFields() {
-    this.log.debug("clear previewed fields");
+    const data = {
+      flowId: this.flowId,
+      record: {},
+    };
 
-    for (const fieldDetail of this.fieldDetails) {
-      let element = fieldDetail.element;
-      if (!element) {
-        this.log.warn(fieldDetail.fieldName, "is unreachable");
+    for (const detail of this.fieldDetails) {
+      // Do not save security code.
+      if (detail.fieldName == "cc-csc") {
         continue;
       }
+      const { filledValue } = formFilledData.get(detail.elementId) ?? {};
 
-      element.previewValue = "";
-
-      // We keep the state if this field has
-      // already been auto-filled.
       if (
-        this.handler.getFilledStateByElement(element) ==
-        FIELD_STATES.AUTO_FILLED
+        !filledValue ||
+        filledValue.length > lazy.FormAutofillUtils.MAX_FIELD_VALUE_LENGTH
       ) {
-        continue;
+        // Keep the property and preserve more information for updating
+        data.record[detail.fieldName] = "";
+      } else if (detail.part > 1) {
+        // If there are multiple parts for the same field, concatenate the values.
+        // This is now used in cases where the credit card number field
+        // is split into multiple fields.
+        data.record[detail.fieldName] += filledValue;
+      } else {
+        data.record[detail.fieldName] = filledValue;
       }
+    }
 
-      this.handler.changeFieldState(fieldDetail, FIELD_STATES.NORMAL);
+    if (!this.isRecordCreatable(data.record)) {
+      return null;
     }
+
+    return data;
   }
 
   /**
-   * Clear value and highlight style of all filled fields.
+   * Heuristics to determine which fields to autofill when a section contains
+   * multiple fields of the same type.
    */
-  clearPopulatedForm() {
-    for (let fieldDetail of this.fieldDetails) {
-      let element = fieldDetail.element;
-      if (!element) {
-        this.log.warn(fieldDetail.fieldName, "is unreachable");
-        continue;
+  getAutofillFields() {
+    return this.fieldDetails.filter(fieldDetail => {
+      // We don't save security code, but if somehow the profile has securty code,
+      // make sure we don't autofill it.
+      if (fieldDetail.fieldName == "cc-csc") {
+        return false;
       }
 
-      if (
-        this.handler.getFilledStateByElement(element) ==
-        FIELD_STATES.AUTO_FILLED
-      ) {
-        if (HTMLInputElement.isInstance(element)) {
-          element.setUserInput("");
-        } else if (HTMLSelectElement.isInstance(element)) {
-          // If we can't find a selected option, then we should just reset to the first option's value
-          this._resetSelectElementValue(element);
-        }
+      // When both visible and invisible elements exist, we only autofill the
+      // visible element.
+      if (!fieldDetail.isVisible) {
+        return !this.fieldDetails.some(
+          field => field.fieldName == fieldDetail.fieldName && field.isVisible
+        );
       }
-    }
+      return true;
+    });
   }
 
-  resetFieldStates() {
-    for (const fieldDetail of this.fieldDetails) {
-      const element = fieldDetail.element;
-      element.removeEventListener("input", this, { mozSystemGroup: true });
-      this.handler.changeFieldState(fieldDetail, FIELD_STATES.NORMAL);
+  /*
+   * For telemetry
+   */
+  onDetected() {
+    if (!this.isValidSection()) {
+      return;
     }
-    this.filledRecordGUID = null;
-  }
 
-  isFilled() {
-    return !!this.filledRecordGUID;
+    lazy.AutofillTelemetry.recordDetectedSectionCount(this.fieldDetails);
+    lazy.AutofillTelemetry.recordFormInteractionEvent(
+      "detected",
+      this.flowId,
+      this.fieldDetails
+    );
   }
 
-  /**
-   *  Condenses multiple credit card number fields into one fieldDetail
-   *  in order to submit the credit card record correctly.
-   *
-   * @param {Array.<object>} condensedDetails
-   *  An array of fieldDetails
-   * @memberof FormAutofillSection
-   */
-  _condenseMultipleCCNumberFields(condensedDetails) {
-    let countOfCCNumbers = 0;
-    // We ignore the cases where there are more than or less than four credit card number
-    // fields in a form as this is not a valid case for filling the credit card number.
-    for (let i = condensedDetails.length - 1; i >= 0; i--) {
-      if (condensedDetails[i].fieldName == "cc-number") {
-        countOfCCNumbers++;
-        if (countOfCCNumbers == 4) {
-          countOfCCNumbers = 0;
-          condensedDetails[i].fieldValue =
-            condensedDetails[i].element?.value +
-            condensedDetails[i + 1].element?.value +
-            condensedDetails[i + 2].element?.value +
-            condensedDetails[i + 3].element?.value;
-          condensedDetails.splice(i + 1, 3);
-        }
-      } else {
-        countOfCCNumbers = 0;
-      }
-    }
+  onPopupOpened(elementId) {
+    const fieldDetail = this.getFieldDetailByElementId(elementId);
+    lazy.AutofillTelemetry.recordFormInteractionEvent(
+      "popup_shown",
+      this.flowId,
+      [fieldDetail]
+    );
   }
-  /**
-   * Return the record that is converted from `fieldDetails` and only valid
-   * form record is included.
-   *
-   * @returns {object | null}
-   *          A record object consists of three properties:
-   *            - guid: The id of the previously-filled profile or null if omitted.
-   *            - record: A valid record converted from details with trimmed result.
-   *            - untouchedFields: Fields that aren't touched after autofilling.
-   *          Return `null` for any uncreatable or invalid record.
-   */
-  createRecord() {
-    let details = this.fieldDetails;
-    if (!this.isEnabled() || !details || !details.length) {
-      return null;
-    }
-
-    let data = {
-      guid: this.filledRecordGUID,
-      record: {},
-      untouchedFields: [],
-      section: this,
-    };
-    if (this.flowId) {
-      data.flowId = this.flowId;
-    }
-    let condensedDetails = this.fieldDetails;
-
-    // TODO: This is credit card specific code...
-    this._condenseMultipleCCNumberFields(condensedDetails);
-
-    condensedDetails.forEach(detail => {
-      const element = detail.element;
-      // Remove the unnecessary spaces
-      let value = detail.fieldValue ?? (element && element.value.trim());
-      value = this.computeFillingValue(value, detail, element);
 
-      if (!value || value.length > FormAutofillUtils.MAX_FIELD_VALUE_LENGTH) {
-        // Keep the property and preserve more information for updating
-        data.record[detail.fieldName] = "";
-        return;
-      }
+  onFilled(filledResult) {
+    lazy.AutofillTelemetry.recordFormInteractionEvent(
+      "filled",
+      this.flowId,
+      this.fieldDetails,
+      filledResult
+    );
+  }
 
-      data.record[detail.fieldName] = value;
+  onFilledModified(elementId) {
+    const fieldDetail = this.getFieldDetailByElementId(elementId);
+    lazy.AutofillTelemetry.recordFormInteractionEvent(
+      "filled_modified",
+      this.flowId,
+      [fieldDetail]
+    );
+  }
 
-      if (
-        this.handler.getFilledStateByElement(element) ==
-        FIELD_STATES.AUTO_FILLED
-      ) {
-        data.untouchedFields.push(detail.fieldName);
-      }
-    });
+  onSubmitted(formFilledData) {
+    this.submitted = true;
 
-    const telFields = this.fieldDetails.filter(
-      f => FormAutofillUtils.getCategoryFromFieldName(f.fieldName) == "tel"
+    lazy.AutofillTelemetry.recordSubmittedSectionCount(this.fieldDetails, 1);
+    lazy.AutofillTelemetry.recordFormInteractionEvent(
+      "submitted",
+      this.flowId,
+      this.fieldDetails,
+      formFilledData
     );
-    if (
-      telFields.length &&
-      telFields.every(f => data.untouchedFields.includes(f.fieldName))
-    ) {
-      // No need to verify it if none of related fields are modified after autofilling.
-      if (!data.untouchedFields.includes("tel")) {
-        data.untouchedFields.push("tel");
-      }
-    }
+  }
 
-    if (!this.isRecordCreatable(data.record)) {
-      return null;
-    }
+  onCleared(elementId) {
+    const fieldDetail = this.getFieldDetailByElementId(elementId);
+    lazy.AutofillTelemetry.recordFormInteractionEvent("cleared", this.flowId, [
+      fieldDetail,
+    ]);
+  }
 
-    return data;
+  /**
+   * Utility functions
+   */
+  getFieldDetailByElementId(elementId) {
+    return this.fieldDetails.find(detail => detail.elementId == elementId);
   }
 
   /**
-   * Resets a <select> element to its selected option or the first option if there is none selected.
+   * Groups an array of field details by their browsing context IDs.
+   *
+   * @param {Array} fieldDetails
+   *        Array of fieldDetails object
    *
-   * @param {HTMLElement} element
-   * @memberof FormAutofillSection
+   * @returns {object}
+   *        An object keyed by BrowsingContext Id, value is an array that
+   *        contains all fieldDetails with the same BrowsingContext id.
    */
-  _resetSelectElementValue(element) {
-    if (!element.options.length) {
-      return;
+  static groupFieldDetailsByBrowsingContext(fieldDetails) {
+    const detailsByBC = {};
+    for (const fieldDetail of fieldDetails) {
+      const bcid = fieldDetail.browsingContextId;
+      if (detailsByBC[bcid]) {
+        detailsByBC[bcid].push(fieldDetail);
+      } else {
+        detailsByBC[bcid] = [fieldDetail];
+      }
     }
-    let selected = [...element.options].find(option =>
-      option.hasAttribute("selected")
-    );
-    element.value = selected ? selected.value : element.options[0].value;
-    element.dispatchEvent(
-      new element.ownerGlobal.Event("input", { bubbles: true })
-    );
-    element.dispatchEvent(
-      new element.ownerGlobal.Event("change", { bubbles: true })
-    );
+    return detailsByBC;
   }
 }
 
 export class FormAutofillAddressSection extends FormAutofillSection {
-  constructor(fieldDetails, handler) {
-    super(fieldDetails, handler);
-
-    if (!this.isValidSection()) {
-      return;
-    }
-
-    this._cacheValue.oneLineStreetAddress = null;
-
-    lazy.AutofillTelemetry.recordDetectedSectionCount(this);
-    lazy.AutofillTelemetry.recordFormInteractionEvent("detected", this);
-  }
-
   isValidSection() {
     const fields = new Set(this.fieldDetails.map(f => f.fieldName));
-    return fields.size >= FormAutofillUtils.AUTOFILL_FIELDS_THRESHOLD;
+    return fields.size >= lazy.FormAutofillUtils.AUTOFILL_FIELDS_THRESHOLD;
   }
 
   isEnabled() {
-    return FormAutofill.isAutofillAddressesEnabled;
+    return lazy.FormAutofill.isAutofillAddressesEnabled;
   }
 
   isRecordCreatable(record) {
-    const country = FormAutofillUtils.identifyCountryCode(
+    const country = lazy.FormAutofillUtils.identifyCountryCode(
       record.country || record["country-name"]
     );
     if (
       country &&
-      !FormAutofill.isAutofillAddressesAvailableInCountry(country)
+      !lazy.FormAutofill.isAutofillAddressesAvailableInCountry(country)
     ) {
       // We don't want to save data in the wrong fields due to not having proper
       // heuristic regexes in countries we don't yet support.
@@ -706,7 +466,7 @@ export class FormAutofillAddressSection extends FormAutofillSection {
     // the number of fields exceed the valid address secton threshold
     const categories = Object.entries(record)
       .filter(e => !!e[1])
-      .map(e => FormAutofillUtils.getCategoryFromFieldName(e[0]));
+      .map(e => lazy.FormAutofillUtils.getCategoryFromFieldName(e[0]));
 
     return (
       categories.reduce(
@@ -715,192 +475,12 @@ export class FormAutofillAddressSection extends FormAutofillSection {
             ? acc
             : [...acc, category],
         []
-      ).length >= FormAutofillUtils.AUTOFILL_FIELDS_THRESHOLD
+      ).length >= lazy.FormAutofillUtils.AUTOFILL_FIELDS_THRESHOLD
     );
   }
-
-  _getOneLineStreetAddress(address) {
-    if (!this._cacheValue.oneLineStreetAddress) {
-      this._cacheValue.oneLineStreetAddress = {};
-    }
-    if (!this._cacheValue.oneLineStreetAddress[address]) {
-      this._cacheValue.oneLineStreetAddress[address] =
-        FormAutofillUtils.toOneLineAddress(address);
-    }
-    return this._cacheValue.oneLineStreetAddress[address];
-  }
-
-  addressTransformer(profile) {
-    if (profile["street-address"]) {
-      // "-moz-street-address-one-line" is used by the labels in
-      // ProfileAutoCompleteResult.
-      profile["-moz-street-address-one-line"] = this._getOneLineStreetAddress(
-        profile["street-address"]
-      );
-      let streetAddressDetail = this.getFieldDetailByName("street-address");
-      if (
-        streetAddressDetail &&
-        HTMLInputElement.isInstance(streetAddressDetail.element)
-      ) {
-        profile["street-address"] = profile["-moz-street-address-one-line"];
-      }
-
-      let waitForConcat = [];
-      for (let f of ["address-line3", "address-line2", "address-line1"]) {
-        waitForConcat.unshift(profile[f]);
-        if (this.getFieldDetailByName(f)) {
-          if (waitForConcat.length > 1) {
-            profile[f] = FormAutofillUtils.toOneLineAddress(waitForConcat);
-          }
-          waitForConcat = [];
-        }
-      }
-    }
-  }
-
-  /**
-   * Replace tel with tel-national if tel violates the input element's
-   * restriction.
-   *
-   * @param {object} profile
-   *        A profile to be converted.
-   */
-  telTransformer(profile) {
-    if (!profile.tel || !profile["tel-national"]) {
-      return;
-    }
-
-    let detail = this.getFieldDetailByName("tel");
-    if (!detail) {
-      return;
-    }
-
-    let element = detail.element;
-    let _pattern;
-    let testPattern = str => {
-      if (!_pattern) {
-        // The pattern has to match the entire value.
-        _pattern = new RegExp("^(?:" + element.pattern + ")$", "u");
-      }
-      return _pattern.test(str);
-    };
-    if (element.pattern) {
-      if (testPattern(profile.tel)) {
-        return;
-      }
-    } else if (element.maxLength) {
-      if (
-        detail.reason == "autocomplete" &&
-        profile.tel.length <= element.maxLength
-      ) {
-        return;
-      }
-    }
-
-    if (detail.reason != "autocomplete") {
-      // Since we only target people living in US and using en-US websites in
-      // MVP, it makes more sense to fill `tel-national` instead of `tel`
-      // if the field is identified by heuristics and no other clues to
-      // determine which one is better.
-      // TODO: [Bug 1407545] This should be improved once more countries are
-      // supported.
-      profile.tel = profile["tel-national"];
-    } else if (element.pattern) {
-      if (testPattern(profile["tel-national"])) {
-        profile.tel = profile["tel-national"];
-      }
-    } else if (element.maxLength) {
-      if (profile["tel-national"].length <= element.maxLength) {
-        profile.tel = profile["tel-national"];
-      }
-    }
-  }
-
-  /*
-   * Apply all address related transformers.
-   *
-   * @param {Object} profile
-   *        A profile for adjusting address related value.
-   * @override
-   */
-  applyTransformers(profile) {
-    this.addressTransformer(profile);
-    this.telTransformer(profile);
-    this.matchSelectOptions(profile);
-    this.adaptFieldMaxLength(profile);
-  }
-
-  computeFillingValue(value, fieldDetail, element) {
-    // Try to abbreviate the value of select element.
-    if (
-      fieldDetail.fieldName == "address-level1" &&
-      HTMLSelectElement.isInstance(element)
-    ) {
-      // Don't save the record when the option value is empty *OR* there
-      // are multiple options being selected. The empty option is usually
-      // assumed to be default along with a meaningless text to users.
-      if (!value || element.selectedOptions.length != 1) {
-        // Keep the property and preserve more information for address updating
-        value = "";
-      } else {
-        let text = element.selectedOptions[0].text.trim();
-        value =
-          FormAutofillUtils.getAbbreviatedSubregionName([value, text]) || text;
-      }
-    } else if (fieldDetail.fieldName == "country") {
-      // This is a temporary fix. Ideally we should have either case-insensitive comparaison of country codes
-      // or handle this elsewhere see Bug 1889234 for more context.
-      value = value.toUpperCase();
-    }
-    return value;
-  }
 }
 
 export class FormAutofillCreditCardSection extends FormAutofillSection {
-  /**
-   * Credit Card Section Constructor
-   *
-   * @param {Array<FieldDetails>} fieldDetails
-   *        The fieldDetail objects for the fields in this section
-   * @param {Object<FormAutofillHandler>} handler
-   *        The handler responsible for this section
-   */
-  constructor(fieldDetails, handler) {
-    super(fieldDetails, handler);
-
-    if (!this.isValidSection()) {
-      return;
-    }
-
-    lazy.AutofillTelemetry.recordDetectedSectionCount(this);
-    lazy.AutofillTelemetry.recordFormInteractionEvent("detected", this);
-
-    // Check whether the section is in an <iframe>; and, if so,
-    // watch for the <iframe> to pagehide.
-    if (handler.window.location != handler.window.parent?.location) {
-      this.log.debug(
-        "Credit card form is in an iframe -- watching for pagehide",
-        fieldDetails
-      );
-      handler.window.addEventListener(
-        "pagehide",
-        this._handlePageHide.bind(this)
-      );
-    }
-  }
-
-  _handlePageHide(_event) {
-    this.handler.window.removeEventListener(
-      "pagehide",
-      this._handlePageHide.bind(this)
-    );
-    this.log.debug("Credit card subframe is pagehideing", this.handler.form);
-
-    const formSubmissionReason =
-      FormAutofillUtils.FORM_SUBMISSION_REASON.IFRAME_PAGEHIDE;
-    this.handler.onFormSubmitted(formSubmissionReason);
-  }
-
   /**
    * Determine whether a set of cc fields identified by our heuristics form a
    * valid credit card section.
@@ -971,288 +551,40 @@ export class FormAutofillCreditCardSection extends FormAutofillSection {
     }
 
     // Condition C.
-    let highConfidenceThreshold =
-      FormAutofillUtils.ccFathomHighConfidenceThreshold;
-    let highConfidenceField;
-    if (ccNumberDetail?.confidence > highConfidenceThreshold) {
-      highConfidenceField = ccNumberDetail;
-    } else if (ccNameDetail?.confidence > highConfidenceThreshold) {
-      highConfidenceField = ccNameDetail;
-    }
-    if (highConfidenceField) {
-      // Temporarily add an addtional "the field is the only visible input" constraint
-      // when determining whether a form has only a high-confidence cc-* field a valid
-      // credit card section. We can remove this restriction once we are confident
-      // about only using fathom.
-      const element = highConfidenceField.element;
-      const root = element.form || element.ownerDocument;
-      const inputs = root.querySelectorAll("input:not([type=hidden])");
-      if (inputs.length == 1 && inputs[0] == element) {
-        return true;
-      }
+    if (
+      ccNumberDetail?.isOnlyVisibleFieldWithHighConfidence ||
+      ccNameDetail?.isOnlyVisibleFieldWithHighConfidence
+    ) {
+      return true;
     }
 
     return false;
   }
 
   isEnabled() {
-    return FormAutofill.isAutofillCreditCardsEnabled;
+    return lazy.FormAutofill.isAutofillCreditCardsEnabled;
   }
 
   isRecordCreatable(record) {
     return (
-      record["cc-number"] && FormAutofillUtils.isCCNumber(record["cc-number"])
+      record["cc-number"] &&
+      lazy.FormAutofillUtils.isCCNumber(record["cc-number"])
     );
   }
 
-  /**
-   * Handles credit card expiry date transformation when
-   * the expiry date exists in a cc-exp field.
-   *
-   * @param {object} profile
-   * @memberof FormAutofillCreditCardSection
-   */
-  creditCardExpiryDateTransformer(profile) {
-    if (!profile["cc-exp"]) {
-      return;
-    }
-
-    const element = this.getFieldDetailByName("cc-exp")?.element;
-    if (!element) {
-      return;
-    }
-
-    function updateExpiry(_string, _month, _year) {
-      // Bug 1687681: This is a short term fix to other locales having
-      // different characters to represent year.
-      // - FR locales may use "A" to represent year.
-      // - DE locales may use "J" to represent year.
-      // - PL locales may use "R" to represent year.
-      // This approach will not scale well and should be investigated in a follow up bug.
-      const monthChars = "m";
-      const yearChars = "yy|aa|jj|rr";
-      const expiryDateFormatRegex = (firstChars, secondChars) =>
-        new RegExp(
-          "(?:\\b|^)((?:[" +
-            firstChars +
-            "]{2}){1,2})\\s*([\\-/])\\s*((?:[" +
-            secondChars +
-            "]{2}){1,2})(?:\\b|$)",
-          "i"
-        );
-
-      // If the month first check finds a result, where placeholder is "mm - yyyy",
-      // the result will be structured as such: ["mm - yyyy", "mm", "-", "yyyy"]
-      let result = expiryDateFormatRegex(monthChars, yearChars).exec(_string);
-      if (result) {
-        return (
-          _month.padStart(result[1].length, "0") +
-          result[2] +
-          _year.substr(-1 * result[3].length)
-        );
-      }
-
-      // If the year first check finds a result, where placeholder is "yyyy mm",
-      // the result will be structured as such: ["yyyy mm", "yyyy", " ", "mm"]
-      result = expiryDateFormatRegex(yearChars, monthChars).exec(_string);
-      if (result) {
-        return (
-          _year.substr(-1 * result[1].length) +
-          result[2] +
-          _month.padStart(result[3].length, "0")
-        );
-      }
-      return null;
-    }
-
-    let newExpiryString = null;
-    const month = profile["cc-exp-month"].toString();
-    const year = profile["cc-exp-year"].toString();
-    if (element.tagName == "INPUT") {
-      // Use the placeholder or label to determine the expiry string format.
-      const possibleExpiryStrings = [];
-      if (element.placeholder) {
-        possibleExpiryStrings.push(element.placeholder);
-      }
-      const labels = lazy.LabelUtils.findLabelElements(element);
-      if (labels) {
-        // Not consider multiple lable for now.
-        possibleExpiryStrings.push(element.labels[0]?.textContent);
-      }
-      if (element.previousElementSibling?.tagName == "LABEL") {
-        possibleExpiryStrings.push(element.previousElementSibling.textContent);
-      }
-
-      possibleExpiryStrings.some(string => {
-        newExpiryString = updateExpiry(string, month, year);
-        return !!newExpiryString;
-      });
-    }
-
-    // Bug 1688576: Change YYYY-MM to MM/YYYY since MM/YYYY is the
-    // preferred presentation format for credit card expiry dates.
-    profile["cc-exp"] = newExpiryString ?? `${month.padStart(2, "0")}/${year}`;
-  }
-
-  /**
-   * Handles credit card expiry date transformation when the expiry date exists in
-   * the separate cc-exp-month and cc-exp-year fields
-   *
-   * @param {object} profile
-   * @memberof FormAutofillCreditCardSection
-   */
-  creditCardExpMonthAndYearTransformer(profile) {
-    const getInputElementByField = (field, self) => {
-      if (!field) {
-        return null;
-      }
-      let detail = self.getFieldDetailByName(field);
-      if (!detail) {
-        return null;
-      }
-      let element = detail.element;
-      return element.tagName === "INPUT" ? element : null;
-    };
-    let month = getInputElementByField("cc-exp-month", this);
-    if (month) {
-      // Transform the expiry month to MM since this is a common format needed for filling.
-      profile["cc-exp-month-formatted"] = profile["cc-exp-month"]
-        ?.toString()
-        .padStart(2, "0");
-    }
-    let year = getInputElementByField("cc-exp-year", this);
-    // If the expiration year element is an input,
-    // then we examine any placeholder to see if we should format the expiration year
-    // as a zero padded string in order to autofill correctly.
-    if (year) {
-      let placeholder = year.placeholder;
-
-      // Checks for 'YY'|'AA'|'JJ'|'RR' placeholder and converts the year to a two digit string using the last two digits.
-      let result = /\b(yy|aa|jj|rr)\b/i.test(placeholder);
-      if (result) {
-        profile["cc-exp-year-formatted"] = profile["cc-exp-year"]
-          .toString()
-          .substring(2);
-      }
-    }
-  }
-
-  /**
-   * Handles credit card name transformation when the name exists in
-   * the separate cc-given-name, cc-middle-name, and cc-family name fields
-   *
-   * @param {object} profile
-   * @memberof FormAutofillCreditCardSection
-   */
-  creditCardNameTransformer(profile) {
-    const name = profile["cc-name"];
-    if (!name) {
-      return;
-    }
-
-    const given = this.getFieldDetailByName("cc-given-name");
-    const middle = this.getFieldDetailByName("cc-middle-name");
-    const family = this.getFieldDetailByName("cc-family-name");
-    if (given || middle || family) {
-      const nameParts = lazy.FormAutofillNameUtils.splitName(name);
-      if (given && nameParts.given) {
-        profile["cc-given-name"] = nameParts.given;
-      }
-      if (middle && nameParts.middle) {
-        profile["cc-middle-name"] = nameParts.middle;
-      }
-      if (family && nameParts.family) {
-        profile["cc-family-name"] = nameParts.family;
-      }
-    }
-  }
-
-  async _decrypt(cipherText, reauth) {
-    // Get the window for the form field.
-    let window;
-    for (let fieldDetail of this.fieldDetails) {
-      let element = fieldDetail.element;
-      if (element) {
-        window = element.ownerGlobal;
-        break;
-      }
-    }
-    if (!window) {
-      return null;
-    }
-
-    let actor = window.windowGlobalChild.getActor("FormAutofill");
-    return actor.sendQuery("FormAutofill:GetDecryptedString", {
-      cipherText,
-      reauth,
-    });
-  }
-
-  /*
-   * Apply all credit card related transformers.
-   *
-   * @param {Object} profile
-   *        A profile for adjusting credit card related value.
-   * @override
-   */
-  applyTransformers(profile) {
-    // The matchSelectOptions transformer must be placed after the expiry transformers.
-    // This ensures that the expiry value that is cached in the matchSelectOptions
-    // matches the expiry value that is stored in the profile ensuring that autofill works
-    // correctly when dealing with option elements.
-    this.creditCardExpiryDateTransformer(profile);
-    this.creditCardExpMonthAndYearTransformer(profile);
-    this.creditCardNameTransformer(profile);
-    this.matchSelectOptions(profile);
-    this.adaptFieldMaxLength(profile);
-  }
-
-  getFilledValueFromProfile(fieldDetail, profile) {
-    const value = super.getFilledValueFromProfile(fieldDetail, profile);
-    if (fieldDetail.fieldName == "cc-number" && fieldDetail.part != null) {
-      const part = fieldDetail.part;
-      return value.slice((part - 1) * 4, part * 4);
-    }
-    return value;
-  }
-
-  computeFillingValue(value, fieldDetail, element) {
-    if (
-      fieldDetail.fieldName != "cc-type" ||
-      !HTMLSelectElement.isInstance(element)
-    ) {
-      return value;
-    }
-
-    if (lazy.CreditCard.isValidNetwork(value)) {
-      return value;
-    }
-
-    // Don't save the record when the option value is empty *OR* there
-    // are multiple options being selected. The empty option is usually
-    // assumed to be default along with a meaningless text to users.
-    if (value && element.selectedOptions.length == 1) {
-      let selectedOption = element.selectedOptions[0];
-      let networkType =
-        lazy.CreditCard.getNetworkFromName(selectedOption.text) ??
-        lazy.CreditCard.getNetworkFromName(selectedOption.value);
-      if (networkType) {
-        return networkType;
-      }
-    }
-    // If we couldn't match the value to any network, we'll
-    // strip this field when submitting.
-    return value;
-  }
-
   /**
    * Customize for previewing profile
    *
    * @param {object} profile
    *        A profile for pre-processing before previewing values.
+   * @returns {boolean} Whether the profile should be filled.
    * @override
    */
   preparePreviewProfile(profile) {
+    if (!profile) {
+      return true;
+    }
+
     // Always show the decrypted credit card number when Master Password is
     // disabled.
     if (profile["cc-number-decrypted"]) {
@@ -1262,6 +594,8 @@ export class FormAutofillCreditCardSection extends FormAutofillSection {
       // needed when a credit card number field has a maxlength of four.
       profile["cc-number"] = "****" + profile["cc-number"];
     }
+
+    return true;
   }
 
   /**
@@ -1275,12 +609,12 @@ export class FormAutofillCreditCardSection extends FormAutofillSection {
   async prepareFillingProfile(profile) {
     // Prompt the OS login dialog to get the decrypted credit card number.
     if (profile["cc-number-encrypted"]) {
-      const promptMessage = FormAutofillUtils.reauthOSPromptMessage(
+      const promptMessage = lazy.FormAutofillUtils.reauthOSPromptMessage(
         "autofill-use-payment-method-os-prompt-macos",
         "autofill-use-payment-method-os-prompt-windows",
         "autofill-use-payment-method-os-prompt-other"
       );
-      let decrypted = await this._decrypt(
+      const decrypted = await this.getDecryptedString(
         profile["cc-number-encrypted"],
         promptMessage
       );
@@ -1294,4 +628,25 @@ export class FormAutofillCreditCardSection extends FormAutofillSection {
     }
     return true;
   }
+
+  async getDecryptedString(cipherText, reauth) {
+    if (
+      !lazy.FormAutofillUtils.getOSAuthEnabled(
+        lazy.FormAutofill.AUTOFILL_CREDITCARDS_REAUTH_PREF
+      )
+    ) {
+      this.log.debug("Reauth is disabled");
+      reauth = false;
+    }
+    let string;
+    try {
+      string = await lazy.OSKeyStore.decrypt(cipherText, reauth);
+    } catch (e) {
+      if (e.result != Cr.NS_ERROR_ABORT) {
+        throw e;
+      }
+      this.log.warn("User canceled encryption login");
+    }
+    return string;
+  }
 }
diff --git a/firefox-ios/Client/Assets/CC_Script/FormAutofillUtils.sys.mjs b/firefox-ios/Client/Assets/CC_Script/FormAutofillUtils.sys.mjs
index b09f611db189f..c5f1dc86de54a 100644
--- a/firefox-ios/Client/Assets/CC_Script/FormAutofillUtils.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/FormAutofillUtils.sys.mjs
@@ -8,6 +8,7 @@ import { AppConstants } from "resource://gre/modules/AppConstants.sys.mjs";
 
 const lazy = {};
 ChromeUtils.defineESModuleGetters(lazy, {
+  ContentDOMReference: "resource://gre/modules/ContentDOMReference.sys.mjs",
   CreditCard: "resource://gre/modules/CreditCard.sys.mjs",
   FormAutofillNameUtils:
     "resource://gre/modules/shared/FormAutofillNameUtils.sys.mjs",
@@ -44,9 +45,6 @@ const MANAGE_ADDRESSES_L10N_IDS = [
   "autofill-manage-addresses-title",
 ];
 const EDIT_ADDRESS_L10N_IDS = [
-  "autofill-address-given-name",
-  "autofill-address-additional-name",
-  "autofill-address-family-name",
   "autofill-address-name",
   "autofill-address-organization",
   "autofill-address-street",
@@ -92,9 +90,9 @@ const EDIT_CREDITCARD_L10N_IDS = [
   "autofill-card-network",
 ];
 const FIELD_STATES = {
-  NORMAL: "NORMAL",
-  AUTO_FILLED: "AUTO_FILLED",
-  PREVIEW: "PREVIEW",
+  NORMAL: "",
+  AUTO_FILLED: "autofill",
+  PREVIEW: "preview",
 };
 const FORM_SUBMISSION_REASON = {
   FORM_SUBMIT_EVENT: "form-submit-event",
@@ -137,6 +135,10 @@ FormAutofillUtils = {
     "address-line3": "address",
     "address-level1": "address",
     "address-level2": "address",
+    // DE addresses are often split into street name and house number;
+    // combined they form address-line1
+    "address-streetname": "address",
+    "address-housenumber": "address",
     "postal-code": "address",
     country: "address",
     "country-name": "address",
@@ -186,6 +188,9 @@ FormAutofillUtils = {
    * @returns {string}
    */
   getSecurePref(prefName, safeDefaultValue) {
+    if (Services.prefs.getBoolPref("security.nocertdb", false)) {
+      return false;
+    }
     try {
       const encryptedValue = Services.prefs.getStringPref(prefName, "");
       return encryptedValue === ""
@@ -203,6 +208,9 @@ FormAutofillUtils = {
    * @param {string} value -> The value to be set in its encrypted form.
    */
   setSecurePref(prefName, value) {
+    if (Services.prefs.getBoolPref("security.nocertdb", false)) {
+      return;
+    }
     if (value) {
       const encryptedValue = lazy.Crypto.encrypt(value);
       Services.prefs.setStringPref(prefName, encryptedValue);
@@ -376,6 +384,15 @@ FormAutofillUtils = {
     return addressParts.join(this.getAddressSeparator());
   },
 
+  /**
+   * Returns false if an address is written <number> <street>
+   * and true if an address is written <street> <number>. In the future, this
+   * can be expanded to format an address
+   */
+  getAddressReversed(region) {
+    return this.getCountryAddressData(region).address_reversed;
+  },
+
   /**
    * In-place concatenate tel-related components into a single "tel" field and
    * delete unnecessary fields.
@@ -432,13 +449,19 @@ FormAutofillUtils = {
       element.checkVisibility &&
       !FormAutofillUtils.ignoreVisibilityCheck
     ) {
-      return element.checkVisibility({
-        checkOpacity: true,
-        checkVisibilityCSS: true,
-      });
+      if (
+        !element.checkVisibility({
+          checkOpacity: true,
+          checkVisibilityCSS: true,
+        })
+      ) {
+        return false;
+      }
+    } else if (element.hidden || element.style.display == "none") {
+      return false;
     }
 
-    return !element.hidden && element.style.display != "none";
+    return element.getAttribute("aria-hidden") != "true";
   },
 
   /**
@@ -884,7 +907,8 @@ FormAutofillUtils = {
               keys,
               names,
               option.text,
-              collators
+              collators,
+              true
             );
             if (
               identifiedValue === optionValue ||
@@ -1035,21 +1059,26 @@ FormAutofillUtils = {
 
   /**
    * Try to match value with keys and names, but always return the key.
+   * If inexactMatch is true, then a substring match is performed, otherwise
+   * the string must match exactly.
    *
    * @param   {Array<string>} keys
    * @param   {Array<string>} names
    * @param   {string} value
    * @param   {Array} collators
+   * @param   {bool} inexactMatch
    * @returns {string}
    */
-  identifyValue(keys, names, value, collators) {
+  identifyValue(keys, names, value, collators, inexactMatch = false) {
     let resultKey = keys.find(key => this.strCompare(value, key, collators));
     if (resultKey) {
       return resultKey;
     }
 
     let index = names.findIndex(name =>
-      this.strCompare(value, name, collators)
+      inexactMatch
+        ? this.strInclude(value, name, collators)
+        : this.strCompare(value, name, collators)
     );
     if (index !== -1) {
       return keys[index];
@@ -1294,6 +1323,78 @@ FormAutofillUtils = {
     }
     return lazy.l10n.formatValueSync(messageID);
   },
+
+  /**
+   * Retrieves a unique identifier for a given DOM element.
+   * Note that the identifier generated by ContentDOMReference is an object but
+   * this API serializes it to string to make lookup easier.
+   *
+   * @param {Element} element The DOM element from which to generate an identifier.
+   * @returns {string} A unique identifier for the element.
+   */
+  getElementIdentifier(element) {
+    let id;
+    try {
+      id = JSON.stringify(lazy.ContentDOMReference.get(element));
+    } catch {
+      // This is needed because when running in xpc-shell test, we don't have
+      const entry = Object.entries(this._elementByElementId).find(
+        e => e[1] == element
+      );
+      if (entry) {
+        id = entry[0];
+      } else {
+        id = Services.uuid.generateUUID().toString();
+        this._elementByElementId[id] = element;
+      }
+    }
+    return id;
+  },
+
+  /**
+   * Maps element identifiers to their corresponding DOM elements.
+   * Only used when we can't get the identifier via ContentDOMReference,
+   * for example, xpcshell test.
+   */
+  _elementByElementId: {},
+
+  /**
+   * Retrieves the DOM element associated with the specific identifier.
+   * The identifier should be generated with the `getElementIdentifier` API
+   *
+   * @param {string} elementId The identifier of the element.
+   * @returns {Element} The DOM element associated with the given identifier.
+   */
+  getElementByIdentifier(elementId) {
+    let element;
+    try {
+      element = lazy.ContentDOMReference.resolve(JSON.parse(elementId));
+    } catch {
+      element = this._elementByElementId[elementId];
+    }
+    return element;
+  },
+
+  /**
+   * This function is used to determine the frames that can also be autofilled
+   * when users trigger autofill on the focusd frame.
+   *
+   * Currently we also autofill when for frames that
+   * 1. is top-level.
+   * 2. is same origin with the top-level.
+   * 3. is same origin with the frame that triggers autofill.
+   *
+   * @param {BrowsingContext} browsingContext
+   *        frame to be checked whether we can also autofill
+   */
+  isBCSameOriginWithTop(browsingContext) {
+    return (
+      browsingContext.top == browsingContext ||
+      browsingContext.currentWindowGlobal.documentPrincipal.equals(
+        browsingContext.top.currentWindowGlobal.documentPrincipal
+      )
+    );
+  },
 };
 
 ChromeUtils.defineLazyGetter(FormAutofillUtils, "stringBundle", function () {
diff --git a/firefox-ios/Client/Assets/CC_Script/FormLikeFactory.sys.mjs b/firefox-ios/Client/Assets/CC_Script/FormLikeFactory.sys.mjs
index 4950ee0f82075..972455145fa53 100644
--- a/firefox-ios/Client/Assets/CC_Script/FormLikeFactory.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/FormLikeFactory.sys.mjs
@@ -37,42 +37,29 @@ export let FormLikeFactory = {
   },
 
   /**
-   * Create a FormLike object from an <input>/<select> in a document.
-   *
-   * If the field is in a <form>, construct the FormLike from the form.
-   * Otherwise, create a FormLike with a rootElement (wrapper) according to
-   * heuristics. Currently all <input>/<select> not in a <form> are one FormLike
-   * but this shouldn't be relied upon as the heuristics may change to detect
-   * multiple "forms" (e.g. registration and login) on one page with a <form>.
+   * Create a FormLike object from an element that is the root of the document
    *
-   * Note that two FormLikes created from the same field won't return the same FormLike object.
-   * Use the `rootElement` property on the FormLike as a key instead.
+   * Currently all <input> not in a <form> are one LoginForm but this
+   * shouldn't be relied upon as the heuristics may change to detect multiple
+   * "forms" (e.g. registration and login) on one page with a <form>.
    *
-   * @param {HTMLInputElement|HTMLSelectElement} aField - an <input> or <select> field in a document
-   * @return {FormLike}
-   * @throws Error if aField isn't a password or username field in a document
+   * @param {HTMLElement} aDocumentRoot
+   * @param {Object} aOptions
+   * @param {boolean} [aOptions.ignoreForm = false]
+   *        True to always use owner document as the `form`
+   * @return {formLike}
+   * @throws Error if aDocumentRoot is null
    */
-  createFromField(aField) {
-    if (
-      (!HTMLInputElement.isInstance(aField) &&
-        !HTMLSelectElement.isInstance(aField)) ||
-      !aField.ownerDocument
-    ) {
-      throw new Error("createFromField requires a field in a document");
+  createFromDocumentRoot(aDocumentRoot, aOptions = {}) {
+    if (!aDocumentRoot) {
+      throw new Error("createFromDocumentRoot: aDocumentRoot is null");
     }
 
-    let rootElement = this.findRootForField(aField);
-    if (HTMLFormElement.isInstance(rootElement)) {
-      return this.createFromForm(rootElement);
-    }
-
-    let doc = aField.ownerDocument;
-
     let formLike = {
-      action: doc.baseURI,
+      action: aDocumentRoot.baseURI,
       autocomplete: "on",
-      ownerDocument: doc,
-      rootElement,
+      ownerDocument: aDocumentRoot.ownerDocument,
+      rootElement: aDocumentRoot,
     };
 
     // FormLikes can be created when fields are inserted into the DOM. When
@@ -82,10 +69,10 @@ export let FormLikeFactory = {
     // be computed when it's eventually needed (if ever).
     ChromeUtils.defineLazyGetter(formLike, "elements", function () {
       let elements = [];
-      for (let el of this.rootElement.querySelectorAll("input, select")) {
+      for (let el of aDocumentRoot.querySelectorAll("input, select")) {
         // Exclude elements inside the rootElement that are already in a <form> as
         // they will be handled by their own FormLike.
-        if (!el.form) {
+        if (!el.form || aOptions.ignoreForm) {
           elements.push(el);
         }
       }
@@ -97,6 +84,42 @@ export let FormLikeFactory = {
     return formLike;
   },
 
+  /**
+   * Create a FormLike object from an <input>/<select> in a document.
+   *
+   * If the field is in a <form>, construct the FormLike from the form.
+   * Otherwise, create a FormLike with a rootElement (wrapper) according to
+   * heuristics. Currently all <input>/<select> not in a <form> are one FormLike
+   * but this shouldn't be relied upon as the heuristics may change to detect
+   * multiple "forms" (e.g. registration and login) on one page with a <form>.
+   *
+   * Note that two FormLikes created from the same field won't return the same FormLike object.
+   * Use the `rootElement` property on the FormLike as a key instead.
+   *
+   * @param {HTMLInputElement|HTMLSelectElement} aField
+   *        an <input>, <select> or <iframe> field in a document
+   * @param {Object} aOptions
+   * @param {boolean} [aOptions.ignoreForm = false]
+   *        True to always use owner document as the `form`
+   * @return {FormLike}
+   * @throws Error if aField isn't a password or username field in a document
+   */
+  createFromField(aField, aOptions = {}) {
+    if (
+      (!HTMLInputElement.isInstance(aField) &&
+        !HTMLIFrameElement.isInstance(aField) &&
+        !HTMLSelectElement.isInstance(aField)) ||
+      !aField.ownerDocument
+    ) {
+      throw new Error("createFromField requires a field in a document");
+    }
+
+    const rootElement = this.findRootForField(aField, aOptions);
+    return HTMLFormElement.isInstance(rootElement)
+      ? this.createFromForm(rootElement)
+      : this.createFromDocumentRoot(rootElement, aOptions);
+  },
+
   /**
    * Find the closest <form> if any when aField is inside a ShadowRoot.
    *
@@ -125,13 +148,16 @@ export let FormLikeFactory = {
    * an ancestor Element of the username and password fields which doesn't
    * include any of the checkout fields.
    *
-   * @param {HTMLInputElement|HTMLSelectElement} aField - a field in a document
+   * @param {HTMLInputElement|HTMLSelectElement} aField
+   *        a field in a document
    * @return {HTMLElement} - the root element surrounding related fields
    */
-  findRootForField(aField) {
-    let form = aField.form || this.closestFormIgnoringShadowRoots(aField);
-    if (form) {
-      return form;
+  findRootForField(aField, { ignoreForm = false } = {}) {
+    if (!ignoreForm) {
+      const form = aField.form || this.closestFormIgnoringShadowRoots(aField);
+      if (form) {
+        return form;
+      }
     }
 
     return aField.ownerDocument.documentElement;
diff --git a/firefox-ios/Client/Assets/CC_Script/FormStateManager.sys.mjs b/firefox-ios/Client/Assets/CC_Script/FormStateManager.sys.mjs
index 7481a5981c60c..7bef5a36f41a7 100644
--- a/firefox-ios/Client/Assets/CC_Script/FormStateManager.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/FormStateManager.sys.mjs
@@ -4,153 +4,92 @@
 
 const lazy = {};
 ChromeUtils.defineESModuleGetters(lazy, {
-  FormLikeFactory: "resource://gre/modules/FormLikeFactory.sys.mjs",
+  AutofillFormFactory:
+    "resource://gre/modules/shared/AutofillFormFactory.sys.mjs",
   FormAutofillHandler:
     "resource://gre/modules/shared/FormAutofillHandler.sys.mjs",
+  FormAutofillUtils: "resource://gre/modules/shared/FormAutofillUtils.sys.mjs",
 });
 
 export class FormStateManager {
-  constructor(onSubmit, onAutofillCallback) {
+  #formHandlerByElement = new WeakMap();
+  #formHandlerByRootElement = new WeakMap();
+  #formHandlerByRootId = new Map();
+
+  constructor(onFilledModifiedCallback) {
     /**
      * @type {WeakMap} mapping FormLike root HTML elements to FormAutofillHandler objects.
      */
-    this._formsDetails = new WeakMap();
-    /**
-     * @type {object} The object where to store the active items, e.g. element,
-     * handler, section, and field detail.
-     */
-    this._activeItems = {};
 
-    this.onSubmit = onSubmit;
-
-    this.onAutofillCallback = onAutofillCallback;
+    this.onFilledModifiedCallback = onFilledModifiedCallback;
   }
 
-  /**
-   * Get the active input's information from cache which is created after page
-   * identified.
-   *
-   * @returns {object | null}
-   *          Return the active input's information that cloned from content cache
-   *          (or return null if the information is not found in the cache).
-   */
-  get activeFieldDetail() {
-    if (!this._activeItems.fieldDetail) {
-      let formDetails = this.activeFormDetails;
-      if (!formDetails) {
-        return null;
-      }
-      for (let detail of formDetails) {
-        let detailElement = detail.element;
-        if (detailElement && this.activeInput == detailElement) {
-          this._activeItems.fieldDetail = detail;
-          break;
-        }
-      }
-    }
-    return this._activeItems.fieldDetail;
+  getWeakIdentifiedForms() {
+    return ChromeUtils.nondeterministicGetWeakMapKeys(
+      this.#formHandlerByRootElement
+    );
   }
 
   /**
-   * Get the active form's information from cache which is created after page
-   * identified.
-   *
-   * @returns {Array<object> | null}
-   *          Return target form's information from content cache
-   *          (or return null if the information is not found in the cache).
+   * Get the form handler for the specified input element.
    *
+   * @param {HTMLInputElement} element
+   *        Focused input which triggered profile searching
+   * @returns {FormAutofillHandler | null}
+   *        The form handler associated with the specified input element.
    */
-  get activeFormDetails() {
-    let formHandler = this.activeHandler;
-    return formHandler ? formHandler.fieldDetails : null;
-  }
-
-  get activeInput() {
-    return this._activeItems.elementWeakRef?.deref();
-  }
-
-  get activeHandler() {
-    const activeInput = this.activeInput;
-    if (!activeInput) {
+  getFormHandler(element) {
+    if (!element) {
       return null;
     }
 
-    // XXX: We are recomputing the activeHandler every time to avoid keeping a
-    // reference on the active element. This might be called quite frequently
-    // so if _getFormHandler/findRootForField become more costly, we should
-    // look into caching this result (eg by adding a weakmap).
-    let handler = this._getFormHandler(activeInput);
+    let handler = this.#formHandlerByElement.get(element);
     if (handler) {
-      handler.focusedInput = activeInput;
+      return handler;
     }
-    return handler;
-  }
 
-  get activeSection() {
-    let formHandler = this.activeHandler;
-    return formHandler ? formHandler.activeSection : null;
+    const rootElement = lazy.AutofillFormFactory.findRootForField(element);
+    return this.#formHandlerByRootElement.get(rootElement);
   }
 
   /**
-   * Get the form's handler from cache which is created after page identified.
-   *
-   * @param {HTMLInputElement} element Focused input which triggered profile searching
-   * @returns {Array<object> | null}
-   *          Return target form's handler from content cache
-   *          (or return null if the information is not found in the cache).
+   * Get the form handler for the specified root element.
    *
+   * @param {string} rootElementId
+   *        the id of the root element
+   * @returns {FormAutofillHandler | null}
+   *        The form handler associated with the specified input element.
    */
-  _getFormHandler(element) {
-    if (!element) {
-      return null;
-    }
-    let rootElement = lazy.FormLikeFactory.findRootForField(element);
-    return this._formsDetails.get(rootElement);
+  getFormHandlerByRootElementId(rootElementId) {
+    return this.#formHandlerByRootId.get(rootElementId);
   }
 
-  identifyAutofillFields(element) {
-    let formHandler = this._getFormHandler(element);
-    if (!formHandler) {
-      let formLike = lazy.FormLikeFactory.createFromField(element);
-      formHandler = new lazy.FormAutofillHandler(
-        formLike,
-        this.onSubmit,
-        this.onAutofillCallback
+  /**
+   * Get the form handler for the specified input element. If no handler exists
+   * in the cache, this function creates a new one.
+   *
+   * @param {HTMLInputElement} element
+   *        Focused input which triggered profile searching
+   * @returns {FormAutofillHandler}
+   *        The form handler associated with the specified input element.
+   */
+  getOrCreateFormHandler(element) {
+    let handler = this.getFormHandler(element);
+    if (!handler) {
+      handler = new lazy.FormAutofillHandler(
+        lazy.AutofillFormFactory.createFromField(element),
+        this.onFilledModifiedCallback
       );
-    } else if (!formHandler.updateFormIfNeeded(element)) {
-      return formHandler.fieldDetails;
-    }
-    this._formsDetails.set(formHandler.form.rootElement, formHandler);
-    return formHandler.collectFormFields();
-  }
 
-  updateActiveInput(element) {
-    if (!element) {
-      this._activeItems = {};
-      return;
-    }
-    this._activeItems = {
-      elementWeakRef: new WeakRef(element),
-      fieldDetail: null,
-    };
-  }
-
-  getRecords(formElement, handler) {
-    handler = handler || this._formsDetails.get(formElement);
-    const records = handler?.createRecords();
-
-    if (
-      !handler ||
-      !records ||
-      !Object.values(records).some(typeRecords => typeRecords.length)
-    ) {
-      return null;
+      const root = handler.form.rootElement;
+      const rootElementId = lazy.FormAutofillUtils.getElementIdentifier(root);
+      this.#formHandlerByRootId.set(rootElementId, handler);
+      this.#formHandlerByRootElement.set(root, handler);
+      handler.form.elements.forEach(ele =>
+        this.#formHandlerByElement.set(ele, handler)
+      );
     }
-    return records;
-  }
-
-  didDestroy() {
-    this._activeItems = {};
+    return handler;
   }
 }
 
diff --git a/firefox-ios/Client/Assets/CC_Script/Helpers.ios.mjs b/firefox-ios/Client/Assets/CC_Script/Helpers.ios.mjs
index 0b83f84c2ec14..3251265ccbd1d 100644
--- a/firefox-ios/Client/Assets/CC_Script/Helpers.ios.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/Helpers.ios.mjs
@@ -8,11 +8,18 @@ import Overrides from "resource://gre/modules/Overrides.ios.js";
 /* eslint mozilla/use-isInstance: 0 */
 HTMLSelectElement.isInstance = element => element instanceof HTMLSelectElement;
 HTMLInputElement.isInstance = element => element instanceof HTMLInputElement;
+HTMLIFrameElement.isInstance = element => element instanceof HTMLIFrameElement;
 HTMLFormElement.isInstance = element => element instanceof HTMLFormElement;
 ShadowRoot.isInstance = element => element instanceof ShadowRoot;
 
 HTMLElement.prototype.ownerGlobal = window;
 
+// We cannot mock this in WebKit because we lack access to low-level APIs.
+// For completeness, we simply return true when the input type is "password".
+HTMLInputElement.prototype.hasBeenTypePassword = function () {
+  return this.type === "password";
+};
+
 HTMLInputElement.prototype.setUserInput = function (value) {
   this.value = value;
 
@@ -121,7 +128,8 @@ export const XPCOMUtils = withNotImplementedError({
 // eslint-disable-next-line no-shadow
 export const ChromeUtils = withNotImplementedError({
   defineLazyGetter: (obj, prop, getFn) => {
-    obj[prop] = getFn?.call(obj);
+    const callback = prop === "log" ? genericLogger : getFn;
+    obj[prop] = callback?.call(obj);
   },
   defineESModuleGetters(obj, modules) {
     internalModuleResolvers.resolveModules(obj, modules);
@@ -178,34 +186,6 @@ export const Services = withNotImplementedError({
         })
       );
     },
-    recordEvent: (category, method, object, value, extra) => {
-      // For now, we only care about the address form telemetry
-      // TODO(FXCM-935): move address telemetry to Glean so we can remove this
-      // Data format of the sent message is:
-      // {
-      //   type: "event",
-      //   category: "address",
-      //   method: "detected" | "filled" | "filled_modified",
-      //   object: "address_form" | "address_form_ext",
-      //   value: String,
-      //   extra: Any,
-      // }
-      if (category !== "address") {
-        return;
-      }
-
-      // eslint-disable-next-line no-undef
-      webkit.messageHandlers.addressFormTelemetryMessageHandler.postMessage(
-        JSON.stringify({
-          type: "event",
-          category,
-          method,
-          object,
-          value,
-          extra,
-        })
-      );
-    },
   }),
   // TODO(FXCM-936): we should use crypto.randomUUID() instead of Services.uuid.generateUUID() in our codebase
   // Underneath crypto.randomUUID() uses the same implementation as generateUUID()
@@ -221,18 +201,60 @@ window.Localization = function () {
   return { formatValueSync: () => "" };
 };
 
-// For now, we ignore all calls to glean.
-// TODO(FXCM-935): move address telemetry to Glean so we can create a universal mock for glean that
-// dispatches telemetry messages to the iOS.
+// TODO(issam, FXCM-935): In order to create create a universal mock for glean that
+// dispatches telemetry messages to the iOS, we need to modify typedefs in swift. For now, we map the telemetry events
+// to the expected shape. FXCM-935 will tackle cleaning this up.
 window.Glean = {
   formautofillCreditcards: undefinedProxy(),
   formautofill: undefinedProxy(),
+  creditcard: undefinedProxy(),
+  _mapGleanToLegacy: (eventName, { value, ...extra }) => {
+    const eventMapping = {
+      filledModifiedAddressForm: {
+        method: "filled_modified",
+        object: "address_form",
+      },
+      filledAddressForm: { method: "filled", object: "address_form" },
+      detectedAddressForm: { method: "detected", object: "address_form" },
+      filledModifiedAddressFormExt: {
+        method: "filled_modified",
+        object: "address_form_ext",
+      },
+      filledAddressFormExt: { method: "filled", object: "address_form_ext" },
+      detectedAddressFormExt: {
+        method: "detected",
+        object: "address_form_ext",
+      },
+    };
+    // eslint-disable-next-line no-undef
+    webkit.messageHandlers.addressFormTelemetryMessageHandler.postMessage(
+      JSON.stringify({
+        type: "event",
+        category: "address",
+        ...eventMapping[eventName],
+        value,
+        extra,
+      })
+    );
+  },
+  address: new Proxy(
+    {},
+    {
+      get(_target, prop) {
+        return {
+          record: extras => Glean._mapGleanToLegacy(prop, extras),
+        };
+      },
+    }
+  ),
 };
 
-export const windowUtils = withNotImplementedError({
-  removeManuallyManagedState: () => {},
-  addManuallyManagedState: () => {},
-});
-window.windowUtils = windowUtils;
+const genericLogger = () =>
+  withNotImplementedError({
+    info: () => {},
+    error: () => {},
+    warn: () => {},
+    debug: () => {},
+  });
 
 export { IOSAppConstants as AppConstants } from "resource://gre/modules/shared/Constants.ios.mjs";
diff --git a/firefox-ios/Client/Assets/CC_Script/HeuristicsRegExp.sys.mjs b/firefox-ios/Client/Assets/CC_Script/HeuristicsRegExp.sys.mjs
index c4141628f8fe7..2a01b881bd267 100644
--- a/firefox-ios/Client/Assets/CC_Script/HeuristicsRegExp.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/HeuristicsRegExp.sys.mjs
@@ -8,14 +8,18 @@ export const HeuristicsRegExp = {
   RULES: {
     email: undefined,
     tel: undefined,
-    organization: undefined,
     "street-address": undefined,
     "address-line1": undefined,
+    "address-housenumber": undefined,
     "address-line2": undefined,
     "address-line3": undefined,
     "address-level2": undefined,
     "address-level1": undefined,
     "postal-code": undefined,
+    // Note: We place the `organization` field after the `address` fields, to 
+    // ensure that all address-related fields that might contain organization 
+    // info are matched as address fields first.
+    organization: undefined,
     country: undefined,
     // Note: We place the `cc-name` field for Credit Card first, because
     // it is more specific than the `name` field below and we want to check
@@ -46,7 +50,8 @@ export const HeuristicsRegExp = {
       "address-line1": "addrline1|address_1|addl1",
       "address-line2": "addrline2|address_2|addl2",
       "address-line3": "addrline3|address_3|addl3",
-      "address-level1": "land", // de-DE
+      "country": "land", // de-DE
+      "postal-code": "^PLZ(\\b|\\*)", // de-DE
       "additional-name": "apellido.?materno|lastlastname",
       "cc-name":
         "accountholdername" +
@@ -73,7 +78,7 @@ export const HeuristicsRegExp = {
         "|(anno|año)" +      // es-ES
         "|jaar",             // nl-NL
       "cc-type":
-        "type" +
+        "(cc|card).*(type)" +
         "|kartenmarke" +     // de-DE
         "|typ.*karty",       // pl-PL
       "cc-csc":
@@ -193,9 +198,8 @@ export const HeuristicsRegExp = {
         "cc-?name" +
         "|card-?name" +
         "|cardholder-?name" +
-        "|cardholder" +
+        "|cardholder",
         // "|(^name$)" + // Removed to avoid overwriting "name", above.
-        "|(^nom$)",
 
       "cc-number":
         "cc-?number" +
@@ -385,7 +389,7 @@ export const HeuristicsRegExp = {
       "address-line1":
         "^address$|address[_-]?line(one)?|address1|addr1|street" +
         "|(?:shipping|billing)address$" +
-        "|strasse|straße|hausnummer|housenumber" + // de-DE
+        "|strasse|straße" + // de-DE
         "|house.?name" + // en-GB
         "|direccion|dirección" + // es
         "|adresse" + // fr-FR
@@ -463,6 +467,9 @@ export const HeuristicsRegExp = {
         "|((\\b|_|\\*)(eyalet|[şs]ehir|[İii̇]l(imiz)?|kent)(\\b|_|\\*))" + // tr
         "|^시[·・]?도", // ko-KR
 
+      "address-housenumber":
+        "housenumber|hausnummer|haus",
+
       "postal-code":
         "zip|postal|post.*code|pcode" +
         "|pin.?code" + // en-IN
@@ -555,7 +562,7 @@ export const HeuristicsRegExp = {
       // Note: `cc-name` expression has been moved up, above `name`, in
       // order to handle specialization through ordering.
       "cc-number":
-        "(add)?(?:card|cc|acct).?(?:number|#|no|num|field)" +
+        "(add)?(?:card|cc|acct).?(?:number|#|no|num|field(?!s)|pan)" +
         // In order to support webkit we convert all negative lookbehinds to a capture group
         // (?<!not)word -> (?<neg>notword)|word
         // TODO: Bug 1829583
@@ -636,6 +643,7 @@ export const HeuristicsRegExp = {
     {
       "address-line2":
         "address|line" +
+        "|house|building|apartment|floor" +    // de-DE
         "|adresse" +      // fr-FR
         "|indirizzo" +    // it-IT
         "|地址" +         // zh-CN
diff --git a/firefox-ios/Client/Assets/CC_Script/LabelUtils.sys.mjs b/firefox-ios/Client/Assets/CC_Script/LabelUtils.sys.mjs
index 9bfedee1055ab..dfa58ce69333f 100644
--- a/firefox-ios/Client/Assets/CC_Script/LabelUtils.sys.mjs
+++ b/firefox-ios/Client/Assets/CC_Script/LabelUtils.sys.mjs
@@ -78,7 +78,16 @@ export const LabelUtils = {
       if (!id) {
         control = label.control;
         if (!control) {
-          continue;
+          // If the label has no control, yet there is a single control
+          // adjacent to the label, assume that is meant to be the control.
+          let nodes = label.parentNode.querySelectorAll(
+            ":scope > :is(input,select)"
+          );
+          if (nodes.length == 1) {
+            control = nodes[0];
+          } else {
+            continue;
+          }
         }
         id = control.id;
       }
diff --git a/firefox-ios/Client/Assets/CC_Script/Overrides.ios.js b/firefox-ios/Client/Assets/CC_Script/Overrides.ios.js
index ae5998992bf3f..4ba81d9bd6ad8 100644
--- a/firefox-ios/Client/Assets/CC_Script/Overrides.ios.js
+++ b/firefox-ios/Client/Assets/CC_Script/Overrides.ios.js
@@ -11,8 +11,10 @@ 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",
+  "LoginHelper.sys.mjs": "EmptyModule.sys.mjs",
 };
 
 // We need this because not all webpack libraries used in iOS are ES Modules