Introduce a new `ignore_keys` setting that allows users to prevent
specific keyboard inputs from being forwarded to the remote VNC host
while still allowing the browser/client to handle them locally.
This addresses common UX issues where browser-level shortcuts (e.g.
Escape to exit fullscreen or F11 for fullscreen toggle) are also sent
to the VM, potentially interrupting workflows or triggering unintended
actions.
Key behavior:
- Keys listed in `ignore_keys` are handled locally & not sent to the VM
- Default value is to not ignore any key events
- Supports comma-separated input with whitespace tolerance
- Accepts aliases (e.g. "esc", "ctrl", "cmd") mapped to canonical codes
- Matching is case-insensitive and normalized
Implementation details:
- Centralized supported keys via `supportedIgnoreKeys`
- Added `normalizeIgnoreKey()` to map aliases to canonical codes
- Introduced `wrapRfbSendKey()` to intercept and filter outgoing key
events
- Simplified `keyEvent()` to delegate to `rfb.sendKey`
- Added validation for user input with visual feedback on invalid
entries
- Added dynamic tooltip and placeholder generation from supported
key list
UI changes:
- Added `ignore_keys` input to settings panel
- Added tooltip with supported key examples
- Added inline validation styling for invalid entries
Tests:
- Added coverage for `shouldIgnoreKey()` including aliases,
normalization, whitespace handling, and edge cases
- Added tests for wrapped `sendKey` behavior to ensure filtering works
- Updated `keyEvent()` tests to reflect pass-through behavior
- Added validation and helper function tests
This change improves usability when interacting with fullscreen mode
and other browser-level shortcuts, while remaining backward compatible.
Since the extra keys panel is quite narrow in width, a max-width style
resulted in the buttons almost disappearing. That rule was only intended
for elements inside the settings panel.
Broken by commit 14f9ea5880.
Another minor error that is also fixed by this commit is that the
clipboard textarea no longer incorrectly gets a left margin of 6px.
Fixes#1946.
Both labels and inputs protruded outside the panel on for example a
phone in portrait mode. This commit fixes that by allowing wrapping and
setting a max-width.
Since the --input-xpadding variable is now used in two different CSS
files, it was moved to constants.css.
Modern interfaces are less cramped, this makes noVNC feel more up to
date.
Note that this required some adjustments on noVNC_headings and
noVNC_connect_button since the text now takes up more height than the
images.
Gives a more clean look that fits well with the new checkboxes and
radios. The old border was mostly used to contribute to a 3d-effect,
that was used for :active. That :active-styling has been replaced by
activation levels.
Instead of having two different types of effects (hover had a different
color, and active had a 3d-effect simulating a pressed button), we now
have an increasing activation-level. That means the button goes a bit
dark for hover, and then even darker when pressed.
There is also a variant that goes lighter for each activation level,
that can be used when the initial color is dark.
With this change, we can get rid of special :hover and :active styling
for the connect button and the control bar buttons. We can use the same
activation level principle for all buttons.
This results in a few things becoming slighly more rounded, for example
the controlbar, the settings panel and buttons/inputs. Increased
rounding gives a more friendly feel.
To make stuff feel less cramped, lets add some margin here.
As of comitting this, it only affects the logging-level select dropdown
in the settings, but this is a general rule of thumb. It doesn't apply
to checkboxes or radios since they have a margin by default, and their
label to the left.
This is what we use in every other file in noVNC. It also much more
common for a CSS file in general. By standardizing on 4 spaces we can
avoid indentation mistakes.
Try to be more consistent in how we capitalize things. Both the "Title
Case" and "Sentence case" styles are popular, so either would work.
Google and Mozilla both prefer "Sentence case", so let's follow them.
Using <length> type values for line-height can give unexpected
inheritance behaviors. If using <length> values, the inherited
line-height on children is calculated using the font-size of the parent.
What we want is for the line-height of children to be calculated using
it's own font-size.
By instead using a unitless number, we get the behavior we want. Note
that this bug has no effects right now since no children to any of the
related elements have different font-sizes.
There were two issues with removing the outer div of the connect button.
Firstly, rounded outlines don't work in WebKit browsers like Safari or
Epiphany (https://bugs.webkit.org/show_bug.cgi?id=20807) and this makes
the outline look completely square.
Secondly the code became too complex.
This reverts most of commit 05baf14256.
Webkit browsers don't support Media Queries 4, which means we have to
use a slightly convoluted syntax when writing "@media not...". Otherwise
the "(any-pointer: coarse)" part evaluates as the device part of the
query.
Instead of having an outer "box", we can use an outline on the button
itself to create this "platform". Since the outline isn't part of the
size of the element, it will appear wider than before, when compared to
the logo. To counteract that we remove the left and right padding from
the logo to make the entire noVNC_connect_dlg more narrow.
We also had to slightly adjust the :active style since we don't want the
entire "platform" to move when the button is clicked.
This commit removes our dependency on the class "noVNC_touch" which was
set by Javascript. Instead, we can use the CSS media query
"any-pointer: coarse", which means that any pointing device that isn't
accurate is available. In practice this seems to basically be equal to
that a touch screen is available.
This change lets us simplify the selectors in many cases as well, which
is a nice bonus.
It is a button, let the HTML element reflect that. And instead of
having the outer div being clickable, lets only make the inner one
work like a button. Because of that, this commit renames the outer div
to "connect_box" instead of "connect_button".
Note that we remove the disabled :hover-effect for touch on this button.
It doesn't make much difference since this button is one of a kind.
Use the more specific background-color, and background-image properties
when setting the state backgrounds for the control bar buttons. This way
we no longer pollute all background related properties. It makes things
easier if we need to replace them in some states in the future.
Use the new modern :focus-visible instead of :focus. This is only shown
when navigating using the keyboard.
And in the case of the control bar buttons, This means we can separate
the :focus and :hover styles. Instead of showing a lighter overlay (or
darker for selected) like we use for hover, lets use a more common
blue outline for focus-visible. This also means we can re-use the common
focus-visible from input.css instead of having a special one for control
bar buttons.
The issue with the selection prior to the fix can't be reproduced to
the same degree. It may have been some other bug that caused interaction
with the remote to be blocked.
The class "noVNC_button" is only used for control bar buttons. Lets
clarify this in the CSS selectors by only applying styles to elements
with this class that are children of "#noVNC_control_bar".
In order to make the sidebar feel more like a GUI element from a real
application, we can disable the long-press image popup on iOS. Note that
this only has an effect on iOS devices.
When long pressing stuff in the sidebar on iOS, you can sometimes
accidentally select the container or the canvas. This results in a
broken state where the user can't interact with the session anymore.
This commit prevents this from happening.
We want to disable selections in the sidebar because when users drag
the handle, they could otherwise accidentally select stuff. This results
in a very broken state.
When selections are disabled, the sidebar also feels more like a GUI
element from a real application, and less like part of a webpage.
Without this fix we still get a "pointer" cursor on disabled inputs of
type "image" in Firefox. Currently, all our noVNC_buttons are
<input type="image">. Reported to firefox here:
https://bugzilla.mozilla.org/show_bug.cgi?id=1798304
Taylor Jasko