Add docker-compose.yml

This is much more efficient than looking at two bytes at a time.

.eslintignore

@@ -1 +0,0 @@
-**/xtscancodes.js

.eslintrc

@@ -1,50 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "es6": true
-    },
-    "parserOptions": {
-        "sourceType": "module"
-    },
-    "extends": "eslint:recommended",
-    "rules": {
-        // Unsafe or confusing stuff that we forbid
-
-        "no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": true }],
-        "no-constant-condition": ["error", { "checkLoops": false }],
-        "no-var": "error",
-        "no-useless-constructor": "error",
-        "object-shorthand": ["error", "methods", { "avoidQuotes": true }],
-        "prefer-arrow-callback": "error",
-        "arrow-body-style": ["error", "as-needed", { "requireReturnForObjectLiteral": false } ],
-        "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }],
-        "arrow-spacing": ["error"],
-        "no-confusing-arrow": ["error", { "allowParens": true }],
-
-        // Enforced coding style
-
-        "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
-        "indent": ["error", 4, { "SwitchCase": 1,
-                                 "FunctionDeclaration": { "parameters": "first" },
-                                 "CallExpression": { "arguments": "first" },
-                                 "ArrayExpression": "first",
-                                 "ObjectExpression": "first",
-                                 "ignoreComments": true }],
-        "comma-spacing": ["error"],
-        "comma-style": ["error"],
-        "curly": ["error", "multi-line"],
-        "func-call-spacing": ["error"],
-        "func-names": ["error"],
-        "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
-        "key-spacing": ["error"],
-        "keyword-spacing": ["error"],
-        "no-trailing-spaces": ["error"],
-        "semi": ["error"],
-        "space-before-blocks": ["error"],
-        "space-before-function-paren": ["error", { "anonymous": "always",
-                                                   "named": "never",
-                                                   "asyncArrow": "always" }],
-        "switch-colon-spacing": ["error"],
-        "camelcase": ["error", { allow: ["^XK_", "^XF86XK_"] }],
-    }
-}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,7 +7,7 @@ about: Create a report to help us improve
 **Describe the bug**
 A clear and concise description of what the bug is.
 
-**To Reproduce**
+**To reproduce**
 Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'

.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

@@ -1,6 +1,8 @@
 name: Publish
 
 on:
+  push:
+  pull_request:
   release:
     types: [published]
 
@@ -8,42 +10,88 @@ jobs:
   npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - 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@v4
         with:
           # Needs to be explicitly specified for auth to work
           registry-url: 'https://registry.npmjs.org'
       - run: npm install
+      - uses: actions/upload-artifact@v4
+        with:
+          name: npm
+          path: lib
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-        if: ${{ !github.event.release.prerelease }}
+        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.event.release.prerelease }}
+        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
-    container: snapcore/snapcraft
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-      - run: npm install
-      - run: ./utils/use_require.js --clean --as commonjs --with-app
+      - uses: actions/checkout@v4
       - run: |
-          cp utils/launch.sh build/launch.sh
-          cp snap/local/svc_wrapper.sh build/svc_wrapper.sh
+          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/g" snap/snapcraft.yaml
-      - run: snapcraft
-      - run: |
-          mkdir .snapcraft
-          echo ${SNAPCRAFT_LOGIN} | base64 --decode --ignore-garbage > .snapcraft/snapcraft.cfg
+          sed -i "s/^version:.*/version: '$VERSION'/" snap/snapcraft.yaml
+      - uses: snapcore/action-build@v1
+        id: snapcraft
+      - uses: actions/upload-artifact@v4
+        with:
+          name: snap
+          path: ${{ steps.snapcraft.outputs.snap }}
+      - uses: snapcore/action-publish@v1
+        with:
+          snap: ${{ steps.snapcraft.outputs.snap }}
+          release: stable
         env:
-          SNAPCRAFT_LOGIN: ${{secrets.SNAPCRAFT_LOGIN}}
-      - run: snapcraft push --release=stable *.snap
-        if: ${{ !github.event.release.prerelease }}
-      - run: snapcraft push --release=beta *.snap
-        if: ${{ github.event.release.prerelease }}
+          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

@@ -6,14 +6,14 @@ jobs:
   eslint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-      - run: npm install
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: npm update
       - run: npm run lint
   html:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-      - run: npm install
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: npm update
       - run: git ls-tree --name-only -r HEAD | grep -E "[.](html|css)$" | xargs ./utils/validate

.github/workflows/test.yml

@@ -17,14 +17,12 @@ jobs:
             browser: Safari
           - os: windows-latest
             browser: EdgeHeadless
-          - os: windows-latest
-            browser: IE
       fail-fast: false
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-      - run: npm install
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - 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@v4
+      - uses: actions/setup-node@v4
+      - 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

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) 2019 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,4 +1,4 @@
-## noVNC: HTML VNC Client Library and Application
+## noVNC: HTML VNC client library and application
 
 [![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)
@@ -14,26 +14,24 @@ Many companies, projects and products have integrated noVNC including
 [OpenNebula](http://opennebula.org/),
 [LibVNCServer](http://libvncserver.sourceforge.net), and
 [ThinLinc](https://cendio.com/thinlinc). See
-[the Projects and Companies wiki page](https://github.com/novnc/noVNC/wiki/Projects-and-companies-using-noVNC)
+[the Projects and companies wiki page](https://github.com/novnc/noVNC/wiki/Projects-and-companies-using-noVNC)
 for a more complete list with additional info and links.
 
-### Table of Contents
+### Table of contents
 
 - [News/help/contact](#newshelpcontact)
 - [Features](#features)
 - [Screenshots](#screenshots)
-- [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)
+- [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)
 
 ### News/help/contact
 
 The project website is found at [novnc.com](http://novnc.com).
-Notable commits, announcements and news are posted to
-[@noVNC](http://www.twitter.com/noVNC).
 
 If you are a noVNC developer/integrator/user (or want to be) please join the
 [noVNC discussion group](https://groups.google.com/forum/?fromgroups#!forum/novnc).
@@ -59,16 +57,20 @@ profits such as:
 [Electronic Frontier Foundation](https://www.eff.org/),
 [Against Malaria Foundation](http://www.againstmalaria.com/),
 [Nothing But Nets](http://www.nothingbutnets.net/), etc.
-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, Zlib, H.264
 * Supports scaling, clipping and resizing the desktop
+* Supports back & forward mouse buttons
 * 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
@@ -85,16 +87,16 @@ See more screenshots
 [here](http://novnc.com/screenshots.html).
 
 
-### Browser Requirements
+### Browser requirements
 
 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 11, Opera 36, IE 11, Edge 12
+* Chrome 89, Firefox 89, Safari 15, Opera 75, Edge 89
 
 
-### Server Requirements
+### Server requirements
 
 noVNC follows the standard VNC protocol, but unlike other VNC clients it does
 require WebSockets support. Many servers include support (e.g.
@@ -106,33 +108,42 @@ use a WebSockets to TCP socket proxy. noVNC has a sister project
 proxy.
 
 
-### Quick Start
+### 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:
+### Installation from snap package
+Running the command below will install the latest release of noVNC from snap:
 
 `sudo snap install novnc`
 
-#### Running noVNC
+#### Running noVNC from snap directly
 
-You can run the Snap-package installed novnc directly with, for example:
+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`
 
-#### Running as a Service (Daemon)
-The Snap package also has the capability to run a 'novnc' service which can be 
+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).
+(effectively a service running multiple instances of novnc).
 Instructions (with example values):
 
 List current services (out-of-box this will be blank):
@@ -162,7 +173,7 @@ services.n6082.listen  6082
 services.n6082.vnc     localhost:5902
 ```
 
-Disable a service (note that because of a limitation in  Snap it's currently not 
+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):
 
@@ -179,7 +190,7 @@ services.n6082.listen
 services.n6082.vnc
 ```
 
-### Integration and Deployment
+### Integration and deployment
 
 Please see our other documents for how to integrate noVNC in your own software,
 or deploying the noVNC application in production environments:
@@ -194,15 +205,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)
-    * [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
+    * 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)

app/error-handler.js

@@ -1,66 +1,79 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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.
  */
 
-// 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.
+// Fallback for all uncaught errors
+function handleError(event, err) {
+    try {
+        const msg = document.getElementById('noVNC_fallback_errormsg');
 
-// No ES6 can be used in this file since it's used for the translation
-/* eslint-disable prefer-arrow-callback */
-
-(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/locale/cs.json

@@ -14,7 +14,7 @@
     "Password is required": "Je vyžadováno heslo",
     "noVNC encountered an error:": "noVNC narazilo na chybu:",
     "Hide/Show the control bar": "Skrýt/zobrazit ovládací panel",
-    "Move/Drag Viewport": "Přesunout/přetáhnout výřez",
+    "Move/Drag viewport": "Přesunout/přetáhnout výřez",
     "viewport drag": "přesun výřezu",
     "Active Mouse Button": "Aktivní tlačítka myši",
     "No mousebutton": "Žádné",
@@ -22,9 +22,9 @@
     "Middle mousebutton": "Prostřední tlačítko myši",
     "Right mousebutton": "Pravé tlačítko myši",
     "Keyboard": "Klávesnice",
-    "Show Keyboard": "Zobrazit klávesnici",
+    "Show keyboard": "Zobrazit klávesnici",
     "Extra keys": "Extra klávesy",
-    "Show Extra Keys": "Zobrazit extra klávesy",
+    "Show extra keys": "Zobrazit extra klávesy",
     "Ctrl": "Ctrl",
     "Toggle Ctrl": "Přepnout Ctrl",
     "Alt": "Alt",
@@ -45,13 +45,13 @@
     "Clear": "Vymazat",
     "Fullscreen": "Celá obrazovka",
     "Settings": "Nastavení",
-    "Shared Mode": "Sdílený režim",
-    "View Only": "Pouze prohlížení",
-    "Clip to Window": "Přizpůsobit oknu",
-    "Scaling Mode:": "Přizpůsobení velikosti",
+    "Shared mode": "Sdílený režim",
+    "View only": "Pouze prohlížení",
+    "Clip to window": "Přizpůsobit oknu",
+    "Scaling mode:": "Přizpůsobení velikosti",
     "None": "Žádné",
-    "Local Scaling": "Místní",
-    "Remote Resizing": "Vzdálené",
+    "Local scaling": "Místní",
+    "Remote resizing": "Vzdálené",
     "Advanced": "Pokročilé",
     "Repeater ID:": "ID opakovače",
     "WebSocket": "WebSocket",
@@ -59,9 +59,9 @@
     "Host:": "Hostitel:",
     "Port:": "Port:",
     "Path:": "Cesta",
-    "Automatic Reconnect": "Automatická obnova připojení",
-    "Reconnect Delay (ms):": "Zpoždění připojení (ms)",
-    "Show Dot when No Cursor": "Tečka místo chybějícího kurzoru myši",
+    "Automatic reconnect": "Automatická obnova připojení",
+    "Reconnect delay (ms):": "Zpoždění připojení (ms)",
+    "Show dot when no cursor": "Tečka místo chybějícího kurzoru myši",
     "Logging:": "Logování:",
     "Disconnect": "Odpojit",
     "Connect": "Připojit",

app/locale/de.json

@@ -13,7 +13,7 @@
     "Password is required": "Passwort ist erforderlich",
     "noVNC encountered an error:": "Ein Fehler ist aufgetreten:",
     "Hide/Show the control bar": "Kontrollleiste verstecken/anzeigen",
-    "Move/Drag Viewport": "Ansichtsfenster verschieben/ziehen",
+    "Move/Drag viewport": "Ansichtsfenster verschieben/ziehen",
     "viewport drag": "Ansichtsfenster ziehen",
     "Active Mouse Button": "Aktive Maustaste",
     "No mousebutton": "Keine Maustaste",
@@ -21,9 +21,9 @@
     "Middle mousebutton": "Mittlere Maustaste",
     "Right mousebutton": "Rechte Maustaste",
     "Keyboard": "Tastatur",
-    "Show Keyboard": "Tastatur anzeigen",
+    "Show keyboard": "Tastatur anzeigen",
     "Extra keys": "Zusatztasten",
-    "Show Extra Keys": "Zusatztasten anzeigen",
+    "Show extra keys": "Zusatztasten anzeigen",
     "Ctrl": "Strg",
     "Toggle Ctrl": "Strg umschalten",
     "Alt": "Alt",
@@ -44,13 +44,13 @@
     "Clear": "Löschen",
     "Fullscreen": "Vollbild",
     "Settings": "Einstellungen",
-    "Shared Mode": "Geteilter Modus",
-    "View Only": "Nur betrachten",
-    "Clip to Window": "Auf Fenster begrenzen",
-    "Scaling Mode:": "Skalierungsmodus:",
+    "Shared mode": "Geteilter Modus",
+    "View only": "Nur betrachten",
+    "Clip to window": "Auf Fenster begrenzen",
+    "Scaling mode:": "Skalierungsmodus:",
     "None": "Keiner",
-    "Local Scaling": "Lokales skalieren",
-    "Remote Resizing": "Serverseitiges skalieren",
+    "Local scaling": "Lokales skalieren",
+    "Remote resizing": "Serverseitiges skalieren",
     "Advanced": "Erweitert",
     "Repeater ID:": "Repeater ID:",
     "WebSocket": "WebSocket",
@@ -58,12 +58,17 @@
     "Host:": "Server:",
     "Port:": "Port:",
     "Path:": "Pfad:",
-    "Automatic Reconnect": "Automatisch wiederverbinden",
-    "Reconnect Delay (ms):": "Wiederverbindungsverzögerung (ms):",
+    "Automatic reconnect": "Automatisch wiederverbinden",
+    "Reconnect delay (ms):": "Wiederverbindungsverzögerung (ms):",
     "Logging:": "Protokollierung:",
     "Disconnect": "Verbindung trennen",
     "Connect": "Verbinden",
     "Password:": "Passwort:",
     "Cancel": "Abbrechen",
-    "Canvas not supported.": "Canvas nicht unterstützt."
+    "Canvas not supported.": "Canvas nicht unterstützt.",
+    "Disconnect timeout": "Zeitüberschreitung beim Trennen",
+    "Local Downscaling": "Lokales herunterskalieren",
+    "Local Cursor": "Lokaler Mauszeiger",
+    "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "'Clipping-Modus' aktiviert, Scrollbalken in 'IE-Vollbildmodus' werden nicht unterstützt",
+    "True Color": "True Color"
 }

app/locale/el.json

@@ -1,4 +1,5 @@
 {
+    "HTTPS is required for full functionality": "Το HTTPS είναι απαιτούμενο για πλήρη λειτουργικότητα",
     "Connecting...": "Συνδέεται...",
     "Disconnecting...": "Aποσυνδέεται...",
     "Reconnecting...": "Επανασυνδέεται...",
@@ -7,19 +8,15 @@
     "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": "Απαιτείται ο κωδικός πρόσβασης",
+    "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": "Επιπλέον πλήκτρα",
@@ -28,6 +25,8 @@
     "Toggle Ctrl": "Εναλλαγή Ctrl",
     "Alt": "Alt",
     "Toggle Alt": "Εναλλαγή Alt",
+    "Toggle Windows": "Εναλλαγή Παράθυρων",
+    "Windows": "Παράθυρα",
     "Send Tab": "Αποστολή Tab",
     "Tab": "Tab",
     "Esc": "Esc",
@@ -41,8 +40,8 @@
     "Reboot": "Επανεκκίνηση",
     "Reset": "Επαναφορά",
     "Clipboard": "Πρόχειρο",
-    "Clear": "Καθάρισμα",
-    "Fullscreen": "Πλήρης Οθόνη",
+    "Edit clipboard content in the textarea below.": "Επεξεργαστείτε το περιεχόμενο του πρόχειρου στην περιοχή κειμένου παρακάτω.",
+    "Full Screen": "Πλήρης Οθόνη",
     "Settings": "Ρυθμίσεις",
     "Shared Mode": "Κοινόχρηστη Λειτουργία",
     "View Only": "Μόνο Θέαση",
@@ -52,6 +51,8 @@
     "Local Scaling": "Τοπική Κλιμάκωση",
     "Remote Resizing": "Απομακρυσμένη Αλλαγή μεγέθους",
     "Advanced": "Για προχωρημένους",
+    "Quality:": "Ποιότητα:",
+    "Compression level:": "Επίπεδο συμπίεσης:",
     "Repeater ID:": "Repeater ID:",
     "WebSocket": "WebSocket",
     "Encrypt": "Κρυπτογράφηση",
@@ -60,10 +61,40 @@
     "Path:": "Διαδρομή:",
     "Automatic Reconnect": "Αυτόματη επανασύνδεση",
     "Reconnect Delay (ms):": "Καθυστέρηση επανασύνδεσης (ms):",
+    "Show Dot when No Cursor": "Εμφάνιση Τελείας όταν δεν υπάρχει Δρομέας",
     "Logging:": "Καταγραφή:",
+    "Version:": "Έκδοση:",
     "Disconnect": "Αποσύνδεση",
     "Connect": "Σύνδεση",
+    "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": "Απόρριψη",
+    "Credentials": "Διαπιστευτήρια",
+    "Username:": "Κωδικός Χρήστη:",
     "Password:": "Κωδικός Πρόσβασης:",
+    "Send Credentials": "Αποστολή Διαπιστευτηρίων",
     "Cancel": "Ακύρωση",
-    "Canvas not supported.": "Δεν υποστηρίζεται το στοιχείο Canvas"
+    "Password is required": "Απαιτείται ο κωδικός πρόσβασης",
+    "viewport drag": "σύρσιμο θεατού πεδίου",
+    "Active Mouse Button": "Ενεργό Πλήκτρο Ποντικιού",
+    "No mousebutton": "Χωρίς Πλήκτρο Ποντικιού",
+    "Left mousebutton": "Αριστερό Πλήκτρο Ποντικιού",
+    "Middle mousebutton": "Μεσαίο Πλήκτρο Ποντικιού",
+    "Right mousebutton": "Δεξί Πλήκτρο Ποντικιού",
+    "Clear": "Καθάρισμα",
+    "Canvas not supported.": "Δεν υποστηρίζεται το στοιχείο Canvas",
+    "Disconnect timeout": "Παρέλευση χρονικού ορίου αποσύνδεσης",
+    "Local Downscaling": "Τοπική Συρρίκνωση",
+    "Local Cursor": "Τοπικός Δρομέας",
+    "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "Εφαρμογή λειτουργίας αποκοπής αφού δεν υποστηρίζονται οι λωρίδες κύλισης σε πλήρη οθόνη στον IE",
+    "True Color": "Πραγματικά Χρώματα",
+    "Style:": "Στυλ:",
+    "default": "προεπιλεγμένο",
+    "Apply": "Εφαρμογή",
+    "Connection": "Σύνδεση",
+    "Token:": "Διακριτικό:",
+    "Send Password": "Αποστολή Κωδικού Πρόσβασης"
 }

app/locale/es.json

@@ -4,13 +4,13 @@
     "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",
-    "Move/Drag Viewport": "Mover/Arrastrar la ventana",
+    "Move/Drag viewport": "Mover/Arrastrar la ventana",
     "viewport drag": "Arrastrar la ventana",
     "Active Mouse Button": "Botón activo del ratón",
     "No mousebutton": "Ningún botón del ratón",
@@ -18,7 +18,7 @@
     "Middle mousebutton": "Botón central del ratón",
     "Right mousebutton": "Botón derecho del ratón",
     "Keyboard": "Teclado",
-    "Show Keyboard": "Mostrar teclado",
+    "Show keyboard": "Mostrar teclado",
     "Extra keys": "Teclas adicionales",
     "Show Extra Keys": "Mostrar Teclas Adicionales",
     "Ctrl": "Ctrl",
@@ -41,28 +41,28 @@
     "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",
-    "Scaling Mode:": "Modo de escalado:",
+    "View only": "Solo visualización",
+    "Clip to window": "Recortar al tamaño de la ventana",
+    "Scaling mode:": "Modo de escalado:",
     "None": "Ninguno",
     "Local Scaling": "Escalado Local",
     "Local Downscaling": "Reducción de escala local",
-    "Remote Resizing": "Cambio de tamaño remoto",
+    "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",
-    "Automatic Reconnect": "Reconexión automática",
-    "Reconnect Delay (ms):": "Retraso en la reconexión (ms)",
-    "Logging:": "Logging",
+    "Host:": "Host:",
+    "Port:": "Puerto:",
+    "Path:": "Ruta:",
+    "Automatic reconnect": "Reconexión automática",
+    "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,82 @@
+{
+    "Running without HTTPS is not recommended, crashes or other issues are likely.": "Lancer sans HTTPS n'est pas recommandé, crashs ou autres problèmes en vue.",
+    "Connecting...": "En cours de connexion...",
+    "Disconnecting...": "Déconnexion en cours...",
+    "Reconnecting...": "Reconnexion en cours...",
+    "Internal error": "Erreur interne",
+    "Failed to connect to server: ": "Échec de connexion au serveur ",
+    "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 la fenêtre de visualisation",
+    "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": "Fenêtre",
+    "Send Tab": "Envoyer Tab",
+    "Tab": "Tabulation",
+    "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.": "Editer le contenu du presse-papier dans la zone ci-dessous.",
+    "Full screen": "Plein écran",
+    "Settings": "Paramètres",
+    "Shared mode": "Mode partagé",
+    "View only": "Afficher uniquement",
+    "Clip to window": "Ajuster à la 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 automatiquement",
+    "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": "Identité du serveur",
+    "The server has provided the following identifying information:": "Le serveur a fourni l'identification suivante :",
+    "Fingerprint:": "Empreinte digitale :",
+    "Please verify that the information is correct and press \"Approve\". Otherwise press \"Reject\".": "SVP, verifiez que l'information est correcte et pressez \"Accepter\". Sinon pressez \"Refuser\".",
+    "Approve": "Accepter",
+    "Reject": "Refuser",
+    "Credentials": "Envoyer les identifiants",
+    "Username:": "Nom d'utilisateur :",
+    "Password:": "Mot de passe :",
+    "Send credentials": "Envoyer les identifiants",
+    "Cancel": "Annuler",
+    "Must set host": "Doit définir l'hôte",
+    "Clear": "Effacer"
+}

app/locale/it.json

@@ -0,0 +1,68 @@
+{
+    "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",
+    "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",
+    "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",
+    "Version:": "Versione:",
+    "Disconnect": "Disconnetti",
+    "Connect": "Connetti",
+    "Username:": "Utente:",
+    "Password:": "Password:",
+    "Send Credentials": "Invia Credenziale",
+    "Cancel": "Annulla"
+}

app/locale/ja.json

@@ -1,35 +1,32 @@
 {
+    "Running without HTTPS is not recommended, crashes or other issues are likely.": "HTTPS接続なしで実行することは推奨されません。クラッシュしたりその他の問題が発生したりする可能性があります。",
     "Connecting...": "接続しています...",
     "Disconnecting...": "切断しています...",
     "Reconnecting...": "再接続しています...",
     "Internal error": "内部エラー",
     "Must set host": "ホストを設定する必要があります",
+    "Failed to connect to server: ": "サーバーへの接続に失敗しました: ",
     "Connected (encrypted) to ": "接続しました (暗号化済み): ",
     "Connected (unencrypted) to ": "接続しました (暗号化されていません): ",
-    "Something went wrong, connection is closed": "何かが問題で、接続が閉じられました",
+    "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": "パスワードが必要です",
+    "Credentials are required": "資格情報が必要です",
     "noVNC encountered an error:": "noVNC でエラーが発生しました:",
     "Hide/Show the control bar": "コントロールバーを隠す/表示する",
-    "Move/Drag Viewport": "ビューポートを移動/ドラッグ",
-    "viewport drag": "ビューポートをドラッグ",
-    "Active Mouse Button": "アクティブなマウスボタン",
-    "No mousebutton": "マウスボタンなし",
-    "Left mousebutton": "左マウスボタン",
-    "Middle mousebutton": "中マウスボタン",
-    "Right mousebutton": "右マウスボタン",
+    "Drag": "ドラッグ",
+    "Move/Drag viewport": "ビューポートを移動/ドラッグ",
     "Keyboard": "キーボード",
-    "Show Keyboard": "キーボードを表示",
+    "Show keyboard": "キーボードを表示",
     "Extra keys": "追加キー",
-    "Show Extra Keys": "追加キーを表示",
+    "Show extra keys": "追加キーを表示",
     "Ctrl": "Ctrl",
-    "Toggle Ctrl": "Ctrl キーを切り替え",
+    "Toggle Ctrl": "Ctrl キーをトグル",
     "Alt": "Alt",
-    "Toggle Alt": "Alt キーを切り替え",
-    "Toggle Windows": "Windows キーを切り替え",
+    "Toggle Alt": "Alt キーをトグル",
+    "Toggle Windows": "Windows キーをトグル",
     "Windows": "Windows",
     "Send Tab": "Tab キーを送信",
     "Tab": "Tab",
@@ -44,30 +41,41 @@
     "Reboot": "再起動",
     "Reset": "リセット",
     "Clipboard": "クリップボード",
-    "Clear": "クリア",
-    "Fullscreen": "全画面表示",
+    "Edit clipboard content in the textarea below.": "以下の入力欄からクリップボードの内容を編集できます。",
+    "Full screen": "全画面表示",
     "Settings": "設定",
-    "Shared Mode": "共有モード",
-    "View Only": "表示のみ",
-    "Clip to Window": "ウィンドウにクリップ",
-    "Scaling Mode:": "スケーリングモード:",
+    "Shared mode": "共有モード",
+    "View only": "表示専用",
+    "Clip to window": "ウィンドウにクリップ",
+    "Scaling mode:": "スケーリングモード:",
     "None": "なし",
-    "Local Scaling": "ローカルスケーリング",
-    "Remote Resizing": "リモートでリサイズ",
+    "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": "カーソルがないときにドットを表示",
+    "Automatic reconnect": "自動再接続",
+    "Reconnect delay (ms):": "再接続する遅延 (ミリ秒):",
+    "Show dot when no cursor": "カーソルがないときにドットを表示する",
     "Logging:": "ロギング:",
+    "Version:": "バージョン:",
     "Disconnect": "切断",
     "Connect": "接続",
+    "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": "拒否",
+    "Credentials": "資格情報",
+    "Username:": "ユーザー名:",
     "Password:": "パスワード:",
-    "Send Password": "パスワードを送信",
+    "Send credentials": "資格情報を送信",
     "Cancel": "キャンセル"
 }

app/locale/ko.json

@@ -14,7 +14,7 @@
     "Password is required": "비밀번호가 필요합니다.",
     "noVNC encountered an error:": "noVNC에 오류가 발생했습니다:",
     "Hide/Show the control bar": "컨트롤 바 숨기기/보이기",
-    "Move/Drag Viewport": "움직이기/드래그 뷰포트",
+    "Move/Drag viewport": "움직이기/드래그 뷰포트",
     "viewport drag": "뷰포트 드래그",
     "Active Mouse Button": "마우스 버튼 활성화",
     "No mousebutton": "마우스 버튼 없음",
@@ -22,9 +22,9 @@
     "Middle mousebutton": "중간 마우스 버튼",
     "Right mousebutton": "오른쪽 마우스 버튼",
     "Keyboard": "키보드",
-    "Show Keyboard": "키보드 보이기",
+    "Show keyboard": "키보드 보이기",
     "Extra keys": "기타 키들",
-    "Show Extra Keys": "기타 키들 보이기",
+    "Show extra keys": "기타 키들 보이기",
     "Ctrl": "Ctrl",
     "Toggle Ctrl": "Ctrl 켜기/끄기",
     "Alt": "Alt",
@@ -45,13 +45,13 @@
     "Clear": "지우기",
     "Fullscreen": "전체화면",
     "Settings": "설정",
-    "Shared Mode": "공유 모드",
-    "View Only": "보기 전용",
-    "Clip to Window": "창에 클립",
-    "Scaling Mode:": "스케일링 모드:",
+    "Shared mode": "공유 모드",
+    "View only": "보기 전용",
+    "Clip to window": "창에 클립",
+    "Scaling mode:": "스케일링 모드:",
     "None": "없음",
-    "Local Scaling": "로컬 스케일링",
-    "Remote Resizing": "원격 크기 조절",
+    "Local scaling": "로컬 스케일링",
+    "Remote resizing": "원격 크기 조절",
     "Advanced": "고급",
     "Repeater ID:": "중계 ID",
     "WebSocket": "웹소켓",
@@ -59,8 +59,8 @@
     "Host:": "호스트:",
     "Port:": "포트:",
     "Path:": "위치:",
-    "Automatic Reconnect": "자동 재연결",
-    "Reconnect Delay (ms):": "재연결 지연 시간 (ms)",
+    "Automatic reconnect": "자동 재연결",
+    "Reconnect delay (ms):": "재연결 지연 시간 (ms)",
     "Logging:": "로깅",
     "Disconnect": "연결 해제",
     "Connect": "연결",

app/locale/nl.json

@@ -1,36 +1,32 @@
 {
-    "Connecting...": "Verbinden...",
-    "Disconnecting...": "Verbinding verbreken...",
+    "Running without HTTPS is not recommended, crashes or other issues are likely.": "Het is niet aan te raden om zonder HTTPS te werken, crashes of andere problemen zijn dan waarschijnlijk.",
+    "Connecting...": "Aan het verbinden…",
+    "Disconnecting...": "Bezig om verbinding te verbreken...",
     "Reconnecting...": "Opnieuw verbinding maken...",
     "Internal error": "Interne fout",
-    "Must set host": "Host moeten worden ingesteld",
+    "Failed to connect to server: ": "Verbinding maken met server is mislukt",
     "Connected (encrypted) to ": "Verbonden (versleuteld) met ",
     "Connected (unencrypted) to ": "Verbonden (onversleuteld) met ",
     "Something went wrong, connection is closed": "Er iets fout gelopen, verbinding werd verbroken",
     "Failed to connect to server": "Verbinding maken met server is mislukt",
     "Disconnected": "Verbinding verbroken",
-    "New connection has been rejected with reason: ": "Nieuwe verbinding is geweigerd omwille van de volgende reden: ",
+    "New connection has been rejected with reason: ": "Nieuwe verbinding is geweigerd met de volgende reden: ",
     "New connection has been rejected": "Nieuwe verbinding is geweigerd",
-    "Password is required": "Wachtwoord is vereist",
+    "Credentials are required": "Inloggegevens zijn nodig",
     "noVNC encountered an error:": "noVNC heeft een fout bemerkt:",
     "Hide/Show the control bar": "Verberg/Toon de bedieningsbalk",
-    "Move/Drag Viewport": "Verplaats/Versleep Kijkvenster",
-    "viewport drag": "kijkvenster slepen",
-    "Active Mouse Button": "Actieve Muisknop",
-    "No mousebutton": "Geen muisknop",
-    "Left mousebutton": "Linker muisknop",
-    "Middle mousebutton": "Middelste muisknop",
-    "Right mousebutton": "Rechter muisknop",
+    "Drag": "Sleep",
+    "Move/Drag viewport": "Verplaats/Versleep Kijkvenster",
     "Keyboard": "Toetsenbord",
-    "Show Keyboard": "Toon Toetsenbord",
+    "Show keyboard": "Toon Toetsenbord",
     "Extra keys": "Extra toetsen",
-    "Show Extra Keys": "Toon Extra Toetsen",
+    "Show extra keys": "Toon Extra Toetsen",
     "Ctrl": "Ctrl",
     "Toggle Ctrl": "Ctrl omschakelen",
     "Alt": "Alt",
     "Toggle Alt": "Alt omschakelen",
-    "Toggle Windows": "Windows omschakelen",
-    "Windows": "Windows",
+    "Toggle Windows": "Vensters omschakelen",
+    "Windows": "Vensters",
     "Send Tab": "Tab Sturen",
     "Tab": "Tab",
     "Esc": "Esc",
@@ -44,30 +40,56 @@
     "Reboot": "Herstarten",
     "Reset": "Resetten",
     "Clipboard": "Klembord",
-    "Clear": "Wissen",
-    "Fullscreen": "Volledig Scherm",
+    "Edit clipboard content in the textarea below.": "Edit de inhoud van het klembord in het tekstveld hieronder",
+    "Full screen": "Volledig Scherm",
     "Settings": "Instellingen",
-    "Shared Mode": "Gedeelde Modus",
-    "View Only": "Alleen Kijken",
-    "Clip to Window": "Randen buiten venster afsnijden",
-    "Scaling Mode:": "Schaalmodus:",
+    "Shared mode": "Gedeelde Modus",
+    "View only": "Alleen Kijken",
+    "Clip to window": "Randen buiten venster afsnijden",
+    "Scaling mode:": "Schaalmodus:",
     "None": "Geen",
-    "Local Scaling": "Lokaal Schalen",
-    "Remote Resizing": "Op Afstand Formaat Wijzigen",
+    "Local scaling": "Lokaal Schalen",
+    "Remote resizing": "Op Afstand Formaat Wijzigen",
     "Advanced": "Geavanceerd",
+    "Quality:": "Kwaliteit:",
+    "Compression level:": "Compressieniveau:",
     "Repeater ID:": "Repeater ID:",
     "WebSocket": "WebSocket",
     "Encrypt": "Versleutelen",
     "Host:": "Host:",
     "Port:": "Poort:",
     "Path:": "Pad:",
-    "Automatic Reconnect": "Automatisch Opnieuw Verbinden",
-    "Reconnect Delay (ms):": "Vertraging voor Opnieuw Verbinden (ms):",
-    "Show Dot when No Cursor": "Geef stip weer indien geen cursor",
+    "Automatic reconnect": "Automatisch Opnieuw Verbinden",
+    "Reconnect delay (ms):": "Vertraging voor Opnieuw Verbinden (ms):",
+    "Show dot when no cursor": "Geef stip weer indien geen cursor",
     "Logging:": "Logmeldingen:",
+    "Version:": "Versie:",
     "Disconnect": "Verbinding verbreken",
     "Connect": "Verbinden",
+    "Server identity": "Serveridentiteit",
+    "The server has provided the following identifying information:": "De server geeft de volgende identificerende informatie:",
+    "Fingerprint:": "Vingerafdruk:",
+    "Please verify that the information is correct and press \"Approve\". Otherwise press \"Reject\".": "Verifieer dat de informatie is correct en druk “OK”. Druk anders op “Afwijzen”.",
+    "Approve": "OK",
+    "Reject": "Afwijzen",
+    "Credentials": "Inloggegevens",
+    "Username:": "Gebruikersnaam:",
     "Password:": "Wachtwoord:",
+    "Send credentials": "Stuur inloggegevens",
+    "Cancel": "Annuleren",
+    "Must set host": "Host moeten worden ingesteld",
+    "Password is required": "Wachtwoord is vereist",
+    "viewport drag": "kijkvenster slepen",
+    "Active Mouse Button": "Actieve Muisknop",
+    "No mousebutton": "Geen muisknop",
+    "Left mousebutton": "Linker muisknop",
+    "Middle mousebutton": "Middelste muisknop",
+    "Right mousebutton": "Rechter muisknop",
+    "Clear": "Wissen",
     "Send Password": "Verzend Wachtwoord:",
-    "Cancel": "Annuleren"
+    "Disconnect timeout": "Timeout tijdens verbreken van verbinding",
+    "Local Downscaling": "Lokaal Neerschalen",
+    "Local Cursor": "Lokale Cursor",
+    "Canvas not supported.": "Canvas wordt niet ondersteund.",
+    "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "''Clipping mode' ingeschakeld, omdat schuifbalken in volledige-scherm-modus in IE niet worden ondersteund"
 }

app/locale/pl.json

@@ -21,9 +21,9 @@
     "Middle mousebutton": "Środkowy przycisk myszy",
     "Right mousebutton": "Prawy przycisk myszy",
     "Keyboard": "Klawiatura",
-    "Show Keyboard": "Pokaż klawiaturę",
+    "Show keyboard": "Pokaż klawiaturę",
     "Extra keys": "Przyciski dodatkowe",
-    "Show Extra Keys": "Pokaż przyciski dodatkowe",
+    "Show extra keys": "Pokaż przyciski dodatkowe",
     "Ctrl": "Ctrl",
     "Toggle Ctrl": "Przełącz Ctrl",
     "Alt": "Alt",
@@ -49,8 +49,8 @@
     "Clip to Window": "Przytnij do Okna",
     "Scaling Mode:": "Tryb Skalowania:",
     "None": "Brak",
-    "Local Scaling": "Skalowanie lokalne",
-    "Remote Resizing": "Skalowanie zdalne",
+    "Local scaling": "Skalowanie lokalne",
+    "Remote resizing": "Skalowanie zdalne",
     "Advanced": "Zaawansowane",
     "Repeater ID:": "ID Repeatera:",
     "WebSocket": "WebSocket",
@@ -58,12 +58,23 @@
     "Host:": "Host:",
     "Port:": "Port:",
     "Path:": "Ścieżka:",
-    "Automatic Reconnect": "Automatycznie wznawiaj połączenie",
-    "Reconnect Delay (ms):": "Opóźnienie wznawiania (ms):",
+    "Automatic reconnect": "Automatycznie wznawiaj połączenie",
+    "Reconnect delay (ms):": "Opóźnienie wznawiania (ms):",
     "Logging:": "Poziom logowania:",
     "Disconnect": "Rozłącz",
     "Connect": "Połącz",
     "Password:": "Hasło:",
     "Cancel": "Anuluj",
-    "Canvas not supported.": "Element Canvas nie jest wspierany."
+    "Canvas not supported.": "Element Canvas nie jest wspierany.",
+    "Disconnect timeout": "Timeout rozłączenia",
+    "Local Downscaling": "Downscaling lokalny",
+    "Local Cursor": "Lokalny kursor",
+    "Forcing clipping mode since scrollbars aren't supported by IE in fullscreen": "Wymuszam clipping mode ponieważ paski przewijania nie są wspierane przez IE w trybie pełnoekranowym",
+    "True Color": "True Color",
+    "Style:": "Styl:",
+    "default": "domyślny",
+    "Apply": "Zapisz",
+    "Connection": "Połączenie",
+    "Token:": "Token:",
+    "Send Password": "Wyślij Hasło"
 }

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": "Mostrar 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,27 +9,22 @@
     "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": "Скрыть/Показать контрольную панель",
-    "Move/Drag Viewport": "Переместить окно",
-    "viewport drag": "Переместить окно",
-    "Active Mouse Button": "Активировать кнопки мыши",
-    "No mousebutton": "Отключить кнопки мыши",
-    "Left mousebutton": "Левая кнопка мыши",
-    "Middle mousebutton": "Средняя  кнопка мыши",
-    "Right mousebutton": "Правая кнопка мыши",
+    "Drag": "Переместить",
+    "Move/Drag viewport": "Переместить окно",
     "Keyboard": "Клавиатура",
-    "Show Keyboard": "Показать клавиатуру",
-    "Extra keys": "Доп. кнопки",
-    "Show Extra Keys": "Показать дополнительные кнопки",
+    "Show keyboard": "Показать клавиатуру",
+    "Extra keys": "Дополнительные Кнопки",
+    "Show Extra Keys": "Показать Дополнительные Кнопки",
     "Ctrl": "Ctrl",
-    "Toggle Ctrl": "Передать нажатие Ctrl",
+    "Toggle Ctrl": "Зажать Ctrl",
     "Alt": "Alt",
-    "Toggle Alt": "Передать нажатие Alt",
-    "Toggle Windows": "Переключение вкладок",
+    "Toggle Alt": "Зажать Alt",
+    "Toggle Windows": "Зажать Windows",
     "Windows": "Вкладка",
     "Send Tab": "Передать нажатие Tab",
     "Tab": "Tab",
@@ -47,27 +42,31 @@
     "Clear": "Очистить",
     "Fullscreen": "Во весь экран",
     "Settings": "Настройки",
-    "Shared Mode": "Общий режим",
-    "View Only": "Просмотр",
-    "Clip to Window": "В окно",
-    "Scaling Mode:": "Масштаб:",
+    "Shared mode": "Общий режим",
+    "View Only": "Только Просмотр",
+    "Clip to window": "В окно",
+    "Scaling mode:": "Масштаб:",
     "None": "Нет",
-    "Local Scaling": "Локльный масштаб",
-    "Remote Resizing": "Удаленный масштаб",
+    "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": "Показать точку вместо курсора",
+    "Automatic reconnect": "Автоматическое переподключение",
+    "Reconnect delay (ms):": "Задержка переподключения (мс):",
+    "Show dot when no cursor": "Показать точку вместо курсора",
     "Logging:": "Лог:",
+    "Version:": "Версия",
     "Disconnect": "Отключение",
     "Connect": "Подключение",
+    "Username:": "Имя Пользователя",
     "Password:": "Пароль:",
-    "Send Password": "Пароль: ",
+    "Send Credentials": "Передача Учетных Данных",
     "Cancel": "Выход"
 }

app/locale/sv.json

@@ -1,9 +1,10 @@
 {
+    "Running without HTTPS is not recommended, crashes or other issues are likely.": "Det är ej rekommenderat att köra utan HTTPS, krascher och andra problem är troliga.",
     "Connecting...": "Ansluter...",
     "Disconnecting...": "Kopplar ner...",
     "Reconnecting...": "Återansluter...",
     "Internal error": "Internt fel",
-    "Must set host": "Du måste specifiera en värd",
+    "Failed to connect to server: ": "Misslyckades att ansluta till servern: ",
     "Connected (encrypted) to ": "Ansluten (krypterat) till ",
     "Connected (unencrypted) to ": "Ansluten (okrypterat) till ",
     "Something went wrong, connection is closed": "Något gick fel, anslutningen avslutades",
@@ -15,11 +16,11 @@
     "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",
+    "Move/Drag viewport": "Flytta/Dra vyn",
     "Keyboard": "Tangentbord",
-    "Show Keyboard": "Visa Tangentbord",
+    "Show keyboard": "Visa tangentbord",
     "Extra keys": "Extraknappar",
-    "Show Extra Keys": "Visa Extraknappar",
+    "Show extra keys": "Visa extraknappar",
     "Ctrl": "Ctrl",
     "Toggle Ctrl": "Växla Ctrl",
     "Alt": "Alt",
@@ -39,16 +40,16 @@
     "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",
-    "Clip to Window": "Begränsa till Fönster",
-    "Scaling Mode:": "Skalningsläge:",
+    "Shared mode": "Delat läge",
+    "View only": "Endast visning",
+    "Clip to window": "Begränsa till fönster",
+    "Scaling mode:": "Skalningsläge:",
     "None": "Ingen",
-    "Local Scaling": "Lokal Skalning",
-    "Remote Resizing": "Ändra Storlek",
+    "Local scaling": "Lokal skalning",
+    "Remote resizing": "Ändra storlek",
     "Advanced": "Avancerat",
     "Quality:": "Kvalitet:",
     "Compression level:": "Kompressionsnivå:",
@@ -58,15 +59,25 @@
     "Host:": "Värd:",
     "Port:": "Port:",
     "Path:": "Sökväg:",
-    "Automatic Reconnect": "Automatisk Återanslutning",
-    "Reconnect Delay (ms):": "Fördröjning (ms):",
-    "Show Dot when No Cursor": "Visa prick när ingen muspekare finns",
+    "Automatic reconnect": "Automatisk återanslutning",
+    "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 Credentials": "Skicka Användaruppgifter",
-    "Cancel": "Avbryt"
+    "Send credentials": "Skicka användaruppgifter",
+    "Cancel": "Avbryt",
+    "Must set host": "Du måste specifiera en värd",
+    "HTTPS is required for full functionality": "HTTPS krävs för full funktionalitet",
+    "Clear": "Rensa"
 }

app/locale/tr.json

@@ -23,7 +23,7 @@
     "Keyboard": "Klavye",
     "Show Keyboard": "Klavye Düzenini Göster",
     "Extra keys": "Ekstra tuşlar",
-    "Show Extra Keys": "Ekstra tuşları göster",
+    "Show extra keys": "Ekstra tuşları göster",
     "Ctrl": "Ctrl",
     "Toggle Ctrl": "Ctrl Değiştir ",
     "Alt": "Alt",

app/locale/zh_CN.json

@@ -1,69 +1,93 @@
 {
+    "Running without HTTPS is not recommended, crashes or other issues are likely.": "不建议在没有 HTTPS 的情况下运行，可能会出现崩溃或出现其他问题。",
     "Connecting...": "连接中...",
     "Disconnecting...": "正在断开连接...",
     "Reconnecting...": "重新连接中...",
     "Internal error": "内部错误",
-    "Must set host": "请提供主机名",
-    "Connected (encrypted) to ": "已连接到（加密）",
-    "Connected (unencrypted) to ": "已连接到（未加密）",
-    "Something went wrong, connection is closed": "发生错误，连接已关闭",
+    "Must set host": "必须设置主机",
+    "Failed to connect to server: ": "无法连接到服务器：",
+    "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": "请提供密码",
+    "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": "显示/隐藏控制栏",
-    "Move/Drag Viewport": "拖放显示范围",
-    "viewport drag": "显示范围拖放",
-    "Active Mouse Button": "启动鼠标按鍵",
-    "No mousebutton": "禁用鼠标按鍵",
-    "Left mousebutton": "鼠标左鍵",
-    "Middle mousebutton": "鼠标中鍵",
-    "Right mousebutton": "鼠标右鍵",
+    "Drag": "拖动",
+    "Move/Drag viewport": "移动/拖动窗口",
     "Keyboard": "键盘",
-    "Show Keyboard": "显示键盘",
+    "Show keyboard": "显示键盘",
     "Extra keys": "额外按键",
-    "Show Extra Keys": "显示额外按键",
+    "Show extra keys": "显示额外按键",
     "Ctrl": "Ctrl",
     "Toggle Ctrl": "切换 Ctrl",
     "Alt": "Alt",
     "Toggle Alt": "切换 Alt",
+    "Toggle 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...": "关机/重新启动...",
+    "Ctrl+Alt+Del": "Ctrl+Alt+Del",
+    "Send Ctrl-Alt-Del": "发送 Ctrl+Alt+Del 键",
+    "Shutdown/Reboot": "关机/重启",
+    "Shutdown/Reboot...": "关机/重启...",
     "Power": "电源",
     "Shutdown": "关机",
-    "Reboot": "重新启动",
+    "Reboot": "重启",
     "Reset": "重置",
     "Clipboard": "剪贴板",
-    "Clear": "清除",
-    "Fullscreen": "全屏",
+    "Edit clipboard content in the textarea below.": "在下面的文本区域中编辑剪贴板内容。",
+    "Full screen": "全屏",
     "Settings": "设置",
-    "Shared Mode": "分享模式",
-    "View Only": "仅查看",
-    "Clip to Window": "限制/裁切窗口大小",
-    "Scaling Mode:": "缩放模式：",
+    "Shared mode": "分享模式",
+    "View only": "仅查看",
+    "Clip to window": "限制/裁切窗口大小",
+    "Scaling mode:": "缩放模式：",
     "None": "无",
-    "Local Scaling": "本地缩放",
-    "Remote Resizing": "远程调整大小",
+    "Local scaling": "本地缩放",
+    "Remote resizing": "远程调整大小",
     "Advanced": "高级",
+    "Quality:": "品质：",
+    "Compression level:": "压缩级别：",
     "Repeater ID:": "中继站 ID",
     "WebSocket": "WebSocket",
     "Encrypt": "加密",
     "Host:": "主机：",
     "Port:": "端口：",
     "Path:": "路径：",
-    "Automatic Reconnect": "自动重新连接",
-    "Reconnect Delay (ms):": "重新连接间隔 (ms)：",
+    "Automatic reconnect": "自动重新连接",
+    "Reconnect delay (ms):": "重新连接间隔 (ms)：",
+    "Show dot when no cursor": "无光标时显示点",
     "Logging:": "日志级别：",
-    "Disconnect": "中断连接",
+    "Version:": "版本：",
+    "Disconnect": "断开连接",
     "Connect": "连接",
+    "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": "拒绝",
+    "Credentials": "凭证",
+    "Username:": "用户名:",
     "Password:": "密码：",
-    "Cancel": "取消"
+    "Send credentials": "发送凭证",
+    "Cancel": "取消",
+    "Password is required": "请提供密码",
+    "Disconnect timeout": "超时断开",
+    "viewport drag": "窗口拖动",
+    "Active Mouse Button": "启动鼠标按键",
+    "No mousebutton": "禁用鼠标按键",
+    "Left mousebutton": "鼠标左键",
+    "Middle mousebutton": "鼠标中键",
+    "Right mousebutton": "鼠标右键",
+    "Clear": "清除",
+    "Local Downscaling": "降低本地尺寸",
+    "Local Cursor": "本地光标",
+    "Canvas not supported.": "不支持 Canvas。"
 }

app/locale/zh_TW.json

@@ -14,7 +14,7 @@
     "Password is required": "請提供密碼",
     "noVNC encountered an error:": "noVNC 遇到一個錯誤：",
     "Hide/Show the control bar": "顯示/隱藏控制列",
-    "Move/Drag Viewport": "拖放顯示範圍",
+    "Move/Drag viewport": "拖放顯示範圍",
     "viewport drag": "顯示範圍拖放",
     "Active Mouse Button": "啟用滑鼠按鍵",
     "No mousebutton": "無滑鼠按鍵",
@@ -22,9 +22,9 @@
     "Middle mousebutton": "滑鼠中鍵",
     "Right mousebutton": "滑鼠右鍵",
     "Keyboard": "鍵盤",
-    "Show Keyboard": "顯示鍵盤",
+    "Show keyboard": "顯示鍵盤",
     "Extra keys": "額外按鍵",
-    "Show Extra Keys": "顯示額外按鍵",
+    "Show extra keys": "顯示額外按鍵",
     "Ctrl": "Ctrl",
     "Toggle Ctrl": "切換 Ctrl",
     "Alt": "Alt",
@@ -45,13 +45,13 @@
     "Clear": "清除",
     "Fullscreen": "全螢幕",
     "Settings": "設定",
-    "Shared Mode": "分享模式",
-    "View Only": "僅檢視",
-    "Clip to Window": "限制/裁切視窗大小",
-    "Scaling Mode:": "縮放模式：",
+    "Shared mode": "分享模式",
+    "View only": "僅檢視",
+    "Clip to window": "限制/裁切視窗大小",
+    "Scaling mode:": "縮放模式：",
     "None": "無",
-    "Local Scaling": "本機縮放",
-    "Remote Resizing": "遠端調整大小",
+    "Local scaling": "本機縮放",
+    "Remote resizing": "遠端調整大小",
     "Advanced": "進階",
     "Repeater ID:": "中繼站 ID",
     "WebSocket": "WebSocket",
@@ -59,8 +59,8 @@
     "Host:": "主機：",
     "Port:": "連接埠：",
     "Path:": "路徑：",
-    "Automatic Reconnect": "自動重新連線",
-    "Reconnect Delay (ms):": "重新連線間隔 (ms)：",
+    "Automatic reconnect": "自動重新連線",
+    "Reconnect delay (ms):": "重新連線間隔 (ms)：",
     "Logging:": "日誌級別：",
     "Disconnect": "中斷連線",
     "Connect": "連線",

app/localization.js

@@ -1,13 +1,13 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2018 The noVNC authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
  */
 
 /*
- * Localization Utilities
+ * Localization utilities
  */
 
 export class Localizer {
@@ -16,13 +16,19 @@ export class Localizer {
         this.language = 'en';
 
         // Current dictionary of translations
-        this.dictionary = undefined;
+        this._dictionary = undefined;
     }
 
     // Configure suitable language based on user preferences
-    setup(supportedLanguages) {
+    async setup(supportedLanguages, baseURL) {
         this.language = 'en'; // Default: US English
+        this._dictionary = undefined;
 
+        this._setupLanguage(supportedLanguages);
+        await this._setupDictionary(baseURL);
+    }
+
+    _setupLanguage(supportedLanguages) {
         /*
          * Navigator.languages only available in Chrome (32+) and FireFox (32+)
          * Fall back to navigator.language for other browsers
@@ -40,12 +46,6 @@ export class Localizer {
                 .replace("_", "-")
                 .split("-");
 
-            // Built-in default?
-            if ((userLang[0] === 'en') &&
-                ((userLang[1] === undefined) || (userLang[1] === 'us'))) {
-                return;
-            }
-
             // First pass: perfect match
             for (let j = 0; j < supportedLanguages.length; j++) {
                 const supLang = supportedLanguages[j]
@@ -64,7 +64,12 @@ export class Localizer {
                 return;
             }
 
-            // Second pass: fallback
+            // Second pass: English fallback
+            if (userLang[0] === 'en') {
+                return;
+            }
+
+            // Third pass pass: other fallback
             for (let j = 0;j < supportedLanguages.length;j++) {
                 const supLang = supportedLanguages[j]
                     .toLowerCase()
@@ -84,10 +89,32 @@ export class Localizer {
         }
     }
 
+    async _setupDictionary(baseURL) {
+        if (baseURL) {
+            if (!baseURL.endsWith("/")) {
+                baseURL = baseURL + "/";
+            }
+        } else {
+            baseURL = "";
+        }
+
+        if (this.language === "en") {
+            return;
+        }
+
+        let response = await fetch(baseURL + this.language + ".json");
+        if (!response.ok) {
+            throw Error("" + response.status + " " + response.statusText);
+        }
+
+        this._dictionary = await response.json();
+    }
+
     // Retrieve localised text
     get(id) {
-        if (typeof this.dictionary !== 'undefined' && this.dictionary[id]) {
-            return this.dictionary[id];
+        if (typeof this._dictionary !== 'undefined' &&
+            this._dictionary[id]) {
+            return this._dictionary[id];
         } else {
             return id;
         }
@@ -103,13 +130,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/constants.css

@@ -0,0 +1,30 @@
+/*
+ * noVNC general CSS constant variables
+ * Copyright (C) 2025 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).
+ */
+
+/* ---------- COLORS ----------- */
+
+:root {
+    --novnc-grey: rgb(128, 128, 128);
+    --novnc-lightgrey: rgb(192, 192, 192);
+    --novnc-darkgrey: rgb(92, 92, 92);
+
+    /* Transparent to make button colors adapt to the background */
+    --novnc-buttongrey: rgba(192, 192, 192, 0.5);
+
+    --novnc-blue: rgb(110, 132, 163);
+    --novnc-lightblue: rgb(74, 144, 217);
+    --novnc-darkblue: rgb(83, 99, 122);
+
+    --novnc-green: rgb(0, 128, 0);
+    --novnc-yellow: rgb(255, 255, 0);
+}
+
+/* ------ MISC PROPERTIES ------ */
+
+:root {
+    --input-xpadding: 1em;
+}

app/styles/input.css

@@ -0,0 +1,628 @@
+/*
+ * noVNC general input element CSS
+ * Copyright (C) 2025 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).
+ */
+
+/* ------- SHARED BETWEEN INPUT ELEMENTS -------- */
+
+input,
+textarea,
+button,
+select,
+input::file-selector-button {
+    padding: 0.5em var(--input-xpadding);
+    border-radius: 6px;
+    appearance: none;
+    text-overflow: ellipsis;
+
+    /* Respect standard font settings */
+    font: inherit;
+    line-height: 1.6;
+}
+input:disabled,
+textarea:disabled,
+button:disabled,
+select:disabled,
+label[disabled] {
+    opacity: 0.4;
+}
+
+input:focus-visible,
+textarea:focus-visible,
+button:focus-visible,
+select:focus-visible,
+input:focus-visible::file-selector-button {
+    outline: 2px solid var(--novnc-lightblue);
+    outline-offset: 1px;
+}
+
+/* ------- TEXT INPUT -------- */
+
+input:not([type]),
+input[type=date],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=text],
+input[type=time],
+input[type=url],
+input[type=week],
+textarea {
+    border: 1px solid var(--novnc-lightgrey);
+    /* Account for borders on text inputs, buttons dont have borders */
+    padding: calc(0.5em - 1px) var(--input-xpadding);
+}
+input:not([type]):focus-visible,
+input[type=date]:focus-visible,
+input[type=datetime-local]:focus-visible,
+input[type=email]:focus-visible,
+input[type=month]:focus-visible,
+input[type=number]:focus-visible,
+input[type=password]:focus-visible,
+input[type=search]:focus-visible,
+input[type=tel]:focus-visible,
+input[type=text]:focus-visible,
+input[type=time]:focus-visible,
+input[type=url]:focus-visible,
+input[type=week]:focus-visible,
+textarea:focus-visible {
+    outline-offset: -1px;
+}
+
+textarea {
+    margin: unset; /* Remove Firefox's built in margin */
+    /* Prevent layout from shifting when scrollbars show */
+    scrollbar-gutter: stable;
+    /* Make textareas show at minimum one line. This does not work when
+       using box-sizing border-box, in which case, vertical padding and
+       border width needs to be taken into account. */
+    min-height: 1lh;
+    vertical-align: baseline; /* Firefox gives "text-bottom" by default */
+}
+
+/* ------- NUMBER PICKERS ------- */
+
+/* We can't style the number spinner buttons:
+   https://github.com/w3c/csswg-drafts/issues/8777 */
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    /* Get rid of increase/decrease buttons in WebKit */
+    appearance: none;
+}
+input[type=number] {
+    /* Get rid of increase/decrease buttons in Firefox */
+    appearance: textfield;
+}
+
+/* ------- BUTTON ACTIVATIONS -------- */
+
+/* A color overlay that depends on the activation level. The level can then be
+   set for different states on an element, for example hover and click on a
+   <button>. */
+input, button, select, option,
+input::file-selector-button,
+.button-activations {
+    --button-activation-level: 0;
+    /* Note that CSS variables aren't functions, beware when inheriting */
+    --button-activation-alpha: calc(0.08 * var(--button-activation-level));
+    /* FIXME: We want the image() function instead of the linear-gradient()
+              function below. But it's not supported in the browsers yet. */
+    --button-activation-overlay:
+        linear-gradient(rgba(0, 0, 0, var(--button-activation-alpha))
+        100%, transparent);
+    --button-activation-overlay-light:
+        linear-gradient(rgba(255, 255, 255, calc(0.23 * var(--button-activation-level)))
+        100%, transparent);
+}
+.button-activations {
+    background-image: var(--button-activation-overlay);
+
+    /* Disable Chrome's touch tap highlight to avoid conflicts with overlay */
+    -webkit-tap-highlight-color: transparent;
+}
+/* When we want the light overlay on activations instead.
+   This is best used on elements with darker backgrounds. */
+.button-activations.light-overlay {
+    background-image: var(--button-activation-overlay-light);
+    /* Can't use the normal blend mode since that gives washed out colors. */
+    /* FIXME: For elements with these activation overlays we'd like only
+              the luminosity to change. The proprty "background-blend-mode" set
+              to "luminosity" sounds good, but it doesn't work as intended,
+              see: https://bugzilla.mozilla.org/show_bug.cgi?id=1806417 */
+    background-blend-mode: overlay;
+}
+
+input:hover, button:hover, select:hover, option:hover,
+input::file-selector-button:hover,
+.button-activations:hover {
+    --button-activation-level: 1;
+}
+/* Unfortunately we have to disable the :hover effect on touch devices,
+   otherwise the style lingers after tapping the button. */
+@media (any-pointer: coarse) {
+    input:hover, button:hover, select:hover, option:hover,
+    input::file-selector-button:hover,
+    .button-activations:hover {
+        --button-activation-level: 0;
+    }
+}
+input:active, button:active, select:active, option:active,
+input::file-selector-button:active,
+.button-activations:active {
+    --button-activation-level: 2;
+}
+input:disabled, button:disabled, select:disabled, select:disabled option,
+input:disabled::file-selector-button,
+.button-activations:disabled {
+    --button-activation-level: 0;
+}
+
+/* ------- BUTTONS -------- */
+
+input[type=button],
+input[type=color],
+input[type=image],
+input[type=reset],
+input[type=submit],
+input::file-selector-button,
+button,
+select {
+    min-width: 8em;
+    border: none;
+    color: black;
+    font-weight: bold;
+    background-color: var(--novnc-buttongrey);
+    background-image: var(--button-activation-overlay);
+    cursor: pointer;
+    /* Disable Chrome's touch tap highlight */
+    -webkit-tap-highlight-color: transparent;
+}
+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 {
+    /* See Firefox bug:
+       https://bugzilla.mozilla.org/show_bug.cgi?id=1798304 */
+    cursor: default;
+}
+
+input[type=button],
+input[type=color],
+input[type=reset],
+input[type=submit] {
+    /* Workaround for text-overflow bugs in Firefox and Chromium:
+        https://bugzilla.mozilla.org/show_bug.cgi?id=1800077
+        https://bugs.chromium.org/p/chromium/issues/detail?id=1383144 */
+    overflow: clip;
+}
+
+/* ------- COLOR PICKERS ------- */
+
+input[type=color] {
+    min-width: unset;
+    box-sizing: content-box;
+    width: 1.4em;
+    height: 1.4em;
+}
+input[type=color]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+/* -webkit-color-swatch & -moz-color-swatch cant be in a selector list:
+   https://bugs.chromium.org/p/chromium/issues/detail?id=1154623 */
+input[type=color]::-webkit-color-swatch {
+    border: none;
+    border-radius: 6px;
+}
+input[type=color]::-moz-color-swatch {
+    border: none;
+    border-radius: 6px;
+}
+
+/* -- SHARED BETWEEN CHECKBOXES, RADIOBUTTONS AND THE TOGGLE CLASS -- */
+
+input[type=radio],
+input[type=checkbox] {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--novnc-buttongrey);
+    background-image: var(--button-activation-overlay);
+    /* Disable Chrome's touch tap highlight to avoid conflicts with overlay */
+    -webkit-tap-highlight-color: transparent;
+    width: 16px;
+    --checkradio-height: 16px;
+    height: var(--checkradio-height);
+    padding: 0;
+    margin: 0 6px 0 0;
+    /* Don't have transitions for outline in order to be consistent
+       with other elements */
+    transition: all 0.2s, outline-color 0s, outline-offset 0s;
+
+    /* A transparent outline in order to work around a graphical clipping issue
+       in WebKit. See bug: https://bugs.webkit.org/show_bug.cgi?id=256003 */
+    outline: 1px solid transparent;
+    position: relative; /* Since ::before & ::after are absolute positioned */
+
+    /* We want to align with the middle of capital letters, this requires
+       a workaround. The default behavior is to align the bottom of the element
+       on top of the text baseline, this is too far up.
+       We want to push the element down half the difference in height between
+       it and a capital X. In our font, the height of a capital "X" is 0.698em.
+     */
+    vertical-align: calc(0px - (var(--checkradio-height) - 0.698em) / 2);
+    /* FIXME: Could write 1cap instead of 0.698em, but it's only supported in
+              Firefox as of 2023 */
+    /* FIXME: We probably want to use round() here, see bug 8148 */
+}
+input[type=radio]:focus-visible,
+input[type=checkbox]:focus-visible {
+    outline-color: var(--novnc-lightblue);
+}
+input[type=checkbox]::before,
+input[type=checkbox]:not(.toggle)::after,
+input[type=radio]::before,
+input[type=radio]::after {
+    content: "";
+    display: block; /* width & height doesn't work on inline elements */
+    transition: inherit;
+    /* Let's prevent the pseudo-elements from taking up layout space so that
+       the ::before and ::after pseudo-elements can be in the same place. This
+       is also required for vertical-align: baseline to work like we want it to
+       on radio/checkboxes. If the pseudo-elements take up layout space, the
+       baseline of text inside them will be used instead. */
+    position: absolute;
+}
+input[type=checkbox]:not(.toggle)::after,
+input[type=radio]::after {
+    width: 10px;
+    height: 2px;
+    background-color: transparent;
+    border-radius: 2px;
+}
+
+/* ------- CHECKBOXES ------- */
+
+input[type=checkbox]:not(.toggle) {
+    border-radius: 4px;
+}
+input[type=checkbox]:not(.toggle):checked,
+input[type=checkbox]:not(.toggle):indeterminate {
+    background-color: var(--novnc-blue);
+    background-image: var(--button-activation-overlay-light);
+    background-blend-mode: overlay;
+}
+input[type=checkbox]:not(.toggle)::before {
+    width: 25%;
+    height: 55%;
+    border-style: solid;
+    border-color: transparent;
+    border-width: 0 2px 2px 0;
+    border-radius: 1px;
+    transform: translateY(-1px) rotate(35deg);
+}
+input[type=checkbox]:not(.toggle):checked::before {
+    border-color: white;
+}
+input[type=checkbox]:not(.toggle):indeterminate::after {
+    background-color: white;
+}
+
+/* ------- RADIO BUTTONS ------- */
+
+input[type=radio] {
+    border-radius: 50%;
+    border: 1px solid transparent; /* To ensure a smooth transition */
+}
+input[type=radio]:checked {
+    border: 4px solid var(--novnc-blue);
+    background-color: white;
+    /* button-activation-overlay should be removed from the radio
+       element to not interfere with button-activation-overlay-light
+       that is set on the ::before element. */
+    background-image: none;
+}
+input[type=radio]::before {
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    /* We can achieve the highlight overlay effect on border colors by
+       setting button-activation-overlay-light on an element that stays
+       on top (z-axis) of the element with a border. */
+    background-image: var(--button-activation-overlay-light);
+    mix-blend-mode: overlay;
+    opacity: 0;
+}
+input[type=radio]:checked::before {
+    opacity: 1;
+}
+input[type=radio]:indeterminate::after {
+    background-color: black;
+}
+
+/* ------- TOGGLE SWITCHES ------- */
+
+/* These are meant to be used instead of checkboxes in some cases. If all of
+   the following critera are true you should use a toggle switch:
+
+    * The choice is a simple ON/OFF or ENABLE/DISABLE
+    * The choice doesn't give the feeling of "I agree" or "I confirm"
+    * There are not multiple related & grouped options
+ */
+
+input[type=checkbox].toggle {
+    display: inline-block;
+    --checkradio-height: 18px; /* Height value used in calc, see above */
+    width: 31px;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    border-radius: 9px;
+}
+input[type=checkbox].toggle:disabled {
+    cursor: default;
+}
+input[type=checkbox].toggle:indeterminate {
+    background-color: var(--novnc-buttongrey);
+    background-image: var(--button-activation-overlay);
+}
+input[type=checkbox].toggle:checked {
+    background-color: var(--novnc-blue);
+    background-image: var(--button-activation-overlay-light);
+    background-blend-mode: overlay;
+}
+input[type=checkbox].toggle::before {
+    --circle-diameter: 10px;
+    --circle-offset: 4px;
+    width: var(--circle-diameter);
+    height: var(--circle-diameter);
+    top: var(--circle-offset);
+    left: var(--circle-offset);
+    background: white;
+    border-radius: 6px;
+}
+input[type=checkbox].toggle:checked::before {
+    left: calc(100% - var(--circle-offset) - var(--circle-diameter));
+}
+input[type=checkbox].toggle:indeterminate::before {
+    left: calc(50% - var(--circle-diameter) / 2);
+}
+
+/* ------- RANGE SLIDERS ------- */
+
+input[type=range] {
+    border: unset;
+    border-radius: 8px;
+    height: 15px;
+    padding: 0;
+    background: transparent;
+    /* Needed to get properly rounded corners on -moz-range-progress
+       when the thumb is all the way to the right. Without overflow
+       hidden, the pointy edges of the progress track shows to the
+       right of the thumb. */
+    overflow: hidden;
+}
+@supports selector(::-webkit-slider-thumb) {
+    input[type=range] {
+        /* Needs a fixed width to match clip-path */
+        width: 125px;
+        /* overflow: hidden is not ideal for hiding the left part of the box
+           shadow of -webkit-slider-thumb since it doesn't match the smaller
+           border-radius of the progress track. The below clip-path has two
+           circular sides to make the ends of the track have correctly rounded
+           corners. The clip path shape looks something like this:
+
+                  +-------------------------------+
+              /---|                               |---\
+             |                                         |
+              \---|                               |---/
+                  +-------------------------------+
+
+           The larger middle part of the clip path is made to have room for the
+           thumb. By using margins on the track, we prevent the thumb from
+           touching the ends of the track.
+         */
+        clip-path: path(' \
+         M 4.5 3 \
+         L 4.5 0 \
+         L 120.5 0 \
+         L 120.5 3 \
+         A 1 1 0 0 1 120.5 12 \
+         L 120.5 15 \
+         L 4.5 15 \
+         L 4.5 12 \
+         A 1 1 0 0 1 4.5 3 \
+        ');
+    }
+}
+input[type=range]:hover {
+    cursor: grab;
+}
+input[type=range]:active {
+    cursor: grabbing;
+}
+input[type=range]:disabled {
+    cursor: default;
+}
+input[type=range]:focus-visible {
+    clip-path: none; /* Otherwise it hides the outline */
+}
+/* -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: var(--novnc-buttongrey);
+    height: 7px;
+    border-radius: 4px;
+    margin: 0 3px;
+}
+input[type=range]::-moz-range-track {
+    background-color: var(--novnc-buttongrey);
+    height: 7px;
+    border-radius: 4px;
+}
+input[type=range]::-moz-range-progress {
+    background-color: var(--novnc-blue);
+    height: 9px;
+    /* Needs rounded corners only on the left side. Otherwise the rounding of
+       the progress track starts before the thumb, when the thumb is close to
+       the left edge. */
+    border-radius: 5px 0 0 5px;
+}
+input[type=range]::-webkit-slider-thumb {
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background-color: white;
+    background-image: var(--button-activation-overlay);
+    /* Disable Chrome's touch tap highlight to avoid conflicts with overlay */
+    -webkit-tap-highlight-color: transparent;
+    border: 3px solid var(--novnc-blue);
+    margin-top: -4px; /* (track height / 2) - (thumb height /2) */
+
+    /* Since there is no way to style the left part of the range track in
+       webkit, we add a large shadow (1000px wide) to the left of the thumb and
+       then crop it with a clip-path shaped like this:
+                              ___
+        +-------------------/     \
+        |      progress     |Thumb|
+        +-------------------\ ___ /
+
+        The large left part of the shadow is clipped by another clip-path on on
+        the main range input element. */
+    /* FIXME: We can remove the box shadow workaround when this is standardized:
+              https://github.com/w3c/csswg-drafts/issues/4410 */
+
+    box-shadow: calc(-100vw - 8px) 0 0 100vw var(--novnc-blue);
+    clip-path: path(' \
+     M -1000 3 \
+     L 3 3 \
+     L 15 7.5 \
+     A 1 1 0 0 1 0 7.5 \
+     A 1 1 0 0 1 15 7.5 \
+     L 3 12 \
+     L -1000 12 Z \
+    ');
+}
+input[type=range]::-moz-range-thumb {
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    background-color: white;
+    background-image: var(--button-activation-overlay);
+    border: 3px solid var(--novnc-blue);
+    margin-top: -7px;
+}
+
+/* ------- FILE CHOOSERS ------- */
+
+input[type=file] {
+    background-image: none;
+    border: none;
+}
+input::file-selector-button {
+    margin-right: 6px;
+}
+input[type=file]:focus-visible {
+    outline: none; /* We outline the button instead of the entire element */
+}
+
+/* ------- SELECT BUTTONS ------- */
+
+select {
+    --select-arrow: url('data:image/svg+xml;utf8, \
+        <svg width="11" height="6" version="1.1" viewBox="0 0 11 6" \
+             xmlns="http://www.w3.org/2000/svg"> \
+            <path d="m10.5.5-5 5-5-5" fill="none" \
+                  stroke="black" stroke-width="1.5" \
+                  stroke-linecap="round" stroke-linejoin="round"/> \
+        </svg>');
+
+    /* FIXME: A bug in Firefox, requires a workaround for the background:
+              https://bugzilla.mozilla.org/show_bug.cgi?id=1810958 */
+    /* The dropdown list will show the select element's background above and
+       below the options in Firefox. We want the entire dropdown to be white. */
+    background-color: white;
+    /* However, we don't want the select element to actually show a white
+       background, so let's place a gradient above it with the color we want. */
+    --grey-background: linear-gradient(var(--novnc-buttongrey) 100%,
+                                       transparent);
+    background-image:
+        var(--select-arrow),
+        var(--button-activation-overlay),
+        var(--grey-background);
+    background-position: calc(100% - var(--input-xpadding)), left top, left top;
+    background-repeat: no-repeat;
+    padding-right: calc(2*var(--input-xpadding) + 11px);
+    overflow: auto;
+}
+/* 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="11" height="6" version="1.1" viewBox="0 0 11 6" \
+             xmlns="http://www.w3.org/2000/svg" transform="rotate(180)"> \
+            <path d="m10.5.5-5 5-5-5" fill="none" \
+                  stroke="black" stroke-width="1.5" \
+                  stroke-linecap="round" stroke-linejoin="round"/> \
+        </svg>'),
+        var(--button-activation-overlay),
+        var(--grey-background);
+}
+select:disabled {
+    background-image:
+        var(--select-arrow),
+        var(--grey-background);
+}
+/* Note that styling for <option> doesn't work in all browsers
+   since its often drawn directly by the OS. We are generally very
+   limited in what we can change here. */
+option {
+    /* Prevent Chrome from inheriting background-color from the <select> */
+    background-color: white;
+    color: black;
+    font-weight: normal;
+    background-image: var(--button-activation-overlay);
+}
+option:checked {
+    background-color: var(--novnc-lightgrey);
+}
+/* Change the look when the <select> isn't used as a dropdown. When "size"
+   or "multiple" are set, these elements behaves more like lists. */
+select[size]:not([size="1"]), select[multiple] {
+    background-color: white;
+    background-image: unset; /* Don't show the arrow and other gradients */
+    border: 1px solid var(--novnc-lightgrey);
+    padding: 0;
+    font-weight: normal; /* Without this, options get bold font in WebKit. */
+
+    /* As an exception to the "list"-look, multi-selects in Chrome on Android,
+       and Safari on iOS, are unfortunately designed to be shown as a single
+       line. We can mitigate this inconsistency by at least fixing the height
+       here. By setting a min-height that matches other input elements, it
+       doesn't look too much out of place:
+         (1px border * 2) + (6.5px padding * 2) + 24px line-height = 39px */
+    min-height: 39px;
+}
+select[size]:not([size="1"]):focus-visible,
+select[multiple]:focus-visible {
+    /* Text input style focus-visible highlight */
+    outline-offset: -1px;
+}
+select[size]:not([size="1"]) option, select[multiple] option {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 4px var(--input-xpadding);
+}

app/ui.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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, hasScrollbarGutter, 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";
@@ -19,8 +20,12 @@ import * as WebUtil from "./webutil.js";
 
 const PAGE_TITLE = "noVNC";
 
+const LINGUAS = ["cs", "de", "el", "es", "fr", "hr", "it", "ja", "ko", "nl", "pl", "pt_BR", "ru", "sv", "tr", "zh_CN", "zh_TW"];
+
 const UI = {
 
+    customSettings: {},
+
     connected: false,
     desktopName: "",
 
@@ -41,40 +46,62 @@ const UI = {
     reconnectCallback: null,
     reconnectPassword: null,
 
-    prime() {
-        return WebUtil.initSettings().then(() => {
-            if (document.readyState === "interactive" || document.readyState === "complete") {
-                return UI.start();
-            }
+    async start(options={}) {
+        UI.customSettings = options.settings || {};
+        if (UI.customSettings.defaults === undefined) {
+            UI.customSettings.defaults = {};
+        }
+        if (UI.customSettings.mandatory === undefined) {
+            UI.customSettings.mandatory = {};
+        }
 
-            return new Promise((resolve, reject) => {
-                document.addEventListener('DOMContentLoaded', () => UI.start().then(resolve).catch(reject));
+        // Set up translations
+        try {
+            await l10n.setup(LINGUAS, "app/locale/");
+        } catch (err) {
+            Log.Error("Failed to load translations: " + err);
+        }
+
+        // Initialize setting storage
+        await WebUtil.initSettings();
+
+        // Wait for the page to load
+        if (document.readyState !== "interactive" && document.readyState !== "complete") {
+            await new Promise((resolve, reject) => {
+                document.addEventListener('DOMContentLoaded', resolve);
             });
-        });
-    },
-
-    // Render default UI and initialize settings menu
-    start() {
+        }
 
         UI.initSettings();
 
         // Translate the DOM
         l10n.translateDOM();
 
-        WebUtil.fetchJSON('./package.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');
-            });
+        // 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(_("Running without HTTPS is not recommended, crashes or other issues are likely."), 'error');
+        }
+
+        // Try to fetch version number
+        try {
+            let response = await fetch('./package.json');
+            if (!response.ok) {
+                throw Error("" + response.status + " " + response.statusText);
+            }
+
+            let packageInfo = await response.json();
+            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);
         }
@@ -106,7 +133,7 @@ const UI = {
 
         document.documentElement.classList.remove("noVNC_loading");
 
-        let autoconnect = WebUtil.getConfigVar('autoconnect', false);
+        let autoconnect = UI.getSetting('autoconnect');
         if (autoconnect === 'true' || autoconnect == '1') {
             autoconnect = true;
             UI.connect();
@@ -115,8 +142,6 @@ const UI = {
             // Show the connect panel on first load unless autoconnecting
             UI.openConnectPanel();
         }
-
-        return Promise.resolve(UI.rfb);
     },
 
     initFullscreen() {
@@ -144,34 +169,26 @@ const UI = {
         UI.initSetting('logging', 'warn');
         UI.updateLogging();
 
-        // if port == 80 (or 443) then it won't be present and should be
-        // set manually
-        let port = window.location.port;
-        if (!port) {
-            if (window.location.protocol.substring(0, 5) == 'https') {
-                port = 443;
-            } else if (window.location.protocol.substring(0, 4) == 'http') {
-                port = 80;
-            }
-        }
+        UI.setupSettingLabels();
 
         /* Populate the controls if defaults are provided in the URL */
-        UI.initSetting('host', window.location.hostname);
-        UI.initSetting('port', port);
+        UI.initSetting('host', '');
+        UI.initSetting('port', 0);
         UI.initSetting('encrypt', (window.location.protocol === "https:"));
+        UI.initSetting('password');
+        UI.initSetting('autoconnect', false);
         UI.initSetting('view_clip', false);
         UI.initSetting('resize', 'off');
         UI.initSetting('quality', 6);
         UI.initSetting('compression', 2);
         UI.initSetting('shared', true);
+        UI.initSetting('bell', 'on');
         UI.initSetting('view_only', false);
         UI.initSetting('show_dot', false);
         UI.initSetting('path', 'websockify');
         UI.initSetting('repeaterID', '');
         UI.initSetting('reconnect', false);
         UI.initSetting('reconnect_delay', 5000);
-
-        UI.setupSettingLabels();
     },
     // Adds a link to the label elements on the corresponding input elements
     setupSettingLabels() {
@@ -310,6 +327,10 @@ const UI = {
         document.getElementById("noVNC_cancel_reconnect_button")
             .addEventListener('click', UI.cancelReconnect);
 
+        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);
     },
@@ -319,8 +340,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,
@@ -439,6 +458,8 @@ const UI = {
         // 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');
     },
@@ -571,10 +592,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 {
@@ -719,6 +750,10 @@ const UI = {
 
     // Initial page load read/initialization of settings
     initSetting(name, defVal) {
+        // Has the user overridden the default value?
+        if (name in UI.customSettings.defaults) {
+            defVal = UI.customSettings.defaults[name];
+        }
         // Check Query string followed by cookie
         let val = WebUtil.getConfigVar(name);
         if (val === null) {
@@ -726,6 +761,11 @@ const UI = {
         }
         WebUtil.setSetting(name, val);
         UI.updateSetting(name);
+        // Has the user forced a value?
+        if (name in UI.customSettings.mandatory) {
+            val = UI.customSettings.mandatory[name];
+            UI.forceSetting(name, val);
+        }
         return val;
     },
 
@@ -744,9 +784,12 @@ const UI = {
         let value = UI.getSetting(name);
 
         const ctrl = document.getElementById('noVNC_setting_' + name);
+        if (ctrl === null) {
+            return;
+        }
+
         if (ctrl.type === 'checkbox') {
             ctrl.checked = value;
-
         } else if (typeof ctrl.options !== 'undefined') {
             for (let i = 0; i < ctrl.options.length; i += 1) {
                 if (ctrl.options[i].value === value) {
@@ -755,11 +798,6 @@ const UI = {
                 }
             }
         } else {
-            /*Weird IE9 error leads to 'null' appearring
-            in textboxes instead of ''.*/
-            if (value === null) {
-                value = "";
-            }
             ctrl.value = value;
         }
     },
@@ -784,7 +822,8 @@ const UI = {
     getSetting(name) {
         const ctrl = document.getElementById('noVNC_setting_' + name);
         let val = WebUtil.readSetting(name);
-        if (typeof val !== 'undefined' && val !== null && ctrl.type === 'checkbox') {
+        if (typeof val !== 'undefined' && val !== null &&
+            ctrl !== null && ctrl.type === 'checkbox') {
             if (val.toString().toLowerCase() in {'0': 1, 'no': 1, 'false': 1}) {
                 val = false;
             } else {
@@ -799,14 +838,22 @@ const UI = {
     // disable the labels that belong to disabled input elements.
     disableSetting(name) {
         const ctrl = document.getElementById('noVNC_setting_' + name);
-        ctrl.disabled = true;
-        ctrl.label.classList.add('noVNC_disabled');
+        if (ctrl !== null) {
+            ctrl.disabled = true;
+            if (ctrl.label !== undefined) {
+                ctrl.label.classList.add('noVNC_disabled');
+            }
+        }
     },
 
     enableSetting(name) {
         const ctrl = document.getElementById('noVNC_setting_' + name);
-        ctrl.disabled = false;
-        ctrl.label.classList.remove('noVNC_disabled');
+        if (ctrl !== null) {
+            ctrl.disabled = false;
+            if (ctrl.label !== undefined) {
+                ctrl.label.classList.remove('noVNC_disabled');
+            }
+        }
     },
 
 /* ------^-------
@@ -953,11 +1000,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) + "...");
@@ -993,7 +1035,7 @@ const UI = {
         const path = UI.getSetting('path');
 
         if (typeof password === 'undefined') {
-            password = WebUtil.getConfigVar('password');
+            password = UI.getSetting('password');
             UI.reconnectPassword = password;
         }
 
@@ -1003,34 +1045,52 @@ const UI = {
 
         UI.hideStatus();
 
-        if (!host) {
-            Log.Error("Can't connect when host is: " + host);
-            UI.showStatus(_("Must set host"), 'error');
-            return;
-        }
-
         UI.closeConnectPanel();
 
         UI.updateVisualState('connecting');
 
         let url;
 
-        url = UI.getSetting('encrypt') ? 'wss' : 'ws';
+        if (host) {
+            url = new URL("https://" + host);
 
-        url += '://' + host;
-        if (port) {
-            url += ':' + port;
+            url.protocol = UI.getSetting('encrypt') ? 'wss:' : 'ws:';
+            if (port) {
+                url.port = port;
+            }
+
+            // "./" is needed to force URL() to interpret the path-variable as
+            // a path and not as an URL. This is relevant if for example path
+            // starts with more than one "/", in which case it would be
+            // interpreted as a host name instead.
+            url = new URL("./" + path, url);
+        } else {
+            // Current (May 2024) browsers support relative WebSocket
+            // URLs natively, but we need to support older browsers for
+            // some time.
+            url = new URL(path, location.href);
+            url.protocol = (window.location.protocol === "https:") ? 'wss:' : 'ws:';
+        }
+
+        try {
+            UI.rfb = new RFB(document.getElementById('noVNC_container'),
+                             url.href,
+                             { shared: UI.getSetting('shared'),
+                               repeaterID: UI.getSetting('repeaterID'),
+                               credentials: { password: password } });
+        } catch (exc) {
+            Log.Error("Failed to connect to server: " + exc);
+            UI.updateVisualState('disconnected');
+            UI.showStatus(_("Failed to connect to server: ") + exc, 'error');
+            return;
         }
-        url += '/' + path;
 
-        UI.rfb = new RFB(document.getElementById('noVNC_container'), url,
-                         { shared: UI.getSetting('shared'),
-                           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);
@@ -1117,7 +1177,9 @@ const UI = {
             } else {
                 UI.showStatus(_("Failed to connect to server"), 'error');
             }
-        } else if (UI.getSetting('reconnect', false) === true && !UI.inhibitReconnect) {
+        }
+        // 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'));
@@ -1151,6 +1213,37 @@ 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------*/
 
@@ -1274,13 +1367,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 (!hasScrollbarGutter) {
-            // Some platforms have scrollbars that are difficult
-            // to use in our case, so we always use our own panning
+        } else if (brokenScrollbars) {
             UI.forceSetting('view_clip', true);
             UI.rfb.clipViewport = true;
         } else {
@@ -1311,7 +1416,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;
@@ -1328,6 +1434,8 @@ const UI = {
         } else {
             viewDragButton.classList.add("noVNC_hidden");
         }
+
+        viewDragButton.disabled = !UI.rfb.clippingViewport;
     },
 
 /* ------^-------
@@ -1662,7 +1770,7 @@ const UI = {
     },
 
     bell(e) {
-        if (WebUtil.getConfigVar('bell', 'on') === 'on') {
+        if (UI.getSetting('bell') === 'on') {
             const promise = document.getElementById('noVNC_bell').play();
             // The standards disagree on the return value here
             if (promise) {
@@ -1693,16 +1801,4 @@ const UI = {
  */
 };
 
-// Set up translations
-const LINGUAS = ["cs", "de", "el", "es", "ja", "ko", "nl", "pl", "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')
-        .then((translations) => { l10n.dictionary = translations; })
-        .catch(err => Log.Error("Failed to load translations: " + err))
-        .then(UI.prime);
-}
-
 export default UI;

app/webutil.js

@@ -1,29 +1,38 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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 { initLogging as mainInitLogging } from '../core/util/logging.js';
+import * as Log from '../core/util/logging.js';
 
 // init log level reading the logging HTTP param
 export function initLogging(level) {
     "use strict";
     if (typeof level !== "undefined") {
-        mainInitLogging(level);
+        Log.initLogging(level);
     } else {
         const param = document.location.href.match(/logging=([A-Za-z0-9._-]*)/);
-        mainInitLogging(param || undefined);
+        Log.initLogging(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=secretvalue
+//
+// Even mixing public and non public parameters will work:
+// https://www.example.com?nonsecretparam=example.com#password=secretvalue
 export function getQueryVar(name, defVal) {
     "use strict";
     const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
-        match = document.location.href.match(re);
+          match = document.location.href.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) {
@@ -137,7 +146,7 @@ export function writeSetting(name, value) {
     if (window.chrome && window.chrome.storage) {
         window.chrome.storage.sync.set(settings);
     } else {
-        localStorage.setItem(name, value);
+        localStorageSet(name, value);
     }
 }
 
@@ -147,7 +156,7 @@ export function readSetting(name, defaultValue) {
     if ((name in settings) || (window.chrome && window.chrome.storage)) {
         value = settings[name];
     } else {
-        value = localStorage.getItem(name);
+        value = localStorageGet(name);
         settings[name] = value;
     }
     if (typeof value === "undefined") {
@@ -172,68 +181,70 @@ export function eraseSetting(name) {
     if (window.chrome && window.chrome.storage) {
         window.chrome.storage.sync.remove(name);
     } else {
+        localStorageRemove(name);
+    }
+}
+
+let loggedMsgs = [];
+function logOnce(msg, level = "warn") {
+    if (!loggedMsgs.includes(msg)) {
+        switch (level) {
+            case "error":
+                Log.Error(msg);
+                break;
+            case "warn":
+                Log.Warn(msg);
+                break;
+            case "debug":
+                Log.Debug(msg);
+                break;
+            default:
+                Log.Info(msg);
+        }
+        loggedMsgs.push(msg);
+    }
+}
+
+let cookiesMsg = "Couldn't access noVNC settings, are cookies disabled?";
+
+function localStorageGet(name) {
+    let r;
+    try {
+        r = localStorage.getItem(name);
+    } catch (e) {
+        if (e instanceof DOMException) {
+            logOnce(cookiesMsg);
+            logOnce("'localStorage.getItem(" + name + ")' failed: " + e,
+                    "debug");
+        } else {
+            throw e;
+        }
+    }
+    return r;
+}
+function localStorageSet(name, value) {
+    try {
+        localStorage.setItem(name, value);
+    } catch (e) {
+        if (e instanceof DOMException) {
+            logOnce(cookiesMsg);
+            logOnce("'localStorage.setItem(" + name + "," + value +
+                    ")' failed: " + e, "debug");
+        } else {
+            throw e;
+        }
+    }
+}
+function localStorageRemove(name) {
+    try {
         localStorage.removeItem(name);
+    } catch (e) {
+        if (e instanceof DOMException) {
+            logOnce(cookiesMsg);
+            logOnce("'localStorage.removeItem(" + name + ")' failed: " + e,
+                    "debug");
+        } else {
+            throw e;
+        }
     }
 }
-
-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 paramEq = encodeURIComponent(param) + "=";
-    let query;
-    if (elem.search) {
-        query = elem.search.slice(1).split('&');
-    } else {
-        query = [];
-    }
-
-    if (!query.some(v => v.startsWith(paramEq))) {
-        query.push(paramEq + 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/crypto/aes.js

@@ -0,0 +1,178 @@
+export class AESECBCipher {
+    constructor() {
+        this._key = null;
+    }
+
+    get algorithm() {
+        return { name: "AES-ECB" };
+    }
+
+    static async importKey(key, _algorithm, extractable, keyUsages) {
+        const cipher = new AESECBCipher;
+        await cipher._importKey(key, extractable, keyUsages);
+        return cipher;
+    }
+
+    async _importKey(key, extractable, keyUsages) {
+        this._key = await window.crypto.subtle.importKey(
+            "raw", key, {name: "AES-CBC"}, extractable, keyUsages);
+    }
+
+    async encrypt(_algorithm, plaintext) {
+        const x = new Uint8Array(plaintext);
+        if (x.length % 16 !== 0 || this._key === null) {
+            return null;
+        }
+        const n = x.length / 16;
+        for (let i = 0; i < n; i++) {
+            const y = new Uint8Array(await window.crypto.subtle.encrypt({
+                name: "AES-CBC",
+                iv: new Uint8Array(16),
+            }, this._key, x.slice(i * 16, i * 16 + 16))).slice(0, 16);
+            x.set(y, i * 16);
+        }
+        return x;
+    }
+}
+
+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]);
+    }
+
+    get algorithm() {
+        return { name: "AES-EAX" };
+    }
+
+    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;
+    }
+
+    static async importKey(key, _algorithm, _extractable, _keyUsages) {
+        const cipher = new AESEAXCipher;
+        await cipher._importKey(key);
+        return cipher;
+    }
+
+    async _importKey(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"]);
+        await this._initCMAC();
+    }
+
+    async encrypt(algorithm, message) {
+        const ad = algorithm.additionalData;
+        const nonce = algorithm.iv;
+        const nCMAC = await this._computeCMAC(nonce, this._prefixBlock0);
+        const encrypted = await this._encryptCTR(message, nCMAC);
+        const adCMAC = await this._computeCMAC(ad, 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(algorithm, data) {
+        const encrypted = data.slice(0, data.length - 16);
+        const ad = algorithm.additionalData;
+        const nonce = algorithm.iv;
+        const mac = data.slice(data.length - 16);
+        const nCMAC = await this._computeCMAC(nonce, this._prefixBlock0);
+        const adCMAC = await this._computeCMAC(ad, 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;
+    }
+}

core/crypto/bigint.js

@@ -0,0 +1,34 @@
+export function modPow(b, e, m) {
+    let r = 1n;
+    b = b % m;
+    while (e > 0n) {
+        if ((e & 1n) === 1n) {
+            r = (r * b) % m;
+        }
+        e = e >> 1n;
+        b = (b * b) % m;
+    }
+    return r;
+}
+
+export function bigIntToU8Array(bigint, padLength=0) {
+    let hex = bigint.toString(16);
+    if (padLength === 0) {
+        padLength = Math.ceil(hex.length / 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;
+}
+
+export function u8ArrayToBigInt(arr) {
+    let hex = '0x';
+    for (let i = 0; i < arr.length; i++) {
+        hex += arr[i].toString(16).padStart(2, '0');
+    }
+    return BigInt(hex);
+}

core/crypto/crypto.js

@@ -0,0 +1,90 @@
+import { AESECBCipher, AESEAXCipher } from "./aes.js";
+import { DESCBCCipher, DESECBCipher } from "./des.js";
+import { RSACipher } from "./rsa.js";
+import { DHCipher } from "./dh.js";
+import { MD5 } from "./md5.js";
+
+// A single interface for the cryptographic algorithms not supported by SubtleCrypto.
+// Both synchronous and asynchronous implmentations are allowed.
+class LegacyCrypto {
+    constructor() {
+        this._algorithms = {
+            "AES-ECB": AESECBCipher,
+            "AES-EAX": AESEAXCipher,
+            "DES-ECB": DESECBCipher,
+            "DES-CBC": DESCBCCipher,
+            "RSA-PKCS1-v1_5": RSACipher,
+            "DH": DHCipher,
+            "MD5": MD5,
+        };
+    }
+
+    encrypt(algorithm, key, data) {
+        if (key.algorithm.name !== algorithm.name) {
+            throw new Error("algorithm does not match");
+        }
+        if (typeof key.encrypt !== "function") {
+            throw new Error("key does not support encryption");
+        }
+        return key.encrypt(algorithm, data);
+    }
+
+    decrypt(algorithm, key, data) {
+        if (key.algorithm.name !== algorithm.name) {
+            throw new Error("algorithm does not match");
+        }
+        if (typeof key.decrypt !== "function") {
+            throw new Error("key does not support encryption");
+        }
+        return key.decrypt(algorithm, data);
+    }
+
+    importKey(format, keyData, algorithm, extractable, keyUsages) {
+        if (format !== "raw") {
+            throw new Error("key format is not supported");
+        }
+        const alg = this._algorithms[algorithm.name];
+        if (typeof alg === "undefined" || typeof alg.importKey !== "function") {
+            throw new Error("algorithm is not supported");
+        }
+        return alg.importKey(keyData, algorithm, extractable, keyUsages);
+    }
+
+    generateKey(algorithm, extractable, keyUsages) {
+        const alg = this._algorithms[algorithm.name];
+        if (typeof alg === "undefined" || typeof alg.generateKey !== "function") {
+            throw new Error("algorithm is not supported");
+        }
+        return alg.generateKey(algorithm, extractable, keyUsages);
+    }
+
+    exportKey(format, key) {
+        if (format !== "raw") {
+            throw new Error("key format is not supported");
+        }
+        if (typeof key.exportKey !== "function") {
+            throw new Error("key does not support exportKey");
+        }
+        return key.exportKey();
+    }
+
+    digest(algorithm, data) {
+        const alg = this._algorithms[algorithm];
+        if (typeof alg !== "function") {
+            throw new Error("algorithm is not supported");
+        }
+        return alg(data);
+    }
+
+    deriveBits(algorithm, key, length) {
+        if (key.algorithm.name !== algorithm.name) {
+            throw new Error("algorithm does not match");
+        }
+        if (typeof key.deriveBits !== "function") {
+            throw new Error("key does not support deriveBits");
+        }
+        return key.deriveBits(algorithm, length);
+    }
+}
+
+export default new LegacyCrypto;

core/crypto/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;
@@ -128,7 +128,7 @@ const SP8 = [b|f,z|e,a|z,c|f,b|z,b|f,z|d,b|z,a|d,c|z,c|f,a|e,c|e,a|f,z|e,z|d,
 
 /* eslint-enable comma-spacing */
 
-export default class DES {
+class DES {
     constructor(password) {
         this.keys = [];
 
@@ -258,9 +258,73 @@ export default class DES {
         }
         return b;
     }
+}
 
-    // Encrypt 16 bytes of text using passwd as key
-    encrypt(t) {
-        return this.enc8(t.slice(0, 8)).concat(this.enc8(t.slice(8, 16)));
+export class DESECBCipher {
+    constructor() {
+        this._cipher = null;
+    }
+
+    get algorithm() {
+        return { name: "DES-ECB" };
+    }
+
+    static importKey(key, _algorithm, _extractable, _keyUsages) {
+        const cipher = new DESECBCipher;
+        cipher._importKey(key);
+        return cipher;
+    }
+
+    _importKey(key, _extractable, _keyUsages) {
+        this._cipher = new DES(key);
+    }
+
+    encrypt(_algorithm, plaintext) {
+        const x = new Uint8Array(plaintext);
+        if (x.length % 8 !== 0 || this._cipher === null) {
+            return null;
+        }
+        const n = x.length / 8;
+        for (let i = 0; i < n; i++) {
+            x.set(this._cipher.enc8(x.slice(i * 8, i * 8 + 8)), i * 8);
+        }
+        return x;
+    }
+}
+
+export class DESCBCCipher {
+    constructor() {
+        this._cipher = null;
+    }
+
+    get algorithm() {
+        return { name: "DES-CBC" };
+    }
+
+    static importKey(key, _algorithm, _extractable, _keyUsages) {
+        const cipher = new DESCBCCipher;
+        cipher._importKey(key);
+        return cipher;
+    }
+
+    _importKey(key) {
+        this._cipher = new DES(key);
+    }
+
+    encrypt(algorithm, plaintext) {
+        const x = new Uint8Array(plaintext);
+        let y = new Uint8Array(algorithm.iv);
+        if (x.length % 8 !== 0 || this._cipher === null) {
+            return null;
+        }
+        const n = x.length / 8;
+        for (let i = 0; i < n; i++) {
+            for (let j = 0; j < 8; j++) {
+                y[j] ^= plaintext[i * 8 + j];
+            }
+            y = this._cipher.enc8(y);
+            x.set(y, i * 8);
+        }
+        return x;
     }
 }

core/crypto/dh.js

@@ -0,0 +1,55 @@
+import { modPow, bigIntToU8Array, u8ArrayToBigInt } from "./bigint.js";
+
+class DHPublicKey {
+    constructor(key) {
+        this._key = key;
+    }
+
+    get algorithm() {
+        return { name: "DH" };
+    }
+
+    exportKey() {
+        return this._key;
+    }
+}
+
+export class DHCipher {
+    constructor() {
+        this._g = null;
+        this._p = null;
+        this._gBigInt = null;
+        this._pBigInt = null;
+        this._privateKey = null;
+    }
+
+    get algorithm() {
+        return { name: "DH" };
+    }
+
+    static generateKey(algorithm, _extractable) {
+        const cipher = new DHCipher;
+        cipher._generateKey(algorithm);
+        return { privateKey: cipher, publicKey: new DHPublicKey(cipher._publicKey) };
+    }
+
+    _generateKey(algorithm) {
+        const g = algorithm.g;
+        const p = algorithm.p;
+        this._keyBytes = p.length;
+        this._gBigInt = u8ArrayToBigInt(g);
+        this._pBigInt = u8ArrayToBigInt(p);
+        this._privateKey = window.crypto.getRandomValues(new Uint8Array(this._keyBytes));
+        this._privateKeyBigInt = u8ArrayToBigInt(this._privateKey);
+        this._publicKey = bigIntToU8Array(modPow(
+            this._gBigInt, this._privateKeyBigInt, this._pBigInt), this._keyBytes);
+    }
+
+    deriveBits(algorithm, length) {
+        const bytes = Math.ceil(length / 8);
+        const pkey = new Uint8Array(algorithm.public);
+        const len = bytes > this._keyBytes ? bytes : this._keyBytes;
+        const secret = modPow(u8ArrayToBigInt(pkey), this._privateKeyBigInt, this._pBigInt);
+        return bigIntToU8Array(secret, len).slice(0, len);
+    }
+}

core/crypto/md5.js

@@ -0,0 +1,82 @@
+/*
+ * 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 an array of bytes, returns an array of bytes
+ */
+
+export async function MD5(d) {
+    let s = "";
+    for (let i = 0; i < d.length; i++) {
+        s += String.fromCharCode(d[i]);
+    }
+    return M(V(Y(X(s), 8 * s.length)));
+}
+
+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/crypto/rsa.js

@@ -0,0 +1,132 @@
+import Base64 from "../base64.js";
+import { modPow, bigIntToU8Array, u8ArrayToBigInt } from "./bigint.js";
+
+export class RSACipher {
+    constructor() {
+        this._keyLength = 0;
+        this._keyBytes = 0;
+        this._n = null;
+        this._e = null;
+        this._d = null;
+        this._nBigInt = null;
+        this._eBigInt = null;
+        this._dBigInt = null;
+        this._extractable = false;
+    }
+
+    get algorithm() {
+        return { name: "RSA-PKCS1-v1_5" };
+    }
+
+    _base64urlDecode(data) {
+        data = data.replace(/-/g, "+").replace(/_/g, "/");
+        data = data.padEnd(Math.ceil(data.length / 4) * 4, "=");
+        return Base64.decode(data);
+    }
+
+    _padArray(arr, length) {
+        const res = new Uint8Array(length);
+        res.set(arr, length - arr.length);
+        return res;
+    }
+
+    static async generateKey(algorithm, extractable, _keyUsages) {
+        const cipher = new RSACipher;
+        await cipher._generateKey(algorithm, extractable);
+        return { privateKey: cipher };
+    }
+
+    async _generateKey(algorithm, extractable) {
+        this._keyLength = algorithm.modulusLength;
+        this._keyBytes = Math.ceil(this._keyLength / 8);
+        const key = await window.crypto.subtle.generateKey(
+            {
+                name: "RSA-OAEP",
+                modulusLength: algorithm.modulusLength,
+                publicExponent: algorithm.publicExponent,
+                hash: {name: "SHA-256"},
+            },
+            true, ["encrypt", "decrypt"]);
+        const privateKey = await window.crypto.subtle.exportKey("jwk", key.privateKey);
+        this._n = this._padArray(this._base64urlDecode(privateKey.n), this._keyBytes);
+        this._nBigInt = u8ArrayToBigInt(this._n);
+        this._e = this._padArray(this._base64urlDecode(privateKey.e), this._keyBytes);
+        this._eBigInt = u8ArrayToBigInt(this._e);
+        this._d = this._padArray(this._base64urlDecode(privateKey.d), this._keyBytes);
+        this._dBigInt = u8ArrayToBigInt(this._d);
+        this._extractable = extractable;
+    }
+
+    static async importKey(key, _algorithm, extractable, keyUsages) {
+        if (keyUsages.length !== 1 || keyUsages[0] !== "encrypt") {
+            throw new Error("only support importing RSA public key");
+        }
+        const cipher = new RSACipher;
+        await cipher._importKey(key, extractable);
+        return cipher;
+    }
+
+    async _importKey(key, extractable) {
+        const n = key.n;
+        const e = key.e;
+        if (n.length !== e.length) {
+            throw new Error("the sizes of modulus and public exponent do not match");
+        }
+        this._keyBytes = n.length;
+        this._keyLength = this._keyBytes * 8;
+        this._n = new Uint8Array(this._keyBytes);
+        this._e = new Uint8Array(this._keyBytes);
+        this._n.set(n);
+        this._e.set(e);
+        this._nBigInt = u8ArrayToBigInt(this._n);
+        this._eBigInt = u8ArrayToBigInt(this._e);
+        this._extractable = extractable;
+    }
+
+    async encrypt(_algorithm, 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 = u8ArrayToBigInt(em);
+        const c = modPow(emBigInt, this._eBigInt, this._nBigInt);
+        return bigIntToU8Array(c, this._keyBytes);
+    }
+
+    async decrypt(_algorithm, message) {
+        if (message.length !== this._keyBytes) {
+            return null;
+        }
+        const msgBigInt = u8ArrayToBigInt(message);
+        const emBigInt = modPow(msgBigInt, this._dBigInt, this._nBigInt);
+        const em = 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);
+    }
+
+    async exportKey() {
+        if (!this._extractable) {
+            throw new Error("key is not extractable");
+        }
+        return { n: this._n, e: this._e, d: this._d };
+    }
+}

core/decoders/copyrect.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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.
@@ -15,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/h264.js

@@ -0,0 +1,321 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2024 The noVNC authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ *
+ */
+
+import * as Log from '../util/logging.js';
+
+export class H264Parser {
+    constructor(data) {
+        this._data = data;
+        this._index = 0;
+        this.profileIdc = null;
+        this.constraintSet = null;
+        this.levelIdc = null;
+    }
+
+    _getStartSequenceLen(index) {
+        let data = this._data;
+        if (data[index + 0] == 0 && data[index + 1] == 0 && data[index + 2] == 0 && data[index + 3] == 1) {
+            return 4;
+        }
+        if (data[index + 0] == 0 && data[index + 1] == 0 && data[index + 2] == 1) {
+            return 3;
+        }
+        return 0;
+    }
+
+    _indexOfNextNalUnit(index) {
+        let data = this._data;
+        for (let i = index; i < data.length; ++i) {
+            if (this._getStartSequenceLen(i) != 0) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    _parseSps(index) {
+        this.profileIdc = this._data[index];
+        this.constraintSet = this._data[index + 1];
+        this.levelIdc = this._data[index + 2];
+    }
+
+    _parseNalUnit(index) {
+        const firstByte = this._data[index];
+        if (firstByte & 0x80) {
+            throw new Error('H264 parsing sanity check failed, forbidden zero bit is set');
+        }
+        const unitType = firstByte & 0x1f;
+
+        switch (unitType) {
+            case 1: // coded slice, non-idr
+                return { slice: true };
+            case 5: // coded slice, idr
+                return { slice: true, key: true };
+            case 6: // sei
+                return {};
+            case 7: // sps
+                this._parseSps(index + 1);
+                return {};
+            case 8: // pps
+                return {};
+            default:
+                Log.Warn("Unhandled unit type: ", unitType);
+                break;
+        }
+        return {};
+    }
+
+    parse() {
+        const startIndex = this._index;
+        let isKey = false;
+
+        while (this._index < this._data.length) {
+            const startSequenceLen = this._getStartSequenceLen(this._index);
+            if (startSequenceLen == 0) {
+                throw new Error('Invalid start sequence in bit stream');
+            }
+
+            const { slice, key } = this._parseNalUnit(this._index + startSequenceLen);
+
+            let nextIndex = this._indexOfNextNalUnit(this._index + startSequenceLen);
+            if (nextIndex == -1) {
+                this._index = this._data.length;
+            } else {
+                this._index = nextIndex;
+            }
+
+            if (key) {
+                isKey = true;
+            }
+            if (slice) {
+                break;
+            }
+        }
+
+        if (startIndex === this._index) {
+            return null;
+        }
+
+        return {
+            frame: this._data.subarray(startIndex, this._index),
+            key: isKey,
+        };
+    }
+}
+
+export class H264Context {
+    constructor(width, height) {
+        this.lastUsed = 0;
+        this._width = width;
+        this._height = height;
+        this._profileIdc = null;
+        this._constraintSet = null;
+        this._levelIdc = null;
+        this._decoder = null;
+        this._pendingFrames = [];
+    }
+
+    _handleFrame(frame) {
+        let pending = this._pendingFrames.shift();
+        if (pending === undefined) {
+            throw new Error("Pending frame queue empty when receiving frame from decoder");
+        }
+
+        if (pending.timestamp != frame.timestamp) {
+            throw new Error("Video frame timestamp mismatch. Expected " +
+                frame.timestamp + " but but got " + pending.timestamp);
+        }
+
+        pending.frame = frame;
+        pending.ready = true;
+        pending.resolve();
+
+        if (!pending.keep) {
+            frame.close();
+        }
+    }
+
+    _handleError(e) {
+        throw new Error("Failed to decode frame: " + e.message);
+    }
+
+    _configureDecoder(profileIdc, constraintSet, levelIdc) {
+        if (this._decoder === null || this._decoder.state === 'closed') {
+            this._decoder = new VideoDecoder({
+                output: frame => this._handleFrame(frame),
+                error: e => this._handleError(e),
+            });
+        }
+        const codec = 'avc1.' +
+            profileIdc.toString(16).padStart(2, '0') +
+            constraintSet.toString(16).padStart(2, '0') +
+            levelIdc.toString(16).padStart(2, '0');
+        this._decoder.configure({
+            codec: codec,
+            codedWidth: this._width,
+            codedHeight: this._height,
+            optimizeForLatency: true,
+        });
+    }
+
+    _preparePendingFrame(timestamp) {
+        let pending = {
+            timestamp: timestamp,
+            promise: null,
+            resolve: null,
+            frame: null,
+            ready: false,
+            keep: false,
+        };
+        pending.promise = new Promise((resolve) => {
+            pending.resolve = resolve;
+        });
+        this._pendingFrames.push(pending);
+
+        return pending;
+    }
+
+    decode(payload) {
+        let parser = new H264Parser(payload);
+        let result = null;
+
+        // Ideally, this timestamp should come from the server, but we'll just
+        // approximate it instead.
+        let timestamp = Math.round(window.performance.now() * 1e3);
+
+        while (true) {
+            let encodedFrame = parser.parse();
+            if (encodedFrame === null) {
+                break;
+            }
+
+            if (parser.profileIdc !== null) {
+                self._profileIdc = parser.profileIdc;
+                self._constraintSet = parser.constraintSet;
+                self._levelIdc = parser.levelIdc;
+            }
+
+            if (this._decoder === null || this._decoder.state !== 'configured') {
+                if (!encodedFrame.key) {
+                    Log.Warn("Missing key frame. Can't decode until one arrives");
+                    continue;
+                }
+                if (self._profileIdc === null) {
+                    Log.Warn('Cannot config decoder. Have not received SPS and PPS yet.');
+                    continue;
+                }
+                this._configureDecoder(self._profileIdc, self._constraintSet,
+                                       self._levelIdc);
+            }
+
+            result = this._preparePendingFrame(timestamp);
+
+            const chunk = new EncodedVideoChunk({
+                timestamp: timestamp,
+                type: encodedFrame.key ? 'key' : 'delta',
+                data: encodedFrame.frame,
+            });
+
+            try {
+                this._decoder.decode(chunk);
+            } catch (e) {
+                Log.Warn("Failed to decode:", e);
+            }
+        }
+
+        // We only keep last frame of each payload
+        if (result !== null) {
+            result.keep = true;
+        }
+
+        return result;
+    }
+}
+
+export default class H264Decoder {
+    constructor() {
+        this._tick = 0;
+        this._contexts = {};
+    }
+
+    _contextId(x, y, width, height) {
+        return [x, y, width, height].join(',');
+    }
+
+    _findOldestContextId() {
+        let oldestTick = Number.MAX_VALUE;
+        let oldestKey = undefined;
+        for (const [key, value] of Object.entries(this._contexts)) {
+            if (value.lastUsed < oldestTick) {
+                oldestTick = value.lastUsed;
+                oldestKey = key;
+            }
+        }
+        return oldestKey;
+    }
+
+    _createContext(x, y, width, height) {
+        const maxContexts = 64;
+        if (Object.keys(this._contexts).length >= maxContexts) {
+            let oldestContextId = this._findOldestContextId();
+            delete this._contexts[oldestContextId];
+        }
+        let context = new H264Context(width, height);
+        this._contexts[this._contextId(x, y, width, height)] = context;
+        return context;
+    }
+
+    _getContext(x, y, width, height) {
+        let context = this._contexts[this._contextId(x, y, width, height)];
+        return context !== undefined ? context : this._createContext(x, y, width, height);
+    }
+
+    _resetContext(x, y, width, height) {
+        delete this._contexts[this._contextId(x, y, width, height)];
+    }
+
+    _resetAllContexts() {
+        this._contexts = {};
+    }
+
+    decodeRect(x, y, width, height, sock, display, depth) {
+        const resetContextFlag = 1;
+        const resetAllContextsFlag = 2;
+
+        if (sock.rQwait("h264 header", 8)) {
+            return false;
+        }
+
+        const length = sock.rQshift32();
+        const flags = sock.rQshift32();
+
+        if (sock.rQwait("h264 payload", length, 8)) {
+            return false;
+        }
+
+        if (flags & resetAllContextsFlag) {
+            this._resetAllContexts();
+        } else if (flags & resetContextFlag) {
+            this._resetContext(x, y, width, height);
+        }
+
+        let context = this._getContext(x, y, width, height);
+        context.lastUsed = this._tick++;
+
+        if (length !== 0) {
+            let payload = sock.rQshiftBytes(length, false);
+            let frame = context.decode(payload);
+            if (frame !== null) {
+                display.videoFrame(x, y, width, height, frame);
+            }
+        }
+
+        return true;
+    }
+}

core/decoders/hextile.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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.
@@ -13,6 +13,7 @@ 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) {
@@ -30,10 +31,7 @@ export default class HextileDecoder {
                 return false;
             }
 
-            let rQ = sock.rQ;
-            let rQi = sock.rQi;
-
-            let subencoding = rQ[rQi];  // Peek
+            let subencoding = sock.rQpeek8();
             if (subencoding > 30) {  // Raw
                 throw new Error("Illegal hextile subencoding (subencoding: " +
                             subencoding + ")");
@@ -64,7 +62,7 @@ export default class HextileDecoder {
                         return false;
                     }
 
-                    let subrects = rQ[rQi + bytes - 1];  // Peek
+                    let subrects = sock.rQpeekBytes(bytes).at(-1);
                     if (subencoding & 0x10) {  // SubrectsColoured
                         bytes += subrects * (4 + 2);
                     } else {
@@ -78,7 +76,7 @@ export default class HextileDecoder {
             }
 
             // We know the encoding and have a whole tile
-            rQi++;
+            sock.rQshift8();
             if (subencoding === 0) {
                 if (this._lastsubencoding & 0x01) {
                     // Weird: ignore blanks are RAW
@@ -87,51 +85,97 @@ export default class HextileDecoder {
                     display.fillRect(tx, ty, tw, th, this._background);
                 }
             } else if (subencoding & 0x01) {  // Raw
-                display.blitImage(tx, ty, tw, th, rQ, rQi);
-                rQi += bytes - 1;
+                let pixels = tw * th;
+                let data = sock.rQshiftBytes(pixels * 4, false);
+                // Max sure the image is fully opaque
+                for (let i = 0;i <  pixels;i++) {
+                    data[i * 4 + 3] = 255;
+                }
+                display.blitImage(tx, ty, tw, th, data, 0);
             } else {
                 if (subencoding & 0x02) {  // Background
-                    this._background = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]];
-                    rQi += 4;
+                    this._background = new Uint8Array(sock.rQshiftBytes(4));
                 }
                 if (subencoding & 0x04) {  // Foreground
-                    this._foreground = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]];
-                    rQi += 4;
+                    this._foreground = new Uint8Array(sock.rQshiftBytes(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++;
+                    let subrects = sock.rQshift8();
 
                     for (let s = 0; s < subrects; s++) {
                         let color;
                         if (subencoding & 0x10) {  // SubrectsColoured
-                            color = [rQ[rQi], rQ[rQi + 1], rQ[rQi + 2], rQ[rQi + 3]];
-                            rQi += 4;
+                            color = sock.rQshiftBytes(4);
                         } else {
                             color = this._foreground;
                         }
-                        const xy = rQ[rQi];
-                        rQi++;
+                        const xy = sock.rQshift8();
                         const sx = (xy >> 4);
                         const sy = (xy & 0x0f);
 
-                        const wh = rQ[rQi];
-                        rQi++;
+                        const wh = sock.rQshift8();
                         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;
             this._tiles--;
         }
 
         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,161 @@
+/*
+ * 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._cachedQuantTables = [];
+        this._cachedHuffmanTables = [];
+
+        this._segments = [];
+    }
+
+    decodeRect(x, y, width, height, sock, display, depth) {
+        // A rect of JPEG encodings is simply a JPEG file
+        while (true) {
+            let segment = this._readSegment(sock);
+            if (segment === null) {
+                return false;
+            }
+            this._segments.push(segment);
+            // End of image?
+            if (segment[1] === 0xD9) {
+                break;
+            }
+        }
+
+        let huffmanTables = [];
+        let quantTables = [];
+        for (let segment of this._segments) {
+            let type = segment[1];
+            if (type === 0xC4) {
+                // Huffman tables
+                huffmanTables.push(segment);
+            } else if (type === 0xDB) {
+                // Quantization tables
+                quantTables.push(segment);
+            }
+        }
+
+        const sofIndex = this._segments.findIndex(
+            x => x[1] == 0xC0 || x[1] == 0xC2
+        );
+        if (sofIndex == -1) {
+            throw new Error("Illegal JPEG image without SOF");
+        }
+
+        if (quantTables.length === 0) {
+            this._segments.splice(sofIndex+1, 0,
+                                  ...this._cachedQuantTables);
+        }
+        if (huffmanTables.length === 0) {
+            this._segments.splice(sofIndex+1, 0,
+                                  ...this._cachedHuffmanTables);
+        }
+
+        let length = 0;
+        for (let segment of this._segments) {
+            length += segment.length;
+        }
+
+        let data = new Uint8Array(length);
+        length = 0;
+        for (let segment of this._segments) {
+            data.set(segment, length);
+            length += segment.length;
+        }
+
+        display.imageRect(x, y, width, height, "image/jpeg", data);
+
+        if (huffmanTables.length !== 0) {
+            this._cachedHuffmanTables = huffmanTables;
+        }
+        if (quantTables.length !== 0) {
+            this._cachedQuantTables = quantTables;
+        }
+
+        this._segments = [];
+
+        return true;
+    }
+
+    _readSegment(sock) {
+        if (sock.rQwait("JPEG", 2)) {
+            return null;
+        }
+
+        let marker = sock.rQshift8();
+        if (marker != 0xFF) {
+            throw new Error("Illegal JPEG marker received (byte: " +
+                               marker + ")");
+        }
+        let type = sock.rQshift8();
+        if (type >= 0xD0 && type <= 0xD9 || type == 0x01) {
+            // No length after marker
+            return new Uint8Array([marker, type]);
+        }
+
+        if (sock.rQwait("JPEG", 2, 2)) {
+            return null;
+        }
+
+        let length = sock.rQshift16();
+        if (length < 2) {
+            throw new Error("Illegal JPEG length received (length: " +
+                               length + ")");
+        }
+
+        if (sock.rQwait("JPEG", length-2, 4)) {
+            return null;
+        }
+
+        let extra = 0;
+        if (type === 0xDA) {
+            // start of scan
+            if (sock.rQwait("JPEG", length-2 + 2, 4)) {
+                return null;
+            }
+
+            let len = sock.rQlen();
+            let data = sock.rQpeekBytes(len, false);
+
+            while (true) {
+                let idx = data.indexOf(0xFF, length-2+extra);
+                if (idx === -1) {
+                    sock.rQwait("JPEG", Infinity, 4);
+                    return null;
+                }
+
+                if (idx === len-1) {
+                    sock.rQwait("JPEG", Infinity, 4);
+                    return null;
+                }
+
+                if (data.at(idx+1) === 0x00 ||
+                    (data.at(idx+1) >= 0xD0 && data.at(idx+1) <= 0xD7)) {
+                    extra = idx+2 - (length-2);
+                    continue;
+                }
+
+                extra = idx - (length-2);
+                break;
+            }
+        }
+
+        let segment = new Uint8Array(2 + length + extra);
+        segment[0] = marker;
+        segment[1] = type;
+        segment[2] = length >> 8;
+        segment[3] = length;
+        segment.set(sock.rQshiftBytes(length-2+extra, false), 4);
+
+        return segment;
+    }
+}

core/decoders/raw.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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.
@@ -13,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;
         }
@@ -20,35 +24,34 @@ export default class RawDecoder {
         const pixelSize = depth == 8 ? 1 : 4;
         const bytesPerLine = width * pixelSize;
 
-        if (sock.rQwait("RAW", bytesPerLine)) {
-            return false;
-        }
-
-        const curY = y + (height - this._lines);
-        const currHeight = Math.min(this._lines,
-                                    Math.floor(sock.rQlen / bytesPerLine));
-        let data = sock.rQ;
-        let index = sock.rQi;
-
-        // Convert data if needed
-        if (depth == 8) {
-            const pixels = width * currHeight;
-            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;
+        while (this._lines > 0) {
+            if (sock.rQwait("RAW", bytesPerLine)) {
+                return false;
             }
-            data = newdata;
-            index = 0;
-        }
 
-        display.blitImage(x, curY, width, currHeight, data, index);
-        sock.rQskipBytes(currHeight * bytesPerLine);
-        this._lines -= currHeight;
-        if (this._lines > 0) {
-            return false;
+            const curY = y + (height - this._lines);
+
+            let data = sock.rQshiftBytes(bytesPerLine, false);
+
+            // Convert data if needed
+            if (depth == 8) {
+                const newdata = new Uint8Array(width * 4);
+                for (let i = 0; i < width; i++) {
+                    newdata[i * 4 + 0] = ((data[i] >> 0) & 0x3) * 255 / 3;
+                    newdata[i * 4 + 1] = ((data[i] >> 2) & 0x3) * 255 / 3;
+                    newdata[i * 4 + 2] = ((data[i] >> 4) & 0x3) * 255 / 3;
+                    newdata[i * 4 + 3] = 255;
+                }
+                data = newdata;
+            }
+
+            // Max sure the image is fully opaque
+            for (let i = 0; i < width; i++) {
+                data[i * 4 + 3] = 255;
+            }
+
+            display.blitImage(x, curY, width, 1, data, 0);
+            this._lines--;
         }
 
         return true;

core/decoders/rre.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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/decoders/tight.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 The noVNC Authors
+ * Copyright (C) 2019 The noVNC authors
  * (c) 2012 Michael Tinglof, Joe Balaz, Les Piech (Mercuri.ca)
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
@@ -56,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 {
@@ -76,12 +76,8 @@ export default class TightDecoder {
             return false;
         }
 
-        const rQi = sock.rQi;
-        const rQ = sock.rQ;
-
-        display.fillRect(x, y, width, height,
-                         [rQ[rQi + 2], rQ[rQi + 1], rQ[rQi]], false);
-        sock.rQskipBytes(3);
+        let pixel = sock.rQshiftBytes(3);
+        display.fillRect(x, y, width, height, pixel, false);
 
         return true;
     }
@@ -148,6 +144,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;
@@ -165,7 +165,15 @@ export default class TightDecoder {
             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;
     }
@@ -195,6 +203,10 @@ export default class TightDecoder {
 
         let data;
 
+        if (uncompressedSize === 0) {
+            return true;
+        }
+
         if (uncompressedSize < 12) {
             if (sock.rQwait("TIGHT", uncompressedSize)) {
                 return false;
@@ -237,7 +249,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;
@@ -247,14 +259,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) {
@@ -263,17 +275,83 @@ 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) {
-        throw new Error("Gradient filter not implemented");
+        // assume the TPIXEL is 3 bytes long
+        const uncompressedSize = width * height * 3;
+        let data;
+
+        if (uncompressedSize === 0) {
+            return true;
+        }
+
+        if (uncompressedSize < 12) {
+            if (sock.rQwait("TIGHT", uncompressedSize)) {
+                return false;
+            }
+
+            data = sock.rQshiftBytes(uncompressedSize);
+        } else {
+            data = this._readData(sock);
+            if (data === null) {
+                return false;
+            }
+
+            this._zlibs[streamId].setInput(data);
+            data = this._zlibs[streamId].inflate(uncompressedSize);
+            this._zlibs[streamId].setInput(null);
+        }
+
+        let rgbx = new Uint8Array(4 * width * height);
+
+        let rgbxIndex = 0, dataIndex = 0;
+        let left = new Uint8Array(3);
+        for (let x = 0; x < width; x++) {
+            for (let c = 0; c < 3; c++) {
+                const prediction = left[c];
+                const value = data[dataIndex++] + prediction;
+                rgbx[rgbxIndex++] = value;
+                left[c] = value;
+            }
+            rgbx[rgbxIndex++] = 255;
+        }
+
+        let upperIndex = 0;
+        let upper = new Uint8Array(3),
+            upperleft = new Uint8Array(3);
+        for (let y = 1; y < height; y++) {
+            left.fill(0);
+            upperleft.fill(0);
+            for (let x = 0; x < width; x++) {
+                for (let c = 0; c < 3; c++) {
+                    upper[c] = rgbx[upperIndex++];
+                    let prediction = left[c] + upper[c] - upperleft[c];
+                    if (prediction < 0) {
+                        prediction = 0;
+                    } else if (prediction > 255) {
+                        prediction = 255;
+                    }
+                    const value = data[dataIndex++] + prediction;
+                    rgbx[rgbxIndex++] = value;
+                    upperleft[c] = upper[c];
+                    left[c] = value;
+                }
+                rgbx[rgbxIndex++] = 255;
+                upperIndex++;
+            }
+        }
+
+        display.blitImage(x, y, width, height, rgbx, 0, false);
+
+        return true;
     }
 
     _readData(sock) {
@@ -300,7 +378,7 @@ export default class TightDecoder {
             return null;
         }
 
-        let data = sock.rQshiftBytes(this._len);
+        let data = sock.rQshiftBytes(this._len, false);
         this._len = 0;
 
         return data;

core/decoders/tightpng.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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/decoders/zlib.js

@@ -0,0 +1,51 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2024 The noVNC authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ *
+ */
+
+import Inflator from "../inflator.js";
+
+export default class ZlibDecoder {
+    constructor() {
+        this._zlib = new Inflator();
+        this._length = 0;
+    }
+
+    decodeRect(x, y, width, height, sock, display, depth) {
+        if ((width === 0) || (height === 0)) {
+            return true;
+        }
+
+        if (this._length === 0) {
+            if (sock.rQwait("ZLIB", 4)) {
+                return false;
+            }
+
+            this._length = sock.rQshift32();
+        }
+
+        if (sock.rQwait("ZLIB", this._length)) {
+            return false;
+        }
+
+        let data = new Uint8Array(sock.rQshiftBytes(this._length, false));
+        this._length = 0;
+
+        this._zlib.setInput(data);
+        data = this._zlib.inflate(width * height * 4);
+        this._zlib.setInput(null);
+
+        // Max sure the image is fully opaque
+        for (let i = 0; i < width * height; i++) {
+            data[i * 4 + 3] = 255;
+        }
+
+        display.blitImage(x, y, width, height, data, 0);
+
+        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, false);
+
+        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

@@ -1,13 +1,13 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2020 The noVNC Authors
+ * 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 { Z_FULL_FLUSH, Z_DEFAULT_COMPRESSION } from "../vendor/pako/lib/zlib/deflate.js";
 import ZStream from "../vendor/pako/lib/zlib/zstream.js";
 
 export default class Deflator {
@@ -15,9 +15,8 @@ export default class Deflator {
         this.strm = new ZStream();
         this.chunkSize = 1024 * 10 * 10;
         this.outputBuffer = new Uint8Array(this.chunkSize);
-        this.windowBits = 5;
 
-        deflateInit(this.strm, this.windowBits);
+        deflateInit(this.strm, Z_DEFAULT_COMPRESSION);
     }
 
     deflate(inData) {

core/display.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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,6 @@
 
 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 {
@@ -16,17 +15,13 @@ export default class Display {
         this._drawCtx = null;
 
         this._renderQ = [];  // queue drawing actions for in-oder rendering
-        this._flushing = false;
+        this._flushPromise = null;
 
         // the full frame buffer (logical canvas) size
         this._fbWidth = 0;
         this._fbHeight = 0;
 
         this._prevDrawStyle = "";
-        this._tile = null;
-        this._tile16x16 = null;
-        this._tileX = 0;
-        this._tileY = 0;
 
         Log.Debug(">> Display.constructor");
 
@@ -60,22 +55,12 @@ export default class Display {
 
         Log.Debug("User Agent: " + navigator.userAgent);
 
-        // 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;
-
-        // ===== EVENT HANDLERS =====
-
-        this.onflush = () => {}; // A flush request has finished
     }
 
     // ===== PROPERTIES =====
@@ -235,6 +220,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) {
@@ -305,9 +302,14 @@ export default class Display {
 
     flush() {
         if (this._renderQ.length === 0) {
-            this.onflush();
+            return Promise.resolve();
         } else {
-            this._flushing = true;
+            if (this._flushPromise === null) {
+                this._flushPromise = new Promise((resolve) => {
+                    this._flushResolve = resolve;
+                });
+            }
+            return this._flushPromise;
         }
     }
 
@@ -378,55 +380,15 @@ export default class Display {
         });
     }
 
-    // start updating a tile
-    startTile(x, y, width, height, color) {
-        this._tileX = x;
-        this._tileY = 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._tileX, this._tileY);
-        this._damage(this._tileX, this._tileY,
-                     this._tile.width, this._tile.height);
+    videoFrame(x, y, width, height, frame) {
+        this._renderQPush({
+            'type': 'frame',
+            'frame': frame,
+            'x': x,
+            'y': y,
+            'width': width,
+            'height': height
+        });
     }
 
     blitImage(x, y, width, height, arr, offset, fromQueue) {
@@ -445,55 +407,28 @@ export default class Display {
                 'height': height,
             });
         } else {
-            this._bgrxImageData(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);
         }
     }
 
-    blitRgbImage(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 newArr = new Uint8Array(width * height * 3);
-            newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
-            this._renderQPush({
-                'type': 'blitRgb',
-                'data': newArr,
-                'x': x,
-                'y': y,
-                'width': width,
-                'height': height,
-            });
+    drawImage(img, ...args) {
+        this._drawCtx.drawImage(img, ...args);
+
+        if (args.length <= 4) {
+            const [x, y] = args;
+            this._damage(x, y, img.width, img.height);
         } else {
-            this._rgbImageData(x, y, width, height, arr, offset);
+            const [,, sw, sh, dx, dy] = args;
+            this._damage(dx, dy, sw, sh);
         }
     }
 
-    blitRgbxImage(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 newArr = new Uint8Array(width * height * 4);
-            newArr.set(new Uint8Array(arr.buffer, 0, newArr.length));
-            this._renderQPush({
-                'type': 'blitRgbx',
-                'data': newArr,
-                'x': x,
-                'y': y,
-                'width': width,
-                'height': height,
-            });
-        } else {
-            this._rgbxImageData(x, y, width, height, arr, offset);
-        }
-    }
-
-    drawImage(img, x, y) {
-        this._drawCtx.drawImage(img, x, y);
-        this._damage(x, y, img.width, img.height);
-    }
-
     autoscale(containerWidth, containerHeight) {
         let scaleRatio;
 
@@ -537,52 +472,13 @@ 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);
-    }
-
     _renderQPush(action) {
         this._renderQ.push(action);
         if (this._renderQ.length === 1) {
@@ -616,15 +512,8 @@ 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':
-                    /* IE tends to set "complete" prematurely, so check dimensions */
-                    if (a.img.complete && (a.img.width !== 0) && (a.img.height !== 0)) {
+                    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 " +
@@ -632,6 +521,9 @@ export default class Display {
                             return;
                         }
                         this.drawImage(a.img, a.x, a.y);
+                        // This helps the browser free the memory right
+                        // away, rather than ballooning
+                        a.img.src = "";
                     } else {
                         a.img._noVNCDisplay = this;
                         a.img.addEventListener('load', this._resumeRenderQ);
@@ -640,6 +532,35 @@ export default class Display {
                         ready = false;
                     }
                     break;
+                case 'frame':
+                    if (a.frame.ready) {
+                        // The encoded frame may be larger than the rect due to
+                        // limitations of the encoder, so we need to crop the
+                        // frame.
+                        let frame = a.frame.frame;
+                        if (frame.codedWidth < a.width || frame.codedHeight < a.height) {
+                            Log.Warn("Decoded video frame does not cover its full rectangle area. Expecting at least " +
+                                      a.width + "x" + a.height + " but got " +
+                                      frame.codedWidth + "x" + frame.codedHeight);
+                        }
+                        const sx = 0;
+                        const sy = 0;
+                        const sw = a.width;
+                        const sh = a.height;
+                        const dx = a.x;
+                        const dy = a.y;
+                        const dw = sw;
+                        const dh = sh;
+                        this.drawImage(frame, sx, sy, sw, sh, dx, dy, dw, dh);
+                        frame.close();
+                    } else {
+                        let display = this;
+                        a.frame.promise.then(() => {
+                            display._scanRenderQ();
+                        });
+                        ready = false;
+                    }
+                    break;
             }
 
             if (ready) {
@@ -647,9 +568,11 @@ export default class Display {
             }
         }
 
-        if (this._renderQ.length === 0 && this._flushing) {
-            this._flushing = false;
-            this.onflush();
+        if (this._renderQ.length === 0 &&
+            this._flushPromise !== null) {
+            this._flushResolve();
+            this._flushPromise = null;
+            this._flushResolve = null;
         }
     }
 }

core/encodings.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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.
@@ -11,8 +11,12 @@ export const encodings = {
     encodingCopyRect: 1,
     encodingRRE: 2,
     encodingHextile: 5,
+    encodingZlib: 6,
     encodingTight: 7,
+    encodingZRLE: 16,
     encodingTightPNG: -260,
+    encodingJPEG: 21,
+    encodingH264: 50,
 
     pseudoEncodingQualityLevel9: -23,
     pseudoEncodingQualityLevel0: -32,
@@ -20,11 +24,13 @@ export const encodings = {
     pseudoEncodingLastRect: -224,
     pseudoEncodingCursor: -239,
     pseudoEncodingQEMUExtendedKeyEvent: -258,
+    pseudoEncodingQEMULedEvent: -261,
     pseudoEncodingDesktopName: -307,
     pseudoEncodingExtendedDesktopSize: -308,
     pseudoEncodingXvp: -309,
     pseudoEncodingFence: -312,
     pseudoEncodingContinuousUpdates: -313,
+    pseudoEncodingExtendedMouseButtons: -316,
     pseudoEncodingCompressLevel9: -247,
     pseudoEncodingCompressLevel0: -256,
     pseudoEncodingVMwareCursor: 0x574d5664,
@@ -37,8 +43,12 @@ export function encodingName(num) {
         case encodings.encodingCopyRect: return "CopyRect";
         case encodings.encodingRRE:      return "RRE";
         case encodings.encodingHextile:  return "Hextile";
+        case encodings.encodingZlib:     return "Zlib";
         case encodings.encodingTight:    return "Tight";
+        case encodings.encodingZRLE:     return "ZRLE";
         case encodings.encodingTightPNG: return "TightPNG";
+        case encodings.encodingJPEG:     return "JPEG";
+        case encodings.encodingH264:     return "H.264";
         default:                         return "[unknown encoding " + num + "]";
     }
 }

core/inflator.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2020 The noVNC Authors
+ * Copyright (C) 2020 The noVNC authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -14,9 +14,8 @@ export default class Inflate {
         this.strm = new ZStream();
         this.chunkSize = 1024 * 10 * 10;
         this.strm.output = new Uint8Array(this.chunkSize);
-        this.windowBits = 5;
 
-        inflateInit(this.strm, this.windowBits);
+        inflateInit(this.strm);
     }
 
     setInput(data) {

core/input/domkeytable.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2018 The noVNC authors
  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  */
 
@@ -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);
@@ -49,25 +49,27 @@ addStandard("ScrollLock", KeyTable.XK_Scroll_Lock);
 addLeftRight("Shift", KeyTable.XK_Shift_L, KeyTable.XK_Shift_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
@@ -85,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)
@@ -103,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);
@@ -116,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);
@@ -137,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);
@@ -147,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);
@@ -188,7 +190,7 @@ addStandard("F34", KeyTable.XK_F34);
 addStandard("F35", KeyTable.XK_F35);
 // - Soft1...
 
-// 2.10. Multimedia Keys
+// 3.10. Multimedia Keys
 
 // - ChannelDown
 // - ChannelUp
@@ -200,6 +202,7 @@ addStandard("MailSend", KeyTable.XF86XK_Send);
 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);
@@ -211,12 +214,12 @@ 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
@@ -236,16 +239,17 @@ 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("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);
@@ -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/fixedkeys.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2018 The noVNC authors
  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  */
 

core/input/gesturehandler.js

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

core/input/keyboard.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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 =====
@@ -39,7 +36,7 @@ export default class Keyboard {
 
     // ===== PRIVATE METHODS =====
 
-    _sendKeyEvent(keysym, code, down) {
+    _sendKeyEvent(keysym, code, down, numlock = null, capslock = null) {
         if (down) {
             this._keyDownList[code] = keysym;
         } else {
@@ -51,8 +48,9 @@ export default class Keyboard {
         }
 
         Log.Debug("onkeyevent " + (down ? "down" : "up") +
-                  ", keysym: " + keysym, ", code: " + code);
-        this.onkeyevent(keysym, code, down);
+                  ", keysym: " + keysym, ", code: " + code +
+                  ", numlock: " + numlock + ", capslock: " + capslock);
+        this.onkeyevent(keysym, code, down, numlock, capslock);
     }
 
     _getKeyCode(e) {
@@ -62,9 +60,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;
@@ -91,6 +87,14 @@ export default class Keyboard {
     _handleKeyDown(e) {
         const code = this._getKeyCode(e);
         let keysym = KeyboardUtil.getKeysym(e);
+        let numlock = e.getModifierState('NumLock');
+        let capslock = e.getModifierState('CapsLock');
+
+        // getModifierState for NumLock is not supported on mac and ios and always returns false.
+        // Set to null to indicate unknown/unsupported instead.
+        if (browser.isMac() || browser.isIOS()) {
+            numlock = null;
+        }
 
         // Windows doesn't have a proper AltGr, but handles it using
         // fake Ctrl+Alt. However the remote end might not be Windows,
@@ -112,7 +116,7 @@ export default class Keyboard {
                 //        key to "AltGraph".
                 keysym = KeyTable.XK_ISO_Level3_Shift;
             } else {
-                this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
+                this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true, numlock, capslock);
             }
         }
 
@@ -123,8 +127,8 @@ export default class Keyboard {
                 // If it's a virtual keyboard then it should be
                 // sufficient to just send press and release right
                 // after each other
-                this._sendKeyEvent(keysym, code, true);
-                this._sendKeyEvent(keysym, code, false);
+                this._sendKeyEvent(keysym, code, true, numlock, capslock);
+                this._sendKeyEvent(keysym, code, false, numlock, capslock);
             }
 
             stopEvent(e);
@@ -158,106 +162,53 @@ 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, numlock, capslock);
+            this._sendKeyEvent(keysym, code, false, numlock, capslock);
+            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() || browser.isIOS()) && (code === 'CapsLock')) {
-            this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', true);
-            this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', false);
+            this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', true, numlock, capslock);
+            this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', false, numlock, capslock);
             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, numlock, capslock);
+            this._sendKeyEvent(keysym, code, false, numlock, capslock);
+            stopEvent(e);
             return;
         }
 
-        this._pendingKey = null;
         stopEvent(e);
 
         // Possible start of AltGr sequence? (see above)
         if ((code === "ControlLeft") && browser.isWindows() &&
             !("ControlLeft" in this._keyDownList)) {
             this._altGrArmed = true;
-            this._altGrTimeout = setTimeout(this._handleAltGrTimeout.bind(this), 100);
+            this._altGrTimeout = setTimeout(this._interruptAltGrSequence.bind(this), 100);
             this._altGrCtrlTime = e.timeStamp;
             return;
         }
 
-        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);
+        this._sendKeyEvent(keysym, code, true, numlock, capslock);
     }
 
     _handleKeyUp(e) {
@@ -267,11 +218,7 @@ export default class Keyboard {
 
         // We can't get a release in the middle of an AltGr sequence, so
         // abort that detection
-        if (this._altGrArmed) {
-            this._altGrArmed = false;
-            clearTimeout(this._altGrTimeout);
-            this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
-        }
+        this._interruptAltGrSequence();
 
         // See comment in _handleKeyDown()
         if ((browser.isMac() || browser.isIOS()) && (code === 'CapsLock')) {
@@ -298,44 +245,26 @@ export default class Keyboard {
         }
     }
 
-    _handleAltGrTimeout() {
-        this._altGrArmed = false;
-        clearTimeout(this._altGrTimeout);
-        this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
+    _interruptAltGrSequence() {
+        if (this._altGrArmed) {
+            this._altGrArmed = false;
+            clearTimeout(this._altGrTimeout);
+            this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
+        }
     }
 
     _allKeysUp() {
         Log.Debug(">> Keyboard.allKeysUp");
+
+        // Prevent control key being processed after losing focus.
+        this._interruptAltGrSequence();
+
         for (let code in this._keyDownList) {
             this._sendKeyEvent(this._keyDownList[code], code, false);
         }
         Log.Debug("<< Keyboard.allKeysUp");
     }
 
-    // Alt workaround for Firefox on Windows, see below
-    _checkAlt(e) {
-        if (e.skipCheckAlt) {
-            return;
-        }
-        if (e.altKey) {
-            return;
-        }
-
-        const target = this._target;
-        const downList = this._keyDownList;
-        ['AltLeft', 'AltRight'].forEach((code) => {
-            if (!(code in downList)) {
-                return;
-            }
-
-            const event = new KeyboardEvent('keyup',
-                                            { key: downList[code],
-                                              code: code });
-            event.skipCheckAlt = true;
-            target.dispatchEvent(event);
-        });
-    }
-
     // ===== PUBLIC METHODS =====
 
     grab() {
@@ -343,41 +272,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 on Windows has broken handling of Alt, so we need to
-        // poll as best we can for releases (still doesn't prevent the
-        // menu from popping up though as we can't call
-        // preventDefault())
-        if (browser.isWindows() && browser.isFirefox()) {
-            const handler = this._eventHandlers.checkalt;
-            ['mousedown', 'mouseup', 'mousemove', 'wheel',
-             'touchstart', 'touchend', 'touchmove',
-             'keydown', 'keyup'].forEach(type =>
-                document.addEventListener(type, handler,
-                                          { capture: true,
-                                            passive: true }));
-        }
-
         //Log.Debug("<< Keyboard.grab");
     }
 
     ungrab() {
         //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/util.js

@@ -22,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,27 +67,7 @@ export function getKeycode(evt) {
 // Get 'KeyboardEvent.key', handling legacy browsers
 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;
-        }
-
+    if ((evt.key !== undefined) && (evt.key !== 'Unidentified')) {
         // Mozilla isn't fully in sync with the spec yet
         switch (evt.key) {
             case 'OS': return 'Meta';
@@ -110,18 +89,7 @@ export function getKey(evt) {
             return 'Delete';
         }
 
-        // IE and Edge need special handling, but for everyone else we
-        // can trust the value provided
-        if (!browser.isIE() && !browser.isEdge()) {
-            return evt.key;
-        }
-
-        // IE and Edge have broken handling of AltGraph so we can only
-        // trust them for non-printable characters (and unfortunately
-        // they also specify 'Unidentified' for some problem keys)
-        if ((evt.key.length !== 1) && (evt.key !== 'Unidentified')) {
-            return evt.key;
-        }
+        return evt.key;
     }
 
     // Try to deduce it based on the physical key
@@ -189,6 +157,21 @@ export function getKeysym(evt) {
             }
         }
 
+        // 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

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2018 The noVNC authors
  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  */
 
@@ -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,312 @@
+import { encodeUTF8 } from './util/strings.js';
+import EventTargetMixin from './util/eventtarget.js';
+import legacyCrypto from './crypto/crypto.js';
+
+class RA2Cipher {
+    constructor() {
+        this._cipher = null;
+        this._counter = new Uint8Array(16);
+    }
+
+    async setKey(key) {
+        this._cipher = await legacyCrypto.importKey(
+            "raw", key, { name: "AES-EAX" }, false, ["encrypt, decrypt"]);
+    }
+
+    async makeMessage(message) {
+        const ad = new Uint8Array([(message.length & 0xff00) >>> 8, message.length & 0xff]);
+        const encrypted = await legacyCrypto.encrypt({
+            name: "AES-EAX",
+            iv: this._counter,
+            additionalData: ad,
+        }, this._cipher, message);
+        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) {
+        const ad = new Uint8Array([(length & 0xff00) >>> 8, length & 0xff]);
+        const res = await legacyCrypto.decrypt({
+            name: "AES-EAX",
+            iv: this._counter,
+            additionalData: ad,
+        }, this._cipher, encrypted);
+        for (let i = 0; i < 16 && this._counter[i]++ === 255; i++);
+        return res;
+    }
+}
+
+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.rQpeekBytes(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 = await legacyCrypto.importKey(
+            "raw", { n: serverN, e: serverE }, { name: "RSA-PKCS1-v1_5" }, false, ["encrypt"]);
+        const serverPublickey = new Uint8Array(4 + serverKeyBytes * 2);
+        serverPublickey.set(serverKeyLengthBuffer);
+        serverPublickey.set(serverN, 4);
+        serverPublickey.set(serverE, 4 + serverKeyBytes);
+
+        // verify server public key
+        let approveKey = this._waitApproveKeyAsync();
+        this.dispatchEvent(new CustomEvent("serververification", {
+            detail: { type: "RSA", publickey: serverPublickey }
+        }));
+        await approveKey;
+
+        // 2: Send client public key
+        const clientKeyLength = 2048;
+        const clientKeyBytes = Math.ceil(clientKeyLength / 8);
+        const clientRSACipher = (await legacyCrypto.generateKey({
+            name: "RSA-PKCS1-v1_5",
+            modulusLength: clientKeyLength,
+            publicExponent: new Uint8Array([1, 0, 1]),
+        }, true, ["encrypt"])).privateKey;
+        const clientExportedRSAKey = await legacyCrypto.exportKey("raw", clientRSACipher);
+        const clientN = clientExportedRSAKey.n;
+        const clientE = clientExportedRSAKey.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.sQpushBytes(clientPublicKey);
+        this._sock.flush();
+
+        // 3: Send client random
+        const clientRandom = new Uint8Array(16);
+        window.crypto.getRandomValues(clientRandom);
+        const clientEncryptedRandom = await legacyCrypto.encrypt(
+            { name: "RSA-PKCS1-v1_5" }, serverRSACipher, clientRandom);
+        const clientRandomMessage = new Uint8Array(2 + serverKeyBytes);
+        clientRandomMessage[0] = (serverKeyBytes & 0xff00) >>> 8;
+        clientRandomMessage[1] = serverKeyBytes & 0xff;
+        clientRandomMessage.set(clientEncryptedRandom, 2);
+        this._sock.sQpushBytes(clientRandomMessage);
+        this._sock.flush();
+
+        // 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 = await legacyCrypto.decrypt(
+            { name: "RSA-PKCS1-v1_5" }, clientRSACipher, 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.sQpushBytes(await clientCipher.makeMessage(clientHash));
+        this._sock.flush();
+        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 + 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 + 16)));
+        if (subtype === null) {
+            throw new Error("RA2: failed to authenticate the message");
+        }
+        subtype = subtype[0];
+        let waitCredentials = this._waitCredentialsAsync(subtype);
+        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 waitCredentials;
+        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.sQpushBytes(await clientCipher.makeMessage(credentials));
+        this._sock.flush();
+    }
+
+    get hasStarted() {
+        return this._hasStarted;
+    }
+
+    set hasStarted(s) {
+        this._hasStarted = s;
+    }
+}

core/util/browser.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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.
@@ -9,10 +9,11 @@
  */
 
 import * as Log from './logging.js';
+import Base64 from '../base64.js';
 
 // Touch detection
 export let isTouchDevice = ('ontouchstart' in document.documentElement) ||
-                                 // requried for Chrome debugger
+                                 // required for Chrome debugger
                                  (document.ontouchstart !== undefined) ||
                                  // required for MS Surface
                                  (navigator.maxTouchPoints > 0) ||
@@ -45,15 +46,6 @@ try {
 
 export const supportsCursorURIs = _supportsCursorURIs;
 
-let _supportsImageMetadata = false;
-try {
-    new ImageData(new Uint8ClampedArray(4), 1, 1);
-    _supportsImageMetadata = true;
-} catch (ex) {
-    // ignore failure
-}
-export const supportsImageMetadata = _supportsImageMetadata;
-
 let _hasScrollbarGutter = true;
 try {
     // Create invisible container
@@ -79,6 +71,86 @@ try {
 }
 export const hasScrollbarGutter = _hasScrollbarGutter;
 
+export let supportsWebCodecsH264Decode = false;
+
+async function _checkWebCodecsH264DecodeSupport() {
+    if (!('VideoDecoder' in window)) {
+        return false;
+    }
+
+    // We'll need to make do with some placeholders here
+    const config = {
+        codec: 'avc1.42401f',
+        codedWidth: 1920,
+        codedHeight: 1080,
+        optimizeForLatency: true,
+    };
+
+    let support = await VideoDecoder.isConfigSupported(config);
+    if (!support.supported) {
+        return false;
+    }
+
+    // Firefox incorrectly reports supports for H.264 under some
+    // circumstances, so we need to actually test a real frame
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1932392
+
+    const data = new Uint8Array(Base64.decode(
+        'AAAAAWdCwBTZnpuAgICgAAADACAAAAZB4oVNAAAAAWjJYyyAAAABBgX//4Hc' +
+        'Rem95tlIt5Ys2CDZI+7veDI2NCAtIGNvcmUgMTY0IHIzMTA4IDMxZTE5Zjkg' +
+        'LSBILjI2NC9NUEVHLTQgQVZDIGNvZGVjIC0gQ29weWxlZnQgMjAwMy0yMDIz' +
+        'IC0gaHR0cDovL3d3dy52aWRlb2xhbi5vcmcveDI2NC5odG1sIC0gb3B0aW9u' +
+        'czogY2FiYWM9MCByZWY9NSBkZWJsb2NrPTE6MDowIGFuYWx5c2U9MHgxOjB4' +
+        'MTExIG1lPWhleCBzdWJtZT04IHBzeT0xIHBzeV9yZD0xLjAwOjAuMDAgbWl4' +
+        'ZWRfcmVmPTEgbWVfcmFuZ2U9MTYgY2hyb21hX21lPTEgdHJlbGxpcz0yIDh4' +
+        'OGRjdD0wIGNxbT0wIGRlYWR6b25lPTIxLDExIGZhc3RfcHNraXA9MSBjaHJv' +
+        'bWFfcXBfb2Zmc2V0PS0yIHRocmVhZHM9MSBsb29rYWhlYWRfdGhyZWFkcz0x' +
+        'IHNsaWNlZF90aHJlYWRzPTAgbnI9MCBkZWNpbWF0ZT0xIGludGVybGFjZWQ9' +
+        'MCBibHVyYXlfY29tcGF0PTAgY29uc3RyYWluZWRfaW50cmE9MCBiZnJhbWVz' +
+        'PTAgd2VpZ2h0cD0wIGtleWludD1pbmZpbml0ZSBrZXlpbnRfbWluPTI1IHNj' +
+        'ZW5lY3V0PTQwIGludHJhX3JlZnJlc2g9MCByY19sb29rYWhlYWQ9NTAgcmM9' +
+        'YWJyIG1idHJlZT0xIGJpdHJhdGU9NDAwIHJhdGV0b2w9MS4wIHFjb21wPTAu' +
+        'NjAgcXBtaW49MCBxcG1heD02OSBxcHN0ZXA9NCBpcF9yYXRpbz0xLjQwIGFx' +
+        'PTE6MS4wMACAAAABZYiEBrxmKAAPVccAAS044AA5DRJMnkycJk4TPw=='));
+
+    let gotframe = false;
+    let error = null;
+
+    let decoder = new VideoDecoder({
+        output: (frame) => { gotframe = true; frame.close(); },
+        error: (e) => { error = e; },
+    });
+    let chunk = new EncodedVideoChunk({
+        timestamp: 0,
+        type: 'key',
+        data: data,
+    });
+
+    decoder.configure(config);
+    decoder.decode(chunk);
+    try {
+        await decoder.flush();
+    } catch (e) {
+        // Firefox incorrectly throws an exception here
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=1932566
+        error = e;
+    }
+
+    // Firefox fails to deliver the error on Windows, so we need to
+    // check if we got a frame instead
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1932579
+    if (!gotframe) {
+        return false;
+    }
+
+    if (error !== null) {
+        return false;
+    }
+
+    return true;
+}
+supportsWebCodecsH264Decode = await _checkWebCodecsH264DecodeSupport();
+
 /*
  * The functions for detection of platforms and browsers below are exported
  * but the use of these should be minimized as much as possible.
@@ -86,35 +158,76 @@ export const hasScrollbarGutter = _hasScrollbarGutter;
  * 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() {
+    /* 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) 2019 The noVNC Authors
+ * Copyright (C) 2019 The noVNC authors
  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
  */
 
@@ -18,6 +18,10 @@ 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';
         }
@@ -43,9 +47,6 @@ export default class Cursor {
         if (useFallback) {
             document.body.appendChild(this._canvas);
 
-            // FIXME: These don't fire properly except for mouse
-            ///       movement in IE. We want to also capture element
-            //        movement, size changes, visibility, etc.
             const options = { capture: true, passive: true };
             this._target.addEventListener('mouseover', this._eventHandlers.mouseover, options);
             this._target.addEventListener('mouseleave', this._eventHandlers.mouseleave, options);
@@ -68,7 +69,9 @@ export default class Cursor {
             this._target.removeEventListener('mousemove', this._eventHandlers.mousemove, options);
             this._target.removeEventListener('mouseup', this._eventHandlers.mouseup, options);
 
-            document.body.removeChild(this._canvas);
+            if (document.contains(this._canvas)) {
+                document.body.removeChild(this._canvas);
+            }
         }
 
         this._target = null;
@@ -90,14 +93,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);
 

core/util/element.js

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

core/util/events.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2018 The noVNC Authors
+ * Copyright (C) 2018 The noVNC authors
  * Licensed under MPL 2.0 (see LICENSE.txt)
  *
  * See README.md for usage and integration instructions.
@@ -65,10 +65,6 @@ export function setCapture(target) {
 
         target.setCapture();
         document.captureElement = target;
-
-        // IE releases capture on 'click' events which might not trigger
-        target.addEventListener('mouseup', releaseCapture);
-
     } else {
         // Release any existing capture in case this method is
         // called multiple times without coordination

core/util/eventtarget.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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

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

core/util/logging.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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/polyfill.js

@@ -1,61 +0,0 @@
-/*
- * noVNC: HTML5 VNC client
- * Copyright (C) 2020 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;
-    }
-})();
-
-/* Number.isInteger() (taken from MDN) */
-Number.isInteger = Number.isInteger || function isInteger(value) {
-    return typeof value === 'number' &&
-      isFinite(value) &&
-      Math.floor(value) === value;
-};

core/util/strings.js

@@ -1,6 +1,6 @@
 /*
  * noVNC: HTML5 VNC client
- * Copyright (C) 2019 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/websock.js

@@ -1,10 +1,10 @@
 /*
- * Websock: high-performance binary WebSockets
- * Copyright (C) 2019 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,14 +17,39 @@ 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.
-// Also copyWithin() for TypedArrays is not supported in IE 11 or
-// Safari 13 (at the moment we want to support Safari 11).
-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
@@ -45,28 +70,31 @@ export default class Websock {
         };
     }
 
-    // Getters and Setters
-    get sQ() {
-        return this._sQ;
-    }
-
-    get rQ() {
-        return this._rQ;
-    }
-
-    get rQi() {
-        return this._rQi;
-    }
-
-    set rQi(val) {
-        this._rQi = val;
-    }
-
-    // Receive Queue
-    get rQlen() {
-        return this._rQlen - this._rQi;
+    // 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";
     }
 
+    // Receive queue
     rQpeek8() {
         return this._rQ[this._rQi];
     }
@@ -93,42 +121,51 @@ export default class Websock {
         for (let byte = bytes - 1; byte >= 0; byte--) {
             res += this._rQ[this._rQi++] << (byte * 8);
         }
-        return res;
+        return res >>> 0;
+    }
+
+    rQlen() {
+        return this._rQlen - this._rQi;
     }
 
     rQshiftStr(len) {
-        if (typeof(len) === 'undefined') { len = this.rQlen; }
         let str = "";
         // Handle large arrays in steps to avoid long strings on the stack
         for (let i = 0; i < len; i += 4096) {
-            let part = this.rQshiftBytes(Math.min(4096, len - i));
+            let part = this.rQshiftBytes(Math.min(4096, len - i), false);
             str += String.fromCharCode.apply(null, part);
         }
         return str;
     }
 
-    rQshiftBytes(len) {
-        if (typeof(len) === 'undefined') { len = this.rQlen; }
+    rQshiftBytes(len, copy=true) {
         this._rQi += len;
-        return new Uint8Array(this._rQ.buffer, this._rQi - len, len);
+        if (copy) {
+            return this._rQ.slice(this._rQi - len, this._rQi);
+        } else {
+            return this._rQ.subarray(this._rQi - len, this._rQi);
+        }
     }
 
     rQshiftTo(target, len) {
-        if (len === undefined) { len = this.rQlen; }
         // TODO: make this just use set with views when using a ArrayBuffer to store the rQ
         target.set(new Uint8Array(this._rQ.buffer, this._rQi, len));
         this._rQi += len;
     }
 
-    rQslice(start, end = this.rQlen) {
-        return new Uint8Array(this._rQ.buffer, this._rQi + start, end - start);
+    rQpeekBytes(len, copy=true) {
+        if (copy) {
+            return this._rQ.slice(this._rQi, this._rQi + len);
+        } else {
+            return this._rQ.subarray(this._rQi, this._rQi + len);
+        }
     }
 
     // Check to see if we must wait for 'num' bytes (default to FBU.bytes)
     // to be available in the receive queue. Return true if we need to
     // wait (and possibly print a debug message), otherwise false.
     rQwait(msg, num, goback) {
-        if (this.rQlen < num) {
+        if (this._rQlen - this._rQi < num) {
             if (goback) {
                 if (this._rQi < goback) {
                     throw new Error("rQwait cannot backup " + goback + " bytes");
@@ -140,26 +177,61 @@ export default class Websock {
         return false;
     }
 
-    // Send Queue
+    // Send queue
+
+    sQpush8(num) {
+        this._sQensureSpace(1);
+        this._sQ[this._sQlen++] = num;
+    }
+
+    sQpush16(num) {
+        this._sQensureSpace(2);
+        this._sQ[this._sQlen++] = (num >> 8) & 0xff;
+        this._sQ[this._sQlen++] = (num >> 0) & 0xff;
+    }
+
+    sQpush32(num) {
+        this._sQensureSpace(4);
+        this._sQ[this._sQlen++] = (num >> 24) & 0xff;
+        this._sQ[this._sQlen++] = (num >> 16) & 0xff;
+        this._sQ[this._sQlen++] = (num >>  8) & 0xff;
+        this._sQ[this._sQlen++] = (num >>  0) & 0xff;
+    }
+
+    sQpushString(str) {
+        let bytes = str.split('').map(chr => chr.charCodeAt(0));
+        this.sQpushBytes(new Uint8Array(bytes));
+    }
+
+    sQpushBytes(bytes) {
+        for (let offset = 0;offset < bytes.length;) {
+            this._sQensureSpace(1);
+
+            let chunkSize = this._sQbufferSize - this._sQlen;
+            if (chunkSize > bytes.length - offset) {
+                chunkSize = bytes.length - offset;
+            }
+
+            this._sQ.set(bytes.subarray(offset, offset + chunkSize), this._sQlen);
+            this._sQlen += chunkSize;
+            offset += chunkSize;
+        }
+    }
 
     flush() {
-        if (this._sQlen > 0 && this._websocket.readyState === WebSocket.OPEN) {
-            this._websocket.send(this._encodeMessage());
+        if (this._sQlen > 0 && this.readyState === 'open') {
+            this._websocket.send(new Uint8Array(this._sQ.buffer, 0, this._sQlen));
             this._sQlen = 0;
         }
     }
 
-    send(arr) {
-        this._sQ.set(arr, this._sQlen);
-        this._sQlen += arr.length;
-        this.flush();
+    _sQensureSpace(bytes) {
+        if (this._sQbufferSize - this._sQlen < bytes) {
+            this.flush();
+        }
     }
 
-    sendString(str) {
-        this.send(str.split('').map(chr => chr.charCodeAt(0)));
-    }
-
-    // Event Handlers
+    // Event handlers
     off(evt) {
         this._eventHandlers[evt] = () => {};
     }
@@ -180,12 +252,25 @@ export default class Websock {
     }
 
     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.onopen = () => {
             Log.Debug('>> WebSock.onopen');
             if (this._websocket.protocol) {
@@ -195,11 +280,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);
@@ -209,8 +296,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();
             }
@@ -220,17 +307,12 @@ export default class Websock {
     }
 
     // private methods
-    _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);
-    }
 
     // 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.
+    // unnecessary 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
@@ -246,8 +328,8 @@ export default class Websock {
         // 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 < minFit) {
-                throw new Error("Receive Queue buffer exceeded " + MAX_RQ_GROW_SIZE + " bytes, and the new message could not fit");
+            if (this._rQbufferSize - (this._rQlen - this._rQi) < minFit) {
+                throw new Error("Receive queue buffer exceeded " + MAX_RQ_GROW_SIZE + " bytes, and the new message could not fit");
             }
         }
 
@@ -256,11 +338,7 @@ export default class Websock {
             this._rQ = new Uint8Array(this._rQbufferSize);
             this._rQ.set(new Uint8Array(oldRQbuffer, this._rQi, this._rQlen - this._rQi));
         } else {
-            if (ENABLE_COPYWITHIN) {
-                this._rQ.copyWithin(0, this._rQi, this._rQlen);
-            } else {
-                this._rQ.set(new Uint8Array(this._rQ.buffer, this._rQi, this._rQlen - this._rQi));
-            }
+            this._rQ.copyWithin(0, this._rQi, this._rQlen);
         }
 
         this._rQlen = this._rQlen - this._rQi;
@@ -268,25 +346,22 @@ export default class Websock {
     }
 
     // push arraybuffer values onto the end of the receive que
-    _DecodeMessage(data) {
-        const u8 = new Uint8Array(data);
+    _recvMessage(e) {
+        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;
+        }
+        const u8 = new Uint8Array(e.data);
         if (u8.length > this._rQbufferSize - this._rQlen) {
             this._expandCompactRQ(u8.length);
         }
         this._rQ.set(u8, this._rQlen);
         this._rQlen += u8.length;
-    }
 
-    _recvMessage(e) {
-        this._DecodeMessage(e.data);
-        if (this.rQlen > 0) {
+        if (this._rQlen - this._rQi > 0) {
             this._eventHandlers.message();
-            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 {
             Log.Debug("Ignoring empty message");
         }

defaults.json

@@ -0,0 +1 @@
+{}