Bug 1391539 - Show tab separators when hovering tabs. r=dao
authorJohann Hofmann <jhofmann@mozilla.com>
Thu, 05 Oct 2017 13:59:28 +0200
changeset 384907 40ef1df3618bc5ec673464bfac9187f8b62ccae4
parent 384906 c18b5243c8705c4b73319d346e8628ab5dcb9228
child 384908 8cf03b2c66c379c5991a70697d8ac2ccd6da5546
push id32635
push userarchaeopteryx@coole-files.de
push dateSat, 07 Oct 2017 08:38:45 +0000
treeherdermozilla-central@dde444916904 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1391539
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
browser/themes/windows/compacttheme.css
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -2,16 +2,17 @@
 /* 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/. */
 %endif
 %filter substitution
 %define horizontalTabPadding 9px
 
 :root {
+  --tabs-top-border-width: 0px;
   --tab-toolbar-navbar-overlap: 1px;
   --tab-min-height: 33px;
   --tab-loading-fill: #0A84FF;
 }
 
 :root[uidensity=compact] {
   --tab-min-height: 29px;
 }
@@ -433,29 +434,33 @@ tabbrowser {
 /* 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 {
+#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;
 }
 
 /* Hide the selected tab's start border when it's adjacent to the window border
    or to .titlebar-placeholder[type="pre-tabs"] which has its own border. */
 %ifdef CAN_DRAW_IN_TITLEBAR
@@ -550,50 +555,64 @@ tabbrowser {
 
 .titlebar-placeholder[type="pre-tabs"] {
   border-inline-end: 1px solid;
   opacity: 0.2;
 }
 
 .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
      to cut off the border at the top and at the bottom. */
   border-image: linear-gradient(transparent 6px,
                                 currentColor 6px,
                                 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;
+}
 
+/* 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;
 }
 
 /* Tab bar scroll arrows */
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -117,28 +117,43 @@
       --tabs-border: @glassShadowColor@;
     }
 
     #TabsToolbar:not(:-moz-lwtheme) {
       color: hsl(240,9%,98%);
     }
 
     /* 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;
     }
   }
 }
 
 @media (-moz-windows-compositor: 0),
        (-moz-windows-default-theme: 0) {
   /* Please keep the menu text colors in this media block in sync with
    * compacttheme.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -60,28 +60,43 @@
        (-moz-os-version: windows-win8) {
   @media (-moz-windows-compositor) {
     #main-window {
       background: transparent !important;
     }
   }
 
   /* 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 */
   #tabbrowser-tabs,
   #TabsToolbar,
   #browser-panel,
   #titlebar-content {
     background: transparent;