Bug 1391191 - Consolidate navigator toolbox bottom border styling. r=…

…johannh MozReview-Commit-ID: DUEPgD2Zdgc
iaxat · Aug 17, 2017 · 376e25e · 376e25e
1 parent c061af8
commit 376e25e
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 87 deletions.
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
@@ -30,11 +30,15 @@
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDShadow;
+
+  --toolbox-border-bottom-color: ThreeDShadow;
 }
 
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
+
+  --toolbox-border-bottom-color: rgba(0,0,0,.3);
 }
 
 #menubar-items {
@@ -51,21 +55,6 @@
   border-top: none;
 }
 
-#navigator-toolbox::after {
-  content: "";
-  display: -moz-box;
-  -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
-  border-bottom: 1px solid ThreeDShadow;
-}
-
-#navigator-toolbox:-moz-lwtheme::after {
-  border-bottom-color: rgba(0,0,0,.3);
-}
-
-:root[customizing] #navigator-toolbox::after {
-  display: none;
-}
-
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);

diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
@@ -31,34 +31,15 @@
   --arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
 
   --urlbar-separator-color: hsla(0,0%,16%,.2);
+
+  --toolbox-border-bottom-color: #e1e1e2;
 }
 
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
-}
-
-#navigator-toolbox::after {
-  -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
-  content: "";
-  display: -moz-box;
-  border-top: 1px solid hsla(0,0%,100%,.15);
-  border-bottom: 1px solid hsla(0,0%,0%,.15);
-  margin-top: -2px;
-  position: relative;
-  z-index: 2; /* navbar is at 1 */
-}
 
-@media (-moz-mac-yosemite-theme) {
-  #navigator-toolbox:-moz-window-inactive::after {
-    border-top-style: none;
-    border-bottom-color: hsla(0,0%,0%,.1);
-    margin-top: -1px;
-  }
-}
-
-:root[customizing] #navigator-toolbox::after {
-  display: none;
+  --toolbox-border-bottom-color: rgba(0,0,0,.3);
 }
 
 #navigator-toolbox toolbarbutton:-moz-lwtheme {
@@ -134,11 +115,6 @@
   background: var(--toolbar-bgcolor);
 }
 
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
-  /* add extra padding to compensate the bottom border */
-  padding-bottom: 2px;
-}
-
 /* Draw the bottom border of the tabs toolbar when it's not using
    -moz-appearance: toolbar. */
 #main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,

diff --git a/browser/themes/shared/browser.inc.css b/browser/themes/shared/browser.inc.css
@@ -16,6 +16,18 @@
 }
 %endif
 
+/* Toolbar / content area border */
+
+#navigator-toolbox::after {
+  content: "";
+  display: -moz-box;
+  border-bottom: 1px solid var(--toolbox-border-bottom-color);
+}
+
+:root[customizing] #navigator-toolbox::after {
+  display: none;
+}
+
 /* Bookmark toolbar */
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {

diff --git a/browser/themes/shared/compacttheme.inc.css b/browser/themes/shared/compacttheme.inc.css
@@ -21,7 +21,7 @@
   --chrome-background-color: hsl(240, 5%, 5%);
   --chrome-color: rgb(249, 249, 250);
   --chrome-secondary-background-color: hsl(240, 1%, 20%);
-  --chrome-navigator-toolbox-separator-color: hsla(240, 5%, 5%, .1);
+  --toolbox-border-bottom-color: hsla(240, 5%, 5%, .1);
   --chrome-nav-bar-separator-color: rgba(0,0,0,.2);
   --chrome-nav-buttons-background: hsla(240, 5%, 5%, .1);
   --chrome-nav-buttons-hover-background: hsla(240, 5%, 5%, .15);
@@ -40,7 +40,7 @@
   --chrome-background-color: #E3E4E6;
   --chrome-color: #18191a;
   --chrome-secondary-background-color: #f5f6f7;
-  --chrome-navigator-toolbox-separator-color: #cccccc;
+  --toolbox-border-bottom-color: #cccccc;
   --chrome-nav-bar-separator-color: #B6B6B8;
   --chrome-nav-buttons-background: #ffffff; /* --theme-body-background */
   --chrome-nav-buttons-hover-background: #DADBDB;
@@ -68,10 +68,6 @@ toolbar[brighttext] .toolbarbutton-1 {
   color: var(--chrome-color);
 }
 
-#navigator-toolbox:-moz-lwtheme::after {
-  border-bottom-color: var(--chrome-navigator-toolbox-separator-color);
-}
-
 #navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar),
 .browserContainer > findbar,
 #browser-bottombox {

diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css
@@ -294,16 +294,14 @@
   @media (-moz-os-version: windows-win7),
          (-moz-os-version: windows-win8) {
     /* Vertical toolbar border */
-    #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme),
-    #main-window:not([customizing])[sizemode=normal] #navigator-toolbox:-moz-lwtheme,
-    #main-window[customizing] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
+    #main-window[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme),
+    #main-window[sizemode=normal] #navigator-toolbox:-moz-lwtheme {
       border-left: 1px solid @toolbarShadowColor@;
       border-right: 1px solid @toolbarShadowColor@;
       background-clip: padding-box;
     }
 
-    #main-window:not([customizing])[sizemode=normal] #navigator-toolbox:not(:-moz-lwtheme)::after,
-    #main-window[customizing] #navigator-toolbox::after {
+    #main-window[sizemode=normal] #navigator-toolbox:not(:-moz-lwtheme)::after {
       box-shadow: 1px 0 0 @toolbarShadowColor@, -1px 0 0 @toolbarShadowColor@;
       margin-left: 1px;
       margin-right: 1px;

diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
@@ -30,6 +30,8 @@
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDLightShadow;
+
+  --toolbox-border-bottom-color: ThreeDShadow;
 }
 
 @media (-moz-windows-default-theme) {
@@ -41,6 +43,8 @@
     --toolbar-non-lwt-bgimage: none;
 
     --panel-separator-color: hsla(210,4%,10%,.14);
+
+    --toolbox-border-bottom-color: #e1e1e2;
   }
 }
 
@@ -49,6 +53,8 @@
 
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
+
+  --toolbox-border-bottom-color: rgba(0,0,0,.3);
 }
 
 #menubar-items {
@@ -70,30 +76,6 @@
   -moz-appearance: none;
 }
 
-#navigator-toolbox::after {
-  content: "";
-  display: -moz-box;
-  -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
-  border-bottom: 1px solid ThreeDShadow;
-}
-
-@media (-moz-windows-default-theme) {
-  @media (-moz-os-version: windows-win8),
-         (-moz-os-version: windows-win10) {
-    #navigator-toolbox::after {
-      border-bottom-color: #c2c2c2;
-    }
-  }
-}
-
-#navigator-toolbox:-moz-lwtheme::after {
-  border-bottom-color: rgba(0,0,0,.3);
-}
-
-:root[customizing] #navigator-toolbox::after {
-  display: none;
-}
-
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);

diff --git a/browser/themes/windows/compacttheme.css b/browser/themes/windows/compacttheme.css
@@ -128,16 +128,6 @@
   -moz-window-dragging: no-drag;
 }
 
-@media (-moz-os-version: windows-win7),
-       (-moz-os-version: windows-win8) {
-  /* And then we add them back on toolbars so that they don't look borderless: */
-  #main-window:not([customizing])[sizemode=normal] #navigator-toolbox::after,
-  #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
-    border-left: 1px solid hsla(209,67%,12%,0.35);
-    border-right: 1px solid hsla(209,67%,12%,0.35);
-  }
-}
-
 @media (-moz-os-version: windows-win10) {
   .titlebar-button:-moz-lwtheme {
     -moz-context-properties: stroke;