Merge pull request #3708 from Tyriar/search_colors

Allow configuring search overview ruler and border color

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;
+  activeMatchBackground?: string;
+  activeMatchBorder?: string;
+  activeMatchColorOverviewRuler: 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?.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.selectedColor } });
-        this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.selectedColor, result));
+        this._selectedDecoration = terminal.registerDecoration({
+          marker,
+          overviewRulerOptions: {
+            color: decorations.activeMatchColorOverviewRuler
+          }
+        });
+        this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.activeMatchBackground, decorations.activeMatchBorder, 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;
   }

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 active match.
+     */
+    activeMatchBackground?: string;
+
+    /**
+     * The border color of the currently active match.
+     */
+    activeMatchBorder?: string;
+
+    /**
+     * The overview ruler color of the currently active match.
+     */
+    activeMatchColorOverviewRuler: string;
   }
 
   /**

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',
+      activeMatchBackground: '#ef292980',
+      activeMatchBorder: '#ef2929',
+      activeMatchColorOverviewRuler: '#ef2929'
+    } : undefined
   };
 }