Bug 1403483 - Show tab separator on first tab instead of on the pre-tabs whitespace. r=dao draft
authorNihanth Subramanya <nhnt11@gmail.com>
Sat, 28 Oct 2017 07:44:42 +0530
changeset 688166 4ab47f36b94482ba388dc51efbab4bb48d3bec6c
parent 687940 d58424c244c38f88357a26fb61c333d3c6e552d7
child 737800 bd86ae76a5917cfe0e95076e4184c343c65b67d1
push id86674
push usernhnt11@gmail.com
push dateSat, 28 Oct 2017 13:09:25 +0000
reviewersdao
bugs1403483
milestone58.0a1
Bug 1403483 - Show tab separator on first tab instead of on the pre-tabs whitespace. r=dao MozReview-Commit-ID: cEC874g1ad
browser/themes/shared/tabs.inc.css
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -536,23 +536,31 @@ tabbrowser {
 
 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
   background-color: rgba(255,255,255,.2);
 }
 
 /* Pinned tabs */
 
 /* Pinned tab separators need position: absolute when positioned (during overflow). */
-#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::after {
+#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::after,
+#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
   position: absolute;
   top: 0;
   bottom: 0;
+}
+
+#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::after {
   right: 0;
 }
 
+#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
+  left: 0;
+}
+
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]:-moz-locale-dir(rtl)::after {
   right: unset;
   left: 0;
 }
 
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] > .tab-stack {
   border-inline-end: 1px solid transparent;
 }
@@ -586,60 +594,73 @@ tabbrowser {
 @media (max-width: 500px) {
   .titlebar-placeholder[type="post-tabs"] {
     display: none;
   }
 }
 
 /* Tab separators */
 
-.titlebar-placeholder[type="pre-tabs"] {
-  border-inline-end: 1px solid;
-  opacity: 0.2;
-}
-
 .tabbrowser-tab::after,
 .tabbrowser-tab::before {
   border-left: 1px solid;
   margin-top: 5px;
   margin-bottom: 4px;
   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,
 %else
 :root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::before,
 %endif
 %endif
 /* Show full height tab separators on hover. */
 .tabbrowser-tab:hover::after,
-#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after {
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after,
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[first-visible-tab]:hover::before {
   margin-top: var(--tabs-top-border-width);
   margin-bottom: 0;
 }
 
 /* Show full height tab separators on selected tabs. */
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected-visible]::after,
+#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[first-visible-tab][visuallyselected]::before,
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before,
 .tabbrowser-tab[visuallyselected]::after {
   border-color: var(--tabs-border);
   margin-top: 0;
   margin-bottom: var(--tab-toolbar-navbar-overlap);
   opacity: 1;
 }
 
 .tabbrowser-tab::after,
+.tabbrowser-tab[first-visible-tab]::before,
 /* Also show separators beside the selected tab when dragging it. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before {
   content: "";
   display: -moz-box;
 }
 
+/* The first tab separator takes up 1px of space. When dragging the first tab out of
+ * the first position, a background tab slides in to take its place. When the first
+ * tab separator appears for the incoming new first-tab, it causes a 1px jump.
+ * to avoid this, we set a -1px margin-inline-start on the first tab separator,
+ * and a 1px margin-inline-start on the first tab so that it stays visible. */
+.tabbrowser-tab[first-visible-tab]::before {
+  margin-inline-start: -1px;
+}
+
+:root:not([inFullscreen])[tabsintitlebar] .tabbrowser-tab[first-visible-tab] {
+  margin-inline-start: 1px;
+}
+
 /* Tab bar scroll arrows */
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   list-style-image: url(chrome://browser/skin/arrow-left.svg);
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);