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

Add Flutter specific actions to the TouchBar on a mac #936

Closed
franzsilva opened this issue May 23, 2018 · 19 comments
Closed

Add Flutter specific actions to the TouchBar on a mac #936

franzsilva opened this issue May 23, 2018 · 19 comments
Labels
in flutter Relates to running Flutter apps is enhancement on mac
Milestone

Comments

@franzsilva
Copy link

I think it would be an interesting feature for Mac users that use the touchbar to have Flutter actions that can be fired from the Touch Bar. Vs Code has the feature implemented since September last year. All we would need to do is add the icons and the commands it would run.

From the top of my head I could think of these options.

While not debugging:

  • flutter doctor (Doctor icon)
  • open pub spec

While Debugging:

  • Reload
  • Hot reload
  • Switch platform
  • Performance overlay

I would be happy to implement this feature and create a pull request. Its not a hard task just define how it would work.

What do you think?

cc @timsneath, @sethladd, @DanTup

@timsneath
Copy link
Contributor

Love the idea. Other candidates:

  • Open emulator (development mode)
  • Take device screenshot (debugging mode)

@DanTup
Copy link
Member

DanTup commented May 23, 2018

SGTM! I haven't looked at the APIs, but I resume you can make them call commands, and all of the things mentioned above have easy param-less commands you can call (though platform is currently just a toggle; if there is a better UI like some sort of radio switches, we can always tweak this).

We should also make sure this is aware of the project type; so if you're debugging a Dart CLI app for example, you don't end up with Flutter actions.

@DanTup DanTup added this to the On Deck milestone May 23, 2018
@DanTup DanTup added the on mac label May 23, 2018
@DanTup DanTup changed the title Feature discussion: Flutter specific actions when using a TouchBar on a mac Add Flutter specific actions to the TouchBar on a mac May 23, 2018
@franzsilva
Copy link
Author

is there a way in the package.json to see if you are in a flutter project?, when setting the icons and the commands for the bar you can use the "when" key, is there a variable or something I could use to know if its a flutter project?

@DanTup
Copy link
Member

DanTup commented May 30, 2018

@franzsilva We have a context for when you're in a flutter project, so the definition for the Hot Reload command in package.json looks like this:

{
	"command": "flutter.hotRestart",
	"when": "dart-code:flutterProjectLoaded && inDebugMode",
	"key": "ctrl+f5"
}

dart-code:flutterProjectLoaded is the name of the context we created, and inDebugMode is a built-in one.

@franzsilva
Copy link
Author

Perfect!!, that will help a lot

@DanTup DanTup modified the milestones: On Deck, Backlog Jun 18, 2018
@DanTup DanTup modified the milestones: Backlog, v2.25.0 Feb 20, 2019
DanTup added a commit that referenced this issue Feb 20, 2019
DanTup added a commit that referenced this issue Feb 26, 2019
@DanTup DanTup closed this as completed in a6f5907 Feb 28, 2019
@DanTup
Copy link
Member

DanTup commented Mar 11, 2019

vNext will have some buttons on the touchbar during a debug session:

Touch Bar Shot 2019-03-11 at 9 59 51 am 3

It doesn't cover everything above, but there's not a huge amount of space. If you think there's something of significant value missing, open new issues and we can tweak.

@DanTup DanTup added the in flutter Relates to running Flutter apps label Mar 21, 2019
@dmvvilela
Copy link

This removed my debug buttons!! Where is the arrow for more buttons with the debug buttons? i can't use fn-f11 for this or something like that..

@DanTup
Copy link
Member

DanTup commented Apr 17, 2019

@dmvvilela this change only contributes extra buttons (see a6f5907) so if anything is missing it may be a VS Code issue.

Can you clarify what the buttons where, where they appeared and what they did? I tried debugging a TypeScript project, but I don't see any additional buttons that don't show up in the screenshot above.

@dmvvilela
Copy link

Sure. This new buttons do appear, and devtoold is great. But debug buttons disappeared. They are: step into, step, step out.. Play/pause is here, stop and hot reload and restart is ok too. But it need stepping buttons.

@DanTup
Copy link
Member

DanTup commented Apr 17, 2019

@dmvvilela oh, I see. The touchbar is context-sensitive and those buttons only appear if you're actually stopped at a breakpoint. When I hit a breakpoint, they all appear:

IMG_20190417_125855

If you're not seeing them when you are at a breakpoint, please open a VS Code issue and @ mention me in it so I can help debug if required. Thanks!

@dmvvilela
Copy link

Hmm actually i think it is a bug.. All the buttons are disappearing here when on a break point. (only the 2 arrows on the left and mac buttons on the right are appearing). I will open an issue than.

@DanTup
Copy link
Member

DanTup commented Apr 17, 2019

Ah, I don't think I have the extra buttons on the right. My guess is that maybe the total width for yours is wider then the touchbar, and they're overflowing badly.

Since an extension doesn't have any knowledge of how much space there is and how many other extensions may show buttons, I think this has to be solved by VS Code (or possibly Electron). If you ping me on the VS Code issue, I'll do what I can to help.

@dmvvilela
Copy link

dmvvilela commented Apr 17, 2019

Ok, i created the issue there and marked you! Thanks. (there is a pic there also).

microsoft/vscode#72493

@DanTup
Copy link
Member

DanTup commented Apr 17, 2019

@dmvvilela thanks! Out of interest, what extension are you using for coloured indenting?

@dmvvilela
Copy link

I have two that helps me on this. The colors that you seeing is called "indent-rainbow" and i also use "bracket pair colorizer" to help seeing where the brackets closes.

@DanTup
Copy link
Member

DanTup commented Apr 17, 2019

Thanks; I knew about the second - handn't seen indent rainbow :)

@VardanMelkonyan
Copy link

If you remove one toggle from Control Strip you will get all the buttons you need.
This Medium Article shows how to do that but you need to translate the page in google first.

@AminTebi
Copy link

Hey, @DanTup I read the whole conversation but I didn't catch how should I add these buttons to my touchbar.

@DanTup
Copy link
Member

DanTup commented Aug 31, 2020

@AminTebi they should appear automatically when you're in a debug session (you may need to hold the Fn key depending on your macOS settings). If you're not seeing them, please open an issue with a description of what you do see in the touch bar when in a debug session (both when holding Fn and not) and I'll take a look. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in flutter Relates to running Flutter apps is enhancement on mac
Projects
None yet
Development

No branches or pull requests

6 participants