Bug 1412247 - Ensure checkbox label and "Learn more" link stay on the same line. r=lchang draft
authorScott Wu <scottcwwu@gmail.com>
Tue, 09 Jan 2018 15:35:47 +0800
changeset 720295 7640d5d8b8d334a034a72db6d8e28afcc42c271d
parent 718290 e4de69553e3faf8136eb9bb7f2f741e1b7e6f866
child 746020 acd14c2ea84e17958766867847a3520abe2e41a6
push id95496
push userbmo:scwwu@mozilla.com
push dateMon, 15 Jan 2018 06:44:34 +0000
reviewerslchang
bugs1412247
milestone59.0a1
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);
   },
 };