Skip to content

Commit 706cd92

Browse files
IanMatthewHuffIanMatthewHuff
authored
Honor vscode editor size (undocumented setting) and better default size (#10222)
1 parent 94d4cf6 commit 706cd92

File tree

11 files changed

+56
-24
lines changed

11 files changed

+56
-24
lines changed

‎news/2 Fixes/9803.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Make notebook editor and interactive window honor undocumented editor.scrollbar.verticalScrollbarSize option + increase default to match vscode.

‎src/client/datascience/codeCssGenerator.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -227,17 +227,17 @@ export class CodeCssGenerator implements ICodeCssGenerator {
227227

228228
// Use these values to fill in our format string
229229
return `
230-
:root {
231-
--code-comment-color: ${commentStyle.color};
232-
--code-numeric-color: ${numericStyle.color};
233-
--code-string-color: ${stringStyle.color};
234-
--code-variable-color: ${variableStyle.color};
235-
--code-type-color: ${entityTypeStyle.color};
236-
--code-font-family: ${args.fontFamily};
237-
--code-font-size: ${args.fontSize}px;
238-
}
230+
:root {
231+
--code-comment-color: ${commentStyle.color};
232+
--code-numeric-color: ${numericStyle.color};
233+
--code-string-color: ${stringStyle.color};
234+
--code-variable-color: ${variableStyle.color};
235+
--code-type-color: ${entityTypeStyle.color};
236+
--code-font-family: ${args.fontFamily};
237+
--code-font-size: ${args.fontSize}px;
238+
}
239239
240-
${args.defaultStyle ? DefaultCssVars[args.defaultStyle] : undefined}
240+
${args.defaultStyle ? DefaultCssVars[args.defaultStyle] : ''}
241241
`;
242242
}
243243

‎src/client/datascience/types.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -558,9 +558,10 @@ export interface IDataScienceExtraSettings extends IDataScienceSettings {
558558
autoSurround: string;
559559
autoIndent: boolean;
560560
scrollBeyondLastLine: boolean;
561+
verticalScrollbarSize: number;
562+
fontSize: number;
563+
fontFamily: string;
561564
};
562-
fontSize: number;
563-
fontFamily: string;
564565
theme: string;
565566
};
566567
intellisenseOptions: {

‎src/client/datascience/webViewHost.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -187,10 +187,12 @@ export abstract class WebViewHost<IMapping> implements IDisposable {
187187
autoSurround: this.getValue(editor, 'autoSurround', 'languageDefined'),
188188
autoIndent: this.getValue(editor, 'autoIndent', false),
189189
fontLigatures: this.getValue(editor, 'fontLigatures', false),
190-
scrollBeyondLastLine: this.getValue(editor, 'scrollBeyondLastLine', true)
190+
scrollBeyondLastLine: this.getValue(editor, 'scrollBeyondLastLine', true),
191+
// VS Code puts a value for this, but it's 10 (the explorer bar size) not 14 the editor size
192+
verticalScrollbarSize: this.getValue(editor, 'scrollbar.verticalScrollbarSize', 14),
193+
fontSize: this.getValue(editor, 'fontSize', 14),
194+
fontFamily: this.getValue(editor, 'fontFamily', "Consolas, 'Courier New', monospace")
191195
},
192-
fontSize: this.getValue(editor, 'fontSize', 14),
193-
fontFamily: this.getValue(editor, 'fontFamily', "Consolas, 'Courier New', monospace"),
194196
theme: theme
195197
},
196198
intellisenseOptions: {
@@ -340,6 +342,7 @@ export abstract class WebViewHost<IMapping> implements IDisposable {
340342
event.affectsConfiguration('editor.autoIndent') ||
341343
event.affectsConfiguration('editor.scrollBeyondLastLine') ||
342344
event.affectsConfiguration('editor.fontLigatures') ||
345+
event.affectsConfiguration('editor.scrollbar.verticalScrollbarSize') ||
343346
event.affectsConfiguration('files.autoSave') ||
344347
event.affectsConfiguration('files.autoSaveDelay') ||
345348
event.affectsConfiguration('python.dataScience.enableGather')

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import * as React from 'react';
44
import { connect } from 'react-redux';
55
import { Identifiers } from '../../client/datascience/constants';
6+
import { buildSettingsCss } from '../interactive-common/buildSettingsCss';
67
import { ContentPanel, IContentPanelProps } from '../interactive-common/contentPanel';
78
import { handleLinkClick } from '../interactive-common/handlers';
89
import { KernelSelection } from '../interactive-common/kernelSelection';
@@ -62,7 +63,8 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps> {
6263
return (
6364
<div id="main-panel" ref={this.mainPanelRef} role="Main" style={dynamicFont}>
6465
<div className="styleSetter">
65-
<style>{this.props.rootCss}</style>
66+
<style>{`${this.props.rootCss ? this.props.rootCss : ''}
67+
${buildSettingsCss(this.props.settings)}`}</style>
6668
</div>
6769
<header id="main-panel-toolbar">
6870
{this.renderToolbarPanel()}

‎src/datascience-ui/history-react/redux/reducers/effects.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,11 @@ export namespace Effects {
6060
const newSettings = <IDataScienceExtraSettings>newSettingsJSON;
6161
const newEditorOptions = computeEditorOptions(newSettings);
6262
const newFontFamily = newSettings.extraSettings
63-
? newSettings.extraSettings.fontFamily
63+
? newSettings.extraSettings.editor.fontFamily
6464
: arg.prevState.font.family;
65-
const newFontSize = newSettings.extraSettings ? newSettings.extraSettings.fontSize : arg.prevState.font.size;
65+
const newFontSize = newSettings.extraSettings
66+
? newSettings.extraSettings.editor.fontSize
67+
: arg.prevState.font.size;
6668

6769
// Ask for new theme data if necessary
6870
if (

‎src/datascience-ui/interactive-common/buildSettingsCss.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
'use strict';
4+
5+
import { IDataScienceExtraSettings } from '../../client/datascience/types';
6+
7+
// From a set of data science settings build up any settings that need to be
8+
// inserted into our StyleSetter divs some things like pseudo elements
9+
// can't be put into inline styles
10+
export function buildSettingsCss(settings: IDataScienceExtraSettings | undefined): string {
11+
return settings
12+
? `#main-panel-content::-webkit-scrollbar {
13+
width: ${settings.extraSettings.editor.verticalScrollbarSize}px;
14+
}`
15+
: '';
16+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ body, html {
3939
max-height: 100%;
4040
overflow: auto;
4141
}
42+
4243
#main-panel-footer {
4344
grid-area: footer;
4445
overflow: hidden;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
66
import { OSType } from '../../client/common/utils/platform';
77
import { NativeCommandType } from '../../client/datascience/interactive-common/interactiveWindowTypes';
88
import { concatMultilineStringInput } from '../common';
9+
import { buildSettingsCss } from '../interactive-common/buildSettingsCss';
910
import { ContentPanel, IContentPanelProps } from '../interactive-common/contentPanel';
1011
import { handleLinkClick } from '../interactive-common/handlers';
1112
import { KernelSelection } from '../interactive-common/kernelSelection';
@@ -94,7 +95,8 @@ export class NativeEditor extends React.Component<INativeEditorProps> {
9495
return (
9596
<div id="main-panel" role="Main" style={dynamicFont}>
9697
<div className="styleSetter">
97-
<style>{this.props.rootCss}</style>
98+
<style>{`${this.props.rootCss ? this.props.rootCss : ''}
99+
${buildSettingsCss(this.props.settings)}`}</style>
98100
</div>
99101
<header id="main-panel-toolbar">
100102
{this.renderToolbarPanel()}

‎src/datascience-ui/native-editor/redux/reducers/effects.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -229,9 +229,11 @@ export namespace Effects {
229229
const newSettings = <IDataScienceExtraSettings>newSettingsJSON;
230230
const newEditorOptions = computeEditorOptions(newSettings);
231231
const newFontFamily = newSettings.extraSettings
232-
? newSettings.extraSettings.fontFamily
232+
? newSettings.extraSettings.editor.fontFamily
233233
: arg.prevState.font.family;
234-
const newFontSize = newSettings.extraSettings ? newSettings.extraSettings.fontSize : arg.prevState.font.size;
234+
const newFontSize = newSettings.extraSettings
235+
? newSettings.extraSettings.editor.fontSize
236+
: arg.prevState.font.size;
235237

236238
// Ask for new theme data if necessary
237239
if (

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,12 @@ export function getDefaultSettings() {
3939
autoSurround: 'languageDefined',
4040
autoIndent: false,
4141
fontLigatures: false,
42-
scrollBeyondLastLine: true
42+
scrollBeyondLastLine: true,
43+
// VS Code puts a value for this, but it's 10 (the explorer bar size) not 14 the editor size
44+
verticalScrollbarSize: 14,
45+
fontSize: 14,
46+
fontFamily: "Consolas, 'Courier New', monospace"
4347
},
44-
fontSize: 14,
45-
fontFamily: "Consolas, 'Courier New', monospace",
4648
theme: 'Default Dark+'
4749
},
4850
intellisenseOptions: {

0 commit comments

Comments
 (0)