Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Decorations with gutter icons hide breakpoint icons #5923

Closed
ArtemGovorov opened this issue Apr 28, 2016 · 43 comments · Fixed by #179910
Closed

Decorations with gutter icons hide breakpoint icons #5923

ArtemGovorov opened this issue Apr 28, 2016 · 43 comments · Fixed by #179910
Assignees
Labels
editor-rendering Editor rendering issues feature-request Request for new features or functionality insiders-released Patch has been released in VS Code Insiders on-testplan
Milestone

Comments

@ArtemGovorov
Copy link
Contributor

  • 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
Copy link

buzzdan commented Jun 29, 2016

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)

image

@alexdima
Copy link
Member

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.

@alexdima alexdima added feature-request Request for new features or functionality bug Issue identified by VS Code Team member as probable bug labels Jun 29, 2016
@alexdima alexdima added this to the Backlog milestone Jul 8, 2016
@alexdima alexdima added the ux User experience issues label Jul 8, 2016
@dotnetprofessional
Copy link

+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
Copy link

+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
Copy link

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
Copy link

breathe commented Jul 28, 2017

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.

@alexdima alexdima added editor-rendering Editor rendering issues bug Issue identified by VS Code Team member as probable bug and removed bug Issue identified by VS Code Team member as probable bug labels Nov 24, 2017
@JoshuaKGoldberg
Copy link
Contributor

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
Copy link
Member

alexdima commented Dec 4, 2017

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
Copy link
Contributor

JoshuaKGoldberg commented Apr 8, 2018

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

@ArtemGovorov
Copy link
Contributor Author

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

screen shot 2018-04-09 at 9 48 30 am

@CoenraadS
Copy link
Contributor

CoenraadS commented Apr 14, 2018

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.

@alexdima alexdima removed ux User experience issues bug Issue identified by VS Code Team member as probable bug labels Apr 17, 2018
@connectdotz
Copy link

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

Screen Shot 2022-05-24 at 2 14 48 PM

@eamodio
Copy link
Contributor

eamodio commented Jun 1, 2022

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
Copy link

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
Copy link
Member

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
Copy link

MDUK0001 commented Jun 20, 2022

Sorry please delete - commented on wrong issue

damolinx pushed a commit to damolinx/vscode-bookmarks that referenced this issue Aug 21, 2022
  - They must be kept off by default because of [VSCode #5923](microsoft/vscode#5923).
  - Bookmark images are taken from https://github.com/microsoft/vscode-icons.
@sehoffmann
Copy link

This feature is desperately needed.

@andrewdingcanada8
Copy link

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!

@vscodenpa vscodenpa added the unreleased Patch has not yet been released in VS Code Insiders label Apr 14, 2023
@joyceerhl joyceerhl modified the milestones: Backlog, April 2023 Apr 14, 2023
@vscodenpa vscodenpa added insiders-released Patch has been released in VS Code Insiders and removed unreleased Patch has not yet been released in VS Code Insiders labels Apr 17, 2023
@github-actions github-actions bot locked and limited conversation to collaborators May 29, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
editor-rendering Editor rendering issues feature-request Request for new features or functionality insiders-released Patch has been released in VS Code Insiders on-testplan
Projects
None yet