webrepl.html: Automatically resize the terminal to fill the window.

The terminal widget is resized depending on the size of its containing
window.  The minimum size is 80x24 characters and the maximum is 150x80
(these numbers can be tuned if needed).  There is also a small margin on
the right side and the bottom.

Author: dpgeorge

Diff for: webrepl.html

@@ -54,17 +54,28 @@
 var ws;
 var connected = false;
 
+function calculate_size(win) {
+    var cols = Math.max(80, Math.min(150, (win.innerWidth - 40) / 7)) | 0;
+    var rows = Math.max(24, Math.min(80, (win.innerHeight - 180) / 12)) | 0;
+    return [cols, rows];
+}
+
 (function() {
     window.onload = function() {
+      var size = calculate_size(self);
       term = new Terminal({
-        cols: 80,
-        rows: 24,
+        cols: size[0],
+        rows: size[1],
         useStyle: true,
         screenKeys: true,
         cursorBlink: false
       });
       term.open(document.getElementById("term"));
-    }
+    };
+    window.addEventListener('resize', function() {
+        var size = calculate_size(self);
+        term.resize(size[0], size[1]);
+    });
 }).call(this);
 
 function button_click() {