Support setting the layer of a decoration

Fixes #3778

addons/xterm-addon-search/src/SearchAddon.ts

@@ -115,6 +115,11 @@ export class SearchAddon implements ITerminalAddon {
     }
   }
 
+  public clearActiveDecoration(): void {
+    this._selectedDecoration?.dispose();
+    this._selectedDecoration = undefined;
+  }
+
   /**
    * Find the next instance of the term, then scroll to and select it. If it
    * doesn't exist, do nothing.
@@ -655,7 +660,7 @@ export class SearchAddon implements ITerminalAddon {
    */
   private _selectResult(result: ISearchResult | undefined, options?: ISearchDecorationOptions, noScroll?: boolean): boolean {
     const terminal = this._terminal!;
-    this._selectedDecoration?.dispose();
+    this.clearActiveDecoration();
     if (!result) {
       terminal.clearSelection();
       return false;
@@ -669,6 +674,7 @@ export class SearchAddon implements ITerminalAddon {
           x: result.col,
           width: result.size,
           backgroundColor: options.activeMatchBackground,
+          layer: 'top',
           overviewRulerOptions: {
             color: options.activeMatchColorOverviewRuler
           }

addons/xterm-addon-search/typings/xterm-addon-search.d.ts

@@ -111,6 +111,13 @@ declare module 'xterm-addon-search' {
      */
     public clearDecorations(): void;
 
+    /**
+     * Clears the active result decoration, this decoration is applied on top of the selection so
+     * removing it will reveal the selection underneath. This is intended to be call on the search
+     * textarea's `blur` event.
+     */
+    public clearActiveDecoration(): void;
+
     /**
      * When decorations are enabled, fires when
      * the search results change.

addons/xterm-addon-webgl/src/WebglRenderer.ts

@@ -380,17 +380,28 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._workColors.bg = this._workCell.bg;
     this._workColors.fg = this._workCell.fg;
 
+    // Get any foreground/background overrides, this happens on the model to avoid spreading
+    // override logic throughout the different sub-renderers
     let bgOverride: number | undefined;
     let fgOverride: number | undefined;
 
+    // Apply decorations on the bottom layer
+    for (const d of this._decorationService.getDecorationsAtCell(x, y, 'bottom')) {
+      if (d.backgroundColorRGB) {
+        bgOverride = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
+      }
+      if (d.foregroundColorRGB) {
+        fgOverride = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
+      }
+    }
+
     // Apply the selection color if needed
     if (this._isCellSelected(x, y)) {
       bgOverride = this._colors.selectionOpaque.rgba >> 8 & 0xFFFFFF;
     }
 
-    // Get any decoration foreground/background overrides, this happens on the model to avoid
-    // spreading decoration override logic throughout the different sub-renderers
-    for (const d of this._decorationService.getDecorationsAtCell(x, y)) {
+    // Apply decorations on the top layer
+    for (const d of this._decorationService.getDecorationsAtCell(x, y, 'top')) {
       if (d.backgroundColorRGB) {
         bgOverride = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
       }