Bug 1484891 - Consolidate browser sidebar styling. r=dao

browser/themes/linux/browser.css

@@ -446,13 +446,8 @@ notification[value="translation"] menulist > .menulist-dropmarker {
 
 %include ../shared/sidebar.inc.css
 
-#sidebar-box {
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-}
-
-#sidebar-header {
-  border-bottom: 1px solid ThreeDShadow;
+#browser {
+  --sidebar-border-color: ThreeDShadow;
 }
 
 .sidebar-splitter {

browser/themes/osx/browser.css

@@ -592,6 +592,10 @@ html|input.urlbar-input {
 
 %include ../shared/sidebar.inc.css
 
+#browser {
+  --sidebar-border-color: hsla(240, 5%, 5%, .1);
+}
+
 #sidebar-box {
   -moz-appearance: -moz-mac-source-list;
   -moz-font-smoothing-background-color: -moz-mac-source-list;
@@ -599,15 +603,6 @@ html|input.urlbar-input {
   font-size: 1.0909rem;
 }
 
-#sidebar-header {
-  border-bottom: 1px solid hsla(240, 5%, 5%, .1);
-  background-color: transparent;
-}
-
-.sidebar-splitter {
-  border-color: hsla(240, 5%, 5%, .1);
-}
-
 /* ----- CONTENT ----- */
 
 .browserContainer > findbar {

browser/themes/shared/sidebar.inc.css

@@ -4,10 +4,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
-.sidebar-header,
+#sidebar-box {
+  --sidebar-background-color: -moz-Field;
+  --sidebar-text-color: -moz-FieldText;
+  background-color: var(--sidebar-background-color);
+  color: var(--sidebar-text-color);
+}
+
 #sidebar-header {
   font-size: 1.333em;
   padding: 8px;
+  border-bottom: 1px solid var(--sidebar-border-color);
+  background-color: transparent;
+  color: inherit;
 }
 
 %ifndef MOZ_WIDGET_GTK
@@ -17,6 +26,7 @@
   -moz-appearance: none;
   border: 0 solid;
   border-inline-end-width: 1px;
+  border-inline-end-color: var(--sidebar-border-color);
   min-width: 1px;
   width: 4px;
   background-image: none !important;
@@ -38,7 +48,6 @@
 }
 
 @media (min-resolution: 2dppx) {
-  .sidebar-throbber[loading="true"],
   #sidebar-throbber[loading="true"] {
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
     width: 16px;

browser/themes/windows/browser.css

@@ -658,17 +658,8 @@ html|*.urlbar-input:-moz-lwtheme::placeholder,
 
 %include ../shared/sidebar.inc.css
 
-#sidebar-box {
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-}
-
-#sidebar-header {
-  border-bottom: 1px solid ThreeDLightShadow;
-}
-
-.sidebar-splitter {
-  border-color: ThreeDLightShadow;
+#browser {
+  --sidebar-border-color: ThreeDLightShadow;
 }
 
 .browserContainer > findbar {