Dart-code: Add Flutter specific actions to the TouchBar on a mac

[franzsilva]

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]

Love the idea. Other candidates:

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

[DanTup]

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.

[franzsilva]

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]

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

Perfect!!, that will help a lot

[DanTup]

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

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.

[dmvvilela]

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]

@dmvvilela this change only contributes extra buttons (see a6f59075a3321ca8b191a7de47ee88cd95c78cf5) 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]

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]

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

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]

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]

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]

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

https://github.com/Microsoft/vscode/issues/72493

[DanTup]

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

[dmvvilela]

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]

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

[VardanMelkonyan]

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]

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

[DanTup]

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