From fdee637c88fda529b4b9dd1208f9cb7d9c1f4b96 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
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;