refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection #27336

hoxyq · 2023-09-05T14:43:39Z

Instead of reconnecting ports from devtools page and proxy content script, now handling their disconnection properly
proxy.js is now dynamically registered as a content script, which loaded for each page. This will probably not work well for Firefox, since we are still on manifest v2, I will try to fix this in the next few PRs.
Handling the case when devtools page port was reconnected and bridge is still present. This could happen if user switches the tab and Chrome decides to kill service worker, devtools page port gets disconnected, and then user returns back to the tab. When port is reconnected, we check if bridge message listener is present, connecting them if so.
Added simple debounce when evaluating if page has react application running. We start this check in chrome.network.onNavigated listener, which is asynchronous. Also, this check itself is asynchronous, so previously we could mount React DevTools multiple times if navigates multiple times while chrome.devtools.inspectedWindow.eval (which is also asynchronous) can be executed. https://github.com/hoxyq/react/blob/00b7c4331819289548b40714aea12335368e10f4/packages/react-devtools-extensions/src/main/index.js#L575-L583

Screen.Recording.2023-09-05.at.15.48.23.mov

…frequent reconnections

Biki-das · 2023-09-05T14:55:25Z

@hoxyq awesome work!

This is a patch version to fix some bugs in a previous internal release. I am expecting this one also to be internal-only, need to make sure that extension is stable in Chrome. Some changes and improvements are expected for Firefox, though, before going public. * refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection ([hoxyq](https://github.com/hoxyq) in [#27336](#27336)) * refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded ([hoxyq](https://github.com/hoxyq) in [#27323](#27323)) * fix[devtools/extension]: fixed duplicating panels in firefox ([hoxyq](https://github.com/hoxyq) in [#27320](#27320))

…frequent reconnection (facebook#27336) - Instead of reconnecting ports from devtools page and proxy content script, now handling their disconnection properly - `proxy.js` is now dynamically registered as a content script, which loaded for each page. This will probably not work well for Firefox, since we are still on manifest v2, I will try to fix this in the next few PRs. - Handling the case when devtools page port was reconnected and bridge is still present. This could happen if user switches the tab and Chrome decides to kill service worker, devtools page port gets disconnected, and then user returns back to the tab. When port is reconnected, we check if bridge message listener is present, connecting them if so. - Added simple debounce when evaluating if page has react application running. We start this check in `chrome.network.onNavigated` listener, which is asynchronous. Also, this check itself is asynchronous, so previously we could mount React DevTools multiple times if navigates multiple times while `chrome.devtools.inspectedWindow.eval` (which is also asynchronous) can be executed. https://github.com/hoxyq/react/blob/00b7c4331819289548b40714aea12335368e10f4/packages/react-devtools-extensions/src/main/index.js#L575-L583 https://github.com/facebook/react/assets/28902667/9d519a77-145e-413c-b142-b5063223d073

This is a patch version to fix some bugs in a previous internal release. I am expecting this one also to be internal-only, need to make sure that extension is stable in Chrome. Some changes and improvements are expected for Firefox, though, before going public. * refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection ([hoxyq](https://github.com/hoxyq) in [facebook#27336](facebook#27336)) * refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded ([hoxyq](https://github.com/hoxyq) in [facebook#27323](facebook#27323)) * fix[devtools/extension]: fixed duplicating panels in firefox ([hoxyq](https://github.com/hoxyq) in [facebook#27320](facebook#27320))

…frequent reconnection (#27336) - Instead of reconnecting ports from devtools page and proxy content script, now handling their disconnection properly - `proxy.js` is now dynamically registered as a content script, which loaded for each page. This will probably not work well for Firefox, since we are still on manifest v2, I will try to fix this in the next few PRs. - Handling the case when devtools page port was reconnected and bridge is still present. This could happen if user switches the tab and Chrome decides to kill service worker, devtools page port gets disconnected, and then user returns back to the tab. When port is reconnected, we check if bridge message listener is present, connecting them if so. - Added simple debounce when evaluating if page has react application running. We start this check in `chrome.network.onNavigated` listener, which is asynchronous. Also, this check itself is asynchronous, so previously we could mount React DevTools multiple times if navigates multiple times while `chrome.devtools.inspectedWindow.eval` (which is also asynchronous) can be executed. https://github.com/hoxyq/react/blob/00b7c4331819289548b40714aea12335368e10f4/packages/react-devtools-extensions/src/main/index.js#L575-L583 https://github.com/facebook/react/assets/28902667/9d519a77-145e-413c-b142-b5063223d073 DiffTrain build for commit a27df56.

hoxyq requested a review from gsathya September 5, 2023 14:43

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Sep 5, 2023

refactor[devtools/extension]: handle ports disconnection, instead of …

93675f2

…frequent reconnections

hoxyq force-pushed the devtools/refactor-ports-management branch from 00b7c43 to 93675f2 Compare September 5, 2023 14:51

gsathya approved these changes Sep 5, 2023

View reviewed changes

hoxyq merged commit a27df56 into facebook:main Sep 5, 2023
36 checks passed

hoxyq deleted the devtools/refactor-ports-management branch September 5, 2023 17:41

hoxyq mentioned this pull request Sep 5, 2023

React DevTools 4.28.2 -> 4.28.3 #27337

Merged

hoxyq mentioned this pull request Sep 13, 2023

fix[devtools/extension]: unregister dynamically injected content scripts instead of filtering #27369

Merged

acdlite mentioned this pull request Sep 14, 2023

Update React from dd480ef92 to d6dcad6a8. vercel/next.js#55399

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection #27336

refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection #27336

hoxyq commented Sep 5, 2023 •

edited

Loading

Biki-das commented Sep 5, 2023

refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection #27336

refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection #27336

Conversation

hoxyq commented Sep 5, 2023 • edited Loading

Biki-das commented Sep 5, 2023

hoxyq commented Sep 5, 2023 •

edited

Loading