From dadc39e113145a803bc85a2606f3af9a4adf9896 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sun, 23 May 2021 12:59:56 +0900
Subject: [PATCH] Fix: Tab Bar - Scrollbox btn's Shadow root compatibility

---
 userChrome.css | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/userChrome.css b/userChrome.css
index 288faa7..d8df99b 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -60,11 +60,17 @@
     margin-inline-start: 0 !important;
   }
 
-  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox::part(scrollbutton-up  ),
-  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
-    /* Original: 4px */
-    padding-left:  1px !important;
-    padding-right: 1px !important;
+  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox {
+    --scrollbtn-inner-padding: 1px;
+    --scrollbtn-outer-padding: 3px;
+  }
+  #scrollbutton-up {
+    padding-left:  var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
+    padding-right: var(--scrollbtn-outer-padding, 4px) !important;
+  }
+  #scrollbutton-down {
+    padding-left:  var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
+    padding-right: var(--scrollbtn-inner-padding, 4px) !important;
   }
 
   :root:not([uidensity=touch]) #new-tab-button, #alltabs-button {
@@ -100,11 +106,15 @@
     max-height: unset;
   }
 
-  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox::part(scrollbutton-up  ),
-  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
+  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox {
+    --scrollbtn-vertical-padding: 3px;
+  }
+  #scrollbutton-up,
+  #scrollbutton-down {
     /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
-    padding-top:    3px !important;
-    padding-bottom: 3px !important;
+    /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
+    padding-top:    var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
+    padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important;
   }
 
   :root[tabsintitlebar]:not([uidensity=compact]) #toolbar-menubar[autohide="true"] {