fix: settings page styling (#438)

Add overrides for fallback CSS variables that were forgotten about.
Handle CSS `var(--something)` and `var(--something, fallback)` by replacing them with the values defined in the `:root`.
Remove the custom X button and re-enable the in-built window X button.

Author: rrama

Snyk.VisualStudio.Extension.2022/Properties/AssemblyInfo.cs

@@ -1,4 +1,4 @@
-using Microsoft.VisualStudio.Shell;
+using Microsoft.VisualStudio.Shell;
 using System.Reflection;
 using System.Runtime.CompilerServices;
 using System.Runtime.InteropServices;
@@ -32,3 +32,6 @@
 // [assembly: AssemblyVersion("1.0.*")]
 [assembly: AssemblyVersion("1.0.0.0")]
 [assembly: AssemblyFileVersion("1.0.0.0")]
+
+// Allow unit tests to access internal methods
+[assembly: InternalsVisibleTo("Snyk.VisualStudio.Extension.Tests")]

Snyk.VisualStudio.Extension.2022/Settings/HtmlSettingsWindow.xaml

@@ -10,7 +10,7 @@
                  xmlns:imaging="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.Imaging"
                  mc:Ignorable="d"
                  WindowStartupLocation="CenterScreen"
-                 IsCloseButtonEnabled="False"
+                 IsCloseButtonEnabled="True"
                  HasHelpButton="False"
                  MinHeight="750" Height="850"
                  MinWidth="600" Width="950"
@@ -26,30 +26,6 @@
                       CornerRadius="0" />
     </WindowChrome.WindowChrome> -->
     <DockPanel Margin="10">
-        <!-- Top: Draggable Bar with Close Button -->
-        <Grid DockPanel.Dock="Top" Margin="0,0,0,10">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="*" />
-                <ColumnDefinition Width="Auto" />
-            </Grid.ColumnDefinitions>
-
-            <!-- Draggable area (empty, just for dragging) -->
-            <Border Grid.Column="0"
-                    Background="Transparent"
-                    MouseLeftButtonDown="TitleBar_MouseLeftButtonDown"
-                    Height="35" />
-
-            <!-- Close button -->
-            <Button Grid.Column="1"
-                    Click="CloseButton_OnClick"
-                    MinWidth="35"
-                    Width="35"
-                    Height="35"
-                    Padding="0">
-                <imaging:CrispImage Moniker="{x:Static catalog:KnownMonikers.Close}" />
-            </Button>
-        </Grid>
-
         <!-- Bottom: OK and Cancel Buttons -->
         <StackPanel HorizontalAlignment="Right" DockPanel.Dock="Bottom" Orientation="Horizontal" Margin="0,10,0,0">
             <Button x:Name="OkButton" Margin="5, 5" Content="OK" Click="OkButton_OnClick"

Snyk.VisualStudio.Extension.2022/Settings/HtmlSettingsWindow.xaml.cs

@@ -251,12 +251,6 @@ private void CancelButton_OnClick(object sender, RoutedEventArgs e)
             Close();
         }
 
-        private void CloseButton_OnClick(object sender, RoutedEventArgs e)
-        {
-            DialogResult = false;
-            Close();
-        }
-
         private void TitleBar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
             if (e.ClickCount == 1)

Snyk.VisualStudio.Extension.2022/UI/Html/BaseHtmlProvider.cs

@@ -1,4 +1,4 @@
-using System.Linq;
+using System.Linq;
 using System;
 using System.Text.RegularExpressions;
 using Microsoft.VisualStudio.PlatformUI;
@@ -92,8 +92,10 @@ public virtual string ReplaceCssVariables(string html)
             var scrollbarThumb = VSColorTheme.GetThemedColor(EnvironmentColors.ScrollBarThumbBackgroundColorKey).ToHex();
             var scrollbarThumbHover = VSColorTheme.GetThemedColor(EnvironmentColors.ScrollBarThumbMouseOverBackgroundColorKey).ToHex();
 
-            // Build variable map for regex-based replacement (like IntelliJ plugin)
-            var varMap = new System.Collections.Generic.Dictionary<string, string>
+            var varMap = ExtractRootCssVariables(html);
+
+            // IDE custom theme variables. These take priority over the extracted variables.
+            var ideVarOverridesMap = new System.Collections.Generic.Dictionary<string, string>
             {
                 // VS Code style variables (from LS HTML)
                 { "vscode-font-family", "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" },
@@ -128,7 +130,7 @@ public virtual string ReplaceCssVariables(string html)
                 { "button-secondary-background", secondaryButtonBackground },
                 { "button-secondary-foreground", secondaryButtonForeground },
                 { "button-secondary-hover-background", secondaryButtonHoverBackground },
-                // Legacy variables (for fallback HTML)
+                // Legacy variables (for fallback HTML theme colors)
                 { "default-font", "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" },
                 { "text-color", textColor },
                 { "background-color", backgroundColor },
@@ -137,20 +139,21 @@ public virtual string ReplaceCssVariables(string html)
                 { "horizontal-border-color", borderColor },
                 { "code-background-color", inputBackground },
                 { "input-border", inputBorder },
+                { "input-background-color", inputBackground },
+                { "section-background-color", inactiveSelectionBackground },
+                { "focus-color", linkColor },
                 { "main-font-size", "15px" },
                 { "ide-background-color", backgroundColor },
                 { "dimmed-text-color", disabledForeground }
             };
 
-            // Regex pattern to match var(--varName) or var(--varName, fallback)
-            // Matches var() usage in CSS
-            var cssVarPattern = new Regex(@"var\(--([a-zA-Z0-9_-]+)(?:,\s*[^)]+)?\)");
-
-            html = cssVarPattern.Replace(html, match =>
+            // Merge IDE variables into varMap (IDE values override :root values)
+            foreach (var ideVarOverride in ideVarOverridesMap)
             {
-                var varName = match.Groups[1].Value;
-                return varMap.ContainsKey(varName) ? varMap[varName] : match.Value;
-            });
+                varMap[ideVarOverride.Key] = ideVarOverride.Value;
+            }
+
+            html = ReplaceCssVarUsages(html, varMap, maxIterations: 10);
 
             // Template placeholder replacements (for embedded/fallback HTML)
             html = html.Replace("{{TEXT_COLOR}}", textColor);
@@ -175,6 +178,81 @@ public virtual string ReplaceCssVariables(string html)
             return html;
         }
 
+        /// <summary>
+        /// Extracts CSS variable definitions from :root blocks in HTML.
+        /// This is needed because IE11 doesn't support CSS custom properties natively.
+        /// </summary>
+        internal System.Collections.Generic.Dictionary<string, string> ExtractRootCssVariables(string html)
+        {
+            var variables = new System.Collections.Generic.Dictionary<string, string>();
+
+            // Match :root { ... } blocks (handles multi-line)
+            var rootPattern = new Regex(@"^\s*:root\s*\{(?<content>[^}]+)\}\s*$", RegexOptions.Multiline);
+            // Strip block comments /* ... */ (Singleline makes . match newlines)
+            var blockCommentPattern = new Regex(@"/\*.*?\*/", RegexOptions.Singleline);
+            // Match variable definitions: --name: value;
+            var varDefPattern = new Regex(@"^\s*--(?<name>[a-zA-Z0-9_-]+)\s*:\s*(?<value>[^;]+);", RegexOptions.Multiline);
+
+            foreach (Match rootMatch in rootPattern.Matches(html))
+            {
+                var rootBlock = rootMatch.Groups["content"].Value;
+                // Remove block comments before extracting variables
+                rootBlock = blockCommentPattern.Replace(rootBlock, "");
+
+                foreach (Match varMatch in varDefPattern.Matches(rootBlock))
+                {
+                    var name = varMatch.Groups["name"].Value;
+                    var value = varMatch.Groups["value"].Value.Trim();
+                    // Last definition wins (CSS cascade behavior)
+                    variables[name] = value;
+                }
+            }
+
+            return variables;
+        }
+
+        /// <summary>
+        /// Replaces var(--name) and var(--name, fallback) usages with actual values.
+        /// Loops until content stabilizes or max iterations reached (handles nested variables).
+        /// </summary>
+        internal string ReplaceCssVarUsages(string html, System.Collections.Generic.Dictionary<string, string> varMap, int maxIterations)
+        {
+            var cssVarPattern = new Regex(@"var\(--(?<name>[a-zA-Z0-9_-]+)(?:,\s*(?<fallback>[^)]+))?\)");
+
+            for (int i = 0; i < maxIterations; i++)
+            {
+                var previousHtml = html;
+
+                html = cssVarPattern.Replace(html, match =>
+                {
+                    var varName = match.Groups["name"].Value;
+                    var fallbackGroup = match.Groups["fallback"];
+
+                    // Priority: varMap value > CSS fallback > leave unchanged
+                    if (varMap.ContainsKey(varName))
+                    {
+                        return varMap[varName];
+                    }
+                    else if (fallbackGroup.Success)
+                    {
+                        return fallbackGroup.Value.Trim();
+                    }
+                    else
+                    {
+                        return match.Value;
+                    }
+                });
+
+                // Stop if content hasn't changed (no more replacements possible)
+                if (html == previousHtml)
+                {
+                    break;
+                }
+            }
+
+            return html;
+        }
+
         private string ColorToRgba(string hexColor, double alpha)
         {
             hexColor = hexColor.TrimStart('#');