Bug 1838140 - Update composed tabs tray media button ripple effect to match the xml version

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

@@ -7,6 +7,7 @@ package org.mozilla.fenix.compose.tabstray
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
@@ -28,12 +29,14 @@ import org.mozilla.fenix.theme.FirefoxTheme
  * @param tab [TabSessionState] 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.
+ * @param interactionSource [MutableInteractionSource] used to propagate the ripple effect on click.
  */
 @Composable
 fun MediaImage(
     tab: TabSessionState,
     onMediaIconClicked: ((TabSessionState) -> Unit),
     modifier: Modifier,
+    interactionSource: MutableInteractionSource = MutableInteractionSource(),
 ) {
     val (icon, contentDescription) = when (tab.mediaSessionState?.playbackState) {
         PlaybackState.PAUSED -> {
@@ -49,7 +52,10 @@ fun MediaImage(
     Image(
         painter = rememberDrawablePainter(drawable = drawable),
         contentDescription = stringResource(contentDescription),
-        modifier = modifier.clickable { onMediaIconClicked(tab) },
+        modifier = modifier.clickable(
+            interactionSource = interactionSource,
+            indication = null,
+        ) { onMediaIconClicked(tab) },
     )
 }
 

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

@@ -11,6 +11,8 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -32,7 +34,9 @@ import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
 import androidx.compose.material.rememberDismissState
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
@@ -54,6 +58,7 @@ import androidx.core.text.BidiFormatter
 import mozilla.components.browser.state.state.TabSessionState
 import mozilla.components.browser.state.state.createTab
 import mozilla.components.support.ktx.kotlin.MAX_URI_LENGTH
+import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.Divider
 import org.mozilla.fenix.compose.HorizontalFadingEdgeBox
@@ -113,6 +118,9 @@ fun TabGridItem(
         },
     )
 
+    // Used to propagate the ripple effect to the whole tab
+    val interactionSource = remember { MutableInteractionSource() }
+
     SwipeToDismiss(
         state = dismissState,
         enabled = !multiSelectionEnabled,
@@ -134,6 +142,13 @@ fun TabGridItem(
                     .then(tabBorderModifier)
                     .padding(4.dp)
                     .combinedClickable(
+                        interactionSource = interactionSource,
+                        indication = rememberRipple(
+                            color = when (isSystemInDarkTheme()) {
+                                true -> PhotonColors.White
+                                false -> PhotonColors.Black
+                            },
+                        ),
                         onLongClick = { onLongClick(tab) },
                         onClick = { onClick(tab) },
                     ),
@@ -213,6 +228,7 @@ fun TabGridItem(
                     onMediaIconClicked = { onMediaClick(tab) },
                     modifier = Modifier
                         .align(Alignment.TopStart),
+                    interactionSource = interactionSource,
                 )
             }
         }

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

@@ -7,6 +7,8 @@ package org.mozilla.fenix.compose.tabstray
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -23,7 +25,9 @@ import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.Text
 import androidx.compose.material.rememberDismissState
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -39,6 +43,7 @@ import androidx.compose.ui.unit.sp
 import mozilla.components.browser.state.state.TabSessionState
 import mozilla.components.browser.state.state.createTab
 import mozilla.components.support.ktx.kotlin.MAX_URI_LENGTH
+import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.SwipeToDismiss
 import org.mozilla.fenix.compose.TabThumbnail
@@ -93,6 +98,9 @@ fun TabListItem(
         },
     )
 
+    // Used to propagate the ripple effect to the whole tab
+    val interactionSource = remember { MutableInteractionSource() }
+
     SwipeToDismiss(
         state = dismissState,
         enabled = !multiSelectionEnabled,
@@ -106,6 +114,13 @@ fun TabListItem(
                 .background(FirefoxTheme.colors.layer3)
                 .background(contentBackgroundColor)
                 .combinedClickable(
+                    interactionSource = interactionSource,
+                    indication = rememberRipple(
+                        color = when (isSystemInDarkTheme()) {
+                            true -> PhotonColors.White
+                            false -> PhotonColors.Black
+                        },
+                    ),
                     onLongClick = { onLongClick(tab) },
                     onClick = { onClick(tab) },
                 )
@@ -117,6 +132,7 @@ fun TabListItem(
                 multiSelectionEnabled = multiSelectionEnabled,
                 isSelected = multiSelectionSelected,
                 onMediaIconClicked = { onMediaClick(it) },
+                interactionSource = interactionSource,
             )
 
             Column(
@@ -172,6 +188,7 @@ private fun Thumbnail(
     multiSelectionEnabled: Boolean,
     isSelected: Boolean,
     onMediaIconClicked: ((TabSessionState) -> Unit),
+    interactionSource: MutableInteractionSource,
 ) {
     Box {
         TabThumbnail(
@@ -215,6 +232,7 @@ private fun Thumbnail(
                 tab = tab,
                 onMediaIconClicked = onMediaIconClicked,
                 modifier = Modifier.align(Alignment.TopEnd),
+                interactionSource = interactionSource,
             )
         }
     }