VPN-6796: Update Qt/Wasm to 6.6.3

.github/workflows/wasm_tests.yaml

@@ -23,18 +23,19 @@ jobs:
 
   build_test_app:
     name: Wasm Qt6
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     outputs:
       matrix: ${{ steps.enumerate.outputs.tests }}
     env:
-      QTVERSION: 6.2.4
+      QTVERSION: 6.6.3
 
     steps:
       - name: Clone repository
         uses: actions/checkout@v4
         with:
           submodules: "true"
 
+      - uses: seanmiddleditch/gha-setup-ninja@master
       - uses: actions/setup-python@v5
         with:
           python-version: "3.9"
@@ -44,24 +45,26 @@ jobs:
       - name: Install Qt6
         shell: bash
         run: |
-          # qt6.2.4 for wasm needs the desktop linux installation
-          python -m aqt install-qt -O /opt linux desktop $QTVERSION
-          python -m aqt install-qt -O /opt linux desktop $QTVERSION wasm_32 -m qtcharts qtwebsockets qt5compat
+          # Qt for wasm needs the desktop linux installation
+          python -m aqt install-qt -O /opt linux desktop $QTVERSION gcc_64 -m qtshadertools
+          python -m aqt install-qt -O /opt linux desktop $QTVERSION wasm_singlethread -m qtcharts qtwebsockets qt5compat qtshadertools
 
       - name: Setup emsdk
         uses: mymindstorm/setup-emsdk@v14
         with:
           # Emscripten does not guarantee ABI compatibility, we should use the
           # same version used to build Qt. See:
           # https://doc.qt.io/qt-6/wasm.html#installing-emscripten
-          version: 2.0.14
+          version: 3.1.37
 
       - name: Compile test client
         shell: bash
         run: |
-          export PATH=/opt/$QTVERSION/wasm_32/bin:/opt/$QTVERSION/gcc_64/bin:$PATH
+          export PATH=/opt/$QTVERSION/wasm_singlethread/bin:/opt/$QTVERSION/gcc_64/bin:$PATH
           mkdir -p build/cmake
-          /opt/$QTVERSION/wasm_32/bin/qt-cmake -S $(pwd) -B build/cmake -DCMAKE_BUILD_TYPE=Release \
+          chmod +x /opt/$QTVERSION/wasm_singlethread/bin/qt-cmake
+          /opt/$QTVERSION/wasm_singlethread/bin/qt-cmake -S $(pwd) -B build/cmake -GNinja \
+            -DCMAKE_BUILD_TYPE=Release \
             -DQT_HOST_PATH_CMAKE_DIR=/opt/$QTVERSION/gcc_64/lib/cmake \
             -DQT_HOST_PATH=/opt/$QTVERSION/gcc_64 \
             -DBUILD_TESTS=OFF
@@ -96,14 +99,12 @@ jobs:
     needs:
       - build_test_app
       - build_test_addons
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     timeout-minutes: 45
     strategy:
       fail-fast: false # Don't cancel other jobs if a test fails
       matrix:
         test: ${{ fromJson(needs.build_test_app.outputs.matrix) }}
-    env:
-      QTVERSION: 6.2.4
 
     steps:
       - name: Clone repository

docs/index.mdx

@@ -15,31 +15,6 @@ security, we will always put your privacy first._
 
 See: https://vpn.mozilla.org
 
-export const Grid = ({children}) => (
-  <span
-    style={{
-      display: "grid",
-      gridTemplateColumns: "2fr 1fr",
-      gridColumnGap: "20px",
-    }}>
-    {children}
-  </span>
-);
-export const Preview = ({children}) =>(<iframe
-    src="https://firefox-ci-tc.services.mozilla.com/api/index/v1/task/mozillavpn.v2.mozilla-vpn-client.branch.main.latest.build.wasm/artifacts/public%2Fbuild%2Fembedded.html"
-    style={{
-      width: "390px",
-      height: "670px",
-      border: "15px solid black",
-      borderRadius: "20px",
-      gridColumn: 2,
-      gridRow: 1,
-      gridRowEnd: "auto",
-      gridRowEnd: 1000,
-    }}
-  />
-);
-
 <Grid>
   <div>
   ## Getting Involved

src/cmake/wasm.cmake

@@ -2,6 +2,8 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+list(APPEND QT_WASM_EXTRA_EXPORTED_METHODS ENV)
+
 target_sources(mozillavpn PRIVATE
      ${CMAKE_CURRENT_SOURCE_DIR}/platforms/macos/macosmenubar.cpp
      ${CMAKE_CURRENT_SOURCE_DIR}/platforms/macos/macosmenubar.h
@@ -21,7 +23,7 @@ target_sources(mozillavpn PRIVATE
      ${CMAKE_CURRENT_SOURCE_DIR}/tasks/purchase/taskpurchase.h
 )
 set_target_properties(mozillavpn PROPERTIES
-  LINK_FLAGS "-gseparate-dwarf=mozillavpn.debug.wasm")
+  LINK_FLAGS "-gseparate-dwarf=${CMAKE_BINARY_DIR}/src/mozillavpn.debug.wasm")
 
 
 set(WASM_FINAL_DIR ${CMAKE_BINARY_DIR}/wasm_build)

src/settings/settingsmanager.cpp

@@ -11,7 +11,9 @@
 #include <QSettings>
 #include <QStandardPaths>
 
-#include "cryptosettings.h"
+#ifndef MZ_WASM
+#  include "cryptosettings.h"
+#endif
 #include "leakdetector.h"
 #include "logger.h"
 
@@ -51,6 +53,15 @@ QString SettingsManager::getOrganizationName() {
   return name;
 }
 
+// static
+QSettings::Format SettingsManager::getFormat() {
+#ifndef MZ_WASM
+  return CryptoSettings::format();
+#else
+  return QSettings::NativeFormat;
+#endif
+}
+
 #ifdef UNIT_TEST
 // static
 void SettingsManager::testCleanup() {
@@ -62,8 +73,8 @@ void SettingsManager::testCleanup() {
 
 SettingsManager::SettingsManager(QObject* parent)
     : QObject(parent),
-      m_settings(CryptoSettings::format(), QSettings::UserScope,
-                 getOrganizationName(), SETTINGS_APP_NAME),
+      m_settings(getFormat(), QSettings::UserScope, getOrganizationName(),
+                 SETTINGS_APP_NAME),
       m_settingsConnector(this, &m_settings) {
   MZ_COUNT_CTOR(SettingsManager);
 

src/settings/settingsmanager.h

@@ -150,6 +150,7 @@ class SettingsManager final : public QObject, public LogSerializer {
   void registerSetting(Setting* setting);
 
   static QString getOrganizationName();
+  static QSettings::Format getFormat();
 
  private:
   // A map of _all_ Setting objects created during a run of the Mozilla VPN

taskcluster/docker/wasm/Dockerfile

@@ -2,35 +2,33 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-ARG DOCKER_IMAGE_PARENT=ubuntu:20.04
+ARG DOCKER_IMAGE_PARENT=ubuntu:22.04
 FROM $DOCKER_IMAGE_PARENT
 
 MAINTAINER Sebastian Streich <[email protected]>
 
-ARG QT_VERSION=6.2.4
+ARG QT_VERSION=6.6.3
 
 VOLUME /builds/worker/checkouts
 
 ENV CURL='curl --location --retry 5' \
     LANG='en_US.UTF-8' \
     TERM='dumb'
 
-RUN apt-get -q update && apt-get install -y tzdata && apt-get install -y git ccache python3 python3-pip wget libglib2.0-0 ninja-build && \
+RUN apt-get -q update && apt-get install -y tzdata && \
+    apt-get install -y git ccache python3 python3-pip wget libglib2.0-0 cmake ninja-build && \
     python3 -m pip install aqtinstall && \
     # qt6 for wasm needs the desktop linux installation
-    python3 -m aqt install-qt -O /opt linux desktop ${QT_VERSION} gcc_64 && \
-    python3 -m aqt install-qt -O /opt linux desktop ${QT_VERSION} wasm_32 -m qtwebsockets qt5compat && \
+    python3 -m aqt install-qt -O /opt linux desktop ${QT_VERSION} gcc_64 -m qtshadertools && \
+    python3 -m aqt install-qt -O /opt linux desktop ${QT_VERSION} wasm_singlethread -m qtwebsockets qt5compat qtshadertools && \
+    chmod +x /opt/${QT_VERSION}/wasm_singlethread/bin/qt-cmake && \
     cd /opt/ && \
     git clone https://github.com/emscripten-core/emsdk.git && \
     cd emsdk && \
-    ./emsdk install 2.0.14 && \
-    ./emsdk activate 2.0.14 && \
-    wget https://github.com/Kitware/CMake/releases/download/v3.24.0-rc4/cmake-3.24.0-rc4-linux-x86_64.sh && \
-    chmod +x cmake-3.24.0-rc4-linux-x86_64.sh && \
-    mkdir /tmp/cmake && \
-    ./cmake-3.24.0-rc4-linux-x86_64.sh --skip-license --prefix=/tmp/cmake
+    ./emsdk install 3.1.37 && \
+    ./emsdk activate 3.1.37
 
 ENV QTPATH=/opt/${QT_VERSION}/
 ENV EMSDKPATH=/opt/emsdk/
 
-ENV PATH="/opt/${QT_VERSION}/gcc_64/bin:${PATH}:/tmp/cmake/bin"
+ENV PATH="/opt/${QT_VERSION}/gcc_64/bin:${PATH}"

taskcluster/kinds/docker-image/kind.yml

@@ -36,7 +36,7 @@ tasks:
         parent: base
         symbol: I(wasm)
         args:
-            QT_VERSION: 6.2.4
+            QT_VERSION: 6.6.3
     linux-qt6-build:
         parent: base
         symbol: I(linux-qt6-build)

taskcluster/scripts/build/wasm.sh

@@ -14,9 +14,9 @@ git submodule update --init --depth 1
 
 pip3 install -r requirements.txt
 
-export PATH="$QTPATH/wasm_32/bin:$PATH"
+export PATH="$QTPATH/wasm_singlethread/bin:$PATH"
 mkdir build
-$QTPATH/wasm_32/bin/qt-cmake -S . -B build \
+$QTPATH/wasm_singlethread/bin/qt-cmake -S . -B build \
     -DCMAKE_BUILD_TYPE=MinSizeRel \
     -DQT_HOST_PATH=/$QTPATH/gcc_64 \
     -DQT_HOST_PATH_CMAKE_DIR=/$QTPATH/gcc_64/lib/cmake \

tests/functional/helperWasm.js

@@ -60,7 +60,7 @@ module.exports = {
   },
 
   async send(msg) {
-    await driver.executeScript(`Module.inspectorCommand("${
+    await driver.executeScript(`instance.inspectorCommand("${
         msg.replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0')}")`);
   },
 }

tests/functional/testSettings.js

@@ -655,11 +655,6 @@ describe('Settings', function() {
 
 
   it('Checking the languages settings', async () => {
-    if (this.ctx.wasm) {
-        // That page is currently broken see: VPN-6798
-        return;
-    }
-
     await vpn.setSetting('languageCode', '');
 
     await vpn.waitForQueryAndClick(

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));
     }
   }
 

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>

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;
 }