commit d1ae802dbccaa038131e46502ece12ce222002c1
parent 081ef82184143a09ef82e661cd8faf0771bbdf46
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Sat, 6 Dec 2025 00:11:44 +0000
Bug 1993655 - Part 1: Migrate the Bottom Sheet Handle to the M3 Acorn specs r=android-reviewers,007
- Acorn Bottom Sheet Handle Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64183-18477&m=dev
- Menu Figma: https://www.figma.com/design/FWc4e0Z7ZZZOQwTxkhWo34/Menu-Handoff---2025?node-id=11559-3838&m=dev
- Protection Panel: https://www.figma.com/design/WwaPyCTuAcweodyCjL789k/Protection-Panel?node-id=16136-4281&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D268420
Diffstat:
7 files changed, 39 insertions(+), 61 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/MenuDialogFragment.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/MenuDialogFragment.kt
@@ -32,7 +32,6 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.ViewCompositionStrategy
@@ -234,7 +233,7 @@ class MenuDialogFragment : BottomSheetDialogFragment() {
}
}
- @Suppress("LongMethod", "CyclomaticComplexMethod", "MagicNumber", "CognitiveComplexMethod")
+ @Suppress("LongMethod", "CyclomaticComplexMethod", "CognitiveComplexMethod")
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
@@ -381,8 +380,6 @@ class MenuDialogFragment : BottomSheetDialogFragment() {
(isExtensionsExpanded || isMoreMenuExpanded) &&
args.accesspoint == MenuAccessPoint.Browser,
cornerShape = RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp),
- handleColor = FirefoxTheme.colors.borderInverted.copy(0.4f),
- handleCornerRadius = CornerRadius(100f, 100f),
menuCfrState = if (settings.shouldShowMenuCFR) {
MenuCFRState(
showCFR = settings.shouldShowMenuCFR,
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuDialogBottomSheet.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuDialogBottomSheet.kt
@@ -16,7 +16,6 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.toArgb
@@ -44,8 +43,6 @@ private const val CFR_VERTICAL_OFFSET_PORTRAIT = -6
* @param handlebarContentDescription Bottom sheet handlebar content description.
* @param isMenuDragBarDark Whether or not the menu's drag bar background should be dark.
* @param cornerShape The shape of the bottom sheet's top corners.
- * @param handleColor The color of the handle.
- * @param handleCornerRadius The corner radius of the handle.
* @param menuCfrState An optional [MenuCFRState] that describes how to display a
* contextual feature recommendation (CFR) popup in the menu.
* @param content The children composable to be laid out.
@@ -57,8 +54,6 @@ fun MenuDialogBottomSheet(
handlebarContentDescription: String,
isMenuDragBarDark: Boolean = false,
cornerShape: Shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
- handleColor: Color = FirefoxTheme.colors.borderInverted,
- handleCornerRadius: CornerRadius = CornerRadius.Zero,
menuCfrState: MenuCFRState? = null,
content: @Composable () -> Unit,
) {
@@ -78,8 +73,6 @@ fun MenuDialogBottomSheet(
contentDescription = handlebarContentDescription,
isMenuDragBarDark = isMenuDragBarDark,
cornerShape = cornerShape,
- handleColor = handleColor,
- handleCornerRadius = handleCornerRadius,
)
} else {
MenuBottomSheetHandle(
@@ -88,8 +81,6 @@ fun MenuDialogBottomSheet(
contentDescription = handlebarContentDescription,
isMenuDragBarDark = isMenuDragBarDark,
cornerShape = cornerShape,
- color = handleColor,
- cornerRadius = handleCornerRadius,
)
}
@@ -104,8 +95,6 @@ private fun MenuBottomSheetHandle(
contentDescription: String,
isMenuDragBarDark: Boolean = false,
cornerShape: Shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
- color: Color = FirefoxTheme.colors.borderInverted,
- cornerRadius: CornerRadius = CornerRadius.Zero,
) {
Column(
modifier = Modifier
@@ -125,8 +114,6 @@ private fun MenuBottomSheetHandle(
onRequestDismiss = onRequestDismiss,
contentDescription = contentDescription,
modifier = modifier,
- cornerRadius = cornerRadius,
- color = color,
)
}
}
@@ -142,8 +129,6 @@ private fun CFRBottomSheetHandle(
onRequestDismiss: () -> Unit,
isMenuDragBarDark: Boolean,
cornerShape: Shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
- handleColor: Color = FirefoxTheme.colors.borderInverted,
- handleCornerRadius: CornerRadius = CornerRadius.Zero,
) {
val (indicatorDirection, verticalOffset) = when (state.orientation) {
OrientationMode.Landscape -> CFRPopup.IndicatorDirection.UP to CFR_VERTICAL_OFFSET_LANDSCAPE
@@ -190,8 +175,6 @@ private fun CFRBottomSheetHandle(
contentDescription = contentDescription,
isMenuDragBarDark = isMenuDragBarDark,
cornerShape = cornerShape,
- color = handleColor,
- cornerRadius = handleCornerRadius,
)
}
}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/BottomSheetHandle.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/BottomSheetHandle.kt
@@ -4,18 +4,15 @@
package org.mozilla.fenix.compose
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.material3.BottomSheetDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.onClick
@@ -23,7 +20,6 @@ import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
-import org.mozilla.fenix.R
import org.mozilla.fenix.theme.FirefoxTheme
/**
@@ -32,49 +28,42 @@ import org.mozilla.fenix.theme.FirefoxTheme
* @param onRequestDismiss Invoked on clicking the handle when talkback is enabled.
* @param contentDescription Content Description of the composable.
* @param modifier The modifier to be applied to the Composable.
- * @param cornerRadius The corner radius of the handle.
* @param color Color of the handle.
*/
+@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomSheetHandle(
onRequestDismiss: () -> Unit,
contentDescription: String,
modifier: Modifier = Modifier,
- cornerRadius: CornerRadius = CornerRadius.Zero,
- color: Color = FirefoxTheme.colors.textSecondary,
+ color: Color = MaterialTheme.colorScheme.outline,
) {
- Canvas(
- modifier = modifier
- .height(dimensionResource(id = R.dimen.bottom_sheet_handle_height))
- .semantics(mergeDescendants = true) {
- role = Role.Button
- this.contentDescription = contentDescription
- onClick {
- onRequestDismiss()
- true
- }
- },
- ) {
- drawRoundRect(color = color, cornerRadius = cornerRadius)
- }
+ BottomSheetDefaults.DragHandle(
+ modifier = modifier.semantics(mergeDescendants = true) {
+ role = Role.Button
+ this.contentDescription = contentDescription
+ onClick {
+ onRequestDismiss()
+ true
+ }
+ },
+ color = color,
+ )
}
@Composable
@PreviewLightDark
private fun BottomSheetHandlePreview() {
FirefoxTheme {
- Column(
- modifier = Modifier
- .background(color = FirefoxTheme.colors.layer1)
- .padding(16.dp),
- ) {
- BottomSheetHandle(
- onRequestDismiss = {},
- contentDescription = "",
- modifier = Modifier
- .width(100.dp)
- .align(Alignment.CenterHorizontally),
- )
+ Surface {
+ Column(
+ modifier = Modifier.padding(16.dp),
+ ) {
+ BottomSheetHandle(
+ onRequestDismiss = {},
+ contentDescription = "",
+ )
+ }
}
}
}
diff --git a/mobile/android/fenix/app/src/main/res/drawable/bottom_sheet_handle_background.xml b/mobile/android/fenix/app/src/main/res/drawable/bottom_sheet_handle_background.xml
@@ -0,0 +1,9 @@
+<?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/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+ android:shape="rectangle">
+ <solid android:color="?attr/colorOutline" />
+ <corners android:radius="100dp" />
+</shape>
diff --git a/mobile/android/fenix/app/src/main/res/layout/component_tabhistory.xml b/mobile/android/fenix/app/src/main/res/layout/component_tabhistory.xml
@@ -15,7 +15,7 @@
android:layout_width="0dp"
android:layout_height="@dimen/bottom_sheet_handle_height"
android:layout_marginTop="@dimen/bottom_sheet_handle_top_margin"
- android:background="@color/fx_mobile_text_color_secondary"
+ android:background="@drawable/bottom_sheet_handle_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
diff --git a/mobile/android/fenix/app/src/main/res/values/dimens.xml b/mobile/android/fenix/app/src/main/res/values/dimens.xml
@@ -60,7 +60,7 @@
<!-- Bottom Sheet Fragment card -->
<dimen name="bottom_sheet_corner_radius">8dp</dimen>
<dimen name="bottom_sheet_corner_radius_28dp">28dp</dimen>
- <dimen name="bottom_sheet_handle_height">3dp</dimen>
+ <dimen name="bottom_sheet_handle_height">4dp</dimen>
<dimen name="bottom_sheet_handle_top_margin">8dp</dimen>
<!-- Browser Toolbar -->
diff --git a/mobile/android/fenix/config/detekt-baseline.xml b/mobile/android/fenix/config/detekt-baseline.xml
@@ -87,7 +87,7 @@
<ID>ForbiddenSuppress:MarketingDataOnboardingPage.kt$@Suppress("LongMethod")</ID>
<ID>ForbiddenSuppress:MarketingDataOnboardingPageRedesign.kt$@Suppress("LongMethod")</ID>
<ID>ForbiddenSuppress:Menu.kt$@Suppress("LongMethod", "CognitiveComplexMethod")</ID>
- <ID>ForbiddenSuppress:MenuDialogFragment.kt$MenuDialogFragment$@Suppress("LongMethod", "CyclomaticComplexMethod", "MagicNumber", "CognitiveComplexMethod")</ID>
+ <ID>ForbiddenSuppress:MenuDialogFragment.kt$MenuDialogFragment$@Suppress("LongMethod", "CyclomaticComplexMethod", "CognitiveComplexMethod")</ID>
<ID>ForbiddenSuppress:MenuDialogMiddleware.kt$MenuDialogMiddleware$@Suppress("LongParameterList", "CyclomaticComplexMethod")</ID>
<ID>ForbiddenSuppress:MenuNavigationMiddleware.kt$MenuNavigationMiddleware$@Suppress("CyclomaticComplexMethod", "LongMethod", "CognitiveComplexMethod")</ID>
<ID>ForbiddenSuppress:MenuTelemetryMiddleware.kt$MenuTelemetryMiddleware$@Suppress("CyclomaticComplexMethod", "LongMethod", "CognitiveComplexMethod")</ID>
