Consistently close dialogs on connect/disconnect

This was done a bit arbitrarily before which could easily miss things,
end up in the wrong state and not trigger animations correctly.

This reverts commit c12e5b2b544aff6f662c7f61f82ce40d132e14df and fixes
things in a different way.

3 files changed, 28 insertions, 33 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index ae9768d..fd78b79 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -635,7 +635,7 @@ select:active {
 }
 
 /* Extra manual keys */
-:root:not(.noVNC_connected) #noVNC_extra_keys {
+:root:not(.noVNC_connected) #noVNC_toggle_extra_keys_button {
   display: none;
 }
 
@@ -663,9 +663,6 @@ select:active {
 :root:not(.noVNC_connected) #noVNC_clipboard_button {
   display: none;
 }
-:root:not(.noVNC_connected) #noVNC_clipboard {
-  display: none;
-}
 #noVNC_clipboard {
   /* Full screen, minus padding and left and right margins */
   max-width: calc(100vw - 2*15px - 75px - 25px);
diff --git a/app/ui.js b/app/ui.js
index 61ddffe..7207b2f 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -445,7 +445,9 @@ const UI = {
             UI.keepControlbar();
         }
 
-        // State change closes the password dialog
+        // State change closes dialogs as they may not be relevant
+        // anymore
+        UI.closeAllPanels();
         document.getElementById('noVNC_credentials_dlg')
             .classList.remove('noVNC_open');
     },
@@ -1016,7 +1018,6 @@ const UI = {
             return;
         }
 
-        UI.closeAllPanels();
         UI.closeConnectPanel();
 
         UI.updateVisualState('connecting');
@@ -1054,7 +1055,6 @@ const UI = {
     },
 
     disconnect() {
-        UI.closeAllPanels();
         UI.rfb.disconnect();
 
         UI.connected = false;
diff --git a/vnc.html b/vnc.html
index a1bbb21..0f2a3b3 100644
--- a/vnc.html
+++ b/vnc.html
@@ -111,32 +111,30 @@
             </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"
-                    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"
-                        title="Toggle Ctrl">
-                    <input type="image" alt="Alt" src="app/images/alt.svg"
-                        id="noVNC_toggle_alt_button" class="noVNC_button"
-                        title="Toggle Alt">
-                    <input type="image" alt="Windows" src="app/images/windows.svg"
-                        id="noVNC_toggle_windows_button" class="noVNC_button"
-                        title="Toggle Windows">
-                    <input type="image" alt="Tab" src="app/images/tab.svg"
-                        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"
-                        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>
+            <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
+                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"
+                    title="Toggle Ctrl">
+                <input type="image" alt="Alt" src="app/images/alt.svg"
+                    id="noVNC_toggle_alt_button" class="noVNC_button"
+                    title="Toggle Alt">
+                <input type="image" alt="Windows" src="app/images/windows.svg"
+                    id="noVNC_toggle_windows_button" class="noVNC_button"
+                    title="Toggle Windows">
+                <input type="image" alt="Tab" src="app/images/tab.svg"
+                    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"
+                    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>
 
             <!-- Shutdown/Reboot -->