From be1fd48e96a617f3758d179ebfb0386a382af942 Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Tue, 31 May 2022 15:32:21 -0400 Subject: [PATCH] [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 --- packages/react-devtools-extensions/src/main.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index a0f9bcea17a29..156eb81d07de7 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/packages/react-devtools-extensions/src/main.js @@ -30,6 +30,23 @@ 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 +// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0 +if (isChrome || isEdge) { + 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; // The renderer interface can't read saved component filters directly,