From d0fb1a78d92e215e77cc5bf0d651aa153ab83243 Mon Sep 17 00:00:00 2001 From: Fabian Date: Thu, 31 Dec 2020 19:14:29 -0600 Subject: [PATCH] Experimental xterm.js support (#172, #227) --- Makefile | 5 ++ debug.html | 2 + index.html | 2 + loader.js | 2 +- src/browser/main.js | 2 - src/browser/serial.js | 21 +++++++ src/browser/starter.js | 4 +- v86.css | 136 +++++++++++++++++++++++++++++++++++++++++ 8 files changed, 170 insertions(+), 4 deletions(-) diff --git a/Makefile b/Makefile index 49af9cbe..2080b65c 100644 --- a/Makefile +++ b/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 diff --git a/debug.html b/debug.html index ea23e473..ff7a28b8 100644 --- a/debug.html +++ b/debug.html @@ -250,3 +250,5 @@ + +
diff --git a/index.html b/index.html index 7f962960..1813af1d 100644 --- a/index.html +++ b/index.html @@ -220,6 +220,8 @@ In Linux it can be accessed with `cat /dev/ttyS0` +
+
Version: b40c8ad2 (Apr 23, 2020 01:04) diff --git a/loader.js b/loader.js index b6f13052..a0273b5a 100644 --- a/loader.js +++ b/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 = []; diff --git a/src/browser/main.js b/src/browser/main.js index 6ce14fa8..13224e00 100644 --- a/src/browser/main.js +++ b/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); diff --git a/src/browser/serial.js b/src/browser/serial.js index 338c8d21..197627fa 100644 --- a/src/browser/serial.js +++ b/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); +} diff --git a/src/browser/starter.js b/src/browser/starter.js index 4f94bbf5..d25c3d4e 100644 --- a/src/browser/starter.js +++ b/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 diff --git a/v86.css b/v86.css index 305d62f0..e6cdab10 100644 --- a/v86.css +++ b/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; +}