For mozilla-mobile#21894: Move Tabs Tray to compose: Individual tab v…

…iewholders: ListViewHolder.

app/src/main/java/org/mozilla/fenix/FeatureFlags.kt

@@ -91,4 +91,8 @@ object FeatureFlags {
      * Enables receiving from the messaging framework.
      */
     const val messagingFeature = true
+    /**
+     * Enables compose on the tabs tray items.
+     */
+    val composeTabsTray = false
 }

app/src/main/java/org/mozilla/fenix/browser/BaseBrowserFragment.kt

@@ -128,7 +128,6 @@ import java.lang.ref.WeakReference
 import mozilla.components.feature.session.behavior.EngineViewBrowserToolbarBehavior
 import mozilla.components.feature.webauthn.WebAuthnFeature
 import mozilla.components.service.glean.private.NoExtras
-import mozilla.components.service.sync.autofill.DefaultCreditCardValidationDelegate
 import mozilla.components.support.base.feature.ActivityResultHandler
 import mozilla.components.support.ktx.android.view.enterToImmersiveMode
 import mozilla.components.support.ktx.kotlin.getOrigin

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

@@ -32,6 +32,7 @@ import mozilla.components.concept.base.images.ImageLoadRequest
 import org.mozilla.fenix.R
 import org.mozilla.fenix.components.components
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
 
 /**
  * Card which will display a thumbnail. If a thumbnail is not available for [url], the favicon
@@ -40,6 +41,8 @@ import org.mozilla.fenix.theme.FirefoxTheme
  * @param url Url to display thumbnail for.
  * @param key 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.
  */
@@ -48,43 +51,50 @@ fun ThumbnailCard(
     url: String,
     key: String,
     modifier: Modifier = Modifier,
+    contentDescription: String? = null,
     contentScale: ContentScale = ContentScale.FillWidth,
     alignment: Alignment = Alignment.TopCenter
 ) {
     Card(
         modifier = modifier,
         backgroundColor = colorResource(id = R.color.photonGrey20)
     ) {
-        components.core.icons.Loader(url) {
-            Placeholder {
-                Box(
-                    modifier = Modifier.background(color = FirefoxTheme.colors.layer3)
-                )
-            }
-
-            WithIcon { icon ->
-                Box(
-                    modifier = Modifier.size(36.dp),
-                    contentAlignment = Alignment.Center
-                ) {
-                    Image(
-                        painter = icon.painter,
-                        contentDescription = null,
-                        modifier = Modifier
-                            .size(36.dp)
-                            .clip(RoundedCornerShape(8.dp)),
-                        contentScale = ContentScale.Fit
+        if (inComposePreview) {
+            Box(
+                modifier = Modifier.background(color = FirefoxTheme.colors.layer3)
+            )
+        } else {
+            components.core.icons.Loader(url) {
+                Placeholder {
+                    Box(
+                        modifier = Modifier.background(color = FirefoxTheme.colors.layer3)
                     )
                 }
+
+                WithIcon { icon ->
+                    Box(
+                        modifier = Modifier.size(36.dp),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Image(
+                            painter = icon.painter,
+                            contentDescription = contentDescription,
+                            modifier = Modifier
+                                .size(36.dp)
+                                .clip(RoundedCornerShape(8.dp)),
+                            contentScale = ContentScale.Fit
+                        )
+                    }
+                }
             }
-        }
 
-        ThumbnailImage(
-            key = key,
-            modifier = modifier,
-            contentScale = contentScale,
-            alignment = alignment
-        )
+            ThumbnailImage(
+                key = key,
+                modifier = modifier,
+                contentScale = contentScale,
+                alignment = alignment
+            )
+        }
     }
 }
 
@@ -120,11 +130,13 @@ private fun ThumbnailImage(
 @Preview
 @Composable
 private fun ThumbnailCardPreview() {
-    ThumbnailCard(
-        url = "https://mozilla.com",
-        key = "123",
-        modifier = Modifier
-            .size(108.dp, 80.dp)
-            .clip(RoundedCornerShape(8.dp))
-    )
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
+        ThumbnailCard(
+            url = "https://mozilla.com",
+            key = "123",
+            modifier = Modifier
+                .size(108.dp, 80.dp)
+                .clip(RoundedCornerShape(8.dp))
+        )
+    }
 }

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

@@ -0,0 +1,84 @@
+/* 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.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Card
+import androidx.compose.material.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import mozilla.components.browser.state.state.TabSessionState
+import mozilla.components.browser.state.state.createTab
+import mozilla.components.concept.engine.mediasession.MediaSession.PlaybackState
+import org.mozilla.fenix.R
+import org.mozilla.fenix.theme.FirefoxTheme
+
+/**
+ * A composable that lays out and draws the image from a given [tab] while showing a default placeholder
+ * while that image is downloaded or a default fallback image when downloading failed.
+ *
+ * @param tab the tab which the image should be shown.
+ * @param onMediaIconClicked handles the click event when tab has media session like play/pause.
+ * @param modifier [Modifier] to be applied to the layout.
+ */
+@Composable
+fun MediaImage(
+    tab: TabSessionState,
+    onMediaIconClicked: ((TabSessionState) -> Unit),
+    modifier: Modifier,
+) {
+    val (icon, contentDescription) = when (tab.mediaSessionState?.playbackState) {
+        PlaybackState.PAUSED -> {
+            R.drawable.media_state_play_vector to R.string.mozac_feature_media_notification_action_play
+        }
+        PlaybackState.PLAYING -> {
+            R.drawable.media_state_pause_vector to R.string.mozac_feature_media_notification_action_pause
+        }
+        else -> return
+    }
+
+    Card(
+        modifier = modifier
+            .size(size = 24.dp)
+            .clip(shape = CircleShape)
+            .border(
+                width = 2.dp,
+                color = FirefoxTheme.colors.layer2,
+                shape = CircleShape
+            ),
+        backgroundColor = FirefoxTheme.colors.layerAccent
+    ) {
+        Icon(
+            painter = painterResource(id = icon),
+            modifier = Modifier
+                .size(size = 24.dp)
+                .clickable { onMediaIconClicked.invoke(tab) },
+            contentDescription = stringResource(id = contentDescription),
+            tint = FirefoxTheme.colors.borderPrimary
+        )
+    }
+}
+
+@Composable
+@Preview
+private fun ImagePreview() {
+    MediaImage(
+        tab = createTab(url = "https://mozilla.com"),
+        onMediaIconClicked = {},
+        modifier = Modifier
+            .height(100.dp)
+            .width(200.dp)
+    )
+}