Bug 1391599 - Port some tab tweaks from FX to TB. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Fri, 18 Aug 2017 13:55:50 +0200
changeset 29577 cf52e3f957bfc52b295f607c1b46b0e52212036c
parent 29576 519cd0ec740a38c471127046a23b53133378bd32
child 29578 74b47ccb34f601dcd06e312bbadb58a8b382682d
push id378
push userclokep@gmail.com
push dateMon, 13 Nov 2017 18:45:35 +0000
reviewersjorgk
bugs1391599, 1387754, 1387755, 1388044, 1388138, 1391328
Bug 1391599 - Port some tab tweaks from FX to TB. r=jorgk Referenced bugs: Bug 1387754 - Tab separators should span full height of the titlebar Bug 1387755 - Tab separator color is too light Bug 1388044 - Make the tab side borders not overlap the border to the navigation toolbar Bug 1388138 - Use lightweight themes' accent color to highlight the selected tab Bug 1391328 - Tabs on OSX shouldn't have a top border
mail/themes/shared/mail/tabmail.css
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -1,18 +1,19 @@
 /* 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/. */
 
 #tabs-toolbar {
-  --tab-separator-opacity: 0.2;
+  --tab-line-color: highlight;
+  --tab-toolbar-overlap: 1px;
 }
 
-#tabs-toolbar[brighttext] {
-  --tab-separator-opacity: 0.4;
+#tabs-toolbar:-moz-lwtheme {
+  --tab-line-color: var(--lwt-accent-color);
 }
 
 #tabs-toolbar {
   background-image: linear-gradient(to top, var(--tabs-border) 1px,
                     transparent 1px);
 }
 
 .tabmail-arrowscrollbox {
@@ -94,32 +95,36 @@
 
 /* Selected tab */
 
 .tab-background {
   border: 1px none transparent;
   background-clip: padding-box;
 }
 
-#mail-toolbar-menubar2:not([autohide=true]) ~ #tabs-toolbar > .tabmail-tabs >
+#mail-toolbar-menubar2[toolbarname]:not([autohide=true]) ~ #tabs-toolbar > .tabmail-tabs >
   .tabmail-tab > .tab-stack > .tab-background {
   border-top-style: solid;
 }
 
 .tab-background[selected=true] {
   border-left-style: solid;
   border-right-style: solid;
   border-color: var(--tabs-border);
+  border-image: linear-gradient(var(--tabs-border),
+                                var(--tabs-border) calc(100% - 1px - var(--tab-toolbar-overlap)),
+                                transparent calc(100% - 1px - var(--tab-toolbar-overlap)));
+  border-image-slice: 1;
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
 }
 
 .tab-line[selected=true] {
-  background-color: Highlight;
+  background-color: var(--tab-line-color);
 }
 
 /*
  * LightweightThemeConsumer will set the current lightweight theme's header
  * image to the lwt-header-image variable, used in each of the following rulesets.
  */
 
 /* Lightweight theme on tabs */
@@ -181,20 +186,25 @@
   border-left: 1px solid currentColor;
   opacity: 0;
   content: '';
   display: -moz-box;
 }
 
 .tabmail-tab:not([selected]):not(:hover) +
 .tabmail-tab:not([selected]):not(:hover)::before {
-  opacity: var(--tab-separator-opacity);
+  opacity: 0.2;
   transition: opacity 100ms ease;
 }
 
+:root[tabsintitlebar] #tabs-toolbar > .tabmail-tabs > .tabmail-tab::before {
+  margin-top: 0;
+  margin-bottom: 1px;
+}
+
 /**
  * Tab Scrollbox Arrow Buttons
  */
 
 .tabmail-arrowscrollbox > .scrollbutton-up,
 .tabmail-arrowscrollbox > stack > .scrollbutton-down {
   list-style-image: url("chrome://messenger/skin/icons/arrow-left.svg");
   -moz-context-properties: fill;