[lldb-dap] improve symbol table style

[eronnen]

• apply odd table rows color from vscode theme
• apply hover color from vscode theme

Screencast.From.2025-08-23.14-48-44.webm

[llvmbot]

@llvm/pr-subscribers-lldb

Author: Ely Ronnen (eronnen)

Changes

• apply odd table rows color from vscode theme
• apply hover color from vscode theme

Screencast.From.2025-08-23.14-48-44.webm

---

Full diff: https://github.com/llvm/llvm-project/pull/155097.diff

2 Files Affected:

• (modified) lldb/tools/lldb-dap/src-ts/ui/symbols-webview-html.ts (+18-2)
• (modified) lldb/tools/lldb-dap/src-ts/webview/symbols-table-view.ts (+1)

diff --git a/lldb/tools/lldb-dap/src-ts/ui/symbols-webview-html.ts b/lldb/tools/lldb-dap/src-ts/ui/symbols-webview-html.ts
index 88e24f3108787..c00e0d462569a 100644
--- a/lldb/tools/lldb-dap/src-ts/ui/symbols-webview-html.ts
+++ b/lldb/tools/lldb-dap/src-ts/ui/symbols-webview-html.ts
@@ -12,8 +12,13 @@ export function getSymbolsTableHTMLContent(tabulatorJsPath: vscode.Uri, tabulato
         color: var(--vscode-editor-foreground);
       }
 
+      .tabulator .tabulator-header {
+        background-color: var(--vscode-tree-tableOddRowsBackground);
+        color: var(--vscode-editor-foreground);
+      }
+
       .tabulator .tabulator-header .tabulator-col {
-        background-color: var(--vscode-editor-background);
+        background-color: var(--vscode-tree-tableOddRowsBackground);
         color: var(--vscode-editor-foreground);
       }
 
@@ -23,11 +28,22 @@ export function getSymbolsTableHTMLContent(tabulatorJsPath: vscode.Uri, tabulato
       }
 
       .tabulator-row.tabulator-row-even {
+        background-color: var(--vscode-tree-tableOddRowsBackground);
+      }
+
+      @media (hover:hover) and (pointer:fine){
+        .tabulator-row:hover {
+          background-color: var(--vscode-list-hoverBackground);
+          color: var(--vscode-list-hoverForeground);
+        }
+      }
+
+      .tabulator-row.tabulator-selected {
         background-color: var(--vscode-editor-background);
         color: var(--vscode-editor-foreground);
       }
 
-      .tabulator-row.tabulator-selected {
+      .tabulator .tabulator-tableholder .tabulator-table {
         background-color: var(--vscode-editor-background);
         color: var(--vscode-editor-foreground);
       }
diff --git a/lldb/tools/lldb-dap/src-ts/webview/symbols-table-view.ts b/lldb/tools/lldb-dap/src-ts/webview/symbols-table-view.ts
index 8454378abef16..9d346818e384a 100644
--- a/lldb/tools/lldb-dap/src-ts/webview/symbols-table-view.ts
+++ b/lldb/tools/lldb-dap/src-ts/webview/symbols-table-view.ts
@@ -95,6 +95,7 @@ const SYMBOLS_TABLE = new Tabulator("#symbols-table", {
   height: "100vh",
   columns: SYMBOL_TABLE_COLUMNS,
   layout: "fitColumns",
+  selectableRows: false,
   data: previousState?.symbols || [],
 });
 

[walter-erquinigo]

Thank you for the attention to details :) This is what makes this DA great!