refresh overviewRuler canvas dimensions on refresh of rows

src/browser/Decorations/OverviewRulerRenderer.ts

@@ -38,6 +38,10 @@ export class OverviewRulerRenderer extends Disposable {
   }
   private _animationFrame: number | undefined;
 
+  private _canvasHeight: number | undefined;
+  private _canvasWidth: number | undefined;
+  private _shouldUpdateDimensions: boolean | undefined = true;
+
   constructor(
     private readonly _viewportElement: HTMLElement,
     private readonly _screenElement: HTMLElement,
@@ -62,6 +66,11 @@ export class OverviewRulerRenderer extends Disposable {
       this._canvas!.style.display = this._bufferService.buffer === this._bufferService.buffers.alt ? 'none' : 'block';
     }));
     this.register(this._renderService.onRenderedBufferChange(() => this._queueRefresh()));
+    this.register(this._renderService.onRender(() => {
+      if (this._canvasHeight !== this._screenElement.clientHeight) {
+        this._queueRefresh(true);
+      }
+    }));
     this.register(this._renderService.onDimensionsChange(() => this._queueRefresh(true, true)));
     this.register(addDisposableDomListener(window, 'resize', () => this._queueRefresh(true)));
     this.register(this._decorationService.onDecorationRegistered(() => this._queueRefresh(undefined, true)));
@@ -122,24 +131,36 @@ export class OverviewRulerRenderer extends Disposable {
       /* x */ drawX[decoration.options.overviewRulerOptions.position!],
       /* y */ Math.round(
         (this._canvas.height - 1) * // -1 to ensure at least 2px are allowed for decoration on last line
-        (decoration.options.marker.line / this._bufferService.buffers.active.lines.length) - drawHeight[decoration.options.overviewRulerOptions.position!] / 2
+      (decoration.options.marker.line / this._bufferService.buffers.active.lines.length) - drawHeight[decoration.options.overviewRulerOptions.position!] / 2
       ),
       /* w */ drawWidth[decoration.options.overviewRulerOptions.position!],
       /* h */ drawHeight[decoration.options.overviewRulerOptions.position!]
     );
   }
 
   private _refreshCanvasDimensions(): void {
-    this._canvas.style.width = `${this._width}px`;
-    this._canvas.style.height = `${this._screenElement.clientHeight}px`;
-    this._canvas.width = Math.round(this._width * window.devicePixelRatio);
-    this._canvas.height = Math.round(this._screenElement.clientHeight * window.devicePixelRatio);
-    this._refreshDrawConstants();
+    let updated = false;
+    if (this._canvasWidth !== this._width) {
+      this._canvas.style.width = `${this._width}px`;
+      this._canvas.width = Math.round(this._width * window.devicePixelRatio);
+      this._canvasWidth = this._canvas.width;
+      updated = true;
+    }
+    if (this._canvasHeight !== Math.round(this._screenElement.clientHeight * window.devicePixelRatio)) {
+      this._canvas.style.height = `${this._screenElement.clientHeight}px`;
+      this._canvas.height = Math.round(this._screenElement.clientHeight * window.devicePixelRatio);
+      this._canvasHeight = this._canvas.height;
+      updated = true;
+    }
+    if (updated) {
+      this._refreshDrawConstants();
+    }
   }
 
-  private _refreshDecorations(updateCanvasDimensions?: boolean, updateAnchor?: boolean): void {
-    if (updateCanvasDimensions) {
+  private _refreshDecorations(updateAnchor?: boolean): void {
+    if (this._shouldUpdateDimensions) {
       this._refreshCanvasDimensions();
+      this._shouldUpdateDimensions = false;
     }
     this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
     for (const decoration of this._decorationService.decorations) {
@@ -165,10 +186,11 @@ export class OverviewRulerRenderer extends Disposable {
 
   private _queueRefresh(updateCanvasDimensions?: boolean, updateAnchor?: boolean): void {
     if (this._animationFrame !== undefined) {
+      this._shouldUpdateDimensions = updateCanvasDimensions || this._shouldUpdateDimensions;
       return;
     }
     this._animationFrame = window.requestAnimationFrame(() => {
-      this._refreshDecorations(updateCanvasDimensions, updateAnchor);
+      this._refreshDecorations(updateAnchor);
       this._animationFrame = undefined;
     });
   }

src/browser/Terminal.ts

@@ -613,7 +613,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.optionsService.onOptionChange(() => {
       if (!this._overviewRulerRenderer && this.options.overviewRulerWidth && this._viewportElement && this.screenElement) {
         this._overviewRulerRenderer = this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement);
-      }});
+      }
+    });
     // Measure the character size
     this._charSizeService.measure();
 

src/browser/TestUtils.test.ts

@@ -371,6 +371,7 @@ export class MockRenderService implements IRenderService {
   public serviceBrand: undefined;
   public onDimensionsChange: IEvent<IRenderDimensions> = new EventEmitter<IRenderDimensions>().event;
   public onRenderedBufferChange: IEvent<{ start: number, end: number }, void> = new EventEmitter<{ start: number, end: number }>().event;
+  public onRender: IEvent<{ start: number, end: number }, void> = new EventEmitter<{ start: number, end: number }>().event;
   public onRefreshRequest: IEvent<{ start: number, end: number}, void> = new EventEmitter<{ start: number, end: number }>().event;
   public dimensions: IRenderDimensions = {
     scaledCharWidth: 0,

src/browser/services/RenderService.ts

@@ -39,8 +39,10 @@ export class RenderService extends Disposable implements IRenderService {
 
   private _onDimensionsChange = new EventEmitter<IRenderDimensions>();
   public get onDimensionsChange(): IEvent<IRenderDimensions> { return this._onDimensionsChange.event; }
+  private _onRenderedBufferChange = new EventEmitter<{ start: number, end: number }>();
+  public get onRenderedBufferChange(): IEvent<{ start: number, end: number }> { return this._onRenderedBufferChange.event; }
   private _onRender = new EventEmitter<{ start: number, end: number }>();
-  public get onRenderedBufferChange(): IEvent<{ start: number, end: number }> { return this._onRender.event; }
+  public get onRender(): IEvent<{ start: number, end: number }> { return this._onRender.event; }
   private _onRefreshRequest = new EventEmitter<{ start: number, end: number }>();
   public get onRefreshRequest(): IEvent<{ start: number, end: number }> { return this._onRefreshRequest.event; }
 
@@ -122,8 +124,9 @@ export class RenderService extends Disposable implements IRenderService {
 
     // Fire render event only if it was not a redraw
     if (!this._isNextRenderRedrawOnly) {
-      this._onRender.fire({ start, end });
+      this._onRenderedBufferChange.fire({ start, end });
     }
+    this._onRender.fire({ start, end });
     this._isNextRenderRedrawOnly = true;
   }
 

src/browser/services/Services.ts

@@ -50,6 +50,10 @@ export interface IRenderService extends IDisposable {
    * or selections are rendered.
    */
   onRenderedBufferChange: IEvent<{ start: number, end: number }>;
+  /**
+   * Fires on render
+   */
+  onRender: IEvent<{ start: number, end: number }>;
   onRefreshRequest: IEvent<{ start: number, end: number }>;
 
   dimensions: IRenderDimensions;