wasm: fix qtloader.js container element regression

As of Qt 6.5 the html document should not create canvas
elements directly, but instead create div container
elements and let Qt create and manage the canvas elements.

However, qtloaders.js has not been updated to match this
and is still creating canvas elements when given div
elements.

Remove the canvas creation code and invert the primary
and fallback case: config.containerElements is now passed
to instance.qtContainerElements. config.canvasElements
is copied to config.containerElements, if set.

Change-Id: I7372db93ee4de5b23a0a5d992597a3fbd9711a33
Reviewed-by: Mikołaj Boc <Mikolaj.Boc@qt.io>
(cherry picked from commit 417b61b0158def614f4079761f85ccba39fba587)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

1 files changed, 10 insertions, 24 deletions

diff --git a/src/plugins/platforms/wasm/qtloader.js b/src/plugins/platforms/wasm/qtloader.js
index 0419509098..e0f7864627 100644
--- a/src/plugins/platforms/wasm/qtloader.js
+++ b/src/plugins/platforms/wasm/qtloader.js
@@ -165,26 +165,8 @@ function _QtLoader(config)
         while (element.firstChild) element.removeChild(element.firstChild);
     }
 
-    function createCanvas() {
-        var canvas = document.createElement("canvas");
-        canvas.className = "QtCanvas";
-        canvas.style.height = "100%";
-        canvas.style.width = "100%";
-
-        // Set contentEditable in order to enable clipboard events; hide the resulting focus frame.
-        canvas.contentEditable = true;
-        canvas.style.outline = "0px solid transparent";
-        canvas.style.caretColor = "transparent";
-        canvas.style.cursor = "default";
-
-        return canvas;
-    }
-
-    // Set default state handler functions and create canvases if needed
+    // Set default state handler functions
     if (config.containerElements !== undefined) {
-
-        config.canvasElements = config.containerElements.map(createCanvas);
-
         config.showError = config.showError || function(errorText, container) {
             removeChildren(container);
             var errorTextElement = document.createElement("text");
@@ -197,7 +179,7 @@ function _QtLoader(config)
             removeChildren(container);
             var loadingText = document.createElement("text");
             loadingText.className = "QtLoading"
-            loadingText.innerHTML = '<p><center> ${loadingState}...</center><p>';
+            loadingText.innerHTML = "<p><center>" + loadingState + "</center><p>";
             return loadingText;
         };
 
@@ -220,6 +202,8 @@ function _QtLoader(config)
             errorElement.innerHTML = errorHtml;
             return errorElement;
         }
+    } else {
+        config.containerElements = config.canvasElements
     }
 
     config.restartMode = config.restartMode || "DoNotRestart";
@@ -432,7 +416,7 @@ function _QtLoader(config)
 
         self.moduleConfig.mainScriptUrlOrBlob = new Blob([emscriptenModuleSource], {type: 'text/javascript'});
 
-        self.qtContainerElements = config.canvasElements;
+        self.qtContainerElements = config.containerElements;
 
         config.restart = function() {
 
@@ -486,7 +470,8 @@ function _QtLoader(config)
 
         for (container of config.containerElements) {
             var loaderElement = config.showLoader(self.loaderSubState, container);
-            container.appendChild(loaderElement);
+            if (loaderElement !== undefined)
+                container.appendChild(loaderElement);
         }
     }
 
@@ -499,9 +484,10 @@ function _QtLoader(config)
 
         for (var i = 0; i < config.containerElements.length; ++i) {
             var container = config.containerElements[i];
-            var canvas = config.canvasElements[i];
+            var canvas = undefined;
+            if (config.canvasElements !== undefined)
+                canvas = config.canvasElements[i];
             config.showCanvas(canvas, container);
-            container.appendChild(canvas);
         }
     }