For #19281: Add border radius for top sites favicons.

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

@@ -1,17 +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/. -->
-<shape
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:shape="rectangle">
-    <corners android:radius="8dp" />
-    <solid
-        android:color="?mozac_widget_favicon_background_color"
-        tools:color="@color/photonWhite" />
-    <stroke
-        android:width="1dp"
-        android:color="@color/top_sites_border_color"
-        tools:color="@color/photonLightGrey30" />
-</shape>

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

@@ -12,14 +12,18 @@
     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"
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/favicon_card"
+        style="@style/TopSite.FaviconCard"
+        android:importantForAccessibility="noHideDescendants"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent">
+
+        <com.google.android.material.imageview.ShapeableImageView
+            android:id="@+id/favicon_image"
+            style="@style/topSiteFavicon" />
+    </com.google.android.material.card.MaterialCardView>
 
     <TextView
         android:id="@+id/top_site_title"
@@ -36,7 +40,7 @@
         android:textSize="12sp"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/favicon_image"
+        app:layout_constraintTop_toBottomOf="@id/favicon_card"
         tools:ignore="RtlCompat,SmallSp" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -206,12 +206,19 @@
     <dimen name="account_settings_device_name_min_height">48dp</dimen>
 
     <!-- Top sites  -->
-    <dimen name="top_sites_favicon_size">60dp</dimen>
-    <dimen name="top_sites_favicon_padding">12dp</dimen>
     <dimen name="top_sites_item_size">84dp</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>
+    <dimen name="top_sites_favicon_size">36dp</dimen>
+    <dimen name="top_sites_favicon_elevation">0dp</dimen>
+    <dimen name="top_sites_favicon_corner_size">4dp</dimen>
+
+    <dimen name="top_sites_card_size">60dp</dimen>
+    <dimen name="top_sites_card_padding">12dp</dimen>
+    <dimen name="top_sites_card_elevation">6dp</dimen>
+    <dimen name="top_sites_card_radius">8dp</dimen>
+    <dimen name="top_sites_card_stroke_width">1dp</dimen>
 
     <!-- Credit Cards Fragment -->
     <dimen name="credit_cards_saved_cards_item_margin_start">16dp</dimen>

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

@@ -600,13 +600,29 @@
         <item name="behavior_halfExpandedRatio">0.001</item>
     </style>
 
-    <style name="TopSite.Favicon" parent="Mozac.Widgets.Favicon">
+    <style name="TopSite.FaviconCard" parent="Mozac.Widgets.Favicon">
+        <item name="android:layout_width">@dimen/top_sites_card_size</item>
+        <item name="android:layout_height">@dimen/top_sites_card_size</item>
+        <item name="android:padding">@dimen/top_sites_card_padding</item>
+        <item name="cardBackgroundColor">?mozac_widget_favicon_background_color</item>
+        <item name="cardCornerRadius">@dimen/top_sites_card_radius</item>
+        <item name="cardElevation">@dimen/top_sites_card_elevation</item>
+        <item name="strokeColor">@color/top_sites_border_color</item>
+        <item name="strokeWidth">@dimen/top_sites_card_stroke_width</item>
+    </style>
+
+    <style name="topSiteFavicon">
         <item name="android:layout_width">@dimen/top_sites_favicon_size</item>
         <item name="android:layout_height">@dimen/top_sites_favicon_size</item>
         <item name="android:scaleType">fitCenter</item>
-        <item name="android:padding">@dimen/top_sites_favicon_padding</item>
-        <item name="android:background">@drawable/top_sites_background</item>
-        <item name="android:elevation">6dp</item>
+        <item name="android:layout_gravity">center</item>
+        <item name="shapeAppearanceOverlay">@style/topSiteFaviconShape</item>
+    </style>
+
+    <style name="topSiteFaviconShape">
+        <item name="cornerFamily">rounded</item>
+        <item name="elevation">@dimen/top_sites_favicon_elevation</item>
+        <item name="cornerSize">@dimen/top_sites_favicon_corner_size</item>
     </style>
 
     <style name="TabTrayFab" parent="Widget.MaterialComponents.ExtendedFloatingActionButton">