Update wasm's index.html to Qt 6.6.3

oskirby · oskirby · commit dce7f2455180 · 2025-02-03T14:48:17.000-08:00
diff --git a/wasm/controller.js b/wasm/controller.js
@@ -126,7 +126,7 @@ class Controller {
   _writeCommand(cmd) {
     return new Promise(resolve => {
       this._waitReadCallback = resolve;
-      Module.inspectorCommand(cmd);
+      mvpnWasm.instance.inspectorCommand(cmd);
     });
   }
 
@@ -169,7 +169,7 @@ function inspectorMessage(obj) {
                  'NotoSansTC-Regular.otf']) {
       fetch(font)
           .then(r => r.arrayBuffer())
-          .then(content => Module.mzLoadFont(font, content));
+          .then(content => mvpnWasm.instance.mzLoadFont(font, content));
     }
   }
 
diff --git a/wasm/index.html b/wasm/index.html
@@ -3,10 +3,15 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+
+    <!--Set visual viewport size for mobile devices to the device size,
+        witch results in a scale of 1 and a 1:1 mapping between CSS pixels
+        and Qt device independent pixels. -->
+    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=0"/>
+
     <title>Mozilla VPN - WebAssembly Viewer</title>
     <link href="//fonts.cdnfonts.com/css/metropolis-2" rel="stylesheet">
-    <link rel="stylesheet" href="main.css"> 
+    <link rel="stylesheet" href="main.css">
     <link rel="icon" type="image/png" href="favicon.ico">
   </head>
   <body onload="mvpnWasm.init()" class="wasm-loading">
@@ -20,9 +25,13 @@ <h1>Mozilla VPN - <span class="web-viewer">WebAssembly Viewer</span></h1>
       <div class="row">
         <div class="col-sm qml-content">
           <p class="loading-error-message">Trouble loading content</p>
-          <img src="img/loader.svg" class="loader" alt="loading icon" />
+          <figure style="overflow:visible;" id="qtspinner">
+            <center style="margin-top:1.5em; line-height:150%">
+              <img src="img/loader.svg" class="loader" alt="loading icon" />
+            </center>
+          </figure>
           <div class="canvas-bg">
-            <canvas id="qmlcanvas" oncontextmenu="event.preventDefault()" contenteditable="false" tabindex="-1"></canvas>
+            <div id="screen"></div>
           </div>
         </div>
         <div class="col-sm controller-content">
@@ -48,6 +57,7 @@ <h1>Welcome to Mozilla VPN Client — WASM</h1>
       </div>
 
       <div id="qtstatus"></div>
+      <noscript>JavaScript is disabled. Please enable JavaScript to use this application.</noscript>
 
     </main>
     <footer>
@@ -60,6 +70,7 @@ <h1>Welcome to Mozilla VPN Client — WASM</h1>
         <svg class="GitHub-logo logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.96 38"><path fill="#20123a" d="M19.48 0a19.49 19.49 0 0 0-6.16 38c1 .18 1.33-.43 1.33-.94v-3.32c-5.44 1.15-6.59-2.64-6.59-2.64a5.14 5.14 0 0 0-2.16-2.85c-1.77-1.21.13-1.18.13-1.18a4.1 4.1 0 0 1 3 2 4.16 4.16 0 0 0 5.67 1.62 4.18 4.18 0 0 1 1.23-2.61c-4.32-.49-8.87-2.16-8.87-9.63a7.51 7.51 0 0 1 2-5.22 7 7 0 0 1 .19-5.16s1.63-.52 5.35 2a18.37 18.37 0 0 1 9.76 0c3.72-2.52 5.35-2 5.35-2a7 7 0 0 1 .19 5.16 7.51 7.51 0 0 1 2 5.22c0 7.49-4.56 9.13-8.9 9.62a4.64 4.64 0 0 1 1.32 3.6v5.35c0 .64.35 1.12 1.34.93A19.48 19.48 0 0 0 19.48 0z"/></svg>
       </a>
     </footer>
+    <script src="mozillavpn.js"></script>
     <script type="text/javascript" src="fxa_endpoints.js"></script>
     <script type="text/javascript" src="guardian_endpoints.js"></script>
     <script type="text/javascript" src="controller.js"></script>
diff --git a/wasm/main.css b/wasm/main.css
@@ -174,7 +174,7 @@ canvas {
 }
 
 /* Keep this in sync with Desktop app height and width from theme.js */
-#qmlcanvas {
+#screen {
 	width: 360px;
 	height: 640px;
 }
diff --git a/wasm/main.js b/wasm/main.js
@@ -7,38 +7,48 @@ class MVPNWasm {
     this._guardianOverrideEndpoints = {};
 
     this._fxaOverrideEndpoints = {};
+
+    this.instance = null;
   }
 
-  init() {
-    const qmlcanvas = document.querySelector('#qmlcanvas');
-    const controlcanvas = document.querySelector('#controlcanvas');
+  async init() {
+    const spinner = document.querySelector('#qtspinner');
+    const screen = document.querySelector('#screen');
     const status = document.querySelector('#qtstatus');
+    const controlcanvas = document.querySelector('#controlcanvas');
     const bodyClassList = document.body.classList;
 
-    const qtLoader = QtLoader({
-      canvasElements: [controlcanvas, qmlcanvas],
-      showLoader: function(loaderStatus) {
-        status.textContent = loaderStatus + '...';
-      },
-      showError: function(errorText) {
-        bodyClassList.remove('wasm-loading');
-        status.textContent = errorText;
-        bodyClassList.add('wasm-loading-error');
-      },
-      showExit: function() {
-        status.textContent = 'Application exit';
-        if (qtLoader.exitCode !== undefined)
-          status.textContent += ' with code ' + qtLoader.exitCode;
-        if (qtLoader.exitText !== undefined)
-          status.textContent += ' (' + qtLoader.exitText + ')';
-      },
-      showCanvas: function() {
-        bodyClassList.remove('wasm-loading');
-        bodyClassList.add('wasm-loaded');
-        status.textContent = '';
-      },
-    });
-    qtLoader.loadEmscriptenModule('mozillavpn');
+    const showUi = (ui) => {
+      [spinner, screen].forEach(element => element.style.display = 'none');
+      if (screen === ui)
+        screen.style.position = 'default';
+      ui.style.display = 'block';
+    }
+
+    try {
+      showUi(spinner);
+      status.innerHTML = 'Loading...';
+
+      this.instance = await qtLoad({
+        qt: {
+          onLoaded: () => showUi(screen),
+          onExit: exitData =>
+          {
+            status.innerHTML = 'Application exit';
+            status.innerHTML +=
+              exitData.code !== undefined ? ` with code ${exitData.code}` : '';
+            status.innerHTML +=
+              exitData.text !== undefined ? ` (${exitData.text})` : '';
+            showUi(spinner);
+          },
+          entryFunction: window.createQtAppInstance,
+          containerElements: [screen],
+        }
+      });
+    } catch (e) {
+      console.error(e);
+      console.error(e.stack);
+    }
 
     const preset = document.querySelector('#preset');
     for (let p of MVPNPresets) {
@@ -73,7 +83,7 @@ class MVPNWasm {
         url == 'https://archive.mozilla.org/pub/vpn/speedtest/50m.data') {
       // 50mb of data is too much to be handled in the browser.
       setTimeout(
-          () => Module.mzNetworkResponse(id, JSON.stringify({
+          () => this.instance.mzNetworkResponse(id, JSON.stringify({
             status: 200,
             body: btoa(String.fromCharCode.apply(null, new Uint8Array(1024)))
           })),
@@ -83,14 +93,14 @@ class MVPNWasm {
 
     if (!obj) {
       fetch(url)
-          .then(async resp => Module.mzNetworkResponse(id, JSON.stringify({
+          .then(async resp => this.instance.mzNetworkResponse(id, JSON.stringify({
             status: resp.status,
             body: btoa(String.fromCharCode.apply(
                 null, new Uint8Array(await resp.arrayBuffer())))
           })))
           .catch(() => {
             console.error('Unable to fetch content for URL', url);
-            Module.mzNetworkResponse(id, JSON.stringify({status: 0, body: ''}));
+            this.instance.mzNetworkResponse(id, JSON.stringify({status: 0, body: ''}));
           });
       return;
     }
@@ -106,7 +116,7 @@ class MVPNWasm {
     }
 
     setTimeout(() => {
-      Module.mzNetworkResponse(
+      this.instance.mzNetworkResponse(
           id,
           JSON.stringify(
               {status: obj.status, body: btoa(JSON.stringify(obj.body))}));
diff --git a/wasm/test.html b/wasm/test.html
@@ -12,11 +12,6 @@
     <title>Mozilla VPN - WebAssembly Viewer</title>
     <link href="//fonts.cdnfonts.com/css/metropolis-2" rel="stylesheet">
     <link rel="stylesheet" href="main.css">
-    <style>
-      /* Make the html body cover the entire (visual) viewport with no scroll bars. */
-      html, body { padding: 0; margin: 0; overflow: hidden; height: 100% }
-      #screen { margin: auto; width: 360px; height: 640px; outline-style: solid; }
-    </style>
     <link rel="icon" type="image/png" href="favicon.ico">
   </head>
   <body onload="init()">
@@ -30,7 +25,11 @@
         <noscript>JavaScript is disabled. Please enable JavaScript to use this application.</noscript>
       </center>
     </figure>
-    <div id="screen"></div>
+    <center>
+      <div class="canvas-bg">
+        <div id="screen"></div>
+      </div>
+    </center>
 
     <footer>
       <a class="icon-link" href="https://www.github.com/mozilla-mobile/mozilla-vpn-client" target="_blank" rel="noopener noreferrer">

Original file line number	Diff line number	Diff line change
`@@ -126,7 +126,7 @@ class Controller {`
`126`	`126`	`_writeCommand(cmd) {`
`127`	`127`	`return new Promise(resolve => {`
`128`	`128`	`this._waitReadCallback = resolve;`
`129`		`- Module.inspectorCommand(cmd);`
	`129`	`+ mvpnWasm.instance.inspectorCommand(cmd);`
`130`	`130`	`});`
`131`	`131`	`}`
`132`	`132`
`@@ -169,7 +169,7 @@ function inspectorMessage(obj) {`
`169`	`169`	`'NotoSansTC-Regular.otf']) {`
`170`	`170`	`fetch(font)`
`171`	`171`	`.then(r => r.arrayBuffer())`
`172`		`- .then(content => Module.mzLoadFont(font, content));`
	`172`	`+ .then(content => mvpnWasm.instance.mzLoadFont(font, content));`
`173`	`173`	`}`
`174`	`174`	`}`
`175`	`175`
Original file line number	Diff line number	Diff line change
`@@ -174,7 +174,7 @@ canvas {`
`174`	`174`	`}`
`175`	`175`
`176`	`176`	`/* Keep this in sync with Desktop app height and width from theme.js */`
`177`		`-#qmlcanvas {`
	`177`	`+#screen {`
`178`	`178`	`width: 360px;`
`179`	`179`	`height: 640px;`
`180`	`180`	`}`