Better display

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to the "frog" extension will be documented in this file.
 
+## 0.0.24
+
+- Better display of result set and values
+
 ## 0.0.23
 
 - Added commit and rollback buttons

package.json

@@ -2,7 +2,7 @@
     "name": "frog",
     "displayName": "Frog",
     "description": "The Oracle SQL workbench for VSCode",
-    "version": "0.0.23",
+    "version": "0.0.24",
     "publisher": "tmuerell",
     "engines": {
         "vscode": "^1.17.0"
@@ -115,6 +115,11 @@
                     "type": "string",
                     "default": "",
                     "description": "Set the java home to use for the runner."
+                },
+                "frog.resultSetStyles": {
+                    "type": "string",
+                    "default": "",
+                    "description": "Set additional CSS styles for the result set viewer (Example: 'td { color: red; }')"
                 }
             }
         }

src/resultsetview.ts

@@ -8,12 +8,17 @@ export class TextDocumentContentProvider implements vscode.TextDocumentContentPr
         if (!this._data) return this.errorSnippet();
         if (this._data['rows'].length == 0) return this.errorSnippet();
 
+        const configuration = vscode.workspace.getConfiguration('frog')
+        const additionalStyles = configuration.get("resultSetStyles", "")
+        
         let styles = `<style>
                     table {
                         border-collapse: collapse;
                     }
                     table td, table th {
-                        padding: 3px;
+                        padding: 2px;
+                        font-size: 11px;
+                        white-space: nowrap;
                     }
                     tr:hover {
                         background-color: #aaaa66;
@@ -31,6 +36,9 @@ export class TextDocumentContentProvider implements vscode.TextDocumentContentPr
                     .vscode-dark #limitBox a {
                         color: white;
                     }
+                    .vscode-dark table td.value-null {
+                        background-color: #666600;
+                    }
 
                     .vscode-light table {
                         border: solid 1px black;
@@ -41,6 +49,11 @@ export class TextDocumentContentProvider implements vscode.TextDocumentContentPr
                     .vscode-light #limitBox a {
                         color: black;
                     }
+                    .vscode-light table td.value-null {
+                        background-color: #cccc33;
+                    }
+
+                    ${additionalStyles}
                 </style>`
 
         const choosableLimits = [2,10,50]
@@ -52,7 +65,7 @@ export class TextDocumentContentProvider implements vscode.TextDocumentContentPr
         text += this._data['columnDefinitions'].map((x) => `<th>${x['name']}</th>`).join('')
         text += '</tr>'
         text += this._data['rows'].map((r) => 
-            '<tr>' + r['columns'].map((c) => '<td>' + c['value'] + '</td>').join('') + '</tr>'
+            '<tr>' + r['columns'].map((c) => '<td class="' + (c['value'] ? 'value-value' : 'value-null') + '">' + (c['value'] ? c['value'] : 'NULL') + '</td>').join('') + '</tr>'
         ).join('')
         text += '</table></body>'
         return text;