Skip to content

Commit

Permalink
refactor: remove IntelliJ specific styles and push to Language Server (…
Browse files Browse the repository at this point in the history 
…#636)

* refactor: remove IntelliJ specific styles and push to Language Server

* chore: remove unnecesary imports

* chore: fix tests removed css test

* chore: fix font replacement

* chore: remove vscode font dependency
  • Loading branch information
@DariusZdroba
DariusZdroba authored Nov 22, 2024
1 parent 264465c commit 93a8dad
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 267 deletions.
14 changes: 0 additions & 14 deletions build.gradle.kts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ plugins {
id("org.jetbrains.kotlin.jvm") version "1.9.23"
id("io.gitlab.arturbosch.detekt") version ("1.23.6")
id("pl.allegro.tech.build.axion-release") version "1.17.0"
id("io.miret.etienne.sass") version "1.5.0"
}

version = scmVersion.version
Expand Down Expand Up @@ -89,19 +88,6 @@ detekt {
}

tasks {
// plugin from https://github.com/EtienneMiret/sass-gradle-plugin
compileSass {
sourceDir = project.file("${projectDir}/src/main/resources/stylesheets")
outputDir = project.file("${projectDir}/src/main/resources/stylesheets")
}

processResources{
dependsOn(compileSass)
}
compileKotlin{
dependsOn(processResources)
}

withType<KotlinCompile> {
kotlinOptions.jvmTarget = jdk
kotlinOptions.languageVersion = "1.9"
Expand Down
123 changes: 55 additions & 68 deletions src/main/kotlin/io/snyk/plugin/ui/jcef/ThemeBasedStylingGenerator.kt
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package io.snyk.plugin.ui.jcef

import com.intellij.openapi.editor.colors.ColorKey
import com.intellij.openapi.editor.colors.EditorColors
import com.intellij.openapi.editor.colors.EditorColorsManager
import com.intellij.ui.jcef.JBCefBrowserBase
import com.intellij.util.ui.JBUI
Expand All @@ -17,76 +18,62 @@ class ThemeBasedStylingGenerator {
fun toCssHex(color: Color): String {
return "#%02x%02x%02x".format(color.red, color.green, color.blue)
}
}

@Suppress("UNUSED_PARAMETER")
fun generate(jbCefBrowser: JBCefBrowserBase): CefLoadHandlerAdapter {
val isDarkTheme = EditorColorsManager.getInstance().isDarkEditor
val isHighContrast =
EditorColorsManager.getInstance().globalScheme.name.contains("High contrast", ignoreCase = true)

return object : CefLoadHandlerAdapter() {
override fun onLoadEnd(
browser: CefBrowser,
frame: CefFrame,
httpStatusCode: Int,
) {
if (frame.isMain) {
val textColor = toCssHex(JBUI.CurrentTheme.Tree.FOREGROUND)
val linkColor = toCssHex(JBUI.CurrentTheme.Link.Foreground.ENABLED)

val borderColor = toCssHex(JBUI.CurrentTheme.CustomFrameDecorations.separatorForeground())
val labelColor = toCssHex(JBUI.CurrentTheme.Label.foreground())
val background = toCssHex(JBUI.CurrentTheme.Tree.BACKGROUND)
val issuePanelBackground = toCssHex(JBUI.CurrentTheme.DefaultTabs.background())
val tabUnderline = toCssHex(JBUI.CurrentTheme.DefaultTabs.underlineColor())
val redCodeBlock = toCssHex(JBUI.CurrentTheme.Banner.ERROR_BORDER_COLOR)
val greenCodeBlock = toCssHex(JBUI.CurrentTheme.Banner.SUCCESS_BORDER_COLOR)
val aiCodeBg = UIUtil.getTextFieldBackground()
val codeBlockText = toCssHex(JBUI.CurrentTheme.Tree.FOREGROUND)
val buttonColor = toCssHex(JBUI.CurrentTheme.Button.defaultButtonColorStart())

val globalScheme = EditorColorsManager.getInstance().globalScheme
val tearLineColor = globalScheme.getColor(ColorKey.find("TEARLINE_COLOR")) //TODO Replace with JBUI.CurrentTheme colors

val themeScript = """
(function(){
if (window.themeApplied) {
return;
}
window.themeApplied = true;
const style = getComputedStyle(document.documentElement);
const properties = {
'--text-color': "$codeBlockText",
'--link-color': "$linkColor",
'--data-flow-body-color': "$background",
'--example-line-added-color': "$greenCodeBlock",
'--example-line-removed-color': "$redCodeBlock",
'--tab-item-github-icon-color': "$textColor",
'--tab-item-hover-color': "$tabUnderline",
'--scrollbar-thumb-color': "${tearLineColor?.let { toCssHex(it) }}",
'--tabs-bottom-color': "$issuePanelBackground",
'--border-color': "$borderColor",
'--editor-color': "${toCssHex(aiCodeBg)}",
'--label-color': "'$labelColor'",
'--container-background-color': "${toCssHex(aiCodeBg)}",
'--generated-ai-fix-button-background-color': "$buttonColor",
'--dark-button-border-default': "$borderColor",
'--dark-button-default': "$buttonColor",
};
for (let [property, value] of Object.entries(properties)) {
document.documentElement.style.setProperty(property, value);
}
fun replaceWithCustomStyles(htmlToReplace: String):String {
var html = htmlToReplace;
val editorColorsManager = EditorColorsManager.getInstance()
val editorUiTheme = editorColorsManager.schemeForCurrentUITheme
val borderColor = JBUI.CurrentTheme.CustomFrameDecorations.separatorForeground().toHex()
val editorBackground =
editorUiTheme.getColor(EditorColors.GUTTER_BACKGROUND)?.toHex() ?: editorUiTheme.defaultBackground.toHex()
val globalScheme = EditorColorsManager.getInstance().globalScheme
val tearLineColor = globalScheme.getColor(ColorKey.find("TEARLINE_COLOR")) //TODO Replace with JBUI.CurrentTheme colors
val isDarkTheme = EditorColorsManager.getInstance().isDarkEditor
val isHighContrast =
EditorColorsManager.getInstance().globalScheme.name.contains("High contrast", ignoreCase = true)
html = html.replace("--default-font: ", "--default-font: \"${JBUI.Fonts.label().asPlain().family}\", ")
html = html.replace("var(--text-color)", UIUtil.getLabelForeground().toHex())
html = html.replace("var(--background-color)", UIUtil.getPanelBackground().toHex())
html = html.replace("var(--border-color)", borderColor)
html = html.replace("var(--horizontal-border-color)", borderColor)
html = html.replace("var(--link-color)", JBUI.CurrentTheme.Link.Foreground.ENABLED.toHex())
html = html.replace("var(--example-line-added-color)", toCssHex(JBUI.CurrentTheme.Banner.SUCCESS_BORDER_COLOR))
html = html.replace("var(--example-line-removed-color)", toCssHex(JBUI.CurrentTheme.Banner.ERROR_BORDER_COLOR))
html = html.replace("var(--text-color)", toCssHex(JBUI.CurrentTheme.Tree.FOREGROUND))
html = html.replace("var(--link-color)",toCssHex(JBUI.CurrentTheme.Link.Foreground.ENABLED))
html = html.replace("var(--data-flow-body-color)", toCssHex(JBUI.CurrentTheme.Tree.BACKGROUND))
html = html.replace("var(--tab-item-github-icon-color)",toCssHex(JBUI.CurrentTheme.Tree.FOREGROUND))
html = html.replace("var(--scrollbar-thumb-color)", "${tearLineColor?.let { toCssHex(it)}}")
html = html.replace("var(--tab-item-github-icon-color)", toCssHex(JBUI.CurrentTheme.Tree.FOREGROUND))
html = html.replace("var(--tab-item-hover-color)", toCssHex(JBUI.CurrentTheme.DefaultTabs.underlineColor()))
html = html.replace("var(--tabs-bottom-color)", toCssHex(JBUI.CurrentTheme.DefaultTabs.background()))
html = html.replace("var(--border-color)", toCssHex(JBUI.CurrentTheme.CustomFrameDecorations.separatorForeground()))
html = html.replace("var(--editor-color)", toCssHex(UIUtil.getTextFieldBackground()))
html = html.replace("var(--label-color)", toCssHex(JBUI.CurrentTheme.Label.foreground()))
html = html.replace("var(--container-background-color)", toCssHex(UIUtil.getTextFieldBackground()))
html = html.replace("var(--generated-ai-fix-button-background-color)", toCssHex(JBUI.CurrentTheme.Button.defaultButtonColorStart()))
html = html.replace("var(--dark-button-border-default)", toCssHex(JBUI.CurrentTheme.CustomFrameDecorations.separatorForeground()))
html = html.replace("var(--dark-button-default)", toCssHex(JBUI.CurrentTheme.Button.defaultButtonColorStart()))
html = html.replace(
"var(--code-background-color)",
editorBackground
)
html = html.replace(
"var(--container-background-color)",
editorBackground
)

// 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)
}
html = html.replace(
"var(--editor-color)",
editorBackground
)
val contrast = if (isHighContrast) "high-contrast" else ""
val theme = if (isDarkTheme) "dark" else "light"
val lineWithBody = html.lines().find { it.contains("<body") }
if(lineWithBody != null) {
val modifiedLineWithBody = if(lineWithBody.contains("class")) lineWithBody.replace("class", "class=\"$contrast $theme ") else lineWithBody.replace("<body", "<body class=\"$contrast $theme \"")
html = html.replace(lineWithBody, modifiedLineWithBody);
}
return html;
}
}
}
42 changes: 2 additions & 40 deletions src/main/kotlin/io/snyk/plugin/ui/toolwindow/panels/JCEFDescriptionPanel.kt
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
package io.snyk.plugin.ui.toolwindow.panels

import com.intellij.openapi.editor.colors.EditorColors
import com.intellij.openapi.editor.colors.EditorColorsManager
import com.intellij.openapi.project.Project
import com.intellij.openapi.vfs.VirtualFile
import com.intellij.uiDesigner.core.GridLayoutManager
import com.intellij.util.ui.JBUI
import com.intellij.util.ui.UIUtil
import io.snyk.plugin.toVirtualFile
import io.snyk.plugin.ui.DescriptionHeaderPanel
import io.snyk.plugin.ui.SnykBalloonNotificationHelper
Expand All @@ -19,12 +16,10 @@ import io.snyk.plugin.ui.jcef.JCEFUtils
import io.snyk.plugin.ui.jcef.LoadHandlerGenerator
import io.snyk.plugin.ui.jcef.OpenFileLoadHandlerGenerator
import io.snyk.plugin.ui.jcef.ThemeBasedStylingGenerator
import io.snyk.plugin.ui.jcef.toHex
import io.snyk.plugin.ui.panelGridConstraints
import io.snyk.plugin.ui.toolwindow.SnykToolWindowPanel
import io.snyk.plugin.ui.wrapWithScrollPane
import snyk.common.lsp.ScanIssue
import stylesheets.SnykStylesheets
import java.awt.BorderLayout
import java.awt.Font
import javax.swing.JLabel
Expand All @@ -46,9 +41,6 @@ class SuggestionDescriptionPanelFromLS(
emptyList<LoadHandlerGenerator>().toMutableList()

// TODO: replace directly in HTML instead of JS
loadHandlerGenerators += {
ThemeBasedStylingGenerator().generate(it)
}

when (issue.filterableIssueType) {
ScanIssue.CODE_QUALITY, ScanIssue.CODE_SECURITY -> {
Expand Down Expand Up @@ -167,50 +159,20 @@ class SuggestionDescriptionPanelFromLS(
var html = issue.details()
val ideScript = getCustomScript()

// TODO: remove custom stylesheets, deliver variables from LS, replace variables with colors
val ideStyle: String = when (issue.filterableIssueType) {
ScanIssue.CODE_SECURITY, ScanIssue.CODE_QUALITY -> SnykStylesheets.SnykCodeSuggestion
else -> ""
}

val editorColorsManager = EditorColorsManager.getInstance()
val editorUiTheme = editorColorsManager.schemeForCurrentUITheme
val lsNonce = extractLsNonceIfPresent(html)
var nonce = getNonce()
if (lsNonce != "") {
nonce = lsNonce
}

html = html.replace("\${ideStyle}", "<style nonce=\${nonce}>$ideStyle</style>")
html = html.replace("\${ideStyle}", "<style nonce=\${nonce}></style>")
html = html.replace("\${headerEnd}", "")
html = html.replace("\${ideScript}", "<script nonce=\${nonce}>$ideScript</script>")


html = html.replace("\${nonce}", nonce)
html = html.replace("--default-font: ", "--default-font: \"${JBUI.Fonts.label().asPlain().family}\", ")
html = html.replace("var(--text-color)", UIUtil.getLabelForeground().toHex())
html = html.replace("var(--background-color)", UIUtil.getPanelBackground().toHex())
val borderColor = JBUI.CurrentTheme.CustomFrameDecorations.separatorForeground().toHex()
html = html.replace("var(--border-color)", borderColor)
html = html.replace("var(--horizontal-border-color)", borderColor)
html = html.replace("var(--link-color)", JBUI.CurrentTheme.Link.Foreground.ENABLED.toHex())

val editorBackground =
editorUiTheme.getColor(EditorColors.GUTTER_BACKGROUND)?.toHex() ?: editorUiTheme.defaultBackground.toHex()
html = html.replace(
"var(--code-background-color)",
editorBackground
)
html = html.replace(
"var(--container-background-color)",
editorBackground
)

html = html.replace(
"var(--editor-color)",
editorBackground
)

html = ThemeBasedStylingGenerator.replaceWithCustomStyles(html)
return html
}
private fun extractLsNonceIfPresent(html: String): String{
Expand Down
11 changes: 0 additions & 11 deletions src/main/kotlin/stylesheets/SnykStylesheets.kt
View file

This file was deleted.

Loading

0 comments on commit 93a8dad

Please sign in to comment.