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

Differential Revision: https://phabricator.services.mozilla.com/D198828
2024-02-19 10:12:28 +00:00 · 2024-02-19 10:12:28 +00:00 · fb929a6abc
--- a/browser/extensions/formautofill/content/customElements.js
+++ b/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,
-      // 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;
+      this._optionButton.textContent = value.manageLabel;
    }
  }

--- a/browser/extensions/formautofill/locales/en-US/formautofill.properties
+++ b/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
--- a/browser/extensions/formautofill/test/browser/browser_autocomplete_footer.js
+++ b/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);
+    }
  );
 });

--- a/browser/extensions/formautofill/test/mochitest/test_autofill_and_ordinal_forms.html
+++ b/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)");
--- a/browser/extensions/formautofill/test/mochitest/test_form_changes.html
+++ b/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
-  ], false);
+  ], true);

  // This is for checking the changes of element removed and added then.
  document.querySelector(`#${formId} input[name=address-level2]`).remove();
--- a/browser/locales/en-US/browser/preferences/formAutofill.ftl
+++ b/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
--- a/python/l10n/fluent_migrations/bug_1864340_autocomplete_footer.py
+++ b/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"),
+            ),
+        ],
+    )
--- a/toolkit/components/formautofill/ProfileAutoCompleteResult.sys.mjs
+++ b/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(
-        this._focusedFieldName
-      ),
+      focusedCategory,
    });

    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;
  }
--- a/toolkit/locales/en-US/toolkit/formautofill/formAutofill.ftl
+++ b/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