Bug 1408953 - Set border at the start of the first tab instead of at the end of the pre-tabs whitespace. r=johannh draft
authorNihanth Subramanya <nhnt11@gmail.com>
Wed, 18 Oct 2017 00:20:39 +0530
changeset 681995 794b504449325419b5d28c69902e752b67f15854
parent 681687 88a04d8454f955282a97a5dbdb8c109330632255
child 736280 00639dc4f2127a5b2b1afcf0881cbb72a8134cc4
push id84980
push usernhnt11@gmail.com
push dateWed, 18 Oct 2017 00:42:49 +0000
reviewersjohannh
bugs1408953
milestone57.0
Bug 1408953 - Set border at the start of the first tab instead of at the end of the pre-tabs whitespace. r=johannh MozReview-Commit-ID: HpoAe1heGMJ
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -452,25 +452,37 @@ tabbrowser {
                                 var(--tabs-border) calc(100% - 1px - var(--tab-toolbar-navbar-overlap)),
                                 transparent calc(100% - 1px - var(--tab-toolbar-navbar-overlap)));
   border-image-slice: 1;
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
 }
 
-/* Hide the selected tab's start border when it's adjacent to the window border
-   or to .titlebar-placeholder[type="pre-tabs"] which has its own border. */
+/* Hide the selected tab's start border when it's adjacent to the window border */
+
 %ifdef CAN_DRAW_IN_TITLEBAR
 %define tabContainerAsFirstChild .titlebar-placeholder[type="pre-tabs"] + #tabbrowser-tabs
 %else
 %define tabContainerAsFirstChild #tabbrowser-tabs:first-child
 %endif
-@tabContainerAsFirstChild@:not([overflow=true]) > .tabbrowser-tab[first-visible-tab] > .tab-stack > .tab-background[selected=true],
-@tabContainerAsFirstChild@ > .tabbrowser-tab[first-visible-tab][pinned] > .tab-stack > .tab-background[selected=true] {
+
+%define firstTabNoOverflow :not([overflow=true]) > .tabbrowser-tab[first-visible-tab] > .tab-stack > .tab-background[selected=true]
+%define firstTabPinned > .tabbrowser-tab[first-visible-tab][pinned] > .tab-stack > .tab-background[selected=true]
+
+%ifdef MENUBAR_CAN_AUTOHIDE
+#toolbar-menubar:not([autohide=true]) @tabContainerAsFirstChild@@firstTabNoOverflow@,
+#toolbar-menubar:not([autohide=true]) @tabContainerAsFirstChild@@firstTabPinned@,
+%endif
+%ifndef MOZ_WIDGET_COCOA
+#main-window:not([sizemode=normal]) @tabContainerAsFirstChild@@firstTabNoOverflow@,
+#main-window:not([sizemode=normal]) @tabContainerAsFirstChild@@firstTabPinned@,
+%endif
+#main-window:-moz-any([inFullscreen], :not([tabsintitlebar])) @tabContainerAsFirstChild@@firstTabNoOverflow@,
+#main-window:-moz-any([inFullscreen], :not([tabsintitlebar])) @tabContainerAsFirstChild@@firstTabPinned@ {
   border-inline-start-style: none;
 }
 
 .tab-line[selected=true] {
   background-color: var(--tab-line-color);
 }
 
 /*
@@ -544,21 +556,16 @@ tabbrowser {
 
 /* Tab separators */
 
 .titlebar-placeholder[type="pre-tabs"],
 .titlebar-placeholder[type="post-tabs"] {
   width: 40px;
 }
 
-.titlebar-placeholder[type="pre-tabs"] {
-  border-inline-end: 1px solid;
-  opacity: 0.2;
-}
-
 .tabbrowser-tab::after,
 .tabbrowser-tab::before {
   margin-inline-start: -1px;
   border-left: 1px solid;
   /* Vertical margin doesn't work here for positioned pinned tabs, see
      bug 1198236 and bug 1300410. We're using linear-gradient instead
      to cut off the border at the top and at the bottom. */
   border-image: linear-gradient(transparent 6px,
@@ -584,21 +591,34 @@ tabbrowser {
 {
   border-image: none;
 }
 %endif
 
 /* Also show separators beside the selected tab when dragging it. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
-#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
+#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after,
+/* Separate rule for the first tab, since we can't set a negative margin-inline-start on it which would hide the separator */
+.tabbrowser-tab[first-visible-tab]::before {
   content: "";
   display: -moz-box;
 }
 
+/* Show the separator before the first tab */
+:root[tabsintitlebar]:not([inFullscreen]) .tabbrowser-tab[first-visible-tab]::before {
+  margin-inline-start: 0;
+  /* Compensate for the 1px we added, to prevent jumping when dragging tabs */
+  margin-inline-end: -1px;
+}
+
+.tabbrowser-tab[first-visible-tab]:-moz-any([selected], :hover)::before {
+  border: transparent;
+}
+
 /* 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);
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -762,16 +762,23 @@ html|span.ac-emphasize-text-url {
 #TabsToolbar {
   min-height: 0;
   padding: 0;
   margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap)); /* overlap the nav-bar's top border */
 }
 
 %include ../shared/tabs.inc.css
 
+/* Don't show the starting border of the first tab when maximized */
+:root:not([sizemode="normal"]) .tabbrowser-tab[first-visible-tab]::before {
+  margin-inline-start: -1px !important;
+  margin-inline-end: 0 !important;
+  border: transparent;
+}
+
 /* tabbrowser-tab focus ring */
 .tabbrowser-tab:focus > .tab-stack > .tab-content {
   outline: 1px dotted;
   outline-offset: -6px;
 }
 
 /* Tab DnD indicator */
 .tab-drop-indicator {