Merge branch 'focus' of https://github.com/CendioOssman/noVNC

app/styles/base.css

@@ -457,11 +457,15 @@ select:active {
   padding-top: 5px;
   padding-bottom: 3px;
 }
-:root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover {
+/* Android browsers don't properly update hover state if touch events
+ * are intercepted, but focus should be safe to display */
+:root:not(.noVNC_touch) .noVNC_button.noVNC_selected:hover,
+.noVNC_button.noVNC_selected:focus {
   border-color: rgba(0, 0, 0, 0.4);
   background: rgba(0, 0, 0, 0.2);
 }
-:root:not(.noVNC_touch) .noVNC_button:hover {
+:root:not(.noVNC_touch) .noVNC_button:hover,
+.noVNC_button:focus {
   background: rgba(255, 255, 255, 0.2);
 }
 .noVNC_button.noVNC_hidden {
@@ -870,6 +874,9 @@ select:active {
   /* IE miscalculates width without this :( */
   flex-shrink: 0;
 }
+#noVNC_canvas:focus {
+  outline: none;
+}
 
 /*Default noVNC logo.*/
 /* From: http://fonts.googleapis.com/css?family=Orbitron:700 */

app/ui.js

@@ -17,6 +17,7 @@ import { isTouchDevice, browserSupportsCursorURIs as cursorURIsSupported } from
 import { setCapture, getPointerEvent } from '../core/util/events.js';
 import KeyTable from "../core/input/keysym.js";
 import keysyms from "../core/input/keysymdef.js";
+import Keyboard from "../core/input/keyboard.js";
 import RFB from "../core/rfb.js";
 import Display from "../core/display.js";
 import * as WebUtil from "./webutil.js";
@@ -106,7 +107,6 @@ var UI = {
 
         UI.updateVisualState();
 
-        document.getElementById('noVNC_setting_host').focus();
         document.documentElement.classList.remove("noVNC_loading");
 
         var autoconnect = WebUtil.getConfigVar('autoconnect', false);
@@ -241,12 +241,12 @@ var UI = {
         document.getElementById("noVNC_control_bar")
             .addEventListener('mousedown', UI.activateControlbar);
         document.getElementById("noVNC_control_bar")
-            .addEventListener('keypress', UI.activateControlbar);
+            .addEventListener('keydown', UI.activateControlbar);
 
         document.getElementById("noVNC_control_bar")
             .addEventListener('mousedown', UI.keepControlbar);
         document.getElementById("noVNC_control_bar")
-            .addEventListener('keypress', UI.keepControlbar);
+            .addEventListener('keydown', UI.keepControlbar);
 
         document.getElementById("noVNC_view_drag_button")
             .addEventListener('click', UI.toggleViewDrag);
@@ -278,6 +278,9 @@ var UI = {
         document.getElementById("noVNC_keyboard_button")
             .addEventListener('click', UI.toggleVirtualKeyboard);
 
+        UI.touchKeyboard = new Keyboard({target: document.getElementById('noVNC_keyboardinput'),
+                                         onKeyEvent: UI.keyEvent});
+        UI.touchKeyboard.grab();
         document.getElementById("noVNC_keyboardinput")
             .addEventListener('input', UI.keyInput);
         document.getElementById("noVNC_keyboardinput")
@@ -289,6 +292,8 @@ var UI = {
 
         document.documentElement
             .addEventListener('mousedown', UI.keepVirtualKeyboard, true);
+        document.documentElement
+            .addEventListener('touchstart', UI.keepVirtualKeyboard, true);
 
         document.getElementById("noVNC_control_bar")
             .addEventListener('touchstart', UI.activateControlbar);
@@ -353,10 +358,6 @@ var UI = {
     addClipboardHandlers: function() {
         document.getElementById("noVNC_clipboard_button")
             .addEventListener('click', UI.toggleClipboardPanel);
-        document.getElementById("noVNC_clipboard_text")
-            .addEventListener('focus', UI.displayBlur);
-        document.getElementById("noVNC_clipboard_text")
-            .addEventListener('blur', UI.displayFocus);
         document.getElementById("noVNC_clipboard_text")
             .addEventListener('change', UI.clipboardSend);
         document.getElementById("noVNC_clipboard_clear_button")
@@ -437,6 +438,7 @@ var UI = {
                     msg = _("Connected (unencrypted) to ") + UI.desktopName;
                 }
                 UI.showStatus(msg);
+                document.getElementById('noVNC_canvas').focus();
                 break;
             case 'disconnecting':
                 UI.connected = false;
@@ -1490,7 +1492,14 @@ var UI = {
             }
         }
 
-        event.preventDefault();
+        // The default action of touchstart is to generate other
+        // events, which other elements might depend on. So we can't
+        // blindly prevent that. Instead restore focus right away.
+        if (event.type === "touchstart") {
+            setTimeout(input.focus.bind(input));
+        } else {
+            event.preventDefault();
+        }
     },
 
     keyboardinputReset: function() {
@@ -1499,6 +1508,12 @@ var UI = {
         UI.lastKeyboardinput = kbi.value;
     },
 
+    keyEvent: function (keysym, code, down) {
+        if (!UI.rfb) return;
+
+        UI.rfb.sendKey(keysym, code, down);
+    },
+
     // When normal keyboard events are left uncought, use the input events from
     // the keyboardinput element instead and generate the corresponding key events.
     // This code is required since some browsers on Android are inconsistent in
@@ -1660,20 +1675,6 @@ var UI = {
         }
     },
 
-    displayBlur: function() {
-        if (UI.rfb && !UI.rfb.get_view_only()) {
-            UI.rfb.get_keyboard().set_focused(false);
-            UI.rfb.get_mouse().set_focused(false);
-        }
-    },
-
-    displayFocus: function() {
-        if (UI.rfb && !UI.rfb.get_view_only()) {
-            UI.rfb.get_keyboard().set_focused(true);
-            UI.rfb.get_mouse().set_focused(true);
-        }
-    },
-
     updateLocalCursor: function() {
         if (!UI.rfb) return;
         UI.rfb.set_local_cursor(UI.getSetting('cursor'));

core/input/keyboard.js

@@ -24,8 +24,7 @@ export default function Keyboard(defaults) {
     this._pendingKey = null;        // Key waiting for keypress
 
     set_defaults(this, defaults, {
-        'target': document,
+        'target': null,
-        'focused': true
     });
 
     // keep these here so we can refer to them later
@@ -131,8 +130,6 @@ Keyboard.prototype = {
     },
 
     _handleKeyDown: function (e) {
-        if (!this._focused) { return; }
-
         var code = this._getKeyCode(e);
         var keysym = KeyboardUtil.getKeysym(e);
 
@@ -214,8 +211,6 @@ Keyboard.prototype = {
 
     // Legacy event for browsers without code/key
     _handleKeyPress: function (e) {
-        if (!this._focused) { return; }
-
         stopEvent(e);
 
         // Are we expecting a keypress?
@@ -244,8 +239,6 @@ Keyboard.prototype = {
         this._sendKeyEvent(keysym, code, true);
     },
     _handleKeyPressTimeout: function (e) {
-        if (!this._focused) { return; }
-
         // Did someone manage to sort out the key already?
         if (this._pendingKey === null) {
             return;
@@ -282,8 +275,6 @@ Keyboard.prototype = {
     },
 
     _handleKeyUp: function (e) {
-        if (!this._focused) { return; }
-
         stopEvent(e);
 
         var code = this._getKeyCode(e);
@@ -348,7 +339,6 @@ Keyboard.prototype = {
 
 make_properties(Keyboard, [
     ['target',     'wo', 'dom'],  // DOM element that captures keyboard input
-    ['focused',    'rw', 'bool'], // Capture and send key events
 
     ['onKeyEvent', 'rw', 'func'] // Handler for key press/release
 ]);

core/input/mouse.js

@@ -31,7 +31,6 @@ export default function Mouse(defaults) {
     // Configuration attributes
     set_defaults(this, defaults, {
         'target': document,
-        'focused': true,
         'touchButton': 1
     });
 
@@ -52,8 +51,6 @@ Mouse.prototype = {
     },
 
     _handleMouseButton: function (e, down) {
-        if (!this._focused) { return; }
-
         this._updateMousePosition(e);
         var pos = this._pos;
 
@@ -156,7 +153,7 @@ Mouse.prototype = {
     },
 
     _handleMouseWheel: function (e) {
-        if (!this._focused || !this._onMouseButton) { return; }
+        if (!this._onMouseButton) { return; }
 
         this._resetWheelStepTimers();
 
@@ -201,8 +198,6 @@ Mouse.prototype = {
     },
 
     _handleMouseMove: function (e) {
-        if (! this._focused) { return; }
-
         this._updateMousePosition(e);
         if (this._onMouseMove) {
             this._onMouseMove(this._pos.x, this._pos.y);
@@ -211,8 +206,6 @@ Mouse.prototype = {
     },
 
     _handleMouseDisable: function (e) {
-        if (!this._focused) { return; }
-
         /*
          * Stop propagation if inside canvas area
          * Note: This is only needed for the 'click' event as it fails
@@ -292,7 +285,6 @@ Mouse.prototype = {
 
 make_properties(Mouse, [
     ['target',         'ro', 'dom'],   // DOM element that captures mouse input
-    ['focused',        'rw', 'bool'],  // Capture and send mouse clicks/movement
 
     ['onMouseButton',  'rw', 'func'],  // Handler for mouse button click/release
     ['onMouseMove',    'rw', 'func'],  // Handler for mouse movement

core/rfb.js

@@ -120,7 +120,6 @@ export default function RFB(defaults) {
     // 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
@@ -171,7 +170,7 @@ export default function RFB(defaults) {
         throw exc;
     }
 
-    this._keyboard = new Keyboard({target: this._focusContainer,
+    this._keyboard = new Keyboard({target: this._target,
                                    onKeyEvent: this._handleKeyEvent.bind(this)});
 
     this._mouse = new Mouse({target: this._target,
@@ -385,11 +384,17 @@ RFB.prototype = {
             }
         }
 
+        // Always grab focus on some kind of click event
+        this._target.addEventListener("mousedown", this._focusCanvas);
+        this._target.addEventListener("touchstart", this._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._sock.close();
         this._print_stats();
@@ -448,6 +453,13 @@ RFB.prototype = {
         }
     },
 
+    // 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();
+    },
+
     /*
      * Connection states:
      *   connecting
@@ -1457,7 +1469,6 @@ RFB.prototype = {
 
 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

vendor/browser-es-module-loader/dist/browser-es-module-loader.js

@@ -227,7 +227,6 @@ var iteratorSupport = typeof Symbol !== 'undefined' && Symbol.iterator;
 var REGISTRY = createSymbol('registry');
 function Registry() {
   this[REGISTRY] = {};
-  this._registry = REGISTRY;
 }
 // 4.4.1
 if (iteratorSupport) {
@@ -381,8 +380,9 @@ function resolveIfNotPlain (relUrl, parentUrl) {
     return parentProtocol + relUrl;
   }
   // relative-url
-  else if (firstChar === '.' && (secondChar === '/' || secondChar === '.' && (relUrl[2] === '/' || relUrl.length === 2) || relUrl.length === 1)
+  else if (firstChar === '.' && (secondChar === '/' || secondChar === '.' && (relUrl[2] === '/' || relUrl.length === 2 && (relUrl += '/')) ||
-      || firstChar === '/') {
+      relUrl.length === 1  && (relUrl += '/')) ||
+      firstChar === '/') {
     var parentIsPlain = !parentProtocol || parentUrl[parentProtocol.length] !== '/';
 
     // read pathname from parent if a URL
@@ -422,14 +422,14 @@ function resolveIfNotPlain (relUrl, parentUrl) {
     var segmented = pathname.substr(0, pathname.lastIndexOf('/') + 1) + relUrl;
 
     var output = [];
-    var segmentIndex = undefined;
+    var segmentIndex = -1;
 
     for (var i = 0; i < segmented.length; i++) {
       // busy reading a segment - only terminate on '/'
-      if (segmentIndex !== undefined) {
+      if (segmentIndex !== -1) {
         if (segmented[i] === '/') {
-          output.push(segmented.substr(segmentIndex, i - segmentIndex + 1));
+          output.push(segmented.substring(segmentIndex, i + 1));
-          segmentIndex = undefined;
+          segmentIndex = -1;
         }
         continue;
       }
@@ -437,12 +437,12 @@ function resolveIfNotPlain (relUrl, parentUrl) {
       // new segment - check if it is relative
       if (segmented[i] === '.') {
         // ../ segment
-        if (segmented[i + 1] === '.' && (segmented[i + 2] === '/' || i === segmented.length - 2)) {
+        if (segmented[i + 1] === '.' && (segmented[i + 2] === '/' || i + 2 === segmented.length)) {
           output.pop();
           i += 2;
         }
         // ./ segment
-        else if (segmented[i + 1] === '/' || i === segmented.length - 1) {
+        else if (segmented[i + 1] === '/' || i + 1 === segmented.length) {
           i += 1;
         }
         else {
@@ -455,9 +455,6 @@ function resolveIfNotPlain (relUrl, parentUrl) {
         if (parentIsPlain && output.length === 0)
           throwResolveError(relUrl, parentUrl);
 
-        // trailing . or .. segment
-        if (i === segmented.length)
-          output.push('');
         continue;
       }
 
@@ -465,8 +462,8 @@ function resolveIfNotPlain (relUrl, parentUrl) {
       segmentIndex = i;
     }
     // finish reading out the last segment
-    if (segmentIndex !== undefined)
+    if (segmentIndex !== -1)
-      output.push(segmented.substr(segmentIndex, segmented.length - segmentIndex));
+      output.push(segmented.substr(segmentIndex));
 
     return parentUrl.substr(0, parentUrl.length - pathname.length) + output.join('');
   }
@@ -491,7 +488,7 @@ function resolveIfNotPlain (relUrl, parentUrl) {
  * - loader.register support
  * - hookable higher-level resolve
  * - instantiate hook returning a ModuleNamespace or undefined for es module loading
- * - loader error behaviour as in HTML and loader specs, clearing failed modules from registration cache synchronously
+ * - loader error behaviour as in HTML and loader specs, caching load and eval errors separately
  * - build tracing support by providing a .trace=true and .loads object format
  */
 
@@ -505,8 +502,10 @@ function RegisterLoader$1 () {
     var deleted = registryDelete.call(this, key);
 
     // also delete from register registry if linked
-    if (records.hasOwnProperty(key) && !records[key].linkRecord)
+    if (records.hasOwnProperty(key) && !records[key].linkRecord) {
       delete records[key];
+      deleted = true;
+    }
 
     return deleted;
   };
@@ -554,6 +553,9 @@ function createLoadRecord (state, key, registration) {
     // for already-loaded modules by adding themselves to their importerSetters
     importerSetters: undefined,
 
+    loadError: undefined,
+    evalError: undefined,
+
     // in-flight linking record
     linkRecord: {
       // promise for instantiated
@@ -573,12 +575,6 @@ function createLoadRecord (state, key, registration) {
       // will be the array of dependency load record or a module namespace
       dependencyInstantiations: undefined,
 
-      // indicates if the load and all its dependencies are instantiated and linked
-      // but not yet executed
-      // mostly just a performance shortpath to avoid rechecking the promises above
-      linked: false,
-
-      error: undefined
       // NB optimization and way of ensuring module objects in setters
       // indicates setters which should run pre-execution of that dependency
       // setters is then just for completely executed module objects
@@ -592,28 +588,26 @@ function createLoadRecord (state, key, registration) {
 RegisterLoader$1.prototype[Loader.resolveInstantiate] = function (key, parentKey) {
   var loader = this;
   var state = this[REGISTER_INTERNAL];
-  var registry = loader.registry[loader.registry._registry];
+  var registry = this.registry[REGISTRY];
 
   return resolveInstantiate(loader, key, parentKey, registry, state)
   .then(function (instantiated) {
     if (instantiated instanceof ModuleNamespace)
       return instantiated;
 
-    // if already beaten to linked, return
-    if (instantiated.module)
-      return instantiated.module;
-
     // resolveInstantiate always returns a load record with a link record and no module value
-    if (instantiated.linkRecord.linked)
+    var link = instantiated.linkRecord;
-      return ensureEvaluate(loader, instantiated, instantiated.linkRecord, registry, state, undefined);
 
-    return instantiateDeps(loader, instantiated, instantiated.linkRecord, registry, state, [instantiated])
+    // if already beaten to done, return
+    if (!link) {
+      if (instantiated.module)
+        return instantiated.module;
+      throw instantiated.evalError;
+    }
+
+    return deepInstantiateDeps(loader, instantiated, link, registry, state)
     .then(function () {
-      return ensureEvaluate(loader, instantiated, instantiated.linkRecord, registry, state, undefined);
+      return ensureEvaluate(loader, instantiated, link, registry, state, undefined);
-    })
-    .catch(function (err) {
-      clearLoadErrors(loader, instantiated);
-      throw err;
     });
   });
 };
@@ -628,8 +622,11 @@ function resolveInstantiate (loader, key, parentKey, registry, state) {
   var load = state.records[key];
 
   // already linked but not in main registry is ignored
-  if (load && !load.module)
+  if (load && !load.module) {
+    if (load.loadError)
+      return Promise.reject(load.loadError);
     return instantiate(loader, load, load.linkRecord, registry, state);
+  }
 
   return loader.resolve(key, parentKey)
   .then(function (resolvedKey) {
@@ -647,6 +644,9 @@ function resolveInstantiate (loader, key, parentKey, registry, state) {
     if (!load || load.module)
       load = createLoadRecord(state, resolvedKey, load && load.registration);
 
+    if (load.loadError)
+      return Promise.reject(load.loadError);
+
     var link = load.linkRecord;
     if (!link)
       return load;
@@ -703,8 +703,7 @@ function instantiate (loader, load, link, registry, state) {
 
     // process System.registerDynamic declaration
     if (registration[2]) {
-      link.moduleObj.default = {};
+      link.moduleObj.default = link.moduleObj.__useDefault = {};
-      link.moduleObj.__useDefault = true;
       link.executingRequire = registration[1];
       link.execute = registration[2];
     }
@@ -714,17 +713,11 @@ function instantiate (loader, load, link, registry, state) {
       registerDeclarative(loader, load, link, registration[1]);
     }
 
-    // shortpath to instantiateDeps
-    if (!link.dependencies.length) {
-      link.linked = true;
-      if (loader.trace)
-        traceLoad(loader, load, link);
-    }
-
     return load;
   })
   .catch(function (err) {
-    throw link.error = LoaderError__Check_error_message_for_loader_stack(err, 'Instantiating ' + load.key);
+    load.linkRecord = undefined;
+    throw load.loadError = load.loadError || LoaderError__Check_error_message_for_loader_stack(err, 'Instantiating ' + load.key);
   }));
 }
 
@@ -766,6 +759,9 @@ function resolveInstantiateDep (loader, key, parentKey, registry, state, traceDe
     if (module && (!load || load.module && module !== load.module))
       return module;
 
+    if (load && load.loadError)
+      throw load.loadError;
+
     // already has a module value but not already in the registry (load.module)
     // means it was removed by registry.delete, so we should
     // disgard the current load record creating a new one over it
@@ -786,6 +782,7 @@ function traceLoad (loader, load, link) {
   loader.loads[load.key] = {
     key: load.key,
     deps: link.dependencies,
+    dynamicDeps: [],
     depMap: link.depMap || {}
   };
 }
@@ -801,47 +798,52 @@ function registerDeclarative (loader, load, link, declare) {
   var moduleObj = link.moduleObj;
   var importerSetters = load.importerSetters;
 
-  var locked = false;
+  var definedExports = false;
 
   // closure especially not based on link to allow link record disposal
   var declared = declare.call(envGlobal, function (name, value) {
-    // export setter propogation with locking to avoid cycles
-    if (locked)
-      return;
-
     if (typeof name === 'object') {
-      for (var p in name)
+      var changed = false;
-        if (p !== '__useDefault')
+      for (var p in name) {
-          moduleObj[p] = name[p];
+        value = name[p];
+        if (p !== '__useDefault' && (!(p in moduleObj) || moduleObj[p] !== value)) {
+          changed = true;
+          moduleObj[p] = value;
+        }
+      }
+      if (changed === false)
+        return value;
     }
     else {
+      if ((definedExports || name in moduleObj) && moduleObj[name] === value)
+        return value;
       moduleObj[name] = value;
     }
 
-    locked = true;
     for (var i = 0; i < importerSetters.length; i++)
       importerSetters[i](moduleObj);
-    locked = false;
 
     return value;
   }, new ContextualLoader(loader, load.key));
 
   link.setters = declared.setters;
   link.execute = declared.execute;
-  if (declared.exports)
+  if (declared.exports) {
     link.moduleObj = moduleObj = declared.exports;
+    definedExports = true;
+  }
 }
 
-function instantiateDeps (loader, load, link, registry, state, seen) {
+function instantiateDeps (loader, load, link, registry, state) {
-  return (link.depsInstantiatePromise || (link.depsInstantiatePromise = Promise.resolve()
+  if (link.depsInstantiatePromise)
-  .then(function () {
+    return link.depsInstantiatePromise;
-    var depsInstantiatePromises = Array(link.dependencies.length);
 
-    for (var i = 0; i < link.dependencies.length; i++)
+  var depsInstantiatePromises = Array(link.dependencies.length);
-      depsInstantiatePromises[i] = resolveInstantiateDep(loader, link.dependencies[i], load.key, registry, state, loader.trace && link.depMap || (link.depMap = {}));
 
-    return Promise.all(depsInstantiatePromises);
+  for (var i = 0; i < link.dependencies.length; i++)
-  })
+    depsInstantiatePromises[i] = resolveInstantiateDep(loader, link.dependencies[i], load.key, registry, state, loader.trace && link.depMap || (link.depMap = {}));
+
+  var depsInstantiatePromise = Promise.all(depsInstantiatePromises)
   .then(function (dependencyInstantiations) {
     link.dependencyInstantiations = dependencyInstantiations;
 
@@ -856,6 +858,8 @@ function instantiateDeps (loader, load, link, registry, state, seen) {
             setter(instantiation);
           }
           else {
+            if (instantiation.loadError)
+              throw instantiation.loadError;
             setter(instantiation.module || instantiation.linkRecord.moduleObj);
             // this applies to both es and dynamic registrations
             if (instantiation.importerSetters)
@@ -864,80 +868,59 @@ function instantiateDeps (loader, load, link, registry, state, seen) {
         }
       }
     }
-  })))
-  .then(function () {
-    // now deeply instantiateDeps on each dependencyInstantiation that is a load record
-    var deepDepsInstantiatePromises = [];
-
-    for (var i = 0; i < link.dependencies.length; i++) {
-      var depLoad = link.dependencyInstantiations[i];
-      var depLink = depLoad.linkRecord;
-
-      if (!depLink || depLink.linked)
-        continue;
-
-      if (seen.indexOf(depLoad) !== -1)
-        continue;
-      seen.push(depLoad);
-
-      deepDepsInstantiatePromises.push(instantiateDeps(loader, depLoad, depLoad.linkRecord, registry, state, seen));
-    }
-
-    return Promise.all(deepDepsInstantiatePromises);
-  })
-  .then(function () {
-    // as soon as all dependencies instantiated, we are ready for evaluation so can add to the registry
-    // this can run multiple times, but so what
-    link.linked = true;
-    if (loader.trace)
-      traceLoad(loader, load, link);
 
     return load;
-  })
-  .catch(function (err) {
-    err = LoaderError__Check_error_message_for_loader_stack(err, 'Loading ' + load.key);
-
-    // throw up the instantiateDeps stack
-    // loads are then synchonously cleared at the top-level through the clearLoadErrors helper below
-    // this then ensures avoiding partially unloaded tree states
-    link.error = link.error || err;
-
-    throw err;
   });
+
+  if (loader.trace)
+    depsInstantiatePromise = depsInstantiatePromise.then(function () {
+      traceLoad(loader, load, link);
+      return load;
+    });
+
+  depsInstantiatePromise = depsInstantiatePromise.catch(function (err) {
+    // throw up the instantiateDeps stack
+    link.depsInstantiatePromise = undefined;
+    throw LoaderError__Check_error_message_for_loader_stack(err, 'Loading ' + load.key);
+  });
+
+  depsInstantiatePromise.catch(function () {});
+
+  return link.depsInstantiatePromise = depsInstantiatePromise;
 }
 
-// clears an errored load and all its errored dependencies from the loads registry
+function deepInstantiateDeps (loader, load, link, registry, state) {
-function clearLoadErrors (loader, load) {
+  return new Promise(function (resolve, reject) {
-  var state = loader[REGISTER_INTERNAL];
+    var seen = [];
-
+    var loadCnt = 0;
-  // clear from loads
+    function queueLoad (load) {
-  if (state.records[load.key] === load)
+      var link = load.linkRecord;
-    delete state.records[load.key];
+      if (!link)
-
-  var link = load.linkRecord;
-
-  if (!link)
-    return;
-
-  if (link.dependencyInstantiations)
-    link.dependencyInstantiations.forEach(function (depLoad, index) {
-      if (!depLoad || depLoad instanceof ModuleNamespace)
         return;
 
-      if (depLoad.linkRecord) {
+      if (seen.indexOf(load) !== -1)
-        if (depLoad.linkRecord.error) {
+        return;
-          // provides a circular reference check
+      seen.push(load);
-          if (state.records[depLoad.key] === depLoad)
-            clearLoadErrors(loader, depLoad);
-        }
 
-        // unregister setters for es dependency load records that will remain
+      loadCnt++;
-        if (link.setters && depLoad.importerSetters) {
+      instantiateDeps(loader, load, link, registry, state)
-          var setterIndex = depLoad.importerSetters.indexOf(link.setters[index]);
+      .then(processLoad, reject);
-          depLoad.importerSetters.splice(setterIndex, 1);
+    }
+    function processLoad (load) {
+      loadCnt--;
+      var link = load.linkRecord;
+      if (link) {
+        for (var i = 0; i < link.dependencies.length; i++) {
+          var depLoad = link.dependencyInstantiations[i];
+          if (!(depLoad instanceof ModuleNamespace))
+            queueLoad(depLoad);
         }
       }
-    });
+      if (loadCnt === 0)
+        resolve();
+    }
+    queueLoad(load);
+  });
 }
 
 /*
@@ -977,31 +960,34 @@ RegisterLoader$1.prototype.registerDynamic = function (key, deps, executingRequi
 };
 
 // ContextualLoader class
-// backwards-compatible with previous System.register context argument by exposing .id
+// backwards-compatible with previous System.register context argument by exposing .id, .key
 function ContextualLoader (loader, key) {
   this.loader = loader;
   this.key = this.id = key;
+  this.meta = {
+    url: key
+    // scriptElement: null
+  };
 }
-ContextualLoader.prototype.constructor = function () {
+/*ContextualLoader.prototype.constructor = function () {
   throw new TypeError('Cannot subclass the contextual loader only Reflect.Loader.');
-};
+};*/
 ContextualLoader.prototype.import = function (key) {
+  if (this.loader.trace)
+    this.loader.loads[this.key].dynamicDeps.push(key);
   return this.loader.import(key, this.key);
 };
-ContextualLoader.prototype.resolve = function (key) {
+/*ContextualLoader.prototype.resolve = function (key) {
   return this.loader.resolve(key, this.key);
-};
+};*/
-ContextualLoader.prototype.load = function (key) {
-  return this.loader.load(key, this.key);
-};
 
 // this is the execution function bound to the Module namespace record
 function ensureEvaluate (loader, load, link, registry, state, seen) {
   if (load.module)
     return load.module;
 
-  if (link.error)
+  if (load.evalError)
-    throw link.error;
+    throw load.evalError;
 
   if (seen && seen.indexOf(load) !== -1)
     return load.linkRecord.moduleObj;
@@ -1009,10 +995,8 @@ function ensureEvaluate (loader, load, link, registry, state, seen) {
   // for ES loads we always run ensureEvaluate on top-level, so empty seen is passed regardless
   // for dynamic loads, we pass seen if also dynamic
   var err = doEvaluate(loader, load, link, registry, state, link.setters ? [] : seen || []);
-  if (err) {
+  if (err)
-    clearLoadErrors(loader, load);
     throw err;
-  }
 
   return load.module;
 }
@@ -1030,7 +1014,7 @@ function makeDynamicRequire (loader, key, dependencies, dependencyInstantiations
         else
           module = ensureEvaluate(loader, depLoad, depLoad.linkRecord, registry, state, seen);
 
-        return module.__useDefault ? module.default : module;
+        return '__useDefault' in module ? module.__useDefault : module;
       }
     }
     throw new Error('Module ' + name + ' not declared as a System.registerDynamic dependency of ' + key);
@@ -1057,16 +1041,19 @@ function doEvaluate (loader, load, link, registry, state, seen) {
       // custom Module returned from instantiate
       depLink = depLoad.linkRecord;
       if (depLink && seen.indexOf(depLoad) === -1) {
-        if (depLink.error)
+        if (depLoad.evalError)
-          err = depLink.error;
+          err = depLoad.evalError;
         else
           // dynamic / declarative boundaries clear the "seen" list
           // we just let cross format circular throw as would happen in real implementations
           err = doEvaluate(loader, depLoad, depLink, registry, state, depLink.setters ? seen : []);
       }
 
-      if (err)
+      if (err) {
-        return link.error = LoaderError__Check_error_message_for_loader_stack(err, 'Evaluating ' + load.key);
+        load.linkRecord = undefined;
+        load.evalError = LoaderError__Check_error_message_for_loader_stack(err, 'Evaluating ' + load.key);
+        return load.evalError;
+      }
     }
   }
 
@@ -1085,10 +1072,10 @@ function doEvaluate (loader, load, link, registry, state, seen) {
       Object.defineProperty(module, 'exports', {
         configurable: true,
         set: function (exports) {
-          moduleObj.default = exports;
+          moduleObj.default = moduleObj.__useDefault = exports;
         },
         get: function () {
-          return moduleObj.default;
+          return moduleObj.__useDefault;
         }
       });
 
@@ -1102,26 +1089,26 @@ function doEvaluate (loader, load, link, registry, state, seen) {
       err = dynamicExecute(link.execute, require, moduleObj.default, module);
 
       // pick up defineProperty calls to module.exports when we can
-      if (module.exports !== moduleObj.default)
+      if (module.exports !== moduleObj.__useDefault)
-        moduleObj.default = module.exports;
+        moduleObj.default = moduleObj.__useDefault = module.exports;
 
       var moduleDefault = moduleObj.default;
 
       // __esModule flag extension support via lifting
       if (moduleDefault && moduleDefault.__esModule) {
-        if (moduleObj.__useDefault)
-          delete moduleObj.__useDefault;
         for (var p in moduleDefault) {
           if (Object.hasOwnProperty.call(moduleDefault, p))
             moduleObj[p] = moduleDefault[p];
         }
-        moduleObj.__esModule = true;
       }
     }
   }
 
+  // dispose link record
+  load.linkRecord = undefined;
+
   if (err)
-    return link.error = LoaderError__Check_error_message_for_loader_stack(err, 'Evaluating ' + load.key);
+    return load.evalError = LoaderError__Check_error_message_for_loader_stack(err, 'Evaluating ' + load.key);
 
   registry[load.key] = load.module = new ModuleNamespace(link.moduleObj);
 
@@ -1134,9 +1121,6 @@ function doEvaluate (loader, load, link, registry, state, seen) {
         load.importerSetters[i](load.module);
     load.importerSetters = undefined;
   }
-
-  // dispose link record
-  load.linkRecord = undefined;
 }
 
 // {} is the closest we can get to call(undefined)
@@ -1212,7 +1196,7 @@ if (typeof document != 'undefined' && document.getElementsByTagName) {
         }
         // anonymous modules supported via a custom naming scheme and registry
         else {
-          var uri = './<anon' + ++anonCnt + '>';
+          var uri = './<anon' + ++anonCnt + '>.js';
           if (script.id !== ""){
             uri = "./" + script.id;
           }

vendor/browser-es-module-loader/src/browser-es-module-loader.js

@@ -52,7 +52,7 @@ if (typeof document != 'undefined' && document.getElementsByTagName) {
         }
         // anonymous modules supported via a custom naming scheme and registry
         else {
-          var uri = './<anon' + ++anonCnt + '>';
+          var uri = './<anon' + ++anonCnt + '>.js';
           if (script.id !== ""){
             uri = "./" + script.id;
           }

vnc.html

@@ -329,9 +329,9 @@
                  style for example -->
             <textarea id="noVNC_keyboardinput" autocapitalize="off"
                 autocorrect="off" autocomplete="off" spellcheck="false"
-                mozactionhint="Enter"></textarea>
+                mozactionhint="Enter" tabindex="-1"></textarea>
 
-            <canvas id="noVNC_canvas" width="0" height="0">
+            <canvas id="noVNC_canvas" width="0" height="0" tabindex="-1">
                         Canvas not supported.
             </canvas>
         </div>