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
--- 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 {