Interactive Window and Native Editor react to font changes in VS Code settings (#7799)

David Kutugata · web-flow · commit 9af1d4f3d54c · 2019-10-07T16:25:10.000-07:00
* Make interactive window and native editor take
their fontSize and fontFamily from the settings in VS Code.

We get them in nativeEditor.tsx and in interactivePanel.tsx
to apply them as styles, but we also need to send them
as props to eventually assign them in the monaco editor.

* Moved style from react code to common.css

We now get the VS Code styles from the state of the
component, instead of computing a style from an element.

* Removed getting the font from nativeEditor and
interactivePanel, and put it in the mainStateController

* Made the interactiveWindow and the nativeEditor
react and change their fonts when the user changes them
in VS Code, instead of having to reload.

* Changed the font props to be an object instead of
two separate props to make it easier to maintain.

React Context was not used to avoid making the reuse of
components more difficult.

* Removed some unnecesary passing around of the
font prop

* removed unnecesary comments

* fixed a failing test
diff --git a/news/2 Fixes/7624.md b/news/2 Fixes/7624.md
@@ -0,0 +1 @@
+Make interactive window and native take their fontSize and fontFamily from the settings in VS Code.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/client/datascience/types.ts b/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: {
diff --git a/src/client/datascience/webViewHost.ts b/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')) {
diff --git a/src/datascience-ui/history-react/interactiveCell.tsx b/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}
                 />
             );
         }
diff --git a/src/datascience-ui/history-react/interactivePanel.tsx b/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>);
diff --git a/src/datascience-ui/interactive-common/cellInput.tsx b/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>
             );
diff --git a/src/datascience-ui/interactive-common/code.tsx b/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>
diff --git a/src/datascience-ui/interactive-common/common.css b/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 {
diff --git a/src/datascience-ui/interactive-common/editor.tsx b/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
         };
 
diff --git a/src/datascience-ui/interactive-common/mainState.ts b/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'
+        }
     };
 }
 
diff --git a/src/datascience-ui/interactive-common/mainStateController.ts b/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
             });
diff --git a/src/datascience-ui/interactive-common/markdown.tsx b/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}
                 />
         );
     }
diff --git a/src/datascience-ui/native-editor/nativeCell.tsx b/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}
                 />
             );
         }
diff --git a/src/datascience-ui/native-editor/nativeEditor.tsx b/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}
diff --git a/src/datascience-ui/react-common/settingsReactSide.ts b/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: {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Make interactive window and native take their fontSize and fontFamily from the settings in VS Code.`
Original file line number	Diff line number	Diff line change
`@@ -146,13 +146,9 @@ body, html {`
`146`	`146`
`147`	`147`	`.cell-output-text {`
`148`	`148`	`white-space: pre-wrap;`
`149`		`- font-size: var(--code-font-size);`
`150`		`- font-family: var(--code-font-family);`
`151`	`149`	`}`
`152`	`150`	`.cell-output-text pre {`
`153`	`151`	`white-space: pre-wrap;`
`154`		`- font-size: var(--code-font-size);`
`155`		`- font-family: var(--code-font-family);`
`156`	`152`	`}`
`157`	`153`
`158`	`154`	`.cell-output-html {`