Only create decoration elements when they are actually rendered

Part of microsoft/vscode#145751

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);
     }
   }
 

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);