Feedback on Flutter Sidebar

[anderdobo]

Setup

1. Flutter beta channel
2. VS Code with pre-release Flutter extension v3.75.20231002

Feedback

1. Recommendation: For the DevTools options in the Debug Sessions section, add Open DevTools in Web browser option
2. In Devices section, Chrome and macOS show even when a project doesn't have these enabled. Consider having the behavior be like in the command palette, where platforms that are not enabled say "Enable [platform] for this project"
3. Android virtual device in Devices section is titled "sdk gphone64 arm64". Ideally should be titled the same as in VS Code (command palette and device picker in the bottom right) which was "Pixel 7 Pro API 34" in this case. Interestingly, the iPhone simulator was correctly titled "iPhone 15 Pro Max" in the sidebar.
4. Switching between devices in the Devices section of the sidebar changes the device in the device picker in the bottom right of the window, including "selecting" platforms that are not enabled in the project. Hitting F5 doesn't do anything when a platform that's not enabled is selected.

[anderdobo]

FYI @kenzieschmoll and @DanTup

[DanTup]

I've pushed some changes to Dart-Code to:

1. Use the emulators names when a device is an emulator
2. Hide unavailable platforms from the device list

Adding an option to "Enable [platform]" is a little more involved (it requires work in both Dart-Code and DevTools). I've opened https://github.com/Dart-Code/Dart-Code/issues/4820 for the Dart-Code work that needs doing first.

1. Recommendation: For the DevTools options in the Debug Sessions section, add Open DevTools in Web browser option

This also needs some tweaks on both sides. I've opened https://github.com/Dart-Code/Dart-Code/issues/4821 for the Dart-Code side to extend the API to allow an additional flag to be passed (and the capability for the sidebar to know it's supported).

[Nancyhu2023]

I have tried to test the Sidebar demo, and found the color of the FLUTTER SIDEBAR stays in light mode while my VScode is in night mode. refer to the image attached below. Not sure if is my local VScode setup problem or the demo problem. @anderdobo @kenzieschmoll @DanTup

[DanTup]

@Nancyhu2023 did you change theme after loading the project? Right now we don't dynamically change the theme, we only set it when the sidebar first displays (we could potentially reload the page or something, or post something into DevTools on theme changes if we think it's worth supporting though).

[Nancyhu2023]

@Nancyhu2023 did you change theme after loading the project? Right now we don't dynamically change the theme, we only set it when the sidebar first displays (we could potentially reload the page or something, or post something into DevTools on theme changes if we think it's worth supporting though).

Hi Dan, no I did not change the theme. My VScode is super default mode.

[DanTup]

@Nancyhu2023 could you confirm:

• the exact name of the theme you're using
• whether you've set it specifically for this workspace, or globally
• whether you see the issue after restarting VS Code

Assuming it still occurs after a restart, could you try:

• Click Help -> Toggle Developer Tools in VS Code
• Click the "Elements" tab along the top if not already selected
• Click the "Select an Element" button in the top left
• Click on the sidebar in the main VS Code window
• Locate the DevTools iframe in the inspector and see what the URL is

Thanks!

[DanTup]

Also worth checking this setting.. It should default to Dark, but if you've ever changed it in the past it probably persisted:

[DanTup]

@Nancyhu2023 do you still have the issue above? Are you able to check the settings shown in the screenshot? Thanks!

[Nancyhu2023]

Hi Danny,

I have checked the setting, it is in dark mode. It still happen that Flutter sidebar and Flutter DevTools are in light mode. I am happy to hop on a GVC to debug this issue.

[image: Screenshot 2024-02-07 at 1.03.11 PM.png]

Best, Nancy

On Wed, Jan 24, 2024 at 8:31 AM Danny Tuppeny @.***> wrote:

@Nancyhu2023 https://github.com/Nancyhu2023 do you still have the issue above? Are you able to check the settings shown in the screenshot? Thanks!

— Reply to this email directly, view it on GitHub https://github.com/flutter/devtools/issues/6563#issuecomment-1908490679, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6FGKLPVJU7AXBYNZ7NSET3YQEZMRAVCNFSM6AAAAAA6HZ4QHGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBYGQ4TANRXHE . You are receiving this because you were mentioned.Message ID: @.***>

[DanTup]

@Nancyhu2023 can you confirm what version of Flutter you're testing with? I remembered I fixed an issue that could be related (where a preference saved by DevTools could override the IDE theme):

https://github.com/flutter/devtools/pull/6581

I'm not sure this change has made a stable Flutter release yet, but it should be in the current beta.

[Nancyhu2023]

The issue is still there in beta. Are they the latest version?

[image: Screenshot 2024-02-09 at 11.11.52 AM.png] [image: Screenshot 2024-02-09 at 11.11.44 AM.png]

On Thu, Feb 8, 2024 at 7:45 AM Danny Tuppeny @.***> wrote:

@Nancyhu2023 https://github.com/Nancyhu2023 can you confirm what version of Flutter you're testing with? I remembered I fixed an issue that could be related (where a preference saved by DevTools could override the IDE theme):

#6580 https://github.com/flutter/devtools/issues/6580

I'm not sure this change has made a stable Flutter release yet, but it should be in the current beta.

— Reply to this email directly, view it on GitHub https://github.com/flutter/devtools/issues/6563#issuecomment-1934405249, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6FGKLLJOYNZ2BGQRIATLFTYSTXJ5AVCNFSM6AAAAAA6HZ4QHGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZUGQYDKMRUHE . You are receiving this because you were mentioned.Message ID: @.***>

[DanTup]

@Nancyhu2023 it doesn't seem like your screenshots are coming through correctly. If you're free for a VC that might help.

Otherwise could you confirm the exact versions you have of:

• Flutter (please check this by hovering over {} on the status bar in case VS Code is picking up a different SDK to the one you expect)
• VS Code
• the Dart extension

It would also be useful if you can:

• Click Help -> Toggle Developer Tools in VS Code
• Click the "inspect" icon from the Chrome dev tools that appear
• Click on the sidebar and then try to locate the iframe that renders DevTools (there are multiple iframes, you want the one with ID "devToolsFrame" like my picture below)
• Copy/screenshot the entire URL (note: it may be truncated in the inspector, so please copy/paste via clipboard)

http://127.0.0.1:9100/vsCodeFlutterPanel?cacheBust=dart-3.3.0-279.3.beta-flutter-3.19.0-0.4.pre&hide=debugger&ide=VSCode&embed=true&theme=dark&backgroundColor=%23252526&foregroundColor=%23bbbbbb&fontSize=14

Thanks!

[Nancyhu2023]

Feel free to send a GVC invite. It may be easier to troubleshoot this problem.

On Wed, Feb 14, 2024 at 8:53 AM Danny Tuppeny @.***> wrote:

@Nancyhu2023 https://github.com/Nancyhu2023 it doesn't seem like your screenshots are coming through correctly. If you're free for a VC that might help.

Otherwise could you confirm the exact versions you have of:

• Flutter (please check this by hovering over {} on the status bar https://github.com/flutter/devtools/assets/1078012/e0bc3398-03ab-4958-99dc-5297e49a3fce in case VS Code is picking up a different SDK to the one you expect)
• VS Code
• the Dart extension

It would also be useful if you can:

• Click Help -> Toggle Developer Tools in VS Code
• Click the "inspect" icon from the Chrome dev tools that appear
• Click on the sidebar and then try to locate the iframe that renders DevTools (there are multiple iframes, you want the one with ID "devToolsFrame" like my picture below)
• Copy/screenshot the entire URL (note: it may be truncated in the inspector, so please copy/paste via clipboard)

image.png (view on web) https://github.com/flutter/devtools/assets/1078012/37361553-d6dd-4fc9-8585-e4fe54a36ce2

http://127.0.0.1:9100/vsCodeFlutterPanel?cacheBust=dart-3.3.0-279.3.beta-flutter-3.19.0-0.4.pre&hide=debugger&ide=VSCode&embed=true&theme=dark&backgroundColor=%23252526&foregroundColor=%23bbbbbb&fontSize=14

Thanks!

— Reply to this email directly, view it on GitHub https://github.com/flutter/devtools/issues/6563#issuecomment-1944225285, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6FGKLLXILT4URJ35WB6VV3YTTTXRAVCNFSM6AAAAAA6HZ4QHGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBUGIZDKMRYGU . You are receiving this because you were mentioned.Message ID: @.***>

[elliette]

@DanTup can this now be closed or are there parts that are still being worked on? Thanks!

[DanTup]

I think we can close this and open specific issues for anything remaining.

@Nancyhu2023 if you're still having the theme issue on latest code (there have been a few theme tweaks since the comments above), please open a new issue and ping me (a screenshot of the DevTools noted above may help, but if you want to GVC I mailed you some times I'm around as I don't have any visibility of your calendar).