1808766 - Implement Material You theming

Status: NEW

(Firefox for Android :: Design System and Theming, enhancement)

Description

[Christian Sadilek [:csadilek]]

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

What is the user problem or growth opportunity you want to see solved?

Since the first Android 12 beta, Google has been pushing the new Material You design. We've already seen many apps adapting this new theming. This is even more true with most of Google's apps and especially with latest Canary version of Chrome. I know that it's still early to have this change inside Firefox, but the official Android 12 release is almost here, so we have to think of implementing it at some point, or at least to start tinkering with it. We're expecting the fourth beta of Android 12 any time now, which will come with the final APIs.

https://developer.android.com/about/versions/12/overview

How do you know that this problem exists today? Why is this important?

Firefox, like many other apps, hasn't implemented (or even started to experiment with) the new Material You design. It would be good at some point to have this new design come to Firefox on Android as well, since it would increase the UI/UX substantially.

Who will benefit from it?

All users running Android 12+
It would also help with switching of the users from Chrome to Firefox at some point, since the UI will look a lot nicer with this new theming.

┆Issue is synchronized with this Jira Task

Change performed by the Move to Bugzilla add-on.

Comment 1

[electr1fic.00]

Yes, please.
Firefox still looks like an old out of place app on Android.
You guys really refined the Desktop app but the Android app leaves a lot to be desired.
The animations of tapping the URL bar and removing tabs for example are janky as well.
The app needs some redesign with MD3 which is more important than wallpaper based colors.
Material You is based on Material Design 3 which should be implemented properly first.

Comment 2

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

I totally agree. The comment also shouldn't be hidden, not least because the rationale is nonsensical – is advocacy of implementation of the relevant issue seriously undesirable?! Providing rationale for why something should be remediated, I believe, is identically as useful as technical discussion of how to.

Comment 3

[Jon S]

Related link on Mozilla Connect: https://connect.mozilla.org/t5/ideas/please-add-material-you-theme/idi-p/24210

Comment 4

[Kurt Felton]

Adding rounded corners to the address bar would go along way to making the app more polished with Material You until the rest of elements can be updated.

Comment 5

[soulfire]

Could we get an update on the status for this? I kind of want to go about experimenting with a MY Firefox theme. But I don't really want to do so if this would just get a WONTFIX.

Comment 6

[[e-mail]]

Is the Thunderbird M3 design at all relevant to Firefox, or is it not, considering the different codebase?

Comment 7

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

https://bugzilla.mozilla.org/show_bug.cgi?id=1808766#c6

[e-mail], by "Firefox", do you mean moz-central - as in, FF for Darwin, NT and Linux? I seriously doubt that this applies to them, considering that this is a push for M3 compliance solely on AOSP - not i(Pad)OS - and due to platform design norms. On Linux-based OSes, desktop FF uses GTK (with Qt stylisation on KDE, and Adwaita on GNOME); on Windows 11, a custom colour scheme, but an element style which matches Windows 11's WinForms stylisation.

Comment 8

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

...You were asking about whether Thunderbird also applies. I misread it. Apologies. I'd hope so, if we're talking about the to-be-renamed K-9 Mail.

Comment 9

[[e-mail]]

(In reply to {3rd: "Beedell", 1st: "Roke"}{.JSON5} from comment #8)

...You were asking about whether Thunderbird also applies. I misread it. Apologies. I'd hope so, if we're talking about the to-be-renamed K-9 Mail.

Sorry for the confusion. To clarify, I was asking if the current work on K-9 Mail, including a new M3 theme, is at all relevant to the Firefox Android app.

I wouldn't think so, as unlike on desktop, where Thunderbird uses Firefox's browser engine and thus much of its codebase, whereas K-9 Mail and Firefox on Android do not share any code (to my knowledge), and K-9 does not use Gecko. But I was hoping I might be mistaken.

Comment 10

[[e-mail]]

(In reply to {3rd: "Beedell", 1st: "Roke"}{.JSON5} from comment #8)

...You were asking about whether Thunderbird also applies. I misread it. Apologies. I'd hope so, if we're talking about the to-be-renamed K-9 Mail.

Sorry for the confusion. To clarify, I was asking if the current work on K-9 Mail, including a new M3 theme, is at all relevant to the Firefox Android app.

I wouldn't think so, as unlike on desktop, where Thunderbird uses Firefox's browser engine and thus much of its codebase, K-9 Mail and Firefox on Android do not share any code (to my knowledge), and K-9 does not use Gecko.

But I was hoping I might be mistaken, and the work on K-9's theme might signal a modernization of Firefox to adapt its interface to the new (ish) Android guidelines.

Comment 11

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

https://bugzilla.mozilla.org/show_bug.cgi?id=1808766#c10

[e-mail], are you aware that this issue has been filed under https://bugzilla.mozilla.org/describecomponents.cgi?product=Fenix? Indeed, K-9's M3 implementation shan't directly affect this, due to the two codebases being entirely separately developed (at least, until very recently). However, to my knowledge, this shouldn't relate to the browser engine (Gecko), because solely the surrounding GUI's appearance shall be modified (unless you spend your time looking at HTML pages without any JS and CSS applied).