use decorations service instead of decorations render layer

src/browser/Terminal.ts

@@ -55,6 +55,7 @@ import { CoreTerminal } from 'common/CoreTerminal';
 import { color, rgba } from 'browser/Color';
 import { CharacterJoinerService } from 'browser/services/CharacterJoinerService';
 import { toRgbString } from 'common/input/XParseColor';
+import { DecorationsService, IDecorationsService } from 'browser/services/DecorationsService';
 
 // Let it work inside Node.js for automated testing purposes.
 const document: Document = (typeof window !== 'undefined') ? window.document : null as any;
@@ -80,6 +81,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   private _charSizeService: ICharSizeService | undefined;
   private _mouseService: IMouseService | undefined;
   private _renderService: IRenderService | undefined;
+  private _decorationsService: IDecorationsService | undefined;
   private _characterJoinerService: ICharacterJoinerService | undefined;
   private _selectionService: ISelectionService | undefined;
   private _soundService: ISoundService | undefined;
@@ -513,6 +515,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(this._renderService.onRenderedBufferChange(e => this._onRender.fire(e)));
     this.onResize(e => this._renderService!.resize(e.cols, e.rows));
 
+    this._decorationsService = this.register(this._instantiationService.createInstance(DecorationsService, this.screenElement));
+
     this._compositionView = document.createElement('div');
     this._compositionView.classList.add('composition-view');
     this._compositionHelper = this._instantiationService.createInstance(CompositionHelper, this.textarea, this._compositionView);
@@ -999,7 +1003,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   }
 
   public registerDecoration(decorationOptions: IBufferDecorationOptions): IDecoration | undefined {
-    return this._renderService?.registerDecoration(decorationOptions);
+    return this._decorationsService?.registerDecoration(decorationOptions);
   }
   /**
    * Gets whether the terminal has an active selection.

src/browser/renderer/Renderer.ts

@@ -10,11 +10,10 @@ import { IRenderLayer, IRenderer, IRenderDimensions, IRequestRedrawEvent } from
 import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer';
 import { Disposable } from 'common/Lifecycle';
 import { IColorSet, ILinkifier, ILinkifier2 } from 'browser/Types';
-import { ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
-import { IBufferService, IOptionsService, ICoreService, IInstantiationService } from 'common/services/Services';
+import { ICharSizeService } from 'browser/services/Services';
+import { IBufferService, IOptionsService, IInstantiationService } from 'common/services/Services';
 import { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
-import { DecorationRenderLayer } from 'browser/renderer/DecorationRenderLayer';
 import { IBufferDecorationOptions, IDecoration } from 'xterm';
 
 let nextRendererId = 1;
@@ -46,8 +45,7 @@ export class Renderer extends Disposable implements IRenderer {
       instantiationService.createInstance(TextRenderLayer, this._screenElement, 0, this._colors, allowTransparency, this._id),
       instantiationService.createInstance(SelectionRenderLayer, this._screenElement, 1, this._colors, this._id),
       instantiationService.createInstance(LinkRenderLayer, this._screenElement, 2, this._colors, this._id, linkifier, linkifier2),
-      instantiationService.createInstance(CursorRenderLayer, this._screenElement, 3, this._colors, this._id, this._onRequestRedraw),
-      instantiationService.createInstance(DecorationRenderLayer, this._screenElement, 4, this._colors, this._id, this._onRequestRedraw)
+      instantiationService.createInstance(CursorRenderLayer, this._screenElement, 3, this._colors, this._id, this._onRequestRedraw)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -68,13 +66,6 @@ export class Renderer extends Disposable implements IRenderer {
     this.onOptionsChanged();
   }
 
-  public registerDecoration(decorationOptions: IBufferDecorationOptions): IDecoration | undefined {
-    const decorationLayer = this._renderLayers.find(l => l instanceof DecorationRenderLayer);
-    if (decorationLayer instanceof DecorationRenderLayer) {
-      return decorationLayer.registerDecoration(decorationOptions);
-    }
-  }
-
   public dispose(): void {
     for (const l of this._renderLayers) {
       l.dispose();

src/browser/renderer/Types.d.ts

@@ -54,7 +54,6 @@ export interface IRenderer extends IDisposable {
   clear(): void;
   renderRows(start: number, end: number): void;
   clearTextureAtlas?(): void;
-  registerDecoration(decorationOptions: IBufferDecorationOptions): IDecoration | undefined;
 }
 
 export interface IRenderLayer extends IDisposable {

src/browser/renderer/dom/DomRenderer.ts

@@ -13,7 +13,6 @@ import { IOptionsService, IBufferService, IInstantiationService } from 'common/s
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { color } from 'browser/Color';
 import { removeElementFromParent } from 'browser/Dom';
-import { DecorationRenderLayer } from 'browser/renderer/DecorationRenderLayer';
 import { IBufferDecorationOptions, IDecoration } from 'xterm';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';

src/browser/services/DecorationsService.ts

@@ -3,50 +3,35 @@
  * @license MIT
  */
 
-import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
-import { IRequestRedrawEvent } from 'browser/renderer/Types';
-import { IColorSet } from 'browser/Types';
-import { EventEmitter, IEventEmitter } from 'common/EventEmitter';
+import { IRenderDimensions } from 'browser/renderer/Types';
+import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { Disposable } from 'common/Lifecycle';
-import { IBufferService, IOptionsService } from 'common/services/Services';
-import { IBufferDecorationOptions, IDecoration, IEvent, IMarker } from 'xterm';
+import { createDecorator } from 'common/services/ServiceRegistry';
+import { IDisposable } from 'common/Types';
+import { IBufferDecorationOptions, IDecoration, IMarker } from 'xterm';
+
+export interface IDecorationsService extends IDisposable {
+  registerDecoration(decorationOptions: IBufferDecorationOptions): IDecoration | undefined;
+}
 
 const enum DefaultButton {
   COLOR = '#5DA5D5'
 }
-export class DecorationRenderLayer extends BaseRenderLayer {
-  private _decorations: IDecoration[] = [];
-  constructor(
-    container: HTMLElement,
-    zIndex: number,
-    colors: IColorSet,
-    rendererId: number,
-    private _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
-    @IBufferService bufferService: IBufferService,
-    @IOptionsService optionsService: IOptionsService
-  ) {
-    super(container, 'decoration', zIndex, true, colors, rendererId, bufferService, optionsService);
-    // this.registerDecoration({ startMarker: new Marker(1), shape: 'button' });
+
+export class DecorationsService extends Disposable implements IDecorationsService {
+  constructor(private readonly _screenElement: HTMLElement) {
+    super();
   }
-
-  public onGridChanged(startRow: number, endRow: number): void {
-    for (const decoration of this._decorations) {
-      (decoration as BufferDecoration).render();
-    }
-  }
-
-  public reset(): void {
-
-  }
-
   public registerDecoration(decorationOptions: IBufferDecorationOptions): IDecoration | undefined {
     if (decorationOptions.marker.isDisposed) {
       return undefined;
     }
-    return new BufferDecoration(decorationOptions, this._ctx.canvas);
+    return new BufferDecoration(decorationOptions, this._screenElement);
   }
 }
 
+
+export const IDecorationsService = createDecorator<IDecorationsService>('DecorationsService');
 class BufferDecoration extends Disposable implements IDecoration {
   private static _nextId = 1;
   private _marker: IMarker;
@@ -86,8 +71,8 @@ class BufferDecoration extends Disposable implements IDecoration {
     } else {
       this._element.style.right = decorationOptions.x ? `${decorationOptions.x}px` : '5px';
     }
-    if (this._container.parentElement && this._element) {
-      this._container.parentElement.append(this._element);
+    if (this._container && this._element) {
+      this._container.append(this._element);
     }
   }
 

src/browser/services/RenderService.ts

@@ -86,10 +86,6 @@ export class RenderService extends Disposable implements IRenderService {
     }
   }
 
-  public registerDecoration(decorationOptions: IBufferDecorationOptions): IDecoration | undefined {
-    return this._renderer.registerDecoration(decorationOptions);
-  }
-
   private _onIntersectionChange(entry: IntersectionObserverEntry): void {
     this._isPaused = entry.isIntersecting === undefined ? (entry.intersectionRatio === 0) : !entry.isIntersecting;
 

src/browser/services/Services.ts

@@ -52,7 +52,6 @@ export interface IRenderService extends IDisposable {
   onRefreshRequest: IEvent<{ start: number, end: number }>;
 
   dimensions: IRenderDimensions;
-  registerDecoration(decorationOptions: IBufferDecorationOptions): IDecoration | undefined;
   refreshRows(start: number, end: number): void;
   clearTextureAtlas(): void;
   resize(cols: number, rows: number): void;