Introduce GlyphWidgets and tackle overlapping decorations in gutter

Related discussion https://github.com/microsoft/vscode/issues/25174

So far we have never tackled the problem of mutliple decorations on the same line. @alexdima and me have started a discussion and here’s are things that came up:

Overlapping decorations

What to render in the Glyph Margin once there are multiple decorations, here are some options:

1. Try to combine multilpe icons into one. Downside of this is that this will probably not look good if we automatically merge icons
2. We render the first icon that came and in the corner we put N where N is the number of decorations there
3. We render a generic decoration icon, so we render the Generic one + N (like a badge)

Once we have something rendered, here are two options how the interaction could look llike:

1. Clicking on it triggers the context menu which for each decoration has the decoration label as text and no icons
2. Hover expands the multiple decorations and each decoration gets rendered, on each decoration the user can click / drag

GlyphWidgets

One thing is that we might need to add a new concept to the editor where glyph margins are not just decorations since you need so much interaction with them. One option is to add the concept of “glyphWidget” similar to “contentWidget” where you pass in a dom node to the editor. That would give you a chance to add dom event listeners on your own and then the editor can just be responsible with positioning them. The glyphWidgets would give more control to the decoration author, one use case would be https://github.com/microsoft/vscode/issues/88227

[karthiknadig]

Just adding here a potential bug with coloring:

This happens if you Add Breakpoint after successfully running a test.

When we hit the breakpoint, the running spinner also spins the breakpoint indicator:

[isidorn]

Thanks for ideas! Let’s assign this to February, and I plan to bring it up in our first UX meeting in that milestone so we can continue the discussion there.

@connor4312 Agree, being able to drag and drop a breakpoint when there are multiple decorations there is a bit of an edge case and I would not really worry about it at the moment. Agree that option 2 is a good start, GlyphWidgets could have weight and the one with the highest weight would win. When there is more than 1 decoraiton we render the indicator as you mention, and click always opens the context menu. I think we will also need a concept of an “actionable” decoration or not. And if only there are more than 1 actionable decorations we would show a context menu on click. Example: yellow callstack decoration is not actionable, breakpoint is actionable so when both are on the line clicking would just execute the action of the breakpoint (as it does today).