From fdee637c88fda529b4b9dd1208f9cb7d9c1f4b96 Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Fri, 17 Feb 2023 14:57:15 -0500 Subject: [PATCH] [DevTools] permanantly polyfill for rAF in devtools_page --- .../react-devtools-extensions/src/main.js | 37 +++++++------------ 1 file changed, 14 insertions(+), 23 deletions(-) diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index 1e1fd25ad0d08..eccea0177b26e 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/packages/react-devtools-extensions/src/main.js @@ -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;