Bug 1398125 - Remove vertical borders in Win7 light/dark theme, add Photon borders around tabs. r=dao draft
authorJohann Hofmann <jhofmann@mozilla.com>
Wed, 13 Sep 2017 20:35:02 +0200
changeset 664130 018225fae20af8a5143fd03a89ec2788bd7030f6
parent 664064 e5f80a639bfe68b68693a5be610f9d36b6c5ad00
child 731378 69983cce87c60b402cb1f096d04cc3b297bcd40b
push id79628
push userbmo:jhofmann@mozilla.com
push dateWed, 13 Sep 2017 18:36:23 +0000
reviewersdao
bugs1398125
milestone57.0a1
Bug 1398125 - Remove vertical borders in Win7 light/dark theme, add Photon borders around tabs. r=dao MozReview-Commit-ID: DsdfBJysGnA
browser/themes/windows/compacttheme.css
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -2,16 +2,17 @@
 % 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/compacttheme.inc.css
 
 :root {
    /* Matches the #browser-border-start, #browser-border-end color */
   --chrome-nav-bar-separator-color: rgba(10, 31, 51, 0.35);
+  --chrome-tabs-border-color: hsla(240, 5%, 5%, 0.3);
 }
 
 /* The window background is white due to no accentcolor in the lightweight
    theme. It can't be changed to transparent when there is no compositor
    (Win 7 in classic / basic theme), or else dragging and focus become
    broken. So instead just show the normal titlebar in that case, and override
    the window color as transparent when the compositor is available. */
 @media (-moz-windows-compositor: 0) {
@@ -37,39 +38,26 @@
 @media (-moz-windows-glass) {
   .tabbrowser-tab {
     background-color: var(--chrome-background-color);
   }
 }
 
 @media (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8) {
-  /* It'd be nice if there was an element in the scrollbox's inner content
-     that collapsed to the current width of the tabs. Since there isn't we
-     need to handle overflowing and non-overflowing tabs separately.
-
-     In the case of overflowing tabs, set a border-top on the entire container,
-     otherwise we need to set it on each element individually */
-  #main-window[sizemode=normal] .tabbrowser-tabs[overflow="true"] {
-    background-clip: padding-box;
-    border-top: 1px solid var(--chrome-nav-bar-separator-color);
-    border-inline-end: 1px solid var(--chrome-nav-bar-separator-color);
+  #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
+    border-top: 1px solid var(--chrome-tabs-border-color);
   }
 
-  /* Add a border to the left of the first tab (or scroll arrow).  Using .tabbrowser-tabs
-     instead of #TabsToolbar because it will work even in customize mode. */
-  #main-window[sizemode=normal] .tabbrowser-tabs {
-    background-clip: padding-box;
-    border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
-    border-inline-end: 1px solid transparent;
+  #tabbrowser-tabs > .tabbrowser-tab[first-tab="true"] > .tab-stack > .tab-background {
+    border-inline-start: 1px solid var(--chrome-tabs-border-color) !important;
   }
 
-  #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .closing-tabs-spacer {
-    background-clip: padding-box;
-    border-inline-start: 1px solid var(--chrome-nav-bar-separator-color);
+  #tabbrowser-tabs > .tabbrowser-tab[last-tab="true"] > .tab-stack > .tab-background {
+    border-inline-end: 1px solid var(--chrome-tabs-border-color) !important;
   }
 
   /* Use default window colors when in non-maximized mode */
   #tabbrowser-tabs,
   #TabsToolbar,
   #browser-panel,
   #titlebar-content {
     background: transparent;