Bugzilla

One of the issues is not being able to accurately determine the root form element. I'll post some cut down markup to demonstrate the issue:

```html
<form class="class-entry-form">
  <iframe id="spreedly-number-frame">
    <form id="number-form">
      <input id="card_number" autocomplete="off">
    </form> <!-- number-form -->
  </iframe> <!-- spreedly-number-frame -->
  <fieldset class="date expiry-date">
    <select id="Ecom_Payment_Card_ExpDate_Month"></select>
    <select id="Ecom_Payment_Card_ExpDate_Year"></select>
  </fieldset>
  <div class="name-on-card">
    <div class="first-name">
      <input id="Ecom_BillTo_Postal_Name_First">
    </div>
    <div class="last-name">
      <input id="Ecom_BillTo_Postal_Name_Last">
    </div>
  </div> <!-- name-on-card -->
</form> <!-- class-entry-form -->
```

Since the credit card number is associated with its own form ("number-form"), our logic currently will grab the "number-form" as the root element and create a form handler based off that one element. [Since there are no other fields associated with "number-form", we fail to identify this as a valid credit card section](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHandler.jsm#1009-1013) since `hasCCNumber` is true while `ccNumberReason` does not exist, so false, and we don't have an expiry date or cc name associated with this one member form...thus preventing the popup from appearing.

Additionally, since "number-form" is its own form...we don't take this form into consideration with the rest of the fields in "class-entry-form". I.e. the first name field's form attribute starts at the expiry date, _not_ the card number, which causes issues with the rest of the logic. [Since we don't have a cc-number associated with this form, we will end up not counting the rest of this form as a valid section](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHandler.jsm#1009-1012). [We end up only creating a credit card section that includes the expiry month and year, but since they're select elements wrapped in a fieldset there's no way to make the autocomplete popup appear since fieldset fields are ineligible for autofill.](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillUtils.jsm#471-473) The previous paragraph assumes we correctly identify these fields as credit card fields, but we identify them as address fields instead!

As for why the popup doesn't appear as expected, at least for the rest of the elements, this appears to be because of the ID used for some of the input elements. Since the first and last name inputs have an id of "Ecom_BillTo_Postal_Name_", [we attempt to get the autocomplete info via "getInfo"](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHeuristics.jsm#1016-1067) ([which "getInfo" called from "pushDetail"](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHeuristics.jsm#221) and ["pushDetail" is called by "_parsePhoneFields"](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHeuristics.jsm#123)) which calls `_findMatchedFieldName`. ["_findMatchedFieldName" uses some heuristic regexes to determine what kind of field if the field doesn't already have some autocomplete attributes.](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHeuristics.jsm#1105-1115) Unfortunately, we end up turning these name inputs into postal-code inputs because of the ID string on them. [We appear to call our list of regexes in the same order, where the postal-code check happens before the name, family-name, given-name, etc checks.](https://searchfox.org/mozilla-central/rev/a166f59fba89fc70ebfab287f4edb8e05ed4f6da/toolkit/components/formautofill/content/heuristicsRegexp.js#427-467) In other words, we check fields to see if they match addresses before we check to see if they match credit cards.

I'll have to give this some more thought before I can come up with a solution that solves all this. I'll end up breaking this problem up into smaller solutions, since we have a few sub-problems that can be parsed out. 

I wonder if this works as expected on Chrome and Safari, as this is a complicated heuristics case.

One of the issues is not being able to accurately determine the root form element. I'll post some cut down markup to demonstrate the issue:

```html
<form class="class-entry-form">
  <iframe id="spreedly-number-frame">
    <form id="number-form">
      <input id="card_number" autocomplete="off">
    </form> <!-- number-form -->
  </iframe> <!-- spreedly-number-frame -->
  <fieldset class="date expiry-date">
    <select id="Ecom_Payment_Card_ExpDate_Month"></select>
    <select id="Ecom_Payment_Card_ExpDate_Year"></select>
  </fieldset>
  <div class="name-on-card">
    <div class="first-name">
      <input id="Ecom_BillTo_Postal_Name_First">
    </div>
    <div class="last-name">
      <input id="Ecom_BillTo_Postal_Name_Last">
    </div>
  </div> <!-- name-on-card -->
</form> <!-- class-entry-form -->
```

Since the credit card number is associated with its own form ("number-form"), our logic currently will grab the "number-form" as the root element and create a form handler based off that one element. [Since there are no other fields associated with "number-form", we fail to identify this as a valid credit card section](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHandler.jsm#1009-1013) since `hasCCNumber` is true while `ccNumberReason` does not exist, so false, and we don't have an expiry date or cc name associated with this one member form...thus preventing the popup from appearing.

Additionally, since "number-form" is its own form...we don't take this form into consideration with the rest of the fields in "class-entry-form". I.e. the first name field's form attribute starts at the expiry date, _not_ the card number, which causes issues with the rest of the logic. [Since we don't have a cc-number associated with this form, we will end up not counting the rest of this form as a valid section](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHandler.jsm#1009-1012). [We end up only creating a credit card section that includes the expiry month and year, but since they're select elements wrapped in a fieldset there's no way to make the autocomplete popup appear since fieldset fields are ineligible for autofill.](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillUtils.jsm#471-473) The previous paragraph assumes we correctly identify these fields as credit card fields, but we identify them as address fields instead!

As for why the popup doesn't appear as expected, at least for the rest of the elements, this appears to be because of the ID used for some of the input elements. Since the first and last name inputs have an id of "Ecom_BillTo_Postal_Name_", [we attempt to get the autocomplete info via "getInfo"](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHeuristics.jsm#1016-1067) ([which "getInfo" is called from "pushDetail"](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHeuristics.jsm#221) and ["pushDetail" is called by "_parsePhoneFields" eventually.](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHeuristics.jsm#123)) which calls `_findMatchedFieldName`. ["_findMatchedFieldName" uses some heuristic regexes to determine what kind of field if the field doesn't already have some autocomplete attributes.](https://searchfox.org/mozilla-central/rev/08c493902519265d570250c8e7ce575c8cd6f5b5/toolkit/components/formautofill/FormAutofillHeuristics.jsm#1105-1115) Unfortunately, we end up turning these name inputs into postal-code inputs because of the ID string on them. [We appear to call our list of regexes in the same order, where the postal-code check happens before the name, family-name, given-name, etc checks.](https://searchfox.org/mozilla-central/rev/a166f59fba89fc70ebfab287f4edb8e05ed4f6da/toolkit/components/formautofill/content/heuristicsRegexp.js#427-467) In other words, we check fields to see if they match addresses before we check to see if they match credit cards.

I'll have to give this some more thought before I can come up with a solution that solves all this. I'll end up breaking this problem up into smaller solutions, since we have a few sub-problems that can be parsed out. 

I wonder if this works as expected on Chrome and Safari, as this is a complicated heuristics case.