search improvements, added highlighting - fixes #5940, fixes #5032, fixes #5152

tabby-terminal/src/frontends/frontend.ts

@@ -9,6 +9,11 @@ export interface SearchOptions {
     incremental?: true
 }
 
+export interface SearchState {
+    resultIndex?: number
+    resultCount: number
+}
+
 /**
  * Extend to add support for a different VT frontend implementation
  */
@@ -75,8 +80,8 @@ export abstract class Frontend {
     abstract configure (): void
     abstract setZoom (zoom: number): void
 
-    abstract findNext (term: string, searchOptions?: SearchOptions): boolean
-    abstract findPrevious (term: string, searchOptions?: SearchOptions): boolean
+    abstract findNext (term: string, searchOptions?: SearchOptions): SearchState
+    abstract findPrevious (term: string, searchOptions?: SearchOptions): SearchState
     abstract cancelSearch (): void
 
     abstract saveState (): any

tabby-terminal/src/frontends/xterm.css

@@ -16,3 +16,13 @@
 .xterm-decoration-overview-ruler {
     right: 6px;
 }
+
+.xterm-find-result-decoration {
+    box-sizing: content-box;
+
+    border-radius: 3px;
+    padding: 2px;
+    margin: -2px;
+    outline: 2px solid yellow;
+    backdrop-filter: contrast(2);
+}

tabby-terminal/src/frontends/xtermFrontend.ts

@@ -1,6 +1,6 @@
 import { Injector } from '@angular/core'
 import { ConfigService, getCSSFontFamily, HostAppService, HotkeysService, Platform, PlatformService } from 'tabby-core'
-import { Frontend, SearchOptions } from './frontend'
+import { Frontend, SearchOptions, SearchState } from './frontend'
 import { takeUntil } from 'rxjs'
 import { Terminal, ITheme } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
@@ -34,6 +34,7 @@ export class XTermFrontend extends Frontend {
     private configuredTheme: ITheme = {}
     private copyOnSelect = false
     private search = new SearchAddon()
+    private searchState: SearchState = { resultCount: 0 }
     private fitAddon = new FitAddon()
     private serializeAddon = new SerializeAddon()
     private ligaturesAddon?: LigaturesAddon
@@ -178,6 +179,10 @@ export class XTermFrontend extends Frontend {
 
         this.xterm.loadAddon(this.search)
 
+        this.search.onDidChangeResults(state => {
+            this.searchState = state ?? { resultCount: 0 }
+        })
+
         window.addEventListener('resize', this.resizeHandler)
 
         this.resizeHandler()
@@ -327,16 +332,30 @@ export class XTermFrontend extends Frontend {
             decorations: {
                 matchOverviewRuler: '#cccc00',
                 activeMatchColorOverviewRuler: '#ffff00',
+                matchBorder: '#cc0',
+                activeMatchBorder: '#ff0',
+                activeMatchBackground: 'rgba(255, 255, 0, 0.3)',
             },
         }
     }
 
-    findNext (term: string, searchOptions?: SearchOptions): boolean {
-        return this.search.findNext(term, this.getSearchOptions(searchOptions))
+    private wrapSearchResult (result: boolean): SearchState {
+        if (!result) {
+            return { resultCount: 0 }
+        }
+        return this.searchState
     }
 
-    findPrevious (term: string, searchOptions?: SearchOptions): boolean {
-        return this.search.findPrevious(term, this.getSearchOptions(searchOptions))
+    findNext (term: string, searchOptions?: SearchOptions): SearchState {
+        return this.wrapSearchResult(
+            this.search.findNext(term, this.getSearchOptions(searchOptions))
+        )
+    }
+
+    findPrevious (term: string, searchOptions?: SearchOptions): SearchState {
+        return this.wrapSearchResult(
+            this.search.findPrevious(term, this.getSearchOptions(searchOptions))
+        )
     }
 
     cancelSearch (): void {