Bug 1173730 - Use solid tab separator on Windows 8 and 10. r=dao
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 26 Jun 2015 13:39:00 +0200
changeset 250365 b0ac036f4c7f10388e8e69ac94b6e1b45543c5ac
parent 250364 9f307a1aba5c44071d4f7a74a1ac4e48c61d0dba
child 250366 259dcb2a811eebc6b2895f459ed1b75b59a748e5
push id13756
push userdgottwald@mozilla.com
push dateSat, 27 Jun 2015 19:41:03 +0000
treeherderfx-team@259dcb2a811e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1173730
milestone41.0a1
Bug 1173730 - Use solid tab separator on Windows 8 and 10. r=dao
browser/themes/osx/browser.css
browser/themes/shared/devedition.inc.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2610,20 +2610,18 @@ toolbarbutton.chevron > .toolbarbutton-m
     list-style-image: url("chrome://browser/skin/tabbrowser/connecting@2x.png");
   }
 
   .tab-throbber[progress] {
     list-style-image: url("chrome://browser/skin/tabbrowser/loading@2x.png");
   }
 
   /* Background tab separators */
-  #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
-  .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
-  #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
-    background-image: url(chrome://browser/skin/tabbrowser/tab-separator@2x.png);
+  #TabsToolbar:not([brighttext]) {
+    --tab-separator-image: url(chrome://browser/skin/tabbrowser/tab-separator@2x.png);
   }
 }
 
 .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([visuallyselected="true"]) {
   opacity: .9;
 }
 
 /*
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -278,16 +278,17 @@ searchbar:not([oneoffui]) .search-go-but
   visibility: hidden;
 }
 
 /* Make the tab splitter 1px wide with a solid background. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
   background: var(--tab-separator-color);
+  opacity: 1;
   width: 1px;
   -moz-margin-start: 0;
   -moz-margin-end: -1px;
 }
 
 /* For the last tab separator, use margin-start of -1px to prevent jittering
    due to the ::after element causing the width of the tab to extend, which
    causes an overflow and makes it disappear, which removes the overflow and
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -3,16 +3,21 @@
  * 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
 
 :root {
   --tab-toolbar-navbar-overlap: 1px;
   --tab-min-height: 31px;
 }
+#TabsToolbar {
+  --tab-separator-image: url(chrome://browser/skin/tabbrowser/tab-separator.png);
+  --tab-separator-size: 3px 100%;
+  --tab-separator-opacity: 1;
+}
 
 %define tabCurveWidth 30px
 %define tabCurveHalfWidth 15px
 
 /* image preloading hack */
 #tabbrowser-tabs::before {
   /* Because of bug 853415, we need to ordinal this to the first position: */
   -moz-box-ordinal-group: 0;
@@ -316,22 +321,29 @@
 
 /* Background tab separators (3px wide).
    Also show separators beside the selected tab when dragging it. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
   -moz-margin-start: -1.5px;
   -moz-margin-end: -1.5px;
-  background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png);
+  background-image: var(--tab-separator-image);
   background-position: left bottom var(--tab-toolbar-navbar-overlap);
   background-repeat: no-repeat;
-  background-size: 3px 100%;
+  background-size: var(--tab-separator-size);
+  opacity: var(--tab-separator-opacity);
   content: "";
   display: -moz-box;
   width: 3px;
 }
 
+#TabsToolbar[brighttext] {
+  --tab-separator-image: linear-gradient(transparent 0%, transparent 15%, currentColor 15%, currentColor 90%, transparent 90%);
+  --tab-separator-size: 1px 100%;
+  --tab-separator-opacity: 0.4;
+}
+
 /* New tab button */
 
 .tabs-newtab-button {
   width: calc(36px + @tabCurveWidth@);
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1931,22 +1931,33 @@ richlistitem[type~="action"][actiontype=
   }
 
   .tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr)::after,
   .tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl)::after {
     background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end@2x.png);
   }
 }
 
+/* Use solid tab separators for Windows 8+ */
+@media not all and (-moz-os-version: windows-xp) {
+  @media not all and (-moz-os-version: windows-vista) {
+    @media not all and (-moz-os-version: windows-win7) {
+      #TabsToolbar:not([brighttext]) {
+        --tab-separator-image: linear-gradient(transparent 0%, transparent 15%, currentColor 15%, currentColor 90%, transparent 90%);
+        --tab-separator-size: 1px 100%;
+        --tab-separator-opacity: 0.2;
+      }
+    }
+  }
+}
+
 /* Use lighter colors of buttons and text in the titlebar on luna-blue */
 @media (-moz-windows-theme: luna-blue) {
-  #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
-  .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
-  #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
-    background-image: url("chrome://browser/skin/tabbrowser/tab-separator-luna-blue.png");
+  #TabsToolbar:not([brighttext]) {
+    --tab-separator-image: url("chrome://browser/skin/tabbrowser/tab-separator-luna-blue.png");
   }
 }
 
 /* Invert the unhovered close tab icons on bright-text tabs */
 @media not all and (min-resolution: 1.1dppx) {
   #TabsToolbar[brighttext] .tab-close-button:not(:hover):not([visuallyselected="true"]) {
     -moz-image-region: rect(0, 64px, 16px, 48px) !important;
   }