1702771 - Infobars - text is not vertically centered on macOS

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P3)

Description

[Simona Badau, Desktop QA]

Attachment: Infobar.png

Affected platforms:
Mac OS X 10.15
macOS Big Sur 11.1

Affected versions:
Nightly 89.0a1

Pre-requisites:
browser.proton.enabled=true
browser.proton.infobars.enabled=true
accessibility.blockautorefresh=true

Steps to reproduce:

1. Launch Firefox.
2. Paste the following into the URL bar: data:text/html,<meta http-equiv="refresh" content="0; url=https://example.com/">
3. Observe the Infobar displayed under the URL bar (text string and button)

Expected Result:
The text in the Infobar should be properly centered.

Actual Results:
The Text in the Infobar is not vertically centered (it's a little too high) - both in the Infobar as well as in the "Allow" button.

Notes:
The issue is not reproducible on the latest Nightly 89.0a1 when Proton is not enabled (the preferences browser.proton.enabled and browser.proton.infobars.enabled are set to false).
The issue is reproducible on all the Info bars.
The issue is not reproducible on Windows7 nor on Ubuntu 20.04.

Comment 2

[Sören Hentzschel]

I know that it's only a small cosmetic issue and nothing critical but since it's noticeable, it also affects Thunderbird where you see these kind of infobar very often and bug 1775641 was closed as duplicate of this one because it's a platform widget - could this Proton regression maybe re-triaged after this long time to get someone's attention as it's hopefully nothing too complicated [1]? Thanks!

[1] Removing the min-height: 16px; for .notification-message fixes the issue for me. But I don't know if it has any side effects.

(needinfo?ed Dão as triage owner)

Comment 3

[Dão Gottwald [:dao]]

Maybe something to consider when moving this to a lit-based widget?

Comment 4

[Sam Foster [:sfoster] (he/him)]

Here's what we have in storybook for this widget so far: https://firefoxux.github.io/firefox-desktop-components/?path=/story/ui-widgets-message-bar--basic

Mark, is there a bug for the message bar work we can dupe this to?

Comment 5

[Mark Striemer [:mstriemer]]

This could be fixed here if we want, it looks like the padding on .notification-message is knocking it out of alignment [1] (although I don't know what ramifications that might have)

I don't think we have the message-bar updates filed yet, Jules is looking at the component on the design side and we have an outreachy intern starting in a few weeks who should be able to take a look at it. Adding this to the ReComp backlog so we can link/dupe them later

[1] https://searchfox.org/mozilla-central/rev/45b20d00311bc2170dfbdae8a91bc4dca29717d8/toolkit/content/widgets/message-bar.css#209

Comment 6

[Hanna Jones [:hjones]]

Attachment: Infobar on nightly

This was fixed by the changes landed for Bug 1845150. Infobar messages appear centered on current nightly.