[fenix] For https://github.com/mozilla-mobile/fenix/issues/17797: Add bookmarks menu item.

app/src/main/java/org/mozilla/fenix/components/toolbar/DefaultToolbarMenu.kt

@@ -21,6 +21,7 @@ import mozilla.components.browser.menu.item.BrowserMenuDivider
 import mozilla.components.browser.menu.item.BrowserMenuHighlightableItem
 import mozilla.components.browser.menu.item.BrowserMenuImageSwitch
 import mozilla.components.browser.menu.item.BrowserMenuImageText
+import mozilla.components.browser.menu.item.BrowserMenuImageTextCheckboxButton
 import mozilla.components.browser.menu.item.BrowserMenuItemToolbar
 import mozilla.components.browser.menu.item.WebExtensionPlaceholderMenuItem
 import mozilla.components.browser.state.selector.findTab
@@ -163,8 +164,7 @@ class DefaultToolbarMenu(
                 secondaryImageTintResource = primaryTextColor(),
                 disableInSecondaryState = false
             ) {
-                if (!isCurrentUrlBookmarked) isCurrentUrlBookmarked = true
-                onItemTapped.invoke(ToolbarMenu.Item.Bookmark)
+                handleBookmarkItemTapped()
             }
 
             BrowserMenuItemToolbar(listOf(back, forward, bookmark, share, refresh))
@@ -375,14 +375,6 @@ class DefaultToolbarMenu(
             onItemTapped.invoke(ToolbarMenu.Item.NewTab)
         }
 
-        val bookmarksItem = BrowserMenuImageText(
-            context.getString(R.string.library_bookmarks),
-            R.drawable.ic_bookmark_filled,
-            primaryTextColor()
-        ) {
-            onItemTapped.invoke(ToolbarMenu.Item.Bookmarks)
-        }
-
         val historyItem = BrowserMenuImageText(
             context.getString(R.string.library_history),
             R.drawable.ic_history,
@@ -495,6 +487,23 @@ class DefaultToolbarMenu(
             onItemTapped.invoke(ToolbarMenu.Item.Settings)
         }
 
+        val bookmarksItem = BrowserMenuImageTextCheckboxButton(
+            imageResource = R.drawable.ic_bookmarks_menu,
+            iconTintColorResource = primaryTextColor(),
+            label = context.getString(R.string.library_bookmarks),
+            labelListener = {
+                onItemTapped.invoke(ToolbarMenu.Item.Bookmarks)
+            },
+            primaryStateIconResource = R.drawable.ic_bookmark_outline,
+            secondaryStateIconResource = R.drawable.ic_bookmark_filled,
+            tintColorResource = accentBrightTextColor(),
+            primaryLabel = context.getString(R.string.add_label),
+            secondaryLabel = context.getString(R.string.edit_label),
+            isInPrimaryState = { !isCurrentUrlBookmarked }
+        ) {
+            handleBookmarkItemTapped()
+        }
+
         val menuItems =
             listOfNotNull(
                 if (isTopToolbarSelected) menuToolbar else null,
@@ -524,10 +533,19 @@ class DefaultToolbarMenu(
         menuItems
     }
 
+    private fun handleBookmarkItemTapped() {
+        if (!isCurrentUrlBookmarked) isCurrentUrlBookmarked = true
+        onItemTapped.invoke(ToolbarMenu.Item.Bookmark)
+    }
+
     @ColorRes
     @VisibleForTesting
     internal fun primaryTextColor() = ThemeManager.resolveAttribute(R.attr.primaryText, context)
 
+    @ColorRes
+    @VisibleForTesting
+    internal fun accentBrightTextColor() = ThemeManager.resolveAttribute(R.attr.accentBright, context)
+
     @VisibleForTesting
     internal fun registerForIsBookmarkedUpdates() {
         store.flowScoped(lifecycleOwner) { flow ->

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

@@ -0,0 +1,13 @@
+<?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="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#20123A"
+        android:pathData="M7,15L7.7,11.2L4.8,8.5C4.4,8 4.4,7.3 4.8,6.9001C5,6.7 5.2,6.6 5.5,6.6L9.3,6.0001L11,2.6C11.3,2.0001 12.1,1.8001 12.6,2.2001C12.8,2.3001 12.9,2.4 13,2.6L14.7,6.0001L18.5,6.6C19.1,6.7 19.5,7.3 19.4,7.9001C19.4,8.1 19.3,8.4001 19.1,8.5L16.3,11.2L17,15C17.1,15.4 16.9,15.8 16.6,16.1C16.4,16.2 16.2,16.3 15.9,16.3C15.7,16.3 15.5,16.3 15.4,16.2L12,14.4L8.6,16.2C8,16.5 7.4,16.2 7.1,15.7C7,15.4 7,15.2 7,15ZM5,16.9C4.4,16.9 4,17.3 4,17.9V18.9C4,20.6 5.3,21.9 7,21.9H17C18.7,21.9 20,20.6 20,18.9V17.9C20,17.3 19.6,16.9 19,16.9C18.4,16.9 18,17.3 18,17.9V18.9C18,19.5 17.6,19.9 17,19.9H7C6.4,19.9 6,19.5 6,18.9V17.9C6,17.3 5.6,16.9 5,16.9Z" />
+</vector>

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

@@ -7,6 +7,10 @@
     <string name="cancel">Cancel</string>
     <!-- A 'Save' string to be used for labeling UI elements. -->
     <string name="save">Save</string>
+    <!-- An 'Add' string to be used for labeling UI elements. -->
+    <string name="add_label">Add</string>
+    <!-- A 'Edit' string to be used for labeling UI elements. -->
+    <string name="edit_label">Edit</string>
 
     <!-- App name for private browsing mode. The first parameter is the name of the app defined in app_name (for example: Fenix)-->
     <string name="app_name_private_5">Private %s</string>