Skip to content

Commit ca2cf31

Browse files
authored
[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.
1 parent bfb9cbd commit ca2cf31

File tree

1 file changed

+14
-23
lines changed
  • packages/react-devtools-extensions/src

1 file changed

+14
-23
lines changed

packages/react-devtools-extensions/src/main.js

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -30,29 +30,20 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
3030
const isChrome = getBrowserName() === 'Chrome';
3131
const isEdge = getBrowserName() === 'Edge';
3232

33-
// since Chromium v102, requestAnimationFrame no longer fires in devtools_page (i.e. this file)
34-
// mock requestAnimationFrame with setTimeout as a temporary workaround
35-
// https://github.com/facebook/react/issues/24626
36-
if (isChrome || isEdge) {
37-
const timeoutID = setTimeout(() => {
38-
// if requestAnimationFrame is not working, polyfill it
39-
// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
40-
const FRAME_TIME = 16;
41-
let lastTime = 0;
42-
window.requestAnimationFrame = function (callback, element) {
43-
const now = window.performance.now();
44-
const nextTime = Math.max(lastTime + FRAME_TIME, now);
45-
return setTimeout(function () {
46-
callback((lastTime = nextTime));
47-
}, nextTime - now);
48-
};
49-
window.cancelAnimationFrame = clearTimeout;
50-
}, 400);
51-
52-
requestAnimationFrame(() => {
53-
clearTimeout(timeoutID);
54-
});
55-
}
33+
// rAF never fires on devtools_page (because it's in the background)
34+
// https://bugs.chromium.org/p/chromium/issues/detail?id=1241986#c31
35+
// Since we render React elements here, we need to polyfill it with setTimeout
36+
// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
37+
const FRAME_TIME = 16;
38+
let lastTime = 0;
39+
window.requestAnimationFrame = function (callback, element) {
40+
const now = window.performance.now();
41+
const nextTime = Math.max(lastTime + FRAME_TIME, now);
42+
return setTimeout(function () {
43+
callback((lastTime = nextTime));
44+
}, nextTime - now);
45+
};
46+
window.cancelAnimationFrame = clearTimeout;
5647

5748
let panelCreated = false;
5849

0 commit comments

Comments
 (0)