Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Sep 5, 2023

Conversation

hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Sep 5, 2023

  • 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

@hoxyq hoxyq requested a review from gsathya September 5, 2023 14:43
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Sep 5, 2023
@hoxyq hoxyq force-pushed the devtools/refactor-ports-management branch from 00b7c43 to 93675f2 Compare September 5, 2023 14:51
@Biki-das
Copy link
Contributor

Biki-das commented Sep 5, 2023

@hoxyq awesome work!

@hoxyq hoxyq merged commit a27df56 into facebook:main Sep 5, 2023
2 checks passed
@hoxyq hoxyq deleted the devtools/refactor-ports-management branch September 5, 2023 17:41
hoxyq added a commit that referenced this pull request Sep 5, 2023
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))
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
…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
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
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))
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
…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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants