maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[DevTools] permanently polyfill for rAF in devtools_page (#26193) 

## Summary

We had this as a temporary fix for #24626. Now that Chrome team decides
to turn the flag on again (with good reasons explained in
https://bugs.chromium.org/p/chromium/issues/detail?id=1241986#c31), we
will turn it into a long term solution.
In the future, we want to explore whether we can render React elements
on panel.html instead, as `requestAnimationFrame` produces higher
quality animation.

## How did you test this change?

Tested on local build with "Throttle non-visible cross-origin iframes"
flag enabled.
This commit is contained in:
Mengdi Chen 2023-02-23 16:53:11 -05:00 committed by GitHub
parent bfb9cbd8ca
commit ca2cf319fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/react-devtools-extensions/src/main.js vendored
View File

@ -30,29 +30,20 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
const isChrome = getBrowserName() === 'Chrome';
const isEdge = getBrowserName() === 'Edge';
// since Chromium v102, requestAnimationFrame no longer fires in devtools_page (i.e. this file)
// mock requestAnimationFrame with setTimeout as a temporary workaround
// https://github.com/facebook/react/issues/24626
if (isChrome || isEdge) {
const timeoutID = setTimeout(() => {
// if requestAnimationFrame is not working, polyfill it
// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
const FRAME_TIME = 16;
let lastTime = 0;
window.requestAnimationFrame = function (callback, element) {
const now = window.performance.now();
const nextTime = Math.max(lastTime + FRAME_TIME, now);
return setTimeout(function () {
callback((lastTime = nextTime));
}, nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
}, 400);
requestAnimationFrame(() => {
clearTimeout(timeoutID);
});
}
// rAF never fires on devtools_page (because it's in the background)
// https://bugs.chromium.org/p/chromium/issues/detail?id=1241986#c31
// Since we render React elements here, we need to polyfill it with setTimeout
// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
const FRAME_TIME = 16;
let lastTime = 0;
window.requestAnimationFrame = function (callback, element) {
const now = window.performance.now();
const nextTime = Math.max(lastTime + FRAME_TIME, now);
return setTimeout(function () {
callback((lastTime = nextTime));
}, nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
let panelCreated = false;