[DevTools] Don't remount the extension on same-document navigations (…
GitHub Commits - Example: React

[DevTools] Don't remount the extension on same-document navigations (…

Repository navigation Commit 312e1af authored [DevTools] Don't remount the extension on same-document navigations (#37780) ## Summary Fixes #37681. Since Chrome 153, chrome.devtools.network.onNavigated also fires for same-document navigations. devtools-frontend CL 8155971 made Page.navigatedWithinDocument call setInspectedURL(), and the DevTools extension server forwards every inspected URL change to extensions as onNavigated. The callback only gets the URL. In Chrome 154 it fires for pushState, replaceState (including same-URL and state-only calls), hash changes, intercepted Navigation API navigations and history.back() within the document. The extension treated every event as a new page. It unmounted the panels, sent shutdown to the backend that was still running in the page, and remounted. So every client-side route change lost the selection and any in-progress Profiler recording. The remount itself was also unreliable. The content script only says hello to the backend manager once per document, so the re-injected backend manager depended on timing. In some runs the page had no backend until the Components panel was opened. In others, the new backend sent its initial tree before the new frontend was listening. Changes: - main/index.js, evalScripts.js: only remount when the inspected document was replaced. Keep the current instance if both of these hold: - it already received extensionBackendInitialized; - the page still has __REACT_DEVTOOLS_BACKEND_MANAGER_INJECTED__. The backend manager removes that flag when it shuts down, including on pagehide, so bfcache restores still remount, and a new document never has it. If the check fails, it falls back to the old behavior. No new permissions. - backendManager.js, proxy.js: when the backend manager is injected into a document whose previous backend shut down, it asks the content script to say hello again. It now only accepts a hello as the welcome message. Before, any message forwarded from the frontend counted, including the old instance's shutdown, which could initialize the backend while no frontend was listening. - elementSelection.js, main/index.js: the remount now happens one eval round trip later, which exposed a race. The Elements panel selection sync could call bridge.send after that Bridge was shut down, throwing "Cannot send a message through a Bridge that has been shut down." It now only sends through the current instance's Bridge. #37708 takes a different approach: it switches Chromium to webNavigation.onCommitted and adds the webNavigation permission. Firefox doesn't emit onNavigated for same-document navigations, so nothing should change there, but I didn't test Firefox. ## How did you test this change? - yarn prettier, yarn linc: pass. - yarn flow dom-browser, which covers react-devtools-extensions, and yarn flow dom-node: no errors. - yarn test-build-devtools --silent --no-watchman react-devtools-extensions: 2/2 pass. ignoreList-test.js builds the extension in development and production modes. The source and www Jest configs exclude the DevTools packages, so yarn test and yarn test-www match no tests. - yarn build-for-devtools && yarn build:chrome:local: the extension built from this branch loads in Chrome 154. End to end, I drove the real DevTools UI in headless Chrome 154.0.8037.93 over CDP, with an isolated profile and a React 18 SPA test page. The Components and Profiler panels were opened with InspectorFrontendAPI.showPanel. The checks were the backend agent's identity in the page, the bridge traffic, and the rendered Components tree. Shipped 8.0.0 compared with this branch: | Scenario | 8.0.0 | This branch | |---|---|---| | Router pushState ×2, state-only replaceState, hash change, history.back() within the document | Remounts on every navigation: shutdown sent, new backend agent each time | Same backend agent; the tree follows the route | | Components panel hidden while navigating | No backend in the page until the panel is opened | Backend stays connected | | Profiling across two route changes | Recording lost ("No profiling data has been recorded") | 4 commits recorded | | Reload, link to another document, bfcache restore, cross-site navigation | Remounts | Remounts; the tree shows the new document | The backend-manager change on its own, with the shipped main.js, also fixes the remount itself: after a same-document remount, the new backend attaches immediately instead of waiting for the Components panel to be opened (2/2 runs). Closing and reopening DevTools without a reload shows an empty tree in 8.0.0 too. That's a separate issue; I closed DevTools over CDP, which may not match a user closing it. On this branch, the next navigation remounts and recovers it, as before.1 parent d75b069 commit 312e1af 5 files changed Lines changed: 77 additions & 15 deletions File tree - packages/react-devtools-extensions/src - contentScripts - main Lines changed: 16 additions & 1 deletion | Original file line number | Diff line number | Diff line change | | |---|---|---|---| | ||| 57 | 57 | | | 58 | 58 | | | 59 | 59 | | | 60 | | - | | | 60 | + | | | 61 | + | | | 62 | + | | | 63 | + | | | 64 | + | | 61 | 65 | | | 62 | 66 | | | 63 | 67 | | | | ||| 276 | 280 | | | 277 | 281 | | | 278 | 282 | | | | 283 | + | | | 284 | + | | | 285 | + | | | 286 | + | | | 287 | + | | | 288 | + | | | 289 | + | | | 290 | + | | | 291 | + | | | 292 | + | | | 293 | + | | 279 | 294 | | Lines changed: 6 additions & 0 deletions | Original file line number | Diff line number | Diff line change | | |---|---|---|---| | ||| 189 | 189 | | | 190 | 190 | | | 191 | 191 | | | | 192 | + | | | 193 | + | | | 194 | + | | | 195 | + | | | 196 | + | | | 197 | + | | 192 | 198 | | | 193 | 199 | | | 194 | 200 | | | | | Original file line number | Diff line number | Diff line change | | |---|---|---|---| | ||| 8 | 8 | | | 9 | 9 | | | 10 | 10 | | | | 11 | + | | 11 | 12 | | | 12 | 13 | | | 13 | 14 | | | | ||| 29 | 30 | | | 30 | 31 | | | 31 | 32 | | | | 33 | + | | | 34 | + | | | 35 | + | | | 36 | + | | 32 | 37 | | | 33 | 38 | | | 34 | 39 | | | | Lines changed: 2 additions & 10 deletions | Original file line number | Diff line number | Diff line change | | |---|---|---|---| | ||| 15 | 15 | | | 16 | 16 | | | 17 | 17 | | | 18 | | - | | | 18 | + | | 19 | 19 | | | 20 | 20 | | | 21 | 21 | | | | ||| 25 | 25 | | | 26 | 26 | | | 27 | 27 | | | 28 | | - | | 29 | | - | | 30 | | - | | 31 | | - | | 32 | | - | | 33 | | - | | 34 | | - | | 35 | | - | | 36 | | - | | | 28 | + | | 37 | 29 | | | 38 | 30 | | | 39 | 31 | | | | | Original file line number | Diff line number | Diff line change | | |---|---|---|---| | ||| 73 | 73 | | | 74 | 74 | | | 75 | 75 | | | | 76 | + | | 76 | 77 | | | 77 | 78 | | | 78 | 79 | | | | ||| 186 | 187 | | | 187 | 188 | | | 188 | 189 | | | 189 | | - | | | 190 | + | | | 191 | + | | | 192 | + | | | 193 | + | | | 194 | + | | | 195 | + | | | 196 | + | | | 197 | + | | 190 | 198 | | | 191 | 199 | | | 192 | 200 | | | | ||| 330 | 338 | | | 331 | 339 | | | 332 | 340 | | | 333 | | - | | | 341 | + | | | 342 | + | | | 343 | + | | | 344 | + | | | 345 | + | | | 346 | + | | | 347 | + | | | 348 | + | | | 349 | + | | | 350 | + | | | 351 | + | | | 352 | + | | 334 | 353 | | | 335 | 354 | | | 336 | 355 | | | | ||| 751 | 770 | | | 752 | 771 | | | 753 | 772 | | | 754 | | - | | 755 | | - | | | 773 | + | | | 774 | + | | | 775 | + | | | 776 | + | | | 777 | + | | | 778 | + | | | 779 | + | | | 780 | + | | | 781 | + | | | 782 | + | | | 783 | + | | | 784 | + | | | 785 | + | | | 786 | + | | | 787 | + | | | 788 | + | | | 789 | + | | | 790 | + | | | 791 | + | | | 792 | + | | | 793 | + | | | 794 | + | | | 795 | + | | | 796 | + | | | 797 | + | | | 798 | + | | | 799 | + | | 756 | 800 | | | 757 | 801 | | | 758 | 802 | | | | 0 commit comments

Read on GitHub Commits - Example: React ↗ ← Back to News

Comments

No comments yet. Start the discussion.