Demo: Basti/systray

nebula/ui/components/MZAnimatedRings.qml

@@ -14,7 +14,6 @@ MZAnimatedRingsShader {
     property real animationProgress
     property real animationOpacity
 
-    anchors.horizontalCenter: parent.horizontalCenter
     animationProgress: 0.0
     animationOpacity: ringAnimationTimer.running ? 1.0 : 0.5
     blending: true

src/CMakeLists.txt

@@ -77,5 +77,6 @@ include(cmake/${MZ_PLATFORM_NAME}.cmake)
 
 
 add_subdirectory(ui)
+
 target_link_libraries(mozillavpn PRIVATE mozillavpn-uiplugin)
 qt_finalize_target(mozillavpn)

src/addons/addon.cpp

@@ -10,6 +10,7 @@
 #include <QJsonArray>
 #include <QJsonDocument>
 #include <QJsonObject>
+#include <QQmlApplicationEngine>
 #include <QVersionNumber>
 
 #include "addonapi.h"

src/commands/commandui.cpp

@@ -434,7 +434,6 @@ int CommandUI::run(QStringList& tokens) {
       }
     }
 #endif
-
     KeyRegenerator keyRegenerator;
     // Let's go.
     return qApp->exec();

src/feature/featurelist.h

@@ -260,3 +260,13 @@ FEATURE(webExtension,    // Feature ID
         QStringList(),         // feature dependencies
         byPlatform({           // default value
                     .windows = true}))
+
+FEATURE(systrayUI,    // Feature ID
+        "systrayUI",  // Feature name
+        byPlatform({  // Can be flipped on
+                    .windows = true,
+                    .macos = true,
+                    .gnu_linux = true}),
+        FeatureCallback_true,  // Can be flipped off
+        QStringList(),         // feature dependencies
+        byPlatform({}))

src/qmlengineholder.cpp

@@ -50,7 +50,8 @@ class NMFactory : public QQmlNetworkAccessManagerFactory, public QObject {
 
 }  // namespace
 
-QmlEngineHolder::QmlEngineHolder(QQmlEngine* engine) : m_engine(engine) {
+QmlEngineHolder::QmlEngineHolder(QQmlApplicationEngine* engine)
+    : m_engine(engine) {
   MZ_COUNT_CTOR(QmlEngineHolder);
 
   Q_ASSERT(engine);

src/qmlengineholder.h

@@ -5,12 +5,12 @@
 #ifndef QMLENGINEHOLDER_H
 #define QMLENGINEHOLDER_H
 
-class QQmlEngine;
+#include <QQmlApplicationEngine>
 class QWindow;
 
 class QmlEngineHolder {
  public:
-  explicit QmlEngineHolder(QQmlEngine* engine);
+  explicit QmlEngineHolder(QQmlApplicationEngine* engine);
 
   QmlEngineHolder(const QmlEngineHolder&) = delete;
   QmlEngineHolder& operator=(const QmlEngineHolder&) = delete;
@@ -23,10 +23,10 @@ class QmlEngineHolder {
 
   static bool exists();
 
-  QQmlEngine* engine() { return m_engine; }
+  QQmlApplicationEngine* engine() { return m_engine; }
 
 #ifdef UNIT_TEST
-  void replaceEngine(QQmlEngine* engine) { m_engine = engine; }
+  void replaceEngine(QQmlApplicationEngine* engine) { m_engine = engine; }
 #endif
 
   QWindow* window() const;
@@ -35,7 +35,7 @@ class QmlEngineHolder {
   bool hasWindow() const;
 
  private:
-  QQmlEngine* m_engine = nullptr;
+  QQmlApplicationEngine* m_engine = nullptr;
 };
 
 #endif  // QMLENGINEHOLDER_H

src/sentry/sentryadapter.cpp

@@ -12,6 +12,7 @@
 #include <sentry.h>
 
 #include <QDir>
+#include <QQmlApplicationEngine>
 #include <QQuickItem>
 #include <QStandardPaths>
 
@@ -181,7 +182,7 @@ void SentryAdapter::declineCrashReporting() {
 
 void SentryAdapter::captureQMLStacktrace(const char* description) {
 #ifndef UNIT_TEST
-  auto engine = QmlEngineHolder::instance()->engine();
+  auto engine = (QQmlEngine*)QmlEngineHolder::instance()->engine();
   auto privateEngine = QQmlEnginePrivate::get(engine);
   QV4::ExecutionEngine* qv4Engine = privateEngine->v4engine();
   QVector<QV4::StackFrame> stackTrace = qv4Engine->stackTrace(15);

src/systemtraynotificationhandler.cpp

@@ -11,12 +11,14 @@
 
 #include "constants.h"
 #include "controller.h"
+#include "feature/feature.h"
 #include "i18nstrings.h"
 #include "leakdetector.h"
 #include "logger.h"
 #include "mozillavpn.h"
 #include "qmlengineholder.h"
 #include "statusicon.h"
+#include "ui/systraywindow/systraywindow.h"
 
 namespace {
 Logger logger("SystemTrayNotificationHandler");
@@ -93,6 +95,8 @@ void SystemTrayNotificationHandler::createStatusMenu() {
 
   m_quitAction = m_menu->addAction(
       "", []() { MozillaVPN::instance()->controller()->quit(); });
+
+  m_systrayWindow = new SysTrayWindow(this);
 }
 
 void SystemTrayNotificationHandler::setStatusMenu() {
@@ -242,6 +246,11 @@ void SystemTrayNotificationHandler::maybeActivated(
 #if defined(MZ_WINDOWS) || defined(MZ_LINUX)
   if (reason == QSystemTrayIcon::DoubleClick ||
       reason == QSystemTrayIcon::Trigger) {
+    auto flag = Feature::get(Feature::Feature_systrayUI);
+    if (flag->isSupported()) {
+      m_systrayWindow->showWindow();
+      return;
+    }
     QmlEngineHolder* engine = QmlEngineHolder::instance();
     engine->showWindow();
   }

src/systemtraynotificationhandler.h

@@ -11,6 +11,7 @@
 
 class QAction;
 class QMenu;
+class SysTrayWindow;
 
 class SystemTrayNotificationHandler : public NotificationHandler {
  public:
@@ -53,6 +54,7 @@ class SystemTrayNotificationHandler : public NotificationHandler {
   QAction* m_separator = nullptr;
   QAction* m_showHideLabel = nullptr;
   QAction* m_quitAction = nullptr;
+  SysTrayWindow* m_systrayWindow;
 };
 
 #endif  // SYSTEMTRAYNOTIFICATIONHANDLER_H

src/theme.cpp

@@ -6,6 +6,7 @@
 
 #include <QDir>
 #include <QJSEngine>
+#include <QQmlApplicationEngine>
 #if QT_VERSION >= QT_VERSION_CHECK(6, 5, 0)
 #  include <QGuiApplication>
 #  include <QStyleHints>

src/ui/CMakeLists.txt

@@ -177,3 +177,5 @@ endif()
 if(${CMAKE_SYSTEM_NAME} STREQUAL "Darwin")
     target_sources(mozillavpn-ui PRIVATE singletons/VPNMacOSUtils.h)
 endif()
+
+add_subdirectory(systraywindow)

src/ui/composer/composerblockbutton.cpp

@@ -8,7 +8,7 @@
 #include <QFile>
 #include <QFileInfo>
 #include <QJsonObject>
-#include <QQmlEngine>
+#include <QQmlApplicationEngine>
 
 #include "addons/addon.h"
 #include "addons/addonapi.h"

src/ui/screens/home/controller/ControllerImage.qml

@@ -363,28 +363,36 @@ Rectangle {
         // gradientGlobe
         id: insetCircle
 
-        height: 32
-        width: 32
-        radius: 16
-        x: 44
-        y: 4
+        // Use relative sizing based on parent
+        height: logo.height * 0.4
+        width: height
+        radius: height / 2
+
+        // Position relative to parent size
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.rightMargin: logo.width * 0.05
+        anchors.topMargin: logo.height * 0.05
+
         antialiasing: true
         smooth: true
 
         Image {
             id: insetIcon
 
-            sourceSize.height: 32
-            sourceSize.width: 32
+            // Scale the icon with the circle
+            sourceSize.height: insetCircle.height
+            sourceSize.width: insetCircle.width
             anchors.centerIn: insetCircle
             opacity: 1
         }
 
         Image {
             id: switchingIcon
             anchors.centerIn: insetCircle
-            sourceSize.height: 32
-            sourceSize.width: 32
+            // Scale the switching icon with the circle
+            sourceSize.height: insetCircle.height
+            sourceSize.width: insetCircle.width
             source: MZAssetLookup.getImageSource("RefreshArrowsForShield")
             opacity: 0
              PropertyAnimation {

src/ui/screens/home/controller/ControllerView.qml

@@ -395,6 +395,7 @@ Item {
         // Make sure we only do the render animation when
         // The element is visible &&
         // the application is not minimized
+        anchors.horizontalCenter: parent.horizontalCenter
         isCurrentyVisible: stackview.depth === 1 &&
             (Qt.application.state === Qt.ApplicationActive ||
             Qt.application.state === Qt.ApplicationInactive)

src/ui/screens/home/controller/VPNToggle.qml

@@ -16,6 +16,7 @@ MZButtonBase {
     // Without a default for toggleColor, there is a flicker on dark mode when tapping into the main screen while VPN is disconnected
     property var toggleColor: (VPNController.isActive() ? MZTheme.colors.vpnToggleConnected : MZTheme.colors.vpnToggleDisconnectedMainSwitch)
     property var toolTipTitle: ""
+    property real toggleScale: 1.0  // Allow scaling the entire toggle
     Accessible.name: toolTipTitle
 
     function handleClick() {

src/ui/systraywindow/CMakeLists.txt

@@ -0,0 +1,28 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# 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/.
+
+qt_add_qml_module(systraywindow
+    VERSION 1.0
+    URI systraywindow
+    STATIC
+    QML_FILES
+        SystrayWindow.qml
+        SystrayCard.qml
+    SOURCES
+        systraywindow.h
+        systraywindow.cpp
+)
+
+target_link_libraries(systraywindow PRIVATE
+    Qt6::Core
+    Qt6::Quick
+    Qt6::Widgets
+)
+
+# Make sure we can find the common headers
+target_include_directories(systraywindow PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/../..
+)
+
+target_link_libraries(mozillavpn PRIVATE systraywindow systraywindowplugin)