Merge pull request #796 from bvaughn/update-react-devtools

Update React DevTools backend from 4.17.0 to 4.24.3 

Relates to frontend PR replayio/devtools#6075

This commit updates the React DevTools (Firefox) `react_devtools_backend.js`:
* From: version 4.17.0 (created on 08/24/2021 from revision b9964684bd8c909fc3d88f1cd47aa1f45ea7ba32)
* To: version 4.24.3 (created on 03/29/2022 from revision adb8ebc927ea091ba5ffba6a9f30dbe62eaee0c5)

This commit also updates `hook.js` by doing the following:
* Opened `packages/react-devtools-shared/src/hook.js` in the React repo.
* Stripped the Flow annotations from the file (using the Babel REPL for convenience.)
* Manually added the `__DEV__`, `__EXTENSION__`, and `__TEST__` constants at the top of the file.
* Manually deleted the import statement at the top of the file.
* Manually re-add the `exports.installHook = installHook;` statement at the end of the file.

devtools/server/actors/replay/react-devtools/README.md

@@ -2,28 +2,28 @@
 
 The files in this directory are from the React Devtools (https://github.com/facebook/react/tree/master/packages/react-devtools), and are loaded into recording processes so that the devtools hooks will be detected by any React application on the page and allow events to be sent to the driver and from there on to any clients viewing the recording.
 
-From the base React revision b9964684bd8c909fc3d88f1cd47aa1f45ea7ba32, the other files are as follows:
+From the base React revision [`adb8ebc927ea091ba5ffba6a9f30dbe62eaee0c5`](https://github.com/facebook/react/commit/adb8ebc927ea091ba5ffba6a9f30dbe62eaee0c5), the other files are as follows:
 
 ### contentScript.js
 
-Modified from `react/packages/react-devtools-extensions/src/contentScript.js`
+Modified from (react) [`packages/react-devtools-extensions/src/contentScript.js`](https://github.com/facebook/react/blob/main/packages/react-devtools-extensions/src/contentScript.js).
 
 ### hook.js
 
-Modified from `packages/react-devtools-shared/src/hook.js`
+Modified from (react) [`packages/react-devtools-shared/src/hook.js`](https://github.com/facebook/react/blob/main/packages/react-devtools-shared/src/hook.js).
 
 ### react_devtools_backend.js
 
 After building React, this is modified from the generated file `packages/react-devtools-extensions/firefox/build/unpacked/build/react_devtools_backend.js` with the patch below.
 
-```
+```diff
 @@ -1,3 +1,5 @@
 +function reactDevtoolsBackend(window) {
 +
  /******/ (function(modules) { // webpackBootstrap
- /******/ 	// The module cache
- /******/ 	var installedModules = {};
-@@ -10498,6 +10500,18 @@
+ /******/    // The module cache
+ /******/    var installedModules = {};
+@@ -11462,6 +11464,18 @@ class agent_Agent extends events["a" /* default */] {
      bridge.send('isSynchronousXHRSupported', Object(utils["h" /* isSynchronousXHRSupported */])());
      setupHighlighter(bridge, this);
      TraceUpdates_initialize(this);
@@ -42,16 +42,16 @@ After building React, this is modified from the generated file `packages/react-d
    }
 
    get rendererInterfaces() {
-@@ -11444,7 +11458,7 @@
- 
+@@ -12946,7 +12960,7 @@ function getStackByFiberInDevAndProd(workTagMap, workInProgress, currentDispatch
+ let welcomeHasInitialized = false;
 
  function welcome(event) {
 -  if (event.source !== window || event.data.source !== 'react-devtools-content-script') {
 +  if (event.data.source !== 'react-devtools-content-script') {
      return;
-   }
- 
-@@ -11487,13 +11501,8 @@
+   } // In some circumstances, this method is called more than once for a single welcome message.
+   // The exact circumstances of this are unclear, though it seems related to 3rd party event batching code.
+@@ -13005,13 +13019,8 @@ function setup(hook) {
      },
 
      send(event, payload, transferable) {
@@ -67,11 +67,12 @@ After building React, this is modified from the generated file `packages/react-d
      }
 
    });
-@@ -15243,4 +15252,8 @@
+@@ -16548,4 +16557,8 @@ function setStyle(agent, id, rendererID, name, value) {
  }
 
  /***/ })
- /******/ ]);
+-/******/ ]);
++/******/ ]);
 +
 +}
 +
@@ -80,15 +81,34 @@ After building React, this is modified from the generated file `packages/react-d
 
 ## Updating to a newer version of React Devtools
 
-* clone the React repository and build the firefox extension: 
-  ```
-  git clone https://github.com/facebook/react.git
-  cd react
-  yarn
-  yarn build-for-devtools
-  cd packages/react-devtools-extensions/
-  yarn build:firefox
-  ```
-* copy `packages/react-devtools-extensions/firefox/build/unpacked/build/react_devtools_backend.js` to this folder and apply the modifications from the patch above
-* check if there have been any changes in `packages/react-devtools-shared/src/hook.js` since the last update and apply them to the file in this folder
-* update the React revision and the patch in this file
+1. Clone the React repository and build the firefox extension:
+```sh
+git clone https://github.com/facebook/react.git
+
+cd react
+
+# Install build dependencies.
+yarn install
+
+cd scripts/release/
+
+# Install release script dependencies.
+yarn install
+
+cd ../../
+
+# Download the latest React release (built from CI).
+# You can build this locally too but it's much slower.
+scripts/release/download-experimental-build.js --commit=main
+
+cd packages/react-devtools-extensions/
+
+# Build the Firefox extension
+yarn build:firefox
+```
+
+2. Copy `packages/react-devtools-extensions/firefox/build/unpacked/build/react_devtools_backend.js` to this folder and apply the modifications from the patch above.
+
+3. Check if there have been any changes in `packages/react-devtools-shared/src/hook.js` since the last update and apply them to the file in this folder.
+
+4. Update the React revision and the patch in this file