Bug 1877123 - Fix number localization in TabCounter and TabTools

fenix/app/src/main/java/org/mozilla/fenix/compose/TabCounter.kt

@@ -4,6 +4,7 @@
 
 package org.mozilla.fenix.compose
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Icon
@@ -21,9 +22,11 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
+import org.mozilla.fenix.compose.ext.toLocaleString
 import org.mozilla.fenix.tabstray.TabsTrayTestTag
 import org.mozilla.fenix.theme.FirefoxTheme
 
@@ -48,19 +51,20 @@ private const val TAB_TEXT_BOTTOM_PADDING_RATIO = 4
 
 @Composable
 fun TabCounter(tabCount: Int) {
+    val formattedTabCount = tabCount.toLocaleString()
     val normalTabCountText: String
     val tabCountTextRatio: Float
     val needsBottomPaddingForInfiniteTabs: Boolean
 
     when (tabCount) {
         in MIN_SINGLE_DIGIT..MAX_SINGLE_DIGIT -> {
-            normalTabCountText = tabCount.toString()
+            normalTabCountText = formattedTabCount
             tabCountTextRatio = ONE_DIGIT_SIZE_RATIO
             needsBottomPaddingForInfiniteTabs = false
         }
 
         in TWO_DIGIT_THRESHOLD..MAX_VISIBLE_TABS -> {
-            normalTabCountText = tabCount.toString()
+            normalTabCountText = formattedTabCount
             tabCountTextRatio = TWO_DIGITS_SIZE_RATIO
             needsBottomPaddingForInfiniteTabs = false
         }
@@ -77,7 +81,7 @@ fun TabCounter(tabCount: Int) {
     } else {
         stringResource(
             id = R.string.mozac_tab_counter_open_tab_tray_plural,
-            tabCount.toString(),
+            formattedTabCount,
         )
     }
 
@@ -119,9 +123,14 @@ fun TabCounter(tabCount: Int) {
 }
 
 @LightDarkPreview
+@Preview(locale = "ar")
 @Composable
 private fun TabCounterPreview() {
     FirefoxTheme {
-        TabCounter(tabCount = 55)
+        Box(
+            modifier = Modifier.background(color = FirefoxTheme.colors.layer1),
+        ) {
+            TabCounter(tabCount = 55)
+        }
     }
 }

fenix/app/src/main/java/org/mozilla/fenix/compose/ext/Int.kt

@@ -0,0 +1,15 @@
+/* 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/. */
+
+package org.mozilla.fenix.compose.ext
+
+import androidx.compose.ui.text.intl.Locale
+import java.text.NumberFormat
+import java.util.Locale as JavaLocale
+
+/**
+ * Returns a localized string representation of the value.
+ */
+fun Int.toLocaleString(): String =
+    NumberFormat.getNumberInstance(JavaLocale(Locale.current.language)).format(this)

fenix/app/src/main/java/org/mozilla/fenix/debugsettings/tabs/TabTools.kt

@@ -43,6 +43,7 @@ import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.Divider
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
 import org.mozilla.fenix.compose.button.PrimaryButton
+import org.mozilla.fenix.compose.ext.toLocaleString
 import org.mozilla.fenix.debugsettings.ui.DebugDrawer
 import org.mozilla.fenix.ext.maxActiveTime
 import org.mozilla.fenix.tabstray.ext.isNormalTabInactive
@@ -152,19 +153,19 @@ private fun TabCounter(
 
         TabCountRow(
             tabType = stringResource(R.string.debug_drawer_tab_tools_tab_count_normal),
-            count = activeTabCount.toString(),
+            count = activeTabCount,
         )
 
         if (inactiveTabsEnabled) {
             TabCountRow(
                 tabType = stringResource(R.string.debug_drawer_tab_tools_tab_count_inactive),
-                count = inactiveTabCount.toString(),
+                count = inactiveTabCount,
             )
         }
 
         TabCountRow(
             tabType = stringResource(R.string.debug_drawer_tab_tools_tab_count_private),
-            count = privateTabCount.toString(),
+            count = privateTabCount,
         )
 
         Spacer(modifier = Modifier.height(8.dp))
@@ -175,15 +176,15 @@ private fun TabCounter(
 
         TabCountRow(
             tabType = stringResource(R.string.debug_drawer_tab_tools_tab_count_total),
-            count = totalTabCount.toString(),
+            count = totalTabCount,
         )
     }
 }
 
 @Composable
 private fun TabCountRow(
     tabType: String,
-    count: String,
+    count: Int,
 ) {
     Row(
         modifier = Modifier
@@ -198,22 +199,22 @@ private fun TabCountRow(
         )
 
         Text(
-            text = count,
+            text = count.toLocaleString(),
             color = FirefoxTheme.colors.textSecondary,
             style = FirefoxTheme.typography.headline6,
         )
     }
 }
 
-private const val DEFAULT_TABS_TO_ADD = "1"
+private const val DEFAULT_TABS_TO_ADD = 1
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun TabCreationTool(
     inactiveTabsEnabled: Boolean,
     onCreateTabsClick: ((quantity: Int, isInactive: Boolean, isPrivate: Boolean) -> Unit),
 ) {
-    var tabQuantityToCreate by rememberSaveable { mutableStateOf(DEFAULT_TABS_TO_ADD) }
+    var tabQuantityToCreate by rememberSaveable { mutableStateOf(DEFAULT_TABS_TO_ADD.toLocaleString()) }
     var hasError by rememberSaveable { mutableStateOf(false) }
     val keyboardController = LocalSoftwareKeyboardController.current
 

fenix/app/src/test/java/org/mozilla/fenix/compose/ext/IntTest.kt

@@ -0,0 +1,23 @@
+/* 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/. */
+
+package org.mozilla.fenix.compose.ext
+
+import org.junit.Assert.assertEquals
+import org.junit.Test
+import java.util.Locale as JavaLocale
+
+class IntTest {
+
+    @Test
+    fun `WHEN the language is Arabic THEN translate the number to the proper symbol of that locale`() {
+        val expected = "٥"
+        val numberUnderTest = 5
+
+        JavaLocale.setDefault(JavaLocale("ar"))
+
+        assertEquals(expected, numberUnderTest.toLocaleString())
+    }
+
+}