From 98364c3daa554a2d7de600263b18898aeee3d39b Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Tue, 13 Dec 2022 14:43:03 +0100
Subject: [PATCH 1/7] Use the same background gradient on all buttons

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.
---
 app/styles/input.css | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index d746b764..75fc2108 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -20,7 +20,8 @@ input, input::file-selector-button, button, select, textarea {
   border: 1px solid rgb(192, 192, 192);
   border-radius: 5px;
   color: black;
-  background-image: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+  --bg-gradient: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+  background-image: var(--bg-gradient);
 }
 
 /*
@@ -54,8 +55,7 @@ select {
                 stroke="rgb(31,31,31)" fill="none" \
                 stroke-linecap="round" stroke-linejoin="round" /> \
       </svg>');
-  background-image: var(--select-arrow),
-    linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  background-image: var(--select-arrow), var(--bg-gradient);
   background-position: calc(100% - 7px), left top;
   background-repeat: no-repeat;
   padding-right: calc(2*7px + 8px);
@@ -244,7 +244,7 @@ textarea:disabled {
 :root:not(.noVNC_touch) input:disabled::file-selector-button,
 :root:not(.noVNC_touch) button:disabled,
 :root:not(.noVNC_touch) select:disabled {
-  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  background-image: var(--bg-gradient);
   border-bottom-width: 2px;
   margin-top: 0;
 }
@@ -252,8 +252,7 @@ input[type=file]:disabled {
   background-image: none;
 }
 :root:not(.noVNC_touch) select:disabled {
-  background-image: var(--select-arrow),
-    linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+  background-image: var(--select-arrow), var(--bg-gradient);
 }
 input[type=image]:disabled {
   /* See Firefox bug:

From 6e1eec3025517523294a601930de14d39e3fb349 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Tue, 13 Dec 2022 14:54:41 +0100
Subject: [PATCH 2/7] Separate the disabling of :hover for touch

This is a corner case which shouldn't need to complicate things for the
regular usecases.
---
 app/styles/base.css  | 18 ++++++++++++++----
 app/styles/input.css | 29 +++++++++++++++++++++--------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 408da277..54e197f1 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -389,19 +389,18 @@ html {
   vertical-align: middle;
   border:1px solid rgba(255, 255, 255, 0.2);
   border-radius: 6px;
+  background-color: transparent;
   background-image: unset; /* we don't want the gradiant from input.css */
 }
 #noVNC_control_bar .noVNC_button.noVNC_selected {
   border-color: rgba(0, 0, 0, 0.8);
   background-color: rgba(0, 0, 0, 0.5);
 }
-/* Android browsers don't properly update hover state if touch events are
- * intercepted, like they are when clicking on the remote screen. */
-:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
+#noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
   border-color: rgba(0, 0, 0, 0.4);
   background-color: rgba(0, 0, 0, 0.2);
 }
-:root:not(.noVNC_touch) #noVNC_control_bar .noVNC_button:not(:disabled):hover {
+#noVNC_control_bar .noVNC_button:not(:disabled):hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
 #noVNC_control_bar .noVNC_button:not(:disabled):active {
@@ -412,6 +411,17 @@ html {
   display: none !important;
 }
 
+/* Android browsers don't properly update hover state if touch events are
+ * intercepted, like they are when clicking on the remote screen. */
+:root.noVNC_touch #noVNC_control_bar .noVNC_button:not(:disabled):hover {
+  background-color: transparent;
+}
+:root.noVNC_touch #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
+  border-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+
 /* Panels */
 .noVNC_panel {
   transform: translateX(25px);
diff --git a/app/styles/input.css b/app/styles/input.css
index 75fc2108..b6ffd6d1 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -180,21 +180,34 @@ input::file-selector-button {
 /*
  * Hover
  */
-:root:not(.noVNC_touch) input[type=button]:hover,
-:root:not(.noVNC_touch) input[type=color]:hover,
-:root:not(.noVNC_touch) input[type=image]:hover,
-:root:not(.noVNC_touch) input[type=reset]:hover,
-:root:not(.noVNC_touch) input[type=submit]:hover,
-:root:not(.noVNC_touch) input::file-selector-button:hover,
-:root:not(.noVNC_touch) button:hover {
+input[type=button]:hover,
+input[type=color]:hover,
+input[type=image]:hover,
+input[type=reset]:hover,
+input[type=submit]:hover,
+input::file-selector-button:hover,
+button:hover {
   background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
 }
-:root:not(.noVNC_touch) select:hover {
+select:hover {
   background-image: var(--select-arrow),
     linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
   background-position: calc(100% - 7px), left top;
   background-repeat: no-repeat;
 }
+/* We don't want a hover style after touch input */
+:root.noVNC_touch input[type=button]:hover,
+:root.noVNC_touch input[type=color]:hover,
+:root.noVNC_touch input[type=image]:hover,
+:root.noVNC_touch input[type=reset]:hover,
+:root.noVNC_touch input[type=submit]:hover,
+:root.noVNC_touch input::file-selector-button:hover,
+:root.noVNC_touch button:hover {
+  background-image: var(--bg-gradient);
+}
+:root.noVNC_touch select:hover {
+  background-image: var(--select-arrow), var(--bg-gradient);
+}
 
 /*
  * Active (clicked)

From 333e075d7b4d92a3a9a4e2c3be08b165294b8af5 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Tue, 13 Dec 2022 15:38:25 +0100
Subject: [PATCH 3/7] Get rid of Chrome's blue touch tap highlight

When tapping our buttons using a touch screen in Chrome, we get an ugly
blue overlay. Let's remove this since we have our own :active styles.
---
 app/styles/input.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/styles/input.css b/app/styles/input.css
index b6ffd6d1..6d39bd7c 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -42,6 +42,9 @@ select {
 
   padding-left: 20px;
   padding-right: 20px;
+
+  /* Disable Chrome's touch tap highlight */
+  -webkit-tap-highlight-color: transparent;
 }
 
 /*

From 1ff035c330e8aa1dfe5d1a6e7f9aebf5e3c80428 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Wed, 14 Dec 2022 11:18:46 +0100
Subject: [PATCH 4/7] Add comment explaining the handle touch area

---
 app/styles/base.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/styles/base.css b/app/styles/base.css
index 54e197f1..402454cb 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -321,6 +321,7 @@ html {
 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
   transform: none;
 }
+/* Larger touch area for the handle, used when a touch screen is available */
 #noVNC_control_bar_handle div {
   position: absolute;
   right: -35px;

From f983c78d173322c080c7a8805fc8da436dc4e4d0 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Wed, 14 Dec 2022 13:28:27 +0100
Subject: [PATCH 5/7] Make connect button a regular <button>

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.
---
 app/styles/base.css | 27 ++++++++++++---------------
 app/ui.js           |  3 ++-
 vnc.html            |  4 ++--
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 402454cb..b20ed2b3 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -725,12 +725,9 @@ html {
     font-size: calc(25vw - 30px);
   }
 }
-#noVNC_connect_button {
-  cursor: pointer;
+#noVNC_connect_box {
+  padding: 12px;
 
-  padding: 10px;
-
-  color: white;
   background-color: rgb(110, 132, 163);
   border-radius: 12px;
 
@@ -739,26 +736,26 @@ html {
 
   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 }
-#noVNC_connect_button div {
-  margin: 2px;
+#noVNC_connect_box button {
+  width: 100%;
   padding: 5px 30px;
-  border: 1px solid rgb(83, 99, 122);
-  border-bottom-width: 2px;
+
+  cursor: pointer;
+
+  border-color: rgb(83, 99, 122);
   border-radius: 5px;
+
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
+  color: white;
 
   /* This avoids it jumping around when :active */
   vertical-align: middle;
 }
-#noVNC_connect_button div:active {
-  border-bottom-width: 1px;
-  margin-top: 3px;
-}
-:root:not(.noVNC_touch) #noVNC_connect_button div:hover {
+#noVNC_connect_box button:hover {
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 }
 
-#noVNC_connect_button img {
+#noVNC_connect_box img {
   vertical-align: bottom;
   height: 1.3em;
 }
diff --git a/app/ui.js b/app/ui.js
index 92541206..3eb02cbc 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -319,7 +319,8 @@ const UI = {
     addConnectionControlHandlers() {
         document.getElementById("noVNC_disconnect_button")
             .addEventListener('click', UI.disconnect);
-        document.getElementById("noVNC_connect_button")
+        document.getElementById("noVNC_connect_box")
+            .getElementsByTagName('button')[0]
             .addEventListener('click', UI.connect);
         document.getElementById("noVNC_cancel_reconnect_button")
             .addEventListener('click', UI.cancelReconnect);
diff --git a/vnc.html b/vnc.html
index 0d1c7d1b..8fbe1eb2 100644
--- a/vnc.html
+++ b/vnc.html
@@ -274,9 +274,9 @@
     <div class="noVNC_center">
         <div id="noVNC_connect_dlg">
             <div class="noVNC_logo" translate="no"><span>no</span>VNC</div>
-            <div id="noVNC_connect_button"><div>
+            <div id="noVNC_connect_box"><button>
                 <img alt="" src="app/images/connect.svg"> Connect
-            </div></div>
+            </button></div>
         </div>
     </div>
 

From 6d7d45ba08e203e616171e53cea5b2bd2314dc4d Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Wed, 14 Dec 2022 13:58:49 +0100
Subject: [PATCH 6/7] Ensure arrow doesn't change on disabled <select>

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.
---
 app/styles/input.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index 6d39bd7c..1b82e69a 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -68,13 +68,13 @@ select {
           https://bugzilla.mozilla.org/show_bug.cgi?id=1805406 */
 select:active {
   /* Rotated arrow */
-  --select-arrow: url('data:image/svg+xml;utf8, \
+  background-image: url('data:image/svg+xml;utf8, \
       <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
            xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" > \
           <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \
                 stroke="rgb(31,31,31)" fill="none" \
                 stroke-linecap="round" stroke-linejoin="round" /> \
-      </svg>');
+      </svg>'), var(--bg-gradient);
 }
 option {
   color: black;

From f1550c69d9a70c3906fb49e33208bf8f2013bd76 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Wed, 14 Dec 2022 14:06:16 +0100
Subject: [PATCH 7/7] Get rid of noVNC_touch in favor for @media queries

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.
---
 app/styles/base.css  | 29 +++++++++++++++++------------
 app/styles/input.css | 44 +++++++++++++++++++++++---------------------
 app/ui.js            |  1 -
 3 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index b20ed2b3..d47ad1f3 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -22,8 +22,6 @@
 /*
  * State variables (set on :root):
  *
- * noVNC_touch: Device has touch input
- *
  * noVNC_loading: Page is still loading
  * noVNC_connecting: Connecting to server
  * noVNC_reconnecting: Re-establishing a connection
@@ -328,10 +326,13 @@ html {
   top: 0;
   width: 50px;
   height: 100%;
-}
-:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
   display: none;
 }
+@media (any-pointer: coarse) {
+  #noVNC_control_bar_handle div {
+    display: unset;
+  }
+}
 .noVNC_right #noVNC_control_bar_handle div {
   left: -35px;
   right: auto;
@@ -414,12 +415,14 @@ html {
 
 /* Android browsers don't properly update hover state if touch events are
  * intercepted, like they are when clicking on the remote screen. */
-:root.noVNC_touch #noVNC_control_bar .noVNC_button:not(:disabled):hover {
-  background-color: transparent;
-}
-:root.noVNC_touch #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
-  border-color: rgba(0, 0, 0, 0.8);
-  background-color: rgba(0, 0, 0, 0.5);
+@media (any-pointer: coarse) {
+  #noVNC_control_bar .noVNC_button:not(:disabled):hover {
+    background-color: transparent;
+  }
+  #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
+    border-color: rgba(0, 0, 0, 0.8);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 }
 
 
@@ -550,8 +553,10 @@ html {
 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
   display: none;
 }
-:root:not(.noVNC_touch) #noVNC_mobile_buttons {
-  display: none;
+@media not (any-pointer: coarse) {
+  :root.noVNC_connected #noVNC_mobile_buttons {
+    display: none;
+  }
 }
 
 /* Extra manual keys */
diff --git a/app/styles/input.css b/app/styles/input.css
index 1b82e69a..b12d0a92 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -198,18 +198,20 @@ select:hover {
   background-position: calc(100% - 7px), left top;
   background-repeat: no-repeat;
 }
-/* We don't want a hover style after touch input */
-:root.noVNC_touch input[type=button]:hover,
-:root.noVNC_touch input[type=color]:hover,
-:root.noVNC_touch input[type=image]:hover,
-:root.noVNC_touch input[type=reset]:hover,
-:root.noVNC_touch input[type=submit]:hover,
-:root.noVNC_touch input::file-selector-button:hover,
-:root.noVNC_touch button:hover {
-  background-image: var(--bg-gradient);
-}
-:root.noVNC_touch select:hover {
-  background-image: var(--select-arrow), var(--bg-gradient);
+@media (any-pointer: coarse) {
+  /* We don't want a hover style after touch input */
+  input[type=button]:hover,
+  input[type=color]:hover,
+  input[type=image]:hover,
+  input[type=reset]:hover,
+  input[type=submit]:hover,
+  input::file-selector-button:hover,
+  button:hover {
+    background-image: var(--bg-gradient);
+  }
+  select:hover {
+    background-image: var(--select-arrow), var(--bg-gradient);
+  }
 }
 
 /*
@@ -252,14 +254,14 @@ select:disabled,
 textarea:disabled {
   opacity: 0.4;
 }
-:root:not(.noVNC_touch) input[type=button]:disabled,
-:root:not(.noVNC_touch) input[type=color]:disabled,
-:root:not(.noVNC_touch) input[type=image]:disabled,
-:root:not(.noVNC_touch) input[type=reset]:disabled,
-:root:not(.noVNC_touch) input[type=submit]:disabled,
-:root:not(.noVNC_touch) input:disabled::file-selector-button,
-:root:not(.noVNC_touch) button:disabled,
-:root:not(.noVNC_touch) select:disabled {
+input[type=button]:disabled,
+input[type=color]:disabled,
+input[type=image]:disabled,
+input[type=reset]:disabled,
+input[type=submit]:disabled,
+input:disabled::file-selector-button,
+button:disabled,
+select:disabled {
   background-image: var(--bg-gradient);
   border-bottom-width: 2px;
   margin-top: 0;
@@ -267,7 +269,7 @@ textarea:disabled {
 input[type=file]:disabled {
   background-image: none;
 }
-:root:not(.noVNC_touch) select:disabled {
+select:disabled {
   background-image: var(--select-arrow), var(--bg-gradient);
 }
 input[type=image]:disabled {
diff --git a/app/ui.js b/app/ui.js
index 3eb02cbc..ec508e3f 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -88,7 +88,6 @@ const UI = {
 
         // Adapt the interface for touch screen devices
         if (isTouchDevice) {
-            document.documentElement.classList.add("noVNC_touch");
             // Remove the address bar
             setTimeout(() => window.scrollTo(0, 1), 100);
         }