How to hint elements with only mousedown listeners

[ramuyk]

Hi,

I've been using Vimium-c for a while and it really helps with my productivity. However, there are some specific situations that it'd be useful for me to see the elements ( with f) that require two clicks to take an action... Is it possible to configure this functionality on Vimium-c? Or doing that would involve changing something inside the source code?

[gdh1995]

What does "two clicks" mean? Does it require you to double click using a mouse? / Vimium C want you to press two letter keys to select the link?

[ramuyk]

Yeah, I mean when the normal action would be clicking twice with the mouse to execute the action... It usually happens on web applications when I have an icon that requires two clicks to execute an action. When I use F in these situations Vimium C doesn't show the letter keys for the places that require two clicks to activate. In the development perspective, I don't really know if it'd be something hard to implement though...

[gdh1995]

Update: Sorry but currently Vimium C can not tell from what nodes are "dbl-clickable", so it's another problem if Vimium C doesn't show hints for some nodes. Could you show me a demo page of your case?

Try map <a-f> LinkHints.activateMode dblclick and then use Alt+F to enter "dblclick" mode of LinkHints.

[ramuyk]

Thanks for the tip, but it still doesn't work for my case... Probably it's something with the web application that I'm using. Look:

Those dark and light orange nodes in the middle all open with two clicks, but Vimium C doesn't recognize them as clickable elements. Do you have any idea of what could it be?

[gdh1995]

Well, there're always some nodes that can not be found by web extensions, so could you give a demo URL? I'll test it in rest time.

[gdh1995]

Please try this version: vimium_c-1.79.2-fx-ca13fdd.zip
vimium_c-1.79.2-chrome-ca13fdd.zip

Chrome can load extensions on chrome://extensions/; on Firefox it's about:debugging#/runtime/this-firefox.

Added: although now Vimium C will hint those dbl-clickable, but the default action of LinkHints.activateMode is still a single click, so you may still need to add map <a-f> LinkHints.activateMode dblclick to custom key mappings on Vimium C options page.

[ramuyk]

Exactly what I needed! Thanks!!

It's also catching the connection dots now but that's not necessarily a problem for what I'm doing...

Could you tell me in which file you create the rules for finding the clickable elements on the source code? I could try doing some changes myself too.

[gdh1995]

For common web developers: an easier and costless way to notify Vimium C that an element is clickable is to add [role=button] to element, just like <span role="button">....

As for Vimium C itself:

• The main part of collecting clickable items is GetClickable_ in content/link_hints.ts#L413 .
  • It generates an initial list to do further de-duplicating
• There're 2 main functions to de-duplicate potential hint targets in content/link_hints.ts
  • The first is deduplicate_ in content/link_hints.ts#L824, which includes many hand-written rules to exclude special types of items
  • The second is getVisibleElements_ in content/link_hints.ts#L955, and it will move/exclude some overlapped hints

For this issue, your demo page uses a lot of mouse events to compute double click (instead of a dblclick event listener), and then I added detection for mousedown events to learn those nodes. This is why connection dots are also listed.

This detection is through VDom.clickable_.has(element), and on Chrome:

• VDom.clickable_ is a WeakSet used to collect dom nodes which has .addEventListener("click", ...)
• It's filled by onClick and resolve in content/extend_click.ts#L117
• The source list to fill is generated by addEventListener in content/extend_click.ts#L269
• The addEventListener function and related code will be injected to every web page, and replaces the browser's native addEventListener function, so that it can collect all click listeners.

On Firefox VDom.clickable_ is filled by newListen directly in content/extend_click.ts#L581.

[ramuyk]

Thanks for the detailed explanation...

I've invested some time on trying your first advice... I've created some sample webpages with role="button" as you said and I managed to make non-clickable elements to show the letter keys... After that, I've inspected the elements of that application on Google Chrome and I got to the conclusion that the right element to add role="button" would be rect on the class red-ui-flow-node as it shows following:

I've managed to find on the source code of Node-RED the part of the code where the element is created, so I've added role="button" inside it, now all nodes that I need to double click have the right role. However, Vimium C still didn't manage to find the elements when it's on Node-RED (the Vimium C that is published on Chrome, not the one that you sent me last time):

I don't really know what's getting wrong here. I don't know if there's something wrong with my expectation of how it should work, if on Node-RED the role="button" will not work for some internal detail, or if it's a problem with Vimium C on a particular case... Am I missing something in my logic? Or there are some specific situations where just adding role="button" to the class will not work?

(I've updated the demo link from the first time with the role="button" too)

[gdh1995]

Sorry for my mistake: currently [role=button] is only for HTMLElement nodes, but I forgot saying it.

For SVGElement nodes, the released version only checks whether [onclick] is not empty and some others, so you may add [onclick="javascript:void 0"], and I'll add [role] support on a next version.

[ramuyk]

It worked! My issue was completely solved by adding [onclick="javascript:void 0"] as an element and mapping another shortcut for double-clicking with map <a-f> LinkHints.activateMode dblclick... Thanks!

[ramuyk]

I'm rewriting on this issue because something has changed on my Firefox extension after the last update (1.79.3)... Now it's detecting the dots as it was on that version that you sent me:

My chrome extension that is not yet updated is still normal (1.79.2):

Have you added the mousedown click event on the official version that is now published?

I can get the version v1.79.2 getting the git link and regressing the version on the source code... Could you give me a brief explanation or a link with information of what I have to do to "compile" a Firefox extension from source?

[gdh1995]

Yes, it collects all with mousedown listeners now. The one on Chrome Web Store is being verified so what you see is still the old v1.79.2.

Do you mean you want "some" in those with mousedown is hinted, while some others not? Then maybe you have to wait a newer version - currently there're no rules to exclude some SVG elements which have been marked clickable.

If you're familiar with DOM programming, I recommend another way:

• add mousedown listener to the whole graph area, and then check what node is really clicked by yourself in JavaScript
• then all of those SVG nodes will be not hinted
• so you may add [role=button] (or [onclick=...]) to hint whatever you want

BTW, [onclick="javascript:void 0"] costs a little more that a simple [role=button], because it in fact creates a event handler on its element.

[ramuyk]

Actually, the version v1.79.2 worked perfectly for me as it was... I had changed the Node-RED code to include [onclick="javascript:void 0"] on the element that I needed and it was working exactly as I wanted it to be. In the end, it was more about changing Node-RED than changing Vimium C. Right now, I'd like to exclude all mousedown events from Vimium C... Is it possible with some configuration? Or it's only possible if I use the version v1.79.2?

[gdh1995]

It's "possible" to some degree: when in LinkHints mode, press Shift+F2 to stop to use a collection from content/extend_click.ts, and this effect will persist unitl the page is turned off / reloaded. A second Shift+F2 to re-enable the list.

[ramuyk]

It doesn't really work for my case... Is the mousedown event really necessary? Couldn't those extra click events that were added work inside an extra configuration instead of being the default ones?

[gdh1995]

Please wait a newer version and I'll exclude those SVG elements with [aria-hidden=true] or [aria-disabled=true]. It may arrive in two weeks.

[ramuyk]

Ah, so there's a way to disable elements as well... I could solve that directly on that app too. But meanwhile, could you send me a zip file of Firefox for the version v1.79.2 please? I've tried to compile the source code as explained on the main page but I get an error on node scripts/tsc all... It tells me that the parameter all doesn't exist

[gdh1995]

Oh, please run npm run latest-ff and the output is in ./dist folder.

The all is out of date...

[ramuyk]

Sorry about my silly mistakes... Do you mean just npm run latest -ff? Or:

npm run latest-ff
 ./scripts/make.sh output-file.zip

I've installed all the gulp dependencies he asks along the way... Then it says that everything is ok but no ./dist forder is created... And the zip file doesn't work too

[gdh1995]

The zip file is not needed - you can load from manifest.json in the dist folder on about:debugging#/runtime/this-firefox.

Maybe you need to create dist folder before npm run.

[ramuyk]

My mistake... I was checking for .dist instead of dist. It worked now, there were some string completion errors on the package.json file for the version v1.79.2 but after correcting them everything went fine. Thanks!

[gdh1995]

Hello, Vimium C v1.80.0 has been released on Chrome Web Store, so you may add [aria-hidden=true] to those SVG elements which shouldn't be hinted.

[ramuyk]

Thanks, I'm still using the version 1.72 these days as it's working perfectly for what I'm doing. However, is it possible to attribute [aria-hidden=true] or [role=button] to specific elements inside Vimium C? Or it's only possible by changing the web page or web application source code as I did before?

As web applications may have very particular ways of creating clickable elements and as not all of them are open-source like Node-RED where I can change the source code, I think that having a functionality inside Vimium C where I can choose different rules for elements that exist on specific pages could be useful... Is it already possible?

[gdh1995]

Currently Vimium C has no options to exclude some specific elements. As for a block list of element selectors, it is easy to implement a naive one, but I can not predict or judge the potential performance loss, mismatching percentage and usability (for some nodes there may be no selector to identify them exactly).

Similar discussions have occurred on the Vimium project, and no (positive) decision has been made.