[Lldb-commits] [lldb] [lldb-dap] improve symbol table style (PR #155097)

[via lldb-commits]

llvmbot wrote:


<!--LLVM PR SUMMARY COMMENT-->

@llvm/pr-subscribers-lldb

Author: Ely Ronnen (eronnen)

<details>
<summary>Changes</summary>

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

[Screencast From 2025-08-23 14-48-44.webm](https://github.com/user-attachments/assets/a738ac3c-3e56-4a57-b713-7430c614c415)


---
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
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 || [],
 });
 

``````````

</details>


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