Bug 1391539 - Show tab separators when hovering tabs. r=dao

This patch also fixes the hover background color of tabs in
Windows 7 (it was mistakenly being overriden), which got a little
more noticeable through the non-changing tab separators.

This patch further adds a missing top border on selected
tabs when drag space or title bar is enabled (which is
required to set the correct border-image on hovered tabs borders).

MozReview-Commit-ID: FJ9wMtA6Pb5

--HG--
extra : rebase_source : 7b8bb1c30bce7b13dcc551ee21f07e74c6e8fa3d

browser/themes/shared/tabs.inc.css

@@ -7,6 +7,7 @@
 %define horizontalTabPadding 9px
 
 :root {
+  --tabs-top-border-width: 0px;
   --tab-toolbar-navbar-overlap: 1px;
   --tab-min-height: 33px;
   --tab-loading-fill: #0A84FF;
@@ -438,19 +439,23 @@ tabbrowser {
 }
 
 %ifdef MENUBAR_CAN_AUTOHIDE
-#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
+#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar,
+%endif
+:root:not([tabsintitlebar]),
+:root[extradragspace] {
+  --tabs-top-border-width: 1px;
+}
+
+%ifdef MENUBAR_CAN_AUTOHIDE
+#toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background,
+%endif
+:root:not([tabsintitlebar]) .tab-background,
+:root[extradragspace] .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;
+  border-top-color: var(--tabs-border);
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
@@ -555,7 +560,6 @@ tabbrowser {
 
 .tabbrowser-tab::after,
 .tabbrowser-tab::before {
-  margin-inline-start: -1px;
   border-left: 1px solid;
   /* Vertical margin doesn't work here for positioned pinned tabs, see
      bug 1198236 and bug 1300410. We're using linear-gradient instead
@@ -565,30 +569,45 @@ tabbrowser {
                                 currentColor calc(100% - 5px),
                                 transparent calc(100% - 5px));
   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;
+  opacity: 0.3;
 }
 
 %ifdef CAN_DRAW_IN_TITLEBAR
 %ifdef MENUBAR_CAN_AUTOHIDE
 :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
-:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before,
 %else
 :root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
-:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::before
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::before,
 %endif
-{
-  border-image: none;
+%endif
+/* Show full height tab separators on hover. */
+.tabbrowser-tab:hover::before,
+.tabbrowser-tab[last-visible-tab]:hover::after,
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[afterhovered]::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),
+                                transparent calc(100% - 1px));
+  border-image-slice: 1;
 }
-%endif
 
+/* Show full height tab separators on selected tabs. */
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[afterselected]::before,
+.tabbrowser-tab[visuallyselected]::before,
+.tabbrowser-tab[visuallyselected]::after {
+  border-color: var(--tabs-border);
+  border-image: linear-gradient(transparent 1px,
+                                var(--tabs-border) 1px,
+                                var(--tabs-border) calc(100% - 1px - var(--tab-toolbar-navbar-overlap)),
+                                transparent calc(100% - 1px - var(--tab-toolbar-navbar-overlap))) 1 !important;
+  opacity: 1;
+}
+
+.tabbrowser-tab:not([first-visible-tab])::before,
+#tabbrowser-tabs:not([overflow]):not([movingtab]) > .tabbrowser-tab[last-visible-tab]::after,
 /* 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-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::after {
   content: "";
   display: -moz-box;
 }

browser/themes/windows/browser.css

@@ -122,18 +122,33 @@
     }
 
     /* Always show full-height tab separators on tabs with borders. */
-    .tabbrowser-tab:not(:-moz-lwtheme)::before {
+    .tabbrowser-tab:not(:-moz-lwtheme)::before,
+    .tabbrowser-tab:not(:-moz-lwtheme)::after {
       border-image: none !important;
     }
 
-    /* Show the tabs toolbar background color inside tabs on Win 7. */
-    .tab-background:not(:-moz-lwtheme):not([selected=true]) {
+    /* Show border on tabs with background colors and
+     * show the tabs toolbar background color inside tabs. */
+    .tabbrowser-tab:not(:-moz-lwtheme) {
       background-color: hsl(235,33%,19%) !important;
+      border-top: 1px solid var(--tabs-border);
+      background-clip: padding-box;
     }
 
-    /* Show border on tabs with background colors in Windows 7. */
+    /* The top border on top of the tab background is replaced
+     * by the slightly transparent outside tabs-border. */
     .tab-background:not(:-moz-lwtheme) {
-      border-top: 1px solid var(--tabs-border);
+      border-top-style: none !important;
+    }
+
+    /* The border at the end of the tab strip is replaced
+     * by the slightly transparent outside tabs-border. */
+    .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme) {
+      border-inline-end: 1px solid var(--tabs-border);
+    }
+
+    .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme)::after {
+      display: none !important;
     }
   }
 }

browser/themes/windows/compacttheme.css

@@ -65,18 +65,33 @@
   }
 
   /* Always show full-height tab separators on tabs with borders. */
-  .tabbrowser-tab::before {
+  .tabbrowser-tab::before,
+  .tabbrowser-tab::after {
     border-image: none !important;
   }
 
-  /* Show the tabs toolbar background color inside tabs on Win 7. */
-  .tab-background:not([selected=true]) {
+  /* Show border on tabs with background colors and
+   * show the tabs toolbar background color inside tabs. */
+  .tabbrowser-tab {
     background-color: var(--chrome-background-color) !important;
+    border-top: 1px solid var(--tabs-border);
+    background-clip: padding-box;
   }
 
-  /* Show border on tabs with background colors in Windows 7. */
+  /* The top border on top of the tab background is replaced
+   * by the slightly transparent outside tabs-border. */
   .tab-background {
-    border-top: 1px solid var(--tabs-border);
+    border-top-style: none !important;
+  }
+
+  /* The border at the end of the tab strip is replaced
+   * by the slightly transparent outside tabs-border. */
+  .tabbrowser-tab[last-visible-tab] {
+    border-inline-end: 1px solid var(--tabs-border);
+  }
+
+  .tabbrowser-tab[last-visible-tab]::after {
+    display: none !important;
   }
 
   /* Use default window colors when in non-maximized mode */