Decorations with gutter icons hide breakpoint icons

[ArtemGovorov]

• VSCode Version: 1.0.0
• OS Version: any

Steps to Reproduce:

1. Create a decoration type window.createTextEditorDecorationType({ gutterIconPath: ... }); with an icon, decorate a line.
2. Set a breakpoint for the line. While the breakpoint works, the decoration type gutter icon is completely hiding it.

Ideally, there should be a way to see both (all) icons. I'm assuming the same issue happens if two different extensions set different icons for the same line. Atom and IntelliJ platform based IDEs solve this by allowing to create a plugin specific gutter/or just extending the gutter horizontally to fit all icons.

If the above mentioned solution is not desirable for some reason, then it should probably be allowed to set a gutter icon zIndex for a decoration type. Or maybe the breakpoint icon should just take precedence and always be displayed above any extensions icons.

[buzzdan]

Hi guys,
Any news on this issue?
it's making it much harder to debug like that (i'm used to use the mouse to set a breakpoint)

[alexdima]

Today there is space in there for one glyph.

I guess we need to implement an overflow experience in there.

This is a feature-bug, as the code was never designed to handle more than one glyph margin for a line.

[dotnetprofessional]

+1 on this - I'm experiencing the issue with Wallaby, but I can see that other plugins may be competing for the same real-estate in the future. Visual Studio supports this feature today.

[ChrisBellew]

+1 Also am a Wallaby user who would like to see both breakpoints and wallaby line coverage. My thought is that seeing the breakpoint glyph is of higher importance than the coverage glyph, maybe some kind of multiple glyph (with precedence) system would work?

[thelazydogsback]

Ignoring the obvious degenerate cases, why not just make the gutter big enough to hold the maximum number of glyphs currently displayed on any line??

[breathe]

New to vscode (really enjoying it so far). Also a fan of wallabyjs and would love to see a feature added to allow more elegant behavior here.

[JoshuaKGoldberg]

It sounds like there are two main ways this could be resolved:

• Easier, less flexible path: Allowing z-index style ordering so Wallaby icons go below VS Code's
• Complex, better path: Increasing the width of that gutter area

@alexandrudima is the "easier" path something a first/second-time contributor could tackle? (any hidden gotchas?)

[alexdima]

I think that could work. IModelDecorationOptions could get a new zIndex property that could be used for sorting in the various places we render decorations.

[JoshuaKGoldberg]

Cool, looks like 843facb fixed this. @ArtemGovorov is that enough to go off of?

[ArtemGovorov]

@JoshuaKGoldberg Unfortunately, gutter icons decorations in VS Code are apparently rendered by applying class names to the same div, so zIndex is irrelevant:

[CoenraadS]

I just ran into this with my extension, I want to show brackets in the gutter but as long as they block breakpoints it's highly annoying and probably won't be used.

[connectdotz]

looks like this has been resolved in TestExplorer since v1.59, see the gutter menu below. Is there a way to expose the same feature to extensions? cc @connor4312

[eamodio]

It looks like the root cause is this function:

https://github.com/eamodio/vscode/blob/e15b7b08a906b1e974a6a8bbd801c7c6863f7a2b/src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts#L431-L443

Where the breakpoint hover/click overlay is explicitly being skipped. While I can kind of see the reasoning -- e.g. not wanting it to look like there is interaction based on the decoration shown, as it will always be about the breakpoint -- at least until #5455 is supported.

Maybe there could be a new gutterInteraction: false or gutterAllowBreakpoint: true setting that could be added to the decoration options, to allow the breakpoint interaction to be allowed on top of a gutter decoration. Or maybe this should just always be allowed for all current gutter decorations, and when🤞 interactivity on the gutter lands it could turn off the breakpoint interaction.

/cc @hediet as you've been making some recent changes with the 3-way merge support

[alefragnani]

I know some UX changes needs a fair amount of exploration and tests, but I wonder why not borrow how other products works.

• JetBrains IDEs (IntelliJ and Rider) simply expand the gutter to support more decorators.
• Embarcadero Delphi reserves a gutter space to breakpoints, and additional decorators (like bookmarks) are added to its side.

I mean, it's been 6 years...

[connor4312]

looks like this has been resolved in TestExplorer since v1.59, see the gutter menu below. Is there a way to expose the same feature to extensions? cc @connor4312

This is something we manually handle in the testing code in VS Code core.

We've also discussed this in #114776

[MDUK0001]

Sorry please delete - commented on wrong issue

[sehoffmann]

This feature is desperately needed.

[andrewdingcanada8]

Want to just ping the devs on this again, since it's now 2023.
I personally came across this bug due to the test coverage highlights blocking my ability to add debug breakpoints.
Would love to see this fixed!