1513530 - Doorhanger menu icons are misaligned on Linux

Status: RESOLVED FIXED

(DevTools :: General, enhancement)

Description

[Florens Verschelde :fvsch]

Attachment: doorhanger-menu-icons-linux.png

It seems that the doorhanger menu icons are aligned using `vertical-align: top;`. This works well if we have a small font-size (around 13px), but with a bigger font-size and line-height (e.g. 16px) they appear above the baseline (see screenshot).

At least on Linux, the font-size in menus may vary, and we probably want to keep that possible instead of overriding it (we do override it in panels, but these menus should work like Firefox doorhanger menus and respect that setting if possible).

A simple fix would be to align the icons relative to the text's baseline.

`vertical-align: -3px` seems to work well for font-sizes between 12px and 16px.

`vertical-align: middle` appears way too low for some reason.

Comment 1

[Florens Verschelde :fvsch]

Tried a few other options, such as Flexbox alignment (works well, but risks more regressions) and `vertical-align: middle` with a transform to shift pixels higher. IMO `vertical-align: -3px` is the least bad solution.

Comment 2

[Florens Verschelde :fvsch]

Attachment: Bug 1513530 - Improve doorhanger menu icons alignment; r=gl

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/eff867a24e77
Improve doorhanger menu icons alignment; r=gl

Comment 4

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/eff867a24e77