Closes #654 - Use new two state button for menu toolbar buttons

app/src/main/java/org/mozilla/fenix/browser/BrowserFragment.kt

@@ -277,6 +277,7 @@ class BrowserFragment : Fragment(), BackHandler, ComponentCallbacks2 {
             ToolbarMenu.Item.Back -> sessionUseCases.goBack.invoke()
             ToolbarMenu.Item.Forward -> sessionUseCases.goForward.invoke()
             ToolbarMenu.Item.Reload -> sessionUseCases.reload.invoke()
+            ToolbarMenu.Item.Stop -> sessionUseCases.stopLoading.invoke()
             ToolbarMenu.Item.Settings -> Navigation.findNavController(toolbarComponent.getView())
                 .navigate(BrowserFragmentDirections.actionBrowserFragmentToSettingsFragment())
             ToolbarMenu.Item.Library -> Navigation.findNavController(toolbarComponent.getView())

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

@@ -34,6 +34,7 @@ class ToolbarMenu(
         object Back : Item()
         object Forward : Item()
         object Reload : Item()
+        object Stop : Item()
         object ReportIssue : Item()
         object OpenInFenix : Item()
     }
@@ -41,28 +42,68 @@ class ToolbarMenu(
     val menuBuilder by lazy { BrowserMenuBuilder(menuItems) }
 
     val menuToolbar by lazy {
-        val back = BrowserMenuItemToolbar.Button(
+        val back = BrowserMenuItemToolbar.TwoStateButton(
-            mozilla.components.ui.icons.R.drawable.mozac_ic_back,
+            primaryImageResource = mozilla.components.ui.icons.R.drawable.mozac_ic_back,
-            iconTintColorResource = DefaultThemeManager.resolveAttribute(R.attr.browserToolbarMenuIcons, context),
+            primaryContentDescription = context.getString(R.string.browser_menu_back),
-            contentDescription = context.getString(R.string.browser_menu_back)
+            primaryImageTintResource = DefaultThemeManager.resolveAttribute(
+                R.attr.browserToolbarMenuIcons,
+                context
+            ),
+            isInPrimaryState = {
+                context.components.core.sessionManager.selectedSession?.canGoBack ?: true
+            },
+            secondaryImageTintResource = DefaultThemeManager.resolveAttribute(
+                R.attr.disabledIconColor,
+                context
+            ),
+            disableInSecondaryState = true
         ) {
             onItemTapped.invoke(Item.Back)
         }
 
-        val forward = BrowserMenuItemToolbar.Button(
+        val forward = BrowserMenuItemToolbar.TwoStateButton(
-            mozilla.components.ui.icons.R.drawable.mozac_ic_forward,
+            primaryImageResource = mozilla.components.ui.icons.R.drawable.mozac_ic_forward,
-            iconTintColorResource = DefaultThemeManager.resolveAttribute(R.attr.browserToolbarMenuIcons, context),
+            primaryContentDescription = context.getString(R.string.browser_menu_forward),
-            contentDescription = context.getString(R.string.browser_menu_forward)
+            primaryImageTintResource = DefaultThemeManager.resolveAttribute(
+                R.attr.browserToolbarMenuIcons,
+                context
+            ),
+            isInPrimaryState = {
+                context.components.core.sessionManager.selectedSession?.canGoForward ?: true
+            },
+            secondaryImageTintResource = DefaultThemeManager.resolveAttribute(
+                R.attr.disabledIconColor,
+                context
+            ),
+            disableInSecondaryState = true
         ) {
             onItemTapped.invoke(Item.Forward)
         }
 
-        val refresh = BrowserMenuItemToolbar.Button(
+        val refresh = BrowserMenuItemToolbar.TwoStateButton(
-            mozilla.components.ui.icons.R.drawable.mozac_ic_refresh,
+            primaryImageResource = mozilla.components.ui.icons.R.drawable.mozac_ic_refresh,
-            iconTintColorResource = DefaultThemeManager.resolveAttribute(R.attr.browserToolbarMenuIcons, context),
+            primaryContentDescription = context.getString(R.string.browser_menu_refresh),
-            contentDescription = context.getString(R.string.browser_menu_refresh)
+            primaryImageTintResource = DefaultThemeManager.resolveAttribute(
+                R.attr.browserToolbarMenuIcons,
+                context
+            ),
+            isInPrimaryState = {
+                val loading = context.components.core.sessionManager.selectedSession?.loading
+                loading == false
+            },
+            secondaryImageResource = mozilla.components.ui.icons.R.drawable.mozac_ic_stop,
+            secondaryContentDescription = context.getString(R.string.browser_menu_stop),
+            secondaryImageTintResource = DefaultThemeManager.resolveAttribute(
+                R.attr.browserToolbarMenuIcons,
+                context
+            ),
+            disableInSecondaryState = false
         ) {
-            onItemTapped.invoke(Item.Reload)
+            if (context.components.core.sessionManager.selectedSession?.loading == true) {
+                onItemTapped.invoke(Item.Stop)
+            } else {
+                onItemTapped.invoke(Item.Reload)
+            }
         }
 
         BrowserMenuItemToolbar(listOf(back, forward, refresh))
@@ -77,12 +118,19 @@ class ToolbarMenu(
     private val menuItems by lazy {
         if (isCustomTab) {
             listOf(
-                SimpleBrowserMenuItem(context.getString(R.string.browser_menu_powered_by),
+                SimpleBrowserMenuItem(
+                    context.getString(R.string.browser_menu_powered_by),
                     CAPTION_TEXT_SIZE,
-                    DefaultThemeManager.resolveAttribute(R.attr.browserToolbarMenuIcons, context)),
+                    DefaultThemeManager.resolveAttribute(R.attr.browserToolbarMenuIcons, context)
+                ),
                 BrowserMenuDivider(),
-                SimpleBrowserMenuItem(context.getString(R.string.browser_menu_open_in_fenix),
+                SimpleBrowserMenuItem(
-                    textColorResource = DefaultThemeManager.resolveAttribute(R.attr.browserToolbarMenuIcons, context)) {
+                    context.getString(R.string.browser_menu_open_in_fenix),
+                    textColorResource = DefaultThemeManager.resolveAttribute(
+                        R.attr.browserToolbarMenuIcons,
+                        context
+                    )
+                ) {
                     onItemTapped.invoke(Item.OpenInFenix)
                 },
                 BrowserMenuImageText(

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

@@ -11,6 +11,7 @@
     <attr name="searchBarColor" format="reference" />
     <attr name="fenixPrimary" format="reference" />
     <attr name="iconColor" format="reference" />
+    <attr name="disabledIconColor" format="reference" />
     <attr name="toolbarColor" format="reference" />
 
     <!-- Home fragment -->

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

@@ -25,7 +25,10 @@
     <color name="session_border_color">@color/photonInk70</color>
 
     <color name="icons_light_mode">#20233E</color>
+    <color name="disabled_icons_light_mode">#8020233E</color>
+
     <color name="icons_dark_mode">@color/off_white</color>
+    <color name="disabled_icons_dark_mode">#80F9F9FA</color>
 
     <color name="toolbar_light_mode">@color/off_white</color>
     <color name="toolbar_dark_mode">@color/private_browsing_top_gradient</color>

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

@@ -35,6 +35,8 @@
     <string name="browser_menu_forward">Forward</string>
     <!-- Content description (not visible, for screen readers etc.): Refresh current website -->
     <string name="browser_menu_refresh">Refresh</string>
+    <!-- Content description (not visible, for screen readers etc.): Stop loading current website -->
+    <string name="browser_menu_stop">Stop</string>
     <!-- Browser menu button that sends a user to help articles -->
     <string name="browser_menu_help">Help</string>
     <!-- Browser menu button that opens the settings menu -->

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

@@ -10,6 +10,7 @@
         <item name="android:colorPrimary">@color/off_white</item>
         <item name="android:windowBackground">@color/off_white</item>
         <item name="iconColor">@color/icons_light_mode</item>
+        <item name="disabledIconColor">@color/disabled_icons_light_mode</item>
         <item name="toolbarColor">@color/toolbar_light_mode</item>
         <item name="colorPrimary">@color/off_white</item>
         <item name="colorAccent">@color/session_border_color</item>
@@ -63,6 +64,7 @@
         <item name="android:colorPrimary">@color/private_browsing_primary</item>
         <item name="android:windowBackground">@color/private_browsing_top_gradient</item>
         <item name="iconColor">@color/icons_dark_mode</item>
+        <item name="disabledIconColor">@color/disabled_icons_dark_mode</item>
         <item name="toolbarColor">@color/toolbar_dark_mode</item>
         <item name="colorPrimary">@color/private_browsing_primary</item>
         <item name="colorAccent">@color/private_browsing_primary</item>