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

[Ely Ronnen via lldb-commits]

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

* 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)


>From 17f91ec0bcbeda08201a39d28657d2268cebbb74 Mon Sep 17 00:00:00 2001
From: Ely Ronnen <elyronnen at gmail.com>
Date: Sat, 23 Aug 2025 12:44:27 +0200
Subject: [PATCH 1/3] use vscode theme colors for alternating symbol table
 colors

---
 lldb/tools/lldb-dap/src-ts/ui/symbols-webview-html.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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..8916e5d692196 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
@@ -23,7 +23,7 @@ export function getSymbolsTableHTMLContent(tabulatorJsPath: vscode.Uri, tabulato
       }
 
       .tabulator-row.tabulator-row-even {
-        background-color: var(--vscode-editor-background);
+        background-color: var(--vscode-tree-tableOddRowsBackground);
         color: var(--vscode-editor-foreground);
       }
 
@@ -32,6 +32,11 @@ export function getSymbolsTableHTMLContent(tabulatorJsPath: vscode.Uri, tabulato
         color: var(--vscode-editor-foreground);
       }
 
+      .tabulator .tabulator-tableholder .tabulator-table {
+        background-color: var(--vscode-editor-background);
+        color: var(--vscode-editor-foreground);
+      }
+
       .tabulator-cell {
         text-overflow: clip !important;
       }

>From 8d1d1b7ce240f4ddee89ab4a817109ffd479d16f Mon Sep 17 00:00:00 2001
From: Ely Ronnen <elyronnen at gmail.com>
Date: Sat, 23 Aug 2025 13:02:25 +0200
Subject: [PATCH 2/3] disable table selection

---
 lldb/tools/lldb-dap/src-ts/webview/symbols-table-view.ts | 1 +
 1 file changed, 1 insertion(+)

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

>From 0d9025981074f8a6c61406106b40966e763b8276 Mon Sep 17 00:00:00 2001
From: Ely Ronnen <elyronnen at gmail.com>
Date: Sat, 23 Aug 2025 14:49:36 +0200
Subject: [PATCH 3/3] set tabulator header color

---
 .../lldb-dap/src-ts/ui/symbols-webview-html.ts    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

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 8916e5d692196..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);
       }
 
@@ -24,7 +29,13 @@ export function getSymbolsTableHTMLContent(tabulatorJsPath: vscode.Uri, tabulato
 
       .tabulator-row.tabulator-row-even {
         background-color: var(--vscode-tree-tableOddRowsBackground);
-        color: var(--vscode-editor-foreground);
+      }
+
+      @media (hover:hover) and (pointer:fine){
+        .tabulator-row:hover {
+          background-color: var(--vscode-list-hoverBackground);
+          color: var(--vscode-list-hoverForeground);
+        }
       }
 
       .tabulator-row.tabulator-selected {