From 6c2ffd9777637e317e00f6143a04e843ce86acd6 Mon Sep 17 00:00:00 2001
From: Jeff Boek <jeff@jeffboek.com>
Date: Fri, 19 Apr 2019 13:24:59 -0700
Subject: [PATCH] [fenix] For
 https://github.com/mozilla-mobile/fenix/issues/1830 - Updates the tab visual
 style

---
 .../org/mozilla/fenix/home/HomeFragment.kt    | 10 ++-
 .../sessioncontrol/SessionControlComponent.kt | 10 ++-
 .../viewholders/TabViewHolder.kt              | 30 +++++++--
 app/src/main/res/layout/tab_list_row.xml      | 67 +++++++++++--------
 4 files changed, 81 insertions(+), 36 deletions(-)

diff --git a/app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt b/app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt
index 789122d08d..31087359b6 100644
--- a/app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt
+++ b/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
+                        )
                     }
             )
         )
diff --git a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/SessionControlComponent.kt b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/SessionControlComponent.kt
index adab2420cd..7e64f68650 100644
--- a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/SessionControlComponent.kt
+++ b/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()
diff --git a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/TabViewHolder.kt b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/TabViewHolder.kt
index d4d508170a..925a122375 100644
--- a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/TabViewHolder.kt
+++ b/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,
diff --git a/app/src/main/res/layout/tab_list_row.xml b/app/src/main/res/layout/tab_list_row.xml
index fff3f0e84b..85911b0961 100644
--- a/app/src/main/res/layout/tab_list_row.xml
+++ b/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"