Terminal basically working

Still need to deal with things like authentication

IPython/html/static/terminal/css/override.css

@@ -0,0 +1,7 b''
+/*This file contains any manual css for this page that needs to override the global styles.
+This is only required when different pages style the same element differently. This is just
+a hack to deal with our current css styles and no new styling should be added in this file.*/
+
+#terminado-container {
+    margin: 8px;
+}

IPython/html/static/terminal/js/terminado.js

@@ -0,0 +1,39 b''
+define ([], function() {
+    function make_terminal(element, size, ws_url) {
+        var ws = new WebSocket(ws_url);
+        var term = new Terminal({
+          cols: size.cols,
+          rows: size.rows,
+          screenKeys: true,
+          useStyle: true
+        });
+        ws.onopen = function(event) {
+            ws.send(JSON.stringify(["set_size", size.rows, size.cols,
+                                        window.innerHeight, window.innerWidth]));
+            term.on('data', function(data) {
+                ws.send(JSON.stringify(['stdin', data]));
+            });
+            
+            term.on('title', function(title) {
+                document.title = title;
+            });
+            
+            term.open(element);
+            
+            ws.onmessage = function(event) {
+                json_msg = JSON.parse(event.data);
+                switch(json_msg[0]) {
+                    case "stdout":
+                        term.write(json_msg[1]);
+                        break;
+                    case "disconnect":
+                        term.write("\r\n\r\n[CLOSED]\r\n");
+                        break;
+                }
+            };
+        };
+        return {socket: ws, term: term};
+    }
+
+    return {make_terminal: make_terminal};
+});

IPython/html/static/terminal/js/main.js

@@ -4,9 +4,50 b''
 require([
     'jquery',
     'termjs',
+    'base/js/utils',
+    'base/js/page',
+    'terminal/js/terminado',
     'custom/custom',
 ], function(
     $, 
-    termjs){
+    termjs,
+    utils,
+    page,
+    terminado
+    ){
+    page = new page.Page();
+    // Test size: 25x80
+    var termRowHeight = 1.00 * $("#dummy-screen")[0].offsetHeight / 25;
+    var termColWidth = 1.02 * $("#dummy-screen-rows")[0].offsetWidth / 80;
+    $("#dummy-screen").hide();
+
+    var base_url = utils.get_body_data('baseUrl');
+    var ws_url = location.protocol.replace('http', 'ws') + "//" + location.host
+                                    + base_url + "terminal/websocket";
+    
+    var header = $("#header")[0]
+    function calculate_size() {
+        height = window.innerHeight - header.offsetHeight;
+        width = window.innerWidth;
+        var rows = Math.min(1000, Math.max(20, Math.floor(height/termRowHeight)-1));
+        var cols = Math.min(1000, Math.max(40, Math.floor(width/termColWidth)-1));
+        console.log("resize:", termRowHeight, termColWidth, height, width,
+                                                            rows, cols);
+        return {rows: rows, cols: cols};
+    }
+    
+    page.show_header();
+    
+    size = calculate_size();
+    var terminal = terminado.make_terminal($("#terminado-container")[0], size, ws_url);
+    
+    page.show_site();
+    
+    window.onresize = function() { 
+      var geom = calculate_size();
+      terminal.term.resize(geom.cols, geom.rows);
+      terminal.socket.send(JSON.stringify(["set_size", geom.rows, geom.cols,
+                                    window.innerHeight, window.innerWidth]));
+    };
 
 });

IPython/html/templates/terminal.html

@@ -2,6 +2,10 b''
 
 {% block title %}{{page_title}}{% endblock %}
 
+{% block stylesheet %}
+{{super()}}
+<link rel="stylesheet" href="{{ static_url("terminal/css/override.css") }}" type="text/css" />
+{% endblock %}
 
 {% block params %}
 
@@ -12,15 +16,43 b' data-base-url="{{base_url}}"'
 
 {% block site %}
 
-<div id="ipython-main-app" class="container">
-
-<div id="terminado-container"/>
-
-</div>
+<div id="terminado-container"></div>
 
 {% endblock %}
 
 {% block script %}
+
+<!-- Hack: this needs to be outside the display:none block, so we can measure
+     its size in JS in setting up the page. It is still invisible. Putting in
+     the script block gets it outside the initially undisplayed region. -->
+<!-- test size: 25x80 -->
+<pre id="dummy-screen" style="visibility:hidden; border: white solid 5px; font-family: &quot;DejaVu Sans Mono&quot;, &quot;Liberation Mono&quot;, monospace; font-size: 11px;">0
+1
+2
+3
+4
+5
+6
+7
+8
+9
+0
+1
+2
+3
+4
+5
+6
+7
+8
+9
+0
+1
+2
+3
+<span id="dummy-screen-rows" style="visibility:hidden;">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
+</pre>
+
     {{super()}}
 
 <script src="{{ static_url("terminal/js/main.js") }}" type="text/javascript" charset="utf-8"></script>

IPython/html/terminal/handlers.py

@@ -4,9 +4,9 b''
 # Distributed under the terms of the Modified BSD License.
 
 from tornado import web
+import terminado
 from ..base.handlers import IPythonHandler
 
-
 class TerminalHandler(IPythonHandler):
     """Render the tree view, listing notebooks, clusters, etc."""
     @web.authenticated
@@ -21,4 +21,6 b' class TerminalHandler(IPythonHandler):'
 
 default_handlers = [
     (r"/terminal", TerminalHandler),
+    (r"/terminal/websocket", terminado.TermSocket,
+         {'term_manager': terminado.SingleTermManager(shell_command=['bash'])}),
     ]