--- a/browser/components/preferences/in-content-new/main.xul
+++ b/browser/components/preferences/in-content-new/main.xul
@@ -344,33 +344,33 @@
                     id="browserStartupBlank"/>
           <menuitem label="&startupPrevSession.label;"
                     value="3"
                     id="browserStartupLastSession"/>
           </menupopup>
         </menulist>
       </html:td>
     </html:tr>
-    <html:tr>
+    <html:tr class="tableGroup">
       <html:td class="label-cell">
         <label accesskey="&homepage2.accesskey;"
                control="browserHomePage">&homepage2.label;</label>
       </html:td>
       <html:td class="content-cell">
         <textbox id="browserHomePage"
                  class="padded uri-element content-cell-item"
                  type="autocomplete"
                  autocompletesearch="unifiedcomplete"
                  onsyncfrompreference="return gMainPane.syncFromHomePref();"
                  onsynctopreference="return gMainPane.syncToHomePref(this.value);"
                  placeholder="&abouthome.pageTitle;"
                  preference="browser.startup.homepage"/>
       </html:td>
     </html:tr>
-    <html:tr>
+    <html:tr class="tableSubGroup">
       <html:td class="label-cell" />
       <html:td class="content-cell homepage-buttons">
         <button id="useCurrent"
                 class="content-cell-item"
                 label=""
                 accesskey="&useCurrentPage.accesskey;"
                 label1="&useCurrentPage.label;"
                 label2="&useMultiple.label;"
@@ -751,17 +751,16 @@
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1">&updateApplication.label;</label>
 </hbox>
 
 <!-- Update -->
 <groupbox id="updateApp" data-category="paneGeneral" hidden="true">
   <label>&updateApplicationDescription.label;</label>
-  <separator/>
   <hbox align="start">
     <vbox flex="1">
       <description>
         &updateApplication.version.pre;<label id="version"/>&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"/>
@@ -867,17 +866,16 @@
         <button label="&update.updateButton.label3;"
                 accesskey="&update.updateButton.accesskey;"
                 disabled="true"/>
       </hbox>
     </deck>
   </vbox>
 #endif
 
-  <separator/>
 #ifdef MOZ_UPDATER
   <description>&updateApplication.description;</description>
   <radiogroup id="updateRadioGroup">
     <radio id="autoDesktop"
            value="auto"
            label="&updateAuto3.label;"
            accesskey="&updateAuto3.accesskey;"/>
     <radio value="checkOnly"

--- a/browser/components/preferences/in-content-new/privacy.xul
+++ b/browser/components/preferences/in-content-new/privacy.xul
@@ -488,29 +488,31 @@
           </label>
         </hbox>
       </vbox>
       <vbox id="trackingProtectionAdvancedSettings">
         <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
         <hbox>
           <button id="trackingProtectionExceptions"
                   class="accessory-button"
+                  flex="1"
                   hidden="true"
                   label="&trackingProtectionExceptions.label;"
                   accesskey="&trackingProtectionExceptions.accesskey;"
                   preference="pref.privacy.disable_button.tracking_protection_exceptions"
                   searchkeywords="&removepermission2.label;
                                   &removeallpermissions2.label;
                                   &button.cancel.label;
                                   &button.ok.label;"/>
         </hbox>
         <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
         <hbox>
           <button id="changeBlockList"
                   class="accessory-button"
+                  flex="1"
                   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">

--- a/browser/components/preferences/in-content-new/search.xul
+++ b/browser/components/preferences/in-content-new/search.xul
@@ -23,18 +23,18 @@
           class="subcategory"
           hidden="true"
           data-category="paneSearch">
       <label class="header-name" flex="1">&paneSearch.title;</label>
     </hbox>
 
     <!-- Default Search Engine -->
     <groupbox id="defaultEngineGroup" data-category="paneSearch">
-      <caption label="&defaultSearchEngine.label;"/>
-      <label>&chooseYourDefaultSearchEngine2.label;</label>
+      <caption><label>&defaultSearchEngine.label;</label></caption>
+      <description>&chooseYourDefaultSearchEngine2.label;</description>
       <hbox>
         <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
         <hbox>
           <menulist id="defaultEngine">
             <menupopup/>
           </menulist>
         </hbox>
       </hbox>
@@ -49,18 +49,18 @@
         <hbox id="urlBarSuggestionPermanentPBLabel"
               align="center" class="indent">
           <label flex="1">&urlBarSuggestionsPermanentPB.label;</label>
         </hbox>
       </vbox>
     </groupbox>
 
     <groupbox id="oneClickSearchProvidersGroup" data-category="paneSearch">
-      <caption label="&oneClickSearchEngines.label;"/>
-      <label>&chooseWhichOneToDisplay2.label;</label>
+      <caption><label>&oneClickSearchEngines.label;</label></caption>
+      <description>&chooseWhichOneToDisplay2.label;</description>
 
       <tree id="engineList" flex="1" rows="8" hidecolumnpicker="true" editable="true"
             seltype="single">
         <treechildren id="engineChildren" flex="1"/>
         <treecols>
           <treecol id="engineShown" type="checkbox" editable="true" sortable="false"/>
           <treecol id="engineName" flex="4" label="&engineNameColumn.label;" sortable="false"/>
           <treecol id="engineKeyword" flex="1" label="&engineKeywordColumn.label;" editable="true"
@@ -76,15 +76,12 @@
         <spacer flex="1"/>
         <button id="removeEngineButton"
                 class="searchEngineAction"
                 label="&removeEngine.label;"
                 accesskey="&removeEngine.accesskey;"
                 disabled="true"
                 />
       </hbox>
-
-      <separator class="thin"/>
-
       <hbox id="addEnginesBox" pack="start">
         <label id="addEngines" class="text-link">&findMoreSearchEngines.label;</label>
       </hbox>
     </groupbox>

--- a/browser/components/preferences/in-content-new/searchResults.xul
+++ b/browser/components/preferences/in-content-new/searchResults.xul
@@ -1,16 +1,16 @@
 <!-- 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/. -->
 
 <stringbundle id="searchResultBundle" src="chrome://browser/locale/preferences/preferences.properties"/>
 
 <hbox id="header-searchResults"
-      class="header"
+      class="subcategory"
       hidden="true"
       data-category="paneSearchResults">
   <label class="header-name" flex="1">&paneSearchResults.title;</label>
 </hbox>
 
 <groupbox class="no-results-message" data-category="paneSearchResults" hidden="true">
   <vbox>
     <label id="sorry-message"></label>

--- a/browser/components/preferences/in-content-new/sync.xul
+++ b/browser/components/preferences/in-content-new/sync.xul
@@ -197,30 +197,28 @@
     </hbox>
     <groupbox>
       <caption>
         <label control="fxaSyncComputerName">
           &fxaSyncDeviceName.label;
         </label>
       </caption>
       <hbox id="fxaDeviceName">
-        <textbox id="fxaSyncComputerName" disabled="true"/>
-        <hbox>
-          <button id="fxaChangeDeviceName"
-                  label="&changeSyncDeviceName2.label;"
-                  accesskey="&changeSyncDeviceName2.accesskey;"/>
-          <button id="fxaCancelChangeDeviceName"
-                  label="&cancelChangeSyncDeviceName.label;"
-                  accesskey="&cancelChangeSyncDeviceName.accesskey;"
-                  hidden="true"/>
-          <button id="fxaSaveChangeDeviceName"
-                  label="&saveChangeSyncDeviceName.label;"
-                  accesskey="&saveChangeSyncDeviceName.accesskey;"
-                  hidden="true"/>
-        </hbox>
+        <textbox id="fxaSyncComputerName" flex="1" disabled="true"/>
+        <button id="fxaChangeDeviceName"
+                label="&changeSyncDeviceName2.label;"
+                accesskey="&changeSyncDeviceName2.accesskey;"/>
+        <button id="fxaCancelChangeDeviceName"
+                label="&cancelChangeSyncDeviceName.label;"
+                accesskey="&cancelChangeSyncDeviceName.accesskey;"
+                hidden="true"/>
+        <button id="fxaSaveChangeDeviceName"
+                label="&saveChangeSyncDeviceName.label;"
+                accesskey="&saveChangeSyncDeviceName.accesskey;"
+                hidden="true"/>
       </hbox>
     </groupbox>
     <label class="fxaMobilePromo">
         &mobilePromo3.start;<!-- We put these comments to avoid inserting white spaces
         --><image class="androidLink"></image><label class="text-link" id="fxaMobilePromo-android-hasFxaAccount"><!--
         -->&mobilePromo3.androidLink;</label><!--
         -->&mobilePromo3.iOSBefore;<!--
         --><image class="iOSLink"></image><label class="text-link" id="fxaMobilePromo-ios-hasFxaAccount"><!--

--- a/browser/themes/osx/preferences/in-content-new/preferences.css
+++ b/browser/themes/osx/preferences/in-content-new/preferences.css
@@ -1,35 +1,28 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/preferences.inc.css
 
-prefpane .groupbox-title {
-  background: none;
-  margin-bottom: 0;
-}
-
 .actionsMenu > .menulist-label-box > .menulist-icon {
   margin-top: 2px;
   margin-inline-start: 2px;
   margin-inline-end: 8px !important;
 }
 
 #downloadFolder > .fileFieldContentBox {
   padding-inline-start: 3px;
 }
 
-textbox + button {
-  margin-inline-start: -4px;
-}
-
 filefield + button {
   margin-inline-start: -8px;
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 
 #popupPolicyRow {
   /* Override styles from
      browser/themes/osx/preferences/preferences.css */
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
   border-bottom: none;

--- a/browser/themes/osx/preferences/preferences.css
+++ b/browser/themes/osx/preferences/preferences.css
@@ -23,21 +23,16 @@ description {
   margin-bottom: 4px !important;
 }
 
 prefpane .groupbox-body {
   -moz-appearance: none;
   padding: 8px 4px 4px 4px;
 }
 
-prefpane .groupbox-title {
-  background: url("chrome://global/skin/50pct_transparent_grey.png") repeat-x bottom left;
-  margin-bottom: 4px;
-}
-
 tabpanels {
   padding: 20px 7px 7px;
 }
 
 caption {
   padding-inline-start: 5px;
   padding-top: 4px;
   padding-bottom: 2px;

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -1,18 +1,25 @@
 %if 0
 /* - 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/. */
 %endif
 @namespace html "http://www.w3.org/1999/xhtml";
 
+* {
+  -moz-user-select: text;
+}
+
+:root {
+  --in-content-category-background: #fafafc;
+}
+
 .main-content {
   padding-top: 0;
-  background-color: #fafafc;
 }
 
 .pane-container {
   display: block;
   max-width: 800px;
 }
 
 #mainPrefPane {
@@ -23,76 +30,80 @@
 }
 
 #mainPrefPane groupbox,
 #mainPrefPane deck,
 #mainPrefPane description {
   font-size: 1.36rem;
 }
 
+groupbox + groupbox {
+  margin-top: 16px;
+}
+
 input,
 description.indent,
 .indent > description {
   font-size: 1.18rem !important;
 }
 
 description.indent,
 .indent > description {
   color: #737373;
 }
 
-* {
-  -moz-user-select: text;
-}
-
 button,
 treecol,
 html|option {
   /* override the * rule */
   -moz-user-select: none;
 }
 
-caption > label {
-  font-size: 1.55rem;
-  font-weight: 600;
+description,
+label {
+  line-height: 30px;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+description > checkbox {
+  vertical-align: bottom;
 }
 
-#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;
-  fill: #2292d0;
-  stroke: none;
-  width: 21px;
-  height: 21px;
+.indent {
+  margin-inline-start: 28px !important;
 }
 
-#engineList treechildren::-moz-tree-image(engineShown, checked, selected),
-#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked, selected) {
-  fill: white;
-  stroke: #0095dd;
+separator.thin:not([orient="vertical"]) {
+  height: 8px;
 }
 
-#engineList treechildren::-moz-tree-row,
-#blocklistsTree treechildren::-moz-tree-row {
-  min-height: 36px;
-}
-
-#selectionCol {
-  min-width: 26px;
+.checkbox-check {
+  margin-inline-end: 8px;
+  width: 20px;
+  height: 20px;
 }
 
 .learnMore {
   margin-inline-start: 10px;
   font-weight: normal;
   white-space: nowrap;
 }
 
 .accessory-button {
   min-width: 145px;
+  margin: 2px 0;
+}
+
+.groupbox-title {
+  margin-top: 16px;
+}
+
+.groupbox-body {
+  margin-top: 4px;
 }
 
 /* Subcategory title */
 
 /**
  * The first subcategory title for each category should not have margin-top.
  */
 
@@ -104,89 +115,75 @@ caption > label {
 
 .header-name {
   font-size: 2rem;
   font-weight: 300;
 }
 
 /* Category List */
 
-#categories {
-  max-height: 100vh;
-}
-
-#categories > scrollbox {
-  overflow-x: hidden !important;
-}
-
-/**
- * We want the last category to always have non-0 getBoundingClientRect().bottom
- * so we can use the value to figure out the max-height of the list in
- * preferences.js, so use collapse instead of display: none; if it's hidden
- */
-#categories > .category[hidden="true"] {
-  display: -moz-box;
-  visibility: collapse;
-}
-
 #category-general > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/general.svg");
 }
 
 #category-search > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/search.svg");
 }
 
 #category-privacy > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/privacy-security.svg");
 }
 
 #category-sync > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/sync.svg");
 }
 
-@media (max-width: 800px) {
-  .category-name {
-    display: none;
-  }
-  .help-button {
-    font-size: 0 !important;
-  }
-}
-
 /* header */
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 .header[hidden=true] {
   display: none;
 }
 
 /* General Pane */
 
+#startupGroup {
+  margin-top: 0px !important;
+}
+
 #startupTable {
+  margin-top: 32px;
   border-collapse: collapse;
 }
 
 #startupTable > tr > td {
   padding: 0; /* remove the padding from html.css */
 }
 
-#startupTable > tr:not(:first-child) > td {
-  padding-top: 0.5em; /* add a spacing between the rows */
+#startupTable > .tableGroup > td {
+  padding-top: 32px;
+}
+
+#startupTable > .tableSubGroup > td {
+  padding-top: 8px;
 }
 
 #startupTable > tr > .label-cell {
   text-align: end;
   width: 0; /* make the column as small as possible */
 }
 
+#startupTable > tr > .content-cell:not(:first-child) {
+  padding-inline-start: 8px;
+}
+
 #startupTable > tr > .label-cell > label {
   white-space: nowrap;
 }
 
 #startupTable > tr > .content-cell > menulist,
 #startupTable > tr > .content-cell > textbox {
   width: calc(100% - 8px);
   margin-left: 4px;
@@ -197,19 +194,18 @@ caption > label {
   display: flex;
   flex-wrap: wrap;
 }
 
 #startupTable > tr > .homepage-buttons > .content-cell-item {
   flex-grow: 1;
 }
 
-#useFirefoxSync  {
-  font-size: 90%;
-  margin-inline-end: 8px !important;
+.content-cell-item {
+  margin: 0 4px;
 }
 
 #getStarted {
   font-size: 90%;
 }
 
 #isNotDefaultLabel,
 #signedOutAccountBoxTitle {
@@ -220,25 +216,44 @@ caption > label {
   margin-inline-start: 0;
 }
 
 #browserHomePage:-moz-locale-dir(rtl) input {
   unicode-bidi: plaintext;
   direction: rtl;
 }
 
-#defaultFontSizeLabel {
-  /* !important needed to override common !important rule */
-  margin-inline-start: 4px !important;
+#updateApp > .groupbox-body > label {
+  margin: 0 0 4px 0;
+  line-height: 30px;
+}
+
+#updateApp > .groupbox-body > description {
+  line-height: 30px;
+  margin: 0;
 }
 
-/* Applications Pane Styles */
+#updateBox {
+  margin-top: 8px;
+  margin-bottom: 32px;
+}
+
+#updateBox button {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#updateRadioGroup radio {
+  height: 30px;
+  margin: 2px 0;
+}
 
 #filter {
   margin-inline-start: 0;
+  margin-bottom: 8px;
 }
 
 #handlersView {
   height: 25em;
 }
 
 #handlersView > richlistitem {
   min-height: 36px !important;
@@ -261,81 +276,118 @@ caption > label {
 .actionsMenu > menupopup > menuitem {
   padding-inline-start: 10px !important;
 }
 
 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
   margin-inline-end: 8px !important;
 }
 
-/* Privacy pane */
+/* 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;
+  fill: #2292d0;
+  stroke: none;
+  width: 21px;
+  height: 21px;
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
+  fill: white;
+  stroke: #0095dd;
+}
+
+#engineList > treechildren::-moz-tree-row,
+#blocklistsTree > treechildren::-moz-tree-row {
+  min-height: 36px;
+}
+
+#selectionCol {
+  min-width: 26px;
+}
+
+#addEnginesBox {
+  margin: 4px 0 0 0;
+}
+
+/* Privacy Pane */
+
+#formAutofillGroup {
+  margin-top: 28px;
+}
 
 .doNotTrackLearnMore {
   margin-inline-start: calc(1em + 30px);
   margin-bottom: 1em;
   font-weight: normal;
 }
 
 .doNotTrackLearnMore > label {
   font-size: 1em !important;
   margin-left: 0;
 }
 
+#locationBarGroup > .text-link {
+  margin-top: 6px;
+  line-height: 30px;
+}
+
+#allowSmartSize {
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+
 #doNotTrackLearnMoreBox {
-  margin-top: 30px
+  margin-top: 32px;
 }
 
 #trackingProtectionAdvancedSettings {
   margin-inline-start: 15px;
 }
 
+#historyPane {
+  margin-top: 4px;
+}
+
 /* Collapse the non-active vboxes in decks to use only the height the
    active vbox needs */
 #historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
 #historyPane:not([selectedIndex="2"]) > #historyCustomPane,
 #weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
 #fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
 #fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
   visibility: collapse;
 }
 
-/* XXX This style is for bug 740213 and should be removed once that
-   bug has a solution. */
-description > html|a {
-  cursor: pointer;
-}
-
-description > checkbox {
-  vertical-align: middle;
-}
-
 #weavePrefsDeck > vbox > label,
 #weavePrefsDeck > vbox > groupbox,
 #weavePrefsDeck > vbox > description,
 #weavePrefsDeck > #hasFxaAccount > vbox > label,
 #weavePrefsDeck > #hasFxaAccount > hbox > label {
   /* no margin-inline-start for elements at the beginning of a line */
   margin-inline-start: 0;
 }
 
-groupbox {
-  /* Give more available space for displaying tooltip on scrollable groupbox */
-  margin-top: 15px !important;
-}
-
 #tabsElement {
   margin-inline-end: 4px; /* add the 4px end-margin of other elements */
 }
 
-.indent {
-  /* !important needed to override margin-inline-start:0 !important; rule
-     define in common.css for labels */
-  margin-inline-start: 33px !important;
-}
-
 .text-link {
   margin-bottom: 0;
 }
 
 #showUpdateHistory {
   margin-inline-start: 0;
 }
 
@@ -369,16 +421,17 @@ groupbox {
 .dialogBox[resizable="true"] {
   resize: both;
   overflow: hidden;
   min-height: 20em;
   min-width: 66ch;
 }
 
 .dialogBox > .groupbox-title {
+  margin-top: 0;
   padding: 3.5px 0;
   background-color: #F1F1F1;
   border-bottom: 1px solid #C1C1C1;
 }
 
 .dialogTitle {
   text-align: center;
   -moz-user-select: none;
@@ -457,16 +510,21 @@ groupbox {
 #noFxaAccount {
   padding-top: 15px;
 }
 
 #fxaContentWrapper {
   -moz-box-flex: 1;
 }
 
+#useFirefoxSync  {
+  font-size: 90%;
+  margin-inline-end: 8px !important;
+}
+
 #noFxaGroup {
   -moz-box-flex: 1;
   margin: 0;
 }
 
 #fxaContentWrapper {
   padding-right: 15px;
 }
@@ -476,18 +534,20 @@ groupbox {
   -moz-box-align: start;
 }
 
 #fxaSyncEngines > vbox:first-child {
   margin-right: 80px;
 }
 
 #fxaSyncComputerName {
-  margin-inline-start: 0px;
-  -moz-box-flex: 1;
+  margin-top: 3px;
+  margin-inline-start: -4px;
+  margin-inline-end: 0;
+  margin-bottom: 0;
 }
 
 #tosPP-small-ToS {
   margin-bottom: 14px;
 }
 
 #noFxaCaption {
   margin-bottom: 11px;
@@ -617,34 +677,34 @@ groupbox {
   .update-throbber {
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
 
 .help-button {
   position: fixed;
   left: 0;
-  /* Needs to have enough gap from the bottom to not
-     get behind the status panel (bug 1357841). */
-  bottom: 2rem;
+  bottom: 36px;
   background-image: url("chrome://browser/skin/preferences/in-content-new/help.svg");
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.8;
   font-size: 13px;
   line-height: 16px;
-  background-position: 15px;
-  padding-inline-start: 35px;
+  height: 16px;
+  background-position: 8px;
+  padding-inline-start: 38px;
+  margin-inline-start: 44px;
   white-space: nowrap;
 }
 
 .help-button:-moz-locale-dir(rtl) {
+  background-position: right 8px top 0;
   left: auto;
   right: 0;
-  background-position: right 15px top 0;
 }
 
 .help-button:hover {
   fill: currentColor;
   fill-opacity: 0.9;
 }
 
 .help-button:link,
@@ -672,17 +732,17 @@ groupbox {
   background-color: var(--in-content-page-background);
   width: 100%;
   top: 0;
   z-index: 1;
 }
 
 #searchInput {
   width: 250px;
-  margin: 20px 0;
+  margin: 20px 0 30px 0;
 }
 
 #searchInput .textbox-search-icons:not([selectedIndex="1"]) {
   display: none;
 }
 
 .search-tooltip {
   font-size: 1.25rem;

deleted file mode 100644
index 0e462a46fa245afd8401cfc9b37562abe1d381e4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -1,17 +1,16 @@
 # 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/.
 
 #include ../../shared/jar.inc.mn
 
 toolkit.jar:
   skin/classic/global/10pct_transparent_grey.png
-  skin/classic/global/50pct_transparent_grey.png
   skin/classic/global/autocomplete.css
   skin/classic/global/button.css
   skin/classic/global/checkbox.css
   skin/classic/global/colorpicker.css
   skin/classic/global/commonDialog.css
   skin/classic/global/customizeToolbar.css
   skin/classic/global/dialog.css
   skin/classic/global/dropmarker.css

--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -80,38 +80,38 @@ xul|caption > xul|label {
 }
 
 xul|caption > xul|checkbox,
 xul|caption > xul|label {
   margin: 0 !important;
 }
 
 *|*.main-content {
-  padding-top: 40px;
-  padding-inline-end: 44px; /* compensate the 4px margin of child elements */
-  padding-bottom: 48px;
-  padding-inline-start: 48px;
+  padding: 40px 28px;
   overflow: auto;
 }
 
 xul|prefpane > xul|*.content-box {
   overflow: visible;
 }
 
 /* groupboxes */
 
 xul|groupbox {
   -moz-appearance: none;
   border: none;
-  margin: 15px 0 0;
-  padding-inline-start: 0;
-  padding-inline-end: 0;
+  margin: 0;
+  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|description {
   /* !important needed to override toolkit !important rule */
   margin-inline-start: 0 !important;
   margin-inline-end: 0 !important;
 }
 
 /* tabpanels and tabs */
@@ -185,16 +185,17 @@ 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;
 }
 
 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;
@@ -535,18 +536,19 @@ html|a:hover:active,
 .text-link:hover:active {
   color: var(--in-content-link-color-active);
   text-decoration: none;
 }
 
 /* Checkboxes and radio buttons */
 
 xul|checkbox {
-  margin-inline-start: 0;
   -moz-appearance: none;
+  height: 30px;
+  margin: 2px 0;
 }
 
 xul|*.checkbox-check,
 html|input[type="checkbox"] {
   -moz-appearance: none;
   width: 23px;
   height: 23px;
   border: 1px solid var(--in-content-box-border-color);
@@ -621,37 +623,37 @@ xul|*.radio-check[selected] {
 }
 
 xul|radio[disabled="true"] > xul|*.radio-check {
   opacity: 0.5;
 }
 
 xul|*.radio-label-box {
   margin-inline-start: -1px; /* negative margin for the transparent border */
-  margin-inline-end: 10px;
+  margin-inline-end: 8px;
   padding-inline-start: 0;
 }
 
 /* Category List */
 
 *|*#categories {
   -moz-appearance: none;
-  background-color: var(--in-content-category-background);
-  padding-top: 39px;
+  background-color: var(--in-content-page-background);
+  padding-top: 70px;
   margin: 0;
   border-width: 0;
 }
 
 *|*.category {
+  width: 240px;
+  min-height: 48px;
   -moz-appearance: none;
   color: var(--in-content-category-text);
-  border-inline-end-width: 0;
-  padding-inline-start: 40px;
-  padding-inline-end: 21px;
-  min-height: 40px;
+  padding-inline-start: 44px;
+  padding-inline-end: 10px;
   transition: background-color 150ms;
 }
 
 *|*.category[selected],
 *|*.category.selected {
   color: var(--in-content-category-text-selected);
   background: none;
 }
@@ -673,30 +675,48 @@ xul|*.radio-label-box {
 *|*.category-icon {
   width: 24px;
   height: 24px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.8;
 }
 
+*|*.category[selected] > *|*.category-icon {
+  fill-opacity: 1;
+}
+
+@media (max-width: 960px) {
+  #categories {
+    width: 118px;
+  }
+
+  .category-icon ~ .category-name {
+    display: none;
+  }
+
+  .help-button {
+    font-size: 0 !important;
+  }
+}
+
 /* header */
 
 *|*.header {
   border-bottom: 1px solid var(--in-content-header-border-color);
   margin-inline-end: 4px; /* add the 4px end-margin of other elements */
   margin-bottom: 15px;
   padding-bottom: 15px;
   -moz-box-align: baseline;
 }
 
 *|*.header-name {
-  font-size: 2.5rem;
-  font-weight: normal;
-  line-height: 40px;
+  font-size: 2rem;
+  font-weight: 300;
+  line-height: 30px;
   margin: 0;
   -moz-user-select: none;
 }
 
 /* File fields */
 
 xul|filefield {
   -moz-appearance: none;