Start to use new API in search addon

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

@@ -653,7 +653,7 @@ export class SearchAddon implements ITerminalAddon {
    * @param result The result to select.
    * @return Whether a result was selected.
    */
-  private _selectResult(result: ISearchResult | undefined, decorations?: ISearchDecorationOptions, noScroll?: boolean): boolean {
+  private _selectResult(result: ISearchResult | undefined, options?: ISearchDecorationOptions, noScroll?: boolean): boolean {
     const terminal = this._terminal!;
     this._selectedDecoration?.dispose();
     if (!result) {
@@ -661,18 +661,19 @@ export class SearchAddon implements ITerminalAddon {
       return false;
     }
     terminal.select(result.col, result.row, result.size);
-    if (decorations?.activeMatchColorOverviewRuler) {
+    if (options) {
       const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row);
       if (marker) {
         this._selectedDecoration = terminal.registerDecoration({
           marker,
           x: result.col,
           width: result.size,
+          backgroundColor: options.activeMatchBackground,
           overviewRulerOptions: {
-            color: decorations.activeMatchColorOverviewRuler
+            color: options.activeMatchColorOverviewRuler
           }
         });
-        this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.activeMatchBackground, decorations.activeMatchBorder));
+        this._selectedDecoration?.onRender((e) => this._applyStyles(e, options.activeMatchBorder));
         this._selectedDecoration?.onDispose(() => marker.dispose());
       }
     }
@@ -696,15 +697,12 @@ export class SearchAddon implements ITerminalAddon {
    * @param result the search result associated with the decoration
    * @returns
    */
-  private _applyStyles(element: HTMLElement, backgroundColor: string | undefined, borderColor: string | undefined): void {
+  private _applyStyles(element: HTMLElement, borderColor: string | undefined): void {
     if (element.clientWidth <= 0) {
       return;
     }
     if (!element.classList.contains('xterm-find-result-decoration')) {
       element.classList.add('xterm-find-result-decoration');
-      if (backgroundColor) {
-        element.style.backgroundColor = backgroundColor;
-      }
       if (borderColor) {
         element.style.outline = `1px solid ${borderColor}`;
       }
@@ -717,21 +715,23 @@ export class SearchAddon implements ITerminalAddon {
    * @param color the color to use for the decoration
    * @returns the {@link IDecoration} or undefined if the marker has already been disposed of
    */
-  private _createResultDecoration(result: ISearchResult, decorations: ISearchDecorationOptions): IDecoration | undefined {
+  private _createResultDecoration(result: ISearchResult, options: ISearchDecorationOptions): IDecoration | undefined {
     const terminal = this._terminal!;
     const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row);
-    if (!marker || !decorations?.matchOverviewRuler) {
+    if (!marker) {
       return undefined;
     }
     const findResultDecoration = terminal.registerDecoration({
       marker,
       x: result.col,
       width: result.size,
+      backgroundColor: options.matchBackground,
       overviewRulerOptions: this._resultDecorations?.get(marker.line) ? undefined : {
-        color: decorations.matchOverviewRuler, position: 'center'
+        color: options.matchOverviewRuler,
+        position: 'center'
       }
     });
-    findResultDecoration?.onRender((e) => this._applyStyles(e, decorations.matchBackground, decorations.matchBorder));
+    findResultDecoration?.onRender((e) => this._applyStyles(e, options.matchBorder));
     findResultDecoration?.onDispose(() => marker.dispose());
     return findResultDecoration;
   }

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

@@ -45,12 +45,12 @@ declare module 'xterm-addon-search' {
    */
   interface ISearchDecorationOptions {
     /**
-     * The background color of a match.
+     * The background color of a match, this must use #RRGGBB format.
      */
     matchBackground?: string;
 
     /**
-     * The border color of a match
+     * The border color of a match.
      */
     matchBorder?: string;
 
@@ -60,7 +60,7 @@ declare module 'xterm-addon-search' {
     matchOverviewRuler: string;
 
     /**
-     * The background color for the currently active match.
+     * The background color for the currently active match, this must use #RRGGBB format.
      */
     activeMatchBackground?: string;
 

addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts

@@ -88,9 +88,6 @@ export class WebglCharAtlas implements IDisposable {
     this._tmpCanvas.width = this._config.scaledCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2;
     this._tmpCanvas.height = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 2;
     this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
-
-    // This is useful for debugging
-    document.body.appendChild(this.cacheCanvas);
   }
 
   public dispose(): void {

demo/client.ts

@@ -110,10 +110,10 @@ function getSearchOptions(e: KeyboardEvent): ISearchOptions {
     caseSensitive: (document.getElementById('case-sensitive') as HTMLInputElement).checked,
     incremental: e.key !== `Enter`,
     decorations: (document.getElementById('highlight-all-matches') as HTMLInputElement).checked ? {
-      matchBackground: '#55575380',
+      matchBackground: '#232422',
       matchBorder: '#555753',
       matchOverviewRuler: '#555753',
-      activeMatchBackground: '#ef292980',
+      activeMatchBackground: '#ef2929',
       activeMatchBorder: '#ef2929',
       activeMatchColorOverviewRuler: '#ef2929'
     } : undefined

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -184,12 +184,12 @@ export class DomRendererRowFactory {
         if (x >= xmin && x < xmax) {
           if (d.backgroundColorRGB) {
             bgColorMode = Attributes.CM_RGB;
-            bg = d.backgroundColorRGB.rgba >> 8;
+            bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
             bgOverride = d.backgroundColorRGB;
           }
           if (d.foregroundColorRGB) {
             fgColorMode = Attributes.CM_RGB;
-            fg = d.foregroundColorRGB.rgba >> 8;
+            fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
             fgOverride = d.foregroundColorRGB;
           }
         }