From 36caef792d55ac70aaa67a1cca82d9945c91e135 Mon Sep 17 00:00:00 2001
From: Carl-Robert Linnupuu <carlrobertoh@gmail.com>
Date: Fri, 14 Apr 2023 12:15:29 +0100
Subject: [PATCH] Use custom scrollbar style (#80)

---
 .../chat/MarkdownJCEFHtmlPanel.java           |  4 ++++
 .../carlrobert/codegpt/util/ThemeUtils.java   |  9 +++++++++
 src/main/resources/html/index.html            | 20 +++++++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/src/main/java/ee/carlrobert/codegpt/toolwindow/chat/MarkdownJCEFHtmlPanel.java b/src/main/java/ee/carlrobert/codegpt/toolwindow/chat/MarkdownJCEFHtmlPanel.java
index 56fb7604..4856089f 100644
--- a/src/main/java/ee/carlrobert/codegpt/toolwindow/chat/MarkdownJCEFHtmlPanel.java
+++ b/src/main/java/ee/carlrobert/codegpt/toolwindow/chat/MarkdownJCEFHtmlPanel.java
@@ -7,6 +7,8 @@ import static ee.carlrobert.codegpt.util.ThemeUtils.getDisabledTextColorRGB;
 import static ee.carlrobert.codegpt.util.ThemeUtils.getFontColorRGB;
 import static ee.carlrobert.codegpt.util.ThemeUtils.getFontSize;
 import static ee.carlrobert.codegpt.util.ThemeUtils.getPanelBackgroundColorRGB;
+import static ee.carlrobert.codegpt.util.ThemeUtils.getScrollBarForegroundColorRGB;
+import static ee.carlrobert.codegpt.util.ThemeUtils.getScrollBarRadius;
 import static ee.carlrobert.codegpt.util.ThemeUtils.getSeparatorColorRGB;
 import static icons.Icons.DefaultImageIcon;
 import static java.lang.String.format;
@@ -147,6 +149,8 @@ public class MarkdownJCEFHtmlPanel extends JCEFHtmlPanel {
         .replace("[font-size]", String.valueOf(getFontSize()))
         .replace("[separator-color]", getSeparatorColorRGB())
         .replace("[disabled-color]", getDisabledTextColorRGB())
+        .replace("[scrollbar-color]", getScrollBarForegroundColorRGB())
+        .replace("[scrollbar-radius]", String.valueOf(getScrollBarRadius()))
         .replace("[panel-background-color]", getPanelBackgroundColorRGB())
         .replace("[button-background-color]", getButtonBackgroundColorRGB())
         .replace("[button-disabled-background-color]", getDisabledButtonBackgroundColorRGB());
diff --git a/src/main/java/ee/carlrobert/codegpt/util/ThemeUtils.java b/src/main/java/ee/carlrobert/codegpt/util/ThemeUtils.java
index 2fbd3788..a902610f 100644
--- a/src/main/java/ee/carlrobert/codegpt/util/ThemeUtils.java
+++ b/src/main/java/ee/carlrobert/codegpt/util/ThemeUtils.java
@@ -3,6 +3,7 @@ package ee.carlrobert.codegpt.util;
 import static java.lang.String.format;
 
 import com.intellij.openapi.editor.colors.EditorColorsManager;
+import com.intellij.openapi.util.SystemInfo;
 import com.intellij.util.ui.JBFont;
 import com.intellij.util.ui.JBUI;
 import com.intellij.util.ui.UIUtil;
@@ -44,6 +45,14 @@ public class ThemeUtils {
     return JBFont.regular().getSize();
   }
 
+  public static String getScrollBarForegroundColorRGB() {
+    return "rgb(187, 187, 187, 0.8)"; // TODO: Get theme's scrollbar color
+  }
+
+  public static int getScrollBarRadius() {
+    return SystemInfo.isMac ? 10 : 0;
+  }
+
   private static Color toDarker(Color color) {
     var factor = 0.9;
     return new Color(
diff --git a/src/main/resources/html/index.html b/src/main/resources/html/index.html
index 978f442f..6752198e 100644
--- a/src/main/resources/html/index.html
+++ b/src/main/resources/html/index.html
@@ -23,11 +23,30 @@
           --font-size: [font-size]px;
           --separator-color: [separator-color];
           --disabled-color: [disabled-color];
+          --scrollbar-color: [scrollbar-color];
+          --scrollbar-radius: [scrollbar-radius]px;
           --panel-background-color: [panel-background-color];
           --button-background-color: [button-background-color];
           --button-disabled-background-color: [button-disabled-background-color];
       }
 
+      *::-webkit-scrollbar-track {
+          background-color: transparent;
+      }
+
+      *::-webkit-scrollbar {
+          background-color: transparent;
+          transition: 0.3s;
+          width: 13px;
+      }
+
+      *::-webkit-scrollbar-thumb {
+          border-radius: var(--scrollbar-radius);
+          background-color: var(--scrollbar-color);
+          background-clip: content-box;
+          border: 3px solid transparent;
+      }
+
       html {
           scroll-behavior: smooth;
           background-color: var(--bg);
@@ -38,6 +57,7 @@
 
       body {
           margin: 0;
+          overflow: overlay;
       }
 
       pre, pre[class*='language-'] {