For #1830 - Updates the tab visual style

app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt

@@ -34,6 +34,7 @@ import org.mozilla.fenix.HomeActivity
 import org.mozilla.fenix.R
 import org.mozilla.fenix.components.metrics.Event
 import org.mozilla.fenix.ext.requireComponents
+import org.mozilla.fenix.ext.urlToHost
 import org.mozilla.fenix.home.sessioncontrol.Mode
 import org.mozilla.fenix.home.sessioncontrol.SessionControlAction
 import org.mozilla.fenix.home.sessioncontrol.SessionControlChange
@@ -284,7 +285,14 @@ class HomeFragment : Fragment(), CoroutineScope {
                     .filter { (activity as HomeActivity).browsingModeManager.isPrivate == it.private }
                     .map {
                         val selected = it == sessionManager.selectedSession
-                        org.mozilla.fenix.home.sessioncontrol.Tab(it.id, it.url, selected, it.thumbnail)
+                        org.mozilla.fenix.home.sessioncontrol.Tab(
+                            it.id,
+                            it.url,
+                            it.url.urlToHost(),
+                            it.title,
+                            selected,
+                            it.thumbnail
+                        )
                     }
             )
         )

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

@@ -40,7 +40,15 @@ class SessionControlComponent(
     }
 }
 
-data class Tab(val sessionId: String, val url: String, val selected: Boolean, val thumbnail: Bitmap? = null)
+data class Tab(
+    val sessionId: String,
+    val url: String,
+    val hostname: String,
+    val title: String,
+    val selected: Boolean,
+    val thumbnail: Bitmap? = null
+)
+
 sealed class Mode {
     object Normal : Mode()
     object Private : Mode()

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

@@ -4,7 +4,9 @@
 
 package org.mozilla.fenix.home.sessioncontrol.viewholders
 
+import android.graphics.Outline
 import android.view.View
+import android.view.ViewOutlineProvider
 import androidx.core.content.ContextCompat
 import androidx.recyclerview.widget.RecyclerView
 import io.reactivex.Observer
@@ -15,6 +17,7 @@ import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.Job
 import kotlinx.coroutines.launch
 import mozilla.components.browser.icons.IconRequest
+import mozilla.components.support.ktx.android.content.res.pxToDp
 import org.jetbrains.anko.image
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.components
@@ -49,20 +52,34 @@ class TabViewHolder(
                 actionEmitter.onNext(TabAction.Close(tab?.sessionId!!))
             }
         }
+
+        favicon_image.clipToOutline = true
+        favicon_image.outlineProvider = object : ViewOutlineProvider() {
+            override fun getOutline(view: View?, outline: Outline?) {
+                outline?.setRoundRect(
+                    0,
+                    0,
+                    view!!.width,
+                    view.height,
+                    view.context.resources.pxToDp(favIconBorderRadiusInPx).toFloat()
+                )
+            }
+        }
     }
 
     fun bindSession(tab: Tab, position: Int) {
         this.tab = tab
         updateTabBackground(position)
-        updateUrl(tab.url)
+        updateText(tab)
         updateSelected(tab.selected)
     }
 
-    fun updateUrl(url: String) {
-        text_url.text = url
+    fun updateText(tab: Tab) {
+        hostname.text = tab.hostname
+        tab_title.text = tab.title
         launch(Dispatchers.IO) {
             val bitmap = favicon_image.context.components.utils.icons
-                .loadIcon(IconRequest(url)).await().bitmap
+                .loadIcon(IconRequest(tab.url)).await().bitmap
             launch(Dispatchers.Main) {
                 favicon_image.setImageBitmap(bitmap)
             }
@@ -75,16 +92,17 @@ class TabViewHolder(
 
     fun updateTabBackground(id: Int) {
         if (tab?.thumbnail != null) {
-            tab_background.setImageBitmap(tab?.thumbnail)
+//            tab_background.setImageBitmap(tab?.thumbnail)
         } else {
             val background = availableBackgrounds[id % availableBackgrounds.size]
-            tab_background.image = ContextCompat.getDrawable(view.context, background)
+            favicon_image.image = ContextCompat.getDrawable(view.context, background)
         }
     }
 
     companion object {
         const val LAYOUT_ID = R.layout.tab_list_row
         const val closeButtonIncreaseDps = 12
+        const val favIconBorderRadiusInPx = 8
 
         private val availableBackgrounds = listOf(
             R.drawable.sessions_01, R.drawable.sessions_02,

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

@@ -22,57 +22,68 @@
 
         <ImageView
             android:id="@+id/favicon_image"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_margin="10dp"
+            android:layout_width="64dp"
+            android:layout_height="64dp"
+            android:layout_margin="8dp"
+            android:adjustViewBounds="true"
             android:importantForAccessibility="no"
-            android:minWidth="32dp"
-            android:minHeight="32dp"
+            android:scaleType="centerInside"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
         <TextView
-            android:id="@+id/text_url"
+            android:id="@+id/hostname"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginStart="12dp"
-            android:layout_marginTop="4dp"
+            android:layout_marginStart="8dp"
             android:ellipsize="none"
-            android:requiresFadingEdge="horizontal"
             android:singleLine="true"
-            android:textColor="?primaryText"
-            android:textSize="16sp"
+            android:textColor="?secondaryText"
+            android:textSize="12sp"
+            android:textStyle="bold"
             app:layout_constraintEnd_toStartOf="@id/close_tab_button"
-            app:layout_constraintHorizontal_bias="0"
             app:layout_constraintStart_toEndOf="@id/favicon_image"
             app:layout_constraintTop_toTopOf="@id/favicon_image" />
 
+        <TextView
+            android:id="@+id/tab_title"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginTop="4dp"
+            android:layout_marginStart="8dp"
+            android:layout_marginBottom="8dp"
+            android:ellipsize="end"
+            android:maxLines="2"
+            android:textColor="?primaryText"
+            android:textSize="15sp"
+            app:layout_constraintStart_toEndOf="@id/favicon_image"
+            app:layout_constraintEnd_toEndOf="@id/hostname"
+            app:layout_constraintTop_toBottomOf="@id/hostname"
+            app:layout_constraintBottom_toBottomOf="parent"/>
+
         <ImageView
             android:id="@+id/close_tab_button"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="1dp"
+            android:layout_margin="8dp"
             android:contentDescription="@string/close_tab"
-            android:paddingStart="12dp"
-            android:paddingEnd="10dp"
             android:src="@drawable/ic_close"
-            app:layout_constraintBottom_toBottomOf="@id/text_url"
+            android:background="?android:attr/selectableItemBackgroundBorderless"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="@id/text_url" />
+            app:layout_constraintTop_toTopOf="parent" />
 
-        <org.mozilla.fenix.home.ImageViewTopCrop
-            android:id="@+id/tab_background"
-            android:layout_width="0dp"
-            android:layout_height="100dp"
-            android:layout_marginTop="10dp"
-            android:adjustViewBounds="false"
-            android:focusable="false"
-            android:importantForAccessibility="no"
-            android:scaleType="matrix"
+        <ImageButton
+            android:id="@+id/tab_overflow_button"
+            android:layout_width="@dimen/glyph_button_width"
+            android:layout_height="@dimen/glyph_button_height"
+            android:background="?android:attr/selectableItemBackgroundBorderless"
+            android:contentDescription="@string/tab_menu"
+            android:src="@drawable/ic_menu"
+            android:translationX="4dp"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/favicon_image" />
+            app:layout_constraintTop_toBottomOf="@id/close_tab_button" />
 
         <View
             android:id="@+id/selected_border"