recompute dummy size dynamically + styling in css

IPython/html/static/notebook/less/terminal.less

@@ -0,0 +1,13 b''
+.terminal {
+  float: left;
+  border: black solid 5px;
+  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
+  font-size: 11px;
+  color: white;
+  background: black;
+}
+
+.terminal-cursor {
+  color: black;
+  background: white;
+}

IPython/html/static/style/style.less

@@ -26,4 +26,4 b''
 // notebook
 @import "../notebook/less/style.less";
 
-
+@import "../notebook/less/terminal.less";

IPython/html/static/style/style.min.css

@@ -10483,4 +10483,16 b' span#autosave_status {'
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
 }
+.terminal {
+  float: left;
+  border: black solid 5px;
+  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
+  font-size: 11px;
+  color: white;
+  background: black;
+}
+.terminal-cursor {
+  color: black;
+  background: white;
+}
 /*# sourceMappingURL=../style/style.min.css.map */

  No newline at end of file

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

@@ -17,9 +17,8 b' require(['
     ){
     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 termRowHeight = function(){ return 1.00 * $("#dummy-screen")[0].offsetHeight / 25;};
+    var termColWidth =  function() { return 1.02 * $("#dummy-screen-rows")[0].offsetWidth / 80;};
 
     var base_url = utils.get_body_data('baseUrl');
     var ws_path = utils.get_body_data('wsPath');
@@ -30,10 +29,9 b' require(['
     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);
+        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 to :", rows , 'rows by ', cols, 'columns');
         return {rows: rows, cols: cols};
     }
     

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

@@ -5,7 +5,7 b' define ([], function() {'
           cols: size.cols,
           rows: size.rows,
           screenKeys: true,
-          useStyle: true
+          useStyle: false
         });
         ws.onopen = function(event) {
             ws.send(JSON.stringify(["set_size", size.rows, size.cols,

IPython/html/templates/terminal.html

@@ -27,7 +27,8 b' data-ws-path="{{ws_path}}"'
      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
+<div style='position:absolute; left:-1000em'>
+<pre id="dummy-screen" style="" class='terminal' style'border: solid 5px white'>0
 1
 2
 3
@@ -51,8 +52,9 b' data-ws-path="{{ws_path}}"'
 1
 2
 3
-<span id="dummy-screen-rows" style="visibility:hidden;">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
+<span id="dummy-screen-rows" style="">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
 </pre>
+</div>
 
     {{super()}}