Bug 1412247 - Ensure checkbox label and "Learn more" link stay on the same line. r=lchang
authorScott Wu <scottcwwu@gmail.com>
Tue, 09 Jan 2018 15:35:47 +0800
changeset 399272 48d3e471b9aa55a9376fa467541c5877bea34d6e
parent 399271 93fa34d5492cfaa900f3eb109cde76ef1c5f5917
child 399273 9eb1b0cd2f1c281357b98418af4ed2ca04f95af2
push id33256
push userncsoregi@mozilla.com
push dateMon, 15 Jan 2018 17:25:55 +0000
treeherdermozilla-central@a88bb54f50e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerslchang
bugs1412247
milestone59.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 1412247 - Ensure checkbox label and "Learn more" link stay on the same line. r=lchang MozReview-Commit-ID: L54LV6mcqg7
browser/extensions/formautofill/FormAutofillPreferences.jsm
--- a/browser/extensions/formautofill/FormAutofillPreferences.jsm
+++ b/browser/extensions/formautofill/FormAutofillPreferences.jsm
@@ -66,108 +66,122 @@ FormAutofillPreferences.prototype = {
    * Create Form Autofill preference group
    *
    * @param  {XULDocument} document
    */
   createPreferenceGroup(document) {
     let learnMoreURL = Services.urlFormatter.formatURLPref("app.support.baseURL") + "autofill-card-address";
     let formAutofillGroup = document.createElementNS(XUL_NS, "vbox");
     let addressAutofill = document.createElementNS(XUL_NS, "hbox");
-    let addressAutofillCheckboxGroup = document.createElementNS(XUL_NS, "description");
+    let addressAutofillCheckboxGroup = document.createElementNS(XUL_NS, "hbox");
     let addressAutofillCheckbox = document.createElementNS(XUL_NS, "checkbox");
+    let addressAutofillCheckboxLabel = document.createElementNS(XUL_NS, "label");
+    let addressAutofillCheckboxLabelSpacer = document.createElementNS(XUL_NS, "spacer");
     let addressAutofillLearnMore = document.createElementNS(XUL_NS, "label");
     let savedAddressesBtn = document.createElementNS(XUL_NS, "button");
     // Wrappers are used to properly compute the search tooltip positions
     let savedAddressesBtnWrapper = document.createElementNS(XUL_NS, "hbox");
     let savedCreditCardsBtnWrapper = document.createElementNS(XUL_NS, "hbox");
 
     savedAddressesBtn.className = "accessory-button";
-    addressAutofillCheckbox.className = "tail-with-learn-more";
+    addressAutofillCheckboxLabelSpacer.className = "tail-with-learn-more";
     addressAutofillLearnMore.className = "learnMore text-link";
 
     formAutofillGroup.id = "formAutofillGroup";
     addressAutofill.id = "addressAutofill";
     addressAutofillLearnMore.id = "addressAutofillLearnMore";
 
     addressAutofill.setAttribute("data-subcategory", "address-autofill");
-    addressAutofillLearnMore.setAttribute("value", this.bundle.GetStringFromName("learnMoreLabel"));
-    addressAutofillCheckbox.setAttribute("label", this.bundle.GetStringFromName("autofillAddressesCheckbox"));
+    addressAutofillCheckboxLabel.textContent = this.bundle.GetStringFromName("autofillAddressesCheckbox");
+    addressAutofillLearnMore.textContent = this.bundle.GetStringFromName("learnMoreLabel");
     savedAddressesBtn.setAttribute("label", this.bundle.GetStringFromName("savedAddressesBtnLabel"));
     // Align the start to keep the savedAddressesBtn as original size
     // when addressAutofillCheckboxGroup's height is changed by a longer l10n string
     savedAddressesBtnWrapper.setAttribute("align", "start");
 
     addressAutofillLearnMore.setAttribute("href", learnMoreURL);
 
     // Add preferences search support
     savedAddressesBtn.setAttribute("searchkeywords", MANAGE_ADDRESSES_KEYWORDS.concat(EDIT_ADDRESS_KEYWORDS)
                                                        .map(key => this.bundle.GetStringFromName(key)).join("\n"));
 
     // Manually set the checked state
     if (FormAutofillUtils.isAutofillAddressesEnabled) {
       addressAutofillCheckbox.setAttribute("checked", true);
     }
 
+    addressAutofillCheckboxGroup.align = "center";
     addressAutofillCheckboxGroup.flex = 1;
+    addressAutofillCheckboxLabel.flex = 1;
 
     formAutofillGroup.appendChild(addressAutofill);
     addressAutofill.appendChild(addressAutofillCheckboxGroup);
     addressAutofillCheckboxGroup.appendChild(addressAutofillCheckbox);
-    addressAutofillCheckboxGroup.appendChild(addressAutofillLearnMore);
+    addressAutofillCheckboxGroup.appendChild(addressAutofillCheckboxLabel);
+    addressAutofillCheckboxLabel.appendChild(addressAutofillCheckboxLabelSpacer);
+    addressAutofillCheckboxLabel.appendChild(addressAutofillLearnMore);
     addressAutofill.appendChild(savedAddressesBtnWrapper);
     savedAddressesBtnWrapper.appendChild(savedAddressesBtn);
 
     this.refs = {
       formAutofillGroup,
       addressAutofillCheckbox,
+      addressAutofillCheckboxLabel,
       savedAddressesBtn,
     };
 
     if (FormAutofillUtils.isAutofillCreditCardsAvailable) {
       let creditCardAutofill = document.createElementNS(XUL_NS, "hbox");
-      let creditCardAutofillCheckboxGroup = document.createElementNS(XUL_NS, "description");
+      let creditCardAutofillCheckboxGroup = document.createElementNS(XUL_NS, "hbox");
       let creditCardAutofillCheckbox = document.createElementNS(XUL_NS, "checkbox");
+      let creditCardAutofillCheckboxLabel = document.createElementNS(XUL_NS, "label");
+      let creditCardAutofillCheckboxLabelSpacer = document.createElementNS(XUL_NS, "spacer");
       let creditCardAutofillLearnMore = document.createElementNS(XUL_NS, "label");
       let savedCreditCardsBtn = document.createElementNS(XUL_NS, "button");
       savedCreditCardsBtn.className = "accessory-button";
-      creditCardAutofillCheckbox.className = "tail-with-learn-more";
+      creditCardAutofillCheckboxLabelSpacer.className = "tail-with-learn-more";
       creditCardAutofillLearnMore.className = "learnMore text-link";
 
       creditCardAutofill.id = "creditCardAutofill";
       creditCardAutofillLearnMore.id = "creditCardAutofillLearnMore";
 
       creditCardAutofill.setAttribute("data-subcategory", "credit-card-autofill");
-      creditCardAutofillLearnMore.setAttribute("value", this.bundle.GetStringFromName("learnMoreLabel"));
-      creditCardAutofillCheckbox.setAttribute("label", this.bundle.GetStringFromName("autofillCreditCardsCheckbox"));
+      creditCardAutofillCheckboxLabel.textContent = this.bundle.GetStringFromName("autofillCreditCardsCheckbox");
+      creditCardAutofillLearnMore.textContent = this.bundle.GetStringFromName("learnMoreLabel");
       savedCreditCardsBtn.setAttribute("label", this.bundle.GetStringFromName("savedCreditCardsBtnLabel"));
       // Align the start to keep the savedCreditCardsBtn as original size
       // when creditCardAutofillCheckboxGroup's height is changed by a longer l10n string
       savedCreditCardsBtnWrapper.setAttribute("align", "start");
 
       creditCardAutofillLearnMore.setAttribute("href", learnMoreURL);
 
       // Add preferences search support
       savedCreditCardsBtn.setAttribute("searchkeywords", MANAGE_CREDITCARDS_KEYWORDS.concat(EDIT_CREDITCARD_KEYWORDS)
                                                            .map(key => this.bundle.GetStringFromName(key)).join("\n"));
 
       // Manually set the checked state
       if (FormAutofillUtils.isAutofillCreditCardsEnabled) {
         creditCardAutofillCheckbox.setAttribute("checked", true);
       }
 
+      creditCardAutofillCheckboxGroup.align = "center";
       creditCardAutofillCheckboxGroup.flex = 1;
+      creditCardAutofillCheckboxLabel.flex = 1;
 
       formAutofillGroup.appendChild(creditCardAutofill);
       creditCardAutofill.appendChild(creditCardAutofillCheckboxGroup);
       creditCardAutofillCheckboxGroup.appendChild(creditCardAutofillCheckbox);
-      creditCardAutofillCheckboxGroup.appendChild(creditCardAutofillLearnMore);
+      creditCardAutofillCheckboxGroup.appendChild(creditCardAutofillCheckboxLabel);
+      creditCardAutofillCheckboxLabel.appendChild(creditCardAutofillCheckboxLabelSpacer);
+      creditCardAutofillCheckboxLabel.appendChild(creditCardAutofillLearnMore);
       creditCardAutofill.appendChild(savedCreditCardsBtnWrapper);
       savedCreditCardsBtnWrapper.appendChild(savedCreditCardsBtn);
 
       this.refs.creditCardAutofillCheckbox = creditCardAutofillCheckbox;
+      this.refs.creditCardAutofillCheckboxLabel = creditCardAutofillCheckboxLabel;
       this.refs.savedCreditCardsBtn = savedCreditCardsBtn;
     }
   },
 
   /**
    * Handle events
    *
    * @param  {DOMEvent} event
@@ -184,25 +198,41 @@ FormAutofillPreferences.prototype = {
           Services.prefs.setBoolPref(ENABLED_AUTOFILL_CREDITCARDS_PREF, target.checked);
         } else if (target == this.refs.savedAddressesBtn) {
           target.ownerGlobal.gSubDialog.open(MANAGE_ADDRESSES_URL);
         } else if (target == this.refs.savedCreditCardsBtn) {
           target.ownerGlobal.gSubDialog.open(MANAGE_CREDITCARDS_URL);
         }
         break;
       }
+      case "click": {
+        let target = event.target;
+
+        if (target == this.refs.addressAutofillCheckboxLabel) {
+          let pref = FormAutofillUtils.isAutofillAddressesEnabled;
+          Services.prefs.setBoolPref(ENABLED_AUTOFILL_ADDRESSES_PREF, !pref);
+          this.refs.addressAutofillCheckbox.checked = !pref;
+        } else if (target == this.refs.creditCardAutofillCheckboxLabel) {
+          let pref = FormAutofillUtils.isAutofillCreditCardsEnabled;
+          Services.prefs.setBoolPref(ENABLED_AUTOFILL_CREDITCARDS_PREF, !pref);
+          this.refs.creditCardAutofillCheckbox.checked = !pref;
+        }
+        break;
+      }
     }
   },
 
   /**
    * Attach event listener
    */
   attachEventListeners() {
     this.refs.formAutofillGroup.addEventListener("command", this);
+    this.refs.formAutofillGroup.addEventListener("click", this);
   },
 
   /**
    * Remove event listener
    */
   detachEventListeners() {
     this.refs.formAutofillGroup.removeEventListener("command", this);
+    this.refs.formAutofillGroup.removeEventListener("click", this);
   },
 };