search improvements, added decorators

tabby-terminal/src/api/baseTerminalTab.component.ts

@@ -11,6 +11,7 @@ import { Frontend } from '../frontends/frontend'
 import { XTermFrontend, XTermWebGLFrontend } from '../frontends/xtermFrontend'
 import { ResizeEvent } from './interfaces'
 import { TerminalDecorator } from './decorator'
+import { SearchPanelComponent } from '../components/searchPanel.component'
 
 /**
  * A class to base your custom terminal tabs on
@@ -100,6 +101,8 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
 
     alternateScreenActive = false
 
+    @ViewChild(SearchPanelComponent, { 'static': false }) searchPanel?: SearchPanelComponent
+
     // Deps start
     config: ConfigService
     element: ElementRef

tabby-terminal/src/components/baseTerminalTab.component.pug

@@ -4,7 +4,7 @@ search-panel(
     *ngIf='showSearchPanel && hasFocus',
     @toolbarSlide,
     [frontend]='frontend',
-    (close)='showSearchPanel = false'
+    (close)='showSearchPanel = false; frontend?.cancelSearch()'
 )
 
 button.btn.btn-sm.btn-link.toolbar-pin-button(

tabby-terminal/src/components/searchPanel.component.pug

@@ -27,7 +27,7 @@ button.btn.btn-link(
 
 button.btn.btn-link(
     (click)='options.caseSensitive = !options.caseSensitive; saveSearchOptions()',
-    [class.active]='options.caseSensitive',
+    [class.btn-info]='options.caseSensitive',
     ngbTooltip='Case sensitivity',
     placement='bottom',
     [fastHtmlBind]='icons.case'
@@ -35,7 +35,7 @@ button.btn.btn-link(
 
 button.btn.btn-link(
     (click)='options.regex = !options.regex; saveSearchOptions()',
-    [class.active]='options.regex',
+    [class.btn-info]='options.regex',
     ngbTooltip='Regular expression',
     placement='bottom',
     [fastHtmlBind]='icons.regexp'
@@ -43,7 +43,7 @@ button.btn.btn-link(
 
 button.btn.btn-link(
     (click)='options.wholeWord = !options.wholeWord; saveSearchOptions()',
-    [class.active]='options.wholeWord',
+    [class.btn-info]='options.wholeWord',
     ngbTooltip='Whole word',
     placement='bottom',
     [fastHtmlBind]='icons.wholeWord'

tabby-terminal/src/frontends/frontend.ts

@@ -77,6 +77,7 @@ export abstract class Frontend {
 
     abstract findNext (term: string, searchOptions?: SearchOptions): boolean
     abstract findPrevious (term: string, searchOptions?: SearchOptions): boolean
+    abstract cancelSearch (): void
 
     abstract saveState (): any
     abstract restoreState (state: string): void

tabby-terminal/src/frontends/xtermFrontend.ts

@@ -5,7 +5,7 @@ import { takeUntil } from 'rxjs'
 import { Terminal, ITheme } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import { LigaturesAddon } from 'xterm-addon-ligatures'
-import { SearchAddon } from 'xterm-addon-search'
+import { ISearchOptions, SearchAddon } from 'xterm-addon-search'
 import { WebglAddon } from 'xterm-addon-webgl'
 import { Unicode11Addon } from 'xterm-addon-unicode11'
 import { SerializeAddon } from 'xterm-addon-serialize'
@@ -55,6 +55,7 @@ export class XTermFrontend extends Frontend {
 
         this.xterm = new Terminal({
             allowTransparency: true,
+            overviewRulerWidth: 8,
             windowsMode: process.platform === 'win32',
         })
         this.xtermCore = this.xterm['_core']
@@ -320,12 +321,26 @@ export class XTermFrontend extends Frontend {
         this.setFontSize()
     }
 
+    private getSearchOptions (searchOptions?: SearchOptions): ISearchOptions {
+        return {
+            ...searchOptions,
+            decorations: {
+                matchOverviewRuler: '#cccc00',
+                activeMatchColorOverviewRuler: '#ffff00',
+            },
+        }
+    }
+
     findNext (term: string, searchOptions?: SearchOptions): boolean {
-        return this.search.findNext(term, searchOptions)
+        return this.search.findNext(term, this.getSearchOptions(searchOptions))
     }
 
     findPrevious (term: string, searchOptions?: SearchOptions): boolean {
-        return this.search.findPrevious(term, searchOptions)
+        return this.search.findPrevious(term, this.getSearchOptions(searchOptions))
+    }
+
+    cancelSearch (): void {
+        this.search.clearDecorations()
     }
 
     saveState (): any {