From 9c75f4154e4c0a61068ee0e1d12880e0e02e13e8 Mon Sep 17 00:00:00 2001
From: Jesse Luehrs <doy@tozt.net>
Date: Fri, 22 Nov 2019 13:29:23 -0500
Subject: more web display improvements

---
 Cargo.lock                           |   1 +
 teleterm-web/Cargo.toml              |   1 +
 teleterm-web/src/views/list.rs       |  12 ++---
 teleterm-web/src/views/watch.rs      |  14 ++++--
 teleterm/src/web.rs                  |   7 +++
 teleterm/static/index.html           |   3 ++
 teleterm/static/teleterm.css         |  20 ++++++++
 teleterm/static/teleterm_web.js      |  89 ++++++++++++++++++-----------------
 teleterm/static/teleterm_web_bg.wasm | Bin 687220 -> 703753 bytes
 9 files changed, 93 insertions(+), 54 deletions(-)
 create mode 100644 teleterm/static/teleterm.css

diff --git a/Cargo.lock b/Cargo.lock
index d56d7df..f0cd38a 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2155,6 +2155,7 @@ dependencies = [
  "seed",
  "serde",
  "serde_json",
+ "unicode-width",
  "vt100",
  "wasm-bindgen",
  "web-sys",
diff --git a/teleterm-web/Cargo.toml b/teleterm-web/Cargo.toml
index 47496de..9468353 100644
--- a/teleterm-web/Cargo.toml
+++ b/teleterm-web/Cargo.toml
@@ -18,6 +18,7 @@ log = "0.4"
 seed = "0.4"
 serde = "1"
 serde_json = "1"
+unicode-width = "0.1"
 vt100 = "0.6"
 wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["ErrorEvent", "MessageEvent", "WebSocket"] }
diff --git a/teleterm-web/src/views/list.rs b/teleterm-web/src/views/list.rs
index 6d4ccd5..88d8a37 100644
--- a/teleterm-web/src/views/list.rs
+++ b/teleterm-web/src/views/list.rs
@@ -4,6 +4,7 @@ pub(crate) fn render(model: &crate::model::Model) -> Vec<Node<crate::Msg>> {
     let rows: Vec<_> = model.sessions().iter().map(row).collect();
     vec![
         seed::table![
+            seed::attrs! { At::Class => "list" },
             seed::tr![
                 seed::th!["username"],
                 seed::th!["size"],
@@ -19,13 +20,10 @@ pub(crate) fn render(model: &crate::model::Model) -> Vec<Node<crate::Msg>> {
 
 fn row(session: &crate::protocol::Session) -> Node<crate::Msg> {
     seed::tr![
-        seed::td![seed::a![
-            simple_ev(
-                Ev::Click,
-                crate::Msg::StartWatching(session.id.clone())
-            ),
-            session.username,
-        ]],
+        simple_ev(Ev::Click, crate::Msg::StartWatching(session.id.clone())),
+        seed::td![
+            seed::a![seed::attrs! {At::Href => "#"}, session.username,]
+        ],
         seed::td![format!("{}x{}", session.size.cols, session.size.rows)],
         seed::td![format_time(session.idle_time)],
         seed::td![format!("{}", session.watchers)],
diff --git a/teleterm-web/src/views/watch.rs b/teleterm-web/src/views/watch.rs
index 07e8244..841b438 100644
--- a/teleterm-web/src/views/watch.rs
+++ b/teleterm-web/src/views/watch.rs
@@ -1,4 +1,5 @@
 use crate::prelude::*;
+use unicode_width::UnicodeWidthStr as _;
 
 pub(crate) fn render(model: &crate::model::Model) -> Node<crate::Msg> {
     let screen = if let Some(screen) = model.screen() {
@@ -13,10 +14,17 @@ pub(crate) fn render(model: &crate::model::Model) -> Node<crate::Msg> {
         let mut row = vec![];
         for col_idx in 0..cols {
             let cell = screen.cell(row_idx, col_idx).unwrap();
-            row.push(seed::div![cell.contents()])
+            let mut contents = cell.contents();
+            if contents.trim().is_empty() || contents.width() == 0 {
+                contents = "\u{00a0}".to_string();
+            }
+            row.push(seed::td![
+                seed::attrs! { At::Class => "cell" },
+                contents
+            ])
         }
-        grid.push(seed::div![row]);
+        grid.push(seed::tr![seed::attrs! { At::Class => "row" }, row]);
     }
 
-    seed::div![grid]
+    seed::table![seed::attrs! { At::Class => "grid" }, grid]
 }
diff --git a/teleterm/src/web.rs b/teleterm/src/web.rs
index b01480d..51da6e8 100644
--- a/teleterm/src/web.rs
+++ b/teleterm/src/web.rs
@@ -20,6 +20,10 @@ lazy_static_include::lazy_static_include_bytes!(
     TELETERM_WEB_WASM,
     "static/teleterm_web_bg.wasm"
 );
+lazy_static_include::lazy_static_include_bytes!(
+    TELETERM_CSS,
+    "static/teleterm.css"
+);
 
 #[derive(
     serde::Deserialize,
@@ -79,6 +83,9 @@ pub fn router() -> impl gotham::handler::NewHandler {
         route
             .get("/teleterm_web_bg.wasm")
             .to(serve_static("application/wasm", &TELETERM_WEB_WASM));
+        route
+            .get("/teleterm.css")
+            .to(serve_static("text/css", &TELETERM_CSS));
         route.get("/list").to(handle_list);
         route
             .get("/watch")
diff --git a/teleterm/static/index.html b/teleterm/static/index.html
index 2b8e30e..4a43e2b 100644
--- a/teleterm/static/index.html
+++ b/teleterm/static/index.html
@@ -1,5 +1,8 @@
 <!doctype html>
 <html>
+    <head>
+        <link rel="stylesheet" href="teleterm.css" type="text/css" />
+    </head>
     <body>
         <section id="app"></section>
         <script type="module">
diff --git a/teleterm/static/teleterm.css b/teleterm/static/teleterm.css
new file mode 100644
index 0000000..ad6a8a7
--- /dev/null
+++ b/teleterm/static/teleterm.css
@@ -0,0 +1,20 @@
+.list td, .list th {
+    margin: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.grid {
+    font-family: monospace;
+    background-color: black;
+    color: white;
+    border-collapse: collapse;
+    border: 4px solid black;
+}
+
+.grid .row .cell {
+    min-width: 1ch;
+    max-width: 1ch;
+    min-height: 1ex;
+    padding: 0px;
+}
diff --git a/teleterm/static/teleterm_web.js b/teleterm/static/teleterm_web.js
index 593d5a8..b4ac9be 100644
--- a/teleterm/static/teleterm_web.js
+++ b/teleterm/static/teleterm_web.js
@@ -1,6 +1,10 @@
 
 let wasm;
 
+function __wbg_elem_binding0(arg0, arg1, arg2) {
+    wasm.__wbg_function_table.get(88)(arg0, arg1, arg2);
+}
+
 const heap = new Array(32);
 
 heap.fill(undefined);
@@ -17,32 +21,29 @@ function addHeapObject(obj) {
     heap[idx] = obj;
     return idx;
 }
-function __wbg_elem_binding0(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(290)(arg0, arg1, addHeapObject(arg2));
-}
-function __wbg_elem_binding1(arg0, arg1) {
-    wasm.__wbg_function_table.get(220)(arg0, arg1);
+function __wbg_elem_binding1(arg0, arg1, arg2) {
+    wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding2(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(72)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2));
 }
-function __wbg_elem_binding3(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(72)(arg0, arg1, addHeapObject(arg2));
+function __wbg_elem_binding3(arg0, arg1) {
+    wasm.__wbg_function_table.get(225)(arg0, arg1);
 }
 function __wbg_elem_binding4(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(76)(arg0, arg1, arg2);
+    wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding5(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(72)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(84)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding6(arg0, arg1, arg2) {
-    wasm.__wbg_function_table.get(72)(arg0, arg1, addHeapObject(arg2));
+    wasm.__wbg_function_table.get(294)(arg0, arg1, addHeapObject(arg2));
 }
 function __wbg_elem_binding7(arg0, arg1, arg2, arg3, arg4) {
-    wasm.__wbg_function_table.get(317)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4));
+    wasm.__wbg_function_table.get(321)(arg0, arg1, addHeapObject(arg2), arg3, addHeapObject(arg4));
 }
 function __wbg_elem_binding8(arg0, arg1, arg2, arg3) {
-    wasm.__wbg_function_table.get(321)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
+    wasm.__wbg_function_table.get(325)(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }
 /**
 */
@@ -228,14 +229,6 @@ function init(module) {
     imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
         takeObject(arg0);
     };
-    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
-        const ret = getObject(arg0);
-        return addHeapObject(ret);
-    };
-    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
-        const ret = getStringFromWasm(arg0, arg1);
-        return addHeapObject(ret);
-    };
     imports.wbg.__wbindgen_cb_drop = function(arg0) {
         const obj = takeObject(arg0).original;
         if (obj.cnt-- == 1) {
@@ -245,6 +238,14 @@ function init(module) {
         const ret = false;
         return ret;
     };
+    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
+        const ret = getStringFromWasm(arg0, arg1);
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
+        const ret = getObject(arg0);
+        return addHeapObject(ret);
+    };
     imports.wbg.__wbindgen_cb_forget = function(arg0) {
         takeObject(arg0);
     };
@@ -884,16 +885,16 @@ function init(module) {
     imports.wbg.__wbindgen_throw = function(arg0, arg1) {
         throw new Error(getStringFromWasm(arg0, arg1));
     };
-    imports.wbg.__wbindgen_closure_wrapper294 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper639 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
-        const real = (arg0) => {
+        const real = () => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding2(a, state.b, arg0);
+                return __wbg_elem_binding3(a, state.b, );
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(226)(a, state.b);
                 else state.a = a;
             }
         }
@@ -902,16 +903,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper1041 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper1056 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding0(a, state.b, arg0);
+                return __wbg_elem_binding6(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(291)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(295)(a, state.b);
                 else state.a = a;
             }
         }
@@ -920,16 +921,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper292 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper310 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding6(a, state.b, arg0);
+                return __wbg_elem_binding5(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
                 else state.a = a;
             }
         }
@@ -938,16 +939,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper288 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper316 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding3(a, state.b, arg0);
+                return __wbg_elem_binding1(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
                 else state.a = a;
             }
         }
@@ -956,16 +957,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper290 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper318 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding4(a, state.b, arg0);
+                return __wbg_elem_binding2(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
                 else state.a = a;
             }
         }
@@ -974,16 +975,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper296 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper314 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
         const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding5(a, state.b, arg0);
+                return __wbg_elem_binding4(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(73)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
                 else state.a = a;
             }
         }
@@ -992,16 +993,16 @@ function init(module) {
         const ret = real;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper630 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper312 = function(arg0, arg1, arg2) {
         const state = { a: arg0, b: arg1, cnt: 1 };
-        const real = () => {
+        const real = (arg0) => {
             state.cnt++;
             const a = state.a;
             state.a = 0;
             try {
-                return __wbg_elem_binding1(a, state.b, );
+                return __wbg_elem_binding0(a, state.b, arg0);
             } finally {
-                if (--state.cnt === 0) wasm.__wbg_function_table.get(221)(a, state.b);
+                if (--state.cnt === 0) wasm.__wbg_function_table.get(85)(a, state.b);
                 else state.a = a;
             }
         }
diff --git a/teleterm/static/teleterm_web_bg.wasm b/teleterm/static/teleterm_web_bg.wasm
index e2b981c..5956297 100644
Binary files a/teleterm/static/teleterm_web_bg.wasm and b/teleterm/static/teleterm_web_bg.wasm differ
-- 
cgit v1.2.3-54-g00ecf