Repository navigation
Widget Inspector breaks when its tab is undocked or re-docked. #5116
Description
Description
When I open the Widget Inspector, and then grab the tab and drag it outside of the main window to turn it into a separate floating window, the window goes blank and the inspector no longer works until I reload the entire app. Even then, I have to restart my debug session and turn on the Widget Inspector again before it will show up in the floating window.
The same thing happens if I drag the external tab back into the main window to dock it.
Seems like the Widget Inspector has trouble re-homing itself.
To Reproduce
Steps to reproduce the behavior:
- Open VSCode on a Flutter app (sample app will do)
- Debug the app (I was on Linux debugging a native linux app)
- Click the widget inspector button to show it in a tab next to the editor window.
- Drag the tab outside of the main window to undock the tab.
- Notice that it's blank.
- Do Ctrl-Shift-P and execute the "Developer: Reload Window" action.
- Debug the app again
- Open the widget inspector again.
- Notice that it's working again.
- Drag it back into the main window to dock it.
- Notice that it's blank again.
Expected behavior
I would expect the Widget Inspector to just stay in the tab when I undock and dock it.
Diagnostic Information
Workspace Environment
Dart Code extension: 3.88.1
Flutter extension: 3.88.0 (activated)
App: Visual Studio Code
App Host: desktop
Version: linux 1.89.1
Workspace type: Flutter (LSP)
Dart (3.5.0-178.0.dev): /usr/local/home/username/code/flutter/bin/cache/dart-sdk
Flutter (3.22.0-42.0.pre.13): /usr/local/home/username/code/flutter (Linux (linux-x64/linux))
Output from 'dart info'
/usr/local/home/username/code/flutter/bin/cache/dart-sdk/bin/dart info
If providing this information as part of reporting a bug, please review the information
below to ensure it only contains things you're comfortable posting publicly.
General info
- Dart 3.5.0-178.0.dev (dev) (Tue May 21 13:03:36 2024 -0700) on "linux_x64"
- on linux / Linux 6.6.15-2rodete2-amd64 Code already includes yaml support, doesn't need providing #1 SMP PREEMPT_DYNAMIC Debian 6.6.15-2rodete2 (2024-03-19)
- locale is en_US.UTF-8
Project info
- sdk constraint: '>=3.5.0-149.0.dev <4.0.0'
- dependencies: fl_chart, flutter
- dev_dependencies: flutter_lints, flutter_test
Process info
| Memory | CPU | Elapsed time | Command line |
|---|---|---|---|
| 69 MB | 0.1% | 09:04 | dart devtools --machine --allow-embedding --dtd-uri ws:/4tBoG36qpoFs6Q1w |
| 65 MB | 0.0% | 1-03:50:14 | dart devtools --machine --allow-embedding --dtd-uri ws:/sjoxVd77w34bIpeR |
| 76 MB | 0.0% | 3-07:53:03 | dart devtools --no-launch-browser |
| 4193 MB | 0.2% | 1-03:50:14 | dart language-server --protocol=lsp --client-id=VS-Code --client-version=3.88.1 |
| 456 MB | 1.1% | 09:04 | dart language-server --protocol=lsp --client-id=VS-Code --client-version=3.88.1 |
| 77 MB | 0.0% | 1-03:50:14 | dart tooling-daemon --machine |
| 79 MB | 0.1% | 09:04 | dart tooling-daemon --machine |
| 94 MB | 0.1% | 1-03:50:14 | flutter_tools.snapshot daemon |
| 74 MB | 0.3% | 09:04 | flutter_tools.snapshot daemon |
| 72 MB | 0.1% | 07:25 | flutter_tools.snapshot debug_adapter |
| 87 MB | 0.4% | 07:25 | flutter_tools.snapshot run --machine --start-paused -d linux --devtools-server-address http:/ --target /decision_card_main.dart |
| 91 MB | 0.0% | 3-07:53:11 | flutter_tools.snapshot run --machine --track-widget-creation -d flutter-tester --start-paused |
Output from 'flutter doctor'
/usr/local/home/username/code/flutter/bin/flutter doctor -v
[!] Flutter (Channel main, 3.22.0-43.0.pre.3, on Debian GNU/Linux rodete 6.6.15-2rodete2-amd64, locale en_US.UTF-8)
• Flutter version 3.22.0-43.0.pre.3 on channel main at /usr/local/home/username/code/flutter
! The flutter binary is not on your path. Consider adding /usr/local/home/username/code/flutter/bin to your path.
! Warning: `dart` on your path resolves to /usr/lib/google-dartlang/bin/dart, which is not inside your current Flutter SDK checkout at /usr/local/home/username/code/flutter. Consider adding /usr/local/home/username/code/flutter/bin to the front of your path.
• Upstream repository [email protected]:flutter/flutter.git
• Framework revision 397a41e8ad (32 hours ago), 2024-05-22 12:33:08 -0400
• Engine revision b6971cdf14
• Dart version 3.5.0 (build 3.5.0-178.0.dev)
• DevTools version 2.36.0-dev.10
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /usr/local/home/username/Android/Sdk
• Platform android-34, build-tools 33.0.1
• ANDROID_HOME = /usr/local/home/username/Android/Sdk
• Java binary at: /usr/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.10+7-Debian-1)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✓] Linux toolchain - develop for Linux desktop
• Debian clang version 16.0.6 (19)
• cmake version 3.28.3
• ninja version 1.11.1
• pkg-config version 1.8.1
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Debian GNU/Linux rodete 6.6.15-2rodete2-amd64
• Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.76
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 2 categories.
Activity
DanTup commentedon May 28, 2024
I've made a partial fix for this, but I think it's the best we can currently do.
When you drag a webview out of VS Code, it effectively destroys the old view and creates a new one. This means any state in the Flutter app is lost.
The reason for the blank screen is that we set the iframe src dynamically and after the drag, we never handled any events to re-set it, so you just get a blank iframe.
With the fix, we will track the src of the iframe and re-set it if the webview is recreated. This effectively means it'll be reset (you'll lose any state in the Flutter app), but I don't think we have a way around this (except for adding something to DevTools to serialise all state that isn't in the URL and send it to use).
However, in the case of the inspector, the selected widget does appear to be persisted in the running app, so the inspector selection actually persists in a way that I wasn't expecting:
drag.inspector.mp4
While investigating this I noticed the built0in markdown preview also has some odd quirks. I've filed microsoft/vscode#213669 and asked there if there are any docs on the intended/expected limitations of webviews across windows like this. If it turns out we can avoid the reload and retain the state (although I doubt, because we're already using
retainContextWhenHidden), we can re-open (or open a new issue) to support that.