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(
+
-            BrowserMenuCategory(
+        val reconnectToSyncItem = BrowserMenuHighlightableItem(
-                context.getString(R.string.browser_menu_your_library),
+            context.getString(R.string.sync_reconnect),
-                textColorResource = menuCategoryTextColor
+            R.drawable.ic_sync_disconnected,
+            iconTintColorResource = syncDisconnectedColor,
+            textColorResource = primaryTextColor,
+            highlight = BrowserMenuHighlight.HighPriority(
+                backgroundTint = syncDisconnectedBackgroundColor
             ),
+            isHighlighted = { true }
+        ) {
+            onItemTapped.invoke(Item.Sync)
+        }
 
-            BrowserMenuImageText(
+        val whatsNewItem = BrowserMenuHighlightableItem(
-                context.getString(R.string.library_bookmarks),
+            context.getString(R.string.browser_menu_whats_new),
-                R.drawable.ic_bookmark_outline,
+            R.drawable.ic_whats_new,
-                primaryTextColor
+            iconTintColorResource = primaryTextColor,
-            ) {
+            highlight = BrowserMenuHighlight.LowPriority(
-                onItemTapped.invoke(Item.Bookmarks)
+                notificationTint = getColor(context, R.color.whats_new_notification_color)
-            },
+            ),
-
+            isHighlighted = { WhatsNew.shouldHighlightWhatsNew(context) }
-            BrowserMenuImageText(
+        ) {
-                context.getString(R.string.library_history),
+            onItemTapped.invoke(Item.WhatsNew)
-                R.drawable.ic_history,
+        }
-                primaryTextColor
-            ) {
-                onItemTapped.invoke(Item.History)
-            },
 
-            BrowserMenuDivider(),
+        val bookmarksItem = BrowserMenuImageText(
+            context.getString(R.string.library_bookmarks),
+            R.drawable.ic_bookmark_outline,
+            primaryTextColor
+        ) {
+            onItemTapped.invoke(Item.Bookmarks)
+        }
 
-            BrowserMenuHighlightableItem(
+        val libraryItem = BrowserMenuImageText(
-                label = context.getString(R.string.browser_menu_settings),
+            context.getString(R.string.library_history),
-                startImageResource = R.drawable.ic_settings,
+            R.drawable.ic_history,
-                iconTintColorResource =
+            primaryTextColor) {
-                    if (hasAccountProblem) R.color.sync_error_text_color else primaryTextColor,
+            onItemTapped.invoke(Item.History)
-                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)
-            }
 
-        )
+        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)
+        }
 
-        if (Settings.getInstance(context).shouldDeleteBrowsingDataOnQuit) {
+        val quitItem = BrowserMenuImageText(
-            items.add(
+            context.getString(R.string.delete_browsing_data_on_quit_action),
-                BrowserMenuImageText(
+            R.drawable.ic_exit,
-                    context.getString(R.string.delete_browsing_data_on_quit_action),
+            primaryTextColor
-                    R.drawable.ic_exit,
+        ) {
-                    primaryTextColor
+            onItemTapped.invoke(Item.Quit)
-                ) {
-                    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,
+            libraryItem,
+            BrowserMenuDivider(),
+            settingsItem,
+            helpItem,
+            if (Settings.getInstance(context).shouldDeleteBrowsingDataOnQuit) quitItem else null
+        )
+
         items
     }
 }

app/src/main/res/drawable/ic_sync_disconnected.xml

@@ -0,0 +1,15 @@
+<?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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="23dp"
+    android:height="21dp"
+    android:viewportWidth="23"
+    android:viewportHeight="21">
+  <path
+      android:pathData="M15.9992,9C16.6039,9 17.1604,9.3162 17.4716,9.8263L17.5442,9.9578L21.8642,18.5078C22.1369,19.0569 22.0977,19.7095 21.7612,20.222C21.4527,20.6917 20.937,20.9791 20.3815,20.999L20.2292,20.9978L11.6792,20.9978C11.0909,20.9822 10.5511,20.6677 10.2474,20.1635C9.9741,19.7098 9.9259,19.1588 10.1094,18.6687L10.1792,18.5078L14.4542,9.9578C14.7456,9.3711 15.3441,9 15.9992,9ZM10,0C15.5228,0 20,4.4772 20,10C19.9992,10.7347 19.9192,11.451 19.7682,12.1406L18.4368,9.5068C17.9796,8.5862 17.0341,8 15.9992,8C15.1482,8 14.3575,8.3964 13.8475,9.0527C14.1063,8.5065 14.25,7.895 14.25,7.25C14.25,4.9026 12.3474,3 10,3C7.6526,3 5.75,4.9026 5.75,7.25C5.75,9.5974 7.6526,11.5 10,11.5C11.4196,11.5 12.6765,10.8042 13.4483,9.735L12.2065,12.2178C11.4955,12.5135 10.7527,12.8 9.9997,12.8C7.8675,12.8 5.8151,10.4998 4.3339,12.2092C3.9139,12.6936 3.8803,13.3992 4.2401,13.9284C5.4639,15.7293 7.4894,16.9372 9.8164,16.9976L9.2848,18.0606C8.989,18.6578 8.9251,19.3312 9.0873,19.9574C3.992,19.4977 0,15.215 0,10C0,4.4772 4.4772,0 10,0ZM15.323,17.2915C15.0312,17.5833 14.944,18.022 15.1019,18.4031C15.2597,18.7843 15.6317,19.0328 16.0442,19.0328C16.6075,19.0328 17.0642,18.5761 17.0642,18.0128C17.0642,17.6002 16.8157,17.2283 16.4345,17.0704C16.0534,16.9126 15.6147,16.9998 15.323,17.2915ZM15.5841,11.9901C15.2989,12.1719 15.1449,12.5025 15.1892,12.8378L15.1892,15.4328C15.2464,15.8655 15.6153,16.1888 16.0517,16.1888C16.4881,16.1888 16.857,15.8655 16.9142,15.4328L16.9142,12.8378C16.9585,12.5025 16.8045,12.1719 16.5193,11.9901C16.2341,11.8084 15.8694,11.8084 15.5841,11.9901Z"
+      android:strokeWidth="1"
+      android:fillColor="#20123A"
+      android:fillType="nonZero"/>
+</vector>

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>