noVNC 1.4.0

Changing the ::after element to be displayed as 'block' lets it be
positioned using relative. This means we can remove the confusing
"position: relative" from the checkbox.

.eslintrc

@@ -1,10 +1,11 @@
 {
     "env": {
         "browser": true,
-        "es6": true
+        "es2020": true
     },
     "parserOptions": {
-        "sourceType": "module"
+        "sourceType": "module",
+        "ecmaVersion": 2020
     },
     "extends": "eslint:recommended",
     "rules": {
@@ -25,9 +26,13 @@
 
         "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
         "indent": ["error", 4, { "SwitchCase": 1,
+                                 "VariableDeclarator": "first",
+                                 "FunctionDeclaration": { "parameters": "first" },
+                                 "FunctionExpression": { "parameters": "first" },
                                  "CallExpression": { "arguments": "first" },
                                  "ArrayExpression": "first",
                                  "ObjectExpression": "first",
+                                 "ImportDeclaration": "first",
                                  "ignoreComments": true }],
         "comma-spacing": ["error"],
         "comma-style": ["error"],
@@ -44,5 +49,6 @@
                                                    "named": "never",
                                                    "asyncArrow": "always" }],
         "switch-colon-spacing": ["error"],
+        "camelcase": ["error", { allow: ["^XK_", "^XF86XK_"] }],
     }
 }

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Question or discussion
+    url: https://groups.google.com/forum/?fromgroups#!forum/novnc
+    about: Ask a question or start a discussion

.github/workflows/deploy.yml

@@ -0,0 +1,97 @@
+name: Publish
+
+on:
+  push:
+  pull_request:
+  release:
+    types: [published]
+
+jobs:
+  npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: |
+          GITREV=$(git rev-parse --short HEAD)
+          echo $GITREV
+          sed -i "s/^\(.*\"version\".*\)\"\([^\"]\+\)\"\(.*\)\$/\1\"\2-g$GITREV\"\3/" package.json
+        if: github.event_name != 'release'
+      - uses: actions/setup-node@v3
+        with:
+          # Needs to be explicitly specified for auth to work
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install
+      - uses: actions/upload-artifact@v3
+        with:
+          name: npm
+          path: lib
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: |
+          github.repository == 'novnc/noVNC' &&
+          github.event_name == 'release' &&
+          !github.event.release.prerelease
+      - run: npm publish --access public --tag beta
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: |
+          github.repository == 'novnc/noVNC' &&
+          github.event_name == 'release' &&
+          github.event.release.prerelease
+      - run: npm publish --access public --tag dev
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: |
+          github.repository == 'novnc/noVNC' &&
+          github.event_name == 'push' &&
+          github.event.ref == 'refs/heads/master'
+  snap:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: |
+          GITREV=$(git rev-parse --short HEAD)
+          echo $GITREV
+          sed -i "s/^\(.*\"version\".*\)\"\([^\"]\+\)\"\(.*\)\$/\1\"\2-g$GITREV\"\3/" package.json
+        if: github.event_name != 'release'
+      - run: |
+          VERSION=$(grep '"version"' package.json | cut -d '"' -f 4)
+          echo $VERSION
+          sed -i "s/^version:.*/version: '$VERSION'/" snap/snapcraft.yaml
+      - uses: snapcore/action-build@v1
+        id: snapcraft
+      - uses: actions/upload-artifact@v3
+        with:
+          name: snap
+          path: ${{ steps.snapcraft.outputs.snap }}
+      - uses: snapcore/action-publish@v1
+        with:
+          snap: ${{ steps.snapcraft.outputs.snap }}
+          release: stable
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_LOGIN }}
+        if: |
+          github.repository == 'novnc/noVNC' &&
+          github.event_name == 'release' &&
+          !github.event.release.prerelease
+      - uses: snapcore/action-publish@v1
+        with:
+          snap: ${{ steps.snapcraft.outputs.snap }}
+          release: beta
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_LOGIN }}
+        if: |
+          github.repository == 'novnc/noVNC' &&
+          github.event_name == 'release' &&
+          github.event.release.prerelease
+      - uses: snapcore/action-publish@v1
+        with:
+          snap: ${{ steps.snapcraft.outputs.snap }}
+          release: edge
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_LOGIN }}
+        if: |
+          github.repository == 'novnc/noVNC' &&
+          github.event_name == 'push' &&
+          github.event.ref == 'refs/heads/master'

.github/workflows/lint.yml

@@ -0,0 +1,19 @@
+name: Lint
+
+on: [push, pull_request]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm update
+      - run: npm run lint
+  html:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm update
+      - run: git ls-tree --name-only -r HEAD | grep -E "[.](html|css)$" | xargs ./utils/validate

.github/workflows/test.yml

@@ -0,0 +1,28 @@
+name: Test
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+          - windows-latest
+        browser:
+          - ChromeHeadless
+          - FirefoxHeadless
+        include:
+          - os: macos-latest
+            browser: Safari
+          - os: windows-latest
+            browser: EdgeHeadless
+      fail-fast: false
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm update
+      - run: npm run test
+        env:
+          TEST_BROWSER_NAME: ${{ matrix.browser }}

.github/workflows/translate.yml

@@ -0,0 +1,15 @@
+name: Translate
+
+on: [push, pull_request]
+
+jobs:
+  translate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm update
+      - run: sudo apt-get install gettext
+      - run: make -C po update-pot
+      - run: make -C po update-po
+      - run: make -C po update-js

.travis.yml

@@ -1,58 +0,0 @@
-language: node_js
-sudo: false
-cache:
-  directories:
-  - node_modules
-node_js:
- - 6
-env:
-  matrix:
-  - TEST_BROWSER_NAME=chrome TEST_BROWSER_OS='Windows 10'
-# FIXME Skip tests in Linux since Sauce Labs browser versions are ancient.
-#  - TEST_BROWSER_NAME=chrome TEST_BROWSER_OS='Linux'
-  - TEST_BROWSER_NAME=chrome TEST_BROWSER_OS='OS X 10.11'
-  - TEST_BROWSER_NAME=firefox TEST_BROWSER_OS='Windows 10'
-#  - TEST_BROWSER_NAME=firefox TEST_BROWSER_OS='Linux'
-  - TEST_BROWSER_NAME=firefox TEST_BROWSER_OS='OS X 10.11'
-  - TEST_BROWSER_NAME='internet explorer' TEST_BROWSER_OS='Windows 10'
-  - TEST_BROWSER_NAME='internet explorer' TEST_BROWSER_OS='Windows 7'
-  - TEST_BROWSER_NAME=microsoftedge TEST_BROWSER_OS='Windows 10'
-  - TEST_BROWSER_NAME=safari TEST_BROWSER_OS='OS X 10.13'
-before_script: npm install -g karma-cli
-addons:
-  sauce_connect:
-    username: "directxman12"
-  jwt:
-    secure: "d3ekMYslpn6R4f0ajtRMt9SUFmNGDiItHpqaXC5T4KI0KMEsxgvEOfJot5PiFFJWg1DSpJZH6oaW2UxGZ3duJLZrXIEd/JePY8a6NtT35BNgiDPgcp+eu2Bu3rhrSNg7/HEsD1ma+JeUTnv18Ai5oMFfCCQJx2J6osIxyl/ZVxA="
-stages:
-- lint
-- test
-- name: deploy
-  if: tag is PRESENT
-jobs:
-  include:
-  - stage: lint
-    env:
-    addons:
-    before_script:
-    script: npm run lint
-  -
-    env:
-    addons:
-    before_script:
-    script: git ls-tree --name-only -r HEAD | grep -E "[.](html|css)$" | xargs ./utils/validate
-  - stage: deploy
-    env:
-    addons:
-    script: skip
-    before_script: skip
-    deploy:
-      provider: npm
-      email: ossman@cendio.se
-      api_key:
-        secure: "Qq2Mi9xQawO2zlAigzshzMu2QMHvu1IaN9l0ZIivE99wHJj7eS5f4miJ9wB+/mWRRgb3E8uj9ZRV24+Oc36drlBTU9sz+lHhH0uFMfAIseceK64wZV9sLAZm472fmPp2xdUeTCCqPaRy7g1XBqiJ0LyZvEFLsRijqcLjPBF+b8w="
-      on:
-        tags: true
-        repo: novnc/noVNC
-
-

AUTHORS

@@ -1,9 +1,9 @@
 maintainers:
-- Joel Martin (@kanaka)
-- Solly Ross (@directxman12)
 - Samuel Mannehed for Cendio AB (@samhed)
 - Pierre Ossman for Cendio AB (@CendioOssman)
 maintainersEmeritus:
+- Joel Martin (@kanaka)
+- Solly Ross (@directxman12)
 - @astrand 
 contributors:
 # There are a bunch of people that should be here.

LICENSE.txt

@@ -1,4 +1,4 @@
-noVNC is Copyright (C) 2018 The noVNC Authors
+noVNC is Copyright (C) 2022 The noVNC Authors
 (./AUTHORS)
 
 The noVNC core library files are licensed under the MPL 2.0 (Mozilla
@@ -42,12 +42,6 @@ licenses (all MPL 2.0 compatible):
 
     vendor/pako/            : MIT
 
-    vendor/browser-es-module-loader/src/ : MIT
-
-    vendor/browser-es-module-loader/dist/ : Various BSD style licenses
-
-    vendor/promise.js       : MIT
-
 Any other files not mentioned above are typically marked with
 a copyright/license header at the top of the file. The default noVNC
 license is MPL-2.0.

README.md

@@ -1,6 +1,7 @@
 ## noVNC: HTML VNC Client Library and Application
 
-[![Build Status](https://travis-ci.org/novnc/noVNC.svg?branch=master)](https://travis-ci.org/novnc/noVNC)
+[![Test Status](https://github.com/novnc/noVNC/workflows/Test/badge.svg)](https://github.com/novnc/noVNC/actions?query=workflow%3ATest)
+[![Lint Status](https://github.com/novnc/noVNC/workflows/Lint/badge.svg)](https://github.com/novnc/noVNC/actions?query=workflow%3ALint)
 
 ### Description
 
@@ -24,6 +25,7 @@ for a more complete list with additional info and links.
 - [Browser Requirements](#browser-requirements)
 - [Server Requirements](#server-requirements)
 - [Quick Start](#quick-start)
+- [Installation from Snap Package](#installation-from-snap-package)
 - [Integration and Deployment](#integration-and-deployment)
 - [Authors/Contributors](#authorscontributors)
 
@@ -63,11 +65,16 @@ Please tweet [@noVNC](http://www.twitter.com/noVNC) if you do.
 ### Features
 
 * Supports all modern browsers including mobile (iOS, Android)
-* Supported VNC encodings: raw, copyrect, rre, hextile, tight, tightPNG
+* Supported authentication methods: none, classical VNC, RealVNC's
+  RSA-AES, Tight, VeNCrypt Plain, XVP, Apple's Diffie-Hellman,
+  UltraVNC's MSLogonII
+* Supported VNC encodings: raw, copyrect, rre, hextile, tight, tightPNG,
+  ZRLE, JPEG
 * Supports scaling, clipping and resizing the desktop
 * Local cursor rendering
-* Clipboard copy/paste
+* Clipboard copy/paste with full Unicode support
 * Translations
+* Touch gestures for emulating common mouse actions
 * Licensed mainly under the [MPL 2.0](http://www.mozilla.org/MPL/2.0/), see
   [the license document](LICENSE.txt) for details
 
@@ -88,7 +95,7 @@ noVNC uses many modern web technologies so a formal requirement list is
 not available. However these are the minimum versions we are currently
 aware of:
 
-* Chrome 49, Firefox 44, Safari 10, Opera 36, IE 11, Edge 12
+* Chrome 64, Firefox 79, Safari 13.4, Opera 51, Edge 79
 
 
 ### Server Requirements
@@ -105,16 +112,85 @@ proxy.
 
 ### Quick Start
 
-* Use the launch script to automatically download and start websockify, which
+* Use the `novnc_proxy` script to automatically download and start websockify, which
   includes a mini-webserver and the WebSockets proxy. The `--vnc` option is
   used to specify the location of a running VNC server:
 
-    `./utils/launch.sh --vnc localhost:5901`
+    `./utils/novnc_proxy --vnc localhost:5901`
+    
+* If you don't need to expose the web server to public internet, you can
+  bind to localhost:
+  
+    `./utils/novnc_proxy --vnc localhost:5901 --listen localhost:6081`
 
-* Point your browser to the cut-and-paste URL that is output by the launch
+* Point your browser to the cut-and-paste URL that is output by the `novnc_proxy`
   script. Hit the Connect button, enter a password if the VNC server has one
   configured, and enjoy!
 
+### Installation from Snap Package
+Running the command below will install the latest release of noVNC from Snap:
+
+`sudo snap install novnc`
+
+#### Running noVNC from Snap Directly
+
+You can run the Snap-package installed novnc directly with, for example:
+
+`novnc --listen 6081 --vnc localhost:5901 # /snap/bin/novnc if /snap/bin is not in your PATH`
+
+If you want to use certificate files, due to standard Snap confinement restrictions you need to have them in the /home/\<user\>/snap/novnc/current/ directory. If your username is jsmith an example command would be:
+  
+  `novnc --listen 8443 --cert ~jsmith/snap/novnc/current/self.crt --key ~jsmith/snap/novnc/current/self.key --vnc ubuntu.example.com:5901`
+
+#### Running noVNC from Snap as a Service (Daemon)
+The Snap package also has the capability to run a 'novnc' service which can be 
+configured to listen on multiple ports connecting to multiple VNC servers 
+(effectively a service runing multiple instances of novnc).
+Instructions (with example values):
+
+List current services (out-of-box this will be blank):
+
+```
+sudo snap get novnc services
+Key             Value
+services.n6080  {...}
+services.n6081  {...}
+```
+
+Create a new service that listens on port 6082 and connects to the VNC server 
+running on port 5902 on localhost:
+
+`sudo snap set novnc services.n6082.listen=6082 services.n6082.vnc=localhost:5902`
+
+(Any services you define with 'snap set' will be automatically started)
+Note that the name of the service, 'n6082' in this example, can be anything 
+as long as it doesn't start with a number or contain spaces/special characters.
+
+View the configuration of the service just created:
+
+```
+sudo snap get novnc services.n6082
+Key                    Value
+services.n6082.listen  6082
+services.n6082.vnc     localhost:5902
+```
+
+Disable a service (note that because of a limitation in  Snap it's currently not 
+possible to unset config variables, setting them to blank values is the way 
+to disable a service):
+
+`sudo snap set novnc services.n6082.listen='' services.n6082.vnc=''`
+
+(Any services you set to blank with 'snap set' like this will be automatically stopped)
+
+Verify that the service is disabled (blank values):
+
+```
+sudo snap get novnc services.n6082
+Key                    Value
+services.n6082.listen  
+services.n6082.vnc
+```
 
 ### Integration and Deployment
 
@@ -131,16 +207,18 @@ See [AUTHORS](AUTHORS) for a (full-ish) list of authors.  If you're not on
 that list and you think you should be, feel free to send a PR to fix that.
 
 * Core team:
-    * [Joel Martin](https://github.com/kanaka)
     * [Samuel Mannehed](https://github.com/samhed) (Cendio)
-    * [Peter Åstrand](https://github.com/astrand) (Cendio)
-    * [Solly Ross](https://github.com/DirectXMan12) (Red Hat / OpenStack)
     * [Pierre Ossman](https://github.com/CendioOssman) (Cendio)
 
+* Previous core contributors:
+    * [Joel Martin](https://github.com/kanaka) (Project founder)
+    * [Solly Ross](https://github.com/DirectXMan12) (Red Hat / OpenStack)
+
 * Notable contributions:
     * UI and Icons : Pierre Ossman, Chris Gordon
     * Original Logo : Michael Sersen
     * tight encoding : Michael Tinglof (Mercuri.ca)
+    * RealVNC RSA AES authentication : USTC Vlab Team
 
 * Included libraries:
     * base64 : Martijn Pieters (Digital Creations 2), Samuel Sieb (sieb.net)

VERSION

@@ -1 +0,0 @@
-1.1.0

app/error-handler.js

@@ -1,58 +1,79 @@
-// NB: this should *not* be included as a module until we have
-// native support in the browsers, so that our error handler
-// can catch script-loading errors.
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2019 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
 
-// No ES6 can be used in this file since it's used for the translation
-/* eslint-disable prefer-arrow-callback */
+// Fallback for all uncought errors
+function handleError(event, err) {
+    try {
+        const msg = document.getElementById('noVNC_fallback_errormsg');
 
-(function _scope() {
-    "use strict";
-
-    // Fallback for all uncought errors
-    function handleError(event, err) {
-        try {
-            const msg = document.getElementById('noVNC_fallback_errormsg');
-
-            // Only show the initial error
-            if (msg.hasChildNodes()) {
-                return false;
-            }
-
-            let div = document.createElement("div");
-            div.classList.add('noVNC_message');
-            div.appendChild(document.createTextNode(event.message));
-            msg.appendChild(div);
-
-            if (event.filename) {
-                div = document.createElement("div");
-                div.className = 'noVNC_location';
-                let text = event.filename;
-                if (event.lineno !== undefined) {
-                    text += ":" + event.lineno;
-                    if (event.colno !== undefined) {
-                        text += ":" + event.colno;
-                    }
-                }
-                div.appendChild(document.createTextNode(text));
-                msg.appendChild(div);
-            }
-
-            if (err && err.stack) {
-                div = document.createElement("div");
-                div.className = 'noVNC_stack';
-                div.appendChild(document.createTextNode(err.stack));
-                msg.appendChild(div);
-            }
-
-            document.getElementById('noVNC_fallback_error')
-                .classList.add("noVNC_open");
-        } catch (exc) {
-            document.write("noVNC encountered an error.");
+        // Work around Firefox bug:
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=1685038
+        if (event.message === "ResizeObserver loop completed with undelivered notifications.") {
+            return false;
         }
-        // Don't return true since this would prevent the error
-        // from being printed to the browser console.
-        return false;
+
+        // Only show the initial error
+        if (msg.hasChildNodes()) {
+            return false;
+        }
+
+        let div = document.createElement("div");
+        div.classList.add('noVNC_message');
+        div.appendChild(document.createTextNode(event.message));
+        msg.appendChild(div);
+
+        if (event.filename) {
+            div = document.createElement("div");
+            div.className = 'noVNC_location';
+            let text = event.filename;
+            if (event.lineno !== undefined) {
+                text += ":" + event.lineno;
+                if (event.colno !== undefined) {
+                    text += ":" + event.colno;
+                }
+            }
+            div.appendChild(document.createTextNode(text));
+            msg.appendChild(div);
+        }
+
+        if (err && err.stack) {
+            div = document.createElement("div");
+            div.className = 'noVNC_stack';
+            div.appendChild(document.createTextNode(err.stack));
+            msg.appendChild(div);
+        }
+
+        document.getElementById('noVNC_fallback_error')
+            .classList.add("noVNC_open");
+
+    } catch (exc) {
+        document.write("noVNC encountered an error.");
     }
-    window.addEventListener('error', function onerror(evt) { handleError(evt, evt.error); });
-    window.addEventListener('unhandledrejection', function onreject(evt) { handleError(evt.reason, evt.reason); });
-})();
+
+    // Try to disable keyboard interaction, best effort
+    try {
+        // Remove focus from the currently focused element in order to
+        // prevent keyboard interaction from continuing
+        if (document.activeElement) { document.activeElement.blur(); }
+
+        // Don't let any element be focusable when showing the error
+        let keyboardFocusable = 'a[href], button, input, textarea, select, details, [tabindex]';
+        document.querySelectorAll(keyboardFocusable).forEach((elem) => {
+            elem.setAttribute("tabindex", "-1");
+        });
+    } catch (exc) {
+        // Do nothing
+    }
+
+    // Don't return true since this would prevent the error
+    // from being printed to the browser console.
+    return false;
+}
+
+window.addEventListener('error', evt => handleError(evt, evt.error));
+window.addEventListener('unhandledrejection', evt => handleError(evt.reason, evt.reason));

app/images/icons/Makefile

@@ -1,42 +1,42 @@
-ICONS := \
-	novnc-16x16.png \
-	novnc-24x24.png \
-	novnc-32x32.png \
-	novnc-48x48.png \
-	novnc-64x64.png
+BROWSER_SIZES := 16 24 32 48 64
+#ANDROID_SIZES := 72 96 144 192
+# FIXME: The ICO is limited to 8 icons due to a Chrome bug:
+#        https://bugs.chromium.org/p/chromium/issues/detail?id=1381393
+ANDROID_SIZES := 96 144 192
+WEB_ICON_SIZES := $(BROWSER_SIZES) $(ANDROID_SIZES)
 
-ANDROID_LAUNCHER := \
-	novnc-48x48.png \
-	novnc-72x72.png \
-	novnc-96x96.png \
-	novnc-144x144.png \
-	novnc-192x192.png
+#IOS_1X_SIZES := 20 29 40 76 # No such devices exist anymore
+IOS_2X_SIZES := 40 58 80 120 152 167
+IOS_3X_SIZES := 60 87 120 180
+ALL_IOS_SIZES := $(IOS_1X_SIZES) $(IOS_2X_SIZES) $(IOS_3X_SIZES)
 
-IPHONE_LAUNCHER := \
-	novnc-60x60.png \
-	novnc-120x120.png
-
-IPAD_LAUNCHER := \
-	novnc-76x76.png \
-	novnc-152x152.png
-
-ALL_ICONS := $(ICONS) $(ANDROID_LAUNCHER) $(IPHONE_LAUNCHER) $(IPAD_LAUNCHER)
+ALL_ICONS := \
+	$(ALL_IOS_SIZES:%=novnc-ios-%.png) \
+	novnc.ico
 
 all: $(ALL_ICONS)
 
-novnc-16x16.png: novnc-icon-sm.svg
-	convert -density 90 \
-		-background transparent "$<" "$@"
-novnc-24x24.png: novnc-icon-sm.svg
-	convert -density 135 \
-		-background transparent "$<" "$@"
-novnc-32x32.png: novnc-icon-sm.svg
-	convert -density 180 \
-		-background transparent "$<" "$@"
+# Our testing shows that the ICO file need to be sorted in largest to
+# smallest to get the apporpriate behviour
+WEB_ICON_SIZES_REVERSE := $(shell echo $(WEB_ICON_SIZES) | tr ' ' '\n' | sort -nr | tr '\n' ' ')
+WEB_BASE_ICONS := $(WEB_ICON_SIZES_REVERSE:%=novnc-%.png)
+.INTERMEDIATE: $(WEB_BASE_ICONS)
 
+novnc.ico: $(WEB_BASE_ICONS)
+	convert $(WEB_BASE_ICONS) "$@"
+
+# General conversion
 novnc-%.png: novnc-icon.svg
-	convert -density $$[`echo $* | cut -d x -f 1` * 90 / 48] \
-		-background transparent "$<" "$@"
+	convert -depth 8 -background transparent \
+		-size $*x$* "$(lastword $^)" "$@"
+
+# iOS icons use their own SVG
+novnc-ios-%.png: novnc-ios-icon.svg
+	convert -depth 8 -background transparent \
+		-size $*x$* "$(lastword $^)" "$@"
+
+# The smallest sizes are generated using a different SVG
+novnc-16.png novnc-24.png novnc-32.png: novnc-icon-sm.svg
 
 clean:
 	rm -f *.png

app/images/icons/novnc-ios-icon.svg

@@ -0,0 +1,183 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 48 48.000001"
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="novnc-ios-icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="27.356195"
+     inkscape:cy="17.810253"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:window-width="2560"
+     inkscape:window-height="1371"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4169" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1004.3621)">
+    <rect
+       style="opacity:1;fill:#494949;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect4167"
+       width="48"
+       height="48"
+       x="0"
+       y="1004.3621"
+       inkscape:label="background" />
+    <path
+       style="opacity:1;fill:#313131;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 0,1004.3621 v 48 h 20 c 15.512,0 28,-16.948 28,-38 v -10 z"
+       id="rect4173"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccc"
+       inkscape:label="darker_grey_plate" />
+    <g
+       id="g4300"
+       style="display:inline;fill:#000000;fill-opacity:1;stroke:none"
+       transform="translate(0.5,0.5)"
+       inkscape:label="shadows">
+      <g
+         id="g4302"
+         style="fill:#000000;fill-opacity:1;stroke:none"
+         inkscape:label="no">
+        <path
+           sodipodi:nodetypes="scsccsssscccs"
+           d="m 11.986926,1016.3621 c 0.554325,0 1.025987,0.2121 1.414987,0.6362 0.398725,0.4138 0.600909,0.9155 0.598087,1.5052 v 6.8586 h -2 v -6.8914 c 0,-0.072 -0.03404,-0.1086 -0.102113,-0.1086 H 7.1021125 C 7.0340375,1018.3621 7,1018.3983 7,1018.4707 v 6.8914 H 5 v -9 z"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path4304"
+           inkscape:connector-curvature="0"
+           inkscape:label="n" />
+        <path
+           sodipodi:nodetypes="sscsscsscsscssssssssss"
+           d="m 17.013073,1016.3621 h 4.973854 c 0.554325,0 1.025987,0.2121 1.414986,0.6362 0.398725,0.4138 0.598087,0.9155 0.598087,1.5052 v 4.7172 c 0,0.5897 -0.199362,1.0966 -0.598087,1.5207 -0.388999,0.4138 -0.860661,0.6207 -1.414986,0.6207 h -4.973854 c -0.554325,0 -1.030849,-0.2069 -1.429574,-0.6207 C 15.1945,1024.3173 15,1023.8104 15,1023.2207 v -4.7172 c 0,-0.5897 0.1945,-1.0914 0.583499,-1.5052 0.398725,-0.4241 0.875249,-0.6362 1.429574,-0.6362 z m 4.884815,2 h -4.795776 c -0.06808,0 -0.102112,0.036 -0.102112,0.1086 v 4.7828 c 0,0.072 0.03404,0.1086 0.102112,0.1086 h 4.795776 c 0.06807,0 0.102112,-0.036 0.102112,-0.1086 v -4.7828 c 0,-0.072 -0.03404,-0.1086 -0.102112,-0.1086 z"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path4306"
+           inkscape:connector-curvature="0"
+           inkscape:label="o" />
+      </g>
+      <g
+         id="g4308"
+         style="fill:#000000;fill-opacity:1;stroke:none"
+         inkscape:label="VNC">
+        <path
+           sodipodi:nodetypes="cccccccc"
+           d="m 12,1036.9177 4.768114,-8.5556 H 19 l -6,11 h -2 l -6,-11 h 2.2318854 z"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path4310"
+           inkscape:connector-curvature="0"
+           inkscape:label="V" />
+        <path
+           sodipodi:nodetypes="ccccccccccc"
+           d="m 29,1036.3621 v -8 h 2 v 11 h -2 l -7,-8 v 8 h -2 v -11 h 2 z"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path4312"
+           inkscape:connector-curvature="0"
+           inkscape:label="N" />
+        <path
+           sodipodi:nodetypes="cssssccscsscscc"
+           d="m 43,1030.3621 h -8.897887 c -0.06808,0 -0.102113,0.036 -0.102113,0.1069 v 6.7862 c 0,0.071 0.03404,0.1069 0.102113,0.1069 H 43 v 2 h -8.972339 c -0.56405,0 -1.045437,-0.2037 -1.444162,-0.6111 C 32.1945,1038.3334 32,1037.8292 32,1037.2385 v -6.7528 c 0,-0.5907 0.1945,-1.0898 0.583499,-1.4972 0.398725,-0.4176 0.880112,-0.6264 1.444162,-0.6264 H 43 Z"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           id="path4314"
+           inkscape:connector-curvature="0"
+           inkscape:label="C" />
+      </g>
+    </g>
+    <g
+       id="g4291"
+       style="stroke:none"
+       inkscape:label="noVNC">
+      <g
+         id="g4282"
+         style="stroke:none"
+         inkscape:label="no">
+        <path
+           inkscape:connector-curvature="0"
+           id="path4143"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#008000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 11.986926,1016.3621 c 0.554325,0 1.025987,0.2121 1.414987,0.6362 0.398725,0.4138 0.600909,0.9155 0.598087,1.5052 l 0,6.8586 -2,0 0,-6.8914 c 0,-0.072 -0.03404,-0.1086 -0.102113,-0.1086 l -4.7957745,0 C 7.0340375,1018.3621 7,1018.3983 7,1018.4707 l 0,6.8914 -2,0 0,-9 z"
+           sodipodi:nodetypes="scsccsssscccs"
+           inkscape:label="n" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path4145"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#008000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 17.013073,1016.3621 4.973854,0 c 0.554325,0 1.025987,0.2121 1.414986,0.6362 0.398725,0.4138 0.598087,0.9155 0.598087,1.5052 l 0,4.7172 c 0,0.5897 -0.199362,1.0966 -0.598087,1.5207 -0.388999,0.4138 -0.860661,0.6207 -1.414986,0.6207 l -4.973854,0 c -0.554325,0 -1.030849,-0.2069 -1.429574,-0.6207 C 15.1945,1024.3173 15,1023.8104 15,1023.2207 l 0,-4.7172 c 0,-0.5897 0.1945,-1.0914 0.583499,-1.5052 0.398725,-0.4241 0.875249,-0.6362 1.429574,-0.6362 z m 4.884815,2 -4.795776,0 c -0.06808,0 -0.102112,0.036 -0.102112,0.1086 l 0,4.7828 c 0,0.072 0.03404,0.1086 0.102112,0.1086 l 4.795776,0 c 0.06807,0 0.102112,-0.036 0.102112,-0.1086 l 0,-4.7828 c 0,-0.072 -0.03404,-0.1086 -0.102112,-0.1086 z"
+           sodipodi:nodetypes="sscsscsscsscssssssssss"
+           inkscape:label="o" />
+      </g>
+      <g
+         id="g4286"
+         style="stroke:none"
+         inkscape:label="VNC">
+        <path
+           inkscape:connector-curvature="0"
+           id="path4147"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 12,1036.9177 4.768114,-8.5556 2.231886,0 -6,11 -2,0 -6,-11 2.2318854,0 z"
+           sodipodi:nodetypes="cccccccc"
+           inkscape:label="V" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path4149"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 29,1036.3621 0,-8 2,0 0,11 -2,0 -7,-8 0,8 -2,0 0,-11 2,0 z"
+           sodipodi:nodetypes="ccccccccccc"
+           inkscape:label="N" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path4151"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:medium;line-height:125%;font-family:Orbitron;-inkscape-font-specification:'Orbitron Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 43,1030.3621 -8.897887,0 c -0.06808,0 -0.102113,0.036 -0.102113,0.1069 l 0,6.7862 c 0,0.071 0.03404,0.1069 0.102113,0.1069 l 8.897887,0 0,2 -8.972339,0 c -0.56405,0 -1.045437,-0.2037 -1.444162,-0.6111 C 32.1945,1038.3334 32,1037.8292 32,1037.2385 l 0,-6.7528 c 0,-0.5907 0.1945,-1.0898 0.583499,-1.4972 0.398725,-0.4176 0.880112,-0.6264 1.444162,-0.6264 l 8.972339,0 z"
+           sodipodi:nodetypes="cssssccscsscscc"
+           inkscape:label="C" />
+      </g>
+    </g>
+  </g>
+</svg>

app/images/mouse_left.svg

@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="25"
-   height="25"
-   viewBox="0 0 25 25"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="mouse_left.svg"
-   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#959595"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="11.313708"
-     inkscape:cx="15.551515"
-     inkscape:cy="12.205592"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-paths="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:object-paths="true"
-     showguides="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1136"
-     inkscape:window-x="1920"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:object-nodes="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:snap-nodes="true"
-     inkscape:snap-global="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4136" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-1027.3622)">
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0068f6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
-       id="path6219" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
-       id="path6217" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
-       id="path6215" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
-       id="rect6178" />
-  </g>
-</svg>

app/images/mouse_middle.svg

@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="25"
-   height="25"
-   viewBox="0 0 25 25"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="mouse_middle.svg"
-   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#959595"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="11.313708"
-     inkscape:cx="15.551515"
-     inkscape:cy="12.205592"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-paths="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:object-paths="true"
-     showguides="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1136"
-     inkscape:window-x="1920"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:object-nodes="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:snap-nodes="true"
-     inkscape:snap-global="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4136" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-1027.3622)">
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
-       id="path6219" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
-       id="path6217" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0068f6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
-       id="path6215" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
-       id="rect6178" />
-  </g>
-</svg>

app/images/mouse_none.svg

@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="25"
-   height="25"
-   viewBox="0 0 25 25"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="mouse_none.svg"
-   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#959595"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="16"
-     inkscape:cx="23.160825"
-     inkscape:cy="13.208262"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-paths="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:object-paths="true"
-     showguides="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1136"
-     inkscape:window-x="1920"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:object-nodes="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:snap-nodes="true"
-     inkscape:snap-global="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4136" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-1027.3622)">
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
-       id="path6219" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
-       id="path6217" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
-       id="path6215" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
-       id="rect6178" />
-  </g>
-</svg>

app/images/mouse_right.svg

@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="25"
-   height="25"
-   viewBox="0 0 25 25"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="mouse_right.svg"
-   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#959595"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="11.313708"
-     inkscape:cx="15.551515"
-     inkscape:cy="12.205592"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-paths="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:object-paths="true"
-     showguides="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1136"
-     inkscape:window-x="1920"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:object-nodes="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:snap-nodes="true"
-     inkscape:snap-global="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4136" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-1027.3622)">
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 8,1030.3622 c -2.1987124,0 -4,1.8013 -4,4 l 0,2 5,0 0,-2 c 0,-1.4738 1.090393,-2.7071 2.5,-2.9492 l 0,-1.0508 -3.5,0 z"
-       id="path6219" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0068f6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 13.5,1030.3622 0,1.0508 c 1.409607,0.2421 2.5,1.4754 2.5,2.9492 l 0,2 5,0 0,-2 c 0,-2.1987 -1.801288,-4 -4,-4 l -3.5,0 z"
-       id="path6217" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 12,1033.3622 c -0.571311,0 -1,0.4287 -1,1 l 0,5 c 0,0.5713 0.428689,1 1,1 l 1,0 c 0.571311,0 1,-0.4287 1,-1 l 0,-5 c 0,-0.5713 -0.428689,-1 -1,-1 l -1,0 z"
-       id="path6215" />
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 4,1038.3622 0,3.5 c 0,4.1377 3.362302,7.5 7.5,7.5 l 2,0 c 4.137698,0 7.5,-3.3623 7.5,-7.5 l 0,-3.5 -5,0 0,1 c 0,1.6447 -1.355293,3 -3,3 l -1,0 c -1.644707,0 -3,-1.3553 -3,-3 l 0,-1 -5,0 z"
-       id="rect6178" />
-  </g>
-</svg>

app/images/windows.svg

@@ -15,18 +15,18 @@
    inkscape:export-xdpi="90"
    sodipodi:docname="windows.svg"
    inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   inkscape:version="0.92.4 (unknown)"
    x="0px"
    y="0px"
-   viewBox="-293 384 25 23"
+   viewBox="-293 384 25 25"
    xml:space="preserve"
    width="25"
-   height="23"><metadata
+   height="25"><metadata
    id="metadata21"><rdf:RDF><cc:Work
        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
    id="defs19" /><sodipodi:namedview
-   pagecolor="#ffffff"
+   pagecolor="#959595"
    bordercolor="#666666"
    borderopacity="1"
    objecttolerance="10"
@@ -35,51 +35,31 @@
    inkscape:pageopacity="0"
    inkscape:pageshadow="2"
    inkscape:window-width="1920"
-   inkscape:window-height="1017"
+   inkscape:window-height="1136"
    id="namedview17"
-   showgrid="false"
-   inkscape:pagecheckerboard="true"
-   inkscape:zoom="9.44"
-   inkscape:cx="-0.84745763"
-   inkscape:cy="12.5"
-   inkscape:window-x="2552"
-   inkscape:window-y="122"
+   showgrid="true"
+   inkscape:pagecheckerboard="false"
+   inkscape:zoom="32"
+   inkscape:cx="3.926913"
+   inkscape:cy="13.255959"
+   inkscape:window-x="1920"
+   inkscape:window-y="27"
    inkscape:window-maximized="1"
-   inkscape:current-layer="svg2" />
+   inkscape:current-layer="svg2"><inkscape:grid
+     type="xygrid"
+     id="grid818" /></sodipodi:namedview>
 <style
    type="text/css"
    id="style2">
 	.st0{fill:#FFFFFF;}
 </style>
-<g
-   id="g14"
-   transform="matrix(1.2624869,0,0,1.3601695,73.614445,-144.84322)">
-	<g
-   id="g12">
-		<path
-   class="st0"
-   d="m -277.4,396 c -0.7,0 -1.3,0 -2,0 -0.4,0 -0.5,-0.1 -0.5,-0.5 0,-1 0,-2 0,-3 0,-0.3 0.2,-0.5 0.5,-0.5 1.3,-0.1 2.6,-0.3 3.9,-0.4 0.4,0 0.7,0.1 0.7,0.6 0,1.1 0,2.2 0,3.3 0,0.4 -0.2,0.6 -0.6,0.6 -0.7,-0.1 -1.4,-0.1 -2,-0.1 z"
-   id="path4"
-   inkscape:connector-curvature="0"
-   style="fill:#ffffff" />
-		<path
-   class="st0"
-   d="m -274.9,399.3 c 0,0.6 0,1.1 0,1.7 0,0.4 -0.1,0.6 -0.6,0.6 -1.4,-0.1 -2.8,-0.3 -4.1,-0.4 -0.3,0 -0.4,-0.3 -0.4,-0.5 0,-1 0,-2 0,-3 0,-0.4 0.2,-0.5 0.6,-0.5 1.3,0 2.6,0 3.9,0 0.5,0 0.6,0.2 0.6,0.6 0,0.4 0,0.9 0,1.5 z"
-   id="path6"
-   inkscape:connector-curvature="0"
-   style="fill:#ffffff" />
-		<path
-   class="st0"
-   d="m -283.5,396 c -0.6,0 -1.3,0 -1.9,0 -0.4,0 -0.6,-0.1 -0.6,-0.6 0,-0.8 0,-1.5 0,-2.3 0,-0.4 0.2,-0.6 0.6,-0.7 1.3,-0.1 2.7,-0.3 4,-0.4 0.4,0 0.5,0.1 0.5,0.5 0,1 0,1.9 0,2.9 0,0.4 -0.2,0.5 -0.5,0.5 -0.8,0.1 -1.5,0.1 -2.1,0.1 z"
-   id="path8"
-   inkscape:connector-curvature="0"
-   style="fill:#ffffff" />
-		<path
-   class="st0"
-   d="m -283.5,397 c 0.6,0 1.3,0 1.9,0 0.4,0 0.6,0.1 0.6,0.5 0,1 0,1.9 0,2.9 0,0.4 -0.2,0.5 -0.5,0.5 -1.3,-0.1 -2.7,-0.3 -4,-0.4 -0.4,0 -0.6,-0.2 -0.6,-0.7 0,-0.7 0,-1.5 0,-2.2 0,-0.5 0.2,-0.7 0.7,-0.7 0.6,0.1 1.2,0.1 1.9,0.1 z"
-   id="path10"
-   inkscape:connector-curvature="0"
-   style="fill:#ffffff" />
-	</g>
-</g>
-</svg>
+
+<path
+   style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+   d="M 21 4 L 11 5.1757812 L 11 12 L 21 12 L 21 4 z M 10 5.2949219 L 4 6 L 4 12 L 10 12 L 10 5.2949219 z "
+   transform="translate(-293,384)"
+   id="path853" /><path
+   id="path858"
+   d="m -272,405 -10,-1.17578 V 397 h 10 z M -283,403.70508 -289,403 v -6 h 6 z"
+   style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+   inkscape:connector-curvature="0" /></svg>

app/locale/README

@@ -0,0 +1 @@
+DO NOT MODIFY THE FILES IN THIS FOLDER, THEY ARE AUTOMATICALLY GENERATED FROM THE PO-FILES.

app/locale/es.json

@@ -4,9 +4,9 @@
     "Connected (unencrypted) to ": "Conectado (sin encriptación) a",
     "Disconnecting...": "Desconectando...",
     "Disconnected": "Desconectado",
-    "Must set host": "Debes configurar el host",
+    "Must set host": "Se debe configurar el host",
     "Reconnecting...": "Reconectando...",
-    "Password is required": "Contraseña es obligatoria",
+    "Password is required": "La contraseña es obligatoria",
     "Disconnect timeout": "Tiempo de desconexión agotado",
     "noVNC encountered an error:": "noVNC ha encontrado un error:",
     "Hide/Show the control bar": "Ocultar/Mostrar la barra de control",
@@ -41,6 +41,7 @@
     "Clear": "Vaciar",
     "Fullscreen": "Pantalla Completa",
     "Settings": "Configuraciones",
+    "Encrypt": "Encriptar",
     "Shared Mode": "Modo Compartido",
     "View Only": "Solo visualización",
     "Clip to Window": "Recortar al tamaño de la ventana",
@@ -51,18 +52,17 @@
     "Remote Resizing": "Cambio de tamaño remoto",
     "Advanced": "Avanzado",
     "Local Cursor": "Cursor Local",
-    "Repeater ID:": "ID del Repetidor",
+    "Repeater ID:": "ID del Repetidor:",
     "WebSocket": "WebSocket",
-    "Encrypt": "",
-    "Host:": "Host",
-    "Port:": "Puesto",
-    "Path:": "Ruta",
+    "Host:": "Host:",
+    "Port:": "Puerto:",
+    "Path:": "Ruta:",
     "Automatic Reconnect": "Reconexión automática",
-    "Reconnect Delay (ms):": "Retraso en la reconexión (ms)",
-    "Logging:": "Logging",
+    "Reconnect Delay (ms):": "Retraso en la reconexión (ms):",
+    "Logging:": "Registrando:",
     "Disconnect": "Desconectar",
     "Connect": "Conectar",
-    "Password:": "Contraseña",
+    "Password:": "Contraseña:",
     "Cancel": "Cancelar",
-    "Canvas not supported.": "Canvas no está soportado"
+    "Canvas not supported.": "Canvas no soportado."
 }

app/locale/fr.json

@@ -0,0 +1,78 @@
+{
+    "HTTPS is required for full functionality": "",
+    "Connecting...": "En cours de connexion...",
+    "Disconnecting...": "Déconnexion en cours...",
+    "Reconnecting...": "Reconnexion en cours...",
+    "Internal error": "Erreur interne",
+    "Must set host": "Doit définir l'hôte",
+    "Connected (encrypted) to ": "Connecté (chiffré) à ",
+    "Connected (unencrypted) to ": "Connecté (non chiffré) à ",
+    "Something went wrong, connection is closed": "Quelque chose s'est mal passé, la connexion a été fermée",
+    "Failed to connect to server": "Échec de connexion au serveur",
+    "Disconnected": "Déconnecté",
+    "New connection has been rejected with reason: ": "Une nouvelle connexion a été rejetée avec motif : ",
+    "New connection has been rejected": "Une nouvelle connexion a été rejetée",
+    "Credentials are required": "Les identifiants sont requis",
+    "noVNC encountered an error:": "noVNC a rencontré une erreur :",
+    "Hide/Show the control bar": "Masquer/Afficher la barre de contrôle",
+    "Drag": "Faire glisser",
+    "Move/Drag Viewport": "Déplacer/faire glisser le Viewport",
+    "Keyboard": "Clavier",
+    "Show Keyboard": "Afficher le clavier",
+    "Extra keys": "Touches supplémentaires",
+    "Show Extra Keys": "Afficher les touches supplémentaires",
+    "Ctrl": "Ctrl",
+    "Toggle Ctrl": "Basculer Ctrl",
+    "Alt": "Alt",
+    "Toggle Alt": "Basculer Alt",
+    "Toggle Windows": "Basculer Windows",
+    "Windows": "Windows",
+    "Send Tab": "Envoyer l'onglet",
+    "Tab": "l'onglet",
+    "Esc": "Esc",
+    "Send Escape": "Envoyer Escape",
+    "Ctrl+Alt+Del": "Ctrl+Alt+Del",
+    "Send Ctrl-Alt-Del": "Envoyer Ctrl-Alt-Del",
+    "Shutdown/Reboot": "Arrêter/Redémarrer",
+    "Shutdown/Reboot...": "Arrêter/Redémarrer...",
+    "Power": "Alimentation",
+    "Shutdown": "Arrêter",
+    "Reboot": "Redémarrer",
+    "Reset": "Réinitialiser",
+    "Clipboard": "Presse-papiers",
+    "Edit clipboard content in the textarea below.": "",
+    "Settings": "Paramètres",
+    "Shared Mode": "Mode partagé",
+    "View Only": "Afficher uniquement",
+    "Clip to Window": "Clip à fenêtre",
+    "Scaling Mode:": "Mode mise à l'échelle :",
+    "None": "Aucun",
+    "Local Scaling": "Mise à l'échelle locale",
+    "Remote Resizing": "Redimensionnement à distance",
+    "Advanced": "Avancé",
+    "Quality:": "Qualité :",
+    "Compression level:": "Niveau de compression :",
+    "Repeater ID:": "ID Répéteur :",
+    "WebSocket": "WebSocket",
+    "Encrypt": "Chiffrer",
+    "Host:": "Hôte :",
+    "Port:": "Port :",
+    "Path:": "Chemin :",
+    "Automatic Reconnect": "Reconnecter automatiquemen",
+    "Reconnect Delay (ms):": "Délai de reconnexion (ms) :",
+    "Show Dot when No Cursor": "Afficher le point lorsqu'il n'y a pas de curseur",
+    "Logging:": "Se connecter :",
+    "Version:": "Version :",
+    "Disconnect": "Déconnecter",
+    "Connect": "Connecter",
+    "Server identity": "",
+    "The server has provided the following identifying information:": "",
+    "Fingerprint:": "",
+    "Please verify that the information is correct and press \"Approve\". Otherwise press \"Reject\".": "",
+    "Approve": "",
+    "Reject": "",
+    "Username:": "Nom d'utilisateur :",
+    "Password:": "Mot de passe :",
+    "Send Credentials": "Envoyer les identifiants",
+    "Cancel": "Annuler"
+}

app/locale/it.json

@@ -0,0 +1,72 @@
+{
+    "Connecting...": "Connessione in corso...",
+    "Disconnecting...": "Disconnessione...",
+    "Reconnecting...": "Riconnessione...",
+    "Internal error": "Errore interno",
+    "Must set host": "Devi impostare l'host",
+    "Connected (encrypted) to ": "Connesso (crittografato) a ",
+    "Connected (unencrypted) to ": "Connesso (non crittografato) a",
+    "Something went wrong, connection is closed": "Qualcosa è andato storto, la connessione è stata chiusa",
+    "Failed to connect to server": "Impossibile connettersi al server",
+    "Disconnected": "Disconnesso",
+    "New connection has been rejected with reason: ": "La nuova connessione è stata rifiutata con motivo: ",
+    "New connection has been rejected": "La nuova connessione è stata rifiutata",
+    "Credentials are required": "Le credenziali sono obbligatorie",
+    "noVNC encountered an error:": "noVNC ha riscontrato un errore:",
+    "Hide/Show the control bar": "Nascondi/Mostra la barra di controllo",
+    "Drag": "",
+    "Move/Drag Viewport": "",
+    "Keyboard": "Tastiera",
+    "Show Keyboard": "Mostra tastiera",
+    "Extra keys": "Tasti Aggiuntivi",
+    "Show Extra Keys": "Mostra Tasti Aggiuntivi",
+    "Ctrl": "Ctrl",
+    "Toggle Ctrl": "Tieni premuto Ctrl",
+    "Alt": "Alt",
+    "Toggle Alt": "Tieni premuto Alt",
+    "Toggle Windows": "Tieni premuto Windows",
+    "Windows": "Windows",
+    "Send Tab": "Invia Tab",
+    "Tab": "Tab",
+    "Esc": "Esc",
+    "Send Escape": "Invia Esc",
+    "Ctrl+Alt+Del": "Ctrl+Alt+Canc",
+    "Send Ctrl-Alt-Del": "Invia Ctrl-Alt-Canc",
+    "Shutdown/Reboot": "Spegnimento/Riavvio",
+    "Shutdown/Reboot...": "Spegnimento/Riavvio...",
+    "Power": "Alimentazione",
+    "Shutdown": "Spegnimento",
+    "Reboot": "Riavvio",
+    "Reset": "Reset",
+    "Clipboard": "Clipboard",
+    "Clear": "Pulisci",
+    "Fullscreen": "Schermo intero",
+    "Settings": "Impostazioni",
+    "Shared Mode": "Modalità condivisa",
+    "View Only": "Sola Visualizzazione",
+    "Clip to Window": "",
+    "Scaling Mode:": "Modalità di ridimensionamento:",
+    "None": "Nessuna",
+    "Local Scaling": "Ridimensionamento Locale",
+    "Remote Resizing": "Ridimensionamento Remoto",
+    "Advanced": "Avanzate",
+    "Quality:": "Qualità:",
+    "Compression level:": "Livello Compressione:",
+    "Repeater ID:": "ID Ripetitore:",
+    "WebSocket": "WebSocket",
+    "Encrypt": "Crittografa",
+    "Host:": "Host:",
+    "Port:": "Porta:",
+    "Path:": "Percorso:",
+    "Automatic Reconnect": "Riconnessione Automatica",
+    "Reconnect Delay (ms):": "Ritardo Riconnessione (ms):",
+    "Show Dot when No Cursor": "Mostra Punto quando Nessun Cursore",
+    "Logging:": "",
+    "Version:": "Versione:",
+    "Disconnect": "Disconnetti",
+    "Connect": "Connetti",
+    "Username:": "Utente:",
+    "Password:": "Password:",
+    "Send Credentials": "Invia Credenziale",
+    "Cancel": "Annulla"
+}

app/locale/ja.json

@@ -0,0 +1,72 @@
+{
+    "Connecting...": "接続しています...",
+    "Disconnecting...": "切断しています...",
+    "Reconnecting...": "再接続しています...",
+    "Internal error": "内部エラー",
+    "Must set host": "ホストを設定する必要があります",
+    "Connected (encrypted) to ": "接続しました (暗号化済み): ",
+    "Connected (unencrypted) to ": "接続しました (暗号化されていません): ",
+    "Something went wrong, connection is closed": "何らかの問題で、接続が閉じられました",
+    "Failed to connect to server": "サーバーへの接続に失敗しました",
+    "Disconnected": "切断しました",
+    "New connection has been rejected with reason: ": "新規接続は次の理由で拒否されました: ",
+    "New connection has been rejected": "新規接続は拒否されました",
+    "Credentials are required": "資格情報が必要です",
+    "noVNC encountered an error:": "noVNC でエラーが発生しました:",
+    "Hide/Show the control bar": "コントロールバーを隠す/表示する",
+    "Drag": "ドラッグ",
+    "Move/Drag Viewport": "ビューポートを移動/ドラッグ",
+    "Keyboard": "キーボード",
+    "Show Keyboard": "キーボードを表示",
+    "Extra keys": "追加キー",
+    "Show Extra Keys": "追加キーを表示",
+    "Ctrl": "Ctrl",
+    "Toggle Ctrl": "Ctrl キーを切り替え",
+    "Alt": "Alt",
+    "Toggle Alt": "Alt キーを切り替え",
+    "Toggle Windows": "Windows キーを切り替え",
+    "Windows": "Windows",
+    "Send Tab": "Tab キーを送信",
+    "Tab": "Tab",
+    "Esc": "Esc",
+    "Send Escape": "Escape キーを送信",
+    "Ctrl+Alt+Del": "Ctrl+Alt+Del",
+    "Send Ctrl-Alt-Del": "Ctrl-Alt-Del を送信",
+    "Shutdown/Reboot": "シャットダウン/再起動",
+    "Shutdown/Reboot...": "シャットダウン/再起動...",
+    "Power": "電源",
+    "Shutdown": "シャットダウン",
+    "Reboot": "再起動",
+    "Reset": "リセット",
+    "Clipboard": "クリップボード",
+    "Clear": "クリア",
+    "Fullscreen": "全画面表示",
+    "Settings": "設定",
+    "Shared Mode": "共有モード",
+    "View Only": "表示のみ",
+    "Clip to Window": "ウィンドウにクリップ",
+    "Scaling Mode:": "スケーリングモード:",
+    "None": "なし",
+    "Local Scaling": "ローカルスケーリング",
+    "Remote Resizing": "リモートでリサイズ",
+    "Advanced": "高度",
+    "Quality:": "品質:",
+    "Compression level:": "圧縮レベル:",
+    "Repeater ID:": "リピーター ID:",
+    "WebSocket": "WebSocket",
+    "Encrypt": "暗号化",
+    "Host:": "ホスト:",
+    "Port:": "ポート:",
+    "Path:": "パス:",
+    "Automatic Reconnect": "自動再接続",
+    "Reconnect Delay (ms):": "再接続する遅延 (ミリ秒):",
+    "Show Dot when No Cursor": "カーソルがないときにドットを表示",
+    "Logging:": "ロギング:",
+    "Version:": "バージョン:",
+    "Disconnect": "切断",
+    "Connect": "接続",
+    "Username:": "ユーザー名:",
+    "Password:": "パスワード:",
+    "Send Credentials": "資格情報を送信",
+    "Cancel": "キャンセル"
+}

app/locale/pt_BR.json

@@ -0,0 +1,72 @@
+{
+    "Connecting...": "Conectando...",
+    "Disconnecting...": "Desconectando...",
+    "Reconnecting...": "Reconectando...",
+    "Internal error": "Erro interno",
+    "Must set host": "É necessário definir o host",
+    "Connected (encrypted) to ": "Conectado (com criptografia) a ",
+    "Connected (unencrypted) to ": "Conectado (sem criptografia) a ",
+    "Something went wrong, connection is closed": "Algo deu errado. A conexão foi encerrada.",
+    "Failed to connect to server": "Falha ao conectar-se ao servidor",
+    "Disconnected": "Desconectado",
+    "New connection has been rejected with reason: ": "A nova conexão foi rejeitada pelo motivo: ",
+    "New connection has been rejected": "A nova conexão foi rejeitada",
+    "Credentials are required": "Credenciais são obrigatórias",
+    "noVNC encountered an error:": "O noVNC encontrou um erro:",
+    "Hide/Show the control bar": "Esconder/mostrar a barra de controles",
+    "Drag": "Arrastar",
+    "Move/Drag Viewport": "Mover/arrastar a janela",
+    "Keyboard": "Teclado",
+    "Show Keyboard": "Mostrar teclado",
+    "Extra keys": "Teclas adicionais",
+    "Show Extra Keys": "Mostar teclas adicionais",
+    "Ctrl": "Ctrl",
+    "Toggle Ctrl": "Pressionar/soltar Ctrl",
+    "Alt": "Alt",
+    "Toggle Alt": "Pressionar/soltar Alt",
+    "Toggle Windows": "Pressionar/soltar Windows",
+    "Windows": "Windows",
+    "Send Tab": "Enviar Tab",
+    "Tab": "Tab",
+    "Esc": "Esc",
+    "Send Escape": "Enviar Esc",
+    "Ctrl+Alt+Del": "Ctrl+Alt+Del",
+    "Send Ctrl-Alt-Del": "Enviar Ctrl-Alt-Del",
+    "Shutdown/Reboot": "Desligar/reiniciar",
+    "Shutdown/Reboot...": "Desligar/reiniciar...",
+    "Power": "Ligar",
+    "Shutdown": "Desligar",
+    "Reboot": "Reiniciar",
+    "Reset": "Reiniciar (forçado)",
+    "Clipboard": "Área de transferência",
+    "Clear": "Limpar",
+    "Fullscreen": "Tela cheia",
+    "Settings": "Configurações",
+    "Shared Mode": "Modo compartilhado",
+    "View Only": "Apenas visualizar",
+    "Clip to Window": "Recortar à janela",
+    "Scaling Mode:": "Modo de dimensionamento:",
+    "None": "Nenhum",
+    "Local Scaling": "Local",
+    "Remote Resizing": "Remoto",
+    "Advanced": "Avançado",
+    "Quality:": "Qualidade:",
+    "Compression level:": "Nível de compressão:",
+    "Repeater ID:": "ID do repetidor:",
+    "WebSocket": "WebSocket",
+    "Encrypt": "Criptografar",
+    "Host:": "Host:",
+    "Port:": "Porta:",
+    "Path:": "Caminho:",
+    "Automatic Reconnect": "Reconexão automática",
+    "Reconnect Delay (ms):": "Atraso da reconexão (ms)",
+    "Show Dot when No Cursor": "Mostrar ponto quando não há cursor",
+    "Logging:": "Registros:",
+    "Version:": "Versão:",
+    "Disconnect": "Desconectar",
+    "Connect": "Conectar",
+    "Username:": "Nome de usuário:",
+    "Password:": "Senha:",
+    "Send Credentials": "Enviar credenciais",
+    "Cancel": "Cancelar"
+}

app/locale/ru.json

@@ -9,26 +9,21 @@
     "Something went wrong, connection is closed": "Что-то пошло не так, подключение разорвано",
     "Failed to connect to server": "Ошибка подключения к серверу",
     "Disconnected": "Отключено",
-    "New connection has been rejected with reason: ": "Подключиться не удалось: ",
-    "New connection has been rejected": "Подключиться не удалось",
-    "Password is required": "Требуется пароль",
+    "New connection has been rejected with reason: ": "Новое соединение отклонено по причине: ",
+    "New connection has been rejected": "Новое соединение отклонено",
+    "Credentials are required": "Требуются учетные данные",
     "noVNC encountered an error:": "Ошибка noVNC: ",
     "Hide/Show the control bar": "Скрыть/Показать контрольную панель",
+    "Drag": "Переместить",
     "Move/Drag Viewport": "Переместить окно",
-    "viewport drag": "Переместить окно",
-    "Active Mouse Button": "Активировать кнопки мыши",
-    "No mousebutton": "Отключить кнопки мыши",
-    "Left mousebutton": "Левая кнопка мыши",
-    "Middle mousebutton": "Средняя  кнопка мыши",
-    "Right mousebutton": "Правая кнопка мыши",
     "Keyboard": "Клавиатура",
     "Show Keyboard": "Показать клавиатуру",
-    "Extra keys": "Доп. кнопки",
-    "Show Extra Keys": "Показать дополнительные кнопки",
+    "Extra keys": "Дополнительные Кнопки",
+    "Show Extra Keys": "Показать Дополнительные Кнопки",
     "Ctrl": "Ctrl",
-    "Toggle Ctrl": "Передать нажатие Ctrl",
+    "Toggle Ctrl": "Переключение нажатия Ctrl",
     "Alt": "Alt",
-    "Toggle Alt": "Передать нажатие Alt",
+    "Toggle Alt": "Переключение нажатия Alt",
     "Toggle Windows": "Переключение вкладок",
     "Windows": "Вкладка",
     "Send Tab": "Передать нажатие Tab",
@@ -48,13 +43,15 @@
     "Fullscreen": "Во весь экран",
     "Settings": "Настройки",
     "Shared Mode": "Общий режим",
-    "View Only": "Просмотр",
+    "View Only": "Только Просмотр",
     "Clip to Window": "В окно",
     "Scaling Mode:": "Масштаб:",
     "None": "Нет",
     "Local Scaling": "Локльный масштаб",
-    "Remote Resizing": "Удаленный масштаб",
+    "Remote Resizing": "Удаленная перенастройка размера",
     "Advanced": "Дополнительно",
+    "Quality:": "Качество",
+    "Compression level:": "Уровень Сжатия",
     "Repeater ID:": "Идентификатор ID:",
     "WebSocket": "WebSocket",
     "Encrypt": "Шифрование",
@@ -65,9 +62,11 @@
     "Reconnect Delay (ms):": "Задержка переподключения (мс):",
     "Show Dot when No Cursor": "Показать точку вместо курсора",
     "Logging:": "Лог:",
+    "Version:": "Версия",
     "Disconnect": "Отключение",
     "Connect": "Подключение",
+    "Username:": "Имя Пользователя",
     "Password:": "Пароль:",
-    "Send Password": "Пароль: ",
+    "Send Credentials": "Передача Учетных Данных",
     "Cancel": "Выход"
 }

app/locale/sv.json

@@ -1,4 +1,5 @@
 {
+    "HTTPS is required for full functionality": "HTTPS krävs för full funktionalitet",
     "Connecting...": "Ansluter...",
     "Disconnecting...": "Kopplar ner...",
     "Reconnecting...": "Återansluter...",
@@ -11,16 +12,11 @@
     "Disconnected": "Frånkopplad",
     "New connection has been rejected with reason: ": "Ny anslutning har blivit nekad med följande skäl: ",
     "New connection has been rejected": "Ny anslutning har blivit nekad",
-    "Password is required": "Lösenord krävs",
+    "Credentials are required": "Användaruppgifter krävs",
     "noVNC encountered an error:": "noVNC stötte på ett problem:",
     "Hide/Show the control bar": "Göm/Visa kontrollbaren",
+    "Drag": "Dra",
     "Move/Drag Viewport": "Flytta/Dra Vyn",
-    "viewport drag": "dra vy",
-    "Active Mouse Button": "Aktiv musknapp",
-    "No mousebutton": "Ingen musknapp",
-    "Left mousebutton": "Vänster musknapp",
-    "Middle mousebutton": "Mitten-musknapp",
-    "Right mousebutton": "Höger musknapp",
     "Keyboard": "Tangentbord",
     "Show Keyboard": "Visa Tangentbord",
     "Extra keys": "Extraknappar",
@@ -44,8 +40,8 @@
     "Reboot": "Boota om",
     "Reset": "Återställ",
     "Clipboard": "Urklipp",
-    "Clear": "Rensa",
-    "Fullscreen": "Fullskärm",
+    "Edit clipboard content in the textarea below.": "Redigera urklippets innehåll i fältet nedan.",
+    "Full Screen": "Fullskärm",
     "Settings": "Inställningar",
     "Shared Mode": "Delat Läge",
     "View Only": "Endast Visning",
@@ -55,6 +51,8 @@
     "Local Scaling": "Lokal Skalning",
     "Remote Resizing": "Ändra Storlek",
     "Advanced": "Avancerat",
+    "Quality:": "Kvalitet:",
+    "Compression level:": "Kompressionsnivå:",
     "Repeater ID:": "Repeater-ID:",
     "WebSocket": "WebSocket",
     "Encrypt": "Kryptera",
@@ -65,9 +63,18 @@
     "Reconnect Delay (ms):": "Fördröjning (ms):",
     "Show Dot when No Cursor": "Visa prick när ingen muspekare finns",
     "Logging:": "Loggning:",
+    "Version:": "Version:",
     "Disconnect": "Koppla från",
     "Connect": "Anslut",
+    "Server identity": "Server-identitet",
+    "The server has provided the following identifying information:": "Servern har gett följande identifierande information:",
+    "Fingerprint:": "Fingeravtryck:",
+    "Please verify that the information is correct and press \"Approve\". Otherwise press \"Reject\".": "Kontrollera att informationen är korrekt och tryck sedan \"Godkänn\". Tryck annars \"Neka\".",
+    "Approve": "Godkänn",
+    "Reject": "Neka",
+    "Credentials": "Användaruppgifter",
+    "Username:": "Användarnamn:",
     "Password:": "Lösenord:",
-    "Send Password": "Skicka lösenord",
+    "Send Credentials": "Skicka Användaruppgifter",
     "Cancel": "Avbryt"
 }

app/locale/zh_CN.json

@@ -1,19 +1,19 @@
 {
-    "Connecting...": "链接中...",
-    "Disconnecting...": "正在中断连接...",
-    "Reconnecting...": "重新链接中...",
+    "Connecting...": "连接中...",
+    "Disconnecting...": "正在断开连接...",
+    "Reconnecting...": "重新连接中...",
     "Internal error": "内部错误",
     "Must set host": "请提供主机名",
-    "Connected (encrypted) to ": "已加密链接到",
-    "Connected (unencrypted) to ": "未加密链接到",
-    "Something went wrong, connection is closed": "发生错误，链接已关闭",
-    "Failed to connect to server": "无法链接到服务器",
-    "Disconnected": "链接已中断",
-    "New connection has been rejected with reason: ": "链接被拒绝，原因：",
-    "New connection has been rejected": "链接被拒绝",
+    "Connected (encrypted) to ": "已连接到（加密）",
+    "Connected (unencrypted) to ": "已连接到（未加密）",
+    "Something went wrong, connection is closed": "发生错误，连接已关闭",
+    "Failed to connect to server": "无法连接到服务器",
+    "Disconnected": "已断开连接",
+    "New connection has been rejected with reason: ": "连接被拒绝，原因：",
+    "New connection has been rejected": "连接被拒绝",
     "Password is required": "请提供密码",
     "noVNC encountered an error:": "noVNC 遇到一个错误：",
-    "Hide/Show the control bar": "显示/隐藏控制列",
+    "Hide/Show the control bar": "显示/隐藏控制栏",
     "Move/Drag Viewport": "拖放显示范围",
     "viewport drag": "显示范围拖放",
     "Active Mouse Button": "启动鼠标按鍵",
@@ -43,10 +43,10 @@
     "Reset": "重置",
     "Clipboard": "剪贴板",
     "Clear": "清除",
-    "Fullscreen": "全屏幕",
+    "Fullscreen": "全屏",
     "Settings": "设置",
     "Shared Mode": "分享模式",
-    "View Only": "仅检视",
+    "View Only": "仅查看",
     "Clip to Window": "限制/裁切窗口大小",
     "Scaling Mode:": "缩放模式：",
     "None": "无",
@@ -59,11 +59,11 @@
     "Host:": "主机：",
     "Port:": "端口：",
     "Path:": "路径：",
-    "Automatic Reconnect": "自动重新链接",
-    "Reconnect Delay (ms):": "重新链接间隔 (ms)：",
+    "Automatic Reconnect": "自动重新连接",
+    "Reconnect Delay (ms):": "重新连接间隔 (ms)：",
     "Logging:": "日志级别：",
-    "Disconnect": "终端链接",
-    "Connect": "链接",
+    "Disconnect": "中断连接",
+    "Connect": "连接",
     "Password:": "密码：",
     "Cancel": "取消"
 }

app/localization.js

@@ -103,13 +103,20 @@ export class Localizer {
                 return items.indexOf(searchElement) !== -1;
             }
 
+            function translateString(str) {
+                // We assume surrounding whitespace, and whitespace around line
+                // breaks is just for source formatting
+                str = str.split("\n").map(s => s.trim()).join(" ").trim();
+                return self.get(str);
+            }
+
             function translateAttribute(elem, attr) {
-                const str = self.get(elem.getAttribute(attr));
+                const str = translateString(elem.getAttribute(attr));
                 elem.setAttribute(attr, str);
             }
 
             function translateTextNode(node) {
-                const str = self.get(node.data.trim());
+                const str = translateString(node.data);
                 node.data = str;
             }
 

app/styles/base.css

@@ -1,6 +1,6 @@
 /*
  * noVNC base CSS
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
  * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  */
@@ -19,10 +19,23 @@
  * 10000: Max (used for polyfills)
  */
 
+/*
+ * State variables (set on :root):
+ *
+ * noVNC_loading: Page is still loading
+ * noVNC_connecting: Connecting to server
+ * noVNC_reconnecting: Re-establishing a connection
+ * noVNC_connected: Connected to server (most common state)
+ * noVNC_disconnecting: Disconnecting from server
+ */
+
+:root {
+  font-family: sans-serif;
+}
+
 body {
   margin:0;
   padding:0;
-  font-family: Helvetica;
   /*Background image with light grey curve.*/
   background-color:#494949;
   background-repeat:no-repeat;
@@ -78,88 +91,6 @@ html {
   50% { box-shadow: 60px 10px 0 rgba(255, 255, 255, 0); width: 10px; }
 }
 
-/* ----------------------------------------
- * Input Elements
- * ----------------------------------------
- */
-
-input[type=input], input[type=password], input[type=number],
-input:not([type]), textarea {
-  /* Disable default rendering */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background: none;
-
-  margin: 2px;
-  padding: 2px;
-  border: 1px solid rgb(192, 192, 192);
-  border-radius: 5px;
-  color: black;
-  background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
-}
-
-input[type=button], input[type=submit], select {
-  /* Disable default rendering */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background: none;
-
-  margin: 2px;
-  padding: 2px;
-  border: 1px solid rgb(192, 192, 192);
-  border-bottom-width: 2px;
-  border-radius: 5px;
-  color: black;
-  background: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
-
-  /* This avoids it jumping around when :active */
-  vertical-align: middle;
-}
-
-input[type=button], input[type=submit] {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-option {
-  color: black;
-  background: white;
-}
-
-input[type=input]:focus, input[type=password]:focus,
-input:not([type]):focus, input[type=button]:focus,
-input[type=submit]:focus,
-textarea:focus, select:focus {
-  box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5);
-  border-color: rgb(74, 144, 217);
-  outline: none;
-}
-
-input[type=button]::-moz-focus-inner,
-input[type=submit]::-moz-focus-inner {
-  border: none;
-}
-
-input[type=input]:disabled, input[type=password]:disabled,
-input:not([type]):disabled, input[type=button]:disabled,
-input[type=submit]:disabled, input[type=number]:disabled,
-textarea:disabled, select:disabled {
-  color: rgb(128, 128, 128);
-  background: rgb(240, 240, 240);
-}
-
-input[type=button]:active, input[type=submit]:active,
-select:active {
-  border-bottom-width: 1px;
-  margin-top: 3px;
-}
-
-:root:not(.noVNC_touch) input[type=button]:hover:not(:disabled),
-:root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
-:root:not(.noVNC_touch) select:hover:not(:disabled) {
-  background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
-}
-
 /* ----------------------------------------
  * WebKit centering hacks
  * ----------------------------------------
@@ -186,13 +117,15 @@ select:active {
   pointer-events: auto;
 }
 .noVNC_vcenter {
-  display: flex;
+  display: flex !important;
   flex-direction: column;
   justify-content: center;
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
   pointer-events: none;
 }
 .noVNC_vcenter > * {
@@ -216,13 +149,20 @@ select:active {
 #noVNC_fallback_error {
   z-index: 1000;
   visibility: hidden;
+  /* Put a dark background in front of everything but the error,
+     and don't let mouse events pass through */
+  background: rgba(0, 0, 0, 0.8);
+  pointer-events: all;
 }
 #noVNC_fallback_error.noVNC_open {
   visibility: visible;
 }
 
 #noVNC_fallback_error > div {
-  max-width: 90%;
+  max-width: calc(100vw - 30px - 30px);
+  max-height: calc(100vh - 30px - 30px);
+  overflow: auto;
+
   padding: 15px;
 
   transition: 0.5s ease-in-out;
@@ -261,7 +201,6 @@ select:active {
 }
 
 #noVNC_fallback_error .noVNC_stack {
-  max-height: 50vh;
   padding: 10px;
   margin: 10px;
   font-size: 0.8em;
@@ -305,6 +244,9 @@ select:active {
   background-color: rgb(110, 132, 163);
   border-radius: 0 10px 10px 0;
 
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none; /* Disable iOS image long-press popup */
 }
 #noVNC_control_bar.noVNC_open {
   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
@@ -377,38 +319,50 @@ select:active {
 .noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
   transform: none;
 }
+/* Larger touch area for the handle, used when a touch screen is available */
 #noVNC_control_bar_handle div {
   position: absolute;
   right: -35px;
   top: 0;
   width: 50px;
-  height: 50px;
-}
-:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
+  height: 100%;
   display: none;
 }
+@media (any-pointer: coarse) {
+  #noVNC_control_bar_handle div {
+    display: initial;
+  }
+}
 .noVNC_right #noVNC_control_bar_handle div {
   left: -35px;
   right: auto;
 }
 
-#noVNC_control_bar .noVNC_scroll {
+#noVNC_control_bar > .noVNC_scroll {
   max-height: 100vh; /* Chrome is buggy with 100% */
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 10px 0 5px;
+  padding: 0 10px;
 }
-.noVNC_right #noVNC_control_bar .noVNC_scroll {
-  padding: 0 5px 0 10px;
+
+#noVNC_control_bar > .noVNC_scroll > * {
+  display: block;
+  margin: 10px auto;
 }
 
 /* Control bar hint */
-#noVNC_control_bar_hint {
+#noVNC_hint_anchor {
   position: fixed;
-  left: calc(100vw - 50px);
+  right: -50px;
+  left: auto;
+}
+#noVNC_control_bar_anchor.noVNC_right + #noVNC_hint_anchor {
+  left: -50px;
   right: auto;
-  top: 50%;
-  transform: translateY(-50%) scale(0);
+}
+#noVNC_control_bar_hint {
+  position: relative;
+  transform: scale(0);
   width: 100px;
   height: 50%;
   max-height: 600px;
@@ -421,61 +375,65 @@ select:active {
   border-radius: 10px;
   transition-delay: 0s;
 }
-#noVNC_control_bar_anchor.noVNC_right #noVNC_control_bar_hint{
-  left: auto;
-  right: calc(100vw - 50px);
-}
 #noVNC_control_bar_hint.noVNC_active {
   visibility: visible;
   opacity: 1;
   transition-delay: 0.2s;
-  transform: translateY(-50%) scale(1);
+  transform: scale(1);
+}
+#noVNC_control_bar_hint.noVNC_notransition {
+  transition: none !important;
 }
 
-/* General button style */
-.noVNC_button {
-  display: block;
+/* Control bar buttons */
+#noVNC_control_bar .noVNC_button {
   padding: 4px 4px;
-  margin: 10px 0;
   vertical-align: middle;
   border:1px solid rgba(255, 255, 255, 0.2);
   border-radius: 6px;
+  background-color: transparent;
+  background-image: unset; /* we don't want the gradiant from input.css */
 }
-.noVNC_button.noVNC_selected {
+#noVNC_control_bar .noVNC_button.noVNC_selected {
   border-color: rgba(0, 0, 0, 0.8);
-  background: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
-.noVNC_button:disabled {
-  opacity: 0.4;
+#noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
+  border-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.2);
 }
-.noVNC_button:focus {
-  outline: none;
+#noVNC_control_bar .noVNC_button:not(:disabled):hover {
+  background-color: rgba(255, 255, 255, 0.2);
 }
-.noVNC_button:active {
+#noVNC_control_bar .noVNC_button:not(:disabled):active {
   padding-top: 5px;
   padding-bottom: 3px;
 }
-/* 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);
+#noVNC_control_bar .noVNC_button.noVNC_hidden {
+  display: none !important;
 }
-:root:not(.noVNC_touch) .noVNC_button:hover,
-.noVNC_button:focus {
-  background: rgba(255, 255, 255, 0.2);
-}
-.noVNC_button.noVNC_hidden {
-  display: none;
+
+/* Android browsers don't properly update hover state if touch events are
+ * intercepted, like they are when clicking on the remote screen. */
+@media (any-pointer: coarse) {
+  #noVNC_control_bar .noVNC_button:not(:disabled):hover {
+    background-color: transparent;
+  }
+  #noVNC_control_bar .noVNC_button.noVNC_selected:not(:disabled):hover {
+    border-color: rgba(0, 0, 0, 0.8);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 }
 
+
 /* Panels */
 .noVNC_panel {
   transform: translateX(25px);
 
   transition: 0.5s ease-in-out;
 
+  box-sizing: border-box; /* so max-width don't have to care about padding */
+  max-width: calc(100vw - 75px - 25px); /* minus left and right margins */
   max-height: 100vh; /* Chrome is buggy with 100% */
   overflow-x: hidden;
   overflow-y: auto;
@@ -507,6 +465,17 @@ select:active {
   transform: translateX(-75px);
 }
 
+.noVNC_panel > * {
+  display: block;
+  margin: 10px auto;
+}
+.noVNC_panel > *:first-child {
+  margin-top: 0 !important;
+}
+.noVNC_panel > *:last-child {
+  margin-bottom: 0 !important;
+}
+
 .noVNC_panel hr {
   border: none;
   border-top: 1px solid rgb(192, 192, 192);
@@ -515,6 +484,11 @@ select:active {
 .noVNC_panel label {
   display: block;
   white-space: nowrap;
+  margin: 5px;
+}
+
+.noVNC_panel li {
+  margin: 5px;
 }
 
 .noVNC_panel .noVNC_heading {
@@ -525,7 +499,6 @@ select:active {
   padding-right: 8px;
   color: white;
   font-size: 20px;
-  margin-bottom: 10px;
   white-space: nowrap;
 }
 .noVNC_panel .noVNC_heading img {
@@ -566,6 +539,12 @@ select:active {
   font-size: 13px;
 }
 
+.noVNC_logo + hr {
+    /* Remove all but top border */
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
 :root:not(.noVNC_connected) #noVNC_view_drag_button {
   display: none;
 }
@@ -574,19 +553,26 @@ select:active {
 :root:not(.noVNC_connected) #noVNC_mobile_buttons {
   display: none;
 }
-:root:not(.noVNC_touch) #noVNC_mobile_buttons {
-  display: none;
+@media not all and (any-pointer: coarse) {
+  /* FIXME: The button for the virtual keyboard is the only button in this
+            group of "mobile buttons". It is bad to assume that no touch
+            devices have physical keyboards available. Hopefully we can get
+            a media query for this:
+            https://github.com/w3c/csswg-drafts/issues/3871 */
+  :root.noVNC_connected #noVNC_mobile_buttons {
+    display: none;
+  }
 }
 
 /* Extra manual keys */
-:root:not(.noVNC_connected) #noVNC_extra_keys {
+:root:not(.noVNC_connected) #noVNC_toggle_extra_keys_button {
   display: none;
 }
 
 #noVNC_modifiers {
   background-color: rgb(92, 92, 92);
   border: none;
-  padding: 0 10px;
+  padding: 10px;
 }
 
 /* Shutdown/Reboot */
@@ -607,13 +593,16 @@ select:active {
 :root:not(.noVNC_connected) #noVNC_clipboard_button {
   display: none;
 }
-#noVNC_clipboard {
-  /* Full screen, minus padding and left and right margins */
-  max-width: calc(100vw - 2*15px - 75px - 25px);
-}
 #noVNC_clipboard_text {
-  width: 500px;
+  width: 360px;
+  min-width: 150px;
+  height: 160px;
+  min-height: 70px;
+
+  box-sizing: border-box;
   max-width: 100%;
+  /* minus approximate height of title, height of subtitle, and margin */
+  max-height: calc(100vh - 10em - 25px);
 }
 
 /* Settings */
@@ -621,7 +610,6 @@ select:active {
 }
 #noVNC_settings ul {
   list-style: none;
-  margin: 0px;
   padding: 0px;
 }
 #noVNC_setting_port {
@@ -631,6 +619,16 @@ select:active {
   width: 100px;
 }
 
+/* Version */
+
+.noVNC_version_wrapper {
+  font-size: small;
+}
+
+.noVNC_version {
+  margin-left: 1rem;
+}
+
 /* Connection Controls */
 :root:not(.noVNC_connected) #noVNC_disconnect_button {
   display: none;
@@ -737,36 +735,32 @@ select:active {
     font-size: calc(25vw - 30px);
   }
 }
-#noVNC_connect_button {
-  cursor: pointer;
+#noVNC_connect_dlg div {
+  padding: 12px;
 
-  padding: 10px;
-
-  color: white;
   background-color: rgb(110, 132, 163);
   border-radius: 12px;
-
   text-align: center;
   font-size: 20px;
 
   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 }
-#noVNC_connect_button div {
-  margin: 2px;
+#noVNC_connect_button {
+  width: 100%;
   padding: 5px 30px;
-  border: 1px solid rgb(83, 99, 122);
-  border-bottom-width: 2px;
+
+  cursor: pointer;
+
+  border-color: rgb(83, 99, 122);
   border-radius: 5px;
+
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
+  color: white;
 
   /* This avoids it jumping around when :active */
   vertical-align: middle;
 }
-#noVNC_connect_button div:active {
-  border-bottom-width: 1px;
-  margin-top: 3px;
-}
-:root:not(.noVNC_touch) #noVNC_connect_button div:hover {
+#noVNC_connect_button:hover {
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 }
 
@@ -776,24 +770,41 @@ select:active {
 }
 
 /* ----------------------------------------
- * Password Dialog
+ * Server verification Dialog
  * ----------------------------------------
  */
 
-#noVNC_password_dlg {
+#noVNC_verify_server_dlg {
   position: relative;
 
   transform: translateY(-50px);
 }
-#noVNC_password_dlg.noVNC_open {
+#noVNC_verify_server_dlg.noVNC_open {
   transform: translateY(0);
 }
-#noVNC_password_dlg ul {
-  list-style: none;
-  margin: 0px;
-  padding: 0px;
+#noVNC_fingerprint_block {
+  margin: 10px;
 }
 
+/* ----------------------------------------
+ * Password Dialog
+ * ----------------------------------------
+ */
+
+#noVNC_credentials_dlg {
+  position: relative;
+
+  transform: translateY(-50px);
+}
+#noVNC_credentials_dlg.noVNC_open {
+  transform: translateY(0);
+}
+#noVNC_username_block.noVNC_hidden,
+#noVNC_password_block.noVNC_hidden {
+  display: none;
+}
+
+
 /* ----------------------------------------
  * Main Area
  * ----------------------------------------
@@ -801,7 +812,11 @@ select:active {
 
 /* Transition screen */
 #noVNC_transition {
-  display: none;
+  transition: 0.5s ease-in-out;
+
+  display: flex;
+  opacity: 0;
+  visibility: hidden;
 
   position: fixed;
   top: 0;
@@ -822,7 +837,8 @@ select:active {
 :root.noVNC_connecting #noVNC_transition,
 :root.noVNC_disconnecting #noVNC_transition,
 :root.noVNC_reconnecting #noVNC_transition {
-  display: flex;
+  opacity: 1;
+  visibility: visible;
 }
 :root:not(.noVNC_reconnecting) #noVNC_cancel_reconnect_button {
   display: none;
@@ -838,6 +854,12 @@ select:active {
   background-color: #313131;
   border-bottom-right-radius: 800px 600px;
   /*border-top-left-radius: 800px 600px;*/
+
+  /* If selection isn't disabled, long-pressing stuff in the sidebar
+     can accidentally select the container or the canvas. This can
+     happen when attempting to move the handle. */
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 #noVNC_keyboardinput {

app/styles/input.css

@@ -0,0 +1,281 @@
+/*
+ * noVNC general input element CSS
+ * Copyright (C) 2022 The noVNC Authors
+ * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
+ * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
+ */
+
+/*
+ * Common for all inputs
+ */
+input, input::file-selector-button, button, select, textarea {
+  /* Respect standard font settings */
+  font: inherit;
+
+  /* Disable default rendering */
+  appearance: none;
+  background: none;
+
+  padding: 5px;
+  border: 1px solid rgb(192, 192, 192);
+  border-radius: 5px;
+  color: black;
+  --bg-gradient: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+  background-image: var(--bg-gradient);
+}
+
+/*
+ * Buttons
+ */
+input[type=button],
+input[type=color],
+input[type=image],
+input[type=reset],
+input[type=submit],
+input::file-selector-button,
+button,
+select {
+  border-bottom-width: 2px;
+
+  /* This avoids it jumping around when :active */
+  vertical-align: middle;
+  margin-top: 0;
+
+  padding-left: 20px;
+  padding-right: 20px;
+
+  /* Disable Chrome's touch tap highlight */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*
+ * Select dropdowns
+ */
+select {
+  --select-arrow: url('data:image/svg+xml;utf8, \
+      <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
+           xmlns="http://www.w3.org/2000/svg"> \
+          <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \
+                stroke="rgb(31,31,31)" fill="none" \
+                stroke-linecap="round" stroke-linejoin="round" /> \
+      </svg>');
+  background-image: var(--select-arrow), var(--bg-gradient);
+  background-position: calc(100% - 7px), left top;
+  background-repeat: no-repeat;
+  padding-right: calc(2*7px + 8px);
+  padding-left: 7px;
+}
+/* FIXME: :active isn't set when the <select> is opened in Firefox:
+          https://bugzilla.mozilla.org/show_bug.cgi?id=1805406 */
+select:active {
+  /* Rotated arrow */
+  background-image: url('data:image/svg+xml;utf8, \
+      <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
+           xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" > \
+          <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \
+                stroke="rgb(31,31,31)" fill="none" \
+                stroke-linecap="round" stroke-linejoin="round" /> \
+      </svg>'), var(--bg-gradient);
+}
+option {
+  color: black;
+  background: white;
+}
+
+/*
+ * Checkboxes
+ */
+input[type=checkbox] {
+  background-color: white;
+  background-image: unset;
+  border: 1px solid dimgrey;
+  border-radius: 3px;
+  width: 13px;
+  height: 13px;
+  padding: 0;
+  margin-right: 6px;
+  vertical-align: bottom;
+  transition: 0.2s background-color linear;
+}
+input[type=checkbox]:checked {
+  background-color: rgb(110, 132, 163);
+  border-color: rgb(110, 132, 163);
+}
+input[type=checkbox]:checked::after {
+  content: "";
+  display: block; /* width & height doesn't work on inline elements */
+  position: relative;
+  top: 0;
+  left: 3px;
+  width: 3px;
+  height: 7px;
+  border: 1px solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(40deg);
+}
+
+/*
+ * Radiobuttons
+ */
+input[type=radio] {
+  border-radius: 50%;
+  border: 1px solid dimgrey;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  margin-right: 6px;
+  transition: 0.2s border linear;
+}
+input[type=radio]:checked {
+  border: 6px solid rgb(110, 132, 163);
+}
+
+/*
+ * Range sliders
+ */
+input[type=range] {
+  border: unset;
+  border-radius: 3px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+}
+/* -webkit-slider.. & -moz-range.. cant be in selector lists:
+   https://bugs.chromium.org/p/chromium/issues/detail?id=1154623 */
+input[type=range]::-webkit-slider-runnable-track {
+  background-color: rgb(110, 132, 163);
+  height: 6px;
+  border-radius: 3px;
+}
+input[type=range]::-moz-range-track {
+  background-color: rgb(110, 132, 163);
+  height: 6px;
+  border-radius: 3px;
+}
+input[type=range]::-webkit-slider-thumb {
+  appearance: none;
+  width: 18px;
+  height: 20px;
+  border-radius: 5px;
+  background-color: white;
+  border: 1px solid dimgray;
+  margin-top: -7px;
+}
+input[type=range]::-moz-range-thumb {
+  appearance: none;
+  width: 18px;
+  height: 20px;
+  border-radius: 5px;
+  background-color: white;
+  border: 1px solid dimgray;
+  margin-top: -7px;
+}
+
+/*
+ * File choosers
+ */
+input[type=file] {
+  background-image: none;
+  border: none;
+}
+input::file-selector-button {
+  margin-right: 6px;
+}
+
+/*
+ * Hover
+ */
+input[type=button]:hover,
+input[type=color]:hover,
+input[type=image]:hover,
+input[type=reset]:hover,
+input[type=submit]:hover,
+input::file-selector-button:hover,
+button:hover {
+  background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+}
+select:hover {
+  background-image: var(--select-arrow),
+    linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
+  background-position: calc(100% - 7px), left top;
+  background-repeat: no-repeat;
+}
+@media (any-pointer: coarse) {
+  /* We don't want a hover style after touch input */
+  input[type=button]:hover,
+  input[type=color]:hover,
+  input[type=image]:hover,
+  input[type=reset]:hover,
+  input[type=submit]:hover,
+  input::file-selector-button:hover,
+  button:hover {
+    background-image: var(--bg-gradient);
+  }
+  select:hover {
+    background-image: var(--select-arrow), var(--bg-gradient);
+  }
+}
+
+/*
+ * Active (clicked)
+ */
+input[type=button]:active,
+input[type=color]:active,
+input[type=image]:active,
+input[type=reset]:active,
+input[type=submit]:active,
+input::file-selector-button:active,
+button:active,
+select:active {
+  border-bottom-width: 1px;
+  margin-top: 1px;
+}
+
+/*
+ * Focus (tab)
+ */
+input:focus-visible,
+input:focus-visible::file-selector-button,
+button:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid rgb(74, 144, 217);
+  outline-offset: 1px;
+}
+input[type=file]:focus-visible {
+  outline: none; /* We outline the button instead of the entire element */
+}
+
+/*
+ * Disabled
+ */
+input:disabled,
+input:disabled::file-selector-button,
+button:disabled,
+select:disabled,
+textarea:disabled {
+  opacity: 0.4;
+}
+input[type=button]:disabled,
+input[type=color]:disabled,
+input[type=image]:disabled,
+input[type=reset]:disabled,
+input[type=submit]:disabled,
+input:disabled::file-selector-button,
+button:disabled,
+select:disabled {
+  background-image: var(--bg-gradient);
+  border-bottom-width: 2px;
+  margin-top: 0;
+}
+input[type=file]:disabled {
+  background-image: none;
+}
+select:disabled {
+  background-image: var(--select-arrow), var(--bg-gradient);
+}
+input[type=image]:disabled {
+  /* See Firefox bug:
+     https://bugzilla.mozilla.org/show_bug.cgi?id=1798304 */
+  cursor: default;
+}

app/ui.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -8,7 +8,8 @@
 
 import * as Log from '../core/util/logging.js';
 import _, { l10n } from './localization.js';
-import { isTouchDevice, isSafari, isIOS, isAndroid, dragThreshold }
+import { isTouchDevice, isMac, isIOS, isAndroid, isChromeOS, isSafari,
+         hasScrollbarGutter, dragThreshold }
     from '../core/util/browser.js';
 import { setCapture, getPointerEvent } from '../core/util/events.js';
 import KeyTable from "../core/input/keysym.js";
@@ -17,6 +18,8 @@ import Keyboard from "../core/input/keyboard.js";
 import RFB from "../core/rfb.js";
 import * as WebUtil from "./webutil.js";
 
+const PAGE_TITLE = "noVNC";
+
 const UI = {
 
     connected: false,
@@ -35,9 +38,9 @@ const UI = {
     lastKeyboardinput: null,
     defaultKeyboardinputLen: 100,
 
-    inhibit_reconnect: true,
-    reconnect_callback: null,
-    reconnect_password: null,
+    inhibitReconnect: true,
+    reconnectCallback: null,
+    reconnectPassword: null,
 
     prime() {
         return WebUtil.initSettings().then(() => {
@@ -59,9 +62,33 @@ const UI = {
         // Translate the DOM
         l10n.translateDOM();
 
+        // We rely on modern APIs which might not be available in an
+        // insecure context
+        if (!window.isSecureContext) {
+            // FIXME: This gets hidden when connecting
+            UI.showStatus(_("HTTPS is required for full functionality"), 'error');
+        }
+
+        // Try to fetch version number
+        fetch('./package.json')
+            .then((response) => {
+                if (!response.ok) {
+                    throw Error("" + response.status + " " + response.statusText);
+                }
+                return response.json();
+            })
+            .then((packageInfo) => {
+                Array.from(document.getElementsByClassName('noVNC_version')).forEach(el => el.innerText = packageInfo.version);
+            })
+            .catch((err) => {
+                Log.Error("Couldn't fetch package.json: " + err);
+                Array.from(document.getElementsByClassName('noVNC_version_wrapper'))
+                    .concat(Array.from(document.getElementsByClassName('noVNC_version_separator')))
+                    .forEach(el => el.style.display = 'none');
+            });
+
         // Adapt the interface for touch screen devices
         if (isTouchDevice) {
-            document.documentElement.classList.add("noVNC_touch");
             // Remove the address bar
             setTimeout(() => window.scrollTo(0, 1), 100);
         }
@@ -148,6 +175,8 @@ const UI = {
         UI.initSetting('encrypt', (window.location.protocol === "https:"));
         UI.initSetting('view_clip', false);
         UI.initSetting('resize', 'off');
+        UI.initSetting('quality', 6);
+        UI.initSetting('compression', 2);
         UI.initSetting('shared', true);
         UI.initSetting('view_only', false);
         UI.initSetting('show_dot', false);
@@ -219,14 +248,6 @@ const UI = {
     },
 
     addTouchSpecificHandlers() {
-        document.getElementById("noVNC_mouse_button0")
-            .addEventListener('click', () => UI.setMouseButton(1));
-        document.getElementById("noVNC_mouse_button1")
-            .addEventListener('click', () => UI.setMouseButton(2));
-        document.getElementById("noVNC_mouse_button2")
-            .addEventListener('click', () => UI.setMouseButton(4));
-        document.getElementById("noVNC_mouse_button4")
-            .addEventListener('click', () => UI.setMouseButton(0));
         document.getElementById("noVNC_keyboard_button")
             .addEventListener('click', UI.toggleVirtualKeyboard);
 
@@ -303,8 +324,12 @@ const UI = {
         document.getElementById("noVNC_cancel_reconnect_button")
             .addEventListener('click', UI.cancelReconnect);
 
-        document.getElementById("noVNC_password_button")
-            .addEventListener('click', UI.setPassword);
+        document.getElementById("noVNC_approve_server_button")
+            .addEventListener('click', UI.approveServer);
+        document.getElementById("noVNC_reject_server_button")
+            .addEventListener('click', UI.rejectServer);
+        document.getElementById("noVNC_credentials_button")
+            .addEventListener('click', UI.setCredentials);
     },
 
     addClipboardHandlers() {
@@ -312,8 +337,6 @@ const UI = {
             .addEventListener('click', UI.toggleClipboardPanel);
         document.getElementById("noVNC_clipboard_text")
             .addEventListener('change', UI.clipboardSend);
-        document.getElementById("noVNC_clipboard_clear_button")
-            .addEventListener('click', UI.clipboardClear);
     },
 
     // Add a call to save settings when the element changes,
@@ -334,6 +357,10 @@ const UI = {
         UI.addSettingChangeHandler('resize');
         UI.addSettingChangeHandler('resize', UI.applyResizeMode);
         UI.addSettingChangeHandler('resize', UI.updateViewClip);
+        UI.addSettingChangeHandler('quality');
+        UI.addSettingChangeHandler('quality', UI.updateQuality);
+        UI.addSettingChangeHandler('compression');
+        UI.addSettingChangeHandler('compression', UI.updateCompression);
         UI.addSettingChangeHandler('view_clip');
         UI.addSettingChangeHandler('view_clip', UI.updateViewClip);
         UI.addSettingChangeHandler('shared');
@@ -375,25 +402,25 @@ const UI = {
         document.documentElement.classList.remove("noVNC_disconnecting");
         document.documentElement.classList.remove("noVNC_reconnecting");
 
-        const transition_elem = document.getElementById("noVNC_transition_text");
+        const transitionElem = document.getElementById("noVNC_transition_text");
         switch (state) {
             case 'init':
                 break;
             case 'connecting':
-                transition_elem.textContent = _("Connecting...");
+                transitionElem.textContent = _("Connecting...");
                 document.documentElement.classList.add("noVNC_connecting");
                 break;
             case 'connected':
                 document.documentElement.classList.add("noVNC_connected");
                 break;
             case 'disconnecting':
-                transition_elem.textContent = _("Disconnecting...");
+                transitionElem.textContent = _("Disconnecting...");
                 document.documentElement.classList.add("noVNC_disconnecting");
                 break;
             case 'disconnected':
                 break;
             case 'reconnecting':
-                transition_elem.textContent = _("Reconnecting...");
+                transitionElem.textContent = _("Reconnecting...");
                 document.documentElement.classList.add("noVNC_reconnecting");
                 break;
             default:
@@ -411,7 +438,6 @@ const UI = {
             UI.disableSetting('port');
             UI.disableSetting('path');
             UI.disableSetting('repeaterID');
-            UI.setMouseButton(1);
 
             // Hide the controlbar after 2 seconds
             UI.closeControlbarTimeout = setTimeout(UI.closeControlbar, 2000);
@@ -426,38 +452,37 @@ const UI = {
             UI.keepControlbar();
         }
 
-        // State change closes the password dialog
-        document.getElementById('noVNC_password_dlg')
+        // State change closes dialogs as they may not be relevant
+        // anymore
+        UI.closeAllPanels();
+        document.getElementById('noVNC_verify_server_dlg')
+            .classList.remove('noVNC_open');
+        document.getElementById('noVNC_credentials_dlg')
             .classList.remove('noVNC_open');
     },
 
-    showStatus(text, status_type, time) {
+    showStatus(text, statusType, time) {
         const statusElem = document.getElementById('noVNC_status');
 
-        clearTimeout(UI.statusTimeout);
-
-        if (typeof status_type === 'undefined') {
-            status_type = 'normal';
+        if (typeof statusType === 'undefined') {
+            statusType = 'normal';
         }
 
         // Don't overwrite more severe visible statuses and never
         // errors. Only shows the first error.
-        let visible_status_type = 'none';
         if (statusElem.classList.contains("noVNC_open")) {
             if (statusElem.classList.contains("noVNC_status_error")) {
-                visible_status_type = 'error';
-            } else if (statusElem.classList.contains("noVNC_status_warn")) {
-                visible_status_type = 'warn';
-            } else {
-                visible_status_type = 'normal';
+                return;
+            }
+            if (statusElem.classList.contains("noVNC_status_warn") &&
+                statusType === 'normal') {
+                return;
             }
         }
-        if (visible_status_type === 'error' ||
-            (visible_status_type === 'warn' && status_type === 'normal')) {
-            return;
-        }
 
-        switch (status_type) {
+        clearTimeout(UI.statusTimeout);
+
+        switch (statusType) {
             case 'error':
                 statusElem.classList.remove("noVNC_status_warn");
                 statusElem.classList.remove("noVNC_status_normal");
@@ -487,7 +512,7 @@ const UI = {
         }
 
         // Error messages do not timeout
-        if (status_type !== 'error') {
+        if (statusType !== 'error') {
             UI.statusTimeout = window.setTimeout(UI.hideStatus, time);
         }
     },
@@ -507,6 +532,13 @@ const UI = {
     },
 
     idleControlbar() {
+        // Don't fade if a child of the control bar has focus
+        if (document.getElementById('noVNC_control_bar')
+            .contains(document.activeElement) && document.hasFocus()) {
+            UI.activateControlbar();
+            return;
+        }
+
         document.getElementById('noVNC_control_bar_anchor')
             .classList.add("noVNC_idle");
     },
@@ -524,6 +556,7 @@ const UI = {
         UI.closeAllPanels();
         document.getElementById('noVNC_control_bar')
             .classList.remove("noVNC_open");
+        UI.rfb.focus();
     },
 
     toggleControlbar() {
@@ -556,10 +589,20 @@ const UI = {
 
         // Consider this a movement of the handle
         UI.controlbarDrag = true;
+
+        // The user has "followed" hint, let's hide it until the next drag
+        UI.showControlbarHint(false, false);
     },
 
-    showControlbarHint(show) {
+    showControlbarHint(show, animate=true) {
         const hint = document.getElementById('noVNC_control_bar_hint');
+
+        if (animate) {
+            hint.classList.remove("noVNC_notransition");
+        } else {
+            hint.classList.add("noVNC_notransition");
+        }
+
         if (show) {
             hint.classList.add("noVNC_active");
         } else {
@@ -740,11 +783,6 @@ const UI = {
                 }
             }
         } else {
-            /*Weird IE9 error leads to 'null' appearring
-            in textboxes instead of ''.*/
-            if (value === null) {
-                value = "";
-            }
             ctrl.value = value;
         }
     },
@@ -821,6 +859,8 @@ const UI = {
         UI.updateSetting('encrypt');
         UI.updateSetting('view_clip');
         UI.updateSetting('resize');
+        UI.updateSetting('quality');
+        UI.updateSetting('compression');
         UI.updateSetting('shared');
         UI.updateSetting('view_only');
         UI.updateSetting('path');
@@ -936,11 +976,6 @@ const UI = {
         Log.Debug("<< UI.clipboardReceive");
     },
 
-    clipboardClear() {
-        document.getElementById('noVNC_clipboard_text').value = "";
-        UI.rfb.clipboardPasteFrom("");
-    },
-
     clipboardSend() {
         const text = document.getElementById('noVNC_clipboard_text').value;
         Log.Debug(">> UI.clipboardSend: " + text.substr(0, 40) + "...");
@@ -977,7 +1012,7 @@ const UI = {
 
         if (typeof password === 'undefined') {
             password = WebUtil.getConfigVar('password');
-            UI.reconnect_password = password;
+            UI.reconnectPassword = password;
         }
 
         if (password === null) {
@@ -992,7 +1027,6 @@ const UI = {
             return;
         }
 
-        UI.closeAllPanels();
         UI.closeConnectPanel();
 
         UI.updateVisualState('connecting');
@@ -1009,13 +1043,14 @@ const UI = {
 
         UI.rfb = new RFB(document.getElementById('noVNC_container'), url,
                          { shared: UI.getSetting('shared'),
-                           showDotCursor: UI.getSetting('show_dot'),
                            repeaterID: UI.getSetting('repeaterID'),
                            credentials: { password: password } });
         UI.rfb.addEventListener("connect", UI.connectFinished);
         UI.rfb.addEventListener("disconnect", UI.disconnectFinished);
+        UI.rfb.addEventListener("serververification", UI.serverVerify);
         UI.rfb.addEventListener("credentialsrequired", UI.credentials);
         UI.rfb.addEventListener("securityfailure", UI.securityFailed);
+        UI.rfb.addEventListener("clippingviewport", UI.updateViewDrag);
         UI.rfb.addEventListener("capabilities", UI.updatePowerButton);
         UI.rfb.addEventListener("clipboard", UI.clipboardReceive);
         UI.rfb.addEventListener("bell", UI.bell);
@@ -1023,18 +1058,20 @@ const UI = {
         UI.rfb.clipViewport = UI.getSetting('view_clip');
         UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
         UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
+        UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
+        UI.rfb.compressionLevel = parseInt(UI.getSetting('compression'));
+        UI.rfb.showDotCursor = UI.getSetting('show_dot');
 
         UI.updateViewOnly(); // requires UI.rfb
     },
 
     disconnect() {
-        UI.closeAllPanels();
         UI.rfb.disconnect();
 
         UI.connected = false;
 
         // Disable automatic reconnecting
-        UI.inhibit_reconnect = true;
+        UI.inhibitReconnect = true;
 
         UI.updateVisualState('disconnecting');
 
@@ -1042,20 +1079,20 @@ const UI = {
     },
 
     reconnect() {
-        UI.reconnect_callback = null;
+        UI.reconnectCallback = null;
 
         // if reconnect has been disabled in the meantime, do nothing.
-        if (UI.inhibit_reconnect) {
+        if (UI.inhibitReconnect) {
             return;
         }
 
-        UI.connect(null, UI.reconnect_password);
+        UI.connect(null, UI.reconnectPassword);
     },
 
     cancelReconnect() {
-        if (UI.reconnect_callback !== null) {
-            clearTimeout(UI.reconnect_callback);
-            UI.reconnect_callback = null;
+        if (UI.reconnectCallback !== null) {
+            clearTimeout(UI.reconnectCallback);
+            UI.reconnectCallback = null;
         }
 
         UI.updateVisualState('disconnected');
@@ -1066,7 +1103,7 @@ const UI = {
 
     connectFinished(e) {
         UI.connected = true;
-        UI.inhibit_reconnect = false;
+        UI.inhibitReconnect = false;
 
         let msg;
         if (UI.getSetting('encrypt')) {
@@ -1100,17 +1137,21 @@ const UI = {
             } else {
                 UI.showStatus(_("Failed to connect to server"), 'error');
             }
-        } else if (UI.getSetting('reconnect', false) === true && !UI.inhibit_reconnect) {
+        }
+        // If reconnecting is allowed process it now
+        if (UI.getSetting('reconnect', false) === true && !UI.inhibitReconnect) {
             UI.updateVisualState('reconnecting');
 
             const delay = parseInt(UI.getSetting('reconnect_delay'));
-            UI.reconnect_callback = setTimeout(UI.reconnect, delay);
+            UI.reconnectCallback = setTimeout(UI.reconnect, delay);
             return;
         } else {
             UI.updateVisualState('disconnected');
             UI.showStatus(_("Disconnected"), 'normal');
         }
 
+        document.title = PAGE_TITLE;
+
         UI.openControlbar();
         UI.openConnectPanel();
     },
@@ -1132,32 +1173,82 @@ const UI = {
 /* ------^-------
  *  /CONNECTION
  * ==============
+ * SERVER VERIFY
+ * ------v------*/
+
+    async serverVerify(e) {
+        const type = e.detail.type;
+        if (type === 'RSA') {
+            const publickey = e.detail.publickey;
+            let fingerprint = await window.crypto.subtle.digest("SHA-1", publickey);
+            // The same fingerprint format as RealVNC
+            fingerprint = Array.from(new Uint8Array(fingerprint).slice(0, 8)).map(
+                x => x.toString(16).padStart(2, '0')).join('-');
+            document.getElementById('noVNC_verify_server_dlg').classList.add('noVNC_open');
+            document.getElementById('noVNC_fingerprint').innerHTML = fingerprint;
+        }
+    },
+
+    approveServer(e) {
+        e.preventDefault();
+        document.getElementById('noVNC_verify_server_dlg').classList.remove('noVNC_open');
+        UI.rfb.approveServer();
+    },
+
+    rejectServer(e) {
+        e.preventDefault();
+        document.getElementById('noVNC_verify_server_dlg').classList.remove('noVNC_open');
+        UI.disconnect();
+    },
+
+/* ------^-------
+ * /SERVER VERIFY
+ * ==============
  *   PASSWORD
  * ------v------*/
 
     credentials(e) {
         // FIXME: handle more types
-        document.getElementById('noVNC_password_dlg')
+
+        document.getElementById("noVNC_username_block").classList.remove("noVNC_hidden");
+        document.getElementById("noVNC_password_block").classList.remove("noVNC_hidden");
+
+        let inputFocus = "none";
+        if (e.detail.types.indexOf("username") === -1) {
+            document.getElementById("noVNC_username_block").classList.add("noVNC_hidden");
+        } else {
+            inputFocus = inputFocus === "none" ? "noVNC_username_input" : inputFocus;
+        }
+        if (e.detail.types.indexOf("password") === -1) {
+            document.getElementById("noVNC_password_block").classList.add("noVNC_hidden");
+        } else {
+            inputFocus = inputFocus === "none" ? "noVNC_password_input" : inputFocus;
+        }
+        document.getElementById('noVNC_credentials_dlg')
             .classList.add('noVNC_open');
 
         setTimeout(() => document
-            .getElementById('noVNC_password_input').focus(), 100);
+            .getElementById(inputFocus).focus(), 100);
 
-        Log.Warn("Server asked for a password");
-        UI.showStatus(_("Password is required"), "warning");
+        Log.Warn("Server asked for credentials");
+        UI.showStatus(_("Credentials are required"), "warning");
     },
 
-    setPassword(e) {
+    setCredentials(e) {
         // Prevent actually submitting the form
         e.preventDefault();
 
-        const inputElem = document.getElementById('noVNC_password_input');
-        const password = inputElem.value;
+        let inputElemUsername = document.getElementById('noVNC_username_input');
+        const username = inputElemUsername.value;
+
+        let inputElemPassword = document.getElementById('noVNC_password_input');
+        const password = inputElemPassword.value;
         // Clear the input after reading the password
-        inputElem.value = "";
-        UI.rfb.sendCredentials({ password: password });
-        UI.reconnect_password = password;
-        document.getElementById('noVNC_password_dlg')
+        inputElemPassword.value = "";
+
+        UI.rfb.sendCredentials({ username: username, password: password });
+        UI.reconnectPassword = password;
+        document.getElementById('noVNC_credentials_dlg')
             .classList.remove('noVNC_open');
     },
 
@@ -1236,12 +1327,25 @@ const UI = {
 
         const scaling = UI.getSetting('resize') === 'scale';
 
+        // Some platforms have overlay scrollbars that are difficult
+        // to use in our case, which means we have to force panning
+        // FIXME: Working scrollbars can still be annoying to use with
+        //        touch, so we should ideally be able to have both
+        //        panning and scrollbars at the same time
+
+        let brokenScrollbars = false;
+
+        if (!hasScrollbarGutter) {
+            if (isIOS() || isAndroid() || isMac() || isChromeOS()) {
+                brokenScrollbars = true;
+            }
+        }
+
         if (scaling) {
             // Can't be clipping if viewport is scaled to fit
             UI.forceSetting('view_clip', false);
             UI.rfb.clipViewport  = false;
-        } else if (isIOS() || isAndroid()) {
-            // iOS and Android usually have shit scrollbars
+        } else if (brokenScrollbars) {
             UI.forceSetting('view_clip', true);
             UI.rfb.clipViewport = true;
         } else {
@@ -1272,7 +1376,8 @@ const UI = {
 
         const viewDragButton = document.getElementById('noVNC_view_drag_button');
 
-        if (!UI.rfb.clipViewport && UI.rfb.dragViewport) {
+        if ((!UI.rfb.clipViewport || !UI.rfb.clippingViewport) &&
+            UI.rfb.dragViewport) {
             // We are no longer clipping the viewport. Make sure
             // viewport drag isn't active when it can't be used.
             UI.rfb.dragViewport = false;
@@ -1284,30 +1389,42 @@ const UI = {
             viewDragButton.classList.remove("noVNC_selected");
         }
 
-        // Different behaviour for touch vs non-touch
-        // The button is disabled instead of hidden on touch devices
-        if (isTouchDevice) {
+        if (UI.rfb.clipViewport) {
             viewDragButton.classList.remove("noVNC_hidden");
-
-            if (UI.rfb.clipViewport) {
-                viewDragButton.disabled = false;
-            } else {
-                viewDragButton.disabled = true;
-            }
         } else {
-            viewDragButton.disabled = false;
-
-            if (UI.rfb.clipViewport) {
-                viewDragButton.classList.remove("noVNC_hidden");
-            } else {
-                viewDragButton.classList.add("noVNC_hidden");
-            }
+            viewDragButton.classList.add("noVNC_hidden");
         }
+
+        viewDragButton.disabled = !UI.rfb.clippingViewport;
     },
 
 /* ------^-------
  *   /VIEWDRAG
  * ==============
+ *    QUALITY
+ * ------v------*/
+
+    updateQuality() {
+        if (!UI.rfb) return;
+
+        UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
+    },
+
+/* ------^-------
+ *   /QUALITY
+ * ==============
+ *  COMPRESSION
+ * ------v------*/
+
+    updateCompression() {
+        if (!UI.rfb) return;
+
+        UI.rfb.compressionLevel = parseInt(UI.getSetting('compression'));
+    },
+
+/* ------^-------
+ *  /COMPRESSION
+ * ==============
  *    KEYBOARD
  * ------v------*/
 
@@ -1502,20 +1619,20 @@ const UI = {
     },
 
     sendEsc() {
-        UI.rfb.sendKey(KeyTable.XK_Escape, "Escape");
+        UI.sendKey(KeyTable.XK_Escape, "Escape");
     },
 
     sendTab() {
-        UI.rfb.sendKey(KeyTable.XK_Tab);
+        UI.sendKey(KeyTable.XK_Tab, "Tab");
     },
 
     toggleCtrl() {
         const btn = document.getElementById('noVNC_toggle_ctrl_button');
         if (btn.classList.contains("noVNC_selected")) {
-            UI.rfb.sendKey(KeyTable.XK_Control_L, "ControlLeft", false);
+            UI.sendKey(KeyTable.XK_Control_L, "ControlLeft", false);
             btn.classList.remove("noVNC_selected");
         } else {
-            UI.rfb.sendKey(KeyTable.XK_Control_L, "ControlLeft", true);
+            UI.sendKey(KeyTable.XK_Control_L, "ControlLeft", true);
             btn.classList.add("noVNC_selected");
         }
     },
@@ -1523,10 +1640,10 @@ const UI = {
     toggleWindows() {
         const btn = document.getElementById('noVNC_toggle_windows_button');
         if (btn.classList.contains("noVNC_selected")) {
-            UI.rfb.sendKey(KeyTable.XK_Super_L, "MetaLeft", false);
+            UI.sendKey(KeyTable.XK_Super_L, "MetaLeft", false);
             btn.classList.remove("noVNC_selected");
         } else {
-            UI.rfb.sendKey(KeyTable.XK_Super_L, "MetaLeft", true);
+            UI.sendKey(KeyTable.XK_Super_L, "MetaLeft", true);
             btn.classList.add("noVNC_selected");
         }
     },
@@ -1534,16 +1651,39 @@ const UI = {
     toggleAlt() {
         const btn = document.getElementById('noVNC_toggle_alt_button');
         if (btn.classList.contains("noVNC_selected")) {
-            UI.rfb.sendKey(KeyTable.XK_Alt_L, "AltLeft", false);
+            UI.sendKey(KeyTable.XK_Alt_L, "AltLeft", false);
             btn.classList.remove("noVNC_selected");
         } else {
-            UI.rfb.sendKey(KeyTable.XK_Alt_L, "AltLeft", true);
+            UI.sendKey(KeyTable.XK_Alt_L, "AltLeft", true);
             btn.classList.add("noVNC_selected");
         }
     },
 
     sendCtrlAltDel() {
         UI.rfb.sendCtrlAltDel();
+        // See below
+        UI.rfb.focus();
+        UI.idleControlbar();
+    },
+
+    sendKey(keysym, code, down) {
+        UI.rfb.sendKey(keysym, code, down);
+
+        // Move focus to the screen in order to be able to use the
+        // keyboard right after these extra keys.
+        // The exception is when a virtual keyboard is used, because
+        // if we focus the screen the virtual keyboard would be closed.
+        // In this case we focus our special virtual keyboard input
+        // element instead.
+        if (document.getElementById('noVNC_keyboard_button')
+            .classList.contains("noVNC_selected")) {
+            document.getElementById('noVNC_keyboardinput').focus();
+        } else {
+            UI.rfb.focus();
+        }
+        // fade out the controlbar to highlight that
+        // the focus has been moved to the screen
+        UI.idleControlbar();
     },
 
 /* ------^-------
@@ -1552,24 +1692,6 @@ const UI = {
  *     MISC
  * ------v------*/
 
-    setMouseButton(num) {
-        const view_only = UI.rfb.viewOnly;
-        if (UI.rfb && !view_only) {
-            UI.rfb.touchButton = num;
-        }
-
-        const blist = [0, 1, 2, 4];
-        for (let b = 0; b < blist.length; b++) {
-            const button = document.getElementById('noVNC_mouse_button' +
-                                                 blist[b]);
-            if (blist[b] === num && !view_only) {
-                button.classList.remove("noVNC_hidden");
-            } else {
-                button.classList.add("noVNC_hidden");
-            }
-        }
-    },
-
     updateViewOnly() {
         if (!UI.rfb) return;
         UI.rfb.viewOnly = UI.getSetting('view_only');
@@ -1580,14 +1702,14 @@ const UI = {
                 .classList.add('noVNC_hidden');
             document.getElementById('noVNC_toggle_extra_keys_button')
                 .classList.add('noVNC_hidden');
-            document.getElementById('noVNC_mouse_button' + UI.rfb.touchButton)
+            document.getElementById('noVNC_clipboard_button')
                 .classList.add('noVNC_hidden');
         } else {
             document.getElementById('noVNC_keyboard_button')
                 .classList.remove('noVNC_hidden');
             document.getElementById('noVNC_toggle_extra_keys_button')
                 .classList.remove('noVNC_hidden');
-            document.getElementById('noVNC_mouse_button' + UI.rfb.touchButton)
+            document.getElementById('noVNC_clipboard_button')
                 .classList.remove('noVNC_hidden');
         }
     },
@@ -1598,13 +1720,13 @@ const UI = {
     },
 
     updateLogging() {
-        WebUtil.init_logging(UI.getSetting('logging'));
+        WebUtil.initLogging(UI.getSetting('logging'));
     },
 
     updateDesktopName(e) {
         UI.desktopName = e.detail.name;
         // Display the desktop name in the document title
-        document.title = e.detail.name + " - noVNC";
+        document.title = e.detail.name + " - " + PAGE_TITLE;
     },
 
     bell(e) {
@@ -1640,12 +1762,18 @@ const UI = {
 };
 
 // Set up translations
-const LINGUAS = ["cs", "de", "el", "es", "ko", "nl", "pl", "ru", "sv", "tr", "zh_CN", "zh_TW"];
+const LINGUAS = ["cs", "de", "el", "es", "fr", "it", "ja", "ko", "nl", "pl", "pt_BR", "ru", "sv", "tr", "zh_CN", "zh_TW"];
 l10n.setup(LINGUAS);
 if (l10n.language === "en" || l10n.dictionary !== undefined) {
     UI.prime();
 } else {
-    WebUtil.fetchJSON('app/locale/' + l10n.language + '.json')
+    fetch('app/locale/' + l10n.language + '.json')
+        .then((response) => {
+            if (!response.ok) {
+                throw Error("" + response.status + " " + response.statusText);
+            }
+            return response.json();
+        })
         .then((translations) => { l10n.dictionary = translations; })
         .catch(err => Log.Error("Failed to load translations: " + err))
         .then(UI.prime);

app/webutil.js

@@ -1,29 +1,38 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
  */
 
-import { init_logging as main_init_logging } from '../core/util/logging.js';
+import { initLogging as mainInitLogging } from '../core/util/logging.js';
 
 // init log level reading the logging HTTP param
-export function init_logging(level) {
+export function initLogging(level) {
     "use strict";
     if (typeof level !== "undefined") {
-        main_init_logging(level);
+        mainInitLogging(level);
     } else {
         const param = document.location.href.match(/logging=([A-Za-z0-9._-]*)/);
-        main_init_logging(param || undefined);
+        mainInitLogging(param || undefined);
     }
 }
 
 // Read a query string variable
+// A URL with a query parameter can look like this (But will most probably get logged on the http server):
+// https://www.example.com?myqueryparam=myvalue
+//
+// For privacy (Using a hastag #, the parameters will not be sent to the server)
+// the url can be requested in the following way:
+// https://www.example.com#myqueryparam=myvalue&password=secreatvalue
+//
+// Even Mixing public and non public parameters will work:
+// https://www.example.com?nonsecretparam=example.com#password=secreatvalue
 export function getQueryVar(name, defVal) {
     "use strict";
     const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
-        match = document.location.href.match(re);
+          match = ''.concat(document.location.href, window.location.hash).match(re);
     if (typeof defVal === 'undefined') { defVal = null; }
 
     if (match) {
@@ -37,7 +46,7 @@ export function getQueryVar(name, defVal) {
 export function getHashVar(name, defVal) {
     "use strict";
     const re = new RegExp('.*[&#]' + name + '=([^&]*)'),
-        match = document.location.hash.match(re);
+          match = document.location.hash.match(re);
     if (typeof defVal === 'undefined') { defVal = null; }
 
     if (match) {
@@ -175,65 +184,3 @@ export function eraseSetting(name) {
         localStorage.removeItem(name);
     }
 }
-
-export function injectParamIfMissing(path, param, value) {
-    // force pretend that we're dealing with a relative path
-    // (assume that we wanted an extra if we pass one in)
-    path = "/" + path;
-
-    const elem = document.createElement('a');
-    elem.href = path;
-
-    const param_eq = encodeURIComponent(param) + "=";
-    let query;
-    if (elem.search) {
-        query = elem.search.slice(1).split('&');
-    } else {
-        query = [];
-    }
-
-    if (!query.some(v => v.startsWith(param_eq))) {
-        query.push(param_eq + encodeURIComponent(value));
-        elem.search = "?" + query.join("&");
-    }
-
-    // some browsers (e.g. IE11) may occasionally omit the leading slash
-    // in the elem.pathname string. Handle that case gracefully.
-    if (elem.pathname.charAt(0) == "/") {
-        return elem.pathname.slice(1) + elem.search + elem.hash;
-    }
-
-    return elem.pathname + elem.search + elem.hash;
-}
-
-// sadly, we can't use the Fetch API until we decide to drop
-// IE11 support or polyfill promises and fetch in IE11.
-// resolve will receive an object on success, while reject
-// will receive either an event or an error on failure.
-export function fetchJSON(path) {
-    return new Promise((resolve, reject) => {
-        // NB: IE11 doesn't support JSON as a responseType
-        const req = new XMLHttpRequest();
-        req.open('GET', path);
-
-        req.onload = () => {
-            if (req.status === 200) {
-                let resObj;
-                try {
-                    resObj = JSON.parse(req.responseText);
-                } catch (err) {
-                    reject(err);
-                }
-                resolve(resObj);
-            } else {
-                reject(new Error("XHR got non-200 status while trying to load '" + path + "': " + req.status));
-            }
-        };
-
-        req.onerror = evt => reject(new Error("XHR encountered an error while trying to load '" + path + "': " + evt.message));
-
-        req.ontimeout = evt => reject(new Error("XHR timed out while trying to load '" + path + "'"));
-
-        req.send();
-    });
-}

core/base64.js

@@ -57,12 +57,12 @@ export default {
     /* eslint-enable comma-spacing */
 
     decode(data, offset = 0) {
-        let data_length = data.indexOf('=') - offset;
-        if (data_length < 0) { data_length = data.length - offset; }
+        let dataLength = data.indexOf('=') - offset;
+        if (dataLength < 0) { dataLength = data.length - offset; }
 
         /* Every four characters is 3 resulting numbers */
-        const result_length = (data_length >> 2) * 3 + Math.floor((data_length % 4) / 1.5);
-        const result = new Array(result_length);
+        const resultLength = (dataLength >> 2) * 3 + Math.floor((dataLength % 4) / 1.5);
+        const result = new Array(resultLength);
 
         // Convert one by one.
 

core/decoders/copyrect.js

@@ -1,8 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2018 Samuel Mannehed for Cendio AB
- * Copyright (C) 2018 Pierre Ossman for Cendio AB
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -17,6 +15,11 @@ export default class CopyRectDecoder {
 
         let deltaX = sock.rQshift16();
         let deltaY = sock.rQshift16();
+
+        if ((width === 0) || (height === 0)) {
+            return true;
+        }
+
         display.copyImage(deltaX, deltaY, x, y, width, height);
 
         return true;

core/decoders/hextile.js

@@ -1,8 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2018 Samuel Mannehed for Cendio AB
- * Copyright (C) 2018 Pierre Ossman for Cendio AB
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -15,14 +13,15 @@ export default class HextileDecoder {
     constructor() {
         this._tiles = 0;
         this._lastsubencoding = 0;
+        this._tileBuffer = new Uint8Array(16 * 16 * 4);
     }
 
     decodeRect(x, y, width, height, sock, display, depth) {
         if (this._tiles === 0) {
-            this._tiles_x = Math.ceil(width / 16);
-            this._tiles_y = Math.ceil(height / 16);
-            this._total_tiles = this._tiles_x * this._tiles_y;
-            this._tiles = this._total_tiles;
+            this._tilesX = Math.ceil(width / 16);
+            this._tilesY = Math.ceil(height / 16);
+            this._totalTiles = this._tilesX * this._tilesY;
+            this._tiles = this._totalTiles;
         }
 
         while (this._tiles > 0) {
@@ -41,11 +40,11 @@ export default class HextileDecoder {
                             subencoding + ")");
             }
 
-            const curr_tile = this._total_tiles - this._tiles;
-            const tile_x = curr_tile % this._tiles_x;
-            const tile_y = Math.floor(curr_tile / this._tiles_x);
-            const tx = x + tile_x * 16;
-            const ty = y + tile_y * 16;
+            const currTile = this._totalTiles - this._tiles;
+            const tileX = currTile % this._tilesX;
+            const tileY = Math.floor(currTile / this._tilesX);
+            const tx = x + tileX * 16;
+            const ty = y + tileY * 16;
             const tw = Math.min(16, (x + width) - tx);
             const th = Math.min(16, (y + height) - ty);
 
@@ -89,6 +88,11 @@ export default class HextileDecoder {
                     display.fillRect(tx, ty, tw, th, this._background);
                 }
             } else if (subencoding & 0x01) {  // Raw
+                let pixels = tw * th;
+                // Max sure the image is fully opaque
+                for (let i = 0;i <  pixels;i++) {
+                    rQ[rQi + i * 4 + 3] = 255;
+                }
                 display.blitImage(tx, ty, tw, th, rQ, rQi);
                 rQi += bytes - 1;
             } else {
@@ -101,7 +105,7 @@ export default class HextileDecoder {
                     rQi += 4;
                 }
 
-                display.startTile(tx, ty, tw, th, this._background);
+                this._startTile(tx, ty, tw, th, this._background);
                 if (subencoding & 0x08) {  // AnySubrects
                     let subrects = rQ[rQi];
                     rQi++;
@@ -124,10 +128,10 @@ export default class HextileDecoder {
                         const sw = (wh >> 4) + 1;
                         const sh = (wh & 0x0f) + 1;
 
-                        display.subTile(sx, sy, sw, sh, color);
+                        this._subTile(sx, sy, sw, sh, color);
                     }
                 }
-                display.finishTile();
+                this._finishTile(display);
             }
             sock.rQi = rQi;
             this._lastsubencoding = subencoding;
@@ -136,4 +140,52 @@ export default class HextileDecoder {
 
         return true;
     }
+
+    // start updating a tile
+    _startTile(x, y, width, height, color) {
+        this._tileX = x;
+        this._tileY = y;
+        this._tileW = width;
+        this._tileH = height;
+
+        const red = color[0];
+        const green = color[1];
+        const blue = color[2];
+
+        const data = this._tileBuffer;
+        for (let i = 0; i < width * height * 4; i += 4) {
+            data[i]     = red;
+            data[i + 1] = green;
+            data[i + 2] = blue;
+            data[i + 3] = 255;
+        }
+    }
+
+    // update sub-rectangle of the current tile
+    _subTile(x, y, w, h, color) {
+        const red = color[0];
+        const green = color[1];
+        const blue = color[2];
+        const xend = x + w;
+        const yend = y + h;
+
+        const data = this._tileBuffer;
+        const width = this._tileW;
+        for (let j = y; j < yend; j++) {
+            for (let i = x; i < xend; i++) {
+                const p = (i + (j * width)) * 4;
+                data[p]     = red;
+                data[p + 1] = green;
+                data[p + 2] = blue;
+                data[p + 3] = 255;
+            }
+        }
+    }
+
+    // draw the current tile to the screen
+    _finishTile(display) {
+        display.blitImage(this._tileX, this._tileY,
+                          this._tileW, this._tileH,
+                          this._tileBuffer, 0);
+    }
 }

core/decoders/jpeg.js

@@ -0,0 +1,141 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2019 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ *
+ */
+
+export default class JPEGDecoder {
+    constructor() {
+        // RealVNC will reuse the quantization tables
+        // and Huffman tables, so we need to cache them.
+        this._quantTables = [];
+        this._huffmanTables = [];
+        this._cachedQuantTables = [];
+        this._cachedHuffmanTables = [];
+
+        this._jpegLength = 0;
+        this._segments = [];
+    }
+
+    decodeRect(x, y, width, height, sock, display, depth) {
+        // A rect of JPEG encodings is simply a JPEG file
+        if (!this._parseJPEG(sock.rQslice(0))) {
+            return false;
+        }
+        const data = sock.rQshiftBytes(this._jpegLength);
+        if (this._quantTables.length != 0 && this._huffmanTables.length != 0) {
+            // If there are quantization tables and Huffman tables in the JPEG
+            // image, we can directly render it.
+            display.imageRect(x, y, width, height, "image/jpeg", data);
+            return true;
+        } else {
+            // Otherwise we need to insert cached tables.
+            const sofIndex = this._segments.findIndex(
+                x => x[1] == 0xC0 || x[1] == 0xC2
+            );
+            if (sofIndex == -1) {
+                throw new Error("Illegal JPEG image without SOF");
+            }
+            let segments = this._segments.slice(0, sofIndex);
+            segments = segments.concat(this._quantTables.length ?
+                this._quantTables :
+                this._cachedQuantTables);
+            segments.push(this._segments[sofIndex]);
+            segments = segments.concat(this._huffmanTables.length ?
+                this._huffmanTables :
+                this._cachedHuffmanTables,
+                                       this._segments.slice(sofIndex + 1));
+            let length = 0;
+            for (let i = 0; i < segments.length; i++) {
+                length += segments[i].length;
+            }
+            const data = new Uint8Array(length);
+            length = 0;
+            for (let i = 0; i < segments.length; i++) {
+                data.set(segments[i], length);
+                length += segments[i].length;
+            }
+            display.imageRect(x, y, width, height, "image/jpeg", data);
+            return true;
+        }
+    }
+
+    _parseJPEG(buffer) {
+        if (this._quantTables.length != 0) {
+            this._cachedQuantTables = this._quantTables;
+        }
+        if (this._huffmanTables.length != 0) {
+            this._cachedHuffmanTables = this._huffmanTables;
+        }
+        this._quantTables = [];
+        this._huffmanTables = [];
+        this._segments = [];
+        let i = 0;
+        let bufferLength = buffer.length;
+        while (true) {
+            let j = i;
+            if (j + 2 > bufferLength) {
+                return false;
+            }
+            if (buffer[j] != 0xFF) {
+                throw new Error("Illegal JPEG marker received (byte: " +
+                                   buffer[j] + ")");
+            }
+            const type = buffer[j+1];
+            j += 2;
+            if (type == 0xD9) {
+                this._jpegLength = j;
+                this._segments.push(buffer.slice(i, j));
+                return true;
+            } else if (type == 0xDA) {
+                // start of scan
+                let hasFoundEndOfScan = false;
+                for (let k = j + 3; k + 1 < bufferLength; k++) {
+                    if (buffer[k] == 0xFF && buffer[k+1] != 0x00 &&
+                        !(buffer[k+1] >= 0xD0 && buffer[k+1] <= 0xD7)) {
+                        j = k;
+                        hasFoundEndOfScan = true;
+                        break;
+                    }
+                }
+                if (!hasFoundEndOfScan) {
+                    return false;
+                }
+                this._segments.push(buffer.slice(i, j));
+                i = j;
+                continue;
+            } else if (type >= 0xD0 && type < 0xD9 || type == 0x01) {
+                // No length after marker
+                this._segments.push(buffer.slice(i, j));
+                i = j;
+                continue;
+            }
+            if (j + 2 > bufferLength) {
+                return false;
+            }
+            const length = (buffer[j] << 8) + buffer[j+1] - 2;
+            if (length < 0) {
+                throw new Error("Illegal JPEG length received (length: " +
+                                   length + ")");
+            }
+            j += 2;
+            if (j + length > bufferLength) {
+                return false;
+            }
+            j += length;
+            const segment = buffer.slice(i, j);
+            if (type == 0xC4) {
+                // Huffman tables
+                this._huffmanTables.push(segment);
+            } else if (type == 0xDB) {
+                // Quantization tables
+                this._quantTables.push(segment);
+            }
+            this._segments.push(segment);
+            i = j;
+        }
+    }
+}

core/decoders/raw.js

@@ -1,8 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2018 Samuel Mannehed for Cendio AB
- * Copyright (C) 2018 Pierre Ossman for Cendio AB
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -15,6 +13,10 @@ export default class RawDecoder {
     }
 
     decodeRect(x, y, width, height, sock, display, depth) {
+        if ((width === 0) || (height === 0)) {
+            return true;
+        }
+
         if (this._lines === 0) {
             this._lines = height;
         }
@@ -26,29 +28,35 @@ export default class RawDecoder {
             return false;
         }
 
-        const cur_y = y + (height - this._lines);
-        const curr_height = Math.min(this._lines,
-                                     Math.floor(sock.rQlen / bytesPerLine));
+        const curY = y + (height - this._lines);
+        const currHeight = Math.min(this._lines,
+                                    Math.floor(sock.rQlen / bytesPerLine));
+        const pixels = width * currHeight;
+
         let data = sock.rQ;
         let index = sock.rQi;
 
         // Convert data if needed
         if (depth == 8) {
-            const pixels = width * curr_height;
             const newdata = new Uint8Array(pixels * 4);
             for (let i = 0; i < pixels; i++) {
                 newdata[i * 4 + 0] = ((data[index + i] >> 0) & 0x3) * 255 / 3;
                 newdata[i * 4 + 1] = ((data[index + i] >> 2) & 0x3) * 255 / 3;
                 newdata[i * 4 + 2] = ((data[index + i] >> 4) & 0x3) * 255 / 3;
-                newdata[i * 4 + 4] = 0;
+                newdata[i * 4 + 3] = 255;
             }
             data = newdata;
             index = 0;
         }
 
-        display.blitImage(x, cur_y, width, curr_height, data, index);
-        sock.rQskipBytes(curr_height * bytesPerLine);
-        this._lines -= curr_height;
+        // Max sure the image is fully opaque
+        for (let i = 0; i < pixels; i++) {
+            data[index + i * 4 + 3] = 255;
+        }
+
+        display.blitImage(x, curY, width, currHeight, data, index);
+        sock.rQskipBytes(currHeight * bytesPerLine);
+        this._lines -= currHeight;
         if (this._lines > 0) {
             return false;
         }

core/decoders/rre.js

@@ -1,8 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2018 Samuel Mannehed for Cendio AB
- * Copyright (C) 2018 Pierre Ossman for Cendio AB
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.

core/decoders/tight.js

@@ -1,9 +1,7 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
+ * Copyright (C) 2019 The noVNC Authors
  * (c) 2012 Michael Tinglof, Joe Balaz, Les Piech (Mercuri.ca)
- * Copyright (C) 2018 Samuel Mannehed for Cendio AB
- * Copyright (C) 2018 Pierre Ossman for Cendio AB
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -58,7 +56,7 @@ export default class TightDecoder {
         } else if (this._ctl === 0x0A) {
             ret = this._pngRect(x, y, width, height,
                                 sock, display, depth);
-        } else if ((this._ctl & 0x80) == 0) {
+        } else if ((this._ctl & 0x08) == 0) {
             ret = this._basicRect(this._ctl, x, y, width, height,
                                   sock, display, depth);
         } else {
@@ -82,7 +80,7 @@ export default class TightDecoder {
         const rQ = sock.rQ;
 
         display.fillRect(x, y, width, height,
-                         [rQ[rQi + 2], rQ[rQi + 1], rQ[rQi]], false);
+                         [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2]], false);
         sock.rQskipBytes(3);
 
         return true;
@@ -94,7 +92,7 @@ export default class TightDecoder {
             return false;
         }
 
-        display.imageRect(x, y, "image/jpeg", data);
+        display.imageRect(x, y, width, height, "image/jpeg", data);
 
         return true;
     }
@@ -150,6 +148,10 @@ export default class TightDecoder {
         const uncompressedSize = width * height * 3;
         let data;
 
+        if (uncompressedSize === 0) {
+            return true;
+        }
+
         if (uncompressedSize < 12) {
             if (sock.rQwait("TIGHT", uncompressedSize)) {
                 return false;
@@ -162,13 +164,20 @@ export default class TightDecoder {
                 return false;
             }
 
-            data = this._zlibs[streamId].inflate(data, true, uncompressedSize);
-            if (data.length != uncompressedSize) {
-                throw new Error("Incomplete zlib block");
-            }
+            this._zlibs[streamId].setInput(data);
+            data = this._zlibs[streamId].inflate(uncompressedSize);
+            this._zlibs[streamId].setInput(null);
         }
 
-        display.blitRgbImage(x, y, width, height, data, 0, false);
+        let rgbx = new Uint8Array(width * height * 4);
+        for (let i = 0, j = 0; i < width * height * 4; i += 4, j += 3) {
+            rgbx[i]     = data[j];
+            rgbx[i + 1] = data[j + 1];
+            rgbx[i + 2] = data[j + 2];
+            rgbx[i + 3] = 255;  // Alpha
+        }
+
+        display.blitImage(x, y, width, height, rgbx, 0, false);
 
         return true;
     }
@@ -198,6 +207,10 @@ export default class TightDecoder {
 
         let data;
 
+        if (uncompressedSize === 0) {
+            return true;
+        }
+
         if (uncompressedSize < 12) {
             if (sock.rQwait("TIGHT", uncompressedSize)) {
                 return false;
@@ -210,10 +223,9 @@ export default class TightDecoder {
                 return false;
             }
 
-            data = this._zlibs[streamId].inflate(data, true, uncompressedSize);
-            if (data.length != uncompressedSize) {
-                throw new Error("Incomplete zlib block");
-            }
+            this._zlibs[streamId].setInput(data);
+            data = this._zlibs[streamId].inflate(uncompressedSize);
+            this._zlibs[streamId].setInput(null);
         }
 
         // Convert indexed (palette based) image data to RGB
@@ -241,7 +253,7 @@ export default class TightDecoder {
                 for (let b = 7; b >= 0; b--) {
                     dp = (y * width + x * 8 + 7 - b) * 4;
                     sp = (data[y * w + x] >> b & 1) * 3;
-                    dest[dp] = palette[sp];
+                    dest[dp]     = palette[sp];
                     dest[dp + 1] = palette[sp + 1];
                     dest[dp + 2] = palette[sp + 2];
                     dest[dp + 3] = 255;
@@ -251,14 +263,14 @@ export default class TightDecoder {
             for (let b = 7; b >= 8 - width % 8; b--) {
                 dp = (y * width + x * 8 + 7 - b) * 4;
                 sp = (data[y * w + x] >> b & 1) * 3;
-                dest[dp] = palette[sp];
+                dest[dp]     = palette[sp];
                 dest[dp + 1] = palette[sp + 1];
                 dest[dp + 2] = palette[sp + 2];
                 dest[dp + 3] = 255;
             }
         }
 
-        display.blitRgbxImage(x, y, width, height, dest, 0, false);
+        display.blitImage(x, y, width, height, dest, 0, false);
     }
 
     _paletteRect(x, y, width, height, data, palette, display) {
@@ -267,13 +279,13 @@ export default class TightDecoder {
         const total = width * height * 4;
         for (let i = 0, j = 0; i < total; i += 4, j++) {
             const sp = data[j] * 3;
-            dest[i] = palette[sp];
+            dest[i]     = palette[sp];
             dest[i + 1] = palette[sp + 1];
             dest[i + 2] = palette[sp + 2];
             dest[i + 3] = 255;
         }
 
-        display.blitRgbxImage(x, y, width, height, dest, 0, false);
+        display.blitImage(x, y, width, height, dest, 0, false);
     }
 
     _gradientFilter(streamId, x, y, width, height, sock, display, depth) {

core/decoders/tightpng.js

@@ -1,8 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2018 Samuel Mannehed for Cendio AB
- * Copyright (C) 2018 Pierre Ossman for Cendio AB
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -18,7 +16,7 @@ export default class TightPNGDecoder extends TightDecoder {
             return false;
         }
 
-        display.imageRect(x, y, "image/png", data);
+        display.imageRect(x, y, width, height, "image/png", data);
 
         return true;
     }

core/decoders/zrle.js

@@ -0,0 +1,185 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2021 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ *
+ */
+
+import Inflate from "../inflator.js";
+
+const ZRLE_TILE_WIDTH = 64;
+const ZRLE_TILE_HEIGHT = 64;
+
+export default class ZRLEDecoder {
+    constructor() {
+        this._length = 0;
+        this._inflator = new Inflate();
+
+        this._pixelBuffer = new Uint8Array(ZRLE_TILE_WIDTH * ZRLE_TILE_HEIGHT * 4);
+        this._tileBuffer = new Uint8Array(ZRLE_TILE_WIDTH * ZRLE_TILE_HEIGHT * 4);
+    }
+
+    decodeRect(x, y, width, height, sock, display, depth) {
+        if (this._length === 0) {
+            if (sock.rQwait("ZLib data length", 4)) {
+                return false;
+            }
+            this._length = sock.rQshift32();
+        }
+        if (sock.rQwait("Zlib data", this._length)) {
+            return false;
+        }
+
+        const data = sock.rQshiftBytes(this._length);
+
+        this._inflator.setInput(data);
+
+        for (let ty = y; ty < y + height; ty += ZRLE_TILE_HEIGHT) {
+            let th = Math.min(ZRLE_TILE_HEIGHT, y + height - ty);
+
+            for (let tx = x; tx < x + width; tx += ZRLE_TILE_WIDTH) {
+                let tw = Math.min(ZRLE_TILE_WIDTH, x + width - tx);
+
+                const tileSize = tw * th;
+                const subencoding = this._inflator.inflate(1)[0];
+                if (subencoding === 0) {
+                    // raw data
+                    const data = this._readPixels(tileSize);
+                    display.blitImage(tx, ty, tw, th, data, 0, false);
+                } else if (subencoding === 1) {
+                    // solid
+                    const background = this._readPixels(1);
+                    display.fillRect(tx, ty, tw, th, [background[0], background[1], background[2]]);
+                } else if (subencoding >= 2 && subencoding <= 16) {
+                    const data = this._decodePaletteTile(subencoding, tileSize, tw, th);
+                    display.blitImage(tx, ty, tw, th, data, 0, false);
+                } else if (subencoding === 128) {
+                    const data = this._decodeRLETile(tileSize);
+                    display.blitImage(tx, ty, tw, th, data, 0, false);
+                } else if (subencoding >= 130 && subencoding <= 255) {
+                    const data = this._decodeRLEPaletteTile(subencoding - 128, tileSize);
+                    display.blitImage(tx, ty, tw, th, data, 0, false);
+                } else {
+                    throw new Error('Unknown subencoding: ' + subencoding);
+                }
+            }
+        }
+        this._length = 0;
+        return true;
+    }
+
+    _getBitsPerPixelInPalette(paletteSize) {
+        if (paletteSize <= 2) {
+            return 1;
+        } else if (paletteSize <= 4) {
+            return 2;
+        } else if (paletteSize <= 16) {
+            return 4;
+        }
+    }
+
+    _readPixels(pixels) {
+        let data = this._pixelBuffer;
+        const buffer = this._inflator.inflate(3*pixels);
+        for (let i = 0, j = 0; i < pixels*4; i += 4, j += 3) {
+            data[i]     = buffer[j];
+            data[i + 1] = buffer[j + 1];
+            data[i + 2] = buffer[j + 2];
+            data[i + 3] = 255;  // Add the Alpha
+        }
+        return data;
+    }
+
+    _decodePaletteTile(paletteSize, tileSize, tilew, tileh) {
+        const data = this._tileBuffer;
+        const palette = this._readPixels(paletteSize);
+        const bitsPerPixel = this._getBitsPerPixelInPalette(paletteSize);
+        const mask = (1 << bitsPerPixel) - 1;
+
+        let offset = 0;
+        let encoded = this._inflator.inflate(1)[0];
+
+        for (let y=0; y<tileh; y++) {
+            let shift = 8-bitsPerPixel;
+            for (let x=0; x<tilew; x++) {
+                if (shift<0) {
+                    shift=8-bitsPerPixel;
+                    encoded = this._inflator.inflate(1)[0];
+                }
+                let indexInPalette = (encoded>>shift) & mask;
+
+                data[offset] = palette[indexInPalette * 4];
+                data[offset + 1] = palette[indexInPalette * 4 + 1];
+                data[offset + 2] = palette[indexInPalette * 4 + 2];
+                data[offset + 3] = palette[indexInPalette * 4 + 3];
+                offset += 4;
+                shift-=bitsPerPixel;
+            }
+            if (shift<8-bitsPerPixel && y<tileh-1) {
+                encoded =  this._inflator.inflate(1)[0];
+            }
+        }
+        return data;
+    }
+
+    _decodeRLETile(tileSize) {
+        const data = this._tileBuffer;
+        let i = 0;
+        while (i < tileSize) {
+            const pixel = this._readPixels(1);
+            const length = this._readRLELength();
+            for (let j = 0; j < length; j++) {
+                data[i * 4] = pixel[0];
+                data[i * 4 + 1] = pixel[1];
+                data[i * 4 + 2] = pixel[2];
+                data[i * 4 + 3] = pixel[3];
+                i++;
+            }
+        }
+        return data;
+    }
+
+    _decodeRLEPaletteTile(paletteSize, tileSize) {
+        const data = this._tileBuffer;
+
+        // palette
+        const palette = this._readPixels(paletteSize);
+
+        let offset = 0;
+        while (offset < tileSize) {
+            let indexInPalette = this._inflator.inflate(1)[0];
+            let length = 1;
+            if (indexInPalette >= 128) {
+                indexInPalette -= 128;
+                length = this._readRLELength();
+            }
+            if (indexInPalette > paletteSize) {
+                throw new Error('Too big index in palette: ' + indexInPalette + ', palette size: ' + paletteSize);
+            }
+            if (offset + length > tileSize) {
+                throw new Error('Too big rle length in palette mode: ' + length + ', allowed length is: ' + (tileSize - offset));
+            }
+
+            for (let j = 0; j < length; j++) {
+                data[offset * 4] = palette[indexInPalette * 4];
+                data[offset * 4 + 1] = palette[indexInPalette * 4 + 1];
+                data[offset * 4 + 2] = palette[indexInPalette * 4 + 2];
+                data[offset * 4 + 3] = palette[indexInPalette * 4 + 3];
+                offset++;
+            }
+        }
+        return data;
+    }
+
+    _readRLELength() {
+        let length = 0;
+        let current = 0;
+        do {
+            current = this._inflator.inflate(1)[0];
+            length += current;
+        } while (current === 255);
+        return length + 1;
+    }
+}

core/deflator.js

@@ -0,0 +1,85 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2020 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
+
+import { deflateInit, deflate } from "../vendor/pako/lib/zlib/deflate.js";
+import { Z_FULL_FLUSH } from "../vendor/pako/lib/zlib/deflate.js";
+import ZStream from "../vendor/pako/lib/zlib/zstream.js";
+
+export default class Deflator {
+    constructor() {
+        this.strm = new ZStream();
+        this.chunkSize = 1024 * 10 * 10;
+        this.outputBuffer = new Uint8Array(this.chunkSize);
+        this.windowBits = 5;
+
+        deflateInit(this.strm, this.windowBits);
+    }
+
+    deflate(inData) {
+        /* eslint-disable camelcase */
+        this.strm.input = inData;
+        this.strm.avail_in = this.strm.input.length;
+        this.strm.next_in = 0;
+        this.strm.output = this.outputBuffer;
+        this.strm.avail_out = this.chunkSize;
+        this.strm.next_out = 0;
+        /* eslint-enable camelcase */
+
+        let lastRet = deflate(this.strm, Z_FULL_FLUSH);
+        let outData = new Uint8Array(this.strm.output.buffer, 0, this.strm.next_out);
+
+        if (lastRet < 0) {
+            throw new Error("zlib deflate failed");
+        }
+
+        if (this.strm.avail_in > 0) {
+            // Read chunks until done
+
+            let chunks = [outData];
+            let totalLen = outData.length;
+            do {
+                /* eslint-disable camelcase */
+                this.strm.output = new Uint8Array(this.chunkSize);
+                this.strm.next_out = 0;
+                this.strm.avail_out = this.chunkSize;
+                /* eslint-enable camelcase */
+
+                lastRet = deflate(this.strm, Z_FULL_FLUSH);
+
+                if (lastRet < 0) {
+                    throw new Error("zlib deflate failed");
+                }
+
+                let chunk = new Uint8Array(this.strm.output.buffer, 0, this.strm.next_out);
+                totalLen += chunk.length;
+                chunks.push(chunk);
+            } while (this.strm.avail_in > 0);
+
+            // Combine chunks into a single data
+
+            let newData = new Uint8Array(totalLen);
+            let offset = 0;
+
+            for (let i = 0; i < chunks.length; i++) {
+                newData.set(chunks[i], offset);
+                offset += chunks[i].length;
+            }
+
+            outData = newData;
+        }
+
+        /* eslint-disable camelcase */
+        this.strm.input = null;
+        this.strm.avail_in = 0;
+        this.strm.next_in = 0;
+        /* eslint-enable camelcase */
+
+        return outData;
+    }
+
+}

core/des.js

@@ -81,7 +81,7 @@
 const PC2 = [13,16,10,23, 0, 4, 2,27,14, 5,20, 9,22,18,11, 3,
              25, 7,15, 6,26,19,12, 1,40,51,30,36,46,54,29,39,
              50,44,32,47,43,48,38,55,33,52,45,41,49,35,28,31 ],
-    totrot = [ 1, 2, 4, 6, 8,10,12,14,15,17,19,21,23,25,27,28];
+      totrot = [ 1, 2, 4, 6, 8,10,12,14,15,17,19,21,23,25,27,28];
 
 const z = 0x0;
 let a,b,c,d,e,f;

core/display.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -8,25 +8,20 @@
 
 import * as Log from './util/logging.js';
 import Base64 from "./base64.js";
-import { supportsImageMetadata } from './util/browser.js';
+import { toSigned32bit } from './util/int.js';
 
 export default class Display {
     constructor(target) {
         this._drawCtx = null;
-        this._c_forceCanvas = false;
 
         this._renderQ = [];  // queue drawing actions for in-oder rendering
         this._flushing = false;
 
         // the full frame buffer (logical canvas) size
-        this._fb_width = 0;
-        this._fb_height = 0;
+        this._fbWidth = 0;
+        this._fbHeight = 0;
 
         this._prevDrawStyle = "";
-        this._tile = null;
-        this._tile16x16 = null;
-        this._tile_x = 0;
-        this._tile_y = 0;
 
         Log.Debug(">> Display.constructor");
 
@@ -60,21 +55,12 @@ export default class Display {
 
         Log.Debug("User Agent: " + navigator.userAgent);
 
-        this.clear();
-
-        // Check canvas features
-        if (!('createImageData' in this._drawCtx)) {
-            throw new Error("Canvas does not support createImageData");
-        }
-
-        this._tile16x16 = this._drawCtx.createImageData(16, 16);
         Log.Debug("<< Display.constructor");
 
         // ===== PROPERTIES =====
 
         this._scale = 1.0;
         this._clipViewport = false;
-        this.logo = null;
 
         // ===== EVENT HANDLERS =====
 
@@ -98,11 +84,11 @@ export default class Display {
     }
 
     get width() {
-        return this._fb_width;
+        return this._fbWidth;
     }
 
     get height() {
-        return this._fb_height;
+        return this._fbHeight;
     }
 
     // ===== PUBLIC METHODS =====
@@ -125,15 +111,15 @@ export default class Display {
         if (deltaX < 0 && vp.x + deltaX < 0) {
             deltaX = -vp.x;
         }
-        if (vx2 + deltaX >= this._fb_width) {
-            deltaX -= vx2 + deltaX - this._fb_width + 1;
+        if (vx2 + deltaX >= this._fbWidth) {
+            deltaX -= vx2 + deltaX - this._fbWidth + 1;
         }
 
         if (vp.y + deltaY < 0) {
             deltaY = -vp.y;
         }
-        if (vy2 + deltaY >= this._fb_height) {
-            deltaY -= (vy2 + deltaY - this._fb_height + 1);
+        if (vy2 + deltaY >= this._fbHeight) {
+            deltaY -= (vy2 + deltaY - this._fbHeight + 1);
         }
 
         if (deltaX === 0 && deltaY === 0) {
@@ -156,18 +142,18 @@ export default class Display {
             typeof(height) === "undefined") {
 
             Log.Debug("Setting viewport to full display region");
-            width = this._fb_width;
-            height = this._fb_height;
+            width = this._fbWidth;
+            height = this._fbHeight;
         }
 
         width = Math.floor(width);
         height = Math.floor(height);
 
-        if (width > this._fb_width) {
-            width = this._fb_width;
+        if (width > this._fbWidth) {
+            width = this._fbWidth;
         }
-        if (height > this._fb_height) {
-            height = this._fb_height;
+        if (height > this._fbHeight) {
+            height = this._fbHeight;
         }
 
         const vp = this._viewportLoc;
@@ -194,21 +180,21 @@ export default class Display {
         if (this._scale === 0) {
             return 0;
         }
-        return x / this._scale + this._viewportLoc.x;
+        return toSigned32bit(x / this._scale + this._viewportLoc.x);
     }
 
     absY(y) {
         if (this._scale === 0) {
             return 0;
         }
-        return y / this._scale + this._viewportLoc.y;
+        return toSigned32bit(y / this._scale + this._viewportLoc.y);
     }
 
     resize(width, height) {
         this._prevDrawStyle = "";
 
-        this._fb_width = width;
-        this._fb_height = height;
+        this._fbWidth = width;
+        this._fbHeight = height;
 
         const canvas = this._backbuffer;
         if (canvas.width !== width || canvas.height !== height) {
@@ -238,6 +224,18 @@ export default class Display {
         this.viewportChangePos(0, 0);
     }
 
+    getImageData() {
+        return this._drawCtx.getImageData(0, 0, this.width, this.height);
+    }
+
+    toDataURL(type, encoderOptions) {
+        return this._backbuffer.toDataURL(type, encoderOptions);
+    }
+
+    toBlob(callback, type, quality) {
+        return this._backbuffer.toBlob(callback, type, quality);
+    }
+
     // Track what parts of the visible canvas that need updating
     _damage(x, y, w, h) {
         if (x < this._damageBounds.left) {
@@ -256,9 +254,9 @@ export default class Display {
 
     // Update the visible canvas with the contents of the
     // rendering canvas
-    flip(from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
-            this._renderQ_push({
+    flip(fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
+            this._renderQPush({
                 'type': 'flip'
             });
         } else {
@@ -302,17 +300,6 @@ export default class Display {
         }
     }
 
-    clear() {
-        if (this._logo) {
-            this.resize(this._logo.width, this._logo.height);
-            this.imageRect(0, 0, this._logo.type, this._logo.data);
-        } else {
-            this.resize(240, 20);
-            this._drawCtx.clearRect(0, 0, this._fb_width, this._fb_height);
-        }
-        this.flip();
-    }
-
     pending() {
         return this._renderQ.length > 0;
     }
@@ -325,9 +312,9 @@ export default class Display {
         }
     }
 
-    fillRect(x, y, width, height, color, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
-            this._renderQ_push({
+    fillRect(x, y, width, height, color, fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
+            this._renderQPush({
                 'type': 'fill',
                 'x': x,
                 'y': y,
@@ -342,14 +329,14 @@ export default class Display {
         }
     }
 
-    copyImage(old_x, old_y, new_x, new_y, w, h, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
-            this._renderQ_push({
+    copyImage(oldX, oldY, newX, newY, w, h, fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
+            this._renderQPush({
                 'type': 'copy',
-                'old_x': old_x,
-                'old_y': old_y,
-                'x': new_x,
-                'y': new_y,
+                'oldX': oldX,
+                'oldY': oldY,
+                'x': newX,
+                'y': newY,
                 'width': w,
                 'height': h,
             });
@@ -367,131 +354,54 @@ export default class Display {
             this._drawCtx.imageSmoothingEnabled = false;
 
             this._drawCtx.drawImage(this._backbuffer,
-                                    old_x, old_y, w, h,
-                                    new_x, new_y, w, h);
-            this._damage(new_x, new_y, w, h);
+                                    oldX, oldY, w, h,
+                                    newX, newY, w, h);
+            this._damage(newX, newY, w, h);
         }
     }
 
-    imageRect(x, y, mime, arr) {
+    imageRect(x, y, width, height, mime, arr) {
+        /* The internal logic cannot handle empty images, so bail early */
+        if ((width === 0) || (height === 0)) {
+            return;
+        }
+
         const img = new Image();
         img.src = "data: " + mime + ";base64," + Base64.encode(arr);
-        this._renderQ_push({
+
+        this._renderQPush({
             'type': 'img',
             'img': img,
             'x': x,
-            'y': y
+            'y': y,
+            'width': width,
+            'height': height
         });
     }
 
-    // start updating a tile
-    startTile(x, y, width, height, color) {
-        this._tile_x = x;
-        this._tile_y = y;
-        if (width === 16 && height === 16) {
-            this._tile = this._tile16x16;
-        } else {
-            this._tile = this._drawCtx.createImageData(width, height);
-        }
-
-        const red = color[2];
-        const green = color[1];
-        const blue = color[0];
-
-        const data = this._tile.data;
-        for (let i = 0; i < width * height * 4; i += 4) {
-            data[i] = red;
-            data[i + 1] = green;
-            data[i + 2] = blue;
-            data[i + 3] = 255;
-        }
-    }
-
-    // update sub-rectangle of the current tile
-    subTile(x, y, w, h, color) {
-        const red = color[2];
-        const green = color[1];
-        const blue = color[0];
-        const xend = x + w;
-        const yend = y + h;
-
-        const data = this._tile.data;
-        const width = this._tile.width;
-        for (let j = y; j < yend; j++) {
-            for (let i = x; i < xend; i++) {
-                const p = (i + (j * width)) * 4;
-                data[p] = red;
-                data[p + 1] = green;
-                data[p + 2] = blue;
-                data[p + 3] = 255;
-            }
-        }
-    }
-
-    // draw the current tile to the screen
-    finishTile() {
-        this._drawCtx.putImageData(this._tile, this._tile_x, this._tile_y);
-        this._damage(this._tile_x, this._tile_y,
-                     this._tile.width, this._tile.height);
-    }
-
-    blitImage(x, y, width, height, arr, offset, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
+    blitImage(x, y, width, height, arr, offset, fromQueue) {
+        if (this._renderQ.length !== 0 && !fromQueue) {
             // NB(directxman12): it's technically more performant here to use preallocated arrays,
             // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
             // this probably isn't getting called *nearly* as much
-            const new_arr = new Uint8Array(width * height * 4);
-            new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length));
-            this._renderQ_push({
+            const newArr = new Uint8Array(width * height * 4);
+            newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
+            this._renderQPush({
                 'type': 'blit',
-                'data': new_arr,
+                'data': newArr,
                 'x': x,
                 'y': y,
                 'width': width,
                 'height': height,
             });
         } else {
-            this._bgrxImageData(x, y, width, height, arr, offset);
-        }
-    }
-
-    blitRgbImage(x, y, width, height, arr, offset, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
-            // NB(directxman12): it's technically more performant here to use preallocated arrays,
-            // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
-            // this probably isn't getting called *nearly* as much
-            const new_arr = new Uint8Array(width * height * 3);
-            new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length));
-            this._renderQ_push({
-                'type': 'blitRgb',
-                'data': new_arr,
-                'x': x,
-                'y': y,
-                'width': width,
-                'height': height,
-            });
-        } else {
-            this._rgbImageData(x, y, width, height, arr, offset);
-        }
-    }
-
-    blitRgbxImage(x, y, width, height, arr, offset, from_queue) {
-        if (this._renderQ.length !== 0 && !from_queue) {
-            // NB(directxman12): it's technically more performant here to use preallocated arrays,
-            // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
-            // this probably isn't getting called *nearly* as much
-            const new_arr = new Uint8Array(width * height * 4);
-            new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length));
-            this._renderQ_push({
-                'type': 'blitRgbx',
-                'data': new_arr,
-                'x': x,
-                'y': y,
-                'width': width,
-                'height': height,
-            });
-        } else {
-            this._rgbxImageData(x, y, width, height, arr, offset);
+            // NB(directxman12): arr must be an Type Array view
+            let data = new Uint8ClampedArray(arr.buffer,
+                                             arr.byteOffset + offset,
+                                             width * height * 4);
+            let img = new ImageData(data, width, height);
+            this._drawCtx.putImageData(img, x, y);
+            this._damage(x, y, width, height);
         }
     }
 
@@ -543,69 +453,30 @@ export default class Display {
     }
 
     _setFillColor(color) {
-        const newStyle = 'rgb(' + color[2] + ',' + color[1] + ',' + color[0] + ')';
+        const newStyle = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
         if (newStyle !== this._prevDrawStyle) {
             this._drawCtx.fillStyle = newStyle;
             this._prevDrawStyle = newStyle;
         }
     }
 
-    _rgbImageData(x, y, width, height, arr, offset) {
-        const img = this._drawCtx.createImageData(width, height);
-        const data = img.data;
-        for (let i = 0, j = offset; i < width * height * 4; i += 4, j += 3) {
-            data[i]     = arr[j];
-            data[i + 1] = arr[j + 1];
-            data[i + 2] = arr[j + 2];
-            data[i + 3] = 255;  // Alpha
-        }
-        this._drawCtx.putImageData(img, x, y);
-        this._damage(x, y, img.width, img.height);
-    }
-
-    _bgrxImageData(x, y, width, height, arr, offset) {
-        const img = this._drawCtx.createImageData(width, height);
-        const data = img.data;
-        for (let i = 0, j = offset; i < width * height * 4; i += 4, j += 4) {
-            data[i]     = arr[j + 2];
-            data[i + 1] = arr[j + 1];
-            data[i + 2] = arr[j];
-            data[i + 3] = 255;  // Alpha
-        }
-        this._drawCtx.putImageData(img, x, y);
-        this._damage(x, y, img.width, img.height);
-    }
-
-    _rgbxImageData(x, y, width, height, arr, offset) {
-        // NB(directxman12): arr must be an Type Array view
-        let img;
-        if (supportsImageMetadata) {
-            img = new ImageData(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4), width, height);
-        } else {
-            img = this._drawCtx.createImageData(width, height);
-            img.data.set(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4));
-        }
-        this._drawCtx.putImageData(img, x, y);
-        this._damage(x, y, img.width, img.height);
-    }
-
-    _renderQ_push(action) {
+    _renderQPush(action) {
         this._renderQ.push(action);
         if (this._renderQ.length === 1) {
             // If this can be rendered immediately it will be, otherwise
             // the scanner will wait for the relevant event
-            this._scan_renderQ();
+            this._scanRenderQ();
         }
     }
 
-    _resume_renderQ() {
+    _resumeRenderQ() {
         // "this" is the object that is ready, not the
         // display object
-        this.removeEventListener('load', this._noVNC_display._resume_renderQ);
-        this._noVNC_display._scan_renderQ();
+        this.removeEventListener('load', this._noVNCDisplay._resumeRenderQ);
+        this._noVNCDisplay._scanRenderQ();
     }
 
-    _scan_renderQ() {
+    _scanRenderQ() {
         let ready = true;
         while (ready && this._renderQ.length > 0) {
             const a = this._renderQ[0];
@@ -614,7 +485,7 @@ export default class Display {
                     this.flip(true);
                     break;
                 case 'copy':
-                    this.copyImage(a.old_x, a.old_y, a.x, a.y, a.width, a.height, true);
+                    this.copyImage(a.oldX, a.oldY, a.x, a.y, a.width, a.height, true);
                     break;
                 case 'fill':
                     this.fillRect(a.x, a.y, a.width, a.height, a.color, true);
@@ -622,18 +493,18 @@ export default class Display {
                 case 'blit':
                     this.blitImage(a.x, a.y, a.width, a.height, a.data, 0, true);
                     break;
-                case 'blitRgb':
-                    this.blitRgbImage(a.x, a.y, a.width, a.height, a.data, 0, true);
-                    break;
-                case 'blitRgbx':
-                    this.blitRgbxImage(a.x, a.y, a.width, a.height, a.data, 0, true);
-                    break;
                 case 'img':
                     if (a.img.complete) {
+                        if (a.img.width !== a.width || a.img.height !== a.height) {
+                            Log.Error("Decoded image has incorrect dimensions. Got " +
+                                      a.img.width + "x" + a.img.height + ". Expected " +
+                                      a.width + "x" + a.height + ".");
+                            return;
+                        }
                         this.drawImage(a.img, a.x, a.y);
                     } else {
-                        a.img._noVNC_display = this;
-                        a.img.addEventListener('load', this._resume_renderQ);
+                        a.img._noVNCDisplay = this;
+                        a.img.addEventListener('load', this._resumeRenderQ);
                         // We need to wait for this image to 'load'
                         // to keep things in-order
                         ready = false;

core/encodings.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -12,7 +12,9 @@ export const encodings = {
     encodingRRE: 2,
     encodingHextile: 5,
     encodingTight: 7,
+    encodingZRLE: 16,
     encodingTightPNG: -260,
+    encodingJPEG: 21,
 
     pseudoEncodingQualityLevel9: -23,
     pseudoEncodingQualityLevel0: -32,
@@ -20,12 +22,15 @@ export const encodings = {
     pseudoEncodingLastRect: -224,
     pseudoEncodingCursor: -239,
     pseudoEncodingQEMUExtendedKeyEvent: -258,
+    pseudoEncodingDesktopName: -307,
     pseudoEncodingExtendedDesktopSize: -308,
     pseudoEncodingXvp: -309,
     pseudoEncodingFence: -312,
     pseudoEncodingContinuousUpdates: -313,
     pseudoEncodingCompressLevel9: -247,
     pseudoEncodingCompressLevel0: -256,
+    pseudoEncodingVMwareCursor: 0x574d5664,
+    pseudoEncodingExtendedClipboard: 0xc0a1e5ce
 };
 
 export function encodingName(num) {
@@ -35,7 +40,9 @@ export function encodingName(num) {
         case encodings.encodingRRE:      return "RRE";
         case encodings.encodingHextile:  return "Hextile";
         case encodings.encodingTight:    return "Tight";
+        case encodings.encodingZRLE:     return "ZRLE";
         case encodings.encodingTightPNG: return "TightPNG";
+        case encodings.encodingJPEG:     return "JPEG";
         default:                         return "[unknown encoding " + num + "]";
     }
 }

core/inflator.js

@@ -1,3 +1,11 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2020 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
+
 import { inflateInit, inflate, inflateReset } from "../vendor/pako/lib/zlib/inflate.js";
 import ZStream from "../vendor/pako/lib/zlib/zstream.js";
 
@@ -11,12 +19,22 @@ export default class Inflate {
         inflateInit(this.strm, this.windowBits);
     }
 
-    inflate(data, flush, expected) {
-        this.strm.input = data;
-        this.strm.avail_in = this.strm.input.length;
-        this.strm.next_in = 0;
-        this.strm.next_out = 0;
+    setInput(data) {
+        if (!data) {
+            //FIXME: flush remaining data.
+            /* eslint-disable camelcase */
+            this.strm.input = null;
+            this.strm.avail_in = 0;
+            this.strm.next_in = 0;
+        } else {
+            this.strm.input = data;
+            this.strm.avail_in = this.strm.input.length;
+            this.strm.next_in = 0;
+            /* eslint-enable camelcase */
+        }
+    }
 
+    inflate(expected) {
         // resize our output buffer if it's too small
         // (we could just use multiple chunks, but that would cause an extra
         // allocation each time to flatten the chunks)
@@ -25,9 +43,19 @@ export default class Inflate {
             this.strm.output = new Uint8Array(this.chunkSize);
         }
 
-        this.strm.avail_out = this.chunkSize;
+        /* eslint-disable camelcase */
+        this.strm.next_out = 0;
+        this.strm.avail_out = expected;
+        /* eslint-enable camelcase */
 
-        inflate(this.strm, flush);
+        let ret = inflate(this.strm, 0); // Flush argument not used.
+        if (ret < 0) {
+            throw new Error("zlib inflate failed");
+        }
+
+        if (this.strm.next_out != expected) {
+            throw new Error("Incomplete zlib block");
+        }
 
         return new Uint8Array(this.strm.output.buffer, 0, this.strm.next_out);
     }

core/input/domkeytable.js

@@ -35,7 +35,7 @@ function addNumpad(key, standard, numpad) {
     DOMKeyTable[key] = [standard, standard, standard, numpad];
 }
 
-// 2.2. Modifier Keys
+// 3.2. Modifier Keys
 
 addLeftRight("Alt", KeyTable.XK_Alt_L, KeyTable.XK_Alt_R);
 addStandard("AltGraph", KeyTable.XK_ISO_Level3_Shift);
@@ -43,35 +43,38 @@ addStandard("CapsLock", KeyTable.XK_Caps_Lock);
 addLeftRight("Control", KeyTable.XK_Control_L, KeyTable.XK_Control_R);
 // - Fn
 // - FnLock
-addLeftRight("Hyper", KeyTable.XK_Super_L, KeyTable.XK_Super_R);
 addLeftRight("Meta", KeyTable.XK_Super_L, KeyTable.XK_Super_R);
 addStandard("NumLock", KeyTable.XK_Num_Lock);
 addStandard("ScrollLock", KeyTable.XK_Scroll_Lock);
 addLeftRight("Shift", KeyTable.XK_Shift_L, KeyTable.XK_Shift_R);
-addLeftRight("Super", KeyTable.XK_Super_L, KeyTable.XK_Super_R);
 // - Symbol
 // - SymbolLock
+// - Hyper
+// - Super
 
-// 2.3. Whitespace Keys
+// 3.3. Whitespace Keys
 
 addNumpad("Enter", KeyTable.XK_Return, KeyTable.XK_KP_Enter);
 addStandard("Tab", KeyTable.XK_Tab);
 addNumpad(" ", KeyTable.XK_space, KeyTable.XK_KP_Space);
 
-// 2.4. Navigation Keys
+// 3.4. Navigation Keys
 
 addNumpad("ArrowDown", KeyTable.XK_Down, KeyTable.XK_KP_Down);
-addNumpad("ArrowUp", KeyTable.XK_Up, KeyTable.XK_KP_Up);
 addNumpad("ArrowLeft", KeyTable.XK_Left, KeyTable.XK_KP_Left);
 addNumpad("ArrowRight", KeyTable.XK_Right, KeyTable.XK_KP_Right);
+addNumpad("ArrowUp", KeyTable.XK_Up, KeyTable.XK_KP_Up);
 addNumpad("End", KeyTable.XK_End, KeyTable.XK_KP_End);
 addNumpad("Home", KeyTable.XK_Home, KeyTable.XK_KP_Home);
 addNumpad("PageDown", KeyTable.XK_Next, KeyTable.XK_KP_Next);
 addNumpad("PageUp", KeyTable.XK_Prior, KeyTable.XK_KP_Prior);
 
-// 2.5. Editing Keys
+// 3.5. Editing Keys
 
 addStandard("Backspace", KeyTable.XK_BackSpace);
+// Browsers send "Clear" for the numpad 5 without NumLock because
+// Windows uses VK_Clear for that key. But Unix expects KP_Begin for
+// that scenario.
 addNumpad("Clear", KeyTable.XK_Clear, KeyTable.XK_KP_Begin);
 addStandard("Copy", KeyTable.XF86XK_Copy);
 // - CrSel
@@ -84,7 +87,7 @@ addStandard("Paste", KeyTable.XF86XK_Paste);
 addStandard("Redo", KeyTable.XK_Redo);
 addStandard("Undo", KeyTable.XK_Undo);
 
-// 2.6. UI Keys
+// 3.6. UI Keys
 
 // - Accept
 // - Again (could just be XK_Redo)
@@ -102,7 +105,7 @@ addStandard("Select", KeyTable.XK_Select);
 addStandard("ZoomIn", KeyTable.XF86XK_ZoomIn);
 addStandard("ZoomOut", KeyTable.XF86XK_ZoomOut);
 
-// 2.7. Device Keys
+// 3.7. Device Keys
 
 addStandard("BrightnessDown", KeyTable.XF86XK_MonBrightnessDown);
 addStandard("BrightnessUp", KeyTable.XF86XK_MonBrightnessUp);
@@ -115,10 +118,10 @@ addStandard("Hibernate", KeyTable.XF86XK_Hibernate);
 addStandard("Standby", KeyTable.XF86XK_Standby);
 addStandard("WakeUp", KeyTable.XF86XK_WakeUp);
 
-// 2.8. IME and Composition Keys
+// 3.8. IME and Composition Keys
 
 addStandard("AllCandidates", KeyTable.XK_MultipleCandidate);
-addStandard("Alphanumeric", KeyTable.XK_Eisu_Shift); // could also be _Eisu_Toggle
+addStandard("Alphanumeric", KeyTable.XK_Eisu_toggle);
 addStandard("CodeInput", KeyTable.XK_Codeinput);
 addStandard("Compose", KeyTable.XK_Multi_key);
 addStandard("Convert", KeyTable.XK_Henkan);
@@ -136,7 +139,7 @@ addStandard("PreviousCandidate", KeyTable.XK_PreviousCandidate);
 addStandard("SingleCandidate", KeyTable.XK_SingleCandidate);
 addStandard("HangulMode", KeyTable.XK_Hangul);
 addStandard("HanjaMode", KeyTable.XK_Hangul_Hanja);
-addStandard("JunjuaMode", KeyTable.XK_Hangul_Jeonja);
+addStandard("JunjaMode", KeyTable.XK_Hangul_Jeonja);
 addStandard("Eisu", KeyTable.XK_Eisu_toggle);
 addStandard("Hankaku", KeyTable.XK_Hankaku);
 addStandard("Hiragana", KeyTable.XK_Hiragana);
@@ -146,9 +149,9 @@ addStandard("KanjiMode", KeyTable.XK_Kanji);
 addStandard("Katakana", KeyTable.XK_Katakana);
 addStandard("Romaji", KeyTable.XK_Romaji);
 addStandard("Zenkaku", KeyTable.XK_Zenkaku);
-addStandard("ZenkakuHanaku", KeyTable.XK_Zenkaku_Hankaku);
+addStandard("ZenkakuHankaku", KeyTable.XK_Zenkaku_Hankaku);
 
-// 2.9. General-Purpose Function Keys
+// 3.9. General-Purpose Function Keys
 
 addStandard("F1", KeyTable.XK_F1);
 addStandard("F2", KeyTable.XK_F2);
@@ -187,17 +190,19 @@ addStandard("F34", KeyTable.XK_F34);
 addStandard("F35", KeyTable.XK_F35);
 // - Soft1...
 
-// 2.10. Multimedia Keys
+// 3.10. Multimedia Keys
 
 // - ChannelDown
 // - ChannelUp
 addStandard("Close", KeyTable.XF86XK_Close);
 addStandard("MailForward", KeyTable.XF86XK_MailForward);
 addStandard("MailReply", KeyTable.XF86XK_Reply);
-addStandard("MainSend", KeyTable.XF86XK_Send);
+addStandard("MailSend", KeyTable.XF86XK_Send);
+// - MediaClose
 addStandard("MediaFastForward", KeyTable.XF86XK_AudioForward);
 addStandard("MediaPause", KeyTable.XF86XK_AudioPause);
 addStandard("MediaPlay", KeyTable.XF86XK_AudioPlay);
+// - MediaPlayPause
 addStandard("MediaRecord", KeyTable.XF86XK_AudioRecord);
 addStandard("MediaRewind", KeyTable.XF86XK_AudioRewind);
 addStandard("MediaStop", KeyTable.XF86XK_AudioStop);
@@ -209,20 +214,18 @@ addStandard("Print", KeyTable.XK_Print);
 addStandard("Save", KeyTable.XF86XK_Save);
 addStandard("SpellCheck", KeyTable.XF86XK_Spell);
 
-// 2.11. Multimedia Numpad Keys
+// 3.11. Multimedia Numpad Keys
 
 // - Key11
 // - Key12
 
-// 2.12. Audio Keys
+// 3.12. Audio Keys
 
 // - AudioBalanceLeft
 // - AudioBalanceRight
-// - AudioBassDown
 // - AudioBassBoostDown
 // - AudioBassBoostToggle
 // - AudioBassBoostUp
-// - AudioBassUp
 // - AudioFaderFront
 // - AudioFaderRear
 // - AudioSurroundModeNext
@@ -236,19 +239,20 @@ addStandard("AudioVolumeMute", KeyTable.XF86XK_AudioMute);
 // - MicrophoneVolumeUp
 addStandard("MicrophoneVolumeMute", KeyTable.XF86XK_AudioMicMute);
 
-// 2.13. Speech Keys
+// 3.13. Speech Keys
 
 // - SpeechCorrectionList
 // - SpeechInputToggle
 
-// 2.14. Application Keys
+// 3.14. Application Keys
 
-addStandard("LaunchCalculator", KeyTable.XF86XK_Calculator);
+addStandard("LaunchApplication1", KeyTable.XF86XK_MyComputer);
+addStandard("LaunchApplication2", KeyTable.XF86XK_Calculator);
 addStandard("LaunchCalendar", KeyTable.XF86XK_Calendar);
+// - LaunchContacts
 addStandard("LaunchMail", KeyTable.XF86XK_Mail);
 addStandard("LaunchMediaPlayer", KeyTable.XF86XK_AudioMedia);
 addStandard("LaunchMusicPlayer", KeyTable.XF86XK_Music);
-addStandard("LaunchMyComputer", KeyTable.XF86XK_MyComputer);
 addStandard("LaunchPhone", KeyTable.XF86XK_Phone);
 addStandard("LaunchScreenSaver", KeyTable.XF86XK_ScreenSaver);
 addStandard("LaunchSpreadsheet", KeyTable.XF86XK_Excel);
@@ -256,7 +260,7 @@ addStandard("LaunchWebBrowser", KeyTable.XF86XK_WWW);
 addStandard("LaunchWebCam", KeyTable.XF86XK_WebCam);
 addStandard("LaunchWordProcessor", KeyTable.XF86XK_Word);
 
-// 2.15. Browser Keys
+// 3.15. Browser Keys
 
 addStandard("BrowserBack", KeyTable.XF86XK_Back);
 addStandard("BrowserFavorites", KeyTable.XF86XK_Favorites);
@@ -266,15 +270,15 @@ addStandard("BrowserRefresh", KeyTable.XF86XK_Refresh);
 addStandard("BrowserSearch", KeyTable.XF86XK_Search);
 addStandard("BrowserStop", KeyTable.XF86XK_Stop);
 
-// 2.16. Mobile Phone Keys
+// 3.16. Mobile Phone Keys
 
 // - A whole bunch...
 
-// 2.17. TV Keys
+// 3.17. TV Keys
 
 // - A whole bunch...
 
-// 2.18. Media Controller Keys
+// 3.18. Media Controller Keys
 
 // - A whole bunch...
 addStandard("Dimmer", KeyTable.XF86XK_BrightnessAdjust);

core/input/gesturehandler.js

@@ -0,0 +1,567 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2020 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ *
+ */
+
+const GH_NOGESTURE = 0;
+const GH_ONETAP    = 1;
+const GH_TWOTAP    = 2;
+const GH_THREETAP  = 4;
+const GH_DRAG      = 8;
+const GH_LONGPRESS = 16;
+const GH_TWODRAG   = 32;
+const GH_PINCH     = 64;
+
+const GH_INITSTATE = 127;
+
+const GH_MOVE_THRESHOLD = 50;
+const GH_ANGLE_THRESHOLD = 90; // Degrees
+
+// Timeout when waiting for gestures (ms)
+const GH_MULTITOUCH_TIMEOUT = 250;
+
+// Maximum time between press and release for a tap (ms)
+const GH_TAP_TIMEOUT = 1000;
+
+// Timeout when waiting for longpress (ms)
+const GH_LONGPRESS_TIMEOUT = 1000;
+
+// Timeout when waiting to decide between PINCH and TWODRAG (ms)
+const GH_TWOTOUCH_TIMEOUT = 50;
+
+export default class GestureHandler {
+    constructor() {
+        this._target = null;
+
+        this._state = GH_INITSTATE;
+
+        this._tracked = [];
+        this._ignored = [];
+
+        this._waitingRelease = false;
+        this._releaseStart = 0.0;
+
+        this._longpressTimeoutId = null;
+        this._twoTouchTimeoutId = null;
+
+        this._boundEventHandler = this._eventHandler.bind(this);
+    }
+
+    attach(target) {
+        this.detach();
+
+        this._target = target;
+        this._target.addEventListener('touchstart',
+                                      this._boundEventHandler);
+        this._target.addEventListener('touchmove',
+                                      this._boundEventHandler);
+        this._target.addEventListener('touchend',
+                                      this._boundEventHandler);
+        this._target.addEventListener('touchcancel',
+                                      this._boundEventHandler);
+    }
+
+    detach() {
+        if (!this._target) {
+            return;
+        }
+
+        this._stopLongpressTimeout();
+        this._stopTwoTouchTimeout();
+
+        this._target.removeEventListener('touchstart',
+                                         this._boundEventHandler);
+        this._target.removeEventListener('touchmove',
+                                         this._boundEventHandler);
+        this._target.removeEventListener('touchend',
+                                         this._boundEventHandler);
+        this._target.removeEventListener('touchcancel',
+                                         this._boundEventHandler);
+        this._target = null;
+    }
+
+    _eventHandler(e) {
+        let fn;
+
+        e.stopPropagation();
+        e.preventDefault();
+
+        switch (e.type) {
+            case 'touchstart':
+                fn = this._touchStart;
+                break;
+            case 'touchmove':
+                fn = this._touchMove;
+                break;
+            case 'touchend':
+            case 'touchcancel':
+                fn = this._touchEnd;
+                break;
+        }
+
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            let touch = e.changedTouches[i];
+            fn.call(this, touch.identifier, touch.clientX, touch.clientY);
+        }
+    }
+
+    _touchStart(id, x, y) {
+        // Ignore any new touches if there is already an active gesture,
+        // or we're in a cleanup state
+        if (this._hasDetectedGesture() || (this._state === GH_NOGESTURE)) {
+            this._ignored.push(id);
+            return;
+        }
+
+        // Did it take too long between touches that we should no longer
+        // consider this a single gesture?
+        if ((this._tracked.length > 0) &&
+            ((Date.now() - this._tracked[0].started) > GH_MULTITOUCH_TIMEOUT)) {
+            this._state = GH_NOGESTURE;
+            this._ignored.push(id);
+            return;
+        }
+
+        // If we're waiting for fingers to release then we should no longer
+        // recognize new touches
+        if (this._waitingRelease) {
+            this._state = GH_NOGESTURE;
+            this._ignored.push(id);
+            return;
+        }
+
+        this._tracked.push({
+            id: id,
+            started: Date.now(),
+            active: true,
+            firstX: x,
+            firstY: y,
+            lastX: x,
+            lastY: y,
+            angle: 0
+        });
+
+        switch (this._tracked.length) {
+            case 1:
+                this._startLongpressTimeout();
+                break;
+
+            case 2:
+                this._state &= ~(GH_ONETAP | GH_DRAG | GH_LONGPRESS);
+                this._stopLongpressTimeout();
+                break;
+
+            case 3:
+                this._state &= ~(GH_TWOTAP | GH_TWODRAG | GH_PINCH);
+                break;
+
+            default:
+                this._state = GH_NOGESTURE;
+        }
+    }
+
+    _touchMove(id, x, y) {
+        let touch = this._tracked.find(t => t.id === id);
+
+        // If this is an update for a touch we're not tracking, ignore it
+        if (touch === undefined) {
+            return;
+        }
+
+        // Update the touches last position with the event coordinates
+        touch.lastX = x;
+        touch.lastY = y;
+
+        let deltaX = x - touch.firstX;
+        let deltaY = y - touch.firstY;
+
+        // Update angle when the touch has moved
+        if ((touch.firstX !== touch.lastX) ||
+            (touch.firstY !== touch.lastY)) {
+            touch.angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
+        }
+
+        if (!this._hasDetectedGesture()) {
+            // Ignore moves smaller than the minimum threshold
+            if (Math.hypot(deltaX, deltaY) < GH_MOVE_THRESHOLD) {
+                return;
+            }
+
+            // Can't be a tap or long press as we've seen movement
+            this._state &= ~(GH_ONETAP | GH_TWOTAP | GH_THREETAP | GH_LONGPRESS);
+            this._stopLongpressTimeout();
+
+            if (this._tracked.length !== 1) {
+                this._state &= ~(GH_DRAG);
+            }
+            if (this._tracked.length !== 2) {
+                this._state &= ~(GH_TWODRAG | GH_PINCH);
+            }
+
+            // We need to figure out which of our different two touch gestures
+            // this might be
+            if (this._tracked.length === 2) {
+
+                // The other touch is the one where the id doesn't match
+                let prevTouch = this._tracked.find(t => t.id !== id);
+
+                // How far the previous touch point has moved since start
+                let prevDeltaMove = Math.hypot(prevTouch.firstX - prevTouch.lastX,
+                                               prevTouch.firstY - prevTouch.lastY);
+
+                // We know that the current touch moved far enough,
+                // but unless both touches moved further than their
+                // threshold we don't want to disqualify any gestures
+                if (prevDeltaMove > GH_MOVE_THRESHOLD) {
+
+                    // The angle difference between the direction of the touch points
+                    let deltaAngle = Math.abs(touch.angle - prevTouch.angle);
+                    deltaAngle = Math.abs(((deltaAngle + 180) % 360) - 180);
+
+                    // PINCH or TWODRAG can be eliminated depending on the angle
+                    if (deltaAngle > GH_ANGLE_THRESHOLD) {
+                        this._state &= ~GH_TWODRAG;
+                    } else {
+                        this._state &= ~GH_PINCH;
+                    }
+
+                    if (this._isTwoTouchTimeoutRunning()) {
+                        this._stopTwoTouchTimeout();
+                    }
+                } else if (!this._isTwoTouchTimeoutRunning()) {
+                    // We can't determine the gesture right now, let's
+                    // wait and see if more events are on their way
+                    this._startTwoTouchTimeout();
+                }
+            }
+
+            if (!this._hasDetectedGesture()) {
+                return;
+            }
+
+            this._pushEvent('gesturestart');
+        }
+
+        this._pushEvent('gesturemove');
+    }
+
+    _touchEnd(id, x, y) {
+        // Check if this is an ignored touch
+        if (this._ignored.indexOf(id) !== -1) {
+            // Remove this touch from ignored
+            this._ignored.splice(this._ignored.indexOf(id), 1);
+
+            // And reset the state if there are no more touches
+            if ((this._ignored.length === 0) &&
+                (this._tracked.length === 0)) {
+                this._state = GH_INITSTATE;
+                this._waitingRelease = false;
+            }
+            return;
+        }
+
+        // We got a touchend before the timer triggered,
+        // this cannot result in a gesture anymore.
+        if (!this._hasDetectedGesture() &&
+            this._isTwoTouchTimeoutRunning()) {
+            this._stopTwoTouchTimeout();
+            this._state = GH_NOGESTURE;
+        }
+
+        // Some gestures don't trigger until a touch is released
+        if (!this._hasDetectedGesture()) {
+            // Can't be a gesture that relies on movement
+            this._state &= ~(GH_DRAG | GH_TWODRAG | GH_PINCH);
+            // Or something that relies on more time
+            this._state &= ~GH_LONGPRESS;
+            this._stopLongpressTimeout();
+
+            if (!this._waitingRelease) {
+                this._releaseStart = Date.now();
+                this._waitingRelease = true;
+
+                // Can't be a tap that requires more touches than we current have
+                switch (this._tracked.length) {
+                    case 1:
+                        this._state &= ~(GH_TWOTAP | GH_THREETAP);
+                        break;
+
+                    case 2:
+                        this._state &= ~(GH_ONETAP | GH_THREETAP);
+                        break;
+                }
+            }
+        }
+
+        // Waiting for all touches to release? (i.e. some tap)
+        if (this._waitingRelease) {
+            // Were all touches released at roughly the same time?
+            if ((Date.now() - this._releaseStart) > GH_MULTITOUCH_TIMEOUT) {
+                this._state = GH_NOGESTURE;
+            }
+
+            // Did too long time pass between press and release?
+            if (this._tracked.some(t => (Date.now() - t.started) > GH_TAP_TIMEOUT)) {
+                this._state = GH_NOGESTURE;
+            }
+
+            let touch = this._tracked.find(t => t.id === id);
+            touch.active = false;
+
+            // Are we still waiting for more releases?
+            if (this._hasDetectedGesture()) {
+                this._pushEvent('gesturestart');
+            } else {
+                // Have we reached a dead end?
+                if (this._state !== GH_NOGESTURE) {
+                    return;
+                }
+            }
+        }
+
+        if (this._hasDetectedGesture()) {
+            this._pushEvent('gestureend');
+        }
+
+        // Ignore any remaining touches until they are ended
+        for (let i = 0; i < this._tracked.length; i++) {
+            if (this._tracked[i].active) {
+                this._ignored.push(this._tracked[i].id);
+            }
+        }
+        this._tracked = [];
+
+        this._state = GH_NOGESTURE;
+
+        // Remove this touch from ignored if it's in there
+        if (this._ignored.indexOf(id) !== -1) {
+            this._ignored.splice(this._ignored.indexOf(id), 1);
+        }
+
+        // We reset the state if ignored is empty
+        if ((this._ignored.length === 0)) {
+            this._state = GH_INITSTATE;
+            this._waitingRelease = false;
+        }
+    }
+
+    _hasDetectedGesture() {
+        if (this._state === GH_NOGESTURE) {
+            return false;
+        }
+        // Check to see if the bitmask value is a power of 2
+        // (i.e. only one bit set). If it is, we have a state.
+        if (this._state & (this._state - 1)) {
+            return false;
+        }
+
+        // For taps we also need to have all touches released
+        // before we've fully detected the gesture
+        if (this._state & (GH_ONETAP | GH_TWOTAP | GH_THREETAP)) {
+            if (this._tracked.some(t => t.active)) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    _startLongpressTimeout() {
+        this._stopLongpressTimeout();
+        this._longpressTimeoutId = setTimeout(() => this._longpressTimeout(),
+                                              GH_LONGPRESS_TIMEOUT);
+    }
+
+    _stopLongpressTimeout() {
+        clearTimeout(this._longpressTimeoutId);
+        this._longpressTimeoutId = null;
+    }
+
+    _longpressTimeout() {
+        if (this._hasDetectedGesture()) {
+            throw new Error("A longpress gesture failed, conflict with a different gesture");
+        }
+
+        this._state = GH_LONGPRESS;
+        this._pushEvent('gesturestart');
+    }
+
+    _startTwoTouchTimeout() {
+        this._stopTwoTouchTimeout();
+        this._twoTouchTimeoutId = setTimeout(() => this._twoTouchTimeout(),
+                                             GH_TWOTOUCH_TIMEOUT);
+    }
+
+    _stopTwoTouchTimeout() {
+        clearTimeout(this._twoTouchTimeoutId);
+        this._twoTouchTimeoutId = null;
+    }
+
+    _isTwoTouchTimeoutRunning() {
+        return this._twoTouchTimeoutId !== null;
+    }
+
+    _twoTouchTimeout() {
+        if (this._tracked.length === 0) {
+            throw new Error("A pinch or two drag gesture failed, no tracked touches");
+        }
+
+        // How far each touch point has moved since start
+        let avgM = this._getAverageMovement();
+        let avgMoveH = Math.abs(avgM.x);
+        let avgMoveV = Math.abs(avgM.y);
+
+        // The difference in the distance between where
+        // the touch points started and where they are now
+        let avgD = this._getAverageDistance();
+        let deltaTouchDistance = Math.abs(Math.hypot(avgD.first.x, avgD.first.y) -
+                                          Math.hypot(avgD.last.x, avgD.last.y));
+
+        if ((avgMoveV < deltaTouchDistance) &&
+            (avgMoveH < deltaTouchDistance)) {
+            this._state = GH_PINCH;
+        } else {
+            this._state = GH_TWODRAG;
+        }
+
+        this._pushEvent('gesturestart');
+        this._pushEvent('gesturemove');
+    }
+
+    _pushEvent(type) {
+        let detail = { type: this._stateToGesture(this._state) };
+
+        // For most gesture events the current (average) position is the
+        // most useful
+        let avg = this._getPosition();
+        let pos = avg.last;
+
+        // However we have a slight distance to detect gestures, so for the
+        // first gesture event we want to use the first positions we saw
+        if (type === 'gesturestart') {
+            pos = avg.first;
+        }
+
+        // For these gestures, we always want the event coordinates
+        // to be where the gesture began, not the current touch location.
+        switch (this._state) {
+            case GH_TWODRAG:
+            case GH_PINCH:
+                pos = avg.first;
+                break;
+        }
+
+        detail['clientX'] = pos.x;
+        detail['clientY'] = pos.y;
+
+        // FIXME: other coordinates?
+
+        // Some gestures also have a magnitude
+        if (this._state === GH_PINCH) {
+            let distance = this._getAverageDistance();
+            if (type === 'gesturestart') {
+                detail['magnitudeX'] = distance.first.x;
+                detail['magnitudeY'] = distance.first.y;
+            } else {
+                detail['magnitudeX'] = distance.last.x;
+                detail['magnitudeY'] = distance.last.y;
+            }
+        } else if (this._state === GH_TWODRAG) {
+            if (type === 'gesturestart') {
+                detail['magnitudeX'] = 0.0;
+                detail['magnitudeY'] = 0.0;
+            } else {
+                let movement = this._getAverageMovement();
+                detail['magnitudeX'] = movement.x;
+                detail['magnitudeY'] = movement.y;
+            }
+        }
+
+        let gev = new CustomEvent(type, { detail: detail });
+        this._target.dispatchEvent(gev);
+    }
+
+    _stateToGesture(state) {
+        switch (state) {
+            case GH_ONETAP:
+                return 'onetap';
+            case GH_TWOTAP:
+                return 'twotap';
+            case GH_THREETAP:
+                return 'threetap';
+            case GH_DRAG:
+                return 'drag';
+            case GH_LONGPRESS:
+                return 'longpress';
+            case GH_TWODRAG:
+                return 'twodrag';
+            case GH_PINCH:
+                return 'pinch';
+        }
+
+        throw new Error("Unknown gesture state: " + state);
+    }
+
+    _getPosition() {
+        if (this._tracked.length === 0) {
+            throw new Error("Failed to get gesture position, no tracked touches");
+        }
+
+        let size = this._tracked.length;
+        let fx = 0, fy = 0, lx = 0, ly = 0;
+
+        for (let i = 0; i < this._tracked.length; i++) {
+            fx += this._tracked[i].firstX;
+            fy += this._tracked[i].firstY;
+            lx += this._tracked[i].lastX;
+            ly += this._tracked[i].lastY;
+        }
+
+        return { first: { x: fx / size,
+                          y: fy / size },
+                 last: { x: lx / size,
+                         y: ly / size } };
+    }
+
+    _getAverageMovement() {
+        if (this._tracked.length === 0) {
+            throw new Error("Failed to get gesture movement, no tracked touches");
+        }
+
+        let totalH, totalV;
+        totalH = totalV = 0;
+        let size = this._tracked.length;
+
+        for (let i = 0; i < this._tracked.length; i++) {
+            totalH += this._tracked[i].lastX - this._tracked[i].firstX;
+            totalV += this._tracked[i].lastY - this._tracked[i].firstY;
+        }
+
+        return { x: totalH / size,
+                 y: totalV / size };
+    }
+
+    _getAverageDistance() {
+        if (this._tracked.length === 0) {
+            throw new Error("Failed to get gesture distance, no tracked touches");
+        }
+
+        // Distance between the first and last tracked touches
+
+        let first = this._tracked[0];
+        let last = this._tracked[this._tracked.length - 1];
+
+        let fdx = Math.abs(last.firstX - first.firstX);
+        let fdy = Math.abs(last.firstY - first.firstY);
+
+        let ldx = Math.abs(last.lastX - first.lastX);
+        let ldy = Math.abs(last.lastY - first.lastY);
+
+        return { first: { x: fdx, y: fdy },
+                 last: { x: ldx, y: ldy } };
+    }
+}

core/input/keyboard.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  */
 
@@ -20,16 +20,13 @@ export default class Keyboard {
 
         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),
         };
 
         // ===== EVENT HANDLERS =====
@@ -62,9 +59,7 @@ export default class Keyboard {
         }
 
         // Unstable, but we don't have anything else to go on
-        // (don't use it for 'keypress' events thought since
-        // WebKit sets it to the same as charCode)
-        if (e.keyCode && (e.type !== 'keypress')) {
+        if (e.keyCode) {
             // 229 is used for composition events
             if (e.keyCode !== 229) {
                 return 'Platform' + e.keyCode;
@@ -118,9 +113,7 @@ export default class Keyboard {
 
         // 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
@@ -137,7 +130,7 @@ export default class Keyboard {
         // 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;
@@ -160,31 +153,41 @@ export default class Keyboard {
             keysym = this._keyDownList[code];
         }
 
+        // macOS doesn't send proper key releases if a key is pressed
+        // while meta is held down
+        if ((browser.isMac() || browser.isIOS()) &&
+            (e.metaKey && code !== 'MetaLeft' && code !== 'MetaRight')) {
+            this._sendKeyEvent(keysym, code, true);
+            this._sendKeyEvent(keysym, code, false);
+            stopEvent(e);
+            return;
+        }
+
         // macOS doesn't send proper key events for modifiers, only
         // 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);
             return;
         }
 
-        // If this is a legacy browser then we'll need to wait for
-        // a keypress event as well
-        // (IE and Edge has a broken KeyboardEvent.key, so we can't
-        // just check for the presence of that field)
-        if (!keysym && (!e.key || browser.isIE() || browser.isEdge())) {
-            this._pendingKey = code;
-            // However we might not get a keypress event if the key
-            // is non-printable, which needs some special fallback
-            // handling
-            setTimeout(this._handleKeyPressTimeout.bind(this), 10, e);
+        // Windows doesn't send proper key releases for a bunch of
+        // Japanese IM keys so we have to fake the release right away
+        const jpBadKeys = [ KeyTable.XK_Zenkaku_Hankaku,
+                            KeyTable.XK_Eisu_toggle,
+                            KeyTable.XK_Katakana,
+                            KeyTable.XK_Hiragana,
+                            KeyTable.XK_Romaji ];
+        if (browser.isWindows() && jpBadKeys.includes(keysym)) {
+            this._sendKeyEvent(keysym, code, true);
+            this._sendKeyEvent(keysym, code, false);
+            stopEvent(e);
             return;
         }
 
-        this._pendingKey = null;
         stopEvent(e);
 
         // Possible start of AltGr sequence? (see above)
@@ -199,69 +202,6 @@ export default class Keyboard {
         this._sendKeyEvent(keysym, code, true);
     }
 
-    // Legacy event for browsers without code/key
-    _handleKeyPress(e) {
-        stopEvent(e);
-
-        // Are we expecting a keypress?
-        if (this._pendingKey === null) {
-            return;
-        }
-
-        let code = this._getKeyCode(e);
-        const keysym = KeyboardUtil.getKeysym(e);
-
-        // The key we were waiting for?
-        if ((code !== 'Unidentified') && (code != this._pendingKey)) {
-            return;
-        }
-
-        code = this._pendingKey;
-        this._pendingKey = null;
-
-        if (!keysym) {
-            Log.Info('keypress with no keysym:', e);
-            return;
-        }
-
-        this._sendKeyEvent(keysym, code, true);
-    }
-
-    _handleKeyPressTimeout(e) {
-        // Did someone manage to sort out the key already?
-        if (this._pendingKey === null) {
-            return;
-        }
-
-        let keysym;
-
-        const code = this._pendingKey;
-        this._pendingKey = null;
-
-        // We have no way of knowing the proper keysym with the
-        // information given, but the following are true for most
-        // layouts
-        if ((e.keyCode >= 0x30) && (e.keyCode <= 0x39)) {
-            // Digit
-            keysym = e.keyCode;
-        } else if ((e.keyCode >= 0x41) && (e.keyCode <= 0x5a)) {
-            // Character (A-Z)
-            let char = String.fromCharCode(e.keyCode);
-            // A feeble attempt at the correct case
-            if (e.shiftKey) {
-                char = char.toUpperCase();
-            } else {
-                char = char.toLowerCase();
-            }
-            keysym = char.charCodeAt();
-        } else {
-            // Unknown, give up
-            keysym = 0;
-        }
-
-        this._sendKeyEvent(keysym, code, true);
-    }
-
     _handleKeyUp(e) {
         stopEvent(e);
 
@@ -276,13 +216,28 @@ export default class Keyboard {
         }
 
         // 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;
         }
 
         this._sendKeyEvent(this._keyDownList[code], code, false);
+
+        // 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() {
@@ -299,26 +254,6 @@ export default class Keyboard {
         Log.Debug("<< Keyboard.allKeysUp");
     }
 
-    // Firefox Alt workaround, see below
-    _checkAlt(e) {
-        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 });
-            target.dispatchEvent(event);
-        });
-    }
-
     // ===== PUBLIC METHODS =====
 
     grab() {
@@ -326,40 +261,18 @@ export default class Keyboard {
 
         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 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() {
         //Log.Debug(">> Keyboard.ungrab");
 
-        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

core/input/mouse.js

@@ -1,276 +0,0 @@
-/*
- * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
- * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
- */
-
-import * as Log from '../util/logging.js';
-import { isTouchDevice } from '../util/browser.js';
-import { setCapture, stopEvent, getPointerEvent } from '../util/events.js';
-
-const WHEEL_STEP = 10; // Delta threshold for a mouse wheel step
-const WHEEL_STEP_TIMEOUT = 50; // ms
-const WHEEL_LINE_HEIGHT = 19;
-
-export default class Mouse {
-    constructor(target) {
-        this._target = target || document;
-
-        this._doubleClickTimer = null;
-        this._lastTouchPos = null;
-
-        this._pos = null;
-        this._wheelStepXTimer = null;
-        this._wheelStepYTimer = null;
-        this._accumulatedWheelDeltaX = 0;
-        this._accumulatedWheelDeltaY = 0;
-
-        this._eventHandlers = {
-            'mousedown': this._handleMouseDown.bind(this),
-            'mouseup': this._handleMouseUp.bind(this),
-            'mousemove': this._handleMouseMove.bind(this),
-            'mousewheel': this._handleMouseWheel.bind(this),
-            'mousedisable': this._handleMouseDisable.bind(this)
-        };
-
-        // ===== PROPERTIES =====
-
-        this.touchButton = 1;                 // Button mask (1, 2, 4) for touch devices (0 means ignore clicks)
-
-        // ===== EVENT HANDLERS =====
-
-        this.onmousebutton = () => {}; // Handler for mouse button click/release
-        this.onmousemove = () => {}; // Handler for mouse movement
-    }
-
-    // ===== PRIVATE METHODS =====
-
-    _resetDoubleClickTimer() {
-        this._doubleClickTimer = null;
-    }
-
-    _handleMouseButton(e, down) {
-        this._updateMousePosition(e);
-        let pos = this._pos;
-
-        let bmask;
-        if (e.touches || e.changedTouches) {
-            // Touch device
-
-            // When two touches occur within 500 ms of each other and are
-            // close enough together a double click is triggered.
-            if (down == 1) {
-                if (this._doubleClickTimer === null) {
-                    this._lastTouchPos = pos;
-                } else {
-                    clearTimeout(this._doubleClickTimer);
-
-                    // When the distance between the two touches is small enough
-                    // force the position of the latter touch to the position of
-                    // the first.
-
-                    const xs = this._lastTouchPos.x - pos.x;
-                    const ys = this._lastTouchPos.y - pos.y;
-                    const d = Math.sqrt((xs * xs) + (ys * ys));
-
-                    // The goal is to trigger on a certain physical width, the
-                    // devicePixelRatio brings us a bit closer but is not optimal.
-                    const threshold = 20 * (window.devicePixelRatio || 1);
-                    if (d < threshold) {
-                        pos = this._lastTouchPos;
-                    }
-                }
-                this._doubleClickTimer = setTimeout(this._resetDoubleClickTimer.bind(this), 500);
-            }
-            bmask = this.touchButton;
-            // If bmask is set
-        } else if (e.which) {
-            /* everything except IE */
-            bmask = 1 << e.button;
-        } else {
-            /* IE including 9 */
-            bmask = (e.button & 0x1) +      // Left
-                    (e.button & 0x2) * 2 +  // Right
-                    (e.button & 0x4) / 2;   // Middle
-        }
-
-        Log.Debug("onmousebutton " + (down ? "down" : "up") +
-                  ", x: " + pos.x + ", y: " + pos.y + ", bmask: " + bmask);
-        this.onmousebutton(pos.x, pos.y, down, bmask);
-
-        stopEvent(e);
-    }
-
-    _handleMouseDown(e) {
-        // Touch events have implicit capture
-        if (e.type === "mousedown") {
-            setCapture(this._target);
-        }
-
-        this._handleMouseButton(e, 1);
-    }
-
-    _handleMouseUp(e) {
-        this._handleMouseButton(e, 0);
-    }
-
-    // Mouse wheel events are sent in steps over VNC. This means that the VNC
-    // protocol can't handle a wheel event with specific distance or speed.
-    // Therefor, if we get a lot of small mouse wheel events we combine them.
-    _generateWheelStepX() {
-
-        if (this._accumulatedWheelDeltaX < 0) {
-            this.onmousebutton(this._pos.x, this._pos.y, 1, 1 << 5);
-            this.onmousebutton(this._pos.x, this._pos.y, 0, 1 << 5);
-        } else if (this._accumulatedWheelDeltaX > 0) {
-            this.onmousebutton(this._pos.x, this._pos.y, 1, 1 << 6);
-            this.onmousebutton(this._pos.x, this._pos.y, 0, 1 << 6);
-        }
-
-        this._accumulatedWheelDeltaX = 0;
-    }
-
-    _generateWheelStepY() {
-
-        if (this._accumulatedWheelDeltaY < 0) {
-            this.onmousebutton(this._pos.x, this._pos.y, 1, 1 << 3);
-            this.onmousebutton(this._pos.x, this._pos.y, 0, 1 << 3);
-        } else if (this._accumulatedWheelDeltaY > 0) {
-            this.onmousebutton(this._pos.x, this._pos.y, 1, 1 << 4);
-            this.onmousebutton(this._pos.x, this._pos.y, 0, 1 << 4);
-        }
-
-        this._accumulatedWheelDeltaY = 0;
-    }
-
-    _resetWheelStepTimers() {
-        window.clearTimeout(this._wheelStepXTimer);
-        window.clearTimeout(this._wheelStepYTimer);
-        this._wheelStepXTimer = null;
-        this._wheelStepYTimer = null;
-    }
-
-    _handleMouseWheel(e) {
-        this._resetWheelStepTimers();
-
-        this._updateMousePosition(e);
-
-        let dX = e.deltaX;
-        let dY = e.deltaY;
-
-        // Pixel units unless it's non-zero.
-        // Note that if deltamode is line or page won't matter since we aren't
-        // sending the mouse wheel delta to the server anyway.
-        // The difference between pixel and line can be important however since
-        // we have a threshold that can be smaller than the line height.
-        if (e.deltaMode !== 0) {
-            dX *= WHEEL_LINE_HEIGHT;
-            dY *= WHEEL_LINE_HEIGHT;
-        }
-
-        this._accumulatedWheelDeltaX += dX;
-        this._accumulatedWheelDeltaY += dY;
-
-        // Generate a mouse wheel step event when the accumulated delta
-        // for one of the axes is large enough.
-        // Small delta events that do not pass the threshold get sent
-        // after a timeout.
-        if (Math.abs(this._accumulatedWheelDeltaX) > WHEEL_STEP) {
-            this._generateWheelStepX();
-        } else {
-            this._wheelStepXTimer =
-                window.setTimeout(this._generateWheelStepX.bind(this),
-                                  WHEEL_STEP_TIMEOUT);
-        }
-        if (Math.abs(this._accumulatedWheelDeltaY) > WHEEL_STEP) {
-            this._generateWheelStepY();
-        } else {
-            this._wheelStepYTimer =
-                window.setTimeout(this._generateWheelStepY.bind(this),
-                                  WHEEL_STEP_TIMEOUT);
-        }
-
-        stopEvent(e);
-    }
-
-    _handleMouseMove(e) {
-        this._updateMousePosition(e);
-        this.onmousemove(this._pos.x, this._pos.y);
-        stopEvent(e);
-    }
-
-    _handleMouseDisable(e) {
-        /*
-         * Stop propagation if inside canvas area
-         * Note: This is only needed for the 'click' event as it fails
-         *       to fire properly for the target element so we have
-         *       to listen on the document element instead.
-         */
-        if (e.target == this._target) {
-            stopEvent(e);
-        }
-    }
-
-    // Update coordinates relative to target
-    _updateMousePosition(e) {
-        e = getPointerEvent(e);
-        const bounds = this._target.getBoundingClientRect();
-        let x;
-        let y;
-        // Clip to target bounds
-        if (e.clientX < bounds.left) {
-            x = 0;
-        } else if (e.clientX >= bounds.right) {
-            x = bounds.width - 1;
-        } else {
-            x = e.clientX - bounds.left;
-        }
-        if (e.clientY < bounds.top) {
-            y = 0;
-        } else if (e.clientY >= bounds.bottom) {
-            y = bounds.height - 1;
-        } else {
-            y = e.clientY - bounds.top;
-        }
-        this._pos = {x: x, y: y};
-    }
-
-    // ===== PUBLIC METHODS =====
-
-    grab() {
-        if (isTouchDevice) {
-            this._target.addEventListener('touchstart', this._eventHandlers.mousedown);
-            this._target.addEventListener('touchend', this._eventHandlers.mouseup);
-            this._target.addEventListener('touchmove', this._eventHandlers.mousemove);
-        }
-        this._target.addEventListener('mousedown', this._eventHandlers.mousedown);
-        this._target.addEventListener('mouseup', this._eventHandlers.mouseup);
-        this._target.addEventListener('mousemove', this._eventHandlers.mousemove);
-        this._target.addEventListener('wheel', this._eventHandlers.mousewheel);
-
-        /* Prevent middle-click pasting (see above for why we bind to document) */
-        document.addEventListener('click', this._eventHandlers.mousedisable);
-
-        /* preventDefault() on mousedown doesn't stop this event for some
-           reason so we have to explicitly block it */
-        this._target.addEventListener('contextmenu', this._eventHandlers.mousedisable);
-    }
-
-    ungrab() {
-        this._resetWheelStepTimers();
-
-        if (isTouchDevice) {
-            this._target.removeEventListener('touchstart', this._eventHandlers.mousedown);
-            this._target.removeEventListener('touchend', this._eventHandlers.mouseup);
-            this._target.removeEventListener('touchmove', this._eventHandlers.mousemove);
-        }
-        this._target.removeEventListener('mousedown', this._eventHandlers.mousedown);
-        this._target.removeEventListener('mouseup', this._eventHandlers.mouseup);
-        this._target.removeEventListener('mousemove', this._eventHandlers.mousemove);
-        this._target.removeEventListener('wheel', this._eventHandlers.mousewheel);
-
-        document.removeEventListener('click', this._eventHandlers.mousedisable);
-
-        this._target.removeEventListener('contextmenu', this._eventHandlers.mousedisable);
-    }
-}

core/input/util.js

@@ -1,3 +1,4 @@
+import KeyTable from "./keysym.js";
 import keysyms from "./keysymdef.js";
 import vkeys from "./vkeys.js";
 import fixedkeys from "./fixedkeys.js";
@@ -21,9 +22,8 @@ export function getKeycode(evt) {
     }
 
     // The de-facto standard is to use Windows Virtual-Key codes
-    // 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)) {
+    // in the 'keyCode' field for non-printable characters
+    if (evt.keyCode in vkeys) {
         let code = vkeys[evt.keyCode];
 
         // macOS has messed up this code for some reason
@@ -68,29 +68,11 @@ export function getKeycode(evt) {
 export function getKey(evt) {
     // Are we getting a proper key value?
     if (evt.key !== undefined) {
-        // IE and Edge use some ancient version of the spec
-        // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
-        switch (evt.key) {
-            case 'Spacebar': return ' ';
-            case 'Esc': return 'Escape';
-            case 'Scroll': return 'ScrollLock';
-            case 'Win': return 'Meta';
-            case 'Apps': return 'ContextMenu';
-            case 'Up': return 'ArrowUp';
-            case 'Left': return 'ArrowLeft';
-            case 'Right': return 'ArrowRight';
-            case 'Down': return 'ArrowDown';
-            case 'Del': return 'Delete';
-            case 'Divide': return '/';
-            case 'Multiply': return '*';
-            case 'Subtract': return '-';
-            case 'Add': return '+';
-            case 'Decimal': return evt.char;
-        }
-
         // 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
@@ -102,11 +84,12 @@ 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())) {
-            return evt.key;
+        // Broken behaviour in Chrome
+        if ((evt.key === '\x00') && (evt.code === 'NumpadDecimal')) {
+            return 'Delete';
         }
+
+        return evt.key;
     }
 
     // Try to deduce it based on the physical key
@@ -141,10 +124,54 @@ export function getKeysym(evt) {
             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;
+            }
+        }
+
+        // Windows sends alternating symbols for some keys when using a
+        // Japanese layout. We have no way of synchronising with the IM
+        // running on the remote system, so we send some combined keysym
+        // instead and hope for the best.
+        if (browser.isWindows()) {
+            switch (key) {
+                case 'Zenkaku':
+                case 'Hankaku':
+                    return KeyTable.XK_Zenkaku_Hankaku;
+                case 'Romaji':
+                case 'KanaMode':
+                    return KeyTable.XK_Romaji;
+            }
+        }
+
         return DOMKeyTable[key][location];
     }
 

core/input/vkeys.js

@@ -13,7 +13,6 @@ 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',

core/input/xtscancodes.js

@@ -1,8 +1,8 @@
 /*
- * This file is auto-generated from keymaps.csv on 2017-05-31 16:20
- * Database checksum sha256(92fd165507f2a3b8c5b3fa56e425d45788dbcb98cf067a307527d91ce22cab94)
+ * This file is auto-generated from keymaps.csv
+ * Database checksum sha256(76d68c10e97d37fe2ea459e210125ae41796253fb217e900bf2983ade13a7920)
  * To re-generate, run:
- *   keymap-gen --lang=js code-map keymaps.csv html atset1
+ *   keymap-gen code-map --lang=js keymaps.csv html atset1
 */
 export default {
   "Again": 0xe005, /* html:Again (Again) -> linux:129 (KEY_AGAIN) -> atset1:57349 */
@@ -111,6 +111,8 @@ export default {
   "KeyX": 0x2d, /* html:KeyX (KeyX) -> linux:45 (KEY_X) -> atset1:45 */
   "KeyY": 0x15, /* html:KeyY (KeyY) -> linux:21 (KEY_Y) -> atset1:21 */
   "KeyZ": 0x2c, /* html:KeyZ (KeyZ) -> linux:44 (KEY_Z) -> atset1:44 */
+  "Lang1": 0x72, /* html:Lang1 (Lang1) -> linux:122 (KEY_HANGEUL) -> atset1:114 */
+  "Lang2": 0x71, /* html:Lang2 (Lang2) -> linux:123 (KEY_HANJA) -> atset1:113 */
   "Lang3": 0x78, /* html:Lang3 (Lang3) -> linux:90 (KEY_KATAKANA) -> atset1:120 */
   "Lang4": 0x77, /* html:Lang4 (Lang4) -> linux:91 (KEY_HIRAGANA) -> atset1:119 */
   "Lang5": 0x76, /* html:Lang5 (Lang5) -> linux:85 (KEY_ZENKAKUHANKAKU) -> atset1:118 */

core/ra2.js

@@ -0,0 +1,567 @@
+import Base64 from './base64.js';
+import { encodeUTF8 } from './util/strings.js';
+import EventTargetMixin from './util/eventtarget.js';
+
+export class AESEAXCipher {
+    constructor() {
+        this._rawKey = null;
+        this._ctrKey = null;
+        this._cbcKey = null;
+        this._zeroBlock = new Uint8Array(16);
+        this._prefixBlock0 = this._zeroBlock;
+        this._prefixBlock1 = new Uint8Array([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]);
+        this._prefixBlock2 = new Uint8Array([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2]);
+    }
+
+    async _encryptBlock(block) {
+        const encrypted = await window.crypto.subtle.encrypt({
+            name: "AES-CBC",
+            iv: this._zeroBlock,
+        }, this._cbcKey, block);
+        return new Uint8Array(encrypted).slice(0, 16);
+    }
+
+    async _initCMAC() {
+        const k1 = await this._encryptBlock(this._zeroBlock);
+        const k2 = new Uint8Array(16);
+        const v = k1[0] >>> 6;
+        for (let i = 0; i < 15; i++) {
+            k2[i] = (k1[i + 1] >> 6) | (k1[i] << 2);
+            k1[i] = (k1[i + 1] >> 7) | (k1[i] << 1);
+        }
+        const lut = [0x0, 0x87, 0x0e, 0x89];
+        k2[14] ^= v >>> 1;
+        k2[15] = (k1[15] << 2) ^ lut[v];
+        k1[15] = (k1[15] << 1) ^ lut[v >> 1];
+        this._k1 = k1;
+        this._k2 = k2;
+    }
+
+    async _encryptCTR(data, counter) {
+        const encrypted = await window.crypto.subtle.encrypt({
+            "name": "AES-CTR",
+            counter: counter,
+            length: 128
+        }, this._ctrKey, data);
+        return new Uint8Array(encrypted);
+    }
+
+    async _decryptCTR(data, counter) {
+        const decrypted = await window.crypto.subtle.decrypt({
+            "name": "AES-CTR",
+            counter: counter,
+            length: 128
+        }, this._ctrKey, data);
+        return new Uint8Array(decrypted);
+    }
+
+    async _computeCMAC(data, prefixBlock) {
+        if (prefixBlock.length !== 16) {
+            return null;
+        }
+        const n = Math.floor(data.length / 16);
+        const m = Math.ceil(data.length / 16);
+        const r = data.length - n * 16;
+        const cbcData = new Uint8Array((m + 1) * 16);
+        cbcData.set(prefixBlock);
+        cbcData.set(data, 16);
+        if (r === 0) {
+            for (let i = 0; i < 16; i++) {
+                cbcData[n * 16 + i] ^= this._k1[i];
+            }
+        } else {
+            cbcData[(n + 1) * 16 + r] = 0x80;
+            for (let i = 0; i < 16; i++) {
+                cbcData[(n + 1) * 16 + i] ^= this._k2[i];
+            }
+        }
+        let cbcEncrypted = await window.crypto.subtle.encrypt({
+            name: "AES-CBC",
+            iv: this._zeroBlock,
+        }, this._cbcKey, cbcData);
+
+        cbcEncrypted = new Uint8Array(cbcEncrypted);
+        const mac = cbcEncrypted.slice(cbcEncrypted.length - 32, cbcEncrypted.length - 16);
+        return mac;
+    }
+
+    async setKey(key) {
+        this._rawKey = key;
+        this._ctrKey = await window.crypto.subtle.importKey(
+            "raw", key, {"name": "AES-CTR"}, false, ["encrypt", "decrypt"]);
+        this._cbcKey = await window.crypto.subtle.importKey(
+            "raw", key, {"name": "AES-CBC"}, false, ["encrypt", "decrypt"]);
+        await this._initCMAC();
+    }
+
+    async encrypt(message, associatedData, nonce) {
+        const nCMAC = await this._computeCMAC(nonce, this._prefixBlock0);
+        const encrypted = await this._encryptCTR(message, nCMAC);
+        const adCMAC = await this._computeCMAC(associatedData, this._prefixBlock1);
+        const mac = await this._computeCMAC(encrypted, this._prefixBlock2);
+        for (let i = 0; i < 16; i++) {
+            mac[i] ^= nCMAC[i] ^ adCMAC[i];
+        }
+        const res = new Uint8Array(16 + encrypted.length);
+        res.set(encrypted);
+        res.set(mac, encrypted.length);
+        return res;
+    }
+
+    async decrypt(encrypted, associatedData, nonce, mac) {
+        const nCMAC = await this._computeCMAC(nonce, this._prefixBlock0);
+        const adCMAC = await this._computeCMAC(associatedData, this._prefixBlock1);
+        const computedMac = await this._computeCMAC(encrypted, this._prefixBlock2);
+        for (let i = 0; i < 16; i++) {
+            computedMac[i] ^= nCMAC[i] ^ adCMAC[i];
+        }
+        if (computedMac.length !== mac.length) {
+            return null;
+        }
+        for (let i = 0; i < mac.length; i++) {
+            if (computedMac[i] !== mac[i]) {
+                return null;
+            }
+        }
+        const res = await this._decryptCTR(encrypted, nCMAC);
+        return res;
+    }
+}
+
+export class RA2Cipher {
+    constructor() {
+        this._cipher = new AESEAXCipher();
+        this._counter = new Uint8Array(16);
+    }
+
+    async setKey(key) {
+        await this._cipher.setKey(key);
+    }
+
+    async makeMessage(message) {
+        const ad = new Uint8Array([(message.length & 0xff00) >>> 8, message.length & 0xff]);
+        const encrypted = await this._cipher.encrypt(message, ad, this._counter);
+        for (let i = 0; i < 16 && this._counter[i]++ === 255; i++);
+        const res = new Uint8Array(message.length + 2 + 16);
+        res.set(ad);
+        res.set(encrypted, 2);
+        return res;
+    }
+
+    async receiveMessage(length, encrypted, mac) {
+        const ad = new Uint8Array([(length & 0xff00) >>> 8, length & 0xff]);
+        const res = await this._cipher.decrypt(encrypted, ad, this._counter, mac);
+        for (let i = 0; i < 16 && this._counter[i]++ === 255; i++);
+        return res;
+    }
+}
+
+export class RSACipher {
+    constructor(keyLength) {
+        this._key = null;
+        this._keyLength = keyLength;
+        this._keyBytes = Math.ceil(keyLength / 8);
+        this._n = null;
+        this._e = null;
+        this._d = null;
+        this._nBigInt = null;
+        this._eBigInt = null;
+        this._dBigInt = null;
+    }
+
+    _base64urlDecode(data) {
+        data = data.replace(/-/g, "+").replace(/_/g, "/");
+        data = data.padEnd(Math.ceil(data.length / 4) * 4, "=");
+        return Base64.decode(data);
+    }
+
+    _u8ArrayToBigInt(arr) {
+        let hex = '0x';
+        for (let i = 0; i < arr.length; i++) {
+            hex += arr[i].toString(16).padStart(2, '0');
+        }
+        return BigInt(hex);
+    }
+
+    _padArray(arr, length) {
+        const res = new Uint8Array(length);
+        res.set(arr, length - arr.length);
+        return res;
+    }
+
+    _bigIntToU8Array(bigint, padLength=0) {
+        let hex = bigint.toString(16);
+        if (padLength === 0) {
+            padLength = Math.ceil(hex.length / 2) * 2;
+        }
+        hex = hex.padStart(padLength * 2, '0');
+        const length = hex.length / 2;
+        const arr = new Uint8Array(length);
+        for (let i = 0; i < length; i++) {
+            arr[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+        }
+        return arr;
+    }
+
+    _modPow(b, e, m) {
+        if (m === 1n) {
+            return 0;
+        }
+        let r = 1n;
+        b = b % m;
+        while (e > 0) {
+            if (e % 2n === 1n) {
+                r = (r * b) % m;
+            }
+            e = e / 2n;
+            b = (b * b) % m;
+        }
+        return r;
+    }
+
+    async generateKey() {
+        this._key = await window.crypto.subtle.generateKey(
+            {
+                name: "RSA-OAEP",
+                modulusLength: this._keyLength,
+                publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
+                hash: {name: "SHA-256"},
+            },
+            true, ["encrypt", "decrypt"]);
+        const privateKey = await window.crypto.subtle.exportKey("jwk", this._key.privateKey);
+        this._n = this._padArray(this._base64urlDecode(privateKey.n), this._keyBytes);
+        this._nBigInt = this._u8ArrayToBigInt(this._n);
+        this._e = this._padArray(this._base64urlDecode(privateKey.e), this._keyBytes);
+        this._eBigInt = this._u8ArrayToBigInt(this._e);
+        this._d = this._padArray(this._base64urlDecode(privateKey.d), this._keyBytes);
+        this._dBigInt = this._u8ArrayToBigInt(this._d);
+    }
+
+    setPublicKey(n, e) {
+        if (n.length !== this._keyBytes || e.length !== this._keyBytes) {
+            return;
+        }
+        this._n = new Uint8Array(this._keyBytes);
+        this._e = new Uint8Array(this._keyBytes);
+        this._n.set(n);
+        this._e.set(e);
+        this._nBigInt = this._u8ArrayToBigInt(this._n);
+        this._eBigInt = this._u8ArrayToBigInt(this._e);
+    }
+
+    encrypt(message) {
+        if (message.length > this._keyBytes - 11) {
+            return null;
+        }
+        const ps = new Uint8Array(this._keyBytes - message.length - 3);
+        window.crypto.getRandomValues(ps);
+        for (let i = 0; i < ps.length; i++) {
+            ps[i] = Math.floor(ps[i] * 254 / 255 + 1);
+        }
+        const em = new Uint8Array(this._keyBytes);
+        em[1] = 0x02;
+        em.set(ps, 2);
+        em.set(message, ps.length + 3);
+        const emBigInt = this._u8ArrayToBigInt(em);
+        const c = this._modPow(emBigInt, this._eBigInt, this._nBigInt);
+        return this._bigIntToU8Array(c, this._keyBytes);
+    }
+
+    decrypt(message) {
+        if (message.length !== this._keyBytes) {
+            return null;
+        }
+        const msgBigInt = this._u8ArrayToBigInt(message);
+        const emBigInt = this._modPow(msgBigInt, this._dBigInt, this._nBigInt);
+        const em = this._bigIntToU8Array(emBigInt, this._keyBytes);
+        if (em[0] !== 0x00 || em[1] !== 0x02) {
+            return null;
+        }
+        let i = 2;
+        for (; i < em.length; i++) {
+            if (em[i] === 0x00) {
+                break;
+            }
+        }
+        if (i === em.length) {
+            return null;
+        }
+        return em.slice(i + 1, em.length);
+    }
+
+    get keyLength() {
+        return this._keyLength;
+    }
+
+    get n() {
+        return this._n;
+    }
+
+    get e() {
+        return this._e;
+    }
+
+    get d() {
+        return this._d;
+    }
+}
+
+export default class RSAAESAuthenticationState extends EventTargetMixin {
+    constructor(sock, getCredentials) {
+        super();
+        this._hasStarted = false;
+        this._checkSock = null;
+        this._checkCredentials = null;
+        this._approveServerResolve = null;
+        this._sockReject = null;
+        this._credentialsReject = null;
+        this._approveServerReject = null;
+        this._sock = sock;
+        this._getCredentials = getCredentials;
+    }
+
+    _waitSockAsync(len) {
+        return new Promise((resolve, reject) => {
+            const hasData = () => !this._sock.rQwait('RA2', len);
+            if (hasData()) {
+                resolve();
+            } else {
+                this._checkSock = () => {
+                    if (hasData()) {
+                        resolve();
+                        this._checkSock = null;
+                        this._sockReject = null;
+                    }
+                };
+                this._sockReject = reject;
+            }
+        });
+    }
+
+    _waitApproveKeyAsync() {
+        return new Promise((resolve, reject) => {
+            this._approveServerResolve = resolve;
+            this._approveServerReject = reject;
+        });
+    }
+
+    _waitCredentialsAsync(subtype) {
+        const hasCredentials = () => {
+            if (subtype === 1 && this._getCredentials().username !== undefined &&
+                this._getCredentials().password !== undefined) {
+                return true;
+            } else if (subtype === 2 && this._getCredentials().password !== undefined) {
+                return true;
+            }
+            return false;
+        };
+        return new Promise((resolve, reject) => {
+            if (hasCredentials()) {
+                resolve();
+            } else {
+                this._checkCredentials = () => {
+                    if (hasCredentials()) {
+                        resolve();
+                        this._checkCredentials = null;
+                        this._credentialsReject = null;
+                    }
+                };
+                this._credentialsReject = reject;
+            }
+        });
+    }
+
+    checkInternalEvents() {
+        if (this._checkSock !== null) {
+            this._checkSock();
+        }
+        if (this._checkCredentials !== null) {
+            this._checkCredentials();
+        }
+    }
+
+    approveServer() {
+        if (this._approveServerResolve !== null) {
+            this._approveServerResolve();
+            this._approveServerResolve = null;
+        }
+    }
+
+    disconnect() {
+        if (this._sockReject !== null) {
+            this._sockReject(new Error("disconnect normally"));
+            this._sockReject = null;
+        }
+        if (this._credentialsReject !== null) {
+            this._credentialsReject(new Error("disconnect normally"));
+            this._credentialsReject = null;
+        }
+        if (this._approveServerReject !== null) {
+            this._approveServerReject(new Error("disconnect normally"));
+            this._approveServerReject = null;
+        }
+    }
+
+    async negotiateRA2neAuthAsync() {
+        this._hasStarted = true;
+        // 1: Receive server public key
+        await this._waitSockAsync(4);
+        const serverKeyLengthBuffer = this._sock.rQslice(0, 4);
+        const serverKeyLength = this._sock.rQshift32();
+        if (serverKeyLength < 1024) {
+            throw new Error("RA2: server public key is too short: " + serverKeyLength);
+        } else if (serverKeyLength > 8192) {
+            throw new Error("RA2: server public key is too long: " + serverKeyLength);
+        }
+        const serverKeyBytes = Math.ceil(serverKeyLength / 8);
+        await this._waitSockAsync(serverKeyBytes * 2);
+        const serverN = this._sock.rQshiftBytes(serverKeyBytes);
+        const serverE = this._sock.rQshiftBytes(serverKeyBytes);
+        const serverRSACipher = new RSACipher(serverKeyLength);
+        serverRSACipher.setPublicKey(serverN, serverE);
+        const serverPublickey = new Uint8Array(4 + serverKeyBytes * 2);
+        serverPublickey.set(serverKeyLengthBuffer);
+        serverPublickey.set(serverN, 4);
+        serverPublickey.set(serverE, 4 + serverKeyBytes);
+
+        // verify server public key
+        this.dispatchEvent(new CustomEvent("serververification", {
+            detail: { type: "RSA", publickey: serverPublickey }
+        }));
+        await this._waitApproveKeyAsync();
+
+        // 2: Send client public key
+        const clientKeyLength = 2048;
+        const clientKeyBytes = Math.ceil(clientKeyLength / 8);
+        const clientRSACipher = new RSACipher(clientKeyLength);
+        await clientRSACipher.generateKey();
+        const clientN = clientRSACipher.n;
+        const clientE = clientRSACipher.e;
+        const clientPublicKey = new Uint8Array(4 + clientKeyBytes * 2);
+        clientPublicKey[0] = (clientKeyLength & 0xff000000) >>> 24;
+        clientPublicKey[1] = (clientKeyLength & 0xff0000) >>> 16;
+        clientPublicKey[2] = (clientKeyLength & 0xff00) >>> 8;
+        clientPublicKey[3] = clientKeyLength & 0xff;
+        clientPublicKey.set(clientN, 4);
+        clientPublicKey.set(clientE, 4 + clientKeyBytes);
+        this._sock.send(clientPublicKey);
+
+        // 3: Send client random
+        const clientRandom = new Uint8Array(16);
+        window.crypto.getRandomValues(clientRandom);
+        const clientEncryptedRandom = serverRSACipher.encrypt(clientRandom);
+        const clientRandomMessage = new Uint8Array(2 + serverKeyBytes);
+        clientRandomMessage[0] = (serverKeyBytes & 0xff00) >>> 8;
+        clientRandomMessage[1] = serverKeyBytes & 0xff;
+        clientRandomMessage.set(clientEncryptedRandom, 2);
+        this._sock.send(clientRandomMessage);
+
+        // 4: Receive server random
+        await this._waitSockAsync(2);
+        if (this._sock.rQshift16() !== clientKeyBytes) {
+            throw new Error("RA2: wrong encrypted message length");
+        }
+        const serverEncryptedRandom = this._sock.rQshiftBytes(clientKeyBytes);
+        const serverRandom = clientRSACipher.decrypt(serverEncryptedRandom);
+        if (serverRandom === null || serverRandom.length !== 16) {
+            throw new Error("RA2: corrupted server encrypted random");
+        }
+
+        // 5: Compute session keys and set ciphers
+        let clientSessionKey = new Uint8Array(32);
+        let serverSessionKey = new Uint8Array(32);
+        clientSessionKey.set(serverRandom);
+        clientSessionKey.set(clientRandom, 16);
+        serverSessionKey.set(clientRandom);
+        serverSessionKey.set(serverRandom, 16);
+        clientSessionKey = await window.crypto.subtle.digest("SHA-1", clientSessionKey);
+        clientSessionKey = new Uint8Array(clientSessionKey).slice(0, 16);
+        serverSessionKey = await window.crypto.subtle.digest("SHA-1", serverSessionKey);
+        serverSessionKey = new Uint8Array(serverSessionKey).slice(0, 16);
+        const clientCipher = new RA2Cipher();
+        await clientCipher.setKey(clientSessionKey);
+        const serverCipher = new RA2Cipher();
+        await serverCipher.setKey(serverSessionKey);
+
+        // 6: Compute and exchange hashes
+        let serverHash = new Uint8Array(8 + serverKeyBytes * 2 + clientKeyBytes * 2);
+        let clientHash = new Uint8Array(8 + serverKeyBytes * 2 + clientKeyBytes * 2);
+        serverHash.set(serverPublickey);
+        serverHash.set(clientPublicKey, 4 + serverKeyBytes * 2);
+        clientHash.set(clientPublicKey);
+        clientHash.set(serverPublickey, 4 + clientKeyBytes * 2);
+        serverHash = await window.crypto.subtle.digest("SHA-1", serverHash);
+        clientHash = await window.crypto.subtle.digest("SHA-1", clientHash);
+        serverHash = new Uint8Array(serverHash);
+        clientHash = new Uint8Array(clientHash);
+        this._sock.send(await clientCipher.makeMessage(clientHash));
+        await this._waitSockAsync(2 + 20 + 16);
+        if (this._sock.rQshift16() !== 20) {
+            throw new Error("RA2: wrong server hash");
+        }
+        const serverHashReceived = await serverCipher.receiveMessage(
+            20, this._sock.rQshiftBytes(20), this._sock.rQshiftBytes(16));
+        if (serverHashReceived === null) {
+            throw new Error("RA2: failed to authenticate the message");
+        }
+        for (let i = 0; i < 20; i++) {
+            if (serverHashReceived[i] !== serverHash[i]) {
+                throw new Error("RA2: wrong server hash");
+            }
+        }
+
+        // 7: Receive subtype
+        await this._waitSockAsync(2 + 1 + 16);
+        if (this._sock.rQshift16() !== 1) {
+            throw new Error("RA2: wrong subtype");
+        }
+        let subtype = (await serverCipher.receiveMessage(
+            1, this._sock.rQshiftBytes(1), this._sock.rQshiftBytes(16)));
+        if (subtype === null) {
+            throw new Error("RA2: failed to authenticate the message");
+        }
+        subtype = subtype[0];
+        if (subtype === 1) {
+            if (this._getCredentials().username === undefined ||
+                this._getCredentials().password === undefined) {
+                this.dispatchEvent(new CustomEvent(
+                    "credentialsrequired",
+                    { detail: { types: ["username", "password"] } }));
+            }
+        } else if (subtype === 2) {
+            if (this._getCredentials().password === undefined) {
+                this.dispatchEvent(new CustomEvent(
+                    "credentialsrequired",
+                    { detail: { types: ["password"] } }));
+            }
+        } else {
+            throw new Error("RA2: wrong subtype");
+        }
+        await this._waitCredentialsAsync(subtype);
+        let username;
+        if (subtype === 1) {
+            username = encodeUTF8(this._getCredentials().username).slice(0, 255);
+        } else {
+            username = "";
+        }
+        const password = encodeUTF8(this._getCredentials().password).slice(0, 255);
+        const credentials = new Uint8Array(username.length + password.length + 2);
+        credentials[0] = username.length;
+        credentials[username.length + 1] = password.length;
+        for (let i = 0; i < username.length; i++) {
+            credentials[i + 1] = username.charCodeAt(i);
+        }
+        for (let i = 0; i < password.length; i++) {
+            credentials[username.length + 2 + i] = password.charCodeAt(i);
+        }
+        this._sock.send(await clientCipher.makeMessage(credentials));
+    }
+
+    get hasStarted() {
+        return this._hasStarted;
+    }
+
+    set hasStarted(s) {
+        this._hasStarted = s;
+    }
+}

core/util/browser.js

@@ -1,9 +1,11 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
+ *
+ * Browser feature support detection
  */
 
 import * as Log from './logging.js';
@@ -31,7 +33,7 @@ try {
     const target = document.createElement('canvas');
     target.style.cursor = 'url("data:image/x-icon;base64,AAACAAEACAgAAAIAAgA4AQAAFgAAACgAAAAIAAAAEAAAAAEAIAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAA==") 2 2, default';
 
-    if (target.style.cursor) {
+    if (target.style.cursor.indexOf("url") === 0) {
         Log.Info("Data URI scheme cursor supported");
         _supportsCursorURIs = true;
     } else {
@@ -43,48 +45,108 @@ try {
 
 export const supportsCursorURIs = _supportsCursorURIs;
 
-let _supportsImageMetadata = false;
+let _hasScrollbarGutter = true;
 try {
-    new ImageData(new Uint8ClampedArray(4), 1, 1);
-    _supportsImageMetadata = true;
-} catch (ex) {
-    // ignore failure
+    // Create invisible container
+    const container = document.createElement('div');
+    container.style.visibility = 'hidden';
+    container.style.overflow = 'scroll'; // forcing scrollbars
+    document.body.appendChild(container);
+
+    // Create a div and place it in the container
+    const child = document.createElement('div');
+    container.appendChild(child);
+
+    // Calculate the difference between the container's full width
+    // and the child's width - the difference is the scrollbars
+    const scrollbarWidth = (container.offsetWidth - child.offsetWidth);
+
+    // Clean up
+    container.parentNode.removeChild(container);
+
+    _hasScrollbarGutter = scrollbarWidth != 0;
+} catch (exc) {
+    Log.Error("Scrollbar test exception: " + exc);
 }
-export const supportsImageMetadata = _supportsImageMetadata;
+export const hasScrollbarGutter = _hasScrollbarGutter;
+
+/*
+ * The functions for detection of platforms and browsers below are exported
+ * but the use of these should be minimized as much as possible.
+ *
+ * It's better to use feature detection than platform detection.
+ */
+
+/* OS */
 
 export function isMac() {
-    return navigator && !!(/mac/i).exec(navigator.platform);
+    return !!(/mac/i).exec(navigator.platform);
 }
 
 export function isWindows() {
-    return navigator && !!(/win/i).exec(navigator.platform);
+    return !!(/win/i).exec(navigator.platform);
 }
 
 export function isIOS() {
-    return navigator &&
-           (!!(/ipad/i).exec(navigator.platform) ||
+    return (!!(/ipad/i).exec(navigator.platform) ||
             !!(/iphone/i).exec(navigator.platform) ||
             !!(/ipod/i).exec(navigator.platform));
 }
 
 export function isAndroid() {
-    return navigator && !!(/android/i).exec(navigator.userAgent);
+    /* Android sets navigator.platform to Linux :/ */
+    return !!navigator.userAgent.match('Android ');
 }
 
+export function isChromeOS() {
+    /* ChromeOS sets navigator.platform to Linux :/ */
+    return !!navigator.userAgent.match(' CrOS ');
+}
+
+/* Browser */
+
 export function isSafari() {
-    return navigator && (navigator.userAgent.indexOf('Safari') !== -1 &&
-                         navigator.userAgent.indexOf('Chrome') === -1);
-}
-
-export function isIE() {
-    return navigator && !!(/trident/i).exec(navigator.userAgent);
-}
-
-export function isEdge() {
-    return navigator && !!(/edge/i).exec(navigator.userAgent);
+    return !!navigator.userAgent.match('Safari/...') &&
+           !navigator.userAgent.match('Chrome/...') &&
+           !navigator.userAgent.match('Chromium/...') &&
+           !navigator.userAgent.match('Epiphany/...');
 }
 
 export function isFirefox() {
-    return navigator && !!(/firefox/i).exec(navigator.userAgent);
+    return !!navigator.userAgent.match('Firefox/...') &&
+           !navigator.userAgent.match('Seamonkey/...');
 }
 
+export function isChrome() {
+    return !!navigator.userAgent.match('Chrome/...') &&
+           !navigator.userAgent.match('Chromium/...') &&
+           !navigator.userAgent.match('Edg/...') &&
+           !navigator.userAgent.match('OPR/...');
+}
+
+export function isChromium() {
+    return !!navigator.userAgent.match('Chromium/...');
+}
+
+export function isOpera() {
+    return !!navigator.userAgent.match('OPR/...');
+}
+
+export function isEdge() {
+    return !!navigator.userAgent.match('Edg/...');
+}
+
+/* Engine */
+
+export function isGecko() {
+    return !!navigator.userAgent.match('Gecko/...');
+}
+
+export function isWebKit() {
+    return !!navigator.userAgent.match('AppleWebKit/...') &&
+           !navigator.userAgent.match('Chrome/...');
+}
+
+export function isBlink() {
+    return !!navigator.userAgent.match('Chrome/...');
+}

core/util/cursor.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  */
 
@@ -18,9 +18,12 @@ export default class Cursor {
             this._canvas.style.position = 'fixed';
             this._canvas.style.zIndex = '65535';
             this._canvas.style.pointerEvents = 'none';
+            // Safari on iOS can select the cursor image
+            // https://bugs.webkit.org/show_bug.cgi?id=249223
+            this._canvas.style.userSelect = 'none';
+            this._canvas.style.WebkitUserSelect = 'none';
             // Can't use "display" because of Firefox bug #1445997
             this._canvas.style.visibility = 'hidden';
-            document.body.appendChild(this._canvas);
         }
 
         this._position = { x: 0, y: 0 };
@@ -31,9 +34,6 @@ export default class Cursor {
             'mouseleave': this._handleMouseLeave.bind(this),
             'mousemove': this._handleMouseMove.bind(this),
             'mouseup': this._handleMouseUp.bind(this),
-            'touchstart': this._handleTouchStart.bind(this),
-            'touchmove': this._handleTouchMove.bind(this),
-            'touchend': this._handleTouchEnd.bind(this),
         };
     }
 
@@ -45,25 +45,23 @@ export default class Cursor {
         this._target = target;
 
         if (useFallback) {
-            // FIXME: These don't fire properly except for mouse
-            ///       movement in IE. We want to also capture element
-            //        movement, size changes, visibility, etc.
+            document.body.appendChild(this._canvas);
+
             const options = { capture: true, passive: true };
             this._target.addEventListener('mouseover', this._eventHandlers.mouseover, options);
             this._target.addEventListener('mouseleave', this._eventHandlers.mouseleave, options);
             this._target.addEventListener('mousemove', this._eventHandlers.mousemove, options);
             this._target.addEventListener('mouseup', this._eventHandlers.mouseup, options);
-
-            // There is no "touchleave" so we monitor touchstart globally
-            window.addEventListener('touchstart', this._eventHandlers.touchstart, options);
-            this._target.addEventListener('touchmove', this._eventHandlers.touchmove, options);
-            this._target.addEventListener('touchend', this._eventHandlers.touchend, options);
         }
 
         this.clear();
     }
 
     detach() {
+        if (!this._target) {
+            return;
+        }
+
         if (useFallback) {
             const options = { capture: true, passive: true };
             this._target.removeEventListener('mouseover', this._eventHandlers.mouseover, options);
@@ -71,9 +69,7 @@ export default class Cursor {
             this._target.removeEventListener('mousemove', this._eventHandlers.mousemove, options);
             this._target.removeEventListener('mouseup', this._eventHandlers.mouseup, options);
 
-            window.removeEventListener('touchstart', this._eventHandlers.touchstart, options);
-            this._target.removeEventListener('touchmove', this._eventHandlers.touchmove, options);
-            this._target.removeEventListener('touchend', this._eventHandlers.touchend, options);
+            document.body.removeChild(this._canvas);
         }
 
         this._target = null;
@@ -95,14 +91,7 @@ export default class Cursor {
         this._canvas.width = w;
         this._canvas.height = h;
 
-        let img;
-        try {
-            // IE doesn't support this
-            img = new ImageData(new Uint8ClampedArray(rgba), w, h);
-        } catch (ex) {
-            img = ctx.createImageData(w, h);
-            img.data.set(new Uint8ClampedArray(rgba));
-        }
+        let img = new ImageData(new Uint8ClampedArray(rgba), w, h);
         ctx.clearRect(0, 0, w, h);
         ctx.putImageData(img, 0, 0);
 
@@ -124,6 +113,27 @@ export default class Cursor {
         this._hotSpot.y = 0;
     }
 
+    // Mouse events might be emulated, this allows
+    // moving the cursor in such cases
+    move(clientX, clientY) {
+        if (!useFallback) {
+            return;
+        }
+        // clientX/clientY are relative the _visual viewport_,
+        // but our position is relative the _layout viewport_,
+        // so try to compensate when we can
+        if (window.visualViewport) {
+            this._position.x = clientX + window.visualViewport.offsetLeft;
+            this._position.y = clientY + window.visualViewport.offsetTop;
+        } else {
+            this._position.x = clientX;
+            this._position.y = clientY;
+        }
+        this._updatePosition();
+        let target = document.elementFromPoint(clientX, clientY);
+        this._updateVisibility(target);
+    }
+
     _handleMouseOver(event) {
         // This event could be because we're entering the target, or
         // moving around amongst its sub elements. Let the move handler
@@ -132,7 +142,8 @@ export default class Cursor {
     }
 
     _handleMouseLeave(event) {
-        this._hideCursor();
+        // Check if we should show the cursor on the element we are leaving to
+        this._updateVisibility(event.relatedTarget);
     }
 
     _handleMouseMove(event) {
@@ -150,27 +161,29 @@ export default class Cursor {
         // now and adjust visibility based on that.
         let target = document.elementFromPoint(event.clientX, event.clientY);
         this._updateVisibility(target);
-    }
 
-    _handleTouchStart(event) {
-        // Just as for mouseover, we let the move handler deal with it
-        this._handleTouchMove(event);
-    }
-
-    _handleTouchMove(event) {
-        this._updateVisibility(event.target);
-
-        this._position.x = event.changedTouches[0].clientX - this._hotSpot.x;
-        this._position.y = event.changedTouches[0].clientY - this._hotSpot.y;
-
-        this._updatePosition();
-    }
-
-    _handleTouchEnd(event) {
-        // Same principle as for mouseup
-        let target = document.elementFromPoint(event.changedTouches[0].clientX,
-                                               event.changedTouches[0].clientY);
-        this._updateVisibility(target);
+        // Captures end with a mouseup but we can't know the event order of
+        // mouseup vs releaseCapture.
+        //
+        // In the cases when releaseCapture comes first, the code above is
+        // enough.
+        //
+        // In the cases when the mouseup comes first, we need wait for the
+        // browser to flush all events and then check again if the cursor
+        // should be visible.
+        if (this._captureIsActive()) {
+            window.setTimeout(() => {
+                // We might have detached at this point
+                if (!this._target) {
+                    return;
+                }
+                // Refresh the target from elementFromPoint since queued events
+                // might have altered the DOM
+                target = document.elementFromPoint(event.clientX,
+                                                   event.clientY);
+                this._updateVisibility(target);
+            }, 0);
+        }
     }
 
     _showCursor() {
@@ -189,6 +202,9 @@ export default class Cursor {
     // (i.e. are we over the target, or a child of the target without a
     // different cursor set)
     _shouldShowCursor(target) {
+        if (!target) {
+            return false;
+        }
         // Easy case
         if (target === this._target) {
             return true;
@@ -207,6 +223,11 @@ export default class Cursor {
     }
 
     _updateVisibility(target) {
+        // When the cursor target has capture we want to show the cursor.
+        // So, if a capture is active - look at the captured element instead.
+        if (this._captureIsActive()) {
+            target = document.captureElement;
+        }
         if (this._shouldShowCursor(target)) {
             this._showCursor();
         } else {
@@ -218,4 +239,9 @@ export default class Cursor {
         this._canvas.style.left = this._position.x + "px";
         this._canvas.style.top = this._position.y + "px";
     }
+
+    _captureIsActive() {
+        return document.captureElement &&
+            document.documentElement.contains(document.captureElement);
+    }
 }

core/util/element.js

@@ -0,0 +1,32 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2020 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
+
+/*
+ * HTML element utility functions
+ */
+
+export function clientToElement(x, y, elem) {
+    const bounds = elem.getBoundingClientRect();
+    let pos = { x: 0, y: 0 };
+    // Clip to target bounds
+    if (x < bounds.left) {
+        pos.x = 0;
+    } else if (x >= bounds.right) {
+        pos.x = bounds.width - 1;
+    } else {
+        pos.x = x - bounds.left;
+    }
+    if (y < bounds.top) {
+        pos.y = 0;
+    } else if (y >= bounds.bottom) {
+        pos.y = bounds.height - 1;
+    } else {
+        pos.y = y - bounds.top;
+    }
+    return pos;
+}

core/util/events.js

@@ -21,7 +21,8 @@ export function stopEvent(e) {
 
 // Emulate Element.setCapture() when not supported
 let _captureRecursion = false;
-let _captureElem = null;
+let _elementForUnflushedEvents = null;
+document.captureElement = null;
 function _captureProxy(e) {
     // Recursion protection as we'll see our own event
     if (_captureRecursion) return;
@@ -30,7 +31,11 @@ function _captureProxy(e) {
     const newEv = new e.constructor(e.type, e);
 
     _captureRecursion = true;
-    _captureElem.dispatchEvent(newEv);
+    if (document.captureElement) {
+        document.captureElement.dispatchEvent(newEv);
+    } else {
+        _elementForUnflushedEvents.dispatchEvent(newEv);
+    }
     _captureRecursion = false;
 
     // Avoid double events
@@ -48,58 +53,52 @@ function _captureProxy(e) {
 }
 
 // Follow cursor style of target element
-function _captureElemChanged() {
-    const captureElem = document.getElementById("noVNC_mouse_capture_elem");
-    captureElem.style.cursor = window.getComputedStyle(_captureElem).cursor;
+function _capturedElemChanged() {
+    const proxyElem = document.getElementById("noVNC_mouse_capture_elem");
+    proxyElem.style.cursor = window.getComputedStyle(document.captureElement).cursor;
 }
 
-const _captureObserver = new MutationObserver(_captureElemChanged);
+const _captureObserver = new MutationObserver(_capturedElemChanged);
 
-let _captureIndex = 0;
-
-export function setCapture(elem) {
-    if (elem.setCapture) {
-
-        elem.setCapture();
-
-        // IE releases capture on 'click' events which might not trigger
-        elem.addEventListener('mouseup', releaseCapture);
+export function setCapture(target) {
+    if (target.setCapture) {
 
+        target.setCapture();
+        document.captureElement = target;
     } else {
         // Release any existing capture in case this method is
         // called multiple times without coordination
         releaseCapture();
 
-        let captureElem = document.getElementById("noVNC_mouse_capture_elem");
+        let proxyElem = document.getElementById("noVNC_mouse_capture_elem");
 
-        if (captureElem === null) {
-            captureElem = document.createElement("div");
-            captureElem.id = "noVNC_mouse_capture_elem";
-            captureElem.style.position = "fixed";
-            captureElem.style.top = "0px";
-            captureElem.style.left = "0px";
-            captureElem.style.width = "100%";
-            captureElem.style.height = "100%";
-            captureElem.style.zIndex = 10000;
-            captureElem.style.display = "none";
-            document.body.appendChild(captureElem);
+        if (proxyElem === null) {
+            proxyElem = document.createElement("div");
+            proxyElem.id = "noVNC_mouse_capture_elem";
+            proxyElem.style.position = "fixed";
+            proxyElem.style.top = "0px";
+            proxyElem.style.left = "0px";
+            proxyElem.style.width = "100%";
+            proxyElem.style.height = "100%";
+            proxyElem.style.zIndex = 10000;
+            proxyElem.style.display = "none";
+            document.body.appendChild(proxyElem);
 
             // This is to make sure callers don't get confused by having
             // our blocking element as the target
-            captureElem.addEventListener('contextmenu', _captureProxy);
+            proxyElem.addEventListener('contextmenu', _captureProxy);
 
-            captureElem.addEventListener('mousemove', _captureProxy);
-            captureElem.addEventListener('mouseup', _captureProxy);
+            proxyElem.addEventListener('mousemove', _captureProxy);
+            proxyElem.addEventListener('mouseup', _captureProxy);
         }
 
-        _captureElem = elem;
-        _captureIndex++;
+        document.captureElement = target;
 
         // Track cursor and get initial cursor
-        _captureObserver.observe(elem, {attributes: true});
-        _captureElemChanged();
+        _captureObserver.observe(target, {attributes: true});
+        _capturedElemChanged();
 
-        captureElem.style.display = "";
+        proxyElem.style.display = "";
 
         // We listen to events on window in order to keep tracking if it
         // happens to leave the viewport
@@ -112,26 +111,26 @@ export function releaseCapture() {
     if (document.releaseCapture) {
 
         document.releaseCapture();
+        document.captureElement = null;
 
     } else {
-        if (!_captureElem) {
+        if (!document.captureElement) {
             return;
         }
 
-        // There might be events already queued, so we need to wait for
-        // them to flush. E.g. contextmenu in Microsoft Edge
-        window.setTimeout((expected) => {
-            // Only clear it if it's the expected grab (i.e. no one
-            // else has initiated a new grab)
-            if (_captureIndex === expected) {
-                _captureElem = null;
-            }
-        }, 0, _captureIndex);
+        // There might be events already queued. The event proxy needs
+        // access to the captured element for these queued events.
+        // E.g. contextmenu (right-click) in Microsoft Edge
+        //
+        // Before removing the capturedElem pointer we save it to a
+        // temporary variable that the unflushed events can use.
+        _elementForUnflushedEvents = document.captureElement;
+        document.captureElement = null;
 
         _captureObserver.disconnect();
 
-        const captureElem = document.getElementById("noVNC_mouse_capture_elem");
-        captureElem.style.display = "none";
+        const proxyElem = document.getElementById("noVNC_mouse_capture_elem");
+        proxyElem.style.display = "none";
 
         window.removeEventListener('mousemove', _captureProxy);
         window.removeEventListener('mouseup', _captureProxy);

core/util/eventtarget.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.

core/util/int.js

@@ -0,0 +1,15 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2020 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
+
+export function toUnsigned32bit(toConvert) {
+    return toConvert >>> 0;
+}
+
+export function toSigned32bit(toConvert) {
+    return toConvert | 0;
+}

core/util/logging.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -10,18 +10,18 @@
  * Logging/debug routines
  */
 
-let _log_level = 'warn';
+let _logLevel = 'warn';
 
 let Debug = () => {};
 let Info = () => {};
 let Warn = () => {};
 let Error = () => {};
 
-export function init_logging(level) {
+export function initLogging(level) {
     if (typeof level === 'undefined') {
-        level = _log_level;
+        level = _logLevel;
     } else {
-        _log_level = level;
+        _logLevel = level;
     }
 
     Debug = Info = Warn = Error = () => {};
@@ -46,11 +46,11 @@ export function init_logging(level) {
     }
 }
 
-export function get_logging() {
-    return _log_level;
+export function getLogging() {
+    return _logLevel;
 }
 
 export { Debug, Info, Warn, Error };
 
 // Initialize logging level
-init_logging();
+initLogging();

core/util/md5.js

@@ -0,0 +1,79 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2021 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
+
+/*
+ * Performs MD5 hashing on a string of binary characters, returns an array of bytes
+ */
+
+export function MD5(d) {
+    let r = M(V(Y(X(d), 8 * d.length)));
+    return r;
+}
+
+function M(d) {
+    let f = new Uint8Array(d.length);
+    for (let i=0;i<d.length;i++) {
+        f[i] = d.charCodeAt(i);
+    }
+    return f;
+}
+
+function X(d) {
+    let r = Array(d.length >> 2);
+    for (let m = 0; m < r.length; m++) r[m] = 0;
+    for (let m = 0; m < 8 * d.length; m += 8) r[m >> 5] |= (255 & d.charCodeAt(m / 8)) << m % 32;
+    return r;
+}
+
+function V(d) {
+    let r = "";
+    for (let m = 0; m < 32 * d.length; m += 8) r += String.fromCharCode(d[m >> 5] >>> m % 32 & 255);
+    return r;
+}
+
+function Y(d, g) {
+    d[g >> 5] |= 128 << g % 32, d[14 + (g + 64 >>> 9 << 4)] = g;
+    let m = 1732584193, f = -271733879, r = -1732584194, i = 271733878;
+    for (let n = 0; n < d.length; n += 16) {
+        let h = m,
+            t = f,
+            g = r,
+            e = i;
+        f = ii(f = ii(f = ii(f = ii(f = hh(f = hh(f = hh(f = hh(f = gg(f = gg(f = gg(f = gg(f = ff(f = ff(f = ff(f = ff(f, r = ff(r, i = ff(i, m = ff(m, f, r, i, d[n + 0], 7, -680876936), f, r, d[n + 1], 12, -389564586), m, f, d[n + 2], 17, 606105819), i, m, d[n + 3], 22, -1044525330), r = ff(r, i = ff(i, m = ff(m, f, r, i, d[n + 4], 7, -176418897), f, r, d[n + 5], 12, 1200080426), m, f, d[n + 6], 17, -1473231341), i, m, d[n + 7], 22, -45705983), r = ff(r, i = ff(i, m = ff(m, f, r, i, d[n + 8], 7, 1770035416), f, r, d[n + 9], 12, -1958414417), m, f, d[n + 10], 17, -42063), i, m, d[n + 11], 22, -1990404162), r = ff(r, i = ff(i, m = ff(m, f, r, i, d[n + 12], 7, 1804603682), f, r, d[n + 13], 12, -40341101), m, f, d[n + 14], 17, -1502002290), i, m, d[n + 15], 22, 1236535329), r = gg(r, i = gg(i, m = gg(m, f, r, i, d[n + 1], 5, -165796510), f, r, d[n + 6], 9, -1069501632), m, f, d[n + 11], 14, 643717713), i, m, d[n + 0], 20, -373897302), r = gg(r, i = gg(i, m = gg(m, f, r, i, d[n + 5], 5, -701558691), f, r, d[n + 10], 9, 38016083), m, f, d[n + 15], 14, -660478335), i, m, d[n + 4], 20, -405537848), r = gg(r, i = gg(i, m = gg(m, f, r, i, d[n + 9], 5, 568446438), f, r, d[n + 14], 9, -1019803690), m, f, d[n + 3], 14, -187363961), i, m, d[n + 8], 20, 1163531501), r = gg(r, i = gg(i, m = gg(m, f, r, i, d[n + 13], 5, -1444681467), f, r, d[n + 2], 9, -51403784), m, f, d[n + 7], 14, 1735328473), i, m, d[n + 12], 20, -1926607734), r = hh(r, i = hh(i, m = hh(m, f, r, i, d[n + 5], 4, -378558), f, r, d[n + 8], 11, -2022574463), m, f, d[n + 11], 16, 1839030562), i, m, d[n + 14], 23, -35309556), r = hh(r, i = hh(i, m = hh(m, f, r, i, d[n + 1], 4, -1530992060), f, r, d[n + 4], 11, 1272893353), m, f, d[n + 7], 16, -155497632), i, m, d[n + 10], 23, -1094730640), r = hh(r, i = hh(i, m = hh(m, f, r, i, d[n + 13], 4, 681279174), f, r, d[n + 0], 11, -358537222), m, f, d[n + 3], 16, -722521979), i, m, d[n + 6], 23, 76029189), r = hh(r, i = hh(i, m = hh(m, f, r, i, d[n + 9], 4, -640364487), f, r, d[n + 12], 11, -421815835), m, f, d[n + 15], 16, 530742520), i, m, d[n + 2], 23, -995338651), r = ii(r, i = ii(i, m = ii(m, f, r, i, d[n + 0], 6, -198630844), f, r, d[n + 7], 10, 1126891415), m, f, d[n + 14], 15, -1416354905), i, m, d[n + 5], 21, -57434055), r = ii(r, i = ii(i, m = ii(m, f, r, i, d[n + 12], 6, 1700485571), f, r, d[n + 3], 10, -1894986606), m, f, d[n + 10], 15, -1051523), i, m, d[n + 1], 21, -2054922799), r = ii(r, i = ii(i, m = ii(m, f, r, i, d[n + 8], 6, 1873313359), f, r, d[n + 15], 10, -30611744), m, f, d[n + 6], 15, -1560198380), i, m, d[n + 13], 21, 1309151649), r = ii(r, i = ii(i, m = ii(m, f, r, i, d[n + 4], 6, -145523070), f, r, d[n + 11], 10, -1120210379), m, f, d[n + 2], 15, 718787259), i, m, d[n + 9], 21, -343485551), m = add(m, h), f = add(f, t), r = add(r, g), i = add(i, e);
+    }
+    return Array(m, f, r, i);
+}
+
+function cmn(d, g, m, f, r, i) {
+    return add(rol(add(add(g, d), add(f, i)), r), m);
+}
+
+function ff(d, g, m, f, r, i, n) {
+    return cmn(g & m | ~g & f, d, g, r, i, n);
+}
+
+function gg(d, g, m, f, r, i, n) {
+    return cmn(g & f | m & ~f, d, g, r, i, n);
+}
+
+function hh(d, g, m, f, r, i, n) {
+    return cmn(g ^ m ^ f, d, g, r, i, n);
+}
+
+function ii(d, g, m, f, r, i, n) {
+    return cmn(m ^ (g | ~f), d, g, r, i, n);
+}
+
+function add(d, g) {
+    let m = (65535 & d) + (65535 & g);
+    return (d >> 16) + (g >> 16) + (m >> 16) << 16 | 65535 & m;
+}
+
+function rol(d, g) {
+    return d << g | d >>> 32 - g;
+}

core/util/polyfill.js

@@ -1,54 +0,0 @@
-/*
- * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
- * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
- */
-
-/* Polyfills to provide new APIs in old browsers */
-
-/* Object.assign() (taken from MDN) */
-if (typeof Object.assign != 'function') {
-    // Must be writable: true, enumerable: false, configurable: true
-    Object.defineProperty(Object, "assign", {
-        value: function assign(target, varArgs) { // .length of function is 2
-            'use strict';
-            if (target == null) { // TypeError if undefined or null
-                throw new TypeError('Cannot convert undefined or null to object');
-            }
-
-            const to = Object(target);
-
-            for (let index = 1; index < arguments.length; index++) {
-                const nextSource = arguments[index];
-
-                if (nextSource != null) { // Skip over if undefined or null
-                    for (let nextKey in nextSource) {
-                        // Avoid bugs when hasOwnProperty is shadowed
-                        if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
-                            to[nextKey] = nextSource[nextKey];
-                        }
-                    }
-                }
-            }
-            return to;
-        },
-        writable: true,
-        configurable: true
-    });
-}
-
-/* CustomEvent constructor (taken from MDN) */
-(() => {
-    function CustomEvent(event, params) {
-        params = params || { bubbles: false, cancelable: false, detail: undefined };
-        const evt = document.createEvent( 'CustomEvent' );
-        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
-        return evt;
-    }
-
-    CustomEvent.prototype = window.Event.prototype;
-
-    if (typeof window.CustomEvent !== "function") {
-        window.CustomEvent = CustomEvent;
-    }
-})();

core/util/strings.js

@@ -1,14 +1,28 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
  */
 
-/*
- * Decode from UTF-8
- */
-export function decodeUTF8(utf8string) {
-    return decodeURIComponent(escape(utf8string));
+// Decode from UTF-8
+export function decodeUTF8(utf8string, allowLatin1=false) {
+    try {
+        return decodeURIComponent(escape(utf8string));
+    } catch (e) {
+        if (e instanceof URIError) {
+            if (allowLatin1) {
+                // If we allow Latin1 we can ignore any decoding fails
+                // and in these cases return the original string
+                return utf8string;
+            }
+        }
+        throw e;
+    }
+}
+
+// Encode to UTF-8
+export function encodeUTF8(DOMString) {
+    return unescape(encodeURIComponent(DOMString));
 }

core/websock.js

@@ -1,10 +1,10 @@
 /*
- * Websock: high-performance binary WebSockets
- * Copyright (C) 2018 The noVNC Authors
+ * Websock: high-performance buffering wrapper
+ * Copyright (C) 2019 The noVNC Authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
- * Websock is similar to the standard WebSocket object but with extra
- * buffer handling.
+ * Websock is similar to the standard WebSocket / RTCDataChannel object
+ * but with extra buffer handling.
  *
  * Websock has built-in receive queue buffering; the message event
  * does not contain actual data but is simply a notification that
@@ -17,17 +17,43 @@ import * as Log from './util/logging.js';
 // this has performance issues in some versions Chromium, and
 // doesn't gain a tremendous amount of performance increase in Firefox
 // at the moment.  It may be valuable to turn it on in the future.
-const ENABLE_COPYWITHIN = false;
 const MAX_RQ_GROW_SIZE = 40 * 1024 * 1024;  // 40 MiB
 
+// Constants pulled from RTCDataChannelState enum
+// https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/readyState#RTCDataChannelState_enum
+const DataChannel = {
+    CONNECTING: "connecting",
+    OPEN: "open",
+    CLOSING: "closing",
+    CLOSED: "closed"
+};
+
+const ReadyStates = {
+    CONNECTING: [WebSocket.CONNECTING, DataChannel.CONNECTING],
+    OPEN: [WebSocket.OPEN, DataChannel.OPEN],
+    CLOSING: [WebSocket.CLOSING, DataChannel.CLOSING],
+    CLOSED: [WebSocket.CLOSED, DataChannel.CLOSED],
+};
+
+// Properties a raw channel must have, WebSocket and RTCDataChannel are two examples
+const rawChannelProps = [
+    "send",
+    "close",
+    "binaryType",
+    "onerror",
+    "onmessage",
+    "onopen",
+    "protocol",
+    "readyState",
+];
+
 export default class Websock {
     constructor() {
-        this._websocket = null;  // WebSocket object
+        this._websocket = null;  // WebSocket or RTCDataChannel object
 
         this._rQi = 0;           // Receive queue index
         this._rQlen = 0;         // Next write position in the receive queue
         this._rQbufferSize = 1024 * 1024 * 4; // Receive queue buffer size (4 MiB)
-        this._rQmax = this._rQbufferSize / 8;
         // called in init: this._rQ = new Uint8Array(this._rQbufferSize);
         this._rQ = null; // Receive queue
 
@@ -45,6 +71,29 @@ export default class Websock {
     }
 
     // Getters and Setters
+
+    get readyState() {
+        let subState;
+
+        if (this._websocket === null) {
+            return "unused";
+        }
+
+        subState = this._websocket.readyState;
+
+        if (ReadyStates.CONNECTING.includes(subState)) {
+            return "connecting";
+        } else if (ReadyStates.OPEN.includes(subState)) {
+            return "open";
+        } else if (ReadyStates.CLOSING.includes(subState)) {
+            return "closing";
+        } else if (ReadyStates.CLOSED.includes(subState)) {
+            return "closed";
+        }
+
+        return "unknown";
+    }
+
     get sQ() {
         return this._sQ;
     }
@@ -142,8 +191,8 @@ export default class Websock {
     // Send Queue
 
     flush() {
-        if (this._sQlen > 0 && this._websocket.readyState === WebSocket.OPEN) {
-            this._websocket.send(this._encode_message());
+        if (this._sQlen > 0 && this.readyState === 'open') {
+            this._websocket.send(this._encodeMessage());
             this._sQlen = 0;
         }
     }
@@ -154,7 +203,7 @@ export default class Websock {
         this.flush();
     }
 
-    send_string(str) {
+    sendString(str) {
         this.send(str.split('').map(chr => chr.charCodeAt(0)));
     }
 
@@ -167,24 +216,37 @@ export default class Websock {
         this._eventHandlers[evt] = handler;
     }
 
-    _allocate_buffers() {
+    _allocateBuffers() {
         this._rQ = new Uint8Array(this._rQbufferSize);
         this._sQ = new Uint8Array(this._sQbufferSize);
     }
 
     init() {
-        this._allocate_buffers();
+        this._allocateBuffers();
         this._rQi = 0;
         this._websocket = null;
     }
 
     open(uri, protocols) {
+        this.attach(new WebSocket(uri, protocols));
+    }
+
+    attach(rawChannel) {
         this.init();
 
-        this._websocket = new WebSocket(uri, protocols);
-        this._websocket.binaryType = 'arraybuffer';
+        // Must get object and class methods to be compatible with the tests.
+        const channelProps = [...Object.keys(rawChannel), ...Object.getOwnPropertyNames(Object.getPrototypeOf(rawChannel))];
+        for (let i = 0; i < rawChannelProps.length; i++) {
+            const prop = rawChannelProps[i];
+            if (channelProps.indexOf(prop) < 0) {
+                throw new Error('Raw channel missing property: ' + prop);
+            }
+        }
+
+        this._websocket = rawChannel;
+        this._websocket.binaryType = "arraybuffer";
+        this._websocket.onmessage = this._recvMessage.bind(this);
 
-        this._websocket.onmessage = this._recv_message.bind(this);
         this._websocket.onopen = () => {
             Log.Debug('>> WebSock.onopen');
             if (this._websocket.protocol) {
@@ -194,11 +256,13 @@ export default class Websock {
             this._eventHandlers.open();
             Log.Debug("<< WebSock.onopen");
         };
+
         this._websocket.onclose = (e) => {
             Log.Debug(">> WebSock.onclose");
             this._eventHandlers.close(e);
             Log.Debug("<< WebSock.onclose");
         };
+
         this._websocket.onerror = (e) => {
             Log.Debug(">> WebSock.onerror: " + e);
             this._eventHandlers.error(e);
@@ -208,8 +272,8 @@ export default class Websock {
 
     close() {
         if (this._websocket) {
-            if ((this._websocket.readyState === WebSocket.OPEN) ||
-                    (this._websocket.readyState === WebSocket.CONNECTING)) {
+            if (this.readyState === 'connecting' ||
+                this.readyState === 'open') {
                 Log.Info("Closing WebSocket connection");
                 this._websocket.close();
             }
@@ -219,69 +283,68 @@ export default class Websock {
     }
 
     // private methods
-    _encode_message() {
+    _encodeMessage() {
         // Put in a binary arraybuffer
         // according to the spec, you can send ArrayBufferViews with the send method
         return new Uint8Array(this._sQ.buffer, 0, this._sQlen);
     }
 
-    _expand_compact_rQ(min_fit) {
-        const resizeNeeded = min_fit || this.rQlen > this._rQbufferSize / 2;
+    // We want to move all the unread data to the start of the queue,
+    // e.g. compacting.
+    // The function also expands the receive que if needed, and for
+    // performance reasons we combine these two actions to avoid
+    // unneccessary copying.
+    _expandCompactRQ(minFit) {
+        // if we're using less than 1/8th of the buffer even with the incoming bytes, compact in place
+        // instead of resizing
+        const requiredBufferSize =  (this._rQlen - this._rQi + minFit) * 8;
+        const resizeNeeded = this._rQbufferSize < requiredBufferSize;
+
         if (resizeNeeded) {
-            if (!min_fit) {
-                // just double the size if we need to do compaction
-                this._rQbufferSize *= 2;
-            } else {
-                // otherwise, make sure we satisy rQlen - rQi + min_fit < rQbufferSize / 8
-                this._rQbufferSize = (this.rQlen + min_fit) * 8;
-            }
+            // Make sure we always *at least* double the buffer size, and have at least space for 8x
+            // the current amount of data
+            this._rQbufferSize = Math.max(this._rQbufferSize * 2, requiredBufferSize);
         }
 
         // we don't want to grow unboundedly
         if (this._rQbufferSize > MAX_RQ_GROW_SIZE) {
             this._rQbufferSize = MAX_RQ_GROW_SIZE;
-            if (this._rQbufferSize - this.rQlen < min_fit) {
+            if (this._rQbufferSize - this.rQlen < minFit) {
                 throw new Error("Receive Queue buffer exceeded " + MAX_RQ_GROW_SIZE + " bytes, and the new message could not fit");
             }
         }
 
         if (resizeNeeded) {
-            const old_rQbuffer = this._rQ.buffer;
-            this._rQmax = this._rQbufferSize / 8;
+            const oldRQbuffer = this._rQ.buffer;
             this._rQ = new Uint8Array(this._rQbufferSize);
-            this._rQ.set(new Uint8Array(old_rQbuffer, this._rQi));
+            this._rQ.set(new Uint8Array(oldRQbuffer, this._rQi, this._rQlen - this._rQi));
         } else {
-            if (ENABLE_COPYWITHIN) {
-                this._rQ.copyWithin(0, this._rQi);
-            } else {
-                this._rQ.set(new Uint8Array(this._rQ.buffer, this._rQi));
-            }
+            this._rQ.copyWithin(0, this._rQi, this._rQlen);
         }
 
         this._rQlen = this._rQlen - this._rQi;
         this._rQi = 0;
     }
 
-    _decode_message(data) {
-        // push arraybuffer values onto the end
+    // push arraybuffer values onto the end of the receive que
+    _DecodeMessage(data) {
         const u8 = new Uint8Array(data);
         if (u8.length > this._rQbufferSize - this._rQlen) {
-            this._expand_compact_rQ(u8.length);
+            this._expandCompactRQ(u8.length);
         }
         this._rQ.set(u8, this._rQlen);
         this._rQlen += u8.length;
     }
 
-    _recv_message(e) {
-        this._decode_message(e.data);
+    _recvMessage(e) {
+        this._DecodeMessage(e.data);
         if (this.rQlen > 0) {
             this._eventHandlers.message();
-            // Compact the receive queue
             if (this._rQlen == this._rQi) {
+                // All data has now been processed, this means we
+                // can reset the receive queue.
                 this._rQlen = 0;
                 this._rQi = 0;
-            } else if (this._rQlen > this._rQmax) {
-                this._expand_compact_rQ();
             }
         } else {
             Log.Debug("Ignoring empty message");

docs/API-internal.md

@@ -11,9 +11,6 @@ official external API.
 
 ## 1.1 Module List
 
-* __Mouse__ (core/input/mouse.js): Mouse input event handler with
-limited touch support.
-
 * __Keyboard__ (core/input/keyboard.js): Keyboard input event handler with
 non-US keyboard support. Translates keyDown and keyUp events to X11
 keysym values.
@@ -23,7 +20,7 @@ layered on the HTML5 canvas element.
 
 * __Websock__ (core/websock.js): Websock client from websockify
 with transparent binary data support.
-[Websock API](https://github.com/novnc/websockify/wiki/websock.js) wiki page.
+[Websock API](https://github.com/novnc/websockify-js/wiki/websock.js) wiki page.
 
 
 ## 1.2 Callbacks
@@ -35,62 +32,38 @@ callback event name, and the callback function.
 
 ## 2. Modules
 
-## 2.1 Mouse Module
+## 2.1 Keyboard Module
 
 ### 2.1.1 Configuration Attributes
 
-| name        | type | mode | default  | description
-| ----------- | ---- | ---- | -------- | ------------
-| touchButton | int  | RW   | 1        | Button mask (1, 2, 4) for which click to send on touch devices. 0 means ignore clicks.
-
-### 2.1.2 Methods
-
-| name   | parameters | description
-| ------ | ---------- | ------------
-| grab   | ()         | Begin capturing mouse events
-| ungrab | ()         | Stop capturing mouse events
-
-### 2.1.2 Callbacks
-
-| name          | parameters          | description
-| ------------- | ------------------- | ------------
-| onmousebutton | (x, y, down, bmask) | Handler for mouse button click/release
-| onmousemove   | (x, y)              | Handler for mouse movement
-
-
-## 2.2 Keyboard Module
-
-### 2.2.1 Configuration Attributes
-
 None
 
-### 2.2.2 Methods
+### 2.1.2 Methods
 
 | name   | parameters | description
 | ------ | ---------- | ------------
 | grab   | ()         | Begin capturing keyboard events
 | ungrab | ()         | Stop capturing keyboard events
 
-### 2.2.3 Callbacks
+### 2.1.3 Callbacks
 
 | name       | parameters           | description
 | ---------- | -------------------- | ------------
 | onkeypress | (keysym, code, down) | Handler for key press/release
 
 
-## 2.3 Display Module
+## 2.2 Display Module
 
-### 2.3.1 Configuration Attributes
+### 2.2.1 Configuration Attributes
 
 | name         | type  | mode | default | description
 | ------------ | ----- | ---- | ------- | ------------
-| logo         | raw   | RW   |         | Logo to display when cleared: {"width": width, "height": height, "type": mime-type, "data": data}
 | scale        | float | RW   | 1.0     | Display area scale factor 0.0 - 1.0
 | clipViewport | bool  | RW   | false   | Use viewport clipping
 | width        | int   | RO   |         | Display area width
 | height       | int   | RO   |         | Display area height
 
-### 2.3.2 Methods
+### 2.2.2 Methods
 
 | name               | parameters                                              | description
 | ------------------ | ------------------------------------------------------- | ------------
@@ -100,22 +73,16 @@ None
 | absY               | (y)                                                     | Return Y relative to the remote display
 | resize             | (width, height)                                         | Set width and height
 | flip               | (from_queue)                                            | Update the visible canvas with the contents of the rendering canvas
-| clear              | ()                                                      | Clear the display (show logo if set)
 | pending            | ()                                                      | Check if there are waiting items in the render queue
 | flush              | ()                                                      | Resume processing the render queue unless it's empty
 | fillRect           | (x, y, width, height, color, from_queue)                | Draw a filled in rectangle
 | copyImage          | (old_x, old_y, new_x, new_y, width, height, from_queue) | Copy a rectangular area
-| imageRect          | (x, y, mime, arr)                                       | Draw a rectangle with an image
-| startTile          | (x, y, width, height, color)                            | Begin updating a tile
-| subTile            | (tile, x, y, w, h, color)                               | Update a sub-rectangle within the given tile
-| finishTile         | ()                                                      | Draw the current tile to the display
+| imageRect          | (x, y, width, height, mime, arr)                        | Draw a rectangle with an image
 | blitImage          | (x, y, width, height, arr, offset, from_queue)          | Blit pixels (of R,G,B,A) to the display
-| blitRgbImage       | (x, y, width, height, arr, offset, from_queue)          | Blit RGB encoded image to display
-| blitRgbxImage      | (x, y, width, height, arr, offset, from_queue)          | Blit RGBX encoded image to display
 | drawImage          | (img, x, y)                                             | Draw image and track damage
 | autoscale          | (containerWidth, containerHeight)                       | Scale the display
 
-### 2.3.3 Callbacks
+### 2.2.3 Callbacks
 
 | name    | parameters | description
 | ------- | ---------- | ------------

docs/API.md

@@ -16,53 +16,13 @@ protocol stream.
 
 ### Properties
 
-`viewOnly`
-  - Is a `boolean` indicating if any events (e.g. key presses or mouse
-    movement) should be prevented from being sent to the server.
-    Disabled by default.
-
-`focusOnClick`
-  - Is a `boolean` indicating if keyboard focus should automatically be
-    moved to the remote session when a `mousedown` or `touchstart`
-    event is received.
-
-`touchButton`
-  - Is a `long` controlling the button mask that should be simulated
-    when a touch event is recieved. Uses the same values as
-    [`MouseEvent.button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button).
-    Is set to `1` by default.
-
-`clipViewport`
-  - Is a `boolean` indicating if the remote session should be clipped
-    to its container. When disabled scrollbars will be shown to handle
-    the resulting overflow. Disabled by default.
-
-`dragViewport`
-  - Is a `boolean` indicating if mouse events should control the
-    relative position of a clipped remote session. Only relevant if
-    `clipViewport` is enabled. Disabled by default.
-
-`scaleViewport`
-  - Is a `boolean` indicating if the remote session should be scaled
-    locally so it fits its container. When disabled it will be centered
-    if the remote session is smaller than its container, or handled
-    according to `clipViewport` if it is larger. Disabled by default.
-
-`resizeSession`
-  - Is a `boolean` indicating if a request to resize the remote session
-    should be sent whenever the container changes dimensions. Disabled
-    by default.
-
-`showDotCursor`
-  - Is a `boolean` indicating whether a dot cursor should be shown
-    instead of a zero-sized or fully-transparent cursor if the server
-    sets such invisible cursor. Disabled by default.
-
 `background`
-  - Is a valid CSS [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
-    style value indicating which background style should be applied
-    to the element containing the remote session screen. The default value is `rgb(40, 40, 40)`
-    (solid gray color).
+  - Is a valid CSS [background][mdn-bg] style value indicating which
+    background style should be applied to the element containing the
+    remote session screen. The default value is `rgb(40, 40, 40)` (solid
+    gray color).
+
+[mdn-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background
 
 `capabilities` *Read only*
   - Is an `Object` indicating which optional extensions are available
@@ -73,62 +33,122 @@ protocol stream.
     | -------- | --------- | -----------
     | `power`  | `boolean` | Machine power control is available
 
+`clippingViewport` *Read only*
+  - Is a `boolean` indicating if the remote session is currently being
+    clipped to its container. Only relevant if `clipViewport` is
+    enabled.
+
+`clipViewport`
+  - Is a `boolean` indicating if the remote session should be clipped
+    to its container. When disabled scrollbars will be shown to handle
+    the resulting overflow. Disabled by default.
+
+`compressionLevel`
+  - Is an `int` in range `[0-9]` controlling the desired compression
+    level. Value `0` means no compression. Level 1 uses a minimum of CPU
+    resources and achieves weak compression ratios, while level 9 offers
+    best compression but is slow in terms of CPU consumption on the server
+    side. Use high levels with very slow network connections.
+    Default value is `2`.
+
+`dragViewport`
+  - Is a `boolean` indicating if mouse events should control the
+    relative position of a clipped remote session. Only relevant if
+    `clipViewport` is enabled. Disabled by default.
+
+`focusOnClick`
+  - Is a `boolean` indicating if keyboard focus should automatically be
+    moved to the remote session when a `mousedown` or `touchstart`
+    event is received. Enabled by default.
+
+`qualityLevel`
+  - Is an `int` in range `[0-9]` controlling the desired JPEG quality.
+    Value `0` implies low quality and `9` implies high quality.
+    Default value is `6`.
+
+`resizeSession`
+  - Is a `boolean` indicating if a request to resize the remote session
+    should be sent whenever the container changes dimensions. Disabled
+    by default.
+
+`scaleViewport`
+  - Is a `boolean` indicating if the remote session should be scaled
+    locally so it fits its container. When disabled it will be centered
+    if the remote session is smaller than its container, or handled
+    according to `clipViewport` if it is larger. Disabled by default.
+
+`showDotCursor`
+  - Is a `boolean` indicating whether a dot cursor should be shown
+    instead of a zero-sized or fully-transparent cursor if the server
+    sets such invisible cursor. Disabled by default.
+
+`viewOnly`
+  - Is a `boolean` indicating if any events (e.g. key presses or mouse
+    movement) should be prevented from being sent to the server.
+    Disabled by default.
+
 ### Events
 
-[`connect`](#connect)
-  - The `connect` event is fired when the `RFB` object has completed
-    the connection and handshaking with the server.
-
-[`disconnect`](#disconnected)
-  - The `disconnect` event is fired when the `RFB` object disconnects.
-
-[`credentialsrequired`](#credentialsrequired)
-  - The `credentialsrequired` event is fired when more credentials must
-    be given to continue.
-
-[`securityfailure`](#securityfailure)
-  - The `securityfailure` event is fired when the security negotiation
-    with the server fails.
-
-[`clipboard`](#clipboard)
-  - The `clipboard` event is fired when clipboard data is received from
-    the server.
-
 [`bell`](#bell)
   - The `bell` event is fired when a audible bell request is received
     from the server.
 
-[`desktopname`](#desktopname)
-  - The `desktopname` event is fired when the remote desktop name
-    changes.
-
 [`capabilities`](#capabilities)
   - The `capabilities` event is fired when `RFB.capabilities` is
     updated.
 
+[`clipboard`](#clipboard)
+  - The `clipboard` event is fired when clipboard data is received from
+    the server.
+
+[`clippingviewport`](#clippingviewport)
+  - The `clippingviewport` event is fired when `RFB.clippingViewport` is
+    updated.
+
+[`connect`](#connect)
+  - The `connect` event is fired when the `RFB` object has completed
+    the connection and handshaking with the server.
+
+[`credentialsrequired`](#credentialsrequired)
+  - The `credentialsrequired` event is fired when more credentials must
+    be given to continue.
+
+[`desktopname`](#desktopname)
+  - The `desktopname` event is fired when the remote desktop name
+    changes.
+
+[`disconnect`](#disconnect)
+  - The `disconnect` event is fired when the `RFB` object disconnects.
+
+[`securityfailure`](#securityfailure)
+  - The `securityfailure` event is fired when the security negotiation
+    with the server fails.
+
+[`serververification`](#serververification)
+  - The `serververification` event is fired when the server identity
+    must be confirmed by the user.
+
 ### Methods
 
-[`RFB.disconnect()`](#rfbdisconnect)
-  - Disconnect from the server.
-
-[`RFB.sendCredentials()`](#rfbsendcredentials)
-  - Send credentials to server. Should be called after the
-    [`credentialsrequired`](#credentialsrequired) event has fired.
-
-[`RFB.sendKey()`](#rfbsendKey)
-  - Send a key event.
-
-[`RFB.sendCtrlAltDel()`](#rfbsendctrlaltdel)
-  - Send Ctrl-Alt-Del key sequence.
-
-[`RFB.focus()`](#rfbfocus)
-  - Move keyboard focus to the remote session.
+[`RFB.approveServer()`](#rfbapproveserver)
+  - Proceed connecting to the server. Should be called after the
+    [`serververification`](#serververification) event has fired and the
+    user has verified the identity of the server.
 
 [`RFB.blur()`](#rfbblur)
   - Remove keyboard focus from the remote session.
 
-[`RFB.machineShutdown()`](#rfbmachineshutdown)
-  - Request a shutdown of the remote machine.
+[`RFB.clipboardPasteFrom()`](#rfbclipboardpastefrom)
+  - Send clipboard contents to server.
+
+[`RFB.disconnect()`](#rfbdisconnect)
+  - Disconnect from the server.
+
+[`RFB.focus()`](#rfbfocus)
+  - Move keyboard focus to the remote session.
+
+[`RFB.getImageData()`](#rfbgetimagedata)
+  - Return the current content of the screen as an ImageData array.
 
 [`RFB.machineReboot()`](#rfbmachinereboot)
   - Request a reboot of the remote machine.
@@ -136,8 +156,24 @@ protocol stream.
 [`RFB.machineReset()`](#rfbmachinereset)
   - Request a reset of the remote machine.
 
-[`RFB.clipboardPasteFrom()`](#rfbclipboardPasteFrom)
-  - Send clipboard contents to server.
+[`RFB.machineShutdown()`](#rfbmachineshutdown)
+  - Request a shutdown of the remote machine.
+
+[`RFB.sendCredentials()`](#rfbsendcredentials)
+  - Send credentials to server. Should be called after the
+    [`credentialsrequired`](#credentialsrequired) event has fired.
+
+[`RFB.sendCtrlAltDel()`](#rfbsendctrlaltdel)
+  - Send Ctrl-Alt-Del key sequence.
+
+[`RFB.sendKey()`](#rfbsendkey)
+  - Send a key event.
+
+[`RFB.toBlob()`](#rfbtoblob)
+  - Return the current content of the screen as Blob encoded image file.
+
+[`RFB.toDataURL()`](#rfbtodataurl)
+  - Return the current content of the screen as data-url encoded image file.
 
 ### Details
 
@@ -148,19 +184,24 @@ connection to a specified VNC server.
 
 ##### Syntax
 
-    let rfb = new RFB( target, url [, options] );
+```js
+new RFB(target, urlOrChannel);
+new RFB(target, urlOrChannel, options);
+```
 
 ###### Parameters
 
 **`target`**
-  - A block [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
-    that specifies where the `RFB` object should attach itself. The
-    existing contents of the `HTMLElement` will be untouched, but new
-    elements will be added during the lifetime of the `RFB` object.
+  - A block [`HTMLElement`][mdn-elem] that specifies where the `RFB`
+    object should attach itself. The existing contents of the
+    `HTMLElement` will be untouched, but new elements will be added
+    during the lifetime of the `RFB` object.
 
-**`url`**
+[mdn-elem]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
+
+**`urlOrChannel`**
   - A `DOMString` specifying the VNC server to connect to. This must be
-    a valid WebSocket URL.
+    a valid WebSocket URL. This can also be a `WebSocket` or `RTCDataChannel`.
 
 **`options`** *Optional*
   - An `Object` specifying extra details about how the connection
@@ -187,12 +228,52 @@ connection to a specified VNC server.
       - A `DOMString` specifying the ID to provide to any VNC repeater
         encountered.
 
+    `wsProtocols`
+      - An `Array` of `DOMString`s specifying the sub-protocols to use
+        in the WebSocket connection. Empty by default.
+
+#### bell
+
+The `bell` event is fired when the server has requested an audible
+bell.
+
+#### capabilities
+
+The `capabilities` event is fired whenever an entry is added or removed
+from `RFB.capabilities`. The `detail` property is an `Object` with the
+property `capabilities` containing the new value of `RFB.capabilities`.
+
+#### clippingviewport
+
+The `clippingviewport` event is fired whenever `RFB.clippingViewport`
+changes between `true` and `false`. The `detail` property is a `boolean`
+with the new value of `RFB.clippingViewport`.
+
+#### clipboard
+
+The `clipboard` event is fired when the server has sent clipboard data.
+The `detail` property is an `Object` containing the property `text`
+which is a `DOMString` with the clipboard data.
+
+#### credentialsrequired
+
+The `credentialsrequired` event is fired when the server requests more
+credentials than were specified to [`RFB()`](#rfb-1). The `detail`
+property is an `Object` containing the property `types` which is an
+`Array` of `DOMString` listing the credentials that are required.
+
 #### connect
 
 The `connect` event is fired after all the handshaking with the server
 is completed and the connection is fully established. After this event
 the `RFB` object is ready to recieve graphics updates and to send input.
 
+#### desktopname
+
+The `desktopname` event is fired when the name of the remote desktop
+changes. The `detail` property is an `Object` with the property `name`
+which is a `DOMString` specifying the new name.
+
 #### disconnect
 
 The `disconnect` event is fired when the connection has been
@@ -201,13 +282,6 @@ property `clean`. `clean` is a `boolean` indicating if the termination
 was clean or not. In the event of an unexpected termination or an error
 `clean` will be set to false.
 
-#### credentialsrequired
-
-The `credentialsrequired` event is fired when the server requests more
-credentials than were specified to [`RFB()`](#rfb-1). The `detail`
-property is an `Object` containing the property `types` which is an
-`Array` of `DOMString` listing the credentials that are required.
-
 #### securityfailure
 
 The `securityfailure` event is fired when the handshaking process with
@@ -219,8 +293,7 @@ property is an `Object` containing the following properties:
 | `status` | `long`      | The failure status code
 | `reason` | `DOMString` | The **optional** reason for the failure
 
-The property `status` corresponds to the
-[SecurityResult](https://github.com/rfbproto/rfbproto/blob/master/rfbproto.rst#securityresult)
+The property `status` corresponds to the [SecurityResult][rfb-secresult]
 status code in cases of failure. A status of zero will not be sent in
 this event since that indicates a successful security handshaking
 process. The optional property `reason` is provided by the server and
@@ -228,96 +301,33 @@ thus the language of the string is not known. However most servers will
 probably send English strings. The server can choose to not send a
 reason and in these cases the `reason` property will be omitted.
 
-#### clipboard
+[rfb-secresult]: https://github.com/rfbproto/rfbproto/blob/master/rfbproto.rst#securityresult
 
-The `clipboard` event is fired when the server has sent clipboard data.
-The `detail` property is an `Object` containing the property `text`
-which is a `DOMString` with the clipboard data.
+#### serververification
 
-#### bell
+The `serververification` event is fired when the server provides
+information that allows the user to verify that it is the correct server
+and protect against a man-in-the-middle attack. The `detail` property is
+an `Object` containing the property `type` which is a `DOMString`
+specifying which type of information the server has provided. Other
+properties are also available, depending on the value of `type`:
 
-The `bell` event is fired when the server has requested an audible
-bell.
+`"RSA"`
+ - The server identity is verified using just a RSA key. The property
+   `publickey` is a `Uint8Array` containing the public key in a unsigned
+   big endian representation.
 
-#### desktopname
+#### RFB.approveServer()
 
-The `desktopname` event is fired when the name of the remote desktop
-changes. The `detail` property is an `Object` with the property `name`
-which is a `DOMString` specifying the new name.
-
-#### capabilities
-
-The `capabilities` event is fired whenever an entry is added or removed
-from `RFB.capabilities`. The `detail` property is an `Object` with the
-property `capabilities` containing the new value of `RFB.capabilities`.
-
-#### RFB.disconnect()
-
-The `RFB.disconnect()` method is used to disconnect from the currently
-connected server.
+The `RFB.approveServer()` method is used to signal that the user has
+verified the server identity provided in a `serververification` event
+and that the connection can continue.
 
 ##### Syntax
 
-    RFB.disconnect( );
-
-#### RFB.sendCredentials()
-
-The `RFB.sendCredentials()` method is used to provide the missing
-credentials after a `credentialsrequired` event has been fired.
-
-##### Syntax
-
-    RFB.sendCredentials( credentials );
-
-###### Parameters
-
-**`credentials`**
-  - An `Object` specifying the credentials to provide to the server
-    when authenticating. See [`RFB()`](#rfb-1) for details.
-
-#### RFB.sendKey()
-
-The `RFB.sendKey()` method is used to send a key event to the server.
-
-##### Syntax
-
-    RFB.sendKey( keysym, code [, down] );
-
-###### Parameters
-
-**`keysym`**
-  - A `long` specifying the RFB keysym to send. Can be `0` if a valid
-    **`code`** is specified.
-
-**`code`**
-  - A `DOMString` specifying the physical key to send. Valid values are
-    those that can be specified to
-    [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code).
-    If the physical key cannot be determined then `null` shall be
-    specified.
-
-**`down`** *Optional*
-  - A `boolean` specifying if a press or a release event should be
-    sent. If omitted then both a press and release event are sent.
-
-#### RFB.sendCtrlAltDel()
-
-The `RFB.sendCtrlAltDel()` method is used to send the key sequence
-*left Control*, *left Alt*, *Delete*. This is a convenience wrapper
-around [`RFB.sendKey()`](#rfbsendkey).
-
-##### Syntax
-
-    RFB.sendCtrlAltDel( );
-
-#### RFB.focus()
-
-The `RFB.focus()` method sets the keyboard focus on the remote session.
-Keyboard events will be sent to the remote server after this point.
-
-##### Syntax
-
-    RFB.focus( );
+```js
+RFB.approveServer();
+```
 
 #### RFB.blur()
 
@@ -327,17 +337,70 @@ point.
 
 ##### Syntax
 
-    RFB.blur( );
+```js
+RFB.blur();
+```
 
-#### RFB.machineShutdown()
+#### RFB.clipboardPasteFrom()
 
-The `RFB.machineShutdown()` method is used to request to shut down the
-remote machine. The capability `power` must be set for this method to
-have any effect.
+The `RFB.clipboardPasteFrom()` method is used to send clipboard data
+to the remote server.
 
 ##### Syntax
 
-    RFB.machineShutdown( );
+```js
+RFB.clipboardPasteFrom(text);
+```
+
+###### Parameters
+
+**`text`**
+  - A `DOMString` specifying the clipboard data to send.
+
+#### RFB.disconnect()
+
+The `RFB.disconnect()` method is used to disconnect from the currently
+connected server.
+
+##### Syntax
+
+```js
+RFB.disconnect();
+```
+
+#### RFB.focus()
+
+The `RFB.focus()` method sets the keyboard focus on the remote session.
+Keyboard events will be sent to the remote server after this point.
+
+##### Syntax
+
+```js
+RFB.focus();
+RFB.focus(options);
+```
+
+###### Parameters
+
+**`options`** *Optional*
+  - A `object` providing options to control how the focus will be
+    performed. Please see [`HTMLElement.focus()`][mdn-focus] for
+    available options.
+
+[mdn-focus]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+
+#### RFB.getImageData()
+
+The `RFB.getImageData()` method is used to return the current content of
+the screen encoded as [`ImageData`][mdn-imagedata].
+
+[mdn-imagedata]: https://developer.mozilla.org/en-US/docs/Web/API/ImageData
+
+##### Syntax
+
+```js
+RFB.getImageData();
+```
 
 #### RFB.machineReboot()
 
@@ -347,7 +410,9 @@ to have any effect.
 
 ##### Syntax
 
-    RFB.machineReboot( );
+```js
+RFB.machineReboot();
+```
 
 #### RFB.machineReset()
 
@@ -357,19 +422,125 @@ to have any effect.
 
 ##### Syntax
 
-    RFB.machineReset( );
+```js
+RFB.machineReset();
+```
 
-#### RFB.clipboardPasteFrom()
+#### RFB.machineShutdown()
 
-The `RFB.clipboardPasteFrom()` method is used to send clipboard data
-to the remote server.
+The `RFB.machineShutdown()` method is used to request to shut down the
+remote machine. The capability `power` must be set for this method to
+have any effect.
 
 ##### Syntax
 
-    RFB.clipboardPasteFrom( text );
+```js
+RFB.machineShutdown();
+```
+
+#### RFB.sendCredentials()
+
+The `RFB.sendCredentials()` method is used to provide the missing
+credentials after a `credentialsrequired` event has been fired.
+
+##### Syntax
+
+```js
+RFB.sendCredentials(credentials);
+```
 
 ###### Parameters
 
-**`text`**
-  - A `DOMString` specifying the clipboard data to send. Currently only
-  characters from ISO 8859-1 are supported.
+**`credentials`**
+  - An `Object` specifying the credentials to provide to the server
+    when authenticating. See [`RFB()`](#rfb-1) for details.
+
+#### RFB.sendCtrlAltDel()
+
+The `RFB.sendCtrlAltDel()` method is used to send the key sequence
+*left Control*, *left Alt*, *Delete*. This is a convenience wrapper
+around [`RFB.sendKey()`](#rfbsendkey).
+
+##### Syntax
+
+```js
+RFB.sendCtrlAltDel();
+```
+
+#### RFB.sendKey()
+
+The `RFB.sendKey()` method is used to send a key event to the server.
+
+##### Syntax
+
+```js
+RFB.sendKey(keysym, code);
+RFB.sendKey(keysym, code, down);
+```
+
+###### Parameters
+
+**`keysym`**
+  - A `long` specifying the RFB keysym to send. Can be `0` if a valid
+    **`code`** is specified.
+
+**`code`**
+  - A `DOMString` specifying the physical key to send. Valid values are
+    those that can be specified to [`KeyboardEvent.code`][mdn-keycode].
+    If the physical key cannot be determined then `null` shall be
+    specified.
+
+[mdn-keycode]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
+
+**`down`** *Optional*
+  - A `boolean` specifying if a press or a release event should be
+    sent. If omitted then both a press and release event are sent.
+
+#### RFB.toBlob()
+
+The `RFB.toBlob()` method is used to return the current content of the
+screen encoded as [`Blob`][mdn-blob].
+
+[mdn-blob]: https://developer.mozilla.org/en-US/docs/Web/API/Blob
+
+##### Syntax
+
+```js
+RFB.toBlob(callback);
+RFB.toBlob(callback, type);
+RFB.toBlob(callback, type, quality);
+```
+
+###### Parameters
+
+**`callback`**
+  - A callback function which will receive the resulting
+    [`Blob`][mdn-blob] as the single argument
+
+**`type`** *Optional*
+  - A string indicating the requested MIME type of the image
+
+**`quality`** *Optional*
+  - A number between 0 and 1 indicating the image quality.
+
+#### RFB.toDataURL()
+
+The `RFB.toDataURL()` method is used to return the current content of the
+screen encoded as a data URL that could for example be put in the `src` attribute
+of an `img` tag.
+
+##### Syntax
+
+```js
+RFB.toDataURL();
+RFB.toDataURL(type);
+RFB.toDataURL(type, encoderOptions);
+```
+
+###### Parameters
+
+**`type`** *Optional*
+  - A string indicating the requested MIME type of the image
+
+**`encoderOptions`** *Optional*
+  - A number between 0 and 1 indicating the image quality.

docs/EMBEDDING.md

@@ -61,30 +61,16 @@ query string. Currently the following options are available:
 * `resize` - How to resize the remote session if it is not the same size as
   the browser window. Can be one of `off`, `scale` and `remote`.
 
+* `quality` - The session JPEG quality level. Can be `0` to `9`.
+
+* `compression` - The session compression level. Can be `0` to `9`.
+
 * `show_dot` - If a dot cursor should be shown when the remote server provides
   no local cursor, or provides a fully-transparent (invisible) cursor.
 
 * `logging` - The console log level. Can be one of `error`, `warn`, `info` or
   `debug`.
 
-## Pre-conversion of Modules
-
-noVNC is written using ECMAScript 6 modules. Many of the major browsers support
-these modules natively, but not all. By default the noVNC application includes
-a script that can convert these modules to an older format as they are being
-loaded. However this process can be slow and severely increases the load time
-for the application.
-
-It is possible to perform this conversion ahead of time, avoiding the extra
-load times. To do this please follow these steps:
-
- 1. Install Node.js
- 2. Run `npm install` in the noVNC directory
- 3. Run `./utils/use_require.js --with-app --as commonjs`
-
-This will produce a `build/` directory that includes everything needed to run
-the noVNC application.
-
 ## HTTP Serving Considerations
 ### Browser Cache Issue
 

docs/LIBRARY.md

@@ -18,18 +18,14 @@ do things.
 
 ## Conversion of Modules
 
-noVNC is written using ECMAScript 6 modules. Many of the major browsers support
-these modules natively, but not all. They are also not supported by Node.js. To
-use noVNC in these places the library must first be converted.
+noVNC is written using ECMAScript 6 modules. This is not supported by older
+versions of Node.js. To use noVNC with those older versions of Node.js the
+library must first be converted.
 
 Fortunately noVNC includes a script to handle this conversion. Please follow
 the following steps:
 
  1. Install Node.js
  2. Run `npm install` in the noVNC directory
- 3. Run `./utils/use_require.js --as <module format>`
-
-Several module formats are available. Please run
-`./utils/use_require.js --help` to see them all.
 
 The result of the conversion is available in the `lib/` directory.

docs/novnc_proxy.1

@@ -0,0 +1,37 @@
+.TH novnc_proxy 1  "June 25, 2020" "version 1.2.0" "USER COMMANDS"
+
+.SH NAME
+novnc_proxy - noVNC proxy server
+.SH SYNOPSIS
+.B novnc_proxy [--listen PORT] [--vnc VNC_HOST:PORT] [--cert CERT] [--ssl-only]
+
+Starts the WebSockets proxy and a mini-webserver and
+provides a cut-and-paste URL to go to.
+
+    --listen PORT         Port for proxy/webserver to listen on
+                          Default: 6080
+    --vnc VNC_HOST:PORT   VNC server host:port proxy target
+                          Default: localhost:5900
+    --cert CERT           Path to combined cert/key file, or just
+                          the cert file if used with --key
+                          Default: self.pem
+    --key KEY             Path to key file, when not combined with cert
+    --web WEB             Path to web files (e.g. vnc.html)
+                          Default: ./
+    --ssl-only            Disable non-https connections.
+
+    --record FILE         Record traffic to FILE.session.js
+
+    --syslog SERVER       Can be local socket such as /dev/log, or a UDP host:port pair.
+
+    --heartbeat SEC       send a ping to the client every SEC seconds
+    --timeout SEC         after SEC seconds exit when not connected
+    --idle-timeout SEC    server exits after SEC seconds if there are no
+                          active connections
+
+.SH AUTHOR
+The noVNC Authors
+https://github.com/novnc/noVNC
+
+.SH SEE ALSO
+websockify(1), nova-novncproxy(1)

karma.conf.js

@@ -1,48 +1,23 @@
 // Karma configuration
 
+// The Safari launcher is broken, so construct our own
+function SafariBrowser(id, baseBrowserDecorator, args) {
+  baseBrowserDecorator(this);
+
+  this._start = function(url) {
+    this._execCommand('/usr/bin/open', ['-W', '-n', '-a', 'Safari', url]);
+  }
+}
+
+SafariBrowser.prototype = {
+  name: 'Safari'
+}
+
 module.exports = (config) => {
-  const customLaunchers = {};
   let browsers = [];
-  let useSauce = false;
 
-  // use Sauce when running on Travis
-  if (process.env.TRAVIS_JOB_NUMBER) {
-    useSauce = true;
-  } 
-
-  if (useSauce && process.env.TEST_BROWSER_NAME && process.env.TEST_BROWSER_NAME != 'PhantomJS') {
-    const names = process.env.TEST_BROWSER_NAME.split(',');
-    const platforms = process.env.TEST_BROWSER_OS.split(',');
-    const versions = process.env.TEST_BROWSER_VERSION
-      ? process.env.TEST_BROWSER_VERSION.split(',')
-      : [null];
-
-    for (let i = 0; i < names.length; i++) {
-      for (let j = 0; j < platforms.length; j++) {
-        for (let k = 0; k < versions.length; k++) {
-          let launcher_name = 'sl_' + platforms[j].replace(/[^a-zA-Z0-9]/g, '') + '_' + names[i];
-          if (versions[k]) {
-            launcher_name += '_' + versions[k];
-          }
-
-          customLaunchers[launcher_name] = {
-            base: 'SauceLabs',
-            browserName: names[i],
-            platform: platforms[j],
-          };
-
-          if (versions[i]) {
-            customLaunchers[launcher_name].version = versions[k];
-          }
-        }
-      }
-    }
-
-    browsers = Object.keys(customLaunchers);
-  } else {
-    useSauce = false;
-    //browsers = ['PhantomJS'];
-    browsers = [];
+  if (process.env.TEST_BROWSER_NAME) {
+    browsers = process.env.TEST_BROWSER_NAME.split(',');
   }
 
   const my_conf = {
@@ -56,16 +31,13 @@ module.exports = (config) => {
 
     // list of files / patterns to load in the browser (loaded in order)
     files: [
-      { pattern: 'app/localization.js', included: false },
-      { pattern: 'app/webutil.js', included: false },
-      { pattern: 'core/**/*.js', included: false },
-      { pattern: 'vendor/pako/**/*.js', included: false },
-      { pattern: 'vendor/browser-es-module-loader/dist/*.js*', included: false },
-      { pattern: 'tests/test.*.js', included: false },
-      { pattern: 'tests/fake.*.js', included: false },
-      { pattern: 'tests/assertions.js', included: false },
-      'vendor/promise.js',
-      'tests/karma-test-main.js',
+      { pattern: 'app/localization.js', included: false, type: 'module' },
+      { pattern: 'app/webutil.js', included: false, type: 'module' },
+      { pattern: 'core/**/*.js', included: false, type: 'module' },
+      { pattern: 'vendor/pako/**/*.js', included: false, type: 'module' },
+      { pattern: 'tests/test.*.js', type: 'module' },
+      { pattern: 'tests/fake.*.js', included: false, type: 'module' },
+      { pattern: 'tests/assertions.js', type: 'module' },
     ],
 
     client: {
@@ -80,7 +52,11 @@ module.exports = (config) => {
     exclude: [
     ],
 
-    customLaunchers: customLaunchers,
+    plugins: [
+      'karma-*',
+      '@chiragrupani/karma-chromium-edge-launcher',
+      { 'launcher:Safari': [ 'type', SafariBrowser ] },
+    ],
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
@@ -92,14 +68,6 @@ module.exports = (config) => {
     reporters: ['mocha'],
 
 
-    // web server port
-    port: 9876,
-
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-
     // level of logging
     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
     logLevel: config.LOG_INFO,
@@ -111,24 +79,7 @@ module.exports = (config) => {
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
     singleRun: true,
-
-    // Increase timeout in case connection is slow/we run more browsers than possible
-    // (we currently get 3 for free, and we try to run 7, so it can take a while)
-    captureTimeout: 240000,
-
-    // similarly to above
-    browserNoActivityTimeout: 100000,
   };
 
-  if (useSauce) {
-    my_conf.reporters.push('saucelabs');
-    my_conf.captureTimeout = 0; // use SL timeout
-    my_conf.sauceLabs = {
-      testName: 'noVNC Tests (all)',
-      startConnect: false,
-      tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER
-    };
-  }
-
   config.set(my_conf);
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novnc/novnc",
-  "version": "1.1.0",
+  "version": "1.4.0",
   "description": "An HTML5 VNC client",
   "browser": "lib/rfb",
   "directories": {
@@ -19,9 +19,9 @@
     "vendor/pako"
   ],
   "scripts": {
-    "lint": "eslint app core po tests utils",
+    "lint": "eslint app core po/po2js po/xgettext-html tests utils",
     "test": "karma start karma.conf.js",
-    "prepublish": "node ./utils/use_require.js --as commonjs --clean"
+    "prepublish": "node ./utils/convert.js --clean"
   },
   "repository": {
     "type": "git",
@@ -29,8 +29,6 @@
   },
   "author": "Joel Martin <github@martintribe.org> (https://github.com/kanaka)",
   "contributors": [
-    "Solly Ross <sross@redhat.com> (https://github.com/directxman12)",
-    "Peter Åstrand <astrand@cendio.se> (https://github.com/astrand)",
     "Samuel Mannehed <samuel@cendio.se> (https://github.com/samhed)",
     "Pierre Ossman <ossman@cendio.se> (https://github.com/CendioOssman)"
   ],
@@ -40,36 +38,36 @@
   },
   "homepage": "https://github.com/novnc/noVNC",
   "devDependencies": {
-    "babel-core": "^6.22.1",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-import-redirect": "*",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-es2015-modules-amd": "^6.22.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
-    "babel-plugin-transform-es2015-modules-systemjs": "^6.22.0",
-    "babel-plugin-transform-es2015-modules-umd": "^6.22.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babelify": "^7.3.0",
-    "browserify": "^13.1.0",
-    "chai": "^3.5.0",
-    "commander": "^2.9.0",
-    "es-module-loader": "^2.1.0",
-    "eslint": "^4.16.0",
-    "fs-extra": "^1.0.0",
-    "jsdom": "*",
-    "karma": "^1.3.0",
-    "karma-mocha": "^1.3.0",
-    "karma-mocha-reporter": "^2.2.0",
-    "karma-sauce-launcher": "^1.0.0",
-    "karma-sinon-chai": "^2.0.0",
-    "mocha": "^3.1.2",
-    "node-getopt": "*",
-    "po2json": "*",
-    "requirejs": "^2.3.2",
-    "rollup": "^0.41.4",
-    "rollup-plugin-node-resolve": "^2.0.0",
-    "sinon": "^4.0.0",
-    "sinon-chai": "^2.8.0"
+    "@babel/core": "latest",
+    "@babel/plugin-syntax-dynamic-import": "latest",
+    "@babel/plugin-transform-modules-commonjs": "latest",
+    "@babel/preset-env": "latest",
+    "@babel/cli": "latest",
+    "babel-plugin-import-redirect": "latest",
+    "browserify": "latest",
+    "babelify": "latest",
+    "core-js": "latest",
+    "chai": "latest",
+    "commander": "latest",
+    "es-module-loader": "latest",
+    "eslint": "latest",
+    "fs-extra": "latest",
+    "jsdom": "latest",
+    "karma": "latest",
+    "karma-mocha": "latest",
+    "karma-chrome-launcher": "latest",
+    "@chiragrupani/karma-chromium-edge-launcher": "latest",
+    "karma-firefox-launcher": "latest",
+    "karma-ie-launcher": "latest",
+    "karma-mocha-reporter": "latest",
+    "karma-safari-launcher": "latest",
+    "karma-script-launcher": "latest",
+    "karma-sinon-chai": "latest",
+    "mocha": "latest",
+    "node-getopt": "latest",
+    "po2json": "latest",
+    "sinon": "latest",
+    "sinon-chai": "latest"
   },
   "dependencies": {},
   "keywords": [

po/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "node": true,
+    },
+}

po/Makefile

@@ -1,7 +1,8 @@
 all:
 .PHONY: update-po update-js update-pot
+.PHONY: FORCE
 
-LINGUAS := cs de el es ko nl pl ru sv tr zh_CN zh_TW
+LINGUAS := cs de el es fr it ja ko nl pl pt_BR ru sv tr zh_CN zh_TW
 
 VERSION := $(shell grep '"version"' ../package.json | cut -d '"' -f 4)
 
@@ -11,10 +12,10 @@ JSONFILES := $(addprefix ../app/locale/,$(addsuffix .json,$(LINGUAS)))
 update-po: $(POFILES)
 update-js: $(JSONFILES)
 
-%.po: noVNC.pot
-	msgmerge --update --lang=$* $@ $<
-../app/locale/%.json: %.po
-	./po2js $< $@
+%.po: FORCE
+	msgmerge --update --lang=$* $@ noVNC.pot
+../app/locale/%.json: FORCE
+	./po2js $*.po $@
 
 update-pot:
 	xgettext --output=noVNC.js.pot \

po/es.po

@@ -3,14 +3,15 @@
 # Copyright (C) 2018 The noVNC Authors
 # This file is distributed under the same license as the noVNC package.
 # Juanjo Diaz <juanjo.diazmo@gmail.com>, 2018.
+# Adrian Scillato <ascillato@gmail.com>, 2021.
 #
 msgid ""
 msgstr ""
 "Project-Id-Version: noVNC 1.0.0-testing.2\n"
 "Report-Msgid-Bugs-To: novnc@googlegroups.com\n"
 "POT-Creation-Date: 2017-10-06 10:07+0200\n"
-"PO-Revision-Date: 2018-01-30 19:14-0800\n"
-"Last-Translator: Juanjo Diaz <juanjo.diazmo@gmail.com>\n"
+"PO-Revision-Date: 2021-04-23 12:00-0300\n"
+"Last-Translator: Adrian Scillato <ascillato@gmail.com>\n"
 "Language-Team: Spanish\n"
 "Language: es\n"
 "MIME-Version: 1.0\n"
@@ -40,7 +41,7 @@ msgstr "Desconectado"
 
 #: ../app/ui.js:1052 ../core/rfb.js:248
 msgid "Must set host"
-msgstr "Debes configurar el host"
+msgstr "Se debe configurar el host"
 
 #: ../app/ui.js:1101
 msgid "Reconnecting..."
@@ -48,7 +49,7 @@ msgstr "Reconectando..."
 
 #: ../app/ui.js:1140
 msgid "Password is required"
-msgstr "Contraseña es obligatoria"
+msgstr "La contraseña es obligatoria"
 
 #: ../core/rfb.js:548
 msgid "Disconnect timeout"
@@ -186,6 +187,10 @@ msgstr "Pantalla Completa"
 msgid "Settings"
 msgstr "Configuraciones"
 
+#: ../vnc.html:200
+msgid "Encrypt"
+msgstr "Encriptar"
+
 #: ../vnc.html:202
 msgid "Shared Mode"
 msgstr "Modo Compartido"
@@ -228,27 +233,23 @@ msgstr "Cursor Local"
 
 #: ../vnc.html:229
 msgid "Repeater ID:"
-msgstr "ID del Repetidor"
+msgstr "ID del Repetidor:"
 
 #: ../vnc.html:233
 msgid "WebSocket"
 msgstr "WebSocket"
 
-#: ../vnc.html:236
-msgid "Encrypt"
-msgstr ""
-
 #: ../vnc.html:239
 msgid "Host:"
-msgstr "Host"
+msgstr "Host:"
 
 #: ../vnc.html:243
 msgid "Port:"
-msgstr "Puesto"
+msgstr "Puerto:"
 
 #: ../vnc.html:247
 msgid "Path:"
-msgstr "Ruta"
+msgstr "Ruta:"
 
 #: ../vnc.html:254
 msgid "Automatic Reconnect"
@@ -256,11 +257,11 @@ msgstr "Reconexión automática"
 
 #: ../vnc.html:257
 msgid "Reconnect Delay (ms):"
-msgstr "Retraso en la reconexión (ms)"
+msgstr "Retraso en la reconexión (ms):"
 
 #: ../vnc.html:263
 msgid "Logging:"
-msgstr "Logging"
+msgstr "Registrando:"
 
 #: ../vnc.html:275
 msgid "Disconnect"
@@ -272,7 +273,7 @@ msgstr "Conectar"
 
 #: ../vnc.html:304
 msgid "Password:"
-msgstr "Contraseña"
+msgstr "Contraseña:"
 
 #: ../vnc.html:318
 msgid "Cancel"
@@ -280,4 +281,4 @@ msgstr "Cancelar"
 
 #: ../vnc.html:334
 msgid "Canvas not supported."
-msgstr "Canvas no está soportado"
+msgstr "Canvas no soportado."