feat(GODT-2770): proof of concept for web view as overlay.

internal/frontend/bridge-gui/bridge-gui/CMakeLists.txt

@@ -75,7 +75,7 @@ if(NOT UNIX)
     set(CMAKE_INSTALL_BINDIR ".")
 endif(NOT UNIX)
 
-find_package(Qt6 COMPONENTS Core Quick Qml QuickControls2 Widgets Svg REQUIRED)
+find_package(Qt6 COMPONENTS Core Quick Qml QuickControls2 Widgets Svg WebView REQUIRED)
 qt_standard_project_setup()
 set(CMAKE_AUTORCC ON)
 message(STATUS "Using Qt ${Qt6_VERSION}")
@@ -148,6 +148,7 @@ target_link_libraries(bridge-gui
     Qt6::Qml
     Qt6::QuickControls2
     Qt6::Svg
+    Qt6::WebView
     sentry::sentry
     bridgepp
     )

internal/frontend/bridge-gui/bridge-gui/Resources.qrc

@@ -100,8 +100,9 @@
         <file>qml/Proton/TextArea.qml</file>
         <file>qml/Proton/TextField.qml</file>
         <file>qml/Proton/Toggle.qml</file>
+        <file>qml/Proton/WebViewOverlay.qml</file>
         <file>qml/QuestionItem.qml</file>
-	<file>qml/Resources/bug_report_flow.json</file>
+        <file>qml/Resources/bug_report_flow.json</file>
         <file>qml/SettingsItem.qml</file>
         <file>qml/SettingsView.qml</file>
         <file>qml/SetupGuide.qml</file>

internal/frontend/bridge-gui/bridge-gui/main.cpp

@@ -29,6 +29,7 @@
 #include <bridgepp/Log/Log.h>
 #include <bridgepp/Log/LogUtils.h>
 #include <bridgepp/ProcessMonitor.h>
+#include <QtWebView>
 
 
 #ifdef Q_OS_MACOS
@@ -284,6 +285,7 @@ int main(int argc, char *argv[]) {
         QCoreApplication::setAttribute(Qt::AA_UseSoftwareOpenGL); // must be called before instantiating the BridgeApp
     }
 
+    QtWebView::initialize();
     BridgeApp guiApp(argc, argv);
     initSentry();
     auto sentryCloser = qScopeGuard([] { sentry_close(); });

internal/frontend/bridge-gui/bridge-gui/qml/HelpView.qml

@@ -37,7 +37,7 @@ SettingsView {
 
         onClicked: {
             Backend.notifyKBArticleClicked("https://proton.me/support/bridge");
-            Qt.openUrlExternally("https://proton.me/support/bridge");
+            Backend.showHelp()
         }
     }
     SettingsItem {

internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml

@@ -36,7 +36,7 @@ ApplicationWindow {
         }
     }
     function showHelp() {
-        contentWrapper.showHelp();
+        showWebViewOverlay("https://proton.me/support/bridge");
     }
     function showLocalCacheSettings() {
         contentWrapper.showLocalCacheSettings();
@@ -55,6 +55,10 @@ ApplicationWindow {
             return;
         contentWrapper.showSignIn(username);
     }
+    function showWebViewOverlay(url) {
+        webViewOverlay.visible = true;
+        webViewOverlay.url = url;
+    }
 
     colorScheme: ProtonStyle.currentStyle
     height: _defaultHeight
@@ -196,4 +200,11 @@ ApplicationWindow {
         id: splashScreen
         colorScheme: root.colorScheme
     }
+    WebViewOverlay {
+        id: webViewOverlay
+        anchors.fill: parent
+        colorScheme: root.colorScheme
+        url: ""
+        visible: false
+    }
 }

internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml

@@ -367,4 +367,14 @@ QtObject {
     property int title_font_size: 20
     property int title_line_height: 24
     property real tooltip_radius: 8 * root.px // px
+
+    // WebView overlay styling
+    property real web_view_button_width: 320 * root.px
+    property real web_view_corner_radius: 10 * root.px
+    property real web_view_overlay_horizontal_margin: 10 * root.px
+    property real web_view_overlay_vertical_margin: web_view_corner_radius
+    property real web_view_overlay_opacity: 0.6
+    property real web_view_overlay_button_vertical_margin: 10 * root.px
+    property real web_view_overlay_margin: 50 * root.px
+    property real web_view_overley_border_width: 1 * root.px
 }

internal/frontend/bridge-gui/bridge-gui/qml/Proton/WebViewOverlay.qml

@@ -0,0 +1,74 @@
+// Copyright (c) 2023 Proton AG
+// This file is part of Proton Mail Bridge.
+// Proton Mail Bridge is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+// Proton Mail Bridge is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License
+// along with Proton Mail Bridge. If not, see <https://www.gnu.org/licenses/>.
+import QtQml
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.impl
+import QtWebView
+import QtQuick.Templates as T
+import "." as Proton
+
+Item {
+    id: root
+
+    property ColorScheme colorScheme
+    property url url
+
+    Rectangle {
+        anchors.fill: parent
+        color: "#000"
+        opacity: ProtonStyle.web_view_overlay_opacity
+    }
+    Rectangle {
+        anchors.fill: parent
+        anchors.margins: ProtonStyle.web_view_overlay_margin
+        color: root.colorScheme.background_norm
+        radius: ProtonStyle.web_view_corner_radius
+
+        ColumnLayout {
+            anchors.bottomMargin: 0
+            anchors.fill: parent
+            anchors.leftMargin: ProtonStyle.web_view_overlay_horizontal_margin
+            anchors.rightMargin: ProtonStyle.web_view_overlay_horizontal_margin
+            anchors.topMargin: ProtonStyle.web_view_overlay_vertical_margin
+            spacing: 0
+
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                border.color: root.colorScheme.border_norm
+                border.width: ProtonStyle.web_view_overley_border_width
+
+                WebView {
+                    anchors.fill: parent
+                    anchors.margins: ProtonStyle.web_view_overley_border_width
+                    url: root.url
+                }
+            }
+            Button {
+                Layout.alignment: Qt.AlignCenter
+                Layout.bottomMargin: ProtonStyle.web_view_overlay_button_vertical_margin
+                Layout.preferredWidth: ProtonStyle.web_view_button_width
+                Layout.topMargin: ProtonStyle.web_view_overlay_button_vertical_margin
+                colorScheme: root.colorScheme
+                text: qsTr("Close")
+
+                onClicked: {
+                    root.url = "";
+                    root.visible = false;
+                }
+            }
+        }
+    }
+}

internal/frontend/bridge-gui/bridge-gui/qml/Proton/qmldir

@@ -36,3 +36,4 @@ Switch 4.0 Switch.qml
 TextArea 4.0 TextArea.qml
 TextField 4.0 TextField.qml
 Toggle 4.0 Toggle.qml
+WebViewOverlay 4.0 WebViewOverlay.qml