@novnc/novnc 1.0.0 → 1.2.0

package/core/input/keyboard.js

@@ -1,7 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2013 Samuel Mannehed for Cendio AB
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  */
 
@@ -15,63 +14,49 @@ import * as browser from "../util/browser.js";
 // Keyboard event handler
 //
 
-export default function Keyboard(target) {
-    this._target = target || null;
-
-    this._keyDownList = {};         // List of depressed keys
-                                    // (even if they are happy)
-    this._pendingKey = null;        // Key waiting for keypress
-
-    // keep these here so we can refer to them later
-    this._eventHandlers = {
-        'keyup': this._handleKeyUp.bind(this),
-        'keydown': this._handleKeyDown.bind(this),
-        'keypress': this._handleKeyPress.bind(this),
-        'blur': this._allKeysUp.bind(this)
-    };
-};
+export default class Keyboard {
+    constructor(target) {
+        this._target = target || null;
+
+        this._keyDownList = {};         // List of depressed keys
+                                        // (even if they are happy)
+        this._pendingKey = null;        // Key waiting for keypress
+        this._altGrArmed = false;       // Windows AltGr detection
+
+        // keep these here so we can refer to them later
+        this._eventHandlers = {
+            'keyup': this._handleKeyUp.bind(this),
+            'keydown': this._handleKeyDown.bind(this),
+            'keypress': this._handleKeyPress.bind(this),
+            'blur': this._allKeysUp.bind(this),
+            'checkalt': this._checkAlt.bind(this),
+        };
 
-Keyboard.prototype = {
-    // ===== EVENT HANDLERS =====
+        // ===== EVENT HANDLERS =====
 
-    onkeyevent: function () {},     // Handler for key press/release
+        this.onkeyevent = () => {}; // Handler for key press/release
+    }
 
     // ===== PRIVATE METHODS =====
 
-    _sendKeyEvent: function (keysym, code, down) {
-        Log.Debug("onkeyevent " + (down ? "down" : "up") +
-                  ", keysym: " + keysym, ", code: " + code);
-
-        // Windows sends CtrlLeft+AltRight when you press
-        // AltGraph, which tends to confuse the hell out of
-        // remote systems. Fake a release of these keys until
-        // there is a way to detect AltGraph properly.
-        var fakeAltGraph = false;
-        if (down && browser.isWindows()) {
-            if ((code !== 'ControlLeft') &&
-                (code !== 'AltRight') &&
-                ('ControlLeft' in this._keyDownList) &&
-                ('AltRight' in this._keyDownList)) {
-                fakeAltGraph = true;
-                this.onkeyevent(this._keyDownList['AltRight'],
-                                 'AltRight', false);
-                this.onkeyevent(this._keyDownList['ControlLeft'],
-                                 'ControlLeft', false);
+    _sendKeyEvent(keysym, code, down) {
+        if (down) {
+            this._keyDownList[code] = keysym;
+        } else {
+            // Do we really think this key is down?
+            if (!(code in this._keyDownList)) {
+                return;
             }
+            delete this._keyDownList[code];
         }
 
+        Log.Debug("onkeyevent " + (down ? "down" : "up") +
+                  ", keysym: " + keysym, ", code: " + code);
         this.onkeyevent(keysym, code, down);
+    }
 
-        if (fakeAltGraph) {
-            this.onkeyevent(this._keyDownList['ControlLeft'],
-                             'ControlLeft', true);
-            this.onkeyevent(this._keyDownList['AltRight'],
-                             'AltRight', true);
-        }
-    },
-
-    _getKeyCode: function (e) {
-        var code = KeyboardUtil.getKeycode(e);
+    _getKeyCode(e) {
+        const code = KeyboardUtil.getKeycode(e);
         if (code !== 'Unidentified') {
             return code;
         }
@@ -94,26 +79,46 @@ Keyboard.prototype = {
                 return e.keyIdentifier;
             }
 
-            var codepoint = parseInt(e.keyIdentifier.substr(2), 16);
-            var char = String.fromCharCode(codepoint);
-            // Some implementations fail to uppercase the symbols
-            char = char.toUpperCase();
+            const codepoint = parseInt(e.keyIdentifier.substr(2), 16);
+            const char = String.fromCharCode(codepoint).toUpperCase();
 
             return 'Platform' + char.charCodeAt();
         }
 
         return 'Unidentified';
-    },
-
-    _handleKeyDown: function (e) {
-        var code = this._getKeyCode(e);
-        var keysym = KeyboardUtil.getKeysym(e);
+    }
+
+    _handleKeyDown(e) {
+        const code = this._getKeyCode(e);
+        let keysym = KeyboardUtil.getKeysym(e);
+
+        // Windows doesn't have a proper AltGr, but handles it using
+        // fake Ctrl+Alt. However the remote end might not be Windows,
+        // so we need to merge those in to a single AltGr event. We
+        // detect this case by seeing the two key events directly after
+        // each other with a very short time between them (<50ms).
+        if (this._altGrArmed) {
+            this._altGrArmed = false;
+            clearTimeout(this._altGrTimeout);
+
+            if ((code === "AltRight") &&
+                ((e.timeStamp - this._altGrCtrlTime) < 50)) {
+                // FIXME: We fail to detect this if either Ctrl key is
+                //        first manually pressed as Windows then no
+                //        longer sends the fake Ctrl down event. It
+                //        does however happily send real Ctrl events
+                //        even when AltGr is already down. Some
+                //        browsers detect this for us though and set the
+                //        key to "AltGraph".
+                keysym = KeyTable.XK_ISO_Level3_Shift;
+            } else {
+                this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
+            }
+        }
 
         // We cannot handle keys we cannot track, but we also need
         // to deal with virtual keyboards which omit key info
-        // (iOS omits tracking info on keyup events, which forces us to
-        // special treat that platform here)
-        if ((code === 'Unidentified') || browser.isIOS()) {
+        if (code === 'Unidentified') {
             if (keysym) {
                 // If it's a virtual keyboard then it should be
                 // sufficient to just send press and release right
@@ -130,20 +135,20 @@ Keyboard.prototype = {
         // keys around a bit to make things more sane for the remote
         // server. This method is used by RealVNC and TigerVNC (and
         // possibly others).
-        if (browser.isMac()) {
+        if (browser.isMac() || browser.isIOS()) {
             switch (keysym) {
-            case KeyTable.XK_Super_L:
-                keysym = KeyTable.XK_Alt_L;
-                break;
-            case KeyTable.XK_Super_R:
-                keysym = KeyTable.XK_Super_L;
-                break;
-            case KeyTable.XK_Alt_L:
-                keysym = KeyTable.XK_Mode_switch;
-                break;
-            case KeyTable.XK_Alt_R:
-                keysym = KeyTable.XK_ISO_Level3_Shift;
-                break;
+                case KeyTable.XK_Super_L:
+                    keysym = KeyTable.XK_Alt_L;
+                    break;
+                case KeyTable.XK_Super_R:
+                    keysym = KeyTable.XK_Super_L;
+                    break;
+                case KeyTable.XK_Alt_L:
+                    keysym = KeyTable.XK_Mode_switch;
+                    break;
+                case KeyTable.XK_Alt_R:
+                    keysym = KeyTable.XK_ISO_Level3_Shift;
+                    break;
             }
         }
 
@@ -157,7 +162,7 @@ Keyboard.prototype = {
         // state change events. That gets extra confusing for CapsLock
         // which toggles on each press, but not on release. So pretend
         // it was a quick press and release of the button.
-        if (browser.isMac() && (code === 'CapsLock')) {
+        if ((browser.isMac() || browser.isIOS()) && (code === 'CapsLock')) {
             this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', true);
             this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', false);
             stopEvent(e);
@@ -180,13 +185,20 @@ Keyboard.prototype = {
         this._pendingKey = null;
         stopEvent(e);
 
-        this._keyDownList[code] = keysym;
+        // Possible start of AltGr sequence? (see above)
+        if ((code === "ControlLeft") && browser.isWindows() &&
+            !("ControlLeft" in this._keyDownList)) {
+            this._altGrArmed = true;
+            this._altGrTimeout = setTimeout(this._handleAltGrTimeout.bind(this), 100);
+            this._altGrCtrlTime = e.timeStamp;
+            return;
+        }
 
         this._sendKeyEvent(keysym, code, true);
-    },
+    }
 
     // Legacy event for browsers without code/key
-    _handleKeyPress: function (e) {
+    _handleKeyPress(e) {
         stopEvent(e);
 
         // Are we expecting a keypress?
@@ -194,8 +206,8 @@ Keyboard.prototype = {
             return;
         }
 
-        var code = this._getKeyCode(e);
-        var keysym = KeyboardUtil.getKeysym(e);
+        let code = this._getKeyCode(e);
+        const keysym = KeyboardUtil.getKeysym(e);
 
         // The key we were waiting for?
         if ((code !== 'Unidentified') && (code != this._pendingKey)) {
@@ -210,19 +222,18 @@ Keyboard.prototype = {
             return;
         }
 
-        this._keyDownList[code] = keysym;
-
         this._sendKeyEvent(keysym, code, true);
-    },
-    _handleKeyPressTimeout: function (e) {
+    }
+
+    _handleKeyPressTimeout(e) {
         // Did someone manage to sort out the key already?
         if (this._pendingKey === null) {
             return;
         }
 
-        var code, keysym;
+        let keysym;
 
-        code = this._pendingKey;
+        const code = this._pendingKey;
         this._pendingKey = null;
 
         // We have no way of knowing the proper keysym with the
@@ -233,82 +244,145 @@ Keyboard.prototype = {
             keysym = e.keyCode;
         } else if ((e.keyCode >= 0x41) && (e.keyCode <= 0x5a)) {
             // Character (A-Z)
-            var char = String.fromCharCode(e.keyCode);
+            let char = String.fromCharCode(e.keyCode);
             // A feeble attempt at the correct case
-            if (e.shiftKey)
+            if (e.shiftKey) {
                 char = char.toUpperCase();
-            else
+            } else {
                 char = char.toLowerCase();
+            }
             keysym = char.charCodeAt();
         } else {
             // Unknown, give up
             keysym = 0;
         }
 
-        this._keyDownList[code] = keysym;
-
         this._sendKeyEvent(keysym, code, true);
-    },
+    }
 
-    _handleKeyUp: function (e) {
+    _handleKeyUp(e) {
         stopEvent(e);
 
-        var code = this._getKeyCode(e);
+        const code = this._getKeyCode(e);
+
+        // We can't get a release in the middle of an AltGr sequence, so
+        // abort that detection
+        if (this._altGrArmed) {
+            this._altGrArmed = false;
+            clearTimeout(this._altGrTimeout);
+            this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
+        }
 
         // See comment in _handleKeyDown()
-        if (browser.isMac() && (code === 'CapsLock')) {
+        if ((browser.isMac() || browser.isIOS()) && (code === 'CapsLock')) {
             this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', true);
             this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', false);
             return;
         }
 
-        // Do we really think this key is down?
-        if (!(code in this._keyDownList)) {
-            return;
-        }
-
         this._sendKeyEvent(this._keyDownList[code], code, false);
 
-        delete this._keyDownList[code];
-    },
+        // Windows has a rather nasty bug where it won't send key
+        // release events for a Shift button if the other Shift is still
+        // pressed
+        if (browser.isWindows() && ((code === 'ShiftLeft') ||
+                                    (code === 'ShiftRight'))) {
+            if ('ShiftRight' in this._keyDownList) {
+                this._sendKeyEvent(this._keyDownList['ShiftRight'],
+                                   'ShiftRight', false);
+            }
+            if ('ShiftLeft' in this._keyDownList) {
+                this._sendKeyEvent(this._keyDownList['ShiftLeft'],
+                                   'ShiftLeft', false);
+            }
+        }
+    }
+
+    _handleAltGrTimeout() {
+        this._altGrArmed = false;
+        clearTimeout(this._altGrTimeout);
+        this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
+    }
 
-    _allKeysUp: function () {
+    _allKeysUp() {
         Log.Debug(">> Keyboard.allKeysUp");
-        for (var code in this._keyDownList) {
+        for (let code in this._keyDownList) {
             this._sendKeyEvent(this._keyDownList[code], code, false);
-        };
-        this._keyDownList = {};
+        }
         Log.Debug("<< Keyboard.allKeysUp");
-    },
+    }
+
+    // Alt workaround for Firefox on Windows, see below
+    _checkAlt(e) {
+        if (e.skipCheckAlt) {
+            return;
+        }
+        if (e.altKey) {
+            return;
+        }
+
+        const target = this._target;
+        const downList = this._keyDownList;
+        ['AltLeft', 'AltRight'].forEach((code) => {
+            if (!(code in downList)) {
+                return;
+            }
+
+            const event = new KeyboardEvent('keyup',
+                                            { key: downList[code],
+                                              code: code });
+            event.skipCheckAlt = true;
+            target.dispatchEvent(event);
+        });
+    }
 
     // ===== PUBLIC METHODS =====
 
-    grab: function () {
+    grab() {
         //Log.Debug(">> Keyboard.grab");
-        var c = this._target;
 
-        c.addEventListener('keydown', this._eventHandlers.keydown);
-        c.addEventListener('keyup', this._eventHandlers.keyup);
-        c.addEventListener('keypress', this._eventHandlers.keypress);
+        this._target.addEventListener('keydown', this._eventHandlers.keydown);
+        this._target.addEventListener('keyup', this._eventHandlers.keyup);
+        this._target.addEventListener('keypress', this._eventHandlers.keypress);
 
         // Release (key up) if window loses focus
         window.addEventListener('blur', this._eventHandlers.blur);
 
+        // Firefox on Windows has broken handling of Alt, so we need to
+        // poll as best we can for releases (still doesn't prevent the
+        // menu from popping up though as we can't call
+        // preventDefault())
+        if (browser.isWindows() && browser.isFirefox()) {
+            const handler = this._eventHandlers.checkalt;
+            ['mousedown', 'mouseup', 'mousemove', 'wheel',
+             'touchstart', 'touchend', 'touchmove',
+             'keydown', 'keyup'].forEach(type =>
+                document.addEventListener(type, handler,
+                                          { capture: true,
+                                            passive: true }));
+        }
+
         //Log.Debug("<< Keyboard.grab");
-    },
+    }
 
-    ungrab: function () {
+    ungrab() {
         //Log.Debug(">> Keyboard.ungrab");
-        var c = this._target;
 
-        c.removeEventListener('keydown', this._eventHandlers.keydown);
-        c.removeEventListener('keyup', this._eventHandlers.keyup);
-        c.removeEventListener('keypress', this._eventHandlers.keypress);
+        if (browser.isWindows() && browser.isFirefox()) {
+            const handler = this._eventHandlers.checkalt;
+            ['mousedown', 'mouseup', 'mousemove', 'wheel',
+             'touchstart', 'touchend', 'touchmove',
+             'keydown', 'keyup'].forEach(type => document.removeEventListener(type, handler));
+        }
+
+        this._target.removeEventListener('keydown', this._eventHandlers.keydown);
+        this._target.removeEventListener('keyup', this._eventHandlers.keyup);
+        this._target.removeEventListener('keypress', this._eventHandlers.keypress);
         window.removeEventListener('blur', this._eventHandlers.blur);
 
         // Release (key up) all keys that are in a down state
         this._allKeysUp();
 
         //Log.Debug(">> Keyboard.ungrab");
-    },
-};
+    }
+}

package/core/input/keysym.js

@@ -1,3 +1,5 @@
+/* eslint-disable key-spacing */
+
 export default {
     XK_VoidSymbol:                  0xffffff, /* Void symbol */
 

package/core/input/keysymdef.js

@@ -7,7 +7,7 @@
 
 /* Functions at the bottom */
 
-var codepoints = {
+const codepoints = {
     0x0100: 0x03c0, // XK_Amacron
     0x0101: 0x03e0, // XK_amacron
     0x0102: 0x01c3, // XK_Abreve
@@ -670,14 +670,14 @@ var codepoints = {
 };
 
 export default {
-    lookup : function(u) {
+    lookup(u) {
         // Latin-1 is one-to-one mapping
         if ((u >= 0x20) && (u <= 0xff)) {
             return u;
         }
 
         // Lookup table (fairly random)
-        var keysym = codepoints[u];
+        const keysym = codepoints[u];
         if (keysym !== undefined) {
             return keysym;
         }

package/core/input/util.js

@@ -6,7 +6,7 @@ import DOMKeyTable from "./domkeytable.js";
 import * as browser from "../util/browser.js";
 
 // Get 'KeyboardEvent.code', handling legacy browsers
-export function getKeycode(evt){
+export function getKeycode(evt) {
     // Are we getting proper key identifiers?
     // (unfortunately Firefox and Chrome are crappy here and gives
     // us an empty string on some platforms, rather than leaving it
@@ -25,7 +25,7 @@ export function getKeycode(evt){
     // in the 'keyCode' field for non-printable characters. However
     // Webkit sets it to the same as charCode in 'keypress' events.
     if ((evt.type !== 'keypress') && (evt.keyCode in vkeys)) {
-        var code = vkeys[evt.keyCode];
+        let code = vkeys[evt.keyCode];
 
         // macOS has messed up this code for some reason
         if (browser.isMac() && (code === 'ContextMenu')) {
@@ -92,6 +92,8 @@ export function getKey(evt) {
         // Mozilla isn't fully in sync with the spec yet
         switch (evt.key) {
             case 'OS': return 'Meta';
+            case 'LaunchMyComputer': return 'LaunchApplication1';
+            case 'LaunchCalculator': return 'LaunchApplication2';
         }
 
         // iOS leaks some OS names
@@ -103,15 +105,27 @@ export function getKey(evt) {
             case 'UIKeyInputEscape': return 'Escape';
         }
 
-        // IE and Edge have broken handling of AltGraph so we cannot
-        // trust them for printable characters
-        if ((evt.key.length !== 1) || (!browser.isIE() && !browser.isEdge())) {
+        // Broken behaviour in Chrome
+        if ((evt.key === '\x00') && (evt.code === 'NumpadDecimal')) {
+            return 'Delete';
+        }
+
+        // IE and Edge need special handling, but for everyone else we
+        // can trust the value provided
+        if (!browser.isIE() && !browser.isEdge()) {
+            return evt.key;
+        }
+
+        // IE and Edge have broken handling of AltGraph so we can only
+        // trust them for non-printable characters (and unfortunately
+        // they also specify 'Unidentified' for some problem keys)
+        if ((evt.key.length !== 1) && (evt.key !== 'Unidentified')) {
             return evt.key;
         }
     }
 
     // Try to deduce it based on the physical key
-    var code = getKeycode(evt);
+    const code = getKeycode(evt);
     if (code in fixedkeys) {
         return fixedkeys[code];
     }
@@ -126,8 +140,8 @@ export function getKey(evt) {
 }
 
 // Get the most reliable keysym value we can get from a key event
-export function getKeysym(evt){
-    var key = getKey(evt);
+export function getKeysym(evt) {
+    const key = getKey(evt);
 
     if (key === 'Unidentified') {
         return null;
@@ -135,30 +149,57 @@ export function getKeysym(evt){
 
     // First look up special keys
     if (key in DOMKeyTable) {
-        var location = evt.location;
+        let location = evt.location;
 
         // Safari screws up location for the right cmd key
         if ((key === 'Meta') && (location === 0)) {
             location = 2;
         }
 
+        // And for Clear
+        if ((key === 'Clear') && (location === 3)) {
+            let code = getKeycode(evt);
+            if (code === 'NumLock') {
+                location = 0;
+            }
+        }
+
         if ((location === undefined) || (location > 3)) {
             location = 0;
         }
 
+        // The original Meta key now gets confused with the Windows key
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1020141
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=1232918
+        if (key === 'Meta') {
+            let code = getKeycode(evt);
+            if (code === 'AltLeft') {
+                return KeyTable.XK_Meta_L;
+            } else if (code === 'AltRight') {
+                return KeyTable.XK_Meta_R;
+            }
+        }
+
+        // macOS has Clear instead of NumLock, but the remote system is
+        // probably not macOS, so lying here is probably best...
+        if (key === 'Clear') {
+            let code = getKeycode(evt);
+            if (code === 'NumLock') {
+                return KeyTable.XK_Num_Lock;
+            }
+        }
+
         return DOMKeyTable[key][location];
     }
 
     // Now we need to look at the Unicode symbol instead
 
-    var codepoint;
-
     // Special key? (FIXME: Should have been caught earlier)
     if (key.length !== 1) {
         return null;
     }
 
-    codepoint = key.charCodeAt();
+    const codepoint = key.charCodeAt();
     if (codepoint) {
         return keysyms.lookup(codepoint);
     }

package/core/input/vkeys.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2017 Pierre Ossman for Cendio AB
+ * Copyright (C) 2018 The noVNC Authors
  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  */
 
@@ -13,6 +13,7 @@ export default {
     0x08: 'Backspace',
     0x09: 'Tab',
     0x0a: 'NumpadClear',
+    0x0c: 'Numpad5', // IE11 sends evt.keyCode: 12 when numlock is off
     0x0d: 'Enter',
     0x10: 'ShiftLeft',
     0x11: 'ControlLeft',