From 313cb2fe0980ee898adebd0c69fc05d670022a7c Mon Sep 17 00:00:00 2001
From: meganrogge <merogge@microsoft.com>
Date: Wed, 9 Feb 2022 09:55:30 -0600
Subject: [PATCH] add a container

---
 css/xterm.css                             |  2 +-
 src/browser/services/DecorationService.ts | 19 ++++++++++---------
 test/api/Terminal.api.ts                  |  4 ++--
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/css/xterm.css b/css/xterm.css
index 956f6675..ab3965b4 100644
--- a/css/xterm.css
+++ b/css/xterm.css
@@ -174,7 +174,7 @@
     text-decoration: line-through;
 }
 
-.xterm-screen .xterm-decoration {
+.xterm-screen .xterm-decoration-container .xterm-decoration {
 	z-index: 6;
 	position: absolute;
 }
diff --git a/src/browser/services/DecorationService.ts b/src/browser/services/DecorationService.ts
index 868ec1be..a33d14bc 100644
--- a/src/browser/services/DecorationService.ts
+++ b/src/browser/services/DecorationService.ts
@@ -12,8 +12,7 @@ import { IDecorationOptions, IDecoration, IMarker } from 'xterm';
 export class DecorationService extends Disposable implements IDecorationService {
 
   private readonly _decorations: Decoration[] = [];
-  private _screenElement: HTMLElement | undefined;
-
+  private _container: HTMLElement | undefined;
   private _renderService: IRenderService | undefined;
   private _bufferService: IBufferService | undefined;
 
@@ -23,18 +22,20 @@ export class DecorationService extends Disposable implements IDecorationService
   }
 
   public attachToDom(screenElement: HTMLElement, renderService: IRenderService, bufferService: IBufferService): void {
-    this._screenElement = screenElement;
     this._renderService = renderService;
     this._bufferService = bufferService;
+    this._container = document.createElement('div');
+    this._container.classList.add('xterm-decoration-container');
+    screenElement.appendChild(this._container);
     this.refresh();
     this.register(this._renderService.onRenderedBufferChange(() => this.refresh()));
   }
 
   public registerDecoration(decorationOptions: IDecorationOptions): IDecoration | undefined {
-    if (decorationOptions.marker.isDisposed || !this._screenElement) {
+    if (decorationOptions.marker.isDisposed || !this._container) {
       return undefined;
     }
-    const decoration = new Decoration(decorationOptions, this._screenElement);
+    const decoration = new Decoration(decorationOptions, this._container);
     this._decorations.push(decoration);
     decoration.onDispose(() => this._decorations.splice(this._decorations.indexOf(decoration), 1));
     return decoration;
@@ -74,7 +75,7 @@ class Decoration extends Disposable implements IDecoration {
 
   constructor(
     private readonly _decorationOptions: IDecorationOptions,
-    private readonly _screenElement: HTMLElement
+    private readonly _container: HTMLElement
   ) {
     super();
     this._marker = _decorationOptions.marker;
@@ -84,8 +85,8 @@ class Decoration extends Disposable implements IDecoration {
     if (!this._element) {
       this._createElement(bufferService, renderService);
     }
-    if (this._screenElement && this._element && !this._screenElement.contains(this._element)) {
-      this._screenElement.append(this._element);
+    if (this._container && this._element && !this._container.contains(this._element)) {
+      this._container.append(this._element);
     }
     this._refreshStyle(bufferService, renderService);
     this._onRender.fire(this._element!);
@@ -109,7 +110,7 @@ class Decoration extends Disposable implements IDecoration {
         if (this.isDisposed) {
           return;
         }
-        this._screenElement.removeChild(this._element!);
+        this._container.removeChild(this._element!);
         this.isDisposed = true;
         this._marker.dispose();
         // Emit before super.dispose such that dispose listeners get a change to react
diff --git a/test/api/Terminal.api.ts b/test/api/Terminal.api.ts
index 2f428803..e5a04667 100644
--- a/test/api/Terminal.api.ts
+++ b/test/api/Terminal.api.ts
@@ -731,7 +731,7 @@ describe('API Integration Tests', function(): void {
     await pollFor(page, `window.term._core._renderService.dimensions.actualCellWidth > 0`, true);
   });
 
-  describe('registerDecoration', () => {
+  describe.only('registerDecoration', () => {
     it('should register a decoration', async () => {
       await openTerminal(page);
       await page.evaluate(`window.marker = window.term.addMarker(1)`);
@@ -756,7 +756,7 @@ describe('API Integration Tests', function(): void {
       }
     `);
       await pollFor(page, 'window.throwMessage', 'This API only accepts positive integers');
-      assert.equal(await page.evaluate(`document.querySelector('.xterm-screen .xterm-decoration')`), undefined);
+      assert.equal(await page.evaluate(`document.querySelector('.xterm-screen .xterm-decoration-container .xterm-decoration')`), undefined);
     });
   });