[fenix] For https://github.com/mozilla-mobile/fenix/issues/17971: Add Reader view appearance controls in three-dot main menu. (https://github.com/mozilla-mobile/fenix/pull/18340)

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

@@ -143,7 +143,7 @@ class DefaultBrowserToolbarMenuController(
 
                 deleteAndQuit(activity, scope, snackbar)
             }
-            is ToolbarMenu.Item.ReaderModeAppearance -> {
+            is ToolbarMenu.Item.CustomizeReaderView -> {
                 readerModeController.showControls()
                 metrics.track(Event.ReaderModeAppearanceOpened)
             }
@@ -361,7 +361,7 @@ class DefaultBrowserToolbarMenuController(
             is ToolbarMenu.Item.OpenInFenix -> Event.BrowserMenuItemTapped.Item.OPEN_IN_FENIX
             is ToolbarMenu.Item.InstallToHomeScreen -> Event.BrowserMenuItemTapped.Item.ADD_TO_HOMESCREEN
             is ToolbarMenu.Item.Quit -> Event.BrowserMenuItemTapped.Item.QUIT
-            is ToolbarMenu.Item.ReaderModeAppearance ->
+            is ToolbarMenu.Item.CustomizeReaderView ->
                 Event.BrowserMenuItemTapped.Item.READER_MODE_APPEARANCE
             is ToolbarMenu.Item.OpenInApp -> Event.BrowserMenuItemTapped.Item.OPEN_IN_APP
             // todo === End ===

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

@@ -22,6 +22,7 @@ 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.BrowserMenuItemToolbar
+import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
 import mozilla.components.browser.menu.item.WebExtensionPlaceholderMenuItem
 import mozilla.components.browser.state.selector.findTab
 import mozilla.components.browser.state.selector.selectedTab
@@ -292,7 +293,7 @@ class DefaultToolbarMenu(
             imageResource = R.drawable.ic_readermode_appearance,
             iconTintColorResource = primaryTextColor()
         ) {
-            onItemTapped.invoke(ToolbarMenu.Item.ReaderModeAppearance)
+            onItemTapped.invoke(ToolbarMenu.Item.CustomizeReaderView)
         }
 
         val openInApp = BrowserMenuHighlightableItem(
@@ -433,6 +434,13 @@ class DefaultToolbarMenu(
             onItemTapped.invoke(ToolbarMenu.Item.RequestDesktop(checked))
         }
 
+        val customizeReaderView = SimpleBrowserMenuItem(
+            label = context.getString(R.string.browser_menu_customize_reader_view),
+            textColorResource = primaryTextColor()
+        ) {
+            onItemTapped.invoke(ToolbarMenu.Item.CustomizeReaderView)
+        }
+
         val addToHomeScreenItem = BrowserMenuImageText(
             label = context.getString(R.string.browser_menu_add_to_homescreen),
             imageResource = R.drawable.ic_add_to_homescreen,
@@ -487,6 +495,7 @@ class DefaultToolbarMenu(
                 BrowserMenuDivider(),
                 findInPageItem,
                 desktopSiteItem,
+                customizeReaderView.apply { visible = ::shouldShowReaderAppearance },
                 BrowserMenuDivider(),
                 addToHomeScreenItem.apply { visible = ::canAddToHomescreen },
                 addToTopSitesItem,

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

@@ -27,7 +27,7 @@ interface ToolbarMenu {
         object Quit : Item()
         object OpenInApp : Item()
         object Bookmark : Item()
-        object ReaderModeAppearance : Item()
+        object CustomizeReaderView : Item()
         object Bookmarks : Item()
         object History : Item()
         object Downloads : Item()

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

@@ -177,6 +177,8 @@
     <string name="browser_menu_open_app_link">Open in app</string>
     <!-- Browser menu button to configure reader mode appearance e.g. the used font type and size -->
     <string name="browser_menu_read_appearance">Appearance</string>
+    <!-- Browser menu button to show reader view appearance controls e.g. the used font type and size -->
+    <string name="browser_menu_customize_reader_view">Customize reader view</string>
     <!-- Error message to show when the user tries to access a scheme not
         handled by the app (Ex: blob, tel etc) -->
     <string name="unknown_scheme_error_message">Unable to connect. Unrecognizable URL scheme.</string>

app/src/test/java/org/mozilla/fenix/components/toolbar/DefaultBrowserToolbarMenuControllerTest.kt

@@ -237,7 +237,7 @@ class DefaultBrowserToolbarMenuControllerTest {
 
     @Test
     fun `WHEN reader mode menu item is pressed THEN handle appearance change`() = runBlockingTest {
-        val item = ToolbarMenu.Item.ReaderModeAppearance
+        val item = ToolbarMenu.Item.CustomizeReaderView
 
         val controller = createController(scope = this, store = browserStore)