Improve initial debug / run experience

[isidorn]

Currently setting up debugging is not an easy task for new users. Due to that we decided to create this issue where we can discuss how to make it easier for users to start debugging / running their programs.

A first proposal:

1. Replace the debug icon in the activity bar to be the play icon. This should make it easier for users to discover that they can also run their program via the debug flow. It can be either a simple play icon, or a play icon that would somehow show that you can also debug (e.g. small "bug" sitting in the corner of the play icon).
2. CallStack, Variables and Watch Expression view do not really have much value while a user is not debugging. Due to that we will only show them while the user is debugging and we get extra space which we can use for rendering a wizard-like UI, e.g. buttons like the one in the explorer:
   
   

These "buttons" could cover these use cases:

• Run Current File (or Run Active File)
• Debug Current File (or Debug Active File)
• Configure
• Install Additional Debuggers (maybe not needed)

While showing the button UI we would not show the launch config drop down and the gear icon (because this duplication would be confusing).

fyi @chrisdias @misolori @fiveisprime

[miguelsolorio]

Here's an initial mockup that has the proposed items:

We do have a proposal to add a secondary button style, so that could be used here as well.

[chrisdias]

I like it. Do we need "You have no launch configurations." text? I suspect the term "launch configurations" doesn't mean anything to many folks, so maybe something that is descriptive of what you can do rather than what you don't have would be more helpful. I don't have a good suggestion for text right at this moment though :)

[miguelsolorio]

I agree that the text isn't very descriptive, though I'm not sure what other text would be helpful. I did have another idea where we could prompt the user to create one, but I'm not sure if that would be useful as launch configurations are a new concept for most users:

[fiveisprime]

Another thing worth mentioning is that "...current file" isn't always accurate. I have a model open and launch the debugger with no config and the express app is correctly launched rather than trying to exec my model.js.

The language can be much friendlier, something like "Run this app."

Can the editor be smart about what's in the workspace? For example, package.json tells us a lot about the app including the name and the type of app (along with how to run it, but I believe that's already detected). We can determine if this is an app or module.. or maybe a combination of things if there are multiple pacakge.json files. If I have an Angular app and a Function app (with the Functions extension installed) show both of those. I actually have this kind of app here: https://github.com/fiveisprime/apm

The root ./package.json is the Angular app named "apm" and there's also ./functions/package.json named "functions". Show me each "app" along with what debugger is able to run it:

• Run "apm" (Node.js)
• Run "functions" (Azure Functions)
• Run all (okay, maybe this is risky 🤣 )

I realize this will get out of control if we try to handle every case so maybe the debuggers can contribute this. They would need to contribute the markers to "announce" they can run something in the current workspace.

Doing this may prevent users from ever having the directly deal with launch.json unless they really need to do some custom shenanigans. I don't think that's a goal of ours though so maybe I'm creeping a little.

[isidorn]

Thanks you for your feedback, however we have already discussed both these concers at the UX meeting last week.
I should have a working version this week and then you could provide more feedback!

[isidorn]

Thanks again for the feedback. Here's a very first rought version of this and I would love to get feedback.

This new view I call the start view. So please note:

• The Start view is shown when you do not have a launch configuration and while you are not debugging. Which means as soon as you setup launch.json, or start debugging the other views come in its place
• @weinand and me decided to call the actions Debug Code and Run Code. @fiveisprime unfortunetly we do not have extension contributions which would allow us to know what will they launch (potentially giving a better name). Debug App and Run App also sound great, but do not fit all use cases
• I put the Debug action first, since that felt more honest (all our UX that appears is tuned towards debugging not running)
• Feedback on the text would be very welcome. Current one is "You have not yet configured launching. For a more complete debug and run experience create a launch.json"
• @weinand has suggestions to introduce more text, but I am a bit worried that it might scare off users
• Title area has the folowing text Debug: Start and does not show the actions to avoid duplication

In case somebody is hot to try it out in action, here's the PR.
#85398

Also fyi @eamodio @joaomoreno @sana-ajani @roblourens @connor4312

[miguelsolorio]

FYI @qubitron