Bug 1391539 - Show tab separators when hovering tabs. r=dao draft
authorJohann Hofmann <jhofmann@mozilla.com>
Thu, 17 Aug 2017 12:35:35 +0200
changeset 648680 483699f9718975510426d432e20e8e0bb80294da
parent 648679 02cc5a6af88f51aa18ae412ceb7d70cc0b0c16d4
child 726914 48d905834b303561b29f3a3fe20271b199936cb7
push id74853
push userbmo:jhofmann@mozilla.com
push dateFri, 18 Aug 2017 07:15:38 +0000
reviewersdao
bugs1391539
milestone57.0a1
Bug 1391539 - Show tab separators when hovering tabs. r=dao MozReview-Commit-ID: FJ9wMtA6Pb5
browser/themes/shared/tabs.inc.css
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -296,40 +296,55 @@
 .tabbrowser-tab:-moz-lwtheme {
   color: inherit;
 }
 
 .tab-line {
   height: 2px;
 }
 
+.tabbrowser-tab:not([last-visible-tab]):not([beforeselected=true]) > .tab-stack > .tab-background > .tab-line:not([selected=true]),
+#tabbrowser-tabs:not([overflow]) .tabbrowser-tab[last-visible-tab] > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
+  margin-inline-end: 1px;
+}
+
 /* Selected tab */
 
 .tab-background {
   border: 1px none transparent;
   background-clip: padding-box;
 }
 
+%ifdef MENUBAR_CAN_AUTOHIDE
 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
   border-top-style: solid;
 }
+%endif
 
 .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-navbar-overlap)),
                                 transparent calc(100% - 1px - var(--tab-toolbar-navbar-overlap)));
   border-image-slice: 1;
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
 }
 
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
+  background-color: rgba(0,0,0,.2);
+}
+
+#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
+  border-color: rgba(255,255,255,.2);
+}
+
 :root:not([sizemode=normal]) .tabbrowser-tab[first-visible-tab] > .tab-stack > .tab-background[selected=true] {
   border-inline-start-style: none;
 }
 
 .tab-line[selected=true] {
   background-color: var(--tab-line-color);
 }
 
@@ -418,33 +433,61 @@
   border-image-slice: 1;
   /* The 1px border and negative margin may amount to a different number of
      device pixels (bug 477157), so we also set a width to match the margin. */
   width: 1px;
   box-sizing: border-box;
   opacity: 0.2;
 }
 
+.tabbrowser-tab:hover::before {
+  opacity: 0.3;
+}
+
 %ifdef CAN_DRAW_IN_TITLEBAR
 %ifdef MENUBAR_CAN_AUTOHIDE
 :root[tabsintitlebar] #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
 :root[tabsintitlebar] #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before
 %else
 :root[tabsintitlebar] .tabbrowser-tab::after,
 :root[tabsintitlebar] .tabbrowser-tab::before
 %endif
+%else
+%ifdef MENUBAR_CAN_AUTOHIDE
+:root[tabsintitlebar] #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab[afterhovered]::before,
+:root[tabsintitlebar] #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab:hover::before
+%else
+:root[tabsintitlebar] .tabbrowser-tab[afterhovered]::before,
+:root[tabsintitlebar] .tabbrowser-tab:hover::before
+%endif
+%endif
 {
   border-image: none;
 }
+
+%ifdef CAN_DRAW_IN_TITLEBAR
+%ifdef MENUBAR_CAN_AUTOHIDE
+:root[tabsintitlebar] #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab[afterhovered]::before,
+:root[tabsintitlebar] #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab:hover::before,
 %endif
+%endif
+:root:not([tabsintitlebar]) .tabbrowser-tab[afterhovered]::before,
+:root:not([tabsintitlebar]) .tabbrowser-tab:hover::before
+{
+  border-image: linear-gradient(transparent 1px,
+                                currentColor 1px,
+                                currentColor calc(100% - 1px),
+                                transparent calc(100% - 1px));
+  border-image-slice: 1;
+}
 
 /* Also show separators beside the selected tab when dragging it. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
-.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
-#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
+.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([first-visible-tab])::before,
+#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected])::after {
   content: "";
   display: -moz-box;
 }
 
 /* Tab bar scroll arrows */
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {