1925587 - Android's Navigation Bar is black on Android 15

Status: VERIFIED WORKSFORME

(Firefox for Android :: Toolbar, defect)

Description

[u762484]

Attachment: nav-bar.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0

Steps to reproduce:

Install and open Firefox Mobile on Android 15.

131.0.3 (Build #2016050031), hg-e69783 530 d6d+ GV: 131.0.3-20241011205646
AS: 131.0

Actual results:

The navigation bar is no longer themed in the Firefox UI gray, it's plain black now.

Expected results:

The bar should adapt to the app or, in this case, be gray like Firefox's UI - check the screenshot for details.

Android apps targeting API35 automatically fix this apparently, but I think it would be a lot easier to just change it back to gray - more info from Google goo.gle/3XwjCQs.

Comment 1

[Chris Peterson [:cpeterson]]

Hi Mat, thanks for reporting this issue! We are working on a navigation bar redesign, so I will make sure we review this Android 15 issue.

Comment 2

[Chris Peterson [:cpeterson]]

I wonder if this bug is related to Android 15 bug 1925070.

Comment 3

[Daniel Holbert [:dholbert]]

Just to disambiguate, since "navigation bar" is a bit of an overloaded term here, for other folks like me who might be confused when reading "navigation bar" and relating this to other bugs about navigation-bar-coloring:

There are (at least?) two things sometimes called "navigation bar"
(1) There's experimental work on an additional toolbar inside of Fenix, which I think we're calling the "navbar" (which has back/forward/tab-management/menu buttons) - this is the bar that was miscolored in e.g. bug 1908954, as an example.
(2) Android also has a system-level thin bar at the very bottom of the screen which is apparently also called the "navigation bar" (which is e.g. black with a white spacebar-shape in the middle if you've got a dark theme)

This bug is about bar (2) -- the Android system-level bar at the bottom of the screen -- not about (1).

--> s/navigation bar/Android navigation bar/ in summary to (maybe?) help disambiguate that up-front.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screenshot of dholbert not being able to repro in Nightly 133 on Android 15

Having said that: I can reproduce the bug locally Firefox 131, but I think this has been fixed in Nightly.

Here's a screenshot on my Pixel 8 with Android 15, with Nightly 133.0a1 2024-10-20, with the Android navigation-bar matching the color of the Firefox UI.

Comment 5

[Daniel Holbert [:dholbert]]

So: given that this is reproducible in 131 release but not in 133 Nightly, I think we can consider this WORKSFORME (presumably a duplicate or happy-side-effect of some bugfix that we've already landed that's making its way to release).

Comment 6

[u762484]

(In reply to Chris Peterson [:cpeterson] from comment #1)

Hi Mat, thanks for reporting this issue! We are working on a navigation bar redesign, so I will make sure we review this Android 15 issue.

Thanks Chris, this is great to hear! (In reply to Daniel Holbert [:dholbert] from comment #4)

Created attachment 9432734 [details]
screenshot of dholbert not being able to repro in Nightly 133 on Android 15

Having said that: I can reproduce the bug locally Firefox 131, but I think this has been fixed in Nightly.

Here's a screenshot on my Pixel 8 with Android 15, with Nightly 133.0a1 2024-10-20, with the Android navigation-bar matching the color of the Firefox UI.

Hm, I was just wondering, on Nightly it seems to work fine - Just a question, how did you get the "usual" Firefox address bar there? Because I have the (1)-bar there (omg we need names for these).

Comment 7

[u762484]

Attachment: Firefox-Nightly-Android-Bar-Mat.png

Comment 8

[Daniel Holbert [:dholbert]]

(In reply to Mat from comment #6)

on Nightly it seems to work fine

Thanks for confirming! BTW I found locally that 2024-10-17 is "Bad" here whereas 2024-10-18 is "Good", so this was likely fixed by bug 1925070 (the fix range is the same as bug 1925070 comment 18).

Just a question, how did you get the "usual" Firefox address bar there? Because I have the (1)-bar there (omg we need names for these).

Yup, I configured to just have the URL bar, to make it an apples-to-apples comparison with your screenshot. :)

To turn off Fenix's own navigation bar (which I labeled (1)), you have to toggle a slider in Firefox Nightly's Secret Settings menu:

• Open Firefox Nightly menu, and tap Settings
• Scroll to bottom and tap "About Firefox Nightly"
• Tap the Firefox Nightly icon at the top of that screen 5-10 times until you see a popup telling you that the debug menu is enabled.
• Go back to Firefox nightly's main settings screen and scroll to the bottom.
• Tap "Secret Settings" (4th from the bottom for me), and then find a slider for "Enable Navigation Toolbar" and turn that off.

Comment 9

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #8)

To turn off Fenix's own navigation bar (which I labeled (1)), you have to [...]

Having said that: I find the navigation toolbar handy, and the team is interested in polishing it, so you might try it out and see how you like it! It does take up space, but (by default) it gets out of your way when you scroll a page with lots of content, just like the URLbar does. If you end up trying it and you have concrete reasons that you want to turn it off, you might share those in a bug report or by posting them here; I think the team is looking for usability issues and ways-to-improve-it, while it's in its Nightly-only phase.

Comment 10

[u762484]

My God thank you, I completely forgot that the secret menu existed! I just wanted to check if I can reproduce the themed navigation bar (from Android) and it works - probably going to stick to the new menu, it looks really nice.

Comment 11

[u762484]

Okay wait a second, I cannot comment on #1925070 because it is closed, but the navigation bar in these "half open" Firefox instances (I have no idea how this is called, like when an application uses Firefox to open a page) is still not themed for me - check the image I uploaded. When looking at the other linked issue, 133.0a1 seems to have fixed it (the last uploaded image there).

Comment 12

[u762484]

Attachment: Nightly-open-in-Firefox.png

The system navigation bar is not themed in 133.0a1 for me.

Comment 13

[Daniel Holbert [:dholbert]]

(In reply to Mat from comment #11)

Okay wait a second, I cannot comment on #1925070 because it is closed, but the navigation bar in these "half open" Firefox instances (I have no idea how this is called, like when an application uses Firefox to open a page) is still not themed for me - check the image I uploaded. When looking at the other linked issue, 133.0a1 seems to have fixed it (the last uploaded image there).

Thanks -- yeah, same for me. We call those "half open" instances "Custom Tabs". And the issue you brought up is a version of bug 1926489 which I filed last night. (I initially filed that bug about the navbar being black when I'm using a light theme, but you're correct to note that it's also black when using a dark [i.e. dark-gray] theme which is also mismatched.)

See discussion in bug 1926489 comment 8 through bug 1926489 comment 10 in particular.

Comment 14

[u762484]

(In reply to Daniel Holbert [:dholbert] from comment #5)

So: given that this is reproducible in 131 release but not in 133 Nightly, I think we can consider this WORKSFORME (presumably a duplicate or happy-side-effect of some bugfix that we've already landed that's making its way to release).

Okay I just updated Nightly (Build #2016052071) and the bug is there now too, check the screenshot. :(

Comment 15

[u762484]

Attachment: Screenshot_20241025-151659.png

Comment 16

[Daniel Holbert [:dholbert]]

Yup, things are changing fast here. What you're seeing is sort-of intended-behavior -- it's from a patch that just landed in bug 1922419 [EDIT: I had the wrong bug number here; fixed now], which intentionally made the system navbar always-black, specifically if you have Firefox's navbar also enabled. This is to reduce confusion for users who have the three-button-style Android navigation bar (with back/home/app-switcher), who would otherwise end up with two very-similar-looking bars at the bottom of their screen, one from Fenix and one from Android. The color-differentiation makes it easier to tell those bars apart (otherwise it sorta looks like a single UI component that for-some-reason has two back buttons).

See the screenshot in https://bugzilla.mozilla.org/attachment.cgi?id=9428685 which shows the current intended behavior, and imagine that the 3-button-system-navbar on the left half of that screenshot matched the Firefox UI color-scheme (black icons on white buttons). That's the look that we would've had for 3-button-system-navbar-users until recently, and that's what bug 1922419 was addressing.

I agree it's unfortunate that resulted in a behavior-change for folks with gesture-style navbars; I filed bug 1927184 on that.

For now, though, if you want your gesture-style navbar to match the Firefox UI, you can achieve that by turning off Firefox's navbar as described in comment 8.

Comment 17

[u762484]

Thank you for all your explanations and help, I appreciate it!