From 9237abd8cb5d3e5977e726acd349099972300e2f Mon Sep 17 00:00:00 2001
From: Cata <cat2608@gmail.com>
Date: Thu, 13 Jun 2024 13:00:12 +0100
Subject: [PATCH] refactor: CSS rules to support IDE themes (#548)

- Added CSS rules to toggle arrow icons based on the IDE theme.
- Fixes code diff color for high contrast themes.

Related to the migration from tab-based to arrow-based navigation for Code Issue panel (see PR [#540](https://github.com/snyk/snyk-ls/pull/540)).
---
 .../ui/jcef/OpenFileLoadHandlerGenerator.kt   | 34 +++++++++++++------
 .../stylesheets/snyk_code_suggestion.scss     | 10 ++++++
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt b/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt
index 289bd9dd9..54286f08f 100644
--- a/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt
+++ b/src/main/kotlin/io/snyk/plugin/ui/jcef/OpenFileLoadHandlerGenerator.kt
@@ -48,8 +48,26 @@ class OpenFileLoadHandlerGenerator(snykFile: SnykFile) {
         return n.coerceIn(0, 255)
     }
 
+    fun getCodeDiffColors(baseColor: Color, isHighContrast: Boolean): Pair<Color, Color> {
+        val addedColor = if (isHighContrast) {
+            Color(28, 68, 40) // high contrast green
+        } else {
+            Color(shift(baseColor.red, 0.75), baseColor.green, shift(baseColor.blue, 0.75))
+        }
+
+        val removedColor = if (isHighContrast) {
+            Color(84, 36, 38)  // high contrast red
+        } else {
+            Color(shift(baseColor.red, 1.25), shift(baseColor.green, 0.85), shift(baseColor.blue, 0.85))
+        }
+        return Pair(addedColor, removedColor)
+    }
+
     fun generate(jbCefBrowser: JBCefBrowserBase): CefLoadHandlerAdapter {
         val openFileQuery = JBCefJSQuery.create(jbCefBrowser)
+        val isDarkTheme = EditorColorsManager.getInstance().isDarkEditor
+        val isHighContrast = EditorColorsManager.getInstance().globalScheme.name.contains("High contrast", ignoreCase = true)
+
         openFileQuery.addHandler { openFile(it) }
 
         return object : CefLoadHandlerAdapter() {
@@ -91,16 +109,7 @@ class OpenFileLoadHandlerGenerator(snykFile: SnykFile) {
                     browser.executeJavaScript(script, browser.url, 0)
 
                     val baseColor = UIUtil.getTextFieldBackground()
-                    val addedColor = Color(
-                        shift(baseColor.red, 0.75),
-                        baseColor.green,
-                        shift(baseColor.blue, 0.75)
-                    )
-                    val removedColor = Color(
-                        shift(baseColor.red, 1.25),
-                        shift(baseColor.green, 0.85),
-                        shift(baseColor.blue, 0.85)
-                    )
+                    val (addedColor, removedColor) = getCodeDiffColors(baseColor, isHighContrast)
 
                     val textColor = toCssHex(JBColor.namedColor("Label.foreground", JBColor.BLACK))
                     val linkColor = toCssHex(JBColor.namedColor("Link.activeForeground", JBColor.BLUE))
@@ -131,6 +140,11 @@ class OpenFileLoadHandlerGenerator(snykFile: SnykFile) {
                             for (let [property, value] of Object.entries(properties)) {
                                 document.documentElement.style.setProperty(property, value);
                             }
+
+                            // Add theme class to body
+                            const isDarkTheme = ${isDarkTheme};
+                            const isHighContrast = ${isHighContrast};
+                            document.body.classList.add(isHighContrast ? 'high-contrast' : (isDarkTheme ? 'dark' : 'light'));
                         })();
                         """
                     browser.executeJavaScript(themeScript, browser.url, 0)
diff --git a/src/main/resources/stylesheets/snyk_code_suggestion.scss b/src/main/resources/stylesheets/snyk_code_suggestion.scss
index 774c8f961..904115539 100644
--- a/src/main/resources/stylesheets/snyk_code_suggestion.scss
+++ b/src/main/resources/stylesheets/snyk_code_suggestion.scss
@@ -95,3 +95,13 @@ a,
 .ignore-action-container {
   display: none;
 }
+
+.light .dark-only,
+.high-contrast.high-contrast-light .dark-only {
+  display: none;
+}
+
+.dark .light-only,
+.high-contrast:not(.high-contrast-light) .light-only {
+  display: none;
+}