For #7504 - Update sync error display in menus (#8639)

app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt

@@ -557,6 +557,7 @@ class HomeFragment : Fragment() {
         nav(R.id.homeFragment, directions)
     }
 
+    @SuppressWarnings("ComplexMethod")
     private fun createHomeMenu(context: Context): HomeMenu {
         return HomeMenu(context) {
             when (it) {
@@ -617,6 +618,14 @@ class HomeFragment : Fragment() {
                         view?.let { view -> FenixSnackbar.makeWithToolbarPadding(view) }
                     )
                 }
+                HomeMenu.Item.Sync -> {
+                    invokePendingDeleteJobs()
+                    hideOnboardingIfNeeded()
+                    nav(
+                        R.id.homeFragment,
+                        HomeFragmentDirections.actionGlobalTurnOnSync()
+                    )
+                }
             }
         }
     }

app/src/main/java/org/mozilla/fenix/home/HomeMenu.kt

@@ -14,6 +14,7 @@ import mozilla.components.browser.menu.item.BrowserMenuHighlightableItem
 import mozilla.components.browser.menu.item.BrowserMenuImageText
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.components
+import org.mozilla.fenix.ext.getColorFromAttr
 import org.mozilla.fenix.theme.ThemeManager
 import org.mozilla.fenix.utils.Settings
 import org.mozilla.fenix.whatsnew.WhatsNew
@@ -30,6 +31,7 @@ class HomeMenu(
         object History : Item()
         object Bookmarks : Item()
         object Quit : Item()
+        object Sync : Item()
     }
 
     val menuBuilder by lazy { BrowserMenuBuilder(menuItems) }
@@ -37,86 +39,94 @@ class HomeMenu(
     private val hasAccountProblem get() = context.components.backgroundServices.accountManager.accountNeedsReauth()
     private val primaryTextColor =
         ThemeManager.resolveAttribute(R.attr.primaryText, context)
+    private val syncDisconnectedColor = ThemeManager.resolveAttribute(R.attr.syncDisconnected, context)
+    private val syncDisconnectedBackgroundColor = context.getColorFromAttr(R.attr.syncDisconnectedBackground)
 
     private val menuCategoryTextColor =
         ThemeManager.resolveAttribute(R.attr.menuCategoryText, context)
 
     private val menuItems by lazy {
-        val items = mutableListOf(
+
+        val reconnectToSyncItem = BrowserMenuHighlightableItem(
+            context.getString(R.string.sync_reconnect),
+            R.drawable.ic_sync_disconnected,
+            iconTintColorResource = syncDisconnectedColor,
+            textColorResource = primaryTextColor,
+            highlight = BrowserMenuHighlight.HighPriority(
+                backgroundTint = syncDisconnectedBackgroundColor
+            ),
+            isHighlighted = { true }
+        ) {
+            onItemTapped.invoke(Item.Sync)
+        }
+
+        val whatsNewItem = BrowserMenuHighlightableItem(
+            context.getString(R.string.browser_menu_whats_new),
+            R.drawable.ic_whats_new,
+            iconTintColorResource = primaryTextColor,
+            highlight = BrowserMenuHighlight.LowPriority(
+                notificationTint = getColor(context, R.color.whats_new_notification_color)
+            ),
+            isHighlighted = { WhatsNew.shouldHighlightWhatsNew(context) }
+        ) {
+            onItemTapped.invoke(Item.WhatsNew)
+        }
+
+        val bookmarksItem = BrowserMenuImageText(
+            context.getString(R.string.library_bookmarks),
+            R.drawable.ic_bookmark_outline,
+            primaryTextColor
+        ) {
+            onItemTapped.invoke(Item.Bookmarks)
+        }
+
+        val libraryItem = BrowserMenuImageText(
+            context.getString(R.string.library_history),
+            R.drawable.ic_history,
+            primaryTextColor) {
+            onItemTapped.invoke(Item.History)
+        }
+
+        val settingsItem = BrowserMenuImageText(
+            context.getString(R.string.browser_menu_settings),
+            R.drawable.ic_settings,
+            primaryTextColor
+        ) {
+            onItemTapped.invoke(Item.Settings)
+        }
+
+        val helpItem = BrowserMenuImageText(
+            context.getString(R.string.browser_menu_help),
+            R.drawable.ic_help,
+            primaryTextColor
+        ) {
+            onItemTapped.invoke(Item.Help)
+        }
+
+        val quitItem = BrowserMenuImageText(
+            context.getString(R.string.delete_browsing_data_on_quit_action),
+            R.drawable.ic_exit,
+            primaryTextColor
+        ) {
+            onItemTapped.invoke(Item.Quit)
+        }
+
+        val items = listOfNotNull(
+            if (hasAccountProblem) reconnectToSyncItem else null,
+            whatsNewItem,
+            BrowserMenuDivider(),
             BrowserMenuCategory(
                 context.getString(R.string.browser_menu_your_library),
                 textColorResource = menuCategoryTextColor
             ),
-
+            bookmarksItem,
-            BrowserMenuImageText(
+            libraryItem,
-                context.getString(R.string.library_bookmarks),
-                R.drawable.ic_bookmark_outline,
-                primaryTextColor
-            ) {
-                onItemTapped.invoke(Item.Bookmarks)
-            },
-
-            BrowserMenuImageText(
-                context.getString(R.string.library_history),
-                R.drawable.ic_history,
-                primaryTextColor
-            ) {
-                onItemTapped.invoke(Item.History)
-            },
-
             BrowserMenuDivider(),
-
+            settingsItem,
-            BrowserMenuHighlightableItem(
+            helpItem,
-                label = context.getString(R.string.browser_menu_settings),
+            if (Settings.getInstance(context).shouldDeleteBrowsingDataOnQuit) quitItem else null
-                startImageResource = R.drawable.ic_settings,
-                iconTintColorResource =
-                    if (hasAccountProblem) R.color.sync_error_text_color else primaryTextColor,
-                textColorResource =
-                    if (hasAccountProblem) R.color.sync_error_text_color else primaryTextColor,
-
-                highlight = BrowserMenuHighlight.HighPriority(
-                    endImageResource = R.drawable.ic_alert,
-                    backgroundTint = getColor(context, R.color.sync_error_background_color)
-                ),
-                isHighlighted = { hasAccountProblem }
-            ) {
-                onItemTapped.invoke(Item.Settings)
-            },
-
-            BrowserMenuHighlightableItem(
-                context.getString(R.string.browser_menu_whats_new),
-                R.drawable.ic_whats_new,
-                iconTintColorResource = primaryTextColor,
-                highlight = BrowserMenuHighlight.LowPriority(
-                    notificationTint = getColor(context, R.color.whats_new_notification_color)
-                ),
-                isHighlighted = { WhatsNew.shouldHighlightWhatsNew(context) }
-            ) {
-                onItemTapped.invoke(Item.WhatsNew)
-            },
-
-            BrowserMenuImageText(
-                context.getString(R.string.browser_menu_help),
-                R.drawable.ic_help,
-                primaryTextColor
-            ) {
-                onItemTapped.invoke(Item.Help)
-            }
-
         )
 
-        if (Settings.getInstance(context).shouldDeleteBrowsingDataOnQuit) {
-            items.add(
-                BrowserMenuImageText(
-                    context.getString(R.string.delete_browsing_data_on_quit_action),
-                    R.drawable.ic_exit,
-                    primaryTextColor
-                ) {
-                    onItemTapped.invoke(Item.Quit)
-                }
-            )
-        }
-
         items
     }
 }

app/src/main/res/values-night/colors.xml

@@ -32,8 +32,8 @@
     <color name="toolbar_divider_color_normal_theme">@color/toolbar_divider_color_dark_theme</color>
     <color name="fill_link_from_clipboard_normal_theme">@color/accent_on_dark_background_normal_theme</color>
     <color name="menu_category_normal_theme">@color/primary_text_normal_theme</color>
-
+    <color name="sync_disconnected_icon_fill_normal_theme">@color/sync_disconnected_icon_fill_dark_theme</color>
-
+    <color name="sync_disconnected_background_normal_theme">@color/sync_disconnected_background_dark_theme</color>
 
     <!-- Collection icons-->
     <color name="collection_icon_color_violet">@color/collection_icon_color_violet_dark_theme</color>

app/src/main/res/values/attrs.xml

@@ -27,7 +27,6 @@
     <attr name="toolbarDivider" format="reference"/>
     <attr name="menuCategoryText" format="reference"/>
 
-
     <!-- Misc -->
     <attr name="homeBackground" format="reference"/>
     <attr name="bottomBarBackground" format="reference"/>
@@ -41,6 +40,8 @@
     <attr name="toolbarEndGradient" format="reference"/>
     <attr name="shieldLottieFile" format="reference" />
     <attr name="fillLinkFromClipboard" format="reference"/>
+    <attr name="syncDisconnected" format="reference" />
+    <attr name="syncDisconnectedBackground" format="reference" />
 
     <declare-styleable name="LibraryListItem">
         <attr name="listItemTitle" format="reference" />

app/src/main/res/values/colors.xml

@@ -34,7 +34,8 @@
     <color name="toolbar_end_gradient_light_theme">@color/foundation_light_theme</color>
     <color name="toolbar_divider_color_light_theme">#CDCCCF</color>
     <color name="fill_link_from_clipboard_light_theme">@color/accent_light_theme</color>
-
+    <color name="sync_disconnected_icon_fill_light_theme">#C45A27</color>
+    <color name="sync_disconnected_background_light_theme">#FFFDE2</color>
 
     <!-- Dark theme color palette -->
     <color name="primary_text_dark_theme">#FBFBFE</color>
@@ -65,7 +66,8 @@
     <color name="toolbar_end_gradient_dark_theme">@color/foundation_dark_theme</color>
     <color name="toolbar_divider_color_dark_theme">@color/neutral_faded_dark_theme</color>
     <color name="fill_link_from_clipboard_dark_theme">@color/accent_on_dark_background_normal_theme</color>
-
+    <color name="sync_disconnected_icon_fill_dark_theme">#FFF36E</color>
+    <color name="sync_disconnected_background_dark_theme">#5B5846</color>
 
     <!-- Private theme color palette -->
     <color name="primary_text_private_theme">#FBFBFE</color>
@@ -94,7 +96,8 @@
     <color name="toolbar_divider_color_private_theme">#403760</color>
     <color name="fill_link_from_clipboard_private_theme">@color/accent_on_dark_background_private_theme</color>
     <color name="menu_category_private_theme">@color/primary_text_private_theme</color>
-
+    <color name="sync_disconnected_icon_fill_private_theme">#C45A27</color>
+    <color name="sync_disconnected_background_private_theme">#5B5846</color>
 
     <!-- Normal theme colors for light mode -->
     <color name="primary_text_normal_theme">@color/primary_text_light_theme</color>
@@ -122,6 +125,8 @@
     <color name="toolbar_divider_color_normal_theme">@color/toolbar_divider_color_light_theme</color>
     <color name="fill_link_from_clipboard_normal_theme">@color/fill_link_from_clipboard_light_theme</color>
     <color name="menu_category_normal_theme">@color/accent_light_theme</color>
+    <color name="sync_disconnected_icon_fill_normal_theme">@color/sync_disconnected_icon_fill_light_theme</color>
+    <color name="sync_disconnected_background_normal_theme">@color/sync_disconnected_background_light_theme</color>
 
     <!-- Bookmark buttons -->
     <color name="bookmark_favicon_background">#DFDFE3</color>

app/src/main/res/values/styles.xml

@@ -56,6 +56,8 @@
         <item name="toolbarDivider">@color/toolbar_divider_color_normal_theme</item>
         <item name="fillLinkFromClipboard">@color/fill_link_from_clipboard_normal_theme</item>
         <item name="menuCategoryText">@color/menu_category_normal_theme</item>
+        <item name="syncDisconnected">@color/sync_disconnected_icon_fill_normal_theme</item>
+        <item name="syncDisconnectedBackground">@color/sync_disconnected_background_normal_theme</item>
 
         <!-- Drawables -->
         <item name="fenixLogo">@drawable/ic_logo_wordmark_normal</item>
@@ -147,6 +149,8 @@
         <item name="toolbarDivider">@color/toolbar_divider_color_private_theme</item>
         <item name="fillLinkFromClipboard">@color/fill_link_from_clipboard_private_theme</item>
         <item name="menuCategoryText">@color/menu_category_private_theme</item>
+        <item name="syncDisconnected">@color/sync_disconnected_icon_fill_private_theme</item>
+        <item name="syncDisconnectedBackground">@color/sync_disconnected_background_private_theme</item>
 
         <!-- Drawables -->
         <item name="fenixLogo">@drawable/ic_logo_wordmark_private</item>