Bug 1390025 - Add separator between the tab strip and the drag space in front of it. r=johannh

MozReview-Commit-ID: LOymOHgg8fr

--HG--
extra : rebase_source : 1529ee862cb46b55f15b55acb66aa9af0e6086ff

browser/base/content/browser.css

@@ -299,13 +299,6 @@ toolbarpaletteitem {
 }
 %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;

browser/base/content/browser.xul

@@ -617,7 +617,7 @@
 #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
@@ -632,12 +632,8 @@
              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
 
@@ -685,14 +681,14 @@
         </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
@@ -700,7 +696,7 @@
 
 #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

browser/themes/shared/browser.inc.css

@@ -2,20 +2,6 @@
  * 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 {

browser/themes/shared/tabs.inc.css

@@ -441,7 +441,15 @@ tabbrowser {
   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;
 }
 
@@ -520,13 +528,29 @@ tabbrowser {
 
 /* 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),