Harmonise CSS names

Follow the same naming convention for all CSS ids and classes.

diff --git a/app/styles/base.css b/app/styles/base.css
index 4336375fb82c8226a3a9653686e483d604e41aca..d1d83a3b9c45b39a2fd95a2df47fde6ccde2e29f 100644 (file)
--- 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 7788f7d0cfdbf3519842ce1a2faf064c63733043..9a3d5d2e87b634d04ac8d02c974270dd3b91be2f 100644 (file)
--- 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 a9a36b50db16c2dc2d6d5bca1402454bc822f9b2..907e41da126e91f3857694e7e982aed4816cedb7 100644 (file)
--- 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 b4d0a3735965ecbbeac0f4cf292456df20ab806f..9d9fcaf328ffce9aae76faa472c468a2f90f62a3 100644 (file)
--- 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>