From 78be8b3ec2f369e50868433972b5b738a2ecc5c9 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sat, 2 Sep 2017 20:46:29 -0700 Subject: [PATCH 01/21] Update typings --- src/typings/xterm.d.ts | 811 ++++++++++++++++++++++------------------- 1 file changed, 437 insertions(+), 374 deletions(-) diff --git a/src/typings/xterm.d.ts b/src/typings/xterm.d.ts index ef40720682fba..c64deae4e2da1 100644 --- a/src/typings/xterm.d.ts +++ b/src/typings/xterm.d.ts @@ -41,6 +41,21 @@ interface ITerminalOptions { */ disableStdin?: boolean; + /** + * The font size used to render text. + */ + fontSize?: number; + + /** + * The font family used to render text. + */ + fontFamily?: string; + + /** + * The line height used to render text. + */ + lineHeight?: number; + /** * The number of rows in the terminal. */ @@ -56,12 +71,56 @@ interface ITerminalOptions { * The size of tab stops in the terminal. */ tabStopWidth?: number; - } +} - /** - * An object containing options for a link matcher. - */ - interface ILinkMatcherOptions { +/** + * Contains colors to theme the terminal with. + */ +interface ITheme { + /** The default foreground color */ + foreground?: string, + /** The default background color */ + background?: string, + /** The cursor color */ + cursor?: string, + /** ANSI black (eg. `\x1b[30m`) */ + black?: string, + /** ANSI red (eg. `\x1b[31m`) */ + red?: string, + /** ANSI green (eg. `\x1b[32m`) */ + green?: string, + /** ANSI yellow (eg. `\x1b[33m`) */ + yellow?: string, + /** ANSI blue (eg. `\x1b[34m`) */ + blue?: string, + /** ANSI magenta (eg. `\x1b[35m`) */ + magenta?: string, + /** ANSI cyan (eg. `\x1b[36m`) */ + cyan?: string, + /** ANSI white (eg. `\x1b[37m`) */ + white?: string, + /** ANSI bright black (eg. `\x1b[1;30m`) */ + brightBlack?: string, + /** ANSI bright red (eg. `\x1b[1;31m`) */ + brightRed?: string, + /** ANSI bright green (eg. `\x1b[1;32m`) */ + brightGreen?: string, + /** ANSI bright yellow (eg. `\x1b[1;33m`) */ + brightYellow?: string, + /** ANSI bright blue (eg. `\x1b[1;34m`) */ + brightBlue?: string, + /** ANSI bright magenta (eg. `\x1b[1;35m`) */ + brightMagenta?: string, + /** ANSI bright cyan (eg. `\x1b[1;36m`) */ + brightCyan?: string, + /** ANSI bright white (eg. `\x1b[1;37m`) */ + brightWhite?: string +} + +/** + * An object containing options for a link matcher. + */ +interface ILinkMatcherOptions { /** * The index of the link from the regex.match(text) call. This defaults to 0 * (for regular expressions without capture groups). @@ -80,378 +139,382 @@ interface ITerminalOptions { * default value is 0. */ priority?: number; - } +} - declare module 'xterm' { +declare module 'xterm' { /** * The class that represents an xterm.js terminal. */ export class Terminal { - /** - * The element containing the terminal. - */ - element: HTMLElement; - - /** - * The textarea that accepts input for the terminal. - */ - textarea: HTMLTextAreaElement; - - /** - * The number of rows in the terminal's viewport. - */ - rows: number; - - /** - * The number of columns in the terminal's viewport. - */ - cols: number; - - /** - * Creates a new `Terminal` object. - * - * @param options An object containing a set of options. - */ - constructor(options?: ITerminalOptions); - - /** - * Unfocus the terminal. - */ - blur(): void; - - /** - * Focus the terminal. - */ - focus(): void; - - /** - * Registers an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - on(type: 'blur' | 'focus' | 'lineFeed', listener: () => void): void; - /** - * Registers an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - on(type: 'data', listener: (data?: string) => void): void; - /** - * Registers an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - on(type: 'key', listener: (key?: string, event?: KeyboardEvent) => void): void; - /** - * Registers an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - on(type: 'keypress' | 'keydown', listener: (event?: KeyboardEvent) => void): void; - /** - * Registers an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - on(type: 'refresh', listener: (data?: {start: number, end: number}) => void): void; - /** - * Registers an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - on(type: 'resize', listener: (data?: {cols: number, rows: number}) => void): void; - /** - * Registers an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - on(type: 'scroll', listener: (ydisp?: number) => void): void; - /** - * Registers an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - on(type: 'title', listener: (title?: string) => void): void; - /** - * Registers an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - on(type: string, listener: (...args: any[]) => void): void; - - /** - * Deregisters an event listener. - * @param type The type of the event. - * @param listener The listener. - */ - off(type: 'blur' | 'focus' | 'lineFeed' | 'data' | 'key' | 'keypress' | 'keydown' | 'refresh' | 'resize' | 'scroll' | 'title' | string, listener: (...args: any[]) => void): void; - - /** - * Resizes the terminal. - * @param x The number of columns to resize to. - * @param y The number of rows to resize to. - */ - resize(columns: number, rows: number): void; - - /** - * Writes text to the terminal, followed by a break line character (\n). - * @param data The text to write to the terminal. - */ - writeln(data: string): void; - - /** - * Opens the terminal within an element. - * @param parent The element to create the terminal within. - */ - open(parent: HTMLElement): void; - - /** - * Attaches a custom key event handler which is run before keys are - * processed, giving consumers of xterm.js ultimate control as to what keys - * should be processed by the terminal and what keys should not. - * @param customKeyEventHandler The custom KeyboardEvent handler to attach. - * This is a function that takes a KeyboardEvent, allowing consumers to stop - * propogation and/or prevent the default action. The function returns - * whether the event should be processed by xterm.js. - */ - attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void; - - /** - * (EXPERIMENTAL) Registers a link matcher, allowing custom link patterns to - * be matched and handled. - * @param regex The regular expression to search for, specifically this - * searches the textContent of the rows. You will want to use \s to match a - * space ' ' character for example. - * @param handler The callback when the link is called. - * @param options Options for the link matcher. - * @return The ID of the new matcher, this can be used to deregister. - */ - registerLinkMatcher(regex: RegExp, handler: (event: MouseEvent, uri: string) => boolean | void , options?: ILinkMatcherOptions): number; - - /** - * (EXPERIMENTAL) Deregisters a link matcher if it has been registered. - * @param matcherId The link matcher's ID (returned after register) - */ - deregisterLinkMatcher(matcherId: number): void; - - /** - * Gets whether the terminal has an active selection. - */ - hasSelection(): boolean; - - /** - * Gets the terminal's current selection, this is useful for implementing - * copy behavior outside of xterm.js. - */ - getSelection(): string; - - /** - * Clears the current terminal selection. - */ - clearSelection(): void; - - /** - * Selects all text within the terminal. - */ - selectAll(): void; - - // /** - // * Find the next instance of the term, then scroll to and select it. If it - // * doesn't exist, do nothing. - // * @param term Tne search term. - // * @return Whether a result was found. - // */ - // findNext(term: string): boolean; - - // /** - // * Find the previous instance of the term, then scroll to and select it. If it - // * doesn't exist, do nothing. - // * @param term Tne search term. - // * @return Whether a result was found. - // */ - // findPrevious(term: string): boolean; - - /** - * Destroys the terminal and detaches it from the DOM. - */ - destroy(): void; - - /** - * Scroll the display of the terminal - * @param amount The number of lines to scroll down (negative scroll up). - */ - scrollDisp(amount: number): void; - - /** - * Scroll the display of the terminal by a number of pages. - * @param pageCount The number of pages to scroll (negative scrolls up). - */ - scrollPages(pageCount: number): void; - - /** - * Scrolls the display of the terminal to the top. - */ - scrollToTop(): void; - - /** - * Scrolls the display of the terminal to the bottom. - */ - scrollToBottom(): void; - - /** - * Clear the entire buffer, making the prompt line the new first line. - */ - clear(): void; - - /** - * Writes text to the terminal. - * @param data The text to write to the terminal. - */ - write(data: string): void; - - /** - * Retrieves an option's value from the terminal. - * @param key The option key. - */ - getOption(key: 'bellSound' | 'bellStyle' | 'cursorStyle' | 'termName'): string; - /** - * Retrieves an option's value from the terminal. - * @param key The option key. - */ - getOption(key: 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell'): boolean; - /** - * Retrieves an option's value from the terminal. - * @param key The option key. - */ - getOption(key: 'colors'): string[]; - /** - * Retrieves an option's value from the terminal. - * @param key The option key. - */ - getOption(key: 'cols' | 'rows' | 'tabStopWidth' | 'scrollback'): number; - /** - * Retrieves an option's value from the terminal. - * @param key The option key. - */ - getOption(key: 'geometry'): [number, number]; - /** - * Retrieves an option's value from the terminal. - * @param key The option key. - */ - getOption(key: 'handler'): (data: string) => void; - /** - * Retrieves an option's value from the terminal. - * @param key The option key. - */ - getOption(key: string): any; - - /** - * Sets an option on the terminal. - * @param key The option key. - * @param value The option value. - */ - setOption(key: 'termName' | 'bellSound', value: string): void; - /** - * Sets an option on the terminal. - * @param key The option key. - * @param value The option value. - */ - setOption(key: 'bellStyle', value: null | 'none' | 'visual' | 'sound' | 'both'): void; - /** - * Sets an option on the terminal. - * @param key The option key. - * @param value The option value. - */ - setOption(key: 'cursorStyle', value: null | 'block' | 'underline' | 'bar'): void; - /** - * Sets an option on the terminal. - * @param key The option key. - * @param value The option value. - */ - setOption(key: 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell', value: boolean): void; - /** - * Sets an option on the terminal. - * @param key The option key. - * @param value The option value. - */ - setOption(key: 'colors', value: string[]): void; - /** - * Sets an option on the terminal. - * @param key The option key. - * @param value The option value. - */ - setOption(key: 'cols' | 'rows' | 'tabStopWidth' | 'scrollback', value: number): void; - /** - * Sets an option on the terminal. - * @param key The option key. - * @param value The option value. - */ - setOption(key: 'geometry', value: [number, number]): void; - /** - * Sets an option on the terminal. - * @param key The option key. - * @param value The option value. - */ - setOption(key: 'handler', value: (data: string) => void): void; - /** - * Sets an option on the terminal. - * @param key The option key. - * @param value The option value. - */ - setOption(key: string, value: any): void; - - /** - * Tells the renderer to refresh terminal content between two rows - * (inclusive) at the next opportunity. - * @param start The row to start from (between 0 and this.rows - 1). - * @param end The row to end at (between start and this.rows - 1). - */ - refresh(start: number, end: number): void; - - /** - * Perform a full reset (RIS, aka '\x1bc'). - */ - reset(): void - - /** - * Loads an addon, attaching it to the Terminal prototype and making it - * available to all newly created Terminals. - * @param addon The addon to load. - */ - static loadAddon(addon: 'attach' | 'fit' | 'fullscreen' | 'search' | 'terminado'): void; - - - - - - // Moficiations to official .d.ts below - - buffer: { - /** - * The viewport position. - */ - ydisp: number; - }; - - /** - * Emit an event on the terminal. - */ - emit(type: string, data: any): void; - - /** - * Find the next instance of the term, then scroll to and select it. If it - * doesn't exist, do nothing. - * @param term Tne search term. - * @return Whether a result was found. - */ - findNext(term: string): boolean; - - /** - * Find the previous instance of the term, then scroll to and select it. If it - * doesn't exist, do nothing. - * @param term Tne search term. - * @return Whether a result was found. - */ - findPrevious(term: string): boolean; + /** + * The element containing the terminal. + */ + element: HTMLElement; + + /** + * The textarea that accepts input for the terminal. + */ + textarea: HTMLTextAreaElement; + + /** + * The number of rows in the terminal's viewport. + */ + rows: number; + + /** + * The number of columns in the terminal's viewport. + */ + cols: number; + + /** + * Creates a new `Terminal` object. + * + * @param options An object containing a set of options. + */ + constructor(options?: ITerminalOptions); + + /** + * Unfocus the terminal. + */ + blur(): void; + + /** + * Focus the terminal. + */ + focus(): void; + + /** + * Registers an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + on(type: 'blur' | 'focus' | 'lineFeed', listener: () => void): void; + /** + * Registers an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + on(type: 'data', listener: (data?: string) => void): void; + /** + * Registers an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + on(type: 'key', listener: (key?: string, event?: KeyboardEvent) => void): void; + /** + * Registers an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + on(type: 'keypress' | 'keydown', listener: (event?: KeyboardEvent) => void): void; + /** + * Registers an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + on(type: 'refresh', listener: (data?: {start: number, end: number}) => void): void; + /** + * Registers an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + on(type: 'resize', listener: (data?: {cols: number, rows: number}) => void): void; + /** + * Registers an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + on(type: 'scroll', listener: (ydisp?: number) => void): void; + /** + * Registers an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + on(type: 'title', listener: (title?: string) => void): void; + /** + * Registers an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + on(type: string, listener: (...args: any[]) => void): void; + + /** + * Deregisters an event listener. + * @param type The type of the event. + * @param listener The listener. + */ + off(type: 'blur' | 'focus' | 'lineFeed' | 'data' | 'key' | 'keypress' | 'keydown' | 'refresh' | 'resize' | 'scroll' | 'title' | string, listener: (...args: any[]) => void): void; + + /** + * Resizes the terminal. + * @param x The number of columns to resize to. + * @param y The number of rows to resize to. + */ + resize(columns: number, rows: number): void; + + /** + * Writes text to the terminal, followed by a break line character (\n). + * @param data The text to write to the terminal. + */ + writeln(data: string): void; + + /** + * Opens the terminal within an element. + * @param parent The element to create the terminal within. + */ + open(parent: HTMLElement): void; + + /** + * Attaches a custom key event handler which is run before keys are + * processed, giving consumers of xterm.js ultimate control as to what keys + * should be processed by the terminal and what keys should not. + * @param customKeyEventHandler The custom KeyboardEvent handler to attach. + * This is a function that takes a KeyboardEvent, allowing consumers to stop + * propogation and/or prevent the default action. The function returns + * whether the event should be processed by xterm.js. + */ + attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void; + + /** + * (EXPERIMENTAL) Registers a link matcher, allowing custom link patterns to + * be matched and handled. + * @param regex The regular expression to search for, specifically this + * searches the textContent of the rows. You will want to use \s to match a + * space ' ' character for example. + * @param handler The callback when the link is called. + * @param options Options for the link matcher. + * @return The ID of the new matcher, this can be used to deregister. + */ + registerLinkMatcher(regex: RegExp, handler: (event: MouseEvent, uri: string) => boolean | void , options?: ILinkMatcherOptions): number; + + /** + * (EXPERIMENTAL) Deregisters a link matcher if it has been registered. + * @param matcherId The link matcher's ID (returned after register) + */ + deregisterLinkMatcher(matcherId: number): void; + + /** + * Gets whether the terminal has an active selection. + */ + hasSelection(): boolean; + + /** + * Gets the terminal's current selection, this is useful for implementing + * copy behavior outside of xterm.js. + */ + getSelection(): string; + + /** + * Clears the current terminal selection. + */ + clearSelection(): void; + + /** + * Selects all text within the terminal. + */ + selectAll(): void; + + // /** + // * Find the next instance of the term, then scroll to and select it. If it + // * doesn't exist, do nothing. + // * @param term Tne search term. + // * @return Whether a result was found. + // */ + // findNext(term: string): boolean; + + // /** + // * Find the previous instance of the term, then scroll to and select it. If it + // * doesn't exist, do nothing. + // * @param term Tne search term. + // * @return Whether a result was found. + // */ + // findPrevious(term: string): boolean; + + /** + * Destroys the terminal and detaches it from the DOM. + */ + destroy(): void; + + /** + * Scroll the display of the terminal + * @param amount The number of lines to scroll down (negative scroll up). + */ + scrollDisp(amount: number): void; + + /** + * Scroll the display of the terminal by a number of pages. + * @param pageCount The number of pages to scroll (negative scrolls up). + */ + scrollPages(pageCount: number): void; + + /** + * Scrolls the display of the terminal to the top. + */ + scrollToTop(): void; + + /** + * Scrolls the display of the terminal to the bottom. + */ + scrollToBottom(): void; + + /** + * Clear the entire buffer, making the prompt line the new first line. + */ + clear(): void; + + /** + * Writes text to the terminal. + * @param data The text to write to the terminal. + */ + write(data: string): void; + + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: 'bellSound' | 'bellStyle' | 'cursorStyle' | 'fontFamily' | 'termName'): string; + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell'): boolean; + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: 'colors'): string[]; + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: 'cols' | 'fontSize' | 'lineHeight' | 'rows' | 'tabStopWidth' | 'scrollback'): number; + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: 'geometry'): [number, number]; + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: 'handler'): (data: string) => void; + /** + * Retrieves an option's value from the terminal. + * @param key The option key. + */ + getOption(key: string): any; + + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'fontFamily' | 'termName' | 'bellSound', value: string): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'bellStyle', value: null | 'none' | 'visual' | 'sound' | 'both'): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'cursorStyle', value: null | 'block' | 'underline' | 'bar'): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'debug' | 'disableStdin' | 'popOnBell' | 'screenKeys' | 'useFlowControl' | 'visualBell', value: boolean): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'colors', value: string[]): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'cols' | 'fontSize' | 'lineHeight' | 'rows' | 'tabStopWidth' | 'scrollback', value: number): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'geometry', value: [number, number]): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: 'handler', value: (data: string) => void): void; + /** + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. + */ + setOption(key: string, value: any): void; + + /** + * Sets the theme of the terminal. + * @param theme The theme to use. + */ + setTheme(theme: ITheme): void; + + /** + * Tells the renderer to refresh terminal content between two rows + * (inclusive) at the next opportunity. + * @param start The row to start from (between 0 and this.rows - 1). + * @param end The row to end at (between start and this.rows - 1). + */ + refresh(start: number, end: number): void; + + /** + * Perform a full reset (RIS, aka '\x1bc'). + */ + reset(): void + + /** + * Loads an addon, attaching it to the Terminal prototype and making it + * available to all newly created Terminals. + * @param addon The addon to load. + */ + static loadAddon(addon: 'attach' | 'fit' | 'fullscreen' | 'search' | 'terminado'): void; + + + + // Modifications to official .d.ts below + + buffer: { + /** + * The viewport position. + */ + ydisp: number; + }; + + /** + * Emit an event on the terminal. + */ + emit(type: string, data: any): void; + + /** + * Find the next instance of the term, then scroll to and select it. If it + * doesn't exist, do nothing. + * @param term Tne search term. + * @return Whether a result was found. + */ + findNext(term: string): boolean; + + /** + * Find the previous instance of the term, then scroll to and select it. If it + * doesn't exist, do nothing. + * @param term Tne search term. + * @return Whether a result was found. + */ + findPrevious(term: string): boolean; } - } +} From 6894327cf20936732685d99a69762ed0cd7a5dd9 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sat, 2 Sep 2017 21:30:58 -0700 Subject: [PATCH 02/21] Add CSS changes xterm.css is now unmodified from upstream, all modifications are in terminal.css --- .../electron-browser/media/terminal.css | 44 + .../terminal/electron-browser/media/xterm.css | 2131 +---------------- 2 files changed, 120 insertions(+), 2055 deletions(-) diff --git a/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css b/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css index 8fc3d445adcc9..8cbc764aa3a5e 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css +++ b/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css @@ -89,3 +89,47 @@ .hc-black .monaco-workbench .quick-open-terminal-configure { background-image: url('configure-inverse.svg'); } + + + + + + + + + +/* Previously in xterm.css*/ + + +.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; +} diff --git a/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css b/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css index ad0175361b742..553b5348756a0 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css +++ b/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css @@ -1,2103 +1,124 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ - -.monaco-workbench .panel.integrated-terminal .xterm { +/** + * xterm.js: xterm, in the browser + * Copyright (c) 2014-2016, SourceLair Private Company (www.sourcelair.com (MIT License) + * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License) + * https://github.com/chjj/term.js + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + * Originally forked from (with the author's permission): + * Fabrice Bellard's javascript vt100 for jslinux: + * http://bellard.org/jslinux/ + * Copyright (c) 2011 Fabrice Bellard + * The original design remains. The terminal itself + * has been extended to include xterm CSI codes, among + * other features. + */ + +/** + * Default styles for xterm.js + */ + +.terminal { + font-family: courier-new, courier, monospace; + font-feature-settings: "liga" 0; position: relative; - height: 100%; user-select: none; + -ms-user-select: none; + -webkit-user-select: none; } -.monaco-workbench .panel.integrated-terminal .xterm:focus { - /* Hide outline when focus jumps from xterm to the text area */ +.terminal.focus, +.terminal:focus { 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 { +.terminal .xterm-helpers { position: absolute; top: 0; + /** + * The z-index of the helpers must be higher than the canvases in order for + * IMEs to appear on top. + */ + z-index: 10; } -.monaco-workbench .panel.integrated-terminal .xterm .xterm-helper-textarea { - position: absolute; +.terminal .xterm-helper-textarea { /* * HACK: to fix IE's blinking cursor * Move textarea out of the screen to the far left, so that the cursor is not visible. */ + position: absolute; + opacity: 0; left: -9999em; top: 0; - opacity: 0; width: 0; height: 0; z-index: -10; + /** Prevent wrapping so the IME appears against the textarea at the correct position */ + white-space: nowrap; + overflow: hidden; + resize: none; } -.monaco-workbench .panel.integrated-terminal .xterm .xterm-helper-textarea:focus { - /* Override the general vscode style applies `opacity:1!important` to textareas */ - opacity: 0 !important; -} - -.monaco-workbench .panel.integrated-terminal .xterm a { - color: inherit; - cursor: inherit; - text-decoration: none; -} - -.monaco-workbench .panel.integrated-terminal .xterm:not(.focus):not(:focus) .terminal-cursor { - background-color: transparent; - outline-width: 1px; - outline-style: solid; - outline-offset: -1px; -} - -.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-blink-on:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus .terminal-cursor, -.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-blink-on:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar):focus .terminal-cursor { - background-color: transparent; - color: inherit; +.terminal .composition-view { + /* TODO: Composition position got messed up somewhere */ + background: #000; + color: #FFF; + display: none; + position: absolute; + white-space: nowrap; + z-index: 1; } -.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-bar .terminal-cursor, -.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-underline .terminal-cursor { - position: relative; -} -.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 { - content: ""; +.terminal .composition-view.active { display: block; - position: absolute; -} -.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-bar .terminal-cursor::before { - top: 0; - bottom: 0; - left: 0; - width: 1px; -} -.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-underline .terminal-cursor::before { - bottom: 0; - left: 0; - right: 0; - height: 1px; -} -.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-bar.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before, -.monaco-workbench .panel.integrated-terminal .xterm.xterm-cursor-style-underline.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before { - background-color: transparent !important; } -.monaco-workbench .panel.integrated-terminal .xterm .xterm-viewport { +.terminal .xterm-viewport { + /* On OS X this is required in order for the scroll bar to appear fully opaque */ + background-color: #000; overflow-y: scroll; } -.terminal .xterm-wide-char, -.terminal .xterm-normal-char { - display: inline-block; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-rows { +.terminal canvas { position: absolute; left: 0; - bottom: 0; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-rows > div { - /* Lines containing spans and text nodes ocassionally wrap despite being the same width (#327) */ - white-space: nowrap; + top: 0; } -.monaco-workbench .panel.integrated-terminal .xterm .xterm-scroll-area { +.terminal .xterm-scroll-area { visibility: hidden; } -.monaco-workbench .panel.integrated-terminal .xterm .xterm-char-measure-element { +.terminal .xterm-char-measure-element { display: inline-block; visibility: hidden; position: absolute; left: -9999em; } -.monaco-workbench .panel.integrated-terminal .xterm.enable-mouse-events { +.terminal.enable-mouse-events { /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */ cursor: default; } -.monaco-workbench .panel.integrated-terminal .xterm .xterm-selection { - position: absolute; - left: 0; - bottom: 0; - z-index: 1; - opacity: 0.3; - pointer-events: none; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-selection div { - position: absolute; -} -/* TODO: Remove in favor of theme keys, see #28397*/ -.monaco-workbench .panel.integrated-terminal .xterm .xterm-selection div { background-color: #000; } -.vs-dark .monaco-workbench .panel.integrated-terminal .xterm .xterm-selection div { background-color: #FFF; } -.hc-black .monaco-workbench .panel.integrated-terminal .xterm .xterm-selection div { background-color: #FFF; } - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bold { - font-weight: bold; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-underline { - text-decoration: underline; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-blink { - text-decoration: blink; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-hidden { - visibility: hidden; -} - -/* Composition view */ - -.terminal .composition-view { - background: #000; - color: #FFF; - display: none; - position: absolute; - white-space: nowrap; - z-index: 1; -} - -.terminal .composition-view.active { - display: block; -} - -/* Terminal colors 16-255 */ - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-16 { - color: #000000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-16 { - background-color: #000000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-17 { - color: #00005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-17 { - background-color: #00005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-18 { - color: #000087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-18 { - background-color: #000087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-19 { - color: #0000af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-19 { - background-color: #0000af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-20 { - color: #0000d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-20 { - background-color: #0000d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-21 { - color: #0000ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-21 { - background-color: #0000ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-22 { - color: #005f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-22 { - background-color: #005f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-23 { - color: #005f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-23 { - background-color: #005f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-24 { - color: #005f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-24 { - background-color: #005f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-25 { - color: #005faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-25 { - background-color: #005faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-26 { - color: #005fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-26 { - background-color: #005fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-27 { - color: #005fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-27 { - background-color: #005fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-28 { - color: #008700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-28 { - background-color: #008700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-29 { - color: #00875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-29 { - background-color: #00875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-30 { - color: #008787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-30 { - background-color: #008787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-31 { - color: #0087af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-31 { - background-color: #0087af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-32 { - color: #0087d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-32 { - background-color: #0087d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-33 { - color: #0087ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-33 { - background-color: #0087ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-34 { - color: #00af00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-34 { - background-color: #00af00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-35 { - color: #00af5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-35 { - background-color: #00af5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-36 { - color: #00af87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-36 { - background-color: #00af87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-37 { - color: #00afaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-37 { - background-color: #00afaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-38 { - color: #00afd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-38 { - background-color: #00afd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-39 { - color: #00afff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-39 { - background-color: #00afff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-40 { - color: #00d700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-40 { - background-color: #00d700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-41 { - color: #00d75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-41 { - background-color: #00d75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-42 { - color: #00d787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-42 { - background-color: #00d787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-43 { - color: #00d7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-43 { - background-color: #00d7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-44 { - color: #00d7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-44 { - background-color: #00d7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-45 { - color: #00d7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-45 { - background-color: #00d7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-46 { - color: #00ff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-46 { - background-color: #00ff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-47 { - color: #00ff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-47 { - background-color: #00ff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-48 { - color: #00ff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-48 { - background-color: #00ff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-49 { - color: #00ffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-49 { - background-color: #00ffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-50 { - color: #00ffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-50 { - background-color: #00ffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-51 { - color: #00ffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-51 { - background-color: #00ffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-52 { - color: #5f0000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-52 { - background-color: #5f0000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-53 { - color: #5f005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-53 { - background-color: #5f005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-54 { - color: #5f0087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-54 { - background-color: #5f0087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-55 { - color: #5f00af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-55 { - background-color: #5f00af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-56 { - color: #5f00d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-56 { - background-color: #5f00d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-57 { - color: #5f00ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-57 { - background-color: #5f00ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-58 { - color: #5f5f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-58 { - background-color: #5f5f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-59 { - color: #5f5f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-59 { - background-color: #5f5f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-60 { - color: #5f5f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-60 { - background-color: #5f5f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-61 { - color: #5f5faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-61 { - background-color: #5f5faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-62 { - color: #5f5fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-62 { - background-color: #5f5fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-63 { - color: #5f5fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-63 { - background-color: #5f5fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-64 { - color: #5f8700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-64 { - background-color: #5f8700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-65 { - color: #5f875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-65 { - background-color: #5f875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-66 { - color: #5f8787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-66 { - background-color: #5f8787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-67 { - color: #5f87af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-67 { - background-color: #5f87af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-68 { - color: #5f87d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-68 { - background-color: #5f87d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-69 { - color: #5f87ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-69 { - background-color: #5f87ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-70 { - color: #5faf00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-70 { - background-color: #5faf00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-71 { - color: #5faf5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-71 { - background-color: #5faf5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-72 { - color: #5faf87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-72 { - background-color: #5faf87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-73 { - color: #5fafaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-73 { - background-color: #5fafaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-74 { - color: #5fafd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-74 { - background-color: #5fafd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-75 { - color: #5fafff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-75 { - background-color: #5fafff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-76 { - color: #5fd700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-76 { - background-color: #5fd700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-77 { - color: #5fd75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-77 { - background-color: #5fd75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-78 { - color: #5fd787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-78 { - background-color: #5fd787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-79 { - color: #5fd7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-79 { - background-color: #5fd7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-80 { - color: #5fd7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-80 { - background-color: #5fd7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-81 { - color: #5fd7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-81 { - background-color: #5fd7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-82 { - color: #5fff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-82 { - background-color: #5fff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-83 { - color: #5fff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-83 { - background-color: #5fff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-84 { - color: #5fff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-84 { - background-color: #5fff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-85 { - color: #5fffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-85 { - background-color: #5fffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-86 { - color: #5fffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-86 { - background-color: #5fffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-87 { - color: #5fffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-87 { - background-color: #5fffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-88 { - color: #870000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-88 { - background-color: #870000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-89 { - color: #87005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-89 { - background-color: #87005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-90 { - color: #870087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-90 { - background-color: #870087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-91 { - color: #8700af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-91 { - background-color: #8700af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-92 { - color: #8700d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-92 { - background-color: #8700d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-93 { - color: #8700ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-93 { - background-color: #8700ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-94 { - color: #875f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-94 { - background-color: #875f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-95 { - color: #875f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-95 { - background-color: #875f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-96 { - color: #875f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-96 { - background-color: #875f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-97 { - color: #875faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-97 { - background-color: #875faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-98 { - color: #875fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-98 { - background-color: #875fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-99 { - color: #875fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-99 { - background-color: #875fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-100 { - color: #878700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-100 { - background-color: #878700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-101 { - color: #87875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-101 { - background-color: #87875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-102 { - color: #878787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-102 { - background-color: #878787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-103 { - color: #8787af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-103 { - background-color: #8787af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-104 { - color: #8787d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-104 { - background-color: #8787d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-105 { - color: #8787ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-105 { - background-color: #8787ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-106 { - color: #87af00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-106 { - background-color: #87af00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-107 { - color: #87af5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-107 { - background-color: #87af5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-108 { - color: #87af87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-108 { - background-color: #87af87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-109 { - color: #87afaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-109 { - background-color: #87afaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-110 { - color: #87afd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-110 { - background-color: #87afd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-111 { - color: #87afff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-111 { - background-color: #87afff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-112 { - color: #87d700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-112 { - background-color: #87d700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-113 { - color: #87d75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-113 { - background-color: #87d75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-114 { - color: #87d787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-114 { - background-color: #87d787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-115 { - color: #87d7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-115 { - background-color: #87d7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-116 { - color: #87d7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-116 { - background-color: #87d7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-117 { - color: #87d7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-117 { - background-color: #87d7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-118 { - color: #87ff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-118 { - background-color: #87ff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-119 { - color: #87ff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-119 { - background-color: #87ff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-120 { - color: #87ff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-120 { - background-color: #87ff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-121 { - color: #87ffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-121 { - background-color: #87ffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-122 { - color: #87ffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-122 { - background-color: #87ffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-123 { - color: #87ffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-123 { - background-color: #87ffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-124 { - color: #af0000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-124 { - background-color: #af0000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-125 { - color: #af005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-125 { - background-color: #af005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-126 { - color: #af0087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-126 { - background-color: #af0087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-127 { - color: #af00af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-127 { - background-color: #af00af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-128 { - color: #af00d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-128 { - background-color: #af00d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-129 { - color: #af00ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-129 { - background-color: #af00ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-130 { - color: #af5f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-130 { - background-color: #af5f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-131 { - color: #af5f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-131 { - background-color: #af5f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-132 { - color: #af5f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-132 { - background-color: #af5f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-133 { - color: #af5faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-133 { - background-color: #af5faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-134 { - color: #af5fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-134 { - background-color: #af5fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-135 { - color: #af5fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-135 { - background-color: #af5fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-136 { - color: #af8700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-136 { - background-color: #af8700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-137 { - color: #af875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-137 { - background-color: #af875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-138 { - color: #af8787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-138 { - background-color: #af8787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-139 { - color: #af87af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-139 { - background-color: #af87af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-140 { - color: #af87d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-140 { - background-color: #af87d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-141 { - color: #af87ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-141 { - background-color: #af87ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-142 { - color: #afaf00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-142 { - background-color: #afaf00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-143 { - color: #afaf5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-143 { - background-color: #afaf5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-144 { - color: #afaf87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-144 { - background-color: #afaf87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-145 { - color: #afafaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-145 { - background-color: #afafaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-146 { - color: #afafd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-146 { - background-color: #afafd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-147 { - color: #afafff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-147 { - background-color: #afafff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-148 { - color: #afd700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-148 { - background-color: #afd700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-149 { - color: #afd75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-149 { - background-color: #afd75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-150 { - color: #afd787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-150 { - background-color: #afd787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-151 { - color: #afd7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-151 { - background-color: #afd7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-152 { - color: #afd7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-152 { - background-color: #afd7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-153 { - color: #afd7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-153 { - background-color: #afd7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-154 { - color: #afff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-154 { - background-color: #afff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-155 { - color: #afff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-155 { - background-color: #afff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-156 { - color: #afff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-156 { - background-color: #afff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-157 { - color: #afffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-157 { - background-color: #afffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-158 { - color: #afffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-158 { - background-color: #afffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-159 { - color: #afffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-159 { - background-color: #afffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-160 { - color: #d70000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-160 { - background-color: #d70000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-161 { - color: #d7005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-161 { - background-color: #d7005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-162 { - color: #d70087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-162 { - background-color: #d70087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-163 { - color: #d700af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-163 { - background-color: #d700af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-164 { - color: #d700d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-164 { - background-color: #d700d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-165 { - color: #d700ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-165 { - background-color: #d700ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-166 { - color: #d75f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-166 { - background-color: #d75f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-167 { - color: #d75f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-167 { - background-color: #d75f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-168 { - color: #d75f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-168 { - background-color: #d75f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-169 { - color: #d75faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-169 { - background-color: #d75faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-170 { - color: #d75fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-170 { - background-color: #d75fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-171 { - color: #d75fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-171 { - background-color: #d75fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-172 { - color: #d78700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-172 { - background-color: #d78700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-173 { - color: #d7875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-173 { - background-color: #d7875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-174 { - color: #d78787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-174 { - background-color: #d78787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-175 { - color: #d787af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-175 { - background-color: #d787af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-176 { - color: #d787d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-176 { - background-color: #d787d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-177 { - color: #d787ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-177 { - background-color: #d787ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-178 { - color: #d7af00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-178 { - background-color: #d7af00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-179 { - color: #d7af5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-179 { - background-color: #d7af5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-180 { - color: #d7af87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-180 { - background-color: #d7af87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-181 { - color: #d7afaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-181 { - background-color: #d7afaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-182 { - color: #d7afd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-182 { - background-color: #d7afd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-183 { - color: #d7afff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-183 { - background-color: #d7afff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-184 { - color: #d7d700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-184 { - background-color: #d7d700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-185 { - color: #d7d75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-185 { - background-color: #d7d75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-186 { - color: #d7d787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-186 { - background-color: #d7d787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-187 { - color: #d7d7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-187 { - background-color: #d7d7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-188 { - color: #d7d7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-188 { - background-color: #d7d7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-189 { - color: #d7d7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-189 { - background-color: #d7d7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-190 { - color: #d7ff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-190 { - background-color: #d7ff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-191 { - color: #d7ff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-191 { - background-color: #d7ff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-192 { - color: #d7ff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-192 { - background-color: #d7ff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-193 { - color: #d7ffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-193 { - background-color: #d7ffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-194 { - color: #d7ffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-194 { - background-color: #d7ffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-195 { - color: #d7ffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-195 { - background-color: #d7ffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-196 { - color: #ff0000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-196 { - background-color: #ff0000; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-197 { - color: #ff005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-197 { - background-color: #ff005f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-198 { - color: #ff0087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-198 { - background-color: #ff0087; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-199 { - color: #ff00af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-199 { - background-color: #ff00af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-200 { - color: #ff00d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-200 { - background-color: #ff00d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-201 { - color: #ff00ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-201 { - background-color: #ff00ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-202 { - color: #ff5f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-202 { - background-color: #ff5f00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-203 { - color: #ff5f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-203 { - background-color: #ff5f5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-204 { - color: #ff5f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-204 { - background-color: #ff5f87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-205 { - color: #ff5faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-205 { - background-color: #ff5faf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-206 { - color: #ff5fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-206 { - background-color: #ff5fd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-207 { - color: #ff5fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-207 { - background-color: #ff5fff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-208 { - color: #ff8700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-208 { - background-color: #ff8700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-209 { - color: #ff875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-209 { - background-color: #ff875f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-210 { - color: #ff8787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-210 { - background-color: #ff8787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-211 { - color: #ff87af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-211 { - background-color: #ff87af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-212 { - color: #ff87d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-212 { - background-color: #ff87d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-213 { - color: #ff87ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-213 { - background-color: #ff87ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-214 { - color: #ffaf00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-214 { - background-color: #ffaf00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-215 { - color: #ffaf5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-215 { - background-color: #ffaf5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-216 { - color: #ffaf87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-216 { - background-color: #ffaf87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-217 { - color: #ffafaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-217 { - background-color: #ffafaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-218 { - color: #ffafd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-218 { - background-color: #ffafd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-219 { - color: #ffafff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-219 { - background-color: #ffafff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-220 { - color: #ffd700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-220 { - background-color: #ffd700; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-221 { - color: #ffd75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-221 { - background-color: #ffd75f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-222 { - color: #ffd787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-222 { - background-color: #ffd787; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-223 { - color: #ffd7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-223 { - background-color: #ffd7af; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-224 { - color: #ffd7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-224 { - background-color: #ffd7d7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-225 { - color: #ffd7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-225 { - background-color: #ffd7ff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-226 { - color: #ffff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-226 { - background-color: #ffff00; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-227 { - color: #ffff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-227 { - background-color: #ffff5f; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-228 { - color: #ffff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-228 { - background-color: #ffff87; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-229 { - color: #ffffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-229 { - background-color: #ffffaf; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-230 { - color: #ffffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-230 { - background-color: #ffffd7; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-231 { - color: #ffffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-231 { - background-color: #ffffff; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-232 { - color: #080808; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-232 { - background-color: #080808; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-233 { - color: #121212; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-233 { - background-color: #121212; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-234 { - color: #1c1c1c; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-234 { - background-color: #1c1c1c; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-235 { - color: #262626; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-235 { - background-color: #262626; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-236 { - color: #303030; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-236 { - background-color: #303030; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-237 { - color: #3a3a3a; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-237 { - background-color: #3a3a3a; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-238 { - color: #444444; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-238 { - background-color: #444444; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-239 { - color: #4e4e4e; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-239 { - background-color: #4e4e4e; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-240 { - color: #585858; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-240 { - background-color: #585858; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-241 { - color: #626262; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-241 { - background-color: #626262; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-242 { - color: #6c6c6c; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-242 { - background-color: #6c6c6c; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-243 { - color: #767676; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-243 { - background-color: #767676; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-244 { - color: #808080; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-244 { - background-color: #808080; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-245 { - color: #8a8a8a; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-245 { - background-color: #8a8a8a; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-246 { - color: #949494; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-246 { - background-color: #949494; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-247 { - color: #9e9e9e; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-247 { - background-color: #9e9e9e; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-248 { - color: #a8a8a8; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-248 { - background-color: #a8a8a8; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-249 { - color: #b2b2b2; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-249 { - background-color: #b2b2b2; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-250 { - color: #bcbcbc; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-250 { - background-color: #bcbcbc; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-251 { - color: #c6c6c6; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-251 { - background-color: #c6c6c6; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-252 { - color: #d0d0d0; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-252 { - background-color: #d0d0d0; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-253 { - color: #dadada; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-253 { - background-color: #dadada; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-254 { - color: #e4e4e4; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-254 { - background-color: #e4e4e4; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-255 { - color: #eeeeee; -} - -.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-255 { - background-color: #eeeeee; +.terminal:not(.enable-mouse-events) { + cursor: text; } From 447b1e1a9ad99e67c979d4eafb5f0c68598641fa Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sat, 2 Sep 2017 21:31:31 -0700 Subject: [PATCH 03/21] Get fonts displaying correctly --- .../parts/terminal/electron-browser/terminalConfigHelper.ts | 4 ++-- .../parts/terminal/electron-browser/terminalInstance.ts | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts index 78c27b2f88e15..5da89c9ebcb5a 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts @@ -73,8 +73,8 @@ export class TerminalConfigHelper implements ITerminalConfigHelper { fontFamily, fontSize: fontSize + 'px', lineHeight, - charWidth: rect.width, - charHeight: rect.height + charWidth: Math.ceil(rect.width), + charHeight: Math.ceil(rect.height) }; return this._lastFontMeasurement; } diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts index eeef27cdff512..d0b9fc0c49984 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts @@ -245,7 +245,10 @@ export class TerminalInstance implements ITerminalInstance { * Create xterm.js instance and attach data listeners. */ protected _createXterm(): void { + const font = this._configHelper.getFont(); this._xterm = new XTermTerminal({ + fontFamily: font.fontFamily, + fontSize: parseInt(font.fontSize.replace('px', ''), 10), scrollback: this._configHelper.config.scrollback }); if (this._shellLaunchConfig.initialText) { From fbd6419dd9c7e30e7701e798c0a0030e052f7bfd Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 3 Sep 2017 07:49:00 -0700 Subject: [PATCH 04/21] Support lineHeight --- .../electron-browser/terminalConfigHelper.ts | 5 ++-- .../electron-browser/terminalInstance.ts | 12 +++++++++- .../electron-browser/terminalPanel.ts | 24 ++++--------------- 3 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts index 5da89c9ebcb5a..4dbc75969f0d3 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts +++ b/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 @@ -59,7 +59,6 @@ export class TerminalConfigHelper implements ITerminalConfigHelper { style.display = 'block'; style.fontFamily = fontFamily; style.fontSize = fontSize + 'px'; - style.lineHeight = lineHeight.toString(10); this._charMeasureElement.innerText = 'X'; const rect = this._charMeasureElement.getBoundingClientRect(); style.display = 'none'; @@ -93,7 +92,7 @@ export class TerminalConfigHelper implements ITerminalConfigHelper { if (fontSize <= 0) { fontSize = EDITOR_FONT_DEFAULTS.fontSize; } - let lineHeight = terminalConfig.lineHeight <= 0 ? DEFAULT_LINE_HEIGHT : terminalConfig.lineHeight; + let lineHeight = terminalConfig.lineHeight ? Math.max(terminalConfig.lineHeight, 1) : DEFAULT_LINE_HEIGHT; if (!lineHeight) { lineHeight = DEFAULT_LINE_HEIGHT; } diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts index d0b9fc0c49984..139240c266309 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts @@ -203,7 +203,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 +246,11 @@ export class TerminalInstance implements ITerminalInstance { */ protected _createXterm(): void { const font = this._configHelper.getFont(); + // TODO: font.fontSize should not include 'px' anymore + // TODO: Support lineHeight + // TODO: Support lineHeight, font* changes this._xterm = new XTermTerminal({ + lineHeight: font.lineHeight, fontFamily: font.fontFamily, fontSize: parseInt(font.fontSize.replace('px', ''), 10), scrollback: this._configHelper.config.scrollback @@ -884,6 +888,12 @@ export class TerminalInstance implements ITerminalInstance { return; } if (this._xterm) { + // TODO: Only do this when there's a change + const font = this._configHelper.getFont(); + this._xterm.setOption('lineHeight', font.lineHeight); + this._xterm.setOption('fontSize', parseInt(font.fontSize.replace('px', ''), 10)); + this._xterm.setOption('fontFamily', font.fontFamily); + this._xterm.resize(this._cols, this._rows); this._xterm.element.style.width = terminalWidth + 'px'; } diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts index c7a9ef3805a30..85d9b5bea8f59 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts @@ -333,28 +333,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 */ From c6b2dd5b47a157b1084ac2797b4f484d15868160 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 3 Sep 2017 08:09:41 -0700 Subject: [PATCH 05/21] Align terminal to bottom --- .../parts/terminal/electron-browser/media/terminal.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css b/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css index 8cbc764aa3a5e..cb403433feac7 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css +++ b/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 { From 0d022d59d27c9b541612d7119ffb22b5ad82249a Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 3 Sep 2017 08:40:35 -0700 Subject: [PATCH 06/21] Fix lineHeight for terminal char measure object --- .../parts/terminal/electron-browser/terminalConfigHelper.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts index 4dbc75969f0d3..8fb8326d00270 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts @@ -55,10 +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 = 'normal'; this._charMeasureElement.innerText = 'X'; const rect = this._charMeasureElement.getBoundingClientRect(); style.display = 'none'; From 993aea8350a74c229b862c7289af685b2c0baff6 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 3 Sep 2017 08:49:49 -0700 Subject: [PATCH 07/21] Fix default terminal line height --- .../parts/terminal/electron-browser/terminal.contribution.ts | 2 +- .../parts/terminal/electron-browser/terminalConfigHelper.ts | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminal.contribution.ts b/src/vs/workbench/parts/terminal/electron-browser/terminal.contribution.ts index 916ac9d275f08..05aa63ac63c6f 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminal.contribution.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminal.contribution.ts @@ -133,7 +133,7 @@ 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 + 'default': 1 }, 'terminal.integrated.enableBold': { 'type': 'boolean', diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts index 8fb8326d00270..1863c01d2e5cc 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts @@ -94,10 +94,7 @@ export class TerminalConfigHelper implements ITerminalConfigHelper { if (fontSize <= 0) { fontSize = EDITOR_FONT_DEFAULTS.fontSize; } - let lineHeight = terminalConfig.lineHeight ? Math.max(terminalConfig.lineHeight, 1) : DEFAULT_LINE_HEIGHT; - if (!lineHeight) { - lineHeight = DEFAULT_LINE_HEIGHT; - } + const lineHeight = terminalConfig.lineHeight ? Math.max(terminalConfig.lineHeight, 1) : DEFAULT_LINE_HEIGHT; return this._measureFont(fontFamily, fontSize, lineHeight); } From 977fd77fae6098ae4fa6604c055e770f0c046926 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 3 Sep 2017 09:11:35 -0700 Subject: [PATCH 08/21] Make fontSize a number --- src/vs/workbench/parts/terminal/common/terminal.ts | 2 +- .../parts/terminal/electron-browser/terminalConfigHelper.ts | 2 +- .../parts/terminal/electron-browser/terminalInstance.ts | 5 ++--- .../test/electron-browser/terminalConfigHelper.test.ts | 6 +++--- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/vs/workbench/parts/terminal/common/terminal.ts b/src/vs/workbench/parts/terminal/common/terminal.ts index dd368fc809ce4..a583b2734886c 100644 --- a/src/vs/workbench/parts/terminal/common/terminal.ts +++ b/src/vs/workbench/parts/terminal/common/terminal.ts @@ -91,7 +91,7 @@ export interface ITerminalConfigHelper { export interface ITerminalFont { fontFamily: string; - fontSize: string; + fontSize: number; lineHeight: number; charWidth: number; charHeight: number; diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts index 1863c01d2e5cc..d949eaec21d59 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalConfigHelper.ts @@ -72,7 +72,7 @@ export class TerminalConfigHelper implements ITerminalConfigHelper { this._lastFontMeasurement = { fontFamily, - fontSize: fontSize + 'px', + fontSize, lineHeight, charWidth: Math.ceil(rect.width), charHeight: Math.ceil(rect.height) diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts index 139240c266309..5d5483ec286ec 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts @@ -246,13 +246,12 @@ export class TerminalInstance implements ITerminalInstance { */ protected _createXterm(): void { const font = this._configHelper.getFont(); - // TODO: font.fontSize should not include 'px' anymore // TODO: Support lineHeight // TODO: Support lineHeight, font* changes this._xterm = new XTermTerminal({ lineHeight: font.lineHeight, fontFamily: font.fontFamily, - fontSize: parseInt(font.fontSize.replace('px', ''), 10), + fontSize: font.fontSize, scrollback: this._configHelper.config.scrollback }); if (this._shellLaunchConfig.initialText) { @@ -891,7 +890,7 @@ export class TerminalInstance implements ITerminalInstance { // TODO: Only do this when there's a change const font = this._configHelper.getFont(); this._xterm.setOption('lineHeight', font.lineHeight); - this._xterm.setOption('fontSize', parseInt(font.fontSize.replace('px', ''), 10)); + this._xterm.setOption('fontSize', font.fontSize); this._xterm.setOption('fontFamily', font.fontFamily); this._xterm.resize(this._cols, this._rows); diff --git a/src/vs/workbench/parts/terminal/test/electron-browser/terminalConfigHelper.test.ts b/src/vs/workbench/parts/terminal/test/electron-browser/terminalConfigHelper.test.ts index b370e03061b14..9eae14d88bb47 100644 --- a/src/vs/workbench/parts/terminal/test/electron-browser/terminalConfigHelper.test.ts +++ b/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 () { From 72af20ce23ab17b8373becd30221269d3a5f82eb Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Wed, 6 Sep 2017 16:27:25 -0700 Subject: [PATCH 09/21] Partial support for new link API --- src/typings/xterm.d.ts | 12 ++- .../terminal/browser/terminalWidgetManager.ts | 2 +- .../electron-browser/media/widgets.css | 2 + .../electron-browser/terminalLinkHandler.ts | 99 ++++++++++--------- 4 files changed, 67 insertions(+), 48 deletions(-) diff --git a/src/typings/xterm.d.ts b/src/typings/xterm.d.ts index c64deae4e2da1..4f6f9a174e036 100644 --- a/src/typings/xterm.d.ts +++ b/src/typings/xterm.d.ts @@ -133,6 +133,16 @@ interface ILinkMatcherOptions { */ validationCallback?: (uri: string, element: HTMLElement, callback: (isValid: boolean) => void) => void; + /** + * A callback that fires when the mouse hovers over a link. + */ + hoverStartCallback?: (event: MouseEvent, uri: string) => boolean | void; + + /** + * A callback that fires when the mouse leaves a link that was hovered. + */ + hoverEndCallback?: (event: MouseEvent, uri: string) => boolean | void; + /** * The priority of the link matcher, this defines the order in which the link * matcher is evaluated relative to others, from highest to lowest. The @@ -517,4 +527,4 @@ declare module 'xterm' { */ findPrevious(term: string): boolean; } -} +} \ No newline at end of file diff --git a/src/vs/workbench/parts/terminal/browser/terminalWidgetManager.ts b/src/vs/workbench/parts/terminal/browser/terminalWidgetManager.ts index 279eff5b528a2..f51e97e5dd711 100644 --- a/src/vs/workbench/parts/terminal/browser/terminalWidgetManager.ts +++ b/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 diff --git a/src/vs/workbench/parts/terminal/electron-browser/media/widgets.css b/src/vs/workbench/parts/terminal/electron-browser/media/widgets.css index c804bbdf4a713..ce4669bc9a9a3 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/media/widgets.css +++ b/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 diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts index 071f434f0fa4b..f692c45924462 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts +++ b/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), + hoverStartCallback: (e: MouseEvent, u) => this._widgetManager.showMessage(e.offsetX, e.offsetY, this._getLinkHoverString()), + hoverEndCallback: () => 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), + hoverStartCallback: (e: MouseEvent, u) => this._widgetManager.showMessage(e.offsetX, e.offsetY, this._getLinkHoverString()), + hoverEndCallback: () => this._widgetManager.closeMessage(), priority: LOCAL_LINK_PRIORITY }); } @@ -156,17 +160,20 @@ 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 { + console.log('validate'); + // 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 { + console.log('validate'); + // this._addTooltipEventListeners(element); callback(true); } @@ -194,29 +201,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 +336,4 @@ export class TerminalLinkHandler { export interface LineColumnInfo { lineNumber?: string; columnNumber?: string; -}; +}; \ No newline at end of file From 8ada8167190331a7bb112a7882c7fe7bae02c49f Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Thu, 7 Sep 2017 10:21:59 -0700 Subject: [PATCH 10/21] Use new tooltip callback --- src/typings/xterm.d.ts | 4 ++-- .../terminal/electron-browser/terminalLinkHandler.ts | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/typings/xterm.d.ts b/src/typings/xterm.d.ts index 4f6f9a174e036..fcdd3cbc50ada 100644 --- a/src/typings/xterm.d.ts +++ b/src/typings/xterm.d.ts @@ -136,12 +136,12 @@ interface ILinkMatcherOptions { /** * A callback that fires when the mouse hovers over a link. */ - hoverStartCallback?: (event: MouseEvent, uri: string) => boolean | void; + tooltipCallback?: (event: MouseEvent, uri: string) => boolean | void; /** * A callback that fires when the mouse leaves a link that was hovered. */ - hoverEndCallback?: (event: MouseEvent, uri: string) => boolean | void; + leaveCallback?: (event: MouseEvent, uri: string) => boolean | void; /** * The priority of the link matcher, this defines the order in which the link diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts index f692c45924462..4f3c0ad0f48e5 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts @@ -100,8 +100,8 @@ export class TerminalLinkHandler { return this._xterm.registerLinkMatcher(regex, this._wrapLinkHandler(handler), { matchIndex, validationCallback: (uri, element, callback) => validationCallback(uri, element, callback), - hoverStartCallback: (e: MouseEvent, u) => this._widgetManager.showMessage(e.offsetX, e.offsetY, this._getLinkHoverString()), - hoverEndCallback: () => this._widgetManager.closeMessage(), + tooltipCallback: (e: MouseEvent, u) => this._widgetManager.showMessage(e.offsetX, e.offsetY, this._getLinkHoverString()), + leaveCallback: () => this._widgetManager.closeMessage(), priority: CUSTOM_LINK_PRIORITY }); } @@ -113,8 +113,8 @@ export class TerminalLinkHandler { return this._xterm.registerLinkMatcher(this._localLinkRegex, wrappedHandler, { validationCallback: (link: string, callback: (isValid: boolean) => void) => this._validateLocalLink(link, callback), - hoverStartCallback: (e: MouseEvent, u) => this._widgetManager.showMessage(e.offsetX, e.offsetY, this._getLinkHoverString()), - hoverEndCallback: () => this._widgetManager.closeMessage(), + tooltipCallback: (e: MouseEvent, u) => this._widgetManager.showMessage(e.offsetX, e.offsetY, this._getLinkHoverString()), + leaveCallback: () => this._widgetManager.closeMessage(), priority: LOCAL_LINK_PRIORITY }); } From 6d7e0df92fe045aa47340cec588e0cb7eec0a53b Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Thu, 7 Sep 2017 17:02:14 -0700 Subject: [PATCH 11/21] Fix unit tests --- .../terminal/test/electron-browser/terminalConfigHelper.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/parts/terminal/test/electron-browser/terminalConfigHelper.test.ts b/src/vs/workbench/parts/terminal/test/electron-browser/terminalConfigHelper.test.ts index 9eae14d88bb47..e95533d078f29 100644 --- a/src/vs/workbench/parts/terminal/test/electron-browser/terminalConfigHelper.test.ts +++ b/src/vs/workbench/parts/terminal/test/electron-browser/terminalConfigHelper.test.ts @@ -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 From b982b56f19dcedbe4fdafb77c71c323f5b053435 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Fri, 8 Sep 2017 16:45:04 -0700 Subject: [PATCH 12/21] Don't require panel to exist for xterm.js to init --- .../parts/terminal/electron-browser/terminalInstance.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts index 5d5483ec286ec..f0edcb5691de5 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts @@ -245,13 +245,7 @@ export class TerminalInstance implements ITerminalInstance { * Create xterm.js instance and attach data listeners. */ protected _createXterm(): void { - const font = this._configHelper.getFont(); - // TODO: Support lineHeight - // TODO: Support lineHeight, font* changes this._xterm = new XTermTerminal({ - lineHeight: font.lineHeight, - fontFamily: font.fontFamily, - fontSize: font.fontSize, scrollback: this._configHelper.config.scrollback }); if (this._shellLaunchConfig.initialText) { @@ -887,6 +881,8 @@ export class TerminalInstance implements ITerminalInstance { return; } if (this._xterm) { + // TODO: Support lineHeight + // TODO: Support lineHeight, font* changes // TODO: Only do this when there's a change const font = this._configHelper.getFont(); this._xterm.setOption('lineHeight', font.lineHeight); From 055b8b4500c9304dd1d8a654b03596fbd63c29e0 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sat, 9 Sep 2017 21:23:49 -0700 Subject: [PATCH 13/21] Uplevel xterm.js --- npm-shrinkwrap.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index da67d4348ce25..816eaae11d0e2 100644 --- a/npm-shrinkwrap.json +++ b/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#9bb5135a36eba0481a474041309e373e97f1bc79" }, "yauzl": { "version": "2.8.0", diff --git a/package.json b/package.json index 6cef682d470ce..3df93d9738938 100644 --- a/package.json +++ b/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": { From 62afc94f38a223fe111c20db364b6048fd5bb373 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 10 Sep 2017 08:03:59 -0700 Subject: [PATCH 14/21] Uplevel xterm.js cursorAccent theme color --- npm-shrinkwrap.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 816eaae11d0e2..57aa479e86ca8 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -574,7 +574,7 @@ "xterm": { "version": "3.0.0", "from": "Tyriar/xterm.js#vscode-release/1.17", - "resolved": "git+https://github.com/Tyriar/xterm.js.git#9bb5135a36eba0481a474041309e373e97f1bc79" + "resolved": "git+https://github.com/Tyriar/xterm.js.git#8eb813f30bae01dbfd6deffe856de3a7ac4556f9" }, "yauzl": { "version": "2.8.0", From 61cef0a648c7879ee08a8dcc1867797fde938c80 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 10 Sep 2017 08:16:29 -0700 Subject: [PATCH 15/21] Support new terminal theme model --- src/typings/xterm.d.ts | 32 +++++++---- .../electron-browser/terminalColorRegistry.ts | 6 ++- .../electron-browser/terminalInstance.ts | 54 +++++++++++++++++-- .../electron-browser/terminalLinkHandler.ts | 2 - 4 files changed, 76 insertions(+), 18 deletions(-) diff --git a/src/typings/xterm.d.ts b/src/typings/xterm.d.ts index fcdd3cbc50ada..197f2e7ebc893 100644 --- a/src/typings/xterm.d.ts +++ b/src/typings/xterm.d.ts @@ -71,6 +71,11 @@ interface ITerminalOptions { * The size of tab stops in the terminal. */ tabStopWidth?: number; + + /** + * The color theme of the terminal. + */ + theme?: ITheme; } /** @@ -83,6 +88,10 @@ interface ITheme { background?: string, /** The cursor color */ cursor?: string, + /** The selection color (can be transparent) */ + selection?: string, + /** The accent color of the cursor (used as the foreground color for a block cursor) */ + cursorAccent?: string, /** ANSI black (eg. `\x1b[30m`) */ black?: string, /** ANSI red (eg. `\x1b[31m`) */ @@ -131,15 +140,16 @@ interface ILinkMatcherOptions { * A callback that validates an individual link, returning true if valid and * false if invalid. */ - validationCallback?: (uri: string, element: HTMLElement, callback: (isValid: boolean) => void) => void; + validationCallback?: (uri: string, callback: (isValid: boolean) => void) => void; /** - * A callback that fires when the mouse hovers over a link. + * A callback that fires when the mouse hovers over a link for a moment. */ tooltipCallback?: (event: MouseEvent, uri: string) => boolean | void; /** - * A callback that fires when the mouse leaves a link that was hovered. + * A callback that fires when the mouse leaves a link. Note that this can + * happen even when tooltipCallback hasn't fired for the link yet. */ leaveCallback?: (event: MouseEvent, uri: string) => boolean | void; @@ -222,13 +232,13 @@ declare module 'xterm' { * @param type The type of the event. * @param listener The listener. */ - on(type: 'refresh', listener: (data?: {start: number, end: number}) => void): void; + on(type: 'refresh', listener: (data?: { start: number, end: number }) => void): void; /** * Registers an event listener. * @param type The type of the event. * @param listener The listener. */ - on(type: 'resize', listener: (data?: {cols: number, rows: number}) => void): void; + on(type: 'resize', listener: (data?: { cols: number, rows: number }) => void): void; /** * Registers an event listener. * @param type The type of the event. @@ -295,7 +305,7 @@ declare module 'xterm' { * @param options Options for the link matcher. * @return The ID of the new matcher, this can be used to deregister. */ - registerLinkMatcher(regex: RegExp, handler: (event: MouseEvent, uri: string) => boolean | void , options?: ILinkMatcherOptions): number; + registerLinkMatcher(regex: RegExp, handler: (event: MouseEvent, uri: string) => boolean | void, options?: ILinkMatcherOptions): number; /** * (EXPERIMENTAL) Deregisters a link matcher if it has been registered. @@ -467,13 +477,13 @@ declare module 'xterm' { * @param key The option key. * @param value The option value. */ - setOption(key: string, value: any): void; - + setOption(key: 'theme', value: ITheme): void; /** - * Sets the theme of the terminal. - * @param theme The theme to use. + * Sets an option on the terminal. + * @param key The option key. + * @param value The option value. */ - setTheme(theme: ITheme): void; + setOption(key: string, value: any): void; /** * Tells the renderer to refresh terminal content between two rows diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts index a9b56906ec4d2..cc91f7a59b664 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts @@ -19,7 +19,11 @@ export const TERMINAL_FOREGROUND_COLOR = registerColor('terminal.foreground', { dark: '#CCCCCC', hc: '#FFFFFF' }, 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_FOREGROUND_COLOR = registerColor('terminalCursor.foreground', { + light: '#333333', + dark: '#CCCCCC', + hc: '#FFFFFF' +}, 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 diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts index f0edcb5691de5..d930502e1df39 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts @@ -30,12 +30,13 @@ 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 { scrollbarSliderBackground, scrollbarSliderHoverBackground, scrollbarSliderActiveBackground } from 'vs/platform/theme/common/colorRegistry'; +import { registerThemingParticipant, ITheme, ICssStyleCollector, IThemeService } from 'vs/platform/theme/common/themeService'; +import { scrollbarSliderBackground, scrollbarSliderHoverBackground, scrollbarSliderActiveBackground, editorBackground } 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 } from 'vs/workbench/parts/terminal/electron-browser/terminalColorRegistry'; /** The amount of time to consider terminal errors to be related to the launch */ const LAUNCHING_DURATION = 500; @@ -132,7 +133,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 = []; @@ -246,7 +248,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 +271,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 { @@ -939,6 +943,48 @@ 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); + let backgroundColor = theme.getColor(TERMINAL_BACKGROUND_COLOR); + if (!backgroundColor) { + // Background color is optional, so fall back to editor background color + backgroundColor = theme.getColor(editorBackground); + } + const cursorColor = theme.getColor(TERMINAL_CURSOR_FOREGROUND_COLOR); + const cursorAccentColor = theme.getColor(TERMINAL_CURSOR_BACKGROUND_COLOR); + + return { + background: backgroundColor ? backgroundColor.toString() : null, + foreground: foregroundColor ? foregroundColor.toString() : null, + cursor: cursorColor ? cursorColor.toString() : null, + cursorAccent: cursorAccentColor ? cursorAccentColor.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) => { diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts index 4f3c0ad0f48e5..eedec21a3c687 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts @@ -161,7 +161,6 @@ export class TerminalLinkHandler { } private _validateLocalLink(link: string, callback: (isValid: boolean) => void): void { - console.log('validate'); // this._resolvePath(link).then(resolvedLink => { // if (resolvedLink) { // this._addTooltipEventListeners(element); @@ -172,7 +171,6 @@ export class TerminalLinkHandler { } private _validateWebLink(link: string, callback: (isValid: boolean) => void): void { - console.log('validate'); // this._addTooltipEventListeners(element); callback(true); } From 7df8d06aee10c4029f1eb8c21d949e10482ef719 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 10 Sep 2017 08:28:30 -0700 Subject: [PATCH 16/21] Support terminal.selectionBackground theme key Fixes #28397 --- .../electron-browser/terminalColorRegistry.ts | 18 ++++------ .../electron-browser/terminalInstance.ts | 17 +++++---- .../electron-browser/terminalPanel.ts | 36 +------------------ 3 files changed, 15 insertions(+), 56 deletions(-) diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts index cc91f7a59b664..998e1d45daed8 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts @@ -19,19 +19,13 @@ export const TERMINAL_FOREGROUND_COLOR = registerColor('terminal.foreground', { dark: '#CCCCCC', hc: '#FFFFFF' }, nls.localize('terminal.foreground', 'The foreground color of the terminal.')); -export const TERMINAL_CURSOR_FOREGROUND_COLOR = registerColor('terminalCursor.foreground', { - light: '#333333', - dark: '#CCCCCC', - hc: '#FFFFFF' -}, nls.localize('terminalCursor.foreground', 'The foreground color of the terminal cursor.')); +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: '#00000080', + dark: '#FFFFFF80', + hc: '#FFF' +}, nls.localize('terminal.selectionBackground', 'The selection background color of the terminal.')); const ansiColorMap = { 'terminal.ansiBlack': { diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts index d930502e1df39..6f6fe966242f9 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts @@ -31,12 +31,13 @@ import { TerminalConfigHelper } from 'vs/workbench/parts/terminal/electron-brows import { TerminalLinkHandler } from 'vs/workbench/parts/terminal/electron-browser/terminalLinkHandler'; import { TerminalWidgetManager } from 'vs/workbench/parts/terminal/browser/terminalWidgetManager'; import { registerThemingParticipant, ITheme, ICssStyleCollector, IThemeService } from 'vs/platform/theme/common/themeService'; -import { scrollbarSliderBackground, scrollbarSliderHoverBackground, scrollbarSliderActiveBackground, editorBackground } from 'vs/platform/theme/common/colorRegistry'; +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 } from 'vs/workbench/parts/terminal/electron-browser/terminalColorRegistry'; +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; @@ -950,19 +951,17 @@ export class TerminalInstance implements ITerminalInstance { } const foregroundColor = theme.getColor(TERMINAL_FOREGROUND_COLOR); - let backgroundColor = theme.getColor(TERMINAL_BACKGROUND_COLOR); - if (!backgroundColor) { - // Background color is optional, so fall back to editor background color - backgroundColor = theme.getColor(editorBackground); - } - const cursorColor = theme.getColor(TERMINAL_CURSOR_FOREGROUND_COLOR); - const cursorAccentColor = theme.getColor(TERMINAL_CURSOR_BACKGROUND_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(), diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts index 85d9b5bea8f59..9a4e71949c53c 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts +++ b/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); From 9746e5cc0e16e598c94c5101856ddb8b3a04748e Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 10 Sep 2017 08:29:42 -0700 Subject: [PATCH 17/21] Add copyright statement --- .../workbench/parts/terminal/electron-browser/media/xterm.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css b/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css index 553b5348756a0..0e554c525bada 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css +++ b/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css @@ -1,3 +1,7 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ /** * xterm.js: xterm, in the browser * Copyright (c) 2014-2016, SourceLair Private Company (www.sourcelair.com (MIT License) From 379070d9ef847170e69b684c7bbbdb3b666b2081 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 10 Sep 2017 08:37:18 -0700 Subject: [PATCH 18/21] Tweak terminal selection defaults --- .../terminal/electron-browser/terminalColorRegistry.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts index 998e1d45daed8..d80978e14890e 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalColorRegistry.ts @@ -22,9 +22,9 @@ export const TERMINAL_FOREGROUND_COLOR = registerColor('terminal.foreground', { 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.')); export const TERMINAL_SELECTION_BACKGROUND_COLOR = registerColor('terminal.selectionBackground', { - light: '#00000080', - dark: '#FFFFFF80', - hc: '#FFF' + light: '#00000040', + dark: '#FFFFFF40', + hc: '#FFFFFF80' }, nls.localize('terminal.selectionBackground', 'The selection background color of the terminal.')); const ansiColorMap = { From ab8ebea781a24fb1b21e624e1426ccf89c37e58f Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 10 Sep 2017 10:49:52 -0700 Subject: [PATCH 19/21] Uplevel xterm.js --- npm-shrinkwrap.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 57aa479e86ca8..384c203f57c89 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -574,7 +574,7 @@ "xterm": { "version": "3.0.0", "from": "Tyriar/xterm.js#vscode-release/1.17", - "resolved": "git+https://github.com/Tyriar/xterm.js.git#8eb813f30bae01dbfd6deffe856de3a7ac4556f9" + "resolved": "git+https://github.com/Tyriar/xterm.js.git#fb7de4e8d90d20a94d3847ea857b5394a09bd771" }, "yauzl": { "version": "2.8.0", From 27c1918eb7d89fa8405a37c2808db1f2adad26e4 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 10 Sep 2017 10:52:53 -0700 Subject: [PATCH 20/21] Fix font/line height size issues --- .../electron-browser/media/terminal.css | 57 ++++++++----------- .../electron-browser/terminalInstance.ts | 15 +++-- 2 files changed, 32 insertions(+), 40 deletions(-) diff --git a/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css b/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css index cb403433feac7..1d9961ab042d6 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css +++ b/src/vs/workbench/parts/terminal/electron-browser/media/terminal.css @@ -70,40 +70,6 @@ text-decoration: underline; } -/* Terminal actions */ - -/* Light theme */ -.monaco-workbench .terminal-action.kill { background: url('kill.svg') center center no-repeat; } -.monaco-workbench .terminal-action.new { background: url('new.svg') center center no-repeat; } -/* Dark theme / HC theme */ -.vs-dark .monaco-workbench .terminal-action.kill, .hc-black .monaco-workbench .terminal-action.kill { background: url('kill-inverse.svg') center center no-repeat; } -.vs-dark .monaco-workbench .terminal-action.new, .hc-black .monaco-workbench .terminal-action.new { background: url('new-inverse.svg') center center no-repeat; } - -.vs-dark .monaco-workbench.mac .panel.integrated-terminal .xterm-rows, -.hc-black .monaco-workbench.mac .panel.integrated-terminal .xterm-rows { - cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAz0lEQVRIx2NgYGBY/R8I/vx5eelX3n82IJ9FxGf6tksvf/8FiTMQAcAGQMDvSwu09abffY8QYSAScNk45G198eX//yev73/4///701eh//kZSARckrNBRvz//+8+6ZohwCzjGNjdgQxkAg7B9WADeBjIBqtJCbhRA0YNoIkBSNmaPEMoNmA0FkYNoFKhapJ6FGyAH3nauaSmPfwI0v/3OukVi0CIZ+F25KrtYcx/CTIy0e+rC7R1Z4KMICVTQQ14feVXIbR695u14+Ir4gwAAD49E54wc1kWAAAAAElFTkSuQmCC') 2x) 5 8, text; -} - -.monaco-workbench .quick-open-terminal-configure { - background-image: url('configure.svg'); -} - -.vs-dark .monaco-workbench .quick-open-terminal-configure, -.hc-black .monaco-workbench .quick-open-terminal-configure { - background-image: url('configure-inverse.svg'); -} - - - - - - - - - -/* Previously in xterm.css*/ - - .monaco-workbench .panel.integrated-terminal .xterm { position: relative; height: 100%; @@ -136,3 +102,26 @@ /* Override the general vscode style applies `opacity:1!important` to textareas */ opacity: 0 !important; } + +/* Terminal actions */ + +/* Light theme */ +.monaco-workbench .terminal-action.kill { background: url('kill.svg') center center no-repeat; } +.monaco-workbench .terminal-action.new { background: url('new.svg') center center no-repeat; } +/* Dark theme / HC theme */ +.vs-dark .monaco-workbench .terminal-action.kill, .hc-black .monaco-workbench .terminal-action.kill { background: url('kill-inverse.svg') center center no-repeat; } +.vs-dark .monaco-workbench .terminal-action.new, .hc-black .monaco-workbench .terminal-action.new { background: url('new-inverse.svg') center center no-repeat; } + +.vs-dark .monaco-workbench.mac .panel.integrated-terminal .xterm-rows, +.hc-black .monaco-workbench.mac .panel.integrated-terminal .xterm-rows { + cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAAz0lEQVRIx2NgYGBY/R8I/vx5eelX3n82IJ9FxGf6tksvf/8FiTMQAcAGQMDvSwu09abffY8QYSAScNk45G198eX//yev73/4///701eh//kZSARckrNBRvz//+8+6ZohwCzjGNjdgQxkAg7B9WADeBjIBqtJCbhRA0YNoIkBSNmaPEMoNmA0FkYNoFKhapJ6FGyAH3nauaSmPfwI0v/3OukVi0CIZ+F25KrtYcx/CTIy0e+rC7R1Z4KMICVTQQ14feVXIbR695u14+Ir4gwAAD49E54wc1kWAAAAAElFTkSuQmCC') 2x) 5 8, text; +} + +.monaco-workbench .quick-open-terminal-configure { + background-image: url('configure.svg'); +} + +.vs-dark .monaco-workbench .quick-open-terminal-configure, +.hc-black .monaco-workbench .quick-open-terminal-configure { + background-image: url('configure-inverse.svg'); +} diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts index 6f6fe966242f9..e6988cf7a3516 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts @@ -886,13 +886,16 @@ export class TerminalInstance implements ITerminalInstance { return; } if (this._xterm) { - // TODO: Support lineHeight - // TODO: Support lineHeight, font* changes - // TODO: Only do this when there's a change const font = this._configHelper.getFont(); - this._xterm.setOption('lineHeight', font.lineHeight); - this._xterm.setOption('fontSize', font.fontSize); - this._xterm.setOption('fontFamily', font.fontFamily); + 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'; From 02c75d263d8703e992f58476cdb62caf12213634 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 10 Sep 2017 12:02:24 -0700 Subject: [PATCH 21/21] Remove enableBold and fontLigratures terminal settings --- .../parts/terminal/common/terminal.ts | 4 ++-- .../electron-browser/terminal.contribution.ts | 21 ++++++++++--------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/vs/workbench/parts/terminal/common/terminal.ts b/src/vs/workbench/parts/terminal/common/terminal.ts index a583b2734886c..d2d34c1b546d4 100644 --- a/src/vs/workbench/parts/terminal/common/terminal.ts +++ b/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; diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminal.contribution.ts b/src/vs/workbench/parts/terminal/electron-browser/terminal.contribution.ts index 2da1024e36e16..c8f4b14c44a2b 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminal.contribution.ts +++ b/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', @@ -135,11 +136,11 @@ configurationRegistry.registerConfiguration({ 'type': 'number', '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.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',