Experimental xterm.js support (#172, #227)

Makefile

@@ -305,3 +305,8 @@ build/libwabt.js:
 	wget -P build https://github.com/WebAssembly/wabt/archive/1.0.6.zip
 	unzip -j -d build/ build/1.0.6.zip wabt-1.0.6/demo/libwabt.js
 	rm build/1.0.6.zip
+
+build/xterm.js:
+	curl https://cdn.jsdelivr.net/npm/xterm@4.2.0-vscode1/lib/xterm.js > build/xterm.js
+	curl https://cdn.jsdelivr.net/npm/xterm@4.2.0-vscode1/lib/xterm.js.map > build/xterm.js.map
+	curl https://cdn.jsdelivr.net/npm/xterm@4.2.0-vscode1/css/xterm.css > build/xterm.css

debug.html

@@ -250,3 +250,5 @@
 
 <textarea spellcheck="false" cols="40" rows="12" id="serial" style="display:none">
 </textarea>
+
+<div id="terminal"></div>

index.html

@@ -220,6 +220,8 @@
 In Linux it can be accessed with `cat /dev/ttyS0`
 </textarea>
 
+<div id="terminal"></div>
+
 <br style="clear:both">
 <code>Version: <a href="https://github.com/copy/v86/commits/b40c8ad2">b40c8ad2</a> (Apr 23, 2020 01:04)</code>
 

loader.js

@@ -16,7 +16,7 @@
     // jor1k stuff
     LIB_FILES += " jor1k.js 9p.js filesystem.js marshall.js utf8.js";
 
-    var BUILD_FILES = "capstone-x86.min.js libwabt.js";
+    var BUILD_FILES = "capstone-x86.min.js libwabt.js xterm.js";
 
     var to_load = [];
 

src/browser/main.js

@@ -1291,8 +1291,6 @@
             $("take_screenshot").blur();
         };
 
-        $("serial").style.display = "block";
-
         window.addEventListener("keydown", ctrl_w_rescue, false);
         window.addEventListener("keyup", ctrl_w_rescue, false);
         window.addEventListener("blur", ctrl_w_rescue, false);

src/browser/serial.js

@@ -35,6 +35,7 @@ function SerialAdapter(element, bus)
     {
         this.destroy();
 
+        element.style.display = "block";
         element.addEventListener("keypress", keypress_handler, false);
         element.addEventListener("keydown", keydown_handler, false);
         element.addEventListener("paste", paste_handler, false);
@@ -208,3 +209,23 @@ function SerialRecordingAdapter(bus)
         this.text += chr;
     }, this);
 }
+
+/**
+ * @constructor
+ * @param {BusConnector} bus
+ */
+function SerialAdapterXtermJS(element, bus)
+{
+    const serial = this;
+    var term = new window["Terminal"]();
+    term.open(document.getElementById("terminal"));
+    element.style.display = "none";
+    term["onData"](function(data) {
+        bus.send("serial0-input", data.charCodeAt(0));
+    });
+
+    bus.register("serial0-output-char", function(chr)
+    {
+        term.write(chr);
+    }, this);
+}

src/browser/starter.js

@@ -272,7 +272,9 @@ V86Starter.prototype.continue_init = async function(emulator, options)
 
     if(options["serial_container"])
     {
-        this.serial_adapter = new SerialAdapter(options["serial_container"], this.bus);
+        //this.serial_adapter = new SerialAdapter(options["serial_container"], this.bus);
+        this.serial_adapter = new SerialAdapterXtermJS(options["serial_container"], this.bus);
+        //this.recording_adapter = new SerialRecordingAdapter(this.bus);
     }
 
     // ugly, but required for closure compiler compilation

v86.css

@@ -97,3 +97,139 @@ a img {
 .screenshots a {
     text-decoration: none;
 }
+
+
+.xterm {
+    font-feature-settings: "liga" 0;
+    position: relative;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+    outline: none;
+}
+
+.xterm .xterm-helpers {
+    position: absolute;
+    top: 0;
+    /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+    z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+    /*
+     * HACK: to fix IE's blinking cursor
+     * Move textarea out of the screen to the far left, so that the cursor is not visible.
+     */
+    position: absolute;
+    opacity: 0;
+    left: -9999em;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: -5;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
+}
+
+.xterm .composition-view {
+    /* TODO: Composition position got messed up somewhere */
+    background: #000;
+    color: #FFF;
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1;
+}
+
+.xterm .composition-view.active {
+    display: block;
+}
+
+.xterm .xterm-viewport {
+    /* On OS X this is required in order for the scroll bar to appear fully opaque */
+    background-color: #000;
+    overflow-y: scroll;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.xterm .xterm-screen {
+    position: relative;
+}
+
+.xterm .xterm-screen canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.xterm .xterm-scroll-area {
+    visibility: hidden;
+}
+
+.xterm-char-measure-element {
+    display: inline-block;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: -9999em;
+    line-height: normal;
+}
+
+.xterm {
+    cursor: text;
+}
+
+.xterm.enable-mouse-events {
+    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+    cursor: default;
+}
+
+.xterm.xterm-cursor-pointer {
+    cursor: pointer;
+}
+
+.xterm.column-select.focus {
+    /* Column selection mode */
+    cursor: crosshair;
+}
+
+.xterm .xterm-accessibility,
+.xterm .xterm-message {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    color: transparent;
+}
+
+.xterm .live-region {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.xterm-dim {
+    opacity: 0.5;
+}
+
+.xterm-underline {
+    text-decoration: underline;
+}