From 23ed3327ce1f12555d50606c647e5fa17d3d8ddf Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Wed, 23 Mar 2022 15:04:13 -0700 Subject: [PATCH 1/2] Allow configuring search overview ruler and border color Part of microsoft/vscode#145744 Part of microsoft/vscode#145742 Part of microsoft/vscode#145746 --- addons/xterm-addon-search/src/SearchAddon.ts | 46 +++++++++++++------ .../typings/xterm-addon-search.d.ts | 28 +++++++++-- demo/client.ts | 9 +++- 3 files changed, 63 insertions(+), 20 deletions(-) diff --git a/addons/xterm-addon-search/src/SearchAddon.ts b/addons/xterm-addon-search/src/SearchAddon.ts index 0f677072..8ce92bf2 100644 --- a/addons/xterm-addon-search/src/SearchAddon.ts +++ b/addons/xterm-addon-search/src/SearchAddon.ts @@ -14,8 +14,12 @@ export interface ISearchOptions { } interface ISearchDecorationOptions { - matchColor: string; - selectedColor: string; + matchBackground?: string; + matchBorder?: string; + matchOverviewRuler: string; + selectedBackground?: string; + selectedBorder?: string; + selectedColorOverviewRuler: string; } export interface ISearchPosition { @@ -601,11 +605,16 @@ export class SearchAddon implements ITerminalAddon { return false; } terminal.select(result.col, result.row, result.size); - if (decorations?.selectedColor) { + if (decorations?.selectedColorOverviewRuler) { const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row); if (marker) { - this._selectedDecoration = terminal.registerDecoration({ marker, overviewRulerOptions: { color: decorations.selectedColor } }); - this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.selectedColor, result)); + this._selectedDecoration = terminal.registerDecoration({ + marker, + overviewRulerOptions: { + color: decorations.selectedColorOverviewRuler + } + }); + this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.selectedBackground, decorations.selectedBorder, result)); this._selectedDecoration?.onDispose(() => marker.dispose()); } } @@ -622,11 +631,12 @@ export class SearchAddon implements ITerminalAddon { /** * Applies styles to the decoration when it is rendered * @param element the decoration's element - * @param color the color to apply + * @param backgroundColor the background color to apply + * @param borderColor the border color to apply * @param result the search result associated with the decoration * @returns */ - private _applyStyles(element: HTMLElement, color: string, result: ISearchResult): void { + private _applyStyles(element: HTMLElement, backgroundColor: string | undefined, borderColor: string | undefined, result: ISearchResult): void { if (element.clientWidth <= 0) { return; } @@ -634,8 +644,12 @@ export class SearchAddon implements ITerminalAddon { element.classList.add('xterm-find-result-decoration'); element.style.left = `${element.clientWidth * result.col}px`; element.style.width = `${element.clientWidth * result.term.length}px`; - element.style.backgroundColor = color; - element.style.opacity = '0.6'; + if (backgroundColor) { + element.style.backgroundColor = backgroundColor; + } + if (borderColor) { + element.style.outline = `1px solid ${borderColor}`; + } } } @@ -648,14 +662,16 @@ export class SearchAddon implements ITerminalAddon { private _createResultDecoration(result: ISearchResult, decorations: ISearchDecorationOptions): IDecoration | undefined { const terminal = this._terminal!; const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row); - if (!marker || !decorations?.matchColor) { + if (!marker || !decorations?.matchOverviewRuler) { return undefined; } - const findResultDecoration = terminal.registerDecoration( - { marker, - overviewRulerOptions: this._resultDecorations.get(marker.line) && !this._dataChanged ? undefined : { color: decorations.matchColor, position: 'center' } - }); - findResultDecoration?.onRender((e) => this._applyStyles(e, decorations.matchColor, result)); + const findResultDecoration = terminal.registerDecoration({ + marker, + overviewRulerOptions: this._resultDecorations.get(marker.line) && !this._dataChanged ? undefined : { + color: decorations.matchOverviewRuler, position: 'center' + } + }); + findResultDecoration?.onRender((e) => this._applyStyles(e, decorations.matchBackground, decorations.matchBorder, result)); findResultDecoration?.onDispose(() => marker.dispose()); return findResultDecoration; } diff --git a/addons/xterm-addon-search/typings/xterm-addon-search.d.ts b/addons/xterm-addon-search/typings/xterm-addon-search.d.ts index 67ed2985..ab5e9321 100644 --- a/addons/xterm-addon-search/typings/xterm-addon-search.d.ts +++ b/addons/xterm-addon-search/typings/xterm-addon-search.d.ts @@ -45,14 +45,34 @@ declare module 'xterm-addon-search' { */ interface ISearchDecorationOptions { /** - * The color of a match. + * The background color of a match. */ - matchColor: string; + matchBackground?: string; /** - * The color for the currently selected match. + * The border color of a match */ - selectedColor: string; + matchBorder?: string; + + /** + * The overview ruler color of a match. + */ + matchOverviewRuler: string; + + /** + * The background color for the currently selected match. + */ + selectedBackground?: string; + + /** + * The border color of the currently selected match. + */ + selectedBorder?: string; + + /** + * The overview ruler color of the currently selected match. + */ + selectedColorOverviewRuler: string; } /** diff --git a/demo/client.ts b/demo/client.ts index 830a44a0..5c669db3 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -109,7 +109,14 @@ function getSearchOptions(e: KeyboardEvent): ISearchOptions { wholeWord: (document.getElementById('whole-word') as HTMLInputElement).checked, caseSensitive: (document.getElementById('case-sensitive') as HTMLInputElement).checked, incremental: e.key !== `Enter`, - decorations: (document.getElementById('highlight-all-matches') as HTMLInputElement).checked ? { matchColor: '#555753', selectedColor: '#ef2929' } : undefined + decorations: (document.getElementById('highlight-all-matches') as HTMLInputElement).checked ? { + matchBackground: '#55575380', + matchBorder: '#555753', + matchOverviewRuler: '#555753', + selectedBackground: '#ef292980', + selectedBorder: '#ef2929', + selectedColorOverviewRuler: '#ef2929' + } : undefined }; } From b55c7e342ae3283364f34b71701b102df1841f49 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Wed, 23 Mar 2022 15:09:35 -0700 Subject: [PATCH 2/2] Improve setting names --- addons/xterm-addon-search/src/SearchAddon.ts | 12 ++++++------ .../typings/xterm-addon-search.d.ts | 12 ++++++------ demo/client.ts | 6 +++--- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/addons/xterm-addon-search/src/SearchAddon.ts b/addons/xterm-addon-search/src/SearchAddon.ts index 8ce92bf2..d8b5a17e 100644 --- a/addons/xterm-addon-search/src/SearchAddon.ts +++ b/addons/xterm-addon-search/src/SearchAddon.ts @@ -17,9 +17,9 @@ interface ISearchDecorationOptions { matchBackground?: string; matchBorder?: string; matchOverviewRuler: string; - selectedBackground?: string; - selectedBorder?: string; - selectedColorOverviewRuler: string; + activeMatchBackground?: string; + activeMatchBorder?: string; + activeMatchColorOverviewRuler: string; } export interface ISearchPosition { @@ -605,16 +605,16 @@ export class SearchAddon implements ITerminalAddon { return false; } terminal.select(result.col, result.row, result.size); - if (decorations?.selectedColorOverviewRuler) { + if (decorations?.activeMatchColorOverviewRuler) { const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row); if (marker) { this._selectedDecoration = terminal.registerDecoration({ marker, overviewRulerOptions: { - color: decorations.selectedColorOverviewRuler + color: decorations.activeMatchColorOverviewRuler } }); - this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.selectedBackground, decorations.selectedBorder, result)); + this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.activeMatchBackground, decorations.activeMatchBorder, result)); this._selectedDecoration?.onDispose(() => marker.dispose()); } } diff --git a/addons/xterm-addon-search/typings/xterm-addon-search.d.ts b/addons/xterm-addon-search/typings/xterm-addon-search.d.ts index ab5e9321..aedb6af9 100644 --- a/addons/xterm-addon-search/typings/xterm-addon-search.d.ts +++ b/addons/xterm-addon-search/typings/xterm-addon-search.d.ts @@ -60,19 +60,19 @@ declare module 'xterm-addon-search' { matchOverviewRuler: string; /** - * The background color for the currently selected match. + * The background color for the currently active match. */ - selectedBackground?: string; + activeMatchBackground?: string; /** - * The border color of the currently selected match. + * The border color of the currently active match. */ - selectedBorder?: string; + activeMatchBorder?: string; /** - * The overview ruler color of the currently selected match. + * The overview ruler color of the currently active match. */ - selectedColorOverviewRuler: string; + activeMatchColorOverviewRuler: string; } /** diff --git a/demo/client.ts b/demo/client.ts index 5c669db3..55ff8d62 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -113,9 +113,9 @@ function getSearchOptions(e: KeyboardEvent): ISearchOptions { matchBackground: '#55575380', matchBorder: '#555753', matchOverviewRuler: '#555753', - selectedBackground: '#ef292980', - selectedBorder: '#ef2929', - selectedColorOverviewRuler: '#ef2929' + activeMatchBackground: '#ef292980', + activeMatchBorder: '#ef2929', + activeMatchColorOverviewRuler: '#ef2929' } : undefined }; }