For mozilla-mobile#26644 - Apply the wallpaper provided text color to…

… the Fenix logo (backport mozilla-mobile#27009) (mozilla-mobile#27196)

* For mozilla-mobile#26644 - Split the Fenix logo in two images

This will allow us applying a certain tint just for the image containing a text
to have a better contrast with wallpapers.

(cherry picked from commit 103a0cb)

* For mozilla-mobile#26644 - Apply the wallpaper provided text color to the Fenix logo

And to the private mode switcher.

(cherry picked from commit 7b5ba84)

Co-authored-by: Mugurell <[email protected]>

app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt

@@ -5,6 +5,7 @@
 package org.mozilla.fenix.home
 
 import android.annotation.SuppressLint
+import android.content.res.ColorStateList
 import android.content.res.Configuration
 import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.ColorDrawable
@@ -128,7 +129,9 @@ class HomeFragment : Fragment() {
     @VisibleForTesting
     internal lateinit var bundleArgs: Bundle
 
-    private var _binding: FragmentHomeBinding? = null
+    @VisibleForTesting
+    @Suppress("VariableNaming")
+    internal var _binding: FragmentHomeBinding? = null
     private val binding get() = _binding!!
 
     private val homeViewModel: HomeScreenViewModel by activityViewModels()
@@ -968,11 +971,29 @@ class HomeFragment : Fragment() {
                                 text = resources.getString(R.string.wallpaper_select_error_snackbar_message),
                             )
                         }
+                        // If setting a wallpaper failed reset also the contrasting text color.
+                        requireContext().settings().currentWallpaperTextColor = 0L
                         lastAppliedWallpaperName = Wallpaper.defaultName
                     }
                 }
             }
         }
+        // Logo color should be updated in all cases.
+        applyWallpaperTextColor()
+    }
+
+    /**
+     * Apply a color better contrasting with the current wallpaper to the Fenix logo and private mode switcher.
+     */
+    @VisibleForTesting
+    internal fun applyWallpaperTextColor() {
+        val tintColor = when (val color = requireContext().settings().currentWallpaperTextColor.toInt()) {
+            0 -> null // a null ColorStateList will clear the current tint
+            else -> ColorStateList.valueOf(color)
+        }
+
+        binding.wordmarkText.imageTintList = tintColor
+        binding.privateBrowsingButton.imageTintList = tintColor
     }
 
     private fun observeWallpaperUpdates() {

app/src/main/java/org/mozilla/fenix/utils/Settings.kt

@@ -193,6 +193,7 @@ class Settings(private val appContext: Context) : PreferencesHolder {
 
     /**
      * A cache of the text color to use on text overlaying the current wallpaper.
+     * The value will be `0` if the color is unavailable.
      */
     var currentWallpaperTextColor by longPreference(
         appContext.getPreferenceKey(R.string.pref_key_current_wallpaper_text_color),

app/src/main/java/org/mozilla/fenix/wallpapers/WallpapersUseCases.kt

@@ -483,8 +483,10 @@ class WallpapersUseCases(
             }
         }
 
-        private fun selectWallpaper(wallpaper: Wallpaper) {
+        @VisibleForTesting
+        internal fun selectWallpaper(wallpaper: Wallpaper) {
             settings.currentWallpaperName = wallpaper.name
+            settings.currentWallpaperTextColor = wallpaper.textColor ?: 0L
             store.dispatch(AppAction.WallpaperAction.UpdateCurrentWallpaper(wallpaper))
         }
 

app/src/main/res/layout/fragment_home.xml

@@ -48,21 +48,39 @@
                 app:layout_collapseParallaxMultiplier=".167"/>
             <!-- This value needs to be 1.67 * the wordmark parallax value as its 24dp vs 40 -->
 
-            <ImageView
+            <LinearLayout
                 android:id="@+id/wordmark"
                 android:layout_width="wrap_content"
                 android:layout_height="40dp"
                 android:layout_marginStart="16dp"
                 android:layout_marginTop="18dp"
                 android:layout_marginBottom="32dp"
-                android:adjustViewBounds="true"
                 android:clickable="false"
-                android:contentDescription="@string/app_name"
                 android:focusable="false"
                 android:importantForAccessibility="no"
-                app:srcCompat="?fenixLogo"
+                android:orientation="horizontal"
                 app:layout_collapseMode="parallax"
-                app:layout_collapseParallaxMultiplier=".1"/>
+                app:layout_collapseParallaxMultiplier=".1">
+
+                <ImageView
+                    android:id="@+id/wordmarkLogo"
+                    android:layout_width="wrap_content"
+                    android:layout_height="match_parent"
+                    android:layout_marginEnd="10.dp"
+                    android:adjustViewBounds="true"
+                    android:contentDescription="@null"
+                    app:srcCompat="?fenixWordmarkLogo"
+                    tools:ignore="ImageContrastCheck" />
+
+                <ImageView
+                    android:id="@+id/wordmarkText"
+                    android:layout_width="wrap_content"
+                    android:layout_height="@dimen/wordmark_text_height"
+                    android:adjustViewBounds="true"
+                    android:contentDescription="@null"
+                    android:layout_marginTop="@dimen/wordmark_text_margin_top"
+                    app:srcCompat="?fenixWordmarkText" />
+            </LinearLayout>
 
         </com.google.android.material.appbar.CollapsingToolbarLayout>
 

app/src/main/res/values-night/styles.xml

@@ -4,4 +4,9 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <resources>
     <style name="DialogStyleNormal" parent="DialogStyleDark"/>
+
+    <style name="NormalTheme" parent="NormalThemeBase" >
+        <item name="fenixWordmarkText">@drawable/ic_wordmark_text_private</item>
+    </style>
+
 </resources>

app/src/main/res/values/attrs.xml

@@ -67,6 +67,8 @@
     <attr name="privateBrowsingButtonBackground" format="reference" />
     <attr name="privateBrowsingButtonAccent" format="reference" />
     <attr name="fenixLogo" format="reference" />
+    <attr name="fenixWordmarkText" format="reference" />
+    <attr name="fenixWordmarkLogo" format="reference" />
     <attr name="toolbarStartGradient" format="reference"/>
     <attr name="toolbarCenterGradient" format="reference"/>
     <attr name="toolbarEndGradient" format="reference"/>

app/src/main/res/values/dimens.xml

@@ -78,6 +78,8 @@
     <dimen name="home_fragment_top_toolbar_header_margin">60dp</dimen>
     <dimen name="home_item_horizontal_margin">16dp</dimen>
     <dimen name="home_item_vertical_margin">8dp</dimen>
+    <dimen name="wordmark_text_height">18dp</dimen>
+    <dimen name="wordmark_text_margin_top">10dp</dimen>
 
     <!-- Browser Fragment -->
     <!--The size of the gap between the tab preview and content layout.-->

app/src/main/res/values/styles.xml

@@ -119,6 +119,8 @@
 
         <!-- Drawables -->
         <item name="fenixLogo">@drawable/ic_logo_wordmark_normal</item>
+        <item name="fenixWordmarkText">@drawable/ic_wordmark_text_normal</item>
+        <item name="fenixWordmarkLogo">@drawable/ic_wordmark_logo</item>
         <item name="homeBackground">@color/fx_mobile_layer_color_1</item>
         <item name="bottomBarBackground">@drawable/home_bottom_bar_background</item>
         <item name="bottomBarBackgroundTop">@drawable/home_bottom_bar_background_top</item>
@@ -316,6 +318,7 @@
 
         <!-- Drawables -->
         <item name="fenixLogo">@drawable/ic_logo_wordmark_private</item>
+        <item name="fenixWordmarkText">@drawable/ic_wordmark_text_private</item>
         <item name="homeBackground">@drawable/private_home_background_gradient</item>
         <item name="bottomBarBackground">@drawable/private_home_bottom_bar_background_gradient</item>
         <item name="bottomBarBackgroundTop">@drawable/private_home_bottom_bar_background_gradient_top</item>

app/src/nightly/res/values/dimens.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<resources>
+    <!-- Home Fragment -->
+    <dimen name="wordmark_text_height">28dp</dimen>
+    <dimen name="wordmark_text_margin_top">12dp</dimen>
+</resources>

app/src/test/java/org/mozilla/fenix/wallpapers/WallpapersUseCasesTest.kt

@@ -25,6 +25,7 @@ import org.mozilla.fenix.components.appstate.AppAction
 import org.mozilla.fenix.utils.Settings
 import java.util.Calendar
 import java.util.Date
+import kotlin.random.Random
 
 @RunWith(AndroidJUnit4::class)
 class WallpapersUseCasesTest {
@@ -515,18 +516,18 @@ class WallpapersUseCasesTest {
     @Test
     fun `WHEN legacy selected wallpaper usecase invoked THEN storage updated and store receives dispatch`() = runTest {
         val selectedWallpaper = makeFakeRemoteWallpaper(TimeRelation.LATER, "selected")
-        val slot = slot<String>()
-        coEvery { mockFileManager.lookupExpiredWallpaper(any()) } returns null
-        every { mockSettings.currentWallpaperName } returns ""
-        every { mockSettings.currentWallpaperName = capture(slot) } just runs
+        every { mockSettings.currentWallpaperName = any() } just Runs
 
         val wallpaperFileState = WallpapersUseCases.LegacySelectWallpaperUseCase(
             mockSettings,
             appStore,
         ).invoke(selectedWallpaper)
 
         appStore.waitUntilIdle()
-        assertEquals(selectedWallpaper.name, slot.captured)
+
+        verify { mockSettings.currentWallpaperName = selectedWallpaper.name }
+        verify { mockSettings.currentWallpaperTextColor = selectedWallpaper.textColor!! }
+        verify { mockSettings.currentWallpaperCardColor = selectedWallpaper.cardColor!! }
         assertEquals(selectedWallpaper, appStore.state.wallpaperState.currentWallpaper)
         assertEquals(wallpaperFileState, Wallpaper.ImageFileState.Downloaded)
     }
@@ -600,6 +601,50 @@ class WallpapersUseCasesTest {
         assertEquals(wallpaperFileState, Wallpaper.ImageFileState.Error)
     }
 
+    @Test
+    fun `GIVEN a wallpaper with no text color WHEN it is is selected THEN persist the wallpaper name and missing text color and dispatch the update`() {
+        every { mockSettings.currentWallpaperName = any() } just Runs
+        val store = mockk<AppStore>(relaxed = true)
+        val wallpaperFileState = WallpapersUseCases.DefaultSelectWallpaperUseCase(
+            settings = mockSettings,
+            store = store,
+            fileManager = mockk(),
+            downloader = mockk(),
+        )
+        val wallpaper: Wallpaper = mockk {
+            every { name } returns "Test"
+            every { textColor } returns null
+        }
+
+        wallpaperFileState.selectWallpaper(wallpaper)
+
+        verify { mockSettings.currentWallpaperName = "Test" }
+        verify { mockSettings.currentWallpaperTextColor = 0L }
+        verify { store.dispatch(AppAction.WallpaperAction.UpdateCurrentWallpaper(wallpaper)) }
+    }
+
+    @Test
+    fun `GIVEN a wallpaper with available text color WHEN it is is selected THEN persist the wallpaper name and text color and dispatch the update`() {
+        every { mockSettings.currentWallpaperName = any() } just Runs
+        val store = mockk<AppStore>(relaxed = true)
+        val wallpaperFileState = WallpapersUseCases.DefaultSelectWallpaperUseCase(
+            settings = mockSettings,
+            store = store,
+            fileManager = mockk(),
+            downloader = mockk(),
+        )
+        val wallpaper: Wallpaper = mockk {
+            every { name } returns "Test"
+            every { textColor } returns 321L
+        }
+
+        wallpaperFileState.selectWallpaper(wallpaper)
+
+        verify { mockSettings.currentWallpaperName = "Test" }
+        verify { mockSettings.currentWallpaperTextColor = 321L }
+        verify { store.dispatch(AppAction.WallpaperAction.UpdateCurrentWallpaper(wallpaper)) }
+    }
+
     private enum class TimeRelation {
         BEFORE,
         NOW,
@@ -633,8 +678,8 @@ class WallpapersUseCasesTest {
                     endDate = relativeTime,
                     learnMoreUrl = null,
                 ),
-                textColor = null,
-                cardColor = null,
+                textColor = Random.nextLong(),
+                cardColor = Random.nextLong(),
                 thumbnailFileState = Wallpaper.ImageFileState.Unavailable,
                 assetsFileState = Wallpaper.ImageFileState.Unavailable,
             )
@@ -650,8 +695,8 @@ class WallpapersUseCasesTest {
                     endDate = relativeTime,
                     learnMoreUrl = null,
                 ),
-                textColor = null,
-                cardColor = null,
+                textColor = Random.nextLong(),
+                cardColor = Random.nextLong(),
                 thumbnailFileState = Wallpaper.ImageFileState.Unavailable,
                 assetsFileState = Wallpaper.ImageFileState.Unavailable,
             )