VPN-6681: Dark mode images and animations (part 1)

.dictionary

@@ -53,6 +53,7 @@ Mio
 MozillaVPN
 Mozillians
 Mullvad
+NavigationBarButton
 NDK
 NEPacketTunnelProvider
 NONINFRINGEMENT
@@ -250,6 +251,7 @@ sécuriser
 sécurisé
 taskcluster
 th
+theming
 tmp
 toggleable
 tooltip

.github/workflows/linters.yaml

@@ -69,6 +69,10 @@ jobs:
         run: |
           scripts/ci/check_colors.py nebula/ui/themes/
 
+      - name: Check for proper image usage
+        run: |
+          scripts/ci/check_images.py
+
   ktlint:
     name: Run ktLint
     runs-on: ubuntu-latest

docs/Components/assets.md

@@ -0,0 +1,21 @@
+# Assets used in app
+
+To support theming, there are two different versions of all assets (images and animations). There is one for darker themes, and another for lighter themes.
+
+Within each theme's `theme.js` file, there is a line that controls which set of assets should be used: `color.useDarkAssets = false;` (or `= true`, depending on what is most appropriate). And in the QML code, instead of explicitly setting image assets, code is run to utilize the appropriate asset: `MZAssetLookup.getImageSource("ButtonLoader")`.
+
+**The only assets that do not have both dark and light versions are country flags.** The flag assets referenced in `ServerLabel.qml`, `ServerCountry.qml`, and `SystemTrayNotificationHandler.cpp` are expected to explicitly use assets.
+
+**`MozillaVPN::registerNavigationBarButtons' sets up the SVGs for the bar button items. For reasons lost to time, this is done in C++, not QML.** The C++ `NavigationBarButton` class takes assets for both light and dark modes, and chooses the proper one when the theme changes.
+
+### Adding a new asset
+1. Add the asset to the repository.
+2. Add the asset in `nebula/ui/resources/CMakeLists.txt` or `src/ui/resources.qrc`, depending on which folder the asset was placed in.
+3. Add the asset to the `imageLookup` dictionary within `MZAssetLookup.js`.
+4. Use the asset in code (`MZAssetLookup.getImageSource("YourNewName")`).
+
+### Checks and tests
+`check_images.py` is run on each PR. It checks 3 things:
+1. All image and animation names used in `MZAssetLookup` are unique (there are no duplicates).
+2. No QML file uses an explicit image (instead of the proper `MZAssetLookup.getImageSource`), except the expected flags.
+3. The image names called in all `MZAssetLookup.getImageSource` actually exist in the `imageLookup` within `MZAssetLookup`.

nebula/ui/compat/qt6/MZAnimatedRingsShader.qml

@@ -3,9 +3,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import QtQuick 2.0
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 ShaderEffect {
-    property string shaderSrc: "qrc:/nebula/resources/shaders/baked/animatedRings.frag.qsb"
+    property string shaderSrc: MZAssetLookup.getAnimationSource("RingsShader")
 
     fragmentShader: shaderSrc
 }

nebula/ui/components/MZAlert.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.14
 
 import Mozilla.Shared 1.0
 import compat 0.1
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 Rectangle {
     id: alertBox
@@ -51,8 +52,8 @@ Rectangle {
     // Private Properties, will be changed depnding on alertType
     QtObject {
         id: style
-        readonly property string darkCloseIcon: "qrc:/nebula/resources/close-dark.svg"
-        readonly property string whiteCloseIcon: "qrc:/nebula/resources/close-white.svg"
+        readonly property string darkCloseIcon: MZAssetLookup.getImageSource("CloseDark")
+        readonly property string whiteCloseIcon: MZAssetLookup.getImageSource("CloseWhite")
         property var alertColor: MZTheme.colors.normalLevelAccent
         property var alertHoverColor: MZTheme.colors.normalButton.buttonHovered
         property var alertClickColor: MZTheme.colors.normalButton.buttonPressed

nebula/ui/components/MZAvatar.qml

@@ -5,6 +5,7 @@
 import QtQuick 2.0
 
 import compat 0.1
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 Item {
     id: logoRoot
@@ -31,7 +32,7 @@ Item {
         anchors.fill: parent
         fillMode: Image.PreserveAspectFit
         smooth: true
-        source: "qrc:/nebula/resources/avatar-default.png"
+        source: MZAssetLookup.getImageSource("AvatarProfile")
         sourceSize.height: avatarSourceSize
         sourceSize.width: avatarSourceSize
         visible: avatar.status !== Image.Ready

nebula/ui/components/MZButtonLoader.qml

@@ -5,9 +5,10 @@
 import QtQuick 2.5
 
 import Mozilla.Shared 1.0
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 Rectangle {
-    property string iconUrl: "qrc:/nebula/resources/buttonLoader.svg"
+    property string iconUrl: MZAssetLookup.getImageSource("ButtonLoader")
 
     id: loader
     anchors.fill: parent

nebula/ui/components/MZCheckBox.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.14
 
 import Mozilla.Shared 1.0
 import "qrc:/nebula/utils/MZUiUtils.js" as MZUiUtils
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 CheckBox {
     property var uiState: MZTheme.theme.uiState
@@ -81,7 +82,7 @@ CheckBox {
 
     MZIcon {
         id: checkmarkIcon
-        source: "qrc:/nebula/resources/checkmark-blue50.svg"
+        source: MZAssetLookup.getImageSource("CheckmarkNormalColor")
         sourceSize.width: MZTheme.theme.checkmarkHeightWidth
         sourceSize.height: MZTheme.theme.checkmarkHeightWidth
         anchors.centerIn: parent

nebula/ui/components/MZChevron.qml

@@ -5,10 +5,11 @@
 import QtQuick 2.5
 
 import Mozilla.Shared 1.0
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 // MZChevron
 Image {
-    source: "qrc:/nebula/resources/chevron.svg"
+    source: MZAssetLookup.getImageSource("Chevron")
     mirror: MZLocalizer.isRightToLeft
     sourceSize.height: 24
     sourceSize.width: 24

nebula/ui/components/MZExternalLinkListItem.qml

@@ -6,11 +6,12 @@ import QtQuick 2.5
 import QtQuick.Layouts 1.14
 
 import Mozilla.Shared 1.0
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 // MZExternalLinkListItem
 MZClickableRow {
     property alias title: title.text
-    property string iconSource:  "qrc:/nebula/resources/externalLink.svg"
+    property string iconSource: MZAssetLookup.getImageSource("ExternalLink")
     property alias iconMirror: icon.mirror
 
     backgroundColor: MZTheme.colors.clickableRow

nebula/ui/components/MZHelpSheet.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.14
 
 import components 0.1
 import Mozilla.Shared 1.0
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 //SUMMARY: MZHelpSheet is a component derived from MZBottomSheet that opens a drawer from the bottom of the screen who's content
 //is always laid out in a consistnet way by passing in a model with the correct schema, and sizes to fit the content it contains
@@ -85,7 +86,7 @@ MZBottomSheet {
                         Image {
                             anchors.centerIn: parent
 
-                            source: "qrc:/nebula/resources/tip-filled.svg"
+                            source: MZAssetLookup.getImageSource("LightbulbFilled")
                             sourceSize.width: MZTheme.theme.iconSize * 1.5
 
                             mirror: MZLocalizer.isRightToLeft
@@ -131,7 +132,7 @@ MZBottomSheet {
                             sourceSize.height: MZTheme.theme.iconSize
                             sourceSize.width: MZTheme.theme.iconSize
 
-                            source: "qrc:/nebula/resources/close-dark.svg"
+                            source: MZAssetLookup.getImageSource("CloseDark")
                             fillMode: Image.PreserveAspectFit
                         }
                     }

nebula/ui/components/MZInformationCard.qml

@@ -9,6 +9,7 @@ import QtQuick.Window 2.12
 import Mozilla.Shared 1.0
 import compat 0.1
 import components 0.1
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 Rectangle {
     property alias _infoContent: infoContent.data
@@ -94,13 +95,13 @@ Rectangle {
     function getIconImage() {
         switch (cardType) {
         case MZInformationCard.CardType.Info:
-            return "qrc:/nebula/resources/info.svg"
+            return MZAssetLookup.getImageSource("InfoIconThinner")
         case MZInformationCard.CardType.Success:
-            return "qrc:/nebula/resources/success.svg"
+            return MZAssetLookup.getImageSource("SuccessIcon")
         case MZInformationCard.CardType.Warning:
-            return "qrc:/nebula/resources/warning-gray.svg"
+            return MZAssetLookup.getImageSource("WarningIcon")
         case MZInformationCard.CardType.Error:
-            return "qrc:/nebula/resources/warning-gray.svg"
+            return MZAssetLookup.getImageSource("WarningIcon")
         default:
             return console.error("Unable to create view for info card of type: " + cardType)
         }

nebula/ui/components/MZLinkRow.qml

@@ -6,7 +6,7 @@ import QtQuick 2.5
 import QtQuick.Layouts 1.14
 
 import Mozilla.Shared 1.0        
-        
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 RowLayout {
     id: linkRow
@@ -67,7 +67,7 @@ RowLayout {
         buttonColorScheme: MZTheme.colors.clickableRow
         accessibleName: title
         MZIcon {
-            source: "qrc:/nebula/resources/externalLink.svg"
+            source: MZAssetLookup.getImageSource("ExternalLink")
             anchors.centerIn: parent
         }
         onClicked: linkRow.clicked()

nebula/ui/components/MZLoader.qml

@@ -7,6 +7,7 @@ import QtQuick 2.5
 import Mozilla.Shared 1.0
 import Mozilla.VPN 1.0
 import components 0.1
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 Item {
     id: root
@@ -36,7 +37,7 @@ Item {
         anchors.verticalCenter: root.verticalCenter
         sourceSize.height: 80
         fillMode: Image.PreserveAspectFit
-        source: "qrc:/nebula/resources/spinner.svg"
+        source: MZAssetLookup.getImageSource("Spinner")
 
         ParallelAnimation {
             id: startSpinning

nebula/ui/components/MZMenu.qml

@@ -5,6 +5,7 @@
 import QtQuick 2.5
 
 import Mozilla.Shared 1.0
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 Item {
     id: menuBar
@@ -14,7 +15,7 @@ Item {
     property bool accessibleIgnored: false
     property bool btnDisabled: false
     property alias forceFocus: iconButton.focus
-    property string _menuIconButtonSource: "qrc:/nebula/resources/back.svg"
+    property string _menuIconButtonSource: MZAssetLookup.getImageSource("ArrowBack")
     property alias _menuIconButtonMirror: menuIcon.mirror
     property alias _iconButtonAccessibleName: iconButton.accessibleName
     property var _menuOnBackClicked: () => {}

nebula/ui/components/MZPasteButton.qml

@@ -5,14 +5,15 @@
 import QtQuick 2.5
 
 import Mozilla.Shared 1.0
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 MZIconButton {
     accessibleName: MZI18n.GlobalPaste
 
     Image {
         anchors.centerIn: parent
         fillMode: Image.PreserveAspectFit
-        source: "qrc:/nebula/resources/paste.svg"
+        source: MZAssetLookup.getImageSource("Paste")
         sourceSize.height: MZTheme.theme.iconSize * 1.5
         sourceSize.width: MZTheme.theme.iconSize * 1.5
     }

nebula/ui/components/MZPaymentMethod.qml

@@ -6,6 +6,7 @@ import QtQuick 2.5
 import QtQuick.Layouts 1.14
 
 import Mozilla.Shared 1.0
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 RowLayout {
     id: root
@@ -39,57 +40,57 @@ RowLayout {
         switch(paymentMethod) {
             case "amex":
                 return {
-                    icon: "qrc:/ui/resources/payment/amex.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentAmex"),
                     name: MZI18n.PaymentMethodsAmex
                 };
             case "diners":
                 return {
-                    icon: "qrc:/ui/resources/payment/diners.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentDiners"),
                     name: MZI18n.PaymentMethodsDiners
                 };
             case "discover":
                 return {
-                    icon: "qrc:/ui/resources/payment/discover.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentDiscover"),
                     name: MZI18n.PaymentMethodsDiscover
                 };
             case "jcb":
                 return {
-                    icon: "qrc:/ui/resources/payment/jcb.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentJcb"),
                     name: MZI18n.PaymentMethodsJcb
                 };
             case "iap_apple":
                 return {
-                    icon: "qrc:/ui/resources/payment/apple.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentApple"),
                     name: MZI18n.PaymentMethodsIapApple
                 };
             case "iap_google":
                 return {
-                    icon: "qrc:/ui/resources/payment/android.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentGoogle"),
                     name: MZI18n.PaymentMethodsIapGoogle
                 };
             case "mastercard":
                 return {
-                    icon: "qrc:/ui/resources/payment/mastercard.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentMastercard"),
                     name: MZI18n.PaymentMethodsMastercard
                 };
             case "paypal":
                 return {
-                    icon: "qrc:/ui/resources/payment/paypal.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentPayPal"),
                     name: MZI18n.PaymentMethodsPaypal
                 };
             case "unionpay":
                 return {
-                    icon: "qrc:/ui/resources/payment/unionpay.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentUnionPay"),
                     name: MZI18n.PaymentMethodsUnionpay
                 };
             case "visa":
                 return {
-                    icon: "qrc:/ui/resources/payment/visa.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentVisa"),
                     name: MZI18n.PaymentMethodsVisa
                 };
             default:
                 return {
-                    icon: "qrc:/ui/resources/payment/unbranded.svg",
+                    icon: MZAssetLookup.getImageSource("PaymentUnbranded"),
                     name: ""
                 };
         }

nebula/ui/components/MZPopup.qml

@@ -7,6 +7,7 @@ import QtQuick.Controls 2.14
 
 import Mozilla.Shared 1.0
 import compat 0.1
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 Popup {
     id: popup
@@ -57,7 +58,7 @@ Popup {
             anchors.centerIn: closeButton
 
             fillMode: Image.PreserveAspectFit
-            source: "qrc:/nebula/resources/close-darker.svg"
+            source: MZAssetLookup.getImageSource("CloseDarker")
             sourceSize.height: MZTheme.theme.iconSize
             sourceSize.width: MZTheme.theme.iconSize
         }

nebula/ui/components/MZScreenBase.qml

@@ -7,6 +7,7 @@ import QtQuick.Layouts 1.15
 
 import Mozilla.Shared 1.0
 import components 0.1
+import "qrc:/nebula/utils/MZAssetLookup.js" as MZAssetLookup
 
 Item {
     id: root
@@ -32,7 +33,7 @@ Item {
             Layout.preferredWidth: parent.width
             Layout.preferredHeight: MZTheme.theme.menuHeight
 
-            _menuIconButtonSource: stackview.depth === 1 ? "qrc:/nebula/resources/close-dark.svg" : "qrc:/nebula/resources/back.svg"
+            _menuIconButtonSource: stackview.depth === 1 ? MZAssetLookup.getImageSource("CloseDark") : MZAssetLookup.getImageSource("ArrowBack")
             _menuIconButtonMirror:  stackview.depth !== 1 && MZLocalizer.isRightToLeft
             _iconButtonAccessibleName: stackview.depth === 1 ? MZI18n.GlobalClose : MZI18n.GlobalGoBack
             _menuOnBackClicked: () => maybeRequestPreviousScreen()