Provide extension hooks to generate debugger configuration when clicking Add Configuration button

[DonJayamanne]

Currently clicking the Configure or fix launch.json button will invoke the DebugConfigurationProvider of the extension.

We (Python Extension) have used this to generate a leaner launch.json file (#62851 & microsoft/vscode-python#3321 (comment)).
However, when the user clicks the Add Configuration button (either in the debugger dropdown or button displayed on the bottom right of launch.json, the corresponding extension hooks do not get triggered. Instead VSC merely displays a pick list of configuration snippets.

We were hoping VSC could provide some hook (similar to DebugConfigurationProvider) that would get invoked when clicking the Add Configuration button.

[isidorn]

@DonJayamanne this makes good sense and is somewhat a duplicate of #63121
As stated there:

Dynamic snippets should be shown on top of the add configuration suggest box and they should get configurations via provideDebugConfigurations call.
One dynamic snippet per debug type.

So basically the add configuration would call into the same exisiting DebugConfigurationProvider, we would not add any hooks.
Assigning to this milestone to investigate, and closing the other issue as dup of this one

fyi @weinand

[isidorn]

Note to self:
debugConfigurationManager should CompletionProviderRegistry.register for launch.json and return kind: snippet for CompletionItem. One CompletionItem per each debug type that has a DebugConfigurationProvider. Title should be just ${adapter.label}.
Code pointer https://github.com/Microsoft/vscode/blob/f7fa42107e8d37149410bcbe67a5cf4043390634/src/vs/workbench/parts/debug/electron-browser/debugConfigurationManager.ts#L278

@aeschli is there some way for me to provide a dynamic JSON schema snippet like this but that I compute it on the fly and return a promise. Or I have to go thorugh the CompletionProviderRegistry as I propose here.

[isidorn]

@DonJayamanne we tried implementing this and we believe that all the pieces are there already and this could be done by extensions. Here's what we recommend:

1. An extension should register a CompletionItemProvider for the **/launch.json files
2. As a result to provide suggestions the extension should for each configuration it wants to show return kind: snippet and return a proper snippet

Here's a very rough sketch of this

CompletionProviderRegistry.register({ pattern: '**/launch.json' }, {
	provideCompletionItems: (model, position, context, token) => {
		return this.provideDebugConfigurations().then(configurations => {	
			// TODO map configurations to suggestions
		});
	}
});

Here's the actual vscode api for this https://github.com/Microsoft/vscode/blob/275d2a02ca922738b58cea7dbf9dce229ea75f21/src/vs/vscode.d.ts#L7838

Can you please try this out and let us know if you find any missing pieces?
What might be a bit pesky is to try to figure out when you shuold provide suggetsions and when not. For that you need to look at the passed model and position and by parsing the text figure out if it is ok to show suggestions.
For example if inside the configurations array it is ok to do that.

Here's a sample for completions https://github.com/Microsoft/vscode-extension-samples/tree/master/completions-sample

[DonJayamanne]

Thanks, however that's not what we're after.
I probably should have provided more information.
Here's what we have currently implemented within our extension (currently disabled in our extension):
See here microsoft/vscode-python#3321 (comment)

• Clicking the Configure or fix launch.json button will invoke the DebugConfigurationProvider of the extension.
• In our extension we display a pick list, prompting the user to select the appropriate debug configuration
• Selecting items from the pick list will take the users through a set of other steps (kinda like a wizard similar to https://github.com/Microsoft/vscode-extension-samples/blob/master/quickinput-sample/src/multiStepInput.ts)
• All this time, the method DebugConfigurationProvider.provideDebugConfigurations has not yet returned and the user is going through our custom wizard to setup their debug configuration
• Once done, the method provideDebugConfigurations will return a configuration entry.

Next:

• If the user instead goes into launch.json and clicks on Add Configuration (bottom left) at this point theres no way for us to display this same UI.
• We could hijack the completionProvider and display our UI, but that would be a very poor experience (i.e. displaying custom pick lists when typing in the editor).

Suggestion

• We were hoping clicking Add Configuration would provide some hooks where by we can display a UI to the user.

Problems
I can see how this can be a problem for some users.
Someone working on .net, java or node.js projects who happen to have a single python file in their workspace. Opening this python file will activate our extension.
Now if they go into launch.json, and click Add Configuration they'll get this new UI and this would be annoying.

Summary
Basically we need some way of displaying the same UI we have added when users's generate the launch.json.

[isidorn]

@DonJayamanne thanks for feedback. We are currently wrapping up our milestone this week, so I will think about your use case and get back to you next week.

[isidorn]

@DonJayamanne First of all sorry for the slow response, only found time now.

I understand your scenario and thanks for clariyfing. And yes I agree with you if we allowed an extension to hijack the Add Configurations button it could be a confusing experience to the user.

I think my original proposal would not be such a bad scenario, let me clarify it a bit from a UX standpoint:

User clicks Add Configuration button, he is in the editor and sees a list of suggetions (he can choose freely if he wants C# or Python). The first Python suggestion is just called PYTHON... or something to make it stand out from the rest - also to make it stand out I suggest using a different icon and having ... at the end. Once the user chooses that one -> you go in your quick pick wizard experience.
Was this how you envisioned my original proposal? If yes why do you think this would be a very poor experience? Since it adds just one step between user clicking Add Configurations and you dislpaying your UX. And since we can not hijack the Add Configurations button adding less than 1 step is impossible.

[isidorn]

For demo purposes of the idea I have created a very simple extension that does just this.
So instead of invoking quick open like me you woud just invoke your wizard experience

I can also show this to our UX team to get feedback and potential ideas, but for now I think it is more important to get your feedback.

[DonJayamanne]

So instead of invoking quick open like me you woud just invoke your wizard experience

Perfect.

First of all sorry for the slow response, only found time now.

Absolutely no problem.

I think my original proposal would not be such a bad scenario, let me clarify it a bit from a UX standpoint:

Sorry but I didn't understand you the first time, with the screen sample you're suggestions makes more sense now

[isidorn]

Glad you like the idea. Yeah the first time i was not being precise enough.

As for the implementation here are some tips which might help:

1. Register a CompletionItemProvider for launch.json files
2. In the provideCompletionItems add your *PYTHON... completion item. Experiment with differnt labels and kinds to make it prominent (different icon, top of list)
3. In the resolveCompletionItems call into your wizard if the user picked your completion item from step 2.

That should make it work. However now your completion item will be shown whenever a user triggers inteli-sense in the launch.json, and that is not ideal.
Ideally you would only give back your completion item when the cursor is inside the configurations array. In order to achieve this we suggest using the jsonc parser https://www.npmjs.com/package/jsonc-parser
Using this you can easily parse the launch.json document and figure out where the cursor is.
Here's an example where I am using it.

Because there are no code changes needed on the vscode side I am closing this issue.
@DonJayamanne feel free to ask questions and let us know if we can help more.