1813875 - PWA & Custom Tabs: Status bar & Navigation Bar issue

Status: RESOLVED FIXED

(Fenix :: Tabs, defect, P3)

Description

[Jeff Boek [:boek]]

From github: https://github.com/mozilla-mobile/fenix/issues/27221.

Steps to reproduce

For PWA apps: (Could be any website, I'm choosing Twitter)

• Go to twitter.com.
• Tap 3 dot menu > Tap install.
• Open PWA Twitter app
• Observe.

For custom Tabs:

• Open links with Firefox browsers.
• Observe.

Expected behaviour

Status Bar's & Navigation Bar's color should complement or sync with website's color.

Actual behaviour

Status bar color is white all the time. Navigation Bar color isn't synced with website's color, it's default browser color and looks mismatched.
PWA app:

Custom Tab:

Device name

Vivo Y20 2021

Android version

Android 11

Firefox release type

Firefox

Firefox version

105.1.0

Device logs

No crash logs.

Additional information

Default browsing experience isn't syncing with website's color:

┆Issue is synchronized with this Jira Task

Change performed by the Move to Bugzilla add-on.

Comment 1

[Makoto Kato [:m_kato]]

I cannot reproduce this on Android 11 (Xiaomi Redmi 9T. But background color kept black), but I can reproduce this on Android 12+ (Pixel 4a and OPPO). Although we set foreground color for notification area, but it isn't applied. I don't know why.

Comment 7

[anthonyvelez.wdi]

Bug listed under "See Also" ( https://bugzilla.mozilla.org/show_bug.cgi?id=1795650 ) was just recently fixed, any idea if those changes can possibly similarly help fix this bug?

Comment 8

[thomas_schaz]

Why is a simple icon color issue taking more than 2 years to fix? What is making this so difficult? Any way one can support on this to get it fixed? I can't stand seeing a plain white status bar any more every time I open an installed page...

Comment 9

[fxzxmicah]

I also found this problem, and I also installed wordpress and github pwa, they're normal. So there must be something special about Twitter (X) that causes this problem.

Comment 10

[fxzxmicah]

In addition, WordPress's pwa doesn't actually apply background color to the Android status bar because wordpress doesn't have a dark color mode. So the background is white, but the status bar is still dark. So I don't know exactly where the color is applied to the Android status bar.
I think adapting the Android status bar color is a very complicated aspect, and what color to use as the status bar color is a topic worth thinking and discussing.
In this respect, there is a similar problem in Chrome.
Note: The wordpress mentioned above refers to wordpress.com.

Comment 11

[fxzxmicah]

In Firefox, with Firefox set to bright mode, Twitter (X) has a 50% chance of having a black startup page first, in Chrome, however, the startup page normally follows the browser's color. It's not clear why. In addition, the problem in Chrome happens on wordpress's pwa, but Twitter (X) 's pwa works fine.

Comment 12

[billiob]

I have the same issue with:

• https://wafflegame.net/daily
• https://reader.miniflux.app/

I'm running Firefox for Android beta 122.0b9.

Comment 13

[zachary.rubin02]

Still an issue when using twitter.com installed as an app with Firefox v122.0 on Galaxy S24 Ultra. Pleading for a fix now that this issue has followed me to my brand new device.

Comment 14

[BMO Github Automation]

Attachment: [mozilla-mobile/firefox-android] Bug 1813875 - Prevent the inherited theming implementation being applied to Custom Tabs views (#5368)

Comment 15

[BMO Github Automation]

Authored by https://github.com/t-p-white
https://github.com/mozilla-mobile/firefox-android/commit/e5e884e3d84b10157d42aa356ce211497927b5df
[main] Bug 1813875 - Prevent the inherited theming implementation being applied to Custom Tab views