Bug 1837986 - the number of the normal tabs has visual defects

app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayBanner.kt

@@ -18,7 +18,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
-import androidx.compose.material.LocalContentColor
 import androidx.compose.material.Tab
 import androidx.compose.material.TabRow
 import androidx.compose.material.Text
@@ -42,6 +41,7 @@ import androidx.compose.ui.res.stringResource
 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.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import mozilla.components.browser.state.state.ContentState
@@ -172,8 +172,9 @@ private fun SingleSelectBanner(
                     contentColor = selectedColor,
                     divider = {},
                 ) {
+                    val isNormalTabsPageSelected = selectedPage == Page.NormalTabs
                     Tab(
-                        selected = selectedPage == Page.NormalTabs,
+                        selected = isNormalTabsPageSelected,
                         onClick = { onTabPageIndicatorClicked(Page.NormalTabs) },
                         modifier = Modifier
                             .fillMaxHeight()
@@ -181,7 +182,7 @@ private fun SingleSelectBanner(
                         selectedContentColor = selectedColor,
                         unselectedContentColor = inactiveColor,
                     ) {
-                        NormalTabsTabIcon(normalTabCount = normalTabCount)
+                        NormalTabsTabIcon(normalTabCount = normalTabCount, selected = isNormalTabsPageSelected)
                     }
 
                     Tab(
@@ -325,21 +326,64 @@ private fun generateSingleSelectBannerMenuItems(
     }
 }
 
+private const val MAX_VISIBLE_TABS = 99
+private const val SO_MANY_TABS_OPEN = "∞"
+private val NORMAL_TABS_BOTTOM_PADDING = 0.5.dp
+private const val ONE_DIGIT_SIZE_RATIO = 0.5f
+private const val TWO_DIGITS_SIZE_RATIO = 0.4f
+
 @Composable
-private fun NormalTabsTabIcon(normalTabCount: Int) {
+@Suppress("MagicNumber")
+private fun NormalTabsTabIcon(normalTabCount: Int, selected: Boolean) {
     val normalTabCountText: String
-    val normalTabCountTextModifier: Modifier
-    if (normalTabCount > TabCounter.MAX_VISIBLE_TABS) {
-        normalTabCountText = TabCounter.SO_MANY_TABS_OPEN
-        normalTabCountTextModifier = Modifier.padding(bottom = 1.dp)
-    } else {
-        normalTabCountText = normalTabCount.toString()
-        normalTabCountTextModifier = Modifier
+    val tabCountTextRatio: Float
+    val needsBottomPaddingForInfiniteTabs: Boolean
+
+    when (normalTabCount) {
+        in 0..9 -> {
+            normalTabCountText = normalTabCount.toString()
+            tabCountTextRatio = ONE_DIGIT_SIZE_RATIO
+            needsBottomPaddingForInfiniteTabs = false
+        }
+
+        in 10..MAX_VISIBLE_TABS -> {
+            normalTabCountText = normalTabCount.toString()
+            tabCountTextRatio = TWO_DIGITS_SIZE_RATIO
+            needsBottomPaddingForInfiniteTabs = false
+        }
+
+        else -> {
+            normalTabCountText = SO_MANY_TABS_OPEN
+            tabCountTextRatio = ONE_DIGIT_SIZE_RATIO
+            needsBottomPaddingForInfiniteTabs = true
+        }
     }
+
     val normalTabsContentDescription = if (normalTabCount == 1) {
         stringResource(id = R.string.mozac_tab_counter_open_tab_tray_single)
     } else {
-        stringResource(id = R.string.mozac_tab_counter_open_tab_tray_plural, normalTabCount.toString())
+        stringResource(
+            id = R.string.mozac_tab_counter_open_tab_tray_plural,
+            normalTabCount.toString(),
+        )
+    }
+
+    val counterBoxWidthDp =
+        dimensionResource(id = mozilla.components.ui.tabcounter.R.dimen.mozac_tab_counter_box_width_height)
+    val counterBoxWidthPx = LocalDensity.current.run { counterBoxWidthDp.roundToPx() }
+    val counterTabsTextSize = (tabCountTextRatio * counterBoxWidthPx).toInt()
+
+    val normalTabsCountTextColor = if (selected) {
+        FirefoxTheme.colors.iconActive
+    } else {
+        FirefoxTheme.colors.iconPrimaryInactive
+    }
+
+    val normalTabsTextModifier = if (needsBottomPaddingForInfiniteTabs) {
+        val bottomPadding = with(LocalDensity.current) { counterTabsTextSize.toDp() / 4 }
+        Modifier.padding(bottom = bottomPadding)
+    } else {
+        Modifier.padding(bottom = NORMAL_TABS_BOTTOM_PADDING)
     }
 
     Box(
@@ -347,21 +391,22 @@ private fun NormalTabsTabIcon(normalTabCount: Int) {
             .semantics(mergeDescendants = true) {
                 testTag = TabsTrayTestTag.normalTabsCounter
             },
+        contentAlignment = Alignment.Center,
     ) {
         Icon(
             painter = painterResource(
                 id = mozilla.components.ui.tabcounter.R.drawable.mozac_ui_tabcounter_box,
             ),
             contentDescription = normalTabsContentDescription,
-            modifier = Modifier.align(Alignment.Center),
         )
 
         Text(
             text = normalTabCountText,
-            modifier = normalTabCountTextModifier.align(Alignment.Center),
-            color = LocalContentColor.current,
-            fontSize = with(LocalDensity.current) { 12.dp.toSp() },
+            modifier = normalTabsTextModifier,
+            color = normalTabsCountTextColor,
+            fontSize = with(LocalDensity.current) { counterTabsTextSize.toDp().toSp() },
             fontWeight = FontWeight.W700,
+            textAlign = TextAlign.Center,
         )
     }
 }