Improve theme support #54

Author: dhuebner

eslint.config.js

@@ -72,7 +72,8 @@ module.exports = {
         "@typescript-eslint/no-non-null-assertion": "off",          // allow ! operator
         "@typescript-eslint/parameter-properties": "error",      // no property definitions in class constructors
         "@typescript-eslint/no-unused-vars": ["warn", {             // warn about Unused Variables
-            "argsIgnorePattern": "^_"
+            "argsIgnorePattern": "^_",
+            "varsIgnorePattern": "^_"
         }],
         "@typescript-eslint/no-var-requires": "error",              // use import instead of require
         "@typescript-eslint/prefer-for-of": "error",                // prefer for-of loop over arrays

packages/vscode-messenger-devtools/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## v0.6.0 (Jan. 2026)
 
+* **New:** Added data export functionality - export messenger events as JSON or CSV files
+  * Export all events for the selected extension or only selected table rows
+  * Files are automatically saved with timestamped filenames
+  * JSON export preserves full event structure including parameters and metadata
+  * CSV export includes all event properties with proper escaping for complex data
+* Improved dark theme support for charts and overall UI
 * Updated to use vscode-messenger v0.6.0 with enhanced handler management capabilities
 
 ## v0.5.1 (Feb. 2025)

packages/vscode-messenger-devtools/webview-ui/src/components/react-echart.tsx

@@ -14,7 +14,11 @@ export interface ReactEChartsProps {
 
 export type ChartData = Map<string, { notification: [number, number]; response: [number, number]; request: [number, number]; }>;
 
-export function createOptions(charSeries: Array<{ name: string, data: number[] }>, yAxis: string[], legendFormat = ''): ReactEChartsProps['option'] {
+export function createOptions(charSeries: Array<{ name: string, data: number[] }>, yAxis: string[], legendFormat = '', theme?: 'light' | 'dark'): ReactEChartsProps['option'] {
+    // Use VS Code theme colors for better integration
+    // In dark theme, use a lighter gray; in light theme, use a darker gray for better contrast
+    const legendTextColor = theme === 'dark' ? '#cccccc' : '#616161';
+
     const option: ReactEChartsProps['option'] = {
         tooltip: {
             trigger: 'axis',
@@ -24,7 +28,10 @@ export function createOptions(charSeries: Array<{ name: string, data: number[] }
         },
         legend: {
             orient: 'horizontal',
-            formatter: `{name}${legendFormat}`
+            formatter: `{name}${legendFormat}`,
+            textStyle: {
+                color: legendTextColor
+            }
         },
         grid: {
             show: true,

packages/vscode-messenger-devtools/webview-ui/src/devtools-view.tsx

@@ -14,7 +14,7 @@ import { EventTable } from './components/event-table';
 import { ReactECharts, collectChartData, createOptions } from './components/react-echart';
 import { ViewHeader } from './components/view-header';
 import type { DevtoolsComponentState } from './utilities/view-state';
-import { restoreState, storeState, vsCodeApi } from './utilities/view-state';
+import { restoreState, storeState, vsCodeApi, getVSCodeTheme } from './utilities/view-state';
 
 type DataEvent = {
     extension: string;
@@ -53,6 +53,7 @@ class DevtoolsComponent extends React.Component<Record<string, any>, DevtoolsCom
 
     messenger: Messenger;
     eventTable: EventTable;
+    private themeObserver: MutationObserver | null = null;
 
     constructor() {
         super({});
@@ -61,7 +62,8 @@ class DevtoolsComponent extends React.Component<Record<string, any>, DevtoolsCom
             selectedExtension: storedState?.selectedExtension ?? '',
             datasetSrc: storedState?.datasetSrc ? new Map() : new Map(),
             chartsShown: storedState?.chartsShown ?? false,
-            diagramShown: storedState?.diagramShown ?? false
+            diagramShown: storedState?.diagramShown ?? false,
+            theme: storedState?.theme ?? getVSCodeTheme()
         };
         this.eventTable = new EventTable({ gridRowSelected: (e) => this.gridRowSelected(e) });
         this.messenger = new Messenger(vsCodeApi, { debugLog: true });
@@ -83,13 +85,46 @@ class DevtoolsComponent extends React.Component<Record<string, any>, DevtoolsCom
             return;
         }).catch(err => console.error(err));
 
+        // Set up theme change observer
+        this.setupThemeObserver();
     }
 
-    render() {
+    componentWillUnmount() {
+        // Clean up theme observer
+        if (this.themeObserver) {
+            this.themeObserver.disconnect();
+            this.themeObserver = null;
+        }
+    }
 
+    private setupThemeObserver() {
+        // Watch for changes to the data-vscode-theme-kind attribute
+        this.themeObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'data-vscode-theme-kind') {
+                    const newTheme = getVSCodeTheme();
+                    if (newTheme !== this.state.theme) {
+                        // Update state with new theme - this will trigger chart re-render
+                        // and table will automatically pick up new CSS theme class
+                        this.updateState({ ...this.state, theme: newTheme }, true);
+                    }
+                }
+            });
+        });
+
+        // Start observing
+        this.themeObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['data-vscode-theme-kind']
+        });
+
+    }
+
+    render() {
+        const theme = this.state.theme;
         const charSeries = collectChartData(this.selectedExtensionData()?.events ?? []);
-        const optionSize = createOptions(charSeries.series[0], charSeries.senderY, '  (chars)');
-        const optionCount = createOptions(charSeries.series[1], charSeries.senderY);
+        const optionSize = createOptions(charSeries.series[0], charSeries.senderY, '  (chars)', theme);
+        const optionCount = createOptions(charSeries.series[1], charSeries.senderY, '', theme);
 
         const selectedExt = this.selectedExtensionData();
         const updateState = (selectedId: string) => {
@@ -360,7 +395,8 @@ class DevtoolsComponent extends React.Component<Record<string, any>, DevtoolsCom
             if (typeof value === 'object') {
                 try {
                     stringValue = JSON.stringify(value);
-                } catch (error) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                } catch (_error) {
                     stringValue = String(value);
                 }
             } else {

packages/vscode-messenger-devtools/webview-ui/src/utilities/view-state.ts

@@ -7,7 +7,8 @@ export function storeState(uiState: DevtoolsComponentState): void {
         selectedExtension: uiState.selectedExtension,
         datasetSrc: [...uiState.datasetSrc],
         chartsShown: uiState.chartsShown,
-        diagramShown: uiState.diagramShown
+        diagramShown: uiState.diagramShown,
+        theme: uiState.theme
     });
 }
 
@@ -18,15 +19,23 @@ export  function restoreState(): DevtoolsComponentState | undefined {
             selectedExtension: stored.selectedExtension,
             datasetSrc: new Map(stored.datasetSrc),
             chartsShown: stored.chartsShown,
-            diagramShown: stored.diagramShown
+            diagramShown: stored.diagramShown,
+            theme: stored.theme || getVSCodeTheme() // fallback to current theme if not stored
         };
     }
     return undefined;
 }
 
+// Helper function to detect VS Code theme
+export function getVSCodeTheme(): 'light' | 'dark' {
+    const themeKind = document.body.getAttribute('data-vscode-theme-kind');
+    return themeKind?.includes('dark') ? 'dark' : 'light';
+}
+
 export interface DevtoolsComponentState {
     selectedExtension: string
     datasetSrc: Map<string, ExtensionData>
     chartsShown: boolean
     diagramShown: boolean
+    theme: 'light' | 'dark'
 }