]> git.proxmox.com Git - mirror_novnc.git/blobdiff - core/rfb.js
Merge branch 'resize' of https://github.com/CendioOssman/noVNC
[mirror_novnc.git] / core / rfb.js
index 28e1a4a4c919f9a0075920f83d7644e51b67913a..63c6c6baf8fc60a2ccdb21fc0f1cd04585185538 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) 2017 Samuel Mannehed for Cendio AB
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -11,9 +11,9 @@
  */
 
 import * as Log from './util/logging.js';
-import _ from './util/localization.js';
 import { decodeUTF8 } from './util/strings.js';
 import { browserSupportsCursorURIs, isTouchDevice } from './util/browsers.js';
+import EventTargetMixin from './util/eventtarget.js';
 import Display from "./display.js";
 import Keyboard from "./input/keyboard.js";
 import Mouse from "./input/mouse.js";
@@ -24,6 +24,7 @@ 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 */
@@ -43,7 +44,7 @@ export default function RFB(target, url, options) {
     this._url = url;
 
     // Connection details
-    options = options || {}
+    options = options || {};
     this._rfb_credentials = options.credentials || {};
     this._shared = 'shared' in options ? !!options.shared : true;
     this._repeaterID = options.repeaterID || '';
@@ -52,7 +53,7 @@ export default function RFB(target, url, options) {
     this._rfb_connection_state = '';
     this._rfb_init_state = '';
     this._rfb_auth_scheme = '';
-    this._rfb_disconnect_reason = "";
+    this._rfb_clean_disconnect = true;
 
     // Server capabilities
     this._rfb_version = 0;
@@ -65,7 +66,7 @@ export default function RFB(target, url, options) {
 
     this._fb_name = "";
 
-    this._capabilities = { power: false, resize: false };
+    this._capabilities = { power: false };
 
     this._supportsFence = false;
 
@@ -87,6 +88,7 @@ export default function RFB(target, url, options) {
 
     // Timers
     this._disconnTimer = null;      // disconnection timer
+    this._resizeTimeout = null;     // resize rate limiting
 
     // Decoder states and stats
     this._encHandlers = {};
@@ -136,13 +138,32 @@ export default function RFB(target, url, options) {
     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");
 
-    // Target canvas must be able to have focus
-    if (!this._target.hasAttribute('tabindex')) {
-        this._target.tabIndex = -1;
-    }
+    // 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);
 
     // populate encHandlers with bound versions
     this._encHandlers[encodings.encodingRaw] = RFB.encodingHandlers.RAW.bind(this);
@@ -160,7 +181,7 @@ export default function RFB(target, url, options) {
     // NB: nothing that needs explicit teardown should be done
     // before this point, since this can throw an exception
     try {
-        this._display = new Display(this._target);
+        this._display = new Display(this._canvas);
     } catch (exc) {
         Log.Error("Display exception: " + exc);
         throw exc;
@@ -168,10 +189,10 @@ export default function RFB(target, url, options) {
     this._display.onflush = this._onFlush.bind(this);
     this._display.clear();
 
-    this._keyboard = new Keyboard(this._target);
+    this._keyboard = new Keyboard(this._canvas);
     this._keyboard.onkeyevent = this._handleKeyEvent.bind(this);
 
-    this._mouse = new Mouse(this._target);
+    this._mouse = new Mouse(this._canvas);
     this._mouse.onmousebutton = this._handleMouseButton.bind(this);
     this._mouse.onmousemove = this._handleMouseMove.bind(this);
 
@@ -183,38 +204,40 @@ export default function RFB(target, url, options) {
             this._rfb_init_state = 'ProtocolVersion';
             Log.Debug("Starting VNC handshake");
         } else {
-            this._fail("Unexpected server connection");
+            this._fail("Unexpected server connection while " +
+                       this._rfb_connection_state);
         }
     }.bind(this));
     this._sock.on('close', function (e) {
-        Log.Warn("WebSocket on-close event");
+        Log.Debug("WebSocket on-close event");
         var msg = "";
         if (e.code) {
-            msg = " (code: " + e.code;
+            msg = "(code: " + e.code;
             if (e.reason) {
                 msg += ", reason: " + e.reason;
             }
             msg += ")";
         }
         switch (this._rfb_connection_state) {
-            case 'disconnecting':
-                this._updateConnectionState('disconnected');
-                break;
             case 'connecting':
-                this._fail('Failed to connect to server', msg);
+                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",
-                           "Already disconnected: " + msg);
+                this._fail("Unexpected server disconnect " +
+                           "when already disconnected " + msg);
                 break;
             default:
-                this._fail("Unexpected server disconnect",
-                           "Not in any state yet: " + msg);
+                this._fail("Unexpected server disconnect before connecting " +
+                           msg);
                 break;
         }
         this._sock.off('close');
@@ -234,6 +257,7 @@ RFB.prototype = {
     // ===== PROPERTIES =====
 
     dragViewport: false,
+    focusOnClick: true,
 
     _viewOnly: false,
     get viewOnly() { return this._viewOnly; },
@@ -257,25 +281,36 @@ RFB.prototype = {
     get touchButton() { return this._mouse.touchButton; },
     set touchButton(button) { this._mouse.touchButton = button; },
 
-    get viewportScale() { return this._display.scale; },
-    set viewportScale(scale) { this._display.scale = scale; },
-
-    get clipViewport() { return this._display.clipViewport; },
-    set clipViewport(viewport) { this._display.clipViewport = viewport; },
-
-    get isClipped() { return this._display.isClipped; },
+    _clipViewport: false,
+    get clipViewport() { return this._clipViewport; },
+    set clipViewport(viewport) {
+        this._clipViewport = viewport;
+        this._updateClip();
+    },
 
-    // ===== EVENT HANDLERS =====
+    _scaleViewport: false,
+    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();
+        }
+    },
 
-    onupdatestate: function () {},  // onupdatestate(rfb, state, oldstate): connection state change
-    onnotification: function () {}, // onnotification(rfb, msg, level, options): notification for the UI
-    ondisconnected: function () {}, // ondisconnected(rfb, reason): disconnection finished
-    oncredentialsrequired: function () {}, // oncredentialsrequired(rfb, types): VNC credentials are required
-    onclipboard: function () {},    // onclipboard(rfb, text): RFB clipboard contents received
-    onbell: function () {},         // onbell(rfb): RFB Bell message received
-    onfbresize: function () {},     // onfbresize(rfb, width, height): frame buffer resized
-    ondesktopname: function () {},  // ondesktopname(rfb, name): desktop name received
-    oncapabilities: function () {}, // oncapabilities(rfb, caps): the supported capabilities has changed
+    _resizeSession: false,
+    get resizeSession() { return this._resizeSession; },
+    set resizeSession(resize) {
+        this._resizeSession = resize;
+        if (resize) {
+            this._requestRemoteResize();
+        }
+    },
 
     // ===== PUBLIC METHODS =====
 
@@ -344,38 +379,19 @@ RFB.prototype = {
         }
     },
 
-    clipboardPasteFrom: function (text) {
-        if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; }
-        RFB.messages.clientCutText(this._sock, text);
+    focus: function () {
+        this._canvas.focus();
     },
 
-    autoscale: function (width, height) {
-        if (this._rfb_connection_state !== 'connected') { return; }
-        this._display.autoscale(width, height);
-    },
-
-    viewportChangeSize: function(width, height) {
-        if (this._rfb_connection_state !== 'connected') { return; }
-        this._display.viewportChangeSize(width, height);
+    blur: function () {
+        this._canvas.blur();
     },
 
-    // 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._viewOnly) {
-            return;
-        }
-
-        if (!this._supportsSetDesktopSize) {
-            return;
-        }
-
-        RFB.messages.setDesktopSize(this._sock, width, height,
-                                    this._screen_id, this._screen_flags);
+    clipboardPasteFrom: function (text) {
+        if (this._rfb_connection_state !== 'connected' || this._viewOnly) { return; }
+        RFB.messages.clientCutText(this._sock, text);
     },
 
-
     // ===== PRIVATE METHODS =====
 
     _connect: function () {
@@ -388,26 +404,37 @@ RFB.prototype = {
             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);
+
+        // 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._target.addEventListener("mousedown", this._focusCanvas);
-        this._target.addEventListener("touchstart", this._focusCanvas);
+        this._canvas.addEventListener("mousedown", this._eventHandlers.focusCanvas);
+        this._canvas.addEventListener("touchstart", this._eventHandlers.focusCanvas);
 
         Log.Debug("<< RFB.connect");
     },
 
     _disconnect: function () {
         Log.Debug(">> RFB.disconnect");
-        this._target.removeEventListener("mousedown", this._focusCanvas);
-        this._target.removeEventListener("touchstart", this._focusCanvas);
-        this._cleanup();
+        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();
+        this._target.removeChild(this._screen);
+        clearTimeout(this._resizeTimeout);
         Log.Debug("<< RFB.disconnect");
     },
 
@@ -429,22 +456,107 @@ RFB.prototype = {
         });
     },
 
-    _cleanup: function () {
-        if (!this._viewOnly) { this._keyboard.ungrab(); }
-        if (!this._viewOnly) { this._mouse.ungrab(); }
-        this._display.defaultCursor();
-        if (Log.get_logging() !== 'debug') {
-            // Show noVNC logo when disconnected, unless in
-            // debug mode
-            this._display.clear();
+    _focusCanvas: function(event) {
+        // Respect earlier handlers' request to not do side-effects
+        if (event.defaultPrevented) {
+            return;
+        }
+
+        if (!this.focusOnClick) {
+            return;
+        }
+
+        this.focus();
+    },
+
+    _windowResize: function (event) {
+        // If the window resized then our screen element might have
+        // as well. Update the viewport dimensions.
+        window.requestAnimationFrame(function () {
+            this._updateClip();
+            this._updateScale();
+        }.bind(this));
+
+        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);
         }
     },
 
-    // Event handler for canvas so this points to the canvas element
-    _focusCanvas: function(event) {
-        // Respect earlier handlers' request to not do side-effects
-        if (!event.defaultPrevented)
-            this.focus();
+    // Update state of clipping in Display object, and make sure the
+    // configured viewport matches the current screen size
+    _updateClip: function () {
+        var cur_clip = this._display.clipViewport;
+        var new_clip = this._clipViewport;
+
+        if (this._scaleViewport) {
+            // Disable viewport clipping if we are scaling
+            new_clip = false;
+        }
+
+        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.
+            let size = this._screenSize();
+            this._display.viewportChangeSize(size.w, size.h);
+            this._fixScrollbars();
+        }
+    },
+
+    _updateScale: function () {
+        if (!this._scaleViewport) {
+            this._display.scale = 1.0;
+        } else {
+            let 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: function () {
+        clearTimeout(this._resizeTimeout);
+        this._resizeTimeout = null;
+
+        if (!this._resizeSession || this._viewOnly ||
+            !this._supportsSetDesktopSize) {
+            return;
+        }
+
+        let size = this._screenSize();
+        RFB.messages.setDesktopSize(this._sock, size.w, 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: function () {
+        return { w: this._screen.offsetWidth,
+                 h: this._screen.offsetHeight };
+    },
+
+    _fixScrollbars: function () {
+        // 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.
+        var 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;
     },
 
     /*
@@ -510,7 +622,6 @@ 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);
@@ -525,57 +636,54 @@ 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':
+                var event = new CustomEvent("connect", { detail: {} });
+                this.dispatchEvent(event);
+                break;
+
             case 'disconnecting':
                 this._disconnect();
 
                 this._disconnTimer = setTimeout(function () {
-                    this._rfb_disconnect_reason = _("Disconnect timeout");
+                    Log.Error("Disconnection timed out.");
                     this._updateConnectionState('disconnected');
                 }.bind(this), DISCONNECT_TIMEOUT * 1000);
                 break;
+
+            case 'disconnected':
+                event = new CustomEvent(
+                    "disconnect", { detail:
+                                    { clean: this._rfb_clean_disconnect } });
+                this.dispatchEvent(event);
+                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: function (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');
@@ -584,36 +692,11 @@ RFB.prototype = {
         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: function (cap, val) {
         this._capabilities[cap] = val;
-        this.oncapabilities(this, this._capabilities);
+        var event = new CustomEvent("capabilities",
+                                    { detail: { capabilities: this._capabilities } });
+        this.dispatchEvent(event);
     },
 
     _handle_message: function () {
@@ -660,18 +743,26 @@ RFB.prototype = {
             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._viewOnly) {
-                    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);
             }
         }
 
@@ -712,8 +803,7 @@ RFB.prototype = {
 
     _negotiate_protocol_version: function () {
         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);
@@ -738,8 +828,7 @@ 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) {
@@ -781,10 +870,7 @@ RFB.prototype = {
             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);
@@ -801,8 +887,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]);
@@ -818,12 +903,67 @@ RFB.prototype = {
         return this._init_msg(); // jump to authentication
     },
 
+    /*
+     * 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: function (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;
+        }
+        let strlen = this._sock.rQshift32();
+        let reason = "";
+
+        if (strlen > 0) {
+            if (this._sock.rQwait("reason", strlen, 8)) { return false; }
+            reason = this._sock.rQshiftStr(strlen);
+        }
+
+        if (reason !== "") {
+
+            let event = new CustomEvent(
+                "securityfailure",
+                { detail: { status: security_result_status, reason: reason } });
+            this.dispatchEvent(event);
+
+            return this._fail("Security negotiation failed" + context +
+                              " (reason: " + reason + ")");
+        } else {
+
+            let event = new CustomEvent(
+                "securityfailure",
+                { detail: { status: security_result_status } });
+            this.dispatchEvent(event);
+
+            return this._fail("Security negotiation failed" + context);
+        }
+    },
+
     // authentication
     _negotiate_xvp_auth: function () {
         if (!this._rfb_credentials.username ||
             !this._rfb_credentials.password ||
             !this._rfb_credentials.target) {
-            this.oncredentialsrequired(this, ["username", "password", "target"]);
+            var event = new CustomEvent("credentialsrequired",
+                                        { detail: { types: ["username", "password", "target"] } });
+            this.dispatchEvent(event);
             return false;
         }
 
@@ -840,7 +980,9 @@ RFB.prototype = {
         if (this._sock.rQwait("auth challenge", 16)) { return false; }
 
         if (!this._rfb_credentials.password) {
-            this.oncredentialsrequired(this, ["password"]);
+            var event = new CustomEvent("credentialsrequired",
+                                        { detail: { types: ["password"] } });
+            this.dispatchEvent(event);
             return false;
         }
 
@@ -869,15 +1011,13 @@ RFB.prototype = {
         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");
             }
             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");
         }
     },
@@ -931,24 +1071,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 () {
         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) {
@@ -968,33 +1103,30 @@ 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 () {
         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");
+
+        let 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 {
+                let event = new CustomEvent("securityfailure",
+                                            { detail: { status: status } });
+                this.dispatchEvent(event);
+
+                return this._fail("Security handshake failed");
+            }
         }
     },
 
@@ -1077,7 +1209,9 @@ RFB.prototype = {
         }
 
         // we're past the point where we could backtrack, so it's safe to call this
-        this.ondesktopname(this, this._fb_name);
+        var event = new CustomEvent("desktopname",
+                                    { detail: { name: this._fb_name } });
+        this.dispatchEvent(event);
 
         this._resize(width, height);
 
@@ -1171,15 +1305,15 @@ 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 () {
         Log.Debug("SetColorMapEntries");
 
-        return this._fail("Protocol error", "Unexpected SetColorMapEntries message");
+        return this._fail("Unexpected SetColorMapEntries message");
     },
 
     _handle_server_cut_text: function () {
@@ -1194,7 +1328,9 @@ RFB.prototype = {
 
         if (this._viewOnly) { return true; }
 
-        this.onclipboard(this, text);
+        var event = new CustomEvent("clipboard",
+                                    { detail: { text: text } });
+        this.dispatchEvent(event);
 
         return true;
     },
@@ -1226,8 +1362,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
@@ -1250,8 +1385,7 @@ RFB.prototype = {
 
         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;
@@ -1259,8 +1393,7 @@ RFB.prototype = {
                 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;
         }
 
@@ -1290,7 +1423,8 @@ RFB.prototype = {
 
             case 2:  // Bell
                 Log.Debug("Bell");
-                this.onbell(this);
+                var event = new CustomEvent("bell", { detail: {} });
+                this.dispatchEvent(event);
                 return true;
 
             case 3:  // ServerCutText
@@ -1317,7 +1451,7 @@ 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;
         }
@@ -1372,9 +1506,8 @@ RFB.prototype = {
                                               (hdr[10] << 8) + hdr[11], 10);
 
                 if (!this._encHandlers[this._FBU.encoding]) {
-                    this._fail("Unexpected server message",
-                               "Unsupported encoding " +
-                               this._FBU.encoding);
+                    this._fail("Unsupported encoding (encoding: " +
+                               this._FBU.encoding + ")");
                     return false;
                 }
             }
@@ -1442,7 +1575,10 @@ RFB.prototype = {
         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();
@@ -1455,6 +1591,8 @@ RFB.prototype = {
     },
 };
 
+Object.assign(RFB.prototype, EventTargetMixin);
+
 // Class Methods
 RFB.messages = {
     keyEvent: function (sock, keysym, down) {
@@ -1862,8 +2000,8 @@ RFB.encodingHandlers = {
             if (this._sock.rQwait("HEXTILE subencoding", this._FBU.bytes)) { return false; }
             var 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;
             }
 
@@ -2192,9 +2330,8 @@ 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 + ")");
 
         switch (cmode) {
             // fill use depth because TPIXELs drop the padding byte
@@ -2254,9 +2391,8 @@ RFB.encodingHandlers = {
                 } 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":
@@ -2280,8 +2416,16 @@ RFB.encodingHandlers = {
         this._FBU.bytes = 1;
         if (this._sock.rQwait("ExtendedDesktopSize", this._FBU.bytes)) { return false; }
 
+        var firstUpdate = !this._supportsSetDesktopSize;
         this._supportsSetDesktopSize = true;
-        this._setCapability("resize", true);
+
+        // 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();
+        }
 
         var number_of_screens = this._sock.rQpeek8();
 
@@ -2331,8 +2475,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);
         }