commit 962c89e13f9ba9417128957bc24c31f49dc0b91a
parent 5fbcff55e74183afdf81a7e3422f8222fb7ad3e1
Author: Micah Killoran <mtigley@mozilla.com>
Date: Fri, 19 Dec 2025 16:33:09 +0000
Bug 2005040 - Add empty states for payment method and address autofill lists. r=dimi,fluent-reviewers,akulyk,bolsson
Differential Revision: https://phabricator.services.mozilla.com/D276729
Diffstat:
3 files changed, 112 insertions(+), 76 deletions(-)
diff --git a/browser/components/preferences/main.js b/browser/components/preferences/main.js
@@ -1455,6 +1455,10 @@ Preferences.addSetting({
id: "payments-list-header",
});
+Preferences.addSetting({
+ id: "no-payments-stored",
+});
+
Preferences.addSetting(
class extends Preferences.AsyncSetting {
static id = "payments-list";
@@ -1948,6 +1952,10 @@ Preferences.addSetting({
id: "addresses-list-header",
});
+Preferences.addSetting({
+ id: "no-addresses-stored",
+});
+
Preferences.addSetting(
class extends Preferences.AsyncSetting {
static id = "addresses-list";
diff --git a/browser/locales/en-US/browser/preferences/preferences.ftl b/browser/locales/en-US/browser/preferences/preferences.ftl
@@ -1475,6 +1475,10 @@ payments-delete-payment-prompt-title = Delete this payment method?
payments-delete-payment-prompt-confirm-button = Delete
payments-delete-payment-prompt-cancel-button = Cancel
+# This message is displayed when no payment methods such as credit card are stored in Firefox
+payments-no-payments-stored-message =
+ .label = No payment methods added
+
# These values are displayed for each credit card record listed on the Manage Payment methods
# settings page.
# Variables:
@@ -1506,6 +1510,10 @@ autofill-addresses-add-button = Add new address
autofill-addresses-manage-addresses-title =
.heading = Manage addresses and more
+# This message is displayed when no addresses are stored in Firefox
+addresses-no-addresses-stored-message =
+ .label = No addresses added
+
# These values are displayed for each address record listed on the "Manage addresses and more" subpage.
# Variables:
# $name (string) - The name associated with the address
diff --git a/toolkit/components/formautofill/FormAutofillPreferences.sys.mjs b/toolkit/components/formautofill/FormAutofillPreferences.sys.mjs
@@ -241,27 +241,113 @@ export class FormAutofillPreferences {
async makePaymentsListItems() {
const records = await lazy.formAutofillStorage.creditCards.getAll();
+
+ let items = [];
+
if (!records.length) {
- return [];
+ items = [
+ {
+ id: "no-payments-stored",
+ l10nId: "payments-no-payments-stored-message",
+ control: "moz-box-item",
+ l10nArgs: {},
+ },
+ ];
+ } else {
+ items = records
+ .sort(record => record.timeCreated)
+ .map(record => {
+ const config = {
+ id: "payment-item",
+ control: "moz-box-item",
+ l10nId: "payment-moz-box-item",
+ iconSrc:
+ "chrome://formautofill/content/icon-credit-card-generic.svg",
+ l10nArgs: {
+ cardNumber: record["cc-number"].replace(/^(\*+)(\d+)$/, "$1 $2"),
+ expDate: record["cc-exp"].replace(/^(\d{4})-\d{2}$/, "XX/$1"),
+ },
+ options: [
+ {
+ control: "moz-button",
+ iconSrc: "chrome://global/skin/icons/delete.svg",
+ type: "icon",
+ controlAttrs: {
+ slot: "actions",
+ action: "remove",
+ guid: record.guid,
+ },
+ },
+ {
+ control: "moz-button",
+ iconSrc: "chrome://global/skin/icons/edit.svg",
+ type: "icon",
+ controlAttrs: {
+ slot: "actions",
+ action: "edit",
+ guid: record.guid,
+ },
+ },
+ ],
+ };
+
+ return config;
+ });
}
- const items = records
- .sort(record => record.timeCreated)
- .map(record => {
+ return [
+ {
+ id: "payments-list-header",
+ control: "moz-box-item",
+ l10nId: "payments-list-header",
+ slot: "header",
+ },
+ ...items,
+ ];
+ }
+
+ async makeAddressesListItems() {
+ const addresses = await lazy.formAutofillStorage.addresses.getAll();
+ const records = addresses.slice().reverse();
+
+ let items = [];
+
+ if (!records.length) {
+ items = [
+ {
+ id: "no-addresses-stored",
+ l10nId: "addresses-no-addresses-stored-message",
+ l10nArgs: {},
+ control: "moz-box-item",
+ },
+ ];
+ } else {
+ items = records.map(record => {
+ const addressFormatted = [
+ record["street-address"],
+ record["address-level2"],
+ record["address-level1"],
+ record.country,
+ record["postal-code"],
+ ]
+ .filter(Boolean)
+ .join(", ");
+
const config = {
- id: "payment-item",
+ id: "address-item",
control: "moz-box-item",
- l10nId: "payment-moz-box-item",
- iconSrc: "chrome://formautofill/content/icon-credit-card-generic.svg",
+ l10nId: "address-moz-box-item",
+ iconSrc: "chrome://browser/skin/notification-icons/geo.svg",
l10nArgs: {
- cardNumber: record["cc-number"].replace(/^(\*+)(\d+)$/, "$1 $2"),
- expDate: record["cc-exp"].replace(/^(\d{4})-\d{2}$/, "XX/$1"),
+ name: `${record.name}`,
+ address: addressFormatted,
},
options: [
{
control: "moz-button",
iconSrc: "chrome://global/skin/icons/delete.svg",
type: "icon",
+ l10nId: "addreses-delete-address-button-label",
controlAttrs: {
slot: "actions",
action: "remove",
@@ -272,6 +358,7 @@ export class FormAutofillPreferences {
control: "moz-button",
iconSrc: "chrome://global/skin/icons/edit.svg",
type: "icon",
+ l10nId: "addreses-edit-address-button-label",
controlAttrs: {
slot: "actions",
action: "edit",
@@ -283,75 +370,8 @@ export class FormAutofillPreferences {
return config;
});
-
- return [
- {
- id: "payments-list-header",
- control: "moz-box-item",
- l10nId: "payments-list-header",
- slot: "header",
- },
- ...items,
- ];
- }
-
- async makeAddressesListItems() {
- const addresses = await lazy.formAutofillStorage.addresses.getAll();
- const records = addresses.slice().reverse();
-
- if (!records.length) {
- return [];
}
- const items = records.map(record => {
- const addressFormatted = [
- record["street-address"],
- record["address-level2"],
- record["address-level1"],
- record.country,
- record["postal-code"],
- ]
- .filter(Boolean)
- .join(", ");
-
- const config = {
- id: "address-item",
- control: "moz-box-item",
- l10nId: "address-moz-box-item",
- iconSrc: "chrome://browser/skin/notification-icons/geo.svg",
- l10nArgs: {
- name: `${record.name}`,
- address: addressFormatted,
- },
- options: [
- {
- control: "moz-button",
- iconSrc: "chrome://global/skin/icons/delete.svg",
- type: "icon",
- l10nId: "addreses-delete-address-button-label",
- controlAttrs: {
- slot: "actions",
- action: "remove",
- guid: record.guid,
- },
- },
- {
- control: "moz-button",
- iconSrc: "chrome://global/skin/icons/edit.svg",
- type: "icon",
- l10nId: "addreses-edit-address-button-label",
- controlAttrs: {
- slot: "actions",
- action: "edit",
- guid: record.guid,
- },
- },
- ],
- };
-
- return config;
- });
-
return [
{
id: "addresses-list-header",
