Add start without debug option to TouchBar

[guidobouman]

It's clear that the usual set of icons is a minimal case, and that you want the default set to stay minimal. But I think the option to differentiate between start with or without debugging is a feature that every developer could use. Maybe an option in the config to switch the current start command to start without debug would already be enough.

Yes, a plugin could add an extra button. But I don't think this belongs within a plugin, as it's an extension of the existing start button.

I'm willing to do the work required. But before that: what are your preferences?

[isidorn]

@guidobouman this is a fair feature request.
I would keep it open and wait if it generastes more user traction.

For us to add it to the touch bar we would also need a new icon which would be easily distinguihsable from the current start icon (green play). I would also check what icon Visual Studio is using.
The icon design is the actual work, adding is just adding a one liner here
https://github.com/Microsoft/vscode/blob/7fe176068cdf387eead27bb096fc60a746f47b52/src/vs/workbench/parts/debug/electron-browser/debug.contribution.ts#L453

[guidobouman]

Visual Studio uses a same filled play icon for the default start action. It differentiates with an outline version of that same icon for starting without debugging.

Seems reasonable?

[isidorn]

Makes somewhat sense. Can you design that icon froum our start icon?
https://github.com/Microsoft/vscode/blob/c762e7868a24d3e6cc0e1eb6a6eaa1bd9ec61786/src/vs/workbench/parts/debug/browser/media/start.svg#L1

fyi @misolori

[guidobouman]

Wait, shouldn't it be the one from electron-browser?

https://github.com/Microsoft/vscode/blob/c762e7868a24d3e6cc0e1eb6a6eaa1bd9ec61786/src/vs/workbench/parts/debug/electron-browser/media/continue-tb.png

Anyhow, I made a mockup based on the old designs found in Visual Studio:

The stripes indicate that it's faster than full debug. While the hollow arrow indicates that it's not as complete as debugging.

SVG:
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http:https://www.w3.org/2000/svg"><path d="M8 3.5v9L14 8 8 3.5z" fill="none" stroke="#388A34" stroke-width="2"/><path fill="#979797" d="M3 10h2v1H3zM3 5h2v1H3zM1 7.5h4v1H1z"/></svg>

Alternatively it could look like this:

But, in my opinion, it does not convey the faster execution as well.

[miguelsolorio]

Not sure if the three lines fit the rest of our icons, I'd go with just the outline. Thanks for creating this!

[isidorn]

@guidobouman I like how you explained the icons and I agree with your point of view.
However let's listen to @misolori and for consistency just use the hollow icon.
@guidobouman can you please provide the PR with that icon and we can merge it in. Since I do not have a mac touchbar I do not know, but does it support multiple themes? Do we also need to design the icon for the dark theme?

[guidobouman]

I'll check! I don't think it has multiple themes though.

And what about the location? I think it's the white icon from the electron-browser folder that's being displayed on my TouchBar. It's white and has a different aspect ratio. Should I redesign that one as well?

[isidorn]

You are correct, here is the location https://github.com/Microsoft/vscode/blob/26d62c4b9f7c5ee94975bc2ff14b17426dc0d483/src/vs/workbench/parts/debug/electron-browser/media/continue-tb.png
So I would place it just next to that one. And yes the icon should follow the style of those icons, so an empty white triangle seems fitting. Thanks a lot!

[guidobouman]

Cool!

One more thing: That icon is not an equilateral triangle. That's correct? Because I could fix both icons at the same time.

The current options:

What's your preference, @misolori?

[isidorn]

I would not change the current shape.
Though I leave this decision up to @misolori

[guidobouman]

About the theming: Apple states that you should supply themed images (black on transparent), but I don't see these in the VS Code codebase. So I guess Electron has a specific implementation to translate the png icons to TouchBar-safe icons. The png resolution does not seem to match up either, even though it does look good on the TouchBar.

[isidorn]

Thanks for looking into this.
I am not sure how to change the theme for the touchbar - if the theme changes and our icons look out of place than I would be open for a PR which does the theming of our touch bar icons

[guidobouman]

Pinging @misolori on the design decision.

[isidorn]

Sorry about that, this somehow fall off my radar.
Assingin to @misolori and November for discussion

[guidobouman]

I'll start a PR in the meantime.

[miguelsolorio]

Verification steps:

1. Use a macbook that has a touchbar or use this tool
2. Open a file that you can run (i.e. python file with print("Hello world"))
3. Press the button to start without debugging
4. This should run the file, similarly as going from Debug > Start Without Debugging