For #26221 - Use favicon instead of ic_globe for composed tab grid item

app/src/main/java/org/mozilla/fenix/compose/ThumbnailCard.kt

@@ -17,6 +17,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.painter.BitmapPainter
@@ -24,6 +25,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import mozilla.components.browser.icons.compose.Loader
 import mozilla.components.browser.icons.compose.Placeholder
@@ -40,6 +42,8 @@ import org.mozilla.fenix.theme.Theme
  *
  * @param url Url to display thumbnail for.
  * @param key Key used to remember the thumbnail for future compositions.
+ * @param size [Dp] size of the thumbnail.
+ * @param backgroundColor [Color] used for the background of the favicon.
  * @param modifier [Modifier] used to draw the image content.
  * @param contentDescription Text used by accessibility services
  * to describe what this image represents.
@@ -50,6 +54,8 @@ import org.mozilla.fenix.theme.Theme
 fun ThumbnailCard(
     url: String,
     key: String,
+    size: Dp = 108.dp,
+    backgroundColor: Color = colorResource(id = R.color.photonGrey20),
     modifier: Modifier = Modifier,
     contentDescription: String? = null,
     contentScale: ContentScale = ContentScale.FillWidth,
@@ -57,7 +63,7 @@ fun ThumbnailCard(
 ) {
     Card(
         modifier = modifier,
-        backgroundColor = colorResource(id = R.color.photonGrey20)
+        backgroundColor = backgroundColor
     ) {
         if (inComposePreview) {
             Box(
@@ -90,6 +96,7 @@ fun ThumbnailCard(
 
             ThumbnailImage(
                 key = key,
+                size = size,
                 modifier = modifier,
                 contentScale = contentScale,
                 alignment = alignment
@@ -101,13 +108,14 @@ fun ThumbnailCard(
 @Composable
 private fun ThumbnailImage(
     key: String,
+    size: Dp,
     modifier: Modifier,
     contentScale: ContentScale,
     alignment: Alignment
 ) {
     val rememberBitmap = remember(key) { mutableStateOf<ImageBitmap?>(null) }
-    val size = LocalDensity.current.run { 108.dp.toPx().toInt() }
-    val request = ImageLoadRequest(key, size)
+    val thumbnailSize = LocalDensity.current.run { size.toPx().toInt() }
+    val request = ImageLoadRequest(key, thumbnailSize)
     val storage = components.core.thumbnailStorage
     val bitmap = rememberBitmap.value
 

app/src/main/java/org/mozilla/fenix/compose/tabstray/GridTabThumbnail.kt

@@ -1,123 +0,0 @@
-/* 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/. */
-
-package org.mozilla.fenix.compose.tabstray
-
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Card
-import androidx.compose.material.Icon
-import androidx.compose.material.Surface
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.ImageBitmap
-import androidx.compose.ui.graphics.asImageBitmap
-import androidx.compose.ui.graphics.painter.BitmapPainter
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.LocalConfiguration
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import mozilla.components.concept.base.images.ImageLoadRequest
-import org.mozilla.fenix.R
-import org.mozilla.fenix.compose.inComposePreview
-import org.mozilla.fenix.ext.components
-import org.mozilla.fenix.theme.FirefoxTheme
-import org.mozilla.fenix.theme.Theme
-
-/**
- * Card which will display the thumbnail for a tab. If a thumbnail is not available for the [tabId],
- * the favicon [R.drawable.mozac_ic_globe] icon will be displayed.
- *
- * @param tabId Key used to remember the thumbnail for future compositions.
- * @param modifier [Modifier] used to draw the image content.
- * @param contentDescription Text used by accessibility services
- * to describe what this image represents.
- * @param contentScale [ContentScale] used to draw image content.
- * @param alignment [Alignment] used to draw the image content.
- */
-@Composable
-@Suppress("LongParameterList")
-fun GridTabThumbnail(
-    tabId: String,
-    size: Dp,
-    modifier: Modifier = Modifier,
-    contentDescription: String? = null,
-    contentScale: ContentScale = ContentScale.FillWidth,
-    alignment: Alignment = Alignment.TopCenter
-) {
-    Card(
-        modifier = modifier,
-        backgroundColor = FirefoxTheme.colors.layer2
-    ) {
-        if (inComposePreview) {
-            GlobeIcon()
-        } else {
-            val rememberBitmap = remember(tabId) { mutableStateOf<ImageBitmap?>(null) }
-            val imageSize = LocalDensity.current.run { size.toPx().toInt() }
-            val request = ImageLoadRequest(tabId, imageSize)
-            val storage = LocalContext.current.components.core.thumbnailStorage
-            val bitmap = rememberBitmap.value
-
-            LaunchedEffect(tabId) {
-                rememberBitmap.value = storage.loadThumbnail(request).await()?.asImageBitmap()
-            }
-
-            if (bitmap != null) {
-                val painter = BitmapPainter(bitmap)
-                Image(
-                    painter = painter,
-                    contentDescription = contentDescription,
-                    modifier = modifier,
-                    contentScale = contentScale,
-                    alignment = alignment
-                )
-            } else {
-                GlobeIcon()
-            }
-        }
-    }
-}
-
-/**
- * Globe icon to be displayed when no thumbnail is available.
- */
-@Composable
-private fun GlobeIcon() {
-    Icon(
-        painter = painterResource(id = R.drawable.mozac_ic_globe),
-        contentDescription = null,
-        modifier = Modifier
-            .padding(22.dp)
-            .fillMaxSize(),
-        tint = FirefoxTheme.colors.iconSecondary
-    )
-}
-
-@Preview
-@Composable
-private fun ThumbnailCardPreview() {
-    FirefoxTheme(theme = Theme.getTheme()) {
-        Surface(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(300.dp)
-        ) {
-            GridTabThumbnail(
-                tabId = "1",
-                size = LocalConfiguration.current.screenWidthDp.dp
-            )
-        }
-    }
-}

app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt

@@ -48,6 +48,7 @@ import mozilla.components.browser.state.state.createTab
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.Favicon
 import org.mozilla.fenix.compose.HorizontalFadingEdgeBox
+import org.mozilla.fenix.compose.ThumbnailCard
 import org.mozilla.fenix.theme.FirefoxTheme
 
 /**
@@ -197,9 +198,12 @@ private fun Thumbnail(
             .fillMaxSize()
             .background(FirefoxTheme.colors.layer2)
     ) {
-        GridTabThumbnail(
-            tabId = tab.id,
-            size = LocalConfiguration.current.screenWidthDp.dp
+        ThumbnailCard(
+            url = tab.content.url,
+            key = tab.id,
+            size = LocalConfiguration.current.screenWidthDp.dp,
+            backgroundColor = FirefoxTheme.colors.layer2,
+            modifier = Modifier.fillMaxSize()
         )
 
         if (multiSelectionSelected) {