[Spice-devel] [PATCH spice-html5 v2] Add checkbox to toggle debug console

[Tomáš Bohdálek]

This allows show or hide debug console under spice screen.
---
 resize.js  | 16 ++++++++++++++--
 spice.html | 18 ++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/resize.js b/resize.js
index 89b59ff..5559bcf 100644
--- a/resize.js
+++ b/resize.js
@@ -39,13 +39,25 @@ function resize_helper(sc)
     /* Screen size can't be get from screen_id.style.minHeight, min-height is defined in css */
     var minHeight = parseInt(window.getComputedStyle(screen_id).getPropertyValue("min-height"),
                              10);
+    /* Get console height from spice.css .spice-message */
+    var mh = parseInt(window.getComputedStyle(m).getPropertyValue("height"), 10);
 
     /* Resize vertically; basically we leave a 20 pixel margin
          at the bottom, and use the position of the message window
          to figure out how to resize */
 
-    /* Show both div elements - spice-area and message-div */
-    var h = window.innerHeight - m.offsetHeight - m.clientHeight - 20;
+    var h = window.innerHeight - 20;
+
+    /* Screen height based on debug console visibility  */
+    if (window.getComputedStyle(m).getPropertyValue("display") == 'none')
+    {
+        h = h - mh;
+    }
+    else
+    {
+        /* Show both div elements - spice-area and message-div */
+        h = h - m.offsetHeight - m.clientHeight;
+    }
 
     /* Set minimal height if screen is smaller than screen min-height */
     if (h < minHeight)
diff --git a/spice.html b/spice.html
index d4c9962..7abfcff 100644
--- a/spice.html
+++ b/spice.html
@@ -143,6 +143,23 @@
                 }
             }
 
+            function toggle_console()
+            {
+                var checkbox = document.getElementById('show_console');
+                var m = document.getElementById('message-div');
+
+                if (checkbox.checked)
+                {
+                    m.style.display = 'block';
+                }
+                else
+                {
+                    m.style.display = 'none';
+                }
+
+                window.addEventListener('resize', handle_resize);
+                resize_helper(sc);
+            }
             /* SPICE port event listeners
             window.addEventListener('spice-port-data', function(event) {
                 // Here we convert data to text, but really we can obtain binary data also
@@ -166,6 +183,7 @@
             <label for="host">Host:</label> <input type='text' id='host' value='localhost'> <!-- localhost -->
             <label for="port">Port:</label> <input type='text' id='port' value='5959'>
             <label for="password">Password:</label> <input type='password' id='password' value=''>
+            <label for="show_console">Show console </label><input type="checkbox" id="show_console" value="1" onchange="toggle_console()" checked>
             <button id="connectButton" onclick="connect();">Start</button>
         </div>
 
-- 
2.9.4