Bug 1864340 - display correct wording in ac footer - r=sgalich,dimi,fluent-reviewers,bolsson

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

browser/extensions/formautofill/content/customElements.js

@@ -287,16 +287,7 @@
         this._itemBox.setAttribute("no-warning", "true");
       }
 
-      // After focusing a field that was previously filled with cc information,
+      this._optionButton.textContent = value.manageLabel;
-      // the "ac-image" is falsely set for the listitem-footer. For now it helps us
-      // to distinguish between address and cc footer. In the future this false attribute
-      // setting should be fixed and the "ac-image" check replaced by a different method.
-      const buttonTextBundleKey = !this.getAttribute("ac-image")
-        ? "autocompleteManageAddresses"
-        : "autocompleteManageCreditCards";
-      const buttonText =
-        this._stringBundle.GetStringFromName(buttonTextBundleKey);
-      this._optionButton.textContent = buttonText;
     }
   }
 

browser/extensions/formautofill/locales/en-US/formautofill.properties

@@ -2,12 +2,6 @@
 # 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/.
 
-# LOCALIZATION NOTE (autocompleteManageCreditCards):
-# Used as a label for the button, displayed at the bottom of the dropdown suggestion, to open Form Autofill browser preferences.
-autocompleteManageCreditCards = Manage credit cards
-# LOCALIZATION NOTE (autocompleteManageAddresses):
-# Used as a label for the button, displayed at the bottom of the dropdown suggestion, to open Form Autofill browser preferences.
-autocompleteManageAddresses = Manage addresses
 # LOCALIZATION NOTE (category.address, category.name, category.organization2, category.tel, category.email):
 # Used in autofill drop down suggestion to indicate what other categories Form Autofill will attempt to fill.
 category.address = address

browser/extensions/formautofill/test/browser/browser_autocomplete_footer.js

@@ -2,12 +2,57 @@
 
 const URL = BASE_URL + "autocomplete_basic.html";
 
+const l10n = new Localization(["toolkit/formautofill/formAutofill.ftl"], true);
+
 add_setup(async function setup_storage() {
   await setStorage(
     TEST_ADDRESS_2,
     TEST_ADDRESS_3,
     TEST_ADDRESS_4,
-    TEST_ADDRESS_5
+    TEST_ADDRESS_5,
+    TEST_CREDIT_CARD_1
+  );
+});
+
+add_task(async function test_footer_has_correct_button_text_on_address() {
+  await BrowserTestUtils.withNewTab(
+    { gBrowser, url: URL },
+    async function (browser) {
+      const {
+        autoCompletePopup: { richlistbox: itemsBox },
+      } = browser;
+
+      await openPopupOn(browser, "#organization");
+      const footer = itemsBox.querySelector(
+        ".autofill-footer-row.autofill-button"
+      );
+      Assert.equal(
+        footer.innerText,
+        l10n.formatValueSync("autofill-manage-addresses-label")
+      );
+      await closePopup(browser);
+    }
+  );
+});
+
+add_task(async function test_footer_has_correct_button_text_on_credit_card() {
+  await BrowserTestUtils.withNewTab(
+    { gBrowser, url: CREDITCARD_FORM_URL },
+    async function (browser) {
+      const {
+        autoCompletePopup: { richlistbox: itemsBox },
+      } = browser;
+
+      await openPopupOn(browser, "#cc-number");
+      const footer = itemsBox.querySelector(
+        ".autofill-footer-row.autofill-button"
+      );
+      Assert.equal(
+        footer.innerText,
+        l10n.formatValueSync("autofill-manage-payment-methods-label")
+      );
+      await closePopup(browser);
+    }
   );
 });
 

browser/extensions/formautofill/test/mochitest/test_autofill_and_ordinal_forms.html

@@ -47,9 +47,8 @@ add_task(async function check_switch_autofill_form_popup() {
   checkMenuEntries(
     [
       `{"primary":"+13453453456","secondary":"123 Sesame Street."}`,
-      `{"primary":"","secondary":"","categories":["organization","address","tel","name"],"focusedCategory":"tel"}`,
     ],
-    false
+    true
   );
 
   await testMenuEntry(0, "!(el instanceof MozElements.MozAutocompleteRichlistitem)");
@@ -75,9 +74,8 @@ add_task(async function check_switch_autofill_form_popup_back() {
   checkMenuEntries(
     [
       `{"primary":"+13453453456","secondary":"123 Sesame Street."}`,
-      `{"primary":"","secondary":"","categories":["organization","address","tel","name"],"focusedCategory":"tel"}`,
     ],
-    false
+    true
   );
 
   await testMenuEntry(0, "!(el instanceof MozElements.MozAutocompleteRichlistitem)");

browser/extensions/formautofill/test/mochitest/test_form_changes.html

@@ -77,8 +77,7 @@ async function checkFormChangeHappened(formId) {
   // Click on an autofilled field would show an autocomplete popup with "clear form" entry
   checkMenuEntries([
     JSON.stringify({primary: "", secondary: ""}), // Clear Autofill Form
-    JSON.stringify({primary: "", secondary: ""})  // FormAutofill Preferemce
+  ], true);
-  ], false);
 
   // This is for checking the changes of element removed and added then.
   document.querySelector(`#${formId} input[name=address-level2]`).remove();

browser/locales/en-US/browser/preferences/formAutofill.ftl

@@ -132,15 +132,3 @@ autofill-card-expires-month = Exp. Month
 autofill-card-expires-year = Exp. Year
 autofill-card-billing-address = Billing Address
 autofill-card-network = Card Type
-
-## These are brand names and should only be translated when a locale-specific name for that brand is in common use
-
-autofill-card-network-amex = American Express
-autofill-card-network-cartebancaire = Carte Bancaire
-autofill-card-network-diners = Diners Club
-autofill-card-network-discover = Discover
-autofill-card-network-jcb = JCB
-autofill-card-network-mastercard = MasterCard
-autofill-card-network-mir = MIR
-autofill-card-network-unionpay = Union Pay
-autofill-card-network-visa = Visa

python/l10n/fluent_migrations/bug_1864340_autocomplete_footer.py

@@ -0,0 +1,59 @@
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+import fluent.syntax.ast as FTL
+from fluent.migrate.transforms import COPY, COPY_PATTERN
+
+
+def migrate(ctx):
+    """Bug 1864340 - Convert autocomplete footer strings to FTL, part {index}."""
+
+    propertiesSource = "browser/extensions/formautofill/formautofill.properties"
+    fluentSource = "browser/browser/preferences/formAutofill.ftl"
+    target = "toolkit/toolkit/formautofill/formAutofill.ftl"
+    ctx.add_transforms(
+        target,
+        target,
+        [
+            FTL.Message(
+                id=FTL.Identifier("autofill-manage-addresses-label"),
+                value=COPY(propertiesSource, "autocompleteManageAddresses"),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("autofill-card-network-amex"),
+                value=COPY_PATTERN(fluentSource, "autofill-card-network-amex"),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("autofill-card-network-cartebancaire"),
+                value=COPY_PATTERN(fluentSource, "autofill-card-network-cartebancaire"),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("autofill-card-network-diners"),
+                value=COPY_PATTERN(fluentSource, "autofill-card-network-diners"),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("autofill-card-network-discover"),
+                value=COPY_PATTERN(fluentSource, "autofill-card-network-discover"),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("autofill-card-network-jcb"),
+                value=COPY_PATTERN(fluentSource, "autofill-card-network-jcb"),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("autofill-card-network-mastercard"),
+                value=COPY_PATTERN(fluentSource, "autofill-card-network-mastercard"),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("autofill-card-network-mir"),
+                value=COPY_PATTERN(fluentSource, "autofill-card-network-mir"),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("autofill-card-network-unionpay"),
+                value=COPY_PATTERN(fluentSource, "autofill-card-network-unionpay"),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("autofill-card-network-visa"),
+                value=COPY_PATTERN(fluentSource, "autofill-card-network-visa"),
+            ),
+        ],
+    )

toolkit/components/formautofill/ProfileAutoCompleteResult.sys.mjs

@@ -12,7 +12,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
 ChromeUtils.defineLazyGetter(
   lazy,
   "l10n",
-  () => new Localization(["browser/preferences/formAutofill.ftl"], true)
+  () => new Localization(["toolkit/formautofill/formAutofill.ftl"], true)
 );
 
 class ProfileAutoCompleteResult {
@@ -277,10 +277,19 @@ export class AddressResult extends ProfileAutoCompleteResult {
   }
 
   _generateLabels(focusedFieldName, allFieldNames, profiles) {
+    const manageLabel = lazy.l10n.formatValueSync(
+      "autofill-manage-addresses-label"
+    );
+
     if (this._isInputAutofilled) {
       return [
         { primary: "", secondary: "" }, // Clear button
-        { primary: "", secondary: "" }, // Footer
+        // Footer
+        {
+          primary: "",
+          secondary: "",
+          manageLabel,
+        },
       ];
     }
 
@@ -306,6 +315,10 @@ export class AddressResult extends ProfileAutoCompleteResult {
           ),
         };
       });
+
+    const focusedCategory =
+      lazy.FormAutofillUtils.getCategoryFromFieldName(focusedFieldName);
+
     // Add an empty result entry for footer. Its content will come from
     // the footer binding, so don't assign any value to it.
     // The additional properties: categories and focusedCategory are required of
@@ -313,12 +326,11 @@ export class AddressResult extends ProfileAutoCompleteResult {
     labels.push({
       primary: "",
       secondary: "",
+      manageLabel,
       categories: lazy.FormAutofillUtils.getCategoriesFromFieldNames(
         this._allFieldNames
       ),
-      focusedCategory: lazy.FormAutofillUtils.getCategoryFromFieldName(
+      focusedCategory,
-        this._focusedFieldName
-      ),
     });
 
     return labels;
@@ -385,10 +397,19 @@ export class CreditCardResult extends ProfileAutoCompleteResult {
       ];
     }
 
+    const manageLabel = lazy.l10n.formatValueSync(
+      "autofill-manage-payment-methods-label"
+    );
+
     if (this._isInputAutofilled) {
       return [
         { primary: "", secondary: "" }, // Clear button
-        { primary: "", secondary: "" }, // Footer
+        // Footer
+        {
+          primary: "",
+          secondary: "",
+          manageLabel,
+        },
       ];
     }
 
@@ -431,8 +452,17 @@ export class CreditCardResult extends ProfileAutoCompleteResult {
           image,
         };
       });
+
+    const focusedCategory =
+      lazy.FormAutofillUtils.getCategoryFromFieldName(focusedFieldName);
+
     // Add an empty result entry for footer.
-    labels.push({ primary: "", secondary: "" });
+    labels.push({
+      primary: "",
+      secondary: "",
+      manageLabel,
+      focusedCategory,
+    });
 
     return labels;
   }

toolkit/locales/en-US/toolkit/formautofill/formAutofill.ftl

@@ -52,3 +52,21 @@ credit-card-capture-save-new-button =
 credit-card-capture-update-button =
     .label = Update existing card
     .accessKey = U
+
+# Used as a label for the button, displayed at the bottom of the dropdown suggestion, to open Form Autofill browser preferences.
+autofill-manage-addresses-label = Manage addresses
+
+# Used as a label for the button, displayed at the bottom of the dropdown suggestion, to open Form Autofill browser preferences.
+autofill-manage-payment-methods-label = Manage payment methods
+
+## These are brand names and should only be translated when a locale-specific name for that brand is in common use
+
+autofill-card-network-amex = American Express
+autofill-card-network-cartebancaire = Carte Bancaire
+autofill-card-network-diners = Diners Club
+autofill-card-network-discover = Discover
+autofill-card-network-jcb = JCB
+autofill-card-network-mastercard = MasterCard
+autofill-card-network-mir = MIR
+autofill-card-network-unionpay = Union Pay
+autofill-card-network-visa = Visa