Skip to content

Commit 36ce102

Browse files
isidornisidorn
committed
Add font configuration options for the Debug Console
fixes microsoft#1957
1 parent bd348d3 commit 36ce102

5 files changed

Lines changed: 71 additions & 33 deletions

File tree

‎src/vs/workbench/contrib/debug/browser/media/debug.contribution.css‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -136,21 +136,19 @@
136136

137137
/* Expressions */
138138

139-
.monaco-workbench .monaco-list-row .expression {
139+
.monaco-workbench .debug-viewlet .monaco-list-row .expression,
140+
.monaco-workbench .debug-hover-widget .monaco-list-row .expression {
141+
font-size: 13px;
140142
overflow: hidden;
141143
text-overflow: ellipsis;
142144
font-family: var(--monaco-monospace-font);
143145
}
144146

145-
.monaco-workbench.mac .monaco-list-row .expression {
147+
.monaco-workbench.mac .debug-viewlet .monaco-list-row .expression,
148+
.monaco-workbench.mac .debug-hover-widget .monaco-list-row .expression {
146149
font-size: 11px;
147150
}
148151

149-
.monaco-workbench.windows .monaco-list-row .expression,
150-
.monaco-workbench.linux .monaco-list-row .expression {
151-
font-size: 13px;
152-
}
153-
154152
.monaco-workbench .monaco-list-row .expression .value {
155153
margin-left: 6px;
156154
}

‎src/vs/workbench/contrib/debug/browser/media/repl.css‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,7 @@
1111
overflow: hidden;
1212
}
1313

14-
/* Align twisite to last line - for input output pair expressions. */
15-
.repl .repl-tree .monaco-tl-twistie {
16-
background-position-y: calc(100% - 2px);
17-
}
18-
1914
.repl .repl-tree .monaco-tl-contents {
20-
line-height: 18px;
2115
user-select: text;
2216
/* Wrap words but also do not trim whitespace #6275 */
2317
word-wrap: break-word;
@@ -31,10 +25,6 @@
3125
cursor: pointer;
3226
}
3327

34-
.monaco-workbench.mac .repl .repl-tree .input.expression,
35-
.monaco-workbench.mac .repl .repl-tree .output.expression {
36-
font-size: 12px;
37-
}
3828

3929
.repl .repl-tree .output.expression.value-and-source {
4030
display: flex;
@@ -55,13 +45,6 @@
5545
cursor: text;
5646
}
5747

58-
.monaco-workbench.windows .repl .repl-tree .monaco-list-row .input.expression,
59-
.monaco-workbench.windows .repl .repl-tree .monaco-list-row .output.expression,
60-
.monaco-workbench.linux .repl .repl-tree .monaco-list-row .input.expression,
61-
.monaco-workbench.linux .repl .repl-tree .monaco-list-row .output.expression {
62-
font-size: 14px;
63-
}
64-
6548
.repl .repl-tree .output.expression > .value {
6649
margin-left: 0px;
6750
}

‎src/vs/workbench/contrib/debug/common/debug.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,11 @@ export interface IDebugConfiguration {
419419
internalConsoleOptions: 'neverOpen' | 'openOnSessionStart' | 'openOnFirstSessionStart';
420420
extensionHostDebugAdapter: boolean;
421421
enableAllHovers: boolean;
422+
console: {
423+
fontSize: number;
424+
fontFamily: string;
425+
lineHeight: number;
426+
};
422427
}
423428

424429
export interface IGlobalConfig {

‎src/vs/workbench/contrib/debug/electron-browser/debug.contribution.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,21 @@ configurationRegistry.registerConfiguration({
210210
description: nls.localize({ comment: ['This is the description for a setting'], key: 'enableAllHovers' }, "Controls whether the non-debug hovers should be enabled while debugging. When enabled the hover providers will be called to provide a hover. Regular hovers will not be shown even if this setting is enabled."),
211211
default: false
212212
},
213+
'debug.console.fontSize': {
214+
type: 'number',
215+
description: nls.localize('debug.console.fontSize', "Controls the font size in pixels in the debug console."),
216+
default: isMacintosh ? 12 : 14,
217+
},
218+
'debug.console.fontFamily': {
219+
type: 'string',
220+
description: nls.localize('debug.console.fontFamily', "Controls the font family in the debug console."),
221+
default: 'default'
222+
},
223+
'debug.console.lineHeight': {
224+
type: 'number',
225+
description: nls.localize('debug.console.lineHeight', "Controls the line height in pixels in the debug console. Use 0 to compute the line height from the font size."),
226+
default: 0
227+
},
213228
'launch': {
214229
type: 'object',
215230
description: nls.localize({ comment: ['This is the description for a setting'], key: 'launch' }, "Global debug launch configuration. Should be used as an alternative to 'launch.json' that is shared across workspaces."),

‎src/vs/workbench/contrib/debug/electron-browser/repl.ts‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { memoize } from 'vs/base/common/decorators';
3131
import { dispose, IDisposable } from 'vs/base/common/lifecycle';
3232
import { EditorContextKeys } from 'vs/editor/common/editorContextKeys';
3333
import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
34-
import { IDebugService, REPL_ID, DEBUG_SCHEME, CONTEXT_IN_DEBUG_REPL, IDebugSession, State, IReplElement, IExpressionContainer, IExpression, IReplElementSource } from 'vs/workbench/contrib/debug/common/debug';
34+
import { IDebugService, REPL_ID, DEBUG_SCHEME, CONTEXT_IN_DEBUG_REPL, IDebugSession, State, IReplElement, IExpressionContainer, IExpression, IReplElementSource, IDebugConfiguration } from 'vs/workbench/contrib/debug/common/debug';
3535
import { HistoryNavigator } from 'vs/base/common/history';
3636
import { IHistoryNavigationWidget } from 'vs/base/browser/history';
3737
import { createAndBindHistoryNavigationWidgetScopedContextKeyService } from 'vs/platform/browser/contextScopedHistoryWidget';
@@ -97,7 +97,6 @@ export class Repl extends Panel implements IPrivateReplService, IHistoryNavigati
9797
private tree: WorkbenchAsyncDataTree<IDebugSession, IReplElement, FuzzyScore>;
9898
private replDelegate: ReplDelegate;
9999
private container: HTMLElement;
100-
private treeContainer: HTMLElement;
101100
private replInput: CodeEditorWidget;
102101
private replInputContainer: HTMLElement;
103102
private dimension: dom.Dimension;
@@ -106,6 +105,7 @@ export class Repl extends Panel implements IPrivateReplService, IHistoryNavigati
106105
private historyNavigationEnablement: IContextKey<boolean>;
107106
private scopedInstantiationService: IInstantiationService;
108107
private replElementsChangeListener: IDisposable;
108+
private styleElement: HTMLStyleElement;
109109

110110
constructor(
111111
@IDebugService private readonly debugService: IDebugService,
@@ -158,6 +158,11 @@ export class Repl extends Panel implements IPrivateReplService, IHistoryNavigati
158158
this.refreshReplElements(true);
159159
}
160160
}));
161+
this._register(this.configurationService.onDidChangeConfiguration(e => {
162+
if (e.affectsConfiguration('debug.console.lineHeight') || e.affectsConfiguration('debug.console.fontSize') || e.affectsConfiguration('debug.console.fontFamily')) {
163+
this.onDidFontChange();
164+
}
165+
}));
161166
}
162167

163168
get isReadonly(): boolean {
@@ -178,6 +183,33 @@ export class Repl extends Panel implements IPrivateReplService, IHistoryNavigati
178183
this.navigateHistory(false);
179184
}
180185

186+
private onDidFontChange(): void {
187+
if (this.styleElement) {
188+
const debugConsole = this.configurationService.getValue<IDebugConfiguration>('debug').console;
189+
const fontSize = debugConsole.fontSize;
190+
const fontFamily = debugConsole.fontFamily === 'default' ? 'var(--monaco-monospace-font)' : debugConsole.fontFamily;
191+
const lineHeight = debugConsole.lineHeight ? `${debugConsole.lineHeight}px` : '1.4em';
192+
193+
// Set the font size, font family, line height and align the twistie to be centered
194+
this.styleElement.innerHTML = `
195+
.repl .repl-tree .expression {
196+
font-size: ${fontSize}px;
197+
font-family: ${fontFamily};
198+
}
199+
200+
.repl .repl-tree .expression {
201+
line-height: ${lineHeight};
202+
}
203+
204+
.repl .repl-tree .monaco-tl-twistie {
205+
background-position-y: calc(100% - ${fontSize * 1.4 / 2 - 8}px);
206+
}
207+
`;
208+
209+
this.tree.rerender();
210+
}
211+
}
212+
181213
private navigateHistory(previous: boolean): void {
182214
const historyInput = previous ? this.history.previous() : this.history.next();
183215
if (historyInput) {
@@ -266,7 +298,7 @@ export class Repl extends Panel implements IPrivateReplService, IHistoryNavigati
266298
this.dimension = dimension;
267299
if (this.tree) {
268300
const treeHeight = dimension.height - this.replInputHeight;
269-
this.treeContainer.style.height = `${treeHeight}px`;
301+
this.tree.getHTMLElement().style.height = `${treeHeight}px`;
270302
this.tree.layout(treeHeight, dimension.width);
271303
}
272304
this.replInputContainer.style.height = `${this.replInputHeight}px`;
@@ -330,11 +362,11 @@ export class Repl extends Panel implements IPrivateReplService, IHistoryNavigati
330362
create(parent: HTMLElement): void {
331363
super.create(parent);
332364
this.container = dom.append(parent, $('.repl'));
333-
this.treeContainer = dom.append(this.container, $('.repl-tree'));
365+
const treeContainer = dom.append(this.container, $('.repl-tree'));
334366
this.createReplInput(this.container);
335367

336-
this.replDelegate = new ReplDelegate();
337-
this.tree = new WorkbenchAsyncDataTree(this.treeContainer, this.replDelegate, [
368+
this.replDelegate = new ReplDelegate(this.configurationService);
369+
this.tree = new WorkbenchAsyncDataTree(treeContainer, this.replDelegate, [
338370
this.instantiationService.createInstance(VariablesRenderer),
339371
this.instantiationService.createInstance(ReplSimpleElementsRenderer),
340372
new ReplExpressionsRenderer(),
@@ -346,12 +378,15 @@ export class Repl extends Panel implements IPrivateReplService, IHistoryNavigati
346378
mouseSupport: false,
347379
keyboardNavigationLabelProvider: { getKeyboardNavigationLabel: e => e },
348380
horizontalScrolling: false,
381+
setRowLineHeight: false,
349382
supportDynamicHeights: true
350383
}, this.contextKeyService, this.listService, this.themeService, this.configurationService, this.keybindingService);
351384

352385
this.toDispose.push(this.tree.onContextMenu(e => this.onContextMenu(e)));
353386
// Make sure to select the session if debugging is already active
354387
this.selectSession();
388+
this.styleElement = dom.createStyleSheet(this.container);
389+
this.onDidFontChange();
355390
}
356391

357392
private createReplInput(container: HTMLElement): void {
@@ -666,14 +701,16 @@ class ReplRawObjectsRenderer implements ITreeRenderer<RawObjectReplElement, Fuzz
666701

667702
class ReplDelegate implements IListVirtualDelegate<IReplElement> {
668703

669-
private static readonly LINE_HEIGHT_PX = 18;
704+
constructor(private configurationService: IConfigurationService) { }
670705

671706
getHeight(element: IReplElement): number {
707+
// Give approximate heights. Repl has dynamic height so the tree will measure the actual height on its own.
708+
const fontSize = this.configurationService.getValue<IDebugConfiguration>('debug').console.fontSize;
672709
if (element instanceof Expression && element.hasChildren) {
673-
return 2 * ReplDelegate.LINE_HEIGHT_PX;
710+
return Math.ceil(2 * 1.4 * fontSize);
674711
}
675712

676-
return ReplDelegate.LINE_HEIGHT_PX;
713+
return Math.ceil(1.4 * fontSize);
677714
}
678715

679716
getTemplateId(element: IReplElement): string {

0 commit comments

Comments
 (0)