Bug 1409470 - Port bug 1408325 to TB: Stop using border-image for tab separators. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Tue, 17 Oct 2017 19:59:18 +0200
changeset 29222 c82ea369d25bbb334d46e4f339083b56813c7439
parent 29221 6556e1c422590be2e909159178bc248e3a426e61
child 29223 4eb4c9a70a5059d49669f98f1f88bb89541e68d3
push id2068
push userclokep@gmail.com
push dateMon, 13 Nov 2017 19:02:14 +0000
treeherdercomm-beta@9c7e7ce8672b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1409470, 1408325
Bug 1409470 - Port bug 1408325 to TB: Stop using border-image for tab separators. r=jorgk
mail/themes/shared/mail/tabmail.css
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -188,46 +188,38 @@
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
 
 /* Tab separators */
 .tabmail-tab::after,
 .tabmail-tab::before {
   border-left: 1px solid;
-  border-image: linear-gradient(transparent 5px,
-                                currentColor 5px,
-                                currentColor calc(100% - 5px),
-                                transparent calc(100% - 5px));
-  border-image-slice: 1;
+  margin-top: 5px;
+  margin-bottom: 4px;
   opacity: 0.3;
 }
 
 /* Show full height tab separators on hover. */
 .tabmail-tab:not([selected=true]):last-child:hover::after,
 .tabmail-tab:not([selected]) + .tabmail-tab:not([selected]):hover::before,
 .tabmail-tab:not([selected]):hover + .tabmail-tab:not([selected])::before,
 :root[tabsintitlebar] #mail-toolbar-menubar2[autohide=true] ~ #tabs-toolbar > .tabmail-tabs > .tabmail-tab::after,
 :root[tabsintitlebar] #mail-toolbar-menubar2[autohide=true] ~ #tabs-toolbar > .tabmail-tabs > .tabmail-tab::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 - var(--tab-toolbar-overlap)),
-                                transparent calc(100% - 1px - var(--tab-toolbar-overlap)));
-  border-image-slice: 1;
+  margin-top: var(--tabs-top-border-width);
+  margin-bottom: var(--tab-toolbar-overlap);
 }
 
 /* Show full height tab separators on selected tabs. */
 .tabmail-tab[visuallyselected]::before,
 .tabmail-tab[visuallyselected]:last-child::after,
 .tabmail-tab[visuallyselected] + .tabmail-tab::before {
   border-color: var(--tabs-border);
-  border-image: linear-gradient(transparent 1px,
-                                var(--tabs-border) 1px,
-                                var(--tabs-border) calc(100% - 1px - var(--tab-toolbar-overlap)),
-                                transparent calc(100% - 1px - var(--tab-toolbar-overlap))) 1 !important;
+  margin-top: 0;
+  margin-bottom: var(--tab-toolbar-overlap);
   opacity: 1;
 }
 
 .tabmail-tab:last-child::after,
 .tabmail-tab + .tabmail-tab::before {
   content: '';
   display: -moz-box;
 }