feat: decouple timeline css colors fro vscode

- Introduced EditorColors interface to encapsulate resolved color values for PixiJS renderers.
- Updated TimelineFlameChart to extract editor colors from CSS custom properties.
- Modified TimelineView to define new CSS variables for editor theming.
- Enhanced FlameChart, MeasureRangeRenderer, MinimapRenderer, and others to accept and utilize resolved color values.
- Refactored rendering logic in SearchHighlightRenderer and SelectionHighlightRenderer to use provided highlight colors.
- Updated tooltip styles to reference new CSS variables for consistent theming.
- Removed direct CSS variable extraction in favor of pre-resolved color values for performance improvements.

Author: lukecotter

log-viewer/src/features/timeline/components/TimelineFlameChart.ts

@@ -14,8 +14,8 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 
 import type { ApexLog } from 'apex-log-parser';
 import { ApexLogTimeline } from '../optimised/ApexLogTimeline.js';
-
-import type { TimelineOptions } from '../types/flamechart.types.js';
+import { parseColorToHex } from '../optimised/rendering/ColorUtils.js';
+import type { EditorColors, TimelineOptions } from '../types/flamechart.types.js';
 import { TimelineError } from '../types/flamechart.types.js';
 
 import { tooltipStyles } from '../styles/timeline.css.js';
@@ -145,6 +145,7 @@ export class TimelineFlameChart extends LitElement {
       const optionsWithTheme = {
         ...this.options,
         themeName: this.themeName,
+        editorColors: this.extractEditorColors(),
       };
 
       this.apexLogTimeline = new ApexLogTimeline();
@@ -166,6 +167,48 @@ export class TimelineFlameChart extends LitElement {
     this.apexLogTimeline?.setTimeDisplayMode(mode);
   }
 
+  // ============================================================================
+  // COLOR EXTRACTION
+  // ============================================================================
+
+  /**
+   * Extract resolved editor colors from CSS custom properties (--tl-*).
+   * These are passed to PixiJS renderers so they don't read CSS directly.
+   */
+  private extractEditorColors(): EditorColors {
+    const style = getComputedStyle(this);
+    return {
+      cursorForeground: parseColorToHex(
+        style.getPropertyValue('--tl-cursor-foreground').trim() || '#fff',
+        0xffffff,
+      ),
+      focusBorder: parseColorToHex(
+        style.getPropertyValue('--tl-focus-border').trim() || '#007fd4',
+        0x007fd4,
+      ),
+      findMatchBackground: parseColorToHex(
+        style.getPropertyValue('--tl-find-match-background').trim() || '#ff9632',
+        0xea5c00,
+      ),
+      widgetBackground: parseColorToHex(
+        style.getPropertyValue('--tl-widget-background').trim() || '#252526',
+        0x252526,
+      ),
+      lineNumberForeground: parseColorToHex(
+        style.getPropertyValue('--tl-line-number-foreground').trim() || '#808080',
+        0x808080,
+      ),
+      selectionBackground: parseColorToHex(
+        style.getPropertyValue('--tl-selection-background').trim() || 'rgba(38, 79, 120, 0.5)',
+        0x264f78,
+      ),
+      selectionHighlightBorder: parseColorToHex(
+        style.getPropertyValue('--tl-selection-highlight-border').trim() || '#007fd4',
+        0x007fd4,
+      ),
+    };
+  }
+
   // ============================================================================
   // CLEANUP
   // ============================================================================

log-viewer/src/features/timeline/components/TimelineView.ts

@@ -72,7 +72,39 @@ export class TimelineView extends LitElement {
     unsafeCSS(codiconStyles),
     css`
       :host {
-        --button-icon-hover-background: var(--vscode-toolbar-hoverBackground);
+        /* Editor */
+        --tl-editor-background: var(--vscode-editor-background);
+        --tl-editor-foreground: var(--vscode-editor-foreground);
+        --tl-cursor-foreground: var(--vscode-editorCursor-foreground, #fff);
+        --tl-focus-border: var(--vscode-focusBorder, #007fd4);
+        --tl-line-number-foreground: var(--vscode-editorLineNumber-foreground, #808080);
+
+        /* Find/selection */
+        --tl-find-match-background: var(--vscode-editor-findMatchBackground, #ff9632);
+        --tl-selection-background: var(--vscode-editor-selectionBackground, rgba(38, 79, 120, 0.5));
+        --tl-selection-highlight-border: var(--vscode-editor-selectionHighlightBorder, transparent);
+
+        /* Widgets */
+        --tl-widget-background: var(--vscode-editorWidget-background, #252526);
+        --tl-widget-border: var(--vscode-editorWidget-border, #454545);
+        --tl-widget-foreground: var(--vscode-editorWidget-foreground, #cccccc);
+
+        /* Text */
+        --tl-description-foreground: var(--vscode-descriptionForeground, #999);
+        --tl-font-family: var(--vscode-font-family, sans-serif);
+
+        /* Buttons */
+        --tl-button-secondary-background: var(--vscode-button-secondaryBackground, #3a3d41);
+        --tl-button-secondary-foreground: var(--vscode-button-secondaryForeground, #cccccc);
+        --tl-button-secondary-hover-background: var(
+          --vscode-button-secondaryHoverBackground,
+          #45494e
+        );
+
+        /* Toolbar */
+        --tl-toolbar-hover-background: var(--vscode-toolbar-hoverBackground);
+
+        --button-icon-hover-background: var(--tl-toolbar-hover-background);
 
         display: flex;
         flex-direction: column;

log-viewer/src/features/timeline/optimised/FlameChart.ts

@@ -295,10 +295,13 @@ export class FlameChart<E extends EventNode = EventNode> {
 
     // Create axis renderer SECOND
     if (this.axisContainer && this.uiContainer) {
+      const editorColors = this.options.editorColors;
       const axisConfig = {
         height: 30,
-        lineColor: 0x808080,
-        textColor: '#808080',
+        lineColor: editorColors?.lineNumberForeground ?? 0x808080,
+        textColor: editorColors
+          ? `#${editorColors.lineNumberForeground.toString(16).padStart(6, '0')}`
+          : '#808080',
         fontSize: 11,
         minLabelSpacing: 120,
       };
@@ -370,7 +373,10 @@ export class FlameChart<E extends EventNode = EventNode> {
 
     // Initialize cursor line renderer (for bidirectional cursor mirroring)
     if (this.uiContainer) {
-      this.cursorLineRenderer = new CursorLineRenderer(this.uiContainer);
+      this.cursorLineRenderer = new CursorLineRenderer(
+        this.uiContainer,
+        this.options.editorColors?.cursorForeground,
+      );
     }
 
     // Initialize minimap orchestrator
@@ -561,6 +567,7 @@ export class FlameChart<E extends EventNode = EventNode> {
       this.textLabelRenderer,
       this.viewport,
       this.mainTimelineYOffset,
+      this.options.editorColors?.findMatchBackground,
     );
 
     // Set stage container for clip-space rendering
@@ -1241,13 +1248,21 @@ export class FlameChart<E extends EventNode = EventNode> {
     });
 
     // Initialize the orchestrator
+    const minimapEditorColors = this.options.editorColors;
     await this.minimapOrchestrator.init(
       this.minimapDiv,
       displayWidth,
       containerHeight,
       this.index,
       this.rectangleManager,
       this.viewport,
+      minimapEditorColors
+        ? {
+            widgetBackground: minimapEditorColors.widgetBackground,
+            focusBorder: minimapEditorColors.focusBorder,
+            lineNumberForeground: minimapEditorColors.lineNumberForeground,
+          }
+        : undefined,
     );
 
     // Focus container on minimap mousedown for keyboard support
@@ -1428,6 +1443,7 @@ export class FlameChart<E extends EventNode = EventNode> {
       this.index.totalDuration,
       this.index.maxDepth,
       this.mainTimelineYOffset,
+      this.options.editorColors?.findMatchBackground,
     );
   }
 
@@ -1461,12 +1477,20 @@ export class FlameChart<E extends EventNode = EventNode> {
     });
 
     // Initialize the orchestrator
+    const editorColors = this.options.editorColors;
     this.measurementOrchestrator.init(
       this.worldContainer,
       this.container,
       this.viewport,
       this.index.totalDuration,
       this.index.maxDepth,
+      editorColors
+        ? {
+            selectionBackground: editorColors.selectionBackground,
+            selectionHighlightBorder: editorColors.selectionHighlightBorder,
+            focusBorder: editorColors.focusBorder,
+          }
+        : undefined,
     );
   }
 

log-viewer/src/features/timeline/optimised/measurement/MeasureRangeRenderer.ts

@@ -19,7 +19,6 @@
 import * as PIXI from 'pixi.js';
 import { formatDuration, formatTimeRange } from '../../../../core/utility/Util.js';
 import type { ViewportState } from '../../types/flamechart.types.js';
-import { parseColorToHex } from '../rendering/ColorUtils.js';
 import { calculateLabelPosition, createTimelineLabel } from '../rendering/LabelPositioning.js';
 import type { MeasurementSnapshot } from './MeasurementState.js';
 
@@ -70,8 +69,18 @@ export class MeasureRangeRenderer {
    * @param pixiContainer - PixiJS container for graphics (worldContainer)
    * @param htmlContainer - HTML container for label positioning
    * @param onZoomClick - Optional callback when zoom icon is clicked
+   * @param resolvedColors - Optional pre-resolved colors (selectionBackground, selectionHighlightBorder, focusBorder)
    */
-  constructor(pixiContainer: PIXI.Container, htmlContainer: HTMLElement, onZoomClick?: () => void) {
+  constructor(
+    pixiContainer: PIXI.Container,
+    htmlContainer: HTMLElement,
+    onZoomClick?: () => void,
+    resolvedColors?: {
+      selectionBackground: number;
+      selectionHighlightBorder: number;
+      focusBorder: number;
+    },
+  ) {
     this.onZoomClick = onZoomClick;
 
     // Create graphics for overlay - render above frames but below tooltips
@@ -83,8 +92,15 @@ export class MeasureRangeRenderer {
     this.labelElement = this.createLabelElement();
     htmlContainer.appendChild(this.labelElement);
 
-    // Extract colors from CSS variables
-    this.colors = this.extractColors();
+    // Use provided colors or defaults
+    if (resolvedColors) {
+      this.colors = {
+        fillColor: resolvedColors.selectionBackground,
+        borderColor: resolvedColors.selectionHighlightBorder || resolvedColors.focusBorder,
+      };
+    } else {
+      this.colors = { fillColor: 0x264f78, borderColor: 0x264f78 };
+    }
   }
 
   /**
@@ -141,8 +157,8 @@ export class MeasureRangeRenderer {
       padding: 0;
       border: none;
       border-radius: 4px;
-      background: var(--vscode-button-secondaryBackground, #3a3d41);
-      color: var(--vscode-button-secondaryForeground, #cccccc);
+      background: var(--tl-button-secondary-background, #3a3d41);
+      color: var(--tl-button-secondary-foreground, #cccccc);
       cursor: pointer;
       pointer-events: auto;
       transition: background 0.1s;
@@ -163,40 +179,26 @@ export class MeasureRangeRenderer {
     });
 
     button.addEventListener('mouseenter', () => {
-      button.style.background = 'var(--vscode-button-secondaryHoverBackground, #45494e)';
+      button.style.background = 'var(--tl-button-secondary-hover-background, #45494e)';
     });
 
     button.addEventListener('mouseleave', () => {
-      button.style.background = 'var(--vscode-button-secondaryBackground, #3a3d41)';
+      button.style.background = 'var(--tl-button-secondary-background, #3a3d41)';
     });
 
     return button;
   }
 
   /**
-   * Extract measurement colors from CSS variables.
-   * Uses VS Code selection colors for theme compatibility.
+   * Update measurement colors (e.g., after theme change).
+   *
+   * @param selectionBackground - Fill color (0xRRGGBB)
+   * @param borderColor - Border color (0xRRGGBB)
    */
-  private extractColors(): MeasurementColors {
-    const computedStyle = getComputedStyle(document.documentElement);
-
-    // Selection background for fill
-    const fillStr =
-      computedStyle.getPropertyValue('--vscode-editor-selectionBackground').trim() ||
-      'rgba(38, 79, 120, 0.5)';
-
-    // Selection highlight border or fallback to a visible color
-    const borderStr =
-      computedStyle.getPropertyValue('--vscode-editor-selectionHighlightBorder').trim() ||
-      computedStyle.getPropertyValue('--vscode-focusBorder').trim() ||
-      '#007fd4';
-
-    // Default blue (0x264f78) for measurement overlay
-    const defaultBlue = 0x264f78;
-
-    return {
-      fillColor: parseColorToHex(fillStr, defaultBlue),
-      borderColor: parseColorToHex(borderStr, defaultBlue),
+  public setColors(selectionBackground: number, borderColor: number): void {
+    this.colors = {
+      fillColor: selectionBackground,
+      borderColor,
     };
   }
 
@@ -298,13 +300,6 @@ export class MeasureRangeRenderer {
     this.labelElement.style.display = 'none';
   }
 
-  /**
-   * Refresh colors from CSS variables (e.g., after theme change).
-   */
-  public refreshColors(): void {
-    this.colors = this.extractColors();
-  }
-
   /**
    * Destroy renderer and cleanup resources.
    */

log-viewer/src/features/timeline/optimised/minimap/MinimapAxisRenderer.ts

@@ -24,7 +24,6 @@
 import { BitmapText, Container, Graphics } from 'pixi.js';
 
 import { formatDuration, TEXT_LABEL_CONSTANTS } from '../../types/flamechart.types.js';
-import { parseColorToHex } from '../rendering/ColorUtils.js';
 import type { MinimapViewport } from './MinimapViewport.js';
 
 /**
@@ -93,7 +92,7 @@ export class MinimapAxisRenderer {
     // Create container for labels
     this.labelsContainer = new Container();
 
-    // Initialize stroke options (updated in refreshColors)
+    // Initialize stroke options (updated in setColors)
     this.strokeOptions = { color: this.config.tickColor, width: 1 };
   }
 
@@ -196,25 +195,18 @@ export class MinimapAxisRenderer {
   }
 
   /**
-   * Refresh colors from CSS variables (e.g., after VS Code theme change).
-   * Updates tick and label colors.
+   * Update tick and label colors (e.g., after theme change).
+   *
+   * @param color - Resolved color for ticks and labels (0xRRGGBB)
    */
-  public refreshColors(): void {
-    // Re-extract colors from CSS variables
-    const computedStyle = getComputedStyle(document.documentElement);
-
-    // Update tick color
-    const tickColorStr =
-      computedStyle.getPropertyValue('--vscode-editorLineNumber-foreground').trim() || '#808080';
-    this.config.tickColor = parseColorToHex(tickColorStr, 0x808080);
-    this.strokeOptions.color = this.config.tickColor;
-
-    // Update label tint color
-    this.config.labelTint = parseColorToHex(tickColorStr, 0x808080);
+  public setColors(color: number): void {
+    this.config.tickColor = color;
+    this.strokeOptions.color = color;
+    this.config.labelTint = color;
 
     // Update existing labels with new tint (BitmapText uses tint for color)
     for (const label of this.labelPool) {
-      label.tint = this.config.labelTint;
+      label.tint = color;
     }
   }