For #12888 - Add highlight to current page in tab history.

app/src/main/java/org/mozilla/fenix/tabhistory/TabHistoryViewHolder.kt

@@ -5,10 +5,10 @@
 package org.mozilla.fenix.tabhistory
 
 import android.view.View
-import androidx.core.text.bold
-import androidx.core.text.buildSpannedString
 import androidx.core.view.isVisible
 import kotlinx.android.synthetic.main.tab_history_list_item.*
+import mozilla.components.support.ktx.android.content.getColorFromAttr
+import org.mozilla.fenix.R
 import org.mozilla.fenix.library.LibrarySiteItemView
 import org.mozilla.fenix.utils.view.ViewHolder
 
@@ -28,15 +28,14 @@ class TabHistoryViewHolder(
 
         history_layout.displayAs(LibrarySiteItemView.ItemType.SITE)
         history_layout.overflowView.isVisible = false
+        history_layout.titleView.text = item.title
         history_layout.urlView.text = item.url
         history_layout.loadFavicon(item.url)
 
-        history_layout.titleView.text = if (item.isSelected) {
+        if (item.isSelected) {
-            buildSpannedString {
+            history_layout.setBackgroundColor(history_layout.context.getColorFromAttr(R.attr.tabHistoryItemSelectedBackground))
-                bold { append(item.title) }
-            }
         } else {
-            item.title
+            history_layout.background = null
         }
     }
 }

app/src/main/res/values-night/colors.xml

@@ -67,6 +67,9 @@
     <color name="tab_tray_item_thumbnail_icon_normal_theme">@color/tab_tray_item_thumbnail_icon_dark_theme</color>
     <color name="tab_tray_selected_mask_normal_theme">@color/tab_tray_selected_mask_dark_theme</color>
 
+    <!-- Tab History -->
+    <color name="tab_history_item_selected_background_normal_theme">@color/tab_tray_item_selected_background_dark_theme</color>
+
     <!--Top site colors -->
     <color name="top_site_title_text">@color/top_site_title_text_dark_theme</color>
 

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

@@ -66,6 +66,9 @@
     <attr name="tabTrayItemSelectedBackground" format="reference" />
     <attr name="tabTrayToolbarBackground" format="reference" />
 
+    <!-- Tab History -->
+    <attr name="tabHistoryItemSelectedBackground" format="reference" />
+
     <declare-styleable name="TrackingProtectionCategory">
         <attr name="categoryItemTitle" format="reference" />
         <attr name="categoryItemDescription" format="reference" />

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

@@ -77,6 +77,9 @@
     <color name="tab_tray_item_thumbnail_icon_light_theme">@color/photonLightGrey60</color>
     <color name="tab_tray_selected_mask_light_theme">@color/violet_70_12a</color>
 
+    <!-- Tab History -->
+    <color name="tab_history_item_selected_background_light_theme">@color/tab_tray_item_selected_background_light_theme</color>
+
     <!-- Dark theme color palette -->
     <color name="primary_text_dark_theme">#FBFBFE</color>
     <color name="secondary_text_dark_theme">#A7A2B7</color>
@@ -140,6 +143,9 @@
     <color name="tab_tray_item_thumbnail_icon_dark_theme">@color/photonDarkGrey05</color>
     <color name="tab_tray_selected_mask_dark_theme">@color/violet_50_32a</color>
 
+    <!-- Tab History -->
+    <color name="tab_history_item_selected_background_dark_theme">@color/tab_tray_item_selected_background_dark_theme</color>
+
     <!-- Private theme color palette -->
     <color name="primary_text_private_theme">#FBFBFE</color>
     <color name="secondary_text_private_theme">#A7A2B7</color>
@@ -195,6 +201,9 @@
     <color name="tab_tray_heading_icon_private_theme">@color/violet_50</color>
     <color name="tab_tray_heading_icon_inactive_private_theme">@color/violet_50_48a</color>
 
+    <!-- Tab History -->
+    <color name="tab_history_item_selected_background_private_theme">@color/tab_tray_item_selected_background_dark_theme</color>
+
     <!-- Normal theme colors for light mode -->
     <color name="primary_text_normal_theme">@color/primary_text_light_theme</color>
     <color name="secondary_text_normal_theme">@color/secondary_text_light_theme</color>
@@ -254,6 +263,9 @@
     <color name="tab_tray_item_thumbnail_icon_normal_theme">@color/tab_tray_item_thumbnail_icon_light_theme</color>
     <color name="tab_tray_selected_mask_normal_theme">@color/tab_tray_selected_mask_light_theme</color>
 
+    <!-- Tab History -->
+    <color name="tab_history_item_selected_background_normal_theme">@color/tab_history_item_selected_background_light_theme</color>
+
     <!-- Bookmark buttons -->
     <color name="bookmark_favicon_background">#DFDFE3</color>
 

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

@@ -93,6 +93,9 @@
         <item name="tabTrayThumbnailItemBackground">@color/tab_tray_item_thumbnail_background_normal_theme</item>
         <item name="tabTrayThumbnailIcon">@color/tab_tray_item_thumbnail_icon_normal_theme</item>
 
+        <!-- Tab History -->
+        <item name="tabHistoryItemSelectedBackground">@color/tab_history_item_selected_background_normal_theme</item>
+
         <!-- Drawables -->
         <item name="fenixLogo">@drawable/ic_logo_wordmark_normal</item>
         <item name="homeBackground">@color/foundation_normal_theme</item>
@@ -231,6 +234,9 @@
         <item name="tabTrayThumbnailItemBackground">@color/tab_tray_item_thumbnail_background_normal_theme</item>
         <item name="tabTrayThumbnailIcon">@color/tab_tray_item_thumbnail_icon_normal_theme</item>
 
+        <!-- Tab History -->
+        <item name="tabHistoryItemSelectedBackground">@color/tab_history_item_selected_background_private_theme</item>
+
         <!-- Drawables -->
         <item name="fenixLogo">@drawable/ic_logo_wordmark_private</item>
         <item name="homeBackground">@drawable/private_home_background_gradient</item>

app/src/test/java/org/mozilla/fenix/tabhistory/TabHistoryAdapterTest.kt

@@ -4,12 +4,14 @@
 
 package org.mozilla.fenix.tabhistory
 
-import android.text.Spanned
+import android.content.Context
+import android.graphics.drawable.ColorDrawable
 import android.widget.FrameLayout
 import androidx.appcompat.view.ContextThemeWrapper
-import androidx.core.text.HtmlCompat
+import io.mockk.MockKAnnotations
-import io.mockk.mockk
+import io.mockk.impl.annotations.MockK
 import kotlinx.android.synthetic.main.history_list_item.*
+import mozilla.components.support.ktx.android.content.getColorFromAttr
 import mozilla.components.support.test.robolectric.testContext
 import org.junit.Assert.assertEquals
 import org.junit.Assert.assertFalse
@@ -23,8 +25,10 @@ import org.mozilla.fenix.helpers.FenixRobolectricTestRunner
 @RunWith(FenixRobolectricTestRunner::class)
 class TabHistoryAdapterTest {
 
-    private lateinit var parent: FrameLayout
+    @MockK
     private lateinit var interactor: TabHistoryInteractor
+    private lateinit var context: Context
+    private lateinit var parent: FrameLayout
     private lateinit var adapter: TabHistoryAdapter
 
     private val selectedItem = TabHistoryItem(
@@ -42,8 +46,9 @@ class TabHistoryAdapterTest {
 
     @Before
     fun setup() {
-        parent = FrameLayout(ContextThemeWrapper(testContext, R.style.NormalTheme))
+        MockKAnnotations.init(this)
-        interactor = mockk()
+        context = ContextThemeWrapper(testContext, R.style.NormalTheme)
+        parent = FrameLayout(context)
         adapter = TabHistoryAdapter(interactor)
     }
 
@@ -54,12 +59,15 @@ class TabHistoryAdapterTest {
         val holder = adapter.createViewHolder(parent, 0)
 
         adapter.bindViewHolder(holder, 0)
-        val htmlSelected = HtmlCompat.toHtml(holder.history_layout.titleView.text as Spanned, 0)
+        assertEquals("Mozilla", holder.history_layout.titleView.text)
-        assertTrue(htmlSelected, "<b>Mozilla</b>" in htmlSelected)
+        assertEquals(
+            context.getColorFromAttr(R.attr.tabHistoryItemSelectedBackground),
+            (holder.history_layout.background as ColorDrawable).color
+        )
 
         adapter.bindViewHolder(holder, 1)
-        assertFalse(holder.history_layout.titleView.text is Spanned)
         assertEquals("Firefox", holder.history_layout.titleView.text)
+        assertEquals(null, holder.history_layout.background)
     }
 
     @Test