From b7c0332626f4667aba7705f8d7e867820f4195a0 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Mon, 9 May 2022 10:49:58 -0700
Subject: [PATCH] Only create decoration elements when they are actually
 rendered

Part of microsoft/vscode#145751
---
 .../Decorations/BufferDecorationRenderer.ts   | 28 ++++++++++---------
 src/common/services/DecorationService.ts      |  2 ++
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/browser/Decorations/BufferDecorationRenderer.ts b/src/browser/Decorations/BufferDecorationRenderer.ts
index 22dc73e9..dbe30187 100644
--- a/src/browser/Decorations/BufferDecorationRenderer.ts
+++ b/src/browser/Decorations/BufferDecorationRenderer.ts
@@ -60,17 +60,7 @@ export class BufferDecorationRenderer extends Disposable {
   }
 
   private _renderDecoration(decoration: IInternalDecoration): void {
-    let element = this._decorationElements.get(decoration);
-    if (!element) {
-      element = this._createElement(decoration);
-      decoration.onDispose(() => this._removeDecoration(decoration));
-      decoration.marker.onDispose(() => decoration.dispose());
-      decoration.element = element;
-      this._decorationElements.set(decoration, element);
-      this._container.appendChild(element);
-    }
-    this._refreshStyle(decoration, element);
-    decoration.onRenderEmitter.fire(element);
+    this._refreshStyle(decoration);
   }
 
   private _createElement(decoration: IInternalDecoration): HTMLElement {
@@ -95,14 +85,26 @@ export class BufferDecorationRenderer extends Disposable {
     return element;
   }
 
-  private _refreshStyle(decoration: IInternalDecoration, element: HTMLElement): void {
+  private _refreshStyle(decoration: IInternalDecoration): void {
     const line = decoration.marker.line - this._bufferService.buffers.active.ydisp;
     if (line < 0 || line >= this._bufferService.rows) {
       // outside of viewport
-      element.style.display = 'none';
+      if (decoration.element) {
+        decoration.element.style.display = 'none';
+        decoration.onRenderEmitter.fire(decoration.element);
+      }
     } else {
+      let element = this._decorationElements.get(decoration);
+      if (!element) {
+        decoration.onDispose(() => this._removeDecoration(decoration));
+        element = this._createElement(decoration);
+        decoration.element = element;
+        this._decorationElements.set(decoration, element);
+        this._container.appendChild(element);
+      }
       element.style.top = `${line * this._renderService.dimensions.actualCellHeight}px`;
       element.style.display = this._altBufferIsActive ? 'none' : 'block';
+      decoration.onRenderEmitter.fire(element);
     }
   }
 
diff --git a/src/common/services/DecorationService.ts b/src/common/services/DecorationService.ts
index 03cfab4d..61936e15 100644
--- a/src/common/services/DecorationService.ts
+++ b/src/common/services/DecorationService.ts
@@ -30,6 +30,7 @@ export class DecorationService extends Disposable implements IDecorationService
     }
     const decoration = new Decoration(options);
     if (decoration) {
+      const markerDispose = decoration.marker.onDispose(() => decoration.dispose());
       decoration.onDispose(() => {
         if (decoration) {
           const index = this._decorations.indexOf(decoration);
@@ -37,6 +38,7 @@ export class DecorationService extends Disposable implements IDecorationService
             this._decorations.splice(this._decorations.indexOf(decoration), 1);
             this._onDecorationRemoved.fire(decoration);
           }
+          markerDispose.dispose();
         }
       });
       this._decorations.push(decoration);