Fix font settings

README.md

@@ -98,8 +98,8 @@ See [customize options] and [manage connection profiles] for more details.
     "mssql.intelliSense.enableSuggestions": true,
     "mssql.intelliSense.enableQuickInfo": true,
     "mssql.intelliSense.lowerCaseSuggestions": false,
-    "mssql.resultsFontFamily": "-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif",
-    "mssql.resultsFontSize": 13,
+    "mssql.resultsFontFamily": null,
+    "mssql.resultsFontSize": null,
     "mssql.copyIncludeHeaders": false,
     "mssql.copyRemoveNewLine" : true,
     "mssql.splitPaneSelection": "next",

package.json

@@ -1222,16 +1222,19 @@
           "scope": "resource"
         },
         "mssql.resultsFontFamily": {
-          "type": "string",
-          "description": "%mssql.resultsFontFamily%",
-          "default": "-apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif",
-          "scope": "resource"
+            "type": "string",
+            "description": "%mssql.resultsFontFamily%",
+            "default": null,
+            "scope": "resource"
         },
         "mssql.resultsFontSize": {
-          "type": "number",
-          "description": "%mssql.resultsFontSize%",
-          "default": 13,
-          "scope": "resource"
+            "type": [
+                "number",
+                "null"
+            ],
+            "description": "%mssql.resultsFontSize%",
+            "default": null,
+            "scope": "resource"
         },
         "mssql.saveAsCsv.includeHeaders": {
           "type": "boolean",

src/constants/constants.ts

@@ -170,12 +170,12 @@ export const configMaxRecentConnections = "maxRecentConnections";
 export const configCopyRemoveNewLine = "copyRemoveNewLine";
 export const configSplitPaneSelection = "splitPaneSelection";
 export const configShowBatchTime = "showBatchTime";
-export const extConfigResultKeys = [
-    "shortcuts",
-    "messagesDefaultOpen",
-    "resultsFontSize",
-    "resultsFontFamily",
-];
+export enum extConfigResultKeys {
+    ShortCuts = "shortcuts",
+    MessagesDefaultOpen = "messagesDefaultOpen",
+    ResultsFontSize = "resultsFontSize",
+    ResultsFontFamily = "resultsFontFamily",
+}
 export const sqlToolsServiceInstallDirConfigKey = "installDir";
 export const sqlToolsServiceExecutableFilesConfigKey = "executableFiles";
 export const sqlToolsServiceVersionConfigKey = "version";

src/models/sqlOutputContentProvider.ts

@@ -98,7 +98,7 @@ export class SqlOutputContentProvider {
             queryUri,
         );
         let config = new ResultsConfig();
-        for (let key of Constants.extConfigResultKeys) {
+        for (let key in Constants.extConfigResultKeys) {
             config[key] = extConfig[key];
         }
         return Promise.resolve(config);

src/queryResult/queryResultWebViewController.ts

@@ -55,6 +55,7 @@ export class QueryResultWebviewController extends ReactWebviewViewController<
             },
             executionPlanState: {},
             filterState: {},
+            fontSettings: {},
         });
 
         void this.initialize();
@@ -74,6 +75,25 @@ export class QueryResultWebviewController extends ReactWebviewViewController<
                         isExecutionPlan: false,
                         executionPlanState: {},
                         filterState: {},
+                        fontSettings: {
+                            fontSize:
+                                (this._vscodeWrapper
+                                    .getConfiguration(Constants.extensionName)
+                                    .get(
+                                        Constants.extConfigResultKeys
+                                            .ResultsFontSize,
+                                    ) as number) ??
+                                (this._vscodeWrapper
+                                    .getConfiguration("editor")
+                                    .get("fontSize") as number),
+
+                            fontFamily: this._vscodeWrapper
+                                .getConfiguration(Constants.extensionName)
+                                .get(
+                                    Constants.extConfigResultKeys
+                                        .ResultsFontFamily,
+                                ),
+                        },
                     };
                 }
             });
@@ -85,6 +105,33 @@ export class QueryResultWebviewController extends ReactWebviewViewController<
                     this._queryResultStateMap.delete(uri);
                 }
             });
+            this._vscodeWrapper.onDidChangeConfiguration((e) => {
+                if (e.affectsConfiguration("mssql.resultsFontFamily")) {
+                    for (const [uri, state] of this._queryResultStateMap) {
+                        state.fontSettings.fontFamily = this._vscodeWrapper
+                            .getConfiguration(Constants.extensionName)
+                            .get(
+                                Constants.extConfigResultKeys.ResultsFontFamily,
+                            );
+                        this._queryResultStateMap.set(uri, state);
+                    }
+                }
+                if (e.affectsConfiguration("mssql.resultsFontSize")) {
+                    for (const [uri, state] of this._queryResultStateMap) {
+                        state.fontSettings.fontSize =
+                            (this._vscodeWrapper
+                                .getConfiguration(Constants.extensionName)
+                                .get(
+                                    Constants.extConfigResultKeys
+                                        .ResultsFontSize,
+                                ) as number) ??
+                            (this._vscodeWrapper
+                                .getConfiguration("editor")
+                                .get("fontSize") as number);
+                        this._queryResultStateMap.set(uri, state);
+                    }
+                }
+            });
         }
     }
 
@@ -225,6 +272,22 @@ export class QueryResultWebviewController extends ReactWebviewViewController<
                 },
             }),
             filterState: {},
+            fontSettings: {
+                fontSize:
+                    (this._vscodeWrapper
+                        .getConfiguration(Constants.extensionName)
+                        .get(
+                            Constants.extConfigResultKeys.ResultsFontSize,
+                        ) as number) ??
+                    (this._vscodeWrapper
+                        .getConfiguration("editor")
+                        .get("fontSize") as number),
+                fontFamily: this._vscodeWrapper
+                    .getConfiguration(Constants.extensionName)
+                    .get(
+                        Constants.extConfigResultKeys.ResultsFontFamily,
+                    ) as string,
+            },
         };
         this._queryResultStateMap.set(uri, currentState);
     }

src/queryResult/queryResultWebviewPanelController.ts

@@ -5,7 +5,6 @@
 
 import * as vscode from "vscode";
 import * as qr from "../sharedInterfaces/queryResult";
-// import * as Constants from "../constants/constants";
 import { randomUUID } from "crypto";
 import VscodeWrapper from "../controllers/vscodeWrapper";
 import { ReactWebviewPanelController } from "../controllers/reactWebviewPanelController";
@@ -37,6 +36,7 @@ export class QueryResultWebviewPanelController extends ReactWebviewPanelControll
                 },
                 executionPlanState: {},
                 filterState: {},
+                fontSettings: {},
             },
             {
                 title: vscode.l10n.t({

src/reactviews/pages/QueryResult/queryResultPane.tsx

@@ -66,9 +66,7 @@ const useStyles = makeStyles({
         width: "100%",
         position: "relative",
         display: "flex",
-        fontFamily: "var(--vscode-editor-font-family)",
         fontWeight: "normal",
-        fontSize: "var(--vscode-editor-font-size)",
     },
     queryResultPaneOpenButton: {
         position: "absolute",
@@ -236,6 +234,7 @@ export const QueryResultPane = () => {
         gridCount: number,
     ) => {
         const divId = `grid-parent-${batchId}-${resultId}`;
+        console.log(metadata.fontSettings.fontSize ?? 12);
         return (
             <div
                 id={divId}
@@ -252,6 +251,10 @@ export const QueryResultPane = () => {
                                   gridCount,
                               )}px`
                             : "",
+                    fontFamily: metadata.fontSettings.fontFamily
+                        ? metadata.fontSettings.fontFamily
+                        : "var(--vscode-editor-font-family)",
+                    fontSize: `${metadata.fontSettings.fontSize ?? 12}px`,
                 }}
             >
                 <ResultGrid

src/reactviews/pages/QueryResult/resultGrid.tsx

@@ -135,8 +135,17 @@ const ResultGrid = forwardRef<ResultGridHandle, ResultGridProps>(
                     table.rerenderGrid();
                 }
             };
-
-            const ROW_HEIGHT = 25;
+            const DEFAULT_FONT_SIZE = 12;
+            console.log(
+                "resultGrid: ",
+                props.state.state.fontSettings.fontSize,
+            );
+            const ROW_HEIGHT = props.state.state.fontSettings.fontSize! + 12; // 12 px is the padding
+            const COLUMN_WIDTH = Math.max(
+                (props.state.state.fontSettings.fontSize! / DEFAULT_FONT_SIZE) *
+                    120,
+                120,
+            ); // Scale width with font size, but keep a minimum of 120px
             if (!props.resultSetSummary || !props.linkHandler) {
                 return;
             }
@@ -222,7 +231,7 @@ const ResultGrid = forwardRef<ResultGridHandle, ResultGridProps>(
                 rowHeight: ROW_HEIGHT,
                 showRowNumber: true,
                 forceFitColumns: false,
-                defaultColumnWidth: 120,
+                defaultColumnWidth: COLUMN_WIDTH,
             };
             let rowNumberColumn = new RowNumberColumn<Slick.SlickData>({
                 autoCellSelection: false,

src/sharedInterfaces/queryResult.ts

@@ -61,6 +61,11 @@ export interface QueryResultTabStates {
     resultPaneTab: QueryResultPaneTabs;
 }
 
+export interface FontSettings {
+    fontSize?: number;
+    fontFamily?: string;
+}
+
 export interface QueryResultWebviewState extends ExecutionPlanWebviewState {
     uri?: string;
     title?: string;
@@ -72,6 +77,7 @@ export interface QueryResultWebviewState extends ExecutionPlanWebviewState {
     selection?: ISlickRange[];
     executionPlanState: ExecutionPlanState;
     filterState: Record<string, ColumnFilterState>;
+    fontSettings: FontSettings;
 }
 
 export interface QueryResultReducers