Bug 1909145 - [Menu Redesign] Display the error state of an extension in the Extensions menu description. r=android-reviewers,gl,amejiamarmol

Differential Revision: https://phabricator.services.mozilla.com/D218083

mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/MenuDialogFragment.kt

@@ -143,6 +143,7 @@ class MenuDialogFragment : BottomSheetDialogFragment() {
                     val supportedLanguages = components.core.store.state.translationEngine.supportedLanguages
                     val translateLanguageCode = selectedTab?.translationsState?.translationEngineState
                         ?.requestedTranslationPair?.toLanguage
+                    val isExtensionsProcessDisabled = browserStore.state.extensionsProcessDisabled
 
                     val navHostController = rememberNavController()
                     val coroutineScope = rememberCoroutineScope()
@@ -253,6 +254,7 @@ class MenuDialogFragment : BottomSheetDialogFragment() {
                                 isDesktopMode = isDesktopMode,
                                 isTranslationSupported = isTranslationSupported,
                                 showQuitMenu = settings.shouldDeleteBrowsingDataOnQuit,
+                                isExtensionsProcessDisabled = isExtensionsProcessDisabled,
                                 onMozillaAccountButtonClick = {
                                     store.dispatch(
                                         MenuAction.Navigate.MozillaAccount(

mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MainMenu.kt

@@ -35,6 +35,7 @@ internal const val MAIN_MENU_ROUTE = "main_menu"
  * @param isTranslationSupported Whether or not translation is supported.
  * @param showQuitMenu Whether or not the button to delete browsing data and quit
  * should be visible.
+ * @param isExtensionsProcessDisabled Whether or not the extensions process is disabled due to extension errors.
  * @param onMozillaAccountButtonClick Invoked when the user clicks on Mozilla account button.
  * @param onHelpButtonClick Invoked when the user clicks on the help button.
  * @param onSettingsButtonClick Invoked when the user clicks on the settings button.
@@ -65,6 +66,7 @@ internal fun MainMenu(
     isDesktopMode: Boolean,
     isTranslationSupported: Boolean,
     showQuitMenu: Boolean,
+    isExtensionsProcessDisabled: Boolean,
     onMozillaAccountButtonClick: () -> Unit,
     onHelpButtonClick: () -> Unit,
     onSettingsButtonClick: () -> Unit,
@@ -105,6 +107,7 @@ internal fun MainMenu(
             accessPoint = accessPoint,
             isDesktopMode = isDesktopMode,
             isTranslationSupported = isTranslationSupported,
+            isExtensionsProcessDisabled = isExtensionsProcessDisabled,
             onSwitchToDesktopSiteMenuClick = onSwitchToDesktopSiteMenuClick,
             onFindInPageMenuClick = onFindInPageMenuClick,
             onToolsMenuClick = onToolsMenuClick,
@@ -197,6 +200,7 @@ private fun ToolsAndActionsMenuGroup(
     accessPoint: MenuAccessPoint,
     isDesktopMode: Boolean,
     isTranslationSupported: Boolean,
+    isExtensionsProcessDisabled: Boolean,
     onSwitchToDesktopSiteMenuClick: () -> Unit,
     onFindInPageMenuClick: () -> Unit,
     onToolsMenuClick: () -> Unit,
@@ -259,6 +263,16 @@ private fun ToolsAndActionsMenuGroup(
 
         MenuItem(
             label = stringResource(id = R.string.browser_menu_extensions),
+            description = if (isExtensionsProcessDisabled) {
+                stringResource(R.string.browser_menu_extensions_disabled_description)
+            } else {
+                null
+            },
+            descriptionState = if (isExtensionsProcessDisabled) {
+                MenuItemState.WARNING
+            } else {
+                MenuItemState.ENABLED
+            },
             beforeIconPainter = painterResource(id = R.drawable.mozac_ic_extension_24),
             onClick = onExtensionsMenuClick,
             afterIconPainter = painterResource(id = R.drawable.mozac_ic_chevron_right_24),
@@ -347,6 +361,7 @@ private fun MenuDialogPreview() {
                 isDesktopMode = false,
                 isTranslationSupported = true,
                 showQuitMenu = true,
+                isExtensionsProcessDisabled = true,
                 onMozillaAccountButtonClick = {},
                 onHelpButtonClick = {},
                 onSettingsButtonClick = {},
@@ -385,6 +400,7 @@ private fun MenuDialogPrivatePreview() {
                 isDesktopMode = false,
                 isTranslationSupported = true,
                 showQuitMenu = true,
+                isExtensionsProcessDisabled = false,
                 onMozillaAccountButtonClick = {},
                 onHelpButtonClick = {},
                 onSettingsButtonClick = {},

mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuItem.kt

@@ -35,6 +35,7 @@ private val MENU_ITEM_HEIGHT_WITH_DESC = 56.dp
  * @param beforeIconDescription Content description of the icon.
  * @param description An optional description text below the label.
  * @param state The state of the menu item to display.
+ * @param descriptionState The state of menu item description to display.
  * @param onClick Invoked when the user clicks on the item.
  * @param showDivider Whether or not to display a vertical divider line before the [IconButton]
  * at the end.
@@ -50,6 +51,7 @@ internal fun MenuItem(
     beforeIconDescription: String? = null,
     description: String? = null,
     state: MenuItemState = MenuItemState.ENABLED,
+    descriptionState: MenuItemState = MenuItemState.ENABLED,
     onClick: (() -> Unit)? = null,
     showDivider: Boolean = false,
     afterIconPainter: Painter? = null,
@@ -57,6 +59,7 @@ internal fun MenuItem(
     onAfterIconClick: (() -> Unit)? = null,
 ) {
     val labelTextColor = getLabelTextColor(state = state)
+    val descriptionTextColor = getDescriptionTextColor(state = descriptionState)
     val iconTint = getIconTint(state = state)
     val enabled = state != MenuItemState.DISABLED
 
@@ -65,6 +68,7 @@ internal fun MenuItem(
         labelTextColor = labelTextColor,
         maxLabelLines = 2,
         description = description,
+        descriptionTextColor = descriptionTextColor,
         enabled = enabled,
         minHeight = if (description != null) {
             MENU_ITEM_HEIGHT_WITH_DESC
@@ -143,6 +147,16 @@ private fun getLabelTextColor(state: MenuItemState): Color {
     }
 }
 
+@Composable
+private fun getDescriptionTextColor(state: MenuItemState): Color {
+    return when (state) {
+        MenuItemState.ACTIVE -> FirefoxTheme.colors.textAccent
+        MenuItemState.WARNING -> FirefoxTheme.colors.textCritical
+        MenuItemState.DISABLED -> FirefoxTheme.colors.textDisabled
+        else -> FirefoxTheme.colors.textSecondary
+    }
+}
+
 @Composable
 private fun getIconTint(state: MenuItemState): Color {
     return when (state) {

mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/list/ListItem.kt

@@ -218,6 +218,7 @@ fun FaviconListItem(
  * @param label The label in the list item.
  * @param modifier [Modifier] to be applied to the layout.
  * @param labelTextColor [Color] to be applied to the label.
+ * @param descriptionTextColor [Color] to be applied to the description.
  * @param maxLabelLines An optional maximum number of lines for the label text to span.
  * @param description An optional description text below the label.
  * @param enabled Controls the enabled state of the list item. When `false`, the list item will not
@@ -240,6 +241,7 @@ fun IconListItem(
     label: String,
     modifier: Modifier = Modifier,
     labelTextColor: Color = FirefoxTheme.colors.textPrimary,
+    descriptionTextColor: Color = FirefoxTheme.colors.textSecondary,
     maxLabelLines: Int = 1,
     description: String? = null,
     enabled: Boolean = true,
@@ -258,6 +260,7 @@ fun IconListItem(
         label = label,
         modifier = modifier,
         labelTextColor = labelTextColor,
+        descriptionTextColor = descriptionTextColor,
         maxLabelLines = maxLabelLines,
         description = description,
         enabled = enabled,
@@ -443,6 +446,7 @@ private fun SelectableItemIcon(
  * @param label The label in the list item.
  * @param modifier [Modifier] to be applied to the layout.
  * @param labelTextColor [Color] to be applied to the label.
+ * @param descriptionTextColor [Color] to be applied to the description.
  * @param maxLabelLines An optional maximum number of lines for the label text to span.
  * @param description An optional description text below the label.
  * @param maxDescriptionLines An optional maximum number of lines for the description text to span.
@@ -458,6 +462,7 @@ private fun ListItem(
     label: String,
     modifier: Modifier = Modifier,
     labelTextColor: Color = FirefoxTheme.colors.textPrimary,
+    descriptionTextColor: Color = FirefoxTheme.colors.textSecondary,
     maxLabelLines: Int = 1,
     description: String? = null,
     maxDescriptionLines: Int = 1,
@@ -494,7 +499,7 @@ private fun ListItem(
             description?.let {
                 Text(
                     text = description,
-                    color = if (enabled) FirefoxTheme.colors.textSecondary else FirefoxTheme.colors.textDisabled,
+                    color = if (enabled) descriptionTextColor else FirefoxTheme.colors.textDisabled,
                     overflow = TextOverflow.Ellipsis,
                     maxLines = maxDescriptionLines,
                     style = FirefoxTheme.typography.body2,

mobile/android/fenix/app/src/main/res/values/strings.xml

@@ -193,6 +193,8 @@
     <string name="browser_menu_manage_extensions">Manage extensions</string>
     <!-- Browser menu button that opens AMO in a tab -->
     <string name="browser_menu_discover_more_extensions">Discover more extensions</string>
+    <!-- Browser menu description that is shown when extensions are disabled due to extension errors -->
+    <string name="browser_menu_extensions_disabled_description">Temporarily disabled</string>
     <!-- Browser menu button that opens account settings -->
     <string name="browser_menu_account_settings">Account info</string>
     <!-- Browser menu button that sends a user to help articles -->