From 7fb7560f75d7129586319161acb75085024277f6 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Thu, 19 Nov 2020 22:00:31 +0800
Subject: [PATCH] Limit scrollbar customization to: (1) web (2) linux/windows
 app

The only downside to this new implementation is that the top-most (or right-most?) scrollbar won't get the customization. Any other sub-components (e.g. sidebar) will get the customization.

My guess is that the "top-most" scrollbar is above the `main-wrapper`. I'm not sure if we can (or should) add another className higher than App.

The impetus for the customization was the ugly sidebar anyway, so at least we covered that.
---
 ui/component/app/view.jsx         |  6 ++++++
 ui/scss/all.scss                  |  1 -
 ui/scss/component/_main.scss      | 22 ++++++++++++++++++++++
 ui/scss/component/_scrollbar.scss | 31 -------------------------------
 4 files changed, 28 insertions(+), 32 deletions(-)
 delete mode 100644 ui/scss/component/_scrollbar.scss

diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx
index f89cd350b..afd0407f7 100644
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@@ -136,6 +136,11 @@ function App(props: Props) {
   const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`);
   const userId = user && user.id;
 
+  let useCustomScrollbar = true;
+  // @if TARGET='app'
+  useCustomScrollbar = !IS_MAC;
+  // @endif
+
   let uri;
   try {
     const newpath = buildURI(parseURI(pathname.slice(1).replace(/:/g, '#')));
@@ -316,6 +321,7 @@ function App(props: Props) {
         // @if TARGET='app'
         [`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC,
         // @endif
+        [`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar,
       })}
       ref={appRef}
       onContextMenu={IS_WEB ? undefined : e => openContextMenu(e)}
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 2d4630de4..494ec6b41 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -44,7 +44,6 @@
 @import 'component/progress';
 @import 'component/search';
 @import 'component/claim-search';
-@import 'component/scrollbar';
 @import 'component/section';
 @import 'component/share';
 @import 'component/snack-bar';
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index c08f7b5fe..daa1565b0 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -234,3 +234,25 @@
   margin-right: auto;
   max-width: 32rem;
 }
+
+.main-wrapper--scrollbar {
+  // The W3C future standard; currently supported by Firefox only.
+  // It'll hopefully auto fallback to this when 'webkit-scrollbar' below is deprecated in the future.
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
+}
+
+.main-wrapper--scrollbar *::-webkit-scrollbar {
+  width: 12px;
+}
+
+.main-wrapper--scrollbar *::-webkit-scrollbar-track {
+  background: var(--color-scrollbar-track-bg);
+}
+
+.main-wrapper--scrollbar *::-webkit-scrollbar-thumb {
+  // Don't set 'border-radius' because Firefox's 'scrollbar-xx'
+  // standard currently doesn't support it. Stick with square
+  // scrollbar for all browsers.
+  background-color: var(--color-scrollbar-thumb-bg);
+}
diff --git a/ui/scss/component/_scrollbar.scss b/ui/scss/component/_scrollbar.scss
deleted file mode 100644
index aa7c2afbe..000000000
--- a/ui/scss/component/_scrollbar.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// ****************************************************************************
-// webkit
-// ****************************************************************************
-// Currently supported by Chrome/Edge/Safari.
-// Potentially deprecated in the future, but will most likely be
-// handled by 'scrollbar-xx' down below when that happens.
-
-*::-webkit-scrollbar {
-  width: 12px;
-}
-
-*::-webkit-scrollbar-track {
-  background: var(--color-scrollbar-track-bg);
-}
-
-*::-webkit-scrollbar-thumb {
-  // Don't set 'border-radius' because Firefox's 'scrollbar-xx'
-  // standard currently doesn't support it. Stick with square
-  // scrollbar for all browsers.
-  background-color: var(--color-scrollbar-thumb-bg);
-}
-
-// ****************************************************************************
-// W3C::scrollbar
-// ****************************************************************************
-// The W3C future standard; currently supported by Firefox only.
-
-* {
-  scrollbar-width: auto;
-  scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
-}