Merge #6602

6602: Add api for customizing the style of the AddonPermissionsAdapter r=csadilek a=Amejia481

Related issue https://github.com/mozilla-mobile/fenix/issues/8520 related Fenix pr https://github.com/mozilla-mobile/fenix/pull/9833

Co-authored-by: Arturo Mejia <arturomejiamarmol@gmail.com>

components/feature/addons/src/main/java/mozilla/components/feature/addons/ui/AddonsManagerAdapter.kt

@@ -5,6 +5,7 @@
 package mozilla.components.feature.addons.ui
 
 import android.graphics.Bitmap
+import android.graphics.Typeface
 import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.TransitionDrawable
 import android.view.LayoutInflater
@@ -16,6 +17,7 @@ import android.widget.TextView
 import androidx.annotation.ColorRes
 import androidx.annotation.StringRes
 import androidx.annotation.VisibleForTesting
+import androidx.cardview.widget.CardView
 import androidx.core.content.ContextCompat
 import androidx.core.view.isVisible
 import androidx.recyclerview.widget.RecyclerView
@@ -45,7 +47,7 @@ private const val VIEW_HOLDER_TYPE_ADDON = 2
  *
  * @property addonCollectionProvider Provider of AMO collection API.
  * @property addonsManagerDelegate Delegate that will provides method for handling the add-on items.
- * @property addons The list of add-on based on the AMO store.
+ * @param addons The list of add-on based on the AMO store.
  * @property style Indicates how items should look like.
  */
 @Suppress("TooManyFunctions", "LargeClass")
@@ -99,6 +101,7 @@ class AddonsManagerAdapter(
         val context = parent.context
         val inflater = LayoutInflater.from(context)
         val view = inflater.inflate(R.layout.mozac_feature_addons_item, parent, false)
+        val iconContainer = view.findViewById<CardView>(R.id.icon_container)
         val iconView = view.findViewById<ImageView>(R.id.add_on_icon)
         val titleView = view.findViewById<TextView>(R.id.add_on_name)
         val summaryView = view.findViewById<TextView>(R.id.add_on_description)
@@ -108,6 +111,7 @@ class AddonsManagerAdapter(
         val addButton = view.findViewById<ImageView>(R.id.add_button)
         return AddonViewHolder(
             view,
+            iconContainer,
             iconView,
             titleView,
             summaryView,
@@ -145,7 +149,8 @@ class AddonsManagerAdapter(
     @VisibleForTesting(otherwise = VisibleForTesting.PRIVATE)
     internal fun bindSection(holder: SectionViewHolder, section: Section) {
         holder.titleView.setText(section.title)
-        style?.maybeSetStatusTextColor(holder.titleView)
+        style?.maybeSetSectionsTextColor(holder.titleView)
+        style?.maybeSetSectionsTypeFace(holder.titleView)
     }
 
     @VisibleForTesting(otherwise = VisibleForTesting.PRIVATE)
@@ -213,6 +218,10 @@ class AddonsManagerAdapter(
             }
         }
 
+        style?.addonBackgroundIconColor?.let {
+            val backgroundColor = ContextCompat.getColor(holder.iconContainer.context, it)
+            holder.iconContainer.setCardBackgroundColor(backgroundColor)
+        }
         fetchIcon(addon, holder.iconView)
         style?.maybeSetAddonNameTextColor(holder.titleView)
         style?.maybeSetAddonSummaryTextColor(holder.summaryView)
@@ -298,15 +307,24 @@ class AddonsManagerAdapter(
         @ColorRes
         val addonNameTextColor: Int? = null,
         @ColorRes
-        val addonSummaryTextColor: Int? = null
+        val addonSummaryTextColor: Int? = null,
+        val sectionsTypeFace: Typeface? = null,
+        @ColorRes
+        val addonBackgroundIconColor: Int? = null
     ) {
-        internal fun maybeSetStatusTextColor(textView: TextView) {
+        internal fun maybeSetSectionsTextColor(textView: TextView) {
             sectionsTextColor?.let {
                 val color = ContextCompat.getColor(textView.context, it)
                 textView.setTextColor(color)
             }
         }
 
+        internal fun maybeSetSectionsTypeFace(textView: TextView) {
+            sectionsTypeFace?.let {
+                textView.typeface = it
+            }
+        }
+
         internal fun maybeSetAddonNameTextColor(textView: TextView) {
             addonNameTextColor?.let {
                 val color = ContextCompat.getColor(textView.context, it)

components/feature/addons/src/main/java/mozilla/components/feature/addons/ui/CustomViewHolder.kt

@@ -8,6 +8,7 @@ import android.view.View
 import android.widget.ImageView
 import android.widget.RatingBar
 import android.widget.TextView
+import androidx.cardview.widget.CardView
 import androidx.recyclerview.widget.RecyclerView
 
 /**
@@ -36,6 +37,7 @@ sealed class CustomViewHolder(view: View) : RecyclerView.ViewHolder(view) {
      */
     class AddonViewHolder(
         view: View,
+        val iconContainer: CardView,
         val iconView: ImageView,
         val titleView: TextView,
         val summaryView: TextView,

components/feature/addons/src/main/res/layout/mozac_feature_addons_item.xml

@@ -12,21 +12,21 @@
     android:background="?android:attr/selectableItemBackground"
     android:orientation="horizontal"
     android:paddingStart="16dp"
-    android:paddingEnd="16dp">
+    android:paddingEnd="0dp">
 
     <androidx.cardview.widget.CardView
         android:id="@+id/icon_container"
-        android:layout_width="48dp"
-        android:layout_height="48dp"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
         android:layout_alignParentStart="true"
         android:layout_marginTop="16dp"
-        android:elevation="0dp"
-        app:cardCornerRadius="30dp">
+        app:cardElevation="0dp"
+        app:cardCornerRadius="20dp">
 
         <ImageView
             android:id="@+id/add_on_icon"
-            android:layout_width="32dp"
-            android:layout_height="32dp"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
             android:layout_gravity="center"
             android:importantForAccessibility="no"
             android:scaleType="fitCenter"
@@ -102,11 +102,13 @@
         android:id="@+id/add_button"
         android:layout_width="48dp"
         android:layout_height="48dp"
+        android:scaleType="center"
+        android:layout_marginStart="0dp"
+        android:layout_marginEnd="6dp"
         android:layout_alignParentEnd="true"
         android:layout_centerVertical="true"
         android:background="?attr/selectableItemBackgroundBorderless"
         android:contentDescription="@string/mozac_feature_addons_install_addon_content_description"
-        android:padding="12dp"
         app:srcCompat="@drawable/mozac_ic_new"
         app:tint="?android:attr/textColorPrimary" />
 </RelativeLayout>

components/feature/addons/src/main/res/layout/mozac_feature_addons_permission_item.xml

@@ -9,16 +9,13 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="?android:attr/selectableItemBackground"
-    android:orientation="vertical"
-    android:paddingStart="16dp"
-    android:paddingEnd="16dp">
+    android:orientation="vertical">
 
     <TextView
         android:id="@+id/permission"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:paddingTop="16dp"
-        android:paddingBottom="16dp"
+        android:padding="16dp"
         android:textSize="16sp"
         android:textColor="?android:attr/textColorPrimary"
         tools:text="Access your data for all websites" />

components/feature/addons/src/main/res/layout/mozac_feature_addons_section_item.xml

@@ -10,6 +10,8 @@
         android:layout_height="wrap_content"
         android:background="?android:attr/selectableItemBackground"
         android:orientation="horizontal"
-        android:padding="16dp"
+        android:paddingTop="16dp"
+        android:paddingStart="16dp"
+        android:paddingEnd="16dp"
         tools:text="Recommended"
         android:textStyle="bold" />

components/feature/addons/src/test/java/mozilla/components/feature/addons/ui/AddonsManagerAdapterTest.kt

@@ -7,6 +7,7 @@ package mozilla.components.feature.addons.amo.mozilla.components.feature.addons.
 import android.view.View
 import android.widget.ImageView
 import android.widget.TextView
+import androidx.cardview.widget.CardView
 import androidx.core.content.ContextCompat
 import androidx.test.ext.junit.runners.AndroidJUnit4
 import kotlinx.coroutines.ExperimentalCoroutinesApi
@@ -116,6 +117,7 @@ class AddonsManagerAdapterTest {
     @Test
     fun `bind add-on`() {
         Locale.setDefault(Locale.ENGLISH)
+        val iconContainer: CardView = mock()
         val titleView: TextView = mock()
         val summaryView: TextView = mock()
         val ratingAccessibleView: TextView = mock()
@@ -125,6 +127,7 @@ class AddonsManagerAdapterTest {
         val addonsManagerAdapterDelegate: AddonsManagerAdapterDelegate = mock()
         val addonViewHolder = CustomViewHolder.AddonViewHolder(
             view = view,
+            iconContainer = iconContainer,
             iconView = mock(),
             titleView = titleView,
             summaryView = summaryView,
@@ -150,11 +153,13 @@ class AddonsManagerAdapterTest {
 
         whenever(titleView.context).thenReturn(testContext)
         whenever(summaryView.context).thenReturn(testContext)
+        whenever(iconContainer.context).thenReturn(testContext)
 
         val style = AddonsManagerAdapter.Style(
             sectionsTextColor = android.R.color.black,
             addonNameTextColor = android.R.color.transparent,
-            addonSummaryTextColor = android.R.color.white
+            addonSummaryTextColor = android.R.color.white,
+            addonBackgroundIconColor = android.R.color.darker_gray
         )
         val adapter = AddonsManagerAdapter(mock(), addonsManagerAdapterDelegate, emptyList(), style)
 
@@ -165,6 +170,7 @@ class AddonsManagerAdapterTest {
         verify(titleView).setTextColor(ContextCompat.getColor(testContext, style.addonNameTextColor!!))
         verify(summaryView).setText("summary")
         verify(summaryView).setTextColor(ContextCompat.getColor(testContext, style.addonSummaryTextColor!!))
+        verify(iconContainer).setCardBackgroundColor(ContextCompat.getColor(testContext, style.addonBackgroundIconColor!!))
         assertNotNull(addonViewHolder.itemView.tag)
 
         addonViewHolder.itemView.performClick()
@@ -181,13 +187,15 @@ class AddonsManagerAdapterTest {
         whenever(titleView.context).thenReturn(testContext)
 
         val style = AddonsManagerAdapter.Style(
-                sectionsTextColor = android.R.color.black
+            sectionsTextColor = android.R.color.black,
+            sectionsTypeFace = mock()
         )
         val adapter = AddonsManagerAdapter(mock(), mock(), emptyList(), style)
 
         adapter.bindSection(addonViewHolder, Section(R.string.mozac_feature_addons_disabled_section))
 
         verify(titleView).setText(R.string.mozac_feature_addons_disabled_section)
+        verify(titleView).typeface = style.sectionsTypeFace
         verify(titleView).setTextColor(ContextCompat.getColor(testContext, style.sectionsTextColor!!))
     }
 
@@ -200,6 +208,7 @@ class AddonsManagerAdapterTest {
         val addonsManagerAdapterDelegate: AddonsManagerAdapterDelegate = mock()
         val addonViewHolder = CustomViewHolder.AddonViewHolder(
             view = view,
+            iconContainer = CardView(testContext),
             iconView = mock(),
             titleView = titleView,
             summaryView = summaryView,

components/ui/icons/src/main/res/drawable/mozac_ic_new.xml

@@ -3,11 +3,11 @@
    - 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/. -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="16dp"
-    android:height="16dp"
-    android:viewportWidth="16"
-    android:viewportHeight="16">
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
     <path
-        android:pathData="M14,7H9V2a1,1 0,0 0,-2 0v5H2a1,1 0,1 0,0 2h5v5a1,1 0,0 0,2 0V9h5a1,1 0,0 0,0 -2z"
+        android:pathData="M13,4a1,1 0,1 0,-2 0v7H4a1,1 0,1 0,0 2h7v7a1,1 0,1 0,2 0v-7h7a1,1 0,1 0,0 -2h-7V4z"
         android:fillColor="@color/mozac_ui_icons_fill" />
 </vector>