Hints
Glide supports a hint mode that lets you operate web pages entirely using the keyboard.
Press f to enter hint mode and Glide will overlay text labels over every hintable element, e.g. links and buttons. Typing the label for a hint will then focus and click the element.
You can press <Esc> to exit hint mode at any time.
Note: Hints are static. Scroll or DOM changes require pressing f again to regenerate, although existing hints will still point to their original elements.
Reference
Hintable elements
An element is considered "hintable" if any of the following are true:
- It is one of <a>, <input>, <textarea>, <button>, <details>, <summary>, <option>, <label>, <toolbarbutton>, <richlistitem>, <menulist>, <checkbox>, or <radio>.
- It has one of the following roles: link, button, option, menuitem, menuitemcheckbox, menuitemradio, tab, checkbox, radio.
- The element is editable
Then, for the element to actually have a hint generated, it must be visible on the page and not be overlapped by another element.
For example, if a modal is open then only elements inside the modal will have hints.
Label generation
Labels are generated using the following lowercase alphabet with this priority order:
hjklasdfgyuiopqwertnmzxcvb
Currently, this alphabet cannot be changed.
If there are too many hints for each label to have a single character from the alphabet, then labels are generated by appending additional characters from the same alphabet. For example, if there are 30 hintable elements on a page:
- Elements 2-26 get single-character labels: j, k, l, a etc.
- Elements 1 & 27-30 get two-character labels: hh, hj, hk, hl
Default key mappings
| Key | Action |
|---|---|
| f | Enter hint mode and activate the selected element via click. |
| F | Enter hint mode and activate the selected element in a new tab |
| <leader>f | Enter hint mode for elements in the browser UI |
| <esc> | Leave hint mode and clear all labels |
Excmds
:hint
| Flag | Default | Types | Description |
|---|---|---|---|
| -s | null | string | Only show hints for all elements matching this CSS selector. |
| -e | null | boolean | Only show hints for elements that are editable. |
| --include | null | string | Extend the default set of hintable elements with a custom CSS selector. |
| --action | click | click | newtab-click | How to activate the element |
| --location | content | content | browser-ui | Where to generate hints from |
Note that filters use a logical and, they all must pass for the element to be hinted.
For example, -s "label" -e will never result in any hints because <label>s are never editable.
Examples:
:hint
:hint --action=newtab-click
:hint --location=browser-ui
:hint -s "a, input"
:hint -s "[onclick]"
:hint -e
:hint --include ".custom-button"