Skip to content

[Experiment] Support embedding DevTools in the sidebar #5396

Closed
Closed
[Experiment] Support embedding DevTools in the sidebar#5396
Labels
in devtoolsRelates to integration with Dart/Flutter DevToolsis enhancementAn enhancement or improvement that should be listed in release notes but is not a bug fix.
Milestone
v3.108.0

Description

@DanTup
DanTup
opened on Jan 22, 2025

I thought there was an open issue for this but I can't find it, so opening this one.

There is work in-progress to test out embedding DevTools in sidebar panels instead of editors. It's currently blocked on microsoft/vscode#236494 because that causes us to "restore" bad URLs into the iframes when they load.

TODO:

  • Opening the sidebar before starting a debug session causes it to try to connect to the last session (because of restoring context... we want this to support "Reload WebViews" but probably don't want it to persist over sessions)
    This may be a VS Code issue -> WebView state unexpectedly persists across sessions without a WebviewPanelSerializer microsoft/vscode#236494
  • Performance feels much worse when resizing the sidebar compared to an editor view doesn't repro now
  • Sometimes Flutter throws an error and stops rendering wasm issue, not related to this
  • Decide what should show in the sidebar panels when there's no debug session (or after ending a debug session)
  • How to handle multiple debug sessions (we can have multiple editor windows, but not editor sidebars)
  • Use contexts to ensure side panels only show up for the sections set to sidebar - shown only on first use for now
  • Add unique icons to each view so if they're dragged out to their own section in the activity bar they have different icons
    • if you drag them all out, the remaining item in the original container still keeps the Flutter icon
  • Add a unique DevTools icon instead of using the Flutter one
  • After closing a debug session then re-launching, when it should be re-connected, it opens a standard embedded window
  • Support opening directly from the sidebar without having to use commands
  • Having all pages loaded in sidebar results in connection limit: Unable to open too many DevTools pages due to browser per-host connection limit being exhausted by SSE connections flutter/devtools#8298
    • Should we only support sidebar for some?

Activity

  1. DanTup
    added
    in devtoolsRelates to integration with Dart/Flutter DevTools
    is enhancementAn enhancement or improvement that should be listed in release notes but is not a bug fix.
    on Jan 22, 2025
  2. DanTup
    added this to the v3.106.0 milestone on Jan 22, 2025
  3. DanTup
    added
    blocked on vs code / lsp / dapRequires a change in VS Code to progress
    on Jan 22, 2025
  4. DanTup
    modified the milestones: v3.106.0, v3.108.0 on Feb 10, 2025

  5. DanTup commented on Feb 20, 2025

    @DanTup
    DanTup
    on Feb 20, 2025
    MemberAuthor

    Currently blocked on microsoft/vscode#240207 Worked around

  6. DanTup
    removed
    blocked on vs code / lsp / dapRequires a change in VS Code to progress
    on Feb 25, 2025

  7. DanTup commented on Feb 26, 2025

    @DanTup
    DanTup
    on Feb 26, 2025
    MemberAuthor

    This is available as an experiment in the current pre-release of Dart-Code (v3.105.20250225). There are a number of things outstanding (see checklist at the top of this issue). Personally, I think the inspector works better here than I was expecting, but I'm not sure if that will be true for all of the pages (for example performance view/profiler).

    To try it out:

    • Make sure you're on the latest pre-release of Dart-Code (3.105.20250225)
    • Add the following settings to your VS Code User Settings (or Workspace Settings to enable just for a single test project): 
      "dart.experimentalSidebarDevTools": true, // Enables the functionality
"dart.devToolsLocation": {                // Sets which sections should open in the sidebar (this sets everything except cpu-profiler, for example)
  "default": "sidebar",                   // Ignore the warning for this, "sidebar" is a hidden value so VS Code treats it as invalid
  "cpu-profiler": "external"
},
    • Restart VS Code (or at least run the "Reload Window" command to restart the extension host)

    Currently you'll have to launch the DevTools pages using the existing commands/buttons for the sidebar entries to show up, but ultimately we should be able to have them show up (and just load them the first time you view/expand them). They'll go into a new sidebar section called "Flutter DevTools" which right now has the same icon as the existing Flutter section (for Outline/Sidebar). You can drag the individual sections (Inspector, Memory etc.) out to the sidebar but again, they'll currently show the same icon (they could eventually have their own icons).

    Feedback appreciated!

    Image

  8. DanTup
    added a commit that references this issue on Mar 3, 2025

    Update icons for DevTools sidebar

    47669ce

  9. DanTup commented on Mar 19, 2025

    @DanTup
    DanTup
    on Mar 19, 2025
    MemberAuthor

    I've pushed some changes (in a new pre-release dated today) so that the sidebar icons can show up always now (if you have the experiment flag, and for the sections that are set to "sidebar" as their location), rather than only after you launch the tool through a command/button. This feels much better and should improve visibility of more of these tools.

    Image

    The Inspector and Deep Links have their own sections, the others are in a "DevTools" section (icon is outstanding).

    There are still some rough edges, but I think it's in a good place to get more feedback (fyi @kenzieschmoll @elliette @jwren @loic-sharma )

  10. DanTup commented on Mar 31, 2025

    @DanTup
    DanTup
    on Mar 31, 2025
    MemberAuthor

    This experiment will ship (still behind experiment flags) in the upcoming release. I've opened #5469 to track/discuss making it non-experimental if/when we're happy it works well enough.

  11. DanTup
    closed this as completedon Mar 31, 2025
  12. DanTup
    changed the title [-]Support embedding DevTools in the sidebar[/-] [+][Experiment] Support embedding DevTools in the sidebar[/+] on Mar 31, 2025
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

    in devtoolsRelates to integration with Dart/Flutter DevToolsis enhancementAn enhancement or improvement that should be listed in release notes but is not a bug fix.

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions