[GH-ISSUE #593] Console in modal dialog instead of new window? #449

New issue

Open

opened 2026-02-27 16:39:19 +03:00 by kerem · 1 comment

kerem commented

2026-02-27 16:39:19 +03:00

Owner

Originally created by @wildstray on GitHub (Jan 13, 2016).
Original GitHub issue: https://github.com/retspen/webvirtmgr/issues/593

Maybe an idea? Modal are instantaneous, new windows are extremely slow to open (eg. with Firefox). Are there possibile drawbacks? Is it possibile to make modals resizable?

Originally created by @wildstray on GitHub (Jan 13, 2016). Original GitHub issue: https://github.com/retspen/webvirtmgr/issues/593 Maybe an idea? Modal are instantaneous, new windows are extremely slow to open (eg. with Firefox). Are there possibile drawbacks? Is it possibile to make modals resizable?

kerem commented

2026-02-27 16:39:19 +03:00

Author

Owner

@wildstray commented on GitHub (Jan 14, 2016):

Proposed patch: console in modal dialogs (instantaneous!). Tested ONLY with noVNC, not Spice!
jQuery HAS TO BE update to 1.11.1 with jQuery UI
TODO:

test with other browsers (I'm using Firefox, this patch perfectly works)
test with Spice, make possible changes required to gain iframe focus (anyone interested? anyone using Spice?)
make Fullscreen button disabled in iframe (or find a way to go fullscreen also when into an iframe)

diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/static/css/webvirtmgr.css /opt/webvirtmgr/static/css/webvirtmgr.css
--- /opt/webvirtmgr.old/static/css/webvirtmgr.css   2015-12-05 03:05:56.538943187 +0100
+++ /opt/webvirtmgr/static/css/webvirtmgr.css   2016-01-14 01:39:44.248123989 +0100
@@ -213,3 +213,14 @@
 #viewXMLpre .pre-scrollable {
     width: 100%;
 }
+
+#consoleModal .modal-dialog {
+    width: 850px;
+    min-width: 850px;
+}
+
+#consoleFrame {
+    border: 0;
+    width: 100%;
+    height: 485px;
+}
diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/base.html /opt/webvirtmgr/templates/base.html
--- /opt/webvirtmgr.old/templates/base.html 2015-11-27 08:36:15.000000000 +0100
+++ /opt/webvirtmgr/templates/base.html 2016-01-13 17:06:47.731413586 +0100
@@ -7,6 +7,7 @@
     <title>{% block title %}{% endblock %}</title>
     <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
     <link href="{% static "css/webvirtmgr.css" %}" rel="stylesheet">
+    <link href="{% static "css/jquery-ui.css" %}" rel="stylesheet">
     {% block style %}{% endblock %}
 </head>

@@ -46,7 +47,8 @@
 <div class="container">
     {% block content %}{% endblock %}
 </div>
-<script src="{% static "js/jquery-1.10.2.js" %}"></script>
+<script src="{% static "js/jquery-1.11.1.min.js" %}"></script>
+<script src="{% static "js/jquery-ui.min.js" %}"></script>
 <script src="{% static "js/bootstrap.min.js" %}"></script>
 {% block script %}{% endblock %}
 </body>
diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/console.html /opt/webvirtmgr/templates/console.html
--- /opt/webvirtmgr.old/templates/console.html  1970-01-01 01:00:00.000000000 +0100
+++ /opt/webvirtmgr/templates/console.html  2016-01-14 01:38:06.590010876 +0100
@@ -0,0 +1,11 @@
+<div id="consoleModal" class="modal fade in" aria-hidden="false" role="dialog" tabindex="-1" hidden="hidden">
+    <div class="modal-dialog">
+   <div class="modal-content">
+       <div class="modal-header">
+       <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
+       <h4 class="modal-title">Console</h4>
+       </div>
+       <iframe id="consoleFrame"><p>Your browser does not support iframes.</p></iframe>
+   </div>
+    </div>
+</div>
diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/console-vnc.html /opt/webvirtmgr/templates/console-vnc.html
--- /opt/webvirtmgr.old/templates/console-vnc.html  2015-11-27 08:36:15.000000000 +0100
+++ /opt/webvirtmgr/templates/console-vnc.html  2016-01-14 01:26:50.167074848 +0100
@@ -17,7 +17,7 @@
                 <td>
                     <div id="noVNC_status">{% trans "Loading..." %}</div>
                 </td>
-                <td width="32%" style="text-align:right;">
+                <td width="40%" style="text-align:right;">
                     <div id="noVNC_buttons">
                         <!-- dirty fix for keyboard on iOS devices -->
                         <input type="button" id="showKeyboard" value="Keyboard" title="Show Keyboard"/>
@@ -34,12 +34,13 @@

                         <input type=button value="Ctrl+Alt+Del" id="sendCtrlAltDelButton">
                         <input type=button value="Fullscreen" id="askFullscreen">
+                        <input type=button value="Reconnect" id="askReconnect">
                     </div>
                 </td>
             </tr>
         </table>
     </div>
-    <canvas id="noVNC_canvas" width="640px" height="20px">
+    <canvas id="noVNC_canvas" width="640px" height="20px" tabindex="0">
         {% trans "Canvas not supported." %}
     </canvas>
 </div>
@@ -129,6 +130,8 @@
         }

         if (state === "normal") {
+            $D("noVNC_canvas").focus();
+            $D("noVNC_canvas").blur();
             cad.disabled = false;
             af.disabled = false;
         }
@@ -156,6 +159,10 @@
         }
     }

+    function reconnect() {
+        window.onscriptsload.call();
+    }
+
     window.onscriptsload = function () {
         var host, port, password, path, token;

@@ -163,6 +170,8 @@
         $D('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
         $D('askFullscreen').style.display = "inline";
         $D('askFullscreen').onclick = fullscreen;
+        $D('askReconnect').style.display = "inline";
+        $D('askReconnect').onclick = reconnect;

         // dirty fix for keyboard on iOS devices
         if (isTouchDevice) {
diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/instance.html /opt/webvirtmgr/templates/instance.html
--- /opt/webvirtmgr.old/templates/instance.html 2015-11-27 08:36:15.000000000 +0100
+++ /opt/webvirtmgr/templates/instance.html 2016-01-14 12:43:25.727266002 +0100
@@ -771,11 +771,13 @@
     </div>
     </div>
     {% include 'sidebar_close.html' %}
+    {% include 'console.html' %}
 {% endblock %}
 {% block script %}
 <script>
     function open_console() {
-        window.open('{% url 'console' %}?token={{ host_id }}-{{ uuid }}', '', 'width=850,height=485')
+        $("#consoleFrame").attr('src', '{% url 'console' %}?token={{ host_id }}-{{ uuid }}');
+        $("#consoleModal").modal('show');
     }
     function show_console() {
         if ($('#console_show_pass').attr('type') == 'password') {
diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/instances.html /opt/webvirtmgr/templates/instances.html
--- /opt/webvirtmgr.old/templates/instances.html    2015-11-27 08:36:15.000000000 +0100
+++ /opt/webvirtmgr/templates/instances.html    2016-01-14 12:45:02.873374044 +0100
@@ -143,6 +143,7 @@
         {% endif %}
     </div>
     {% include 'sidebar_close.html' %}
+    {% include 'console.html' %}
 {% endblock %}
 {% block script %}
     <script>
@@ -251,7 +252,8 @@
             window.setInterval('status()', {{ time_refresh }});
         });
         function open_console(uuid) {
-            window.open("/console/?token=" + uuid, "", "width=850,height=485");
+            $("#consoleFrame").attr('src', '{% url 'console' %}?token=' + uuid);
+            $("#consoleModal").modal('show');
         }
     </script>
     <script src="{% static "js/jquery.tablesorter.js" %}"></script>

@wildstray commented on GitHub (Jan 14, 2016): Proposed patch: console in modal dialogs (instantaneous!). Tested ONLY with noVNC, not Spice! **jQuery HAS TO BE update to 1.11.1 with jQuery UI** TODO: - test with other browsers (I'm using Firefox, this patch perfectly works) - test with Spice, make possible changes required to gain iframe focus (anyone interested? anyone using Spice?) - make Fullscreen button disabled in iframe (or find a way to go fullscreen also when into an iframe) ``` diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/static/css/webvirtmgr.css /opt/webvirtmgr/static/css/webvirtmgr.css --- /opt/webvirtmgr.old/static/css/webvirtmgr.css 2015-12-05 03:05:56.538943187 +0100 +++ /opt/webvirtmgr/static/css/webvirtmgr.css 2016-01-14 01:39:44.248123989 +0100 @@ -213,3 +213,14 @@ #viewXMLpre .pre-scrollable { width: 100%; } + +#consoleModal .modal-dialog { + width: 850px; + min-width: 850px; +} + +#consoleFrame { + border: 0; + width: 100%; + height: 485px; +} diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/base.html /opt/webvirtmgr/templates/base.html --- /opt/webvirtmgr.old/templates/base.html 2015-11-27 08:36:15.000000000 +0100 +++ /opt/webvirtmgr/templates/base.html 2016-01-13 17:06:47.731413586 +0100 @@ -7,6 +7,7 @@ <title>{% block title %}{% endblock %}</title> <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"> <link href="{% static "css/webvirtmgr.css" %}" rel="stylesheet"> + <link href="{% static "css/jquery-ui.css" %}" rel="stylesheet"> {% block style %}{% endblock %} </head> @@ -46,7 +47,8 @@ <div class="container"> {% block content %}{% endblock %} </div> -<script src="{% static "js/jquery-1.10.2.js" %}"></script> +<script src="{% static "js/jquery-1.11.1.min.js" %}"></script> +<script src="{% static "js/jquery-ui.min.js" %}"></script> <script src="{% static "js/bootstrap.min.js" %}"></script> {% block script %}{% endblock %} </body> diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/console.html /opt/webvirtmgr/templates/console.html --- /opt/webvirtmgr.old/templates/console.html 1970-01-01 01:00:00.000000000 +0100 +++ /opt/webvirtmgr/templates/console.html 2016-01-14 01:38:06.590010876 +0100 @@ -0,0 +1,11 @@ +<div id="consoleModal" class="modal fade in" aria-hidden="false" role="dialog" tabindex="-1" hidden="hidden"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button> + <h4 class="modal-title">Console</h4> + </div> + <iframe id="consoleFrame"><p>Your browser does not support iframes.</p></iframe> + </div> + </div> +</div> diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/console-vnc.html /opt/webvirtmgr/templates/console-vnc.html --- /opt/webvirtmgr.old/templates/console-vnc.html 2015-11-27 08:36:15.000000000 +0100 +++ /opt/webvirtmgr/templates/console-vnc.html 2016-01-14 01:26:50.167074848 +0100 @@ -17,7 +17,7 @@ <td> <div id="noVNC_status">{% trans "Loading..." %}</div> </td> - <td width="32%" style="text-align:right;"> + <td width="40%" style="text-align:right;"> <div id="noVNC_buttons">  <input type="button" id="showKeyboard" value="Keyboard" title="Show Keyboard"/> @@ -34,12 +34,13 @@ <input type=button value="Ctrl+Alt+Del" id="sendCtrlAltDelButton"> <input type=button value="Fullscreen" id="askFullscreen"> + <input type=button value="Reconnect" id="askReconnect"> </div> </td> </tr> </table> </div> - <canvas id="noVNC_canvas" width="640px" height="20px"> + <canvas id="noVNC_canvas" width="640px" height="20px" tabindex="0"> {% trans "Canvas not supported." %} </canvas> </div> @@ -129,6 +130,8 @@ } if (state === "normal") { + $D("noVNC_canvas").focus(); + $D("noVNC_canvas").blur(); cad.disabled = false; af.disabled = false; } @@ -156,6 +159,10 @@ } } + function reconnect() { + window.onscriptsload.call(); + } + window.onscriptsload = function () { var host, port, password, path, token; @@ -163,6 +170,8 @@ $D('sendCtrlAltDelButton').onclick = sendCtrlAltDel; $D('askFullscreen').style.display = "inline"; $D('askFullscreen').onclick = fullscreen; + $D('askReconnect').style.display = "inline"; + $D('askReconnect').onclick = reconnect; // dirty fix for keyboard on iOS devices if (isTouchDevice) { diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/instance.html /opt/webvirtmgr/templates/instance.html --- /opt/webvirtmgr.old/templates/instance.html 2015-11-27 08:36:15.000000000 +0100 +++ /opt/webvirtmgr/templates/instance.html 2016-01-14 12:43:25.727266002 +0100 @@ -771,11 +771,13 @@ </div> </div> {% include 'sidebar_close.html' %} + {% include 'console.html' %} {% endblock %} {% block script %} <script> function open_console() { - window.open('{% url 'console' %}?token={{ host_id }}-{{ uuid }}', '', 'width=850,height=485') + $("#consoleFrame").attr('src', '{% url 'console' %}?token={{ host_id }}-{{ uuid }}'); + $("#consoleModal").modal('show'); } function show_console() { if ($('#console_show_pass').attr('type') == 'password') { diff -x /opt/webvirtmgr/images -Nur /opt/webvirtmgr.old/templates/instances.html /opt/webvirtmgr/templates/instances.html --- /opt/webvirtmgr.old/templates/instances.html 2015-11-27 08:36:15.000000000 +0100 +++ /opt/webvirtmgr/templates/instances.html 2016-01-14 12:45:02.873374044 +0100 @@ -143,6 +143,7 @@ {% endif %} </div> {% include 'sidebar_close.html' %} + {% include 'console.html' %} {% endblock %} {% block script %} <script> @@ -251,7 +252,8 @@ window.setInterval('status()', {{ time_refresh }}); }); function open_console(uuid) { - window.open("/console/?token=" + uuid, "", "width=850,height=485"); + $("#consoleFrame").attr('src', '{% url 'console' %}?token=' + uuid); + $("#consoleModal").modal('show'); } </script> <script src="{% static "js/jquery.tablesorter.js" %}"></script> ```