From 046b2c5e14e88c8851c0b5178dcdab377ca1da1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A3o=20Gottwald?= <dao@mozilla.com>
Date: Thu, 27 Aug 2015 12:52:34 +0200
Subject: [PATCH] Bug 1198236 - Pinned tab separators shouldn't touch the
 toolbar. r=gijs

--HG--
extra : rebase_source : 8d46ce069ea59d589f0dd1f796888d561cc14b87
---
 browser/themes/shared/devedition.inc.css |  9 ++++---
 browser/themes/shared/tabs.inc.css       | 32 ++++++++++++++----------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/browser/themes/shared/devedition.inc.css b/browser/themes/shared/devedition.inc.css
index 53ade63e6b6d..26491a369ced 100644
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -283,10 +283,11 @@ searchbar:not([oneoffui]) .search-go-button {
   visibility: hidden;
 }
 
-
-#TabsToolbar {
-  --tab-separator-margin: 0;
-  --tab-separator-opacity: 0.2 !important;
+/* Tab separators */
+.tabbrowser-tab::after,
+.tabbrowser-tab::before {
+  background: currentColor;
+  opacity: 0.2 !important;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down,
diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css
index 4bf500b792d9..bb2ba60a2d3d 100644
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -10,13 +10,8 @@
   --tab-min-height: 31px;
 }
 #TabsToolbar {
-  --tab-separator-opacity: 0.2;
-  --tab-separator-margin: 4px;
   --tab-stroke-background-size: auto 100%;
 }
-#TabsToolbar[brighttext] {
-  --tab-separator-opacity: 0.4;
-}
 
 %define tabCurveWidth 30px
 %define tabCurveHalfWidth 15px
@@ -431,17 +426,28 @@
   background-size: 85% 100%;
 }
 
-/* Background tab separators.
-   Also show separators beside the selected tab when dragging it. */
+/* Tab separators */
+
+.tabbrowser-tab::after,
+.tabbrowser-tab::before {
+  width: 1px;
+  -moz-margin-start: -1px;
+  background-image: linear-gradient(transparent 5px,
+                                    currentColor 5px,
+                                    currentColor calc(100% - 4px),
+                                    transparent calc(100% - 4px));
+  opacity: 0.2;
+}
+
+#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
+#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
+  opacity: 0.4;
+}
+
+/* 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 {
-  width: 1px;
-  -moz-margin-start: -1px;
-  margin-top: calc(var(--tab-separator-margin) + 1px);
-  margin-bottom: var(--tab-separator-margin);
-  background-color: currentColor;
-  opacity: var(--tab-separator-opacity);
   content: "";
   display: -moz-box;
 }