[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.
Mengdi Chen committed
Feb 23, 2023 at 16:53 UTC
ca2cf319fdfcf6e5f048e082f5169bc1b849c129
1 file changed
+14
-23
packages/react-devtools-extensions/src/main.js
+14
-23
@@ -30,29 +30,20 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
30
const isChrome = getBrowserName() === 'Chrome';
31
const isEdge = getBrowserName() === 'Edge';
32
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;
47
48
let panelCreated = false;
49