remove test

demo/client.ts

@@ -556,9 +556,9 @@ function addDecoration() {
 
 function addOverviewRuler() {
   term.options['overviewRulerWidth'] = 15;
-  const canvas = term.registerDecoration({marker: term.addMarker(1), overviewRulerItemColor: 'red'});
-  term.registerDecoration({marker: term.addMarker(3), overviewRulerItemColor: 'green'});
-  term.registerDecoration({marker: term.addMarker(5), overviewRulerItemColor: 'blue'});
+  const canvas = term.registerDecoration({marker: term.addMarker(1), { color }: 'red'});
+  term.registerDecoration({marker: term.addMarker(3), { color }: 'green'});
+  term.registerDecoration({marker: term.addMarker(5), { color }: 'blue'});
   canvas.onRender((e) => {
     e.style.left = `${document.querySelector('.xterm-viewport').clientWidth + 5}px`;
   });

src/browser/Decorations/BufferDecorationRenderer.ts

@@ -106,6 +106,9 @@ export class BufferDecorationRenderer extends Disposable {
 
   private _removeDecoration(decoration: IInternalDecoration): void {
     const element = this._decorationElements.get(decoration);
+    if (element && this._container && this._container.contains(element)) {
+      this._container.removeChild(element);
+    }
     element?.remove();
     this._decorationElements.delete(decoration);
   }

src/browser/Decorations/OverviewRulerRenderer.ts

@@ -75,12 +75,12 @@ export class OverviewRulerRenderer extends Disposable {
     } else {
       this._canvas.style.left = decoration.options.x ? `${decoration.options.x * this._renderService.dimensions.actualCellWidth}px` : '';
     }
-    if (!decoration.options.overviewRulerItemColor) {
+    if (!decoration.options.overviewRulerOptions?.color) {
       this._decorationElements.delete(decoration);
       return;
     }
     this._ctx.lineWidth = 1;
-    this._ctx.strokeStyle = decoration.options.overviewRulerItemColor;
+    this._ctx.strokeStyle = decoration.options.overviewRulerOptions.color;
     this._ctx.strokeRect(
       0,
       Math.round(this._canvas.height * (decoration.options.marker.line / this._bufferService.buffers.active.lines.length)),

src/common/services/DecorationService.ts

@@ -68,8 +68,9 @@ class Decoration extends Disposable implements IInternalDecoration {
     this.marker.onDispose(() => this.dispose());
   }
   public override dispose(): void {
-    this.element?.remove();
     this._onDispose.fire();
+    this.element?.remove();
+    this.element = undefined;
     super.dispose();
   }
 }

test/api/Terminal.api.ts

@@ -744,18 +744,6 @@ describe('API Integration Tests', function(): void {
       await page.evaluate(`window.term.resize(10, 5)`);
       assert.equal(await page.evaluate(`document.querySelectorAll('.xterm-screen .xterm-decoration').length`), 0);
     });
-    it('should register decorations and render them when open is called', async () => {
-      await openTerminal(page);
-      await writeSync(page, '\\n\\n\\n\\n');
-      await writeSync(page, '\\n\\n\\n\\n');
-      await writeSync(page, '\\n\\n\\n\\n');
-      await page.evaluate(`window.marker1 = window.term.addMarker(1)`);
-      await page.evaluate(`window.marker2 = window.term.addMarker(2)`);
-      await page.evaluate(`window.term.registerDecoration({ marker: window.marker1 })`);
-      await page.evaluate(`window.term.registerDecoration({ marker: window.marker2 })`);
-      await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
-      assert.equal(await page.evaluate(`document.querySelectorAll('.xterm-screen .xterm-decoration').length`), 2);
-    });
     it('on resize should dispose of the old decoration and create a new one', async () => {
       await openTerminal(page);
       await writeSync(page, '\\n\\n\\n\\n');

typings/xterm.d.ts

@@ -478,10 +478,12 @@ declare module 'xterm' {
     height?: number;
 
     /**
-     * When provided, renders the decoration in the scrollbar
-     * with the given color
+     * Renders the decoration in the scrollbar
+     * with the given @param color and optional @param position.
+     * If @param position is not set, it will span the full @param overviewRulerWidth, which
+     * must be provided via @TerminalOptions for this to work.
      */
-    overviewRulerItemColor?: string;
+    overviewRulerOptions?: { color: string; position?: 'left' | 'center' | 'right'}
   }
 
   /**