Bug 1208037 - Remove fade-out effect from tab separators. r=gijs
authorDão Gottwald <dao@mozilla.com>
Thu, 24 Sep 2015 17:38:59 +0200
changeset 264170 e5afaf840b1bdc4601edcfb4c4f985b7c7bcc7f9
parent 264169 7b145ea2fbdefc0c32d0bc7375ed030326530bfd
child 264171 a18bb04767d2e0697ec7aa343c1eb2144a178721
push id15335
push userdgottwald@mozilla.com
push dateThu, 24 Sep 2015 15:39:17 +0000
treeherderfx-team@e5afaf840b1b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgijs
bugs1208037
milestone44.0a1
Bug 1208037 - Remove fade-out effect from tab separators. r=gijs
browser/themes/shared/devedition.inc.css
browser/themes/shared/tabs.inc.css
--- a/browser/themes/shared/devedition.inc.css
+++ b/browser/themes/shared/devedition.inc.css
@@ -263,16 +263,17 @@ window:not([chromehidden~="toolbar"]) #u
 .tab-background {
   visibility: hidden;
 }
 
 /* Tab separators */
 .tabbrowser-tab::after,
 .tabbrowser-tab::before {
   background: currentColor;
+  opacity: 0.2 !important;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down,
 .tabbrowser-arrowscrollbox > .scrollbutton-up {
   background-color: var(--tab-background-color);
   border-color: transparent;
 }
 
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -431,37 +431,31 @@
 .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;
+  opacity: 0.2;
   content: "";
   display: -moz-box;
+  visibility: hidden;
 }
 
-.tabbrowser-tab:hover::before,
-.tabbrowser-tab[afterhovered]::before,
-.tabbrowser-tab[last-visible-tab]:hover::after {
-  transition: opacity 100ms ease;
+#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 {
-  opacity: 0.2;
-}
-
-#TabsToolbar[brighttext] > #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
-#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
-#TabsToolbar[brighttext] > #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
-  opacity: 0.4;
+  visibility: visible;
 }
 
 /* New tab button */
 
 .tabs-newtab-button {
   width: calc(36px + @tabCurveWidth@);
 }