Bug 1398050 - Polish preferences page to match visual spec. draft
authorEvan Tseng <evan@tseng.io>
Tue, 12 Sep 2017 17:38:41 +0800
changeset 667528 6d5dbee54304759d4039e3926ad129f6fca6caa2
parent 667303 a0eb21bf55e1c1ae0ba311e6f2273da05c712799
child 732418 97c9f1119aa49b587a2b39ecfc6e7b1e48a519a6
push id80748
push userbmo:evan@tseng.io
push dateWed, 20 Sep 2017 08:13:08 +0000
bugs1398050
milestone57.0a1
Bug 1398050 - Polish preferences page to match visual spec. * 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
browser/components/preferences/in-content/main.xul
browser/components/preferences/in-content/privacy.xul
browser/extensions/formautofill/FormAutofillPreferences.jsm
browser/extensions/shield-recipe-client/lib/ShieldPreferences.jsm
browser/themes/linux/preferences/in-content/preferences.css
browser/themes/shared/incontentprefs/preferences.inc.css
browser/themes/windows/preferences/in-content/preferences.css
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/osx/global/in-content/common.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/windows/global/in-content/common.css
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@@ -428,16 +428,17 @@
       <hbox id="browserContainersExtensionContent" align="center">
         <description control="disableContainersExtension" flex="1" />
         <button id="disableContainersExtension"
                 class="extension-controlled-button accessory-button"
                 label="&disableExtension.label;" />
       </hbox>
       <hbox align="center">
         <checkbox id="browserContainersCheckbox"
+                  class="tail-with-learn-more"
                   label="&browserContainersEnabled.label;"
                   accesskey="&browserContainersEnabled.accesskey;"
                   preference="privacy.userContext.enabled"
                   onsyncfrompreference="return gMainPane.readBrowserContainersCheckbox();"/>
         <label id="browserContainersLearnMore" class="learnMore text-link">
           &browserContainersLearnMore.label;
         </label>
         <spacer flex="1"/>
@@ -732,17 +733,17 @@
     <columns>
       <column flex="1"/>
       <column/>
     </columns>
     <rows id="contentRows-2">
       <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>
         </hbox>
       </row>
     </rows>
   </grid>
 </groupbox>
@@ -759,20 +760,20 @@
   <label class="header-name" flex="1">&updateApplication.label;</label>
 </hbox>
 
 <!-- Update -->
 <groupbox id="updateApp" data-category="paneGeneral" hidden="true">
   <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"/>
       <description id="distributionId" class="text-blurb" hidden="true"/>
     </vbox>
 #ifdef MOZ_UPDATER
     <spacer flex="1"/>
     <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
@@ -916,16 +917,17 @@
 </hbox>
 
 <!-- Performance -->
 <groupbox id="performanceGroup" data-category="paneGeneral" hidden="true">
   <caption class="search-header" hidden="true"><label>&performance.label;</label></caption>
 
   <hbox align="center">
     <checkbox id="useRecommendedPerformanceSettings"
+              class="tail-with-learn-more"
               label="&useRecommendedPerformanceSettings2.label;"
               accesskey="&useRecommendedPerformanceSettings2.accesskey;"
               preference="browser.preferences.defaultPerformanceSettings.enabled"/>
     <label id="performanceSettingsLearnMore" class="learnMore text-link">&performanceSettingsLearnMore.label;</label>
   </hbox>
   <description class="indent tip-caption">&useRecommendedPerformanceSettings2.description;</description>
 
   <vbox id="performanceSettings" class="indent" hidden="true">
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -267,38 +267,35 @@
     </hbox>
     <label>&historyHeader.post.label;</label>
   </hbox>
   <deck id="historyPane">
     <vbox id="historyRememberPane">
       <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
           class="text-link" id="historyRememberCookies"
           >&rememberActions.removeCookies.label;</label>&rememberActions.post.label;</description>
         </vbox>
       </hbox>
     </vbox>
     <vbox id="historyDontRememberPane">
       <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>
         </vbox>
       </hbox>
     </vbox>
     <vbox id="historyCustomPane">
-      <separator class="thin"/>
       <vbox>
         <checkbox id="privateBrowsingAutoStart"
                   label="&privateBrowsingPermanent2.label;"
                   accesskey="&privateBrowsingPermanent2.accesskey;"
                   preference="browser.privatebrowsing.autostart"/>
         <vbox class="indent">
           <checkbox id="rememberHistory"
                     label="&rememberHistory2.label;"
@@ -455,17 +452,17 @@
 
 <!-- Site Data -->
 <groupbox id="siteDataGroup" hidden="true" data-category="panePrivacy" data-hidden-from-search="true">
   <caption><label>&siteData.label;</label></caption>
 
   <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>
     <vbox align="end">
       <button id="siteDataSettings"
               class="accessory-button"
               label="&siteDataSettings.label;"
               accesskey="&siteDataSettings.accesskey;"
@@ -492,17 +489,17 @@
         </description>
       </vbox>
       <spacer flex="1"/>
     </hbox>
     <hbox>
       <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">
           <radio value="always"
                  label="&trackingProtectionAlways.label;"
                  accesskey="&trackingProtectionAlways.accesskey;"/>
           <radio value="private"
                  label="&trackingProtectionPrivate.label;"
@@ -545,17 +542,17 @@
                   label="&changeBlockList2.label;"
                   accesskey="&changeBlockList2.accesskey;"
                   preference="pref.privacy.disable_button.change_blocklist"
                   searchkeywords="&button.cancel.label; &button.ok.label;"/>
         </hbox>
       </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">
         <radio value="false" label="&doNotTrack.default.label;"/>
         <radio value="true" label="&doNotTrack.always.label;"/>
       </radiogroup>
     </vbox>
   </vbox>
@@ -631,17 +628,17 @@
                                   &button.ok.label;"/>
         </hbox>
       </row>
 
       <row id="notificationSettingsRow" align="center">
         <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>
         <hbox pack="end">
           <button id="notificationSettingsButton"
                   class="accessory-button"
                   label="&notificationSettingsButton.label;"
                   accesskey="&notificationSettingsButton.accesskey;"
@@ -654,18 +651,18 @@
     </rows>
   </grid>
 
   <separator flex="1"/>
 
   <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">
     <checkbox id="popupPolicy" preference="dom.disable_open_during_load"
               label="&blockPopups.label;" accesskey="&blockPopups.accesskey;"
               onsyncfrompreference="return gPrivacyPane.updateButtons('popupPolicyButton',
                                          'dom.disable_open_during_load');"
               flex="1" />
@@ -697,23 +694,24 @@
                               &removepermission2.label;
                               &removeallpermissions2.label;
                               &button.cancel.label;
                               &button.ok.label;"/>
     </hbox>
   </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>
 
 <hbox id="dataCollectionCategory"
       class="subcategory"
       hidden="true"
       data-category="panePrivacy"
       data-subcategory="reports">
@@ -722,31 +720,33 @@
 
 <!-- Firefox Data Collection and Use -->
 #ifdef MOZ_DATA_REPORTING
 <groupbox id="dataCollectionGroup" data-category="panePrivacy" data-subcategory="reports" hidden="true">
   <caption class="search-header" hidden="true"><label>&dataCollection.label;</label></caption>
 
   <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="&enableHealthReport2.label;"
+                class="tail-with-learn-more"
                 accesskey="&enableHealthReport2.accesskey;"/>
       <label id="FHRLearnMore"
              class="learnMore text-link">&healthReportLearnMore.label;</label>
     </description>
 #ifndef MOZ_TELEMETRY_REPORTING
     <description id="TelemetryDisabledDesc" class="indent tip-caption" control="telemetryGroup">&healthReportingDisabled.label;</description>
 #endif
   </vbox>
 #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;"/>
     <label id="crashReporterLearnMore"
            class="learnMore text-link">&crashReporterLearnMore.label;</label>
   </hbox>
 #endif
 </groupbox>
@@ -760,16 +760,17 @@
 </hbox>
 
 <!-- addons, forgery (phishing) UI Security -->
 <groupbox id="browsingProtectionGroup" data-category="panePrivacy" hidden="true">
   <caption><label>&browsingProtection.label;</label></caption>
   <hbox align = "center">
     <checkbox id="enableSafeBrowsing"
               label="&enableSafeBrowsing.label;"
+              class="tail-with-learn-more"
               accesskey="&enableSafeBrowsing.accesskey;" />
     <label id="enableSafeBrowsingLearnMore"
            class="learnMore text-link">&enableSafeBrowsingLearnMore.label;</label>
   </hbox>
   <vbox class="indent">
 #ifdef MOZILLA_OFFICIAL
     <checkbox id="blockDownloads"
               label="&blockDownloads.label;"
--- a/browser/extensions/formautofill/FormAutofillPreferences.jsm
+++ b/browser/extensions/formautofill/FormAutofillPreferences.jsm
@@ -75,16 +75,17 @@ FormAutofillPreferences.prototype = {
     let addressAutofillCheckbox = document.createElementNS(XUL_NS, "checkbox");
     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";
     addressAutofillLearnMore.className = "learnMore text-link";
 
     formAutofillGroup.id = "formAutofillGroup";
     addressAutofill.id = "addressAutofill";
     addressAutofillLearnMore.id = "addressAutofillLearnMore";
 
     addressAutofillLearnMore.setAttribute("value", this.bundle.GetStringFromName("learnMore"));
     addressAutofillCheckbox.setAttribute("label", this.bundle.GetStringFromName("enableAddressAutofill"));
@@ -118,16 +119,17 @@ FormAutofillPreferences.prototype = {
 
     if (FormAutofillUtils.isAutofillCreditCardsAvailable) {
       let creditCardAutofill = document.createElementNS(XUL_NS, "hbox");
       let creditCardAutofillCheckboxGroup = document.createElementNS(XUL_NS, "description");
       let creditCardAutofillCheckbox = document.createElementNS(XUL_NS, "checkbox");
       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";
       creditCardAutofillLearnMore.id = "creditCardAutofillLearnMore";
 
       creditCardAutofillLearnMore.setAttribute("value", this.bundle.GetStringFromName("learnMore"));
       creditCardAutofillCheckbox.setAttribute("label", this.bundle.GetStringFromName("enableCreditCardAutofill"));
       savedCreditCardsBtn.setAttribute("label", this.bundle.GetStringFromName("savedCreditCards"));
--- a/browser/extensions/shield-recipe-client/lib/ShieldPreferences.jsm
+++ b/browser/extensions/shield-recipe-client/lib/ShieldPreferences.jsm
@@ -101,16 +101,17 @@ this.ShieldPreferences = {
     container.classList.add("indent");
 
     const hContainer = doc.createElementNS(XUL_NS, "hbox");
     hContainer.setAttribute("align", "center");
     container.appendChild(hContainer);
 
     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));
     hContainer.appendChild(checkbox);
 
     const viewStudies = doc.createElementNS(XUL_NS, "label");
     viewStudies.setAttribute("id", "viewShieldStudies");
     viewStudies.setAttribute("href", "about:studies");
--- a/browser/themes/linux/preferences/in-content/preferences.css
+++ b/browser/themes/linux/preferences/in-content/preferences.css
@@ -40,12 +40,11 @@ caption > label:not(.dialogTitle) {
   margin-top: 2px !important;
 }
 
 menulist.actionsMenu > .menulist-dropmarker {
   margin-top: 11px;
   margin-bottom: 11px;
 }
 
-textbox + button,
 filefield + button {
   margin-inline-start: -4px;
 }
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -25,17 +25,17 @@
 
 #mainPrefPane {
   width: 100%;
   padding: 0;
   font: message-box;
   color: currentColor;
 }
 
-groupbox + groupbox {
+prefpane > groupbox + groupbox {
   margin-top: 16px;
 }
 
 groupbox + groupbox > .groupbox-body,
 groupbox + vbox groupbox > .groupbox-body {
   margin-top: 4px;
 }
 
@@ -57,43 +57,46 @@ html|option {
 
 description,
 label {
   line-height: 30px;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 
-description > checkbox {
-  vertical-align: bottom;
+menuitem > label,
+button > hbox > label {
+  line-height: unset;
 }
 
 .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;
+  height: 30px;
+  min-width: 150px;
+  margin: 4px 0;
 }
 
 #searchInput {
   border-radius: 0;
 }
 
 /* Subcategory title */
 
@@ -144,16 +147,17 @@ separator.thin:not([orient="vertical"]) 
 
 #startupPageBox {
   padding-top: 32px;
 }
 
 #browserHomePage {
   margin-inline-start: 0;
   margin-inline-end: 0;
+  margin-bottom: 4px;
 }
 
 .homepage-button:first-of-type {
   margin-inline-start: 0;
 }
 
 .homepage-button:last-of-type {
   margin-inline-end: 0;
@@ -185,17 +189,17 @@ separator.thin:not([orient="vertical"]) 
 }
 
 #updateApp > .groupbox-body > description {
   line-height: 30px;
   margin: 0;
 }
 
 #updateBox {
-  margin-top: 8px;
+  margin-top: 4px;
   margin-bottom: 32px;
 }
 
 #updateDeck > hbox > button {
   margin-top: 0;
   margin-bottom: 0;
   margin-inline-end: 0;
 }
@@ -203,17 +207,18 @@ separator.thin:not([orient="vertical"]) 
 #updateDeck > hbox > label {
   -moz-box-flex: 1;
 }
 
 #manualLink {
   margin-inline-start: 6px !important;
 }
 
-#updateRadioGroup > radio {
+#updateRadioGroup > radio,
+#browserStartupPage > radio {
   height: 30px;
   margin: 2px 0;
 }
 
 #filter {
   margin: 4px 0 8px 0;
 }
 
@@ -252,21 +257,16 @@ separator.thin:not([orient="vertical"]) 
 }
 
 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
   margin-inline-end: 8px !important;
 }
 
 /* Search Pane */
 
-#defaultEngine {
-  margin-top: 2px;
-  margin-bottom: 6px;
-}
-
 #engineList {
   margin: 2px 0 5px 0;
 }
 
 #engineList > treechildren::-moz-tree-image(engineShown, checked),
 #blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
   list-style-image: url("chrome://global/skin/in-content/check.svg");
   -moz-context-properties: fill, stroke;
@@ -489,19 +489,23 @@ separator.thin:not([orient="vertical"]) 
 }
 
 #fxaNoLoginStatus {
   margin-top: 46px;
   margin-bottom: 64px;
 }
 
 #fxaSyncComputerName {
-  margin-top: 3px;
   margin-inline-start: 0;
-  margin-bottom: 0;
+  margin-bottom: 4px;
+}
+
+#fxaChangeDeviceName {
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 
 #tosPP-small-ToS {
   margin-bottom: 14px;
 }
 
 #noFxaCaption {
   line-height: 30px;
@@ -670,17 +674,17 @@ separator.thin:not([orient="vertical"]) 
 
 .search-tooltip {
   font-size: 1.25rem;
   position: absolute;
   padding: 0 10px;
   background-color: #ffe900;
   border: 1px solid #d7b600;
   -moz-user-select: none;
-  bottom: 35px;
+  bottom: 36px;
 }
 
 .search-tooltip:hover,
 .search-tooltip:hover::before {
   opacity: .1;
 }
 
 .search-tooltip::before {
@@ -704,16 +708,22 @@ separator.thin:not([orient="vertical"]) 
 .search-tooltip-parent {
   position: relative;
 }
 
 .visually-hidden {
   visibility: hidden;
 }
 
+menulist {
+  height: 30px;
+  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 */
   margin-inline-end: 6px;
 }
 
 menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left > .menu-iconic-icon {
   width: 8px;
--- a/browser/themes/windows/preferences/in-content/preferences.css
+++ b/browser/themes/windows/preferences/in-content/preferences.css
@@ -18,14 +18,13 @@ caption > label:not(.dialogTitle) {
 .help-button {
   font-size: 1.08rem;
 }
 
 .actionsMenu > .menulist-label-box > .menulist-icon {
   margin-inline-end: 9px;
 }
 
-textbox + button,
 filefield + button {
   margin-inline-start: -4px;
   margin-top: 4px;
   margin-bottom: 4px;
 }
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -7,23 +7,16 @@
 xul|tab[visuallyselected] {
   /* Override styles for tab[selected] from
      toolkit/themes/linux/global/tabbox.css */
   margin-bottom: 0;
   border-bottom-left-radius: 0;
   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;
 }
 
 xul|button > xul|*.button-box,
 xul|menulist > xul|*.menulist-label-box {
   -moz-appearance: none;
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -9,23 +9,16 @@ xul|tabs {
   padding-right: 0;
   padding-left: 0;
 }
 
 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;
 }
 
 xul|caption {
   padding-inline-start: 0;
 }
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -17,17 +17,17 @@
   --in-content-box-background-active: #dadada;
   --in-content-box-border-color: #d7d7db;
   --in-content-item-hover: rgba(0,149,221,0.25);
   --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #0a84ff;
   --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;
   --in-content-category-background-hover: rgba(12,12,13,0.1);
   --in-content-category-background-active: rgba(12,12,13,0.15);
   --in-content-category-background-selected-hover: rgba(12,12,13,0.15);
   --in-content-category-background-selected-active: rgba(12,12,13,0.2);
   --in-content-tab-color: #424f5a;
@@ -106,17 +106,17 @@ xul|groupbox {
   padding: 0;
   font-size: 1.25rem;
 }
 
 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;
   margin-inline-end: 0 !important;
 }
 
 /* tabpanels and tabs */
 
@@ -187,17 +187,24 @@ xul|menulist {
   color: var(--in-content-text-color);
   border: 1px solid var(--in-content-box-border-color);
   -moz-border-top-colors: none !important;
   -moz-border-right-colors: none !important;
   -moz-border-bottom-colors: none !important;
   -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]) {
   background-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
   background-position: right 3px center;
   background-repeat: no-repeat;
   background-size: auto 18px;
   font-size: inherit;
@@ -336,21 +343,22 @@ html|*.help-button {
   background-position: center center;
   background-size: contain;
 }
 
 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 {
   min-height: initial;
   margin-inline-start: 10px !important;
   margin-inline-end: 2px !important;
 }
 
@@ -600,18 +608,18 @@ html|*.toggle-container-with-text {
 
 xul|radio {
   margin-inline-start: 0;
   -moz-appearance: none;
 }
 
 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;
   background-color: #f1f1f1;
   background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 }
 
@@ -695,17 +703,16 @@ xul|*.radio-label-box {
   -moz-user-select: none;
 }
 
 *|*.category-icon {
   width: 24px;
   height: 24px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
-  fill-opacity: 0.8;
 }
 
 *|*.category[selected] > *|*.category-icon,
 *|*.category.selected > *|*.category-icon {
   fill-opacity: 1;
 }
 
 @media (max-width: 830px) {
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -3,23 +3,16 @@
    - You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../../shared/in-content/common.inc.css
 
 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;
 }
 
 xul|checkbox {
   padding-inline-start: 0;
 }