Make interactive window and native editor take their fontSize and fontFamily from the settings in VS Code.

news/2 Fixes/7624.md

@@ -0,0 +1 @@
+Make interactive window and native take their fontSize and fontFamily from the settings in VS Code.

src/client/datascience/types.ts

@@ -394,6 +394,8 @@ export interface IDataScienceExtraSettings extends IDataScienceSettings {
     extraSettings: {
         editorCursor: string;
         editorCursorBlink: string;
+        fontSize: number;
+        fontFamily: string;
         theme: string;
     };
     intellisenseOptions: {

src/client/datascience/webViewHost.ts

@@ -170,6 +170,8 @@ export class WebViewHost<IMapping> implements IDisposable {
             extraSettings: {
                 editorCursor: this.getValue(editor, 'cursorStyle', 'line'),
                 editorCursorBlink: this.getValue(editor, 'cursorBlinking', 'blink'),
+                fontSize: this.getValue(editor, 'fontSize', 14),
+                fontFamily: this.getValue(editor, 'fontFamily', 'Consolas, \'Courier New\', monospace'),
                 theme: theme
             },
             intellisenseOptions: {
@@ -240,6 +242,8 @@ export class WebViewHost<IMapping> implements IDisposable {
     // Post a message to our webpanel and update our new datascience settings
     private onPossibleSettingsChange = (event: ConfigurationChangeEvent) => {
         if (event.affectsConfiguration('workbench.colorTheme') ||
+            event.affectsConfiguration('editor.fontSize') ||
+            event.affectsConfiguration('editor.fontFamily') ||
             event.affectsConfiguration('editor.cursorStyle') ||
             event.affectsConfiguration('editor.cursorBlinking') ||
             event.affectsConfiguration('python.dataScience.enableGather')) {

src/datascience-ui/history-react/interactiveCell.tsx

@@ -15,7 +15,7 @@ import { CollapseButton } from '../interactive-common/collapseButton';
 import { ExecutionCount } from '../interactive-common/executionCount';
 import { InformationMessages } from '../interactive-common/informationMessages';
 import { InputHistory } from '../interactive-common/inputHistory';
-import { ICellViewModel } from '../interactive-common/mainState';
+import { ICellViewModel, IFont } from '../interactive-common/mainState';
 import { IKeyboardEvent } from '../react-common/event';
 import { getLocString } from '../react-common/locReactSide';
 import { getSettings } from '../react-common/settingsReactSide';
@@ -39,6 +39,7 @@ interface IInteractiveCellProps {
     focusedCell?: string;
     hideOutput?: boolean;
     showLineNumbers?: boolean;
+    font: IFont;
     onCodeChange(changes: monacoEditor.editor.IModelContentChange[], cellId: string, modelId: string): void;
     onCodeCreated(code: string, file: string, cellId: string, modelId: string): void;
     openLink(uri: monacoEditor.Uri): void;
@@ -211,6 +212,7 @@ export class InteractiveCell extends React.Component<IInteractiveCellProps> {
                     unfocused={this.onCodeUnfocused}
                     keyDown={this.props.keyDown}
                     showLineNumbers={this.props.showLineNumbers}
+                    font={this.props.font}
                 />
             );
         }

src/datascience-ui/history-react/interactivePanel.tsx

@@ -67,6 +67,11 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
     }
 
     public render() {
+        const dynamicFont: React.CSSProperties = {
+            fontSize: this.state.font.size,
+            fontFamily: this.state.font.family
+        };
+
         // Update the state controller with our new state
         this.stateController.renderUpdate(this.state);
         const progressBar = this.state.busy && !this.props.testMode ? <Progress /> : undefined;
@@ -77,7 +82,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         }
 
         return (
-            <div id='main-panel' ref={this.mainPanelRef} role='Main'>
+            <div id='main-panel' ref={this.mainPanelRef} role='Main' style={dynamicFont}>
                 <div className='styleSetter'>
                     <style>
                         {this.state.rootCss}
@@ -222,6 +227,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                         onClick={this.clickEditCell}
                         keyDown={this.editCellKeyDown}
                         renderCellToolbar={this.renderEditCellToolbar}
+                        font={this.state.font}
                     />
                 </ErrorBoundary>
             </div>
@@ -346,6 +352,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                         renderCellToolbar={this.renderCellToolbar}
                         showLineNumbers={cellVM.showLineNumbers}
                         hideOutput={cellVM.hideOutput}
+                        font={this.state.font}
                     />
                 </ErrorBoundary>
             </div>);

src/datascience-ui/interactive-common/cellInput.tsx

@@ -12,7 +12,7 @@ import { IKeyboardEvent } from '../react-common/event';
 import { getLocString } from '../react-common/locReactSide';
 import { Code } from './code';
 import { InputHistory } from './inputHistory';
-import { ICellViewModel } from './mainState';
+import { ICellViewModel, IFont } from './mainState';
 import { Markdown } from './markdown';
 
 // tslint:disable-next-line: no-require-importss
@@ -28,6 +28,7 @@ interface ICellInputProps {
     editorMeasureClassName?: string;
     focusedCell?: string;
     showLineNumbers?: boolean;
+    font: IFont;
     onCodeChange(changes: monacoEditor.editor.IModelContentChange[], cellId: string, modelId: string): void;
     onCodeCreated(code: string, file: string, cellId: string, modelId: string): void;
     openLink(uri: monacoEditor.Uri): void;
@@ -128,6 +129,7 @@ export class CellInput extends React.Component<ICellInputProps> {
                         keyDown={this.onKeyDown}
                         showLineNumbers={this.props.showLineNumbers}
                         useQuickEdit={this.props.cellVM.useQuickEdit}
+                        font={this.props.font}
                         />
                 </div>
             );
@@ -158,6 +160,7 @@ export class CellInput extends React.Component<ICellInputProps> {
                         keyDown={this.onKeyDown}
                         ref={this.markdownRef}
                         useQuickEdit={false}
+                        font={this.props.font}
                         />
                 </div>
             );

src/datascience-ui/interactive-common/code.tsx

@@ -8,6 +8,7 @@ import { InputHistory } from '../interactive-common/inputHistory';
 import { IKeyboardEvent } from '../react-common/event';
 import { getLocString } from '../react-common/locReactSide';
 import { Editor } from './editor';
+import { IFont } from './mainState';
 
 export interface ICodeProps {
     autoFocus: boolean;
@@ -23,6 +24,7 @@ export interface ICodeProps {
     editorMeasureClassName?: string;
     showLineNumbers?: boolean;
     useQuickEdit?: boolean;
+    font: IFont;
     onCreated(code: string, modelId: string): void;
     onChange(changes: monacoEditor.editor.IModelContentChange[], modelId: string): void;
     openLink(uri: monacoEditor.Uri): void;
@@ -70,6 +72,7 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
                     unfocused={this.props.unfocused}
                     showLineNumbers={this.props.showLineNumbers}
                     useQuickEdit={this.props.useQuickEdit}
+                    font={this.props.font}
                 />
                 <div className={waterMarkClass} role='textbox' onClick={this.clickWatermark}>{this.getWatermarkString()}</div>
             </div>

src/datascience-ui/interactive-common/common.css

@@ -146,13 +146,9 @@ body, html {
 
 .cell-output-text {
     white-space: pre-wrap;
-    font-size: var(--code-font-size);
-    font-family: var(--code-font-family);
 }
 .cell-output-text pre {
     white-space: pre-wrap;
-    font-size: var(--code-font-size);
-    font-family: var(--code-font-family);
 }
 
 .cell-output-html {

src/datascience-ui/interactive-common/editor.tsx

@@ -8,6 +8,7 @@ import { noop } from '../../client/common/utils/misc';
 import { IKeyboardEvent } from '../react-common/event';
 import { MonacoEditor } from '../react-common/monacoEditor';
 import { InputHistory } from './inputHistory';
+import { IFont } from './mainState';
 
 // tslint:disable-next-line: import-name
 export interface IEditorProps {
@@ -24,6 +25,7 @@ export interface IEditorProps {
     language: string;
     showLineNumbers?: boolean;
     useQuickEdit?: boolean;
+    font: IFont;
     onCreated(code: string, modelId: string): void;
     onChange(changes: monacoEditor.editor.IModelContentChange[], model: monacoEditor.editor.ITextModel): void;
     openLink(uri: monacoEditor.Uri): void;
@@ -114,6 +116,8 @@ export class Editor extends React.Component<IEditorProps, IEditorState> {
             lineDecorationsWidth: 0,
             contextmenu: false,
             matchBrackets: false,
+            fontSize: this.props.font.size,
+            fontFamily: this.props.font.family,
             ...this.props.editorOptions
         };
 

src/datascience-ui/interactive-common/mainState.ts

@@ -40,6 +40,7 @@ export interface IMainState {
     history: InputHistory;
     rootStyle?: string;
     rootCss?: string;
+    font: IFont;
     theme?: string;
     forceDark?: boolean;
     monacoTheme?: string;
@@ -60,6 +61,11 @@ export interface IMainState {
     loadTotal?: number;
 }
 
+export interface IFont {
+    size: number;
+    family: string;
+}
+
 // tslint:disable-next-line: no-multiline-string
 const darkStyle = `
         :root {
@@ -105,7 +111,11 @@ export function generateTestState(inputBlockToggled: (id: string) => void, fileP
         pendingVariableCount: 0,
         debugging: false,
         enableGather: true,
-        isAtBottom: true
+        isAtBottom: true,
+        font: {
+            size: 14,
+            family: 'Consolas, \'Courier New\', monospace'
+        }
     };
 }
 

src/datascience-ui/interactive-common/mainStateController.ts

@@ -76,7 +76,11 @@ export class MainStateController implements IMessageHandler {
             variablesVisible: false,
             editCellVM: this.props.hasEdit ? createEditableCellVM(1) : undefined,
             enableGather: this.props.enableGather,
-            isAtBottom: true
+            isAtBottom: true,
+            font: {
+                size: 14,
+                family: 'Consolas, \'Courier New\', monospace'
+            }
         };
 
         // Add test state if necessary
@@ -900,6 +904,18 @@ export class MainStateController implements IMessageHandler {
             if (prevShowInputs !== showInputs) {
                 this.toggleCellInputVisibility(showInputs, getSettings().collapseCellInputCodeByDefault);
             }
+
+            if (dsSettings.extraSettings) {
+                const fontSize = dsSettings.extraSettings.fontSize;
+                const fontFamily = dsSettings.extraSettings.fontFamily;
+
+                this.setState({
+                    font: {
+                        size: fontSize,
+                        family: fontFamily
+                    }
+                });
+            }
         }
     }
 
@@ -1163,8 +1179,29 @@ export class MainStateController implements IMessageHandler {
                 this.darkChanged(computedKnownDark);
             }
 
+            let fontSize: number = 14;
+            let fontFamily: string = 'Consolas, \'Courier New\', monospace';
+            const sizeSetting = '--code-font-size: ';
+            const familySetting = '--code-font-family: ';
+            const fontSizeIndex = response.css.indexOf(sizeSetting);
+            const fontFamilyIndex = response.css.indexOf(familySetting);
+
+            if (fontSizeIndex > -1) {
+                const fontSizeEndIndex = response.css.indexOf('px;', fontSizeIndex + sizeSetting.length);
+                fontSize = parseInt(response.css.substring(fontSizeIndex + sizeSetting.length, fontSizeEndIndex), 10);
+            }
+
+            if (fontFamilyIndex > -1) {
+                const fontFamilyEndIndex = response.css.indexOf(';', fontFamilyIndex + familySetting.length);
+                fontFamily = response.css.substring(fontFamilyIndex + familySetting.length, fontFamilyEndIndex);
+            }
+
             this.setState({
                 rootCss: response.css,
+                font: {
+                    size: fontSize,
+                    family: fontFamily
+                },
                 theme: response.theme,
                 knownDark: computedKnownDark
             });

src/datascience-ui/interactive-common/markdown.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 
 import { IKeyboardEvent } from '../react-common/event';
 import { Editor } from './editor';
+import { IFont } from './mainState';
 
 export interface IMarkdownProps {
     autoFocus: boolean;
@@ -18,6 +19,7 @@ export interface IMarkdownProps {
     editorMeasureClassName?: string;
     showLineNumbers?: boolean;
     useQuickEdit?: boolean;
+    font: IFont;
     onCreated(code: string, modelId: string): void;
     onChange(changes: monacoEditor.editor.IModelContentChange[], modelId: string): void;
     focused?(): void;
@@ -56,6 +58,7 @@ export class Markdown extends React.Component<IMarkdownProps> {
                     unfocused={this.props.unfocused}
                     showLineNumbers={this.props.showLineNumbers}
                     useQuickEdit={this.props.useQuickEdit}
+                    font={this.props.font}
                 />
         );
     }

src/datascience-ui/native-editor/nativeCell.tsx

@@ -14,7 +14,7 @@ import { CellInput } from '../interactive-common/cellInput';
 import { CellOutput } from '../interactive-common/cellOutput';
 import { ExecutionCount } from '../interactive-common/executionCount';
 import { InformationMessages } from '../interactive-common/informationMessages';
-import { ICellViewModel } from '../interactive-common/mainState';
+import { ICellViewModel, IFont } from '../interactive-common/mainState';
 import { IKeyboardEvent } from '../react-common/event';
 import { Image, ImageName } from '../react-common/image';
 import { ImageButton } from '../react-common/imageButton';
@@ -36,6 +36,7 @@ interface INativeCellProps {
     showLineNumbers?: boolean;
     selectedCell?: string;
     focusedCell?: string;
+    font: IFont;
     focusCell(cellId: string, focusCode: boolean): void;
     selectCell(cellId: string): void;
 }
@@ -657,6 +658,7 @@ export class NativeCell extends React.Component<INativeCellProps, INativeCellSta
                     unfocused={this.isCodeCell() ? this.onCodeUnfocused : this.onMarkdownUnfocused}
                     keyDown={this.keyDownInput}
                     showLineNumbers={this.props.showLineNumbers}
+                    font={this.props.font}
                 />
             );
         }

src/datascience-ui/native-editor/nativeEditor.tsx

@@ -83,6 +83,11 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
     }
 
     public render() {
+        const dynamicFont: React.CSSProperties = {
+            fontSize: this.state.font.size,
+            fontFamily: this.state.font.family
+        };
+
         // If in test mode, update our count. Use this to determine how many renders a normal update takes.
         if (this.props.testMode) {
             this.renderCount = this.renderCount + 1;
@@ -102,7 +107,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
             <AddCellLine includePlus={true} className='add-cell-line-top' click={insertAboveFirst} baseTheme={this.props.baseTheme}/>;
 
         return (
-            <div id='main-panel' ref={this.mainPanelRef} role='Main'>
+            <div id='main-panel' ref={this.mainPanelRef} role='Main' style={dynamicFont}>
                 <div className='styleSetter'>
                     <style>
                         {this.state.rootCss}
@@ -401,6 +406,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
                         hideOutput={cellVM.hideOutput}
                         focusCell={this.focusCell}
                         selectCell={this.selectCell}
+                        font={this.state.font}
                     />
                 </ErrorBoundary>
                 {lastLine}

src/datascience-ui/react-common/settingsReactSide.ts

@@ -56,6 +56,8 @@ function load() {
             extraSettings: {
                 editorCursor: 'line',
                 editorCursorBlink: 'blink',
+                fontSize: 14,
+                fontFamily: 'Consolas, \'Courier New\', monospace',
                 theme: 'Default Dark+'
             },
             intellisenseOptions: {