Bug 1395028 - Part 1: Add credit card sync checkbox in its doorhanger. r=lchang, markh draft
authorsteveck-chung <schung@mozilla.com>
Fri, 08 Sep 2017 19:20:36 +0800
changeset 686768 05e0e4b89856dd3ca864e1f4c08442ce1d583951
parent 686540 64bab5cbb9b63808d04babfbcfba3175fd99f69d
child 686769 b53ccaaec82cec1f5bcbda73a2526c1974545be4
push id86271
push userbmo:schung@mozilla.com
push dateThu, 26 Oct 2017 09:36:11 +0000
reviewerslchang, markh
bugs1395028
milestone58.0a1
Bug 1395028 - Part 1: Add credit card sync checkbox in its doorhanger. r=lchang, markh MozReview-Commit-ID: 7OmFi2SWaKS
browser/extensions/formautofill/FormAutofillDoorhanger.jsm
browser/extensions/formautofill/locales/en-US/formautofill.properties
--- a/browser/extensions/formautofill/FormAutofillDoorhanger.jsm
+++ b/browser/extensions/formautofill/FormAutofillDoorhanger.jsm
@@ -118,16 +118,36 @@ const CONTENT = {
       label: GetStringFromName("neverSaveCreditCardLabel"),
       accessKey: "N",
       callbackState: "disable",
     }],
     options: {
       persistWhileVisible: true,
       popupIconURL: "chrome://formautofill/content/icon-credit-card.svg",
       hideClose: true,
+      checkbox: {
+        get checked() {
+          return Services.prefs.getBoolPref("services.sync.engine.creditcards");
+        },
+        get label() {
+          // Only set the label when sync account is set and credit card sync is disabled,
+          // otherwise return null label to hide checkbox.
+          return Services.prefs.prefHasUserValue("services.sync.username") &&
+            !Services.prefs.getBoolPref("services.sync.engine.creditcards") ?
+            GetStringFromName("creditCardsSyncCheckbox") : null;
+        },
+        callback(event) {
+          let {secondaryButton, menubutton} = event.target.parentNode.parentNode.parentNode;
+          let checked = event.target.checked;
+          Services.prefs.setBoolPref("services.sync.engine.creditcards", checked);
+          secondaryButton.disabled = checked;
+          menubutton.disabled = checked;
+          log.debug("Set creditCard sync to", checked);
+        },
+      },
     },
   },
 };
 
 let FormAutofillDoorhanger = {
   /**
    * Generate the main action and secondary actions from content parameters and
    * promise resolve.
@@ -161,16 +181,21 @@ let FormAutofillDoorhanger = {
         label: params.label,
         accessKey: params.accessKey,
         callback: cb,
       });
     }
 
     return [mainAction, secondaryActions];
   },
+  _getNotificationElm(browser, id) {
+    let notificationId = id + "-notification";
+    let chromeDoc = browser.ownerDocument;
+    return chromeDoc.getElementById(notificationId);
+  },
   /**
    * Append the link label element to the popupnotificationcontent.
    * @param  {XULElement} browser
    *         Target browser element for showing doorhanger.
    * @param  {string} id
    *         The ID of the doorhanger.
    * @param  {string} message
    *         The localized string for link title.
@@ -220,36 +245,30 @@ let FormAutofillDoorhanger = {
       anchorElement.setAttribute("tooltiptext", tooltiptext);
       notificationPopupBox.appendChild(anchorElement);
     }
   },
   _addCheckboxListener(browser, {notificationId, options}) {
     if (!options.checkbox) {
       return;
     }
-    let id = notificationId + "-notification";
-    let chromeDoc = browser.ownerDocument;
-    let notification = chromeDoc.getElementById(id);
-    let cb = notification.checkbox;
+    let {checkbox} = this._getNotificationElm(browser, notificationId);
 
-    if (cb) {
-      cb.addEventListener("command", options.checkbox.callback);
+    if (checkbox && !checkbox.hidden) {
+      checkbox.addEventListener("command", options.checkbox.callback);
     }
   },
   _removeCheckboxListener(browser, {notificationId, options}) {
     if (!options.checkbox) {
       return;
     }
-    let id = notificationId + "-notification";
-    let chromeDoc = browser.ownerDocument;
-    let notification = chromeDoc.getElementById(id);
-    let cb = notification.checkbox;
+    let {checkbox} = this._getNotificationElm(browser, notificationId);
 
-    if (cb) {
-      cb.removeEventListener("command", options.checkbox.callback);
+    if (checkbox && !checkbox.hidden) {
+      checkbox.removeEventListener("command", options.checkbox.callback);
     }
   },
   /**
    * Show different types of doorhanger by leveraging PopupNotifications.
    * @param  {XULElement} browser
    *         Target browser element for showing doorhanger.
    * @param  {string} type
    *         The type of the doorhanger. There will have first time use/update/credit card.
--- a/browser/extensions/formautofill/locales/en-US/formautofill.properties
+++ b/browser/extensions/formautofill/locales/en-US/formautofill.properties
@@ -15,16 +15,19 @@ autofillSecurityOptionsLink = Form Autof
 autofillSecurityOptionsLinkOSX = Form Autofill & Security Preferences
 # LOCALIZATION NOTE (changeAutofillOptions, changeAutofillOptionsOSX): These strings are used on the doorhanger
 # that notifies users that addresses are saved. The button leads users to Form Autofill browser preferences.
 changeAutofillOptions = Change Form Autofill Options
 changeAutofillOptionsOSX = Change Form Autofill Preferences
 # LOCALIZATION NOTE (addressesSyncCheckbox): If Sync is enabled, this checkbox is displayed on the doorhanger
 # shown when saving addresses.
 addressesSyncCheckbox = Share addresses with synced devices
+# LOCALIZATION NOTE (creditCardsSyncCheckbox): If Sync is enabled and credit card sync is available,
+# this checkbox is displayed on the doorhanger shown when saving credit card.
+creditCardsSyncCheckbox = Share credit cards with synced devices
 # LOCALIZATION NOTE (updateAddressMessage, createAddressLabel, updateAddressLabel): Used on the doorhanger
 # when an address change is detected.
 updateAddressMessage = Would you like to update your address with this new information?
 createAddressLabel = Create New Address
 updateAddressLabel = Update Address
 # LOCALIZATION NOTE (saveCreditCardMessage, saveCreditCardLabel, cancelCreditCardLabel, neverSaveCreditCardLabel):
 # Used on the doorhanger when users submit payment with credit card.
 # LOCALIZATION NOTE (saveCreditCardMessage): %S is brandShortName.