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

[mcleinman]

Description

In a meeting on Dec 31, we decided to have two actual assets for each image/animation (rather than doing any recoloring for one-color assets or anything like that). All the themes will either use "dark mode assets" or "light mode assets" - that is, even though we'll likely have more than 2 themes, all will need to work well with one of the two sets of assets. There is a new flag in the theme file to determine which assets to use.

See docs/Components/assets.md (added in this PR) for more details on how this works. (This includes nuggets such as: "the only assets that don't change for dark mode are the flags".)

The dark mode assets will come from design as part of VPN-3225. For testing, I've messed with some of the assets for dark mode (mostly using a lock in place of some regular assets in dark mode, and other similar design horrors).

I created automated tests. They check 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.

These tests aren't perfect. For instance, in the spots that we feed a string into a ListElement, and then apply that string to a MZAssetLookup.imageLookup(someString) - in those cases, #3 isn't properly checked. And in general, several of those tests don't run on animations. (Though we only have 5 animations, and seldom add more to the app.)

In Dev menu: I moved the animation playground under "UI Testing", and created a currently-broken "image playground" (see "next up").

Next up

Another PR as part of VPN-6681. It will include:

• A new debug menu Image Playground, which will show all assets against a dark and a light background. This is mostly to show designers how assets may look.
• Launcher screens for Android and iOS for both dark mode and light mode.

Work to do for the designers:

• Audit which assets are included but not currently used in the code. (There are several.) Can we drop them from the binary?
• Highlight assets that are near-duplicates (so we can maybe remove some): For instance, there are 2 avatars, 2 wrenches, and several info icons that are almost identical.

Not to be done: We are not going to mess with app icons and notification icons, per an earlier discussino.

Testing

There is a debug menu called Theme list. If you change it to the hacky theme, you'll see some assets change (most assets are currently identical in both dark and light mode, but I changed some dark mode assets to awful things just to show the change).

Reference

VPN-6681

Checklist

• My code follows the style guidelines for this project
• I have not added any packages that contain high risk or unknown licenses (GPL, LGPL, MPL, etc. consult with DevOps if in question)
• I have performed a self review of my own code
• I have commented my code PARTICULARLY in hard to understand areas
• I have added thorough tests where needed