[pull] main from microsoft:main

src/vs/base/browser/dom.ts

@@ -11,7 +11,7 @@ import { AbstractIdleValue, IntervalTimer, TimeoutTimer, _runWhenIdle, IdleDeadl
 import { BugIndicatingError, onUnexpectedError } from '../common/errors.js';
 import * as event from '../common/event.js';
 import { KeyCode } from '../common/keyCodes.js';
-import { Disposable, DisposableStore, IDisposable, toDisposable } from '../common/lifecycle.js';
+import { Disposable, DisposableStore, IDisposable, MutableDisposable, toDisposable } from '../common/lifecycle.js';
 import { RemoteAuthorities } from '../common/network.js';
 import * as platform from '../common/platform.js';
 import { URI } from '../common/uri.js';
@@ -413,6 +413,57 @@ export function modify(targetWindow: Window, callback: () => void): IDisposable
 	return scheduleAtNextAnimationFrame(targetWindow, callback, -10000 /* must be late */);
 }
 
+/**
+ * A scheduler that coalesces multiple `schedule()` calls into a single callback
+ * at the next animation frame. Similar to `RunOnceScheduler` but uses animation frames
+ * instead of timeouts.
+ */
+export class AnimationFrameScheduler implements IDisposable {
+
+	private readonly runner: () => void;
+	private readonly node: Node;
+	private readonly pendingRunner = new MutableDisposable<IDisposable>();
+
+	constructor(node: Node, runner: () => void) {
+		this.node = node;
+		this.runner = runner;
+	}
+
+	dispose(): void {
+		this.pendingRunner.dispose();
+	}
+
+	/**
+	 * Cancel the currently scheduled runner (if any).
+	 */
+	cancel(): void {
+		this.pendingRunner.clear();
+	}
+
+	/**
+	 * Schedule the runner to execute at the next animation frame.
+	 * If already scheduled, this is a no-op (the existing schedule is kept).
+	 * If currently in an animation frame, the runner will execute immediately.
+	 */
+	schedule(): void {
+		if (this.pendingRunner.value) {
+			return; // Already scheduled
+		}
+
+		this.pendingRunner.value = runAtThisOrScheduleAtNextAnimationFrame(getWindow(this.node), () => {
+			this.pendingRunner.clear();
+			this.runner();
+		});
+	}
+
+	/**
+	 * Returns true if a runner is scheduled.
+	 */
+	isScheduled(): boolean {
+		return this.pendingRunner.value !== undefined;
+	}
+}
+
 /**
  * Add a throttled listener. `handler` is fired at most every 8.33333ms or with the next animation frame (if browser supports it).
  */

src/vs/base/test/browser/dom.test.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import assert from 'assert';
-import { $, h, trackAttributes, copyAttributes, disposableWindowInterval, getWindows, getWindowsCount, getWindowId, getWindowById, hasWindow, getWindow, getDocument, isHTMLElement, SafeTriangle } from '../../browser/dom.js';
+import { $, h, trackAttributes, copyAttributes, disposableWindowInterval, getWindows, getWindowsCount, getWindowId, getWindowById, hasWindow, getWindow, getDocument, isHTMLElement, SafeTriangle, AnimationFrameScheduler } from '../../browser/dom.js';
 import { asCssValueWithDefault } from '../../../base/browser/cssValue.js';
 import { ensureCodeWindow, isAuxiliaryWindow, mainWindow } from '../../browser/window.js';
 import { DeferredPromise, timeout } from '../../common/async.js';
@@ -435,5 +435,102 @@ suite('dom', () => {
 		});
 	});
 
+	suite('AnimationFrameScheduler', () => {
+		// Helper to wait for an animation frame
+		const waitForAnimationFrame = () => new Promise<void>(resolve => mainWindow.requestAnimationFrame(() => resolve()));
+
+		test('schedules and runs the callback', async () => {
+			const node = document.createElement('div');
+			let callCount = 0;
+			const scheduler = new AnimationFrameScheduler(node, () => {
+				callCount++;
+			});
+
+			assert.strictEqual(scheduler.isScheduled(), false);
+			scheduler.schedule();
+			assert.strictEqual(scheduler.isScheduled(), true);
+
+			// Wait for the animation frame
+			await waitForAnimationFrame();
+
+			assert.strictEqual(callCount, 1);
+			assert.strictEqual(scheduler.isScheduled(), false);
+			scheduler.dispose();
+		});
+
+		test('coalesces multiple schedule calls', async () => {
+			const node = document.createElement('div');
+			let callCount = 0;
+			const scheduler = new AnimationFrameScheduler(node, () => {
+				callCount++;
+			});
+
+			scheduler.schedule();
+			scheduler.schedule();
+			scheduler.schedule();
+
+			assert.strictEqual(scheduler.isScheduled(), true);
+
+			// Wait for the animation frame
+			await waitForAnimationFrame();
+
+			assert.strictEqual(callCount, 1);
+			scheduler.dispose();
+		});
+
+		test('cancel prevents execution', async () => {
+			const node = document.createElement('div');
+			let callCount = 0;
+			const scheduler = new AnimationFrameScheduler(node, () => {
+				callCount++;
+			});
+
+			scheduler.schedule();
+			assert.strictEqual(scheduler.isScheduled(), true);
+			scheduler.cancel();
+			assert.strictEqual(scheduler.isScheduled(), false);
+
+			// Wait for the animation frame
+			await waitForAnimationFrame();
+
+			assert.strictEqual(callCount, 0);
+			scheduler.dispose();
+		});
+
+		test('dispose prevents execution', async () => {
+			const node = document.createElement('div');
+			let callCount = 0;
+			const scheduler = new AnimationFrameScheduler(node, () => {
+				callCount++;
+			});
+
+			scheduler.schedule();
+			scheduler.dispose();
+
+			// Wait for the animation frame
+			await waitForAnimationFrame();
+
+			assert.strictEqual(callCount, 0);
+		});
+
+		test('can schedule again after execution', async () => {
+			const node = document.createElement('div');
+			let callCount = 0;
+			const scheduler = new AnimationFrameScheduler(node, () => {
+				callCount++;
+			});
+
+			scheduler.schedule();
+			await waitForAnimationFrame();
+			assert.strictEqual(callCount, 1);
+
+			scheduler.schedule();
+			await waitForAnimationFrame();
+			assert.strictEqual(callCount, 2);
+
+			scheduler.dispose();
+		});
+	});
+
 	ensureNoDisposablesAreLeakedInTestSuite();
 });