[Bug]: synced tab's title not show completely when switching tab from private to synced

[jackyzy823]

Steps to reproduce

1. Sign in into your fxa account.
2. Switch To Private Tab Tray
3. Then switch to Synced Tab Tray
4. Click "Sync" button

Expected behaviour

Titles are displayed completely and correctly.

Actual behaviour

Only emojis will show. the other text in title is not showed.

Device name

No response

Android version

Android 11

Firefox release type

Firefox Beta

Firefox version

103.0.0-beta.5

Device logs

No response

Additional information

To prove my synced tabs have titles.
Here's the screenshot that switch from normal tab to synced tab. It displays correctly and completely.

┆Issue is synchronized with this Jira Task

[jackyzy823]

Update: Dark Theme do not have this bug. Only happens on LightTheme.

[jackyzy823]

Ok , I might figure out why.

The background of SyncedTabsList have only two options (maybe because there's no Modifier of background here or maybe based on the logic of getTheme. I'm not familiar with Compose stuff)

fenix/app/src/main/java/org/mozilla/fenix/tabstray/viewholders/SyncedTabsPageViewHolder.kt

Lines 34 to 40 in b6f140a

	FirefoxTheme {
	SyncedTabsList(
	syncedTabs = tabs ?: emptyList(),
	taskContinuityEnabled = composeView.context.settings().enableTaskContinuityEnhancements,
	onTabClick = navigationInteractor::onSyncedTabClicked,
	)
	}

the text of title have three options Light/Dark/Private. may be based on the logic of :

fenix/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt

Lines 40 to 47 in 06488cd

	fun getTheme() =
	if (!inComposePreview && LocalContext.current.settings().lastKnownMode.isPrivate) {
	Private
	} else if (isSystemInDarkTheme()) {
	Dark
	} else {
	Light
	}

.

So It would be invisible if text is Private (textPrimary = LightGrey05 0xFFFBFBFE , #FBFBFE )

fenix/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt

Line 108 in 06488cd

textPrimary = PhotonColors.LightGrey05,

and backgroud is Light (PhotonColors.LightGrey10 0xFFF9F9FB , #F9F9FB)

fenix/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt

Line 216 in 06488cd

layer1 = PhotonColors.LightGrey10,

So 1) either make background have three options ( which will make user confused why synced tabs are displayed in Purple background (Private Mode) ) , or 2) make the text in Private do not conflict with background in Light.

Could anyone helps on this issue ? @gabrielluong @Alexandru2909

Thanks.

[gabrielluong]

I believe @MozillaNoah is working on a fix for the private theme colors showing up in the tabs tray in #22558. Basically, the tabs tray only shows the dark/light theme, but in the synced tabs we have started to use the design system color tokens which will show the private theme colors when the design of the tabs tray wasn't suppose to.

[MozillaNoah]

hey, @jackyzy823, thanks for filing this issue! As @gabrielluong pointed out, I'm actually in the middle of working on fix for this right now! I'm going to go ahead and close this, but a fix will be out soon! Here's the pull request.