From 29d1fcc534dbd574ddc3d2ec5dbd048ad437c679 Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Wed, 2 Oct 2019 14:47:17 -0700
Subject: [PATCH 1/8] 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.
---
 news/2 Fixes/7624.md                          |  1 +
 package-lock.json                             |  6 ++--
 .../history-react/interactiveCell.tsx         |  4 +++
 .../history-react/interactivePanel.tsx        | 36 ++++++++++++++-----
 .../interactive-common/cellInput.tsx          |  6 ++++
 .../interactive-common/code.tsx               |  4 +++
 .../interactive-common/contentPanel.tsx       |  8 +++--
 .../interactive-common/editor.tsx             |  4 +++
 .../interactive-common/markdown.tsx           |  4 +++
 .../native-editor/nativeCell.tsx              |  4 +++
 .../native-editor/nativeEditor.tsx            | 30 ++++++++++++----
 11 files changed, 85 insertions(+), 22 deletions(-)
 create mode 100644 news/2 Fixes/7624.md

diff --git a/news/2 Fixes/7624.md b/news/2 Fixes/7624.md
new file mode 100644
index 000000000000..1875f4ca313b
--- /dev/null
+++ 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
index 8f8d69e788ab..7954b5c3bf06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13770,7 +13770,7 @@
             "dependencies": {
                 "buffer": {
                     "version": "4.9.1",
-                    "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+                    "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
                     "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
                     "dev": true,
                     "requires": {
@@ -13793,7 +13793,7 @@
                 },
                 "readable-stream": {
                     "version": "2.3.6",
-                    "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+                    "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
                     "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
                     "dev": true,
                     "requires": {
@@ -18754,7 +18754,7 @@
             "dependencies": {
                 "json5": {
                     "version": "1.0.1",
-                    "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+                    "resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
                     "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
                     "dev": true,
                     "requires": {
diff --git a/src/datascience-ui/history-react/interactiveCell.tsx b/src/datascience-ui/history-react/interactiveCell.tsx
index f00a13214649..e4462466758a 100644
--- a/src/datascience-ui/history-react/interactiveCell.tsx
+++ b/src/datascience-ui/history-react/interactiveCell.tsx
@@ -39,6 +39,8 @@ interface IInteractiveCellProps {
     focusedCell?: string;
     hideOutput?: boolean;
     showLineNumbers?: boolean;
+    fontSize: number;
+    fontFamily: string;
     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 +213,8 @@ export class InteractiveCell extends React.Component<IInteractiveCellProps> {
                     unfocused={this.onCodeUnfocused}
                     keyDown={this.props.keyDown}
                     showLineNumbers={this.props.showLineNumbers}
+                    fontSize={this.props.fontSize}
+                    fontFamily={this.props.fontFamily}
                 />
             );
         }
diff --git a/src/datascience-ui/history-react/interactivePanel.tsx b/src/datascience-ui/history-react/interactivePanel.tsx
index 0d978809a73d..a104787731bc 100644
--- a/src/datascience-ui/history-react/interactivePanel.tsx
+++ b/src/datascience-ui/history-react/interactivePanel.tsx
@@ -67,6 +67,18 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
     }
 
     public render() {
+        let fontSize: number = 14;
+        let fontFamily: string = 'Consolas, \'Courier New\', monospace';
+        if (this.mainPanelRef.current) {
+            fontSize = parseInt(getComputedStyle(this.mainPanelRef.current).getPropertyValue('--code-font-size'), 10);
+            fontFamily = getComputedStyle(this.mainPanelRef.current).getPropertyValue('--code-font-family');
+        }
+
+        const style: React.CSSProperties = {
+            fontSize: fontSize,
+            fontFamily: fontFamily
+        };
+
         // 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 +89,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={style}>
                 <div className='styleSetter'>
                     <style>
                         {this.state.rootCss}
@@ -91,10 +103,10 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                     {this.renderVariablePanel(this.props.baseTheme)}
                 </section>
                 <main id='main-panel-content' onScroll={this.handleScroll}>
-                    {this.renderContentPanel(this.props.baseTheme)}
+                    {this.renderContentPanel(this.props.baseTheme, fontSize, fontFamily)}
                 </main>
                 <section id='main-panel-footer' aria-label={getLocString('DataScience.editSection', 'Input new cells here')}>
-                    {this.renderFooterPanel(this.props.baseTheme)}
+                    {this.renderFooterPanel(this.props.baseTheme, fontSize, fontFamily)}
                 </section>
             </div>
         );
@@ -175,7 +187,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         return null;
     }
 
-    private renderContentPanel(baseTheme: string) {
+    private renderContentPanel(baseTheme: string, fontSize: number, fontFamily: string) {
         // Skip if the tokenizer isn't finished yet. It needs
         // to finish loading so our code editors work.
         if (!this.state.tokenizerLoaded && !this.props.testMode) {
@@ -183,11 +195,11 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         }
 
         // Otherwise render our cells.
-        const contentProps = this.getContentProps(baseTheme);
+        const contentProps = this.getContentProps(baseTheme, fontSize, fontFamily);
         return <ContentPanel {...contentProps} ref={this.contentPanelRef} />;
     }
 
-    private renderFooterPanel(baseTheme: string) {
+    private renderFooterPanel(baseTheme: string, fontSize: number, fontFamily: string) {
         // Skip if the tokenizer isn't finished yet. It needs
         // to finish loading so our code editors work.
         if (!this.state.tokenizerLoaded || !this.state.editCellVM) {
@@ -222,6 +234,8 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                         onClick={this.clickEditCell}
                         keyDown={this.editCellKeyDown}
                         renderCellToolbar={this.renderEditCellToolbar}
+                        fontSize={fontSize}
+                        fontFamily={fontFamily}
                     />
                 </ErrorBoundary>
             </div>
@@ -232,7 +246,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         return this.state.currentExecutionCount + 1;
     }
 
-    private getContentProps = (baseTheme: string): IContentPanelProps => {
+    private getContentProps = (baseTheme: string, fontSize: number, fontFamily: string): IContentPanelProps => {
         return {
             baseTheme: baseTheme,
             cellVMs: this.state.cellVMs,
@@ -244,7 +258,9 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
             editable: false,
             newCellVM: undefined,
             renderCell: this.renderCell,
-            scrollToBottom: this.scrollDiv
+            scrollToBottom: this.scrollDiv,
+            fontSize: fontSize,
+            fontFamily: fontFamily
         };
     }
     private getVariableProps = (baseTheme: string): IVariablePanelProps => {
@@ -319,7 +335,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         }
     }
 
-    private renderCell = (cellVM: ICellViewModel, index: number, containerRef?: React.RefObject<HTMLDivElement>): JSX.Element | null => {
+    private renderCell = (cellVM: ICellViewModel, index: number, fontSize: number, fontFamily: string, containerRef?: React.RefObject<HTMLDivElement>): JSX.Element | null => {
         const cellRef = React.createRef<InteractiveCell>();
         this.cellRefs.set(cellVM.cell.id, cellRef);
         return (
@@ -346,6 +362,8 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                         renderCellToolbar={this.renderCellToolbar}
                         showLineNumbers={cellVM.showLineNumbers}
                         hideOutput={cellVM.hideOutput}
+                        fontSize={fontSize}
+                        fontFamily={fontFamily}
                     />
                 </ErrorBoundary>
             </div>);
diff --git a/src/datascience-ui/interactive-common/cellInput.tsx b/src/datascience-ui/interactive-common/cellInput.tsx
index de86c6b3c1f3..154f45480f75 100644
--- a/src/datascience-ui/interactive-common/cellInput.tsx
+++ b/src/datascience-ui/interactive-common/cellInput.tsx
@@ -28,6 +28,8 @@ interface ICellInputProps {
     editorMeasureClassName?: string;
     focusedCell?: string;
     showLineNumbers?: boolean;
+    fontSize: number;
+    fontFamily: string;
     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 +130,8 @@ export class CellInput extends React.Component<ICellInputProps> {
                         keyDown={this.onKeyDown}
                         showLineNumbers={this.props.showLineNumbers}
                         useQuickEdit={this.props.cellVM.useQuickEdit}
+                        fontSize={this.props.fontSize}
+                        fontFamily={this.props.fontFamily}
                         />
                 </div>
             );
@@ -158,6 +162,8 @@ export class CellInput extends React.Component<ICellInputProps> {
                         keyDown={this.onKeyDown}
                         ref={this.markdownRef}
                         useQuickEdit={false}
+                        fontSize={this.props.fontSize}
+                        fontFamily={this.props.fontFamily}
                         />
                 </div>
             );
diff --git a/src/datascience-ui/interactive-common/code.tsx b/src/datascience-ui/interactive-common/code.tsx
index 6e6b39bb8f5c..af51088f3afa 100644
--- a/src/datascience-ui/interactive-common/code.tsx
+++ b/src/datascience-ui/interactive-common/code.tsx
@@ -23,6 +23,8 @@ export interface ICodeProps {
     editorMeasureClassName?: string;
     showLineNumbers?: boolean;
     useQuickEdit?: boolean;
+    fontSize: number;
+    fontFamily: string;
     onCreated(code: string, modelId: string): void;
     onChange(changes: monacoEditor.editor.IModelContentChange[], modelId: string): void;
     openLink(uri: monacoEditor.Uri): void;
@@ -70,6 +72,8 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
                     unfocused={this.props.unfocused}
                     showLineNumbers={this.props.showLineNumbers}
                     useQuickEdit={this.props.useQuickEdit}
+                    fontSize={this.props.fontSize}
+                    fontFamily={this.props.fontFamily}
                 />
                 <div className={waterMarkClass} role='textbox' onClick={this.clickWatermark}>{this.getWatermarkString()}</div>
             </div>
diff --git a/src/datascience-ui/interactive-common/contentPanel.tsx b/src/datascience-ui/interactive-common/contentPanel.tsx
index 5cc83508d005..5d12feb317f2 100644
--- a/src/datascience-ui/interactive-common/contentPanel.tsx
+++ b/src/datascience-ui/interactive-common/contentPanel.tsx
@@ -21,7 +21,9 @@ export interface IContentPanelProps {
     submittedText: boolean;
     skipNextScroll: boolean;
     editable: boolean;
-    renderCell(cellVM: ICellViewModel, index: number): JSX.Element | null;
+    fontSize: number;
+    fontFamily: string;
+    renderCell(cellVM: ICellViewModel, index: number, fontSize: number, fontFamily: string): JSX.Element | null;
     scrollToBottom(div: HTMLDivElement): void;
 }
 
@@ -57,13 +59,13 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
 
     private renderCells = () => {
         return this.props.cellVMs.map((cellVM: ICellViewModel, index: number) => {
-            return this.props.renderCell(cellVM, index);
+            return this.props.renderCell(cellVM, index, this.props.fontSize, this.props.fontFamily);
         });
     }
 
     private renderEdit = () => {
         if (this.props.editable && this.props.newCellVM) {
-            return this.props.renderCell(this.props.newCellVM, 0);
+            return this.props.renderCell(this.props.newCellVM, 0, this.props.fontSize, this.props.fontFamily);
         } else {
             return null;
         }
diff --git a/src/datascience-ui/interactive-common/editor.tsx b/src/datascience-ui/interactive-common/editor.tsx
index c08fc53f03f5..ecc6669d2328 100644
--- a/src/datascience-ui/interactive-common/editor.tsx
+++ b/src/datascience-ui/interactive-common/editor.tsx
@@ -24,6 +24,8 @@ export interface IEditorProps {
     language: string;
     showLineNumbers?: boolean;
     useQuickEdit?: boolean;
+    fontSize: number;
+    fontFamily: string;
     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.fontSize,
+            fontFamily: this.props.fontFamily,
             ...this.props.editorOptions
         };
 
diff --git a/src/datascience-ui/interactive-common/markdown.tsx b/src/datascience-ui/interactive-common/markdown.tsx
index 4873203b6da0..b3ad88df4acf 100644
--- a/src/datascience-ui/interactive-common/markdown.tsx
+++ b/src/datascience-ui/interactive-common/markdown.tsx
@@ -18,6 +18,8 @@ export interface IMarkdownProps {
     editorMeasureClassName?: string;
     showLineNumbers?: boolean;
     useQuickEdit?: boolean;
+    fontSize: number;
+    fontFamily: string;
     onCreated(code: string, modelId: string): void;
     onChange(changes: monacoEditor.editor.IModelContentChange[], modelId: string): void;
     focused?(): void;
@@ -56,6 +58,8 @@ export class Markdown extends React.Component<IMarkdownProps> {
                     unfocused={this.props.unfocused}
                     showLineNumbers={this.props.showLineNumbers}
                     useQuickEdit={this.props.useQuickEdit}
+                    fontSize={this.props.fontSize}
+                    fontFamily={this.props.fontFamily}
                 />
         );
     }
diff --git a/src/datascience-ui/native-editor/nativeCell.tsx b/src/datascience-ui/native-editor/nativeCell.tsx
index e6c08965480e..1d3c626442a5 100644
--- a/src/datascience-ui/native-editor/nativeCell.tsx
+++ b/src/datascience-ui/native-editor/nativeCell.tsx
@@ -36,6 +36,8 @@ interface INativeCellProps {
     showLineNumbers?: boolean;
     selectedCell?: string;
     focusedCell?: string;
+    fontSize: number;
+    fontFamily: string;
     focusCell(cellId: string, focusCode: boolean): void;
     selectCell(cellId: string): void;
 }
@@ -657,6 +659,8 @@ export class NativeCell extends React.Component<INativeCellProps, INativeCellSta
                     unfocused={this.isCodeCell() ? this.onCodeUnfocused : this.onMarkdownUnfocused}
                     keyDown={this.keyDownInput}
                     showLineNumbers={this.props.showLineNumbers}
+                    fontSize={this.props.fontSize}
+                    fontFamily={this.props.fontFamily}
                 />
             );
         }
diff --git a/src/datascience-ui/native-editor/nativeEditor.tsx b/src/datascience-ui/native-editor/nativeEditor.tsx
index 253bb11bab41..556103eccbbc 100644
--- a/src/datascience-ui/native-editor/nativeEditor.tsx
+++ b/src/datascience-ui/native-editor/nativeEditor.tsx
@@ -88,6 +88,18 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
             this.renderCount = this.renderCount + 1;
         }
 
+        let fontSize: number = 14;
+        let fontFamily: string = 'Consolas, \'Courier New\', monospace';
+        if (this.mainPanelRef.current) {
+            fontSize = parseInt(getComputedStyle(this.mainPanelRef.current).getPropertyValue('--code-font-size'), 10);
+            fontFamily = getComputedStyle(this.mainPanelRef.current).getPropertyValue('--code-font-family');
+        }
+
+        const style: React.CSSProperties = {
+            fontSize: fontSize,
+            fontFamily: fontFamily
+        };
+
         // Update the state controller with our new state
         this.stateController.renderUpdate(this.state);
         const progressBar = this.state.busy && !this.props.testMode ? <Progress /> : undefined;
@@ -102,7 +114,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={style}>
                 <div className='styleSetter'>
                     <style>
                         {this.state.rootCss}
@@ -117,7 +129,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
                 </section>
                 <main id='main-panel-content' onScroll={this.onContentScroll} ref={this.contentPanelScrollRef}>
                     {addCellLine}
-                    {this.renderContentPanel(this.props.baseTheme)}
+                    {this.renderContentPanel(this.props.baseTheme, fontSize, fontFamily)}
                 </main>
             </div>
         );
@@ -226,7 +238,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
         return null;
     }
 
-    private renderContentPanel(baseTheme: string) {
+    private renderContentPanel(baseTheme: string, fontSize: number, fontFamily: string) {
         // Skip if the tokenizer isn't finished yet. It needs
         // to finish loading so our code editors work.
         if (!this.state.tokenizerLoaded && !this.props.testMode) {
@@ -234,11 +246,11 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
         }
 
         // Otherwise render our cells.
-        const contentProps = this.getContentProps(baseTheme);
+        const contentProps = this.getContentProps(baseTheme, fontSize, fontFamily);
         return <ContentPanel {...contentProps} ref={this.contentPanelRef}/>;
     }
 
-    private getContentProps = (baseTheme: string): IContentPanelProps => {
+    private getContentProps = (baseTheme: string, fontSize: number, fontFamily: string): IContentPanelProps => {
         return {
             baseTheme: baseTheme,
             cellVMs: this.state.cellVMs,
@@ -249,7 +261,9 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
             skipNextScroll: this.state.skipNextScroll ? true : false,
             editable: true,
             renderCell: this.renderCell,
-            scrollToBottom: this.scrollDiv
+            scrollToBottom: this.scrollDiv,
+            fontSize: fontSize,
+            fontFamily: fontFamily
         };
     }
     private getVariableProps = (baseTheme: string): IVariablePanelProps => {
@@ -356,7 +370,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
     //     });
     // }
 
-    private renderCell = (cellVM: ICellViewModel, index: number): JSX.Element | null => {
+    private renderCell = (cellVM: ICellViewModel, index: number, fontSize: number, fontFamily: string): JSX.Element | null => {
         const cellRef : React.RefObject<NativeCell> = React.createRef<NativeCell>();
         const containerRef = React.createRef<HTMLDivElement>();
         this.cellRefs.set(cellVM.cell.id, cellRef);
@@ -401,6 +415,8 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
                         hideOutput={cellVM.hideOutput}
                         focusCell={this.focusCell}
                         selectCell={this.selectCell}
+                        fontSize={fontSize}
+                        fontFamily={fontFamily}
                     />
                 </ErrorBoundary>
                 {lastLine}

From 7274801a0c236d72ed404839ea0f28a14295d014 Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Wed, 2 Oct 2019 16:17:25 -0700
Subject: [PATCH 2/8] 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.
---
 .../history-react/interactivePanel.tsx         | 18 +++++++++---------
 .../interactive-common/common.css              |  2 ++
 .../native-editor/nativeEditor.tsx             | 18 +++++++++---------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/datascience-ui/history-react/interactivePanel.tsx b/src/datascience-ui/history-react/interactivePanel.tsx
index a104787731bc..bf0c994f2ef0 100644
--- a/src/datascience-ui/history-react/interactivePanel.tsx
+++ b/src/datascience-ui/history-react/interactivePanel.tsx
@@ -69,16 +69,16 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
     public render() {
         let fontSize: number = 14;
         let fontFamily: string = 'Consolas, \'Courier New\', monospace';
-        if (this.mainPanelRef.current) {
-            fontSize = parseInt(getComputedStyle(this.mainPanelRef.current).getPropertyValue('--code-font-size'), 10);
-            fontFamily = getComputedStyle(this.mainPanelRef.current).getPropertyValue('--code-font-family');
+        if (this.state.rootCss) {
+            const fontSizeIndex = this.state.rootCss.indexOf('--code-font-size: ') + 18;
+            const fontSizeEndIndex = this.state.rootCss.indexOf('px;', fontSizeIndex);
+            fontSize = parseInt(this.state.rootCss.substring(fontSizeIndex, fontSizeEndIndex), 10);
+
+            const fontFamilyIndex = this.state.rootCss.indexOf('--code-font-family: ') + 20;
+            const fontFamilyEndIndex = this.state.rootCss.indexOf(';', fontFamilyIndex);
+            fontFamily = this.state.rootCss.substring(fontFamilyIndex, fontFamilyEndIndex);
         }
 
-        const style: React.CSSProperties = {
-            fontSize: fontSize,
-            fontFamily: fontFamily
-        };
-
         // Update the state controller with our new state
         this.stateController.renderUpdate(this.state);
         const progressBar = this.state.busy && !this.props.testMode ? <Progress /> : undefined;
@@ -89,7 +89,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         }
 
         return (
-            <div id='main-panel' ref={this.mainPanelRef} role='Main' style={style}>
+            <div id='main-panel' ref={this.mainPanelRef} role='Main'>
                 <div className='styleSetter'>
                     <style>
                         {this.state.rootCss}
diff --git a/src/datascience-ui/interactive-common/common.css b/src/datascience-ui/interactive-common/common.css
index acbb19d201b5..7231e5a5ea15 100644
--- a/src/datascience-ui/interactive-common/common.css
+++ b/src/datascience-ui/interactive-common/common.css
@@ -23,6 +23,8 @@ body, html {
     width: 100%;
     position: absolute;
     overflow: hidden;
+    font-size: var(--code-font-size);
+    font-family: var(--code-font-family);
 }
 
 #main-panel-toolbar {
diff --git a/src/datascience-ui/native-editor/nativeEditor.tsx b/src/datascience-ui/native-editor/nativeEditor.tsx
index 556103eccbbc..fea8d1dad87e 100644
--- a/src/datascience-ui/native-editor/nativeEditor.tsx
+++ b/src/datascience-ui/native-editor/nativeEditor.tsx
@@ -90,16 +90,16 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
 
         let fontSize: number = 14;
         let fontFamily: string = 'Consolas, \'Courier New\', monospace';
-        if (this.mainPanelRef.current) {
-            fontSize = parseInt(getComputedStyle(this.mainPanelRef.current).getPropertyValue('--code-font-size'), 10);
-            fontFamily = getComputedStyle(this.mainPanelRef.current).getPropertyValue('--code-font-family');
+        if (this.state.rootCss) {
+            const fontSizeIndex = this.state.rootCss.indexOf('--code-font-size: ') + 18;
+            const fontSizeEndIndex = this.state.rootCss.indexOf('px;', fontSizeIndex);
+            fontSize = parseInt(this.state.rootCss.substring(fontSizeIndex, fontSizeEndIndex), 10);
+
+            const fontFamilyIndex = this.state.rootCss.indexOf('--code-font-family: ') + 20;
+            const fontFamilyEndIndex = this.state.rootCss.indexOf(';', fontFamilyIndex);
+            fontFamily = this.state.rootCss.substring(fontFamilyIndex, fontFamilyEndIndex);
         }
 
-        const style: React.CSSProperties = {
-            fontSize: fontSize,
-            fontFamily: fontFamily
-        };
-
         // Update the state controller with our new state
         this.stateController.renderUpdate(this.state);
         const progressBar = this.state.busy && !this.props.testMode ? <Progress /> : undefined;
@@ -114,7 +114,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' style={style}>
+            <div id='main-panel' ref={this.mainPanelRef} role='Main'>
                 <div className='styleSetter'>
                     <style>
                         {this.state.rootCss}

From 712590a6a24726784abb18a7d3e28aa0c59a3a44 Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Thu, 3 Oct 2019 10:56:47 -0700
Subject: [PATCH 3/8] Removed getting the font from nativeEditor and
 interactivePanel, and put it in the mainStateController

---
 .../history-react/interactivePanel.tsx        | 16 ++------------
 .../interactive-common/mainState.ts           |  6 +++++-
 .../interactive-common/mainStateController.ts | 21 ++++++++++++++++++-
 .../native-editor/nativeEditor.tsx            | 14 +------------
 4 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/datascience-ui/history-react/interactivePanel.tsx b/src/datascience-ui/history-react/interactivePanel.tsx
index bf0c994f2ef0..c1ca02b170b1 100644
--- a/src/datascience-ui/history-react/interactivePanel.tsx
+++ b/src/datascience-ui/history-react/interactivePanel.tsx
@@ -67,18 +67,6 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
     }
 
     public render() {
-        let fontSize: number = 14;
-        let fontFamily: string = 'Consolas, \'Courier New\', monospace';
-        if (this.state.rootCss) {
-            const fontSizeIndex = this.state.rootCss.indexOf('--code-font-size: ') + 18;
-            const fontSizeEndIndex = this.state.rootCss.indexOf('px;', fontSizeIndex);
-            fontSize = parseInt(this.state.rootCss.substring(fontSizeIndex, fontSizeEndIndex), 10);
-
-            const fontFamilyIndex = this.state.rootCss.indexOf('--code-font-family: ') + 20;
-            const fontFamilyEndIndex = this.state.rootCss.indexOf(';', fontFamilyIndex);
-            fontFamily = this.state.rootCss.substring(fontFamilyIndex, fontFamilyEndIndex);
-        }
-
         // Update the state controller with our new state
         this.stateController.renderUpdate(this.state);
         const progressBar = this.state.busy && !this.props.testMode ? <Progress /> : undefined;
@@ -103,10 +91,10 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                     {this.renderVariablePanel(this.props.baseTheme)}
                 </section>
                 <main id='main-panel-content' onScroll={this.handleScroll}>
-                    {this.renderContentPanel(this.props.baseTheme, fontSize, fontFamily)}
+                    {this.renderContentPanel(this.props.baseTheme, this.state.fontSize, this.state.fontFamily)}
                 </main>
                 <section id='main-panel-footer' aria-label={getLocString('DataScience.editSection', 'Input new cells here')}>
-                    {this.renderFooterPanel(this.props.baseTheme, fontSize, fontFamily)}
+                    {this.renderFooterPanel(this.props.baseTheme, this.state.fontSize, this.state.fontFamily)}
                 </section>
             </div>
         );
diff --git a/src/datascience-ui/interactive-common/mainState.ts b/src/datascience-ui/interactive-common/mainState.ts
index 4afcab242481..313d76a0c41e 100644
--- a/src/datascience-ui/interactive-common/mainState.ts
+++ b/src/datascience-ui/interactive-common/mainState.ts
@@ -40,6 +40,8 @@ export interface IMainState {
     history: InputHistory;
     rootStyle?: string;
     rootCss?: string;
+    fontSize: number;
+    fontFamily: string;
     theme?: string;
     forceDark?: boolean;
     monacoTheme?: string;
@@ -105,7 +107,9 @@ export function generateTestState(inputBlockToggled: (id: string) => void, fileP
         pendingVariableCount: 0,
         debugging: false,
         enableGather: true,
-        isAtBottom: true
+        isAtBottom: true,
+        fontSize: 14,
+        fontFamily: 'Consolas, \'Courier New\', monospace'
     };
 }
 
diff --git a/src/datascience-ui/interactive-common/mainStateController.ts b/src/datascience-ui/interactive-common/mainStateController.ts
index c766d2ae2947..c0dd60a25ba9 100644
--- a/src/datascience-ui/interactive-common/mainStateController.ts
+++ b/src/datascience-ui/interactive-common/mainStateController.ts
@@ -76,7 +76,9 @@ export class MainStateController implements IMessageHandler {
             variablesVisible: false,
             editCellVM: this.props.hasEdit ? createEditableCellVM(1) : undefined,
             enableGather: this.props.enableGather,
-            isAtBottom: true
+            isAtBottom: true,
+            fontSize: 14,
+            fontFamily: 'Consolas, \'Courier New\', monospace'
         };
 
         // Add test state if necessary
@@ -1163,8 +1165,25 @@ export class MainStateController implements IMessageHandler {
                 this.darkChanged(computedKnownDark);
             }
 
+            let fontSize: number = 14;
+            let fontFamily: string = 'Consolas, \'Courier New\', monospace';
+            const fontSizeIndex = response.css.indexOf('--code-font-size: ');
+            const fontFamilyIndex = response.css.indexOf('--code-font-family: ');
+
+            if (fontSizeIndex > -1) {
+                const fontSizeEndIndex = response.css.indexOf('px;', fontSizeIndex + 18);
+                fontSize = parseInt(response.css.substring(fontSizeIndex + 18, fontSizeEndIndex), 10);
+            }
+
+            if (fontFamilyIndex > -1) {
+                const fontFamilyEndIndex = response.css.indexOf(';', fontFamilyIndex + 20);
+                fontFamily = response.css.substring(fontFamilyIndex + 20, fontFamilyEndIndex);
+            }
+
             this.setState({
                 rootCss: response.css,
+                fontSize: fontSize,
+                fontFamily: fontFamily,
                 theme: response.theme,
                 knownDark: computedKnownDark
             });
diff --git a/src/datascience-ui/native-editor/nativeEditor.tsx b/src/datascience-ui/native-editor/nativeEditor.tsx
index fea8d1dad87e..9e19f58087e5 100644
--- a/src/datascience-ui/native-editor/nativeEditor.tsx
+++ b/src/datascience-ui/native-editor/nativeEditor.tsx
@@ -88,18 +88,6 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
             this.renderCount = this.renderCount + 1;
         }
 
-        let fontSize: number = 14;
-        let fontFamily: string = 'Consolas, \'Courier New\', monospace';
-        if (this.state.rootCss) {
-            const fontSizeIndex = this.state.rootCss.indexOf('--code-font-size: ') + 18;
-            const fontSizeEndIndex = this.state.rootCss.indexOf('px;', fontSizeIndex);
-            fontSize = parseInt(this.state.rootCss.substring(fontSizeIndex, fontSizeEndIndex), 10);
-
-            const fontFamilyIndex = this.state.rootCss.indexOf('--code-font-family: ') + 20;
-            const fontFamilyEndIndex = this.state.rootCss.indexOf(';', fontFamilyIndex);
-            fontFamily = this.state.rootCss.substring(fontFamilyIndex, fontFamilyEndIndex);
-        }
-
         // Update the state controller with our new state
         this.stateController.renderUpdate(this.state);
         const progressBar = this.state.busy && !this.props.testMode ? <Progress /> : undefined;
@@ -129,7 +117,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
                 </section>
                 <main id='main-panel-content' onScroll={this.onContentScroll} ref={this.contentPanelScrollRef}>
                     {addCellLine}
-                    {this.renderContentPanel(this.props.baseTheme, fontSize, fontFamily)}
+                    {this.renderContentPanel(this.props.baseTheme, this.state.fontSize, this.state.fontFamily)}
                 </main>
             </div>
         );

From 7f215b373a2c9d529efadb6c0114a780f9fe8d1f Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Fri, 4 Oct 2019 15:02:41 -0700
Subject: [PATCH 4/8] Made the interactiveWindow and the nativeEditor react and
 change their fonts when the user changes them in VS Code, instead of having
 to reload.

---
 src/client/datascience/types.ts                           | 2 ++
 src/client/datascience/webViewHost.ts                     | 4 ++++
 src/datascience-ui/history-react/interactivePanel.tsx     | 7 ++++++-
 src/datascience-ui/interactive-common/common.css          | 4 ----
 .../interactive-common/mainStateController.ts             | 8 ++++++++
 src/datascience-ui/native-editor/nativeEditor.tsx         | 7 ++++++-
 src/datascience-ui/react-common/settingsReactSide.ts      | 2 ++
 7 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/client/datascience/types.ts b/src/client/datascience/types.ts
index dfbdb1da52d2..637df00766f9 100644
--- 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
index ec887ddbcc03..114e8fece340 100644
--- 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/interactivePanel.tsx b/src/datascience-ui/history-react/interactivePanel.tsx
index c1ca02b170b1..e1420864190e 100644
--- 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.fontSize,
+            fontFamily: this.state.fontFamily
+        };
+
         // 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}
diff --git a/src/datascience-ui/interactive-common/common.css b/src/datascience-ui/interactive-common/common.css
index 7231e5a5ea15..389b13e949f3 100644
--- a/src/datascience-ui/interactive-common/common.css
+++ b/src/datascience-ui/interactive-common/common.css
@@ -148,13 +148,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/mainStateController.ts b/src/datascience-ui/interactive-common/mainStateController.ts
index c0dd60a25ba9..d9c24481ad80 100644
--- a/src/datascience-ui/interactive-common/mainStateController.ts
+++ b/src/datascience-ui/interactive-common/mainStateController.ts
@@ -902,6 +902,14 @@ export class MainStateController implements IMessageHandler {
             if (prevShowInputs !== showInputs) {
                 this.toggleCellInputVisibility(showInputs, getSettings().collapseCellInputCodeByDefault);
             }
+
+            const fontSize = dsSettings.extraSettings.fontSize;
+            const fontFamily = dsSettings.extraSettings.fontFamily;
+
+            this.setState({
+                fontSize: fontSize,
+                fontFamily: fontFamily
+            });
         }
     }
 
diff --git a/src/datascience-ui/native-editor/nativeEditor.tsx b/src/datascience-ui/native-editor/nativeEditor.tsx
index 9e19f58087e5..5b6b9d49c00c 100644
--- 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.fontSize,
+            fontFamily: this.state.fontFamily
+        };
+
         // 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}
diff --git a/src/datascience-ui/react-common/settingsReactSide.ts b/src/datascience-ui/react-common/settingsReactSide.ts
index 2dfb4cec9b48..4bd071381afa 100644
--- 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: {

From 991ba1ac7a92dd837f368e403ff974d5f766f2b0 Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Fri, 4 Oct 2019 16:18:53 -0700
Subject: [PATCH 5/8] 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.
---
 .../history-react/interactiveCell.tsx         |  8 ++---
 .../history-react/interactivePanel.tsx        | 29 ++++++++---------
 .../interactive-common/cellInput.tsx          | 11 +++----
 .../interactive-common/code.tsx               |  7 ++--
 .../interactive-common/common.css             |  4 +--
 .../interactive-common/contentPanel.tsx       | 11 +++----
 .../interactive-common/editor.tsx             |  8 ++---
 .../interactive-common/mainState.ts           | 14 +++++---
 .../interactive-common/mainStateController.ts | 32 ++++++++++++-------
 .../interactive-common/markdown.tsx           |  7 ++--
 .../native-editor/nativeCell.tsx              |  8 ++---
 .../native-editor/nativeEditor.tsx            | 22 ++++++-------
 12 files changed, 80 insertions(+), 81 deletions(-)

diff --git a/src/datascience-ui/history-react/interactiveCell.tsx b/src/datascience-ui/history-react/interactiveCell.tsx
index e4462466758a..e5ba31e99266 100644
--- 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,8 +39,7 @@ interface IInteractiveCellProps {
     focusedCell?: string;
     hideOutput?: boolean;
     showLineNumbers?: boolean;
-    fontSize: number;
-    fontFamily: string;
+    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;
@@ -213,8 +212,7 @@ export class InteractiveCell extends React.Component<IInteractiveCellProps> {
                     unfocused={this.onCodeUnfocused}
                     keyDown={this.props.keyDown}
                     showLineNumbers={this.props.showLineNumbers}
-                    fontSize={this.props.fontSize}
-                    fontFamily={this.props.fontFamily}
+                    font={this.props.font}
                 />
             );
         }
diff --git a/src/datascience-ui/history-react/interactivePanel.tsx b/src/datascience-ui/history-react/interactivePanel.tsx
index e1420864190e..fc1096bf2a7e 100644
--- a/src/datascience-ui/history-react/interactivePanel.tsx
+++ b/src/datascience-ui/history-react/interactivePanel.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
 import { noop } from '../../client/common/utils/misc';
 import { Identifiers } from '../../client/datascience/constants';
 import { ContentPanel, IContentPanelProps } from '../interactive-common/contentPanel';
-import { ICellViewModel, IMainState } from '../interactive-common/mainState';
+import { ICellViewModel, IFont, IMainState } from '../interactive-common/mainState';
 import { IVariablePanelProps, VariablePanel } from '../interactive-common/variablePanel';
 import { ErrorBoundary } from '../react-common/errorBoundary';
 import { IKeyboardEvent } from '../react-common/event';
@@ -68,8 +68,8 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
 
     public render() {
         const dynamicFont: React.CSSProperties = {
-            fontSize: this.state.fontSize,
-            fontFamily: this.state.fontFamily
+            fontSize: this.state.font.size,
+            fontFamily: this.state.font.family
         };
 
         // Update the state controller with our new state
@@ -96,10 +96,10 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                     {this.renderVariablePanel(this.props.baseTheme)}
                 </section>
                 <main id='main-panel-content' onScroll={this.handleScroll}>
-                    {this.renderContentPanel(this.props.baseTheme, this.state.fontSize, this.state.fontFamily)}
+                    {this.renderContentPanel(this.props.baseTheme, this.state.font)}
                 </main>
                 <section id='main-panel-footer' aria-label={getLocString('DataScience.editSection', 'Input new cells here')}>
-                    {this.renderFooterPanel(this.props.baseTheme, this.state.fontSize, this.state.fontFamily)}
+                    {this.renderFooterPanel(this.props.baseTheme, this.state.font)}
                 </section>
             </div>
         );
@@ -180,7 +180,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         return null;
     }
 
-    private renderContentPanel(baseTheme: string, fontSize: number, fontFamily: string) {
+    private renderContentPanel(baseTheme: string, font: IFont) {
         // Skip if the tokenizer isn't finished yet. It needs
         // to finish loading so our code editors work.
         if (!this.state.tokenizerLoaded && !this.props.testMode) {
@@ -188,11 +188,11 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         }
 
         // Otherwise render our cells.
-        const contentProps = this.getContentProps(baseTheme, fontSize, fontFamily);
+        const contentProps = this.getContentProps(baseTheme, font);
         return <ContentPanel {...contentProps} ref={this.contentPanelRef} />;
     }
 
-    private renderFooterPanel(baseTheme: string, fontSize: number, fontFamily: string) {
+    private renderFooterPanel(baseTheme: string, font: IFont) {
         // Skip if the tokenizer isn't finished yet. It needs
         // to finish loading so our code editors work.
         if (!this.state.tokenizerLoaded || !this.state.editCellVM) {
@@ -227,8 +227,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                         onClick={this.clickEditCell}
                         keyDown={this.editCellKeyDown}
                         renderCellToolbar={this.renderEditCellToolbar}
-                        fontSize={fontSize}
-                        fontFamily={fontFamily}
+                        font={font}
                     />
                 </ErrorBoundary>
             </div>
@@ -239,7 +238,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         return this.state.currentExecutionCount + 1;
     }
 
-    private getContentProps = (baseTheme: string, fontSize: number, fontFamily: string): IContentPanelProps => {
+    private getContentProps = (baseTheme: string, font: IFont): IContentPanelProps => {
         return {
             baseTheme: baseTheme,
             cellVMs: this.state.cellVMs,
@@ -252,8 +251,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
             newCellVM: undefined,
             renderCell: this.renderCell,
             scrollToBottom: this.scrollDiv,
-            fontSize: fontSize,
-            fontFamily: fontFamily
+            font: font
         };
     }
     private getVariableProps = (baseTheme: string): IVariablePanelProps => {
@@ -328,7 +326,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         }
     }
 
-    private renderCell = (cellVM: ICellViewModel, index: number, fontSize: number, fontFamily: string, containerRef?: React.RefObject<HTMLDivElement>): JSX.Element | null => {
+    private renderCell = (cellVM: ICellViewModel, index: number, font: IFont, containerRef?: React.RefObject<HTMLDivElement>): JSX.Element | null => {
         const cellRef = React.createRef<InteractiveCell>();
         this.cellRefs.set(cellVM.cell.id, cellRef);
         return (
@@ -355,8 +353,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                         renderCellToolbar={this.renderCellToolbar}
                         showLineNumbers={cellVM.showLineNumbers}
                         hideOutput={cellVM.hideOutput}
-                        fontSize={fontSize}
-                        fontFamily={fontFamily}
+                        font={font}
                     />
                 </ErrorBoundary>
             </div>);
diff --git a/src/datascience-ui/interactive-common/cellInput.tsx b/src/datascience-ui/interactive-common/cellInput.tsx
index 154f45480f75..3089235935f1 100644
--- 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,8 +28,7 @@ interface ICellInputProps {
     editorMeasureClassName?: string;
     focusedCell?: string;
     showLineNumbers?: boolean;
-    fontSize: number;
-    fontFamily: string;
+    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;
@@ -130,8 +129,7 @@ export class CellInput extends React.Component<ICellInputProps> {
                         keyDown={this.onKeyDown}
                         showLineNumbers={this.props.showLineNumbers}
                         useQuickEdit={this.props.cellVM.useQuickEdit}
-                        fontSize={this.props.fontSize}
-                        fontFamily={this.props.fontFamily}
+                        font={this.props.font}
                         />
                 </div>
             );
@@ -162,8 +160,7 @@ export class CellInput extends React.Component<ICellInputProps> {
                         keyDown={this.onKeyDown}
                         ref={this.markdownRef}
                         useQuickEdit={false}
-                        fontSize={this.props.fontSize}
-                        fontFamily={this.props.fontFamily}
+                        font={this.props.font}
                         />
                 </div>
             );
diff --git a/src/datascience-ui/interactive-common/code.tsx b/src/datascience-ui/interactive-common/code.tsx
index af51088f3afa..c7b4cd2447c9 100644
--- 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,8 +24,7 @@ export interface ICodeProps {
     editorMeasureClassName?: string;
     showLineNumbers?: boolean;
     useQuickEdit?: boolean;
-    fontSize: number;
-    fontFamily: string;
+    font: IFont;
     onCreated(code: string, modelId: string): void;
     onChange(changes: monacoEditor.editor.IModelContentChange[], modelId: string): void;
     openLink(uri: monacoEditor.Uri): void;
@@ -72,8 +72,7 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
                     unfocused={this.props.unfocused}
                     showLineNumbers={this.props.showLineNumbers}
                     useQuickEdit={this.props.useQuickEdit}
-                    fontSize={this.props.fontSize}
-                    fontFamily={this.props.fontFamily}
+                    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
index 389b13e949f3..51c6712c5374 100644
--- a/src/datascience-ui/interactive-common/common.css
+++ b/src/datascience-ui/interactive-common/common.css
@@ -23,8 +23,8 @@ body, html {
     width: 100%;
     position: absolute;
     overflow: hidden;
-    font-size: var(--code-font-size);
-    font-family: var(--code-font-family);
+    /* font-size: var(--code-font-size);
+    font-family: var(--code-font-family); */
 }
 
 #main-panel-toolbar {
diff --git a/src/datascience-ui/interactive-common/contentPanel.tsx b/src/datascience-ui/interactive-common/contentPanel.tsx
index 5d12feb317f2..472c9f8086d6 100644
--- a/src/datascience-ui/interactive-common/contentPanel.tsx
+++ b/src/datascience-ui/interactive-common/contentPanel.tsx
@@ -4,7 +4,7 @@
 import * as React from 'react';
 
 import { InputHistory } from './inputHistory';
-import { ICellViewModel } from './mainState';
+import { ICellViewModel, IFont } from './mainState';
 
 // See the discussion here: https://github.com/Microsoft/tslint-microsoft-contrib/issues/676
 // tslint:disable: react-this-binding-issue
@@ -21,9 +21,8 @@ export interface IContentPanelProps {
     submittedText: boolean;
     skipNextScroll: boolean;
     editable: boolean;
-    fontSize: number;
-    fontFamily: string;
-    renderCell(cellVM: ICellViewModel, index: number, fontSize: number, fontFamily: string): JSX.Element | null;
+    font: IFont;
+    renderCell(cellVM: ICellViewModel, index: number, font: IFont): JSX.Element | null;
     scrollToBottom(div: HTMLDivElement): void;
 }
 
@@ -59,13 +58,13 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
 
     private renderCells = () => {
         return this.props.cellVMs.map((cellVM: ICellViewModel, index: number) => {
-            return this.props.renderCell(cellVM, index, this.props.fontSize, this.props.fontFamily);
+            return this.props.renderCell(cellVM, index, this.props.font);
         });
     }
 
     private renderEdit = () => {
         if (this.props.editable && this.props.newCellVM) {
-            return this.props.renderCell(this.props.newCellVM, 0, this.props.fontSize, this.props.fontFamily);
+            return this.props.renderCell(this.props.newCellVM, 0, this.props.font);
         } else {
             return null;
         }
diff --git a/src/datascience-ui/interactive-common/editor.tsx b/src/datascience-ui/interactive-common/editor.tsx
index ecc6669d2328..ff6565a21de1 100644
--- 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,8 +25,7 @@ export interface IEditorProps {
     language: string;
     showLineNumbers?: boolean;
     useQuickEdit?: boolean;
-    fontSize: number;
-    fontFamily: string;
+    font: IFont;
     onCreated(code: string, modelId: string): void;
     onChange(changes: monacoEditor.editor.IModelContentChange[], model: monacoEditor.editor.ITextModel): void;
     openLink(uri: monacoEditor.Uri): void;
@@ -116,8 +116,8 @@ export class Editor extends React.Component<IEditorProps, IEditorState> {
             lineDecorationsWidth: 0,
             contextmenu: false,
             matchBrackets: false,
-            fontSize: this.props.fontSize,
-            fontFamily: this.props.fontFamily,
+            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
index 313d76a0c41e..67bd7ed57ac4 100644
--- a/src/datascience-ui/interactive-common/mainState.ts
+++ b/src/datascience-ui/interactive-common/mainState.ts
@@ -40,8 +40,7 @@ export interface IMainState {
     history: InputHistory;
     rootStyle?: string;
     rootCss?: string;
-    fontSize: number;
-    fontFamily: string;
+    font: IFont;
     theme?: string;
     forceDark?: boolean;
     monacoTheme?: string;
@@ -62,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 {
@@ -108,8 +112,10 @@ export function generateTestState(inputBlockToggled: (id: string) => void, fileP
         debugging: false,
         enableGather: true,
         isAtBottom: true,
-        fontSize: 14,
-        fontFamily: 'Consolas, \'Courier New\', monospace'
+        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
index d9c24481ad80..9ac86ae1c894 100644
--- a/src/datascience-ui/interactive-common/mainStateController.ts
+++ b/src/datascience-ui/interactive-common/mainStateController.ts
@@ -77,8 +77,10 @@ export class MainStateController implements IMessageHandler {
             editCellVM: this.props.hasEdit ? createEditableCellVM(1) : undefined,
             enableGather: this.props.enableGather,
             isAtBottom: true,
-            fontSize: 14,
-            fontFamily: 'Consolas, \'Courier New\', monospace'
+            font: {
+                size: 14,
+                family: 'Consolas, \'Courier New\', monospace'
+            }
         };
 
         // Add test state if necessary
@@ -907,8 +909,10 @@ export class MainStateController implements IMessageHandler {
             const fontFamily = dsSettings.extraSettings.fontFamily;
 
             this.setState({
-                fontSize: fontSize,
-                fontFamily: fontFamily
+                font: {
+                    size: fontSize,
+                    family: fontFamily
+                }
             });
         }
     }
@@ -1175,23 +1179,27 @@ export class MainStateController implements IMessageHandler {
 
             let fontSize: number = 14;
             let fontFamily: string = 'Consolas, \'Courier New\', monospace';
-            const fontSizeIndex = response.css.indexOf('--code-font-size: ');
-            const fontFamilyIndex = response.css.indexOf('--code-font-family: ');
+            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 + 18);
-                fontSize = parseInt(response.css.substring(fontSizeIndex + 18, fontSizeEndIndex), 10);
+                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 + 20);
-                fontFamily = response.css.substring(fontFamilyIndex + 20, fontFamilyEndIndex);
+                const fontFamilyEndIndex = response.css.indexOf(';', fontFamilyIndex + familySetting.length);
+                fontFamily = response.css.substring(fontFamilyIndex + familySetting.length, fontFamilyEndIndex);
             }
 
             this.setState({
                 rootCss: response.css,
-                fontSize: fontSize,
-                fontFamily: fontFamily,
+                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
index b3ad88df4acf..708a0c920ff7 100644
--- 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,8 +19,7 @@ export interface IMarkdownProps {
     editorMeasureClassName?: string;
     showLineNumbers?: boolean;
     useQuickEdit?: boolean;
-    fontSize: number;
-    fontFamily: string;
+    font: IFont;
     onCreated(code: string, modelId: string): void;
     onChange(changes: monacoEditor.editor.IModelContentChange[], modelId: string): void;
     focused?(): void;
@@ -58,8 +58,7 @@ export class Markdown extends React.Component<IMarkdownProps> {
                     unfocused={this.props.unfocused}
                     showLineNumbers={this.props.showLineNumbers}
                     useQuickEdit={this.props.useQuickEdit}
-                    fontSize={this.props.fontSize}
-                    fontFamily={this.props.fontFamily}
+                    font={this.props.font}
                 />
         );
     }
diff --git a/src/datascience-ui/native-editor/nativeCell.tsx b/src/datascience-ui/native-editor/nativeCell.tsx
index 1d3c626442a5..eed7222c1cc4 100644
--- 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,8 +36,7 @@ interface INativeCellProps {
     showLineNumbers?: boolean;
     selectedCell?: string;
     focusedCell?: string;
-    fontSize: number;
-    fontFamily: string;
+    font: IFont;
     focusCell(cellId: string, focusCode: boolean): void;
     selectCell(cellId: string): void;
 }
@@ -659,8 +658,7 @@ export class NativeCell extends React.Component<INativeCellProps, INativeCellSta
                     unfocused={this.isCodeCell() ? this.onCodeUnfocused : this.onMarkdownUnfocused}
                     keyDown={this.keyDownInput}
                     showLineNumbers={this.props.showLineNumbers}
-                    fontSize={this.props.fontSize}
-                    fontFamily={this.props.fontFamily}
+                    font={this.props.font}
                 />
             );
         }
diff --git a/src/datascience-ui/native-editor/nativeEditor.tsx b/src/datascience-ui/native-editor/nativeEditor.tsx
index 5b6b9d49c00c..50a48bbff0ae 100644
--- a/src/datascience-ui/native-editor/nativeEditor.tsx
+++ b/src/datascience-ui/native-editor/nativeEditor.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
 import { noop } from '../../client/common/utils/misc';
 import { NativeCommandType } from '../../client/datascience/interactive-common/interactiveWindowTypes';
 import { ContentPanel, IContentPanelProps } from '../interactive-common/contentPanel';
-import { ICellViewModel, IMainState } from '../interactive-common/mainState';
+import { ICellViewModel, IFont, IMainState } from '../interactive-common/mainState';
 import { IVariablePanelProps, VariablePanel } from '../interactive-common/variablePanel';
 import { ErrorBoundary } from '../react-common/errorBoundary';
 import { Image, ImageName } from '../react-common/image';
@@ -84,8 +84,8 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
 
     public render() {
         const dynamicFont: React.CSSProperties = {
-            fontSize: this.state.fontSize,
-            fontFamily: this.state.fontFamily
+            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.
@@ -122,7 +122,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
                 </section>
                 <main id='main-panel-content' onScroll={this.onContentScroll} ref={this.contentPanelScrollRef}>
                     {addCellLine}
-                    {this.renderContentPanel(this.props.baseTheme, this.state.fontSize, this.state.fontFamily)}
+                    {this.renderContentPanel(this.props.baseTheme, this.state.font)}
                 </main>
             </div>
         );
@@ -231,7 +231,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
         return null;
     }
 
-    private renderContentPanel(baseTheme: string, fontSize: number, fontFamily: string) {
+    private renderContentPanel(baseTheme: string, font: IFont) {
         // Skip if the tokenizer isn't finished yet. It needs
         // to finish loading so our code editors work.
         if (!this.state.tokenizerLoaded && !this.props.testMode) {
@@ -239,11 +239,11 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
         }
 
         // Otherwise render our cells.
-        const contentProps = this.getContentProps(baseTheme, fontSize, fontFamily);
+        const contentProps = this.getContentProps(baseTheme, font);
         return <ContentPanel {...contentProps} ref={this.contentPanelRef}/>;
     }
 
-    private getContentProps = (baseTheme: string, fontSize: number, fontFamily: string): IContentPanelProps => {
+    private getContentProps = (baseTheme: string, font: IFont): IContentPanelProps => {
         return {
             baseTheme: baseTheme,
             cellVMs: this.state.cellVMs,
@@ -255,8 +255,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
             editable: true,
             renderCell: this.renderCell,
             scrollToBottom: this.scrollDiv,
-            fontSize: fontSize,
-            fontFamily: fontFamily
+            font: font
         };
     }
     private getVariableProps = (baseTheme: string): IVariablePanelProps => {
@@ -363,7 +362,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
     //     });
     // }
 
-    private renderCell = (cellVM: ICellViewModel, index: number, fontSize: number, fontFamily: string): JSX.Element | null => {
+    private renderCell = (cellVM: ICellViewModel, index: number, font: IFont): JSX.Element | null => {
         const cellRef : React.RefObject<NativeCell> = React.createRef<NativeCell>();
         const containerRef = React.createRef<HTMLDivElement>();
         this.cellRefs.set(cellVM.cell.id, cellRef);
@@ -408,8 +407,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
                         hideOutput={cellVM.hideOutput}
                         focusCell={this.focusCell}
                         selectCell={this.selectCell}
-                        fontSize={fontSize}
-                        fontFamily={fontFamily}
+                        font={font}
                     />
                 </ErrorBoundary>
                 {lastLine}

From e95afa1715ed7d032bc8b9ae153ce8e6dd89f096 Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Fri, 4 Oct 2019 16:33:59 -0700
Subject: [PATCH 6/8] Removed some unnecesary passing around of the font prop

---
 .../history-react/interactivePanel.tsx        | 23 +++++++++----------
 .../interactive-common/contentPanel.tsx       |  9 ++++----
 .../native-editor/nativeEditor.tsx            | 17 +++++++-------
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/datascience-ui/history-react/interactivePanel.tsx b/src/datascience-ui/history-react/interactivePanel.tsx
index fc1096bf2a7e..5038823a0730 100644
--- a/src/datascience-ui/history-react/interactivePanel.tsx
+++ b/src/datascience-ui/history-react/interactivePanel.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
 import { noop } from '../../client/common/utils/misc';
 import { Identifiers } from '../../client/datascience/constants';
 import { ContentPanel, IContentPanelProps } from '../interactive-common/contentPanel';
-import { ICellViewModel, IFont, IMainState } from '../interactive-common/mainState';
+import { ICellViewModel, IMainState } from '../interactive-common/mainState';
 import { IVariablePanelProps, VariablePanel } from '../interactive-common/variablePanel';
 import { ErrorBoundary } from '../react-common/errorBoundary';
 import { IKeyboardEvent } from '../react-common/event';
@@ -96,10 +96,10 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                     {this.renderVariablePanel(this.props.baseTheme)}
                 </section>
                 <main id='main-panel-content' onScroll={this.handleScroll}>
-                    {this.renderContentPanel(this.props.baseTheme, this.state.font)}
+                    {this.renderContentPanel(this.props.baseTheme)}
                 </main>
                 <section id='main-panel-footer' aria-label={getLocString('DataScience.editSection', 'Input new cells here')}>
-                    {this.renderFooterPanel(this.props.baseTheme, this.state.font)}
+                    {this.renderFooterPanel(this.props.baseTheme)}
                 </section>
             </div>
         );
@@ -180,7 +180,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         return null;
     }
 
-    private renderContentPanel(baseTheme: string, font: IFont) {
+    private renderContentPanel(baseTheme: string) {
         // Skip if the tokenizer isn't finished yet. It needs
         // to finish loading so our code editors work.
         if (!this.state.tokenizerLoaded && !this.props.testMode) {
@@ -188,11 +188,11 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         }
 
         // Otherwise render our cells.
-        const contentProps = this.getContentProps(baseTheme, font);
+        const contentProps = this.getContentProps(baseTheme);
         return <ContentPanel {...contentProps} ref={this.contentPanelRef} />;
     }
 
-    private renderFooterPanel(baseTheme: string, font: IFont) {
+    private renderFooterPanel(baseTheme: string) {
         // Skip if the tokenizer isn't finished yet. It needs
         // to finish loading so our code editors work.
         if (!this.state.tokenizerLoaded || !this.state.editCellVM) {
@@ -227,7 +227,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                         onClick={this.clickEditCell}
                         keyDown={this.editCellKeyDown}
                         renderCellToolbar={this.renderEditCellToolbar}
-                        font={font}
+                        font={this.state.font}
                     />
                 </ErrorBoundary>
             </div>
@@ -238,7 +238,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         return this.state.currentExecutionCount + 1;
     }
 
-    private getContentProps = (baseTheme: string, font: IFont): IContentPanelProps => {
+    private getContentProps = (baseTheme: string): IContentPanelProps => {
         return {
             baseTheme: baseTheme,
             cellVMs: this.state.cellVMs,
@@ -250,8 +250,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
             editable: false,
             newCellVM: undefined,
             renderCell: this.renderCell,
-            scrollToBottom: this.scrollDiv,
-            font: font
+            scrollToBottom: this.scrollDiv
         };
     }
     private getVariableProps = (baseTheme: string): IVariablePanelProps => {
@@ -326,7 +325,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
         }
     }
 
-    private renderCell = (cellVM: ICellViewModel, index: number, font: IFont, containerRef?: React.RefObject<HTMLDivElement>): JSX.Element | null => {
+    private renderCell = (cellVM: ICellViewModel, index: number, containerRef?: React.RefObject<HTMLDivElement>): JSX.Element | null => {
         const cellRef = React.createRef<InteractiveCell>();
         this.cellRefs.set(cellVM.cell.id, cellRef);
         return (
@@ -353,7 +352,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                         renderCellToolbar={this.renderCellToolbar}
                         showLineNumbers={cellVM.showLineNumbers}
                         hideOutput={cellVM.hideOutput}
-                        font={font}
+                        font={this.state.font}
                     />
                 </ErrorBoundary>
             </div>);
diff --git a/src/datascience-ui/interactive-common/contentPanel.tsx b/src/datascience-ui/interactive-common/contentPanel.tsx
index 472c9f8086d6..5cc83508d005 100644
--- a/src/datascience-ui/interactive-common/contentPanel.tsx
+++ b/src/datascience-ui/interactive-common/contentPanel.tsx
@@ -4,7 +4,7 @@
 import * as React from 'react';
 
 import { InputHistory } from './inputHistory';
-import { ICellViewModel, IFont } from './mainState';
+import { ICellViewModel } from './mainState';
 
 // See the discussion here: https://github.com/Microsoft/tslint-microsoft-contrib/issues/676
 // tslint:disable: react-this-binding-issue
@@ -21,8 +21,7 @@ export interface IContentPanelProps {
     submittedText: boolean;
     skipNextScroll: boolean;
     editable: boolean;
-    font: IFont;
-    renderCell(cellVM: ICellViewModel, index: number, font: IFont): JSX.Element | null;
+    renderCell(cellVM: ICellViewModel, index: number): JSX.Element | null;
     scrollToBottom(div: HTMLDivElement): void;
 }
 
@@ -58,13 +57,13 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
 
     private renderCells = () => {
         return this.props.cellVMs.map((cellVM: ICellViewModel, index: number) => {
-            return this.props.renderCell(cellVM, index, this.props.font);
+            return this.props.renderCell(cellVM, index);
         });
     }
 
     private renderEdit = () => {
         if (this.props.editable && this.props.newCellVM) {
-            return this.props.renderCell(this.props.newCellVM, 0, this.props.font);
+            return this.props.renderCell(this.props.newCellVM, 0);
         } else {
             return null;
         }
diff --git a/src/datascience-ui/native-editor/nativeEditor.tsx b/src/datascience-ui/native-editor/nativeEditor.tsx
index 50a48bbff0ae..204046809856 100644
--- a/src/datascience-ui/native-editor/nativeEditor.tsx
+++ b/src/datascience-ui/native-editor/nativeEditor.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
 import { noop } from '../../client/common/utils/misc';
 import { NativeCommandType } from '../../client/datascience/interactive-common/interactiveWindowTypes';
 import { ContentPanel, IContentPanelProps } from '../interactive-common/contentPanel';
-import { ICellViewModel, IFont, IMainState } from '../interactive-common/mainState';
+import { ICellViewModel, IMainState } from '../interactive-common/mainState';
 import { IVariablePanelProps, VariablePanel } from '../interactive-common/variablePanel';
 import { ErrorBoundary } from '../react-common/errorBoundary';
 import { Image, ImageName } from '../react-common/image';
@@ -122,7 +122,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
                 </section>
                 <main id='main-panel-content' onScroll={this.onContentScroll} ref={this.contentPanelScrollRef}>
                     {addCellLine}
-                    {this.renderContentPanel(this.props.baseTheme, this.state.font)}
+                    {this.renderContentPanel(this.props.baseTheme)}
                 </main>
             </div>
         );
@@ -231,7 +231,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
         return null;
     }
 
-    private renderContentPanel(baseTheme: string, font: IFont) {
+    private renderContentPanel(baseTheme: string) {
         // Skip if the tokenizer isn't finished yet. It needs
         // to finish loading so our code editors work.
         if (!this.state.tokenizerLoaded && !this.props.testMode) {
@@ -239,11 +239,11 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
         }
 
         // Otherwise render our cells.
-        const contentProps = this.getContentProps(baseTheme, font);
+        const contentProps = this.getContentProps(baseTheme);
         return <ContentPanel {...contentProps} ref={this.contentPanelRef}/>;
     }
 
-    private getContentProps = (baseTheme: string, font: IFont): IContentPanelProps => {
+    private getContentProps = (baseTheme: string): IContentPanelProps => {
         return {
             baseTheme: baseTheme,
             cellVMs: this.state.cellVMs,
@@ -254,8 +254,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
             skipNextScroll: this.state.skipNextScroll ? true : false,
             editable: true,
             renderCell: this.renderCell,
-            scrollToBottom: this.scrollDiv,
-            font: font
+            scrollToBottom: this.scrollDiv
         };
     }
     private getVariableProps = (baseTheme: string): IVariablePanelProps => {
@@ -362,7 +361,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
     //     });
     // }
 
-    private renderCell = (cellVM: ICellViewModel, index: number, font: IFont): JSX.Element | null => {
+    private renderCell = (cellVM: ICellViewModel, index: number): JSX.Element | null => {
         const cellRef : React.RefObject<NativeCell> = React.createRef<NativeCell>();
         const containerRef = React.createRef<HTMLDivElement>();
         this.cellRefs.set(cellVM.cell.id, cellRef);
@@ -407,7 +406,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
                         hideOutput={cellVM.hideOutput}
                         focusCell={this.focusCell}
                         selectCell={this.selectCell}
-                        font={font}
+                        font={this.state.font}
                     />
                 </ErrorBoundary>
                 {lastLine}

From a21f1b59f7a8816c53efea24f52f22c2e28f5d9c Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Fri, 4 Oct 2019 16:46:09 -0700
Subject: [PATCH 7/8] removed unnecesary comments

---
 src/datascience-ui/interactive-common/common.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/datascience-ui/interactive-common/common.css b/src/datascience-ui/interactive-common/common.css
index 51c6712c5374..349773fd0c57 100644
--- a/src/datascience-ui/interactive-common/common.css
+++ b/src/datascience-ui/interactive-common/common.css
@@ -23,8 +23,6 @@ body, html {
     width: 100%;
     position: absolute;
     overflow: hidden;
-    /* font-size: var(--code-font-size);
-    font-family: var(--code-font-family); */
 }
 
 #main-panel-toolbar {

From 37a32237d6af9d7fb71278d67a2d2cdd5102be7f Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Fri, 4 Oct 2019 17:29:35 -0700
Subject: [PATCH 8/8] fixed a failing test

---
 .../interactive-common/mainStateController.ts  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/datascience-ui/interactive-common/mainStateController.ts b/src/datascience-ui/interactive-common/mainStateController.ts
index 9ac86ae1c894..361ca744b3ae 100644
--- a/src/datascience-ui/interactive-common/mainStateController.ts
+++ b/src/datascience-ui/interactive-common/mainStateController.ts
@@ -905,15 +905,17 @@ export class MainStateController implements IMessageHandler {
                 this.toggleCellInputVisibility(showInputs, getSettings().collapseCellInputCodeByDefault);
             }
 
-            const fontSize = dsSettings.extraSettings.fontSize;
-            const fontFamily = dsSettings.extraSettings.fontFamily;
+            if (dsSettings.extraSettings) {
+                const fontSize = dsSettings.extraSettings.fontSize;
+                const fontFamily = dsSettings.extraSettings.fontFamily;
 
-            this.setState({
-                font: {
-                    size: fontSize,
-                    family: fontFamily
-                }
-            });
+                this.setState({
+                    font: {
+                        size: fontSize,
+                        family: fontFamily
+                    }
+                });
+            }
         }
     }