[fenix] For https://github.com/mozilla-mobile/fenix/issues/15968 - Show a border for the selected tab in the grid based tabs tray

The border for the grid item will now be updated in the same method that
updates the background for the list item.

app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt

@@ -13,6 +13,7 @@ import androidx.annotation.VisibleForTesting
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.appcompat.widget.AppCompatImageButton
 import androidx.core.content.ContextCompat
+import kotlinx.android.synthetic.main.tab_tray_grid_item.view.*
 import mozilla.components.browser.state.state.MediaState
 import mozilla.components.browser.state.store.BrowserStore
 import mozilla.components.browser.tabstray.TabViewHolder
@@ -79,7 +80,7 @@ class TabTrayViewHolder(
         updateUrl(tab)
         updateFavicon(tab)
         updateCloseButtonDescription(tab.title)
-        updateBackgroundColor(isSelected)
+        updateSelectedTabIndicator(isSelected)
 
         if (tab.thumbnail != null) {
             thumbnailView.setImageBitmap(tab.thumbnail)
@@ -170,9 +171,13 @@ class TabTrayViewHolder(
     }
 
     @VisibleForTesting
-    internal fun updateBackgroundColor(isSelected: Boolean) {
+    internal fun updateSelectedTabIndicator(isSelected: Boolean) {
         if (itemView.context.settings().gridTabView) {
-            // No need to set a background color in the item view for grid tabs.
+            itemView.tab_tray_grid_item.background = if (isSelected) {
+                AppCompatResources.getDrawable(itemView.context, R.drawable.tab_tray_grid_item_selected_border)
+            } else {
+                null
+            }
             return
         }
 

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

@@ -0,0 +1,27 @@
+<?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/. -->
+
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item
+        android:bottom="4dp"
+        android:left="4dp"
+        android:right="4dp"
+        android:top="4dp">
+
+        <shape
+            android:shape="rectangle">
+
+            <stroke
+                android:width="4dp"
+                android:color="@color/photonViolet70" />
+
+            <corners android:radius="@dimen/tab_tray_grid_item_border_radius" />
+        </shape>
+
+    </item>
+
+</layer-list>

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

@@ -13,6 +13,7 @@ A FrameLayout here is an efficient way of having a views stack while allowing:
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/tab_tray_grid_item"
     android:layout_width="match_parent"
     android:layout_height="202dp"
     android:clipChildren="false"