share animation frame with renderService

src/browser/RenderDebouncer.ts

@@ -26,6 +26,10 @@ export class RenderDebouncer implements IRenderDebouncer {
     }
   }
 
+  public requestAnimationFrame(): boolean {
+    return this._animationFrame === undefined;
+  }
+
   public refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void {
     this._rowCount = rowCount;
     // Get the min/max row start/end for the arg values

src/browser/TestUtils.test.ts

@@ -390,6 +390,9 @@ export class MockRenderService implements IRenderService {
   public refreshRows(start: number, end: number): void {
     throw new Error('Method not implemented.');
   }
+  public getAnimationFrame(): boolean {
+    throw new Error('Method not implemented.');
+  }
   public clearTextureAtlas(): void {
     throw new Error('Method not implemented.');
   }

src/browser/TimeBasedDebouncer.ts

@@ -27,6 +27,10 @@ export class TimeBasedDebouncer implements IRenderDebouncer {
     private readonly _debounceThresholdMS = RENDER_DEBOUNCE_THRESHOLD_MS
   ) {
   }
+  public requestAnimationFrame(): boolean {
+    const refreshRequestTime: number = Date.now();
+    return refreshRequestTime - this._lastRefreshMs >= this._debounceThresholdMS;
+  }
 
   public dispose(): void {
     if (this._refreshTimeoutID) {

src/browser/Types.d.ts

@@ -308,4 +308,5 @@ export interface ICharacterJoiner {
 
 export interface IRenderDebouncer extends IDisposable {
   refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void;
+  requestAnimationFrame(): boolean;
 }

src/browser/decorations/BufferDecorationRenderer.ts

@@ -12,7 +12,6 @@ export class BufferDecorationRenderer extends Disposable {
   private readonly _container: HTMLElement;
   private readonly _decorationElements: Map<IInternalDecoration, HTMLElement> = new Map();
 
-  private _animationFrame: number | undefined;
   private _altBufferIsActive: boolean = false;
 
   constructor(
@@ -44,13 +43,10 @@ export class BufferDecorationRenderer extends Disposable {
   }
 
   private _queueRefresh(): void {
-    if (this._animationFrame !== undefined) {
+    if (!this._renderService.getAnimationFrame()) {
       return;
     }
-    this._animationFrame = window.requestAnimationFrame(() => {
-      this.refreshDecorations();
-      this._animationFrame = undefined;
-    });
+    this.refreshDecorations();
   }
 
   public refreshDecorations(): void {

src/browser/services/RenderService.ts

@@ -95,6 +95,10 @@ export class RenderService extends Disposable implements IRenderService {
     }
   }
 
+  public getAnimationFrame(): boolean {
+    return this._renderDebouncer.requestAnimationFrame();
+  }
+
   private _onIntersectionChange(entry: IntersectionObserverEntry): void {
     this._isPaused = entry.isIntersecting === undefined ? (entry.intersectionRatio === 0) : !entry.isIntersecting;
 

src/browser/services/Services.ts

@@ -73,6 +73,7 @@ export interface IRenderService extends IDisposable {
   onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
   onCursorMove(): void;
   clear(): void;
+  getAnimationFrame(): boolean;
 }
 
 export const ISelectionService = createDecorator<ISelectionService>('SelectionService');