[fenix] For https://github.com/mozilla-mobile/fenix/issues/12797: Use measured height/width for loading a thumbnail

Using `onNextLayout` has the side-effect of showing the thumbnail with
the tab.id from a recycled view.

The root cause of needing that call is to retrieve the measured
height/width from the view first before requesting. A simpler solution
to avoid the complexity is to retrieve these values from the dimen
resources.

Co-authored-by: Gabriel Luong <gabriel.luong@gmail.com>

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

@@ -7,11 +7,11 @@ package org.mozilla.fenix.tabtray
 import android.view.View
 import android.view.accessibility.AccessibilityNodeInfo
 import android.widget.ImageButton
+import android.widget.ImageView
 import android.widget.TextView
 import androidx.annotation.VisibleForTesting
 import androidx.appcompat.widget.AppCompatImageButton
 import androidx.core.content.ContextCompat
-import androidx.core.view.doOnNextLayout
 import mozilla.components.browser.state.state.MediaState
 import mozilla.components.browser.tabstray.TabViewHolder
 import mozilla.components.browser.tabstray.thumbnail.TabThumbnailView
@@ -21,7 +21,7 @@ import mozilla.components.concept.tabstray.TabsTray
 import mozilla.components.feature.media.ext.pauseIfPlaying
 import mozilla.components.feature.media.ext.playIfPaused
 import mozilla.components.support.base.observer.Observable
-import mozilla.components.support.images.ext.loadIntoView
+import mozilla.components.support.images.ImageLoadRequest
 import mozilla.components.support.images.loader.ImageLoader
 import mozilla.components.support.ktx.kotlin.tryGetHostFromUrl
 import org.mozilla.fenix.R
@@ -32,6 +32,7 @@ import org.mozilla.fenix.ext.removeAndDisable
 import org.mozilla.fenix.ext.removeTouchDelegate
 import org.mozilla.fenix.ext.showAndEnable
 import org.mozilla.fenix.ext.toTab
+import kotlin.math.max
 
 /**
  * A RecyclerView ViewHolder implementation for "tab" items.
@@ -73,10 +74,7 @@ class TabTrayViewHolder(
         if (tab.thumbnail != null) {
             thumbnailView.setImageBitmap(tab.thumbnail)
         } else {
-            // Make sure we have the view's dimensions so we can load the image at the correct size
-            thumbnailView.doOnNextLayout {
-                imageLoader.loadIntoView(thumbnailView, tab.id)
-            }
+            loadIntoThumbnailView(thumbnailView, tab.id)
         }
 
         // Media state
@@ -182,6 +180,14 @@ class TabTrayViewHolder(
             closeView.context.getString(R.string.close_tab_title, title)
     }
 
+    private fun loadIntoThumbnailView(thumbnailView: ImageView, id: String) {
+        val thumbnailSize = max(
+            itemView.resources.getDimensionPixelSize(R.dimen.tab_tray_thumbnail_height),
+            itemView.resources.getDimensionPixelSize(R.dimen.tab_tray_thumbnail_width)
+        )
+        imageLoader.loadIntoView(thumbnailView, ImageLoadRequest(id, thumbnailSize))
+    }
+
     internal fun updateAccessibilityRowIndex(item: View, newIndex: Int) {
         item.setAccessibilityDelegate(object : View.AccessibilityDelegate() {
             override fun onInitializeAccessibilityNodeInfo(

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

@@ -25,8 +25,8 @@
 
     <androidx.cardview.widget.CardView
         android:id="@+id/mozac_browser_tabstray_card"
-        android:layout_width="92dp"
-        android:layout_height="69dp"
+        android:layout_width="@dimen/tab_tray_thumbnail_width"
+        android:layout_height="@dimen/tab_tray_thumbnail_height"
         android:layout_marginStart="16dp"
         android:layout_marginTop="8dp"
         android:backgroundTint="?tabTrayThumbnailItemBackground"

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

@@ -156,6 +156,8 @@
 
     <!-- Tabs Tray -->
     <dimen name="tab_tray_top_offset">40dp</dimen>
+    <dimen name="tab_tray_thumbnail_width">92dp</dimen>
+    <dimen name="tab_tray_thumbnail_height">69dp</dimen>
 
     <!-- Saved Logins Fragment -->
     <dimen name="saved_logins_sort_menu_dropdown_chevron_icon_margin_start">10dp</dimen>