microsoft / vscode

Visual Studio Code

Home Page:https://code.visualstudio.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

OnClick event on Gutter

alefragnani opened this issue ยท comments

How could I handle OnClick events on Gutter, similar to how breakpoints does?

The intention was to connect it with a decorator (previously created with vscode.window.createTextEditorDecorationType) so the user should Click on the Gutter and create/destroy the decorator assigned to the line where the user clicked.

Thanks in advance

Cross refs;
1.This, Right click in vscode edge, mentioned: "visual studio code - Add right click menu item inside gutter of vscode" - Stack Overflow ; ; https://stackoverflow.com/questions/41821174/add-right-click-menu-item-inside-gutter-of-vscode
2.Right click on file in Opsys ;
Add shortcut for file right click context menu. #15939
3.Right click in editor:
Custom menu entires, context menu entries, and action bar items #3192
3.1.Within the bgse/relative-path-and-line extension , their first request;
Feature Request: add actions to context menu #1
4.Click in Menu Bar of editor; this appears to be the item merged as a result of [3]
menu bar extensions #7704

@AnneTheAgile just for clarification: the origin of this feature request wasn't the possibility to expose a whole context menu, this is already working some pixels to the right of the gutter. So the user has a very similar possibility already.
The origin was here: alefragnani/vscode-bookmarks#24
It is just about the mentioned decorator. It is about a single left-click feature like toggling a breakpoint.

commented

There now is an onclick event on the gutter, when editing settings.json.

It doesn't seem exposed through the API though.

Capture du 2020-02-07 12-24-41

This would be really useful. Any information about if this will happen? I'm making an extension where I want to click on a gutter icon that my extension creates and run a command and/or show a drop down menu.

I started working on an extension assuming this was already exposed and now I am stuck.

I got misled by breakpoint and the edit icon appearing in the gutter of settings page.

@sudhagar10 can you check this https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters

Thanks @chakraborty-slx. Took a look at it.

I was able to place icons in gutter. But click event there is not exposed and that is where I am stuck.

onHover would be useful too. For example in AREPL it would be cool if the user could hover over the error icon in the gutter to see the full exception message.

(commenting on this issue instead of a new one because I'm assuming it would be easy to add a onHover event along with onClick)

Has anyone begun working on this?

It would be a nice feature to have!

I would love this too!

FYI, this issue is related to #47559

It would be great to have this ability. Bump for this!
It greatly increases the ability to have options from icons showing in the gutter.

commented

The extension vscode-java-test recently switched from CodeLens to clickable gutter decorations:

Capture du 2021-09-02 15-26-55

This extension seems to rely on hardcoded snippets in vscode.

switch (getTestingConfiguration(this.configurationService, TestingConfigKeys.DefaultGutterClickAction)) {

Much like the OnClick event in the settings.json (see above).

I think the extension is using the new Test API, which is the one which is, in fact, handling gutter clicks.

So, the extension itself doesn't even know about that click event.

Is there an update? Recently, when writing a plug-in, you need to add a click event to gutterIcon.
image

How should I add a click event to gutterIcon, can it help me, thanks

The Java team would also like to see this feature supported, as we are exploring various UX improvement to our Java & Spring extensions. It seems that this is an established UX behavior in Java IDEs and one of the user asks from our survey. If we can support not just click events to the icons next to the line numbers, but also expose some kind of menu (like current testing API), it would be awesome.

I want to be able to click the line number to make a bookmark โ€” just like I have been able to do in Notepad++ for the past fifteen years.

We're also seeing usability issues with our user testing and the existing interaction model.

Currently, users need to:

  • hover over our extension's gutter icon
  • observe the tooltip
  • very carefully navigate over to the tooltip
  • very carefully click on the Title on the tooltip
  • begin interaction

This is much easier to understand when you see it:
CleanShot 2022-04-18 at 11 56 21

What they're expecting:

  • click the gutter icon
  • (extension opens webview)
  • user begins interaction

I the expectation is based on experience with breakpoints. Developers are conditioned to view a gutter icon, click on it, and take action.

We'd be happy to implement this as it seems to be a popular request from a number of extension authors (133 upvotes as of this comment).

Hi all ๐Ÿ‘‹

I'm correctly understood that this function is still not implemented?

@aldanchenko , you are right. It isn't available yet...

This is much easier to understand when you see it: CleanShot 2022-04-18 at 11 56 21

@dennispi May I ask what extension is this in the GIF? I'm trying to add hover messages on the gutter decoration but can't figure out how to do it. I think it'll be helpful to see how this extension does it.

@alefragnani @nickzhums FYI, relatedly there's an API proposal to expose a context menu in the editor gutter #175945 in order to support copying links for a line or range. You can try it out in the latest insiders but it'll only work in development until finalization. Any feedback is appreciated.

@joyceerhl thanks for pointing that out! I'll definitely take a look, and let you know how to fit on my scenarios ๐Ÿ‘

Hi @joyceerhl ,

I would say, at least on my side, that this issue can be closed as completed. ๐ŸŽ‰

As I commented on the API Proposal (#175945 (comment)), the API worked perfectly. And I'm already using on my extensions.

Thank you!

I'm not sure that a context menu suffices for our purposes. Can I make it so clicking an icon causes an action? Or must the icon open a context menu?

I'm not sure that a context menu suffices for our purposes. Can I make it so clicking an icon causes an action? Or must the icon open a context menu?

(see https://marketplace.visualstudio.com/items?itemName=Kale-Lab.salt for the use case)