Bug 1408146 - Port bug 1391539 to TB: Show tab separators when hovering tabs. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Sat, 14 Oct 2017 17:09:24 +0200
changeset 29181 0a52075ec95bef0ee1696e0774b1f2bdef1377b8
parent 29180 ea5c170b3d95e3a1664858a94fc3423ce5999c5c
child 29182 4e295e35945bdda7ecc14324605514c5f5f32216
push id2068
push userclokep@gmail.com
push dateMon, 13 Nov 2017 19:02:14 +0000
treeherdercomm-beta@9c7e7ce8672b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1408146, 1391539
Bug 1408146 - Port bug 1391539 to TB: Show tab separators when hovering tabs. r=jorgk
mail/base/content/tabmail.css
mail/themes/linux/mail/tabmail.css
mail/themes/osx/mail/tabmail.css
mail/themes/shared/mail/tabmail.css
mail/themes/windows/mail/tabmail.css
--- a/mail/base/content/tabmail.css
+++ b/mail/base/content/tabmail.css
@@ -41,17 +41,17 @@
 .tab-label {
   white-space: nowrap;
 }
 
 .tab-close-button {
   display: none;
 }
 
-.tabmail-tabs > .tabmail-tab:first-child > .tab-stack > .tab-content >
+.tabmail-tabs > .tabmail-tab[first-tab] > .tab-stack > .tab-content >
 .tab-close-button {
   visibility: collapse;
 }
 
 .tabmail-tabs:not([closebuttons="noclose"]):not([closebuttons="closeatend"]) >
 .tabmail-tab[selected="true"]:not(:only-child) > .tab-stack > .tab-content > .tab-close-button {
   display: -moz-box;
 }
--- a/mail/themes/linux/mail/tabmail.css
+++ b/mail/themes/linux/mail/tabmail.css
@@ -33,20 +33,16 @@ tabpanels {
 /**
  * Tab
  */
 
 .tabmail-tab {
   list-style-image: url("moz-icon://stock/gtk-file?size=menu");
 }
 
-.tabmail-tab:not(:first-child) > .tab-stack > .tab-background[selected=true] {
-  border-inline-start-style: solid;
-}
-
 .tabmail-tab > .tab-stack > .tab-content > .tab-label-container {
   /* tabmail-tab focus ring */
   border: 1px dotted transparent;
   margin: -1px !important; /* let the border not consume any space, like outline */
 }
 
 .tabmail-tab[selected]:focus > .tab-stack > .tab-content > .tab-label-container {
   border-color: -moz-DialogText;
--- a/mail/themes/osx/mail/tabmail.css
+++ b/mail/themes/osx/mail/tabmail.css
@@ -26,23 +26,19 @@
   margin-top: 1px;
   margin-bottom: 0;
 }
 
 .tabmail-tab {
   list-style-image: url("chrome://messenger/skin/icons/item.png");
 }
 
-.tab-background[selected=true] {
-  border-inline-start-style: solid;
-}
-
-:root:-moz-any(:not([tabsintitlebar]), [sizemode=fullscreen]) .tabmail-tab:first-child >
-  .tab-stack > .tab-background[selected=true] {
-  border-inline-start-style: none;
+:root[tabsintitlebar]:not([sizemode=fullscreen]) .tabmail-tab[first-tab]::before {
+  content: '';
+  display: -moz-box;
 }
 
 .tabmail-tab[type="glodaSearch"] .tab-stack > .tab-content > .tab-icon-image {
   transform: scaleX(-1);
 }
 
 .tabmail-tab:not(:hover) > .tab-stack > .tab-content >
   .tab-icon-image:not([selected="true"]) {
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -1,13 +1,14 @@
 /* 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 {
+  --tabs-top-border-width: 0px;
   --tab-toolbar-overlap: 1px;
 }
 
 #tabs-toolbar:-moz-lwtheme {
   --tab-line-color: var(--lwt-accent-color);
 }
 
 #tabs-toolbar {
@@ -100,28 +101,29 @@
 
 /* Selected tab */
 
 .tab-background {
   border: 1px none transparent;
   background-clip: padding-box;
 }
 
+:root:not([tabsintitlebar]) #tabs-toolbar,
+#mail-toolbar-menubar2[toolbarname]:not([autohide=true]) ~ #tabs-toolbar {
+  --tabs-top-border-width: 1px;
+}
+
+:root:not([tabsintitlebar]) .tab-background,
 #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-inline-end-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;
+  border-top-color: var(--tabs-border);
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
 }
 
 .tab-line[selected=true] {
   background-color: var(--tab-line-color);
 }
@@ -178,35 +180,56 @@
 
 @media (min-resolution: 1.1dppx) {
   .tab-throbber {
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
 
 /* Tab separators */
+.tabmail-tab::after,
 .tabmail-tab::before {
-  margin-top: 5px;
-  margin-bottom: 4px;
-  margin-inline-start: -1px;
-  border-left: 1px solid currentColor;
-  opacity: 0;
-  content: '';
-  display: -moz-box;
+  border-left: 1px solid;
+  border-image: linear-gradient(transparent 5px,
+                                currentColor 5px,
+                                currentColor calc(100% - 5px),
+                                transparent calc(100% - 5px));
+  border-image-slice: 1;
+  opacity: 0.3;
 }
 
-.tabmail-tab:not([selected]):not(:hover) +
-.tabmail-tab:not([selected]):not(:hover)::before {
-  opacity: 0.2;
-  transition: opacity 100ms ease;
+/* Show full height tab separators on hover. */
+.tabmail-tab:not([selected=true]):last-child:hover::after,
+.tabmail-tab:not([selected]) + .tabmail-tab:not([selected]):hover::before,
+.tabmail-tab:not([selected]):hover + .tabmail-tab:not([selected])::before,
+:root[tabsintitlebar] #mail-toolbar-menubar2[autohide=true] ~ #tabs-toolbar > .tabmail-tabs > .tabmail-tab::after,
+:root[tabsintitlebar] #mail-toolbar-menubar2[autohide=true] ~ #tabs-toolbar > .tabmail-tabs > .tabmail-tab::before {
+  border-image: linear-gradient(transparent calc(1px + var(--tabs-top-border-width)),
+                                currentColor calc(1px + var(--tabs-top-border-width)),
+                                currentColor calc(100% - 1px - var(--tab-toolbar-overlap)),
+                                transparent calc(100% - 1px - var(--tab-toolbar-overlap)));
+  border-image-slice: 1;
 }
 
-:root[tabsintitlebar] #tabs-toolbar > .tabmail-tabs > .tabmail-tab::before {
-  margin-top: 0;
-  margin-bottom: 1px;
+/* Show full height tab separators on selected tabs. */
+.tabmail-tab[visuallyselected]::before,
+.tabmail-tab[visuallyselected]:last-child::after,
+.tabmail-tab[visuallyselected] + .tabmail-tab::before {
+  border-color: var(--tabs-border);
+  border-image: linear-gradient(transparent 1px,
+                                var(--tabs-border) 1px,
+                                var(--tabs-border) calc(100% - 1px - var(--tab-toolbar-overlap)),
+                                transparent calc(100% - 1px - var(--tab-toolbar-overlap))) 1 !important;
+  opacity: 1;
+}
+
+.tabmail-tab:last-child::after,
+.tabmail-tab + .tabmail-tab::before {
+  content: '';
+  display: -moz-box;
 }
 
 /**
  * Tab Scrollbox Arrow Buttons
  */
 
 .tabmail-arrowscrollbox > .scrollbutton-up,
 .tabmail-arrowscrollbox > stack > .scrollbutton-down {
--- a/mail/themes/windows/mail/tabmail.css
+++ b/mail/themes/windows/mail/tabmail.css
@@ -21,20 +21,16 @@
  * Tab
  */
 
 .tabmail-tab {
   list-style-image: url("chrome://global/skin/icons/folder-item.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-.tabmail-tab:not(:first-child) > .tab-stack > .tab-background[selected=true] {
-  border-inline-start-style: solid;
-}
-
 tabpanels {
   -moz-appearance: none;
   background-color: transparent;
 }
 
 /* tabmail-tab focus ring */
 .tabmail-tab > .tab-stack > .tab-content > .tab-label-container {
   border: 1px dotted transparent;
@@ -101,21 +97,16 @@ tabpanels {
   :root[tabsintitlebar] #tabs-toolbar {
     --toolbarbutton-icon-fill-opacity: 1;
   }
 
   :root[tabsintitlebar][sizemode=normal] #tabs-toolbar {
     margin-top: 6px;
   }
 
-  #mail-toolbar-menubar2:not([autohide=true]) ~ #tabs-toolbar > .tabmail-tabs >
-    .tabmail-tab > .tab-stack > .tab-background {
-    border-top-style: none;
-  }
-
   #alltabs-button:not(:-moz-lwtheme):not([disabled]) {
     border-color: transparent;
     margin-top: 0;
     margin-bottom: -1px;
   }
 
   #alltabs-button:not(:-moz-lwtheme):not([disabled]):hover,
   .tabmail-arrowscrollbox >
@@ -158,20 +149,20 @@ tabpanels {
       #tabs-toolbar {
       margin-top: 6px;
     }
   }
 }
 
 @media (-moz-windows-glass),
        (-moz-os-version: windows-win8) and (-moz-windows-default-theme) {
-  :root[sizemode=normal] .tabmail-tab:first-child > .tab-stack >
-    .tab-background[selected=true] {
-    border-inline-start-style: solid;
-    border-inline-start-color: rgba(10%, 10%, 10%, .4);
+  :root[sizemode=normal] .tabmail-tab[first-tab][visuallyselected]:before {
+    content: '';
+    display: -moz-box;
+    --tabs-border: rgba(10%, 10%, 10%, .4);
   }
 }
 
 @media (-moz-os-version: windows-win8) and (-moz-windows-default-theme) {
   #messengerWindow[darkwindowframe="true"]
   #tabs-toolbar:not(:-moz-lwtheme):not(:-moz-window-inactive),
   #messengerWindow[darkwindowframe="true"]
   .tabmail-tab:not([selected="true"]):not(:-moz-lwtheme):not(:-moz-window-inactive) {