Console: upgrade noVNC from v1.2.0 to v1.4.0 (#7281)

* noVNC: apply noVNC-v1.2.0-v1.4.0.patch

1. Create the patch by commands

git clone -b v1.2.0 https://github.com/novnc/noVNC.git .
git checkout v1.4.0
git diff v1.2.0 >noVNC-v1.2.0-v1.4.0.patch

2. Apply the patch by

cd systemvm/agent/noVNC
patch -p1 <noVNC-v1.2.0-v1.4.0.patch

* noVNC: apply noVNC-v1.2.0-v1.4.0.patch part2

fix conflicts

* noVNC: svg to png

* noVNC: remove systemvm/agent/noVNC/tests/

* noVNC: remove systemvm/agent/noVNC/.github/

Author: weizhouapache

systemvm/agent/noVNC/app/error-handler.js

@@ -6,61 +6,74 @@
  * 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 uncought 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 */
+        // Work around Firefox bug:
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=1685038
+        if (event.message === "ResizeObserver loop completed with undelivered notifications.") {
+            return false;
+        }
 
-(function _scope() {
-    "use strict";
+        // Only show the initial error
+        if (msg.hasChildNodes()) {
+            return false;
+        }
 
-    // Fallback for all uncought errors
-    function handleError(event, err) {
-        try {
-            const msg = document.getElementById('noVNC_fallback_errormsg');
+        let div = document.createElement("div");
+        div.classList.add('noVNC_message');
+        div.appendChild(document.createTextNode(event.message));
+        msg.appendChild(div);
 
-            // Only show the initial error
-            if (msg.hasChildNodes()) {
-                return false;
+        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);
+        }
 
-            let div = document.createElement("div");
-            div.classList.add('noVNC_message');
-            div.appendChild(document.createTextNode(event.message));
+        if (err && err.stack) {
+            div = document.createElement("div");
+            div.className = 'noVNC_stack';
+            div.appendChild(document.createTextNode(err.stack));
             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);
-            }
+        document.getElementById('noVNC_fallback_error')
+            .classList.add("noVNC_open");
 
-            if (err && err.stack) {
-                div = document.createElement("div");
-                div.className = 'noVNC_stack';
-                div.appendChild(document.createTextNode(err.stack));
-                msg.appendChild(div);
-            }
+    } catch (exc) {
+        document.write("noVNC encountered an error.");
+    }
 
-            document.getElementById('noVNC_fallback_error')
-                .classList.add("noVNC_open");
-        } catch (exc) {
-            document.write("noVNC encountered an error.");
-        }
-        // Don't return true since this would prevent the error
-        // from being printed to the browser console.
-        return false;
+    // 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
     }
-    window.addEventListener('error', function onerror(evt) { handleError(evt, evt.error); });
-    window.addEventListener('unhandledrejection', function onreject(evt) { handleError(evt.reason, evt.reason); });
-})();
+
+    // 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));

systemvm/agent/noVNC/app/images/icons/Makefile

@@ -1,42 +1,42 @@
-ICONS := \
-	novnc-16x16.png \
-	novnc-24x24.png \
-	novnc-32x32.png \
-	novnc-48x48.png \
-	novnc-64x64.png
-
-ANDROID_LAUNCHER := \
-	novnc-48x48.png \
-	novnc-72x72.png \
-	novnc-96x96.png \
-	novnc-144x144.png \
-	novnc-192x192.png
-
-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)
+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)
+
+#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)
+
+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