[fenix] For https://github.com/mozilla-mobile/fenix/issues/19886 - Add favicon to website info view

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

app/src/main/java/org/mozilla/fenix/settings/quicksettings/WebsiteInfoView.kt

@@ -7,9 +7,11 @@ package org.mozilla.fenix.settings.quicksettings
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.core.content.ContextCompat.getColor
-import androidx.core.view.isVisible
+import mozilla.components.browser.icons.BrowserIcons
 import mozilla.components.support.ktx.android.content.getDrawableWithTint
-import org.mozilla.fenix.R
+import mozilla.components.support.ktx.kotlin.tryGetHostFromUrl
+import org.mozilla.fenix.ext.components
+import org.mozilla.fenix.ext.loadIntoView
 import org.mozilla.fenix.databinding.QuicksettingsWebsiteInfoBinding
 
 /**
@@ -18,9 +20,11 @@ import org.mozilla.fenix.databinding.QuicksettingsWebsiteInfoBinding
  * Currently it does not support any user interaction.
  *
  * @param container [ViewGroup] in which this View will inflate itself.
+ * @param icons [BrowserIcons] instance for rendering the sites icon.
  */
 class WebsiteInfoView(
-    container: ViewGroup
+    container: ViewGroup,
+    private val icons: BrowserIcons = container.context.components.core.icons
 ) {
     val binding = QuicksettingsWebsiteInfoBinding.inflate(
         LayoutInflater.from(container.context),
@@ -34,12 +38,13 @@ class WebsiteInfoView(
      * @param state [WebsiteInfoState] to be rendered.
      */
     fun update(state: WebsiteInfoState) {
+        icons.loadIntoView(binding.favicon_image, state.websiteUrl)
         bindUrl(state.websiteUrl)
         bindSecurityInfo(state.websiteSecurityUiValues)
     }
 
     private fun bindUrl(websiteUrl: String) {
-        binding.url.text = websiteUrl
+        binding.url.text = websiteUrl.tryGetHostFromUrl()
     }
 
     private fun bindSecurityInfo(uiValues: WebsiteSecurityUiValues) {

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

@@ -15,11 +15,21 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:orientation="vertical"
+        android:orientation="horizontal"
         android:minHeight="@dimen/tracking_protection_item_height"
         android:paddingTop="8dp"
         android:paddingBottom="8dp">
 
+        <ImageView
+            android:id="@+id/favicon_image"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:importantForAccessibility="no"
+            android:scaleType="fitCenter"
+            android:layout_marginStart="16dp"
+            android:layout_gravity="center_vertical"
+            tools:drawableStartCompat="@drawable/ic_internet" />
+
         <TextView
             android:id="@+id/url"
             style="@style/QuickSettingsText"
@@ -54,6 +64,8 @@
                 android:layout_width="match_parent"
                 android:paddingStart="0dp"
                 android:layout_height="wrap_content"
+                app:drawableEndCompat="@drawable/ic_arrowhead_right"
+                android:paddingEnd="0dp"
                 tools:text="Connection is secure" />
         </LinearLayout>
     </LinearLayout>

app/src/test/java/org/mozilla/fenix/settings/quicksettings/WebsiteInfoViewTest.kt

@@ -5,6 +5,11 @@
 package org.mozilla.fenix.settings.quicksettings
 
 import android.widget.FrameLayout
+import io.mockk.every
+import io.mockk.mockk
+import io.mockk.verify
+import mozilla.components.browser.icons.BrowserIcons
+import mozilla.components.browser.icons.IconRequest
 import mozilla.components.support.test.robolectric.testContext
 import org.junit.Assert.assertEquals
 import org.junit.Before
@@ -17,26 +22,31 @@ import org.mozilla.fenix.helpers.FenixRobolectricTestRunner
 class WebsiteInfoViewTest {
 
     private lateinit var view: WebsiteInfoView
+    private lateinit var icons: BrowserIcons
     private lateinit var binding: QuicksettingsWebsiteInfoBinding
 
     @Before
     fun setup() {
-        view = WebsiteInfoView(FrameLayout(testContext))
+        icons = mockk(relaxed = true)
+        view = WebsiteInfoView(FrameLayout(testContext), icons)
+        every { icons.loadIntoView(view.favicon_image, any()) } returns mockk()
         binding = view.binding
     }
 
     @Test
     fun bindUrlAndTitle() {
-        view.update(
-            WebsiteInfoState(
-                websiteUrl = "https://mozilla.org",
-                websiteTitle = "Mozilla",
-                websiteSecurityUiValues = WebsiteSecurityUiValues.SECURE,
-                certificateName = ""
-            )
-        )
+        val websiteUrl = "https://mozilla.org"
+
+        view.update(WebsiteInfoState(
+            websiteUrl = websiteUrl,
+            websiteTitle = "Mozilla",
+            websiteSecurityUiValues = WebsiteSecurityUiValues.SECURE,
+            certificateName = ""
+        ))
+
+        verify { icons.loadIntoView(binding.favicon_image, IconRequest(websiteUrl)) }
 
-        assertEquals("https://mozilla.org", binding.url.text)
+        assertEquals("mozilla.org", binding.url.text)
         assertEquals("Secure Connection", binding.securityInfo.text)
     }