Bug 1377174 - Tweak margin to match the spec r=jaws
authorRicky Chien <ricky060709@gmail.com>
Wed, 16 Aug 2017 15:59:34 +0800
changeset 374990 7711984099f82120ff1d344491e12edf7bbe4ae6
parent 374989 4ee1bb020c9f439781aacd06e1a2238069870e9c
child 374991 a531a8c8f75ac426fac7a5b7b681147019cd2175
push id48882
push userrchien@mozilla.com
push dateWed, 16 Aug 2017 08:01:43 +0000
treeherderautoland@7711984099f8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1377174
milestone57.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 1377174 - Tweak margin to match the spec r=jaws
browser/components/preferences/in-content-new/main.xul
browser/components/preferences/in-content-new/privacy.xul
browser/components/preferences/in-content-new/search.xul
browser/components/preferences/in-content-new/searchResults.xul
browser/components/preferences/in-content-new/sync.xul
browser/themes/osx/preferences/in-content-new/preferences.css
browser/themes/osx/preferences/preferences.css
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/themes/osx/global/50pct_transparent_grey.png
toolkit/themes/osx/global/jar.mn
toolkit/themes/shared/in-content/common.inc.css
--- 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..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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;