diff --git a/addons/xterm-addon-search/src/SearchAddon.ts b/addons/xterm-addon-search/src/SearchAddon.ts index 3f71af29..a029fc24 100644 --- a/addons/xterm-addon-search/src/SearchAddon.ts +++ b/addons/xterm-addon-search/src/SearchAddon.ts @@ -3,9 +3,9 @@ * @license MIT */ -import { Terminal, IDisposable, ITerminalAddon, IBufferRange, IDecoration } from 'xterm'; +import { Terminal, IDisposable, ITerminalAddon, IDecoration } from 'xterm'; import { EventEmitter } from 'common/EventEmitter'; -import { Disposable, toDisposable } from 'common/Lifecycle'; +import { Disposable, toDisposable, disposeArray } from 'common/Lifecycle'; export interface ISearchOptions { regex?: boolean; @@ -30,6 +30,10 @@ export interface ISearchPosition { startRow: number; } +export interface ISearchAddonOptions { + highlightLimit: number; +} + export interface ISearchResult { term: string; col: number; @@ -48,15 +52,22 @@ type LineCacheEntry = [ lineOffsets: number[] ]; +interface IHighlight extends IDisposable { + decoration: IDecoration; + match: ISearchResult; +} + const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\\;:"\',./<>?'; const LINES_CACHE_TIME_TO_LIVE = 15 * 1000; // 15 secs +const DEFAULT_HIGHLIGHT_LIMIT = 1000; export class SearchAddon extends Disposable implements ITerminalAddon { private _terminal: Terminal | undefined; private _cachedSearchTerm: string | undefined; - private _selectedDecoration: IDecoration | undefined; - private _resultDecorations: Map | undefined; - private _searchResults: Map | undefined; + private _highlightedLines: Set = new Set(); + private _highlightDecorations: IHighlight[] = []; + private _selectedDecoration: IHighlight | undefined; + private _highlightLimit: number; private _onDataDisposable: IDisposable | undefined; private _onResizeDisposable: IDisposable | undefined; private _lastSearchOptions: ISearchOptions | undefined; @@ -71,11 +82,15 @@ export class SearchAddon extends Disposable implements ITerminalAddon { private _cursorMoveListener: IDisposable | undefined; private _resizeListener: IDisposable | undefined; - private _resultIndex: number | undefined; - - private readonly _onDidChangeResults = this.register(new EventEmitter<{ resultIndex: number, resultCount: number } | undefined>()); + private readonly _onDidChangeResults = this.register(new EventEmitter<{ resultIndex: number, resultCount: number }>()); public readonly onDidChangeResults = this._onDidChangeResults.event; + constructor(options?: Partial) { + super(); + + this._highlightLimit = options?.highlightLimit ?? DEFAULT_HIGHLIGHT_LIMIT; + } + public activate(terminal: Terminal): void { this._terminal = terminal; this._onDataDisposable = this.register(this._terminal.onWriteParsed(() => this._updateMatches())); @@ -93,24 +108,18 @@ export class SearchAddon extends Disposable implements ITerminalAddon { } if (this._cachedSearchTerm && this._lastSearchOptions?.decorations) { this._highlightTimeout = setTimeout(() => { - this.findPrevious(this._cachedSearchTerm!, { ...this._lastSearchOptions, incremental: true, noScroll: true }); - this._resultIndex = this._searchResults ? this._searchResults.size - 1 : -1; - this._onDidChangeResults.fire({ resultIndex: this._resultIndex, resultCount: this._searchResults?.size ?? -1 }); + const term = this._cachedSearchTerm; + this._cachedSearchTerm = undefined; + this.findPrevious(term!, { ...this._lastSearchOptions, incremental: true, noScroll: true }); }, 200); } } public clearDecorations(retainCachedSearchTerm?: boolean): void { - this._selectedDecoration?.dispose(); - this._searchResults?.clear(); - this._resultDecorations?.forEach(decorations => { - for (const d of decorations) { - d.dispose(); - } - }); - this._resultDecorations?.clear(); - this._searchResults = undefined; - this._resultDecorations = undefined; + this.clearActiveDecoration(); + disposeArray(this._highlightDecorations); + this._highlightDecorations = []; + this._highlightedLines.clear(); if (!retainCachedSearchTerm) { this._cachedSearchTerm = undefined; } @@ -134,11 +143,16 @@ export class SearchAddon extends Disposable implements ITerminalAddon { } this._lastSearchOptions = searchOptions; if (searchOptions?.decorations) { - if (this._resultIndex !== undefined || this._cachedSearchTerm === undefined || term !== this._cachedSearchTerm) { + if (this._cachedSearchTerm === undefined || term !== this._cachedSearchTerm) { this._highlightAllMatches(term, searchOptions); } } - return this._fireResults(term, this._findNextAndSelect(term, searchOptions), searchOptions); + + const found = this._findNextAndSelect(term, searchOptions); + this._fireResults(searchOptions); + this._cachedSearchTerm = term; + + return found; } private _highlightAllMatches(term: string, searchOptions: ISearchOptions): void { @@ -153,32 +167,30 @@ export class SearchAddon extends Disposable implements ITerminalAddon { // new search, clear out the old decorations this.clearDecorations(true); - this._searchResults = new Map(); - this._resultDecorations = new Map(); - const resultDecorations = this._resultDecorations; + + const searchResultsWithHighlight: ISearchResult[] = []; + let prevResult: ISearchResult | undefined = undefined; let result = this._find(term, 0, 0, searchOptions); - while (result && !this._searchResults.get(`${result.row}-${result.col}`)) { - this._searchResults.set(`${result.row}-${result.col}`, result); + while (result && (prevResult?.row !== result.row || prevResult?.col !== result.col)) { + if (searchResultsWithHighlight.length >= this._highlightLimit) { + break; + } + prevResult = result; + searchResultsWithHighlight.push(prevResult); result = this._find( term, - result.col + result.term.length >= this._terminal.cols ? result.row + 1 : result.row, - result.col + result.term.length >= this._terminal.cols ? 0 : result.col + 1, + prevResult.col + prevResult.term.length >= this._terminal.cols ? prevResult.row + 1 : prevResult.row, + prevResult.col + prevResult.term.length >= this._terminal.cols ? 0 : prevResult.col + 1, searchOptions ); - if (this._searchResults.size > 1000) { - this.clearDecorations(); - this._resultIndex = undefined; - return; + } + for (const match of searchResultsWithHighlight) { + const decoration = this._createResultDecoration(match, searchOptions.decorations!); + if (decoration) { + this._highlightedLines.add(decoration.marker.line); + this._highlightDecorations.push({ decoration, match, dispose() { decoration.dispose(); } }); } } - this._searchResults.forEach(result => { - const resultDecoration = this._createResultDecoration(result, searchOptions.decorations!); - if (resultDecoration) { - const decorationsForLine = resultDecorations.get(resultDecoration.marker.line) || []; - decorationsForLine.push(resultDecoration); - resultDecorations.set(resultDecoration.marker.line, decorationsForLine); - } - }); } private _find(term: string, startRow: number, startCol: number, searchOptions?: ISearchOptions): ISearchResult | undefined { @@ -223,26 +235,22 @@ export class SearchAddon extends Disposable implements ITerminalAddon { if (!this._terminal || !term || term.length === 0) { this._terminal?.clearSelection(); this.clearDecorations(); - this._cachedSearchTerm = undefined; - this._resultIndex = -1; return false; } - if (this._cachedSearchTerm !== term) { - this._resultIndex = undefined; - this._terminal.clearSelection(); - } + const prevSelectedPos = this._terminal.getSelectionPosition(); + this._terminal.clearSelection(); let startCol = 0; let startRow = 0; - let currentSelection: IBufferRange | undefined; - if (this._terminal.hasSelection()) { - const incremental = searchOptions ? searchOptions.incremental : false; - // Start from the selection end if there is a selection - // For incremental search, use existing row - currentSelection = this._terminal.getSelectionPosition()!; - startRow = incremental ? currentSelection.start.y : currentSelection.end.y; - startCol = incremental ? currentSelection.start.x : currentSelection.end.x; + if (prevSelectedPos) { + if (this._cachedSearchTerm === term) { + startCol = prevSelectedPos.end.x; + startRow = prevSelectedPos.end.y; + } else { + startCol = prevSelectedPos.start.x; + startRow = prevSelectedPos.start.y; + } } this._initLinesCache(); @@ -281,24 +289,12 @@ export class SearchAddon extends Disposable implements ITerminalAddon { } // If there is only one result, wrap back and return selection if it exists. - if (!result && currentSelection) { - searchPosition.startRow = currentSelection.start.y; + if (!result && prevSelectedPos) { + searchPosition.startRow = prevSelectedPos.start.y; searchPosition.startCol = 0; result = this._findInLine(term, searchPosition, searchOptions); } - if (this._searchResults) { - if (this._searchResults.size === 0) { - this._resultIndex = -1; - } else if (this._resultIndex === undefined) { - this._resultIndex = 0; - } else { - this._resultIndex++; - if (this._resultIndex >= this._searchResults.size) { - this._resultIndex = 0; - } - } - } // Set selection and scroll if a result was found return this._selectResult(result, searchOptions?.decorations, searchOptions?.noScroll); } @@ -315,75 +311,74 @@ export class SearchAddon extends Disposable implements ITerminalAddon { } this._lastSearchOptions = searchOptions; if (searchOptions?.decorations) { - if (this._resultIndex !== undefined || this._cachedSearchTerm === undefined || term !== this._cachedSearchTerm) { + if (this._cachedSearchTerm === undefined || term !== this._cachedSearchTerm) { this._highlightAllMatches(term, searchOptions); } } - return this._fireResults(term, this._findPreviousAndSelect(term, searchOptions), searchOptions); + + const found = this._findPreviousAndSelect(term, searchOptions); + this._fireResults(searchOptions); + this._cachedSearchTerm = term; + + return found; } - private _fireResults(term: string, found: boolean, searchOptions?: ISearchOptions): boolean { + private _fireResults(searchOptions?: ISearchOptions): void { if (searchOptions?.decorations) { - if (this._resultIndex !== undefined && this._searchResults?.size !== undefined) { - this._onDidChangeResults.fire({ resultIndex: this._resultIndex, resultCount: this._searchResults.size }); - } else { - this._onDidChangeResults.fire(undefined); + let resultIndex = -1; + if (this._selectedDecoration) { + const selectedMatch = this._selectedDecoration.match; + for (let i = 0; i < this._highlightDecorations.length; i++) { + const match = this._highlightDecorations[i].match; + if (match.row === selectedMatch.row && match.col === selectedMatch.col && match.size === selectedMatch.size) { + resultIndex = i; + break; + } + } } + this._onDidChangeResults.fire({ resultIndex, resultCount: this._highlightDecorations.length }); } - this._cachedSearchTerm = term; - return found; } private _findPreviousAndSelect(term: string, searchOptions?: ISearchOptions): boolean { if (!this._terminal) { throw new Error('Cannot use addon until it has been loaded'); } - let result: ISearchResult | undefined; if (!this._terminal || !term || term.length === 0) { - result = undefined; this._terminal?.clearSelection(); this.clearDecorations(); - this._resultIndex = -1; return false; } - if (this._cachedSearchTerm !== term) { - this._resultIndex = undefined; - this._terminal.clearSelection(); - } + const prevSelectedPos = this._terminal.getSelectionPosition(); + this._terminal.clearSelection(); - let startRow = this._terminal.buffer.active.baseY + this._terminal.rows; + let startRow = this._terminal.buffer.active.baseY + this._terminal.rows - 1; let startCol = this._terminal.cols; const isReverseSearch = true; - const incremental = searchOptions ? searchOptions.incremental : false; - let currentSelection: IBufferRange | undefined; - if (this._terminal.hasSelection()) { - currentSelection = this._terminal.getSelectionPosition()!; - // Start from selection start if there is a selection - startRow = currentSelection.start.y; - startCol = currentSelection.start.x; - } - this._initLinesCache(); const searchPosition: ISearchPosition = { startRow, startCol }; - if (incremental) { - // Try to expand selection to right first. - result = this._findInLine(term, searchPosition, searchOptions, false); - const isOldResultHighlighted = result && result.row === startRow && result.col === startCol; - if (!isOldResultHighlighted) { - // If selection was not able to be expanded to the right, then try reverse search - if (currentSelection) { - searchPosition.startRow = currentSelection.end.y; - searchPosition.startCol = currentSelection.end.x; + let result: ISearchResult | undefined; + if (prevSelectedPos) { + searchPosition.startRow = startRow = prevSelectedPos.start.y; + searchPosition.startCol = startCol = prevSelectedPos.start.x; + if (this._cachedSearchTerm !== term) { + // Try to expand selection to right first. + result = this._findInLine(term, searchPosition, searchOptions, false); + if (!result) { + // If selection was not able to be expanded to the right, then try reverse search + searchPosition.startRow = startRow = prevSelectedPos.end.y; + searchPosition.startCol = startCol = prevSelectedPos.end.x; } - result = this._findInLine(term, searchPosition, searchOptions, true); } - } else { + } + + if (!result) { result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch); } @@ -399,8 +394,8 @@ export class SearchAddon extends Disposable implements ITerminalAddon { } } // If we hit the top and didn't search from the very bottom wrap back down - if (!result && startRow !== (this._terminal.buffer.active.baseY + this._terminal.rows)) { - for (let y = (this._terminal.buffer.active.baseY + this._terminal.rows); y >= startRow; y--) { + if (!result && startRow !== (this._terminal.buffer.active.baseY + this._terminal.rows - 1)) { + for (let y = (this._terminal.buffer.active.baseY + this._terminal.rows - 1); y >= startRow; y--) { searchPosition.startRow = y; result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch); if (result) { @@ -409,22 +404,6 @@ export class SearchAddon extends Disposable implements ITerminalAddon { } } - if (this._searchResults) { - if (this._searchResults.size === 0) { - this._resultIndex = -1; - } else if (this._resultIndex === undefined || this._resultIndex < 0) { - this._resultIndex = this._searchResults.size - 1; - } else { - this._resultIndex--; - if (this._resultIndex === -1) { - this._resultIndex = this._searchResults.size - 1; - } - } - } - - // If there is only one result, return true. - if (!result && currentSelection) return true; - // Set selection and scroll if a result was found return this._selectResult(result, searchOptions?.decorations, searchOptions?.noScroll); } @@ -675,7 +654,7 @@ export class SearchAddon extends Disposable implements ITerminalAddon { if (options) { const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row); if (marker) { - this._selectedDecoration = terminal.registerDecoration({ + const decoration = terminal.registerDecoration({ marker, x: result.col, width: result.size, @@ -685,8 +664,13 @@ export class SearchAddon extends Disposable implements ITerminalAddon { color: options.activeMatchColorOverviewRuler } }); - this._selectedDecoration?.onRender((e) => this._applyStyles(e, options.activeMatchBorder, true)); - this._selectedDecoration?.onDispose(() => marker.dispose()); + if (decoration) { + const disposables: IDisposable[] = []; + disposables.push(marker); + disposables.push(decoration.onRender((e) => this._applyStyles(e, options.activeMatchBorder, true))); + disposables.push(decoration.onDispose(() => disposeArray(disposables))); + this._selectedDecoration = { decoration, match: result, dispose() { decoration.dispose(); } }; + } } } @@ -709,9 +693,6 @@ export class SearchAddon extends Disposable implements ITerminalAddon { * @returns */ private _applyStyles(element: HTMLElement, borderColor: string | undefined, isActiveResult: boolean): void { - if (element.clientWidth <= 0) { - return; - } if (!element.classList.contains('xterm-find-result-decoration')) { element.classList.add('xterm-find-result-decoration'); if (borderColor) { @@ -740,13 +721,17 @@ export class SearchAddon extends Disposable implements ITerminalAddon { x: result.col, width: result.size, backgroundColor: options.matchBackground, - overviewRulerOptions: this._resultDecorations?.get(marker.line) ? undefined : { + overviewRulerOptions: this._highlightedLines.has(marker.line) ? undefined : { color: options.matchOverviewRuler, position: 'center' } }); - findResultDecoration?.onRender((e) => this._applyStyles(e, options.matchBorder, false)); - findResultDecoration?.onDispose(() => marker.dispose()); + if (findResultDecoration) { + const disposables: IDisposable[] = []; + disposables.push(marker); + disposables.push(findResultDecoration.onRender((e) => this._applyStyles(e, options.matchBorder, false))); + disposables.push(findResultDecoration.onDispose(() => disposeArray(disposables))); + } return findResultDecoration; } } diff --git a/addons/xterm-addon-search/test/SearchAddon.api.ts b/addons/xterm-addon-search/test/SearchAddon.api.ts index f17ecd1b..0c20084a 100644 --- a/addons/xterm-addon-search/test/SearchAddon.api.ts +++ b/addons/xterm-addon-search/test/SearchAddon.api.ts @@ -178,7 +178,7 @@ describe('Search Tests', function (): void { window.calls = []; window.search.onDidChangeResults(e => window.calls.push(e)); `); - await writeSync(page, 'abc aabc'); + await writeSync(page, 'd abc aabc d'); assert.deepStrictEqual(await page.evaluate(`window.search.findNext('a', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); assert.deepStrictEqual(await page.evaluate('window.calls'), [ { resultCount: 3, resultIndex: 0 } @@ -201,15 +201,64 @@ describe('Search Tests', function (): void { { resultCount: 2, resultIndex: 0 }, { resultCount: 2, resultIndex: 1 } ]); + assert.deepStrictEqual(await page.evaluate(`window.search.findNext('d', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 3, resultIndex: 0 }, + { resultCount: 2, resultIndex: 0 }, + { resultCount: 2, resultIndex: 0 }, + { resultCount: 2, resultIndex: 1 }, + { resultCount: 2, resultIndex: 1 } + ]); assert.deepStrictEqual(await page.evaluate(`window.search.findNext('abcd', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false); assert.deepStrictEqual(await page.evaluate('window.calls'), [ { resultCount: 3, resultIndex: 0 }, { resultCount: 2, resultIndex: 0 }, { resultCount: 2, resultIndex: 0 }, { resultCount: 2, resultIndex: 1 }, + { resultCount: 2, resultIndex: 1 }, { resultCount: 0, resultIndex: -1 } ]); }); + it('should fire with more than 1k matches', async () => { + await page.evaluate(` + window.calls = []; + window.search.onDidChangeResults(e => window.calls.push(e)); + `); + const data = ('a bc'.repeat(10) + '\\n\\r').repeat(150); + await writeSync(page, data); + assert.strictEqual(await page.evaluate(`window.search.findNext('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 1000, resultIndex: 0 } + ]); + assert.strictEqual(await page.evaluate(`window.search.findNext('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 1000, resultIndex: 0 }, + { resultCount: 1000, resultIndex: 1 } + ]); + assert.strictEqual(await page.evaluate(`window.search.findNext('bc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 1000, resultIndex: 0 }, + { resultCount: 1000, resultIndex: 1 }, + { resultCount: 1000, resultIndex: 1 } + ]); + }); + it('should fire when writing to terminal', async () => { + await page.evaluate(` + window.calls = []; + window.search.onDidChangeResults(e => window.calls.push(e)); + `); + await writeSync(page, 'abc bc c\\n\\r'.repeat(2)); + assert.strictEqual(await page.evaluate(`window.search.findNext('abc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 2, resultIndex: 0 } + ]); + await writeSync(page, 'abc bc c\\n\\r'); + await timeout(300); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 2, resultIndex: 0 }, + { resultCount: 3, resultIndex: 0 } + ]); + }); }); describe('findPrevious', () => { it('should not fire unless the decorations option is set', async () => { @@ -233,6 +282,7 @@ describe('Search Tests', function (): void { assert.deepStrictEqual(await page.evaluate('window.calls'), [ { resultCount: 1, resultIndex: 0 } ]); + await page.evaluate(`window.term.clearSelection()`); assert.strictEqual(await page.evaluate(`window.search.findPrevious('b', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); assert.deepStrictEqual(await page.evaluate('window.calls'), [ { resultCount: 1, resultIndex: 0 }, @@ -262,7 +312,7 @@ describe('Search Tests', function (): void { window.calls = []; window.search.onDidChangeResults(e => window.calls.push(e)); `); - await writeSync(page, 'abc aabc'); + await writeSync(page, 'd abc aabc d'); assert.deepStrictEqual(await page.evaluate(`window.search.findPrevious('a', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); assert.deepStrictEqual(await page.evaluate('window.calls'), [ { resultCount: 3, resultIndex: 2 } @@ -285,15 +335,64 @@ describe('Search Tests', function (): void { { resultCount: 2, resultIndex: 1 }, { resultCount: 2, resultIndex: 0 } ]); + assert.deepStrictEqual(await page.evaluate(`window.search.findPrevious('d', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 3, resultIndex: 2 }, + { resultCount: 2, resultIndex: 1 }, + { resultCount: 2, resultIndex: 1 }, + { resultCount: 2, resultIndex: 0 }, + { resultCount: 2, resultIndex: 1 } + ]); assert.deepStrictEqual(await page.evaluate(`window.search.findPrevious('abcd', { incremental: true, decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), false); assert.deepStrictEqual(await page.evaluate('window.calls'), [ { resultCount: 3, resultIndex: 2 }, { resultCount: 2, resultIndex: 1 }, { resultCount: 2, resultIndex: 1 }, { resultCount: 2, resultIndex: 0 }, + { resultCount: 2, resultIndex: 1 }, { resultCount: 0, resultIndex: -1 } ]); }); + it('should fire with more than 1k matches', async () => { + await page.evaluate(` + window.calls = []; + window.search.onDidChangeResults(e => window.calls.push(e)); + `); + const data = ('a bc'.repeat(10) + '\\n\\r').repeat(150); + await writeSync(page, data); + assert.strictEqual(await page.evaluate(`window.search.findPrevious('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 1000, resultIndex: -1 } + ]); + assert.strictEqual(await page.evaluate(`window.search.findPrevious('a', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 1000, resultIndex: -1 }, + { resultCount: 1000, resultIndex: -1 } + ]); + assert.strictEqual(await page.evaluate(`window.search.findPrevious('bc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 1000, resultIndex: -1 }, + { resultCount: 1000, resultIndex: -1 }, + { resultCount: 1000, resultIndex: -1 } + ]); + }); + it('should fire when writing to terminal', async () => { + await page.evaluate(` + window.calls = []; + window.search.onDidChangeResults(e => window.calls.push(e)); + `); + await writeSync(page, 'abc bc c\\n\\r'.repeat(2)); + assert.strictEqual(await page.evaluate(`window.search.findPrevious('abc', { decorations: { activeMatchColorOverviewRuler: '#ff0000' } })`), true); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 2, resultIndex: 1 } + ]); + await writeSync(page, 'abc bc c\\n\\r'); + await timeout(300); + assert.deepStrictEqual(await page.evaluate('window.calls'), [ + { resultCount: 2, resultIndex: 1 }, + { resultCount: 3, resultIndex: 1 } + ]); + }); }); }); 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 ad51262d..3a3b7c89 100644 --- a/addons/xterm-addon-search/typings/xterm-addon-search.d.ts +++ b/addons/xterm-addon-search/typings/xterm-addon-search.d.ts @@ -75,10 +75,28 @@ declare module 'xterm-addon-search' { activeMatchColorOverviewRuler: string; } + /** + * Options for the search addon. + */ + export interface ISearchAddonOptions { + /** + * Max number of matches highlighted when decorations are enabled. + * Defaults to 1000 highlighted matches + */ + highlightLimit: number + } + /** * An xterm.js addon that provides search functionality. */ export class SearchAddon implements ITerminalAddon { + + /** + * Creates a new search addon. + * @param options Options for the search addon. + */ + constructor(options?: Partial); + /** * Activates the addon * @param terminal The terminal the addon is being loaded in. @@ -121,10 +139,8 @@ declare module 'xterm-addon-search' { /** * When decorations are enabled, fires when * the search results change. - * @returns -1 for resultIndex for a resultCount of 0 - * and @returns undefined when the threshold of 1k results - * is exceeded and decorations are disposed of. + * @returns -1 for resultIndex when the threshold of matches is exceeded. */ - readonly onDidChangeResults: IEvent<{ resultIndex: number, resultCount: number } | undefined>; + readonly onDidChangeResults: IEvent<{ resultIndex: number, resultCount: number }>; } } diff --git a/css/xterm.css b/css/xterm.css index 2746016b..b14a6cf5 100644 --- a/css/xterm.css +++ b/css/xterm.css @@ -179,8 +179,12 @@ position: absolute; } +.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer { + z-index: 7; +} + .xterm-decoration-overview-ruler { - z-index: 7; + z-index: 8; position: absolute; top: 0; right: 0; diff --git a/demo/client.ts b/demo/client.ts index 417d0806..179a6ff1 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -138,12 +138,11 @@ function setPadding(): void { addons.fit.instance.fit(); } -function getSearchOptions(e: KeyboardEvent): ISearchOptions { +function getSearchOptions(): ISearchOptions { return { regex: (document.getElementById('regex') as HTMLInputElement).checked, 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 ? { matchBackground: '#232422', matchBorder: '#555753', @@ -313,11 +312,23 @@ function createTerminal(): void { addDomListener(paddingElement, 'change', setPadding); - addDomListener(actionElements.findNext, 'keyup', (e) => { - addons.search.instance.findNext(actionElements.findNext.value, getSearchOptions(e)); + addDomListener(actionElements.findNext, 'keydown', (e) => { + if (e.key === 'Enter') { + addons.search.instance.findNext(actionElements.findNext.value, getSearchOptions()); + e.preventDefault(); + } }); - addDomListener(actionElements.findPrevious, 'keyup', (e) => { - addons.search.instance.findPrevious(actionElements.findPrevious.value, getSearchOptions(e)); + addDomListener(actionElements.findNext, 'input', (e) => { + addons.search.instance.findNext(actionElements.findNext.value, getSearchOptions()); + }); + addDomListener(actionElements.findPrevious, 'keydown', (e) => { + if (e.key === 'Enter') { + addons.search.instance.findPrevious(actionElements.findPrevious.value, getSearchOptions()); + e.preventDefault(); + } + }); + addDomListener(actionElements.findPrevious, 'input', (e) => { + addons.search.instance.findPrevious(actionElements.findPrevious.value, getSearchOptions()); }); addDomListener(actionElements.findNext, 'blur', (e) => { addons.search.instance.clearActiveDecoration(); diff --git a/src/browser/decorations/BufferDecorationRenderer.ts b/src/browser/decorations/BufferDecorationRenderer.ts index e195c5ae..fb77ce9c 100644 --- a/src/browser/decorations/BufferDecorationRenderer.ts +++ b/src/browser/decorations/BufferDecorationRenderer.ts @@ -72,6 +72,7 @@ export class BufferDecorationRenderer extends Disposable { private _createElement(decoration: IInternalDecoration): HTMLElement { const element = document.createElement('div'); element.classList.add('xterm-decoration'); + element.classList.toggle('xterm-decoration-top-layer', decoration?.options?.layer === 'top'); element.style.width = `${Math.round((decoration.options.width || 1) * this._renderService.dimensions.css.cell.width)}px`; element.style.height = `${(decoration.options.height || 1) * this._renderService.dimensions.css.cell.height}px`; element.style.top = `${(decoration.marker.line - this._bufferService.buffers.active.ydisp) * this._renderService.dimensions.css.cell.height}px`;