For #14145 - Add pinned badge for pinned sites

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

@@ -16,6 +16,7 @@ import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
 import mozilla.components.feature.top.sites.TopSite
 import mozilla.components.feature.top.sites.TopSite.Type.DEFAULT
 import mozilla.components.feature.top.sites.TopSite.Type.FRECENT
+import mozilla.components.feature.top.sites.TopSite.Type.PINNED
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.components
 import org.mozilla.fenix.ext.loadIntoView
@@ -54,8 +55,14 @@ class TopSiteItemViewHolder(
     }
 
     fun bind(topSite: TopSite) {
-        this.topSite = topSite
         top_site_title.text = topSite.title
+
+        pin_indicator.visibility = if (topSite.type == PINNED) {
+            View.VISIBLE
+        } else {
+            View.GONE
+        }
+
         when (topSite.url) {
             SupportUtils.POCKET_TRENDING_URL -> {
                 favicon_image.setImageDrawable(getDrawable(itemView.context, R.drawable.ic_pocket))
@@ -64,6 +71,8 @@ class TopSiteItemViewHolder(
                 itemView.context.components.core.icons.loadIntoView(favicon_image, topSite.url)
             }
         }
+
+        this.topSite = topSite
     }
 
     private fun onTouchEvent(

app/src/main/res/drawable/ic_pin.xml

@@ -0,0 +1,13 @@
+<?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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:pathData="M20.207 18.793L15.914 14.5l3.043-3.043a1 1 0 0 0 0-1.414A5.234 5.234 0 0 0 15.232 8.5h-0.214a3.269 3.269 0 0 1-3.268-3.268V4.5a1 1 0 0 0-1.707-0.707l-6.25 6.25A1 1 0 0 0 4.5 11.75h0.732A3.269 3.269 0 0 1 8.5 15.018v0.211A4.8 4.8 0 0 0 10.087 19a1 1 0 0 0 1.37-0.041l3.043-3.045 4.293 4.293a1 1 0 0 0 1.414-1.414z"
+        android:fillColor="?mozac_widget_favicon_border_color"/>
+</vector>

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

@@ -2,30 +2,57 @@
 <!-- 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/. -->
-<LinearLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/top_site_item"
     android:layout_width="match_parent"
     android:layout_height="@dimen/top_sites_item_size"
-    android:layout_marginBottom="@dimen/top_sites_item_margin_top"
+    android:layout_marginTop="@dimen/top_sites_item_margin_top"
+    android:layout_marginBottom="@dimen/top_sites_item_margin_bottom"
     android:orientation="vertical">
 
-
     <ImageView
         android:id="@+id/favicon_image"
         style="@style/TopSite.Favicon"
         android:layout_gravity="center"
-        android:importantForAccessibility="no" />
+        android:importantForAccessibility="no"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
 
     <TextView
         android:id="@+id/top_site_title"
         android:layout_width="64dp"
         android:layout_height="wrap_content"
+        android:layout_gravity="center_horizontal"
+        android:layout_marginTop="@dimen/top_sites_text_margin_top"
         android:gravity="center"
         android:singleLine="true"
-        android:layout_gravity="center_horizontal"
         android:textColor="@color/top_site_title_text"
         android:textSize="10sp"
-        android:layout_marginTop="@dimen/top_sites_text_margin_top" />
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/favicon_image"
+        tools:ignore="SmallSp" />
+
+    <FrameLayout
+        android:id="@+id/pin_indicator"
+        android:layout_width="16dp"
+        android:layout_height="16dp"
+        android:elevation="5dp"
+        android:translationX="8dp"
+        android:translationY="-8dp"
+        android:visibility="gone"
+        app:layout_constraintRight_toLeftOf="@id/favicon_image"
+        app:layout_constraintTop_toTopOf="@id/favicon_image">
+
+        <View
+            android:id="@+id/pin_icon"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            android:layout_gravity="center"
+            android:background="@drawable/ic_pin" />
+    </FrameLayout>
 
-</LinearLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -174,7 +174,8 @@
     <dimen name="top_sites_favicon_size">40dp</dimen>
     <dimen name="top_sites_favicon_padding">4dp</dimen>
     <dimen name="top_sites_item_size">64dp</dimen>
-    <dimen name="top_sites_item_margin_top">12dp</dimen>
+    <dimen name="top_sites_item_margin_top">8dp</dimen>
+    <dimen name="top_sites_item_margin_bottom">12dp</dimen>
     <dimen name="top_sites_text_margin_top">8dp</dimen>
 
     <!-- a11y -->