From dea0e91074fea2f421120429d51bb363211827e5 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Fri, 9 Jun 2017 16:11:02 -0700 Subject: [PATCH] Use selection.background for the terminal The new selection model in xterm.js doesn't allow inverting colors right now so piggyback on selection.background. Ideally the terminal would have its own selection key since it has a terminal.background, but this is hopefully just temporary until selection color inverting is done upstream. --- src/vs/platform/theme/common/colorRegistry.ts | 2 +- .../terminal/electron-browser/media/xterm.css | 19 +------------------ .../electron-browser/terminalPanel.ts | 8 +++++++- 3 files changed, 9 insertions(+), 20 deletions(-) diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index d790e964b0c..2cd9b78d5ec 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -137,7 +137,7 @@ export const focusBorder = registerColor('focusBorder', { dark: Color.fromHex('# export const contrastBorder = registerColor('contrastBorder', { light: null, dark: null, hc: '#6FC3DF' }, nls.localize('contrastBorder', "An extra border around elements to separate them from others for greater contrast.")); export const activeContrastBorder = registerColor('contrastActiveBorder', { light: null, dark: null, hc: focusBorder }, nls.localize('activeContrastBorder', "An extra border around active elements to separate them from others for greater contrast.")); -export const selectionBackground = registerColor('selection.background', { light: null, dark: null, hc: null }, nls.localize('selectionBackground', "The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor and the terminal.")); +export const selectionBackground = registerColor('selection.background', { light: null, dark: null, hc: null }, nls.localize('selectionBackground', "The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.")); // ------ text colors 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 e30500606de..fe96994dcc9 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css +++ b/src/vs/workbench/parts/terminal/electron-browser/media/xterm.css @@ -140,7 +140,7 @@ .monaco-workbench .panel.integrated-terminal .xterm .xterm-selection div { position: absolute; - background-color: #555; + opacity: 0.5; } .monaco-workbench .panel.integrated-terminal .xterm .xterm-bold { @@ -174,23 +174,6 @@ display: block; } -/* Base selection colors */ - -.monaco-workbench .panel.integrated-terminal .xterm ::selection { - color: #FFF; - background-color: rgba(51, 51, 51, 0.996); -} - -.vs-dark .monaco-workbench .panel.integrated-terminal .xterm ::selection { - color: #1e1e1e; - background-color: rgba(204, 204, 204, 0.996); -} - -.hc-black .monaco-workbench .panel.integrated-terminal .xterm ::selection { - color: #000; - background-color: rgba(255, 255, 255, 0.996); -} - /* Terminal colors 16-255 */ .monaco-workbench .panel.integrated-terminal .xterm .xterm-color-16 { diff --git a/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts b/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts index 1a7238730c1..dc7558d33e9 100644 --- a/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts +++ b/src/vs/workbench/parts/terminal/electron-browser/terminalPanel.ts @@ -16,7 +16,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 { ansiColorIdentifiers, TERMINAL_BACKGROUND_COLOR, TERMINAL_FOREGROUND_COLOR } from './terminalColorRegistry'; -import { ColorIdentifier } from 'vs/platform/theme/common/colorRegistry'; +import { ColorIdentifier, selectionBackground } from 'vs/platform/theme/common/colorRegistry'; import { KillTerminalAction, CreateNewTerminalAction, SwitchTerminalInstanceAction, SwitchTerminalInstanceActionItem, CopyTerminalSelectionAction, TerminalPasteAction, ClearTerminalAction } from 'vs/workbench/parts/terminal/electron-browser/terminalActions'; import { Panel } from 'vs/workbench/browser/panel'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; @@ -262,6 +262,12 @@ export class TerminalPanel extends Panel { `.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: ${fgColor}; }`; } + // Use selection.background as the terminal selection, this is temporary + // until proper color inverting is implemented to ensure contrast. + const selectionColor = theme.getColor(selectionBackground); + if (selectionColor) { + css += `.monaco-workbench .panel.integrated-terminal .xterm .xterm-selection div { background-color: ${selectionColor}; }`; + } this._themeStyleElement.innerHTML = css; } -- GitLab