commit 01bc91ff08ccd25e7737eaa397bf885c9caf83b6
parent 686314543e5d32aa659794940b64224717e783c1
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Wed, 17 Dec 2025 17:25:51 +0000
Bug 2005917 - Use Firefox logo for the Homepage tab in the tab tray and tap strip r=android-reviewers,tthibaud
- Aligned the tab header favicon sizes with the Figma
- Tab Management Figma: https://www.figma.com/design/EWyFmiYienV32vUUeE0Im1/Tab-Management-for-Android?node-id=12548-3648&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D276362
Diffstat:
3 files changed, 43 insertions(+), 18 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/browser/tabstrip/TabStrip.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/browser/tabstrip/TabStrip.kt
@@ -62,6 +62,7 @@ import mozilla.components.browser.state.action.TabListAction
import mozilla.components.browser.state.state.createTab
import mozilla.components.browser.state.store.BrowserStore
import mozilla.components.compose.base.modifier.thenConditional
+import mozilla.components.concept.engine.utils.ABOUT_HOME_URL
import mozilla.components.feature.tabs.TabsUseCases
import mozilla.components.lib.state.ext.observeAsState
import org.mozilla.fenix.R
@@ -447,6 +448,11 @@ private fun TabStripIcon(
.size(tabStripIconSize)
.clip(CircleShape),
)
+ } else if (url == ABOUT_HOME_URL) {
+ Favicon(
+ imageResource = R.drawable.ic_firefox,
+ size = tabStripIconSize,
+ )
} else {
Favicon(
url = url,
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ThumbnailImage.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ThumbnailImage.kt
@@ -26,6 +26,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch
@@ -34,6 +35,8 @@ import mozilla.components.browser.state.state.createTab
import mozilla.components.compose.base.theme.information
import mozilla.components.compose.base.utils.inComposePreview
import mozilla.components.concept.base.images.ImageLoadRequest
+import mozilla.components.concept.engine.utils.ABOUT_HOME_URL
+import org.mozilla.fenix.R
import org.mozilla.fenix.components.components
import org.mozilla.fenix.theme.FirefoxTheme
@@ -177,6 +180,14 @@ private fun FallbackContent(
.clip(RoundedCornerShape(8.dp)),
contentScale = ContentScale.FillWidth,
)
+ } else if (tab.content.url == ABOUT_HOME_URL) {
+ Image(
+ painter = painterResource(id = R.drawable.ic_firefox),
+ contentDescription = null,
+ modifier = Modifier
+ .size(FallbackIconSize)
+ .clip(RoundedCornerShape(8.dp)),
+ )
} else {
Favicon(
url = tab.content.url,
@@ -218,6 +229,11 @@ private fun ThumbnailImagePreview() {
.size(50.dp)
.background(color = MaterialTheme.colorScheme.information),
)
+
+ FallbackContent(
+ tab = createTab(url = ABOUT_HOME_URL, title = "Mozilla"),
+ modifier = Modifier.size(50.dp),
+ )
}
}
}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/ui/tabitems/TabGridItem.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/ui/tabitems/TabGridItem.kt
@@ -56,6 +56,7 @@ import mozilla.components.browser.state.state.TabSessionState
import mozilla.components.browser.state.state.createTab
import mozilla.components.compose.base.RadioCheckmark
import mozilla.components.compose.base.RadioCheckmarkColors
+import mozilla.components.concept.engine.utils.ABOUT_HOME_URL
import mozilla.components.support.base.utils.MAX_URI_LENGTH
import mozilla.components.support.utils.ext.isLandscape
import mozilla.components.ui.colors.PhotonColors
@@ -79,6 +80,7 @@ private val ThumbnailShape = RoundedCornerShape(
bottomEnd = 12.dp,
)
private val TabHeaderIconTouchTargetSize = 40.dp
+private val TabHeaderFaviconSize = 12.dp
/**
* Tab grid item used to display a tab that supports clicks,
@@ -212,28 +214,29 @@ private fun TabContent(
Image(
bitmap = icon.asImageBitmap(),
contentDescription = null,
- modifier = Modifier.size(12.dp),
+ modifier = Modifier.size(TabHeaderFaviconSize),
+ )
+ } else if (tab.content.url == ABOUT_HOME_URL) {
+ Image(
+ painter = painterResource(id = R.drawable.ic_firefox),
+ contentDescription = null,
+ modifier = Modifier.size(TabHeaderFaviconSize),
)
-
- Spacer(modifier = Modifier.width(4.dp))
} else {
- Box(
- modifier = Modifier.size(24.dp),
- contentAlignment = Alignment.Center,
- ) {
- Icon(
- painter = painterResource(id = iconsR.drawable.mozac_ic_globe_24),
- contentDescription = null,
- modifier = Modifier.size(20.dp),
- tint = if (isSelected) {
- MaterialTheme.colorScheme.onPrimary
- } else {
- MaterialTheme.colorScheme.onSurface
- },
- )
- }
+ Icon(
+ painter = painterResource(id = iconsR.drawable.mozac_ic_globe_24),
+ contentDescription = null,
+ modifier = Modifier.size(TabHeaderFaviconSize),
+ tint = if (isSelected) {
+ MaterialTheme.colorScheme.onPrimary
+ } else {
+ MaterialTheme.colorScheme.onSurface
+ },
+ )
}
+ Spacer(modifier = Modifier.width(4.dp))
+
Text(
text = tab.toDisplayTitle().take(MAX_URI_LENGTH),
modifier = Modifier.weight(1f),
