Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove the "Open Flutter DevTools" item from the Dart/Flutter Debugger, cleanup all "Open * DevTools" actions from Flutter and Dart Plugins #7839

Open
jwren opened this issue Dec 2, 2024 · 5 comments
Assignees
Milestone

Comments

@jwren
Copy link
Member

jwren commented Dec 2, 2024

Remove the "Open Flutter DevTools" item from the Dart/Flutter Debugger

FYI @alexander-doroshko, @kenzieschmoll

With the improved UX of the embedded browser, we shouldn't direct the user to open devtools from the debugger pane window in this way (i.e. this was added when we didn't have the JxBrowser embedding.)

Screenshot:

Screenshot 2024-12-02 at 12 37 17 PM
@jwren jwren added this to the M84 milestone Dec 2, 2024
@jwren jwren self-assigned this Dec 2, 2024
@kenzieschmoll
Copy link
Member

Can we leave the affordance and just change what the button does? Instead of opening DevTools in the browser, it could bring the DevTools tool window into focus.

One option is to have a few buttons (or a single button that is a dropdown option?)

  1. Open the Flutter Inspector (debug mode only)
  2. Open Flutter DevTools
  3. Open Flutter DevTools in the Browser

Without this button, how will users know how to open DevTools in the browser? Is there another affordance for that that is discoverable?

For comparison, here is what VS Code has in the debug controls (for a debug mode flutter app the last action is a button to open the Flutter Inspector):

Screenshot 2024-12-02 at 12 55 12 PM
and then here are the command palette actions:
Screenshot 2024-12-02 at 12 56 36 PM

@jwren
Copy link
Member Author

jwren commented Dec 2, 2024

This button associates DevTools as only a debugging tool, also it takes developers out of the IDE by opening a browser pointed to the DevTools URL, the only way to use DevTools when the action was added into the Dart plugin.

With the current implementation, the Flutter Inspector is already open, this button/action is now the opposite of what we want users to do with all of the cleanup earlier this year putting in the windows with dedicated DevTools pages.

Put another way, instead of having three actions (see the screenshot), of "Open Flutter DevTools" and "Flutter DevTools" and "Open Flutter DevTools", we should just have one item in the Actions listed which opens the presentation using JxBrowser. If JxBrowser is unsuccessful, an external link to the browser is provided to the user.

Screenshot 2024-12-02 at 2 08 40 PM

@jwren jwren changed the title Remove the "Open Flutter DevTools" item from the Dart/Flutter Debugger Remove the "Open Flutter DevTools" item from the Dart/Flutter Debugger, cleanup all "Open * DevTools" actions from Flutter and Dart Plugins Dec 2, 2024
@kenzieschmoll
Copy link
Member

kenzieschmoll commented Dec 2, 2024

There are still cases where a user might prefer to use DevTools in the browser that are valid. For example, some of the more complex tools like Performance and Memory may require more screen real estate than is available in the tool window. So we should still have that option accessible to the user as an action at the very least.

One nit on that list of actions: the Inspector and Deep Links tool windows should come up too for the search terms "flutter" and "devtools"

@jwren
Copy link
Member Author

jwren commented Dec 2, 2024

Ack. What about changing the action to be "Open Flutter DevTools in Browser" to reduce confusion?

When embedded, does DevTools have a way to easily open the current view in DevTools in a Browser? I don't see it, if it is there, what I am looking for specifically is an "open external link button" (Screenshot 2024-12-02 at 2 23 19 PM) in the bottom of each DevTools page.

As for having the various windows more searchable, yes, "Dart" and "Flutter" should both make all the appropriate windows (and actions) form our plugins appear.

@kenzieschmoll
Copy link
Member

What about changing the action to be "Open Flutter DevTools in Browser" to reduce confusion?

SGTM. This is consistent with VS Code.

When embedded, does DevTools have a way to easily open the current view in DevTools in a Browser?

No it does not. This would be useful though and could be one of the toolbar actions when in embedded mode. I filed flutter/devtools#8584 to track.

As for having the various windows more searchable, yes, "Dart" and "Flutter" should both make all the appropriate windows (and actions) form our plugins appear.

What about "DevTools" though? In the screenshot above, it doesn't look like the Flutter Inspector or the Flutter Deep Links tool show up for the "DevTools" search query.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants