Merge pull request #749 from lukecotter/feat-tooltip-background-col

Author: lcottercertinia

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

@@ -89,6 +89,20 @@ export class TimelineView extends LitElement {
         --tl-widget-border: var(--vscode-editorWidget-border, #454545);
         --tl-widget-foreground: var(--vscode-editorWidget-foreground, #cccccc);
 
+        /* Hover/tooltip */
+        --tl-hover-background: var(
+          --vscode-editorHoverWidget-background,
+          var(--vscode-editorWidget-background, #252526)
+        );
+        --tl-hover-border: var(
+          --vscode-editorHoverWidget-border,
+          var(--vscode-editorWidget-border, #454545)
+        );
+        --tl-hover-foreground: var(
+          --vscode-editorHoverWidget-foreground,
+          var(--vscode-editorWidget-foreground, #cccccc)
+        );
+
         /* Text */
         --tl-description-foreground: var(--vscode-descriptionForeground, #999);
         --tl-font-family: var(--vscode-font-family, sans-serif);

log-viewer/src/features/timeline/optimised/rendering/tooltip-utils.ts

@@ -39,11 +39,11 @@ export const PERCENT_THRESHOLD_BREACH = 1.0;
  */
 export const TOOLTIP_CSS = {
   /** Background color */
-  background: 'var(--tl-widget-background, #252526)',
+  background: 'var(--tl-hover-background, #252526)',
   /** Border color */
-  border: 'var(--tl-widget-border, #454545)',
+  border: 'var(--tl-hover-border, #454545)',
   /** Text color */
-  foreground: 'var(--tl-widget-foreground, #e3e3e3)',
+  foreground: 'var(--tl-hover-foreground, #e3e3e3)',
   /** Description/secondary text color */
   descriptionForeground: 'var(--tl-description-foreground, #999)',
   /** Muted description text color */

log-viewer/src/features/timeline/styles/timeline.css.ts

@@ -18,8 +18,8 @@ export const tooltipStyles = `
         padding: 5px;
         border-radius: 4px;
         border-left: 4px solid;
-        background-color: var(--tl-editor-background);
-        color: var(--tl-editor-foreground);
+        background-color: var(--tl-hover-background);
+        color: var(--tl-hover-foreground);
         font-family: monospace;
         font-size: 0.92rem;
         pointer-events: auto;
@@ -47,16 +47,16 @@ export const tooltipStyles = `
         white-space: nowrap;
         text-overflow: ellipsis;
         padding-right: 12px;
+        color: var(--tl-description-foreground, #999);
+        opacity: 0.9;
       }
 
       .tooltip-value {
         flex-shrink: 0;
         font-variant-numeric: tabular-nums;
         font-weight: 500;
         font-family: monospace;
-        opacity: 0.9;
         text-align: right;
         white-space: pre-wrap;
-        color: var(--tl-description-foreground, #999)
       }
 `;

log-viewer/src/tabulator/style/DataGrid.scss

@@ -38,6 +38,7 @@ $footerTextColor: var(--vscode-editor-foreground); //footer text color
 $footerBorderColor: transparent; //footer border color
 $footerSeparatorColor: transparent; //footer bottom separator color
 $footerActiveColor: #d00 !default; //footer bottom active text color
+
 @import '~tabulator-tables/src/scss/tabulator.scss';
 @import '../editors/MinMax';
 @import '../format/Progress';
@@ -102,18 +103,6 @@ $footerActiveColor: #d00 !default; //footer bottom active text color
     font-size: var(--vscode-editor-font-size, 0.9em);
   }
 
-  .tabulator-tooltip {
-    // Match timeline tooltip styling for consistency
-    background: var(--vscode-editor-background);
-    color: var(--vscode-editor-foreground);
-    overflow-wrap: anywhere;
-    font-family: monospace;
-    font-size: 0.92rem;
-    font-variant-numeric: tabular-nums;
-    padding: 5px;
-    border-radius: 4px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
-  }
   .tabulator-row.tabulator-selected {
     color: var(--vscode-list-activeSelectionForeground);
   }
@@ -155,6 +144,19 @@ $footerActiveColor: #d00 !default; //footer bottom active text color
   }
 }
 
+.tabulator-tooltip {
+  // Match timeline tooltip styling for consistency
+  background: var(--vscode-editorHoverWidget-background, var(--vscode-editorWidget-background));
+  color: var(--vscode-editorHoverWidget-foreground, var(--vscode-editor-foreground));
+  overflow-wrap: anywhere;
+  font-family: monospace;
+  font-size: 0.92rem;
+  font-variant-numeric: tabular-nums;
+  padding: 5px;
+  border-radius: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
 .tabulator-edit-list {
   border-color: var(--vscode-focusBorder, default);