1874505 - The "show me how" button's text is awkwardly shifted down, in the "Open Previous Tabs" notification bar that appears on second run

Status: VERIFIED FIXED

(Toolkit :: UI Widgets, defect)

Description

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Attachment: screenshot

STR:

1. Start Firefox Nightly with a fresh profile.
2. Quit (Ctrl+Q)
3. Start Firefox Nightly again (with the same profile)
4. Look at the "open previous tabs" notification-bar that should hopefully appear.

ACTUAL RESULTS: The "Show me how" button's text isn't vertically centered in the button; it's shifted down a bit.

EXPECTED RESULTS: The text should be vertically centered in the button.

Comment 1

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Attachment: screenshot of expected rendering (text vertically centered) from before this regressed

Comment 2

[Daniel Holbert [:dholbert] (PTO until 2/24)]

I'm using latest Firefox Nightly 123.0a1 (2024-01-12) on Ubuntu 22.04.

Regression range from mozregression:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=350fac42df08982dcb6992f3ab5c733a119bce8f&tochange=fe54bf7adef07c981ea02056742b1b7997a27d55

--> Regression from bug 1845150. hjones, could you take a look?

Comment 3

[Daniel Holbert [:dholbert] (PTO until 2/24)]

Using the Browser Toolbox to inspect this button, it looks like the relevant difference here was the change to the vertical padding on this button. It used to be 0.25em, and now it's 0.6em. (And an em unit is the same size here, in both builds; I have a computed font-size of 14.6667px on this element.)

Double the vertical padding means that we're allocating more of the border-box space to the padding, and so the content-box gets squished, and so the text overflows (and overflows off of the bottom).

Details on the padding change, based on Browser Toolbox:

• In an old/good build, we had 0.25em of top/bottom padding, from this rule in common-shared.css:

button.small-button {
  padding: .25em 1em;

• In a new/bad build, we have 0.6em top/bottom padding, from this rule in global-shared.css:

.footer-button {
  &.small-button
{
[...]
    padding: .6em 1em;

Comment 4

[Daniel Holbert [:dholbert] (PTO until 2/24)]

One option here is to put align-items:center on this button; that'll make the text overflow equally off of the top and bottom of the squished content-box, rather than just overflowing off of the bottom of it. I confirmed locally (in browser toolbox) that this fixes it.

That's kind of a band-aid, though; we might really want to try to fix this properly so that we're not setting a padding value that we then have to actively fight against due to it leaving too little space for any real content.

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1845150

Comment 6

[Hanna Jones [:hjones]]

Attachment: Bug 1874505 - ensure text is vertically centered in infobar buttons r=#recomp-reviewers

To reproduce the issue with the specific message bar:

1. quit/restart your local build of Firefox to ensure you have some session data
2. set the browser.startup.couldRestoreSession.count pref to 1
3. run this snippet in the browser toolbox:

Cc["@mozilla.org/browser/browserglue;1"].getService(Ci.nsISupports).wrappedJSObject._maybeShowRestoreSessionInfoBar();

As @dholbert mentioned in the bug this is a band-aid fix. Seems alright though given the .footer-button class is just a hack to provide in-content button styles in the chrome. Long term we want to remove it in favour of unified button styles and/or the moz-button component (see Bug 1858814).

Comment 7

[Hanna Jones [:hjones]]

:dholbert thanks for reporting this! I pushed up the align-items fix - as mentioned in the patch I think a band-aid is alright in this case since we have plans to re-visit the use of .footer-button in general sooner rather than later.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/62232a876634
ensure text is vertically centered in infobar buttons r=desktop-theme-reviewers,dao

Comment 9

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/62232a876634

Comment 10

[Alin Ilea, Desktop Test Engineering]

Reproduced the issue in Nightly 123.0a1 (2024-01-12).
Verified - Fixed in Beta 123.0b2 and the latest Nightly 124.0a1 (2024-01-26) using Windows 10, Ubuntu 20 and macOS 12.