[Lldb-commits] [lldb] [lldb-dap] Use css class tabulator-tick (PR #207608)

[Ely Ronnen via lldb-commits]

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

Upgrading [tabulator](https://www.npmjs.com/package/tabulator-tables) and using configurable CSS class "tabulator-tick" in order to have a natural tick color, instead of hard-coding the SVG

>From 5c03c1292396d3f64d5b16084e052fb54b360b68 Mon Sep 17 00:00:00 2001
From: Ely Ronnen <elyronnen at gmail.com>
Date: Sun, 5 Jul 2026 21:46:12 +0200
Subject: [PATCH] [lldb-dap] Use css class tabulator-tick

---
 lldb/tools/lldb-dap/extension/package.json               | 4 ++--
 .../lldb-dap/extension/src/ui/symbols-webview-html.ts    | 9 +++++++++
 .../lldb-dap/extension/src/webview/symbols-table-view.ts | 8 --------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/lldb/tools/lldb-dap/extension/package.json b/lldb/tools/lldb-dap/extension/package.json
index 4ddc98817203e..41e39093d5235 100644
--- a/lldb/tools/lldb-dap/extension/package.json
+++ b/lldb/tools/lldb-dap/extension/package.json
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@types/mocha": "^10.0.10",
     "@types/node": "^18.19.41",
-    "@types/tabulator-tables": "^6.2.10",
+    "@types/tabulator-tables": "^6.3.4",
     "@types/vscode": "1.90.0",
     "@types/vscode-webview": "^1.57.5",
     "@vscode/debugprotocol": "^1.68.0",
@@ -46,7 +46,7 @@
     "prettier": "^3.4.2",
     "prettier-plugin-curly": "^0.3.1",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "tabulator-tables": "^6.3.1",
+    "tabulator-tables": "^6.5.2",
     "typescript": "^5.7.3"
   },
   "activationEvents": [
diff --git a/lldb/tools/lldb-dap/extension/src/ui/symbols-webview-html.ts b/lldb/tools/lldb-dap/extension/src/ui/symbols-webview-html.ts
index b3dc4e1613ec3..c535045b1f9c5 100644
--- a/lldb/tools/lldb-dap/extension/src/ui/symbols-webview-html.ts
+++ b/lldb/tools/lldb-dap/extension/src/ui/symbols-webview-html.ts
@@ -54,6 +54,15 @@ export function getSymbolsTableHTMLContent(
 
       .tabulator-cell {
         text-overflow: clip !important;
+
+      }
+      
+      .tabulator .tabulator-cell .tabulator-tick {
+        fill: var(--vscode-editor-foreground);
+      }
+
+      .tabulator .tabulator-cell .tabulator-cross {
+        fill: var(--vscode-editor-foreground);
       }
 
       #symbols-table {
diff --git a/lldb/tools/lldb-dap/extension/src/webview/symbols-table-view.ts b/lldb/tools/lldb-dap/extension/src/webview/symbols-table-view.ts
index 588b2c1070e20..a7088815f7da8 100644
--- a/lldb/tools/lldb-dap/extension/src/webview/symbols-table-view.ts
+++ b/lldb/tools/lldb-dap/extension/src/webview/symbols-table-view.ts
@@ -1,11 +1,6 @@
 import type { CellComponent, ColumnDefinition } from "tabulator-tables";
 import type { SymbolType } from "..";
 
-/// SVG from https://github.com/olifolkerd/tabulator/blob/master/src/js/modules/Format/defaults/formatters/tickCross.js
-/// but with the default font color.
-/// hopefully in the future we can set the color as parameter: https://github.com/olifolkerd/tabulator/pull/4791
-const TICK_ELEMENT = `<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="var(--vscode-editor-foreground)" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34  c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351  l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07  l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>`;
-
 function getTabulatorHexaFormatter(
   padding: number,
 ): (cell: CellComponent) => string {
@@ -49,7 +44,6 @@ const SYMBOL_TABLE_COLUMNS: ColumnDefinition[] = [
     widthGrow: 0.8,
     formatter: "tickCross",
     formatterParams: {
-      tickElement: TICK_ELEMENT,
       crossElement: false,
     },
   },
@@ -61,7 +55,6 @@ const SYMBOL_TABLE_COLUMNS: ColumnDefinition[] = [
     widthGrow: 0.8,
     formatter: "tickCross",
     formatterParams: {
-      tickElement: TICK_ELEMENT,
       crossElement: false,
     },
   },
@@ -73,7 +66,6 @@ const SYMBOL_TABLE_COLUMNS: ColumnDefinition[] = [
     widthGrow: 0.8,
     formatter: "tickCross",
     formatterParams: {
-      tickElement: TICK_ELEMENT,
       crossElement: false,
     },
   },