Bug 1400760 - [Form Autofill] Don't popup credit card dropdown if only cc-number field is identified and without @autocomplete. r=seanlee

MozReview-Commit-ID: JGoRLx2WEBG

--HG--
extra : rebase_source : 053ee36a3c16b2fcba250c7cabb0f749f626ccb9

browser/extensions/formautofill/FormAutofillHandler.jsm

@@ -154,10 +154,11 @@ FormAutofillHandler.prototype = {
       this.address.fieldDetails = [];
     }
 
-    if (!this.creditCard.fieldDetails.some(i => i.fieldName == "cc-number")) {
-      log.debug("Ignoring credit card related fields since it's without credit card number field");
+    if (!this._isValidCreditCardForm(this.creditCard.fieldDetails)) {
+      log.debug("Invalid credit card form");
       this.creditCard.fieldDetails = [];
     }
+
     let validDetails = Array.of(...(this.address.fieldDetails),
                                 ...(this.creditCard.fieldDetails));
     for (let detail of validDetails) {
@@ -171,6 +172,28 @@ FormAutofillHandler.prototype = {
     return validDetails;
   },
 
+  _isValidCreditCardForm(fieldDetails) {
+    let ccNumberReason = "";
+    let hasCCNumber = false;
+    let hasExpiryDate = false;
+
+    for (let detail of fieldDetails) {
+      switch (detail.fieldName) {
+        case "cc-number":
+          hasCCNumber = true;
+          ccNumberReason = detail._reason;
+          break;
+        case "cc-exp":
+        case "cc-exp-month":
+        case "cc-exp-year":
+          hasExpiryDate = true;
+          break;
+      }
+    }
+
+    return hasCCNumber && (ccNumberReason == "autocomplete" || hasExpiryDate);
+  },
+
   getFieldDetailByName(fieldName) {
     return this.fieldDetails.find(detail => detail.fieldName == fieldName);
   },

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

@@ -159,10 +159,18 @@ const TESTCASES = [
     ],
   },
   {
-    description: "It's an invalid address and credit form.",
+    description: "An invalid address form due to less than 3 fields.",
     document: `<form>
                <input id="given-name" autocomplete="shipping given-name">
                <input autocomplete="shipping address-level2">
+               </form>`,
+    addressFieldDetails: [],
+    creditCardFieldDetails: [],
+    validFieldDetails: [],
+  },
+  {
+    description: "An invalid credit card form due to omitted cc-number.",
+    document: `<form>
                <input id="cc-name" autocomplete="cc-name">
                <input id="cc-exp-month" autocomplete="cc-exp-month">
                <input id="cc-exp-year" autocomplete="cc-exp-year">
@@ -171,6 +179,73 @@ const TESTCASES = [
     creditCardFieldDetails: [],
     validFieldDetails: [],
   },
+  {
+    description: "An invalid credit card form due to non-autocomplete-attr cc-number and omitted cc-exp-*.",
+    document: `<form>
+               <input id="cc-name" autocomplete="cc-name">
+               <input id="cc-number" name="card-number">
+               </form>`,
+    addressFieldDetails: [],
+    creditCardFieldDetails: [],
+    validFieldDetails: [],
+  },
+  {
+    description: "A valid credit card form with autocomplete-attr cc-number only.",
+    document: `<form>
+               <input id="cc-number" autocomplete="cc-number">
+               </form>`,
+    addressFieldDetails: [],
+    creditCardFieldDetails: [
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-number"},
+    ],
+    validFieldDetails: [
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-number"},
+    ],
+  },
+  {
+    description: "A valid credit card form with non-autocomplete-attr cc-number and cc-exp.",
+    document: `<form>
+               <input id="cc-number" name="card-number">
+               <input id="cc-exp" autocomplete="cc-exp">
+               </form>`,
+    addressFieldDetails: [],
+    creditCardFieldDetails: [
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-number"},
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-exp"},
+    ],
+    validFieldDetails: [
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-number"},
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-exp"},
+    ],
+    ids: [
+      "cc-number",
+      "cc-exp",
+    ],
+  },
+  {
+    description: "A valid credit card form with non-autocomplete-attr cc-number and cc-exp-month/cc-exp-year.",
+    document: `<form>
+               <input id="cc-number" name="card-number">
+               <input id="cc-exp-month" autocomplete="cc-exp-month">
+               <input id="cc-exp-year" autocomplete="cc-exp-year">
+               </form>`,
+    addressFieldDetails: [],
+    creditCardFieldDetails: [
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-number"},
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-exp-month"},
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-exp-year"},
+    ],
+    validFieldDetails: [
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-number"},
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-exp-month"},
+      {"section": "", "addressType": "", "contactType": "", "fieldName": "cc-exp-year"},
+    ],
+    ids: [
+      "cc-number",
+      "cc-exp-month",
+      "cc-exp-year",
+    ],
+  },
   {
     description: "Three sets of adjacent phone number fields",
     document: `<form>