Skip to content

Commit

Permalink
Update xterm and make term find styles consistent with editor
Browse files Browse the repository at this point in the history 
- A bunch of changes to xterm.js including bg/fg decoration overrides
- Tweak find colors to use background instead of border, align with the editor
- Change high contrast themes to also align, including selection bg
- Clear the find active result decoration on blur and when the selection changes

Fixes #147013
Fixes #145751
  • Loading branch information
@Tyriar
Tyriar committed May 13, 2022
1 parent 62bd3d7 commit 99e15df
Show file tree
Hide file tree
Showing 11 changed files with 130 additions and 83 deletions.
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,12 @@
"vscode-proxy-agent": "^0.12.0",
"vscode-regexpp": "^3.1.0",
"vscode-textmate": "7.0.1",
"xterm": "4.19.0-beta.29",
"xterm-addon-search": "0.9.0-beta.26",
"xterm": "4.19.0-beta.41",
"xterm-addon-search": "0.9.0-beta.35",
"xterm-addon-serialize": "0.7.0-beta.12",
"xterm-addon-unicode11": "0.4.0-beta.3",
"xterm-addon-webgl": "0.12.0-beta.29",
"xterm-headless": "4.19.0-beta.29",
"xterm-addon-webgl": "0.12.0-beta.33",
"xterm-headless": "4.19.0-beta.41",
"yauzl": "^2.9.2",
"yazl": "^2.4.3"
},
Expand Down
8 changes: 4 additions & 4 deletions remote/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
"vscode-proxy-agent": "^0.12.0",
"vscode-regexpp": "^3.1.0",
"vscode-textmate": "7.0.1",
"xterm": "4.19.0-beta.29",
"xterm-addon-search": "0.9.0-beta.26",
"xterm": "4.19.0-beta.41",
"xterm-addon-search": "0.9.0-beta.35",
"xterm-addon-serialize": "0.7.0-beta.12",
"xterm-addon-unicode11": "0.4.0-beta.3",
"xterm-addon-webgl": "0.12.0-beta.29",
"xterm-headless": "4.19.0-beta.29",
"xterm-addon-webgl": "0.12.0-beta.33",
"xterm-headless": "4.19.0-beta.41",
"yauzl": "^2.9.2",
"yazl": "^2.4.3"
},
Expand Down
6 changes: 3 additions & 3 deletions remote/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
"tas-client-umd": "0.1.5",
"vscode-oniguruma": "1.6.1",
"vscode-textmate": "7.0.1",
"xterm": "4.19.0-beta.29",
"xterm-addon-search": "0.9.0-beta.26",
"xterm": "4.19.0-beta.41",
"xterm-addon-search": "0.9.0-beta.35",
"xterm-addon-unicode11": "0.4.0-beta.3",
"xterm-addon-webgl": "0.12.0-beta.29"
"xterm-addon-webgl": "0.12.0-beta.33"
}
}
24 changes: 12 additions & 12 deletions remote/web/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,22 +113,22 @@ vscode-textmate@7.0.1:
resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-7.0.1.tgz#8118a32b02735dccd14f893b495fa5389ad7de79"
integrity sha512-zQ5U/nuXAAMsh691FtV0wPz89nSkHbs+IQV8FDk+wew9BlSDhf4UmWGlWJfTR2Ti6xZv87Tj5fENzKf6Qk7aLw==

xterm-addon-search@0.9.0-beta.26:
version "0.9.0-beta.26"
resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.9.0-beta.26.tgz#24259b892ce5cd8eff207e4e334dc06776356fe5"
integrity sha512-gOz6v9do7yBDP8e4zdpnDIi3DsyPdLA10lsJDucfMN4nJFM2PjJAsu1fbqq1pXdcu14fHIYzbsp9wIMiW524zQ==
xterm-addon-search@0.9.0-beta.35:
version "0.9.0-beta.35"
resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.9.0-beta.35.tgz#524ee3be855c1e8db234c6795bdb44bb6baff8fd"
integrity sha512-hTDqAhqlhBvz3dtdK1Tg5Al2U3HquSHpV1xCX+bbOmbgprAxUrSQxslUPDD69CTazzTyif3L19M08hccRyr1Ug==

xterm-addon-unicode11@0.4.0-beta.3:
version "0.4.0-beta.3"
resolved "https://registry.yarnpkg.com/xterm-addon-unicode11/-/xterm-addon-unicode11-0.4.0-beta.3.tgz#f350184155fafd5ad0d6fbf31d13e6ca7dea1efa"
integrity sha512-FryZAVwbUjKTmwXnm1trch/2XO60F5JsDvOkZhzobV1hm10sFLVuZpFyHXiUx7TFeeFsvNP+S77LAtWoeT5z+Q==

xterm-addon-webgl@0.12.0-beta.29:
version "0.12.0-beta.29"
resolved "https://registry.yarnpkg.com/xterm-addon-webgl/-/xterm-addon-webgl-0.12.0-beta.29.tgz#7a508595c4521d14d7ed4315a121f9e3f230a0f0"
integrity sha512-NcZBsD0ar3ZpQX070hDIsyEBl/StRMNu6U+9crNpiD2rQVfkM1vcWkOv31Zlj3eu6/f8z5aStyZLRMCGFwiRbA==
xterm-addon-webgl@0.12.0-beta.33:
version "0.12.0-beta.33"
resolved "https://registry.yarnpkg.com/xterm-addon-webgl/-/xterm-addon-webgl-0.12.0-beta.33.tgz#cb539db9e41f06087b692f0f42491a73bc4bd013"
integrity sha512-seOm06exR36U0/EvR/CUNGuy99RAndoyWEdXg6S16rgEZ4G2Yj9iov/QdCtc4gwq9hFzVETFPlDW+Ge8xeHIzA==

xterm@4.19.0-beta.29:
version "4.19.0-beta.29"
resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0-beta.29.tgz#f0727ddbfe54f3c34a58e57ecbfcbb4d03a30386"
integrity sha512-ZlgrxgotcCB06W0Pk5ClHDkIDE62s1LebgehEsmaksJJtoOQJIxCVu1Kop4EnnPQzZxFaG7uYumfwe0tfd6uWA==
xterm@4.19.0-beta.41:
version "4.19.0-beta.41"
resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0-beta.41.tgz#acb6009028898e9cfac41d4aa2865f81f6f56c5f"
integrity sha512-WY1NuxF/yUVN3l0TgzQGjrGM26eOu5g0Dbfam8GCkgdK5yrsgPF0xwM7UEj8sDjp5FbxEkSm//X86IIsgzqqFw==
32 changes: 16 additions & 16 deletions remote/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -914,10 +914,10 @@ wrappy@1:
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=

xterm-addon-search@0.9.0-beta.26:
version "0.9.0-beta.26"
resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.9.0-beta.26.tgz#24259b892ce5cd8eff207e4e334dc06776356fe5"
integrity sha512-gOz6v9do7yBDP8e4zdpnDIi3DsyPdLA10lsJDucfMN4nJFM2PjJAsu1fbqq1pXdcu14fHIYzbsp9wIMiW524zQ==
xterm-addon-search@0.9.0-beta.35:
version "0.9.0-beta.35"
resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.9.0-beta.35.tgz#524ee3be855c1e8db234c6795bdb44bb6baff8fd"
integrity sha512-hTDqAhqlhBvz3dtdK1Tg5Al2U3HquSHpV1xCX+bbOmbgprAxUrSQxslUPDD69CTazzTyif3L19M08hccRyr1Ug==

xterm-addon-serialize@0.7.0-beta.12:
version "0.7.0-beta.12"
Expand All @@ -929,20 +929,20 @@ xterm-addon-unicode11@0.4.0-beta.3:
resolved "https://registry.yarnpkg.com/xterm-addon-unicode11/-/xterm-addon-unicode11-0.4.0-beta.3.tgz#f350184155fafd5ad0d6fbf31d13e6ca7dea1efa"
integrity sha512-FryZAVwbUjKTmwXnm1trch/2XO60F5JsDvOkZhzobV1hm10sFLVuZpFyHXiUx7TFeeFsvNP+S77LAtWoeT5z+Q==

xterm-addon-webgl@0.12.0-beta.29:
version "0.12.0-beta.29"
resolved "https://registry.yarnpkg.com/xterm-addon-webgl/-/xterm-addon-webgl-0.12.0-beta.29.tgz#7a508595c4521d14d7ed4315a121f9e3f230a0f0"
integrity sha512-NcZBsD0ar3ZpQX070hDIsyEBl/StRMNu6U+9crNpiD2rQVfkM1vcWkOv31Zlj3eu6/f8z5aStyZLRMCGFwiRbA==
xterm-addon-webgl@0.12.0-beta.33:
version "0.12.0-beta.33"
resolved "https://registry.yarnpkg.com/xterm-addon-webgl/-/xterm-addon-webgl-0.12.0-beta.33.tgz#cb539db9e41f06087b692f0f42491a73bc4bd013"
integrity sha512-seOm06exR36U0/EvR/CUNGuy99RAndoyWEdXg6S16rgEZ4G2Yj9iov/QdCtc4gwq9hFzVETFPlDW+Ge8xeHIzA==

xterm-headless@4.19.0-beta.29:
version "4.19.0-beta.29"
resolved "https://registry.yarnpkg.com/xterm-headless/-/xterm-headless-4.19.0-beta.29.tgz#9151a1506ddcad3402ce456bbbc6af0828952742"
integrity sha512-wAPyWOp2whY9kT9NL7PMQtvR/A9UO1A4bhP0nOOhZxg9GDeCy5EvsuDn2x+dtsh4jK/L2SZxM6SPHLpNoZpbTQ==
xterm-headless@4.19.0-beta.41:
version "4.19.0-beta.41"
resolved "https://registry.yarnpkg.com/xterm-headless/-/xterm-headless-4.19.0-beta.41.tgz#f495ff173c7952aafa0c785acf15f20942c6fdc7"
integrity sha512-j09IFsM4tBSpjgY5OQSB1llojwEGyFFxgD36MYXZtopmB8p9+0l5GFq5hYfJojGfHCNaB/RwWAexGUxBK2ABRA==

xterm@4.19.0-beta.29:
version "4.19.0-beta.29"
resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0-beta.29.tgz#f0727ddbfe54f3c34a58e57ecbfcbb4d03a30386"
integrity sha512-ZlgrxgotcCB06W0Pk5ClHDkIDE62s1LebgehEsmaksJJtoOQJIxCVu1Kop4EnnPQzZxFaG7uYumfwe0tfd6uWA==
xterm@4.19.0-beta.41:
version "4.19.0-beta.41"
resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0-beta.41.tgz#acb6009028898e9cfac41d4aa2865f81f6f56c5f"
integrity sha512-WY1NuxF/yUVN3l0TgzQGjrGM26eOu5g0Dbfam8GCkgdK5yrsgPF0xwM7UEj8sDjp5FbxEkSm//X86IIsgzqqFw==

yallist@^4.0.0:
version "4.0.0"
Expand Down
6 changes: 6 additions & 0 deletions src/vs/workbench/contrib/terminal/browser/media/terminal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -458,3 +458,9 @@
.hc-light .xterm-find-result-decoration {
outline-style: dotted !important;
}

.hc-black .xterm-find-active-result-decoration,
.hc-light .xterm-find-active-result-decoration {
outline-style: solid !important;
outline-width: 2px !important;
}
7 changes: 7 additions & 0 deletions src/vs/workbench/contrib/terminal/browser/terminal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -862,6 +862,8 @@ export interface IXtermTerminal {
*/
readonly shellIntegration: IShellIntegration;

readonly onDidChangeSelection: Event<void>;

/**
* The position of the terminal.
*/
Expand Down Expand Up @@ -906,6 +908,11 @@ export interface IXtermTerminal {
* Clears the search result decorations
*/
clearSearchDecorations(): void;

/**
* Clears the active search result decorations
*/
clearActiveSearchDecoration(): void;
}

export interface IRequestAddInstanceToGroupEvent {
Expand Down
45 changes: 33 additions & 12 deletions src/vs/workbench/contrib/terminal/browser/terminalFindWidget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import { SimpleFindWidget } from 'vs/workbench/contrib/codeEditor/browser/find/s
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
import { FindReplaceState } from 'vs/editor/contrib/find/browser/findState';
import { ITerminalGroupService, ITerminalService } from 'vs/workbench/contrib/terminal/browser/terminal';
import { ITerminalGroupService, ITerminalService, IXtermTerminal } from 'vs/workbench/contrib/terminal/browser/terminal';
import { TerminalContextKeys } from 'vs/workbench/contrib/terminal/common/terminalContextKey';
import { TerminalLocation } from 'vs/platform/terminal/common/terminal';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { Event } from 'vs/base/common/event';
import { ISearchOptions } from 'xterm-addon-search';

export class TerminalFindWidget extends SimpleFindWidget {
protected _findInputFocused: IContextKey<boolean>;
Expand Down Expand Up @@ -50,23 +52,24 @@ export class TerminalFindWidget extends SimpleFindWidget {
}

find(previous: boolean, update?: boolean) {
const instance = this._terminalService.activeInstance;
if (!instance) {
const xterm = this._terminalService.activeInstance?.xterm;
if (!xterm) {
return;
}
if (previous) {
instance.xterm?.findPrevious(this.inputValue, { regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue(), incremental: update });
this._findPreviousWithEvent(xterm, this.inputValue, { regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue(), incremental: update });
} else {
instance.xterm?.findNext(this.inputValue, { regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue() });
this._findNextWithEvent(xterm, this.inputValue, { regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue() });
}
}

override reveal(initialInput?: string): void {
const instance = this._terminalService.activeInstance;
if (instance && this.inputValue && this.inputValue !== '') {
const xterm = this._terminalService.activeInstance?.xterm;
if (xterm && this.inputValue && this.inputValue !== '') {
// trigger highlight all matches
instance.xterm?.findPrevious(this.inputValue, { incremental: true, regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue() }).then(foundMatch => {
this._findPreviousWithEvent(xterm, this.inputValue, { incremental: true, regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue() }).then(foundMatch => {
this.updateButtons(foundMatch);
this._register(Event.once(xterm.onDidChangeSelection)(() => xterm.clearActiveSearchDecoration()));
});
}
this.updateButtons(false);
Expand Down Expand Up @@ -109,9 +112,9 @@ export class TerminalFindWidget extends SimpleFindWidget {

protected _onInputChanged() {
// Ignore input changes for now
const instance = this._terminalService.activeInstance;
if (instance?.xterm) {
instance.xterm.findPrevious(this.inputValue, { regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue(), incremental: true }).then(foundMatch => {
const xterm = this._terminalService.activeInstance?.xterm;
if (xterm) {
this._findPreviousWithEvent(xterm, this.inputValue, { regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue(), incremental: true }).then(foundMatch => {
this.updateButtons(foundMatch);
});
}
Expand All @@ -130,6 +133,7 @@ export class TerminalFindWidget extends SimpleFindWidget {
const instance = this._terminalService.activeInstance;
if (instance) {
instance.notifyFindWidgetFocusChanged(false);
instance.xterm?.clearActiveSearchDecoration();
}
this._findWidgetFocused.reset();
}
Expand All @@ -148,7 +152,24 @@ export class TerminalFindWidget extends SimpleFindWidget {
if (instance.hasSelection()) {
instance.clearSelection();
}
instance.xterm?.findPrevious(this.inputValue, { regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue() });
const xterm = instance.xterm;
if (xterm) {
this._findPreviousWithEvent(xterm, this.inputValue, { regex: this._getRegexValue(), wholeWord: this._getWholeWordValue(), caseSensitive: this._getCaseSensitiveValue() });
}
}
}

private async _findNextWithEvent(xterm: IXtermTerminal, term: string, options: ISearchOptions): Promise<boolean> {
return xterm.findNext(term, options).then(foundMatch => {
this._register(Event.once(xterm.onDidChangeSelection)(() => xterm.clearActiveSearchDecoration()));
return foundMatch;
});
}

private async _findPreviousWithEvent(xterm: IXtermTerminal, term: string, options: ISearchOptions): Promise<boolean> {
return xterm.findPrevious(term, options).then(foundMatch => {
this._register(Event.once(xterm.onDidChangeSelection)(() => xterm.clearActiveSearchDecoration()));
return foundMatch;
});
}
}
17 changes: 14 additions & 3 deletions src/vs/workbench/contrib/terminal/browser/xterm/xtermTerminal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,10 @@ export class XtermTerminal extends DisposableStore implements IXtermTerminal {

private readonly _onDidRequestRunCommand = new Emitter<{ command: ITerminalCommand; copyAsHtml?: boolean }>();
readonly onDidRequestRunCommand = this._onDidRequestRunCommand.event;

private readonly _onDidChangeFindResults = new Emitter<{ resultIndex: number; resultCount: number } | undefined>();
readonly onDidChangeFindResults = this._onDidChangeFindResults.event;
private readonly _onDidChangeSelection = new Emitter<void>();
readonly onDidChangeSelection = this._onDidChangeSelection.event;

get commandTracker(): ICommandTracker { return this._commandNavigationAddon; }
get shellIntegration(): IShellIntegration { return this._shellIntegrationAddon; }
Expand Down Expand Up @@ -165,6 +166,9 @@ export class XtermTerminal extends DisposableStore implements IXtermTerminal {
}
}));

// Refire events
this.add(this.raw.onSelectionChange(() => this._onDidChangeSelection.fire()));

// Load addons
this._updateUnicodeVersion();
this._commandNavigationAddon = this._instantiationService.createInstance(CommandNavigationAddon, _capabilities);
Expand All @@ -173,6 +177,7 @@ export class XtermTerminal extends DisposableStore implements IXtermTerminal {
this.raw.loadAddon(this._shellIntegrationAddon);
this._updateDecorationAddon();
}

private _createDecorationAddon(): void {
this._decorationAddon = this._instantiationService.createInstance(DecorationAddon, this._capabilities);
this._decorationAddon.onDidRequestRunCommand(e => this._onDidRequestRunCommand.fire(e));
Expand Down Expand Up @@ -287,17 +292,19 @@ export class XtermTerminal extends DisposableStore implements IXtermTerminal {
// The mapping is as follows:
// - findMatch -> activeMatch
// - findMatchHighlight -> match
const terminalBackground = theme.getColor(TERMINAL_BACKGROUND_COLOR) || theme.getColor(PANEL_BACKGROUND);
const findMatchBackground = theme.getColor(TERMINAL_FIND_MATCH_BACKGROUND_COLOR);
const findMatchBorder = theme.getColor(TERMINAL_FIND_MATCH_BORDER_COLOR);
const findMatchOverviewRuler = theme.getColor(TERMINAL_OVERVIEW_RULER_CURSOR_FOREGROUND_COLOR);
const findMatchHighlightBackground = theme.getColor(TERMINAL_FIND_MATCH_HIGHLIGHT_BACKGROUND_COLOR);
const findMatchHighlightBorder = theme.getColor(TERMINAL_FIND_MATCH_HIGHLIGHT_BORDER_COLOR);
const findMatchHighlightOverviewRuler = theme.getColor(TERMINAL_OVERVIEW_RULER_FIND_MATCH_FOREGROUND_COLOR);
searchOptions.decorations = {
activeMatchBackground: findMatchBackground?.toString() || 'transparent',
activeMatchBackground: findMatchBackground?.toString(),
activeMatchBorder: findMatchBorder?.toString() || 'transparent',
activeMatchColorOverviewRuler: findMatchOverviewRuler?.toString() || 'transparent',
matchBackground: findMatchHighlightBackground?.toString() || 'transparent',
// decoration bgs don't support the alpha channel so blend it with the regular bg
matchBackground: terminalBackground ? findMatchHighlightBackground?.blend(terminalBackground).toString() : undefined,
matchBorder: findMatchHighlightBorder?.toString() || 'transparent',
matchOverviewRuler: findMatchHighlightOverviewRuler?.toString() || 'transparent'
};
Expand All @@ -321,6 +328,10 @@ export class XtermTerminal extends DisposableStore implements IXtermTerminal {
this._searchAddon?.clearDecorations();
}

clearActiveSearchDecoration(): void {
this._searchAddon?.clearActiveDecoration();
}

getFont(): ITerminalFont {
return this._configHelper.getFont(this._core);
}
Expand Down
Loading

0 comments on commit 99e15df

Please sign in to comment.