From 616342e7fc3e015f3262e1764c94b72530fae326 Mon Sep 17 00:00:00 2001
From: MrOtherGuy <jastekken@outlook.com>
Date: Fri, 6 Dec 2019 10:29:44 +0200
Subject: [PATCH] Use border instead of ::before and ::after for placeholders
 because they would make Fx to ignore nav-bar overflow

---
 chrome/hide_tabs_with_one_tab.css             |  7 ++-----
 chrome/navbar_tabs_oneliner.css               |  1 +
 chrome/navbar_tabs_oneliner_tabs_on_left.css  |  1 +
 chrome/navbar_tabs_responsive_oneliner.css    |  1 +
 chrome/window_control_placeholder_support.css | 14 +++++---------
 5 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/chrome/hide_tabs_with_one_tab.css b/chrome/hide_tabs_with_one_tab.css
index 7aa5995..fecfb63 100644
--- a/chrome/hide_tabs_with_one_tab.css
+++ b/chrome/hide_tabs_with_one_tab.css
@@ -42,9 +42,6 @@
 :root[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive]{
   transition: height 0ms steps(1) 80ms;
 }
-#nav-bar::before,
-#nav-bar::after{
-  content: "";
-  display: -moz-box;
-  width: var(--uc-window-drag-space-width);
+#nav-bar{
+  border-inline: var(--uc-window-drag-space-width) solid var(--toolbar-bgcolor);
 }
diff --git a/chrome/navbar_tabs_oneliner.css b/chrome/navbar_tabs_oneliner.css
index ca437d6..e54f9c8 100644
--- a/chrome/navbar_tabs_oneliner.css
+++ b/chrome/navbar_tabs_oneliner.css
@@ -43,6 +43,7 @@ urlbar_full_width.css is VERY MUCH recommended for Firefox 71+ because of new ur
 }
 
 /* Override style set in window_control_placeholder_support.css  */
+#nav-bar{ border-right-width: 0px !important }
 #nav-bar::after{ display:none !important }
 
 /* Rules specific to window controls on right layout */
diff --git a/chrome/navbar_tabs_oneliner_tabs_on_left.css b/chrome/navbar_tabs_oneliner_tabs_on_left.css
index a240507..0155c5c 100644
--- a/chrome/navbar_tabs_oneliner_tabs_on_left.css
+++ b/chrome/navbar_tabs_oneliner_tabs_on_left.css
@@ -52,6 +52,7 @@ Window controls will be all wrong without it
 }
 
 /* Override style set in window_control_placeholder_support.css  */
+#nav-bar{ border-left-width: 0px !important }
 #nav-bar::before{ display:none !important }
 
 /* Rules specific to window controls on right layout */
diff --git a/chrome/navbar_tabs_responsive_oneliner.css b/chrome/navbar_tabs_responsive_oneliner.css
index 33461d8..16cff25 100644
--- a/chrome/navbar_tabs_responsive_oneliner.css
+++ b/chrome/navbar_tabs_responsive_oneliner.css
@@ -32,6 +32,7 @@ Window controls will be all wrong without it
   }
 
   /* Override style set in window_control_placeholder_support.css  */
+  #nav-bar{ border-right-width: 0px !important }
   #nav-bar::after{ display:none !important }
 
   /* Rules specific to window controls on right layout */
diff --git a/chrome/window_control_placeholder_support.css b/chrome/window_control_placeholder_support.css
index 52eeafc..39dd2b8 100644
--- a/chrome/window_control_placeholder_support.css
+++ b/chrome/window_control_placeholder_support.css
@@ -12,20 +12,16 @@
   --uc-window-drag-space-width: 24px; /* Extra space reserved on both sides of the nav-bar to be able to drag the window */
 }
 
-#nav-bar::before,
-#nav-bar::after{
-  content: "";
-  display: -moz-box;
-  width: var(--uc-window-drag-space-width,0);
+#nav-bar{
+  border-inline: var(--uc-window-drag-space-width,0px) solid var(--toolbar-bgcolor);
+  border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px));
 }
-toolbar#nav-bar::after{ width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px)) }
 
 /* Use this pref to check Mac OS where window controls are on left */
 /* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
 @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
 	:root{ --uc-window-control-width: 72px; }
-  :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar::before{
-    width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px))
+  :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{
+    border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px)) var(--uc-window-drag-space-width,0px)
   }
-  :root[tabsintitlebar="true"]:not([inFullscreen]) toolbar#nav-bar::after{ width: var(--uc-window-drag-space-width,0px); }
 }