feat: data grid search input styling to match VS Code styling

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **✂️ Copy Text in Views**: You can now highlight and copy text from the Call Tree, Analysis, and Database views without the text clearing immediately after highlighting ([#504]).
 - **💎 Improved HiDPI Rendering**: Sharpened rendering for the timeline on HiDPI displays ([#588]).
 - **🔍 Call Tree Search**: Search in the Call Tree now only includes the visible filtered rows ([#539]).
+- **🎨 Search Input Styling:**: The grid search input fits into VS Code styles better ([#619]).
 
 ### Fixed
 
@@ -395,6 +396,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 [#592]: https://github.com/certinia/debug-log-analyzer/issues/592
 [#93]: https://github.com/certinia/debug-log-analyzer/issues/93
 [#539]: https://github.com/certinia/debug-log-analyzer/issues/539
+[#619]: https://github.com/certinia/debug-log-analyzer/issues/619
 
 <!-- 1.16.1 -->
 

log-viewer/modules/components/analysis-view/AnalysisView.ts

@@ -341,7 +341,6 @@ export class AnalysisView extends LitElement {
           headerSortStartingDir: 'desc',
           width: 150,
           sorter: 'string',
-          cssClass: 'datagrid-code-text',
           tooltip: true,
           headerFilter: 'list',
           headerFilterFunc: 'in',
@@ -351,7 +350,6 @@ export class AnalysisView extends LitElement {
             multiselect: true,
           },
           headerFilterLiveFilter: false,
-          variableHeight: true,
         },
         {
           title: 'Type',
@@ -360,12 +358,12 @@ export class AnalysisView extends LitElement {
           width: 150,
           sorter: 'string',
           tooltip: true,
-          cssClass: 'datagrid-code-text',
         },
         {
           title: 'Count',
           field: 'count',
           sorter: 'number',
+          cssClass: 'number-cell',
           width: 65,
           hozAlign: 'right',
           headerHozAlign: 'right',

log-viewer/modules/components/calltree-view/CalltreeView.ts

@@ -666,7 +666,6 @@ export class CalltreeView extends LitElement {
             field: 'namespace',
             sorter: 'string',
             width: 120,
-            cssClass: 'datagrid-code-text',
             headerFilter: 'list',
             headerFilterFunc: this._namespaceFilter,
             headerFilterFuncParams: { filterCache: namespaceFilterCache },
@@ -681,6 +680,7 @@ export class CalltreeView extends LitElement {
             title: 'DML Count',
             field: 'dmlCount.total',
             sorter: 'number',
+            cssClass: 'number-cell',
             width: 60,
             hozAlign: 'right',
             headerHozAlign: 'right',
@@ -690,6 +690,7 @@ export class CalltreeView extends LitElement {
             title: 'SOQL Count',
             field: 'soqlCount.total',
             sorter: 'number',
+            cssClass: 'number-cell',
             width: 60,
             hozAlign: 'right',
             headerHozAlign: 'right',
@@ -699,6 +700,7 @@ export class CalltreeView extends LitElement {
             title: 'Throws Count',
             field: 'totalThrownCount',
             sorter: 'number',
+            cssClass: 'number-cell',
             width: 60,
             hozAlign: 'right',
             headerHozAlign: 'right',
@@ -708,6 +710,7 @@ export class CalltreeView extends LitElement {
             title: 'DML Rows',
             field: 'dmlRowCount.total',
             sorter: 'number',
+            cssClass: 'number-cell',
             width: 60,
             hozAlign: 'right',
             headerHozAlign: 'right',
@@ -717,6 +720,7 @@ export class CalltreeView extends LitElement {
             title: 'SOQL Rows',
             field: 'soqlRowCount.total',
             sorter: 'number',
+            cssClass: 'number-cell',
             width: 60,
             hozAlign: 'right',
             headerHozAlign: 'right',

log-viewer/modules/components/database-view/DMLView.ts

@@ -345,6 +345,7 @@ export class DMLView extends LitElement {
           title: 'Row Count',
           field: 'rowCount',
           sorter: 'number',
+          cssClass: 'number-cell',
           width: 90,
           bottomCalc: 'sum',
           hozAlign: 'right',
@@ -354,6 +355,7 @@ export class DMLView extends LitElement {
           title: 'Time Taken (ms)',
           field: 'timeTaken',
           sorter: 'number',
+          cssClass: 'number-cell',
           width: 110,
           hozAlign: 'right',
           headerHozAlign: 'right',

log-viewer/modules/components/database-view/SOQLView.ts

@@ -450,7 +450,6 @@ export class SOQLView extends LitElement {
           title: 'Namespace',
           field: 'namespace',
           sorter: 'string',
-          cssClass: 'datagrid-code-text',
           width: 120,
           headerFilter: 'list',
           headerFilterFunc: 'in',
@@ -465,6 +464,7 @@ export class SOQLView extends LitElement {
           title: 'Row Count',
           field: 'rowCount',
           sorter: 'number',
+          cssClass: 'number-cell',
           width: 100,
           hozAlign: 'right',
           headerHozAlign: 'right',
@@ -474,6 +474,7 @@ export class SOQLView extends LitElement {
           title: 'Time Taken (ms)',
           field: 'timeTaken',
           sorter: 'number',
+          cssClass: 'number-cell',
           width: 120,
           hozAlign: 'right',
           headerHozAlign: 'right',
@@ -491,6 +492,7 @@ export class SOQLView extends LitElement {
           title: 'Aggregations',
           field: 'aggregations',
           sorter: 'number',
+          cssClass: 'number-cell',
           width: 100,
           hozAlign: 'right',
           headerHozAlign: 'right',

log-viewer/modules/datagrid/style/DataGrid.scss

@@ -29,7 +29,7 @@ $rowSelectedBackground: var(--vscode-list-activeSelectionBackground);
 //row background color when selected and hovered
 $rowSelectedBackgroundHover: var(--vscode-list-activeSelectionBackground);
 
-$editBoxColor: var(--vscode-list-activeSelectionBackground, #1d68cd); //border color for edit boxes
+$editBoxColor: var(--vscode-focusBorder, #1d68cd); //border color for edit boxes
 $errorColor: #dd0000 !default; //error indication
 
 //footer theming
@@ -62,7 +62,6 @@ $footerActiveColor: #d00 !default; //footer bottom active text color
       padding: 2px 4px;
       box-sizing: border-box;
       border-radius: 2px;
-      font-size: inherit;
       appearance: textfield !important;
     }
     input[type='search']:focus {
@@ -142,8 +141,25 @@ $footerActiveColor: #d00 !default; //footer bottom active text color
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
   }
+
+  .number-cell {
+    font-variant-numeric: tabular-nums;
+  }
 }
 
 .tabulator-edit-list {
   border-color: var(--vscode-focusBorder, default);
+
+  .tabulator-edit-list-item {
+    color: var(--vscode-editor-foreground, 'white');
+    &.active {
+      background-color: var(--vscode-list-activeSelectionBackground);
+      color: var(--vscode-editor-foreground, 'white');
+    }
+
+    &:hover {
+      background-color: var(--vscode-list-activeSelectionBackground);
+      color: var(--vscode-editor-foreground, 'white');
+    }
+  }
 }