Bug 1398050 - Polish preferences page to match visual spec. r=mconley

* Remove transparency from the menu icons and labels in Normal state.
* Adding Firefox Support's hover state.
* Make the size of radio buttons as 20x20 px.
* Make minimum width of action buttons as 150px.
* Fix margin issues of When Nightly starts and Nightly Updates sections.

MozReview-Commit-ID: DHwdKTO1wxM

--HG--
extra : rebase_source : 9190f5430eb06294895f4b58609e56c673ff2156

browser/components/preferences/in-content/main.xul

@@ -433,6 +433,7 @@
       </hbox>
       <hbox align="center">
         <checkbox id="browserContainersCheckbox"
+                class="tail-with-learn-more"
                   label="&browserContainersEnabled.label;"
                   accesskey="&browserContainersEnabled.accesskey;"
                   preference="privacy.userContext.enabled"
@@ -737,7 +738,7 @@
       <row id="playDRMContentRow">
         <hbox align="center">
           <checkbox id="playDRMContent" preference="media.eme.enabled"
-                    label="&playDRMContent2.label;" accesskey="&playDRMContent2.accesskey;"/>
+                    class="tail-with-learn-more" label="&playDRMContent2.label;" accesskey="&playDRMContent2.accesskey;"/>
           <label id="playDRMContentLink" class="learnMore text-link">
             &playDRMContent.learnMore.label;
           </label>
@@ -764,10 +765,10 @@
   <caption class="search-header" hidden="true"><label>&updateApplication.label;</label></caption>
 
   <label>&updateApplicationDescription.label;</label>
-  <hbox align="start">
+  <hbox align="center">
     <vbox flex="1">
       <description>
-        &updateApplication.version.pre;<label id="version"/>&updateApplication.version.post;
+        &updateApplication.version.pre;<label id="version" class="tail-with-learn-more" />&updateApplication.version.post;
         <label id="releasenotes" class="learnMore text-link" hidden="true">&releaseNotes.link;</label>
       </description>
       <description id="distribution" class="text-blurb" hidden="true"/>
@@ -921,6 +922,7 @@
 
   <hbox align="center">
     <checkbox id="useRecommendedPerformanceSettings"
+              class="tail-with-learn-more"
               label="&useRecommendedPerformanceSettings2.label;"
               accesskey="&useRecommendedPerformanceSettings2.accesskey;"
               preference="browser.preferences.defaultPerformanceSettings.enabled"/>

browser/components/preferences/in-content/privacy.xul

@@ -272,7 +272,6 @@
       <hbox align="center" flex="1">
         <vbox flex="1">
           <description>&rememberDescription.label;</description>
-          <separator class="thin"/>
           <description>&rememberActions.pre.label;<label
           class="text-link" id="historyRememberClear"
           >&rememberActions.clearHistory.label;</label>&rememberActions.middle.label;<label
@@ -285,7 +284,6 @@
       <hbox align="center" flex="1">
         <vbox flex="1">
           <description>&dontrememberDescription.label;</description>
-          <separator class="thin"/>
           <description>&dontrememberActions.pre.label;<label
           class="text-link" id="historyDontRememberClear"
           >&dontrememberActions.clearHistory.label;</label>&dontrememberActions.post.label;</description>
@@ -293,7 +291,6 @@
       </hbox>
     </vbox>
     <vbox id="historyCustomPane">
-      <separator class="thin"/>
       <vbox>
         <checkbox id="privateBrowsingAutoStart"
                   label="&privateBrowsingPermanent2.label;"
@@ -460,7 +457,7 @@
   <hbox align="baseline">
     <vbox flex="1">
       <description flex="1">
-        <label id="totalSiteDataSize"></label>
+        <label id="totalSiteDataSize" class="tail-with-learn-more"></label>
         <label id="siteDataLearnMoreLink" class="learnMore text-link">&siteDataLearnMoreLink.label;</label>
       </description>
     </vbox>
@@ -497,7 +494,7 @@
       <vbox id="trackingProtectionBox" flex="1" hidden="true">
         <description id="trackingProtectionDesc"
                      control="trackingProtectionRadioGroup">
-          &trackingProtection2.radioGroupLabel;
+           <label class="tail-with-learn-more">&trackingProtection2.radioGroupLabel;</label>
            <label id="trackingProtectionLearnMore" class="learnMore text-link">&trackingProtectionLearnMore.label;</label>
         </description>
         <radiogroup id="trackingProtectionRadioGroup" aria-labelledby="trackingProtectionDesc">
@@ -550,7 +547,7 @@
       </vbox>
     </hbox>
     <vbox id="doNotTrackLearnMoreBox">
-      <label>&doNotTrack.description;<label
+      <label><label class="tail-with-learn-more">&doNotTrack.description;</label><label
       class="learnMore text-link" href="https://www.mozilla.org/dnt"
       >&doNotTrack.learnMore.label;</label></label>
       <radiogroup id="doNotTrackRadioGroup" aria-labelledby="doNotTrackDesc" preference="privacy.donottrackheader.enabled">
@@ -636,7 +633,7 @@
         <description flex="1">
           <image class="desktop-notification-icon permission-icon" />
           <separator orient="vertical" class="thin"/>
-          <label id="notificationPermissionsLabel">&notificationPermissions.label;</label>
+          <label id="notificationPermissionsLabel" class="tail-with-learn-more">&notificationPermissions.label;</label>
           <label id="notificationPermissionsLearnMore"
                  class="learnMore text-link">&notificationPermissionsLearnMore.label;</label>
         </description>
@@ -659,8 +656,8 @@
   <vbox id="notificationsDoNotDisturbBox" hidden="true">
     <checkbox id="notificationsDoNotDisturb" label="&notificationsDoNotDisturb.label;"
               accesskey="&notificationsDoNotDisturb.accesskey;"/>
-    <label id="notificationsDoNotDisturbDetails"
-           class="indent">&notificationsDoNotDisturbDetails.value;</label>
+    <description id="notificationsDoNotDisturbDetails"
+           class="indent tip-caption">&notificationsDoNotDisturbDetails.value;</description>
   </vbox>
 
   <hbox align="start">
@@ -702,13 +699,14 @@
   </hbox>
 
   <vbox id="a11yPermissionsBox">
-    <description flex="1">
-      <checkbox id="a11yPrivacyCheckbox" label="&a11yPrivacy.checkbox.label;"
+    <hbox flex="1" align="center">
+      <checkbox id="a11yPrivacyCheckbox" class="tail-with-learn-more"
+                label="&a11yPrivacy.checkbox.label;"
                 accesskey="&a11yPrivacy.checkbox.accesskey;"
                 oncommand="return gPrivacyPane.updateA11yPrefs(this.checked)"/>
       <label id="a11yLearnMoreLink" class="learnMore text-link"
               value="&a11yPrivacy.learnmore.label;"></label>
-    </description>
+    </hbox>
   </vbox>
 </groupbox>
 
@@ -727,10 +725,12 @@
 
   <vbox>
     <description>
-      &dataCollectionDesc.label;<label id="dataCollectionPrivacyNotice" class="learnMore text-link">&dataCollectionPrivacyNotice.label;</label>
+      <label class="tail-with-learn-more">&dataCollectionDesc.label;</label><label id="dataCollectionPrivacyNotice" class="learnMore text-link">&dataCollectionPrivacyNotice.label;</label>
     </description>
     <description flex="1">
-      <checkbox id="submitHealthReportBox" label="&enableHealthReport1.label;"
+      <checkbox id="submitHealthReportBox"
+                class="tail-with-learn-more"
+                label="&enableHealthReport1.label;"
                 accesskey="&enableHealthReport1.accesskey;"/>
       <label id="FHRLearnMore"
              class="learnMore text-link">&healthReportLearnMore.label;</label>
@@ -742,6 +742,7 @@
 #ifdef MOZ_CRASHREPORTER
   <hbox align="center">
     <checkbox id="automaticallySubmitCrashesBox"
+              class="tail-with-learn-more"
               preference="browser.crashReports.unsubmittedCheck.autoSubmit"
               label="&alwaysSubmitCrashReports1.label;"
               accesskey="&alwaysSubmitCrashReports1.accesskey;"/>

browser/extensions/formautofill/FormAutofillPreferences.jsm

@@ -80,6 +80,7 @@ FormAutofillPreferences.prototype = {
     let savedCreditCardsBtnWrapper = document.createElementNS(XUL_NS, "hbox");
 
     savedAddressesBtn.className = "accessory-button";
+    addressAutofillCheckbox.className = "tail-with-learn-more";
     addressAutofillLearnMore.className = "learnMore text-link";
 
     formAutofillGroup.id = "formAutofillGroup";
@@ -123,6 +124,7 @@ FormAutofillPreferences.prototype = {
       let creditCardAutofillLearnMore = document.createElementNS(XUL_NS, "label");
       let savedCreditCardsBtn = document.createElementNS(XUL_NS, "button");
       savedCreditCardsBtn.className = "accessory-button";
+      creditCardAutofillCheckbox.className = "tail-with-learn-more";
       creditCardAutofillLearnMore.className = "learnMore text-link";
 
       creditCardAutofill.id = "creditCardAutofill";

browser/extensions/shield-recipe-client/lib/ShieldPreferences.jsm

@@ -106,6 +106,7 @@ this.ShieldPreferences = {
 
     const checkbox = doc.createElementNS(XUL_NS, "checkbox");
     checkbox.setAttribute("id", "optOutStudiesEnabled");
+    checkbox.setAttribute("class", "tail-with-learn-more");
     checkbox.setAttribute("label", "Allow Firefox to install and run studies");
     checkbox.setAttribute("preference", OPT_OUT_STUDIES_ENABLED_PREF);
     checkbox.setAttribute("disabled", !Services.prefs.getBoolPref(FHR_UPLOAD_ENABLED_PREF));

browser/themes/linux/preferences/in-content/preferences.css

@@ -45,7 +45,6 @@ menulist.actionsMenu > .menulist-dropmarker {
   margin-bottom: 11px;
 }
 
-textbox + button,
 filefield + button {
   margin-inline-start: -4px;
 }

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -30,7 +30,7 @@
   color: currentColor;
 }
 
-groupbox + groupbox {
+prefpane > groupbox + groupbox {
   margin-top: 16px;
 }
 
@@ -62,33 +62,30 @@ label {
   margin-bottom: 0 !important;
 }
 
-description > checkbox {
-  vertical-align: bottom;
-}
-
 .indent {
   margin-inline-start: 28px !important;
 }
 
-separator.thin:not([orient="vertical"]) {
-  height: 8px;
-}
-
 .checkbox-check {
   margin-inline-end: 8px;
   width: 20px;
   height: 20px;
 }
 
+.tail-with-learn-more {
+  margin-inline-start: 0px;
+  margin-inline-end: 10px;
+}
+
 .learnMore {
-  margin-inline-start: 10px;
+  margin-inline-start: 0px;
   font-weight: normal;
   white-space: nowrap;
 }
 
 .accessory-button {
-  min-width: 145px;
-  margin: 2px 0;
+  min-width: 150px;
+  margin: 4px 0;
 }
 
 #searchInput {
@@ -190,7 +187,7 @@ separator.thin:not([orient="vertical"]) {
 }
 
 #updateBox {
-  margin-top: 8px;
+  margin-top: 4px;
   margin-bottom: 32px;
 }
 
@@ -208,7 +205,8 @@ separator.thin:not([orient="vertical"]) {
   margin-inline-start: 6px !important;
 }
 
-#updateRadioGroup > radio {
+#updateRadioGroup > radio,
+#browserStartupPage > radio {
   height: 30px;
   margin: 2px 0;
 }
@@ -250,11 +248,6 @@ separator.thin:not([orient="vertical"]) {
 
 /* Search Pane */
 
-#defaultEngine {
-  margin-top: 2px;
-  margin-bottom: 6px;
-}
-
 #engineList {
   margin: 2px 0 5px 0;
 }
@@ -487,9 +480,13 @@ separator.thin:not([orient="vertical"]) {
 }
 
 #fxaSyncComputerName {
-  margin-top: 3px;
   margin-inline-start: 0;
-  margin-bottom: 0;
+  margin-bottom: 4px;
+}
+
+#fxaChangeDeviceName {
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 
 #tosPP-small-ToS {
@@ -700,6 +697,11 @@ separator.thin:not([orient="vertical"]) {
   visibility: hidden;
 }
 
+menulist {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
 menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
   display: -moz-box;
   min-width: auto; /* Override the min-width defined in menu.css */

browser/themes/windows/preferences/in-content/preferences.css

@@ -23,7 +23,6 @@ caption > label:not(.dialogTitle) {
   margin-inline-end: 9px;
 }
 
-textbox + button,
 filefield + button {
   margin-inline-start: -4px;
   margin-top: 4px;

toolkit/themes/linux/global/in-content/common.css

@@ -12,13 +12,6 @@ xul|tab[visuallyselected] {
   border-bottom-right-radius: 0;
 }
 
-xul|button,
-html|button,
-xul|colorpicker[type="button"],
-xul|menulist {
-  margin: 2px 4px;
-}
-
 xul|button:-moz-focusring {
   outline: 1px dotted;
   outline-offset: -2px;

toolkit/themes/linux/global/textbox.css

@@ -14,7 +14,7 @@
 textbox {
   -moz-appearance: textfield;
   cursor: text;
-  margin: 2px 4px;
+  margin: 4px;
   padding: 2px 2px 3px;
   padding-inline-start: 4px;
   background-color: -moz-Field;

toolkit/themes/osx/global/in-content/common.css

@@ -14,13 +14,6 @@ xul|tab[visuallyselected] {
   text-shadow: none;
 }
 
-xul|button,
-html|button {
-  /* use the same margin of other elements for the alignment */
-  margin-left: 4px;
-  margin-right: 4px;
-}
-
 xul|button[dlgtype="help"] {
   -moz-appearance: none;
   width: auto;

toolkit/themes/shared/in-content/common.inc.css

@@ -22,7 +22,7 @@
   --in-content-border-focus: #0a84ff;
   --in-content-border-color: #d7d7db;
   --in-content-category-border-focus: 1px dotted #0a84ff;
-  --in-content-category-text: rgba(12,12,13,0.8);
+  --in-content-category-text: rgba(12,12,13);
   --in-content-category-text-active: #0c0c0d;
   --in-content-category-text-selected: #0a84ff;
   --in-content-category-text-selected-active: #0060df;
@@ -111,7 +111,7 @@ xul|groupbox > xul|caption {
   padding: 4px 0;
 }
 
-xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore),
+xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore):not(.tail-with-learn-more),
 xul|groupbox xul|description {
   /* !important needed to override toolkit !important rule */
   margin-inline-start: 0 !important;
@@ -192,7 +192,14 @@ xul|menulist {
   -moz-border-left-colors: none !important;
   border-radius: 2px;
   background-color: var(--in-content-page-background);
-  margin: 0 8px;
+  margin: 4px 8px;
+}
+
+xul|button,
+html|button {
+  /* use the same margin of other elements for the alignment */
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
 html|select:not([size]):not([multiple]) {
@@ -341,11 +348,12 @@ html|*.help-button:hover {
   fill: white;
   stroke: #808080;
   stroke-opacity: 1;
-  background-color: var(--in-content-category-hover);
+  background-color: var(--in-content-category-background-hover);
 }
 
 html|*.help-button:hover:active {
   stroke: #666;
+  background-color: var(--in-content-category-background-active);
 }
 
 xul|*.spinbuttons-button {
@@ -605,8 +613,8 @@ xul|radio {
 
 xul|*.radio-check {
   -moz-appearance: none;
-  width: 23px;
-  height: 23px;
+  width: 20px;
+  height: 20px;
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 50%;
   margin-inline-end: 10px;
@@ -700,7 +708,6 @@ xul|*.radio-label-box {
   height: 24px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
-  fill-opacity: 0.8;
 }
 
 *|*.category[selected] > *|*.category-icon,

toolkit/themes/windows/global/in-content/common.css

@@ -8,13 +8,6 @@ xul|caption {
   background-color: transparent;
 }
 
-xul|button,
-html|button,
-xul|colorpicker[type="button"],
-xul|menulist {
-  margin: 2px 4px;
-}
-
 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
   margin-top: 1px;
   margin-bottom: 1px;

toolkit/themes/windows/global/textbox.css

@@ -14,7 +14,7 @@
 textbox {
   -moz-appearance: textfield;
   cursor: text;
-  margin: 2px 4px;
+  margin: 4px;
   padding: 2px 2px 3px;
   padding-inline-start: 4px;
   background-color: -moz-Field;