]> git.proxmox.com Git - mirror_novnc.git/blobdiff - core/rfb.js
Show dot when there is no visible cursor
[mirror_novnc.git] / core / rfb.js
index 2d937d1f3911850b3159128b00c95a83898c5a2a..9b59c8943ccca47fce25f30d6de3813f4e3ff48c 100644 (file)
@@ -1,7 +1,7 @@
 /*
  * noVNC: HTML5 VNC client
  * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2016 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2018 Samuel Mannehed for Cendio AB
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
  */
 
 import * as Log from './util/logging.js';
-import _ from './util/localization.js';
 import { decodeUTF8 } from './util/strings.js';
-import { set_defaults, make_properties } from './util/properties.js';
+import { dragThreshold } from './util/browser.js';
+import EventTargetMixin from './util/eventtarget.js';
 import Display from "./display.js";
-import { Keyboard, Mouse } from "./input/devices.js";
+import Keyboard from "./input/keyboard.js";
+import Mouse from "./input/mouse.js";
+import Cursor from "./util/cursor.js";
 import Websock from "./websock.js";
-import Base64 from "./base64.js";
 import DES from "./des.js";
 import KeyTable from "./input/keysym.js";
 import XtScancode from "./input/xtscancodes.js";
 import Inflator from "./inflator.js";
+import { encodings, encodingName } from "./encodings.js";
+import "./util/polyfill.js";
 
-/*jslint white: false, browser: true */
-/*global window, Util, Display, Keyboard, Mouse, Websock, Websock_native, Base64, DES, KeyTable, Inflator, XtScancode */
+// How many seconds to wait for a disconnect to finish
+const DISCONNECT_TIMEOUT = 3;
 
-export default function RFB(defaults) {
-    "use strict";
-    if (!defaults) {
-        defaults = {};
-    }
+export default class RFB extends EventTargetMixin {
+    constructor(target, url, options) {
+        if (!target) {
+            throw Error("Must specify target");
+        }
+        if (!url) {
+            throw Error("Must specify URL");
+        }
 
-    this._rfb_host = '';
-    this._rfb_port = 5900;
-    this._rfb_password = '';
-    this._rfb_path = '';
-
-    this._rfb_connection_state = '';
-    this._rfb_init_state = '';
-    this._rfb_version = 0;
-    this._rfb_max_version = 3.8;
-    this._rfb_auth_scheme = '';
-    this._rfb_disconnect_reason = "";
-
-    this._rfb_tightvnc = false;
-    this._rfb_xvp_ver = 0;
-
-    // In preference order
-    this._encodings = [
-        ['COPYRECT',             0x01 ],
-        ['TIGHT',                0x07 ],
-        ['TIGHT_PNG',            -260 ],
-        ['HEXTILE',              0x05 ],
-        ['RRE',                  0x02 ],
-        ['RAW',                  0x00 ],
+        super();
 
-        // Psuedo-encoding settings
+        this._target = target;
+        this._url = url;
 
-        //['JPEG_quality_lo',     -32 ],
-        ['JPEG_quality_med',      -26 ],
-        //['JPEG_quality_hi',     -23 ],
-        //['compress_lo',        -255 ],
-        ['compress_hi',          -254 ],
-        //['compress_max',       -247 ],
-
-        ['DesktopSize',          -223 ],
-        ['last_rect',            -224 ],
-        ['Cursor',               -239 ],
-        ['QEMUExtendedKeyEvent', -258 ],
-        ['ExtendedDesktopSize',  -308 ],
-        ['xvp',                  -309 ],
-        ['Fence',                -312 ],
-        ['ContinuousUpdates',    -313 ]
-    ];
-
-    this._encHandlers = {};
-    this._encNames = {};
-    this._encStats = {};
-
-    this._sock = null;              // Websock object
-    this._display = null;           // Display object
-    this._flushing = false;         // Display flushing state
-    this._keyboard = null;          // Keyboard input handler object
-    this._mouse = null;             // Mouse input handler object
-    this._disconnTimer = null;      // disconnection timer
-
-    this._supportsFence = false;
-
-    this._supportsContinuousUpdates = false;
-    this._enabledContinuousUpdates = false;
-
-    // Frame buffer update state
-    this._FBU = {
-        rects: 0,
-        subrects: 0,            // RRE
-        lines: 0,               // RAW
-        tiles: 0,               // HEXTILE
-        bytes: 0,
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-        encoding: 0,
-        subencoding: -1,
-        background: null,
-        zlib: []                // TIGHT zlib streams
-    };
-
-    this._fb_width = 0;
-    this._fb_height = 0;
-    this._fb_name = "";
-
-    this._destBuff = null;
-    this._paletteBuff = new Uint8Array(1024);  // 256 * 4 (max palette size * max bytes-per-pixel)
-
-    this._rre_chunk_sz = 100;
-
-    this._timing = {
-        last_fbu: 0,
-        fbu_total: 0,
-        fbu_total_cnt: 0,
-        full_fbu_total: 0,
-        full_fbu_cnt: 0,
-
-        fbu_rt_start: 0,
-        fbu_rt_total: 0,
-        fbu_rt_cnt: 0,
-        pixels: 0
-    };
-
-    this._supportsSetDesktopSize = false;
-    this._screen_id = 0;
-    this._screen_flags = 0;
-
-    // Mouse state
-    this._mouse_buttonMask = 0;
-    this._mouse_arr = [];
-    this._viewportDragging = false;
-    this._viewportDragPos = {};
-    this._viewportHasMoved = false;
-
-    // QEMU Extended Key Event support - default to false
-    this._qemuExtKeyEventSupported = false;
-
-    // set the default value on user-facing properties
-    set_defaults(this, defaults, {
-        'target': 'null',                       // VNC display rendering Canvas object
-        'focusContainer': document,             // DOM element that captures keyboard input
-        'encrypt': false,                       // Use TLS/SSL/wss encryption
-        'local_cursor': false,                  // Request locally rendered cursor
-        'shared': true,                         // Request shared mode
-        'view_only': false,                     // Disable client mouse/keyboard
-        'xvp_password_sep': '@',                // Separator for XVP password fields
-        'disconnectTimeout': 3,                 // Time (s) to wait for disconnection
-        'wsProtocols': ['binary'],              // Protocols to use in the WebSocket connection
-        'repeaterID': '',                       // [UltraVNC] RepeaterID to connect to
-        'viewportDrag': false,                  // Move the viewport on mouse drags
-
-        // Callback functions
-        'onUpdateState': function () { },       // onUpdateState(rfb, state, oldstate): connection state change
-        'onNotification': function () { },      // onNotification(rfb, msg, level, options): notification for UI
-        'onDisconnected': function () { },      // onDisconnected(rfb, reason): disconnection finished
-        'onPasswordRequired': function () { },  // onPasswordRequired(rfb, msg): VNC password is required
-        'onClipboard': function () { },         // onClipboard(rfb, text): RFB clipboard contents received
-        'onBell': function () { },              // onBell(rfb): RFB Bell message received
-        'onFBUReceive': function () { },        // onFBUReceive(rfb, fbu): RFB FBU received but not yet processed
-        'onFBUComplete': function () { },       // onFBUComplete(rfb, fbu): RFB FBU received and processed
-        'onFBResize': function () { },          // onFBResize(rfb, width, height): frame buffer resized
-        'onDesktopName': function () { },       // onDesktopName(rfb, name): desktop name received
-        'onXvpInit': function () { }            // onXvpInit(version): XVP extensions active for this connection
-    });
-
-    // main setup
-    Log.Debug(">> RFB.constructor");
-
-    // populate encHandlers with bound versions
-    Object.keys(RFB.encodingHandlers).forEach(function (encName) {
-        this._encHandlers[encName] = RFB.encodingHandlers[encName].bind(this);
-    }.bind(this));
-
-    // Create lookup tables based on encoding number
-    for (var i = 0; i < this._encodings.length; i++) {
-        this._encHandlers[this._encodings[i][1]] = this._encHandlers[this._encodings[i][0]];
-        this._encNames[this._encodings[i][1]] = this._encodings[i][0];
-        this._encStats[this._encodings[i][1]] = [0, 0];
-    }
+        // Connection details
+        options = options || {};
+        this._rfb_credentials = options.credentials || {};
+        this._shared = 'shared' in options ? !!options.shared : true;
+        this._repeaterID = options.repeaterID || '';
+        this._showDotCursor = options.showDotCursor || false;
+
+        // Internal state
+        this._rfb_connection_state = '';
+        this._rfb_init_state = '';
+        this._rfb_auth_scheme = '';
+        this._rfb_clean_disconnect = true;
+
+        // Server capabilities
+        this._rfb_version = 0;
+        this._rfb_max_version = 3.8;
+        this._rfb_tightvnc = false;
+        this._rfb_xvp_ver = 0;
+
+        this._fb_width = 0;
+        this._fb_height = 0;
+
+        this._fb_name = "";
+
+        this._capabilities = { power: false };
+
+        this._supportsFence = false;
+
+        this._supportsContinuousUpdates = false;
+        this._enabledContinuousUpdates = false;
+
+        this._supportsSetDesktopSize = false;
+        this._screen_id = 0;
+        this._screen_flags = 0;
+
+        this._qemuExtKeyEventSupported = false;
+
+        // Internal objects
+        this._sock = null;              // Websock object
+        this._display = null;           // Display object
+        this._flushing = false;         // Display flushing state
+        this._keyboard = null;          // Keyboard input handler object
+        this._mouse = null;             // Mouse input handler object
+
+        // Timers
+        this._disconnTimer = null;      // disconnection timer
+        this._resizeTimeout = null;     // resize rate limiting
+
+        // Decoder states and stats
+        this._encHandlers = {};
+        this._encStats = {};
+
+        this._FBU = {
+            rects: 0,
+            subrects: 0,            // RRE and HEXTILE
+            lines: 0,               // RAW
+            tiles: 0,               // HEXTILE
+            bytes: 0,
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            encoding: 0,
+            subencoding: -1,
+            background: null,
+            zlibs: []               // TIGHT zlib streams
+        };
+
+        for (let i = 0; i < 4; i++) {
+            this._FBU.zlibs[i] = new Inflator();
+        }
+
+        this._destBuff = null;
+        this._paletteBuff = new Uint8Array(1024);  // 256 * 4 (max palette size * max bytes-per-pixel)
 
-    // NB: nothing that needs explicit teardown should be done
-    // before this point, since this can throw an exception
-    try {
-        this._display = new Display({target: this._target,
-                                     onFlush: this._onFlush.bind(this)});
-    } catch (exc) {
-        Log.Error("Display exception: " + exc);
-        throw exc;
+        this._rre_chunk_sz = 100;
+
+        this._timing = {
+            last_fbu: 0,
+            fbu_total: 0,
+            fbu_total_cnt: 0,
+            full_fbu_total: 0,
+            full_fbu_cnt: 0,
+
+            fbu_rt_start: 0,
+            fbu_rt_total: 0,
+            fbu_rt_cnt: 0,
+            pixels: 0
+        };
+
+        // Mouse state
+        this._mouse_buttonMask = 0;
+        this._mouse_arr = [];
+        this._viewportDragging = false;
+        this._viewportDragPos = {};
+        this._viewportHasMoved = false;
+
+        // Bound event handlers
+        this._eventHandlers = {
+            focusCanvas: this._focusCanvas.bind(this),
+            windowResize: this._windowResize.bind(this),
+        };
+
+        // main setup
+        Log.Debug(">> RFB.constructor");
+
+        // Create DOM elements
+        this._screen = document.createElement('div');
+        this._screen.style.display = 'flex';
+        this._screen.style.width = '100%';
+        this._screen.style.height = '100%';
+        this._screen.style.overflow = 'auto';
+        this._screen.style.backgroundColor = 'rgb(40, 40, 40)';
+        this._canvas = document.createElement('canvas');
+        this._canvas.style.margin = 'auto';
+        // Some browsers add an outline on focus
+        this._canvas.style.outline = 'none';
+        // IE miscalculates width without this :(
+        this._canvas.style.flexShrink = '0';
+        this._canvas.width = 0;
+        this._canvas.height = 0;
+        this._canvas.tabIndex = -1;
+        this._screen.appendChild(this._canvas);
+
+        // Cursor
+        this._cursor = new Cursor();
+
+        // XXX: TightVNC 2.8.11 sends no cursor at all until Windows changes
+        // it. Result: no cursor at all until a window border or an edit field
+        // is hit blindly. But there are also VNC servers that draw the cursor
+        // in the framebuffer and don't send the empty local cursor. There is
+        // no way to satisfy both sides.
+        //
+        // The spec is unclear on this "initial cursor" issue. Many other
+        // viewers (TigerVNC, RealVNC, Remmina) display an arrow as the
+        // initial cursor instead.
+        this._cursorImage = RFB.cursors.none;
+
+        // populate encHandlers with bound versions
+        this._encHandlers[encodings.encodingRaw] = RFB.encodingHandlers.RAW.bind(this);
+        this._encHandlers[encodings.encodingCopyRect] = RFB.encodingHandlers.COPYRECT.bind(this);
+        this._encHandlers[encodings.encodingRRE] = RFB.encodingHandlers.RRE.bind(this);
+        this._encHandlers[encodings.encodingHextile] = RFB.encodingHandlers.HEXTILE.bind(this);
+        this._encHandlers[encodings.encodingTight] = RFB.encodingHandlers.TIGHT.bind(this, false);
+        this._encHandlers[encodings.encodingTightPNG] = RFB.encodingHandlers.TIGHT.bind(this, true);
+
+        this._encHandlers[encodings.pseudoEncodingDesktopSize] = RFB.encodingHandlers.DesktopSize.bind(this);
+        this._encHandlers[encodings.pseudoEncodingLastRect] = RFB.encodingHandlers.last_rect.bind(this);
+        this._encHandlers[encodings.pseudoEncodingCursor] = RFB.encodingHandlers.Cursor.bind(this);
+        this._encHandlers[encodings.pseudoEncodingQEMUExtendedKeyEvent] = RFB.encodingHandlers.QEMUExtendedKeyEvent.bind(this);
+        this._encHandlers[encodings.pseudoEncodingExtendedDesktopSize] = RFB.encodingHandlers.ExtendedDesktopSize.bind(this);
+
+        // NB: nothing that needs explicit teardown should be done
+        // before this point, since this can throw an exception
+        try {
+            this._display = new Display(this._canvas);
+        } catch (exc) {
+            Log.Error("Display exception: " + exc);
+            throw exc;
+        }
+        this._display.onflush = this._onFlush.bind(this);
+        this._display.clear();
+
+        this._keyboard = new Keyboard(this._canvas);
+        this._keyboard.onkeyevent = this._handleKeyEvent.bind(this);
+
+        this._mouse = new Mouse(this._canvas);
+        this._mouse.onmousebutton = this._handleMouseButton.bind(this);
+        this._mouse.onmousemove = this._handleMouseMove.bind(this);
+
+        this._sock = new Websock();
+        this._sock.on('message', this._handle_message.bind(this));
+        this._sock.on('open', () => {
+            if ((this._rfb_connection_state === 'connecting') &&
+                (this._rfb_init_state === '')) {
+                this._rfb_init_state = 'ProtocolVersion';
+                Log.Debug("Starting VNC handshake");
+            } else {
+                this._fail("Unexpected server connection while " +
+                           this._rfb_connection_state);
+            }
+        });
+        this._sock.on('close', (e) => {
+            Log.Debug("WebSocket on-close event");
+            let msg = "";
+            if (e.code) {
+                msg = "(code: " + e.code;
+                if (e.reason) {
+                    msg += ", reason: " + e.reason;
+                }
+                msg += ")";
+            }
+            switch (this._rfb_connection_state) {
+                case 'connecting':
+                    this._fail("Connection closed " + msg);
+                    break;
+                case 'connected':
+                    // Handle disconnects that were initiated server-side
+                    this._updateConnectionState('disconnecting');
+                    this._updateConnectionState('disconnected');
+                    break;
+                case 'disconnecting':
+                    // Normal disconnection path
+                    this._updateConnectionState('disconnected');
+                    break;
+                case 'disconnected':
+                    this._fail("Unexpected server disconnect " +
+                               "when already disconnected " + msg);
+                    break;
+                default:
+                    this._fail("Unexpected server disconnect before connecting " +
+                               msg);
+                    break;
+            }
+            this._sock.off('close');
+        });
+        this._sock.on('error', e => Log.Warn("WebSocket on-error event"));
+
+        // Slight delay of the actual connection so that the caller has
+        // time to set up callbacks
+        setTimeout(this._updateConnectionState.bind(this, 'connecting'));
+
+        Log.Debug("<< RFB.constructor");
+
+        // ===== PROPERTIES =====
+
+        this.dragViewport = false;
+        this.focusOnClick = true;
+
+        this._viewOnly = false;
+        this._clipViewport = false;
+        this._scaleViewport = false;
+        this._resizeSession = false;
     }
 
-    this._keyboard = new Keyboard({target: this._focusContainer,
-                                   onKeyEvent: this._handleKeyEvent.bind(this)});
+    // ===== PROPERTIES =====
 
-    this._mouse = new Mouse({target: this._target,
-                             onMouseButton: this._handleMouseButton.bind(this),
-                             onMouseMove: this._handleMouseMove.bind(this)});
+    get viewOnly() { return this._viewOnly; }
+    set viewOnly(viewOnly) {
+        this._viewOnly = viewOnly;
 
-    this._sock = new Websock();
-    this._sock.on('message', this._handle_message.bind(this));
-    this._sock.on('open', function () {
-        if ((this._rfb_connection_state === 'connecting') &&
-            (this._rfb_init_state === '')) {
-            this._rfb_init_state = 'ProtocolVersion';
-            Log.Debug("Starting VNC handshake");
-        } else {
-            this._fail("Unexpected server connection");
-        }
-    }.bind(this));
-    this._sock.on('close', function (e) {
-        Log.Warn("WebSocket on-close event");
-        var msg = "";
-        if (e.code) {
-            msg = " (code: " + e.code;
-            if (e.reason) {
-                msg += ", reason: " + e.reason;
+        if (this._rfb_connection_state === "connecting" ||
+            this._rfb_connection_state === "connected") {
+            if (viewOnly) {
+                this._keyboard.ungrab();
+                this._mouse.ungrab();
+            } else {
+                this._keyboard.grab();
+                this._mouse.grab();
             }
-            msg += ")";
-        }
-        switch (this._rfb_connection_state) {
-            case 'disconnecting':
-                this._updateConnectionState('disconnected');
-                break;
-            case 'connecting':
-                this._fail('Failed to connect to server', msg);
-                break;
-            case 'connected':
-                // Handle disconnects that were initiated server-side
-                this._updateConnectionState('disconnecting');
-                this._updateConnectionState('disconnected');
-                break;
-            case 'disconnected':
-                this._fail("Unexpected server disconnect",
-                           "Already disconnected: " + msg);
-                break;
-            default:
-                this._fail("Unexpected server disconnect",
-                           "Not in any state yet: " + msg);
-                break;
         }
-        this._sock.off('close');
-    }.bind(this));
-    this._sock.on('error', function (e) {
-        Log.Warn("WebSocket on-error event");
-    });
+    }
 
-    this._init_vars();
-    this._cleanup();
+    get capabilities() { return this._capabilities; }
 
-    var rmode = this._display.get_render_mode();
-    Log.Info("Using native WebSockets, render mode: " + rmode);
+    get touchButton() { return this._mouse.touchButton; }
+    set touchButton(button) { this._mouse.touchButton = button; }
 
-    Log.Debug("<< RFB.constructor");
-};
+    get clipViewport() { return this._clipViewport; }
+    set clipViewport(viewport) {
+        this._clipViewport = viewport;
+        this._updateClip();
+    }
 
-RFB.prototype = {
-    // Public methods
-    connect: function (host, port, password, path) {
-        this._rfb_host = host;
-        this._rfb_port = port;
-        this._rfb_password = (password !== undefined) ? password : "";
-        this._rfb_path = (path !== undefined) ? path : "";
+    get scaleViewport() { return this._scaleViewport; }
+    set scaleViewport(scale) {
+        this._scaleViewport = scale;
+        // Scaling trumps clipping, so we may need to adjust
+        // clipping when enabling or disabling scaling
+        if (scale && this._clipViewport) {
+            this._updateClip();
+        }
+        this._updateScale();
+        if (!scale && this._clipViewport) {
+            this._updateClip();
+        }
+    }
 
-        if (!this._rfb_host || !this._rfb_port) {
-            return this._fail(
-                _("Must set host and port"));
+    get resizeSession() { return this._resizeSession; }
+    set resizeSession(resize) {
+        this._resizeSession = resize;
+        if (resize) {
+            this._requestRemoteResize();
         }
+    }
 
-        this._rfb_init_state = '';
-        this._updateConnectionState('connecting');
-        return true;
-    },
+    get showDotCursor() { return this._showDotCursor; }
+    set showDotCursor(show) {
+        this._showDotCursor = show;
+        this._refreshCursor();
+    }
+
+    // ===== PUBLIC METHODS =====
 
-    disconnect: function () {
+    disconnect() {
         this._updateConnectionState('disconnecting');
         this._sock.off('error');
         this._sock.off('message');
         this._sock.off('open');
-    },
+    }
 
-    sendPassword: function (passwd) {
-        this._rfb_password = passwd;
+    sendCredentials(creds) {
+        this._rfb_credentials = creds;
         setTimeout(this._init_msg.bind(this), 0);
-    },
+    }
 
-    sendCtrlAltDel: function () {
-        if (this._rfb_connection_state !== 'connected' || this._view_only) { return false; }
+    sendCtrlAltDel() {
+        if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; }
         Log.Info("Sending Ctrl-Alt-Del");
 
         this.sendKey(KeyTable.XK_Control_L, "ControlLeft", true);
@@ -301,41 +359,32 @@ RFB.prototype = {
         this.sendKey(KeyTable.XK_Delete, "Delete", false);
         this.sendKey(KeyTable.XK_Alt_L, "AltLeft", false);
         this.sendKey(KeyTable.XK_Control_L, "ControlLeft", false);
+    }
 
-        return true;
-    },
-
-    xvpOp: function (ver, op) {
-        if (this._rfb_xvp_ver < ver) { return false; }
-        Log.Info("Sending XVP operation " + op + " (version " + ver + ")");
-        this._sock.send_string("\xFA\x00" + String.fromCharCode(ver) + String.fromCharCode(op));
-        return true;
-    },
-
-    xvpShutdown: function () {
-        return this.xvpOp(1, 2);
-    },
+    machineShutdown() {
+        this._xvpOp(1, 2);
+    }
 
-    xvpReboot: function () {
-        return this.xvpOp(1, 3);
-    },
+    machineReboot() {
+        this._xvpOp(1, 3);
+    }
 
-    xvpReset: function () {
-        return this.xvpOp(1, 4);
-    },
+    machineReset() {
+        this._xvpOp(1, 4);
+    }
 
     // Send a key press. If 'down' is not specified then send a down key
     // followed by an up key.
-    sendKey: function (keysym, code, down) {
-        if (this._rfb_connection_state !== 'connected' || this._view_only) { return false; }
+    sendKey(keysym, code, down) {
+        if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; }
 
         if (down === undefined) {
             this.sendKey(keysym, code, true);
             this.sendKey(keysym, code, false);
-            return true;
+            return;
         }
 
-        var scancode = XtScancode[code];
+        const scancode = XtScancode[code];
 
         if (this._qemuExtKeyEventSupported && scancode) {
             // 0 is NoSymbol
@@ -346,126 +395,203 @@ RFB.prototype = {
             RFB.messages.QEMUExtendedKeyEvent(this._sock, keysym, down, scancode);
         } else {
             if (!keysym) {
-                return false;
+                return;
             }
             Log.Info("Sending keysym (" + (down ? "down" : "up") + "): " + keysym);
             RFB.messages.keyEvent(this._sock, keysym, down ? 1 : 0);
         }
+    }
 
-        return true;
-    },
-
-    clipboardPasteFrom: function (text) {
-        if (this._rfb_connection_state !== 'connected' || this._view_only) { return; }
-        RFB.messages.clientCutText(this._sock, text);
-    },
-
-    // Requests a change of remote desktop size. This message is an extension
-    // and may only be sent if we have received an ExtendedDesktopSize message
-    requestDesktopSize: function (width, height) {
-        if (this._rfb_connection_state !== 'connected' ||
-            this._view_only) {
-            return false;
-        }
+    focus() {
+        this._canvas.focus();
+    }
 
-        if (this._supportsSetDesktopSize) {
-            RFB.messages.setDesktopSize(this._sock, width, height,
-                                        this._screen_id, this._screen_flags);
-            this._sock.flush();
-            return true;
-        } else {
-            return false;
-        }
-    },
+    blur() {
+        this._canvas.blur();
+    }
 
+    clipboardPasteFrom(text) {
+        if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; }
+        RFB.messages.clientCutText(this._sock, text);
+    }
 
-    // Private methods
+    // ===== PRIVATE METHODS =====
 
-    _connect: function () {
+    _connect() {
         Log.Debug(">> RFB.connect");
-        this._init_vars();
-
-        var uri;
-        if (typeof UsingSocketIO !== 'undefined') {
-            uri = 'http';
-        } else {
-            uri = this._encrypt ? 'wss' : 'ws';
-        }
 
-        uri += '://' + this._rfb_host + ':' + this._rfb_port + '/' + this._rfb_path;
-        Log.Info("connecting to " + uri);
+        Log.Info("connecting to " + this._url);
 
         try {
             // WebSocket.onopen transitions to the RFB init states
-            this._sock.open(uri, this._wsProtocols);
+            this._sock.open(this._url, ['binary']);
         } catch (e) {
             if (e.name === 'SyntaxError') {
-                this._fail("Invalid host or port value given", e);
+                this._fail("Invalid host or port (" + e + ")");
             } else {
-                this._fail("Error while connecting", e);
+                this._fail("Error when opening socket (" + e + ")");
             }
         }
 
+        // Make our elements part of the page
+        this._target.appendChild(this._screen);
+
+        this._cursor.attach(this._canvas);
+        this._refreshCursor();
+
+        // Monitor size changes of the screen
+        // FIXME: Use ResizeObserver, or hidden overflow
+        window.addEventListener('resize', this._eventHandlers.windowResize);
+
+        // Always grab focus on some kind of click event
+        this._canvas.addEventListener("mousedown", this._eventHandlers.focusCanvas);
+        this._canvas.addEventListener("touchstart", this._eventHandlers.focusCanvas);
+
         Log.Debug("<< RFB.connect");
-    },
+    }
 
-    _disconnect: function () {
+    _disconnect() {
         Log.Debug(">> RFB.disconnect");
-        this._cleanup();
+        this._cursor.detach();
+        this._canvas.removeEventListener("mousedown", this._eventHandlers.focusCanvas);
+        this._canvas.removeEventListener("touchstart", this._eventHandlers.focusCanvas);
+        window.removeEventListener('resize', this._eventHandlers.windowResize);
+        this._keyboard.ungrab();
+        this._mouse.ungrab();
         this._sock.close();
         this._print_stats();
+        try {
+            this._target.removeChild(this._screen);
+        } catch (e) {
+            if (e.name === 'NotFoundError') {
+                // Some cases where the initial connection fails
+                // can disconnect before the _screen is created
+            } else {
+                throw e;
+            }
+        }
+        clearTimeout(this._resizeTimeout);
         Log.Debug("<< RFB.disconnect");
-    },
+    }
 
-    _init_vars: function () {
-        // reset state
-        this._FBU.rects        = 0;
-        this._FBU.subrects     = 0;  // RRE and HEXTILE
-        this._FBU.lines        = 0;  // RAW
-        this._FBU.tiles        = 0;  // HEXTILE
-        this._FBU.zlibs        = []; // TIGHT zlib encoders
-        this._mouse_buttonMask = 0;
-        this._mouse_arr        = [];
-        this._rfb_tightvnc     = false;
+    _print_stats() {
+        const stats = this._encStats;
 
-        // Clear the per connection encoding stats
-        var i;
-        for (i = 0; i < this._encodings.length; i++) {
-            this._encStats[this._encodings[i][1]][0] = 0;
+        Log.Info("Encoding stats for this connection:");
+        Object.keys(stats).forEach((key) => {
+            const s = stats[key];
+            if (s[0] + s[1] > 0) {
+                Log.Info("    " + encodingName(key) + ": " + s[0] + " rects");
+            }
+        });
+
+        Log.Info("Encoding stats since page load:");
+        Object.keys(stats).forEach(key => Log.Info("    " + encodingName(key) + ": " + stats[key][1] + " rects"));
+    }
+
+    _focusCanvas(event) {
+        // Respect earlier handlers' request to not do side-effects
+        if (event.defaultPrevented) {
+            return;
         }
 
-        for (i = 0; i < 4; i++) {
-            this._FBU.zlibs[i] = new Inflator();
+        if (!this.focusOnClick) {
+            return;
         }
-    },
 
-    _print_stats: function () {
-        Log.Info("Encoding stats for this connection:");
-        var i, s;
-        for (i = 0; i < this._encodings.length; i++) {
-            s = this._encStats[this._encodings[i][1]];
-            if (s[0] + s[1] > 0) {
-                Log.Info("    " + this._encodings[i][0] + ": " + s[0] + " rects");
-            }
+        this.focus();
+    }
+
+    _windowResize(event) {
+        // If the window resized then our screen element might have
+        // as well. Update the viewport dimensions.
+        window.requestAnimationFrame(() => {
+            this._updateClip();
+            this._updateScale();
+        });
+
+        if (this._resizeSession) {
+            // Request changing the resolution of the remote display to
+            // the size of the local browser viewport.
+
+            // In order to not send multiple requests before the browser-resize
+            // is finished we wait 0.5 seconds before sending the request.
+            clearTimeout(this._resizeTimeout);
+            this._resizeTimeout = setTimeout(this._requestRemoteResize.bind(this), 500);
         }
+    }
 
-        Log.Info("Encoding stats since page load:");
-        for (i = 0; i < this._encodings.length; i++) {
-            s = this._encStats[this._encodings[i][1]];
-            Log.Info("    " + this._encodings[i][0] + ": " + s[1] + " rects");
+    // Update state of clipping in Display object, and make sure the
+    // configured viewport matches the current screen size
+    _updateClip() {
+        const cur_clip = this._display.clipViewport;
+        let new_clip = this._clipViewport;
+
+        if (this._scaleViewport) {
+            // Disable viewport clipping if we are scaling
+            new_clip = false;
         }
-    },
 
-    _cleanup: function () {
-        if (!this._view_only) { this._keyboard.ungrab(); }
-        if (!this._view_only) { this._mouse.ungrab(); }
-        this._display.defaultCursor();
-        if (Log.get_logging() !== 'debug') {
-            // Show noVNC logo on load and when disconnected, unless in
-            // debug mode
-            this._display.clear();
+        if (cur_clip !== new_clip) {
+            this._display.clipViewport = new_clip;
         }
-    },
+
+        if (new_clip) {
+            // When clipping is enabled, the screen is limited to
+            // the size of the container.
+            const size = this._screenSize();
+            this._display.viewportChangeSize(size.w, size.h);
+            this._fixScrollbars();
+        }
+    }
+
+    _updateScale() {
+        if (!this._scaleViewport) {
+            this._display.scale = 1.0;
+        } else {
+            const size = this._screenSize();
+            this._display.autoscale(size.w, size.h);
+        }
+        this._fixScrollbars();
+    }
+
+    // Requests a change of remote desktop size. This message is an extension
+    // and may only be sent if we have received an ExtendedDesktopSize message
+    _requestRemoteResize() {
+        clearTimeout(this._resizeTimeout);
+        this._resizeTimeout = null;
+
+        if (!this._resizeSession || this._viewOnly ||
+            !this._supportsSetDesktopSize) {
+            return;
+        }
+
+        const size = this._screenSize();
+        RFB.messages.setDesktopSize(this._sock,
+                                    Math.floor(size.w), Math.floor(size.h),
+                                    this._screen_id, this._screen_flags);
+
+        Log.Debug('Requested new desktop size: ' +
+                   size.w + 'x' + size.h);
+    }
+
+    // Gets the the size of the available screen
+    _screenSize() {
+        let r = this._screen.getBoundingClientRect();
+        return { w: r.width, h: r.height };
+    }
+
+    _fixScrollbars() {
+        // This is a hack because Chrome screws up the calculation
+        // for when scrollbars are needed. So to fix it we temporarily
+        // toggle them off and on.
+        const orig = this._screen.style.overflow;
+        this._screen.style.overflow = 'hidden';
+        // Force Chrome to recalculate the layout by asking for
+        // an element's dimensions
+        this._screen.getBoundingClientRect();
+        this._screen.style.overflow = orig;
+    }
 
     /*
      * Connection states:
@@ -474,8 +600,8 @@ RFB.prototype = {
      *   disconnecting
      *   disconnected - permanent state
      */
-    _updateConnectionState: function (state) {
-        var oldstate = this._rfb_connection_state;
+    _updateConnectionState(state) {
+        const oldstate = this._rfb_connection_state;
 
         if (state === oldstate) {
             Log.Debug("Already in state '" + state + "', ignoring");
@@ -530,10 +656,8 @@ RFB.prototype = {
         // State change actions
 
         this._rfb_connection_state = state;
-        this._onUpdateState(this, state, oldstate);
 
-        var smsg = "New state '" + state + "', was '" + oldstate + "'.";
-        Log.Debug(smsg);
+        Log.Debug("New state '" + state + "', was '" + oldstate + "'.");
 
         if (this._disconnTimer && state !== 'disconnecting') {
             Log.Debug("Clearing disconnect timer");
@@ -545,93 +669,67 @@ RFB.prototype = {
         }
 
         switch (state) {
-            case 'disconnected':
-                // Call onDisconnected callback after onUpdateState since
-                // we don't know if the UI only displays the latest message
-                if (this._rfb_disconnect_reason !== "") {
-                    this._onDisconnected(this, this._rfb_disconnect_reason);
-                } else {
-                    // No reason means clean disconnect
-                    this._onDisconnected(this);
-                }
-                break;
-
             case 'connecting':
                 this._connect();
                 break;
 
+            case 'connected':
+                this.dispatchEvent(new CustomEvent("connect", { detail: {} }));
+                break;
+
             case 'disconnecting':
                 this._disconnect();
 
-                this._disconnTimer = setTimeout(function () {
-                    this._rfb_disconnect_reason = _("Disconnect timeout");
+                this._disconnTimer = setTimeout(() => {
+                    Log.Error("Disconnection timed out.");
                     this._updateConnectionState('disconnected');
-                }.bind(this), this._disconnectTimeout * 1000);
+                }, DISCONNECT_TIMEOUT * 1000);
+                break;
+
+            case 'disconnected':
+                this.dispatchEvent(new CustomEvent(
+                    "disconnect", { detail:
+                                    { clean: this._rfb_clean_disconnect } }));
                 break;
         }
-    },
+    }
 
     /* Print errors and disconnect
      *
-     * The optional parameter 'details' is used for information that
+     * The parameter 'details' is used for information that
      * should be logged but not sent to the user interface.
      */
-    _fail: function (msg, details) {
-        var fullmsg = msg;
-        if (typeof details !== 'undefined') {
-            fullmsg = msg + " (" + details + ")";
-        }
+    _fail(details) {
         switch (this._rfb_connection_state) {
             case 'disconnecting':
-                Log.Error("Failed when disconnecting: " + fullmsg);
+                Log.Error("Failed when disconnecting: " + details);
                 break;
             case 'connected':
-                Log.Error("Failed while connected: " + fullmsg);
+                Log.Error("Failed while connected: " + details);
                 break;
             case 'connecting':
-                Log.Error("Failed when connecting: " + fullmsg);
+                Log.Error("Failed when connecting: " + details);
                 break;
             default:
-                Log.Error("RFB failure: " + fullmsg);
+                Log.Error("RFB failure: " + details);
                 break;
         }
-        this._rfb_disconnect_reason = msg; //This is sent to the UI
+        this._rfb_clean_disconnect = false; //This is sent to the UI
 
         // Transition to disconnected without waiting for socket to close
         this._updateConnectionState('disconnecting');
         this._updateConnectionState('disconnected');
 
         return false;
-    },
-
-    /*
-     * Send a notification to the UI. Valid levels are:
-     *   'normal'|'warn'|'error'
-     *
-     *   NOTE: Options could be added in the future.
-     *   NOTE: If this function is called multiple times, remember that the
-     *         interface could be only showing the latest notification.
-     */
-    _notification: function(msg, level, options) {
-        switch (level) {
-            case 'normal':
-            case 'warn':
-            case 'error':
-                Log.Debug("Notification[" + level + "]:" + msg);
-                break;
-            default:
-                Log.Error("Invalid notification level: " + level);
-                return;
-        }
+    }
 
-        if (options) {
-            this._onNotification(this, msg, level, options);
-        } else {
-            this._onNotification(this, msg, level);
-        }
-    },
+    _setCapability(cap, val) {
+        this._capabilities[cap] = val;
+        this.dispatchEvent(new CustomEvent("capabilities",
+                                           { detail: { capabilities: this._capabilities } }));
+    }
 
-    _handle_message: function () {
+    _handle_message() {
         if (this._sock.rQlen() === 0) {
             Log.Warn("handle_message called on an empty receive queue");
             return;
@@ -658,52 +756,56 @@ RFB.prototype = {
                 this._init_msg();
                 break;
         }
-    },
+    }
 
-    _handleKeyEvent: function (keysym, code, down) {
+    _handleKeyEvent(keysym, code, down) {
         this.sendKey(keysym, code, down);
-    },
+    }
 
-    _handleMouseButton: function (x, y, down, bmask) {
+    _handleMouseButton(x, y, down, bmask) {
         if (down) {
             this._mouse_buttonMask |= bmask;
         } else {
             this._mouse_buttonMask &= ~bmask;
         }
 
-        if (this._viewportDrag) {
+        if (this.dragViewport) {
             if (down && !this._viewportDragging) {
                 this._viewportDragging = true;
                 this._viewportDragPos = {'x': x, 'y': y};
+                this._viewportHasMoved = false;
 
                 // Skip sending mouse events
                 return;
             } else {
                 this._viewportDragging = false;
 
-                // If the viewport didn't actually move, then treat as a mouse click event
-                // Send the button down event here, as the button up event is sent at the end of this function
-                if (!this._viewportHasMoved && !this._view_only) {
-                    RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), bmask);
+                // If we actually performed a drag then we are done
+                // here and should not send any mouse events
+                if (this._viewportHasMoved) {
+                    return;
                 }
-                this._viewportHasMoved = false;
+
+                // Otherwise we treat this as a mouse click event.
+                // Send the button down event here, as the button up
+                // event is sent at the end of this function.
+                RFB.messages.pointerEvent(this._sock,
+                                          this._display.absX(x),
+                                          this._display.absY(y),
+                                          bmask);
             }
         }
 
-        if (this._view_only) { return; } // View only, skip mouse events
+        if (this._viewOnly) { return; } // View only, skip mouse events
 
         if (this._rfb_connection_state !== 'connected') { return; }
         RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), this._mouse_buttonMask);
-    },
+    }
 
-    _handleMouseMove: function (x, y) {
+    _handleMouseMove(x, y) {
         if (this._viewportDragging) {
-            var deltaX = this._viewportDragPos.x - x;
-            var deltaY = this._viewportDragPos.y - y;
-
-            // The goal is to trigger on a certain physical width, the
-            // devicePixelRatio brings us a bit closer but is not optimal.
-            var dragThreshold = 10 * (window.devicePixelRatio || 1);
+            const deltaX = this._viewportDragPos.x - x;
+            const deltaY = this._viewportDragPos.y - y;
 
             if (this._viewportHasMoved || (Math.abs(deltaX) > dragThreshold ||
                                            Math.abs(deltaY) > dragThreshold)) {
@@ -717,23 +819,22 @@ RFB.prototype = {
             return;
         }
 
-        if (this._view_only) { return; } // View only, skip mouse events
+        if (this._viewOnly) { return; } // View only, skip mouse events
 
         if (this._rfb_connection_state !== 'connected') { return; }
         RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), this._mouse_buttonMask);
-    },
+    }
 
     // Message Handlers
 
-    _negotiate_protocol_version: function () {
+    _negotiate_protocol_version() {
         if (this._sock.rQlen() < 12) {
-            return this._fail("Error while negotiating with server",
-                              "Incomplete protocol version");
+            return this._fail("Received incomplete protocol version.");
         }
 
-        var sversion = this._sock.rQshiftStr(12).substr(4, 7);
+        const sversion = this._sock.rQshiftStr(12).substr(4, 7);
         Log.Info("Server ProtocolVersion: " + sversion);
-        var is_repeater = 0;
+        let is_repeater = 0;
         switch (sversion) {
             case "000.000":  // UltraVNC repeater
                 is_repeater = 1;
@@ -753,12 +854,11 @@ RFB.prototype = {
                 this._rfb_version = 3.8;
                 break;
             default:
-                return this._fail("Unsupported server",
-                                  "Invalid server version: " + sversion);
+                return this._fail("Invalid server version " + sversion);
         }
 
         if (is_repeater) {
-            var repeaterID = this._repeaterID;
+            let repeaterID = "ID:" + this._repeaterID;
             while (repeaterID.length < 250) {
                 repeaterID += "\0";
             }
@@ -770,19 +870,19 @@ RFB.prototype = {
             this._rfb_version = this._rfb_max_version;
         }
 
-        var cversion = "00" + parseInt(this._rfb_version, 10) +
+        const cversion = "00" + parseInt(this._rfb_version, 10) +
                        ".00" + ((this._rfb_version * 10) % 10);
         this._sock.send_string("RFB " + cversion + "\n");
         Log.Debug('Sent ProtocolVersion: ' + cversion);
 
         this._rfb_init_state = 'Security';
-    },
+    }
 
-    _negotiate_security: function () {
+    _negotiate_security() {
         // Polyfill since IE and PhantomJS doesn't have
         // TypedArray.includes()
         function includes(item, array) {
-            for (var i = 0; i < array.length; i++) {
+            for (let i = 0; i < array.length; i++) {
                 if (array[i] === item) {
                     return true;
                 }
@@ -792,17 +892,14 @@ RFB.prototype = {
 
         if (this._rfb_version >= 3.7) {
             // Server sends supported list, client decides
-            var num_types = this._sock.rQshift8();
+            const num_types = this._sock.rQshift8();
             if (this._sock.rQwait("security type", num_types, 1)) { return false; }
 
             if (num_types === 0) {
-                var strlen = this._sock.rQshift32();
-                var reason = this._sock.rQshiftStr(strlen);
-                return this._fail("Error while negotiating with server",
-                                  "Security failure: " + reason);
+                return this._handle_security_failure("no security types");
             }
 
-            var types = this._sock.rQshiftBytes(num_types);
+            const types = this._sock.rQshiftBytes(num_types);
             Log.Debug("Server security types: " + types);
 
             // Look for each auth in preferred order
@@ -816,8 +913,7 @@ RFB.prototype = {
             } else if (includes(2, types)) {
                 this._rfb_auth_scheme = 2; // VNC Auth
             } else {
-                return this._fail("Unsupported server",
-                                  "Unsupported security types: " + types);
+                return this._fail("Unsupported security types (types: " + types + ")");
             }
 
             this._sock.send([this._rfb_auth_scheme]);
@@ -831,79 +927,140 @@ RFB.prototype = {
         Log.Debug('Authenticating using scheme: ' + this._rfb_auth_scheme);
 
         return this._init_msg(); // jump to authentication
-    },
+    }
 
-    // authentication
-    _negotiate_xvp_auth: function () {
-        var xvp_sep = this._xvp_password_sep;
-        var xvp_auth = this._rfb_password.split(xvp_sep);
-        if (xvp_auth.length < 3) {
-            var msg = 'XVP credentials required (user' + xvp_sep +
-                'target' + xvp_sep + 'password) -- got only ' + this._rfb_password;
-            this._onPasswordRequired(this, msg);
+    /*
+     * Get the security failure reason if sent from the server and
+     * send the 'securityfailure' event.
+     *
+     * - The optional parameter context can be used to add some extra
+     *   context to the log output.
+     *
+     * - The optional parameter security_result_status can be used to
+     *   add a custom status code to the event.
+     */
+    _handle_security_failure(context, security_result_status) {
+
+        if (typeof context === 'undefined') {
+            context = "";
+        } else {
+            context = " on " + context;
+        }
+
+        if (typeof security_result_status === 'undefined') {
+            security_result_status = 1; // fail
+        }
+
+        if (this._sock.rQwait("reason length", 4)) {
             return false;
         }
+        const strlen = this._sock.rQshift32();
+        let reason = "";
 
-        var xvp_auth_str = String.fromCharCode(xvp_auth[0].length) +
-                           String.fromCharCode(xvp_auth[1].length) +
-                           xvp_auth[0] +
-                           xvp_auth[1];
+        if (strlen > 0) {
+            if (this._sock.rQwait("reason", strlen, 8)) { return false; }
+            reason = this._sock.rQshiftStr(strlen);
+        }
+
+        if (reason !== "") {
+            this.dispatchEvent(new CustomEvent(
+                "securityfailure",
+                { detail: { status: security_result_status, reason: reason } }));
+
+            return this._fail("Security negotiation failed" + context +
+                              " (reason: " + reason + ")");
+        } else {
+            this.dispatchEvent(new CustomEvent(
+                "securityfailure",
+                { detail: { status: security_result_status } }));
+
+            return this._fail("Security negotiation failed" + context);
+        }
+    }
+
+    // authentication
+    _negotiate_xvp_auth() {
+        if (!this._rfb_credentials.username ||
+            !this._rfb_credentials.password ||
+            !this._rfb_credentials.target) {
+            this.dispatchEvent(new CustomEvent(
+                "credentialsrequired",
+                { detail: { types: ["username", "password", "target"] } }));
+             return false;
+        }
+
+        const xvp_auth_str = String.fromCharCode(this._rfb_credentials.username.length) +
+                           String.fromCharCode(this._rfb_credentials.target.length) +
+                           this._rfb_credentials.username +
+                           this._rfb_credentials.target;
         this._sock.send_string(xvp_auth_str);
-        this._rfb_password = xvp_auth.slice(2).join(xvp_sep);
         this._rfb_auth_scheme = 2;
         return this._negotiate_authentication();
-    },
+    }
 
-    _negotiate_std_vnc_auth: function () {
-        if (this._rfb_password.length === 0) {
-            this._onPasswordRequired(this);
+    _negotiate_std_vnc_auth() {
+        if (this._sock.rQwait("auth challenge", 16)) { return false; }
+
+        if (!this._rfb_credentials.password) {
+            this.dispatchEvent(new CustomEvent(
+                "credentialsrequired",
+                { detail: { types: ["password"] } }));
             return false;
         }
 
-        if (this._sock.rQwait("auth challenge", 16)) { return false; }
-
         // TODO(directxman12): make genDES not require an Array
-        var challenge = Array.prototype.slice.call(this._sock.rQshiftBytes(16));
-        var response = RFB.genDES(this._rfb_password, challenge);
+        const challenge = Array.prototype.slice.call(this._sock.rQshiftBytes(16));
+        const response = RFB.genDES(this._rfb_credentials.password, challenge);
         this._sock.send(response);
         this._rfb_init_state = "SecurityResult";
         return true;
-    },
+    }
 
-    _negotiate_tight_tunnels: function (numTunnels) {
-        var clientSupportedTunnelTypes = {
+    _negotiate_tight_tunnels(numTunnels) {
+        const clientSupportedTunnelTypes = {
             0: { vendor: 'TGHT', signature: 'NOTUNNEL' }
         };
-        var serverSupportedTunnelTypes = {};
+        const serverSupportedTunnelTypes = {};
         // receive tunnel capabilities
-        for (var i = 0; i < numTunnels; i++) {
-            var cap_code = this._sock.rQshift32();
-            var cap_vendor = this._sock.rQshiftStr(4);
-            var cap_signature = this._sock.rQshiftStr(8);
+        for (let i = 0; i < numTunnels; i++) {
+            const cap_code = this._sock.rQshift32();
+            const cap_vendor = this._sock.rQshiftStr(4);
+            const cap_signature = this._sock.rQshiftStr(8);
             serverSupportedTunnelTypes[cap_code] = { vendor: cap_vendor, signature: cap_signature };
         }
 
+        Log.Debug("Server Tight tunnel types: " + serverSupportedTunnelTypes);
+
+        // Siemens touch panels have a VNC server that supports NOTUNNEL,
+        // but forgets to advertise it. Try to detect such servers by
+        // looking for their custom tunnel type.
+        if (serverSupportedTunnelTypes[1] &&
+            (serverSupportedTunnelTypes[1].vendor === "SICR") &&
+            (serverSupportedTunnelTypes[1].signature === "SCHANNEL")) {
+            Log.Debug("Detected Siemens server. Assuming NOTUNNEL support.");
+            serverSupportedTunnelTypes[0] = { vendor: 'TGHT', signature: 'NOTUNNEL' };
+        }
+
         // choose the notunnel type
         if (serverSupportedTunnelTypes[0]) {
             if (serverSupportedTunnelTypes[0].vendor != clientSupportedTunnelTypes[0].vendor ||
                 serverSupportedTunnelTypes[0].signature != clientSupportedTunnelTypes[0].signature) {
-                return this._fail("Unsupported server",
-                                  "Client's tunnel type had the incorrect " +
+                return this._fail("Client's tunnel type had the incorrect " +
                                   "vendor or signature");
             }
+            Log.Debug("Selected tunnel type: " + clientSupportedTunnelTypes[0]);
             this._sock.send([0, 0, 0, 0]);  // use NOTUNNEL
             return false; // wait until we receive the sub auth count to continue
         } else {
-            return this._fail("Unsupported server",
-                              "Server wanted tunnels, but doesn't support " +
+            return this._fail("Server wanted tunnels, but doesn't support " +
                               "the notunnel type");
         }
-    },
+    }
 
-    _negotiate_tight_auth: function () {
+    _negotiate_tight_auth() {
         if (!this._rfb_tightvnc) {  // first pass, do the tunnel negotiation
             if (this._sock.rQwait("num tunnels", 4)) { return false; }
-            var numTunnels = this._sock.rQshift32();
+            const numTunnels = this._sock.rQshift32();
             if (numTunnels > 0 && this._sock.rQwait("tunnel capabilities", 16 * numTunnels, 4)) { return false; }
 
             this._rfb_tightvnc = true;
@@ -916,7 +1073,7 @@ RFB.prototype = {
 
         // second pass, do the sub-auth negotiation
         if (this._sock.rQwait("sub auth count", 4)) { return false; }
-        var subAuthCount = this._sock.rQshift32();
+        const subAuthCount = this._sock.rQshift32();
         if (subAuthCount === 0) {  // empty sub-auth list received means 'no auth' subtype selected
             this._rfb_init_state = 'SecurityResult';
             return true;
@@ -924,22 +1081,25 @@ RFB.prototype = {
 
         if (this._sock.rQwait("sub auth capabilities", 16 * subAuthCount, 4)) { return false; }
 
-        var clientSupportedTypes = {
+        const clientSupportedTypes = {
             'STDVNOAUTH__': 1,
             'STDVVNCAUTH_': 2
         };
 
-        var serverSupportedTypes = [];
+        const serverSupportedTypes = [];
 
-        for (var i = 0; i < subAuthCount; i++) {
-            var capNum = this._sock.rQshift32();
-            var capabilities = this._sock.rQshiftStr(12);
+        for (let i = 0; i < subAuthCount; i++) {
+            this._sock.rQshift32(); // capNum
+            const capabilities = this._sock.rQshiftStr(12);
             serverSupportedTypes.push(capabilities);
         }
 
-        for (var authType in clientSupportedTypes) {
+        Log.Debug("Server Tight authentication types: " + serverSupportedTypes);
+
+        for (let authType in clientSupportedTypes) {
             if (serverSupportedTypes.indexOf(authType) != -1) {
                 this._sock.send([0, 0, 0, clientSupportedTypes[authType]]);
+                Log.Debug("Selected authentication type: " + authType);
 
                 switch (authType) {
                     case 'STDVNOAUTH__':  // no auth
@@ -949,24 +1109,19 @@ RFB.prototype = {
                         this._rfb_auth_scheme = 2;
                         return this._init_msg();
                     default:
-                        return this._fail("Unsupported server",
-                                          "Unsupported tiny auth scheme: " +
-                                          authType);
+                        return this._fail("Unsupported tiny auth scheme " +
+                                          "(scheme: " + authType + ")");
                 }
             }
         }
 
-        return this._fail("Unsupported server",
-                          "No supported sub-auth types!");
-    },
+        return this._fail("No supported sub-auth types!");
+    }
 
-    _negotiate_authentication: function () {
+    _negotiate_authentication() {
         switch (this._rfb_auth_scheme) {
             case 0:  // connection failed
-                if (this._sock.rQwait("auth reason", 4)) { return false; }
-                var strlen = this._sock.rQshift32();
-                var reason = this._sock.rQshiftStr(strlen);
-                return this._fail("Authentication failure", reason);
+                return this._handle_security_failure("authentication scheme");
 
             case 1:  // no auth
                 if (this._rfb_version >= 3.8) {
@@ -986,74 +1141,71 @@ RFB.prototype = {
                 return this._negotiate_tight_auth();
 
             default:
-                return this._fail("Unsupported server",
-                                  "Unsupported auth scheme: " +
-                                  this._rfb_auth_scheme);
+                return this._fail("Unsupported auth scheme (scheme: " +
+                                  this._rfb_auth_scheme + ")");
         }
-    },
+    }
 
-    _handle_security_result: function () {
+    _handle_security_result() {
         if (this._sock.rQwait('VNC auth response ', 4)) { return false; }
-        switch (this._sock.rQshift32()) {
-            case 0:  // OK
-                this._rfb_init_state = 'ClientInitialisation';
-                Log.Debug('Authentication OK');
-                return this._init_msg();
-            case 1:  // failed
-                if (this._rfb_version >= 3.8) {
-                    var length = this._sock.rQshift32();
-                    if (this._sock.rQwait("SecurityResult reason", length, 8)) { return false; }
-                    var reason = this._sock.rQshiftStr(length);
-                    return this._fail("Authentication failure", reason);
-                } else {
-                    return this._fail("Authentication failure");
-                }
-            case 2:
-                return this._fail("Too many authentication attempts");
-            default:
-                return this._fail("Unsupported server",
-                                  "Unknown SecurityResult");
+
+        const status = this._sock.rQshift32();
+
+        if (status === 0) { // OK
+            this._rfb_init_state = 'ClientInitialisation';
+            Log.Debug('Authentication OK');
+            return this._init_msg();
+        } else {
+            if (this._rfb_version >= 3.8) {
+                return this._handle_security_failure("security result", status);
+            } else {
+                this.dispatchEvent(new CustomEvent(
+                    "securityfailure",
+                    { detail: { status: status } }));
+
+                return this._fail("Security handshake failed");
+            }
         }
-    },
+    }
 
-    _negotiate_server_init: function () {
+    _negotiate_server_init() {
         if (this._sock.rQwait("server initialization", 24)) { return false; }
 
         /* Screen size */
-        var width = this._sock.rQshift16();
-        var height = this._sock.rQshift16();
+        const width = this._sock.rQshift16();
+        const height = this._sock.rQshift16();
 
         /* PIXEL_FORMAT */
-        var bpp         = this._sock.rQshift8();
-        var depth       = this._sock.rQshift8();
-        var big_endian  = this._sock.rQshift8();
-        var true_color  = this._sock.rQshift8();
-
-        var red_max     = this._sock.rQshift16();
-        var green_max   = this._sock.rQshift16();
-        var blue_max    = this._sock.rQshift16();
-        var red_shift   = this._sock.rQshift8();
-        var green_shift = this._sock.rQshift8();
-        var blue_shift  = this._sock.rQshift8();
+        const bpp         = this._sock.rQshift8();
+        const depth       = this._sock.rQshift8();
+        const big_endian  = this._sock.rQshift8();
+        const true_color  = this._sock.rQshift8();
+
+        const red_max     = this._sock.rQshift16();
+        const green_max   = this._sock.rQshift16();
+        const blue_max    = this._sock.rQshift16();
+        const red_shift   = this._sock.rQshift8();
+        const green_shift = this._sock.rQshift8();
+        const blue_shift  = this._sock.rQshift8();
         this._sock.rQskipBytes(3);  // padding
 
         // NB(directxman12): we don't want to call any callbacks or print messages until
         //                   *after* we're past the point where we could backtrack
 
         /* Connection name/title */
-        var name_length = this._sock.rQshift32();
+        const name_length = this._sock.rQshift32();
         if (this._sock.rQwait('server init name', name_length, 24)) { return false; }
         this._fb_name = decodeUTF8(this._sock.rQshiftStr(name_length));
 
         if (this._rfb_tightvnc) {
             if (this._sock.rQwait('TightVNC extended server init header', 8, 24 + name_length)) { return false; }
             // In TightVNC mode, ServerInit message is extended
-            var numServerMessages = this._sock.rQshift16();
-            var numClientMessages = this._sock.rQshift16();
-            var numEncodings = this._sock.rQshift16();
+            const numServerMessages = this._sock.rQshift16();
+            const numClientMessages = this._sock.rQshift16();
+            const numEncodings = this._sock.rQshift16();
             this._sock.rQskipBytes(2);  // padding
 
-            var totalMessagesLength = (numServerMessages + numClientMessages + numEncodings) * 16;
+            const totalMessagesLength = (numServerMessages + numClientMessages + numEncodings) * 16;
             if (this._sock.rQwait('TightVNC extended server init header', totalMessagesLength, 32 + name_length)) { return false; }
 
             // we don't actually do anything with the capability information that TIGHT sends,
@@ -1095,15 +1247,24 @@ RFB.prototype = {
         }
 
         // we're past the point where we could backtrack, so it's safe to call this
-        this._onDesktopName(this, this._fb_name);
+        this.dispatchEvent(new CustomEvent(
+            "desktopname",
+            { detail: { name: this._fb_name } }));
 
         this._resize(width, height);
 
-        if (!this._view_only) { this._keyboard.grab(); }
-        if (!this._view_only) { this._mouse.grab(); }
+        if (!this._viewOnly) { this._keyboard.grab(); }
+        if (!this._viewOnly) { this._mouse.grab(); }
+
+        this._fb_depth = 24;
 
-        RFB.messages.pixelFormat(this._sock, 4, 3, true);
-        RFB.messages.clientEncodings(this._sock, this._encodings, this._local_cursor);
+        if (this._fb_name === "Intel(r) AMT KVM") {
+            Log.Warn("Intel AMT KVM only supports 8/16 bit depths. Using low color mode.");
+            this._fb_depth = 8;
+        }
+
+        RFB.messages.pixelFormat(this._sock, this._fb_depth, true);
+        this._sendEncodings();
         RFB.messages.fbUpdateRequest(this._sock, false, 0, 0, this._fb_width, this._fb_height);
 
         this._timing.fbu_rt_start = (new Date()).getTime();
@@ -1111,7 +1272,40 @@ RFB.prototype = {
 
         this._updateConnectionState('connected');
         return true;
-    },
+    }
+
+    _sendEncodings() {
+        const encs = [];
+
+        // In preference order
+        encs.push(encodings.encodingCopyRect);
+        // Only supported with full depth support
+        if (this._fb_depth == 24) {
+            encs.push(encodings.encodingTight);
+            encs.push(encodings.encodingTightPNG);
+            encs.push(encodings.encodingHextile);
+            encs.push(encodings.encodingRRE);
+        }
+        encs.push(encodings.encodingRaw);
+
+        // Psuedo-encoding settings
+        encs.push(encodings.pseudoEncodingQualityLevel0 + 6);
+        encs.push(encodings.pseudoEncodingCompressLevel0 + 2);
+
+        encs.push(encodings.pseudoEncodingDesktopSize);
+        encs.push(encodings.pseudoEncodingLastRect);
+        encs.push(encodings.pseudoEncodingQEMUExtendedKeyEvent);
+        encs.push(encodings.pseudoEncodingExtendedDesktopSize);
+        encs.push(encodings.pseudoEncodingXvp);
+        encs.push(encodings.pseudoEncodingFence);
+        encs.push(encodings.pseudoEncodingContinuousUpdates);
+
+        if (this._fb_depth == 24) {
+            encs.push(encodings.pseudoEncodingCursor);
+        }
+
+        RFB.messages.clientEncodings(this._sock, encs);
+    }
 
     /* RFB protocol initialization states:
      *   ProtocolVersion
@@ -1121,7 +1315,7 @@ RFB.prototype = {
      *   ClientInitialization - not triggered by server message
      *   ServerInitialization
      */
-    _init_msg: function () {
+    _init_msg() {
         switch (this._rfb_init_state) {
             case 'ProtocolVersion':
                 return this._negotiate_protocol_version();
@@ -1144,39 +1338,41 @@ RFB.prototype = {
                 return this._negotiate_server_init();
 
             default:
-                return this._fail("Internal error", "Unknown init state: " +
-                                  this._rfb_init_state);
+                return this._fail("Unknown init state (state: " +
+                                  this._rfb_init_state + ")");
         }
-    },
+    }
 
-    _handle_set_colour_map_msg: function () {
+    _handle_set_colour_map_msg() {
         Log.Debug("SetColorMapEntries");
 
-        return this._fail("Protocol error", "Unexpected SetColorMapEntries message");
-    },
+        return this._fail("Unexpected SetColorMapEntries message");
+    }
 
-    _handle_server_cut_text: function () {
+    _handle_server_cut_text() {
         Log.Debug("ServerCutText");
 
         if (this._sock.rQwait("ServerCutText header", 7, 1)) { return false; }
         this._sock.rQskipBytes(3);  // Padding
-        var length = this._sock.rQshift32();
+        const length = this._sock.rQshift32();
         if (this._sock.rQwait("ServerCutText", length, 8)) { return false; }
 
-        var text = this._sock.rQshiftStr(length);
+        const text = this._sock.rQshiftStr(length);
 
-        if (this._view_only) { return true; }
+        if (this._viewOnly) { return true; }
 
-        this._onClipboard(this, text);
+        this.dispatchEvent(new CustomEvent(
+            "clipboard",
+            { detail: { text: text } }));
 
         return true;
-    },
+    }
 
-    _handle_server_fence_msg: function() {
+    _handle_server_fence_msg() {
         if (this._sock.rQwait("ServerFence header", 8, 1)) { return false; }
         this._sock.rQskipBytes(3); // Padding
-        var flags = this._sock.rQshift32();
-        var length = this._sock.rQshift8();
+        let flags = this._sock.rQshift32();
+        let length = this._sock.rQshift8();
 
         if (this._sock.rQwait("ServerFence payload", length, 9)) { return false; }
 
@@ -1185,7 +1381,7 @@ RFB.prototype = {
             length = 64;
         }
 
-        var payload = this._sock.rQshiftStr(length);
+        const payload = this._sock.rQshiftStr(length);
 
         this._supportsFence = true;
 
@@ -1199,8 +1395,7 @@ RFB.prototype = {
          */
 
         if (!(flags & (1<<31))) {
-            return this._fail("Internal error",
-                              "Unexpected fence response");
+            return this._fail("Unexpected fence response");
         }
 
         // Filter out unsupported flags
@@ -1213,45 +1408,43 @@ RFB.prototype = {
         RFB.messages.clientFence(this._sock, flags, payload);
 
         return true;
-    },
+    }
 
-    _handle_xvp_msg: function () {
+    _handle_xvp_msg() {
         if (this._sock.rQwait("XVP version and message", 3, 1)) { return false; }
         this._sock.rQskip8();  // Padding
-        var xvp_ver = this._sock.rQshift8();
-        var xvp_msg = this._sock.rQshift8();
+        const xvp_ver = this._sock.rQshift8();
+        const xvp_msg = this._sock.rQshift8();
 
         switch (xvp_msg) {
             case 0:  // XVP_FAIL
-                Log.Error("Operation Failed");
-                this._notification("XVP Operation Failed", 'error');
+                Log.Error("XVP Operation Failed");
                 break;
             case 1:  // XVP_INIT
                 this._rfb_xvp_ver = xvp_ver;
                 Log.Info("XVP extensions enabled (version " + this._rfb_xvp_ver + ")");
-                this._onXvpInit(this._rfb_xvp_ver);
+                this._setCapability("power", true);
                 break;
             default:
-                this._fail("Unexpected server message",
-                           "Illegal server XVP message " + xvp_msg);
+                this._fail("Illegal server XVP message (msg: " + xvp_msg + ")");
                 break;
         }
 
         return true;
-    },
-
-    _normal_msg: function () {
-        var msg_type;
+    }
 
+    _normal_msg() {
+        let msg_type;
         if (this._FBU.rects > 0) {
             msg_type = 0;
         } else {
             msg_type = this._sock.rQshift8();
         }
 
+        let first, ret;
         switch (msg_type) {
             case 0:  // FramebufferUpdate
-                var ret = this._framebufferUpdate();
+                ret = this._framebufferUpdate();
                 if (ret && !this._enabledContinuousUpdates) {
                     RFB.messages.fbUpdateRequest(this._sock, true, 0, 0,
                                                  this._fb_width, this._fb_height);
@@ -1263,14 +1456,16 @@ RFB.prototype = {
 
             case 2:  // Bell
                 Log.Debug("Bell");
-                this._onBell(this);
+                this.dispatchEvent(new CustomEvent(
+                    "bell", 
+                    { detail: {} }));
                 return true;
 
             case 3:  // ServerCutText
                 return this._handle_server_cut_text();
 
             case 150: // EndOfContinuousUpdates
-                var first = !(this._supportsContinuousUpdates);
+                first = !this._supportsContinuousUpdates;
                 this._supportsContinuousUpdates = true;
                 this._enabledContinuousUpdates = false;
                 if (first) {
@@ -1290,24 +1485,21 @@ RFB.prototype = {
                 return this._handle_xvp_msg();
 
             default:
-                this._fail("Unexpected server message", "Type:" + msg_type);
+                this._fail("Unexpected server message (type " + msg_type + ")");
                 Log.Debug("sock.rQslice(0, 30): " + this._sock.rQslice(0, 30));
                 return true;
         }
-    },
+    }
 
-    _onFlush: function() {
+    _onFlush() {
         this._flushing = false;
         // Resume processing
         if (this._sock.rQlen() > 0) {
             this._handle_message();
         }
-    },
-
-    _framebufferUpdate: function () {
-        var ret = true;
-        var now;
+    }
 
+    _framebufferUpdate() {
         if (this._FBU.rects === 0) {
             if (this._sock.rQwait("FBU header", 3, 1)) { return false; }
             this._sock.rQskip8();  // Padding
@@ -1315,7 +1507,7 @@ RFB.prototype = {
             this._FBU.bytes = 0;
             this._timing.cur_fbu = 0;
             if (this._timing.fbu_rt_start > 0) {
-                now = (new Date()).getTime();
+                const now = (new Date()).getTime();
                 Log.Info("First FBU latency: " + (now - this._timing.fbu_rt_start));
             }
 
@@ -1336,7 +1528,7 @@ RFB.prototype = {
                 if (this._sock.rQwait("rect header", 12)) { return false; }
                 /* New FramebufferUpdate */
 
-                var hdr = this._sock.rQshiftBytes(12);
+                const hdr = this._sock.rQshiftBytes(12);
                 this._FBU.x        = (hdr[0] << 8) + hdr[1];
                 this._FBU.y        = (hdr[2] << 8) + hdr[3];
                 this._FBU.width    = (hdr[4] << 8) + hdr[5];
@@ -1344,28 +1536,24 @@ RFB.prototype = {
                 this._FBU.encoding = parseInt((hdr[8] << 24) + (hdr[9] << 16) +
                                               (hdr[10] << 8) + hdr[11], 10);
 
-                this._onFBUReceive(this,
-                    {'x': this._FBU.x, 'y': this._FBU.y,
-                     'width': this._FBU.width, 'height': this._FBU.height,
-                     'encoding': this._FBU.encoding,
-                     'encodingName': this._encNames[this._FBU.encoding]});
-
-                if (!this._encNames[this._FBU.encoding]) {
-                    this._fail("Unexpected server message",
-                               "Unsupported encoding " +
-                               this._FBU.encoding);
+                if (!this._encHandlers[this._FBU.encoding]) {
+                    this._fail("Unsupported encoding (encoding: " +
+                               this._FBU.encoding + ")");
                     return false;
                 }
             }
 
             this._timing.last_fbu = (new Date()).getTime();
 
-            ret = this._encHandlers[this._FBU.encoding]();
+            const ret = this._encHandlers[this._FBU.encoding]();
 
-            now = (new Date()).getTime();
+            const now = (new Date()).getTime();
             this._timing.cur_fbu += (now - this._timing.last_fbu);
 
             if (ret) {
+                if (!(this._FBU.encoding in this._encStats)) {
+                    this._encStats[this._FBU.encoding] = [0, 0];
+                }
                 this._encStats[this._FBU.encoding][0]++;
                 this._encStats[this._FBU.encoding][1]++;
                 this._timing.pixels += this._FBU.width * this._FBU.height;
@@ -1384,7 +1572,7 @@ RFB.prototype = {
                 }
 
                 if (this._timing.fbu_rt_start > 0) {
-                    var fbu_rt_diff = now - this._timing.fbu_rt_start;
+                    const fbu_rt_diff = now - this._timing.fbu_rt_start;
                     this._timing.fbu_rt_total += fbu_rt_diff;
                     this._timing.fbu_rt_cnt++;
                     Log.Info("full FBU round-trip, cur: " +
@@ -1401,106 +1589,90 @@ RFB.prototype = {
 
         this._display.flip();
 
-        this._onFBUComplete(this,
-                {'x': this._FBU.x, 'y': this._FBU.y,
-                 'width': this._FBU.width, 'height': this._FBU.height,
-                 'encoding': this._FBU.encoding,
-                 'encodingName': this._encNames[this._FBU.encoding]});
-
         return true;  // We finished this FBU
-    },
+    }
 
-    _updateContinuousUpdates: function() {
+    _updateContinuousUpdates() {
         if (!this._enabledContinuousUpdates) { return; }
 
         RFB.messages.enableContinuousUpdates(this._sock, true, 0, 0,
                                              this._fb_width, this._fb_height);
-    },
+    }
 
-    _resize: function(width, height) {
+    _resize(width, height) {
         this._fb_width = width;
         this._fb_height = height;
 
         this._destBuff = new Uint8Array(this._fb_width * this._fb_height * 4);
 
         this._display.resize(this._fb_width, this._fb_height);
-        this._onFBResize(this, this._fb_width, this._fb_height);
+
+        // Adjust the visible viewport based on the new dimensions
+        this._updateClip();
+        this._updateScale();
 
         this._timing.fbu_rt_start = (new Date()).getTime();
         this._updateContinuousUpdates();
     }
-};
 
-make_properties(RFB, [
-    ['target', 'wo', 'dom'],                // VNC display rendering Canvas object
-    ['focusContainer', 'wo', 'dom'],        // DOM element that captures keyboard input
-    ['encrypt', 'rw', 'bool'],              // Use TLS/SSL/wss encryption
-    ['local_cursor', 'rw', 'bool'],         // Request locally rendered cursor
-    ['shared', 'rw', 'bool'],               // Request shared mode
-    ['view_only', 'rw', 'bool'],            // Disable client mouse/keyboard
-    ['xvp_password_sep', 'rw', 'str'],      // Separator for XVP password fields
-    ['disconnectTimeout', 'rw', 'int'],     // Time (s) to wait for disconnection
-    ['wsProtocols', 'rw', 'arr'],           // Protocols to use in the WebSocket connection
-    ['repeaterID', 'rw', 'str'],            // [UltraVNC] RepeaterID to connect to
-    ['viewportDrag', 'rw', 'bool'],         // Move the viewport on mouse drags
-
-    // Callback functions
-    ['onUpdateState', 'rw', 'func'],        // onUpdateState(rfb, state, oldstate): connection state change
-    ['onNotification', 'rw', 'func'],       // onNotification(rfb, msg, level, options): notification for the UI
-    ['onDisconnected', 'rw', 'func'],       // onDisconnected(rfb, reason): disconnection finished
-    ['onPasswordRequired', 'rw', 'func'],   // onPasswordRequired(rfb, msg): VNC password is required
-    ['onClipboard', 'rw', 'func'],          // onClipboard(rfb, text): RFB clipboard contents received
-    ['onBell', 'rw', 'func'],               // onBell(rfb): RFB Bell message received
-    ['onFBUReceive', 'rw', 'func'],         // onFBUReceive(rfb, fbu): RFB FBU received but not yet processed
-    ['onFBUComplete', 'rw', 'func'],        // onFBUComplete(rfb, fbu): RFB FBU received and processed
-    ['onFBResize', 'rw', 'func'],           // onFBResize(rfb, width, height): frame buffer resized
-    ['onDesktopName', 'rw', 'func'],        // onDesktopName(rfb, name): desktop name received
-    ['onXvpInit', 'rw', 'func']             // onXvpInit(version): XVP extensions active for this connection
-]);
-
-RFB.prototype.set_local_cursor = function (cursor) {
-    if (!cursor || (cursor in {'0': 1, 'no': 1, 'false': 1})) {
-        this._local_cursor = false;
-        this._display.disableLocalCursor(); //Only show server-side cursor
-    } else {
-        if (this._display.get_cursor_uri()) {
-            this._local_cursor = true;
-        } else {
-            Log.Warn("Browser does not support local cursor");
-            this._display.disableLocalCursor();
-        }
+    _xvpOp(ver, op) {
+        if (this._rfb_xvp_ver < ver) { return; }
+        Log.Info("Sending XVP operation " + op + " (version " + ver + ")");
+        RFB.messages.xvpOp(this._sock, ver, op);
     }
 
-    // Need to send an updated list of encodings if we are connected
-    if (this._rfb_connection_state === "connected") {
-        RFB.messages.clientEncodings(this._sock, this._encodings, cursor);
+    _updateCursor(rgba, hotx, hoty, w, h) {
+        this._cursorImage = {
+            rgbaPixels: rgba,
+            hotx: hotx, hoty: hoty, w: w, h: h,
+        };
+        this._refreshCursor();
     }
-};
 
-RFB.prototype.set_view_only = function (view_only) {
-    this._view_only = view_only;
+    _shouldShowDotCursor() {
+        // Called when this._cursorImage is updated
+        if (!this._showDotCursor) {
+            // User does not want to see the dot, so...
+            return false;
+        }
 
-    if (this._rfb_connection_state === "connecting" ||
-        this._rfb_connection_state === "connected") {
-        if (view_only) {
-            this._keyboard.ungrab();
-            this._mouse.ungrab();
-        } else {
-            this._keyboard.grab();
-            this._mouse.grab();
+        // The dot should not be shown if the cursor is already visible,
+        // i.e. contains at least one not-fully-transparent pixel.
+        // So iterate through all alpha bytes in rgba and stop at the
+        // first non-zero.
+        for (let i = 3; i < this._cursorImage.rgbaPixels.length; i += 4) {
+            if (this._cursorImage.rgbaPixels[i]) {
+                return false;
+            }
         }
+
+        // At this point, we know that the cursor is fully transparent, and
+        // the user wants to see the dot instead of this.
+        return true;
+    }
+
+    _refreshCursor() {
+        const image = this._shouldShowDotCursor() ? RFB.cursors.dot : this._cursorImage;
+        this._cursor.change(image.rgbaPixels,
+                            image.hotx, image.hoty,
+                            image.w, image.h
+        );
     }
-};
 
-RFB.prototype.get_display = function () { return this._display; };
-RFB.prototype.get_keyboard = function () { return this._keyboard; };
-RFB.prototype.get_mouse = function () { return this._mouse; };
+    static genDES(password, challenge) {
+        const passwd = [];
+        for (let i = 0; i < password.length; i++) {
+            passwd.push(password.charCodeAt(i));
+        }
+        return (new DES(passwd)).encrypt(challenge);
+    }
+}
 
 // Class Methods
 RFB.messages = {
-    keyEvent: function (sock, keysym, down) {
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+    keyEvent(sock, keysym, down) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
 
         buff[offset] = 4;  // msg-type
         buff[offset + 1] = down;
@@ -1517,19 +1689,18 @@ RFB.messages = {
         sock.flush();
     },
 
-    QEMUExtendedKeyEvent: function (sock, keysym, down, keycode) {
+    QEMUExtendedKeyEvent(sock, keysym, down, keycode) {
         function getRFBkeycode(xt_scancode) {
-            var upperByte = (keycode >> 8);
-            var lowerByte = (keycode & 0x00ff);
+            const upperByte = (keycode >> 8);
+            const lowerByte = (keycode & 0x00ff);
             if (upperByte === 0xe0 && lowerByte < 0x7f) {
-                lowerByte = lowerByte | 0x80;
-                return lowerByte;
+                return lowerByte | 0x80;
             }
             return xt_scancode;
         }
 
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
 
         buff[offset] = 255; // msg-type
         buff[offset + 1] = 0; // sub msg-type
@@ -1542,7 +1713,7 @@ RFB.messages = {
         buff[offset + 6] = (keysym >> 8);
         buff[offset + 7] = keysym;
 
-        var RFBkeycode = getRFBkeycode(keycode);
+        const RFBkeycode = getRFBkeycode(keycode);
 
         buff[offset + 8] = (RFBkeycode >> 24);
         buff[offset + 9] = (RFBkeycode >> 16);
@@ -1553,9 +1724,9 @@ RFB.messages = {
         sock.flush();
     },
 
-    pointerEvent: function (sock, x, y, mask) {
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+    pointerEvent(sock, x, y, mask) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
 
         buff[offset] = 5; // msg-type
 
@@ -1572,9 +1743,9 @@ RFB.messages = {
     },
 
     // TODO(directxman12): make this unicode compatible?
-    clientCutText: function (sock, text) {
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+    clientCutText(sock, text) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
 
         buff[offset] = 6; // msg-type
 
@@ -1582,24 +1753,43 @@ RFB.messages = {
         buff[offset + 2] = 0; // padding
         buff[offset + 3] = 0; // padding
 
-        var n = text.length;
+        let length = text.length;
 
-        buff[offset + 4] = n >> 24;
-        buff[offset + 5] = n >> 16;
-        buff[offset + 6] = n >> 8;
-        buff[offset + 7] = n;
+        buff[offset + 4] = length >> 24;
+        buff[offset + 5] = length >> 16;
+        buff[offset + 6] = length >> 8;
+        buff[offset + 7] = length;
 
-        for (var i = 0; i < n; i++) {
-            buff[offset + 8 + i] =  text.charCodeAt(i);
-        }
+        sock._sQlen += 8;
 
-        sock._sQlen += 8 + n;
-        sock.flush();
+        // We have to keep track of from where in the text we begin creating the
+        // buffer for the flush in the next iteration.
+        let textOffset = 0;
+
+        let remaining = length;
+        while (remaining > 0) {
+
+            let flushSize = Math.min(remaining, (sock._sQbufferSize - sock._sQlen));
+            if (flushSize <= 0) {
+                this._fail("Clipboard contents could not be sent");
+                break;
+            }
+
+            for (let i = 0; i < flushSize; i++) {
+                buff[sock._sQlen + i] =  text.charCodeAt(textOffset + i);
+            }
+
+            sock._sQlen += flushSize;
+            sock.flush();
+
+            remaining -= flushSize;
+            textOffset += flushSize;
+        }
     },
 
-    setDesktopSize: function (sock, width, height, id, flags) {
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+    setDesktopSize(sock, width, height, id, flags) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
 
         buff[offset] = 251;              // msg-type
         buff[offset + 1] = 0;            // padding
@@ -1633,9 +1823,9 @@ RFB.messages = {
         sock.flush();
     },
 
-    clientFence: function (sock, flags, payload) {
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+    clientFence(sock, flags, payload) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
 
         buff[offset] = 248; // msg-type
 
@@ -1648,11 +1838,11 @@ RFB.messages = {
         buff[offset + 6] = flags >> 8;
         buff[offset + 7] = flags;
 
-        var n = payload.length;
+        const n = payload.length;
 
         buff[offset + 8] = n; // length
 
-        for (var i = 0; i < n; i++) {
+        for (let i = 0; i < n; i++) {
             buff[offset + 9 + i] = payload.charCodeAt(i);
         }
 
@@ -1660,9 +1850,9 @@ RFB.messages = {
         sock.flush();
     },
 
-    enableContinuousUpdates: function (sock, enable, x, y, width, height) {
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+    enableContinuousUpdates(sock, enable, x, y, width, height) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
 
         buff[offset] = 150;             // msg-type
         buff[offset + 1] = enable;      // enable-flag
@@ -1680,9 +1870,21 @@ RFB.messages = {
         sock.flush();
     },
 
-    pixelFormat: function (sock, bpp, depth, true_color) {
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+    pixelFormat(sock, depth, true_color) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
+
+        let bpp;
+
+        if (depth > 16) {
+            bpp = 32;
+        } else if (depth > 8) {
+            bpp = 16;
+        } else {
+            bpp = 8;
+        }
+
+        const bits = Math.floor(depth/3);
 
         buff[offset] = 0;  // msg-type
 
@@ -1690,23 +1892,23 @@ RFB.messages = {
         buff[offset + 2] = 0; // padding
         buff[offset + 3] = 0; // padding
 
-        buff[offset + 4] = bpp * 8;             // bits-per-pixel
-        buff[offset + 5] = depth * 8;           // depth
+        buff[offset + 4] = bpp;                 // bits-per-pixel
+        buff[offset + 5] = depth;               // depth
         buff[offset + 6] = 0;                   // little-endian
         buff[offset + 7] = true_color ? 1 : 0;  // true-color
 
         buff[offset + 8] = 0;    // red-max
-        buff[offset + 9] = 255;  // red-max
+        buff[offset + 9] = (1 << bits) - 1;  // red-max
 
         buff[offset + 10] = 0;   // green-max
-        buff[offset + 11] = 255; // green-max
+        buff[offset + 11] = (1 << bits) - 1; // green-max
 
         buff[offset + 12] = 0;   // blue-max
-        buff[offset + 13] = 255; // blue-max
+        buff[offset + 13] = (1 << bits) - 1; // blue-max
 
-        buff[offset + 14] = 16;  // red-shift
-        buff[offset + 15] = 8;   // green-shift
-        buff[offset + 16] = 0;   // blue-shift
+        buff[offset + 14] = bits * 2; // red-shift
+        buff[offset + 15] = bits * 1; // green-shift
+        buff[offset + 16] = bits * 0; // blue-shift
 
         buff[offset + 17] = 0;   // padding
         buff[offset + 18] = 0;   // padding
@@ -1716,41 +1918,34 @@ RFB.messages = {
         sock.flush();
     },
 
-    clientEncodings: function (sock, encodings, local_cursor) {
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+    clientEncodings(sock, encodings) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
 
         buff[offset] = 2; // msg-type
         buff[offset + 1] = 0; // padding
 
-        // offset + 2 and offset + 3 are encoding count
+        buff[offset + 2] = encodings.length >> 8;
+        buff[offset + 3] = encodings.length;
 
-        var i, j = offset + 4, cnt = 0;
-        for (i = 0; i < encodings.length; i++) {
-            if (encodings[i][0] === "Cursor" && !local_cursor) {
-                Log.Debug("Skipping Cursor pseudo-encoding");
-            } else {
-                var enc = encodings[i][1];
-                buff[j] = enc >> 24;
-                buff[j + 1] = enc >> 16;
-                buff[j + 2] = enc >> 8;
-                buff[j + 3] = enc;
-
-                j += 4;
-                cnt++;
-            }
-        }
+        let j = offset + 4;
+        for (let i = 0; i < encodings.length; i++) {
+            const enc = encodings[i];
+            buff[j] = enc >> 24;
+            buff[j + 1] = enc >> 16;
+            buff[j + 2] = enc >> 8;
+            buff[j + 3] = enc;
 
-        buff[offset + 2] = cnt >> 8;
-        buff[offset + 3] = cnt;
+            j += 4;
+        }
 
         sock._sQlen += j - offset;
         sock.flush();
     },
 
-    fbUpdateRequest: function (sock, incremental, x, y, w, h) {
-        var buff = sock._sQ;
-        var offset = sock._sQlen;
+    fbUpdateRequest(sock, incremental, x, y, w, h) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
 
         if (typeof(x) === "undefined") { x = 0; }
         if (typeof(y) === "undefined") { y = 0; }
@@ -1772,36 +1967,57 @@ RFB.messages = {
 
         sock._sQlen += 10;
         sock.flush();
-    }
-};
+    },
+
+    xvpOp(sock, ver, op) {
+        const buff = sock._sQ;
+        const offset = sock._sQlen;
+
+        buff[offset] = 250; // msg-type
+        buff[offset + 1] = 0; // padding
+
+        buff[offset + 2] = ver;
+        buff[offset + 3] = op;
 
-RFB.genDES = function (password, challenge) {
-    var passwd = [];
-    for (var i = 0; i < password.length; i++) {
-        passwd.push(password.charCodeAt(i));
+        sock._sQlen += 4;
+        sock.flush();
     }
-    return (new DES(passwd)).encrypt(challenge);
 };
 
+
 RFB.encodingHandlers = {
-    RAW: function () {
+    RAW() {
         if (this._FBU.lines === 0) {
             this._FBU.lines = this._FBU.height;
         }
 
-        this._FBU.bytes = this._FBU.width * 4;  // at least a line
+        const pixelSize = this._fb_depth == 8 ? 1 : 4;
+        this._FBU.bytes = this._FBU.width * pixelSize;  // at least a line
         if (this._sock.rQwait("RAW", this._FBU.bytes)) { return false; }
-        var cur_y = this._FBU.y + (this._FBU.height - this._FBU.lines);
-        var curr_height = Math.min(this._FBU.lines,
-                                   Math.floor(this._sock.rQlen() / (this._FBU.width * 4)));
+        const cur_y = this._FBU.y + (this._FBU.height - this._FBU.lines);
+        const curr_height = Math.min(this._FBU.lines,
+                                   Math.floor(this._sock.rQlen() / (this._FBU.width * pixelSize)));
+        let data = this._sock.get_rQ();
+        let index = this._sock.get_rQi();
+        if (this._fb_depth == 8) {
+            const pixels = this._FBU.width * curr_height
+            const newdata = new Uint8Array(pixels * 4);
+            for (let i = 0; i < pixels; i++) {
+                newdata[i * 4 + 0] = ((data[index + i] >> 0) & 0x3) * 255 / 3;
+                newdata[i * 4 + 1] = ((data[index + i] >> 2) & 0x3) * 255 / 3;
+                newdata[i * 4 + 2] = ((data[index + i] >> 4) & 0x3) * 255 / 3;
+                newdata[i * 4 + 4] = 0;
+            }
+            data = newdata;
+            index = 0;
+        }
         this._display.blitImage(this._FBU.x, cur_y, this._FBU.width,
-                                curr_height, this._sock.get_rQ(),
-                                this._sock.get_rQi());
-        this._sock.rQskipBytes(this._FBU.width * curr_height * 4);
+                                curr_height, data, index);
+        this._sock.rQskipBytes(this._FBU.width * curr_height * pixelSize);
         this._FBU.lines -= curr_height;
 
         if (this._FBU.lines > 0) {
-            this._FBU.bytes = this._FBU.width * 4;  // At least another line
+            this._FBU.bytes = this._FBU.width * pixelSize;  // At least another line
         } else {
             this._FBU.rects--;
             this._FBU.bytes = 0;
@@ -1810,7 +2026,7 @@ RFB.encodingHandlers = {
         return true;
     },
 
-    COPYRECT: function () {
+    COPYRECT() {
         this._FBU.bytes = 4;
         if (this._sock.rQwait("COPYRECT", 4)) { return false; }
         this._display.copyImage(this._sock.rQshift16(), this._sock.rQshift16(),
@@ -1822,8 +2038,8 @@ RFB.encodingHandlers = {
         return true;
     },
 
-    RRE: function () {
-        var color;
+    RRE() {
+        let color;
         if (this._FBU.subrects === 0) {
             this._FBU.bytes = 4 + 4;
             if (this._sock.rQwait("RRE", 4 + 4)) { return false; }
@@ -1834,16 +2050,16 @@ RFB.encodingHandlers = {
 
         while (this._FBU.subrects > 0 && this._sock.rQlen() >= (4 + 8)) {
             color = this._sock.rQshiftBytes(4);
-            var x = this._sock.rQshift16();
-            var y = this._sock.rQshift16();
-            var width = this._sock.rQshift16();
-            var height = this._sock.rQshift16();
+            const x = this._sock.rQshift16();
+            const y = this._sock.rQshift16();
+            const width = this._sock.rQshift16();
+            const height = this._sock.rQshift16();
             this._display.fillRect(this._FBU.x + x, this._FBU.y + y, width, height, color);
             this._FBU.subrects--;
         }
 
         if (this._FBU.subrects > 0) {
-            var chunk = Math.min(this._rre_chunk_sz, this._FBU.subrects);
+            const chunk = Math.min(this._rre_chunk_sz, this._FBU.subrects);
             this._FBU.bytes = (4 + 8) * chunk;
         } else {
             this._FBU.rects--;
@@ -1853,9 +2069,9 @@ RFB.encodingHandlers = {
         return true;
     },
 
-    HEXTILE: function () {
-        var rQ = this._sock.get_rQ();
-        var rQi = this._sock.get_rQi();
+    HEXTILE() {
+        const rQ = this._sock.get_rQ();
+        let rQi = this._sock.get_rQi();
 
         if (this._FBU.tiles === 0) {
             this._FBU.tiles_x = Math.ceil(this._FBU.width / 16);
@@ -1867,21 +2083,21 @@ RFB.encodingHandlers = {
         while (this._FBU.tiles > 0) {
             this._FBU.bytes = 1;
             if (this._sock.rQwait("HEXTILE subencoding", this._FBU.bytes)) { return false; }
-            var subencoding = rQ[rQi];  // Peek
+            const subencoding = rQ[rQi];  // Peek
             if (subencoding > 30) {  // Raw
-                this._fail("Unexpected server message",
-                           "Illegal hextile subencoding: " + subencoding);
+                this._fail("Illegal hextile subencoding (subencoding: " +
+                           subencoding + ")");
                 return false;
             }
 
-            var subrects = 0;
-            var curr_tile = this._FBU.total_tiles - this._FBU.tiles;
-            var tile_x = curr_tile % this._FBU.tiles_x;
-            var tile_y = Math.floor(curr_tile / this._FBU.tiles_x);
-            var x = this._FBU.x + tile_x * 16;
-            var y = this._FBU.y + tile_y * 16;
-            var w = Math.min(16, (this._FBU.x + this._FBU.width) - x);
-            var h = Math.min(16, (this._FBU.y + this._FBU.height) - y);
+            let subrects = 0;
+            const curr_tile = this._FBU.total_tiles - this._FBU.tiles;
+            const tile_x = curr_tile % this._FBU.tiles_x;
+            const tile_y = Math.floor(curr_tile / this._FBU.tiles_x);
+            const x = this._FBU.x + tile_x * 16;
+            const y = this._FBU.y + tile_y * 16;
+            const w = Math.min(16, (this._FBU.x + this._FBU.width) - x);
+            const h = Math.min(16, (this._FBU.y + this._FBU.height) - y);
 
             // Figure out how much we are expecting
             if (subencoding & 0x01) {  // Raw
@@ -1935,23 +2151,23 @@ RFB.encodingHandlers = {
                     subrects = rQ[rQi];
                     rQi++;
 
-                    for (var s = 0; s < subrects; s++) {
-                        var color;
+                    for (let s = 0; s < subrects; s++) {
+                        let color;
                         if (this._FBU.subencoding & 0x10) {  // SubrectsColoured
                             color = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]];
                             rQi += 4;
                         } else {
                             color = this._FBU.foreground;
                         }
-                        var xy = rQ[rQi];
+                        const xy = rQ[rQi];
                         rQi++;
-                        var sx = (xy >> 4);
-                        var sy = (xy & 0x0f);
+                        const sx = (xy >> 4);
+                        const sy = (xy & 0x0f);
 
-                        var wh = rQ[rQi];
+                        const wh = rQ[rQi];
                         rQi++;
-                        var sw = (wh >> 4) + 1;
-                        var sh = (wh & 0x0f) + 1;
+                        const sw = (wh >> 4) + 1;
+                        const sh = (wh & 0x0f) + 1;
 
                         this._display.subTile(sx, sy, sw, sh, color);
                     }
@@ -1971,65 +2187,42 @@ RFB.encodingHandlers = {
         return true;
     },
 
-    getTightCLength: function (arr) {
-        var header = 1, data = 0;
-        data += arr[0] & 0x7f;
-        if (arr[0] & 0x80) {
-            header++;
-            data += (arr[1] & 0x7f) << 7;
-            if (arr[1] & 0x80) {
-                header++;
-                data += arr[2] << 14;
-            }
-        }
-        return [header, data];
-    },
-
-    display_tight: function (isTightPNG) {
+    TIGHT(isTightPNG) {
         this._FBU.bytes = 1;  // compression-control byte
         if (this._sock.rQwait("TIGHT compression-control", this._FBU.bytes)) { return false; }
 
-        var checksum = function (data) {
-            var sum = 0;
-            for (var i = 0; i < data.length; i++) {
-                sum += data[i];
-                if (sum > 65536) sum -= 65536;
-            }
-            return sum;
-        };
-
-        var resetStreams = 0;
-        var streamId = -1;
-        var decompress = function (data, expected) {
-            for (var i = 0; i < 4; i++) {
+        let resetStreams = 0;
+        let streamId = -1;
+        const decompress = (data, expected) => {
+            for (let i = 0; i < 4; i++) {
                 if ((resetStreams >> i) & 1) {
                     this._FBU.zlibs[i].reset();
                     Log.Info("Reset zlib stream " + i);
                 }
             }
 
-            //var uncompressed = this._FBU.zlibs[streamId].uncompress(data, 0);
-            var uncompressed = this._FBU.zlibs[streamId].inflate(data, true, expected);
+            //const uncompressed = this._FBU.zlibs[streamId].uncompress(data, 0);
+            const uncompressed = this._FBU.zlibs[streamId].inflate(data, true, expected);
             /*if (uncompressed.status !== 0) {
                 Log.Error("Invalid data in zlib stream");
             }*/
 
             //return uncompressed.data;
             return uncompressed;
-        }.bind(this);
+        };
 
-        var indexedToRGBX2Color = function (data, palette, width, height) {
+        const indexedToRGBX2Color = (data, palette, width, height) => {
             // Convert indexed (palette based) image data to RGB
             // TODO: reduce number of calculations inside loop
-            var dest = this._destBuff;
-            var w = Math.floor((width + 7) / 8);
-            var w1 = Math.floor(width / 8);
-
-            /*for (var y = 0; y < height; y++) {
-                var b, x, dp, sp;
-                var yoffset = y * width;
-                var ybitoffset = y * w;
-                var xoffset, targetbyte;
+            const dest = this._destBuff;
+            const w = Math.floor((width + 7) / 8);
+            const w1 = Math.floor(width / 8);
+
+            /*for (let y = 0; y < height; y++) {
+                let b, x, dp, sp;
+                const yoffset = y * width;
+                const ybitoffset = y * w;
+                let xoffset, targetbyte;
                 for (x = 0; x < w1; x++) {
                     xoffset = yoffset + x * 8;
                     targetbyte = data[ybitoffset + x];
@@ -2053,10 +2246,10 @@ RFB.encodingHandlers = {
                 }
             }*/
 
-            for (var y = 0; y < height; y++) {
-                var b, x, dp, sp;
+            for (let y = 0; y < height; y++) {
+                let dp, sp, x;
                 for (x = 0; x < w1; x++) {
-                    for (b = 7; b >= 0; b--) {
+                    for (let b = 7; b >= 0; b--) {
                         dp = (y * width + x * 8 + 7 - b) * 4;
                         sp = (data[y * w + x] >> b & 1) * 3;
                         dest[dp] = palette[sp];
@@ -2066,7 +2259,7 @@ RFB.encodingHandlers = {
                     }
                 }
 
-                for (b = 7; b >= 8 - width % 8; b--) {
+                for (let b = 7; b >= 8 - width % 8; b--) {
                     dp = (y * width + x * 8 + 7 - b) * 4;
                     sp = (data[y * w + x] >> b & 1) * 3;
                     dest[dp] = palette[sp];
@@ -2077,14 +2270,14 @@ RFB.encodingHandlers = {
             }
 
             return dest;
-        }.bind(this);
+        };
 
-        var indexedToRGBX = function (data, palette, width, height) {
+        const indexedToRGBX = (data, palette, width, height) => {
             // Convert indexed (palette based) image data to RGB
-            var dest = this._destBuff;
-            var total = width * height * 4;
-            for (var i = 0, j = 0; i < total; i += 4, j++) {
-                var sp = data[j] * 3;
+            const dest = this._destBuff;
+            const total = width * height * 4;
+            for (let i = 0, j = 0; i < total; i += 4, j++) {
+                const sp = data[j] * 3;
                 dest[i] = palette[sp];
                 dest[i + 1] = palette[sp + 1];
                 dest[i + 2] = palette[sp + 2];
@@ -2092,22 +2285,22 @@ RFB.encodingHandlers = {
             }
 
             return dest;
-        }.bind(this);
+        };
 
-        var rQi = this._sock.get_rQi();
-        var rQ = this._sock.rQwhole();
-        var cmode, data;
-        var cl_header, cl_data;
+        const rQi = this._sock.get_rQi();
+        const rQ = this._sock.rQwhole();
+        let cmode, data;
+        let cl_header, cl_data;
 
-        var handlePalette = function () {
-            var numColors = rQ[rQi + 2] + 1;
-            var paletteSize = numColors * 3;
+        const handlePalette = () => {
+            const numColors = rQ[rQi + 2] + 1;
+            const paletteSize = numColors * 3;
             this._FBU.bytes += paletteSize;
             if (this._sock.rQwait("TIGHT palette " + cmode, this._FBU.bytes)) { return false; }
 
-            var bpp = (numColors <= 2) ? 1 : 8;
-            var rowSize = Math.floor((this._FBU.width * bpp + 7) / 8);
-            var raw = false;
+            const bpp = (numColors <= 2) ? 1 : 8;
+            const rowSize = Math.floor((this._FBU.width * bpp + 7) / 8);
+            let raw = false;
             if (rowSize * this._FBU.height < 12) {
                 raw = true;
                 cl_header = 0;
@@ -2115,7 +2308,7 @@ RFB.encodingHandlers = {
                 //clength = [0, rowSize * this._FBU.height];
             } else {
                 // begin inline getTightCLength (returning two-item arrays is bad for performance with GC)
-                var cl_offset = rQi + 3 + paletteSize;
+                const cl_offset = rQi + 3 + paletteSize;
                 cl_header = 1;
                 cl_data = 0;
                 cl_data += rQ[cl_offset] & 0x7f;
@@ -2135,7 +2328,7 @@ RFB.encodingHandlers = {
 
             // Shift ctl, filter id, num colors, palette entries, and clength off
             this._sock.rQskipBytes(3);
-            //var palette = this._sock.rQshiftBytes(paletteSize);
+            //const palette = this._sock.rQshiftBytes(paletteSize);
             this._sock.rQshiftTo(this._paletteBuff, paletteSize);
             this._sock.rQskipBytes(cl_header);
 
@@ -2146,29 +2339,29 @@ RFB.encodingHandlers = {
             }
 
             // Convert indexed (palette based) image data to RGB
-            var rgbx;
+            let rgbx;
             if (numColors == 2) {
                 rgbx = indexedToRGBX2Color(data, this._paletteBuff, this._FBU.width, this._FBU.height);
-                this._display.blitRgbxImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, rgbx, 0, false);
             } else {
                 rgbx = indexedToRGBX(data, this._paletteBuff, this._FBU.width, this._FBU.height);
-                this._display.blitRgbxImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, rgbx, 0, false);
             }
 
+            this._display.blitRgbxImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, rgbx, 0, false);
+
 
             return true;
-        }.bind(this);
+        };
 
-        var handleCopy = function () {
-            var raw = false;
-            var uncompressedSize = this._FBU.width * this._FBU.height * 3;
+        const handleCopy = () => {
+            let raw = false;
+            const uncompressedSize = this._FBU.width * this._FBU.height * 3;
             if (uncompressedSize < 12) {
                 raw = true;
                 cl_header = 0;
                 cl_data = uncompressedSize;
             } else {
                 // begin inline getTightCLength (returning two-item arrays is for peformance with GC)
-                var cl_offset = rQi + 1;
+                const cl_offset = rQi + 1;
                 cl_header = 1;
                 cl_data = 0;
                 cl_data += rQ[cl_offset] & 0x7f;
@@ -2197,9 +2390,9 @@ RFB.encodingHandlers = {
             this._display.blitRgbImage(this._FBU.x, this._FBU.y, this._FBU.width, this._FBU.height, data, 0, false);
 
             return true;
-        }.bind(this);
+        };
 
-        var ctl = this._sock.rQpeek8();
+        let ctl = this._sock.rQpeek8();
 
         // Keep tight reset bits
         resetStreams = ctl & 0xF;
@@ -2213,13 +2406,14 @@ RFB.encodingHandlers = {
         else if (ctl === 0x0A)  cmode = "png";
         else if (ctl & 0x04)    cmode = "filter";
         else if (ctl < 0x04)    cmode = "copy";
-        else return this._fail("Unexpected server message",
-                               "Illegal tight compression received, " +
-                               "ctl: " + ctl);
+        else return this._fail("Illegal tight compression received (ctl: " +
+                               ctl + ")");
 
-        if (isTightPNG && (cmode === "filter" || cmode === "copy")) {
-            return this._fail("Unexpected server message",
-                              "filter/copy received in tightPNG mode");
+        if (isTightPNG && (ctl < 0x08)) {
+            return this._fail("BasicCompression received in TightPNG rect");
+        }
+        if (!isTightPNG && (ctl === 0x0A)) {
+            return this._fail("PNG received in standard Tight rect");
         }
 
         switch (cmode) {
@@ -2243,6 +2437,7 @@ RFB.encodingHandlers = {
         if (this._sock.rQwait("TIGHT " + cmode, this._FBU.bytes)) { return false; }
 
         // Determine FBU.bytes
+        let cl_offset, filterId;
         switch (cmode) {
             case "fill":
                 // skip ctl byte
@@ -2252,7 +2447,7 @@ RFB.encodingHandlers = {
             case "png":
             case "jpeg":
                 // begin inline getTightCLength (returning two-item arrays is for peformance with GC)
-                var cl_offset = rQi + 1;
+                cl_offset = rQi + 1;
                 cl_header = 1;
                 cl_data = 0;
                 cl_data += rQ[cl_offset] & 0x7f;
@@ -2274,15 +2469,14 @@ RFB.encodingHandlers = {
                 this._display.imageRect(this._FBU.x, this._FBU.y, "image/" + cmode, data);
                 break;
             case "filter":
-                var filterId = rQ[rQi + 1];
+                filterId = rQ[rQi + 1];
                 if (filterId === 1) {
                     if (!handlePalette()) { return false; }
                 } else {
                     // Filter 0, Copy could be valid here, but servers don't send it as an explicit filter
                     // Filter 2, Gradient is valid but not use if jpeg is enabled
-                    this._fail("Unexpected server message",
-                               "Unsupported tight subencoding received, " +
-                               "filter: " + filterId);
+                    this._fail("Unsupported tight subencoding received " +
+                               "(filter: " + filterId + ")");
                 }
                 break;
             case "copy":
@@ -2297,20 +2491,27 @@ RFB.encodingHandlers = {
         return true;
     },
 
-    TIGHT: function () { return this._encHandlers.display_tight(false); },
-    TIGHT_PNG: function () { return this._encHandlers.display_tight(true); },
-
-    last_rect: function () {
+    last_rect() {
         this._FBU.rects = 0;
         return true;
     },
 
-    ExtendedDesktopSize: function () {
+    ExtendedDesktopSize() {
         this._FBU.bytes = 1;
         if (this._sock.rQwait("ExtendedDesktopSize", this._FBU.bytes)) { return false; }
 
+        const firstUpdate = !this._supportsSetDesktopSize;
         this._supportsSetDesktopSize = true;
-        var number_of_screens = this._sock.rQpeek8();
+
+        // Normally we only apply the current resize mode after a
+        // window resize event. However there is no such trigger on the
+        // initial connect. And we don't know if the server supports
+        // resizing until we've gotten here.
+        if (firstUpdate) {
+            this._requestRemoteResize();
+        }
+
+        const number_of_screens = this._sock.rQpeek8();
 
         this._FBU.bytes = 4 + (number_of_screens * 16);
         if (this._sock.rQwait("ExtendedDesktopSize", this._FBU.bytes)) { return false; }
@@ -2318,7 +2519,7 @@ RFB.encodingHandlers = {
         this._sock.rQskipBytes(1);  // number-of-screens
         this._sock.rQskipBytes(3);  // padding
 
-        for (var i = 0; i < number_of_screens; i += 1) {
+        for (let i = 0; i < number_of_screens; i += 1) {
             // Save the id and flags of the first screen
             if (i === 0) {
                 this._screen_id = this._sock.rQshiftBytes(4);    // id
@@ -2342,7 +2543,7 @@ RFB.encodingHandlers = {
 
         // We need to handle errors when we requested the resize.
         if (this._FBU.x === 1 && this._FBU.y !== 0) {
-            var msg = "";
+            let msg = "";
             // The y-position indicates the status code from the server
             switch (this._FBU.y) {
             case 1:
@@ -2358,8 +2559,8 @@ RFB.encodingHandlers = {
                 msg = "Unknown reason";
                 break;
             }
-            this._notification("Server did not accept the resize request: "
-                               + msg, 'normal');
+            Log.Warn("Server did not accept the resize request: "
+                     + msg);
         } else {
             this._resize(this._FBU.width, this._FBU.height);
         }
@@ -2369,29 +2570,45 @@ RFB.encodingHandlers = {
         return true;
     },
 
-    DesktopSize: function () {
+    DesktopSize() {
         this._resize(this._FBU.width, this._FBU.height);
         this._FBU.bytes = 0;
         this._FBU.rects -= 1;
         return true;
     },
 
-    Cursor: function () {
+    Cursor() {
         Log.Debug(">> set_cursor");
-        var x = this._FBU.x;  // hotspot-x
-        var y = this._FBU.y;  // hotspot-y
-        var w = this._FBU.width;
-        var h = this._FBU.height;
+        const hotx = this._FBU.x;  // hotspot-x
+        const hoty = this._FBU.y;  // hotspot-y
+        const w = this._FBU.width;
+        const h = this._FBU.height;
 
-        var pixelslength = w * h * 4;
-        var masklength = Math.floor((w + 7) / 8) * h;
+        const pixelslength = w * h * 4;
+        const masklength = Math.ceil(w / 8) * h;
 
         this._FBU.bytes = pixelslength + masklength;
         if (this._sock.rQwait("cursor encoding", this._FBU.bytes)) { return false; }
 
-        this._display.changeCursor(this._sock.rQshiftBytes(pixelslength),
-                                   this._sock.rQshiftBytes(masklength),
-                                   x, y, w, h);
+        // Decode from BGRX pixels + bit mask to RGBA
+        const pixels = this._sock.rQshiftBytes(pixelslength);
+        const mask = this._sock.rQshiftBytes(masklength);
+        let rgba = new Uint8Array(w * h * 4);
+
+        let pix_idx = 0;
+        for (let y = 0; y < h; y++) {
+            for (let x = 0; x < w; x++) {
+                let mask_idx = y * Math.ceil(w / 8) + Math.floor(x / 8);
+                let alpha = (mask[mask_idx] << (x % 8)) & 0x80 ? 255 : 0;
+                rgba[pix_idx    ] = pixels[pix_idx + 2];
+                rgba[pix_idx + 1] = pixels[pix_idx + 1];
+                rgba[pix_idx + 2] = pixels[pix_idx];
+                rgba[pix_idx + 3] = alpha;
+                pix_idx += 4;
+            }
+        }
+
+        this._updateCursor(rgba, hotx, hoty, w, h);
 
         this._FBU.bytes = 0;
         this._FBU.rects--;
@@ -2400,24 +2617,35 @@ RFB.encodingHandlers = {
         return true;
     },
 
-    QEMUExtendedKeyEvent: function () {
+    QEMUExtendedKeyEvent() {
         this._FBU.rects--;
 
         // Old Safari doesn't support creating keyboard events
         try {
-            var keyboardEvent = document.createEvent("keyboardEvent");
+            const keyboardEvent = document.createEvent("keyboardEvent");
             if (keyboardEvent.code !== undefined) {
                 this._qemuExtKeyEventSupported = true;
             }
         } catch (err) {
+            // Do nothing
         }
-    },
+    }
+}
 
-    JPEG_quality_lo: function () {
-        Log.Error("Server sent jpeg_quality pseudo-encoding");
+RFB.cursors = {
+    none: {
+        rgbaPixels: new Uint8Array(),
+        w: 0, h: 0,
+        hotx: 0, hoty: 0,
     },
 
-    compress_lo: function () {
-        Log.Error("Server sent compress level pseudo-encoding");
+    dot: {
+        rgbaPixels: new Uint8Array([
+            255, 255, 255, 255,   0,   0,   0, 255, 255, 255, 255, 255,
+              0,   0,   0, 255,   0,   0,   0,   0,   0,   0,  0,  255,
+            255, 255, 255, 255,   0,   0,   0, 255, 255, 255, 255, 255,
+        ]),
+        w: 3, h: 3,
+        hotx: 1, hoty: 1,
     }
 };