refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime (#27215)

Fixes https://github.com/facebook/react/issues/27119,
https://github.com/facebook/react/issues/27185.

Fixed:
- React DevTools now works as expected when user performs in-tab
navigation, previously it was just stuck.

https://github.com/facebook/react/assets/28902667/b11c5f84-7155-47a5-8b5a-7e90baca5347

- When user closes browser DevTools panel, we now do some cleanup to
disconnect ports and emit shutdown event for bridge. This should fix the
issue with registering duplicated fibers with the same id in Store.

Changed:
- We reconnect proxy port once in 25 seconds, in order to [keep service
worker
alive](https://developer.chrome.com/docs/extensions/whatsnew/#m110-sw-idle).
- Instead of unregistering dynamically injected content scripts, wen now
get list of already registered scripts and filter them out from scripts
that we want to inject again, see dynamicallyInjectContentScripts.js.
- Split `main.js` and `background.js` into multiple files.

Tested on Chromium and Firefox browsers.

DiffTrain build for commit https://github.com/facebook/react/commit/8fbd3079425eaff85ec1b52b0eefecdd44ba7289.
This commit is contained in:
hoxyq
2023-08-29 11:15:24 +00:00
parent 1d32512cf8
commit b82f45eccb
7 changed files with 9 additions and 9 deletions
@@ -23986,7 +23986,7 @@ function createFiberRoot(
return root;
}
var ReactVersion = "18.3.0-canary-f47956239-20230829";
var ReactVersion = "18.3.0-canary-8fbd30794-20230829";
// Might add PROFILE later.
@@ -8612,7 +8612,7 @@ var devToolsConfig$jscomp$inline_1027 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-f47956239-20230829",
version: "18.3.0-canary-8fbd30794-20230829",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1226 = {
@@ -8643,7 +8643,7 @@ var internals$jscomp$inline_1226 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-f47956239-20230829"
reconcilerVersion: "18.3.0-canary-8fbd30794-20230829"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1227 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -9038,7 +9038,7 @@ var devToolsConfig$jscomp$inline_1069 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-f47956239-20230829",
version: "18.3.0-canary-8fbd30794-20230829",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1267 = {
@@ -9069,7 +9069,7 @@ var internals$jscomp$inline_1267 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-f47956239-20230829"
reconcilerVersion: "18.3.0-canary-8fbd30794-20230829"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1268 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -27,7 +27,7 @@ if (
}
"use strict";
var ReactVersion = "18.3.0-canary-f47956239-20230829";
var ReactVersion = "18.3.0-canary-8fbd30794-20230829";
// ATTENTION
// When adding new symbols to this file,
@@ -616,4 +616,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-f47956239-20230829";
exports.version = "18.3.0-canary-8fbd30794-20230829";
@@ -619,7 +619,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-f47956239-20230829";
exports.version = "18.3.0-canary-8fbd30794-20230829";
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
@@ -1 +1 @@
f47956239f6892a1e805af1fc3f1b2fb0f66beca
8fbd3079425eaff85ec1b52b0eefecdd44ba7289