Try to not indent the active debugging line

[hediet]

This is a screenshot of a debugging session in VS Code insiders:

It would be nice if a source code line does not move if it becomes active - this would make tracking the execution path easier.
Currently, it is indented by the yellow inline decorator.

The yellow arrow could be rendered before the line:

In the special cases where the yellow arrow is in the middle of the line, this does not work. However, this does not happen very often so it is not that annoying.

What do you think @isidorn, @connor4312, @weinand?

[weinand]

Yes, I agree, shifting a line in order to show the arrow is annoying.
But I don't think that there is an easy way to avoid that...
@isidorn ?

[isidorn]

Good idea. The thing with decorations is that they always push the text and as far as I know there is no option for the decoration to not push.
So we would need to do some css tricks in order to make this working.
Maybe @alexdima has a good suggestion on a nice way to make decorations not push?

[hediet]

Maybe something similar to what liveshare uses to show the cursor name can be used:

[bpasero]

💯 ^💯

I recently thought what makes me still uncomfortable using debug in VSCode and think this is it. I think devtools do this really really well, they never shift a line when debugging, rather:

• when a breakpoint is added, the line shifts only (and only) if there are multiple debug breakpoints possible in the line
• when you just step over code, no breakpoint is shown, rather the current stopped statement is highlighted
• when a breakpoint is added and there are multiple breakpoints possible, each one appears "ghosted" to indicate you can add breakpoints and to reduce the line indentation to just one

[alexdima]

Maybe @alexdima has a good suggestion on a nice way to make decorations not push?

I think the LiveShare cursor also uses a ::before decoration. I think there are some CSS properties that you could set on the decoration to make it not push the content. Maybe you could try to inspect element on the LiveShare cursor.

[jdemeule]

I also face difficulties to follow the execution path when the code I am looking is constantly shifting with this yellow decorator appearing in the middle of a line.
Could I suggest to make this behavior optional as "Show Inline Breakpoint Candidates"?

[isidorn]

@alexdima thanks for the idea, I took a liveshare approach to use position: absolute and not push.

To make this nice, I am not pushing when there is space on the left for me to put my decoration. if the decoration is on the middle of the line I will push as before which I think is expected.
You can see it in this gif: