Bug 1371113 - Part 1: Add credit card doorhanger. r=lchang

MozReview-Commit-ID: 6qIDgmfLNJC

--HG--
extra : rebase_source : d53b0f577686894b18956612e398a803ac664558

browser/extensions/formautofill/FormAutofillDoorhanger.jsm

@@ -26,10 +26,12 @@ FormAutofillUtils.defineLazyLogGetter(this, this.EXPORTED_SYMBOLS[0]);
 const BUNDLE_URI = "chrome://formautofill/locale/formautofill.properties";
 const GetStringFromName = Services.strings.createBundle(BUNDLE_URI).GetStringFromName;
 let changeAutofillOptsKey = "changeAutofillOptions";
-let viewAutofillOptsKey = "viewAutofillOptionsLink";
-if (AppConstants.platform != "macosx") {
+let autofillOptsKey = "autofillOptionsLink";
+let autofillSecurityOptionsKey = "autofillSecurityOptionsLink";
+if (AppConstants.platform == "macosx") {
   changeAutofillOptsKey += "OSX";
-  viewAutofillOptsKey += "OSX";
+  autofillOptsKey += "OSX";
+  autofillSecurityOptionsKey += "OSX";
 }
 
 const CONTENT = {
@@ -69,6 +71,7 @@ const CONTENT = {
   update: {
     notificationId: "autofill-address",
     message: GetStringFromName("updateAddressMessage"),
+    linkMessage: GetStringFromName(autofillOptsKey),
     anchor: {
       id: "autofill-address-notification-icon",
       URL: "chrome://formautofill/content/formfill-anchor.svg",
@@ -89,6 +92,34 @@ const CONTENT = {
       popupIconURL: "chrome://formautofill/content/icon-address-update.svg",
     },
   },
+  creditCard: {
+    notificationId: "autofill-credit-card",
+    message: GetStringFromName("saveCreditCardMessage"),
+    linkMessage: GetStringFromName(autofillSecurityOptionsKey),
+    anchor: {
+      id: "autofill-credit-card-notification-icon",
+      URL: "chrome://formautofill/content/formfill-anchor.svg",
+      tooltiptext: GetStringFromName("openAutofillMessagePanel"),
+    },
+    mainAction: {
+      label: GetStringFromName("saveCreditCardLabel"),
+      accessKey: "S",
+      callbackState: "save",
+    },
+    secondaryActions: [{
+      label: GetStringFromName("cancelCreditCardLabel"),
+      accessKey: "D",
+      callbackState: "cancel",
+    }, {
+      label: GetStringFromName("disableCreditCardLabel"),
+      accessKey: "N",
+      callbackState: "disable",
+    }],
+    options: {
+      persistWhileVisible: true,
+      popupIconURL: "chrome://formautofill/content/icon-credit-card.svg",
+    },
+  },
 };
 
 let FormAutofillDoorhanger = {
@@ -136,8 +167,10 @@ let FormAutofillDoorhanger = {
    *         Target browser element for showing doorhanger.
    * @param  {string} id
    *         The ID of the doorhanger.
+   * @param  {string} message
+   *         The localized string for link title.
    */
-  _appendPrivacyPanelLink(browser, id) {
+  _appendPrivacyPanelLink(browser, id, message) {
     let notificationId = id + "-notification";
     let chromeDoc = browser.ownerDocument;
     let notification = chromeDoc.getElementById(notificationId);
@@ -148,7 +181,7 @@ let FormAutofillDoorhanger = {
       privacyLinkElement.className = "text-link";
       privacyLinkElement.setAttribute("useoriginprincipal", true);
       privacyLinkElement.setAttribute("href", "about:preferences#privacy");
-      privacyLinkElement.setAttribute("value", GetStringFromName(viewAutofillOptsKey));
+      privacyLinkElement.setAttribute("value", message);
       notificationcontent.appendChild(privacyLinkElement);
       notification.append(notificationcontent);
     }
@@ -221,13 +254,22 @@ let FormAutofillDoorhanger = {
   async show(browser, type) {
     log.debug("show doorhanger with type:", type);
     return new Promise((resolve) => {
-      let content = CONTENT[type];
+      let {
+        notificationId,
+        message,
+        linkMessage,
+        anchor,
+        mainAction,
+        secondaryActions,
+        options,
+      } = CONTENT[type];
+
       let chromeWin = browser.ownerGlobal;
-      content.options.eventCallback = (topic) => {
+      options.eventCallback = (topic) => {
         log.debug("eventCallback:", topic);
 
         if (topic == "removed" || topic == "dismissed") {
-          this._removeCheckboxListener(browser, content);
+          this._removeCheckboxListener(browser, {notificationId, options});
           return;
         }
 
@@ -235,23 +277,23 @@ let FormAutofillDoorhanger = {
         if (topic != "shown") {
           return;
         }
-        this._addCheckboxListener(browser, content);
+        this._addCheckboxListener(browser, {notificationId, options});
 
         // There's no preferences link or other customization in first time use doorhanger.
         if (type == "firstTimeUse") {
           return;
         }
 
-        this._appendPrivacyPanelLink(browser, content.notificationId);
+        this._appendPrivacyPanelLink(browser, notificationId, linkMessage);
       };
-      this._setAnchor(browser, content.anchor);
+      this._setAnchor(browser, anchor);
       chromeWin.PopupNotifications.show(
         browser,
-        content.notificationId,
-        content.message,
-        content.anchor.id,
-        ...this._createActions(content.mainAction, content.secondaryActions, resolve),
-        content.options,
+        notificationId,
+        message,
+        anchor.id,
+        ...this._createActions(mainAction, secondaryActions, resolve),
+        options,
       );
     });
   },

browser/extensions/formautofill/content/icon-credit-card.svg

@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path fill="#4E4D4D" d="M9 22.2H6.4c-.6 0-1 .4-1 1s.4 1 1 1H9c.6 0 1-.4 1-1s-.4-1-1-1z"/>
+  <path fill="#4E4D4D" d="M28 7.6v8H4v-4h10v-4H4c-2.2 0-4 1.8-4 4v16c0 2.2 1.8 4 4 4h24c2.2 0 4-1.8 4-4v-16c0-2.2-1.8-4-4-4zm-24 20V19h24v8.6H4z"/>
+  <path fill="#4E4D4D" d="M19.2 22.2h-6.3c-.6 0-1 .4-1 1s.4 1 1 1h6.3c.6 0 1-.4 1-1s-.5-1-1-1zM16.3 7.9c-.4.4-.4 1 0 1.4l4 4c.4.4 1 .4 1.4 0l4-4c.4-.4.4-1 0-1.4s-1-.4-1.4 0L22 10.2v-9c0-.5-.4-1-1-1-.5 0-1 .4-1 1v9l-2.3-2.3c-.4-.4-1-.4-1.4 0z"/>
+</svg>

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

@@ -8,14 +8,20 @@ savedAddresses = Saved Addresses…
 enableCreditCardAutofill = Autofill credit cards
 savedCreditCards = Saved Credit Cards…
 saveAddressesMessage = Firefox now saves addresses so you can fill out forms faster.
-viewAutofillOptionsLink = View Form Autofill Options
+autofillOptionsLink = Form Autofill Options
+autofillSecurityOptionsLink = Form Autofill & Security Options
 changeAutofillOptions = Change Form Autofill Options
-viewAutofillOptionsLinkOSX = View Form Autofill Preferences
+autofillOptionsLinkOSX = Form Autofill Preferences
+autofillSecurityOptionsLinkOSX = Form Autofill & Security Preferences
 changeAutofillOptionsOSX = Change Form Autofill Preferences
 addressesSyncCheckbox = Share addresses with synced devices
 updateAddressMessage = Would you like to update your address with this new information?
 createAddressLabel = Create New Address
 updateAddressLabel = Update Address
+saveCreditCardMessage = Would you like Firefox to save this credit card? (Security code will not be saved)
+saveCreditCardLabel = Save Credit Card
+cancelCreditCardLabel = Don’t Save
+disableCreditCardLabel = Never Save credit Cards
 openAutofillMessagePanel = Open Form Autofill message panel
 autocompleteFooterOption = Form Autofill Options
 autocompleteFooterOptionShort = More Options