Bug 1390025 - Add separator between the tab strip and the drag space in front of it. r=johann
MozReview-Commit-ID: LOymOHgg8fr
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -294,23 +294,16 @@ toolbarpaletteitem {
%else
/* On non-OSX, these should be start-aligned */
#titlebar-buttonbox-container {
-moz-box-align: start;
}
%endif
-%if !defined(MOZ_WIDGET_GTK)
-#TabsToolbar > .private-browsing-indicator,
-#TabsToolbar > .accessibility-indicator {
- -moz-box-ordinal-group: 1000;
-}
-%endif
-
%ifdef XP_WIN
#main-window[sizemode="maximized"] #titlebar-buttonbox {
-moz-appearance: -moz-window-button-box-maximized;
}
#main-window[tabletmode] #titlebar-min,
#main-window[tabletmode] #titlebar-max {
display: none !important;
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -612,37 +612,33 @@
# The entire main menubar is placed into browser-menubar.inc, so that it can be shared by
# hiddenWindow.xul.
#include browser-menubar.inc
</toolbaritem>
#ifdef CAN_DRAW_IN_TITLEBAR
#ifndef XP_MACOSX
<hbox class="titlebar-placeholder" type="caption-buttons" ordinal="1000"
- id="titlebar-placeholder-on-menubar-for-caption-buttons" persist="width"
+ persist="width"
skipintoolbarset="true"/>
#endif
#endif
</toolbar>
<toolbar id="TabsToolbar"
fullscreentoolbar="true"
customizable="true"
mode="icons"
iconsize="small"
aria-label="&tabsToolbar.label;"
context="toolbar-context-menu"
collapsed="true">
-#if defined(MOZ_WIDGET_GTK)
- <hbox class="private-browsing-indicator"
- skipintoolbarset="true"/>
- <button class="accessibility-indicator"
- tooltiptext="&accessibilityIndicator.tooltip;"
- aria-live="polite"
+#ifdef CAN_DRAW_IN_TITLEBAR
+ <hbox class="titlebar-placeholder" type="pre-tabs"
skipintoolbarset="true"/>
#endif
<tabs id="tabbrowser-tabs"
class="tabbrowser-tabs"
tabbrowser="content"
flex="1"
setfocus="false"
@@ -680,32 +676,32 @@
<menu id="alltabs_containersTab"
label="&newUserContext.label;">
<menupopup id="alltabs_containersMenuTab" />
</menu>
<menuseparator id="alltabs-popup-separator-2"/>
</menupopup>
</toolbarbutton>
-#if !defined(MOZ_WIDGET_GTK)
<button class="accessibility-indicator" tooltiptext="&accessibilityIndicator.tooltip;"
+ ordinal="1000"
aria-live="polite" skipintoolbarset="true"/>
- <hbox class="private-browsing-indicator" skipintoolbarset="true"/>
-#endif
+ <hbox class="private-browsing-indicator" skipintoolbarset="true"
+ ordinal="1000"/>
#ifdef CAN_DRAW_IN_TITLEBAR
<hbox class="titlebar-placeholder" type="caption-buttons"
- id="titlebar-placeholder-on-TabsToolbar-for-captions-buttons" persist="width"
+ persist="width"
#ifndef XP_MACOSX
ordinal="1000"
#endif
skipintoolbarset="true"/>
#ifdef XP_MACOSX
<hbox class="titlebar-placeholder" type="fullscreen-button"
- id="titlebar-placeholder-on-TabsToolbar-for-fullscreen-button" persist="width"
+ persist="width"
skipintoolbarset="true"/>
#endif
#endif
</toolbar>
<toolbar id="nav-bar"
aria-label="&navbarCmd.label;"
fullscreentoolbar="true" mode="icons" customizable="true"
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -1,26 +1,12 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-%ifdef CAN_DRAW_IN_TITLEBAR
-/* Add space for dragging the window */
-%ifdef MOZ_WIDGET_COCOA
-:root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar
-%elifdef MENUBAR_CAN_AUTOHIDE
-:root[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide=true] ~ #TabsToolbar
-%else
-:root[tabsintitlebar][sizemode=normal] #TabsToolbar
-%endif
-{
- padding-inline-start: 40px;
-}
-%endif
-
%include downloads/indicator.inc.css
:root {
/* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
--space-above-tabbar: 0px;
}
:root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -436,17 +436,25 @@ 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;
}
-:root:not([sizemode=normal]) .tabbrowser-tab[first-visible-tab] > .tab-stack > .tab-background[selected=true] {
+/* 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. */
+%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] {
border-inline-start-style: none;
}
.tab-line[selected=true] {
background-color: var(--tab-line-color);
}
/*
@@ -515,23 +523,39 @@ tabbrowser {
}
.tab-label[attention]:not([selected="true"]) {
font-weight: bold;
}
/* Tab separators */
+%ifdef CAN_DRAW_IN_TITLEBAR
+/* Add space for dragging the window */
+%ifdef MOZ_WIDGET_COCOA
+:root[tabsintitlebar]:not([sizemode=fullscreen]) .titlebar-placeholder[type="pre-tabs"]
+%elifdef MENUBAR_CAN_AUTOHIDE
+:root[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide=true] ~ #TabsToolbar > .titlebar-placeholder[type="pre-tabs"]
+%else
+:root[tabsintitlebar][sizemode=normal] #TabsToolbar > .titlebar-placeholder[type="pre-tabs"]
+%endif
+{
+ width: 40px;
+ border-inline-end: 1px solid;
+ opacity: 0.2;
+}
+%endif
+
.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-left: 1px solid;
border-image: linear-gradient(transparent 6px,
currentColor 6px,
currentColor calc(100% - 5px),
transparent calc(100% - 5px));
border-image-slice: 1;
/* The 1px border and negative margin may amount to a different number of
device pixels (bug 477157), so we also set a width to match the margin. */
width: 1px;