Bug 1371113 - Add credit card doorhanger. r=lchang
☠☠ backed out by 97b5e21ce80f ☠ ☠
authorsteveck-chung <schung@mozilla.com>
Wed, 02 Aug 2017 16:16:42 +0800
changeset 377167 08e729b3651719ff260cb3651539fff11a322b2f
parent 377166 fbc63e299cd0ee4a40a804d35ebc6105ae53ae41
child 377168 397bc9636e83d3c75895ca2b53749e51df651a13
push id32402
push userarchaeopteryx@coole-files.de
push dateMon, 28 Aug 2017 14:47:04 +0000
treeherdermozilla-central@d5b6d113cf17 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerslchang
bugs1371113
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1371113 - Add credit card doorhanger. r=lchang MozReview-Commit-ID: 6qIDgmfLNJC
browser/extensions/formautofill/FormAutofillDoorhanger.jsm
browser/extensions/formautofill/content/icon-credit-card.svg
browser/extensions/formautofill/locales/en-US/formautofill.properties
--- a/browser/extensions/formautofill/FormAutofillDoorhanger.jsm
+++ b/browser/extensions/formautofill/FormAutofillDoorhanger.jsm
@@ -21,20 +21,22 @@ Cu.import("resource://gre/modules/XPCOMU
 Cu.import("resource://formautofill/FormAutofillUtils.jsm");
 
 this.log = null;
 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 = {
   firstTimeUse: {
     notificationId: "autofill-address",
     message: GetStringFromName("saveAddressesMessage"),
     anchor: {
       id: "autofill-address-notification-icon",
@@ -64,16 +66,17 @@ const CONTENT = {
           log.debug("Set addresses sync to", checked);
         },
       },
     },
   },
   update: {
     notificationId: "autofill-address",
     message: GetStringFromName("updateAddressMessage"),
+    linkMessage: GetStringFromName(autofillOptsKey),
     anchor: {
       id: "autofill-address-notification-icon",
       URL: "chrome://formautofill/content/formfill-anchor.svg",
       tooltiptext: GetStringFromName("openAutofillMessagePanel"),
     },
     mainAction: {
       label: GetStringFromName("updateAddressLabel"),
       accessKey: "U",
@@ -84,16 +87,44 @@ const CONTENT = {
       accessKey: "C",
       callbackState: "create",
     }],
     options: {
       persistWhileVisible: true,
       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 = {
   /**
    * Generate the main action and secondary actions from content parameters and
    * promise resolve.
    *
    * @private
@@ -131,29 +162,31 @@ let FormAutofillDoorhanger = {
     return [mainAction, secondaryActions];
   },
   /**
    * 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.
    */
-  _appendPrivacyPanelLink(browser, id) {
+  _appendPrivacyPanelLink(browser, id, message) {
     let notificationId = id + "-notification";
     let chromeDoc = browser.ownerDocument;
     let notification = chromeDoc.getElementById(notificationId);
 
     if (!notification.querySelector("popupnotificationcontent")) {
       let notificationcontent = chromeDoc.createElement("popupnotificationcontent");
       let privacyLinkElement = chromeDoc.createElement("label");
       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);
     }
   },
   /**
    * Create an image element for notification anchor if it doesn't already exist.
    * @param  {XULElement} browser
    *         Target browser element for showing doorhanger.
@@ -216,43 +249,52 @@ let FormAutofillDoorhanger = {
    * @param  {string} type
    *         The type of the doorhanger. There will have first time use/update/credit card.
    * @returns {Promise}
               Resolved with action type when action callback is triggered.
    */
   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;
         }
 
         // The doorhanger is customizable only when notification box is shown
         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,
       );
     });
   },
 };
new file mode 100644
--- /dev/null
+++ b/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>
--- a/browser/extensions/formautofill/locales/en-US/formautofill.properties
+++ b/browser/extensions/formautofill/locales/en-US/formautofill.properties
@@ -3,24 +3,30 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 preferenceGroupTitle = Form Autofill
 enableAddressAutofill = Autofill addresses
 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
 autocompleteFooterOptionOSX = Form Autofill Preferences
 autocompleteFooterOptionOSXShort = Preferences
 category.address = address
 category.name = name
 category.organization = company