Skip to content

Feedback on Flutter Sidebar #6563

Closed
Closed
Feedback on Flutter Sidebar#6563
Labels
P2important to work on, but not at the top of the work list.flutter sidebar

Description

@anderdobo
anderdobo
opened on Oct 19, 2023

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.
Screenshot 2023-10-19 at 1 47 34 PM

Activity

  1. anderdobo
    assigned
    anderdobo
    and unassigned
    anderdobo
    on Oct 19, 2023

  2. anderdobo commented on Oct 19, 2023

    @anderdobo
    anderdobo
    on Oct 19, 2023
    Author

    FYI @kenzieschmoll and @DanTup

  3. DanTup commented on Oct 30, 2023

    @DanTup
    DanTup
    on Oct 30, 2023
    Contributor

    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 Dart-Code/Dart-Code#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 Dart-Code/Dart-Code#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).

  4. Nancyhu2023 commented on Nov 2, 2023

    @Nancyhu2023
    Nancyhu2023
    on Nov 2, 2023

    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
    Screenshot 2023-11-02 at 2 25 55 PM

  5. DanTup commented on Nov 2, 2023

    @DanTup
    DanTup
    on Nov 2, 2023
    Contributor

    @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).

  6. Nancyhu2023 commented on Nov 2, 2023

    @Nancyhu2023
    Nancyhu2023
    on Nov 2, 2023

    @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.

  7. DanTup commented on Nov 3, 2023

    @DanTup
    DanTup
    on Nov 3, 2023
    Contributor

    @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

    image

    Thanks!

  8. DanTup commented on Nov 3, 2023

    @DanTup
    DanTup
    on Nov 3, 2023
    Contributor

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

    image

  9. DanTup
    added 4 commits that reference this issue on Nov 8, 2023

    Add the ability to enable platform types from the device list in the …

    1d9fac4

    Add the ability to enable platform types from the device list in the …

    c6a9a36

    Add the ability to enable platform types from the device list in the …

    f053298

    Add the ability to enable platform types from the device list in the …

    4762233
  10. kenzieschmoll
    added
    flutter sidebar
    on Nov 10, 2023
  11. DanTup
    added 2 commits that reference this issue on Nov 14, 2023

    Add the ability to enable platform types from the device list in the …

    27e55f7

    Add support for "Open DevTools in Browser" in Sidebar menu

    df13c8d
  12. auto-submit
    added a commit that references this issue on Nov 16, 2023

    Add support for "Open DevTools in Browser" in Sidebar menu (#6736)

    0fb3892

  13. DanTup commented on Jan 24, 2024

    @DanTup
    DanTup
    on Jan 24, 2024
    Contributor

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

  14. Nancyhu2023 commented on Feb 7, 2024

    @Nancyhu2023
    Nancyhu2023
    on Feb 7, 2024 via email

  15. DanTup commented on Feb 8, 2024

    @DanTup
    DanTup
    on Feb 8, 2024
    Contributor

    @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):

    #6581

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

  16. Nancyhu2023 commented on Feb 9, 2024

    @Nancyhu2023
    Nancyhu2023
    on Feb 9, 2024 via email

  17. DanTup commented on Feb 14, 2024

    @DanTup
    DanTup
    on Feb 14, 2024
    Contributor

    @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)

    image

    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!

  18. Nancyhu2023 commented on Feb 17, 2024

    @Nancyhu2023
    Nancyhu2023
    on Feb 17, 2024 via email
  19. elliette
    added
    P2important to work on, but not at the top of the work list.
    on Jul 17, 2024

  20. elliette commented on Jul 17, 2024

    @elliette
    elliette
    on Jul 17, 2024
    Member

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

  21. DanTup commented on Jul 18, 2024

    @DanTup
    DanTup
    on Jul 18, 2024
    Contributor

    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).

  22. DanTup
    closed this as completedon Jul 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2important to work on, but not at the top of the work list.flutter sidebar

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions