[fenix] For https://github.com/mozilla-mobile/fenix/issues/22022 - Composify Customize Home Button and update the background color

app/src/main/java/org/mozilla/fenix/home/sessioncontrol/SessionControlAdapter.kt

@@ -33,7 +33,6 @@ import org.mozilla.fenix.home.sessioncontrol.viewholders.CustomizeHomeButtonView
 import org.mozilla.fenix.home.sessioncontrol.viewholders.NoCollectionsMessageViewHolder
 import org.mozilla.fenix.home.sessioncontrol.viewholders.PrivateBrowsingDescriptionViewHolder
 import org.mozilla.fenix.home.sessioncontrol.viewholders.TabInCollectionViewHolder
-import org.mozilla.fenix.home.topsites.TopSitePagerViewHolder
 import org.mozilla.fenix.home.sessioncontrol.viewholders.onboarding.ExperimentDefaultBrowserCardViewHolder
 import org.mozilla.fenix.home.sessioncontrol.viewholders.onboarding.OnboardingAutomaticSignInViewHolder
 import org.mozilla.fenix.home.sessioncontrol.viewholders.onboarding.OnboardingFinishViewHolder
@@ -46,6 +45,7 @@ import org.mozilla.fenix.home.sessioncontrol.viewholders.onboarding.OnboardingTo
 import org.mozilla.fenix.home.sessioncontrol.viewholders.onboarding.OnboardingTrackingProtectionViewHolder
 import org.mozilla.fenix.home.pocket.PocketStoriesViewHolder
 import org.mozilla.fenix.home.tips.ButtonTipViewHolder
+import org.mozilla.fenix.home.topsites.TopSitePagerViewHolder
 import mozilla.components.feature.tab.collections.Tab as ComponentTab
 
 sealed class AdapterItem(@LayoutRes val viewType: Int) {
@@ -231,6 +231,10 @@ class SessionControlAdapter(
     @SuppressWarnings("ComplexMethod", "LongMethod", "ReturnCount")
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
         when (viewType) {
+            CustomizeHomeButtonViewHolder.LAYOUT_ID -> return CustomizeHomeButtonViewHolder(
+                composeView = ComposeView(parent.context),
+                interactor = interactor
+            )
             PocketStoriesViewHolder.LAYOUT_ID -> return PocketStoriesViewHolder(
                 composeView = ComposeView(parent.context),
                 store = store,
@@ -283,7 +287,6 @@ class SessionControlAdapter(
                 view,
                 interactor
             )
-            CustomizeHomeButtonViewHolder.LAYOUT_ID -> CustomizeHomeButtonViewHolder(view, interactor)
             OnboardingFinishViewHolder.LAYOUT_ID -> OnboardingFinishViewHolder(view, interactor)
             OnboardingToolbarPositionPickerViewHolder.LAYOUT_ID -> OnboardingToolbarPositionPickerViewHolder(
                 view
@@ -303,6 +306,8 @@ class SessionControlAdapter(
 
     override fun onViewRecycled(holder: RecyclerView.ViewHolder) {
         when (holder) {
+            is CustomizeHomeButtonViewHolder,
+            is HistoryMetadataGroupViewHolder,
             is RecentTabViewHolder,
             is PocketStoriesViewHolder -> {
                 // no op

app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CustomizeHomeButtonViewHolder.kt

@@ -5,25 +5,98 @@
 package org.mozilla.fenix.home.sessioncontrol.viewholders
 
 import android.view.View
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.ButtonDefaults.outlinedButtonColors
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.recyclerview.widget.RecyclerView
+import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.R
-import org.mozilla.fenix.databinding.CustomizeHomeListItemBinding
 import org.mozilla.fenix.home.sessioncontrol.CustomizeHomeIteractor
+import org.mozilla.fenix.theme.FirefoxTheme
 
 class CustomizeHomeButtonViewHolder(
-    view: View,
+    val composeView: ComposeView,
     private val interactor: CustomizeHomeIteractor
-) : RecyclerView.ViewHolder(view) {
+) : RecyclerView.ViewHolder(composeView) {
 
     init {
-        val binding = CustomizeHomeListItemBinding.bind(view)
+        composeView.setViewCompositionStrategy(
+            ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
+        )
+        composeView.setContent {
+            FirefoxTheme {
+                Column {
+                    Spacer(modifier = Modifier.height(68.dp))
 
-        binding.customizeHome.setOnClickListener {
+                    CustomizeHomeButton(
-            interactor.openCustomizeHomePage()
+                        onButtonClick = { interactor.openCustomizeHomePage() }
+                    )
+                }
+            }
         }
     }
 
     companion object {
-        const val LAYOUT_ID = R.layout.customize_home_list_item
+        val LAYOUT_ID = View.generateViewId()
     }
 }
+
+/**
+ * A "Customize homepage" button.
+ *
+ * @param onButtonClick Invoked when the user clicks on the button.
+ */
+@Composable
+fun CustomizeHomeButton(
+    onButtonClick: () -> Unit
+) {
+    val backgroundColor = when (isSystemInDarkTheme()) {
+        true -> PhotonColors.DarkGrey50
+        false -> PhotonColors.LightGrey40
+    }
+
+    Button(
+        onClick = { onButtonClick() },
+        modifier = Modifier
+            .padding(horizontal = 16.dp)
+            .fillMaxWidth()
+            .height(36.dp),
+        elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp),
+        colors = outlinedButtonColors(
+            backgroundColor = backgroundColor,
+            contentColor = FirefoxTheme.colors.textPrimary
+        )
+    ) {
+        Text(
+            text = stringResource(R.string.browser_menu_customize_home_1),
+            fontSize = 14.sp,
+            fontFamily = FontFamily(Font(R.font.metropolis_semibold)),
+            letterSpacing = 0.5.sp,
+            lineHeight = 16.sp,
+            maxLines = 1
+        )
+    }
+}
+
+@Composable
+@Preview
+fun CustomizeHomeButtonPreview() {
+    CustomizeHomeButton(onButtonClick = {})
+}

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

@@ -1,29 +0,0 @@
-<?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/. -->
-
-<androidx.constraintlayout.widget.ConstraintLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:layout_marginHorizontal="@dimen/home_item_horizontal_margin"
-    android:layout_marginTop="68dp"
-    android:background="?android:attr/selectableItemBackground">
-
-    <Button
-        android:id="@+id/customize_home"
-        style="@style/NeutralOnboardingButton"
-        android:layout_height="36dp"
-        android:background="@drawable/rounded_button_background"
-        android:clickable="false"
-        android:focusable="false"
-        android:text="@string/browser_menu_customize_home_1"
-        android:gravity="center"
-        android:maxLines="1"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
-</androidx.constraintlayout.widget.ConstraintLayout>

app/src/test/java/org/mozilla/fenix/home/sessioncontrol/CustomizeHomeButtonViewHolderTest.kt

@@ -1,40 +0,0 @@
-/* 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/. */
-
-package org.mozilla.fenix.home.sessioncontrol
-
-import android.view.LayoutInflater
-import io.mockk.mockk
-import io.mockk.verify
-import mozilla.components.support.test.robolectric.testContext
-import org.junit.Before
-import org.junit.Test
-import org.junit.runner.RunWith
-import org.mozilla.fenix.databinding.CustomizeHomeListItemBinding
-import org.mozilla.fenix.helpers.FenixRobolectricTestRunner
-import org.mozilla.fenix.home.sessioncontrol.viewholders.CustomizeHomeButtonViewHolder
-
-@RunWith(FenixRobolectricTestRunner::class)
-class CustomizeHomeButtonViewHolderTest {
-
-    private lateinit var binding: CustomizeHomeListItemBinding
-    private lateinit var interactor: CustomizeHomeIteractor
-
-    @Before
-    fun setup() {
-        binding = CustomizeHomeListItemBinding.inflate(LayoutInflater.from(testContext))
-        interactor = mockk(relaxed = true)
-    }
-
-    @Test
-    fun `hide view and change setting on remove placeholder click`() {
-        CustomizeHomeButtonViewHolder(binding.root, interactor)
-
-        binding.customizeHome.performClick()
-
-        verify {
-            interactor.openCustomizeHomePage()
-        }
-    }
-}