[DevTools] mock requestAnimationFrame with setTimeout as a temporary fix for #24626 (#24633)
* mock requestAnimationFrame as a temp workaround for #24626 * give name to constant variable
Mengdi Chen committed
May 31, 2022 at 15:32 UTC
be1fd48e96a617f3758d179ebfb0386a382af942
1 file changed
+17
packages/react-devtools-extensions/src/main.js
+17
@@ -30,6 +30,23 @@ 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
+// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
37
+if (isChrome || isEdge) {
38
+ const FRAME_TIME = 16;
39
+ let lastTime = 0;
40
+ window.requestAnimationFrame = function(callback, element) {
41
+ const now = window.performance.now();
42
+ const nextTime = Math.max(lastTime + FRAME_TIME, now);
43
+ return setTimeout(function() {
44
+ callback((lastTime = nextTime));
45
+ }, nextTime - now);
46
+ };
47
+ window.cancelAnimationFrame = clearTimeout;
48
+}
49
+
50
let panelCreated = false;
51
52
// The renderer interface can't read saved component filters directly,