Skip to content

Text as direct child of shadow-root prevents link hint #4620

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

Closed
keysmashes opened this issue Feb 3, 2025 · 4 comments · Fixed by #4621
Closed

Text as direct child of shadow-root prevents link hint #4620

keysmashes opened this issue Feb 3, 2025 · 4 comments · Fixed by #4621

Comments

@keysmashes
Copy link
Contributor

keysmashes commented Feb 3, 2025

Describe the bug

Given the following structure, where <custom-element> is the root of a shadow DOM:

<a href="...">
  <custom-element>
    some text
  </custom-element>
</a>

a link hint will not appear on the <a> even though it should.

The cause is that LocalHints.getElementFromPoint does not return any element (because it sees that <custom-element> is a shadow root and tries to recurse into it, but elementsFromPoint apparently does not return text nodes), so the nonOverlappingHints step decides that the <a> element is not actually visible.

To Reproduce

Steps to reproduce the behavior:

  1. Go to URL Text as direct child of shadow-root prevents link hint #4620
  2. Press f, and try to click on the date this issue was opened ("now" in the screenshot below)
  3. Observe that there is no link hint

image

Browser and Vimium version

Firefox 134.0.2, Vimium 2.1.2

@philc
Copy link
Owner

philc commented Apr 10, 2025

Hey @sersorrel, good description. Can you provide a different / full reproduction case for posterity? On my system I see link hints for the date in the Github issues page. I'll note that your Github issues UI looks significantly different than mine.

Image

@philg-dev
Copy link
Contributor

For what it's worth: My UI looks pretty much the same as yours @philc , however I'm not getting the link hint on the date either, just like in @sersorrel 's example.

Image

The issue seems to be Firefox specific - at least it works fine for me in Chromium.

My tests just now were on the latest Vimium 2.2.1 releases on:

  • Chromium Version 135.0.7049.84 (Official Build) Arch Linux (64-bit)
  • Firefox 137.0.1 (64-bit) for Arch Linux

@keysmashes
Copy link
Contributor Author

Indeed it seems Firefox-specific. (I think GitHub updated their UI since I opened this issue, and I had a small amount of custom CSS at the time as well, but the problem still reproduces for me, in Firefox but not in Chrome.)

Try placing a breakpoint at link_hints.js:1284, hitting f, and stepping twice; in Chrome, I see elementFromMiddlePoint getting assigned the relative-time element, but in Firefox I see it getting assigned undefined. Stepping into the recursive getElementFromPoint call reveals that in Firefox, root.elementsFromPoint(x, y) returns an empty array, but in Chrome it returns a 27-element array starting with the relative-time element (so we hit the stack.includes(element) case and return element).

MDN recommends against using elementsFromPoint on shadow roots, presumably because of issues like this:

Some browsers return only the shadow root elements present at that location. Other browsers include elements outside of the shadow DOM, from the shadow DOM element in the topmost layer to the document root node, such as the <html> or <svg> root element.

@philc
Copy link
Owner

philc commented Apr 13, 2025

Ah, I'm noticing now that it was originally reported in Firefox. I reproduced this in Firefox. Thanks for the fix!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants