Merge pull request #33954 from Microsoft/tyriar/canvas_terminal

Use canvas to render the terminal

npm-shrinkwrap.json

@@ -572,9 +572,9 @@
       "resolved": "https://registry.npmjs.org/windows-process-tree/-/windows-process-tree-0.1.3.tgz"
     },
     "xterm": {
-      "version": "2.9.1",
-      "from": "Tyriar/xterm.js#vscode-release/1.16",
-      "resolved": "git+https://github.com/Tyriar/xterm.js.git#d383d25c4e879578a2dabc3381f039b246abb34b"
+      "version": "3.0.0",
+      "from": "Tyriar/xterm.js#vscode-release/1.17",
+      "resolved": "git+https://github.com/Tyriar/xterm.js.git#fb7de4e8d90d20a94d3847ea857b5394a09bd771"
     },
     "yauzl": {
       "version": "2.8.0",

package.json

@@ -45,7 +45,7 @@
     "vscode-ripgrep": "0.0.25",
     "vscode-textmate": "^3.1.5",
     "winreg": "1.2.0",
-    "xterm": "Tyriar/xterm.js#vscode-release/1.16",
+    "xterm": "Tyriar/xterm.js#vscode-release/1.17",
     "yauzl": "2.8.0"
   },
   "devDependencies": {

src/vs/workbench/parts/terminal/browser/terminalWidgetManager.ts

@@ -90,4 +90,4 @@ class MessageWidget {
 			this._container.removeChild(this.domNode);
 		}
 	}
-}
+}
\ No newline at end of file

src/vs/workbench/parts/terminal/common/terminal.ts

@@ -58,12 +58,12 @@ export interface ITerminalConfiguration {
 		osx: string[];
 		windows: string[];
 	};
-	enableBold: boolean;
+	// enableBold: boolean;
 	rightClickCopyPaste: boolean;
 	cursorBlinking: boolean;
 	cursorStyle: string;
 	fontFamily: string;
-	fontLigatures: boolean;
+	// fontLigatures: boolean;
 	fontSize: number;
 	lineHeight: number;
 	setLocaleVariables: boolean;
@@ -91,7 +91,7 @@ export interface ITerminalConfigHelper {
 
 export interface ITerminalFont {
 	fontFamily: string;
-	fontSize: string;
+	fontSize: number;
 	lineHeight: number;
 	charWidth: number;
 	charHeight: number;

src/vs/workbench/parts/terminal/electron-browser/media/terminal.css

@@ -41,12 +41,15 @@
 	height: 100%;
 }
 
-.monaco-workbench .panel.integrated-terminal .xterm-viewport {
-	/* Align the viewport to the bottom of the panel, just like the terminal */
+.monaco-workbench .panel.integrated-terminal .xterm-viewport,
+.monaco-workbench .panel.integrated-terminal canvas {
+	/* Align the viewport and canvases to the bottom of the panel */
 	position: absolute;
 	right: -20px;
 	bottom: 0;
 	left: 0;
+	/* Disable upstream's style */
+	top: auto;
 }
 
 .monaco-workbench .panel.integrated-terminal {
@@ -67,6 +70,39 @@
 	text-decoration: underline;
 }
 
+.monaco-workbench .panel.integrated-terminal .xterm {
+	position: relative;
+	height: 100%;
+	user-select: none;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm:focus {
+	/* Hide outline when focus jumps from xterm to the text area */
+	outline: none;
+}
+
+.hc-black .monaco-workbench .panel.integrated-terminal .xterm.focus::before,
+.hc-black .monaco-workbench .panel.integrated-terminal .xterm:focus::before {
+	display: block;
+	content: "";
+	border: 2px solid #f38518;
+	position: absolute;
+	left: -5px;
+	top: 0;
+	right: -5px;
+	bottom: 0;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-helpers {
+	position: absolute;
+	top: 0;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-helper-textarea:focus {
+	/* Override the general vscode style applies `opacity:1!important` to textareas */
+	opacity: 0 !important;
+}
+
 /* Terminal actions */
 
 /* Light theme */

src/vs/workbench/parts/terminal/electron-browser/media/widgets.css

@@ -17,4 +17,6 @@
 	line-height: 19px;
 	padding: 4px 5px;
 	animation: fadein 100ms linear;
+	/* Must be drawn on the top of the terminal's canvases */
+	z-index: 20;
 }
\ No newline at end of file

src/vs/workbench/parts/terminal/electron-browser/terminal.contribution.ts

@@ -120,11 +120,12 @@ configurationRegistry.registerConfiguration({
 			'description': nls.localize('terminal.integrated.fontFamily', "Controls the font family of the terminal, this defaults to editor.fontFamily's value."),
 			'type': 'string'
 		},
-		'terminal.integrated.fontLigatures': {
-			'description': nls.localize('terminal.integrated.fontLigatures', "Controls whether font ligatures are enabled in the terminal."),
-			'type': 'boolean',
-			'default': false
-		},
+		// TODO: Support font ligatures
+		// 'terminal.integrated.fontLigatures': {
+		// 	'description': nls.localize('terminal.integrated.fontLigatures', "Controls whether font ligatures are enabled in the terminal."),
+		// 	'type': 'boolean',
+		// 	'default': false
+		// },
 		'terminal.integrated.fontSize': {
 			'description': nls.localize('terminal.integrated.fontSize', "Controls the font size in pixels of the terminal."),
 			'type': 'number',
@@ -133,13 +134,13 @@ configurationRegistry.registerConfiguration({
 		'terminal.integrated.lineHeight': {
 			'description': nls.localize('terminal.integrated.lineHeight', "Controls the line height of the terminal, this number is multipled by the terminal font size to get the actual line-height in pixels."),
 			'type': 'number',
-			'default': 1.2
-		},
-		'terminal.integrated.enableBold': {
-			'type': 'boolean',
-			'description': nls.localize('terminal.integrated.enableBold', "Whether to enable bold text within the terminal, this requires support from the terminal shell."),
-			'default': true
+			'default': 1
 		},
+		// 'terminal.integrated.enableBold': {
+		// 	'type': 'boolean',
+		// 	'description': nls.localize('terminal.integrated.enableBold', "Whether to enable bold text within the terminal, this requires support from the terminal shell."),
+		// 	'default': true
+		// },
 		'terminal.integrated.cursorBlinking': {
 			'description': nls.localize('terminal.integrated.cursorBlinking', "Controls whether the terminal cursor blinks."),
 			'type': 'boolean',

src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts

@@ -21,13 +21,11 @@ export const TERMINAL_FOREGROUND_COLOR = registerColor('terminal.foreground', {
 }, nls.localize('terminal.foreground', 'The foreground color of the terminal.'));
 export const TERMINAL_CURSOR_FOREGROUND_COLOR = registerColor('terminalCursor.foreground', null, nls.localize('terminalCursor.foreground', 'The foreground color of the terminal cursor.'));
 export const TERMINAL_CURSOR_BACKGROUND_COLOR = registerColor('terminalCursor.background', null, nls.localize('terminalCursor.background', 'The background color of the terminal cursor. Allows customizing the color of a character overlapped by a block cursor.'));
-
-// TODO: Reinstate, see #28397
-// export const TERMINAL_SELECTION_BACKGROUND_COLOR = registerColor('terminal.selectionBackground', {
-// 	light: '#000',
-// 	dark: '#FFF',
-// 	hc: '#FFF'
-// }, nls.localize('terminal.selectionBackground', 'The selection background color of the terminal.'));
+export const TERMINAL_SELECTION_BACKGROUND_COLOR = registerColor('terminal.selectionBackground', {
+	light: '#00000040',
+	dark: '#FFFFFF40',
+	hc: '#FFFFFF80'
+}, nls.localize('terminal.selectionBackground', 'The selection background color of the terminal.'));
 
 const ansiColorMap = {
 	'terminal.ansiBlack': {

src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts

@@ -25,7 +25,7 @@ interface IFullTerminalConfiguration {
 	};
 }
 
-const DEFAULT_LINE_HEIGHT = 1.2;
+const DEFAULT_LINE_HEIGHT = 1.0;
 
 /**
  * Encapsulates terminal configuration logic, the primary purpose of this file is so that platform
@@ -55,11 +55,12 @@ export class TerminalConfigHelper implements ITerminalConfigHelper {
 			this._charMeasureElement = document.createElement('div');
 			this.panelContainer.appendChild(this._charMeasureElement);
 		}
+		// TODO: This should leverage CharMeasure
 		const style = this._charMeasureElement.style;
 		style.display = 'block';
 		style.fontFamily = fontFamily;
 		style.fontSize = fontSize + 'px';
-		style.lineHeight = lineHeight.toString(10);
+		style.lineHeight = 'normal';
 		this._charMeasureElement.innerText = 'X';
 		const rect = this._charMeasureElement.getBoundingClientRect();
 		style.display = 'none';
@@ -71,10 +72,10 @@ export class TerminalConfigHelper implements ITerminalConfigHelper {
 
 		this._lastFontMeasurement = {
 			fontFamily,
-			fontSize: fontSize + 'px',
+			fontSize,
 			lineHeight,
-			charWidth: rect.width,
-			charHeight: rect.height
+			charWidth: Math.ceil(rect.width),
+			charHeight: Math.ceil(rect.height)
 		};
 		return this._lastFontMeasurement;
 	}
@@ -93,10 +94,7 @@ export class TerminalConfigHelper implements ITerminalConfigHelper {
 		if (fontSize <= 0) {
 			fontSize = EDITOR_FONT_DEFAULTS.fontSize;
 		}
-		let lineHeight = terminalConfig.lineHeight <= 0 ? DEFAULT_LINE_HEIGHT : terminalConfig.lineHeight;
-		if (!lineHeight) {
-			lineHeight = DEFAULT_LINE_HEIGHT;
-		}
+		const lineHeight = terminalConfig.lineHeight ? Math.max(terminalConfig.lineHeight, 1) : DEFAULT_LINE_HEIGHT;
 
 		return this._measureFont(fontFamily, fontSize, lineHeight);
 	}

src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts

@@ -30,12 +30,14 @@ import { TabFocus } from 'vs/editor/common/config/commonEditorConfig';
 import { TerminalConfigHelper } from 'vs/workbench/parts/terminal/electron-browser/terminalConfigHelper';
 import { TerminalLinkHandler } from 'vs/workbench/parts/terminal/electron-browser/terminalLinkHandler';
 import { TerminalWidgetManager } from 'vs/workbench/parts/terminal/browser/terminalWidgetManager';
-import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import { registerThemingParticipant, ITheme, ICssStyleCollector, IThemeService } from 'vs/platform/theme/common/themeService';
 import { scrollbarSliderBackground, scrollbarSliderHoverBackground, scrollbarSliderActiveBackground } from 'vs/platform/theme/common/colorRegistry';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { IHistoryService } from 'vs/workbench/services/history/common/history';
 import pkg from 'vs/platform/node/package';
+import { ansiColorIdentifiers, TERMINAL_BACKGROUND_COLOR, TERMINAL_FOREGROUND_COLOR, TERMINAL_CURSOR_FOREGROUND_COLOR, TERMINAL_CURSOR_BACKGROUND_COLOR, TERMINAL_SELECTION_BACKGROUND_COLOR } from 'vs/workbench/parts/terminal/electron-browser/terminalColorRegistry';
+import { PANEL_BACKGROUND } from 'vs/workbench/common/theme';
 
 /** The amount of time to consider terminal errors to be related to the launch */
 const LAUNCHING_DURATION = 500;
@@ -132,7 +134,8 @@ export class TerminalInstance implements ITerminalInstance {
 		@IWorkbenchEditorService private _editorService: IWorkbenchEditorService,
 		@IInstantiationService private _instantiationService: IInstantiationService,
 		@IClipboardService private _clipboardService: IClipboardService,
-		@IHistoryService private _historyService: IHistoryService
+		@IHistoryService private _historyService: IHistoryService,
+		@IThemeService private _themeService: IThemeService
 	) {
 		this._instanceDisposables = [];
 		this._processDisposables = [];
@@ -203,7 +206,7 @@ export class TerminalInstance implements ITerminalInstance {
 		}
 		const font = this._configHelper.getFont();
 		this._cols = Math.max(Math.floor(dimension.width / font.charWidth), 1);
-		this._rows = Math.max(Math.floor(dimension.height / font.charHeight), 1);
+		this._rows = Math.max(Math.floor(dimension.height / Math.floor(font.charHeight * font.lineHeight)), 1);
 		return dimension.width;
 	}
 
@@ -246,7 +249,8 @@ export class TerminalInstance implements ITerminalInstance {
 	 */
 	protected _createXterm(): void {
 		this._xterm = new XTermTerminal({
-			scrollback: this._configHelper.config.scrollback
+			scrollback: this._configHelper.config.scrollback,
+			theme: this._getXtermTheme()
 		});
 		if (this._shellLaunchConfig.initialText) {
 			this._xterm.writeln(this._shellLaunchConfig.initialText);
@@ -268,6 +272,7 @@ export class TerminalInstance implements ITerminalInstance {
 		});
 		this._linkHandler = this._instantiationService.createInstance(TerminalLinkHandler, this._xterm, platform.platform, this._initialCwd);
 		this._linkHandler.registerLocalLinkHandler();
+		this._instanceDisposables.push(this._themeService.onThemeChange(theme => this._updateTheme(theme)));
 	}
 
 	public attachToElement(container: HTMLElement): void {
@@ -881,6 +886,17 @@ export class TerminalInstance implements ITerminalInstance {
 			return;
 		}
 		if (this._xterm) {
+			const font = this._configHelper.getFont();
+			if (this._xterm.getOption('lineHeight') !== font.lineHeight) {
+				this._xterm.setOption('lineHeight', font.lineHeight);
+			}
+			if (this._xterm.getOption('fontSize') !== font.fontSize) {
+				this._xterm.setOption('fontSize', font.fontSize);
+			}
+			if (this._xterm.getOption('fontFamily') !== font.fontFamily) {
+				this._xterm.setOption('fontFamily', font.fontFamily);
+			}
+
 			this._xterm.resize(this._cols, this._rows);
 			this._xterm.element.style.width = terminalWidth + 'px';
 		}
@@ -931,6 +947,46 @@ export class TerminalInstance implements ITerminalInstance {
 			this._onTitleChanged.fire(title);
 		}
 	}
+
+	private _getXtermTheme(theme?: ITheme): any {
+		if (!theme) {
+			theme = this._themeService.getTheme();
+		}
+
+		const foregroundColor = theme.getColor(TERMINAL_FOREGROUND_COLOR);
+		const backgroundColor = theme.getColor(TERMINAL_BACKGROUND_COLOR) || theme.getColor(PANEL_BACKGROUND);
+		const cursorColor = theme.getColor(TERMINAL_CURSOR_FOREGROUND_COLOR) || foregroundColor;
+		const cursorAccentColor = theme.getColor(TERMINAL_CURSOR_BACKGROUND_COLOR) || backgroundColor;
+		const selectionColor = theme.getColor(TERMINAL_SELECTION_BACKGROUND_COLOR);
+
+		return {
+			background: backgroundColor ? backgroundColor.toString() : null,
+			foreground: foregroundColor ? foregroundColor.toString() : null,
+			cursor: cursorColor ? cursorColor.toString() : null,
+			cursorAccent: cursorAccentColor ? cursorAccentColor.toString() : null,
+			selection: selectionColor ? selectionColor.toString() : null,
+			black: theme.getColor(ansiColorIdentifiers[0]).toString(),
+			red: theme.getColor(ansiColorIdentifiers[1]).toString(),
+			green: theme.getColor(ansiColorIdentifiers[2]).toString(),
+			yellow: theme.getColor(ansiColorIdentifiers[3]).toString(),
+			blue: theme.getColor(ansiColorIdentifiers[4]).toString(),
+			magenta: theme.getColor(ansiColorIdentifiers[5]).toString(),
+			cyan: theme.getColor(ansiColorIdentifiers[6]).toString(),
+			white: theme.getColor(ansiColorIdentifiers[7]).toString(),
+			brightBlack: theme.getColor(ansiColorIdentifiers[8]).toString(),
+			brightRed: theme.getColor(ansiColorIdentifiers[9]).toString(),
+			brightGreen: theme.getColor(ansiColorIdentifiers[10]).toString(),
+			brightYellow: theme.getColor(ansiColorIdentifiers[11]).toString(),
+			brightBlue: theme.getColor(ansiColorIdentifiers[12]).toString(),
+			brightMagenta: theme.getColor(ansiColorIdentifiers[13]).toString(),
+			brightCyan: theme.getColor(ansiColorIdentifiers[14]).toString(),
+			brightWhite: theme.getColor(ansiColorIdentifiers[15]).toString()
+		};
+	}
+
+	private _updateTheme(theme?: ITheme): void {
+		this._xterm.setOption('theme', this._getXtermTheme(theme));
+	}
 }
 
 registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {

src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import * as dom from 'vs/base/browser/dom';
+// import * as dom from 'vs/base/browser/dom';
 import * as nls from 'vs/nls';
 import * as path from 'path';
 import * as platform from 'vs/base/common/platform';
@@ -79,8 +79,8 @@ export class TerminalLinkHandler {
 			this._handleHypertextLink(uri);
 		}));
 
-		this._xterm.setHypertextValidationCallback((uri: string, element: HTMLElement, callback: (isValid: boolean) => void) => {
-			this._validateWebLink(uri, element, callback);
+		this._xterm.setHypertextValidationCallback((uri: string, callback: (isValid: boolean) => void) => {
+			this._validateWebLink(uri, callback);
 		});
 	}
 
@@ -89,17 +89,19 @@ export class TerminalLinkHandler {
 	}
 
 	public registerCustomLinkHandler(regex: RegExp, handler: (uri: string) => void, matchIndex?: number, validationCallback?: XtermLinkMatcherValidationCallback): number {
-		const wrappedValidationCallback = (uri: string, element: HTMLElement, callback) => {
-			this._addTooltipEventListeners(element);
-			if (validationCallback) {
-				validationCallback(uri, element, callback);
-			} else {
-				callback(true);
-			}
-		};
+		// const wrappedValidationCallback = (uri: string, element: HTMLElement, callback) => {
+		// 	this._addTooltipEventListeners(element);
+		// 	if (validationCallback) {
+		// 		validationCallback(uri, element, callback);
+		// 	} else {
+		// 		callback(true);
+		// 	}
+		// };
 		return this._xterm.registerLinkMatcher(regex, this._wrapLinkHandler(handler), {
 			matchIndex,
-			validationCallback: wrappedValidationCallback,
+			validationCallback: (uri, element, callback) => validationCallback(uri, element, callback),
+			tooltipCallback: (e: MouseEvent, u) => this._widgetManager.showMessage(e.offsetX, e.offsetY, this._getLinkHoverString()),
+			leaveCallback: () => this._widgetManager.closeMessage(),
 			priority: CUSTOM_LINK_PRIORITY
 		});
 	}
@@ -110,7 +112,9 @@ export class TerminalLinkHandler {
 		});
 
 		return this._xterm.registerLinkMatcher(this._localLinkRegex, wrappedHandler, {
-			validationCallback: (link: string, element: HTMLElement, callback: (isValid: boolean) => void) => this._validateLocalLink(link, element, callback),
+			validationCallback: (link: string, callback: (isValid: boolean) => void) => this._validateLocalLink(link, callback),
+			tooltipCallback: (e: MouseEvent, u) => this._widgetManager.showMessage(e.offsetX, e.offsetY, this._getLinkHoverString()),
+			leaveCallback: () => this._widgetManager.closeMessage(),
 			priority: LOCAL_LINK_PRIORITY
 		});
 	}
@@ -156,17 +160,18 @@ export class TerminalLinkHandler {
 		});
 	}
 
-	private _validateLocalLink(link: string, element: HTMLElement, callback: (isValid: boolean) => void): void {
-		this._resolvePath(link).then(resolvedLink => {
-			if (resolvedLink) {
-				this._addTooltipEventListeners(element);
-			}
-			callback(!!resolvedLink);
-		});
+	private _validateLocalLink(link: string, callback: (isValid: boolean) => void): void {
+		// this._resolvePath(link).then(resolvedLink => {
+		// 	if (resolvedLink) {
+		// 		this._addTooltipEventListeners(element);
+		// 	}
+		// 	callback(!!resolvedLink);
+		// });
+		this._resolvePath(link).then(resolvedLink => callback(!!resolvedLink));
 	}
 
-	private _validateWebLink(link: string, element: HTMLElement, callback: (isValid: boolean) => void): void {
-		this._addTooltipEventListeners(element);
+	private _validateWebLink(link: string, callback: (isValid: boolean) => void): void {
+		// this._addTooltipEventListeners(element);
 		callback(true);
 	}
 
@@ -194,29 +199,29 @@ export class TerminalLinkHandler {
 		return nls.localize('terminalLinkHandler.followLinkCtrl', 'Ctrl + click to follow link');
 	}
 
-	private _addTooltipEventListeners(element: HTMLElement): void {
-		let timeout: number = null;
-		let isMessageShowing = false;
-		this._hoverDisposables.push(dom.addDisposableListener(element, dom.EventType.MOUSE_OVER, e => {
-			element.classList.toggle('active', this._isLinkActivationModifierDown(e));
-			this._mouseMoveDisposable = dom.addDisposableListener(element, dom.EventType.MOUSE_MOVE, e => {
-				element.classList.toggle('active', this._isLinkActivationModifierDown(e));
-			});
-			timeout = setTimeout(() => {
-				this._widgetManager.showMessage(element.offsetLeft, element.offsetTop, this._getLinkHoverString());
-				isMessageShowing = true;
-			}, 500);
-		}));
-		this._hoverDisposables.push(dom.addDisposableListener(element, dom.EventType.MOUSE_OUT, () => {
-			element.classList.remove('active');
-			if (this._mouseMoveDisposable) {
-				this._mouseMoveDisposable.dispose();
-			}
-			clearTimeout(timeout);
-			this._widgetManager.closeMessage();
-			isMessageShowing = false;
-		}));
-	}
+	// private _addTooltipEventListeners(element: HTMLElement): void {
+	// 	let timeout: number = null;
+	// 	let isMessageShowing = false;
+	// 	this._hoverDisposables.push(dom.addDisposableListener(element, dom.EventType.MOUSE_OVER, e => {
+	// 		element.classList.toggle('active', this._isLinkActivationModifierDown(e));
+	// 		this._mouseMoveDisposable = dom.addDisposableListener(element, dom.EventType.MOUSE_MOVE, e => {
+	// 			element.classList.toggle('active', this._isLinkActivationModifierDown(e));
+	// 		});
+	// 		timeout = setTimeout(() => {
+	// 			this._widgetManager.showMessage(element.offsetLeft, element.offsetTop, this._getLinkHoverString());
+	// 			isMessageShowing = true;
+	// 		}, 500);
+	// 	}));
+	// 	this._hoverDisposables.push(dom.addDisposableListener(element, dom.EventType.MOUSE_OUT, () => {
+	// 		element.classList.remove('active');
+	// 		if (this._mouseMoveDisposable) {
+	// 			this._mouseMoveDisposable.dispose();
+	// 		}
+	// 		clearTimeout(timeout);
+	// 		this._widgetManager.closeMessage();
+	// 		isMessageShowing = false;
+	// 	}));
+	// }
 
 	protected _preprocessPath(link: string): string {
 		if (this._platform === platform.Platform.Windows) {
@@ -329,4 +334,4 @@ export class TerminalLinkHandler {
 export interface LineColumnInfo {
 	lineNumber?: string;
 	columnNumber?: string;
-};
+};
\ No newline at end of file

src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts

@@ -18,9 +18,7 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { ITerminalService, ITerminalFont, TERMINAL_PANEL_ID } from 'vs/workbench/parts/terminal/common/terminal';
 import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
 import { TerminalFindWidget } from './terminalFindWidget';
-import { ansiColorIdentifiers, TERMINAL_BACKGROUND_COLOR, TERMINAL_FOREGROUND_COLOR, TERMINAL_CURSOR_FOREGROUND_COLOR, TERMINAL_CURSOR_BACKGROUND_COLOR } from './terminalColorRegistry';
-import { ColorIdentifier, editorHoverBackground, editorHoverBorder, editorForeground } from 'vs/platform/theme/common/colorRegistry';
-import { PANEL_BACKGROUND } from 'vs/workbench/common/theme';
+import { editorHoverBackground, editorHoverBorder, editorForeground } from 'vs/platform/theme/common/colorRegistry';
 import { KillTerminalAction, CreateNewTerminalAction, SwitchTerminalInstanceAction, SwitchTerminalInstanceActionItem, CopyTerminalSelectionAction, TerminalPasteAction, ClearTerminalAction, SelectAllTerminalAction } from 'vs/workbench/parts/terminal/electron-browser/terminalActions';
 import { Panel } from 'vs/workbench/browser/panel';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
@@ -273,38 +271,6 @@ export class TerminalPanel extends Panel {
 		}
 
 		let css = '';
-		ansiColorIdentifiers.forEach((colorId: ColorIdentifier, index: number) => {
-			if (colorId) { // should not happen, all indices should have a color defined.
-				let color = theme.getColor(colorId);
-				css += `.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-${index} { color: ${color}; }` +
-					`.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-${index} { background-color: ${color}; }`;
-			}
-		});
-		const bgColor = theme.getColor(TERMINAL_BACKGROUND_COLOR);
-		if (bgColor) {
-			css += `.monaco-workbench .panel.integrated-terminal .terminal-outer-container { background-color: ${bgColor}; }`;
-		}
-		const fgColor = theme.getColor(TERMINAL_FOREGROUND_COLOR);
-		if (fgColor) {
-			css += `.monaco-workbench .panel.integrated-terminal .xterm { color: ${fgColor}; }`;
-		}
-
-		const cursorFgColor = theme.getColor(TERMINAL_CURSOR_FOREGROUND_COLOR) || fgColor;
-		if (cursorFgColor) {
-			css += `.monaco-workbench .panel.integrated-terminal .xterm:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus .terminal-cursor,` +
-				`.monaco-workbench .panel.integrated-terminal .xterm:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar):focus .terminal-cursor { background-color: ${cursorFgColor} }` +
-				`.monaco-workbench .panel.integrated-terminal .xterm:not(.focus):not(:focus) .terminal-cursor { outline-color: ${cursorFgColor}; }` +
-				`.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-bar .terminal-cursor::before,` +
-				`.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-underline .terminal-cursor::before { background-color: ${cursorFgColor}; }` +
-				`.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-bar.focus.xterm-cursor-blink .terminal-cursor::before,` +
-				`.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-underline.focus.xterm-cursor-blink .terminal-cursor::before { background-color: ${cursorFgColor}; }`;
-		}
-
-		const cursorBgColor = theme.getColor(TERMINAL_CURSOR_BACKGROUND_COLOR) || bgColor || theme.getColor(PANEL_BACKGROUND);
-		if (cursorBgColor) {
-			css += `.monaco-workbench .panel.integrated-terminal .xterm:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus .terminal-cursor,` +
-				`.monaco-workbench .panel.integrated-terminal .xterm:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar):focus .terminal-cursor { color: ${cursorBgColor} }`;
-		}
 
 		// TODO: Reinstate, see #28397
 		// const selectionColor = theme.getColor(TERMINAL_SELECTION_BACKGROUND_COLOR);
@@ -333,28 +299,14 @@ export class TerminalPanel extends Panel {
 		if (this._terminalService.terminalInstances.length === 0) {
 			return;
 		}
-		let newFont = this._terminalService.configHelper.getFont();
-		dom.toggleClass(this._parentDomElement, 'enable-ligatures', this._terminalService.configHelper.config.fontLigatures);
-		dom.toggleClass(this._parentDomElement, 'disable-bold', !this._terminalService.configHelper.config.enableBold);
-		if (!this._font || this._fontsDiffer(this._font, newFont)) {
-			this._fontStyleElement.innerHTML = '.monaco-workbench .panel.integrated-terminal .xterm {' +
-				`font-family: ${newFont.fontFamily};` +
-				`font-size: ${newFont.fontSize};` +
-				`line-height: ${newFont.lineHeight};` +
-				'}';
-			this._font = newFont;
-		}
+		this._font = this._terminalService.configHelper.getFont();
+		// TODO: Can we support ligatures?
+		// dom.toggleClass(this._parentDomElement, 'enable-ligatures', this._terminalService.configHelper.config.fontLigatures);
+		// TODO: How to handle Disable bold?
+		// dom.toggleClass(this._parentDomElement, 'disable-bold', !this._terminalService.configHelper.config.enableBold);
 		this.layout(new Dimension(this._parentDomElement.offsetWidth, this._parentDomElement.offsetHeight));
 	}
 
-	private _fontsDiffer(a: ITerminalFont, b: ITerminalFont): boolean {
-		return a.charHeight !== b.charHeight ||
-			a.charWidth !== b.charWidth ||
-			a.fontFamily !== b.fontFamily ||
-			a.fontSize !== b.fontSize ||
-			a.lineHeight !== b.lineHeight;
-	}
-
 	/**
 	 * Adds quotes to a path if it contains whitespaces
 	 */

src/vs/workbench/parts/terminal/test/electron-browser/terminalConfigHelper.test.ts

@@ -84,7 +84,7 @@ suite('Workbench - TerminalConfigHelper', () => {
 		});
 		configHelper = new TerminalConfigHelper(Platform.Linux, configurationService, null, null, null);
 		configHelper.panelContainer = fixture;
-		assert.equal(configHelper.getFont().fontSize, '2px', 'terminal.integrated.fontSize should be selected over editor.fontSize');
+		assert.equal(configHelper.getFont().fontSize, 2, 'terminal.integrated.fontSize should be selected over editor.fontSize');
 
 		configurationService = new MockConfigurationService({
 			editor: {
@@ -100,7 +100,7 @@ suite('Workbench - TerminalConfigHelper', () => {
 		});
 		configHelper = new TerminalConfigHelper(Platform.Linux, configurationService, null, null, null);
 		configHelper.panelContainer = fixture;
-		assert.equal(configHelper.getFont().fontSize, `${EDITOR_FONT_DEFAULTS.fontSize}px`, 'The default editor font size should be used when editor.fontSize is 0 and terminal.integrated.fontSize not set');
+		assert.equal(configHelper.getFont().fontSize, EDITOR_FONT_DEFAULTS.fontSize, 'The default editor font size should be used when editor.fontSize is 0 and terminal.integrated.fontSize not set');
 
 		configurationService = new MockConfigurationService({
 			editor: {
@@ -116,7 +116,7 @@ suite('Workbench - TerminalConfigHelper', () => {
 		});
 		configHelper = new TerminalConfigHelper(Platform.Linux, configurationService, null, null, null);
 		configHelper.panelContainer = fixture;
-		assert.equal(configHelper.getFont().fontSize, `${EDITOR_FONT_DEFAULTS.fontSize}px`, 'The default editor font size should be used when editor.fontSize is < 0 and terminal.integrated.fontSize not set');
+		assert.equal(configHelper.getFont().fontSize, EDITOR_FONT_DEFAULTS.fontSize, 'The default editor font size should be used when editor.fontSize is < 0 and terminal.integrated.fontSize not set');
 	});
 
 	test('TerminalConfigHelper - getFont lineHeight', function () {
@@ -153,6 +153,6 @@ suite('Workbench - TerminalConfigHelper', () => {
 		});
 		configHelper = new TerminalConfigHelper(Platform.Linux, configurationService, null, null, null);
 		configHelper.panelContainer = fixture;
-		assert.equal(configHelper.getFont().lineHeight, 1.2, 'editor.lineHeight should be 1.2 when terminal.integrated.lineHeight not set');
+		assert.equal(configHelper.getFont().lineHeight, 1, 'editor.lineHeight should be 1 when terminal.integrated.lineHeight not set');
 	});
 });
\ No newline at end of file