philc / philc/vimium

Custom CSS for link hints not applied inside iframes (Firefox)

Open
#4,787 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
27k
Forks
2.6k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

I have the problem of custom CSS for link hints not being applied inside iframes (looks like #3418, which was closed in favor of #3452, where I already reported this bug over half a year ago):

Image

I have experienced this on multiple sites with iframes. The screenshot shows vimium.github.io, but you can also try it with any other iframe on a local page, for example: data:text/html,<iframe src="https://vimium.github.io/", height=100%, width=100%></iframe> (just paste this as a URL into the address bar)

Interestingly enough, a temporary fix is navigating to some other page in the same tab. When the page with the iframe is still cached and therefore not reloaded after switching back, the link hints look as intended. The link hint view does not even need to be shown for this to work, not before switching, nor on the other page – it even works with about:newtab, where the extension is not even allowed to load.

I have already tried increasing the specificity of my rules, but the Page Inspector confirms that inside iframes, the custom link hint CSS is not loaded in the first place. The HUD and other elements are, as far as I can tell, completely unaffected by this bug.

To Reproduce

Steps to reproduce the behavior:

  1. Configure custom link hint CSS in the Vimium option
  2. Open any page with an iframe, as described above
  3. Use the keyboard shortcut for LinkHints.activateMode (f by default)

System Information

  • OS: Arch Linux (rolling)
  • Browser: Firefox (tested on 136.0.1; 144.0.2)
  • Vimium: tested on 2.1.2; 2.2.1; 2.3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the LinkHints.activateMode entry point and trace how custom link-hint CSS is loaded when the active page contains an iframe. Reproduce the issue with the provided vimium.github.io iframe URL in Firefox and inspect the iframe with Page Inspector. Done means the configured custom link-hint CSS is applied inside the iframe without relying on navigating away and back.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.