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.
The browsers have been choosing very poorly and have a lot of bugs when
it comes to favicons. Using an ICO makes many browsers choose better in
most cases. Most large websites use ICO files.
The icons in the ICO file needs to be ordered largest to the smallest
icon, and due to a Chrome bug we are limited to 8 icons. This
unfortunately means we couldn't fit one of the Android sizes. The 72x72
icon was removed since testing showed that it was used the least.
Instead of calculating a density that we hope results in the correct
size, we can specify what size we want. This is more robust and easier
to understand. This also allows us to simplify the Makefile quite a bit.
Note that Fedora's packaging of ImageMagick has a bug here:
https://bugzilla.redhat.com/show_bug.cgi?id=2140018
All of the icons are square, only providing the size in one direction is
enough. This change lets us avoid some unnecessary complexity in the
Makefile.
Apple requires a different set of icons now-a-days. This change involves
removing the 76x76 icon and adding icons with the following sizes;
40, 58, 80, 87, 167 and 180.
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.
We can't just modify the CSS variable here, since that is also used in
the style for :disabled. We need to change the entire "background-image"
in order for :disabled to be able to override it.
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.
Before, we have had two different gradiant versions, one where the two
colors meet in the middle, and one where only the top part of the
element was the darker shade. This was easily missed. Let's standardize
on the latter alternative. This commit introduces a variable to make it
easier.
It was completely unnecessary that these two were separate, lets combine
them. The only difference was that the lower rule didn't apply for
<select>. That doesn't matter though, since padding-left and
padding-right are specifically set for <select> elements anyway.
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.
Instead of marking the hover selector with ":not(:disabled)" we can
break out this into its own section. This makes things easier to read.
In order to ensure the correct selector prioritization we also reorder
the file a bit.
Use the more specific background-image property when setting
linear-gradient backgrounds for input elements. This way we no longer
pollute all background related properties. It makes things easier if we
need to replace it in some states in the future.
Some elements used grey text and background when disabled, and some used
opacity. It looked a bit old school to make the elements grey when
disabled. Let's use opacity for all input elements when disabled.
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.
Since we are setting "appearance: none" on our <select> elements, the
drop down arrow from the browser is hidden. This arrow doesn't fit in
visually though. This commit adds a new arrow from a simple data url
SVG. Its a dark triangle "pointing" downwards.
Note that we need to set the background to both the gradient and the
image here. Both use the "background-image" property for the graphic,
but since they are positioned differently we must use the general
"background" shorthand.
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
We depend un such modern things anyway, having these kinds of properties
are more confusing than helpful. Let's not give the impression that we
make any attempt to work in old browsers.
The clipboard textarea could potentially shrink further than what was
possible for the header text elements, which looked a bit broken. In
that regard, a min width is introduced for the textarea.
All panels should be limited in this way, not just the clipboard panel.
One additional upside of this is that the numbers used to calculate the
max-width are closer by, in the code. This hopefully makes it easier to
avoid mistakes in the future.
Makes it a more independent element responsible for it's own positioning
and vertical centering. This makes the hint easier to adapt for external
CSS styles and makes it possible to remote the fixed size if needed.
After the user has "followed" the hint by dragging the handle to the
other side, the control bar will switch to that side. Once this has
happened, we will now hide the hint until the user starts over by
dragging the handle again.
This change was added to make the hint feel more like a "hint" and less
like a permanent GUI element. It isn't as persistent and intrusive now.
Note that we don't want the act of hiding the hint to result in a
transition animation here.
This makes it easier for integrators of vnc.html to write their own
input and button styles.
It's also positive to cut a bit off from the size of the large base.css.
When the error handler itself causes an exception, it falls back to a
simple document.write(). This means the proper error dialog isn't shown
when this happens.
The focus changes that were added to the error handler in e1f8232b are
not crucial for its function. If these focus changes causes an exception
we can just ignore that.
When this error is shown, something has gone very wrong. It shows when
a bug in the JavaScript causes an uncaught error. In these scenarios we
dont want the user to be able to interact with the GUI or the remote
session, since we can't guarantee that things work.
This button fills no real purpose. It's easy to mark everything and
delete with either "Ctrl + A -> Delete" or, on touch devices, "long
press -> mark everything -> Delete".
Currently novnc will only retry once (assuming the server is unavailable) and then stop (as the detail from is unclean, usually "failed to connect"). Minor change will continue to reconnect every reconnect_delay seconds until either reconnected or user intervention cancels the attempt.
Most (all?) new APIs will require a "secure context", which generally
means served over TLS. We can expect crashes because of missing
functions if this requirement isn't fulfilled, so try to warn the user.
Pierre Ossman
Samuel Mannehed
Fabio Fantoni
James Kinsman