hints don't show on some pages

[The-Compiler]

• Google+, reported by V155 on IRC
• https://relayrides.com/search?location=ZIPCODE&startDate=&endDate=#location=ZIPCODE&page=1 (for the "learn more" dropdown)
• http://buildbot.net/ (the "fork me on github!" banner)
• GMail tabs:

• Facebook input fields with ;t

• Items at https://www.uni-bonn.de/studium/im-studium/studienorganisation/termine-und-fristen#einschreibefristen (<span> elements with JS click handlers)

• "Neueste zuerst" at https://www.ebay-kleinanzeigen.de/s-test-/k0 (<div> element with JS click handler)

• Twitter's "what's happening" box (div with role=textbox)

• "Keep me signed in" checkbox on https://www.messenger.com/

• Contacts on WhatsApp web (except for the pictures):

• Article links on tagesschau.de (#4988)

• Searx category headers (#6694)

• learnopengl.com menu items (#6864)

• DuckDuckGo thems in settings (#7738)

Pages which seem to work in the meantime:

• ~~mobile.de: this page. - It seems they wrap all <a>-tags in <div> tags and that maybe trips hint searching up.~~
• ~~http://codecore.ca/~~
• ~~Google searches (the "gle"/next link - the hint at the top left of that is for page 10)~~

[B0073D]

'Mark as Read' button in IRCCloud. This button appears once you have been away from the channel for a while and there has been a fair amount of activity.

[NoSuck]

Add to this list: Gmail links to messages (the subject line) in HTML mode.

[error800]

Test case for the buildbot.net "fork me on github" banner. The hint is actually there, but moved out of the visible screen by CSS:

<a style="position: relative; left: -1em;" href="http://qutebrowser.org">
  link link link
</a>

[error800]

The relayrides.com dropdown does not work because there is no link at all, there is just a <span> that gets a click event attached by JS.

[NoSuck]

Is issue #292 a duplicate of this one?

Another for the ongoing list: The Arch Mirror Status page has sortable headings (Mirror URL, Protocol, Country...) that do not get link hints.

[The-Compiler]

I don't think so - this is about no hints showing up at all, #292 is about hints being there but nothing happens when activating them.

On that page, that's because it's simply a th/div element with a javascript click handler, which is currently not detected as clickable.

[rcorre]

'Member Login' on https://www.nearlyfreespeech.net/

[The-Compiler]

@rcorre Hmm, that's an interesting one - it actually does get a hint, just a misplaced one. In word hinting mode:

Also, it seems the "label" when inspecting it via Chromium is off too:

[The-Compiler]

Another one: <details> elements, e.g. the arrows on this page. Interestingly, adding them to the CSS selector makes it possible to open them, but closing doesn't work.

[The-Compiler]

I've been talking with @nemanjan00 about this a bit, and we found two possible solutions to catch elements with a JS click handler:

Checking for the cursor

Get the computed style for all elements, and see where the cursor has been overridden via CSS:

:jseval Array.from(document.querySelectorAll("*")).filter(element => {return window.getComputedStyle(element, null).cursor == "pointer"}).forEach(e => e.style.background = "yellow");`

This might be a bit of a performance problem though (but it seems to runs faster than I thought it would), and doesn't catch all cases (especially not fake input elements).

Checking for addEventListener calls

We should get any element which had addEventListener('click', ...) called on it. We can't easily find this out after the fact, but we can do it similar to Vimium: Inject a script which adds a special attribute to elements in an addEventListener wrapper. However, it remains to be seen whether we can inject that after the DOM is built but before the page's JS runs.

[The-Compiler]

vimb also shows hints for elements with a tabindex attribute. That catches e.g. the fake checkboxes for GMail mails. We might do that as well, but I'd rather wait until we have configurable selectors (#2773) as there are some false-positives as well.

[The-Compiler]

FWIW Vimperator has an xpath which uses tabindex too:

const DEFAULT_HINTTAGS =
    util.makeXPath(["input[not(@type='hidden' or @disabled)]", "a", "area", "iframe", "textarea", "button", "select"])
        + " | //*[@onclick or @onmouseover or @onmousedown or @onmouseup or @oncommand or @role='link'or @role='button' or @role='checkbox' or @role='combobox' or @role='listbox' or @role='listitem' or @role='menuitem' or @role='menuitemcheckbox' or @role='menuitemradio' or @role='option' or @role='radio' or @role='scrollbar' or @role='slider' or @role='spinbutton' or @role='tab' or @role='textbox' or @role='treeitem' or @tabindex]"
        + (config.name == "Muttator" ?
            " | //xhtml:div[@class='wrappedsender']/xhtml:div[contains(@class,'link')]" :
            "");

[olmokramer]

@The-Compiler re checking for addEventListener calls with special attributes, even that way it's not waterproof. There's this pattern for adding click handlers to elements that adds an event handler to the document that only triggers when some certain element is clicked. The advantage of this pattern is that you don't have to put a handler on every single element that you want to handle events on, even if they are added to the page dynamically. Wrapping addEventListener would put the attribute on document instead of the element you want. That said, I don't know if the pattern is still in use much, but it was a few years ago.

document.addEventListener('click', function onClick(event) {
    if (event.target.closest('.click-handler-class')) {
        // Handle click on .click-handler-class
    }
}, true);

[The-Compiler]

@olmokramer That makes me wonder how (or whether) other projects handle this. Still I guess it'd be an improvement over what we have now.

[olmokramer]

@The-Compiler Well, you could get a lot of false positives, i.e. hints that do nothing. It wasn't really clear from my example, but document could really be any element, and that element would then get the hint, but because it only handles the event when it triggers on one of its children, nothing would happen.

That said, this problem would of course still exist if you don't wrap the addEventListener method but could get event listeners some other way.

[The-Compiler]

Thank you! Merged with a couple of changes on top:

• 121483aa900a106d54ebf57cfdefcc64ff3b976d adds error handling for invalid selectors - I don't see a way to validate them earlier in the config (at least not without a new dependency, or hacks like creating a webpage only for validation). With this, at least users get a good error message.
• 0423ec6f9113d320a372a24b83a41fff2be88dd6 adds webelem.css_selector, so :navigate also merges global/per-URL settings properly. Before that, :navigate crashes when the user removed the links selector.
• f36285658e8c60ec0ed0d96ce5cdb700629e7434 disallows setting hints.selectors in autoconfig.yml, which should help with the "hardcoded default" issue for now.
• 3fe64085f8b91b6d8ee6b17665e2e6ae7e8a1bdb adds [tabindex] to the default selectors.

[The-Compiler]

Err, that was the wrong place for the comment above :laughing:

Thanks to @olmokramer, it's now possible to configure hint CSS selectors (also per-domain), which should make this a lot better. I also added [tabindex] to the default selectors.

[NoSuck]

TinEye's upload button does not receive a hint.

<form id="upload_form" method="post" action="https://tineye.com/search" enctype="multipart/form-data">
  <label for="upload_box" id="upload-button"></label>
  <input id="upload_box" name="image" onchange="display_throbber(); this.form.submit()" title="Upload an image" type="file"  />
  <input style="display: none;" id="file_submit" value="Upload Image" class="submit" type="submit"  />
</form>

[rcorre]

Top-level navigation controls in gerrit do not get hints either:

[The-Compiler]

@rcorre that one works fine for me on the current git master:

[The-Compiler]

A vimium-like solution (adding a custom attribute to elements with an event listener) has the problem that it breaks some pages which make sure the DOM wasn't messed around with, see https://github.com/philc/vimium/issues/2997 - I wonder whether https://github.com/philc/vimium/pull/3004 would be a working solution for that.

[user202729]

Random idea: run some JS on inspector page to expose getEventListeners. Not sure if there's a cleaner way. http://0x0.st/zBoL.py

Also, this function is async. I'm not sure if it's possible to wait for it to finish.

[ykahveci]

Actually most, if not all styled checkboxes and radio buttons don't get hints. I don't know if this is the case for other HTML input types.

A very common example would be bootstraps custom checkboxes, which many people (including myself) use: Example

[The-Compiler]

@ykahveci Looks like Bootstrap CSS uses opacity: 0 to hide the underlying browser checkbox. This is now handled correctly in 798fabd5b6e54acbe3f0195c9a6e305d9f3c6777, though that fix is Bootstrap specific. If you see more of those, please let me know!

[amacfie]

FYI Pentadactyl gets elements with onclick events via a Firefox API. VisualEvent can get them if they were created with certain JS libraries.

[The-Compiler]

Some more from #6278:

• Menu items on https://docs.julialang.org/en/v1/:

Those seem to work without JS. It looks like Vimium gives them hints because it looks at label elements which are not associated with any form control?

• Buttons on Pleroma:

Those look like the usual JS event handler case.

[Soundtoxin]

Thanks for the Pleroma button fix. Those work now.

There are some more Pleroma buttons not getting hinted, but you have to be logged in to see them. (they show on the left of every page when logged in) They're for setting post scope (4 options ranging from DM to Public), uploading files, picking an emoji for your post (also a smaller button to do the same for the subject line), or starting a poll. Is there a way I can find out what I'd have to add to my config by investigating the page somehow? And then if I find that out, what will my config line look like since I am already appending the stuff from before? Will I just write a second similar line?

[The-Compiler]

@Soundtoxin You can use :devtools to inspect the element (right-click) and then usually find some kind of ID/class to add to the selector. Then, something like c.hints.selectors['all'] += ['label.tocitem', '...'] in config.py should work.

If you have more questions, let's keep that in #6278 though please, as I'd like to keep this one focused on collecting cases which need work.

[Soundtoxin]

Checkboxes on eBay watchlist don't get hints https://www.ebay.com/mye/myebay/watchlist

[The-Compiler]

https://cookieconsentspeed.run/ doesn't have hints for the cookie toggles:

Despite those being checkboxes: