Draw a border when hiding the tab bar

3 files changed, 39 insertions, 7 deletions

diff --git a/application/palemoon/themes/linux/browser.css b/application/palemoon/themes/linux/browser.css
index b545b06cb..933067c2b 100644
--- a/application/palemoon/themes/linux/browser.css
+++ b/application/palemoon/themes/linux/browser.css
@@ -1607,6 +1607,17 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   background-image: linear-gradient(to top, rgba(0,0,0,.3) 1px, rgba(0,0,0,.05) 1px, transparent 50%);
 }
 
+/* When the tab bar is collapsed, show a 1px border in its place. */
+#TabsToolbar[collapsed="true"] {
+  visibility: visible;
+  height: 1px;
+  border-bottom-width: 1px;
+  /* !important here to override border-style: none on the toolbar */
+  border-bottom-style: solid !important;
+  border-bottom-color: ThreeDShadow;
+  overflow: hidden;
+}
+
 .tabbrowser-tab,
 .tabs-newtab-button {
   position: static;
diff --git a/application/palemoon/themes/osx/browser.css b/application/palemoon/themes/osx/browser.css
index ddf050785..20e8c5eac 100644
--- a/application/palemoon/themes/osx/browser.css
+++ b/application/palemoon/themes/osx/browser.css
@@ -1630,6 +1630,17 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
     background-image: linear-gradient(to top, @toolbarShadowColor@ 1px, rgba(0,0,0,.05) 1px, transparent 50%);
 }
 
+/* When the tab bar is collapsed, show a 1px border in its place. */
+#TabsToolbar[collapsed="true"] {
+  visibility: visible;
+  height: 1px;
+  border-bottom-width: 1px;
+  /* !important here to override border-style: none on the toolbar */
+  border-bottom-style: solid !important;
+  border-bottom-color: ThreeDShadow;
+  overflow: hidden;
+}
+
 @media (-moz-mac-lion-theme) {
     #main-window[sizemode=normal] #TabsToolbar {
         padding-left: 2px;
diff --git a/application/palemoon/themes/windows/browser.css b/application/palemoon/themes/windows/browser.css
index 56a8318da..8a47e67ce 100644
--- a/application/palemoon/themes/windows/browser.css
+++ b/application/palemoon/themes/windows/browser.css
@@ -31,6 +31,8 @@
 %endif
 
 :root {
+  --toolbox-after-color: ThreeDShadow;
+
   --toolbar-custom-color: hsl(210,75%,92%);
   --toolbar-highlight-top: rgba(255,255,255,.5);
   --toolbar-highlight-bottom: transparent;
@@ -91,7 +93,7 @@
   display: -moz-box;
   -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
   height: 1px;
-  background-color: ThreeDShadow;
+  background-color: var(--toolbox-after-color);
 }
 #navigator-toolbox[tabsontop=false]::after,
 #main-window[disablechrome] #navigator-toolbox::after {
@@ -1841,6 +1843,17 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   background-image: linear-gradient(to top, @toolbarShadowColor@ 1px, rgba(0,0,0,.05) 1px, transparent 50%);
 }
 
+/* When the tab bar is collapsed, show a 1px border in its place. */
+#TabsToolbar[collapsed="true"] {
+  visibility: visible;
+  height: 1px;
+  border-bottom-width: 1px;
+  /* !important here to override border-style: none on the toolbar */
+  border-bottom-style: solid !important;
+  border-bottom-color: var(--toolbox-after-color);
+  overflow: hidden;
+}
+
 .tabbrowser-tab,
 .tabs-newtab-button {
   -moz-appearance: none;
@@ -3044,20 +3057,17 @@ toolbar[brighttext] #addonbar-closebutton {
   
   @media (-moz-os-version: windows-vista),
          (-moz-os-version: windows-win7) {
-    #navigator-toolbox:not(:-moz-lwtheme)::after {
-      background-color: #aabccf;
+    :root {
+      --toolbox-after-color: #aabccf;
     }
   }
 
   @media (-moz-os-version: windows-win8),
          (-moz-os-version: windows-win10) {
     :root {
+      --toolbox-after-color: #bcbcbc;
       --toolbar-custom-color: hsl(210,0%,92%);
     }
-
-    #navigator-toolbox:not(:-moz-lwtheme)::after {
-      background-color: #bcbcbc;
-    }
   }
  
   #navigator-toolbox[tabsontop=true] #urlbar:not(:-moz-lwtheme),