1977670 - Update the design of the M3 Top App Bars used in Firefox

Status: RESOLVED FIXED

(Firefox for Android :: Design System and Theming, task, P1)

Description

[Noah Bond [:007]]

As highlighted in Bug 1976008, there were a design regression using the non-customized TopAppBar Composable. After consulting with UX, this is the recommended treatment for the affected areas:

• Use the Small size of the top app bar.
• Recolor the app bar based on scroll state. If the page content is scrolled, the app bar should be a darker color.
  • Figma spec
  • M3 spec

Updated M3 Acorn component figma specs

Comment 1

[Noah Bond [:007]]

Attachment: Bug 1977670 - Part 1 - Remove window insets padding from TopAppBar Composables

There seems to be some weirdness with the M3 TopAppBar and Edge to Edge, causing the TopAppBar to have increased margins. I was not able to reproduce this visual bug on older Android OS versions though, which would make sense, if this were due to Edge to Edge.

Default window inset values:
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/AppBar.kt;l=441

Affected screens:

• Logins (fixed in Bug 1975375)
• Bookmarks
• Downloads
• Debug Drawer
• Web Compat Reporter
• Glean Debug Tools

Part 2 will handle the recoloring of the app bar when the content has scrolled

Comment 2

[Noah Bond [:007]]

Attachment: Bug 1977670 - Part 2 - Recolor the TopAppBar Composable when the screen content has scrolled.

This involved removing DownloadsTopAppBar.kt, since it was just acting as a passthrough to TopAppBar, and I wanted avoid drilling another pass-through TopAppBar property.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ceadb07dc817
https://hg.mozilla.org/integration/autoland/rev/629cdf37b893
Part 1 - Remove window insets padding from TopAppBar Composables r=android-reviewers,matt-tighe

Comment 4

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/629cdf37b893

Comment 5

[Noah Bond [:007]]

QE - can you please verify that the Top App Bar margins are now fixed on the affected screens

The second behavior, re-tinting the app bar when the screen content has scrolled, will be landed in a separate patch.

Comment 6

[Mira Lobontiu (Android QA)]

Attachment: 1977670.jpg

Verified on the 7/18 Firefox for Android Nightly 142.0a1 with a Samsung Galaxy S24 (Android 15), and a Google Pixel 6 (Android 16) that the top margins are fixed on all the affected screens, as can be seen in the screenshot above.