animationFrames should emit the timestamp from requestAnimationFrame's callback

[kirk-l]

Bug Report

Opening a bug report, per @cartant here.

Current Behavior
Why doesn't the animationFrames Observable -- added in #5021 -- pass the DOMHighResTimeStamp that the requestAnimationFrame callback receives, to its subscribers? According to MDN:

When callbacks queued by requestAnimationFrame() begin to fire multiple callbacks in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.

This is critical when running multiple rAF loops to keep them in sync. The current default implementation, using Date.now(), will emit slightly different values for each loop and to each subscriber.

Reproduction
Comparison of using two Observables with the rAF timestamp, then two uses of Date in animationFrames. The two timestamps always show the same elapsed ms, while the two Dates will (randomly) show different elapsed ms.
https://codepen.io/kirk-l/pen/BayZQyK

Expected behavior
Pass the timestamp from requestAnimationFrame's callback to subscribers.

Environment

• Runtime: browser
• RxJS version: 7.0.0-alpha

Possible Solution
Here's the implementation I use:

const animationFrames = new Observable(subscriber => {
    let requestId = window.requestAnimationFrame(function step(timestamp) {
        subscriber.next(timestamp);
        if (!subscriber.closed) {
            requestId = window.requestAnimationFrame(step);
        }
    });
    return () => window.cancelAnimationFrame(requestId);
});

// And to get the elapsed milliseconds:
const elapsedMs = defer(() => {
    let start = null;
    return animationFrames.pipe(
        tap(timestamp => start === null && (start = timestamp)),
        map(timestamp => timestamp - start),
    );
});

I think this would be a better animationFrames Observable.