Bug 1868989 - Translations UI Add Translate Page Browser Menu Button.

app/metrics.yaml

@@ -140,7 +140,7 @@ events:
           find_in_page, forward, history, new_tab, open_in_app, open_in_fenix,
           quit, reader_mode_appearance, reload, remove_from_top_sites,
           save_to_collection, set_default_browser, settings, share, stop,
-          sync_account, and print_content.
+          sync_account, translate and print_content.
         type: string
     bugs:
       - https://github.com/mozilla-mobile/fenix/issues/1024

app/src/androidTest/java/org/mozilla/fenix/helpers/FeatureSettingsHelper.kt

@@ -82,6 +82,11 @@ interface FeatureSettingsHelper {
      */
     var composeTopSitesEnabled: Boolean
 
+    /**
+     * Enable or disable translations flow.
+     */
+    var isTranslationsEnabled: Boolean
+
     fun applyFlagUpdates()
 
     fun resetAllFeatureFlags()

app/src/androidTest/java/org/mozilla/fenix/helpers/FeatureSettingsHelperDelegate.kt

@@ -37,6 +37,7 @@ class FeatureSettingsHelperDelegate() : FeatureSettingsHelper {
         etpPolicy = getETPPolicy(settings),
         tabsTrayRewriteEnabled = settings.enableTabsTrayToCompose,
         composeTopSitesEnabled = settings.enableComposeTopSites,
+        translationsEnabled = settings.enableTranslations,
     )
 
     /**
@@ -66,6 +67,7 @@ class FeatureSettingsHelperDelegate() : FeatureSettingsHelper {
     override var etpPolicy: ETPPolicy by updatedFeatureFlags::etpPolicy
     override var tabsTrayRewriteEnabled: Boolean by updatedFeatureFlags::tabsTrayRewriteEnabled
     override var composeTopSitesEnabled: Boolean by updatedFeatureFlags::composeTopSitesEnabled
+    override var isTranslationsEnabled: Boolean by updatedFeatureFlags::translationsEnabled
 
     override fun applyFlagUpdates() {
         applyFeatureFlags(updatedFeatureFlags)
@@ -91,6 +93,7 @@ class FeatureSettingsHelperDelegate() : FeatureSettingsHelper {
         settings.shouldShowOpenInAppBanner = featureFlags.isOpenInAppBannerEnabled
         settings.enableTabsTrayToCompose = featureFlags.tabsTrayRewriteEnabled
         settings.enableComposeTopSites = featureFlags.composeTopSitesEnabled
+        settings.enableTranslations = featureFlags.translationsEnabled
         setETPPolicy(featureFlags.etpPolicy)
     }
 }
@@ -110,6 +113,7 @@ private data class FeatureFlags(
     var etpPolicy: ETPPolicy,
     var tabsTrayRewriteEnabled: Boolean,
     var composeTopSitesEnabled: Boolean,
+    var translationsEnabled: Boolean,
 )
 
 internal fun getETPPolicy(settings: Settings): ETPPolicy {

app/src/androidTest/java/org/mozilla/fenix/helpers/HomeActivityTestRule.kt

@@ -165,6 +165,7 @@ class HomeActivityIntentTestRule internal constructor(
         etpPolicy: ETPPolicy = getETPPolicy(settings),
         tabsTrayRewriteEnabled: Boolean = false,
         composeTopSitesEnabled: Boolean = false,
+        translationsEnabled: Boolean = false,
     ) : this(initialTouchMode, launchActivity, skipOnboarding) {
         this.isHomeOnboardingDialogEnabled = isHomeOnboardingDialogEnabled
         this.isPocketEnabled = isPocketEnabled
@@ -179,6 +180,7 @@ class HomeActivityIntentTestRule internal constructor(
         this.etpPolicy = etpPolicy
         this.tabsTrayRewriteEnabled = tabsTrayRewriteEnabled
         this.composeTopSitesEnabled = composeTopSitesEnabled
+        this.isTranslationsEnabled = translationsEnabled
     }
 
     private val longTapUserPreference = getLongPressTimeout()
@@ -260,6 +262,7 @@ class HomeActivityIntentTestRule internal constructor(
             skipOnboarding: Boolean = false,
             tabsTrayRewriteEnabled: Boolean = false,
             composeTopSitesEnabled: Boolean = false,
+            translationsEnabled: Boolean = false,
         ) = HomeActivityIntentTestRule(
             initialTouchMode = initialTouchMode,
             launchActivity = launchActivity,
@@ -271,6 +274,7 @@ class HomeActivityIntentTestRule internal constructor(
             isWallpaperOnboardingEnabled = false,
             isOpenInAppBannerEnabled = false,
             composeTopSitesEnabled = composeTopSitesEnabled,
+            translationsEnabled = translationsEnabled,
         )
     }
 }

app/src/androidTest/java/org/mozilla/fenix/ui/MainMenuTest.kt

@@ -37,7 +37,8 @@ class MainMenuTest {
     private lateinit var mockWebServer: MockWebServer
 
     @get:Rule
-    val activityTestRule = HomeActivityIntentTestRule.withDefaultSettingsOverrides()
+    val activityTestRule =
+        HomeActivityIntentTestRule.withDefaultSettingsOverrides(translationsEnabled = true)
 
     @Before
     fun setUp() {

app/src/androidTest/java/org/mozilla/fenix/ui/robots/ThreeDotMenuMainRobot.kt

@@ -104,6 +104,7 @@ class ThreeDotMenuMainRobot {
             saveToCollectionButton(),
             addBookmarkButton(),
             desktopSiteToggle(isRequestDesktopSiteEnabled),
+            translateButton(),
         )
         // Swipe to second part of menu
         expandMenu()
@@ -605,6 +606,7 @@ private fun addBookmarkButton() =
         getStringResource(R.string.browser_menu_add),
     )
 private fun findInPageButton() = itemContainingText(getStringResource(R.string.browser_menu_find_in_page))
+private fun translateButton() = itemContainingText(getStringResource(R.string.browser_menu_translations))
 private fun reportSiteIssueButton() = itemContainingText("Report Site Issue")
 private fun addToHomeScreenButton() = itemContainingText(getStringResource(R.string.browser_menu_add_to_homescreen))
 private fun addToShortcutsButton() = itemContainingText(getStringResource(R.string.browser_menu_add_to_shortcuts))

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

@@ -406,6 +406,12 @@ class DefaultBrowserToolbarMenuController(
                         .show()
                 }
             }
+
+            ToolbarMenu.Item.Translate -> {
+                val directions =
+                    BrowserFragmentDirections.actionBrowserFragmentToTranslationsDialogFragment()
+                navController.navigateSafe(R.id.browserFragment, directions)
+            }
         }
     }
 
@@ -483,6 +489,12 @@ class DefaultBrowserToolbarMenuController(
                 Events.browserMenuAction.record(Events.BrowserMenuActionExtra("set_default_browser"))
             is ToolbarMenu.Item.RemoveFromTopSites ->
                 Events.browserMenuAction.record(Events.BrowserMenuActionExtra("remove_from_top_sites"))
+
+            ToolbarMenu.Item.Translate -> Events.browserMenuAction.record(
+                Events.BrowserMenuActionExtra(
+                    "translate",
+                ),
+            )
         }
     }
 

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

@@ -42,7 +42,6 @@ import org.mozilla.fenix.ext.components
 import org.mozilla.fenix.ext.settings
 import org.mozilla.fenix.nimbus.FxNimbus
 import org.mozilla.fenix.theme.ThemeManager
-import org.mozilla.fenix.utils.Settings
 
 /**
  * Builds the toolbar object used with the 3-dot menu in the browser fragment.
@@ -193,6 +192,14 @@ open class DefaultToolbarMenu(
     fun shouldShowReaderViewCustomization(): Boolean = selectedSession?.let {
         store.state.findTab(it.id)?.readerState?.active
     } ?: false
+
+    /**
+     * Should Translations menu item be visible?
+     */
+    @VisibleForTesting(otherwise = PRIVATE)
+    fun shouldShowTranslations(): Boolean = selectedSession?.let {
+        context.settings().enableTranslations
+    } ?: false
     // End of predicates //
 
     private val installToHomescreen = BrowserMenuHighlightableItem(
@@ -248,6 +255,14 @@ open class DefaultToolbarMenu(
         onItemTapped.invoke(ToolbarMenu.Item.FindInPage)
     }
 
+    private val translationsItem = BrowserMenuImageText(
+        label = context.getString(R.string.browser_menu_translations),
+        imageResource = R.drawable.mozac_ic_translate_24,
+        iconTintColorResource = primaryTextColor(),
+    ) {
+        onItemTapped.invoke(ToolbarMenu.Item.Translate)
+    }
+
     private val desktopSiteItem = BrowserMenuImageSwitch(
         imageResource = R.drawable.ic_desktop,
         label = context.getString(R.string.browser_menu_desktop_site),
@@ -405,6 +420,7 @@ open class DefaultToolbarMenu(
                 syncMenuItem(),
                 BrowserMenuDivider(),
                 findInPageItem,
+                translationsItem.apply { visible = ::shouldShowTranslations },
                 desktopSiteItem,
                 openInRegularTabItem.apply { visible = ::shouldShowOpenInRegularTab },
                 customizeReaderView.apply { visible = ::shouldShowReaderViewCustomization },

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

@@ -18,6 +18,11 @@ interface ToolbarMenu {
          */
         object OpenInRegularTab : Item()
         object FindInPage : Item()
+
+        /**
+         * Opens the translations flow.
+         */
+        object Translate : Item()
         object Share : Item()
         data class Back(val viewHistory: Boolean) : Item()
         data class Forward(val viewHistory: Boolean) : Item()

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

@@ -204,6 +204,8 @@
     <string name="resync_button_content_description">Resync</string>
     <!-- Browser menu button that opens the find in page menu -->
     <string name="browser_menu_find_in_page">Find in page</string>
+    <!-- Browser menu button that opens the translations dialog, which has options to translate the current browser page. -->
+    <string name="browser_menu_translations">Translate page</string>
     <!-- Browser menu button that saves the current tab to a collection -->
     <string name="browser_menu_save_to_collection_2">Save to collection</string>
     <!-- Browser menu button that open a share menu to share the current site -->

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

@@ -823,6 +823,24 @@ class DefaultBrowserToolbarMenuControllerTest {
         verify { navController.navigate(turnOnSyncDirections, null) }
     }
 
+    @Test
+    fun `WHEN the Translations menu item is pressed THEN navigate to translations flow`() =
+        runTest {
+            val item = ToolbarMenu.Item.Translate
+
+            val controller = createController(scope = this, store = browserStore)
+
+            controller.handleToolbarItemInteraction(item)
+
+            verify {
+                navController.navigate(
+                    directionsEq(
+                        BrowserFragmentDirections.actionBrowserFragmentToTranslationsDialogFragment(),
+                    ),
+                )
+            }
+        }
+
     @Suppress("LongParameterList")
     private fun createController(
         scope: CoroutineScope,