From ecd49c159fce2d17097f1e622f678621a346f93e Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Fri, 2 Sep 2016 16:16:04 +0200
Subject: [PATCH 01/46] Create separate style sheet for vnc_auto.html

The style sheet is intimately connected to the Javascript code and
HTML so trying to share it between both sets is not sensible.
---
 app/styles/auto.css | 89 +++++++++++++++++++++++++++++++++++++++++++++
 app/styles/base.css |  4 --
 vnc_auto.html       |  2 +-
 3 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 app/styles/auto.css

diff --git a/app/styles/auto.css b/app/styles/auto.css
new file mode 100644
index 00000000..50f9a822
--- /dev/null
+++ b/app/styles/auto.css
@@ -0,0 +1,89 @@
+/*
+ * noVNC auto CSS
+ * Copyright (C) 2012 Joel Martin
+ * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
+ * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
+ */
+
+body {
+  margin:0;
+  padding:0;
+  font-family: Helvetica;
+  /*Background image with light grey curve.*/
+  background-color:#494949;
+  background-repeat:no-repeat;
+  background-position:right bottom;
+  height:100%;
+}
+
+html {
+  height:100%;
+}
+
+#noVNC_container {
+  display: table;
+  width:100%;
+  height:100%;
+  background-color:#313131;
+  border-bottom-right-radius: 800px 600px;
+  /*border-top-left-radius: 800px 600px;*/
+}
+
+#noVNC_status {
+  font-size: 12px;
+  padding-top: 4px;
+  height:32px;
+  text-align: center;
+  font-weight: bold;
+  color: #fff;
+  z-index: 0;
+  position: absolute;
+  width: 100%;
+  margin-left: 0px;
+}
+
+.noVNC_status_normal {
+  background: #b2bdcd; /* Old browsers */
+  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+}
+
+.noVNC_status_error {
+  background: #f04040; /* Old browsers */
+  background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+}
+
+.noVNC_status_warn {
+  background: #f0f040; /* Old browsers */
+  background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+}
+
+#noVNC_buttons {
+  white-space: nowrap;
+}
+
+/* Do not set width/height for VNC_canvas or incorrect
+ * scaling will occur. Canvas size depends on remote VNC
+ * settings and noVNC settings. */
+#noVNC_canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/app/styles/base.css b/app/styles/base.css
index 382234e3..ab6e31d0 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -49,10 +49,6 @@ html {
   float:right;
 }
 
-#noVNC_buttons {
-  white-space: nowrap;
-}
-
 #noVNC_view_drag_button {
   display: none;
 }
diff --git a/vnc_auto.html b/vnc_auto.html
index a3c5dc9c..a4cbb236 100644
--- a/vnc_auto.html
+++ b/vnc_auto.html
@@ -36,7 +36,7 @@
 
 
     <!-- Stylesheets -->
-    <link rel="stylesheet" href="app/styles/base.css" title="plain">
+    <link rel="stylesheet" href="app/styles/auto.css">
 
      <!--
     <script type='text/javascript'

From 222f3fba08141c3cd09f1528a20ec24cc6d6a816 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Tue, 23 Aug 2016 17:53:21 +0200
Subject: [PATCH 02/46] Remove unused CSS

---
 app/styles/base.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index ab6e31d0..3f32cb74 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -39,8 +39,6 @@ html {
 #noVNC_setting_password {
   width: 150px;
 }
-#noVNC_setting_encrypt {
-}
 #noVNC_setting_path {
   width: 100px;
 }
@@ -142,12 +140,6 @@ html {
   margin-right: auto;
 }
 
-#VNC_clipboard_clear_button {
-  float:right;
-}
-#VNC_clipboard_text {
-  font-size: 11px;
-}
 
 #noVNC_clipboard_clear_button {
   float:right;

From 9fc0e4f6e38b7625f8eb6d125af13eaba4f50457 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Wed, 24 Aug 2016 11:06:23 +0200
Subject: [PATCH 03/46] Strict positioning of panels

The panels were never meant to be positioned relative their container,
so make sure they pop up exactly where we want in the viewport, no
matter where they are in the structure.
---
 app/styles/base.css | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 3f32cb74..ff1469ad 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -148,14 +148,14 @@ html {
 /*Bubble contents divs*/
 #noVNC_settings {
   display:none;
-  margin-top:73px;
+  top:73px;
   right:20px;
   position:fixed;
 }
 
 #noVNC_controls {
   display:none;
-  margin-top:73px;
+  top:73px;
   right:12px;
   position:fixed;
 }
@@ -167,7 +167,7 @@ html {
   display:none;
   position:fixed;
 
-  margin-top:73px;
+  top:73px;
   right:20px;
   left:20px;
   padding:15px;
@@ -186,7 +186,7 @@ html {
   z-index: 1;
 
   margin:15px;
-  margin-top:60px;
+  top:60px;
   padding:15px;
   width:auto;
 
@@ -203,7 +203,7 @@ html {
 
 #noVNC_xvp {
   display:none;
-  margin-top:73px;
+  top:73px;
   right:30px;
   position:fixed;
 }
@@ -213,7 +213,7 @@ html {
 
 #noVNC_clipboard {
   display:none;
-  margin-top:73px;
+  top:73px;
   right:30px;
   position:fixed;
 }
@@ -321,7 +321,6 @@ html {
 .triangle-right {
   position:relative;
   padding:15px;
-  margin:1em 0 3em;
   color:#fff;
   background:#fff; /* default background for browsers without gradient support */
   /* css3 */

From 3911256cffaeb171baba06064845266253743cd5 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Wed, 24 Aug 2016 11:10:40 +0200
Subject: [PATCH 04/46] Place related elements together

In order to clarify the HTML we group related panels together with
the corresponding buttons.
---
 vnc.html | 149 ++++++++++++++++++++++++++++---------------------------
 1 file changed, 77 insertions(+), 72 deletions(-)

diff --git a/vnc.html b/vnc.html
index b33b704e..2830bc1a 100644
--- a/vnc.html
+++ b/vnc.html
@@ -48,12 +48,17 @@
 </head>
 
 <body>
+    <!-- noVNC Control Bar -->
     <div id="noVNC_control_bar" class="noVNC_status_normal">
-        <!--noVNC Mobile Device only Buttons-->
+
         <div class="noVNC_buttons_left">
+
+            <!-- Drag/Pan the viewport -->
             <input type="image" alt="viewport drag" src="app/images/drag.png"
                 id="noVNC_view_drag_button" class="noVNC_status_button"
                 title="Move/Drag Viewport" />
+
+            <!--noVNC Touch Device only buttons-->
             <div id="noVNC_mobile_buttons">
                 <input type="image" alt="No mousebutton" src="app/images/mouse_none.png"
                     id="noVNC_mouse_button0" class="noVNC_status_button" />
@@ -90,29 +95,99 @@
 
         <div id="noVNC_status"></div>
 
-        <!--noVNC Buttons-->
         <div class="noVNC_buttons_right">
+            <!-- Send Ctrl+Alt+Delete -->
             <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
                 id="noVNC_sendCtrlAltDel_button" class="noVNC_status_button"
                 title="Send Ctrl-Alt-Del" />
+
+            <!-- XVP Shutdown/Reboot -->
             <input type="image" alt="Shutdown/Reboot" src="app/images/power.png"
                 id="noVNC_toggleXvp_button" class="noVNC_status_button"
                 title="Shutdown/Reboot..." />
+            <div id="noVNC_xvp" class="triangle-right top">
+                <span id="noVNC_xvp_menu">
+                    <input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
+                    <input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
+                    <input type="button" id="noVNC_xvpReset_button" value="Reset" />
+                </span>
+            </div>
+
+            <!-- Clipboard -->
             <input type="image" alt="Clipboard" src="app/images/clipboard.png"
                 id="noVNC_clipboard_button" class="noVNC_status_button"
                 title="Clipboard" />
+            <div id="noVNC_clipboard" class="triangle-right top">
+                <textarea id="noVNC_clipboard_text" rows=5>
+                </textarea>
+                <br />
+                <input id="noVNC_clipboard_clear_button" type="button"
+                    value="Clear" />
+            </div>
+
+            <!-- Toggle fullscreen -->
             <input type="image" alt="Fullscreen" src="app/images/fullscreen.png"
                 id="noVNC_fullscreen_button" class="noVNC_status_button"
                 title="Fullscreen" />
+
+            <!-- Settings -->
             <input type="image" alt="Settings" src="app/images/settings.png"
                 id="noVNC_settings_button" class="noVNC_status_button"
                 title="Settings" />
+            <div id="noVNC_settings" class="triangle-right top">
+                <span id="noVNC_settings_menu">
+                    <ul>
+                        <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
+                        <li><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</li>
+                        <li><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</li>
+                        <li><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</li>
+                        <li><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</li>
+                        <li><input id="noVNC_setting_view_only" type="checkbox" /> View Only</li>
+                        <hr>
+                        <li><input id="noVNC_setting_path" type="input" value="websockify" /> Path</li>
+                        <li><label>
+                                <select id="noVNC_setting_resize" name="vncResize">
+                                    <option value="off">None</option>
+                                    <option value="scale">Local Scaling</option>
+                                    <option value="downscale">Local Downscaling</option>
+                                    <option value="remote">Remote Resizing</option>
+                                </select> Scaling Mode</label>
+                        </li>
+                        <li><input id="noVNC_setting_repeaterID" type="input" value="" /> Repeater ID</li>
+                        <hr>
+                        <!-- Stylesheet selection dropdown -->
+                        <li><label><strong>Style: </strong>
+                                <select id="noVNC_setting_stylesheet" name="vncStyle">
+                                    <option value="default">default</option>
+                            </select></label>
+                        </li>
+                        <!-- Logging selection dropdown -->
+                        <li><label><strong>Logging: </strong>
+                                <select id="noVNC_setting_logging" name="vncLogging">
+                            </select></label>
+                        </li>
+                        <hr>
+                        <li><input type="button" id="noVNC_settings_apply" value="Apply" /></li>
+                    </ul>
+                </span>
+            </div>
+
+            <!-- Connection Controls -->
             <input type="image" alt="Connect" src="app/images/connect.png"
                 id="noVNC_connectPanel_button" class="noVNC_status_button"
                 title="Connect" />
             <input type="image" alt="Disconnect" src="app/images/disconnect.png"
                 id="noVNC_disconnect_button" class="noVNC_status_button"
                 title="Disconnect" />
+            <div id="noVNC_controls" class="triangle-right top">
+                <ul>
+                    <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
+                    <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>
+                    <li><label><strong>Password: </strong><input id="noVNC_setting_password" type="password" /></label></li>
+                    <li><label><strong>Token: </strong><input id="noVNC_setting_token" /></label></li>
+                    <li><input id="noVNC_connect_button" type="button" value="Connect" /></li>
+                </ul>
+            </div>
         </div>
 
         <!-- Description Panel -->
@@ -135,78 +210,8 @@
         <div id="noVNC_popup_status" class="">
         </div>
 
-        <!-- Clipboard Panel -->
-        <div id="noVNC_clipboard" class="triangle-right top">
-            <textarea id="noVNC_clipboard_text" rows=5>
-            </textarea>
-            <br />
-            <input id="noVNC_clipboard_clear_button" type="button"
-                value="Clear" />
-        </div>
-
-        <!-- XVP Shutdown/Reboot Panel -->
-        <div id="noVNC_xvp" class="triangle-right top">
-            <span id="noVNC_xvp_menu">
-                <input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
-                <input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
-                <input type="button" id="noVNC_xvpReset_button" value="Reset" />
-            </span>
-        </div>
-
-        <!-- Settings Panel -->
-        <div id="noVNC_settings" class="triangle-right top">
-            <span id="noVNC_settings_menu">
-                <ul>
-                    <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
-                    <li><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</li>
-                    <li><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</li>
-                    <li><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</li>
-                    <li><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</li>
-                    <li><input id="noVNC_setting_view_only" type="checkbox" /> View Only</li>
-                    <hr>
-                    <li><input id="noVNC_setting_path" type="input" value="websockify" /> Path</li>
-                    <li><label>
-                        <select id="noVNC_setting_resize" name="vncResize">
-                            <option value="off">None</option>
-                            <option value="scale">Local Scaling</option>
-                            <option value="downscale">Local Downscaling</option>
-                            <option value="remote">Remote Resizing</option>
-                        </select> Scaling Mode</label>
-                    </li>
-                    <li><input id="noVNC_setting_repeaterID" type="input" value="" /> Repeater ID</li>
-                    <hr>
-                    <!-- Stylesheet selection dropdown -->
-                    <li><label><strong>Style: </strong>
-                        <select id="noVNC_setting_stylesheet" name="vncStyle">
-                            <option value="default">default</option>
-                        </select></label>
-                    </li>
-
-                    <!-- Logging selection dropdown -->
-                    <li><label><strong>Logging: </strong>
-                        <select id="noVNC_setting_logging" name="vncLogging">
-                        </select></label>
-                    </li>
-                    <hr>
-                    <li><input type="button" id="noVNC_settings_apply" value="Apply" /></li>
-                </ul>
-            </span>
-        </div>
-
-        <!-- Connection Panel -->
-        <div id="noVNC_controls" class="triangle-right top">
-            <ul>
-                <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
-                <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>
-                <li><label><strong>Password: </strong><input id="noVNC_setting_password" type="password" /></label></li>
-                <li><label><strong>Token: </strong><input id="noVNC_setting_token" /></label></li>
-                <li><input id="noVNC_connect_button" type="button" value="Connect" /></li>
-            </ul>
-        </div>
-
     </div> <!-- End of noVNC_control_bar -->
 
-
     <div id="noVNC_container">
         <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
 

From 2869308c80d8e30967457ab4ba12ae9318efbf3e Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Wed, 24 Aug 2016 12:17:53 +0200
Subject: [PATCH 05/46] Sort style sheet

Sort and group the entries in the style sheet the same way as in
the HTML document. Makes it easier to find things.
---
 app/styles/base.css | 607 ++++++++++++++++++++++----------------------
 1 file changed, 306 insertions(+), 301 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index ff1469ad..a4d6708f 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -21,48 +21,136 @@ html {
   height:100%;
 }
 
-#noVNC_controls ul {
-  list-style: none;
-  margin: 0px;
-  padding: 0px;
-}
-#noVNC_controls li {
-  padding-bottom:8px;
+#noVNC_buttons {
+  white-space: nowrap;
 }
 
-#noVNC_setting_host {
-  width:150px;
-}
-#noVNC_setting_port {
-  width: 80px;
-}
-#noVNC_setting_password {
-  width: 150px;
-}
-#noVNC_setting_path {
-  width: 100px;
-}
-#noVNC_connect_button {
-  width: 110px;
-  float:right;
+/* ----------------------------------------
+ * Control Bar
+ * ----------------------------------------
+ */
+
+#noVNC_control_bar {
+  position: fixed;
+  display: block;
+  height: 36px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 200;
 }
 
+/* General button style */
+.noVNC_status_button {
+  padding: 4px 4px;
+  vertical-align: middle;
+  border:1px solid #869dbc;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  background: #b2bdcd; /* Old browsers */
+  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
+  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
+  font-size: 12px;
+}
+.noVNC_status_button_selected {
+  padding: 4px 4px;
+  vertical-align: middle;
+  border:1px solid #4366a9;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  background: #779ced; /* Old browsers */
+  background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
+  background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
+ /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
+}
+.noVNC_status_button:disabled {
+  opacity: 0.4;
+}
+
+/* Panels */
+.triangle-right {
+  position: relative;
+  padding: 15px;
+  color: #fff;
+  background: #fff; /* default background for browsers without gradient support */
+  /* css3 */
+  /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
+  background: -moz-linear-gradient(#2e88c4, #075698);
+  background: -o-linear-gradient(#2e88c4, #075698);
+  background: linear-gradient(#2e88c4, #075698);*/
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  color: #000;
+  border: 2px solid #E0E0E0;
+}
+.triangle-right.top:after {
+  border-color: transparent #E0E0E0;
+  border-width: 20px 20px 0 0;
+  bottom: auto;
+  left: auto;
+  right: 50px;
+  top: -20px;
+}
+.triangle-right:after {
+  content: "";
+  position: absolute;
+  bottom: -20px; /* value = - border-top-width - border-bottom-width */
+  left: 50px; /* controls horizontal position */
+  border-width: 20px 0 0 20px; /* vary these values to change the angle of the vertex */
+  border-style: solid;
+  border-color: #E0E0E0 transparent;
+  /* reduce the damage in FF3.0 */
+  display: block;
+  width: 0;
+}
+.triangle-right.top:after {
+  top: -40px; /* value = - border-top-width - border-bottom-width */
+  right: 50px; /* controls horizontal position */
+  bottom: auto;
+  left: auto;
+  border-width: 40px 40px 0 0; /* vary these values to change the angle of the vertex */
+  border-color: transparent #E0E0E0;
+}
+
+/* Drag/Pan button */
 #noVNC_view_drag_button {
   display: none;
 }
-#noVNC_sendCtrlAltDel_button {
-  display: none;
-}
-#noVNC_fullscreen_button {
-  display: none;
-}
-#noVNC_xvp_buttons {
-  display: none;
-}
+
+/* noVNC Touch Device only buttons */
 #noVNC_mobile_buttons {
   display: none;
 }
 
+#noVNC_keyboardinput {
+  width: 1px;
+  height: 1px;
+  background-color: #fff;
+  color: #fff;
+  border: 0;
+  position: relative;
+  left: -40px;
+  z-index: -1;
+  ime-mode: disabled;
+}
+
+#noVNC_toggleExtraKeys_button {
+  display: none;
+}
+
 #noVNC_extra_keys {
   display: inline;
   list-style-type: none;
@@ -70,20 +158,28 @@ html {
   margin: 0px;
   position: relative;
 }
+#noVNC_toggleCtrl_button {
+  display: inline;
+}
+#noVNC_toggleAlt_button {
+  display: inline;
+}
+#noVNC_sendTab_button {
+  display: inline;
+}
+#noVNC_sendEsc_button {
+  display: inline;
+}
 
+/* Left side buttons */
 .noVNC_buttons_left {
   float: left;
   z-index: 1;
   position: relative;
+  padding-left: 10px;
 }
 
-.noVNC_buttons_right {
-  float:right;
-  right: 0px;
-  z-index: 2;
-  position: absolute;
-}
-
+/* Center status display */
 #noVNC_status {
   font-size: 12px;
   padding-top: 4px;
@@ -91,152 +187,11 @@ html {
   text-align: center;
   font-weight: bold;
   color: #fff;
-}
-
-#noVNC_settings_menu {
-  margin: 3px;
-  text-align: left;
-}
-#noVNC_settings_menu ul {
-  list-style: none;
-  margin: 0px;
-  padding: 0px;
-}
-
-#noVNC_settings_apply {
-  float:right;
-}
-
-#noVNC_container {
-  display: table;
-  width:100%;
-  height:100%;
-  background-color:#313131;
-  border-bottom-right-radius: 800px 600px;
-  /*border-top-left-radius: 800px 600px;*/
-}
-
-#noVNC_screen {
-  display: none;
+  z-index: 0;
   position: absolute;
-  margin: 0px;
-  padding: 0px;
-  bottom: 0px;
-  top: 36px; /* the height of the control bar */
-  left: 0px;
-  right: 0px;
-  width: auto;
-  height: auto;
+  width: 100%;
+  margin-left: 0px;
 }
-
-/* Do not set width/height for VNC_canvas or incorrect
- * scaling will occur. Canvas size depends on remote VNC
- * settings and noVNC settings. */
-#noVNC_canvas {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-
-#noVNC_clipboard_clear_button {
-  float:right;
-}
-
-/*Bubble contents divs*/
-#noVNC_settings {
-  display:none;
-  top:73px;
-  right:20px;
-  position:fixed;
-}
-
-#noVNC_controls {
-  display:none;
-  top:73px;
-  right:12px;
-  position:fixed;
-}
-#noVNC_controls.top:after  {
-  right:15px;
-}
-
-#noVNC_description {
-  display:none;
-  position:fixed;
-
-  top:73px;
-  right:20px;
-  left:20px;
-  padding:15px;
-  color:#000;
-  background:#eee; /* default background for browsers without gradient support */
-
-  border:2px solid #E0E0E0;
-  -webkit-border-radius:10px;
-  -moz-border-radius:10px;
-  border-radius:10px;
-}
-
-#noVNC_popup_status {
-  display:none;
-  position: fixed;
-  z-index: 1;
-
-  margin:15px;
-  top:60px;
-  padding:15px;
-  width:auto;
-
-  text-align:center;
-  font-weight:bold;
-  word-wrap:break-word;
-  color:#fff;
-  background:rgba(0,0,0,0.65);
-
-  -webkit-border-radius:10px;
-  -moz-border-radius:10px;
-  border-radius:10px;
-}
-
-#noVNC_xvp {
-  display:none;
-  top:73px;
-  right:30px;
-  position:fixed;
-}
-#noVNC_xvp.top:after {
-  right:125px;
-}
-
-#noVNC_clipboard {
-  display:none;
-  top:73px;
-  right:30px;
-  position:fixed;
-}
-#noVNC_clipboard.top:after {
-  right:85px;
-}
-
-#noVNC_keyboardinput {
-  width:1px;
-  height:1px;
-  background-color:#fff;
-  color:#fff;
-  border:0;
-  position: relative;
-  left: -40px;
-  z-index: -1;
-  ime-mode: disabled;
-}
-
-/*
- * Advanced Styling
- */
-
 .noVNC_status_normal {
   background: #b2bdcd; /* Old browsers */
   background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
@@ -265,105 +220,188 @@ html {
   background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 }
 
-/* Control bar */
-#noVNC_control_bar {
-  position:fixed;
-
-  display:block;
-  height:36px;
-  left:0;
-  top:0;
-  width:100%;
-  z-index:200;
+/* Right side buttons */
+.noVNC_buttons_right {
+  float: right;
+  right: 0px;
+  z-index: 2;
+  position: absolute;
+  padding-right: 10px;
 }
 
-.noVNC_status_button {
-  padding: 4px 4px;
-  vertical-align: middle;
-  border:1px solid #869dbc;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  background: #b2bdcd; /* Old browsers */
-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
+/* Send Ctrl+Alt+Delete */
+#noVNC_sendCtrlAltDel_button {
+  display: none;
 }
 
-.noVNC_status_button_selected {
-  padding: 4px 4px;
-  vertical-align: middle;
-  border:1px solid #4366a9;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  background: #779ced; /* Old browsers */
-  background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
- /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
+/* XVP Shutdown/Reboot */
+#noVNC_xvp {
+  display: none;
+  top: 73px;
+  right: 30px;
+  position: fixed;
+}
+#noVNC_xvp.top:after {
+  right: 125px;
+}
+#noVNC_xvp_buttons {
+  display: none;
 }
 
-.noVNC_status_button:disabled {
-  opacity: 0.4;
+/* Clipboard */
+#noVNC_clipboard {
+  display: none;
+  top: 73px;
+  right: 30px;
+  position: fixed;
+}
+#noVNC_clipboard.top:after {
+  right: 85px;
+}
+#noVNC_clipboard_text {
+  width: 500px;
+}
+#noVNC_clipboard_clear_button {
+  float: right;
 }
 
-
-/*Settings Bubble*/
-.triangle-right {
-  position:relative;
-  padding:15px;
-  color:#fff;
-  background:#fff; /* default background for browsers without gradient support */
-  /* css3 */
-  /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
-  background:-moz-linear-gradient(#2e88c4, #075698);
-  background:-o-linear-gradient(#2e88c4, #075698);
-  background:linear-gradient(#2e88c4, #075698);*/
-  -webkit-border-radius:10px;
-  -moz-border-radius:10px;
-  border-radius:10px;
-  color:#000;
-  border:2px solid #E0E0E0;
+/* Toggle fullscreen */
+#noVNC_fullscreen_button {
+  display: none;
 }
 
-.triangle-right.top:after {
-  border-color: transparent #E0E0E0;
-  border-width: 20px 20px 0 0;
-  bottom: auto;
-  left: auto;
-  right: 50px;
-  top: -20px;
+/* Settings */
+#noVNC_settings {
+  display: none;
+  top: 73px;
+  right: 20px;
+  position: fixed;
+}
+#noVNC_settings_menu {
+  margin: 3px;
+  text-align: left;
+}
+#noVNC_settings_menu ul {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+#noVNC_setting_path {
+  width: 100px;
+}
+#noVNC_settings_apply {
+  float: right;
 }
 
-.triangle-right:after {
-  content:"";
-  position:absolute;
-  bottom:-20px; /* value = - border-top-width - border-bottom-width */
-  left:50px; /* controls horizontal position */
-  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
-  border-style:solid;
-  border-color:#E0E0E0 transparent;
-  /* reduce the damage in FF3.0 */
-  display:block;
-  width:0;
+/* Connection Controls */
+#noVNC_controls {
+  display: none;
+  top: 73px;
+  right: 12px;
+  position: fixed;
+}
+#noVNC_controls.top:after  {
+  right:15px;
+}
+#noVNC_controls ul {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+#noVNC_controls li {
+  padding-bottom:8px;
+}
+#noVNC_setting_host {
+  width:150px;
+}
+#noVNC_setting_port {
+  width: 80px;
+}
+#noVNC_setting_password {
+  width: 150px;
+}
+#noVNC_connect_button {
+  width: 110px;
+  float: right;
 }
 
-.triangle-right.top:after {
-  top:-40px; /* value = - border-top-width - border-bottom-width */
-  right:50px; /* controls horizontal position */
-  bottom:auto;
-  left:auto;
-  border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */
-  border-color:transparent #E0E0E0;
+/* Description Panel */
+#noVNC_description {
+  display: none;
+  position: fixed;
+
+  top: 73px;
+  right: 20px;
+  left: 20px;
+  padding: 15px;
+  color: #000;
+  background: #eee; /* default background for browsers without gradient support */
+
+  border: 2px solid #E0E0E0;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+
+/* Popup Status */
+#noVNC_popup_status {
+  display: none;
+  position: fixed;
+  z-index: 1;
+
+  margin: 15px;
+  top: 60px;
+  padding: 15px;
+  width: auto;
+
+  text-align: center;
+  font-weight: bold;
+  word-wrap: break-word;
+  color: #fff;
+  background: rgba(0,0,0,0.65);
+
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+
+/* ----------------------------------------
+ * Main Area
+ * ----------------------------------------
+ */
+
+#noVNC_container {
+  display: table;
+  width: 100%;
+  height: 100%;
+  background-color: #313131;
+  border-bottom-right-radius: 800px 600px;
+  /*border-top-left-radius: 800px 600px;*/
+}
+
+/* HTML5 Canvas */
+#noVNC_screen {
+  display: none;
+  position: absolute;
+  margin: 0px;
+  padding: 0px;
+  bottom: 0px;
+  top: 36px; /* the height of the control bar */
+  left: 0px;
+  right: 0px;
+  width: auto;
+  height: auto;
+}
+
+/* Do not set width/height for VNC_canvas or incorrect
+ * scaling will occur. Canvas size depends on remote VNC
+ * settings and noVNC settings. */
+#noVNC_canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /*Default noVNC logo.*/
@@ -382,6 +420,7 @@ html {
   color:yellow;
   text-align:left;
   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
+  font-size: 180px;
   line-height:90%;
   text-shadow:
        5px 5px 0 #000,
@@ -401,40 +440,6 @@ html {
  * ----------------------------------------
  */
 
-
-.noVNC_status_button {
-  font-size: 12px;
-}
-
-#noVNC_clipboard_text {
-  width: 500px;
-}
-
-#noVNC_logo {
-  font-size: 180px;
-}
-
-.noVNC_buttons_left {
-  padding-left: 10px;
-}
-
-.noVNC_buttons_right {
-  padding-right: 10px;
-}
-
-#noVNC_status {
-  z-index: 0;
-  position: absolute;
-  width: 100%;
-  margin-left: 0px;
-}
-
-#noVNC_toggleExtraKeys_button { display: none; }
-#noVNC_toggleCtrl_button { display: inline; }
-#noVNC_toggleAlt_button {  display: inline; }
-#noVNC_sendTab_button { display: inline; }
-#noVNC_sendEsc_button { display: inline; }
-
 /* left-align the status text on lower resolutions */
 @media screen and (max-width: 800px){
   #noVNC_status {

From 17eb0fcf504e366bb501e55fdc8784ab1f632897 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Wed, 24 Aug 2016 16:35:44 +0200
Subject: [PATCH 06/46] Trigger autoconnect at proper time

It needs to happen after everything is fully initialised.
---
 app/ui.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index 78d397d7..81b7a2d4 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -115,14 +115,6 @@ var UI;
             UI.initSetting('repeaterID', '');
             UI.initSetting('token', '');
 
-            var autoconnect = WebUtil.getConfigVar('autoconnect', false);
-            if (autoconnect === 'true' || autoconnect == '1') {
-                autoconnect = true;
-                UI.connect();
-            } else {
-                autoconnect = false;
-            }
-
             UI.updateVisualState();
 
             document.getElementById('noVNC_setting_host').focus();
@@ -194,6 +186,14 @@ var UI;
             // Add mouse event click/focus/blur event handlers to the UI
             UI.addMouseHandlers();
 
+            var autoconnect = WebUtil.getConfigVar('autoconnect', false);
+            if (autoconnect === 'true' || autoconnect == '1') {
+                autoconnect = true;
+                UI.connect();
+            } else {
+                autoconnect = false;
+            }
+
             if (typeof callback === "function") {
                 callback(UI.rfb);
             }

From bfa414e5e8b3d4e766c8f5989785370439993a1b Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Aug 2016 12:58:58 +0200
Subject: [PATCH 07/46] Remove unused event handlers

These do not work and the mechanism for releasing keyboard grab on
the settings panel needs more work.
---
 app/ui.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index 81b7a2d4..e66ac3a5 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -253,8 +253,6 @@ var UI;
             document.getElementById("noVNC_clipboard_text").onchange = UI.clipboardSend;
             document.getElementById("noVNC_clipboard_clear_button").onclick = UI.clipboardClear;
 
-            document.getElementById("noVNC_settings_menu").onmouseover = UI.displayBlur;
-            document.getElementById("noVNC_settings_menu").onmouseover = UI.displayFocus;
             document.getElementById("noVNC_settings_apply").onclick = UI.settingsApply;
 
             document.getElementById("noVNC_connect_button").onclick = UI.connect;

From d7f790719a1a78eba947ff2de1d9ffb3d4a95556 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Wed, 24 Aug 2016 17:01:03 +0200
Subject: [PATCH 08/46] Add events to objects the modern way

The old way only allows a single event handler per event, so switch
over everything to the new model.
---
 app/ui.js | 102 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 68 insertions(+), 34 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index e66ac3a5..e6e34ab1 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -217,47 +217,81 @@ var UI;
 
         addMouseHandlers: function() {
             // Setup interface handlers that can't be inline
-            document.getElementById("noVNC_view_drag_button").onclick = UI.toggleViewDrag;
-            document.getElementById("noVNC_mouse_button0").onclick = function () { UI.setMouseButton(1); };
-            document.getElementById("noVNC_mouse_button1").onclick = function () { UI.setMouseButton(2); };
-            document.getElementById("noVNC_mouse_button2").onclick = function () { UI.setMouseButton(4); };
-            document.getElementById("noVNC_mouse_button4").onclick = function () { UI.setMouseButton(0); };
-            document.getElementById("noVNC_keyboard_button").onclick = UI.showKeyboard;
+            document.getElementById("noVNC_view_drag_button")
+                .addEventListener('click', UI.toggleViewDrag);
+            document.getElementById("noVNC_mouse_button0")
+                .addEventListener('click', function () { UI.setMouseButton(1); });
+            document.getElementById("noVNC_mouse_button1")
+                .addEventListener('click', function () { UI.setMouseButton(2); });
+            document.getElementById("noVNC_mouse_button2")
+                .addEventListener('click', function () { UI.setMouseButton(4); });
+            document.getElementById("noVNC_mouse_button4")
+                .addEventListener('click', function () { UI.setMouseButton(0); });
+            document.getElementById("noVNC_keyboard_button")
+                .addEventListener('click', UI.showKeyboard);
 
-            document.getElementById("noVNC_keyboardinput").oninput = UI.keyInput;
-            document.getElementById("noVNC_keyboardinput").onblur = UI.hideKeyboard;
-            document.getElementById("noVNC_keyboardinput").onsubmit = function () { return false; };
+            document.getElementById("noVNC_keyboardinput")
+                .addEventListener('input', UI.keyInput);
+            document.getElementById("noVNC_keyboardinput")
+                .addEventListener('blur', UI.hideKeyboard);
+            document.getElementById("noVNC_keyboardinput")
+                .addEventListener('submit', function () { return false; });
 
-            document.getElementById("noVNC_toggleExtraKeys_button").onclick = UI.toggleExtraKeys;
-            document.getElementById("noVNC_toggleCtrl_button").onclick = UI.toggleCtrl;
-            document.getElementById("noVNC_toggleAlt_button").onclick = UI.toggleAlt;
-            document.getElementById("noVNC_sendTab_button").onclick = UI.sendTab;
-            document.getElementById("noVNC_sendEsc_button").onclick = UI.sendEsc;
+            document.getElementById("noVNC_toggleExtraKeys_button")
+                .addEventListener('click', UI.toggleExtraKeys);
+            document.getElementById("noVNC_toggleCtrl_button")
+                .addEventListener('click', UI.toggleCtrl);
+            document.getElementById("noVNC_toggleAlt_button")
+                .addEventListener('click', UI.toggleAlt);
+            document.getElementById("noVNC_sendTab_button")
+                .addEventListener('click', UI.sendTab);
+            document.getElementById("noVNC_sendEsc_button")
+                .addEventListener('click', UI.sendEsc);
 
-            document.getElementById("noVNC_sendCtrlAltDel_button").onclick = UI.sendCtrlAltDel;
-            document.getElementById("noVNC_xvpShutdown_button").onclick = function() { UI.rfb.xvpShutdown(); },
-            document.getElementById("noVNC_xvpReboot_button").onclick = function() { UI.rfb.xvpReboot(); },
-            document.getElementById("noVNC_xvpReset_button").onclick = function() { UI.rfb.xvpReset(); },
-            document.getElementById("noVNC_status").onclick = UI.popupStatus;
-            document.getElementById("noVNC_popup_status").onclick = UI.closePopup;
-            document.getElementById("noVNC_toggleXvp_button").onclick = UI.toggleXvpPanel;
-            document.getElementById("noVNC_clipboard_button").onclick = UI.toggleClipboardPanel;
-            document.getElementById("noVNC_fullscreen_button").onclick = UI.toggleFullscreen;
-            document.getElementById("noVNC_settings_button").onclick = UI.toggleSettingsPanel;
-            document.getElementById("noVNC_connectPanel_button").onclick = UI.toggleConnectPanel;
-            document.getElementById("noVNC_disconnect_button").onclick = UI.disconnect;
-            document.getElementById("noVNC_description_button").onclick = UI.toggleConnectPanel;
+            document.getElementById("noVNC_sendCtrlAltDel_button")
+                .addEventListener('click', UI.sendCtrlAltDel);
+            document.getElementById("noVNC_xvpShutdown_button")
+                .addEventListener('click', function() { UI.rfb.xvpShutdown(); });
+            document.getElementById("noVNC_xvpReboot_button")
+                .addEventListener('click', function() { UI.rfb.xvpReboot(); });
+            document.getElementById("noVNC_xvpReset_button")
+                .addEventListener('click', function() { UI.rfb.xvpReset(); });
+            document.getElementById("noVNC_status")
+                .addEventListener('click', UI.popupStatus);
+            document.getElementById("noVNC_popup_status")
+                .addEventListener('click', UI.closePopup);
+            document.getElementById("noVNC_toggleXvp_button")
+                .addEventListener('click', UI.toggleXvpPanel);
+            document.getElementById("noVNC_clipboard_button")
+                .addEventListener('click', UI.toggleClipboardPanel);
+            document.getElementById("noVNC_fullscreen_button")
+                .addEventListener('click', UI.toggleFullscreen);
+            document.getElementById("noVNC_settings_button")
+                .addEventListener('click', UI.toggleSettingsPanel);
+            document.getElementById("noVNC_connectPanel_button")
+                .addEventListener('click', UI.toggleConnectPanel);
+            document.getElementById("noVNC_disconnect_button")
+                .addEventListener('click', UI.disconnect);
+            document.getElementById("noVNC_description_button")
+                .addEventListener('click', UI.toggleConnectPanel);
 
-            document.getElementById("noVNC_clipboard_text").onfocus = UI.displayBlur;
-            document.getElementById("noVNC_clipboard_text").onblur = UI.displayFocus;
-            document.getElementById("noVNC_clipboard_text").onchange = UI.clipboardSend;
-            document.getElementById("noVNC_clipboard_clear_button").onclick = UI.clipboardClear;
+            document.getElementById("noVNC_clipboard_text")
+                .addEventListener('focus', UI.displayBlur);
+            document.getElementById("noVNC_clipboard_text")
+                .addEventListener('blur', UI.displayFocus);
+            document.getElementById("noVNC_clipboard_text")
+                .addEventListener('change', UI.clipboardSend);
+            document.getElementById("noVNC_clipboard_clear_button")
+                .addEventListener('click', UI.clipboardClear);
 
-            document.getElementById("noVNC_settings_apply").onclick = UI.settingsApply;
+            document.getElementById("noVNC_settings_apply")
+                .addEventListener('click', UI.settingsApply);
 
-            document.getElementById("noVNC_connect_button").onclick = UI.connect;
+            document.getElementById("noVNC_connect_button")
+                .addEventListener('click', UI.connect);
 
-            document.getElementById("noVNC_setting_resize").onchange = UI.enableDisableViewClip;
+            document.getElementById("noVNC_setting_resize")
+                .addEventListener('change', UI.enableDisableViewClip);
         },
 
 /* ------^-------

From 0f6af1e3ec323fda883816747e5a671a12c73e41 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Wed, 24 Aug 2016 17:23:11 +0200
Subject: [PATCH 09/46] Separate UI.start() in to sub-functions

---
 app/ui.js | 229 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 130 insertions(+), 99 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index e6e34ab1..4f17f416 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -64,8 +64,68 @@ var UI;
 
         // Render default UI and initialize settings menu
         start: function(callback) {
-            UI.isTouchDevice = 'ontouchstart' in document.documentElement;
 
+            // Setup global variables first
+            UI.isTouchDevice = 'ontouchstart' in document.documentElement;
+            UI.isSafari = (navigator.userAgent.indexOf('Safari') !== -1 &&
+                           navigator.userAgent.indexOf('Chrome') === -1);
+
+            UI.initSettings();
+
+            // Show mouse selector buttons on touch screen devices
+            if (UI.isTouchDevice) {
+                // Show mobile buttons
+                document.getElementById('noVNC_mobile_buttons').style.display = "inline";
+                UI.setMouseButton();
+                // Remove the address bar
+                setTimeout(function() { window.scrollTo(0, 1); }, 100);
+                UI.forceSetting('clip', true);
+            } else {
+                UI.initSetting('clip', false);
+            }
+
+            // Setup and initialize event handlers
+            UI.setupWindowEvents();
+            UI.setupFullscreen();
+            UI.addControlbarHandlers();
+            UI.addTouchSpecificHandlers();
+            UI.addXvpHandlers();
+            UI.addConnectionControlHandlers();
+            UI.addClipboardHandlers();
+            UI.addSettingsHandlers();
+
+            // Show description by default when hosted at for kanaka.github.com
+            if (location.host === "kanaka.github.io") {
+                // Open the description dialog
+                document.getElementById('noVNC_description').style.display = "block";
+            } else {
+                // Show the connect panel on first load unless autoconnecting
+                if (autoconnect === UI.connSettingsOpen) {
+                    UI.toggleConnectPanel();
+                }
+            }
+
+            UI.setViewClip();
+            UI.setBarPosition();
+
+            UI.updateVisualState();
+
+            document.getElementById('noVNC_setting_host').focus();
+
+            var autoconnect = WebUtil.getConfigVar('autoconnect', false);
+            if (autoconnect === 'true' || autoconnect == '1') {
+                autoconnect = true;
+                UI.connect();
+            } else {
+                autoconnect = false;
+            }
+
+            if (typeof callback === "function") {
+                callback(UI.rfb);
+            }
+        },
+
+        initSettings: function() {
             // Stylesheet selection dropdown
             var sheet = WebUtil.selectStylesheet();
             var sheets = WebUtil.getStylesheets();
@@ -114,52 +174,16 @@ var UI;
             UI.initSetting('path', 'websockify');
             UI.initSetting('repeaterID', '');
             UI.initSetting('token', '');
+        },
 
-            UI.updateVisualState();
-
-            document.getElementById('noVNC_setting_host').focus();
-
-            // Show mouse selector buttons on touch screen devices
-            if (UI.isTouchDevice) {
-                // Show mobile buttons
-                document.getElementById('noVNC_mobile_buttons').style.display = "inline";
-                UI.setMouseButton();
-                // Remove the address bar
-                setTimeout(function() { window.scrollTo(0, 1); }, 100);
-                UI.forceSetting('clip', true);
-            } else {
-                UI.initSetting('clip', false);
-            }
-
-            UI.setViewClip();
-            UI.setBarPosition();
-
-            window.addEventListener('resize', function () {
+        setupWindowEvents: function() {
+            window.addEventListener( 'resize', function () {
                 UI.applyResizeMode();
                 UI.setViewClip();
                 UI.updateViewDrag();
                 UI.setBarPosition();
             } );
 
-            UI.isSafari = (navigator.userAgent.indexOf('Safari') != -1 &&
-                           navigator.userAgent.indexOf('Chrome') == -1);
-
-            // Only show the button if fullscreen is properly supported
-            // * Safari doesn't support alphanumerical input while in fullscreen
-            if (!UI.isSafari &&
-                (document.documentElement.requestFullscreen ||
-                 document.documentElement.mozRequestFullScreen ||
-                 document.documentElement.webkitRequestFullscreen ||
-                 document.body.msRequestFullscreen)) {
-                document.getElementById('noVNC_fullscreen_button').style.display = "inline";
-                window.addEventListener('fullscreenchange', UI.updateFullscreenButton);
-                window.addEventListener('mozfullscreenchange', UI.updateFullscreenButton);
-                window.addEventListener('webkitfullscreenchange', UI.updateFullscreenButton);
-                window.addEventListener('msfullscreenchange', UI.updateFullscreenButton);
-            }
-
-            window.addEventListener('load', UI.keyboardinputReset);
-
             // While connected we want to display a confirmation dialogue
             // if the user tries to leave the page
             window.addEventListener('beforeunload', function (e) {
@@ -171,54 +195,35 @@ var UI;
                     return void 0; // To prevent the dialogue when disconnected
                 }
             });
+        },
 
-            // Show description by default when hosted at for kanaka.github.com
-            if (location.host === "kanaka.github.io") {
-                // Open the description dialog
-                document.getElementById('noVNC_description').style.display = "block";
-            } else {
-                // Show the connect panel on first load unless autoconnecting
-                if (autoconnect === UI.connSettingsOpen) {
-                    UI.toggleConnectPanel();
-                }
-            }
-
-            // Add mouse event click/focus/blur event handlers to the UI
-            UI.addMouseHandlers();
-
-            var autoconnect = WebUtil.getConfigVar('autoconnect', false);
-            if (autoconnect === 'true' || autoconnect == '1') {
-                autoconnect = true;
-                UI.connect();
-            } else {
-                autoconnect = false;
-            }
-
-            if (typeof callback === "function") {
-                callback(UI.rfb);
+        setupFullscreen: function() {
+            // Only show the button if fullscreen is properly supported
+            // * Safari doesn't support alphanumerical input while in fullscreen
+            if (!UI.isSafari &&
+                (document.documentElement.requestFullscreen ||
+                 document.documentElement.mozRequestFullScreen ||
+                 document.documentElement.webkitRequestFullscreen ||
+                 document.body.msRequestFullscreen)) {
+                document.getElementById('noVNC_fullscreen_button').style.display = "inline";
+                UI.addFullscreenHandlers();
             }
         },
 
-        initRFB: function() {
-            try {
-                UI.rfb = new RFB({'target': document.getElementById('noVNC_canvas'),
-                                  'onUpdateState': UI.updateState,
-                                  'onXvpInit': UI.updateXvpButton,
-                                  'onClipboard': UI.clipboardReceive,
-                                  'onFBUComplete': UI.initialResize,
-                                  'onFBResize': UI.updateViewDrag,
-                                  'onDesktopName': UI.updateDocumentTitle});
-                return true;
-            } catch (exc) {
-                UI.updateState(null, 'fatal', null, 'Unable to create RFB client -- ' + exc);
-                return false;
-            }
-        },
-
-        addMouseHandlers: function() {
-            // Setup interface handlers that can't be inline
+        addControlbarHandlers: function() {
             document.getElementById("noVNC_view_drag_button")
                 .addEventListener('click', UI.toggleViewDrag);
+            document.getElementById("noVNC_sendCtrlAltDel_button")
+                .addEventListener('click', UI.sendCtrlAltDel);
+            document.getElementById("noVNC_status")
+                .addEventListener('click', UI.popupStatus);
+            document.getElementById("noVNC_popup_status")
+                .addEventListener('click', UI.closePopup);
+            document.getElementById("noVNC_description_button")
+                .addEventListener('click', UI.toggleConnectPanel);
+        },
+
+        addTouchSpecificHandlers: function() {
             document.getElementById("noVNC_mouse_button0")
                 .addEventListener('click', function () { UI.setMouseButton(1); });
             document.getElementById("noVNC_mouse_button1")
@@ -237,6 +242,8 @@ var UI;
             document.getElementById("noVNC_keyboardinput")
                 .addEventListener('submit', function () { return false; });
 
+            window.addEventListener('load', UI.keyboardinputReset);
+
             document.getElementById("noVNC_toggleExtraKeys_button")
                 .addEventListener('click', UI.toggleExtraKeys);
             document.getElementById("noVNC_toggleCtrl_button")
@@ -247,34 +254,31 @@ var UI;
                 .addEventListener('click', UI.sendTab);
             document.getElementById("noVNC_sendEsc_button")
                 .addEventListener('click', UI.sendEsc);
+        },
 
-            document.getElementById("noVNC_sendCtrlAltDel_button")
-                .addEventListener('click', UI.sendCtrlAltDel);
+        addXvpHandlers: function() {
             document.getElementById("noVNC_xvpShutdown_button")
                 .addEventListener('click', function() { UI.rfb.xvpShutdown(); });
             document.getElementById("noVNC_xvpReboot_button")
                 .addEventListener('click', function() { UI.rfb.xvpReboot(); });
             document.getElementById("noVNC_xvpReset_button")
                 .addEventListener('click', function() { UI.rfb.xvpReset(); });
-            document.getElementById("noVNC_status")
-                .addEventListener('click', UI.popupStatus);
-            document.getElementById("noVNC_popup_status")
-                .addEventListener('click', UI.closePopup);
             document.getElementById("noVNC_toggleXvp_button")
                 .addEventListener('click', UI.toggleXvpPanel);
-            document.getElementById("noVNC_clipboard_button")
-                .addEventListener('click', UI.toggleClipboardPanel);
-            document.getElementById("noVNC_fullscreen_button")
-                .addEventListener('click', UI.toggleFullscreen);
-            document.getElementById("noVNC_settings_button")
-                .addEventListener('click', UI.toggleSettingsPanel);
+        },
+
+        addConnectionControlHandlers: function() {
             document.getElementById("noVNC_connectPanel_button")
                 .addEventListener('click', UI.toggleConnectPanel);
             document.getElementById("noVNC_disconnect_button")
                 .addEventListener('click', UI.disconnect);
-            document.getElementById("noVNC_description_button")
-                .addEventListener('click', UI.toggleConnectPanel);
+            document.getElementById("noVNC_connect_button")
+                .addEventListener('click', UI.connect);
+        },
 
+        addClipboardHandlers: function() {
+            document.getElementById("noVNC_clipboard_button")
+                .addEventListener('click', UI.toggleClipboardPanel);
             document.getElementById("noVNC_clipboard_text")
                 .addEventListener('focus', UI.displayBlur);
             document.getElementById("noVNC_clipboard_text")
@@ -283,17 +287,44 @@ var UI;
                 .addEventListener('change', UI.clipboardSend);
             document.getElementById("noVNC_clipboard_clear_button")
                 .addEventListener('click', UI.clipboardClear);
+        },
 
+        addSettingsHandlers: function() {
+            document.getElementById("noVNC_settings_button")
+                .addEventListener('click', UI.toggleSettingsPanel);
             document.getElementById("noVNC_settings_apply")
                 .addEventListener('click', UI.settingsApply);
 
-            document.getElementById("noVNC_connect_button")
-                .addEventListener('click', UI.connect);
-
             document.getElementById("noVNC_setting_resize")
                 .addEventListener('change', UI.enableDisableViewClip);
         },
 
+        addFullscreenHandlers: function() {
+            document.getElementById("noVNC_fullscreen_button")
+                .addEventListener('click', UI.toggleFullscreen);
+
+            window.addEventListener('fullscreenchange', UI.updateFullscreenButton);
+            window.addEventListener('mozfullscreenchange', UI.updateFullscreenButton);
+            window.addEventListener('webkitfullscreenchange', UI.updateFullscreenButton);
+            window.addEventListener('msfullscreenchange', UI.updateFullscreenButton);
+        },
+
+        initRFB: function() {
+            try {
+                UI.rfb = new RFB({'target': document.getElementById('noVNC_canvas'),
+                                  'onUpdateState': UI.updateState,
+                                  'onXvpInit': UI.updateXvpButton,
+                                  'onClipboard': UI.clipboardReceive,
+                                  'onFBUComplete': UI.initialResize,
+                                  'onFBResize': UI.updateViewDrag,
+                                  'onDesktopName': UI.updateDocumentTitle});
+                return true;
+            } catch (exc) {
+                UI.updateState(null, 'fatal', null, 'Unable to create RFB client -- ' + exc);
+                return false;
+            }
+        },
+
 /* ------^-------
  *     /INIT
  * ==============

From 3e3eec28f34005b6967c69b2da469fa9b2ea12bc Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 1 Sep 2016 12:35:22 +0200
Subject: [PATCH 10/46] Remove beforeunload handler

Support for this is spotty and it is getting more and more restricted
by the day. Give up on this approach.
---
 app/ui.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index 4f17f416..ce54d34e 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -183,18 +183,6 @@ var UI;
                 UI.updateViewDrag();
                 UI.setBarPosition();
             } );
-
-            // While connected we want to display a confirmation dialogue
-            // if the user tries to leave the page
-            window.addEventListener('beforeunload', function (e) {
-                if (UI.rfb && UI.rfb_state === 'normal') {
-                    var msg = "You are currently connected.";
-                    e.returnValue = msg;
-                    return msg;
-                } else {
-                    return void 0; // To prevent the dialogue when disconnected
-                }
-            });
         },
 
         setupFullscreen: function() {

From f0d9ab9698d811ead904414092f4730078eb27c7 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Wed, 24 Aug 2016 18:03:32 +0200
Subject: [PATCH 11/46] Avoid ambigious optional arguments

Some functions weren't obvious what they would do if an argument was
omitted. Split them up in to separate functions in those cases to
make the API clearer.
---
 app/ui.js | 188 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 98 insertions(+), 90 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index ce54d34e..124d9ad2 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -76,7 +76,7 @@ var UI;
             if (UI.isTouchDevice) {
                 // Show mobile buttons
                 document.getElementById('noVNC_mobile_buttons').style.display = "inline";
-                UI.setMouseButton();
+                UI.hideMouseButton();
                 // Remove the address bar
                 setTimeout(function() { window.scrollTo(0, 1); }, 100);
                 UI.forceSetting('clip', true);
@@ -105,7 +105,7 @@ var UI;
                 }
             }
 
-            UI.setViewClip();
+            UI.updateViewClip();
             UI.setBarPosition();
 
             UI.updateVisualState();
@@ -179,7 +179,7 @@ var UI;
         setupWindowEvents: function() {
             window.addEventListener( 'resize', function () {
                 UI.applyResizeMode();
-                UI.setViewClip();
+                UI.updateViewClip();
                 UI.updateViewDrag();
                 UI.setBarPosition();
             } );
@@ -381,14 +381,14 @@ var UI;
             document.getElementById('noVNC_setting_repeaterID').disabled = connected;
 
             if (connected) {
-                UI.setViewClip();
+                UI.updateViewClip();
                 UI.setMouseButton(1);
                 document.getElementById('noVNC_clipboard_button').style.display = "inline";
                 document.getElementById('noVNC_keyboard_button').style.display = "inline";
                 document.getElementById('noVNC_extra_keys').style.display = "";
                 document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "inline";
             } else {
-                UI.setMouseButton();
+                UI.hideMouseButton();
                 document.getElementById('noVNC_clipboard_button').style.display = "none";
                 document.getElementById('noVNC_keyboard_button').style.display = "none";
                 document.getElementById('noVNC_extra_keys').style.display = "none";
@@ -398,7 +398,7 @@ var UI;
 
             // State change disables viewport dragging.
             // It is enabled (toggled) by direct click on the button
-            UI.updateViewDrag(false);
+            UI.setViewDrag(false);
 
             switch (UI.rfb_state) {
                 case 'fatal':
@@ -556,7 +556,7 @@ var UI;
             // Settings with immediate (non-connected related) effect
             WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
             WebUtil.init_logging(UI.getSetting('logging'));
-            UI.setViewClip();
+            UI.updateViewClip();
             UI.updateViewDrag();
             //Util.Debug("<< settingsApply");
         },
@@ -956,54 +956,52 @@ var UI;
 
         // Set and configure viewport clipping
         setViewClip: function(clip) {
+            UI.updateSetting('clip', clip);
+            UI.updateViewClip();
+        },
+
+        // Update parameters that depend on the clip setting
+        updateViewClip: function() {
             var display;
-            if (UI.rfb) {
-                display = UI.rfb.get_display();
-            } else {
-                UI.forceSetting('clip', clip);
+            if (!UI.rfb) {
                 return;
             }
 
+            var display = UI.rfb.get_display();
             var cur_clip = display.get_viewport();
+            var new_clip = UI.getSetting('clip');
 
-            if (typeof(clip) !== 'boolean') {
-                // Use current setting
-                clip = UI.getSetting('clip');
+            if (cur_clip !== new_clip) {
+                display.set_viewport(new_clip);
             }
 
-            if (clip && !cur_clip) {
-                // Turn clipping on
-                UI.updateSetting('clip', true);
-            } else if (!clip && cur_clip) {
-                // Turn clipping off
-                UI.updateSetting('clip', false);
-                display.set_viewport(false);
+            var size = UI.screenSize();
+
+            if (new_clip && size) {
+                // When clipping is enabled, the screen is limited to
+                // the size of the browser window.
+                display.set_maxWidth(size.w);
+                display.set_maxHeight(size.h);
+
+                var screen = document.getElementById('noVNC_screen');
+                var canvas = document.getElementById('noVNC_canvas');
+
+                // Hide potential scrollbars that can skew the position
+                screen.style.overflow = "hidden";
+
+                // The x position marks the left margin of the canvas,
+                // remove the margin from both sides to keep it centered.
+                var new_w = size.w - (2 * Util.getPosition(canvas).x);
+
+                screen.style.overflow = "visible";
+
+                display.viewportChangeSize(new_w, size.h);
+            } else {
                 // Disable max dimensions
                 display.set_maxWidth(0);
                 display.set_maxHeight(0);
                 display.viewportChangeSize();
             }
-            if (UI.getSetting('clip')) {
-                // If clipping, update clipping settings
-                display.set_viewport(true);
-
-                var size = UI.screenSize();
-                if (size) {
-                    display.set_maxWidth(size.w);
-                    display.set_maxHeight(size.h);
-
-                    // Hide potential scrollbars that can skew the position
-                    document.getElementById('noVNC_screen').style.overflow = "hidden";
-
-                    // The x position marks the left margin of the canvas,
-                    // remove the margin from both sides to keep it centered
-                    var new_w = size.w - (2 * Util.getPosition(document.getElementById('noVNC_canvas')).x);
-
-                    document.getElementById('noVNC_screen').style.overflow = "visible";
-
-                    display.viewportChangeSize(new_w, size.h);
-                }
-            }
         },
 
         // Handle special cases where clipping is forced on/off or locked
@@ -1046,62 +1044,72 @@ var UI;
  *    VIEWDRAG
  * ------v------*/
 
-        // Update the viewport drag state
-        updateViewDrag: function(drag) {
+        toggleViewDrag: function() {
             if (!UI.rfb) return;
 
-            var viewDragButton = document.getElementById('noVNC_view_drag_button');
+            var drag = UI.rfb.get_viewportDrag();
+            UI.setViewDrag(!drag);
+         },
+
+        // Set the view drag mode which moves the viewport on mouse drags
+        setViewDrag: function(drag) {
+            if (!UI.rfb) return;
+
+            UI.rfb.set_viewportDrag(drag);
+
+            UI.updateViewDrag();
+        },
+
+        updateViewDrag: function() {
+            var clipping = false;
 
             // Check if viewport drag is possible. It is only possible
             // if the remote display is clipping the client display.
             if (UI.rfb_state === 'normal' &&
                 UI.rfb.get_display().get_viewport() &&
                 UI.rfb.get_display().clippingDisplay()) {
-
-                viewDragButton.style.display = "inline";
-                viewDragButton.disabled = false;
-
-            } else {
-                // The size of the remote display is the same or smaller
-                // than the client display. Make sure viewport drag isn't
-                // active when it can't be used.
-                if (UI.rfb.get_viewportDrag) {
-                    viewDragButton.className = "noVNC_status_button";
-                    UI.rfb.set_viewportDrag(false);
-                }
-
-                // The button is disabled instead of hidden on touch devices
-                if (UI.rfb_state === 'normal' && UI.isTouchDevice) {
-                    viewDragButton.style.display = "inline";
-                    viewDragButton.disabled = true;
-                } else {
-                    viewDragButton.style.display = "none";
-                }
-                return;
+                clipping = true;
             }
 
-            if (typeof(drag) !== "undefined" &&
-                typeof(drag) !== "object") {
-                if (drag) {
-                    viewDragButton.className = "noVNC_status_button_selected";
-                    UI.rfb.set_viewportDrag(true);
-                } else {
-                    viewDragButton.className = "noVNC_status_button";
-                    UI.rfb.set_viewportDrag(false);
-                }
-            }
-        },
-
-        toggleViewDrag: function() {
-            if (!UI.rfb) return;
-
             var viewDragButton = document.getElementById('noVNC_view_drag_button');
-            if (UI.rfb.get_viewportDrag()) {
-                viewDragButton.className = "noVNC_status_button";
-                UI.rfb.set_viewportDrag(false);
+
+            if (UI.rfb_state !== 'normal') {
+                // Always hide when not connected
+                viewDragButton.style.display = "none";
             } else {
-                viewDragButton.className = "noVNC_status_button_selected";
-                UI.rfb.set_viewportDrag(true);
+                if (!clipping &&
+                    UI.rfb.get_viewportDrag()) {
+                    // The size of the remote display is the same or smaller
+                    // than the client display. Make sure viewport drag isn't
+                    // active when it can't be used.
+                    UI.rfb.set_viewportDrag(false);
+                }
+
+                if (UI.rfb.get_viewportDrag()) {
+                    viewDragButton.className = "noVNC_status_button_selected";
+                } else {
+                    viewDragButton.className = "noVNC_status_button";
+                }
+
+                // Different behaviour for touch vs non-touch
+                // The button is disabled instead of hidden on touch devices
+                if (UI.isTouchDevice) {
+                    viewDragButton.style.display = "inline";
+
+                    if (clipping) {
+                        viewDragButton.disabled = false;
+                    } else {
+                        viewDragButton.disabled = true;
+                    }
+                } else {
+                    viewDragButton.disabled = false;
+
+                    if (clipping) {
+                        viewDragButton.style.display = "inline";
+                    } else {
+                        viewDragButton.style.display = "none";
+                    }
+                }
             }
         },
 
@@ -1292,11 +1300,11 @@ var UI;
  *     MISC
  * ------v------*/
 
+        hideMouseButton: function() {
+            UI.setMouseButton(-1);
+        },
+
         setMouseButton: function(num) {
-            if (typeof num === 'undefined') {
-                // Disable mouse buttons
-                num = -1;
-            }
             if (UI.rfb) {
                 UI.rfb.get_mouse().set_touchButton(num);
             }

From f9fff03719de1d1410a69803a383a267fbd7e503 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Aug 2016 10:51:43 +0200
Subject: [PATCH 12/46] Remove unused description

---
 app/styles/base.css | 18 ------------------
 app/ui.js           | 25 +++----------------------
 vnc.html            | 16 ----------------
 3 files changed, 3 insertions(+), 56 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index a4d6708f..722d8c38 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -325,24 +325,6 @@ html {
   float: right;
 }
 
-/* Description Panel */
-#noVNC_description {
-  display: none;
-  position: fixed;
-
-  top: 73px;
-  right: 20px;
-  left: 20px;
-  padding: 15px;
-  color: #000;
-  background: #eee; /* default background for browsers without gradient support */
-
-  border: 2px solid #E0E0E0;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
-}
-
 /* Popup Status */
 #noVNC_popup_status {
   display: none;
diff --git a/app/ui.js b/app/ui.js
index 124d9ad2..0a94a0f8 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -94,16 +94,9 @@ var UI;
             UI.addClipboardHandlers();
             UI.addSettingsHandlers();
 
-            // Show description by default when hosted at for kanaka.github.com
-            if (location.host === "kanaka.github.io") {
-                // Open the description dialog
-                document.getElementById('noVNC_description').style.display = "block";
-            } else {
-                // Show the connect panel on first load unless autoconnecting
-                if (autoconnect === UI.connSettingsOpen) {
-                    UI.toggleConnectPanel();
-                }
-            }
+            // Show the connect panel on first load unless autoconnecting
+            if (!autoconnect && !UI.connSettingsOpen)
+                UI.toggleConnectPanel();
 
             UI.updateViewClip();
             UI.setBarPosition();
@@ -207,8 +200,6 @@ var UI;
                 .addEventListener('click', UI.popupStatus);
             document.getElementById("noVNC_popup_status")
                 .addEventListener('click', UI.closePopup);
-            document.getElementById("noVNC_description_button")
-                .addEventListener('click', UI.toggleConnectPanel);
         },
 
         addTouchSpecificHandlers: function() {
@@ -563,8 +554,6 @@ var UI;
 
         // Open menu
         openSettingsMenu: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
             // Close clipboard panel if open
             if (UI.clipboardOpen === true) {
                 UI.toggleClipboardPanel();
@@ -593,8 +582,6 @@ var UI;
         //   On open, settings are refreshed from saved cookies.
         //   On close, settings are applied
         toggleSettingsPanel: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
             if (UI.settingsOpen) {
                 UI.settingsApply();
                 UI.closeSettingsMenu();
@@ -628,8 +615,6 @@ var UI;
 
         // Show the XVP panel
         toggleXvpPanel: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
             // Close settings if open
             if (UI.settingsOpen === true) {
                 UI.settingsApply();
@@ -676,8 +661,6 @@ var UI;
 
         // Show the clipboard panel
         toggleClipboardPanel: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
             // Close settings if open
             if (UI.settingsOpen === true) {
                 UI.settingsApply();
@@ -729,8 +712,6 @@ var UI;
 
         // Show the connection settings panel/menu
         toggleConnectPanel: function() {
-            // Close the description panel
-            document.getElementById('noVNC_description').style.display = "none";
             // Close connection settings if open
             if (UI.settingsOpen === true) {
                 UI.settingsApply();
diff --git a/vnc.html b/vnc.html
index 2830bc1a..5eb3af90 100644
--- a/vnc.html
+++ b/vnc.html
@@ -190,22 +190,6 @@
             </div>
         </div>
 
-        <!-- Description Panel -->
-        <!-- Shown by default when hosted at for kanaka.github.com -->
-        <div id="noVNC_description" class="">
-            noVNC is a browser based VNC client implemented using HTML5 Canvas
-            and WebSockets. You will either need a VNC server with WebSockets
-            support (such as <a href="http://libvncserver.sourceforge.net/">libvncserver</a>)
-            or you will need to use
-            <a href="https://github.com/kanaka/websockify">websockify</a>
-            to bridge between your browser and VNC server. See the noVNC
-            <a href="https://github.com/kanaka/noVNC">README</a>
-            and <a href="http://kanaka.github.com/noVNC">website</a>
-            for more information.
-            <br />
-            <input id="noVNC_description_button" type="button" value="Close" />
-        </div>
-
         <!-- Popup Status -->
         <div id="noVNC_popup_status" class="">
         </div>

From 286947cbe2c0d75ccf38dd332afbbe09334ddb14 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Aug 2016 11:10:25 +0200
Subject: [PATCH 13/46] Fix name for panel CSS class

---
 app/styles/base.css  | 31 ++++++-------------------------
 app/styles/black.css |  2 +-
 app/styles/blue.css  |  2 +-
 vnc.html             |  8 ++++----
 4 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 722d8c38..bceb4f5d 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -80,7 +80,7 @@ html {
 }
 
 /* Panels */
-.triangle-right {
+.noVNC_panel {
   position: relative;
   padding: 15px;
   color: #fff;
@@ -96,31 +96,12 @@ html {
   color: #000;
   border: 2px solid #E0E0E0;
 }
-.triangle-right.top:after {
-  border-color: transparent #E0E0E0;
-  border-width: 20px 20px 0 0;
-  bottom: auto;
-  left: auto;
-  right: 50px;
-  top: -20px;
-}
-.triangle-right:after {
+.noVNC_panel:after {
   content: "";
   position: absolute;
-  bottom: -20px; /* value = - border-top-width - border-bottom-width */
-  left: 50px; /* controls horizontal position */
-  border-width: 20px 0 0 20px; /* vary these values to change the angle of the vertex */
-  border-style: solid;
-  border-color: #E0E0E0 transparent;
-  /* reduce the damage in FF3.0 */
-  display: block;
-  width: 0;
-}
-.triangle-right.top:after {
   top: -40px; /* value = - border-top-width - border-bottom-width */
   right: 50px; /* controls horizontal position */
-  bottom: auto;
-  left: auto;
+  border-style: solid;
   border-width: 40px 40px 0 0; /* vary these values to change the angle of the vertex */
   border-color: transparent #E0E0E0;
 }
@@ -241,7 +222,7 @@ html {
   right: 30px;
   position: fixed;
 }
-#noVNC_xvp.top:after {
+#noVNC_xvp:after {
   right: 125px;
 }
 #noVNC_xvp_buttons {
@@ -255,7 +236,7 @@ html {
   right: 30px;
   position: fixed;
 }
-#noVNC_clipboard.top:after {
+#noVNC_clipboard:after {
   right: 85px;
 }
 #noVNC_clipboard_text {
@@ -300,7 +281,7 @@ html {
   right: 12px;
   position: fixed;
 }
-#noVNC_controls.top:after  {
+#noVNC_controls:after  {
   right:15px;
 }
 #noVNC_controls ul {
diff --git a/app/styles/black.css b/app/styles/black.css
index 5c4558dc..7788f7d0 100644
--- a/app/styles/black.css
+++ b/app/styles/black.css
@@ -38,7 +38,7 @@
   background: linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
 }
 
-.triangle-right {
+.noVNC_panel {
   border:2px solid #fff;
   background:#000;
   color:#fff;
diff --git a/app/styles/blue.css b/app/styles/blue.css
index 4ab53bde..b986d9b2 100644
--- a/app/styles/blue.css
+++ b/app/styles/blue.css
@@ -52,7 +52,7 @@
   );
 }
 
-.triangle-right {
+.noVNC_panel {
   border:2px solid #fff;
   background:#04073d;
   color:#fff;
diff --git a/vnc.html b/vnc.html
index 5eb3af90..d5f45a3f 100644
--- a/vnc.html
+++ b/vnc.html
@@ -105,7 +105,7 @@
             <input type="image" alt="Shutdown/Reboot" src="app/images/power.png"
                 id="noVNC_toggleXvp_button" class="noVNC_status_button"
                 title="Shutdown/Reboot..." />
-            <div id="noVNC_xvp" class="triangle-right top">
+            <div id="noVNC_xvp" class="noVNC_panel">
                 <span id="noVNC_xvp_menu">
                     <input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
                     <input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
@@ -117,7 +117,7 @@
             <input type="image" alt="Clipboard" src="app/images/clipboard.png"
                 id="noVNC_clipboard_button" class="noVNC_status_button"
                 title="Clipboard" />
-            <div id="noVNC_clipboard" class="triangle-right top">
+            <div id="noVNC_clipboard" class="noVNC_panel">
                 <textarea id="noVNC_clipboard_text" rows=5>
                 </textarea>
                 <br />
@@ -134,7 +134,7 @@
             <input type="image" alt="Settings" src="app/images/settings.png"
                 id="noVNC_settings_button" class="noVNC_status_button"
                 title="Settings" />
-            <div id="noVNC_settings" class="triangle-right top">
+            <div id="noVNC_settings" class="noVNC_panel">
                 <span id="noVNC_settings_menu">
                     <ul>
                         <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
@@ -179,7 +179,7 @@
             <input type="image" alt="Disconnect" src="app/images/disconnect.png"
                 id="noVNC_disconnect_button" class="noVNC_status_button"
                 title="Disconnect" />
-            <div id="noVNC_controls" class="triangle-right top">
+            <div id="noVNC_controls" class="noVNC_panel">
                 <ul>
                     <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
                     <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>

From eeb395dc9161dcf5b1d9f08532a389fcb1cde80b Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Aug 2016 13:02:24 +0200
Subject: [PATCH 14/46] Remove unnecessary span:s

They were probably also incorrect to have around block elements
anyway.
---
 app/styles/base.css |  8 ++---
 vnc.html            | 76 +++++++++++++++++++++------------------------
 2 files changed, 38 insertions(+), 46 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index bceb4f5d..f438a49d 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -258,13 +258,9 @@ html {
   right: 20px;
   position: fixed;
 }
-#noVNC_settings_menu {
-  margin: 3px;
-  text-align: left;
-}
-#noVNC_settings_menu ul {
+#noVNC_settings ul {
   list-style: none;
-  margin: 0px;
+  margin: 3px;
   padding: 0px;
 }
 #noVNC_setting_path {
diff --git a/vnc.html b/vnc.html
index d5f45a3f..0521c4e1 100644
--- a/vnc.html
+++ b/vnc.html
@@ -106,11 +106,9 @@
                 id="noVNC_toggleXvp_button" class="noVNC_status_button"
                 title="Shutdown/Reboot..." />
             <div id="noVNC_xvp" class="noVNC_panel">
-                <span id="noVNC_xvp_menu">
-                    <input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
-                    <input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
-                    <input type="button" id="noVNC_xvpReset_button" value="Reset" />
-                </span>
+                <input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
+                <input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
+                <input type="button" id="noVNC_xvpReset_button" value="Reset" />
             </div>
 
             <!-- Clipboard -->
@@ -135,41 +133,39 @@
                 id="noVNC_settings_button" class="noVNC_status_button"
                 title="Settings" />
             <div id="noVNC_settings" class="noVNC_panel">
-                <span id="noVNC_settings_menu">
-                    <ul>
-                        <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
-                        <li><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</li>
-                        <li><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</li>
-                        <li><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</li>
-                        <li><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</li>
-                        <li><input id="noVNC_setting_view_only" type="checkbox" /> View Only</li>
-                        <hr>
-                        <li><input id="noVNC_setting_path" type="input" value="websockify" /> Path</li>
-                        <li><label>
-                                <select id="noVNC_setting_resize" name="vncResize">
-                                    <option value="off">None</option>
-                                    <option value="scale">Local Scaling</option>
-                                    <option value="downscale">Local Downscaling</option>
-                                    <option value="remote">Remote Resizing</option>
-                                </select> Scaling Mode</label>
-                        </li>
-                        <li><input id="noVNC_setting_repeaterID" type="input" value="" /> Repeater ID</li>
-                        <hr>
-                        <!-- Stylesheet selection dropdown -->
-                        <li><label><strong>Style: </strong>
-                                <select id="noVNC_setting_stylesheet" name="vncStyle">
-                                    <option value="default">default</option>
-                            </select></label>
-                        </li>
-                        <!-- Logging selection dropdown -->
-                        <li><label><strong>Logging: </strong>
-                                <select id="noVNC_setting_logging" name="vncLogging">
-                            </select></label>
-                        </li>
-                        <hr>
-                        <li><input type="button" id="noVNC_settings_apply" value="Apply" /></li>
-                    </ul>
-                </span>
+                <ul>
+                    <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
+                    <li><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</li>
+                    <li><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</li>
+                    <li><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</li>
+                    <li><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</li>
+                    <li><input id="noVNC_setting_view_only" type="checkbox" /> View Only</li>
+                    <hr>
+                    <li><input id="noVNC_setting_path" type="input" value="websockify" /> Path</li>
+                    <li><label>
+                            <select id="noVNC_setting_resize" name="vncResize">
+                                <option value="off">None</option>
+                                <option value="scale">Local Scaling</option>
+                                <option value="downscale">Local Downscaling</option>
+                                <option value="remote">Remote Resizing</option>
+                            </select> Scaling Mode</label>
+                    </li>
+                    <li><input id="noVNC_setting_repeaterID" type="input" value="" /> Repeater ID</li>
+                    <hr>
+                    <!-- Stylesheet selection dropdown -->
+                    <li><label><strong>Style: </strong>
+                            <select id="noVNC_setting_stylesheet" name="vncStyle">
+                                <option value="default">default</option>
+                        </select></label>
+                    </li>
+                    <!-- Logging selection dropdown -->
+                    <li><label><strong>Logging: </strong>
+                            <select id="noVNC_setting_logging" name="vncLogging">
+                        </select></label>
+                    </li>
+                    <hr>
+                    <li><input type="button" id="noVNC_settings_apply" value="Apply" /></li>
+                </ul>
             </div>
 
             <!-- Connection Controls -->

From 999f1d45db8008e82865b3706045220dbbf6cc91 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Aug 2016 13:21:33 +0200
Subject: [PATCH 15/46] Show/hide logo in updateVisualState()

We control the visibility of almost everything else in this function,
so move the logo handling there as well.
---
 app/ui.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index 0a94a0f8..214c6a1d 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -322,8 +322,6 @@ var UI;
                     klass = "noVNC_status_normal";
                     break;
                 case 'disconnected':
-                    document.getElementById('noVNC_logo').style.display = "block";
-                    document.getElementById('noVNC_screen').style.display = "none";
                     /* falls through */
                 case 'loaded':
                     klass = "noVNC_status_normal";
@@ -372,6 +370,8 @@ var UI;
             document.getElementById('noVNC_setting_repeaterID').disabled = connected;
 
             if (connected) {
+                document.getElementById('noVNC_logo').style.display = "none";
+                document.getElementById('noVNC_screen').style.display = "inline";
                 UI.updateViewClip();
                 UI.setMouseButton(1);
                 document.getElementById('noVNC_clipboard_button').style.display = "inline";
@@ -379,6 +379,8 @@ var UI;
                 document.getElementById('noVNC_extra_keys').style.display = "";
                 document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "inline";
             } else {
+                document.getElementById('noVNC_logo').style.display = "block";
+                document.getElementById('noVNC_screen').style.display = "none";
                 UI.hideMouseButton();
                 document.getElementById('noVNC_clipboard_button').style.display = "none";
                 document.getElementById('noVNC_keyboard_button').style.display = "none";
@@ -776,8 +778,6 @@ var UI;
 
             //Close dialog.
             setTimeout(UI.setBarPosition, 100);
-            document.getElementById('noVNC_logo').style.display = "none";
-            document.getElementById('noVNC_screen').style.display = "inline";
         },
 
         disconnect: function() {
@@ -787,9 +787,6 @@ var UI;
             // Restore the callback used for initial resize
             UI.rfb.set_onFBUComplete(UI.initialResize);
 
-            document.getElementById('noVNC_logo').style.display = "block";
-            document.getElementById('noVNC_screen').style.display = "none";
-
             // Don't display the connection settings until we're actually disconnected
         },
 

From 6cba147d4ead73457075bbd3ed7d63b84a96d3e3 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 17:32:57 +0200
Subject: [PATCH 16/46] Simplify modifier button display

---
 app/styles/base.css | 11 +++++++----
 app/ui.js           | 11 +++--------
 vnc.html            | 19 +++++++++++--------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index f438a49d..855c737a 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -2,6 +2,7 @@
  * noVNC base CSS
  * Copyright (C) 2012 Joel Martin
  * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2016 Pierre Ossman for Cendio AB
  * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
@@ -151,6 +152,9 @@ html {
 #noVNC_sendEsc_button {
   display: inline;
 }
+#noVNC_modifiers {
+  display: inline;
+}
 
 /* Left side buttons */
 .noVNC_buttons_left {
@@ -430,26 +434,25 @@ html {
   #noVNC_toggleExtraKeys_button {
     display: inline;
   }
-  #noVNC_toggleCtrl_button {
+  #noVNC_modifiers {
     display: none;
+  }
+  #noVNC_toggleCtrl_button {
     position: absolute;
     top: 30px;
     left: 0px;
   }
   #noVNC_toggleAlt_button {
-    display: none;
     position: absolute;
     top: 65px;
     left: 0px;
   }
   #noVNC_sendTab_button {
-    display: none;
     position: absolute;
     top: 100px;
     left: 0px;
   }
   #noVNC_sendEsc_button {
-    display: none;
     position: absolute;
     top: 135px;
     left: 0px;
diff --git a/app/ui.js b/app/ui.js
index 214c6a1d..ee114705 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -2,6 +2,7 @@
  * noVNC: HTML5 VNC client
  * Copyright (C) 2012 Joel Martin
  * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2016 Pierre Ossman for Cendio AB
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -1216,17 +1217,11 @@ var UI;
         toggleExtraKeys: function() {
             UI.keepKeyboard();
             if(UI.extraKeysVisible === false) {
-                document.getElementById('noVNC_toggleCtrl_button').style.display = "inline";
-                document.getElementById('noVNC_toggleAlt_button').style.display = "inline";
-                document.getElementById('noVNC_sendTab_button').style.display = "inline";
-                document.getElementById('noVNC_sendEsc_button').style.display = "inline";
+                document.getElementById('noVNC_modifiers').style.display = "inline";
                 document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button_selected";
                 UI.extraKeysVisible = true;
             } else if(UI.extraKeysVisible === true) {
-                document.getElementById('noVNC_toggleCtrl_button').style.display = "";
-                document.getElementById('noVNC_toggleAlt_button').style.display = "";
-                document.getElementById('noVNC_sendTab_button').style.display = "";
-                document.getElementById('noVNC_sendEsc_button').style.display = "";
+                document.getElementById('noVNC_modifiers').style.display = "";
                 document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button";
                 UI.extraKeysVisible = false;
             }
diff --git a/vnc.html b/vnc.html
index 0521c4e1..c7cad8fb 100644
--- a/vnc.html
+++ b/vnc.html
@@ -6,6 +6,7 @@
     noVNC example: simple example using default UI
     Copyright (C) 2012 Joel Martin
     Copyright (C) 2016 Samuel Mannehed for Cendio AB
+    Copyright (C) 2016 Pierre Ossman for Cendio AB
     noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 
@@ -81,14 +82,16 @@
                 <div id="noVNC_extra_keys">
                     <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.png"
                         id="noVNC_toggleExtraKeys_button" class="noVNC_status_button" />
-                    <input type="image" alt="Ctrl" src="app/images/ctrl.png"
-                        id="noVNC_toggleCtrl_button" class="noVNC_status_button" />
-                    <input type="image" alt="Alt" src="app/images/alt.png"
-                        id="noVNC_toggleAlt_button" class="noVNC_status_button" />
-                    <input type="image" alt="Tab" src="app/images/tab.png"
-                        id="noVNC_sendTab_button" class="noVNC_status_button" />
-                    <input type="image" alt="Esc" src="app/images/esc.png"
-                        id="noVNC_sendEsc_button" class="noVNC_status_button" />
+                    <div id="noVNC_modifiers">
+                        <input type="image" alt="Ctrl" src="app/images/ctrl.png"
+                            id="noVNC_toggleCtrl_button" class="noVNC_status_button" />
+                        <input type="image" alt="Alt" src="app/images/alt.png"
+                            id="noVNC_toggleAlt_button" class="noVNC_status_button" />
+                        <input type="image" alt="Tab" src="app/images/tab.png"
+                            id="noVNC_sendTab_button" class="noVNC_status_button" />
+                        <input type="image" alt="Esc" src="app/images/esc.png"
+                            id="noVNC_sendEsc_button" class="noVNC_status_button" />
+                    </div>
                 </div>
             </div>
         </div>

From e40978c7fcd5f9b2e4c07bd216cb225ba89a0691 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 14:22:44 +0200
Subject: [PATCH 17/46] Let CSS control what it means to be hidden/closed

This avoids hard-coding layout information in the JavaScript code.
It also opens up possibilities for more control in the CSS, e.g. for
animation.
---
 app/styles/base.css |  45 +++++++-------
 app/ui.js           | 142 ++++++++++++++++++++++++++++----------------
 vnc.html            |  10 ++--
 3 files changed, 121 insertions(+), 76 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 855c737a..4336375f 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -79,9 +79,13 @@ html {
 .noVNC_status_button:disabled {
   opacity: 0.4;
 }
+.noVNC_status_button.noVNC_hidden {
+  display: none;
+}
 
 /* Panels */
 .noVNC_panel {
+  display: none;
   position: relative;
   padding: 15px;
   color: #fff;
@@ -106,14 +110,15 @@ html {
   border-width: 40px 40px 0 0; /* vary these values to change the angle of the vertex */
   border-color: transparent #E0E0E0;
 }
-
-/* Drag/Pan button */
-#noVNC_view_drag_button {
-  display: none;
+.noVNC_panel.noVNC_open {
+  display: block;
 }
 
 /* noVNC Touch Device only buttons */
 #noVNC_mobile_buttons {
+  display: inline;
+}
+#noVNC_mobile_buttons.noVNC_hidden {
   display: none;
 }
 
@@ -140,6 +145,9 @@ html {
   margin: 0px;
   position: relative;
 }
+#noVNC_extra_keys.noVNC_hidden {
+  display: none;
+}
 #noVNC_toggleCtrl_button {
   display: inline;
 }
@@ -214,14 +222,8 @@ html {
   padding-right: 10px;
 }
 
-/* Send Ctrl+Alt+Delete */
-#noVNC_sendCtrlAltDel_button {
-  display: none;
-}
-
 /* XVP Shutdown/Reboot */
 #noVNC_xvp {
-  display: none;
   top: 73px;
   right: 30px;
   position: fixed;
@@ -235,7 +237,6 @@ html {
 
 /* Clipboard */
 #noVNC_clipboard {
-  display: none;
   top: 73px;
   right: 30px;
   position: fixed;
@@ -250,14 +251,8 @@ html {
   float: right;
 }
 
-/* Toggle fullscreen */
-#noVNC_fullscreen_button {
-  display: none;
-}
-
 /* Settings */
 #noVNC_settings {
-  display: none;
   top: 73px;
   right: 20px;
   position: fixed;
@@ -276,7 +271,6 @@ html {
 
 /* Connection Controls */
 #noVNC_controls {
-  display: none;
   top: 73px;
   right: 12px;
   position: fixed;
@@ -308,7 +302,6 @@ html {
 
 /* Popup Status */
 #noVNC_popup_status {
-  display: none;
   position: fixed;
   z-index: 1;
 
@@ -327,6 +320,9 @@ html {
   -moz-border-radius: 10px;
   border-radius: 10px;
 }
+#noVNC_popup_status.noVNC_hidden {
+  display: none;
+}
 
 /* ----------------------------------------
  * Main Area
@@ -344,7 +340,6 @@ html {
 
 /* HTML5 Canvas */
 #noVNC_screen {
-  display: none;
   position: absolute;
   margin: 0px;
   padding: 0px;
@@ -355,6 +350,9 @@ html {
   width: auto;
   height: auto;
 }
+#noVNC_screen.noVNC_hidden {
+  display: none;
+}
 
 /* Do not set width/height for VNC_canvas or incorrect
  * scaling will occur. Canvas size depends on remote VNC
@@ -392,7 +390,9 @@ html {
       -1px 1px 0 #000,
        1px 1px 0 #000;
 }
-
+#noVNC_logo.noVNC_hidden {
+  display: none;
+}
 
 #noVNC_logo span{
   color:green;
@@ -437,6 +437,9 @@ html {
   #noVNC_modifiers {
     display: none;
   }
+  #noVNC_modifiers.noVNC_open {
+    display: inline;
+  }
   #noVNC_toggleCtrl_button {
     position: absolute;
     top: 30px;
diff --git a/app/ui.js b/app/ui.js
index ee114705..a9a36b50 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -76,7 +76,8 @@ var UI;
             // Show mouse selector buttons on touch screen devices
             if (UI.isTouchDevice) {
                 // Show mobile buttons
-                document.getElementById('noVNC_mobile_buttons').style.display = "inline";
+                document.getElementById('noVNC_mobile_buttons')
+                    .classList.remove("noVNC_hidden");
                 UI.hideMouseButton();
                 // Remove the address bar
                 setTimeout(function() { window.scrollTo(0, 1); }, 100);
@@ -187,7 +188,8 @@ var UI;
                  document.documentElement.mozRequestFullScreen ||
                  document.documentElement.webkitRequestFullscreen ||
                  document.body.msRequestFullscreen)) {
-                document.getElementById('noVNC_fullscreen_button').style.display = "inline";
+                document.getElementById('noVNC_fullscreen_button')
+                    .classList.remove("noVNC_hidden");
                 UI.addFullscreenHandlers();
             }
         },
@@ -371,22 +373,34 @@ var UI;
             document.getElementById('noVNC_setting_repeaterID').disabled = connected;
 
             if (connected) {
-                document.getElementById('noVNC_logo').style.display = "none";
-                document.getElementById('noVNC_screen').style.display = "inline";
+                document.getElementById('noVNC_logo')
+                    .classList.add("noVNC_hidden");
+                document.getElementById('noVNC_screen')
+                    .classList.remove("noVNC_hidden");
                 UI.updateViewClip();
                 UI.setMouseButton(1);
-                document.getElementById('noVNC_clipboard_button').style.display = "inline";
-                document.getElementById('noVNC_keyboard_button').style.display = "inline";
-                document.getElementById('noVNC_extra_keys').style.display = "";
-                document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "inline";
+                document.getElementById('noVNC_clipboard_button')
+                    .classList.remove("noVNC_hidden");
+                document.getElementById('noVNC_keyboard_button')
+                    .classList.remove("noVNC_hidden");
+                document.getElementById('noVNC_extra_keys')
+                    .classList.remove("noVNC_hidden");
+                document.getElementById('noVNC_sendCtrlAltDel_button')
+                    .classList.remove("noVNC_hidden");
             } else {
-                document.getElementById('noVNC_logo').style.display = "block";
-                document.getElementById('noVNC_screen').style.display = "none";
+                document.getElementById('noVNC_logo')
+                    .classList.remove("noVNC_hidden");
+                document.getElementById('noVNC_screen')
+                    .classList.add("noVNC_hidden");
                 UI.hideMouseButton();
-                document.getElementById('noVNC_clipboard_button').style.display = "none";
-                document.getElementById('noVNC_keyboard_button').style.display = "none";
-                document.getElementById('noVNC_extra_keys').style.display = "none";
-                document.getElementById('noVNC_sendCtrlAltDel_button').style.display = "none";
+                document.getElementById('noVNC_clipboard_button')
+                    .classList.add("noVNC_hidden");
+                document.getElementById('noVNC_keyboard_button')
+                    .classList.add("noVNC_hidden");
+                document.getElementById('noVNC_extra_keys')
+                    .classList.add("noVNC_hidden");
+                document.getElementById('noVNC_sendCtrlAltDel_button')
+                    .classList.add("noVNC_hidden");
                 UI.updateXvpButton(0);
             }
 
@@ -398,18 +412,24 @@ var UI;
                 case 'fatal':
                 case 'failed':
                 case 'disconnected':
-                    document.getElementById('noVNC_connectPanel_button').style.display = "";
-                    document.getElementById('noVNC_disconnect_button').style.display = "none";
+                    document.getElementById('noVNC_connectPanel_button')
+                        .classList.remove("noVNC_hidden");
+                    document.getElementById('noVNC_disconnect_button')
+                        .classList.add("noVNC_hidden");
                     UI.connSettingsOpen = false;
                     UI.toggleConnectPanel();
                     break;
                 case 'loaded':
-                    document.getElementById('noVNC_connectPanel_button').style.display = "";
-                    document.getElementById('noVNC_disconnect_button').style.display = "none";
+                    document.getElementById('noVNC_connectPanel_button')
+                        .classList.remove("noVNC_hidden");
+                    document.getElementById('noVNC_disconnect_button')
+                        .classList.add("noVNC_hidden");
                     break;
                 default:
-                    document.getElementById('noVNC_connectPanel_button').style.display = "none";
-                    document.getElementById('noVNC_disconnect_button').style.display = "";
+                    document.getElementById('noVNC_connectPanel_button')
+                        .classList.add("noVNC_hidden");
+                    document.getElementById('noVNC_disconnect_button')
+                        .classList.remove("noVNC_hidden");
                     break;
             }
 
@@ -426,7 +446,7 @@ var UI;
             } else {
                 psp.innerHTML = document.getElementById('noVNC_status').innerHTML;
             }
-            psp.style.display = "block";
+            psp.classList.remove("noVNC_hidden");
             psp.style.left = window.innerWidth/2 -
                 parseInt(window.getComputedStyle(psp).width)/2 -30 + "px";
 
@@ -436,7 +456,7 @@ var UI;
 
         closePopup: function() {
             clearTimeout(UI.popupStatusTimeout);
-            document.getElementById('noVNC_popup_status').style.display = "none";
+            document.getElementById('noVNC_popup_status').classList.add("noVNC_hidden");
         },
 
 /* ------^-------
@@ -569,15 +589,19 @@ var UI;
             if (UI.xvpOpen === true) {
                 UI.toggleXvpPanel();
             }
-            document.getElementById('noVNC_settings').style.display = "block";
-            document.getElementById('noVNC_settings_button').className = "noVNC_status_button_selected";
+            document.getElementById('noVNC_settings')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_settings_button')
+                .className = "noVNC_status_button_selected";
             UI.settingsOpen = true;
         },
 
         // Close menu (without applying settings)
         closeSettingsMenu: function() {
-            document.getElementById('noVNC_settings').style.display = "none";
-            document.getElementById('noVNC_settings_button').className = "noVNC_status_button";
+            document.getElementById('noVNC_settings')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_settings_button')
+                .className = "noVNC_status_button";
             UI.settingsOpen = false;
         },
 
@@ -633,12 +657,16 @@ var UI;
             }
             // Toggle XVP panel
             if (UI.xvpOpen === true) {
-                document.getElementById('noVNC_xvp').style.display = "none";
-                document.getElementById('noVNC_toggleXvp_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_xvp')
+                    .classList.remove("noVNC_open");
+                document.getElementById('noVNC_toggleXvp_button')
+                    .className = "noVNC_status_button";
                 UI.xvpOpen = false;
             } else {
-                document.getElementById('noVNC_xvp').style.display = "block";
-                document.getElementById('noVNC_toggleXvp_button').className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_xvp')
+                    .classList.add("noVNC_open");
+                document.getElementById('noVNC_toggleXvp_button')
+                    .className = "noVNC_status_button_selected";
                 UI.xvpOpen = true;
             }
         },
@@ -646,9 +674,11 @@ var UI;
         // Disable/enable XVP button
         updateXvpButton: function(ver) {
             if (ver >= 1) {
-                document.getElementById('noVNC_toggleXvp_button').style.display = 'inline';
+                document.getElementById('noVNC_toggleXvp_button')
+                    .classList.remove("noVNC_hidden");
             } else {
-                document.getElementById('noVNC_toggleXvp_button').style.display = 'none';
+                document.getElementById('noVNC_toggleXvp_button')
+                    .classList.add("noVNC_hidden");
                 // Close XVP panel if open
                 if (UI.xvpOpen === true) {
                     UI.toggleXvpPanel();
@@ -679,12 +709,16 @@ var UI;
             }
             // Toggle Clipboard Panel
             if (UI.clipboardOpen === true) {
-                document.getElementById('noVNC_clipboard').style.display = "none";
-                document.getElementById('noVNC_clipboard_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_clipboard')
+                    .classList.remove("noVNC_open");
+                document.getElementById('noVNC_clipboard_button')
+                    .className = "noVNC_status_button";
                 UI.clipboardOpen = false;
             } else {
-                document.getElementById('noVNC_clipboard').style.display = "block";
-                document.getElementById('noVNC_clipboard_button').className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_clipboard')
+                    .classList.add("noVNC_open");
+                document.getElementById('noVNC_clipboard_button')
+                    .className = "noVNC_status_button_selected";
                 UI.clipboardOpen = true;
             }
         },
@@ -732,16 +766,20 @@ var UI;
 
             // Toggle Connection Panel
             if (UI.connSettingsOpen === true) {
-                document.getElementById('noVNC_controls').style.display = "none";
-                document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_controls')
+                    .classList.remove("noVNC_open");
+                document.getElementById('noVNC_connectPanel_button')
+                    .className = "noVNC_status_button";
                 UI.connSettingsOpen = false;
                 UI.saveSetting('host');
                 UI.saveSetting('port');
                 UI.saveSetting('token');
                 //UI.saveSetting('password');
             } else {
-                document.getElementById('noVNC_controls').style.display = "block";
-                document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_controls')
+                    .classList.add("noVNC_open");
+                document.getElementById('noVNC_connectPanel_button')
+                    .className = "noVNC_status_button_selected";
                 UI.connSettingsOpen = true;
                 document.getElementById('noVNC_setting_host').focus();
             }
@@ -1054,7 +1092,7 @@ var UI;
 
             if (UI.rfb_state !== 'normal') {
                 // Always hide when not connected
-                viewDragButton.style.display = "none";
+                viewDragButton.classList.add("noVNC_hidden");
             } else {
                 if (!clipping &&
                     UI.rfb.get_viewportDrag()) {
@@ -1073,7 +1111,7 @@ var UI;
                 // Different behaviour for touch vs non-touch
                 // The button is disabled instead of hidden on touch devices
                 if (UI.isTouchDevice) {
-                    viewDragButton.style.display = "inline";
+                    viewDragButton.classList.remove("noVNC_hidden");
 
                     if (clipping) {
                         viewDragButton.disabled = false;
@@ -1084,9 +1122,9 @@ var UI;
                     viewDragButton.disabled = false;
 
                     if (clipping) {
-                        viewDragButton.style.display = "inline";
+                        viewDragButton.classList.remove("noVNC_hidden");
                     } else {
-                        viewDragButton.style.display = "none";
+                        viewDragButton.classList.add("noVNC_hidden");
                     }
                 }
             }
@@ -1217,12 +1255,16 @@ var UI;
         toggleExtraKeys: function() {
             UI.keepKeyboard();
             if(UI.extraKeysVisible === false) {
-                document.getElementById('noVNC_modifiers').style.display = "inline";
-                document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_modifiers')
+                    .classList.add("noVNC_open");
+                document.getElementById('noVNC_toggleExtraKeys_button')
+                    .className = "noVNC_status_button_selected";
                 UI.extraKeysVisible = true;
             } else if(UI.extraKeysVisible === true) {
-                document.getElementById('noVNC_modifiers').style.display = "";
-                document.getElementById('noVNC_toggleExtraKeys_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_modifiers')
+                    .classList.remove("noVNC_open");
+                document.getElementById('noVNC_toggleExtraKeys_button')
+                    .className = "noVNC_status_button";
                 UI.extraKeysVisible = false;
             }
         },
@@ -1286,9 +1328,9 @@ var UI;
             for (var b = 0; b < blist.length; b++) {
                 var button = document.getElementById('noVNC_mouse_button' + blist[b]);
                 if (blist[b] === num) {
-                    button.style.display = "";
+                    button.classList.remove("noVNC_hidden");
                 } else {
-                    button.style.display = "none";
+                    button.classList.add("noVNC_hidden");
                 }
             }
         },
diff --git a/vnc.html b/vnc.html
index c7cad8fb..b4d0a373 100644
--- a/vnc.html
+++ b/vnc.html
@@ -56,11 +56,11 @@
 
             <!-- Drag/Pan the viewport -->
             <input type="image" alt="viewport drag" src="app/images/drag.png"
-                id="noVNC_view_drag_button" class="noVNC_status_button"
+                id="noVNC_view_drag_button" class="noVNC_status_button noVNC_hidden"
                 title="Move/Drag Viewport" />
 
             <!--noVNC Touch Device only buttons-->
-            <div id="noVNC_mobile_buttons">
+            <div id="noVNC_mobile_buttons" class="noVNC_hidden">
                 <input type="image" alt="No mousebutton" src="app/images/mouse_none.png"
                     id="noVNC_mouse_button0" class="noVNC_status_button" />
                 <input type="image" alt="Left mousebutton" src="app/images/mouse_left.png"
@@ -128,7 +128,7 @@
 
             <!-- Toggle fullscreen -->
             <input type="image" alt="Fullscreen" src="app/images/fullscreen.png"
-                id="noVNC_fullscreen_button" class="noVNC_status_button"
+                id="noVNC_fullscreen_button" class="noVNC_status_button noVNC_hidden"
                 title="Fullscreen" />
 
             <!-- Settings -->
@@ -190,7 +190,7 @@
         </div>
 
         <!-- Popup Status -->
-        <div id="noVNC_popup_status" class="">
+        <div id="noVNC_popup_status" class="noVNC_hidden">
         </div>
 
     </div> <!-- End of noVNC_control_bar -->
@@ -199,7 +199,7 @@
         <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
 
         <!-- HTML5 Canvas -->
-        <div id="noVNC_screen">
+        <div id="noVNC_screen" class="noVNC_hidden">
             <canvas id="noVNC_canvas" width="0" height="0">
                         Canvas not supported.
             </canvas>

From a49d92984608959620dc9c35d3c4739a0929715d Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Aug 2016 14:41:53 +0200
Subject: [PATCH 18/46] Harmonise CSS names

Follow the same naming convention for all CSS ids and classes.
---
 app/styles/base.css  |  40 ++++++++--------
 app/styles/black.css |   4 +-
 app/ui.js            | 110 +++++++++++++++++++++++--------------------
 vnc.html             |  44 ++++++++---------
 4 files changed, 104 insertions(+), 94 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 4336375f..d1d83a3b 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -42,7 +42,7 @@ html {
 }
 
 /* General button style */
-.noVNC_status_button {
+.noVNC_button {
   padding: 4px 4px;
   vertical-align: middle;
   border:1px solid #869dbc;
@@ -60,7 +60,7 @@ html {
   /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
   font-size: 12px;
 }
-.noVNC_status_button_selected {
+.noVNC_button_selected {
   padding: 4px 4px;
   vertical-align: middle;
   border:1px solid #4366a9;
@@ -76,10 +76,10 @@ html {
   background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
 }
-.noVNC_status_button:disabled {
+.noVNC_button:disabled {
   opacity: 0.4;
 }
-.noVNC_status_button.noVNC_hidden {
+.noVNC_button.noVNC_hidden {
   display: none;
 }
 
@@ -134,7 +134,7 @@ html {
   ime-mode: disabled;
 }
 
-#noVNC_toggleExtraKeys_button {
+#noVNC_toggle_extra_keys_button {
   display: none;
 }
 
@@ -148,16 +148,16 @@ html {
 #noVNC_extra_keys.noVNC_hidden {
   display: none;
 }
-#noVNC_toggleCtrl_button {
+#noVNC_toggle_ctrl_button {
   display: inline;
 }
-#noVNC_toggleAlt_button {
+#noVNC_toggle_alt_button {
   display: inline;
 }
-#noVNC_sendTab_button {
+#noVNC_send_tab_button {
   display: inline;
 }
-#noVNC_sendEsc_button {
+#noVNC_send_esc_button {
   display: inline;
 }
 #noVNC_modifiers {
@@ -270,20 +270,20 @@ html {
 }
 
 /* Connection Controls */
-#noVNC_controls {
+#noVNC_connect_controls {
   top: 73px;
   right: 12px;
   position: fixed;
 }
-#noVNC_controls:after  {
+#noVNC_connect_controls:after  {
   right:15px;
 }
-#noVNC_controls ul {
+#noVNC_connect_controls ul {
   list-style: none;
   margin: 0px;
   padding: 0px;
 }
-#noVNC_controls li {
+#noVNC_connect_controls li {
   padding-bottom:8px;
 }
 #noVNC_setting_host {
@@ -421,7 +421,7 @@ html {
   #noVNC_logo {
     font-size: 150px;
   }
-  .noVNC_status_button {
+  .noVNC_button {
     font-size: 10px;
   }
   .noVNC_buttons_left {
@@ -431,7 +431,7 @@ html {
     padding-right: 0px;
   }
   /* collapse the extra keys on lower resolutions */
-  #noVNC_toggleExtraKeys_button {
+  #noVNC_toggle_extra_keys_button {
     display: inline;
   }
   #noVNC_modifiers {
@@ -440,22 +440,22 @@ html {
   #noVNC_modifiers.noVNC_open {
     display: inline;
   }
-  #noVNC_toggleCtrl_button {
+  #noVNC_toggle_ctrl_button {
     position: absolute;
     top: 30px;
     left: 0px;
   }
-  #noVNC_toggleAlt_button {
+  #noVNC_toggle_alt_button {
     position: absolute;
     top: 65px;
     left: 0px;
   }
-  #noVNC_sendTab_button {
+  #noVNC_send_tab_button {
     position: absolute;
     top: 100px;
     left: 0px;
   }
-  #noVNC_sendEsc_button {
+  #noVNC_send_esc_button {
     position: absolute;
     top: 135px;
     left: 0px;
@@ -472,7 +472,7 @@ html {
 }
 
 @media screen and (max-width: 320px) {
-  .noVNC_status_button {
+  .noVNC_button {
     font-size: 9px;
   }
   #noVNC_clipboard_text {
diff --git a/app/styles/black.css b/app/styles/black.css
index 7788f7d0..9a3d5d2e 100644
--- a/app/styles/black.css
+++ b/app/styles/black.css
@@ -44,7 +44,7 @@
   color:#fff;
 }
 
-.noVNC_status_button {
+.noVNC_button {
   font-size: 12px;
   vertical-align: middle;
   border:1px solid #4c4c4c;
@@ -59,7 +59,7 @@
   background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
 }
 
-.noVNC_status_button_selected {
+.noVNC_button_selected {
   background: #9dd53a; /* Old browsers */
   background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
diff --git a/app/ui.js b/app/ui.js
index a9a36b50..907e41da 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -197,7 +197,7 @@ var UI;
         addControlbarHandlers: function() {
             document.getElementById("noVNC_view_drag_button")
                 .addEventListener('click', UI.toggleViewDrag);
-            document.getElementById("noVNC_sendCtrlAltDel_button")
+            document.getElementById("noVNC_send_ctrl_alt_del_button")
                 .addEventListener('click', UI.sendCtrlAltDel);
             document.getElementById("noVNC_status")
                 .addEventListener('click', UI.popupStatus);
@@ -226,31 +226,31 @@ var UI;
 
             window.addEventListener('load', UI.keyboardinputReset);
 
-            document.getElementById("noVNC_toggleExtraKeys_button")
+            document.getElementById("noVNC_toggle_extra_keys_button")
                 .addEventListener('click', UI.toggleExtraKeys);
-            document.getElementById("noVNC_toggleCtrl_button")
+            document.getElementById("noVNC_toggle_ctrl_button")
                 .addEventListener('click', UI.toggleCtrl);
-            document.getElementById("noVNC_toggleAlt_button")
+            document.getElementById("noVNC_toggle_alt_button")
                 .addEventListener('click', UI.toggleAlt);
-            document.getElementById("noVNC_sendTab_button")
+            document.getElementById("noVNC_send_tab_button")
                 .addEventListener('click', UI.sendTab);
-            document.getElementById("noVNC_sendEsc_button")
+            document.getElementById("noVNC_send_esc_button")
                 .addEventListener('click', UI.sendEsc);
         },
 
         addXvpHandlers: function() {
-            document.getElementById("noVNC_xvpShutdown_button")
+            document.getElementById("noVNC_xvp_shutdown_button")
                 .addEventListener('click', function() { UI.rfb.xvpShutdown(); });
-            document.getElementById("noVNC_xvpReboot_button")
+            document.getElementById("noVNC_xvp_reboot_button")
                 .addEventListener('click', function() { UI.rfb.xvpReboot(); });
-            document.getElementById("noVNC_xvpReset_button")
+            document.getElementById("noVNC_xvp_reset_button")
                 .addEventListener('click', function() { UI.rfb.xvpReset(); });
-            document.getElementById("noVNC_toggleXvp_button")
+            document.getElementById("noVNC_xvp_button")
                 .addEventListener('click', UI.toggleXvpPanel);
         },
 
         addConnectionControlHandlers: function() {
-            document.getElementById("noVNC_connectPanel_button")
+            document.getElementById("noVNC_connect_controls_button")
                 .addEventListener('click', UI.toggleConnectPanel);
             document.getElementById("noVNC_disconnect_button")
                 .addEventListener('click', UI.disconnect);
@@ -385,7 +385,7 @@ var UI;
                     .classList.remove("noVNC_hidden");
                 document.getElementById('noVNC_extra_keys')
                     .classList.remove("noVNC_hidden");
-                document.getElementById('noVNC_sendCtrlAltDel_button')
+                document.getElementById('noVNC_send_ctrl_alt_del_button')
                     .classList.remove("noVNC_hidden");
             } else {
                 document.getElementById('noVNC_logo')
@@ -399,7 +399,7 @@ var UI;
                     .classList.add("noVNC_hidden");
                 document.getElementById('noVNC_extra_keys')
                     .classList.add("noVNC_hidden");
-                document.getElementById('noVNC_sendCtrlAltDel_button')
+                document.getElementById('noVNC_send_ctrl_alt_del_button')
                     .classList.add("noVNC_hidden");
                 UI.updateXvpButton(0);
             }
@@ -412,7 +412,7 @@ var UI;
                 case 'fatal':
                 case 'failed':
                 case 'disconnected':
-                    document.getElementById('noVNC_connectPanel_button')
+                    document.getElementById('noVNC_connect_controls_button')
                         .classList.remove("noVNC_hidden");
                     document.getElementById('noVNC_disconnect_button')
                         .classList.add("noVNC_hidden");
@@ -420,13 +420,13 @@ var UI;
                     UI.toggleConnectPanel();
                     break;
                 case 'loaded':
-                    document.getElementById('noVNC_connectPanel_button')
+                    document.getElementById('noVNC_connect_controls_button')
                         .classList.remove("noVNC_hidden");
                     document.getElementById('noVNC_disconnect_button')
                         .classList.add("noVNC_hidden");
                     break;
                 default:
-                    document.getElementById('noVNC_connectPanel_button')
+                    document.getElementById('noVNC_connect_controls_button')
                         .classList.add("noVNC_hidden");
                     document.getElementById('noVNC_disconnect_button')
                         .classList.remove("noVNC_hidden");
@@ -592,7 +592,7 @@ var UI;
             document.getElementById('noVNC_settings')
                 .classList.add("noVNC_open");
             document.getElementById('noVNC_settings_button')
-                .className = "noVNC_status_button_selected";
+                .className = "noVNC_button_selected";
             UI.settingsOpen = true;
         },
 
@@ -601,7 +601,7 @@ var UI;
             document.getElementById('noVNC_settings')
                 .classList.remove("noVNC_open");
             document.getElementById('noVNC_settings_button')
-                .className = "noVNC_status_button";
+                .className = "noVNC_button";
             UI.settingsOpen = false;
         },
 
@@ -659,14 +659,14 @@ var UI;
             if (UI.xvpOpen === true) {
                 document.getElementById('noVNC_xvp')
                     .classList.remove("noVNC_open");
-                document.getElementById('noVNC_toggleXvp_button')
-                    .className = "noVNC_status_button";
+                document.getElementById('noVNC_xvp_button')
+                    .className = "noVNC_button";
                 UI.xvpOpen = false;
             } else {
                 document.getElementById('noVNC_xvp')
                     .classList.add("noVNC_open");
-                document.getElementById('noVNC_toggleXvp_button')
-                    .className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_xvp_button')
+                    .className = "noVNC_button_selected";
                 UI.xvpOpen = true;
             }
         },
@@ -674,10 +674,10 @@ var UI;
         // Disable/enable XVP button
         updateXvpButton: function(ver) {
             if (ver >= 1) {
-                document.getElementById('noVNC_toggleXvp_button')
+                document.getElementById('noVNC_xvp_button')
                     .classList.remove("noVNC_hidden");
             } else {
-                document.getElementById('noVNC_toggleXvp_button')
+                document.getElementById('noVNC_xvp_button')
                     .classList.add("noVNC_hidden");
                 // Close XVP panel if open
                 if (UI.xvpOpen === true) {
@@ -712,13 +712,13 @@ var UI;
                 document.getElementById('noVNC_clipboard')
                     .classList.remove("noVNC_open");
                 document.getElementById('noVNC_clipboard_button')
-                    .className = "noVNC_status_button";
+                    .className = "noVNC_button";
                 UI.clipboardOpen = false;
             } else {
                 document.getElementById('noVNC_clipboard')
                     .classList.add("noVNC_open");
                 document.getElementById('noVNC_clipboard_button')
-                    .className = "noVNC_status_button_selected";
+                    .className = "noVNC_button_selected";
                 UI.clipboardOpen = true;
             }
         },
@@ -753,7 +753,8 @@ var UI;
             if (UI.settingsOpen === true) {
                 UI.settingsApply();
                 UI.closeSettingsMenu();
-                document.getElementById('noVNC_connectPanel_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_connect_controls_button')
+                    .className = "noVNC_button";
             }
             // Close clipboard panel if open
             if (UI.clipboardOpen === true) {
@@ -766,20 +767,20 @@ var UI;
 
             // Toggle Connection Panel
             if (UI.connSettingsOpen === true) {
-                document.getElementById('noVNC_controls')
+                document.getElementById('noVNC_connect_controls')
                     .classList.remove("noVNC_open");
-                document.getElementById('noVNC_connectPanel_button')
-                    .className = "noVNC_status_button";
+                document.getElementById('noVNC_connect_controls_button')
+                    .className = "noVNC_button";
                 UI.connSettingsOpen = false;
                 UI.saveSetting('host');
                 UI.saveSetting('port');
                 UI.saveSetting('token');
                 //UI.saveSetting('password');
             } else {
-                document.getElementById('noVNC_controls')
+                document.getElementById('noVNC_connect_controls')
                     .classList.add("noVNC_open");
-                document.getElementById('noVNC_connectPanel_button')
-                    .className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_connect_controls_button')
+                    .className = "noVNC_button_selected";
                 UI.connSettingsOpen = true;
                 document.getElementById('noVNC_setting_host').focus();
             }
@@ -879,9 +880,11 @@ var UI;
                 document.mozFullScreenElement || // currently working methods
                 document.webkitFullscreenElement ||
                 document.msFullscreenElement ) {
-                document.getElementById('noVNC_fullscreen_button').className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_fullscreen_button')
+                    .className = "noVNC_button_selected";
             } else {
-                document.getElementById('noVNC_fullscreen_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_fullscreen_button')
+                    .className = "noVNC_button";
             }
         },
 
@@ -1103,9 +1106,9 @@ var UI;
                 }
 
                 if (UI.rfb.get_viewportDrag()) {
-                    viewDragButton.className = "noVNC_status_button_selected";
+                    viewDragButton.className = "noVNC_button_selected";
                 } else {
-                    viewDragButton.className = "noVNC_status_button";
+                    viewDragButton.className = "noVNC_button";
                 }
 
                 // Different behaviour for touch vs non-touch
@@ -1146,16 +1149,17 @@ var UI;
                 try { kbi.setSelectionRange(l, l); } // Move the caret to the end
                 catch (err) {} // setSelectionRange is undefined in Google Chrome
                 UI.keyboardVisible = true;
-                skb.className = "noVNC_status_button_selected";
+                skb.className = "noVNC_button_selected";
             } else if(UI.keyboardVisible === true) {
                 kbi.blur();
-                skb.className = "noVNC_status_button";
+                skb.className = "noVNC_button";
                 UI.keyboardVisible = false;
             }
         },
 
         hideKeyboard: function() {
-            document.getElementById('noVNC_keyboard_button').className = "noVNC_status_button";
+            document.getElementById('noVNC_keyboard_button')
+                .className = "noVNC_button";
             //Weird bug in iOS if you change keyboardVisible
             //here it does not actually occur so next time
             //you click keyboard icon it doesnt work.
@@ -1168,10 +1172,12 @@ var UI;
             clearTimeout(UI.hideKeyboardTimeout);
             if(UI.keyboardVisible === true) {
                 document.getElementById('noVNC_keyboardinput').focus();
-                document.getElementById('noVNC_keyboard_button').className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_keyboard_button')
+                    .className = "noVNC_button_selected";
             } else if(UI.keyboardVisible === false) {
                 document.getElementById('noVNC_keyboardinput').blur();
-                document.getElementById('noVNC_keyboard_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_keyboard_button')
+                    .className = "noVNC_button";
             }
         },
 
@@ -1257,14 +1263,14 @@ var UI;
             if(UI.extraKeysVisible === false) {
                 document.getElementById('noVNC_modifiers')
                     .classList.add("noVNC_open");
-                document.getElementById('noVNC_toggleExtraKeys_button')
-                    .className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_toggle_extra_keys_button')
+                    .className = "noVNC_button_selected";
                 UI.extraKeysVisible = true;
             } else if(UI.extraKeysVisible === true) {
                 document.getElementById('noVNC_modifiers')
                     .classList.remove("noVNC_open");
-                document.getElementById('noVNC_toggleExtraKeys_button')
-                    .className = "noVNC_status_button";
+                document.getElementById('noVNC_toggle_extra_keys_button')
+                    .className = "noVNC_button";
                 UI.extraKeysVisible = false;
             }
         },
@@ -1283,11 +1289,13 @@ var UI;
             UI.keepKeyboard();
             if(UI.ctrlOn === false) {
                 UI.rfb.sendKey(KeyTable.XK_Control_L, true);
-                document.getElementById('noVNC_toggleCtrl_button').className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_toggle_ctrl_button')
+                    .className = "noVNC_button_selected";
                 UI.ctrlOn = true;
             } else if(UI.ctrlOn === true) {
                 UI.rfb.sendKey(KeyTable.XK_Control_L, false);
-                document.getElementById('noVNC_toggleCtrl_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_toggle_ctrl_button')
+                    .className = "noVNC_button";
                 UI.ctrlOn = false;
             }
         },
@@ -1296,11 +1304,13 @@ var UI;
             UI.keepKeyboard();
             if(UI.altOn === false) {
                 UI.rfb.sendKey(KeyTable.XK_Alt_L, true);
-                document.getElementById('noVNC_toggleAlt_button').className = "noVNC_status_button_selected";
+                document.getElementById('noVNC_toggle_alt_button')
+                    .className = "noVNC_button_selected";
                 UI.altOn = true;
             } else if(UI.altOn === true) {
                 UI.rfb.sendKey(KeyTable.XK_Alt_L, false);
-                document.getElementById('noVNC_toggleAlt_button').className = "noVNC_status_button";
+                document.getElementById('noVNC_toggle_alt_button')
+                    .className = "noVNC_button";
                 UI.altOn = false;
             }
         },
diff --git a/vnc.html b/vnc.html
index b4d0a373..9d9fcaf3 100644
--- a/vnc.html
+++ b/vnc.html
@@ -56,21 +56,21 @@
 
             <!-- Drag/Pan the viewport -->
             <input type="image" alt="viewport drag" src="app/images/drag.png"
-                id="noVNC_view_drag_button" class="noVNC_status_button noVNC_hidden"
+                id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
                 title="Move/Drag Viewport" />
 
             <!--noVNC Touch Device only buttons-->
             <div id="noVNC_mobile_buttons" class="noVNC_hidden">
                 <input type="image" alt="No mousebutton" src="app/images/mouse_none.png"
-                    id="noVNC_mouse_button0" class="noVNC_status_button" />
+                    id="noVNC_mouse_button0" class="noVNC_button" />
                 <input type="image" alt="Left mousebutton" src="app/images/mouse_left.png"
-                    id="noVNC_mouse_button1" class="noVNC_status_button" />
+                    id="noVNC_mouse_button1" class="noVNC_button" />
                 <input type="image" alt="Middle mousebutton" src="app/images/mouse_middle.png"
-                    id="noVNC_mouse_button2" class="noVNC_status_button" />
+                    id="noVNC_mouse_button2" class="noVNC_button" />
                 <input type="image" alt="Right mousebutton" src="app/images/mouse_right.png"
-                    id="noVNC_mouse_button4" class="noVNC_status_button" />
+                    id="noVNC_mouse_button4" class="noVNC_button" />
                 <input type="image" alt="Keyboard" src="app/images/keyboard.png"
-                    id="noVNC_keyboard_button" class="noVNC_status_button"
+                    id="noVNC_keyboard_button" class="noVNC_button"
                     value="Keyboard" title="Show Keyboard" />
                 <!-- Note that Google Chrome on Android doesn't respect any of these,
                      html attributes which attempt to disable text suggestions on the
@@ -81,16 +81,16 @@
                     mozactionhint="Enter"></textarea>
                 <div id="noVNC_extra_keys">
                     <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.png"
-                        id="noVNC_toggleExtraKeys_button" class="noVNC_status_button" />
+                        id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
                     <div id="noVNC_modifiers">
                         <input type="image" alt="Ctrl" src="app/images/ctrl.png"
-                            id="noVNC_toggleCtrl_button" class="noVNC_status_button" />
+                            id="noVNC_toggle_ctrl_button" class="noVNC_button" />
                         <input type="image" alt="Alt" src="app/images/alt.png"
-                            id="noVNC_toggleAlt_button" class="noVNC_status_button" />
+                            id="noVNC_toggle_alt_button" class="noVNC_button" />
                         <input type="image" alt="Tab" src="app/images/tab.png"
-                            id="noVNC_sendTab_button" class="noVNC_status_button" />
+                            id="noVNC_send_tab_button" class="noVNC_button" />
                         <input type="image" alt="Esc" src="app/images/esc.png"
-                            id="noVNC_sendEsc_button" class="noVNC_status_button" />
+                            id="noVNC_send_esc_button" class="noVNC_button" />
                     </div>
                 </div>
             </div>
@@ -101,22 +101,22 @@
         <div class="noVNC_buttons_right">
             <!-- Send Ctrl+Alt+Delete -->
             <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
-                id="noVNC_sendCtrlAltDel_button" class="noVNC_status_button"
+                id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
                 title="Send Ctrl-Alt-Del" />
 
             <!-- XVP Shutdown/Reboot -->
             <input type="image" alt="Shutdown/Reboot" src="app/images/power.png"
-                id="noVNC_toggleXvp_button" class="noVNC_status_button"
+                id="noVNC_xvp_button" class="noVNC_button"
                 title="Shutdown/Reboot..." />
             <div id="noVNC_xvp" class="noVNC_panel">
-                <input type="button" id="noVNC_xvpShutdown_button" value="Shutdown" />
-                <input type="button" id="noVNC_xvpReboot_button" value="Reboot" />
-                <input type="button" id="noVNC_xvpReset_button" value="Reset" />
+                <input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" />
+                <input type="button" id="noVNC_xvp_reboot_button" value="Reboot" />
+                <input type="button" id="noVNC_xvp_reset_button" value="Reset" />
             </div>
 
             <!-- Clipboard -->
             <input type="image" alt="Clipboard" src="app/images/clipboard.png"
-                id="noVNC_clipboard_button" class="noVNC_status_button"
+                id="noVNC_clipboard_button" class="noVNC_button"
                 title="Clipboard" />
             <div id="noVNC_clipboard" class="noVNC_panel">
                 <textarea id="noVNC_clipboard_text" rows=5>
@@ -128,12 +128,12 @@
 
             <!-- Toggle fullscreen -->
             <input type="image" alt="Fullscreen" src="app/images/fullscreen.png"
-                id="noVNC_fullscreen_button" class="noVNC_status_button noVNC_hidden"
+                id="noVNC_fullscreen_button" class="noVNC_button noVNC_hidden"
                 title="Fullscreen" />
 
             <!-- Settings -->
             <input type="image" alt="Settings" src="app/images/settings.png"
-                id="noVNC_settings_button" class="noVNC_status_button"
+                id="noVNC_settings_button" class="noVNC_button"
                 title="Settings" />
             <div id="noVNC_settings" class="noVNC_panel">
                 <ul>
@@ -173,12 +173,12 @@
 
             <!-- Connection Controls -->
             <input type="image" alt="Connect" src="app/images/connect.png"
-                id="noVNC_connectPanel_button" class="noVNC_status_button"
+                id="noVNC_connect_controls_button" class="noVNC_button"
                 title="Connect" />
             <input type="image" alt="Disconnect" src="app/images/disconnect.png"
-                id="noVNC_disconnect_button" class="noVNC_status_button"
+                id="noVNC_disconnect_button" class="noVNC_button"
                 title="Disconnect" />
-            <div id="noVNC_controls" class="noVNC_panel">
+            <div id="noVNC_connect_controls" class="noVNC_panel">
                 <ul>
                     <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
                     <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>

From d9e86214363943110ec973e1bb6f3f3ea17db435 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 14:49:05 +0200
Subject: [PATCH 19/46] Make "selected" an extra CSS class

Avoid duplicating stuff in the style sheet by making the "selected"
property an extra class, rather than a replacement for the base one.
---
 app/styles/base.css |  9 ++-------
 app/ui.js           | 48 ++++++++++++++++++++++-----------------------
 2 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index d1d83a3b..c9974d69 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -60,12 +60,8 @@ html {
   /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
   font-size: 12px;
 }
-.noVNC_button_selected {
-  padding: 4px 4px;
-  vertical-align: middle;
-  border:1px solid #4366a9;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
+.noVNC_button.noVNC_selected {
+  border-color: #4366a9;
   background: #779ced; /* Old browsers */
   background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
@@ -74,7 +70,6 @@ html {
   background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
   background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
- /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
 }
 .noVNC_button:disabled {
   opacity: 0.4;
diff --git a/app/ui.js b/app/ui.js
index 907e41da..a874c73e 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -592,7 +592,7 @@ var UI;
             document.getElementById('noVNC_settings')
                 .classList.add("noVNC_open");
             document.getElementById('noVNC_settings_button')
-                .className = "noVNC_button_selected";
+                .classList.add("noVNC_selected");
             UI.settingsOpen = true;
         },
 
@@ -601,7 +601,7 @@ var UI;
             document.getElementById('noVNC_settings')
                 .classList.remove("noVNC_open");
             document.getElementById('noVNC_settings_button')
-                .className = "noVNC_button";
+                .classList.remove("noVNC_selected");
             UI.settingsOpen = false;
         },
 
@@ -660,13 +660,13 @@ var UI;
                 document.getElementById('noVNC_xvp')
                     .classList.remove("noVNC_open");
                 document.getElementById('noVNC_xvp_button')
-                    .className = "noVNC_button";
+                    .classList.remove("noVNC_selected");
                 UI.xvpOpen = false;
             } else {
                 document.getElementById('noVNC_xvp')
                     .classList.add("noVNC_open");
                 document.getElementById('noVNC_xvp_button')
-                    .className = "noVNC_button_selected";
+                    .classList.add("noVNC_selected");
                 UI.xvpOpen = true;
             }
         },
@@ -712,13 +712,13 @@ var UI;
                 document.getElementById('noVNC_clipboard')
                     .classList.remove("noVNC_open");
                 document.getElementById('noVNC_clipboard_button')
-                    .className = "noVNC_button";
+                    .classList.remove("noVNC_selected");
                 UI.clipboardOpen = false;
             } else {
                 document.getElementById('noVNC_clipboard')
                     .classList.add("noVNC_open");
                 document.getElementById('noVNC_clipboard_button')
-                    .className = "noVNC_button_selected";
+                    .classList.add("noVNC_selected");
                 UI.clipboardOpen = true;
             }
         },
@@ -754,7 +754,7 @@ var UI;
                 UI.settingsApply();
                 UI.closeSettingsMenu();
                 document.getElementById('noVNC_connect_controls_button')
-                    .className = "noVNC_button";
+                    .classList.remove("noVNC_selected");
             }
             // Close clipboard panel if open
             if (UI.clipboardOpen === true) {
@@ -770,7 +770,7 @@ var UI;
                 document.getElementById('noVNC_connect_controls')
                     .classList.remove("noVNC_open");
                 document.getElementById('noVNC_connect_controls_button')
-                    .className = "noVNC_button";
+                    .classList.remove("noVNC_selected");
                 UI.connSettingsOpen = false;
                 UI.saveSetting('host');
                 UI.saveSetting('port');
@@ -780,7 +780,7 @@ var UI;
                 document.getElementById('noVNC_connect_controls')
                     .classList.add("noVNC_open");
                 document.getElementById('noVNC_connect_controls_button')
-                    .className = "noVNC_button_selected";
+                    .classList.add("noVNC_selected");
                 UI.connSettingsOpen = true;
                 document.getElementById('noVNC_setting_host').focus();
             }
@@ -881,10 +881,10 @@ var UI;
                 document.webkitFullscreenElement ||
                 document.msFullscreenElement ) {
                 document.getElementById('noVNC_fullscreen_button')
-                    .className = "noVNC_button_selected";
+                    .classList.add("noVNC_selected");
             } else {
                 document.getElementById('noVNC_fullscreen_button')
-                    .className = "noVNC_button";
+                    .classList.remove("noVNC_selected");
             }
         },
 
@@ -1106,9 +1106,9 @@ var UI;
                 }
 
                 if (UI.rfb.get_viewportDrag()) {
-                    viewDragButton.className = "noVNC_button_selected";
+                    viewDragButton.classList.add("noVNC_selected");
                 } else {
-                    viewDragButton.className = "noVNC_button";
+                    viewDragButton.classList.remove("noVNC_selected");
                 }
 
                 // Different behaviour for touch vs non-touch
@@ -1149,17 +1149,17 @@ var UI;
                 try { kbi.setSelectionRange(l, l); } // Move the caret to the end
                 catch (err) {} // setSelectionRange is undefined in Google Chrome
                 UI.keyboardVisible = true;
-                skb.className = "noVNC_button_selected";
+                skb.classList.add("noVNC_selected");
             } else if(UI.keyboardVisible === true) {
                 kbi.blur();
-                skb.className = "noVNC_button";
+                skb.classList.remove("noVNC_selected");
                 UI.keyboardVisible = false;
             }
         },
 
         hideKeyboard: function() {
             document.getElementById('noVNC_keyboard_button')
-                .className = "noVNC_button";
+                .classList.remove("noVNC_selected");
             //Weird bug in iOS if you change keyboardVisible
             //here it does not actually occur so next time
             //you click keyboard icon it doesnt work.
@@ -1173,11 +1173,11 @@ var UI;
             if(UI.keyboardVisible === true) {
                 document.getElementById('noVNC_keyboardinput').focus();
                 document.getElementById('noVNC_keyboard_button')
-                    .className = "noVNC_button_selected";
+                    .classList.add("noVNC_selected");
             } else if(UI.keyboardVisible === false) {
                 document.getElementById('noVNC_keyboardinput').blur();
                 document.getElementById('noVNC_keyboard_button')
-                    .className = "noVNC_button";
+                    .classList.remove("noVNC_selected");
             }
         },
 
@@ -1264,13 +1264,13 @@ var UI;
                 document.getElementById('noVNC_modifiers')
                     .classList.add("noVNC_open");
                 document.getElementById('noVNC_toggle_extra_keys_button')
-                    .className = "noVNC_button_selected";
+                    .classList.add("noVNC_selected");
                 UI.extraKeysVisible = true;
             } else if(UI.extraKeysVisible === true) {
                 document.getElementById('noVNC_modifiers')
                     .classList.remove("noVNC_open");
                 document.getElementById('noVNC_toggle_extra_keys_button')
-                    .className = "noVNC_button";
+                    .classList.remove("noVNC_selected");
                 UI.extraKeysVisible = false;
             }
         },
@@ -1290,12 +1290,12 @@ var UI;
             if(UI.ctrlOn === false) {
                 UI.rfb.sendKey(KeyTable.XK_Control_L, true);
                 document.getElementById('noVNC_toggle_ctrl_button')
-                    .className = "noVNC_button_selected";
+                    .classList.add("noVNC_selected");
                 UI.ctrlOn = true;
             } else if(UI.ctrlOn === true) {
                 UI.rfb.sendKey(KeyTable.XK_Control_L, false);
                 document.getElementById('noVNC_toggle_ctrl_button')
-                    .className = "noVNC_button";
+                    .classList.remove("noVNC_selected");
                 UI.ctrlOn = false;
             }
         },
@@ -1305,12 +1305,12 @@ var UI;
             if(UI.altOn === false) {
                 UI.rfb.sendKey(KeyTable.XK_Alt_L, true);
                 document.getElementById('noVNC_toggle_alt_button')
-                    .className = "noVNC_button_selected";
+                    .classList.add("noVNC_selected");
                 UI.altOn = true;
             } else if(UI.altOn === true) {
                 UI.rfb.sendKey(KeyTable.XK_Alt_L, false);
                 document.getElementById('noVNC_toggle_alt_button')
-                    .className = "noVNC_button";
+                    .classList.remove("noVNC_selected");
                 UI.altOn = false;
             }
         },

From ed8cbe4e7bea638e45656f88b728b1d5537902b4 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 15:23:46 +0200
Subject: [PATCH 20/46] Clean up panel open/close API

---
 app/ui.js | 285 ++++++++++++++++++++++++++----------------------------
 1 file changed, 136 insertions(+), 149 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index a874c73e..b9e437e5 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -42,11 +42,7 @@ var UI;
         popupStatusTimeout: null,
         hideKeyboardTimeout: null,
 
-        settingsOpen: false,
-        connSettingsOpen: false,
-        clipboardOpen: false,
         keyboardVisible: false,
-        extraKeysVisible: false,
 
         isTouchDevice: false,
         isSafari: false,
@@ -97,8 +93,9 @@ var UI;
             UI.addSettingsHandlers();
 
             // Show the connect panel on first load unless autoconnecting
-            if (!autoconnect && !UI.connSettingsOpen)
-                UI.toggleConnectPanel();
+            if (!autoconnect) {
+                UI.openConnectPanel();
+            }
 
             UI.updateViewClip();
             UI.setBarPosition();
@@ -416,8 +413,7 @@ var UI;
                         .classList.remove("noVNC_hidden");
                     document.getElementById('noVNC_disconnect_button')
                         .classList.add("noVNC_hidden");
-                    UI.connSettingsOpen = false;
-                    UI.toggleConnectPanel();
+                    UI.openConnectPanel();
                     break;
                 case 'loaded':
                     document.getElementById('noVNC_connect_controls_button')
@@ -575,62 +571,68 @@ var UI;
             //Util.Debug("<< settingsApply");
         },
 
-        // Open menu
-        openSettingsMenu: function() {
-            // Close clipboard panel if open
-            if (UI.clipboardOpen === true) {
-                UI.toggleClipboardPanel();
-            }
-            // Close connection settings if open
-            if (UI.connSettingsOpen === true) {
-                UI.toggleConnectPanel();
-            }
-            // Close XVP panel if open
-            if (UI.xvpOpen === true) {
-                UI.toggleXvpPanel();
+/* ------^-------
+ *   /SETTINGS
+ * ==============
+ *    PANELS
+ * ------v------*/
+
+        closeAllPanels: function() {
+            UI.closeSettingsPanel();
+            UI.closeXvpPanel();
+            UI.closeClipboardPanel();
+            UI.closeConnectPanel();
+        },
+
+/* ------^-------
+ *   /PANELS
+ * ==============
+ * SETTINGS (panel)
+ * ------v------*/
+
+        openSettingsPanel: function() {
+            UI.closeAllPanels();
+
+            UI.updateSetting('encrypt');
+            UI.updateSetting('true_color');
+            if (Util.browserSupportsCursorURIs()) {
+                UI.updateSetting('cursor');
+            } else {
+                UI.updateSetting('cursor', !UI.isTouchDevice);
+                document.getElementById('noVNC_setting_cursor').disabled = true;
             }
+            UI.updateSetting('clip');
+            UI.updateSetting('resize');
+            UI.updateSetting('shared');
+            UI.updateSetting('view_only');
+            UI.updateSetting('path');
+            UI.updateSetting('repeaterID');
+            UI.updateSetting('stylesheet');
+            UI.updateSetting('logging');
+
             document.getElementById('noVNC_settings')
                 .classList.add("noVNC_open");
             document.getElementById('noVNC_settings_button')
                 .classList.add("noVNC_selected");
-            UI.settingsOpen = true;
         },
 
-        // Close menu (without applying settings)
-        closeSettingsMenu: function() {
+        closeSettingsPanel: function() {
             document.getElementById('noVNC_settings')
                 .classList.remove("noVNC_open");
             document.getElementById('noVNC_settings_button')
                 .classList.remove("noVNC_selected");
-            UI.settingsOpen = false;
         },
 
         // Toggle the settings menu:
         //   On open, settings are refreshed from saved cookies.
         //   On close, settings are applied
         toggleSettingsPanel: function() {
-            if (UI.settingsOpen) {
+            if (document.getElementById('noVNC_settings')
+                .classList.contains("noVNC_open")) {
                 UI.settingsApply();
-                UI.closeSettingsMenu();
+                UI.closeSettingsPanel();
             } else {
-                UI.updateSetting('encrypt');
-                UI.updateSetting('true_color');
-                if (Util.browserSupportsCursorURIs()) {
-                    UI.updateSetting('cursor');
-                } else {
-                    UI.updateSetting('cursor', !UI.isTouchDevice);
-                    document.getElementById('noVNC_setting_cursor').disabled = true;
-                }
-                UI.updateSetting('clip');
-                UI.updateSetting('resize');
-                UI.updateSetting('shared');
-                UI.updateSetting('view_only');
-                UI.updateSetting('path');
-                UI.updateSetting('repeaterID');
-                UI.updateSetting('stylesheet');
-                UI.updateSetting('logging');
-
-                UI.openSettingsMenu();
+                UI.openSettingsPanel();
             }
         },
 
@@ -640,34 +642,28 @@ var UI;
  *      XVP
  * ------v------*/
 
-        // Show the XVP panel
+        openXvpPanel: function() {
+            UI.closeAllPanels();
+
+            document.getElementById('noVNC_xvp')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_xvp_button')
+                .classList.add("noVNC_selected");
+        },
+
+        closeXvpPanel: function() {
+            document.getElementById('noVNC_xvp')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_xvp_button')
+                .classList.remove("noVNC_selected");
+        },
+
         toggleXvpPanel: function() {
-            // Close settings if open
-            if (UI.settingsOpen === true) {
-                UI.settingsApply();
-                UI.closeSettingsMenu();
-            }
-            // Close connection settings if open
-            if (UI.connSettingsOpen === true) {
-                UI.toggleConnectPanel();
-            }
-            // Close clipboard panel if open
-            if (UI.clipboardOpen === true) {
-                UI.toggleClipboardPanel();
-            }
-            // Toggle XVP panel
-            if (UI.xvpOpen === true) {
-                document.getElementById('noVNC_xvp')
-                    .classList.remove("noVNC_open");
-                document.getElementById('noVNC_xvp_button')
-                    .classList.remove("noVNC_selected");
-                UI.xvpOpen = false;
+            if (document.getElementById('noVNC_xvp')
+                .classList.contains("noVNC_open")) {
+                UI.closeXvpPanel();
             } else {
-                document.getElementById('noVNC_xvp')
-                    .classList.add("noVNC_open");
-                document.getElementById('noVNC_xvp_button')
-                    .classList.add("noVNC_selected");
-                UI.xvpOpen = true;
+                UI.openXvpPanel();
             }
         },
 
@@ -680,9 +676,7 @@ var UI;
                 document.getElementById('noVNC_xvp_button')
                     .classList.add("noVNC_hidden");
                 // Close XVP panel if open
-                if (UI.xvpOpen === true) {
-                    UI.toggleXvpPanel();
-                }
+                UI.closeXvpPanel();
             }
         },
 
@@ -692,34 +686,28 @@ var UI;
  *   CLIPBOARD
  * ------v------*/
 
-        // Show the clipboard panel
+        openClipboardPanel: function() {
+            UI.closeAllPanels();
+
+            document.getElementById('noVNC_clipboard')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_clipboard_button')
+                .classList.add("noVNC_selected");
+        },
+
+        closeClipboardPanel: function() {
+            document.getElementById('noVNC_clipboard')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_clipboard_button')
+                .classList.remove("noVNC_selected");
+        },
+
         toggleClipboardPanel: function() {
-            // Close settings if open
-            if (UI.settingsOpen === true) {
-                UI.settingsApply();
-                UI.closeSettingsMenu();
-            }
-            // Close connection settings if open
-            if (UI.connSettingsOpen === true) {
-                UI.toggleConnectPanel();
-            }
-            // Close XVP panel if open
-            if (UI.xvpOpen === true) {
-                UI.toggleXvpPanel();
-            }
-            // Toggle Clipboard Panel
-            if (UI.clipboardOpen === true) {
-                document.getElementById('noVNC_clipboard')
-                    .classList.remove("noVNC_open");
-                document.getElementById('noVNC_clipboard_button')
-                    .classList.remove("noVNC_selected");
-                UI.clipboardOpen = false;
+            if (document.getElementById('noVNC_clipboard')
+                .classList.contains("noVNC_open")) {
+                UI.closeClipboardPanel();
             } else {
-                document.getElementById('noVNC_clipboard')
-                    .classList.add("noVNC_open");
-                document.getElementById('noVNC_clipboard_button')
-                    .classList.add("noVNC_selected");
-                UI.clipboardOpen = true;
+                UI.openClipboardPanel();
             }
         },
 
@@ -747,48 +735,40 @@ var UI;
  *  CONNECTION
  * ------v------*/
 
-        // Show the connection settings panel/menu
-        toggleConnectPanel: function() {
-            // Close connection settings if open
-            if (UI.settingsOpen === true) {
-                UI.settingsApply();
-                UI.closeSettingsMenu();
-                document.getElementById('noVNC_connect_controls_button')
-                    .classList.remove("noVNC_selected");
-            }
-            // Close clipboard panel if open
-            if (UI.clipboardOpen === true) {
-                UI.toggleClipboardPanel();
-            }
-            // Close XVP panel if open
-            if (UI.xvpOpen === true) {
-                UI.toggleXvpPanel();
-            }
+        openConnectPanel: function() {
+            UI.closeAllPanels();
 
-            // Toggle Connection Panel
-            if (UI.connSettingsOpen === true) {
-                document.getElementById('noVNC_connect_controls')
-                    .classList.remove("noVNC_open");
-                document.getElementById('noVNC_connect_controls_button')
-                    .classList.remove("noVNC_selected");
-                UI.connSettingsOpen = false;
-                UI.saveSetting('host');
-                UI.saveSetting('port');
-                UI.saveSetting('token');
-                //UI.saveSetting('password');
+            document.getElementById('noVNC_connect_controls')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_connect_controls_button')
+                .classList.add("noVNC_selected");
+
+            document.getElementById('noVNC_setting_host').focus();
+        },
+
+        closeConnectPanel: function() {
+            document.getElementById('noVNC_connect_controls')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_connect_controls_button')
+                .classList.remove("noVNC_selected");
+
+            UI.saveSetting('host');
+            UI.saveSetting('port');
+            UI.saveSetting('token');
+            //UI.saveSetting('password');
+        },
+
+        toggleConnectPanel: function() {
+            if (document.getElementById('noVNC_connect_controls')
+                .classList.contains("noVNC_open")) {
+                UI.closeConnectPanel();
             } else {
-                document.getElementById('noVNC_connect_controls')
-                    .classList.add("noVNC_open");
-                document.getElementById('noVNC_connect_controls_button')
-                    .classList.add("noVNC_selected");
-                UI.connSettingsOpen = true;
-                document.getElementById('noVNC_setting_host').focus();
+                UI.openConnectPanel();
             }
         },
 
         connect: function() {
-            UI.closeSettingsMenu();
-            UI.toggleConnectPanel();
+            UI.closeAllPanels();
 
             var host = document.getElementById('noVNC_setting_host').value;
             var port = document.getElementById('noVNC_setting_port').value;
@@ -821,7 +801,7 @@ var UI;
         },
 
         disconnect: function() {
-            UI.closeSettingsMenu();
+            UI.closeAllPanels();
             UI.rfb.disconnect();
 
             // Restore the callback used for initial resize
@@ -1258,20 +1238,27 @@ var UI;
             }
         },
 
+        openExtraKeys: function() {
+            document.getElementById('noVNC_modifiers')
+                .classList.add("noVNC_open");
+            document.getElementById('noVNC_toggle_extra_keys_button')
+                .classList.add("noVNC_selected");
+        },
+
+        closeExtraKeys: function() {
+            document.getElementById('noVNC_modifiers')
+                .classList.remove("noVNC_open");
+            document.getElementById('noVNC_toggle_extra_keys_button')
+                .classList.remove("noVNC_selected");
+        },
+
         toggleExtraKeys: function() {
             UI.keepKeyboard();
-            if(UI.extraKeysVisible === false) {
-                document.getElementById('noVNC_modifiers')
-                    .classList.add("noVNC_open");
-                document.getElementById('noVNC_toggle_extra_keys_button')
-                    .classList.add("noVNC_selected");
-                UI.extraKeysVisible = true;
-            } else if(UI.extraKeysVisible === true) {
-                document.getElementById('noVNC_modifiers')
-                    .classList.remove("noVNC_open");
-                document.getElementById('noVNC_toggle_extra_keys_button')
-                    .classList.remove("noVNC_selected");
-                UI.extraKeysVisible = false;
+            if(document.getElementById('noVNC_modifiers')
+                .classList.contains("noVNC_open")) {
+                UI.closeExtraKeys();
+            } else  {
+                UI.openExtraKeys();
             }
         },
 

From ca5c74ad5ac2e6c294c1f170d01044edbb1d209a Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Aug 2016 16:08:29 +0200
Subject: [PATCH 21/46] Show all status messages in a popup top bar

---
 app/images/error.svg   |  81 +++++++++++++++++++++++++++
 app/images/info.svg    |  87 +++++++++++++++++++++++++++++
 app/images/warning.svg |  81 +++++++++++++++++++++++++++
 app/styles/base.css    | 122 +++++++++++++++++++----------------------
 app/styles/black.css   |  32 -----------
 app/styles/blue.css    |  51 -----------------
 app/ui.js              |  52 ++++++++++--------
 vnc.html               |   7 +--
 8 files changed, 335 insertions(+), 178 deletions(-)
 create mode 100644 app/images/error.svg
 create mode 100644 app/images/info.svg
 create mode 100644 app/images/warning.svg

diff --git a/app/images/error.svg b/app/images/error.svg
new file mode 100644
index 00000000..6c47e8f2
--- /dev/null
+++ b/app/images/error.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="error.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="13.274366"
+     inkscape:cy="14.078582"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 6.8222656 4.8027344 A 2.0002 2.0002 0 0 0 5.4296875 8.2363281 L 9.671875 12.480469 L 5.4296875 16.722656 A 2.0002 2.0002 0 1 0 8.2578125 19.550781 L 12.5 15.308594 L 16.742188 19.550781 A 2.0002 2.0002 0 1 0 19.570312 16.722656 L 15.328125 12.480469 L 19.570312 8.2363281 A 2.0002 2.0002 0 0 0 18.117188 4.8027344 A 2.0002 2.0002 0 0 0 16.742188 5.4082031 L 12.5 9.6503906 L 8.2578125 5.4082031 A 2.0002 2.0002 0 0 0 6.8222656 4.8027344 z "
+       transform="translate(0,1027.3622)"
+       id="path4155" />
+  </g>
+</svg>
diff --git a/app/images/info.svg b/app/images/info.svg
new file mode 100644
index 00000000..21d268c8
--- /dev/null
+++ b/app/images/info.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="info.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="13.516502"
+     inkscape:cy="12.319239"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <circle
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path4164"
+       cx="12"
+       cy="1032.3622"
+       r="2" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 12,1038.3622 0,9 2,0"
+       id="path4187"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/app/images/warning.svg b/app/images/warning.svg
new file mode 100644
index 00000000..7114f9b1
--- /dev/null
+++ b/app/images/warning.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="warning.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="16.457343"
+     inkscape:cy="12.179552"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 12.513672 3.0019531 C 11.751609 2.9919531 11.052563 3.4242687 10.710938 4.1054688 L 3.2109375 19.105469 C 2.5461937 20.435369 3.5132277 21.9999 5 22 L 20 22 C 21.486772 21.9999 22.453806 20.435369 21.789062 19.105469 L 14.289062 4.1054688 C 13.951849 3.4330688 13.265888 3.0066531 12.513672 3.0019531 z M 12.478516 6.9804688 A 1.50015 1.50015 0 0 1 14 8.5 L 14 14.5 A 1.50015 1.50015 0 1 1 11 14.5 L 11 8.5 A 1.50015 1.50015 0 0 1 12.478516 6.9804688 z M 12.5 17 A 1.5 1.5 0 0 1 14 18.5 A 1.5 1.5 0 0 1 12.5 20 A 1.5 1.5 0 0 1 11 18.5 A 1.5 1.5 0 0 1 12.5 17 z "
+       transform="translate(0,1027.3622)"
+       id="path4208" />
+  </g>
+</svg>
diff --git a/app/styles/base.css b/app/styles/base.css
index c9974d69..e838b1de 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -39,6 +39,14 @@ html {
   top: 0;
   width: 100%;
   z-index: 200;
+
+  background: #b2bdcd; /* Old browsers */
+  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
 }
 
 /* General button style */
@@ -167,47 +175,6 @@ html {
   padding-left: 10px;
 }
 
-/* Center status display */
-#noVNC_status {
-  font-size: 12px;
-  padding-top: 4px;
-  height:32px;
-  text-align: center;
-  font-weight: bold;
-  color: #fff;
-  z-index: 0;
-  position: absolute;
-  width: 100%;
-  margin-left: 0px;
-}
-.noVNC_status_normal {
-  background: #b2bdcd; /* Old browsers */
-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-}
-.noVNC_status_error {
-  background: #f04040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-}
-.noVNC_status_warn {
-  background: #f0f040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-}
-
 /* Right side buttons */
 .noVNC_buttons_right {
   float: right;
@@ -295,28 +262,60 @@ html {
   float: right;
 }
 
-/* Popup Status */
-#noVNC_popup_status {
+/* ----------------------------------------
+ * Status Dialog
+ * ----------------------------------------
+ */
+
+#noVNC_status {
+  display: none;
   position: fixed;
-  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 3;
 
-  margin: 15px;
-  top: 60px;
-  padding: 15px;
-  width: auto;
+  padding: 5px;
 
-  text-align: center;
-  font-weight: bold;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+
+  line-height: 25px;
   word-wrap: break-word;
   color: #fff;
-  background: rgba(0,0,0,0.65);
 
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-radius: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 }
-#noVNC_popup_status.noVNC_hidden {
-  display: none;
+#noVNC_status.noVNC_open {
+  display: flex;
+}
+
+#noVNC_status::before {
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  margin-right: 5px;
+}
+
+#noVNC_status.noVNC_status_normal {
+  background: rgba(128,128,128,0.9);
+}
+#noVNC_status.noVNC_status_normal::before {
+  content: url("../images/info.svg") " ";
+}
+#noVNC_status.noVNC_status_error {
+  background: rgba(200,55,55,0.9);
+}
+#noVNC_status.noVNC_status_error::before {
+  content: url("../images/error.svg") " ";
+}
+#noVNC_status.noVNC_status_warn {
+  background: rgba(180,180,30,0.9);
+}
+#noVNC_status.noVNC_status_warn::before {
+  content: url("../images/warning.svg") " ";
 }
 
 /* ----------------------------------------
@@ -398,17 +397,6 @@ html {
  * ----------------------------------------
  */
 
-/* left-align the status text on lower resolutions */
-@media screen and (max-width: 800px){
-  #noVNC_status {
-    z-index: 1;
-    position: relative;
-    width: auto;
-    float: left;
-    margin-left: 4px;
-  }
-}
-
 @media screen and (max-width: 640px){
   #noVNC_clipboard_text {
     width: 410px;
diff --git a/app/styles/black.css b/app/styles/black.css
index 9a3d5d2e..7c49ae06 100644
--- a/app/styles/black.css
+++ b/app/styles/black.css
@@ -6,38 +6,6 @@
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
-#noVNC_keyboardinput {
-  background-color:#000;
-}
-
-.noVNC_status_normal {
-  background: #4c4c4c; /* Old browsers */
-  background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
-  background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
-}
-.noVNC_status_error {
-  background: #f04040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f04040 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
-  background: linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
-}
-.noVNC_status_warn {
-  background: #f0f040; /* Old browsers */
-  background: -moz-linear-gradient(top, #f0f040 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
-  background: linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
-}
-
 .noVNC_panel {
   border:2px solid #fff;
   background:#000;
diff --git a/app/styles/blue.css b/app/styles/blue.css
index b986d9b2..a59428ec 100644
--- a/app/styles/blue.css
+++ b/app/styles/blue.css
@@ -6,59 +6,8 @@
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
 
-.noVNC_status_normal {
-  background-color:#04073d;
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.54, rgb(10,15,79)),
-    color-stop(0.5, rgb(4,7,61))
-  );
-  background-image: -moz-linear-gradient(
-    center bottom,
-    rgb(10,15,79) 54%,
-    rgb(4,7,61) 50%
-  );
-}
-.noVNC_status_error {
-  background-color:#f04040;
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.54, rgb(240,64,64)),
-    color-stop(0.5, rgb(4,7,61))
-  );
-  background-image: -moz-linear-gradient(
-    center bottom,
-    rgb(4,7,61) 54%,
-    rgb(249,64,64) 50%
-  );
-}
-.noVNC_status_warn {
-  background-color:#f0f040;
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0.54, rgb(240,240,64)),
-    color-stop(0.5, rgb(4,7,61))
-  );
-  background-image: -moz-linear-gradient(
-    center bottom,
-    rgb(4,7,61) 54%,
-    rgb(240,240,64) 50%
-  );
-}
-
 .noVNC_panel {
   border:2px solid #fff;
   background:#04073d;
   color:#fff;
 }
-
-#noVNC_keyboardinput {
-  background-color:#04073d;
-}
-
diff --git a/app/ui.js b/app/ui.js
index b9e437e5..234af0aa 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -39,7 +39,7 @@ var UI;
         rfb_state: 'loaded',
 
         resizeTimeout: null,
-        popupStatusTimeout: null,
+        statusTimeout: null,
         hideKeyboardTimeout: null,
 
         keyboardVisible: false,
@@ -175,6 +175,9 @@ var UI;
                 UI.updateViewDrag();
                 UI.setBarPosition();
             } );
+
+            document.getElementById("noVNC_status")
+                .addEventListener('click', UI.hideStatus);
         },
 
         setupFullscreen: function() {
@@ -196,10 +199,6 @@ var UI;
                 .addEventListener('click', UI.toggleViewDrag);
             document.getElementById("noVNC_send_ctrl_alt_del_button")
                 .addEventListener('click', UI.sendCtrlAltDel);
-            document.getElementById("noVNC_status")
-                .addEventListener('click', UI.popupStatus);
-            document.getElementById("noVNC_popup_status")
-                .addEventListener('click', UI.closePopup);
         },
 
         addTouchSpecificHandlers: function() {
@@ -313,10 +312,12 @@ var UI;
         updateState: function(rfb, state, oldstate, msg) {
             UI.rfb_state = state;
             var klass;
+            var timeout;
             switch (state) {
                 case 'failed':
                 case 'fatal':
                     klass = "noVNC_status_error";
+                    timeout = 0; // zero means no timeout
                     break;
                 case 'normal':
                     klass = "noVNC_status_normal";
@@ -341,8 +342,12 @@ var UI;
             }
 
             if (typeof(msg) !== 'undefined') {
-                document.getElementById('noVNC_control_bar').setAttribute("class", klass);
-                document.getElementById('noVNC_status').innerHTML = msg;
+                document.getElementById('noVNC_status')
+                    .classList.remove("noVNC_status_normal",
+                                      "noVNC_status_warn",
+                                      "noVNC_status_error");
+                document.getElementById('noVNC_status').classList.add(klass);
+                UI.showStatus(msg, timeout);
             }
 
             UI.updateVisualState();
@@ -432,27 +437,28 @@ var UI;
             //Util.Debug("<< updateVisualState");
         },
 
-        popupStatus: function(text) {
-            var psp = document.getElementById('noVNC_popup_status');
+        showStatus: function(text, time) {
+            var statusElem = document.getElementById('noVNC_status');
 
-            clearTimeout(UI.popupStatusTimeout);
+            clearTimeout(UI.statusTimeout);
 
-            if (typeof text === 'string') {
-                psp.innerHTML = text;
-            } else {
-                psp.innerHTML = document.getElementById('noVNC_status').innerHTML;
+            statusElem.innerHTML = text;
+            statusElem.classList.add("noVNC_open");
+
+            // If no time was specified, show the status for 1.5 seconds
+            if (typeof time === 'undefined') {
+                time = 1500;
             }
-            psp.classList.remove("noVNC_hidden");
-            psp.style.left = window.innerWidth/2 -
-                parseInt(window.getComputedStyle(psp).width)/2 -30 + "px";
 
-            // Show the popup for a maximum of 1.5 seconds
-            UI.popupStatusTimeout = setTimeout(UI.closePopup, 1500);
+            // A specified time of zero means no timeout
+            if (time != 0) {
+                UI.statusTimeout = window.setTimeout(UI.hideStatus, time);
+            }
         },
 
-        closePopup: function() {
-            clearTimeout(UI.popupStatusTimeout);
-            document.getElementById('noVNC_popup_status').classList.add("noVNC_hidden");
+        hideStatus: function() {
+            clearTimeout(UI.statusTimeout);
+            document.getElementById('noVNC_status').classList.remove("noVNC_open");
         },
 
 /* ------^-------
@@ -1022,7 +1028,7 @@ var UI;
                 // The browser is IE and we are in fullscreen mode.
                 // - We need to force clipping while in fullscreen since
                 //   scrollbars doesn't work.
-                UI.popupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
+                UI.showStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
                 UI.rememberedClipSetting = UI.getSetting('clip');
                 UI.setViewClip(true);
                 document.getElementById('noVNC_setting_clip').disabled = true;
diff --git a/vnc.html b/vnc.html
index 9d9fcaf3..1987bb4c 100644
--- a/vnc.html
+++ b/vnc.html
@@ -96,8 +96,6 @@
             </div>
         </div>
 
-        <div id="noVNC_status"></div>
-
         <div class="noVNC_buttons_right">
             <!-- Send Ctrl+Alt+Delete -->
             <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
@@ -189,9 +187,8 @@
             </div>
         </div>
 
-        <!-- Popup Status -->
-        <div id="noVNC_popup_status" class="noVNC_hidden">
-        </div>
+        <!-- Status Dialog -->
+        <div id="noVNC_status"></div>
 
     </div> <!-- End of noVNC_control_bar -->
 

From 8bf688265d67efe6a2904ca65fe5477d21f69ae3 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 16:31:38 +0200
Subject: [PATCH 22/46] Replace icons with SVG versions

Resolution independent for high DPI devices, and easier to modify
if we want to change something.
---
 app/images/alt.png             | Bin 339 -> 0 bytes
 app/images/alt.svg             |  92 ++++++++++++++++++++++++++++
 app/images/clipboard.png       | Bin 501 -> 0 bytes
 app/images/clipboard.svg       | 106 +++++++++++++++++++++++++++++++++
 app/images/connect.png         | Bin 404 -> 0 bytes
 app/images/connect.svg         |  96 +++++++++++++++++++++++++++++
 app/images/ctrl.png            | Bin 354 -> 0 bytes
 app/images/ctrl.svg            |  96 +++++++++++++++++++++++++++++
 app/images/ctrlaltdel.png      | Bin 317 -> 0 bytes
 app/images/ctrlaltdel.svg      | 100 +++++++++++++++++++++++++++++++
 app/images/disconnect.png      | Bin 1378 -> 0 bytes
 app/images/disconnect.svg      |  94 +++++++++++++++++++++++++++++
 app/images/drag.png            | Bin 963 -> 0 bytes
 app/images/drag.svg            |  76 +++++++++++++++++++++++
 app/images/esc.png             | Bin 385 -> 0 bytes
 app/images/esc.svg             |  92 ++++++++++++++++++++++++++++
 app/images/fullscreen.png      | Bin 851 -> 0 bytes
 app/images/fullscreen.svg      |  93 +++++++++++++++++++++++++++++
 app/images/keyboard.png        | Bin 1283 -> 0 bytes
 app/images/keyboard.svg        |  88 +++++++++++++++++++++++++++
 app/images/mouse_left.png      | Bin 511 -> 0 bytes
 app/images/mouse_left.svg      |  92 ++++++++++++++++++++++++++++
 app/images/mouse_middle.png    | Bin 517 -> 0 bytes
 app/images/mouse_middle.svg    |  92 ++++++++++++++++++++++++++++
 app/images/mouse_none.png      | Bin 497 -> 0 bytes
 app/images/mouse_none.svg      |  92 ++++++++++++++++++++++++++++
 app/images/mouse_right.png     | Bin 513 -> 0 bytes
 app/images/mouse_right.svg     |  92 ++++++++++++++++++++++++++++
 app/images/power.png           | Bin 390 -> 0 bytes
 app/images/power.svg           |  87 +++++++++++++++++++++++++++
 app/images/settings.png        | Bin 2495 -> 0 bytes
 app/images/settings.svg        |  76 +++++++++++++++++++++++
 app/images/tab.png             | Bin 387 -> 0 bytes
 app/images/tab.svg             |  86 ++++++++++++++++++++++++++
 app/images/toggleextrakeys.png | Bin 735 -> 0 bytes
 app/images/toggleextrakeys.svg |  90 ++++++++++++++++++++++++++++
 vnc.html                       |  36 +++++------
 37 files changed, 1658 insertions(+), 18 deletions(-)
 delete mode 100644 app/images/alt.png
 create mode 100644 app/images/alt.svg
 delete mode 100644 app/images/clipboard.png
 create mode 100644 app/images/clipboard.svg
 delete mode 100644 app/images/connect.png
 create mode 100644 app/images/connect.svg
 delete mode 100644 app/images/ctrl.png
 create mode 100644 app/images/ctrl.svg
 delete mode 100644 app/images/ctrlaltdel.png
 create mode 100644 app/images/ctrlaltdel.svg
 delete mode 100644 app/images/disconnect.png
 create mode 100644 app/images/disconnect.svg
 delete mode 100644 app/images/drag.png
 create mode 100644 app/images/drag.svg
 delete mode 100644 app/images/esc.png
 create mode 100644 app/images/esc.svg
 delete mode 100644 app/images/fullscreen.png
 create mode 100644 app/images/fullscreen.svg
 delete mode 100644 app/images/keyboard.png
 create mode 100644 app/images/keyboard.svg
 delete mode 100644 app/images/mouse_left.png
 create mode 100644 app/images/mouse_left.svg
 delete mode 100644 app/images/mouse_middle.png
 create mode 100644 app/images/mouse_middle.svg
 delete mode 100644 app/images/mouse_none.png
 create mode 100644 app/images/mouse_none.svg
 delete mode 100644 app/images/mouse_right.png
 create mode 100644 app/images/mouse_right.svg
 delete mode 100644 app/images/power.png
 create mode 100644 app/images/power.svg
 delete mode 100644 app/images/settings.png
 create mode 100644 app/images/settings.svg
 delete mode 100644 app/images/tab.png
 create mode 100644 app/images/tab.svg
 delete mode 100644 app/images/toggleextrakeys.png
 create mode 100644 app/images/toggleextrakeys.svg

diff --git a/app/images/alt.png b/app/images/alt.png
deleted file mode 100644
index d42af7b421b9f1193620cb4a7114f1df27886d1c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 339
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAIY)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmP)y9AGfn3c|@SfJ1YPZ!4!kK=DA?d4@M<Z+Xopcmb6
zL@D5afJs0+qj3tm1hdMDn+-x-8o`GdrXTv}BdnrQ^r!rZ=Srd4^L@TkPX1Ass(hNe
z_??r>vg-<hGyep6xwxFOWPZTW@YvGg`I*HRwyU182?%A~z_1}CH1%2CTo+-RsSFXv
zALto>UsUjQv!4@3E(23Sx$<4+2dh>^&G&f67BAwO*^{~A)gQHlw4ThU?9=P7U#iY$
zoU@gULH+&Szpr+?q{tjL>$J>$WYr(E@cJVsj=AZ~_m3?|T-1=LlQ4TyhX?0_FW<D%
ejU<(nb}>A34~+4u<o^ovD}$%2pUXO@geCwjnSNpb

diff --git a/app/images/alt.svg b/app/images/alt.svg
new file mode 100644
index 00000000..e5bb4612
--- /dev/null
+++ b/app/images/alt.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="alt.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="18.205425"
+     inkscape:cy="17.531398"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:48px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'Sans Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="text5290">
+      <path
+         d="m 9.9560547,1042.3329 -2.9394531,0 -0.4638672,1.3281 -1.8896485,0 2.7001953,-7.29 2.241211,0 2.7001958,7.29 -1.889649,0 -0.4589843,-1.3281 z m -2.4707031,-1.3526 1.9970703,0 -0.9960938,-2.9003 -1.0009765,2.9003 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5340" />
+      <path
+         d="m 13.188477,1036.0634 1.748046,0 0,7.5976 -1.748046,0 0,-7.5976 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5342" />
+      <path
+         d="m 18.535156,1036.6395 0,1.5528 1.801758,0 0,1.25 -1.801758,0 0,2.3193 q 0,0.3809 0.151367,0.5176 0.151368,0.1318 0.600586,0.1318 l 0.898438,0 0,1.25 -1.499024,0 q -1.035156,0 -1.469726,-0.4297 -0.429688,-0.4345 -0.429688,-1.4697 l 0,-2.3193 -0.86914,0 0,-1.25 0.86914,0 0,-1.5528 1.748047,0 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5344" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/clipboard.png b/app/images/clipboard.png
deleted file mode 100644
index 24df33c1c103755c23167c9a1d5eb51f9057060e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 501
zcmV<R0Sf+!P)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&0005JNkl<ZNQu=|
zv5MkQ6g@8)!^4clz!Vl*Oa5W%6fS~I$}rRU5rQE43l@r<TZo;-Zs9LjFWA^DSPe;&
z7>LQsoytXHG%qsDu&24?kb6(gJMZNIUjQci;%GE_^nL#i=bVU0+3)v%yWQ@~-6FHu
z?1ydJziiuX0zj=+gYWxKhGG0P3<ChLUa#MSAb8tux5u8}g`Ldjb1IceP*oMX-3~zz
zpwVccQmFs{Hk%C?W2jcEAR@$Z49l`I=Vg+M#X?w?r5vBf<8e~2*OhX)3?c$!42Q!3
zVHl#-YW?e5E|+Mx+ZQvHG|}((Uo}m0Pq|K~qW~b+b;)rYa$T3gFr-rf0MIlIy<X2w
z&wNM|x~?aj^XD|*Y&LT@iJ~abb^Vf06P$A}CcWv-z!;MgQC0OWfm^r`Nn^EIN!25=
zKJr3D2yrH0nx<6E>X&k2nr5MT4Y|wp8MrATn@2jALL#zx6ke_*NzM*Q(LB=qxlTR{
z-;+rcMIa&o#WNuyL{XG4;(6ZLfhv-T5CWd(<%>9ubKQ3ik|dGupG+on52n*8WzD<#
rPah746vwf&3n2ssgTZ}w#D9YiP?b1W?a7*e00000NkvXXu0mjf;r`$=

diff --git a/app/images/clipboard.svg b/app/images/clipboard.svg
new file mode 100644
index 00000000..79af2752
--- /dev/null
+++ b/app/images/clipboard.svg
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="clipboard.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="15.366606"
+     inkscape:cy="16.42981"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="M 9,6 6,6 C 5.4459889,6 5,6.4459889 5,7 l 0,13 c 0,0.554011 0.4459889,1 1,1 l 13,0 c 0.554011,0 1,-0.445989 1,-1 L 20,7 C 20,6.4459889 19.554011,6 19,6 l -3,0"
+       transform="translate(0,1027.3622)"
+       id="rect6083"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cssssssssc" />
+    <rect
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect6085"
+       width="7"
+       height="4"
+       x="9"
+       y="1031.3622"
+       ry="1.00002" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.50196081"
+       d="m 8.5071212,1038.8622 7.9999998,0"
+       id="path6087"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.50196081"
+       d="m 8.5071212,1041.8622 3.9999998,0"
+       id="path6089"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.50196081"
+       d="m 8.5071212,1044.8622 5.9999998,0"
+       id="path6091"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/app/images/connect.png b/app/images/connect.png
deleted file mode 100644
index 79e71adb85cbdd2da5b59d9e2c38609dd526d1be..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 404
zcmV;F0c-w=P)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&00047Nkl<ZNQv#0
zJx;?w5QV>S9D+ncfe;N96$KSXNI`*e04{(81y?{Ei6R9Of(lMRK|`ICPyi+&eiUAZ
zm9zdypa3aP8p(P)``(OKvkOZEAgLANt&n8Es+ql)h-}pOd;)L4*vyoZaUk(X(h2YZ
zD6n1y173kMNkcPx$w|M`b>JGf1FjY{IRJKnLo*x0Y$q|00GDQVGp9jbXaej5Yrr!=
z6v_iSix@a`oW`_)kjbxOY4Z0?^0`QVpqcM2o%j@J13gJ2vf(nCK`weuV_Im@L}d5R
zDRAuZbw>Wp5CivAbYhOP!dl(+VukP6=Za^N0FPdB9#J3{kN0zN8cC>vtYm2u*aKRw
zgA~{TE`S}r|8)dB0q4NbGfRO7GaHt4T@FcoWtg~-r2gDO6$V{N1I=O}sav-{^k{{!
y4cr3b0^fFPm1r~rl2*vhD1?cbjhg8Ee|!N&_KPMesy;aY0000<MNUMnLSTZ2z@kL}

diff --git a/app/images/connect.svg b/app/images/connect.svg
new file mode 100644
index 00000000..56cde414
--- /dev/null
+++ b/app/images/connect.svg
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="connect.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="37.14834"
+     inkscape:cy="1.9525926"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       id="g5103"
+       transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,-729.15757,315.8823)">
+      <path
+         sodipodi:nodetypes="cssssc"
+         inkscape:connector-curvature="0"
+         id="rect5096"
+         d="m 11,1040.3622 -5,0 c -1.108,0 -2,-0.892 -2,-2 l 0,-4 c 0,-1.108 0.892,-2 2,-2 l 5,0"
+         style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 14,1032.3622 5,0 c 1.108,0 2,0.892 2,2 l 0,4 c 0,1.108 -0.892,2 -2,2 l -5,0"
+         id="path5099"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cssssc" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5101"
+         d="m 9,1036.3622 7,0"
+         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/ctrl.png b/app/images/ctrl.png
deleted file mode 100644
index a63b601f19d9e62a784b9ae3619792ee0e7e1a14..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 354
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAIY)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmP)y9AH0j{KENDnOz4o-U3d9>?EKa`a+$6maEEblBXv
zqublI^Z5ssChmi=1rK>`n#>Cpc5LscXyxJQ&70LIB0IC{X&RH3tZ?$3uhC)uAAQ%~
z=dm#0#6w#pC2J)m-^*`i-jt|dOLJh#dSJNyOLkI^a{|+uvu}bz`JFkM*S+>@X!rHq
z_o7j{y!=7c)kEp~_RqX&X~247rqA8G!CuF+|LYjD=Oy<XPW8NZ_wMUm_x^TwuIj6^
zx*j%ZP1g0f9Uh^f%l}_{F7epz1CxsJ?trU-x3{s^?tUk3^<b@k&6dDJ0*4NqSyyGu
u`pkjZM%N^*jBSrz_Vr!qIwD+^b_~4R^M1ZK>U#_5bp}sYKbLh*2~7a?){X-J

diff --git a/app/images/ctrl.svg b/app/images/ctrl.svg
new file mode 100644
index 00000000..856e9395
--- /dev/null
+++ b/app/images/ctrl.svg
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="ctrl.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="18.205425"
+     inkscape:cy="17.531398"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:48px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'Sans Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="text5290">
+      <path
+         d="m 9.1210938,1043.1898 q -0.5175782,0.2686 -1.0791016,0.4053 -0.5615235,0.1367 -1.171875,0.1367 -1.8212891,0 -2.8857422,-1.0156 -1.0644531,-1.0205 -1.0644531,-2.7637 0,-1.748 1.0644531,-2.7637 1.0644531,-1.0205 2.8857422,-1.0205 0.6103515,0 1.171875,0.1368 0.5615234,0.1367 1.0791016,0.4052 l 0,1.5088 q -0.522461,-0.3564 -1.0302735,-0.5224 -0.5078125,-0.1661 -1.0693359,-0.1661 -1.0058594,0 -1.5820313,0.6446 -0.5761719,0.6445 -0.5761719,1.7773 0,1.1279 0.5761719,1.7725 0.5761719,0.6445 1.5820313,0.6445 0.5615234,0 1.0693359,-0.166 0.5078125,-0.166 1.0302735,-0.5225 l 0,1.5088 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5370" />
+      <path
+         d="m 12.514648,1036.5687 0,1.5528 1.801758,0 0,1.25 -1.801758,0 0,2.3193 q 0,0.3809 0.151368,0.5176 0.151367,0.1318 0.600586,0.1318 l 0.898437,0 0,1.25 -1.499023,0 q -1.035157,0 -1.469727,-0.4297 -0.429687,-0.4345 -0.429687,-1.4697 l 0,-2.3193 -0.8691411,0 0,-1.25 0.8691411,0 0,-1.5528 1.748046,0 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5372" />
+      <path
+         d="m 19.453125,1039.6107 q -0.229492,-0.1074 -0.458984,-0.1562 -0.22461,-0.054 -0.454102,-0.054 -0.673828,0 -1.040039,0.4345 -0.361328,0.4297 -0.361328,1.2354 l 0,2.5195 -1.748047,0 0,-5.4687 1.748047,0 0,0.8984 q 0.336914,-0.5371 0.771484,-0.7813 0.439453,-0.249 1.049805,-0.249 0.08789,0 0.19043,0.01 0.102539,0 0.297851,0.029 l 0.0049,1.582 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5374" />
+      <path
+         d="m 20.332031,1035.9926 1.748047,0 0,7.5976 -1.748047,0 0,-7.5976 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5376" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/ctrlaltdel.png b/app/images/ctrlaltdel.png
deleted file mode 100644
index 31922e53242fe85fb1db641a15339e2c33670e5b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 317
zcmV-D0mA-?P)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&00035Nkl<ZNQv#0
zF-`(O6o$XIGf3wZY`Fum^#De1LS<`WY2^)U>EIGHbhH+fhROmqGP}QpED4br)*+f`
z_?l_{ec#LO+c)rEu-peF-2wwZk-8P|U}oc72a=w3m<d3UZTal96~{>0px=;itmLe1
z#^)NUsv0@xQqw6Qf3i;eeYVpf={%ANX10{n1-g;U+RRoliQfnwftyI?tt`uHNl#|h
z+ZT|ukaT5ci<k&W)5MZnOX^FSCo)S(7qR-yAO9Zh00K~N&QxaK%HNUvD2*ih^7@V>
zMJI${Kqr++6=)XZJ#Ys&cHgZ7UcC3Sx~_*sQC#x%+c;nbytZig#9=-FEZMBb(?pXA
P00000NkvXXu0mjfvjB`6

diff --git a/app/images/ctrlaltdel.svg b/app/images/ctrlaltdel.svg
new file mode 100644
index 00000000..d7744ea3
--- /dev/null
+++ b/app/images/ctrlaltdel.svg
@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="ctrlaltdel.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="8"
+     inkscape:cx="11.135667"
+     inkscape:cy="16.407428"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect5253"
+       width="5"
+       height="5.0000172"
+       x="16"
+       y="1031.3622"
+       ry="1.0000174" />
+    <rect
+       y="1043.3622"
+       x="4"
+       height="5.0000172"
+       width="5"
+       id="rect5255"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       ry="1.0000174" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect5257"
+       width="5"
+       height="5.0000172"
+       x="13"
+       y="1043.3622"
+       ry="1.0000174" />
+  </g>
+</svg>
diff --git a/app/images/disconnect.png b/app/images/disconnect.png
deleted file mode 100644
index 8832f5ea7e2bdde7016b9429917fd453e42aadb8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1378
zcmV-o1)chdP)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&000FkNkl<ZNQt$U
zO-xi*6vuz(zQ=qZwSsjFRcn;6>cUSfZ5jnN)zSKqnqi|ej8W0VNMzMT<3}+XS8B?_
zl#0sGg$8V@f}@G4lQyjytg(rUPIWZVAYl?g@ne{Q_ih)yX9-2@rZ>5ZckVssfBxrx
z?>ko*V+4aiZy*p@Dk7h2tv?cxVy$(Ni1cc$yG7)>*1A2NPG644<JmXGk<pA56%}Sl
zNy#S5vUUMe#!AE)U4~)oOQljxi9}-Ptss#|WQt)JKWeS#I;K{wb%Sl&w^~|SGJp-J
za5(H&O3fCL9Y6>`L~dG^wKf)ub-fW}^XAR-hK7dD1CxO(9*-y7*x1-T1_J?fI2@i~
z7{+%%CD3D<=Bi`Ij{W{GkVqslMJd(k0PH_`^5pK35w+IujkI-kcKXZ8$}#|3w{C67
z<#JU(k8Rs!E+c_g8qAn6<Eqwr?wmPuI%;cci-9bl$6!GwlQH~$zXfpS%$aHJ?d{WN
z&YanI@7}$44a4{&l}as0Boad=fFtr;(=>mnt*w0@_!YP`8i-|CVi<;g^5ltU!h{Jq
zfP)7Qu1_YDpNfdx)zy_hZQ8VF4<A09RZ>#2DUnEgtAfFx*EvNjU%q@hFaVqtkqaUc
zA306ayby^*el9F5JS!scjT<-4PbQP=0c_iT8VCeBcJAEymy^)0U@+)afk0p>ua0T!
zx^?S%ob0`$R7U{n>gxP0EiEq`9rpnB&U!!4Twh;*tf;6c>-Boi15*Nlz)}UQbVO|!
ztNy$?MdJ=1KAdp@lu~;g-zQ3`=H}++I)Gd*r>0Jw+UWSLR6w~y_10Jjp-`w`I0F~J
zVQ}*J@#D1sj~_qwdORMxva<5FvtF)5q!_@tXrq>>rluypwYBv*Ky`KXZU?{udWSPu
zy?XUK6DLm00+g1PW&uQ`SZS?`oPhRdB?^T?1&xi3FI@l;`Px}~VcT|#%b>2V&VTOQ
zxo56pAP}&eQWhx@>2>VN-C$YPYmr?B(P(t917HJBZQDK(i^X=jrF6A&eS3O(l*6P~
zX|1~f!r`zV=Uy0wVT}|S*yCjOR4Em60fr~y`T``ANw2fNTZzbZ0HxII{{DUq<UN1>
z{EJvDwm@sWc>n(W&92Bwsh88IPyeZ@sp+iNdPzE+UUBHqp-;5dOSIODwbqruDj@I5
zl`9`QxYtarb-Rdc6OkR`$B*AOFfd>j6clU$Hg<G$7<ca6Q2^t{jbq`$g}$n)sx`ox
zTrS6?Nt0e{H%vzp`0df7M_Zil4wX))F9Tgb=;+a-ANYJe1<1vV7tOY|HU*HMpU<L2
zi*!|06@VHX98?~UM>#qwC$KxEudmOa%jMPrUFmfCvWmy!S;H{)0o=H8;|TEQrAwDM
zefqSB2n7WNR8&+D3WWq9o6VA!mxoht7et0l8X6jk9ewu2<MFHlNTpIuB68EV?M2(S
zZ}*=%bqb|aMnp1&g@r$aLZJ;nYH)B+dA+ayI7&oPzy@F`@ENe|z<~qb-@ku<vWVPF
zrBY4shJK>8zA7T~MC6+jCr*3`kjZ2&`h31+{Bxfaa6v>?x-p{BXg%;1Bl^kfyAg}U
zx=hnt1@wr>$0Bk&FE8&1KyPpF3ZKt6YglmCZ?4vQNli^naWope>;jmkxoUU|eru1{
zTDMhKSKlo!FE90YJOhSdXv?xBm&+M<@7@ixwY80Z@ZiCG_>Vo_9sm1lW%zL4UA$@s
k<s;u+z%`)bZSStX0f;neq;ROTdH?_b07*qoM6N<$f+u^HL;wH)

diff --git a/app/images/disconnect.svg b/app/images/disconnect.svg
new file mode 100644
index 00000000..6be7d187
--- /dev/null
+++ b/app/images/disconnect.svg
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="disconnect.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="25.05707"
+     inkscape:cy="11.594858"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       id="g5171"
+       transform="translate(-24.062499,-6.15775e-4)">
+      <path
+         id="path5110"
+         transform="translate(0,1027.3622)"
+         d="m 39.744141,3.4960938 c -0.769923,0 -1.539607,0.2915468 -2.121094,0.8730468 l -2.566406,2.5664063 1.414062,1.4140625 2.566406,-2.5664063 c 0.403974,-0.404 1.010089,-0.404 1.414063,0 l 2.828125,2.828125 c 0.40398,0.4039 0.403907,1.0101621 0,1.4140629 l -2.566406,2.566406 1.414062,1.414062 2.566406,-2.566406 c 1.163041,-1.1629 1.162968,-3.0791874 0,-4.2421874 L 41.865234,4.3691406 C 41.283747,3.7876406 40.514063,3.4960937 39.744141,3.4960938 Z M 39.017578,9.015625 a 1.0001,1.0001 0 0 0 -0.6875,0.3027344 l -0.445312,0.4453125 1.414062,1.4140621 0.445313,-0.445312 A 1.0001,1.0001 0 0 0 39.017578,9.015625 Z m -6.363281,0.7070312 a 1.0001,1.0001 0 0 0 -0.6875,0.3027348 L 28.431641,13.5625 c -1.163042,1.163 -1.16297,3.079187 0,4.242188 l 2.828125,2.828124 c 1.162974,1.163101 3.079213,1.163101 4.242187,0 l 3.535156,-3.535156 a 1.0001,1.0001 0 1 0 -1.414062,-1.414062 l -3.535156,3.535156 c -0.403974,0.404 -1.010089,0.404 -1.414063,0 l -2.828125,-2.828125 c -0.403981,-0.404 -0.403908,-1.010162 0,-1.414063 l 3.535156,-3.537109 A 1.0001,1.0001 0 0 0 32.654297,9.7226562 Z m 3.109375,2.1621098 -2.382813,2.384765 a 1.0001,1.0001 0 1 0 1.414063,1.414063 l 2.382812,-2.384766 -1.414062,-1.414062 z"
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         inkscape:connector-curvature="0" />
+      <rect
+         transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)"
+         y="752.29541"
+         x="-712.31262"
+         height="18.000017"
+         width="3"
+         id="rect5116"
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/drag.png b/app/images/drag.png
deleted file mode 100644
index 433f896d67d82cb3546cd7094bb0d2543cbf0971..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 963
zcmV;!13dhRP)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&000AuNkl<ZNQv!L
zJx?Q76g~INTL%J(Z34y^q^tx;16UhAg50D)0x1rbD?$UJMJf0PTSQ1mh@OTnAf=&l
z=~OPkk_%(LF%dxntdRgO*dV|&@1|JB@(26T>?%c$G}6qS_s+TZzH?`Q&kSb%;d5(z
zInZ-K!!Q~mk;tojK96892wm3^jYe^DasmL*bsc`cA6r{nFiq2JYHIp>U|`^!h}3g@
zvNDiPr@xKGVt-ne6_iq9cXt=rY!+u{XUOOCkW%94=m@!74w*~_rfFh-fB&Doy}iEx
z{00EbtPzp*bWdfKFtfJ2y!`s=>S{I|4y*e5dc<Neq*5sagF(^N)ujMnb8{1GYikIH
z!*IHscysnftgo-b=kvkka$N<3!S9&aMMQ6z`D;<uJ0k1)`udl)wl;KhbinKNilLz)
z0D#Bifyd(!9*;+Oy<S+B1zp$i^81$}5C|xj%cU}zj4}+PVR3Ph4-O7~eWKL_GuM;~
z`ThPE>2w;Wr>8~osi`UWd_DkB%&eN5n=v{%3Qf}hKmowr-5qpY$N2cTVrC?h$ydxQ
z0a${F?n_06hlhV`ZEaQ2XcUi+k4n=t>hA6qPNx&h3}!}SW1|=x928PYDE02FeLf!=
z8XDkqI)&Tq#_{p76MzQbv8-K1H%Lhv8yl2LrHGjUfS=k4A%va1vSUPqP$-1n-rlF9
zWn{Bi2Y><*nMIN9?QI7D%+Aj8#l;2n_4U#D`8hE&;XPI_F$^3I2Q*ECQi@H}gp~3d
z+tNh~_w@8U&dtrS-|xrB$Os$`M={F}fr!A&P)b1vA@cdWy1cxEuIn%CHD&F}<#GrF
z0;sF2gQjWFH0`4z_Bq+>GMNkv!@%U^<j>EF06;pOE+eQ+yz*jZA|hgDvMh_^@i?`#
zw7f0dR5tMo3k!5}bHlZ@wcOv|52`Mssw^Rd-6|X&9wHu(BM=DuQMyK}+>}TpW*;6N
zelHXX+}YVlQdWI=%Ak}25us2hV0Cqs-EMbbdV2b&_f}$KWo1P$vtnk9jg3J{S=RT;
z0*MHQVIYx6a3~ad&CFjB(ZdI`voSF-!O3KjZCIAYl~77CGjk*o;hCA4<R=kVVrglq
zNNy8WikPO!^YioXrk1(NOwUeyDRy>tiZ*>BDSJ;uxWB*0?d`4oT=h@+s7QNzdzrv<
lb0dU6O-)Tz{D1s+@h<>w*z9LaLB0S0002ovPDHLkV1iTO#UTIy

diff --git a/app/images/drag.svg b/app/images/drag.svg
new file mode 100644
index 00000000..139caf94
--- /dev/null
+++ b/app/images/drag.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="drag.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="9.8789407"
+     inkscape:cy="9.5008608"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 7.039733,1049.3037 c -0.4309106,-0.1233 -0.7932634,-0.4631 -0.9705434,-0.9103 -0.04922,-0.1241 -0.057118,-0.2988 -0.071321,-1.5771 l -0.015972,-1.4375 -0.328125,-0.082 c -0.7668138,-0.1927 -1.1897046,-0.4275 -1.7031253,-0.9457 -0.4586773,-0.4629 -0.6804297,-0.8433 -0.867034,-1.4875 -0.067215,-0.232 -0.068001,-0.2642 -0.078682,-3.2188 -0.012078,-3.341 -0.020337,-3.2012 0.2099452,-3.5555 0.2246623,-0.3458 0.5798271,-0.5892 0.9667343,-0.6626 0.092506,-0.017 0.531898,-0.032 0.9764271,-0.032 l 0.8082347,0 1.157e-4,1.336 c 1.125e-4,1.2779 0.00281,1.3403 0.062214,1.4378 0.091785,0.1505 0.2357707,0.226 0.4314082,0.2261 0.285389,2e-4 0.454884,-0.1352 0.5058962,-0.4042 0.019355,-0.102 0.031616,-0.982 0.031616,-2.269 0,-1.9756 0.00357,-2.1138 0.059205,-2.2926 0.1645475,-0.5287 0.6307616,-0.9246 1.19078,-1.0113 0.8000572,-0.1238 1.5711277,0.4446 1.6860387,1.2429 0.01732,0.1203 0.03177,0.8248 0.03211,1.5657 6.19e-4,1.3449 7.22e-4,1.347 0.07093,1.4499 0.108355,0.1587 0.255268,0.2248 0.46917,0.2108 0.204069,-0.013 0.316116,-0.08 0.413642,-0.2453 0.06028,-0.1024 0.06307,-0.1778 0.07862,-2.1218 0.01462,-1.8283 0.02124,-2.0285 0.07121,-2.1549 0.260673,-0.659 0.934894,-1.0527 1.621129,-0.9465 0.640523,0.099 1.152269,0.6104 1.243187,1.2421 0.01827,0.1269 0.03175,0.9943 0.03211,2.0657 l 6.19e-4,1.8469 0.07031,0.103 c 0.108355,0.1587 0.255267,0.2248 0.46917,0.2108 0.204069,-0.013 0.316115,-0.08 0.413642,-0.2453 0.05951,-0.1011 0.06329,-0.1786 0.07907,-1.6218 0.01469,-1.3438 0.02277,-1.5314 0.07121,-1.6549 0.257975,-0.6576 0.934425,-1.0527 1.620676,-0.9465 0.640522,0.099 1.152269,0.6104 1.243186,1.2421 0.0186,0.1292 0.03179,1.0759 0.03222,2.3125 7.15e-4,2.0335 0.0025,2.0966 0.06283,2.1956 0.09178,0.1505 0.235771,0.226 0.431409,0.2261 0.285388,2e-4 0.454884,-0.1352 0.505897,-0.4042 0.01874,-0.099 0.03161,-0.8192 0.03161,-1.769 0,-1.4848 0.0043,-1.6163 0.0592,-1.7926 0.164548,-0.5287 0.630762,-0.9246 1.19078,-1.0113 0.800057,-0.1238 1.571128,0.4446 1.686039,1.2429 0.04318,0.2999 0.04372,9.1764 5.78e-4,9.4531 -0.04431,0.2841 -0.217814,0.6241 -0.420069,0.8232 -0.320102,0.315 -0.63307,0.4268 -1.194973,0.4268 l -0.35281,0 -2.51e-4,1.2734 c -1.25e-4,0.7046 -0.01439,1.3642 -0.03191,1.4766 -0.06665,0.4274 -0.372966,0.8704 -0.740031,1.0702 -0.349999,0.1905 0.01748,0.18 -6.242199,0.1776 -5.3622439,0 -5.7320152,-0.01 -5.9121592,-0.057 l 1.4e-5,0 z"
+       id="path4379"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/app/images/esc.png b/app/images/esc.png
deleted file mode 100644
index ece5f7cbef684a41f4a7bb9d632e4cb2310d6b5d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 385
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAIY)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmP)y9AG<$XUxK0|o|0K2I0N5Rc<;r)=~(;vmpwt~763
z(rf03YMC%Gv!>p;`x=s-3jg3Sv+J08Hk7^Wk+j5=)(kI8VZ)Z0e~+b2TwvK-mAbF2
z{@d)ElGk?5n>TO1$DHDGXL8aMJSYA45_?{oD9s()th9+WhB^2Fuf*zCdB(y{77Tew
z&kS1%{uE|Re6Mm~@64I2-aW6}r=)cIK&W#;RvKH+>Qzztr;B)Z{7}kVtXRpGB`8_-
zo?X|~X2#5`rF$<%rB3&A;!r=3y(X+NI`nR)$B{ESr#C&d_Xb*BZ7(n}k>jDxsd>+C
zaTaJQEjIC;?vf&+TE00gNaUzi!N1irSG<xl=$viJs;0E*=Sxri$7OquytR6@f6=^o
bd3%`kErR(!)cgd73<HCwtDnm{r-UW|jT@JR

diff --git a/app/images/esc.svg b/app/images/esc.svg
new file mode 100644
index 00000000..830152b5
--- /dev/null
+++ b/app/images/esc.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="esc.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="18.205425"
+     inkscape:cy="17.531398"
+     inkscape:document-units="px"
+     inkscape:current-layer="text5290"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:48px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'Sans Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="text5290">
+      <path
+         d="m 3.9331055,1036.1464 5.0732422,0 0,1.4209 -3.1933594,0 0,1.3574 3.0029297,0 0,1.4209 -3.0029297,0 0,1.6699 3.3007812,0 0,1.4209 -5.180664,0 0,-7.29 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5314" />
+      <path
+         d="m 14.963379,1038.1385 0,1.3282 q -0.561524,-0.2344 -1.083984,-0.3516 -0.522461,-0.1172 -0.986329,-0.1172 -0.498046,0 -0.742187,0.127 -0.239258,0.122 -0.239258,0.3808 0,0.21 0.180664,0.3223 0.185547,0.1123 0.65918,0.166 l 0.307617,0.044 q 1.342773,0.1709 1.806641,0.5615 0.463867,0.3906 0.463867,1.2256 0,0.874 -0.644531,1.3134 -0.644532,0.4395 -1.923829,0.4395 -0.541992,0 -1.123046,-0.088 -0.576172,-0.083 -1.186524,-0.2539 l 0,-1.3281 q 0.522461,0.2539 1.069336,0.3808 0.551758,0.127 1.118164,0.127 0.512695,0 0.771485,-0.1416 0.258789,-0.1416 0.258789,-0.4199 0,-0.2344 -0.180664,-0.3467 -0.175782,-0.1172 -0.708008,-0.1807 l -0.307617,-0.039 q -1.166993,-0.1465 -1.635743,-0.542 -0.46875,-0.3955 -0.46875,-1.2012 0,-0.8691 0.595703,-1.2891 0.595704,-0.4199 1.826172,-0.4199 0.483399,0 1.015625,0.073 0.532227,0.073 1.157227,0.2294 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5316" />
+      <path
+         d="m 21.066895,1038.1385 0,1.4258 q -0.356446,-0.2441 -0.717774,-0.3613 -0.356445,-0.1172 -0.742187,-0.1172 -0.732422,0 -1.142579,0.4297 -0.405273,0.4248 -0.405273,1.1914 0,0.7666 0.405273,1.1963 0.410157,0.4248 1.142579,0.4248 0.410156,0 0.776367,-0.1221 0.371094,-0.122 0.683594,-0.3613 l 0,1.4307 q -0.410157,0.1513 -0.834961,0.2246 -0.419922,0.078 -0.844727,0.078 -1.479492,0 -2.314453,-0.7568 -0.834961,-0.7618 -0.834961,-2.1143 0,-1.3525 0.834961,-2.1094 0.834961,-0.7617 2.314453,-0.7617 0.429688,0 0.844727,0.078 0.419921,0.073 0.834961,0.2246 z"
+         style="font-size:10px;fill:#ffffff;fill-opacity:1"
+         id="path5318" />
+    </g>
+  </g>
+</svg>
diff --git a/app/images/fullscreen.png b/app/images/fullscreen.png
deleted file mode 100644
index f4fa0ce8321de23929618a8d82ec0e42c094bafc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 851
zcmV-Z1FZasP)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-va^(3nu(M(YOEr0^mtR
zK~zY`-Bv+s;y@IRx`*0@QVPXFFCKc<lN6z};IS9kf3es8fD$2&8iI+=AMoJ0?4e7c
zHxE`QJ(!9#2thnZb&Ru(Ekh7vW-px*VrsL6-NSw`hnacveR*%@y_e8rGC`JQ5$+X{
zNF;&~8eCmneLFut|HTD_AP76Br>8$+u~>Y$TrSyqG#dTNQ4bJ8V_B9{+$SK*ata|d
z_Hu^3hQr~oH=E7W&xp)sGj%u|_Et8$s*dA0jYi{w=lQUY?Yo2L`EaArxNscD@p5vM
zQfiu}NeChCjb^j?a~-L7yxPBk5JF7TG%2N&!x&>pk`fTY%yc?6m^Vy_=lRVKJlJFc
z?A&xZH6Vl;Ns<y6W6UXva>&A=C`x)X8a;YEx&#2k{O$k%5NkG@mu~yfX!NKkN}5v2
zI1g81E=f|tEo9ra4Iw=76M+z(*tTuE1tdvIFfV<<HmlX@F+yl;S(a6=*U#3ysCvDA
zW?7bn5E@sj)nj)k*NRX|IS65<R;zsv@^ovp+II+H#>>GF@`}7|ghHQ56<>}p_Yd&@
zh<phW+rQ>Xp-|WrMKK<PL=?q%p-|Wj{4yw|T(MZ(S5>uzF~*fj<!D`5sZ=UQ7-Oue
zYO7c*?gz>fK@hf8Rc)~>HVk7T%W}$3K$hi{VHgu;tEy^C5QJ^7NSNpOD4XPRxs7Z#
zd!0-s(`=0p^1N6qUi?04u~@tiLY~<?nM|g$+3a;Lm)l@D!t;ET>vTG|`Fws00I=8X
zcJJKPwBPUd%H?u$T`wt@%gKJf-*cbqcDr`~fW3S^zt!n<ZaGRRZMWMunx@^mtEsN*
zTB%fuf7GlfrCh00itD<rxzB5wcHeHdZ{C`g7rL%L004G_bVL?=0Kl%U>koc>D<Xrz
zKo>>vAZXilU$7{O2ZO;t_j0ZzBO&B@KA%6i*Mb(y`F#H5ehBaWNU(Scg0S-^SuF^{
dj`v;}eggqm-~P^IymkNp002ovPDHLkV1kszf;IpE

diff --git a/app/images/fullscreen.svg b/app/images/fullscreen.svg
new file mode 100644
index 00000000..29bd05da
--- /dev/null
+++ b/app/images/fullscreen.svg
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="fullscreen.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="16.400723"
+     inkscape:cy="15.083758"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <rect
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect5006"
+       width="17"
+       height="17.000017"
+       x="4"
+       y="1031.3622"
+       ry="3.0000174" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+       d="m 7.5,1044.8622 4,0 -1.5,-1.5 1.5,-1.5 -1,-1 -1.5,1.5 -1.5,-1.5 0,4 z"
+       id="path5017"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5025"
+       d="m 17.5,1034.8622 -4,0 1.5,1.5 -1.5,1.5 1,1 1.5,-1.5 1.5,1.5 0,-4 z"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/app/images/keyboard.png b/app/images/keyboard.png
deleted file mode 100644
index f797952513b39cc75d0f0dd4d6716608e10217ed..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1283
zcmV+e1^oJnP)<h;3K|Lk000e1NJLTq001ih000>X1^@s6sPETi000EaNkl<ZScUDD
z+ix316vn@q^<HeRFG+02vE#;x8)ykFMLZ#>RNjzKsl+3H2fX*Se?>)<An`&8ZbC1p
zfRrZCQWbhZz2PXn?>crik)8OqXL!g(Zk)QUl+u@eZ{N<Dncti_GdsW=y%E^+0)!AM
z02u&(g&YK+#TaY!3hIJ2O*6c)vGJv%D5r;phCT$a3_#j1_5dXS*Z|tuZ1y{9(zR;6
zdShZ@qS>?8!v_!lURzreuTz#~)o$Ou{ncK!u58uobz4={SGnacq(;4w(VW_$&Tn0?
zLI}}g46&zAPcHz$ULt<47-LVhIeLJBh>%XF$y!}QAP_(_7UAhsnk>u0Krn#eSd^ug
z(`1!b(Ld0S;X^TADCEg3n(+F)h>wn<SS$*&V8ZM5U?edL!!SfKZ@}yIAfAY$Tq=uP
zE(fp2i}+ZabN=j2?YZ5xY7G~Y7xC>k)A;$yRWL9yH#>)^$thg9d>IhH?CdP2Ca3Y!
z+$BH=%+FuP)Z`TAlCx;HT3FcjvlqAg;`IegPfj5@GlR{|O)M-fVtR5KKVFzYty=4~
ztKG0fWOsT+R-mdX6o&#p2t`()soJ)OkYyQ)Cd1*7006QqL)A1WiV6n6AuCW-4T`LS
zfkAdSplT`{vJ3_WiE(J^mfypX-^<ojFSczrIp^|r2V^rDT3=g7Fc`$(P?%?yGi0r;
zA{Y!IJQU`cOqMFE6$JYF5RJvSVHi|2O!$3XjEs!%l4(-DScK2#MSLXAOQjO!^Z6|w
zALXS|i3<5VTrM}p5@U>W&bH_NSCXW|FATe*W}`{>?%qSaUdQqGj>F}4;qINgs8wq?
z^3GB8_xJJpckYp8Sr|P$hDapBQ%_P<EEEw81u_2iIL~IXlwMj!|3E*EOdRDU)1=3b
z9z*x&c=y;bY!~b9fg_@nBuR-*j-Cf>N7+mkKYV`y^?C#TK0kuNAd)jltXu2&tkJ-U
z58kKbOcIrH1t&i_iO8AL;_9U<c=9BLvBW6G-x{ai7Z!12@ejmeF(k$lbnE7yxOVjy
z_y_tB2m}#{M)pnKOT)^t43F-GEY%^)3M5H_?s9`#He5~@B+lXS`p~F1;nbXf0CVde
zp}ReBx!e#!Ky$j_a_exrbpU|N>4fg~KzHkK$PNeru;=_E_bY=I=X`e&0s?}Fa+y5r
zwvA|P7!KKiTsDVhqk(8N3e~A{qhL_AR>R<62)ak-s}+kX<qCX09|EBPzP`RrC36KH
zkB-n_h;MFeQX!v*rfEA_<(;%dv?NK=*h|6Yaycp)=I-gW?KS{_OAasqHrWtDfO83)
zG1!72Yyy`!IO8BeAR=(S;{}LpFvcKp2|^Is?KUEj2twh(-P?(XvXUglI@$IsgQpfS
z|Jyun-Mj@!+8#$7(0hgfTjvR|ZNkSVKf>o<oav0{x^wr-Y@2f~?f6Q$f~C|Fv5wG#
zz}+DsBKZ7179I*SkJq!?{z7FyL^fmWwLfHp5Gl_2Q&(3P)T0LvH~&ARXX~H)_vfD*
zWEjTRE2WiktJQifZ`oF>MV4j#+H5vY>}A`x{LY_0?>}|w)ThJ4!xj<w8DsLZVh>6}
t2m;U`qQbdz=l(i-_H6Z4&i6*0`Va9a7RbS?<+lI;002ovPDHLkV1f&1X|4bO

diff --git a/app/images/keyboard.svg b/app/images/keyboard.svg
new file mode 100644
index 00000000..137b350a
--- /dev/null
+++ b/app/images/keyboard.svg
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="keyboard.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/keyboard.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#717171"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="31.285341"
+     inkscape:cy="8.8028469"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-smooth-nodes="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 7,3 C 4.8012876,3 3,4.8013 3,7 3,11.166667 3,15.333333 3,19.5 3,20.8764 4.1236413,22 5.5,22 l 14,0 C 20.876358,22 22,20.8764 22,19.5 22,15.333333 22,11.166667 22,7 22,4.8013 20.198712,3 18,3 Z m 0,2 11,0 c 1.125307,0 2,0.8747 2,2 L 20,12 5,12 5,7 C 5,5.8747 5.8746931,5 7,5 Z M 6.5,14 C 6.777,14 7,14.223 7,14.5 7,14.777 6.777,15 6.5,15 6.223,15 6,14.777 6,14.5 6,14.223 6.223,14 6.5,14 Z m 2,0 C 8.777,14 9,14.223 9,14.5 9,14.777 8.777,15 8.5,15 8.223,15 8,14.777 8,14.5 8,14.223 8.223,14 8.5,14 Z m 2,0 C 10.777,14 11,14.223 11,14.5 11,14.777 10.777,15 10.5,15 10.223,15 10,14.777 10,14.5 10,14.223 10.223,14 10.5,14 Z m 2,0 C 12.777,14 13,14.223 13,14.5 13,14.777 12.777,15 12.5,15 12.223,15 12,14.777 12,14.5 12,14.223 12.223,14 12.5,14 Z m 2,0 C 14.777,14 15,14.223 15,14.5 15,14.777 14.777,15 14.5,15 14.223,15 14,14.777 14,14.5 14,14.223 14.223,14 14.5,14 Z m 2,0 C 16.777,14 17,14.223 17,14.5 17,14.777 16.777,15 16.5,15 16.223,15 16,14.777 16,14.5 16,14.223 16.223,14 16.5,14 Z m 2,0 C 18.777,14 19,14.223 19,14.5 19,14.777 18.777,15 18.5,15 18.223,15 18,14.777 18,14.5 18,14.223 18.223,14 18.5,14 Z m -13,2 C 5.777,16 6,16.223 6,16.5 6,16.777 5.777,17 5.5,17 5.223,17 5,16.777 5,16.5 5,16.223 5.223,16 5.5,16 Z m 2,0 C 7.777,16 8,16.223 8,16.5 8,16.777 7.777,17 7.5,17 7.223,17 7,16.777 7,16.5 7,16.223 7.223,16 7.5,16 Z m 2,0 C 9.777,16 10,16.223 10,16.5 10,16.777 9.777,17 9.5,17 9.223,17 9,16.777 9,16.5 9,16.223 9.223,16 9.5,16 Z m 2,0 C 11.777,16 12,16.223 12,16.5 12,16.777 11.777,17 11.5,17 11.223,17 11,16.777 11,16.5 11,16.223 11.223,16 11.5,16 Z m 2,0 C 13.777,16 14,16.223 14,16.5 14,16.777 13.777,17 13.5,17 13.223,17 13,16.777 13,16.5 13,16.223 13.223,16 13.5,16 Z m 2,0 C 15.777,16 16,16.223 16,16.5 16,16.777 15.777,17 15.5,17 15.223,17 15,16.777 15,16.5 15,16.223 15.223,16 15.5,16 Z m 2,0 C 17.777,16 18,16.223 18,16.5 18,16.777 17.777,17 17.5,17 17.223,17 17,16.777 17,16.5 17,16.223 17.223,16 17.5,16 Z m 2,0 C 19.777,16 20,16.223 20,16.5 20,16.777 19.777,17 19.5,17 19.223,17 19,16.777 19,16.5 19,16.223 19.223,16 19.5,16 Z M 6,18 c 0.554,0 1,0.446 1,1 0,0.554 -0.446,1 -1,1 -0.554,0 -1,-0.446 -1,-1 0,-0.554 0.446,-1 1,-1 z m 2.8261719,0 7.3476561,0 C 16.631643,18 17,18.368372 17,18.826172 l 0,0.347656 C 17,19.631628 16.631643,20 16.173828,20 L 8.8261719,20 C 8.3683573,20 8,19.631628 8,19.173828 L 8,18.826172 C 8,18.368372 8.3683573,18 8.8261719,18 Z m 10.1113281,0 0.125,0 C 19.581551,18 20,18.4184 20,18.9375 l 0,0.125 C 20,19.5816 19.581551,20 19.0625,20 l -0.125,0 C 18.418449,20 18,19.5816 18,19.0625 l 0,-0.125 C 18,18.4184 18.418449,18 18.9375,18 Z"
+       transform="translate(0,1027.3622)"
+       id="rect4160"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sccssccsssssccssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+       d="m 12.499929,1033.8622 -2,2 1.500071,0 0,2 1,0 0,-2 1.499929,0 z"
+       id="path4150"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>
diff --git a/app/images/mouse_left.png b/app/images/mouse_left.png
deleted file mode 100644
index 1de7a486c76ff1b95efd7e5ee36dd6943cc6dd3a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 511
zcmV<b0RaAqP)<h;3K|Lk000e1NJLTq000&M000>X1^@s6HR9gx0005TNkl<ZNQu>y
zKhD}f5XIlxu*TB5qC!GGMv9cV1WC&YKqwXxk_(^!S^N<d5*5k;k_+SnIRh0{6r(LH
z3@q|)s*kWXD<Jw3C9j*&zTfPQW(WA+MDmF+4AtRqK)GCoQVK!{0D$8-001Ebq?DkP
z!nSRkPA5eOAyE_&BY3e`eC3?K`x1Y+<lfgmBM5?garFEBOFWy+pp-(V)4A}hYr}50
zdwUH90LED1nUzXKi`(rs(lnLVISouH)g1s_*DZi=<s8S+SXv;ZL|%{PvMkeL4J?Ex
zIQIK}0g|R^A$L3;&8@I)yI|m)KLn<fYOyvIgTWx<oD;?vA*3*gzf6QcDFpz?vP=O`
zj4^b(-OJ5N*M{@?jLBqTCK~DhAj9F%+=`c5JfoKnl=oV<4nL!OZ(j{;(q99=TA@7X
z`yT;&p7&`y9{(1|bzSqW2!h~a9LG;Xd%Yff-~VO=1Ay=QKcXml7`j@mKq=if8jUx1
z4^OAlY&06Fdz#PZDh$Ky7Q^^`m&>KxY&N7`ufy{^BuRp5wTe=yggB0|-EL8<)l{q1
zx;aUA_riL;R!Ne;vMfj`A*BRk49#Zq*`4x_>nA1i%`P>6%qjo?002ovPDHLkV1jL+
B<81%{

diff --git a/app/images/mouse_left.svg b/app/images/mouse_left.svg
new file mode 100644
index 00000000..ce4cca41
--- /dev/null
+++ b/app/images/mouse_left.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mouse_left.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="15.551515"
+     inkscape:cy="12.205592"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0068f6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
+       id="path6219" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
+       id="path6217" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
+       id="path6215" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
+       id="rect6178" />
+  </g>
+</svg>
diff --git a/app/images/mouse_middle.png b/app/images/mouse_middle.png
deleted file mode 100644
index 81fbd9bd375b2daa88b6bac6a7972c58b708a67b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 517
zcmV+g0{Z=lP)<h;3K|Lk000e1NJLTq000&M000>X1^@s6HR9gx0005ZNkl<ZNQu>y
zzltJ35XQfr(H;kS;J`?bd5jA#-1w4>%zXkyP6VL?HBbltU?dpHCifEe1osR^UUJ;X
z1cRfFO!r0W*)ulkvb)@VSrz^Ls=KHz;G>D86P$Co+wG9g=OLv;9LE3v%d!9faU4Sk
z0ZJ)M)5PI$kc1H8c^=V%XS3OlAP62f=cn9oIK=l~k4o{cpPta^bWZVPGJ%v5jYi|d
zGtLd0&F0HF6aW}wnP(OX1tqT6>xiOAoaYoUrBrnQux&d7zLc{pOJOO25CUo4noE*I
zi4|}h#~H_VyUjqND9Ysa`@OyurfFsjK@i*orj#nNG8Nr!Hwl7(FvbWWnMwR-A_P)O
z06>x?5`bikq19@gZk9VY9FIqgMk75@QwIR)^?LeNJm2CTJ%6CI*SK`}9;JKxYG9q-
z4g6|_(xBgO0(KndX)qYP2xQx~epfV`&2PT%-wkcI+i+d?rxpwVuIv8sJnv@cVzB_F
zbX%!ZK3_dN9*>iLzb~(8I-N?+d2)%N{l4@0T&z|rQZAR_I1a)vM6p;zE|-Jv`&h5n
zD3waGR;yi{q^o;jxm?OH3}F}sgb)xyfH8(@wR-PP`Oozit@F&YG*W3V00000NkvXX
Hu0mjf=bh+1

diff --git a/app/images/mouse_middle.svg b/app/images/mouse_middle.svg
new file mode 100644
index 00000000..6603425c
--- /dev/null
+++ b/app/images/mouse_middle.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mouse_middle.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="15.551515"
+     inkscape:cy="12.205592"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
+       id="path6219" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
+       id="path6217" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0068f6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
+       id="path6215" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
+       id="rect6178" />
+  </g>
+</svg>
diff --git a/app/images/mouse_none.png b/app/images/mouse_none.png
deleted file mode 100644
index 93dbf5780777973578edaf7ae35f65ed01e5718e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 497
zcmV<N0S^9&P)<h;3K|Lk000e1NJLTq000&M000>X1^@s6HR9gx0005FNkl<ZNQu>y
z!HVKQ5QhIwv}2%i@+3$eV-E8o-hBc+tO#O*=)n*Y#FOAj_Br+m_8B~RS~ikHFlwZ`
z_b|+0CpM$Y>@fS^{-W!vqNpz5e-kMOIOpnkJfdE&Ln(!#C;$MC;{X7PqJWeVlv3EX
zjq~}e2q7d4!wTz7%jNRNWHM3L3W7kDH6D*OAIGtZqDWn{tZTF1@1Hs6S~130rGZAH
zq4|Elk37$%5lku7GXS`*TLIsSIgX>TG$W-%S@*_-5SrJ(MNw2T4u?YplIM9Pb~>HR
zqp)qel8~n9U0_P7=Cu`>PNyPGQ^FV{gqXL75CWxMmOu!h04T;7hQr}oXSM5u%jJS7
zip)eq9ROrDo0&)P+QlP!{Xpeh>(=8(RG#gJflc}}@P`#DgMR%Ju;+Q-gCO`Tkn6hU
zTQL|6z9mWWFmyB;!T0^2Mlb;QzW+N6!@HsD^%|7YL#NYudiQZ0$6`L8R}Oqxi^W25
z&c!W;@%ye;E4kfnNxR*K=XuDo49#W}wOS2Hl3=&nq19@sUaxm^lis}xo6SaLSq96p
nAf<$q5{xl)yWK}`$`{uk{?qW@S6u}n00000NkvXXu0mjfItA$@

diff --git a/app/images/mouse_none.svg b/app/images/mouse_none.svg
new file mode 100644
index 00000000..3e0f838a
--- /dev/null
+++ b/app/images/mouse_none.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mouse_none.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="23.160825"
+     inkscape:cy="13.208262"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
+       id="path6219" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
+       id="path6217" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
+       id="path6215" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
+       id="rect6178" />
+  </g>
+</svg>
diff --git a/app/images/mouse_right.png b/app/images/mouse_right.png
deleted file mode 100644
index 355b25dc9a03e6d8dc4b956dc51185b5ff8f63e9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 513
zcmV+c0{;DpP)<h;3K|Lk000e1NJLTq000&M000>X1^@s6HR9gx0005VNkl<ZNQu>y
zv8ozD6o&uV)may2D=R@3@)EbWW$N@+xA6%C$s!2bXrV5OSP52gU*WcSf;@wyunJk3
zz~ZVSJ9DdRoLvVs+=S%s&SC!V%pA@f;C~azC&DmPyWI}uav4e~2q6Ffj^h9Tgb<KY
zf>H|GwsANd6d{B}QACX3*=+WObN(?5!&7cF8X*XRd~v+|d^*KXA6}r8Lc85Q@vL*h
zX0v%bhXMd&tnkcArJ}{p-##HtQ+b}#z?4$m0l;<L0{BwSaU6}M1yV}nb!#rmGA-7?
zLWqK6yWJKbX_^*t`~BYB3fr~|2G03SU`nYLYg5td^)k*mVT=(%3X}NDL<p2p0DvsZ
z6ad8-L#NX@-K=zOI3AA}kH==Bp$-7j@Au8Ec)P_tdiy|muXXA0J<9j?-M}XOHSoI?
z%7ecD5wPcZ&%@#Hw?MAzns-GI1fSzLz8l)@cH#T}S0fkzeBb{OMbXXB#bN<U>9)~m
zJX}3InM|_5V4$vPI-RO846{oN<M*A<=W?}Lk$Sxj&-0KZ398j9N~IFwIL3OtMy*y;
ztyb&eBwgJL%jHrfNdn8VAf<$q5{xl4o6UQ7%0I4G4EN10qGF$t00000NkvXXu0mjf
D&c^Su

diff --git a/app/images/mouse_right.svg b/app/images/mouse_right.svg
new file mode 100644
index 00000000..f4bad767
--- /dev/null
+++ b/app/images/mouse_right.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mouse_right.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="15.551515"
+     inkscape:cy="12.205592"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
+       id="path6219" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0068f6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
+       id="path6217" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
+       id="path6215" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
+       id="rect6178" />
+  </g>
+</svg>
diff --git a/app/images/power.png b/app/images/power.png
deleted file mode 100644
index f68fd0813c02a625f3fb5097353b7825f287939f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 390
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAIY)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmP)r;MP5p&nmUBLf4Yu&0Y-h{y4#VS!wS40wF6uK&wz
zeJ1b0dp`q-xCQJ1W&L*#{jK6yZ}@>J>(2+?q>Rf`4Fzff;%=K%nq(i6F}{53M#?;U
zLBZzq!>RXN<jS(|rfe+{b$Oy}#$WyD-<fL}Gb^9)ckDM@>prLZ*hUsB!Gewso}{}^
zyS5zqsqt+q$3eS=bG3syL}aJxswlO({ZMz^<8@I+aHiGz+=bUm8NM^#j@;<7{?FO#
zrb}1(?6I-+nz%_ndc~vpE9T2SE8eKOh+S~6fqC~wzI*9n-{OAGRx&S`su`qNAN+(V
z&&XBkX?|VBYQH4q-F|DjwzF)~vb(lB%jUA~j<{R9onkH8Tw^2Zl+T|DXQ^pge?vdW
h@Q(gJk3Tz4NXMlvaGP>8%>o!=44$rjF6*2UngBV_o1g#y

diff --git a/app/images/power.svg b/app/images/power.svg
new file mode 100644
index 00000000..4925d3e8
--- /dev/null
+++ b/app/images/power.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="power.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="9.3159849"
+     inkscape:cy="13.436208"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 9 6.8183594 C 6.3418164 8.1213032 4.5 10.849161 4.5 14 C 4.5 18.4065 8.0935666 22 12.5 22 C 16.906433 22 20.5 18.4065 20.5 14 C 20.5 10.849161 18.658184 8.1213032 16 6.8183594 L 16 9.125 C 17.514327 10.211757 18.5 11.984508 18.5 14 C 18.5 17.3256 15.825553 20 12.5 20 C 9.1744469 20 6.5 17.3256 6.5 14 C 6.5 11.984508 7.4856727 10.211757 9 9.125 L 9 6.8183594 z "
+       transform="translate(0,1027.3622)"
+       id="path6140" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 12.5,1031.8836 0,6.4786"
+       id="path6142"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/app/images/settings.png b/app/images/settings.png
deleted file mode 100644
index a43f5e100b3dc9b5aa30812521b036e085b44a39..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2495
zcmZWq2{ap67mm@f1(k}e3~4G-RY|Rth{RgU#IA}GOA<syf|x{$s;Snll&WY{8Ksui
zQhQN~8EsWnDPvcXQIy|Wstld~@0oM{cg}t9zI(p=-S6IW-g)tMHs)d?M@0YtfS9F)
zsl)y$cVI#S`+LV+ED-?USEQJj*jbvGK<q+jzLY>R0Knplb(*-?ZwKD}lgz1@N<{mC
zgt7i<K_o|p$=%wE=No(6KI+yTv&eZsb!T@eFGf`e4kyykoy`9TVz&fEhkvDAP8aI}
zdw(vAgW@-!)wwy^)^JDuhRvpltxqU8Z-$V!73|gzMji&AbF}Sj-|3hEPpt3}6in21
z{H+tOOIxX!8y@bj3SX*T6<6#EWPGAcl<pD-*qNfBWd%q}hE4}`$~BMT{*ECzIT*jh
z(a>q{!H2pO9THaZ)1wiuP9-HDzwN87W5^b67wj}f|6FgVcZV{$DmL``DtHF2@-Q8d
zh$%I5K+clPszf)Il|p}A@vJD$n9C{WNhDL*ayESt3FAtrNO}?%Fwlnclx;Su=g?hr
zKNRRh8TTkZ0;x3fJ~1eF7Rl@^SJfjh1?8tcPLH$#DO@0bJe%9UxMr7LaZkHdTg!Fz
z!=hd0p?QtY^^Kp;t~EBlA4$6<_(2C-q&j%TaJPALJtSc^JbiioiDL4=+J$tq^T^0d
z&x7O7JDB!3ehcH66a~_W$uwh8Z#J=`<TGAc4r=w=TMEM|yh?9S|HQ4^iwfqfZcp)g
zg7o@@s``z|FS%o|_bE@MVms>!hU^z>uFf@9NwVdygn1Vh1Wlc3n9Y%=mI8(BcN1nS
zEePZnwlVha!*sbf9kX`AfW4X-pJ2ZnaS?4STPA!y87N{KE7P9U`tFa{<K>{2(ZQ#%
zrMZqhT???c__y<<`qqSX<1X2)n;Ir=oEBy4y9ub3Kka~U0cOlRciJ8KUNE=mmB-X}
zgHSml<akQE%(_{`vE>%67OZC-EzY}Wq@|xUU!dVO-_)Phm|uA*BXtD6VUSWHDOXk5
zQW@ner1m7A7+_V+um$kLs5V)vKi*mbT?0nMJyMTPE%iBn(^gG{mMu!i619A6F^s6t
zPhI4%bsY5IQanRZt0(Dm@?W3NBhH)?Ajm!I3q{D}X@$)QS40p_%}b3aVRGxD)AUD(
z<pxym#zd@h=?DXHL6NWNaOuFk-jaba-pmyst6)dq;c=0{_WPci`wvE#Zs8gV001Qq
zj1R!RD+>Vd1yP(_7%tX$G?7L{c#~*8WCV*!-$w%g7#4cprIH!m5EeBsC=|^yfPO=u
z_x*z~5(@bSVO%tTx>(ymOlTowh&DnSaT<yhfj}Ub5Rxz2!Sw8Z)Aw%%P=5x4jz%Jx
zOeTV<g`kD_AvI7a6!NqtQd3iXAE6!^9>nlwsRxA~|A*v%Jf`GOVhDxKpwNOK2fW@s
zv@nJN6naqT`}#*GiTJ$^JuD>fTNM%!Ne(1a$w7=zqy|C*`JH?}7egYVL&JOm$VA3B
z-QVfHHDK)Rhx}I<gZzIq26>?9Ukd+e|66pwf2;@w`F)mHky)IW5dd(g$I{fu$wG|d
ze9__p6WkgfAMeb09B}J?dhyshtD+}vXUM0e9zf;!?ae{B&)zxhEoBoisbXBO1aw(x
zl*GMvTX_S=d^jd{A8$~k#v&fHc)T}DPR%wg=#JtcHbZEq@Y^?@@9p%W_V&W>U55SA
z#A#Rvpi(2J=jXq??(U9%IX+GZHZp4a`f@ara5j$gw!dF0pk})#DJiKmI5@b4Kp+Tb
zHLG3D^a=}Ghle!m6jxNx<31D>7Mg8;{_I{@os%Q~;p4}WS=N*H0|OrXi@<FBAp73E
z)>AW<*QQRYsojc=jg3?QgV&x94`)Xbi3K4M5j#eB{HqJOxw)QjW#!*4*0??F^CwA5
zON(A=-u=D2yxa|k!%<l*){l^23S~}p(1T-B_d*Q{Q*d&2CM+#2d3I!bHa9oFtbg)c
z@=#oxm!8s3KaJgCvoD1+7$h7PTf4NdFf=kUqGXhG<vbW6^ym)$frbm6Qw_ypu}Ntb
z^#%T$o10lGDk=gX5OdgkDtp+c5(5?%(K$kJb1P9)P`E248=;zkadmaA)X~+An%&{X
zevC<%p<i|;35%b&z+GF*;7k1x4a~Z6Ly)MOqe|+%#%MR2g8q<E{It0l2XU_#7Z;bk
zHl4M&xCo0iK6Y4K+(uYP=uIAtr2&oxo2{aRT31XVfnoPcG8`UigN^I#&6HqpxL-cp
zU9W9y%tJtU_d$OC^q0!Y%H#PmGBOjUt`p{+&A)f|VNoc`pQED-rhKwx&ZWD{%gb<G
zS1Ofi;PvRfvUSCpu{f8<lSxcSc=x(8C?Md43xQDUQ9lV06%$)Lqpkh4m)kKm_SH8q
zFwnx^zgQk4akOhXZf~ikrUuE8`>Oz#1|QV&Q{*^0IE>%4P(BuDGkIG$vn{WW0DGDD
z<(w>>;B_?i2aDQK-)hxZ?e@O&qA!N7L-o4)I!+on&f4Jd#cw+6GOfspzWpOk>Z9$l
z4Vjsl>&IS4eC5r~dUSVpZym9x&(8QO$;oXAq8jR2TlYi_m@x`CnPjPYm4_uIRyNkw
zkqS~$VX;m4%$ml=#_HPI4M6oA2(#IBx3Q?t-+^u>4Fa{rYkGKiRNon7Zf|enF@31)
ziXp0(*W|-cO^Q22aAR(c0_=*Dvf`KxX@N7Qg9lj>L+#T%psklIsw{7K)eV@tgTFql
zxu=^-@3?*YwymG9Z_?w!wqW7H^7(}Y#?&}CSqeWTk!e+!n3A%={jh}-I`?*e+7rea
z_@vQ>1{5wu<)|8u$8*jYr+HOnFMRqG6{ivzb7&%ZW%Si6yuIYrJ;9^(;gOM%A;G~K
z>YAEW5=`n}D@&(yMPV@5-rSV?^e+)&ChVLX{WlR40s;bOO|1CqGcz(6bp-{)=OEB!
zTiae>{#7Qwgq7X?J9Kh%T$Q7vqHSAFz{OQ`JcOcKRDYZCFw}&Ux3om%I>yw`#|z|n
zUlKHYQJnLb55uSVnr?6NtOE5cX-q_q{|&zGO$v7#sNWPVA1%QlSze#%<zw849{0&A
zmWwwQi%$+I1ibkpFGXc@c6fMrO}%KDlV4f~8st5jGjcE#aV1t%n@H+6Ax=!mKG6rK
sJFMI}i*q%{1spPkPg1~EcaddR_?Qx%*_aJyzk`p%(#*#6k+E0I-+L}>Y5)KL

diff --git a/app/images/settings.svg b/app/images/settings.svg
new file mode 100644
index 00000000..dbb2e80a
--- /dev/null
+++ b/app/images/settings.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="settings.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="14.69683"
+     inkscape:cy="8.8039511"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="M 11 3 L 11 5.1601562 A 7.5 7.5 0 0 0 8.3671875 6.2460938 L 6.84375 4.7226562 L 4.7226562 6.84375 L 6.2480469 8.3691406 A 7.5 7.5 0 0 0 5.1523438 11 L 3 11 L 3 14 L 5.1601562 14 A 7.5 7.5 0 0 0 6.2460938 16.632812 L 4.7226562 18.15625 L 6.84375 20.277344 L 8.3691406 18.751953 A 7.5 7.5 0 0 0 11 19.847656 L 11 22 L 14 22 L 14 19.839844 A 7.5 7.5 0 0 0 16.632812 18.753906 L 18.15625 20.277344 L 20.277344 18.15625 L 18.751953 16.630859 A 7.5 7.5 0 0 0 19.847656 14 L 22 14 L 22 11 L 19.839844 11 A 7.5 7.5 0 0 0 18.753906 8.3671875 L 20.277344 6.84375 L 18.15625 4.7226562 L 16.630859 6.2480469 A 7.5 7.5 0 0 0 14 5.1523438 L 14 3 L 11 3 z M 12.5 10 A 2.5 2.5 0 0 1 15 12.5 A 2.5 2.5 0 0 1 12.5 15 A 2.5 2.5 0 0 1 10 12.5 A 2.5 2.5 0 0 1 12.5 10 z "
+       transform="translate(0,1027.3622)"
+       id="rect4967" />
+  </g>
+</svg>
diff --git a/app/images/tab.png b/app/images/tab.png
deleted file mode 100644
index 84134872a881a627f745a432a3c951254cda26cb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 387
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAIY)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmP)y9AGr(VqkNfCexMc)B=-cpQH_#nA7tgMe!?hZ5_{
zMsAl!Od$nK=NL4coJ!_2I4fwan^<CE$0W3Af$~K$kt4EwH*WmrJ?pkfr>WPez236Q
zxV~)Pmbreb!~RE$eG$IAmU)pz*R|Ls(Q=zi{&XKq&Aq}nY2Dc~42<~)YG*C`o4+Gi
zfzhrp-BY~xz4ptrjS(^y&#NZ29sIEF7IV+@&p+#?rS3j(<BZRxpX;4_9#<Ii%n7UB
z^SwFsY_&bdo#3^e^PaaKVE(|jV$0T5wv$h$R7Vz{`^q%^>MVx!X=$#3b5uMxna)02
zw(86+ea1O6Bj-JL&z$wG@ph=1;^e&(PHLnW<rJ+;ejxbaK**)5TEd>`jei;9RARTq
fhprAg`;}G9rs2;o<>%Ld!NuU|>gTe~DWM4f3=5y^

diff --git a/app/images/tab.svg b/app/images/tab.svg
new file mode 100644
index 00000000..1ccb3229
--- /dev/null
+++ b/app/images/tab.svg
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="tab.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="11.67335"
+     inkscape:cy="17.881696"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 3,1031.3622 0,8 2,0 0,-4 0,-4 -2,0 z m 2,4 4,4 0,-3 13,0 0,-2 -13,0 0,-3 -4,4 z"
+       id="rect5194"
+       inkscape:connector-curvature="0" />
+    <path
+       id="path5211"
+       d="m 22,1048.3622 0,-8 -2,0 0,4 0,4 2,0 z m -2,-4 -4,-4 0,3 -13,0 0,2 13,0 0,3 4,-4 z"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/app/images/toggleextrakeys.png b/app/images/toggleextrakeys.png
deleted file mode 100644
index ad8e0a70d3eb7b5f4462f808ab987053fa4b0e56..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 735
zcmV<50wDc~P)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-3J*792=g7&T0Sv0&Gb{
zK~zY`y;U)56hRdJ-ppi!CtQjM#~p&_LBP(=X7C5tSO^h>^eIGa3<yEe2`MZ@Ez$`A
zQ)m$|{~!zmi*$QU;4n6FlE9IL4I5|Pv)K!mb8jztNggc2?E4<yoA>6M2V8-Xh|B|c
z0YCsW^8Y^p1OTrA>=4nxq$KMA7Do8L0eDPA`$bOYTou6Q5W<ZR0<_l9S|0$Ix7Hr@
zaVF2W%%sF;MC5M0Uaz%UEp$2^bi3Uy5t%`dnt<RGV~l}P3dWei7<Cbi6_GP*5lK`M
zA6-NeCWP=+Yfbt7c7ELN`ML$**Tf{om<<3Mm#Gsoq?5m{cwa9>wB?-B01PwB;o+fp
z@6A9JPGh|HW^;3MYIb&(lu~2>JOprWOfs+X(zO7*G{&IWY)S}WI)qTwS_1&I)`+60
zs<nPIGc%JNA0HDlpGzl$)&Y<(^Ydo2iAtpcW=5Z+(P*Gnt6ft{Eu?9RIF13}Ekxv_
zjJKU3rLQ^XI8D<+aGIv#oMY$Q+JEW9IY-voMP^=(<M<>=k~97!Nf5{J2{SKSYZsk!
zq|T{@Q;fA%^7^l4S+>${x24zX0RVcv9@_1;WLdVNwO;Mx$$S4qYyEJ{)3QZGpGKVQ
zol@%Q+}s@P?d=IOf3Vg*D|!~HBfiQIZhFw~y}v0UHRs&Y_V#w_oLlObbksbl7bJR=
zW!a-Biry2^oe}TWL6&6?c6WEL1K79Lh9b~<$*uY=B349xlweX3xmDIsHAW{M0OxBN
zM#hm`x?LGbnNFs>_XJ?74D&DZq%~Aq4WMI;iJAF}QtEy|Z#01TB4*CS_6MPNtqWrX
RMSuVR002ovPDHLkV1j-yMWX-!

diff --git a/app/images/toggleextrakeys.svg b/app/images/toggleextrakeys.svg
new file mode 100644
index 00000000..b578c0d4
--- /dev/null
+++ b/app/images/toggleextrakeys.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   viewBox="0 0 25 25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="extrakeys.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="15.234555"
+     inkscape:cy="9.9710826"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1027.3622)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 8,1031.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,8.9996 c 0,2.1987 1.8012876,4 4,4 l 9,0 c 2.198712,0 4,-1.8013 4,-4 l 0,-8.9996 c 0,-2.1987 -1.801288,-4 -4,-4 z m 0,2 9,0 c 1.125307,0 2,0.8747 2,2 l 0,7.0005 c 0,1.1253 -0.874693,2 -2,2 l -9,0 c -1.1253069,0 -2,-0.8747 -2,-2 l 0,-7.0005 c 0,-1.1253 0.8746931,-2 2,-2 z"
+       id="rect5006"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssssssssssssssssss" />
+    <g
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'DejaVu Sans';-inkscape-font-specification:'Sans Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="text4167"
+       transform="matrix(0.96021948,0,0,0.96021948,0.18921715,41.80659)">
+      <path
+         d="m 14.292969,1040.6791 -2.939453,0 -0.463868,1.3281 -1.889648,0 2.700195,-7.29 2.241211,0 2.700196,7.29 -1.889649,0 -0.458984,-1.3281 z m -2.470703,-1.3526 1.99707,0 -0.996094,-2.9004 -1.000976,2.9004 z"
+         id="path4172"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
diff --git a/vnc.html b/vnc.html
index 1987bb4c..b5bd2822 100644
--- a/vnc.html
+++ b/vnc.html
@@ -55,21 +55,21 @@
         <div class="noVNC_buttons_left">
 
             <!-- Drag/Pan the viewport -->
-            <input type="image" alt="viewport drag" src="app/images/drag.png"
+            <input type="image" alt="viewport drag" src="app/images/drag.svg"
                 id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
                 title="Move/Drag Viewport" />
 
             <!--noVNC Touch Device only buttons-->
             <div id="noVNC_mobile_buttons" class="noVNC_hidden">
-                <input type="image" alt="No mousebutton" src="app/images/mouse_none.png"
+                <input type="image" alt="No mousebutton" src="app/images/mouse_none.svg"
                     id="noVNC_mouse_button0" class="noVNC_button" />
-                <input type="image" alt="Left mousebutton" src="app/images/mouse_left.png"
+                <input type="image" alt="Left mousebutton" src="app/images/mouse_left.svg"
                     id="noVNC_mouse_button1" class="noVNC_button" />
-                <input type="image" alt="Middle mousebutton" src="app/images/mouse_middle.png"
+                <input type="image" alt="Middle mousebutton" src="app/images/mouse_middle.svg"
                     id="noVNC_mouse_button2" class="noVNC_button" />
-                <input type="image" alt="Right mousebutton" src="app/images/mouse_right.png"
+                <input type="image" alt="Right mousebutton" src="app/images/mouse_right.svg"
                     id="noVNC_mouse_button4" class="noVNC_button" />
-                <input type="image" alt="Keyboard" src="app/images/keyboard.png"
+                <input type="image" alt="Keyboard" src="app/images/keyboard.svg"
                     id="noVNC_keyboard_button" class="noVNC_button"
                     value="Keyboard" title="Show Keyboard" />
                 <!-- Note that Google Chrome on Android doesn't respect any of these,
@@ -80,16 +80,16 @@
                     autocorrect="off" autocomplete="off" spellcheck="false"
                     mozactionhint="Enter"></textarea>
                 <div id="noVNC_extra_keys">
-                    <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.png"
+                    <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
                         id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
                     <div id="noVNC_modifiers">
-                        <input type="image" alt="Ctrl" src="app/images/ctrl.png"
+                        <input type="image" alt="Ctrl" src="app/images/ctrl.svg"
                             id="noVNC_toggle_ctrl_button" class="noVNC_button" />
-                        <input type="image" alt="Alt" src="app/images/alt.png"
+                        <input type="image" alt="Alt" src="app/images/alt.svg"
                             id="noVNC_toggle_alt_button" class="noVNC_button" />
-                        <input type="image" alt="Tab" src="app/images/tab.png"
+                        <input type="image" alt="Tab" src="app/images/tab.svg"
                             id="noVNC_send_tab_button" class="noVNC_button" />
-                        <input type="image" alt="Esc" src="app/images/esc.png"
+                        <input type="image" alt="Esc" src="app/images/esc.svg"
                             id="noVNC_send_esc_button" class="noVNC_button" />
                     </div>
                 </div>
@@ -98,12 +98,12 @@
 
         <div class="noVNC_buttons_right">
             <!-- Send Ctrl+Alt+Delete -->
-            <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
+            <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
                 id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
                 title="Send Ctrl-Alt-Del" />
 
             <!-- XVP Shutdown/Reboot -->
-            <input type="image" alt="Shutdown/Reboot" src="app/images/power.png"
+            <input type="image" alt="Shutdown/Reboot" src="app/images/power.svg"
                 id="noVNC_xvp_button" class="noVNC_button"
                 title="Shutdown/Reboot..." />
             <div id="noVNC_xvp" class="noVNC_panel">
@@ -113,7 +113,7 @@
             </div>
 
             <!-- Clipboard -->
-            <input type="image" alt="Clipboard" src="app/images/clipboard.png"
+            <input type="image" alt="Clipboard" src="app/images/clipboard.svg"
                 id="noVNC_clipboard_button" class="noVNC_button"
                 title="Clipboard" />
             <div id="noVNC_clipboard" class="noVNC_panel">
@@ -125,12 +125,12 @@
             </div>
 
             <!-- Toggle fullscreen -->
-            <input type="image" alt="Fullscreen" src="app/images/fullscreen.png"
+            <input type="image" alt="Fullscreen" src="app/images/fullscreen.svg"
                 id="noVNC_fullscreen_button" class="noVNC_button noVNC_hidden"
                 title="Fullscreen" />
 
             <!-- Settings -->
-            <input type="image" alt="Settings" src="app/images/settings.png"
+            <input type="image" alt="Settings" src="app/images/settings.svg"
                 id="noVNC_settings_button" class="noVNC_button"
                 title="Settings" />
             <div id="noVNC_settings" class="noVNC_panel">
@@ -170,10 +170,10 @@
             </div>
 
             <!-- Connection Controls -->
-            <input type="image" alt="Connect" src="app/images/connect.png"
+            <input type="image" alt="Connect" src="app/images/connect.svg"
                 id="noVNC_connect_controls_button" class="noVNC_button"
                 title="Connect" />
-            <input type="image" alt="Disconnect" src="app/images/disconnect.png"
+            <input type="image" alt="Disconnect" src="app/images/disconnect.svg"
                 id="noVNC_disconnect_button" class="noVNC_button"
                 title="Disconnect" />
             <div id="noVNC_connect_controls" class="noVNC_panel">

From b0c6d3c6aa15e90642048c2f789c5e19bfbb7a63 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Aug 2016 16:55:55 +0200
Subject: [PATCH 23/46] Remove redundant modifier state variables

---
 app/ui.js | 33 ++++++++++++---------------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index 234af0aa..21f28cbb 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -50,9 +50,6 @@ var UI;
         lastKeyboardinput: null,
         defaultKeyboardinputLen: 100,
 
-        ctrlOn: false,
-        altOn: false,
-
         // Setup rfb object, load settings from browser storage, then call
         // UI.init to setup the UI/menus
         load: function(callback) {
@@ -1280,31 +1277,25 @@ var UI;
 
         toggleCtrl: function() {
             UI.keepKeyboard();
-            if(UI.ctrlOn === false) {
-                UI.rfb.sendKey(KeyTable.XK_Control_L, true);
-                document.getElementById('noVNC_toggle_ctrl_button')
-                    .classList.add("noVNC_selected");
-                UI.ctrlOn = true;
-            } else if(UI.ctrlOn === true) {
+            var btn = document.getElementById('noVNC_toggle_ctrl_button');
+            if (btn.classList.contains("noVNC_selected")) {
                 UI.rfb.sendKey(KeyTable.XK_Control_L, false);
-                document.getElementById('noVNC_toggle_ctrl_button')
-                    .classList.remove("noVNC_selected");
-                UI.ctrlOn = false;
+                btn.classList.remove("noVNC_selected");
+            } else {
+                UI.rfb.sendKey(KeyTable.XK_Control_L, true);
+                btn.classList.add("noVNC_selected");
             }
         },
 
         toggleAlt: function() {
             UI.keepKeyboard();
-            if(UI.altOn === false) {
-                UI.rfb.sendKey(KeyTable.XK_Alt_L, true);
-                document.getElementById('noVNC_toggle_alt_button')
-                    .classList.add("noVNC_selected");
-                UI.altOn = true;
-            } else if(UI.altOn === true) {
+            var btn = document.getElementById('noVNC_toggle_alt_button');
+            if (btn.classList.contains("noVNC_selected")) {
                 UI.rfb.sendKey(KeyTable.XK_Alt_L, false);
-                document.getElementById('noVNC_toggle_alt_button')
-                    .classList.remove("noVNC_selected");
-                UI.altOn = false;
+                btn.classList.remove("noVNC_selected");
+            } else {
+                UI.rfb.sendKey(KeyTable.XK_Alt_L, true);
+                btn.classList.add("noVNC_selected");
             }
         },
 

From 24d8b311ca3442b26dd0f0e0fce8dd0ba4763e81 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 20:11:11 +0200
Subject: [PATCH 24/46] Bling up popups

Make the popups a bit more prominent by adding shadows and animations.
---
 app/styles/base.css | 68 +++++++++++++++++----------------------------
 1 file changed, 26 insertions(+), 42 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index e838b1de..c0d7fceb 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -88,33 +88,30 @@ html {
 
 /* Panels */
 .noVNC_panel {
-  display: none;
-  position: relative;
+  position: fixed;
+  top: 46px;
+  right: 15px;
+  transform: translate(0, -50px);
+
+  transition: 0.5s ease-in-out;
+
+  visibility: hidden;
+  opacity: 0;
+
   padding: 15px;
-  color: #fff;
-  background: #fff; /* default background for browsers without gradient support */
-  /* css3 */
-  /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
-  background: -moz-linear-gradient(#2e88c4, #075698);
-  background: -o-linear-gradient(#2e88c4, #075698);
-  background: linear-gradient(#2e88c4, #075698);*/
+
+  background: #fff;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   color: #000;
   border: 2px solid #E0E0E0;
-}
-.noVNC_panel:after {
-  content: "";
-  position: absolute;
-  top: -40px; /* value = - border-top-width - border-bottom-width */
-  right: 50px; /* controls horizontal position */
-  border-style: solid;
-  border-width: 40px 40px 0 0; /* vary these values to change the angle of the vertex */
-  border-color: transparent #E0E0E0;
+  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 }
 .noVNC_panel.noVNC_open {
-  display: block;
+  visibility: visible;
+  opacity: 1;
+  transform: translate(0, 0);
 }
 
 /* noVNC Touch Device only buttons */
@@ -186,12 +183,6 @@ html {
 
 /* XVP Shutdown/Reboot */
 #noVNC_xvp {
-  top: 73px;
-  right: 30px;
-  position: fixed;
-}
-#noVNC_xvp:after {
-  right: 125px;
 }
 #noVNC_xvp_buttons {
   display: none;
@@ -199,12 +190,6 @@ html {
 
 /* Clipboard */
 #noVNC_clipboard {
-  top: 73px;
-  right: 30px;
-  position: fixed;
-}
-#noVNC_clipboard:after {
-  right: 85px;
 }
 #noVNC_clipboard_text {
   width: 500px;
@@ -215,9 +200,6 @@ html {
 
 /* Settings */
 #noVNC_settings {
-  top: 73px;
-  right: 20px;
-  position: fixed;
 }
 #noVNC_settings ul {
   list-style: none;
@@ -233,12 +215,6 @@ html {
 
 /* Connection Controls */
 #noVNC_connect_controls {
-  top: 73px;
-  right: 12px;
-  position: fixed;
-}
-#noVNC_connect_controls:after  {
-  right:15px;
 }
 #noVNC_connect_controls ul {
   list-style: none;
@@ -268,15 +244,21 @@ html {
  */
 
 #noVNC_status {
-  display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 3;
+  transform: translateY(-100%);
+
+  transition: 0.5s ease-in-out;
+
+  visibility: hidden;
+  opacity: 0;
 
   padding: 5px;
 
+  display: flex;
   flex-direction: row;
   justify-content: center;
   align-content: center;
@@ -288,7 +270,9 @@ html {
   border-bottom: 1px solid rgba(0, 0, 0, 0.9);
 }
 #noVNC_status.noVNC_open {
-  display: flex;
+  transform: translateY(0);
+  visibility: visible;
+  opacity: 1;
 }
 
 #noVNC_status::before {

From 79fd3b1fcff7204b836928e64a9f634fe5e179ec Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Tue, 30 Aug 2016 15:23:20 +0200
Subject: [PATCH 25/46] Apply CSS style to input elements

Different browsers have wildly different defaults for input elements.
Try to get a consistent interface by applying our own style.
---
 app/styles/base.css | 85 +++++++++++++++++++++++++++++++++++++++------
 vnc.html            |  6 ++--
 2 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index c0d7fceb..81c45169 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -26,6 +26,77 @@ html {
   white-space: nowrap;
 }
 
+/* ----------------------------------------
+ * Input Elements
+ * ----------------------------------------
+ */
+
+input[type=input], input[type=password], input:not([type]), textarea {
+  /* Disable default rendering */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+
+  margin: 2px;
+  padding: 2px;
+  border: 1px solid rgb(192, 192, 192);
+  border-radius: 5px;
+  color: black;
+  background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+}
+
+input[type=button], select {
+  /* Disable default rendering */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+
+  margin: 2px;
+  padding: 2px;
+  border: 1px solid rgb(192, 192, 192);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  color: black;
+  background: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+
+  /* This avoids it jumping around when :active */
+  vertical-align: middle;
+}
+
+input[type=button] {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+option {
+  color: black;
+  background: white;
+}
+
+input[type=input]:focus, input[type=password]:focus,
+input:not([type]):focus, input[type=button]:focus,
+textarea:focus, select:focus {
+  box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5);
+  border-color: rgb(74, 144, 217);
+  outline: none;
+}
+
+input[type=button]::-moz-focus-inner {
+  border: none;
+}
+
+input[type=input]:disabled, input[type=password]:disabled,
+input:not([type]):disabled, input[type=button]:disabled,
+textarea:disabled, select:disabled {
+  color: rgb(128, 128, 128);
+  background: rgb(240, 240, 240);
+}
+
+input[type=button]:active, select:active {
+  border-bottom-width: 1px;
+  margin-top: 3px;
+}
+
 /* ----------------------------------------
  * Control Bar
  * ----------------------------------------
@@ -114,6 +185,10 @@ html {
   transform: translate(0, 0);
 }
 
+.noVNC_submit {
+  float: right;
+}
+
 /* noVNC Touch Device only buttons */
 #noVNC_mobile_buttons {
   display: inline;
@@ -194,9 +269,6 @@ html {
 #noVNC_clipboard_text {
   width: 500px;
 }
-#noVNC_clipboard_clear_button {
-  float: right;
-}
 
 /* Settings */
 #noVNC_settings {
@@ -209,9 +281,6 @@ html {
 #noVNC_setting_path {
   width: 100px;
 }
-#noVNC_settings_apply {
-  float: right;
-}
 
 /* Connection Controls */
 #noVNC_connect_controls {
@@ -233,10 +302,6 @@ html {
 #noVNC_setting_password {
   width: 150px;
 }
-#noVNC_connect_button {
-  width: 110px;
-  float: right;
-}
 
 /* ----------------------------------------
  * Status Dialog
diff --git a/vnc.html b/vnc.html
index b5bd2822..6c2b9d65 100644
--- a/vnc.html
+++ b/vnc.html
@@ -121,7 +121,7 @@
                 </textarea>
                 <br />
                 <input id="noVNC_clipboard_clear_button" type="button"
-                    value="Clear" />
+                    value="Clear" class="noVNC_submit" />
             </div>
 
             <!-- Toggle fullscreen -->
@@ -165,7 +165,7 @@
                         </select></label>
                     </li>
                     <hr>
-                    <li><input type="button" id="noVNC_settings_apply" value="Apply" /></li>
+                    <li><input type="button" id="noVNC_settings_apply" value="Apply" class="noVNC_submit" /></li>
                 </ul>
             </div>
 
@@ -182,7 +182,7 @@
                     <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>
                     <li><label><strong>Password: </strong><input id="noVNC_setting_password" type="password" /></label></li>
                     <li><label><strong>Token: </strong><input id="noVNC_setting_token" /></label></li>
-                    <li><input id="noVNC_connect_button" type="button" value="Connect" /></li>
+                    <li><input id="noVNC_connect_button" type="button" value="Connect" class="noVNC_submit" /></li>
                 </ul>
             </div>
         </div>

From c8d4402f582e4d4fb62ca75aae3241f9e0917190 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 20:45:52 +0200
Subject: [PATCH 26/46] Move touch text input out of control bar

It has nothing to do with the control bar, so hide it somewhere
more sensible.
---
 vnc.html | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/vnc.html b/vnc.html
index 6c2b9d65..a660988b 100644
--- a/vnc.html
+++ b/vnc.html
@@ -72,13 +72,6 @@
                 <input type="image" alt="Keyboard" src="app/images/keyboard.svg"
                     id="noVNC_keyboard_button" class="noVNC_button"
                     value="Keyboard" title="Show Keyboard" />
-                <!-- Note that Google Chrome on Android doesn't respect any of these,
-                     html attributes which attempt to disable text suggestions on the
-                     on-screen keyboard. Let's hope Chrome implements the ime-mode
-                     style for example -->
-                <textarea id="noVNC_keyboardinput" autocapitalize="off"
-                    autocorrect="off" autocomplete="off" spellcheck="false"
-                    mozactionhint="Enter"></textarea>
                 <div id="noVNC_extra_keys">
                     <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
                         id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
@@ -197,6 +190,14 @@
 
         <!-- HTML5 Canvas -->
         <div id="noVNC_screen" class="noVNC_hidden">
+            <!-- Note that Google Chrome on Android doesn't respect any of these,
+                 html attributes which attempt to disable text suggestions on the
+                 on-screen keyboard. Let's hope Chrome implements the ime-mode
+                 style for example -->
+            <textarea id="noVNC_keyboardinput" autocapitalize="off"
+                autocorrect="off" autocomplete="off" spellcheck="false"
+                mozactionhint="Enter"></textarea>
+
             <canvas id="noVNC_canvas" width="0" height="0">
                         Canvas not supported.
             </canvas>

From 8d7708c82edc9c0d3dc22a28ded5a563ce786bb2 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 29 Aug 2016 14:42:03 +0200
Subject: [PATCH 27/46] Abstract status dialog CSS class handling

---
 app/ui.js | 85 ++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 49 insertions(+), 36 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index 21f28cbb..9689852a 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -308,43 +308,33 @@ var UI;
 
         updateState: function(rfb, state, oldstate, msg) {
             UI.rfb_state = state;
-            var klass;
-            var timeout;
-            switch (state) {
-                case 'failed':
-                case 'fatal':
-                    klass = "noVNC_status_error";
-                    timeout = 0; // zero means no timeout
-                    break;
-                case 'normal':
-                    klass = "noVNC_status_normal";
-                    break;
-                case 'disconnected':
-                    /* falls through */
-                case 'loaded':
-                    klass = "noVNC_status_normal";
-                    break;
-                case 'password':
-                    UI.toggleConnectPanel();
-
-                    document.getElementById('noVNC_connect_button').value = "Send Password";
-                    document.getElementById('noVNC_connect_button').onclick = UI.setPassword;
-                    document.getElementById('noVNC_setting_password').focus();
-
-                    klass = "noVNC_status_warn";
-                    break;
-                default:
-                    klass = "noVNC_status_warn";
-                    break;
-            }
 
             if (typeof(msg) !== 'undefined') {
-                document.getElementById('noVNC_status')
-                    .classList.remove("noVNC_status_normal",
-                                      "noVNC_status_warn",
-                                      "noVNC_status_error");
-                document.getElementById('noVNC_status').classList.add(klass);
-                UI.showStatus(msg, timeout);
+                switch (state) {
+                    case 'failed':
+                    case 'fatal':
+                        // zero means no timeout
+                        UI.showStatus(msg, 'error', 0);
+                        break;
+                    case 'normal':
+                        /* falls through */
+                    case 'disconnected':
+                    case 'loaded':
+                        UI.showStatus(msg, 'normal');
+                        break;
+                    case 'password':
+                        UI.toggleConnectPanel();
+
+                        document.getElementById('noVNC_connect_button').value = "Send Password";
+                        document.getElementById('noVNC_connect_button').onclick = UI.setPassword;
+                        document.getElementById('noVNC_setting_password').focus();
+
+                        UI.showStatus(msg, 'warn');
+                        break;
+                    default:
+                        UI.showStatus(msg, 'warn');
+                        break;
+                }
             }
 
             UI.updateVisualState();
@@ -434,11 +424,34 @@ var UI;
             //Util.Debug("<< updateVisualState");
         },
 
-        showStatus: function(text, time) {
+        showStatus: function(text, status_type, time) {
             var statusElem = document.getElementById('noVNC_status');
 
             clearTimeout(UI.statusTimeout);
 
+            if (typeof status_type === 'undefined') {
+                status_type = 'normal';
+            }
+
+            statusElem.classList.remove("noVNC_status_normal",
+                                        "noVNC_status_warn",
+                                        "noVNC_status_error");
+
+            switch (status_type) {
+                case 'warning':
+                case 'warn':
+                    statusElem.classList.add("noVNC_status_warn");
+                    break;
+                case 'error':
+                    statusElem.classList.add("noVNC_status_error");
+                    break;
+                case 'normal':
+                case 'info':
+                default:
+                    statusElem.classList.add("noVNC_status_normal");
+                    break;
+            }
+
             statusElem.innerHTML = text;
             statusElem.classList.add("noVNC_open");
 

From 8a7ec6ea1919741035e35d111a5680eb396a0bdc Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 29 Aug 2016 14:46:58 +0200
Subject: [PATCH 28/46] Add a separate dialog for the password prompt

The user might be queried for the password during the connect stage
if no password was previously provided. Add a separate dialog for
this rather than abusing the connect dialog.
---
 app/styles/base.css | 49 +++++++++++++++++++++++++++++++++++++++++++++
 app/ui.js           | 26 ++++++++++++++----------
 vnc.html            | 10 +++++++++
 3 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 81c45169..96f830bb 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -97,6 +97,32 @@ input[type=button]:active, select:active {
   margin-top: 3px;
 }
 
+/* ----------------------------------------
+ * WebKit centering hacks
+ * ----------------------------------------
+ */
+
+.noVNC_center {
+  /*
+   * This is a workaround because webkit misrenders transforms and
+   * uses non-integer coordinates, resulting in blurry content.
+   * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
+   * the objects instead.
+   */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.noVNC_center > * {
+  pointer-events: auto;
+}
+
 /* ----------------------------------------
  * Control Bar
  * ----------------------------------------
@@ -367,6 +393,29 @@ input[type=button]:active, select:active {
   content: url("../images/warning.svg") " ";
 }
 
+/* ----------------------------------------
+ * Password Dialog
+ * ----------------------------------------
+ */
+
+#noVNC_password_dlg {
+  transform: translateY(-50px);
+}
+#noVNC_password_dlg.noVNC_open {
+  transform: translateY(0);
+}
+#noVNC_password_dlg ul {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}
+#noVNC_password_dlg li {
+  padding-bottom:8px;
+}
+#noVNC_password_input {
+  width: 150px;
+}
+
 /* ----------------------------------------
  * Main Area
  * ----------------------------------------
diff --git a/app/ui.js b/app/ui.js
index 9689852a..33e0e997 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -249,6 +249,9 @@ var UI;
                 .addEventListener('click', UI.disconnect);
             document.getElementById("noVNC_connect_button")
                 .addEventListener('click', UI.connect);
+
+            document.getElementById("noVNC_password_button")
+                .addEventListener('click', UI.setPassword);
         },
 
         addClipboardHandlers: function() {
@@ -323,11 +326,11 @@ var UI;
                         UI.showStatus(msg, 'normal');
                         break;
                     case 'password':
-                        UI.toggleConnectPanel();
-
-                        document.getElementById('noVNC_connect_button').value = "Send Password";
-                        document.getElementById('noVNC_connect_button').onclick = UI.setPassword;
-                        document.getElementById('noVNC_setting_password').focus();
+                        document.getElementById('noVNC_password_dlg')
+                            .classList.add('noVNC_open');
+                        setTimeout(function () {
+                                document.getElementById(('noVNC_password_input').focus());
+                            }, 100);
 
                         UI.showStatus(msg, 'warn');
                         break;
@@ -397,6 +400,10 @@ var UI;
             // It is enabled (toggled) by direct click on the button
             UI.setViewDrag(false);
 
+            // State change also closes the password dialog
+            document.getElementById('noVNC_password_dlg')
+                .classList.remove('noVNC_open');
+
             switch (UI.rfb_state) {
                 case 'fatal':
                 case 'failed':
@@ -827,12 +834,9 @@ var UI;
         },
 
         setPassword: function() {
-            UI.rfb.sendPassword(document.getElementById('noVNC_setting_password').value);
-            //Reset connect button.
-            document.getElementById('noVNC_connect_button').value = "Connect";
-            document.getElementById('noVNC_connect_button').onclick = UI.connect;
-            //Hide connection panel.
-            UI.toggleConnectPanel();
+            UI.rfb.sendPassword(document.getElementById('noVNC_password_input').value);
+            document.getElementById('noVNC_password_dlg')
+                .classList.remove('noVNC_open');
             return false;
         },
 
diff --git a/vnc.html b/vnc.html
index a660988b..9c677eec 100644
--- a/vnc.html
+++ b/vnc.html
@@ -185,6 +185,16 @@
 
     </div> <!-- End of noVNC_control_bar -->
 
+    <!-- Password Dialog -->
+    <div class="noVNC_center">
+    <div id="noVNC_password_dlg" class="noVNC_panel">
+        <ul>
+            <li><label><strong>Password: </strong><input id="noVNC_password_input" type="password" /></label></li>
+            <li><input id="noVNC_password_button" type="button" value="Send Password" class="noVNC_submit" /></li>
+        </ul>
+    </div>
+    </div>
+
     <div id="noVNC_container">
         <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
 

From d616c9226cb06b82e68d1d8cbedcb7ea41b0fe2c Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 20:49:52 +0200
Subject: [PATCH 29/46] Merge control bar sections

There is no status information in the centre anymore, so merge
the left and right sections of the control bar.
---
 app/styles/base.css | 15 +++------------
 vnc.html            |  4 +---
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 96f830bb..3edd2adc 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -265,21 +265,12 @@ input[type=button]:active, select:active {
   display: inline;
 }
 
-/* Left side buttons */
-.noVNC_buttons_left {
-  float: left;
+.noVNC_buttons {
+  float: right;
   z-index: 1;
   position: relative;
-  padding-left: 10px;
-}
-
-/* Right side buttons */
-.noVNC_buttons_right {
-  float: right;
-  right: 0px;
-  z-index: 2;
-  position: absolute;
   padding-right: 10px;
+  padding-left: 10px;
 }
 
 /* XVP Shutdown/Reboot */
diff --git a/vnc.html b/vnc.html
index 9c677eec..f20b00c3 100644
--- a/vnc.html
+++ b/vnc.html
@@ -52,7 +52,7 @@
     <!-- noVNC Control Bar -->
     <div id="noVNC_control_bar" class="noVNC_status_normal">
 
-        <div class="noVNC_buttons_left">
+        <div class="noVNC_buttons">
 
             <!-- Drag/Pan the viewport -->
             <input type="image" alt="viewport drag" src="app/images/drag.svg"
@@ -87,9 +87,7 @@
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="noVNC_buttons_right">
             <!-- Send Ctrl+Alt+Delete -->
             <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
                 id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"

From ebbec43a6bb1eff3268de7c50297e777438a14c2 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 20:52:46 +0200
Subject: [PATCH 30/46] Enable extra keys for all devices

Manual special keys can be useful on all devices, so stop restricting
it to just touch devices.
---
 app/ui.js |  3 +++
 vnc.html  | 28 +++++++++++++++-------------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index 33e0e997..4b34e243 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -84,6 +84,7 @@ var UI;
             UI.setupFullscreen();
             UI.addControlbarHandlers();
             UI.addTouchSpecificHandlers();
+            UI.addExtraKeysHandlers();
             UI.addXvpHandlers();
             UI.addConnectionControlHandlers();
             UI.addClipboardHandlers();
@@ -218,7 +219,9 @@ var UI;
                 .addEventListener('submit', function () { return false; });
 
             window.addEventListener('load', UI.keyboardinputReset);
+        },
 
+        addExtraKeysHandlers: function() {
             document.getElementById("noVNC_toggle_extra_keys_button")
                 .addEventListener('click', UI.toggleExtraKeys);
             document.getElementById("noVNC_toggle_ctrl_button")
diff --git a/vnc.html b/vnc.html
index f20b00c3..8676e83d 100644
--- a/vnc.html
+++ b/vnc.html
@@ -72,19 +72,21 @@
                 <input type="image" alt="Keyboard" src="app/images/keyboard.svg"
                     id="noVNC_keyboard_button" class="noVNC_button"
                     value="Keyboard" title="Show Keyboard" />
-                <div id="noVNC_extra_keys">
-                    <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
-                        id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
-                    <div id="noVNC_modifiers">
-                        <input type="image" alt="Ctrl" src="app/images/ctrl.svg"
-                            id="noVNC_toggle_ctrl_button" class="noVNC_button" />
-                        <input type="image" alt="Alt" src="app/images/alt.svg"
-                            id="noVNC_toggle_alt_button" class="noVNC_button" />
-                        <input type="image" alt="Tab" src="app/images/tab.svg"
-                            id="noVNC_send_tab_button" class="noVNC_button" />
-                        <input type="image" alt="Esc" src="app/images/esc.svg"
-                            id="noVNC_send_esc_button" class="noVNC_button" />
-                    </div>
+            </div>
+
+            <!-- Extra manual keys -->
+            <div id="noVNC_extra_keys">
+                <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
+                    id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
+                <div id="noVNC_modifiers">
+                    <input type="image" alt="Ctrl" src="app/images/ctrl.svg"
+                        id="noVNC_toggle_ctrl_button" class="noVNC_button" />
+                    <input type="image" alt="Alt" src="app/images/alt.svg"
+                        id="noVNC_toggle_alt_button" class="noVNC_button" />
+                    <input type="image" alt="Tab" src="app/images/tab.svg"
+                        id="noVNC_send_tab_button" class="noVNC_button" />
+                    <input type="image" alt="Esc" src="app/images/esc.svg"
+                        id="noVNC_send_esc_button" class="noVNC_button" />
                 </div>
             </div>
 

From f7c725cecfd591b7f221863da74a9965fa297504 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 25 Aug 2016 21:02:49 +0200
Subject: [PATCH 31/46] Improve active button visual response

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

diff --git a/app/styles/base.css b/app/styles/base.css
index 3edd2adc..a462eae6 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -179,6 +179,13 @@ input[type=button]:active, select:active {
 .noVNC_button:disabled {
   opacity: 0.4;
 }
+.noVNC_button:focus {
+  outline: none;
+}
+.noVNC_button:active {
+  padding-top: 5px;
+  padding-bottom: 3px;
+}
 .noVNC_button.noVNC_hidden {
   display: none;
 }

From 8434cc81b39fb6a64854d8844798e6307995e735 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Fri, 26 Aug 2016 10:46:20 +0200
Subject: [PATCH 32/46] Make status dialog independent of control bar

---
 vnc.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/vnc.html b/vnc.html
index 8676e83d..9a6aa29b 100644
--- a/vnc.html
+++ b/vnc.html
@@ -180,11 +180,11 @@
             </div>
         </div>
 
-        <!-- Status Dialog -->
-        <div id="noVNC_status"></div>
-
     </div> <!-- End of noVNC_control_bar -->
 
+    <!-- Status Dialog -->
+    <div id="noVNC_status"></div>
+
     <!-- Password Dialog -->
     <div class="noVNC_center">
     <div id="noVNC_password_dlg" class="noVNC_panel">

From 6244e383e49855772713df97e0bad1560b0424f7 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Wed, 14 Sep 2016 16:10:24 +0200
Subject: [PATCH 33/46] Let CSS update UI for touch and connected state

Avoid a lot of JavaScript code that can easily be handed using
style sheets instead, specifically items that should only be shown
when on a touch device, or items that depend on the connected state.
---
 app/styles/base.css |  32 +++++++++++--
 app/ui.js           | 112 +++++++++++++-------------------------------
 vnc.html            |   4 +-
 3 files changed, 62 insertions(+), 86 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index a462eae6..ed77c6b9 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -222,11 +222,18 @@ input[type=button]:active, select:active {
   float: right;
 }
 
+:root:not(.noVNC_connected) #noVNC_view_drag_button {
+  display: none;
+}
+
 /* noVNC Touch Device only buttons */
 #noVNC_mobile_buttons {
   display: inline;
 }
-#noVNC_mobile_buttons.noVNC_hidden {
+:root:not(.noVNC_connected) #noVNC_mobile_buttons {
+  display: none;
+}
+:root:not(.noVNC_touch) #noVNC_mobile_buttons {
   display: none;
 }
 
@@ -242,7 +249,7 @@ input[type=button]:active, select:active {
   ime-mode: disabled;
 }
 
-#noVNC_toggle_extra_keys_button {
+:root:not(.noVNC_connected) #noVNC_extra_keys {
   display: none;
 }
 
@@ -280,7 +287,15 @@ input[type=button]:active, select:active {
   padding-left: 10px;
 }
 
+/* Send Ctrl+Alt+Delete */
+:root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button {
+  display: none;
+}
+
 /* XVP Shutdown/Reboot */
+:root:not(.noVNC_connected) #noVNC_xvp_button {
+  display: none;
+}
 #noVNC_xvp {
 }
 #noVNC_xvp_buttons {
@@ -288,6 +303,9 @@ input[type=button]:active, select:active {
 }
 
 /* Clipboard */
+:root:not(.noVNC_connected) #noVNC_clipboard_button {
+  display: none;
+}
 #noVNC_clipboard {
 }
 #noVNC_clipboard_text {
@@ -307,7 +325,11 @@ input[type=button]:active, select:active {
 }
 
 /* Connection Controls */
-#noVNC_connect_controls {
+:root.noVNC_connected #noVNC_connect_controls_button {
+  display: none;
+}
+:root:not(.noVNC_connected) #noVNC_disconnect_button {
+  display: none;
 }
 #noVNC_connect_controls ul {
   list-style: none;
@@ -440,7 +462,7 @@ input[type=button]:active, select:active {
   width: auto;
   height: auto;
 }
-#noVNC_screen.noVNC_hidden {
+:root:not(.noVNC_connected) #noVNC_screen {
   display: none;
 }
 
@@ -480,7 +502,7 @@ input[type=button]:active, select:active {
       -1px 1px 0 #000,
        1px 1px 0 #000;
 }
-#noVNC_logo.noVNC_hidden {
+:root.noVNC_connected #noVNC_logo {
   display: none;
 }
 
diff --git a/app/ui.js b/app/ui.js
index 4b34e243..6c09e150 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -66,12 +66,9 @@ var UI;
 
             UI.initSettings();
 
-            // Show mouse selector buttons on touch screen devices
+            // Adapt the interface for touch screen devices
             if (UI.isTouchDevice) {
-                // Show mobile buttons
-                document.getElementById('noVNC_mobile_buttons')
-                    .classList.remove("noVNC_hidden");
-                UI.hideMouseButton();
+                document.documentElement.classList.add("noVNC_touch");
                 // Remove the address bar
                 setTimeout(function() { window.scrollTo(0, 1); }, 100);
                 UI.forceSetting('clip', true);
@@ -368,34 +365,11 @@ var UI;
             document.getElementById('noVNC_setting_repeaterID').disabled = connected;
 
             if (connected) {
-                document.getElementById('noVNC_logo')
-                    .classList.add("noVNC_hidden");
-                document.getElementById('noVNC_screen')
-                    .classList.remove("noVNC_hidden");
+                document.documentElement.classList.add("noVNC_connected");
                 UI.updateViewClip();
                 UI.setMouseButton(1);
-                document.getElementById('noVNC_clipboard_button')
-                    .classList.remove("noVNC_hidden");
-                document.getElementById('noVNC_keyboard_button')
-                    .classList.remove("noVNC_hidden");
-                document.getElementById('noVNC_extra_keys')
-                    .classList.remove("noVNC_hidden");
-                document.getElementById('noVNC_send_ctrl_alt_del_button')
-                    .classList.remove("noVNC_hidden");
             } else {
-                document.getElementById('noVNC_logo')
-                    .classList.remove("noVNC_hidden");
-                document.getElementById('noVNC_screen')
-                    .classList.add("noVNC_hidden");
-                UI.hideMouseButton();
-                document.getElementById('noVNC_clipboard_button')
-                    .classList.add("noVNC_hidden");
-                document.getElementById('noVNC_keyboard_button')
-                    .classList.add("noVNC_hidden");
-                document.getElementById('noVNC_extra_keys')
-                    .classList.add("noVNC_hidden");
-                document.getElementById('noVNC_send_ctrl_alt_del_button')
-                    .classList.add("noVNC_hidden");
+                document.documentElement.classList.remove("noVNC_connected");
                 UI.updateXvpButton(0);
             }
 
@@ -411,23 +385,11 @@ var UI;
                 case 'fatal':
                 case 'failed':
                 case 'disconnected':
-                    document.getElementById('noVNC_connect_controls_button')
-                        .classList.remove("noVNC_hidden");
-                    document.getElementById('noVNC_disconnect_button')
-                        .classList.add("noVNC_hidden");
                     UI.openConnectPanel();
                     break;
                 case 'loaded':
-                    document.getElementById('noVNC_connect_controls_button')
-                        .classList.remove("noVNC_hidden");
-                    document.getElementById('noVNC_disconnect_button')
-                        .classList.add("noVNC_hidden");
                     break;
                 default:
-                    document.getElementById('noVNC_connect_controls_button')
-                        .classList.add("noVNC_hidden");
-                    document.getElementById('noVNC_disconnect_button')
-                        .classList.remove("noVNC_hidden");
                     break;
             }
 
@@ -1086,52 +1048,48 @@ var UI;
         updateViewDrag: function() {
             var clipping = false;
 
+            if (UI.rfb_state !== 'normal') return;
+
             // Check if viewport drag is possible. It is only possible
             // if the remote display is clipping the client display.
-            if (UI.rfb_state === 'normal' &&
-                UI.rfb.get_display().get_viewport() &&
+            if (UI.rfb.get_display().get_viewport() &&
                 UI.rfb.get_display().clippingDisplay()) {
                 clipping = true;
             }
 
             var viewDragButton = document.getElementById('noVNC_view_drag_button');
 
-            if (UI.rfb_state !== 'normal') {
-                // Always hide when not connected
-                viewDragButton.classList.add("noVNC_hidden");
+            if (!clipping &&
+                UI.rfb.get_viewportDrag()) {
+                // The size of the remote display is the same or smaller
+                // than the client display. Make sure viewport drag isn't
+                // active when it can't be used.
+                UI.rfb.set_viewportDrag(false);
+            }
+
+            if (UI.rfb.get_viewportDrag()) {
+                viewDragButton.classList.add("noVNC_selected");
             } else {
-                if (!clipping &&
-                    UI.rfb.get_viewportDrag()) {
-                    // The size of the remote display is the same or smaller
-                    // than the client display. Make sure viewport drag isn't
-                    // active when it can't be used.
-                    UI.rfb.set_viewportDrag(false);
-                }
+                viewDragButton.classList.remove("noVNC_selected");
+            }
 
-                if (UI.rfb.get_viewportDrag()) {
-                    viewDragButton.classList.add("noVNC_selected");
-                } else {
-                    viewDragButton.classList.remove("noVNC_selected");
-                }
+            // Different behaviour for touch vs non-touch
+            // The button is disabled instead of hidden on touch devices
+            if (UI.isTouchDevice) {
+                viewDragButton.classList.remove("noVNC_hidden");
 
-                // Different behaviour for touch vs non-touch
-                // The button is disabled instead of hidden on touch devices
-                if (UI.isTouchDevice) {
-                    viewDragButton.classList.remove("noVNC_hidden");
-
-                    if (clipping) {
-                        viewDragButton.disabled = false;
-                    } else {
-                        viewDragButton.disabled = true;
-                    }
-                } else {
+                if (clipping) {
                     viewDragButton.disabled = false;
+                } else {
+                    viewDragButton.disabled = true;
+                }
+            } else {
+                viewDragButton.disabled = false;
 
-                    if (clipping) {
-                        viewDragButton.classList.remove("noVNC_hidden");
-                    } else {
-                        viewDragButton.classList.add("noVNC_hidden");
-                    }
+                if (clipping) {
+                    viewDragButton.classList.remove("noVNC_hidden");
+                } else {
+                    viewDragButton.classList.add("noVNC_hidden");
                 }
             }
         },
@@ -1329,10 +1287,6 @@ var UI;
  *     MISC
  * ------v------*/
 
-        hideMouseButton: function() {
-            UI.setMouseButton(-1);
-        },
-
         setMouseButton: function(num) {
             if (UI.rfb) {
                 UI.rfb.get_mouse().set_touchButton(num);
diff --git a/vnc.html b/vnc.html
index 9a6aa29b..8b68ff50 100644
--- a/vnc.html
+++ b/vnc.html
@@ -60,7 +60,7 @@
                 title="Move/Drag Viewport" />
 
             <!--noVNC Touch Device only buttons-->
-            <div id="noVNC_mobile_buttons" class="noVNC_hidden">
+            <div id="noVNC_mobile_buttons">
                 <input type="image" alt="No mousebutton" src="app/images/mouse_none.svg"
                     id="noVNC_mouse_button0" class="noVNC_button" />
                 <input type="image" alt="Left mousebutton" src="app/images/mouse_left.svg"
@@ -199,7 +199,7 @@
         <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
 
         <!-- HTML5 Canvas -->
-        <div id="noVNC_screen" class="noVNC_hidden">
+        <div id="noVNC_screen">
             <!-- Note that Google Chrome on Android doesn't respect any of these,
                  html attributes which attempt to disable text suggestions on the
                  on-screen keyboard. Let's hope Chrome implements the ime-mode

From fb7c3b3be22efa44c3e718256d06e57bd2174046 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Fri, 26 Aug 2016 10:48:05 +0200
Subject: [PATCH 34/46] Change control bar to a smaller left-side toolbar

---
 app/styles/base.css  | 198 ++++++++++++++-----------------------------
 app/styles/black.css |  26 +-----
 app/styles/blue.css  |   4 +
 app/ui.js            |  16 +---
 vnc.html             |  19 +++--
 5 files changed, 89 insertions(+), 174 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index ed77c6b9..3f6ccdf8 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -22,10 +22,6 @@ html {
   height:100%;
 }
 
-#noVNC_buttons {
-  white-space: nowrap;
-}
-
 /* ----------------------------------------
  * Input Elements
  * ----------------------------------------
@@ -122,59 +118,70 @@ input[type=button]:active, select:active {
 .noVNC_center > * {
   pointer-events: auto;
 }
+.noVNC_vcenter {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  pointer-events: none;
+}
+.noVNC_vcenter > * {
+  pointer-events: auto;
+}
 
 /* ----------------------------------------
  * Control Bar
  * ----------------------------------------
  */
 
-#noVNC_control_bar {
+#noVNC_control_bar_anchor {
+  /* The anchor is needed to get z-stacking to work */
   position: fixed;
-  display: block;
-  height: 36px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  z-index: 200;
+  z-index: 2;
 
-  background: #b2bdcd; /* Old browsers */
-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+  /* Edge misrenders animations wihthout this */
+  transform: translateX(0);
+}
+
+#noVNC_control_bar {
+  position: relative;
+  left: -30px;
+
+  background-color: rgb(110, 132, 163);
+  border-radius: 0 10px 10px 0;
+
+  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+
+  /* The extra border is to get a proper shadow */
+  border-color: rgb(110, 132, 163);
+  border-style: solid;
+  border-width: 0 0 0 30px;
+}
+
+#noVNC_control_bar .noVNC_scroll {
+  max-height: 100vh; /* Chrome is buggy with 100% */
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0 10px 0 5px;
 }
 
 /* General button style */
 .noVNC_button {
+  display: block;
   padding: 4px 4px;
+  margin: 10px 0;
   vertical-align: middle;
-  border:1px solid #869dbc;
+  border:1px solid rgba(255, 255, 255, 0.2);
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
-  background: #b2bdcd; /* Old browsers */
-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
-  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
-  font-size: 12px;
 }
 .noVNC_button.noVNC_selected {
-  border-color: #4366a9;
-  background: #779ced; /* Old browsers */
-  background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
+  border-color: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.5);
 }
 .noVNC_button:disabled {
   opacity: 0.4;
@@ -192,13 +199,14 @@ input[type=button]:active, select:active {
 
 /* Panels */
 .noVNC_panel {
-  position: fixed;
-  top: 46px;
-  right: 15px;
-  transform: translate(0, -50px);
+  transform: translateX(25px);
 
   transition: 0.5s ease-in-out;
 
+  max-height: 100vh; /* Chrome is buggy with 100% */
+  overflow-x: hidden;
+  overflow-y: auto;
+
   visibility: hidden;
   opacity: 0;
 
@@ -215,7 +223,7 @@ input[type=button]:active, select:active {
 .noVNC_panel.noVNC_open {
   visibility: visible;
   opacity: 1;
-  transform: translate(0, 0);
+  transform: translateX(75px);
 }
 
 .noVNC_submit {
@@ -227,9 +235,6 @@ input[type=button]:active, select:active {
 }
 
 /* noVNC Touch Device only buttons */
-#noVNC_mobile_buttons {
-  display: inline;
-}
 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
   display: none;
 }
@@ -249,49 +254,22 @@ input[type=button]:active, select:active {
   ime-mode: disabled;
 }
 
+/* Extra manual keys */
 :root:not(.noVNC_connected) #noVNC_extra_keys {
   display: none;
 }
 
-#noVNC_extra_keys {
-  display: inline;
-  list-style-type: none;
-  padding: 0px;
-  margin: 0px;
-  position: relative;
-}
-#noVNC_extra_keys.noVNC_hidden {
-  display: none;
-}
-#noVNC_toggle_ctrl_button {
-  display: inline;
-}
-#noVNC_toggle_alt_button {
-  display: inline;
-}
-#noVNC_send_tab_button {
-  display: inline;
-}
-#noVNC_send_esc_button {
-  display: inline;
-}
-#noVNC_modifiers {
-  display: inline;
-}
-
-.noVNC_buttons {
-  float: right;
-  z-index: 1;
-  position: relative;
-  padding-right: 10px;
-  padding-left: 10px;
-}
-
 /* Send Ctrl+Alt+Delete */
 :root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button {
   display: none;
 }
 
+#noVNC_modifiers {
+  background-color: rgb(92, 92, 92);
+  border: none;
+  padding: 0 10px;
+}
+
 /* XVP Shutdown/Reboot */
 :root:not(.noVNC_connected) #noVNC_xvp_button {
   display: none;
@@ -307,9 +285,12 @@ input[type=button]:active, select:active {
   display: none;
 }
 #noVNC_clipboard {
+  /* Full screen, minus padding and left and right margins */
+  max-width: calc(100vw - 2*15px - 75px - 25px);
 }
 #noVNC_clipboard_text {
   width: 500px;
+  max-width: 100%;
 }
 
 /* Settings */
@@ -456,7 +437,7 @@ input[type=button]:active, select:active {
   margin: 0px;
   padding: 0px;
   bottom: 0px;
-  top: 36px; /* the height of the control bar */
+  top: 0px;
   left: 0px;
   right: 0px;
   width: auto;
@@ -488,8 +469,8 @@ input[type=button]:active, select:active {
 }
 
 #noVNC_logo {
-  margin-top: 170px;
-  margin-left: 10px;
+  margin-top: 60px;
+  margin-left: 60px;
   color:yellow;
   text-align:left;
   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
@@ -516,69 +497,18 @@ input[type=button]:active, select:active {
  */
 
 @media screen and (max-width: 640px){
-  #noVNC_clipboard_text {
-    width: 410px;
-  }
   #noVNC_logo {
     font-size: 150px;
   }
-  .noVNC_button {
-    font-size: 10px;
-  }
-  .noVNC_buttons_left {
-    padding-left: 0px;
-  }
-  .noVNC_buttons_right {
-    padding-right: 0px;
-  }
-  /* collapse the extra keys on lower resolutions */
-  #noVNC_toggle_extra_keys_button {
-    display: inline;
-  }
-  #noVNC_modifiers {
-    display: none;
-  }
-  #noVNC_modifiers.noVNC_open {
-    display: inline;
-  }
-  #noVNC_toggle_ctrl_button {
-    position: absolute;
-    top: 30px;
-    left: 0px;
-  }
-  #noVNC_toggle_alt_button {
-    position: absolute;
-    top: 65px;
-    left: 0px;
-  }
-  #noVNC_send_tab_button {
-    position: absolute;
-    top: 100px;
-    left: 0px;
-  }
-  #noVNC_send_esc_button {
-    position: absolute;
-    top: 135px;
-    left: 0px;
-  }
 }
 
 @media screen and (min-width: 321px) and (max-width: 480px) {
-  #noVNC_clipboard_text {
-    width: 250px;
-  }
   #noVNC_logo {
     font-size: 110px;
   }
 }
 
 @media screen and (max-width: 320px) {
-  .noVNC_button {
-    font-size: 9px;
-  }
-  #noVNC_clipboard_text {
-    width: 220px;
-  }
   #noVNC_logo {
     font-size: 90px;
   }
diff --git a/app/styles/black.css b/app/styles/black.css
index 7c49ae06..e3ad2493 100644
--- a/app/styles/black.css
+++ b/app/styles/black.css
@@ -12,28 +12,10 @@
   color:#fff;
 }
 
-.noVNC_button {
-  font-size: 12px;
-  vertical-align: middle;
-  border:1px solid #4c4c4c;
-
-  background: #4c4c4c; /* Old browsers */
-  background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
+#noVNC_control_bar {
+  background: #4c4c4c;
 }
 
-.noVNC_button_selected {
-  background: #9dd53a; /* Old browsers */
-  background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
+.noVNC_button.noVNC_selected {
+  background: #9dd53a;
 }
diff --git a/app/styles/blue.css b/app/styles/blue.css
index a59428ec..3db77270 100644
--- a/app/styles/blue.css
+++ b/app/styles/blue.css
@@ -11,3 +11,7 @@
   background:#04073d;
   color:#fff;
 }
+
+#noVNC_control_bar {
+  background: #080F80;
+}
diff --git a/app/ui.js b/app/ui.js
index 6c09e150..27187fb1 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -93,7 +93,6 @@ var UI;
             }
 
             UI.updateViewClip();
-            UI.setBarPosition();
 
             UI.updateVisualState();
 
@@ -168,7 +167,6 @@ var UI;
                 UI.applyResizeMode();
                 UI.updateViewClip();
                 UI.updateViewDrag();
-                UI.setBarPosition();
             } );
 
             document.getElementById("noVNC_status")
@@ -570,6 +568,7 @@ var UI;
             UI.closeXvpPanel();
             UI.closeClipboardPanel();
             UI.closeConnectPanel();
+            UI.closeExtraKeys();
         },
 
 /* ------^-------
@@ -783,9 +782,6 @@ var UI;
             UI.rfb.set_repeaterID(UI.getSetting('repeaterID'));
 
             UI.rfb.connect(host, port, password, path);
-
-            //Close dialog.
-            setTimeout(UI.setBarPosition, 100);
         },
 
         disconnect: function() {
@@ -1220,6 +1216,8 @@ var UI;
         },
 
         openExtraKeys: function() {
+            UI.closeAllPanels();
+
             document.getElementById('noVNC_modifiers')
                 .classList.add("noVNC_open");
             document.getElementById('noVNC_toggle_extra_keys_button')
@@ -1330,14 +1328,6 @@ var UI;
             selectbox.options.add(optn);
         },
 
-        setBarPosition: function() {
-            document.getElementById('noVNC_control_bar').style.top = (window.pageYOffset) + 'px';
-            document.getElementById('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
-
-            var vncwidth = document.getElementById('noVNC_container').style.offsetWidth;
-            document.getElementById('noVNC_control_bar').style.width = vncwidth + 'px';
-        }
-
 /* ------^-------
  *    /MISC
  * ==============
diff --git a/vnc.html b/vnc.html
index 8b68ff50..4f6aa876 100644
--- a/vnc.html
+++ b/vnc.html
@@ -50,10 +50,9 @@
 
 <body>
     <!-- noVNC Control Bar -->
-    <div id="noVNC_control_bar" class="noVNC_status_normal">
-
-        <div class="noVNC_buttons">
+    <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
 
+        <div id="noVNC_control_bar"><div class="noVNC_scroll">
             <!-- Drag/Pan the viewport -->
             <input type="image" alt="viewport drag" src="app/images/drag.svg"
                 id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
@@ -78,7 +77,8 @@
             <div id="noVNC_extra_keys">
                 <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
                     id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
-                <div id="noVNC_modifiers">
+                <div class="noVNC_vcenter">
+                <div id="noVNC_modifiers" class="noVNC_panel">
                     <input type="image" alt="Ctrl" src="app/images/ctrl.svg"
                         id="noVNC_toggle_ctrl_button" class="noVNC_button" />
                     <input type="image" alt="Alt" src="app/images/alt.svg"
@@ -88,6 +88,7 @@
                     <input type="image" alt="Esc" src="app/images/esc.svg"
                         id="noVNC_send_esc_button" class="noVNC_button" />
                 </div>
+                </div>
             </div>
 
             <!-- Send Ctrl+Alt+Delete -->
@@ -99,16 +100,19 @@
             <input type="image" alt="Shutdown/Reboot" src="app/images/power.svg"
                 id="noVNC_xvp_button" class="noVNC_button"
                 title="Shutdown/Reboot..." />
+            <div class="noVNC_vcenter">
             <div id="noVNC_xvp" class="noVNC_panel">
                 <input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" />
                 <input type="button" id="noVNC_xvp_reboot_button" value="Reboot" />
                 <input type="button" id="noVNC_xvp_reset_button" value="Reset" />
             </div>
+            </div>
 
             <!-- Clipboard -->
             <input type="image" alt="Clipboard" src="app/images/clipboard.svg"
                 id="noVNC_clipboard_button" class="noVNC_button"
                 title="Clipboard" />
+            <div class="noVNC_vcenter">
             <div id="noVNC_clipboard" class="noVNC_panel">
                 <textarea id="noVNC_clipboard_text" rows=5>
                 </textarea>
@@ -116,6 +120,7 @@
                 <input id="noVNC_clipboard_clear_button" type="button"
                     value="Clear" class="noVNC_submit" />
             </div>
+            </div>
 
             <!-- Toggle fullscreen -->
             <input type="image" alt="Fullscreen" src="app/images/fullscreen.svg"
@@ -126,6 +131,7 @@
             <input type="image" alt="Settings" src="app/images/settings.svg"
                 id="noVNC_settings_button" class="noVNC_button"
                 title="Settings" />
+            <div class="noVNC_vcenter">
             <div id="noVNC_settings" class="noVNC_panel">
                 <ul>
                     <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
@@ -161,6 +167,7 @@
                     <li><input type="button" id="noVNC_settings_apply" value="Apply" class="noVNC_submit" /></li>
                 </ul>
             </div>
+            </div>
 
             <!-- Connection Controls -->
             <input type="image" alt="Connect" src="app/images/connect.svg"
@@ -169,6 +176,7 @@
             <input type="image" alt="Disconnect" src="app/images/disconnect.svg"
                 id="noVNC_disconnect_button" class="noVNC_button"
                 title="Disconnect" />
+            <div class="noVNC_vcenter">
             <div id="noVNC_connect_controls" class="noVNC_panel">
                 <ul>
                     <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
@@ -178,7 +186,8 @@
                     <li><input id="noVNC_connect_button" type="button" value="Connect" class="noVNC_submit" /></li>
                 </ul>
             </div>
-        </div>
+            </div>
+        </div></div>
 
     </div> <!-- End of noVNC_control_bar -->
 

From 4d3aa0ef9d3cc5baab835ad2b545cf80b77c7ae7 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Fri, 26 Aug 2016 12:24:57 +0200
Subject: [PATCH 35/46] Add logo to control bar

---
 app/styles/base.css | 20 ++++++++++++--------
 vnc.html            |  4 +++-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 3f6ccdf8..df10c7df 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -468,14 +468,22 @@ input[type=button]:active, select:active {
                    url('Orbitron700.ttf') format('truetype');
 }
 
-#noVNC_logo {
-  margin-top: 60px;
-  margin-left: 60px;
+.noVNC_logo {
   color:yellow;
   text-align:left;
   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
-  font-size: 180px;
+  font-size: 13px;
   line-height:90%;
+  text-shadow: 1px 1px 0 #000;
+}
+.noVNC_logo span{
+  color:green;
+}
+
+#noVNC_logo {
+  margin-top: 60px;
+  margin-left: 60px;
+  font-size: 180px;
   text-shadow:
        5px 5px 0 #000,
       -1px -1px 0 #000,
@@ -487,10 +495,6 @@ input[type=button]:active, select:active {
   display: none;
 }
 
-#noVNC_logo span{
-  color:green;
-}
-
 /* ----------------------------------------
  * Media sizing
  * ----------------------------------------
diff --git a/vnc.html b/vnc.html
index 4f6aa876..aeb63f8d 100644
--- a/vnc.html
+++ b/vnc.html
@@ -53,6 +53,8 @@
     <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
 
         <div id="noVNC_control_bar"><div class="noVNC_scroll">
+            <h1 class="noVNC_logo"><span>no</span><br />VNC</h1>
+
             <!-- Drag/Pan the viewport -->
             <input type="image" alt="viewport drag" src="app/images/drag.svg"
                 id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
@@ -205,7 +207,7 @@
     </div>
 
     <div id="noVNC_container">
-        <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
+        <h1 id="noVNC_logo" class="noVNC_logo"><span>no</span><br />VNC</h1>
 
         <!-- HTML5 Canvas -->
         <div id="noVNC_screen">

From 728b5d9e1a32c16adef006fc25235bbb27d36172 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Fri, 26 Aug 2016 12:37:09 +0200
Subject: [PATCH 36/46] Make control bar transparent when idle

---
 app/styles/base.css |  5 +++++
 app/ui.js           | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/app/styles/base.css b/app/styles/base.css
index df10c7df..179a20b7 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -142,9 +142,14 @@ input[type=button]:active, select:active {
   position: fixed;
   z-index: 2;
 
+  transition: 0.5s ease-in-out;
+
   /* Edge misrenders animations wihthout this */
   transform: translateX(0);
 }
+:root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle {
+  opacity: 0.8;
+}
 
 #noVNC_control_bar {
   position: relative;
diff --git a/app/ui.js b/app/ui.js
index 27187fb1..6e2ff03f 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -41,6 +41,7 @@ var UI;
         resizeTimeout: null,
         statusTimeout: null,
         hideKeyboardTimeout: null,
+        controlbarTimeout: null,
 
         keyboardVisible: false,
 
@@ -188,6 +189,15 @@ var UI;
         },
 
         addControlbarHandlers: function() {
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mousemove', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mouseup', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mousedown', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('keypress', UI.activateControlbar);
+
             document.getElementById("noVNC_view_drag_button")
                 .addEventListener('click', UI.toggleViewDrag);
             document.getElementById("noVNC_send_ctrl_alt_del_button")
@@ -213,6 +223,15 @@ var UI;
             document.getElementById("noVNC_keyboardinput")
                 .addEventListener('submit', function () { return false; });
 
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchstart', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchmove', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchend', UI.activateControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('input', UI.activateControlbar);
+
             window.addEventListener('load', UI.keyboardinputReset);
         },
 
@@ -441,6 +460,20 @@ var UI;
             document.getElementById('noVNC_status').classList.remove("noVNC_open");
         },
 
+        activateControlbar: function() {
+            clearTimeout(UI.controlbarTimeout);
+            // We manipulate the anchor instead of the actual control
+            // bar in order to avoid creating new a stacking group
+            document.getElementById('noVNC_control_bar_anchor')
+                .classList.remove("noVNC_idle");
+            UI.controlbarTimeout = window.setTimeout(UI.idleControlbar, 2000);
+        },
+
+        idleControlbar: function() {
+            document.getElementById('noVNC_control_bar_anchor')
+                .classList.add("noVNC_idle");
+        },
+
 /* ------^-------
  *    /VISUAL
  * ==============

From 38323d4d92df7fd5f6e95a2adc2d7d91a32c9039 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Fri, 26 Aug 2016 13:24:25 +0200
Subject: [PATCH 37/46] Add handle to open and close the control bar

---
 app/images/handle.svg    |  82 +++++++++++++++++++
 app/images/handle_bg.svg | 172 +++++++++++++++++++++++++++++++++++++++
 app/styles/base.css      |  43 +++++++++-
 app/styles/black.css     |   2 +-
 app/styles/blue.css      |   2 +-
 app/ui.js                |  29 +++++++
 vnc.html                 |  10 ++-
 7 files changed, 333 insertions(+), 7 deletions(-)
 create mode 100644 app/images/handle.svg
 create mode 100644 app/images/handle_bg.svg

diff --git a/app/images/handle.svg b/app/images/handle.svg
new file mode 100644
index 00000000..4a7a126f
--- /dev/null
+++ b/app/images/handle.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="5"
+   height="6"
+   viewBox="0 0 5 6"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="handle.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="1.3551778"
+     inkscape:cy="8.7800329"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1046.3622)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 4.0000803,1049.3622 -3,-2 0,4 z"
+       id="path4247"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>
diff --git a/app/images/handle_bg.svg b/app/images/handle_bg.svg
new file mode 100644
index 00000000..b4c4d131
--- /dev/null
+++ b/app/images/handle_bg.svg
@@ -0,0 +1,172 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="20"
+   height="50"
+   viewBox="0 0 20 50"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="handle_bg.svg"
+   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#959595"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="10.515997"
+     inkscape:cy="22.863737"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:object-paths="true"
+     showguides="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1136"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1002.3622)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4249"
+       width="1"
+       height="1.0000174"
+       x="14.5"
+       y="1008.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1013.8622"
+       x="14.5"
+       height="1.0000174"
+       width="1"
+       id="rect4255"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       ry="1.7382812e-05"
+       y="1008.8622"
+       x="9.5"
+       height="1.0000174"
+       width="1"
+       id="rect4261"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4263"
+       width="1"
+       height="1.0000174"
+       x="9.5"
+       y="1013.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1039.8622"
+       x="14.5"
+       height="1.0000174"
+       width="1"
+       id="rect4265"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4267"
+       width="1"
+       height="1.0000174"
+       x="14.5"
+       y="1044.8622"
+       ry="1.7382812e-05" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4269"
+       width="1"
+       height="1.0000174"
+       x="9.5"
+       y="1039.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1044.8622"
+       x="9.5"
+       height="1.0000174"
+       width="1"
+       id="rect4271"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4273"
+       width="1"
+       height="1.0000174"
+       x="14.5"
+       y="1018.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1018.8622"
+       x="9.5"
+       height="1.0000174"
+       width="1"
+       id="rect4275"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4277"
+       width="1"
+       height="1.0000174"
+       x="14.5"
+       y="1034.8622"
+       ry="1.7382812e-05" />
+    <rect
+       ry="1.7382812e-05"
+       y="1034.8622"
+       x="9.5"
+       height="1.0000174"
+       width="1"
+       id="rect4279"
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/app/styles/base.css b/app/styles/base.css
index 179a20b7..ec682c46 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -153,18 +153,55 @@ input[type=button]:active, select:active {
 
 #noVNC_control_bar {
   position: relative;
-  left: -30px;
+  /* left: calc(-35px - 10px - 5px - 30px), but IE doesn't animate calc */
+  left: -80px;
+
+  transition: 0.5s ease-in-out;
 
   background-color: rgb(110, 132, 163);
   border-radius: 0 10px 10px 0;
 
-  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
-
   /* The extra border is to get a proper shadow */
   border-color: rgb(110, 132, 163);
   border-style: solid;
   border-width: 0 0 0 30px;
 }
+#noVNC_control_bar.noVNC_open {
+  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+  left: -30px;
+}
+
+#noVNC_control_bar_handle {
+  position: absolute;
+  right: -15px;
+  top: 10%;
+  width: 50px;
+  height: 50px;
+  z-index: -2;
+  cursor: pointer;
+  border-radius: 0 5px 5px 0;
+  background-color: rgb(83, 99, 122);
+  background-image: url("../images/handle_bg.svg");
+  background-repeat: no-repeat;
+  background-position: right;
+  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
+}
+#noVNC_control_bar_handle:after {
+  content: "";
+  transition: 0.5s ease-in-out;
+  background: url("../images/handle.svg");
+  position: absolute;
+  top: 22px; /* (50px-6px)/2 */
+  right: 5px;
+  width: 5px;
+  height: 6px;
+}
+#noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
+  transform: translateX(1px) rotate(180deg);
+}
+:root:not(.noVNC_connected) #noVNC_control_bar_handle {
+  display: none;
+}
 
 #noVNC_control_bar .noVNC_scroll {
   max-height: 100vh; /* Chrome is buggy with 100% */
diff --git a/app/styles/black.css b/app/styles/black.css
index e3ad2493..d982a813 100644
--- a/app/styles/black.css
+++ b/app/styles/black.css
@@ -12,7 +12,7 @@
   color:#fff;
 }
 
-#noVNC_control_bar {
+#noVNC_control_bar, #noVNC_control_bar_handle {
   background: #4c4c4c;
 }
 
diff --git a/app/styles/blue.css b/app/styles/blue.css
index 3db77270..e36e6d1d 100644
--- a/app/styles/blue.css
+++ b/app/styles/blue.css
@@ -12,6 +12,6 @@
   color:#fff;
 }
 
-#noVNC_control_bar {
+#noVNC_control_bar, #noVNC_control_bar_handle {
   background: #080F80;
 }
diff --git a/app/ui.js b/app/ui.js
index 6e2ff03f..0c7cf1ec 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -198,6 +198,9 @@ var UI;
             document.getElementById("noVNC_control_bar")
                 .addEventListener('keypress', UI.activateControlbar);
 
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('click', UI.toggleControlbar);
+
             document.getElementById("noVNC_view_drag_button")
                 .addEventListener('click', UI.toggleViewDrag);
             document.getElementById("noVNC_send_ctrl_alt_del_button")
@@ -474,6 +477,26 @@ var UI;
                 .classList.add("noVNC_idle");
         },
 
+        openControlbar: function() {
+            document.getElementById('noVNC_control_bar')
+                .classList.add("noVNC_open");
+        },
+
+        closeControlbar: function() {
+            UI.closeAllPanels();
+            document.getElementById('noVNC_control_bar')
+                .classList.remove("noVNC_open");
+        },
+
+        toggleControlbar: function() {
+            if (document.getElementById('noVNC_control_bar')
+                .classList.contains("noVNC_open")) {
+                UI.closeControlbar();
+            } else {
+                UI.openControlbar();
+            }
+        },
+
 /* ------^-------
  *    /VISUAL
  * ==============
@@ -612,6 +635,7 @@ var UI;
 
         openSettingsPanel: function() {
             UI.closeAllPanels();
+            UI.openControlbar();
 
             UI.updateSetting('encrypt');
             UI.updateSetting('true_color');
@@ -664,6 +688,7 @@ var UI;
 
         openXvpPanel: function() {
             UI.closeAllPanels();
+            UI.openControlbar();
 
             document.getElementById('noVNC_xvp')
                 .classList.add("noVNC_open");
@@ -708,6 +733,7 @@ var UI;
 
         openClipboardPanel: function() {
             UI.closeAllPanels();
+            UI.openControlbar();
 
             document.getElementById('noVNC_clipboard')
                 .classList.add("noVNC_open");
@@ -757,6 +783,7 @@ var UI;
 
         openConnectPanel: function() {
             UI.closeAllPanels();
+            UI.openControlbar();
 
             document.getElementById('noVNC_connect_controls')
                 .classList.add("noVNC_open");
@@ -789,6 +816,7 @@ var UI;
 
         connect: function() {
             UI.closeAllPanels();
+            UI.closeControlbar();
 
             var host = document.getElementById('noVNC_setting_host').value;
             var port = document.getElementById('noVNC_setting_port').value;
@@ -1250,6 +1278,7 @@ var UI;
 
         openExtraKeys: function() {
             UI.closeAllPanels();
+            UI.openControlbar();
 
             document.getElementById('noVNC_modifiers')
                 .classList.add("noVNC_open");
diff --git a/vnc.html b/vnc.html
index aeb63f8d..29d82521 100644
--- a/vnc.html
+++ b/vnc.html
@@ -52,7 +52,11 @@
     <!-- noVNC Control Bar -->
     <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
 
-        <div id="noVNC_control_bar"><div class="noVNC_scroll">
+        <div id="noVNC_control_bar">
+            <div id="noVNC_control_bar_handle" title="Hide/Show the control bar"></div>
+
+            <div class="noVNC_scroll">
+
             <h1 class="noVNC_logo"><span>no</span><br />VNC</h1>
 
             <!-- Drag/Pan the viewport -->
@@ -189,7 +193,9 @@
                 </ul>
             </div>
             </div>
-        </div></div>
+
+            </div>
+        </div>
 
     </div> <!-- End of noVNC_control_bar -->
 

From 65e3d7d6a66176c0edb0d298b905f25cf48cd1c2 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Fri, 26 Aug 2016 16:12:51 +0200
Subject: [PATCH 38/46] Make control bar handle easier to hit on mobile

---
 app/styles/base.css | 14 ++++++++++++++
 vnc.html            |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index ec682c46..78f97dff 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -22,6 +22,10 @@ html {
   height:100%;
 }
 
+.noVNC_only_touch.noVNC_hidden {
+  display: none;
+}
+
 /* ----------------------------------------
  * Input Elements
  * ----------------------------------------
@@ -202,6 +206,16 @@ input[type=button]:active, select:active {
 :root:not(.noVNC_connected) #noVNC_control_bar_handle {
   display: none;
 }
+#noVNC_control_bar_handle div {
+  position: absolute;
+  right: -35px;
+  top: 0;
+  width: 50px;
+  height: 50px;
+}
+:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
+  display: none;
+}
 
 #noVNC_control_bar .noVNC_scroll {
   max-height: 100vh; /* Chrome is buggy with 100% */
diff --git a/vnc.html b/vnc.html
index 29d82521..5019bfd9 100644
--- a/vnc.html
+++ b/vnc.html
@@ -53,7 +53,7 @@
     <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
 
         <div id="noVNC_control_bar">
-            <div id="noVNC_control_bar_handle" title="Hide/Show the control bar"></div>
+            <div id="noVNC_control_bar_handle" title="Hide/Show the control bar"><div></div></div>
 
             <div class="noVNC_scroll">
 

From 04b399e27d3eaa9ba55d46c05c1d3760dc22d1e6 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Wed, 14 Sep 2016 13:09:12 +0200
Subject: [PATCH 39/46] Allow moving the controlbar handle

This also adds emulation of Element.setCapture() as only Firefox
and Internet Explorer/Edge currently supports it.
---
 app/styles/base.css |   3 +-
 app/ui.js           | 113 ++++++++++++++++++++++++++++++++++++++++++--
 app/webutil.js      |  93 ++++++++++++++++++++++++++++++++++++
 core/util.js        |  10 ++--
 4 files changed, 212 insertions(+), 7 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 78f97dff..8fbcb282 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -178,7 +178,8 @@ input[type=button]:active, select:active {
 #noVNC_control_bar_handle {
   position: absolute;
   right: -15px;
-  top: 10%;
+  top: 0;
+  transform: translateY(35px);
   width: 50px;
   height: 50px;
   z-index: -2;
diff --git a/app/ui.js b/app/ui.js
index 0c7cf1ec..cdf20a96 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -43,6 +43,10 @@ var UI;
         hideKeyboardTimeout: null,
         controlbarTimeout: null,
 
+        controlbarGrabbed: false,
+        controlbarDrag: false,
+        controlbarMouseDownClientY: 0,
+        controlbarMouseDownOffsetY: 0,
         keyboardVisible: false,
 
         isTouchDevice: false,
@@ -198,13 +202,19 @@ var UI;
             document.getElementById("noVNC_control_bar")
                 .addEventListener('keypress', UI.activateControlbar);
 
-            document.getElementById("noVNC_control_bar_handle")
-                .addEventListener('click', UI.toggleControlbar);
-
             document.getElementById("noVNC_view_drag_button")
                 .addEventListener('click', UI.toggleViewDrag);
             document.getElementById("noVNC_send_ctrl_alt_del_button")
                 .addEventListener('click', UI.sendCtrlAltDel);
+
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('mousedown', UI.controlbarHandleMouseDown);
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('mouseup', UI.controlbarHandleMouseUp);
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('mousemove', UI.dragControlbarHandle);
+            // resize events aren't available for elements
+            window.addEventListener('resize', UI.updateControlbarHandle);
         },
 
         addTouchSpecificHandlers: function() {
@@ -235,6 +245,13 @@ var UI;
             document.getElementById("noVNC_control_bar")
                 .addEventListener('input', UI.activateControlbar);
 
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('touchstart', UI.controlbarHandleMouseDown);
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('touchend', UI.controlbarHandleMouseUp);
+            document.getElementById("noVNC_control_bar_handle")
+                .addEventListener('touchmove', UI.dragControlbarHandle);
+
             window.addEventListener('load', UI.keyboardinputReset);
         },
 
@@ -497,6 +514,96 @@ var UI;
             }
         },
 
+        dragControlbarHandle: function (e) {
+            if (!UI.controlbarGrabbed) return;
+
+            var ptr = Util.getPointerEvent(e);
+
+            if (!UI.controlbarDrag) {
+                // The goal is to trigger on a certain physical width, the
+                // devicePixelRatio brings us a bit closer but is not optimal.
+                var dragThreshold = 10 * (window.devicePixelRatio || 1);
+                var dragDistance = Math.abs(ptr.clientY - UI.controlbarMouseDownClientY);
+
+                if (dragDistance < dragThreshold) return;
+
+                UI.controlbarDrag = true;
+            }
+
+            var eventY = ptr.clientY - UI.controlbarMouseDownOffsetY;
+
+            UI.moveControlbarHandle(eventY);
+
+            e.preventDefault();
+            e.stopPropagation();
+        },
+
+        // Move the handle but don't allow any position outside the bounds
+        moveControlbarHandle: function (posY) {
+            var handle = document.getElementById("noVNC_control_bar_handle");
+            var handleHeight = Util.getPosition(handle).height;
+            var controlbar = document.getElementById("noVNC_control_bar");
+            var controlbarBounds = Util.getPosition(controlbar);
+            var controlbarTop = controlbarBounds.y;
+            var controlbarBottom = controlbarBounds.y + controlbarBounds.height;
+            var margin = 10;
+
+            var viewportY = posY;
+
+            // Refuse coordinates outside the control bar
+            if (viewportY < controlbarTop + margin) {
+                viewportY = controlbarTop + margin;
+            } else if (viewportY > controlbarBottom - handleHeight - margin) {
+                viewportY = controlbarBottom - handleHeight - margin;
+            }
+
+            // Corner case: control bar too small for stable position
+            if (controlbarBounds.height < (handleHeight + margin * 2)) {
+                viewportY = controlbarTop + (controlbarBounds.height - handleHeight) / 2;
+            }
+
+            var relativeY = viewportY - controlbarTop;
+            handle.style.transform = "translateY(" + relativeY + "px)";
+        },
+
+        updateControlbarHandle: function () {
+            var handle = document.getElementById("noVNC_control_bar_handle");
+            var pos = Util.getPosition(handle);
+            UI.moveControlbarHandle(pos.y);
+        },
+
+        controlbarHandleMouseUp: function(e) {
+            if ((e.type == "mouseup") && (e.button != 0))
+                return;
+
+            // mouseup and mousedown on the same place toggles the controlbar
+            if (UI.controlbarGrabbed && !UI.controlbarDrag) {
+                UI.toggleControlbar();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            UI.controlbarGrabbed = false;
+        },
+
+        controlbarHandleMouseDown: function(e) {
+            if ((e.type == "mousedown") && (e.button != 0))
+                return;
+
+            var ptr = Util.getPointerEvent(e);
+
+            var handle = document.getElementById("noVNC_control_bar_handle");
+            var bounds = handle.getBoundingClientRect();
+
+            WebUtil.setCapture(handle);
+            UI.controlbarGrabbed = true;
+            UI.controlbarDrag = false;
+
+            UI.controlbarMouseDownClientY = ptr.clientY;
+            UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top;
+            e.preventDefault();
+            e.stopPropagation();
+        },
+
 /* ------^-------
  *    /VISUAL
  * ==============
diff --git a/app/webutil.js b/app/webutil.js
index 7f234dbf..38bb3967 100644
--- a/app/webutil.js
+++ b/app/webutil.js
@@ -278,6 +278,99 @@ WebUtil.injectParamIfMissing = function (path, param, value) {
     }
 };
 
+// Emulate Element.setCapture() when not supported
+
+WebUtil._captureRecursion = false;
+WebUtil._captureProxy = function (e) {
+    // Recursion protection as we'll see our own event
+    if (WebUtil._captureRecursion) return;
+
+    // Clone the event as we cannot dispatch an already dispatched event
+    var newEv = new e.constructor(e.type, e);
+
+    WebUtil._captureRecursion = true;
+    WebUtil._captureElem.dispatchEvent(newEv);
+    WebUtil._captureRecursion = false;
+
+    // Implicitly release the capture on button release
+    if ((e.type === "mouseup") || (e.type === "touchend")) {
+        WebUtil.releaseCapture();
+    }
+};
+
+WebUtil.setCapture = function (elem) {
+    if (elem.setCapture) {
+
+        elem.setCapture();
+
+        // IE releases capture on 'click' events which might not trigger
+        elem.addEventListener('mouseup', WebUtil.releaseCapture);
+        elem.addEventListener('touchend', WebUtil.releaseCapture);
+
+    } else {
+        // Safari on iOS 9 has a broken constructor for TouchEvent.
+        // We are fine in this case however, since Safari seems to
+        // have some sort of implicit setCapture magic anyway.
+        if (window.TouchEvent !== undefined) {
+            try {
+                new TouchEvent("touchstart");
+            } catch (TypeError) {
+                return;
+            }
+        }
+
+        var captureElem = document.getElementById("noVNC_mouse_capture_elem");
+
+        if (captureElem === null) {
+            captureElem = document.createElement("div");
+            captureElem.id = "noVNC_mouse_capture_elem";
+            captureElem.style.position = "fixed";
+            captureElem.style.top = "0px";
+            captureElem.style.left = "0px";
+            captureElem.style.width = "100%";
+            captureElem.style.height = "100%";
+            captureElem.style.zIndex = 10000;
+            captureElem.style.display = "none";
+            document.body.appendChild(captureElem);
+
+            captureElem.addEventListener('mousemove', WebUtil._captureProxy);
+            captureElem.addEventListener('mouseup', WebUtil._captureProxy);
+
+            captureElem.addEventListener('touchmove', WebUtil._captureProxy);
+            captureElem.addEventListener('touchend', WebUtil._captureProxy);
+        }
+
+        WebUtil._captureElem = elem;
+        captureElem.style.display = null;
+
+        // We listen to events on window in order to keep tracking if it
+        // happens to leave the viewport
+        window.addEventListener('mousemove', WebUtil._captureProxy);
+        window.addEventListener('mouseup', WebUtil._captureProxy);
+
+        window.addEventListener('touchmove', WebUtil._captureProxy);
+        window.addEventListener('touchend', WebUtil._captureProxy);
+    }
+};
+
+WebUtil.releaseCapture = function () {
+    if (document.releaseCapture) {
+
+        document.releaseCapture();
+
+    } else {
+        var captureElem = document.getElementById("noVNC_mouse_capture_elem");
+        WebUtil._captureElem = null;
+        captureElem.style.display = "none";
+
+        window.removeEventListener('mousemove', WebUtil._captureProxy);
+        window.removeEventListener('mouseup', WebUtil._captureProxy);
+
+        window.removeEventListener('touchmove', WebUtil._captureProxy);
+        window.removeEventListener('touchend', WebUtil._captureProxy);
+    }
+};
+
 // Dynamically load scripts without using document.write()
 // Reference: http://unixpapa.com/js/dyna.html
 //
diff --git a/core/util.js b/core/util.js
index d6a01932..3cc1e876 100644
--- a/core/util.js
+++ b/core/util.js
@@ -204,14 +204,18 @@ Util.getPosition = function(obj) {
             'width': objPosition.width, 'height': objPosition.height};
 };
 
+Util.getPointerEvent = function (e) {
+    var evt;
+    evt = (e ? e : window.event);
+    evt = (evt.changedTouches ? evt.changedTouches[0] : evt.touches ? evt.touches[0] : evt);
+    return evt;
+};
 
 // Get mouse event position in DOM element
 Util.getEventPosition = function (e, obj, scale) {
     "use strict";
     var evt, docX, docY, pos;
-    //if (!e) evt = window.event;
-    evt = (e ? e : window.event);
-    evt = (evt.changedTouches ? evt.changedTouches[0] : evt.touches ? evt.touches[0] : evt);
+    evt = Util.getPointerEvent(e);
     if (evt.pageX || evt.pageY) {
         docX = evt.pageX;
         docY = evt.pageY;

From 3f93a385a273299ec4662b89c8f99752d5e392f1 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Wed, 31 Aug 2016 11:57:38 +0200
Subject: [PATCH 40/46] Auto-close the toolbar on connect after a delay

---
 app/ui.js | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index cdf20a96..0ccffadc 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -41,7 +41,8 @@ var UI;
         resizeTimeout: null,
         statusTimeout: null,
         hideKeyboardTimeout: null,
-        controlbarTimeout: null,
+        idleControlbarTimeout: null,
+        closeControlbarTimeout: null,
 
         controlbarGrabbed: false,
         controlbarDrag: false,
@@ -202,6 +203,11 @@ var UI;
             document.getElementById("noVNC_control_bar")
                 .addEventListener('keypress', UI.activateControlbar);
 
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('mousedown', UI.keepControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('keypress', UI.keepControlbar);
+
             document.getElementById("noVNC_view_drag_button")
                 .addEventListener('click', UI.toggleViewDrag);
             document.getElementById("noVNC_send_ctrl_alt_del_button")
@@ -245,6 +251,11 @@ var UI;
             document.getElementById("noVNC_control_bar")
                 .addEventListener('input', UI.activateControlbar);
 
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('touchstart', UI.keepControlbar);
+            document.getElementById("noVNC_control_bar")
+                .addEventListener('input', UI.keepControlbar);
+
             document.getElementById("noVNC_control_bar_handle")
                 .addEventListener('touchstart', UI.controlbarHandleMouseDown);
             document.getElementById("noVNC_control_bar_handle")
@@ -405,6 +416,9 @@ var UI;
                 document.documentElement.classList.add("noVNC_connected");
                 UI.updateViewClip();
                 UI.setMouseButton(1);
+
+                // Hide the controlbar after 2 seconds
+                UI.closeControlbarTimeout = setTimeout(UI.closeControlbar, 2000);
             } else {
                 document.documentElement.classList.remove("noVNC_connected");
                 UI.updateXvpButton(0);
@@ -480,13 +494,13 @@ var UI;
             document.getElementById('noVNC_status').classList.remove("noVNC_open");
         },
 
-        activateControlbar: function() {
-            clearTimeout(UI.controlbarTimeout);
+        activateControlbar: function(event) {
+            clearTimeout(UI.idleControlbarTimeout);
             // We manipulate the anchor instead of the actual control
             // bar in order to avoid creating new a stacking group
             document.getElementById('noVNC_control_bar_anchor')
                 .classList.remove("noVNC_idle");
-            UI.controlbarTimeout = window.setTimeout(UI.idleControlbar, 2000);
+            UI.idleControlbarTimeout = window.setTimeout(UI.idleControlbar, 2000);
         },
 
         idleControlbar: function() {
@@ -494,6 +508,10 @@ var UI;
                 .classList.add("noVNC_idle");
         },
 
+        keepControlbar: function() {
+            clearTimeout(UI.closeControlbarTimeout);
+        },
+
         openControlbar: function() {
             document.getElementById('noVNC_control_bar')
                 .classList.add("noVNC_open");
@@ -923,7 +941,6 @@ var UI;
 
         connect: function() {
             UI.closeAllPanels();
-            UI.closeControlbar();
 
             var host = document.getElementById('noVNC_setting_host').value;
             var port = document.getElementById('noVNC_setting_port').value;

From cd5a035d901e536d726400708c7929e5df0fa7b2 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Fri, 26 Aug 2016 13:30:28 +0200
Subject: [PATCH 41/46] Make sure all buttons have a tooltip

---
 vnc.html | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/vnc.html b/vnc.html
index 5019bfd9..b7074237 100644
--- a/vnc.html
+++ b/vnc.html
@@ -67,13 +67,17 @@
             <!--noVNC Touch Device only buttons-->
             <div id="noVNC_mobile_buttons">
                 <input type="image" alt="No mousebutton" src="app/images/mouse_none.svg"
-                    id="noVNC_mouse_button0" class="noVNC_button" />
+                    id="noVNC_mouse_button0" class="noVNC_button"
+                    title="Active Mouse Button"/>
                 <input type="image" alt="Left mousebutton" src="app/images/mouse_left.svg"
-                    id="noVNC_mouse_button1" class="noVNC_button" />
+                    id="noVNC_mouse_button1" class="noVNC_button"
+                    title="Active Mouse Button"/>
                 <input type="image" alt="Middle mousebutton" src="app/images/mouse_middle.svg"
-                    id="noVNC_mouse_button2" class="noVNC_button" />
+                    id="noVNC_mouse_button2" class="noVNC_button"
+                    title="Active Mouse Button"/>
                 <input type="image" alt="Right mousebutton" src="app/images/mouse_right.svg"
-                    id="noVNC_mouse_button4" class="noVNC_button" />
+                    id="noVNC_mouse_button4" class="noVNC_button"
+                    title="Active Mouse Button"/>
                 <input type="image" alt="Keyboard" src="app/images/keyboard.svg"
                     id="noVNC_keyboard_button" class="noVNC_button"
                     value="Keyboard" title="Show Keyboard" />
@@ -82,17 +86,22 @@
             <!-- Extra manual keys -->
             <div id="noVNC_extra_keys">
                 <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
-                    id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
+                    id="noVNC_toggle_extra_keys_button" class="noVNC_button"
+                    title="Show Extra Keys"/>
                 <div class="noVNC_vcenter">
                 <div id="noVNC_modifiers" class="noVNC_panel">
                     <input type="image" alt="Ctrl" src="app/images/ctrl.svg"
-                        id="noVNC_toggle_ctrl_button" class="noVNC_button" />
+                        id="noVNC_toggle_ctrl_button" class="noVNC_button"
+                        title="Toggle Ctrl"/>
                     <input type="image" alt="Alt" src="app/images/alt.svg"
-                        id="noVNC_toggle_alt_button" class="noVNC_button" />
+                        id="noVNC_toggle_alt_button" class="noVNC_button"
+                        title="Toggle Alt"/>
                     <input type="image" alt="Tab" src="app/images/tab.svg"
-                        id="noVNC_send_tab_button" class="noVNC_button" />
+                        id="noVNC_send_tab_button" class="noVNC_button"
+                        title="Send Tab"/>
                     <input type="image" alt="Esc" src="app/images/esc.svg"
-                        id="noVNC_send_esc_button" class="noVNC_button" />
+                        id="noVNC_send_esc_button" class="noVNC_button"
+                        title="Send Escape"/>
                 </div>
                 </div>
             </div>

From ca25d2ae26ffb22a2b7f9a4c56393165ca70052b Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Fri, 26 Aug 2016 13:34:01 +0200
Subject: [PATCH 42/46] Move Ctrl+Alt+Del to extra keys menu

The extra keys menu is now present for all devices, so avoid clutter
by moving the Ctrl+Alt+Del button there as well.
---
 app/styles/base.css | 5 -----
 app/ui.js           | 5 +++--
 vnc.html            | 8 +++-----
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 8fbcb282..b87c52e8 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -316,11 +316,6 @@ input[type=button]:active, select:active {
   display: none;
 }
 
-/* Send Ctrl+Alt+Delete */
-:root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button {
-  display: none;
-}
-
 #noVNC_modifiers {
   background-color: rgb(92, 92, 92);
   border: none;
diff --git a/app/ui.js b/app/ui.js
index 0ccffadc..f78b74c5 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -210,8 +210,6 @@ var UI;
 
             document.getElementById("noVNC_view_drag_button")
                 .addEventListener('click', UI.toggleViewDrag);
-            document.getElementById("noVNC_send_ctrl_alt_del_button")
-                .addEventListener('click', UI.sendCtrlAltDel);
 
             document.getElementById("noVNC_control_bar_handle")
                 .addEventListener('mousedown', UI.controlbarHandleMouseDown);
@@ -277,6 +275,8 @@ var UI;
                 .addEventListener('click', UI.sendTab);
             document.getElementById("noVNC_send_esc_button")
                 .addEventListener('click', UI.sendEsc);
+            document.getElementById("noVNC_send_ctrl_alt_del_button")
+                .addEventListener('click', UI.sendCtrlAltDel);
         },
 
         addXvpHandlers: function() {
@@ -1462,6 +1462,7 @@ var UI;
         },
 
         sendCtrlAltDel: function() {
+            UI.keepKeyboard();
             UI.rfb.sendCtrlAltDel();
         },
 
diff --git a/vnc.html b/vnc.html
index b7074237..8a68ba6f 100644
--- a/vnc.html
+++ b/vnc.html
@@ -102,15 +102,13 @@
                     <input type="image" alt="Esc" src="app/images/esc.svg"
                         id="noVNC_send_esc_button" class="noVNC_button"
                         title="Send Escape"/>
+                    <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
+                        id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
+                        title="Send Ctrl-Alt-Del" />
                 </div>
                 </div>
             </div>
 
-            <!-- Send Ctrl+Alt+Delete -->
-            <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
-                id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
-                title="Send Ctrl-Alt-Del" />
-
             <!-- XVP Shutdown/Reboot -->
             <input type="image" alt="Shutdown/Reboot" src="app/images/power.svg"
                 id="noVNC_xvp_button" class="noVNC_button"

From 1fe9faee6cdaa3b64acb9774a7c093aa20b57b34 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Tue, 30 Aug 2016 16:38:09 +0200
Subject: [PATCH 43/46] Clean up panel layouts

Make sure everything follows a consistent style and is properly
labeled.
---
 app/styles/base.css |  30 ++++++-------
 vnc.html            | 105 +++++++++++++++++++++++++++++++-------------
 2 files changed, 89 insertions(+), 46 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index b87c52e8..bc5fc280 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -283,6 +283,15 @@ input[type=button]:active, select:active {
   transform: translateX(75px);
 }
 
+.noVNC_panel hr {
+  border: none;
+  border-top: 1px solid rgb(192, 192, 192);
+}
+
+.noVNC_panel label {
+  display: block;
+}
+
 .noVNC_submit {
   float: right;
 }
@@ -332,6 +341,10 @@ input[type=button]:active, select:active {
   display: none;
 }
 
+#noVNC_xvp input[type=button] {
+  width: 100%;
+}
+
 /* Clipboard */
 :root:not(.noVNC_connected) #noVNC_clipboard_button {
   display: none;
@@ -350,7 +363,7 @@ input[type=button]:active, select:active {
 }
 #noVNC_settings ul {
   list-style: none;
-  margin: 3px;
+  margin: 0px;
   padding: 0px;
 }
 #noVNC_setting_path {
@@ -369,18 +382,9 @@ input[type=button]:active, select:active {
   margin: 0px;
   padding: 0px;
 }
-#noVNC_connect_controls li {
-  padding-bottom:8px;
-}
-#noVNC_setting_host {
-  width:150px;
-}
 #noVNC_setting_port {
   width: 80px;
 }
-#noVNC_setting_password {
-  width: 150px;
-}
 
 /* ----------------------------------------
  * Status Dialog
@@ -462,12 +466,6 @@ input[type=button]:active, select:active {
   margin: 0px;
   padding: 0px;
 }
-#noVNC_password_dlg li {
-  padding-bottom:8px;
-}
-#noVNC_password_input {
-  width: 150px;
-}
 
 /* ----------------------------------------
  * Main Area
diff --git a/vnc.html b/vnc.html
index 8a68ba6f..0d97734b 100644
--- a/vnc.html
+++ b/vnc.html
@@ -147,37 +147,62 @@
             <div class="noVNC_vcenter">
             <div id="noVNC_settings" class="noVNC_panel">
                 <ul>
-                    <li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
-                    <li><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</li>
-                    <li><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</li>
-                    <li><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</li>
-                    <li><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</li>
-                    <li><input id="noVNC_setting_view_only" type="checkbox" /> View Only</li>
-                    <hr>
-                    <li><input id="noVNC_setting_path" type="input" value="websockify" /> Path</li>
-                    <li><label>
-                            <select id="noVNC_setting_resize" name="vncResize">
-                                <option value="off">None</option>
-                                <option value="scale">Local Scaling</option>
-                                <option value="downscale">Local Downscaling</option>
-                                <option value="remote">Remote Resizing</option>
-                            </select> Scaling Mode</label>
+                    <li>
+                        <label><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</label>
                     </li>
-                    <li><input id="noVNC_setting_repeaterID" type="input" value="" /> Repeater ID</li>
-                    <hr>
+                    <li>
+                        <label><input id="noVNC_setting_true_color" type="checkbox" checked /> True Color</label>
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_cursor" type="checkbox" /> Local Cursor</label>
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_clip" type="checkbox" /> Clip to Window</label>
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_shared" type="checkbox" /> Shared Mode</label>
+                    </li>
+                    <li>
+                        <label><input id="noVNC_setting_view_only" type="checkbox" /> View Only</label>
+                    </li>
+                    <li><hr></li>
+                    <li>
+                        <label for="noVNC_setting_path">Path:</label>
+                        <input id="noVNC_setting_path" type="input" value="websockify" />
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_resize">Scaling Mode:</label>
+                        <select id="noVNC_setting_resize" name="vncResize">
+                            <option value="off">None</option>
+                            <option value="scale">Local Scaling</option>
+                            <option value="downscale">Local Downscaling</option>
+                            <option value="remote">Remote Resizing</option>
+                        </select>
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_repeaterID">Repeater ID:</label>
+                        <input id="noVNC_setting_repeaterID" type="input" value="" />
+                    </li>
+                    <li><hr></li>
                     <!-- Stylesheet selection dropdown -->
-                    <li><label><strong>Style: </strong>
+                    <li>
+                        <label>Style:
                             <select id="noVNC_setting_stylesheet" name="vncStyle">
                                 <option value="default">default</option>
-                        </select></label>
+                            </select>
+                        </label>
                     </li>
                     <!-- Logging selection dropdown -->
-                    <li><label><strong>Logging: </strong>
+                    <li>
+                        <label>Logging:
                             <select id="noVNC_setting_logging" name="vncLogging">
-                        </select></label>
+                            </select>
+                        </label>
+                    </li>
+                    <li><hr></li>
+                    <li>
+                        <input type="button" id="noVNC_settings_apply" value="Apply" class="noVNC_submit" />
                     </li>
-                    <hr>
-                    <li><input type="button" id="noVNC_settings_apply" value="Apply" class="noVNC_submit" /></li>
                 </ul>
             </div>
             </div>
@@ -192,11 +217,26 @@
             <div class="noVNC_vcenter">
             <div id="noVNC_connect_controls" class="noVNC_panel">
                 <ul>
-                    <li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
-                    <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>
-                    <li><label><strong>Password: </strong><input id="noVNC_setting_password" type="password" /></label></li>
-                    <li><label><strong>Token: </strong><input id="noVNC_setting_token" /></label></li>
-                    <li><input id="noVNC_connect_button" type="button" value="Connect" class="noVNC_submit" /></li>
+                    <li>
+                        <label for="noVNC_setting_host">Host:</label>
+                        <input id="noVNC_setting_host" />
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_port">Port:</label>
+                        <input id="noVNC_setting_port" />
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_password">Password:</label>
+                        <input id="noVNC_setting_password" type="password" />
+                    </li>
+                    <li>
+                        <label for="noVNC_setting_token">Token:</label>
+                        <input id="noVNC_setting_token" />
+                    </li>
+                    <li><hr></li>
+                    <li>
+                        <input id="noVNC_connect_button" type="button" value="Connect" class="noVNC_submit" />
+                    </li>
                 </ul>
             </div>
             </div>
@@ -213,8 +253,13 @@
     <div class="noVNC_center">
     <div id="noVNC_password_dlg" class="noVNC_panel">
         <ul>
-            <li><label><strong>Password: </strong><input id="noVNC_password_input" type="password" /></label></li>
-            <li><input id="noVNC_password_button" type="button" value="Send Password" class="noVNC_submit" /></li>
+            <li>
+                <label>Password:</label>
+                <input id="noVNC_password_input" type="password" />
+            </li>
+            <li>
+                <input id="noVNC_password_button" type="button" value="Send Password" class="noVNC_submit" />
+            </li>
         </ul>
     </div>
     </div>

From 5454c3451124741a0244eed66c5fc8afb6306a53 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Tue, 30 Aug 2016 16:38:45 +0200
Subject: [PATCH 44/46] Add headings to panels

---
 app/styles/base.css  | 15 +++++++++++++++
 app/styles/black.css |  2 +-
 app/styles/blue.css  |  2 +-
 vnc.html             | 12 ++++++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index bc5fc280..89b8eeaf 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -292,6 +292,21 @@ input[type=button]:active, select:active {
   display: block;
 }
 
+.noVNC_panel .noVNC_heading {
+  background-color: rgb(110, 132, 163);
+  border-radius: 5px;
+  padding: 5px;
+  /* Compensate for padding in image */
+  padding-right: 8px;
+  color: white;
+  font-size: 20px;
+  margin-bottom: 10px;
+  white-space: nowrap;
+}
+.noVNC_panel .noVNC_heading img {
+  vertical-align: bottom;
+}
+
 .noVNC_submit {
   float: right;
 }
diff --git a/app/styles/black.css b/app/styles/black.css
index d982a813..178fa100 100644
--- a/app/styles/black.css
+++ b/app/styles/black.css
@@ -12,7 +12,7 @@
   color:#fff;
 }
 
-#noVNC_control_bar, #noVNC_control_bar_handle {
+#noVNC_control_bar, #noVNC_control_bar_handle, .noVNC_panel .noVNC_heading {
   background: #4c4c4c;
 }
 
diff --git a/app/styles/blue.css b/app/styles/blue.css
index e36e6d1d..a38ede15 100644
--- a/app/styles/blue.css
+++ b/app/styles/blue.css
@@ -12,6 +12,6 @@
   color:#fff;
 }
 
-#noVNC_control_bar, #noVNC_control_bar_handle {
+#noVNC_control_bar, #noVNC_control_bar_handle, .noVNC_panel .noVNC_heading {
   background: #080F80;
 }
diff --git a/vnc.html b/vnc.html
index 0d97734b..50cd7795 100644
--- a/vnc.html
+++ b/vnc.html
@@ -115,6 +115,9 @@
                 title="Shutdown/Reboot..." />
             <div class="noVNC_vcenter">
             <div id="noVNC_xvp" class="noVNC_panel">
+                <div class="noVNC_heading">
+                    <img src="app/images/power.svg"> Power
+                </div>
                 <input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" />
                 <input type="button" id="noVNC_xvp_reboot_button" value="Reboot" />
                 <input type="button" id="noVNC_xvp_reset_button" value="Reset" />
@@ -127,6 +130,9 @@
                 title="Clipboard" />
             <div class="noVNC_vcenter">
             <div id="noVNC_clipboard" class="noVNC_panel">
+                <div class="noVNC_heading">
+                    <img src="app/images/clipboard.svg"> Clipboard
+                </div>
                 <textarea id="noVNC_clipboard_text" rows=5>
                 </textarea>
                 <br />
@@ -147,6 +153,9 @@
             <div class="noVNC_vcenter">
             <div id="noVNC_settings" class="noVNC_panel">
                 <ul>
+                    <li class="noVNC_heading">
+                        <img src="app/images/settings.svg"> Settings
+                    </li>
                     <li>
                         <label><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</label>
                     </li>
@@ -217,6 +226,9 @@
             <div class="noVNC_vcenter">
             <div id="noVNC_connect_controls" class="noVNC_panel">
                 <ul>
+                    <li class="noVNC_heading">
+                        <img src="app/images/connect.svg"> Connection
+                    </li>
                     <li>
                         <label for="noVNC_setting_host">Host:</label>
                         <input id="noVNC_setting_host" />

From 1a15cb5b3257973d64e16ea4c88a7eb72e077fb7 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Thu, 22 Sep 2016 12:58:05 +0200
Subject: [PATCH 45/46] Add hover hints to buttons

Disable it on touch devices though as it is mostly annoying there.
---
 app/styles/base.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/styles/base.css b/app/styles/base.css
index 89b8eeaf..4431908d 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -97,6 +97,10 @@ input[type=button]:active, select:active {
   margin-top: 3px;
 }
 
+:root:not(.noVNC_touch) input[type=button]:hover:not(:disabled), :root:not(.noVNC_touch) select:hover:not(:disabled) {
+  background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+}
+
 /* ----------------------------------------
  * WebKit centering hacks
  * ----------------------------------------
@@ -250,6 +254,13 @@ input[type=button]:active, select:active {
   padding-top: 5px;
   padding-bottom: 3px;
 }
+:root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover {
+  border-color: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.2);
+}
+:root:not(.noVNC_touch) .noVNC_button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
 .noVNC_button.noVNC_hidden {
   display: none;
 }

From 4b30f9ce091cde40fd5304816be7dc72f09c2521 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Fri, 23 Sep 2016 17:31:23 +0200
Subject: [PATCH 46/46] Clean up virtual keyboard handling

---
 app/ui.js | 79 ++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/app/ui.js b/app/ui.js
index f78b74c5..cfcfe1c5 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -231,12 +231,12 @@ var UI;
             document.getElementById("noVNC_mouse_button4")
                 .addEventListener('click', function () { UI.setMouseButton(0); });
             document.getElementById("noVNC_keyboard_button")
-                .addEventListener('click', UI.showKeyboard);
+                .addEventListener('click', UI.toggleVirtualKeyboard);
 
             document.getElementById("noVNC_keyboardinput")
                 .addEventListener('input', UI.keyInput);
             document.getElementById("noVNC_keyboardinput")
-                .addEventListener('blur', UI.hideKeyboard);
+                .addEventListener('blur', UI.onblurVirtualKeyboard);
             document.getElementById("noVNC_keyboardinput")
                 .addEventListener('submit', function () { return false; });
 
@@ -1281,45 +1281,64 @@ var UI;
  *    KEYBOARD
  * ------v------*/
 
-        // On touch devices, show the OS keyboard
-        showKeyboard: function() {
-            var kbi = document.getElementById('noVNC_keyboardinput');
-            var skb = document.getElementById('noVNC_keyboard_button');
-            var l = kbi.value.length;
-            if(UI.keyboardVisible === false) {
-                kbi.focus();
-                try { kbi.setSelectionRange(l, l); } // Move the caret to the end
-                catch (err) {} // setSelectionRange is undefined in Google Chrome
-                UI.keyboardVisible = true;
-                skb.classList.add("noVNC_selected");
-            } else if(UI.keyboardVisible === true) {
-                kbi.blur();
-                skb.classList.remove("noVNC_selected");
-                UI.keyboardVisible = false;
+        showVirtualKeyboard: function() {
+            if (!UI.isTouchDevice)
+                return;
+
+            var input = document.getElementById('noVNC_keyboardinput');
+
+            if (document.activeElement == input)
+                return;
+
+            UI.keyboardVisible = true;
+            document.getElementById('noVNC_keyboard_button')
+                .classList.add("noVNC_selected");
+            input.focus();
+
+            try {
+                var l = input.value.length;
+                // Move the caret to the end
+                input.setSelectionRange(l, l);
+            } catch (err) {} // setSelectionRange is undefined in Google Chrome
+        },
+
+        hideVirtualKeyboard: function() {
+            if (!UI.isTouchDevice)
+                return;
+
+            var input = document.getElementById('noVNC_keyboardinput');
+
+            if (document.activeElement != input)
+                return;
+
+            input.blur();
+        },
+
+        toggleVirtualKeyboard: function () {
+            if (UI.keyboardVisible) {
+                UI.hideVirtualKeyboard();
+            } else {
+                UI.showVirtualKeyboard();
             }
         },
 
-        hideKeyboard: function() {
-            document.getElementById('noVNC_keyboard_button')
-                .classList.remove("noVNC_selected");
+        onblurVirtualKeyboard: function() {
             //Weird bug in iOS if you change keyboardVisible
             //here it does not actually occur so next time
             //you click keyboard icon it doesnt work.
             UI.hideKeyboardTimeout = setTimeout(function() {
                 UI.keyboardVisible = false;
+                document.getElementById('noVNC_keyboard_button')
+			.classList.remove("noVNC_selected");
             },100);
         },
 
         keepKeyboard: function() {
             clearTimeout(UI.hideKeyboardTimeout);
             if(UI.keyboardVisible === true) {
-                document.getElementById('noVNC_keyboardinput').focus();
-                document.getElementById('noVNC_keyboard_button')
-                    .classList.add("noVNC_selected");
+                UI.showVirtualKeyboard();
             } else if(UI.keyboardVisible === false) {
-                document.getElementById('noVNC_keyboardinput').blur();
-                document.getElementById('noVNC_keyboard_button')
-                    .classList.remove("noVNC_selected");
+                UI.hideVirtualKeyboard();
             }
         },
 
@@ -1400,6 +1419,12 @@ var UI;
             }
         },
 
+/* ------^-------
+ *   /KEYBOARD
+ * ==============
+ *   EXTRA KEYS
+ * ------v------*/
+
         openExtraKeys: function() {
             UI.closeAllPanels();
             UI.openControlbar();
@@ -1467,7 +1492,7 @@ var UI;
         },
 
 /* ------^-------
- *   /KEYBOARD
+ *   /EXTRA KEYS
  * ==============
  *     MISC
  * ------v------*/