1526224 - The menu bar options are not aligned with the added customize buttons

Status: NEW

(Firefox :: Toolbars and Customization, defect, P5)

Description

[Cristian Baica [:cbaica], Release Desktop QA]

Attachment: misalignment of the customize buttons

[Affected versions]:

• Fx 67.0a1
• Fx 66.0b6
• Fx 65.0 RC

[Affected platforms]:

• Windows 10 x64
• Ubuntu 16.04 x64

[Steps to reproduce]:

1. Launch Firefox.
2. Go to Customize.
3. Enable the menu bar.
4. Add a few buttons from the customize section to the menu bar.

[Expected result]:

• The buttons added are properly aligned with the menu options.

[Actual result]:

• The added buttons are not in line with the menu options.

[Regression range]:

• https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=c41c4eba7e027bb7cc0735f94be19a8111790dc1&tochange=e354a018b703c453e8afcda1f44f1d51456536f5

[Additional notes]:

• The issue becomes more obvious when setting density to Touch.

Comment 1

[:Gijs (he/him)]

Mike, can you help triage? This looks similar to bug 1511106, but maybe this should be wontfix instead - I'm not sure.

Comment 2

[Mike Conley (:mconley) (:⚙️)]

Here we see a prime example of the tension between native behaviour and consistency. The menu is positioned and aligned in a way that is familiar to Windows users. The icons are larger than the menu bar text (especially in touch mode), and so our solution is to align at top and push the rest of the content down.

I'm not sure we can do much better here. I'm going to mark this P5 for now if somebody has a better solution, and also needinfo? phlsa from UX to see if he has an opinion on this he wants to share.

Comment 3

[Cristian Baica [:cbaica], Release Desktop QA]

I am not sure if this helps or not, but in previous versions we used to 'push down' the menu bar options, so the center of the text would be in line with the center of the added icons.

Comment 4

[Sylvestre Ledru [:Sylvestre]]

Clearing needinfo as Phlsa is no longer at Mozilla

Comment 5

[:Gijs (he/him)]

(In reply to Mike Conley (:mconley) (:⚙️) from comment #2)

Here we see a prime example of the tension between native behaviour and consistency. The menu is positioned and aligned in a way that is familiar to Windows users. The icons are larger than the menu bar text (especially in touch mode), and so our solution is to align at top and push the rest of the content down.

I'm not sure we can do much better here. I'm going to mark this P5 for now if somebody has a better solution, and also needinfo? phlsa from UX to see if he has an opinion on this he wants to share.

--> Markus?

Comment 6

[Markus Jaritz [:designakt] (UX)]

Attachment: custom-icon-in-menu-bar.gif

(In reply to Cristian Baica [:cbaica], Release Desktop QA from comment #3)

I am not sure if this helps or not, but in previous versions we used to 'push down' the menu bar options, so the center of the text would be in line with the center of the added icons.

I agree, and it looks like this is what we do on Windows 10.
Windows 10 looks fine for me, so this might only affect Linux.
(wasn't able to test that)

Comment 7

[Cristian Baica [:cbaica], Release Desktop QA]

Attachment: misaligned buttons - outside of customize page

Comment 8

[Cristian Baica [:cbaica], Release Desktop QA]

Hello Markus,

I have just re-tested the issue to make sure I haven't missed anything. Because of some changes made to the customize section, this particular case where you see the preview looks fixed, but once you click the 'Done' button, the issue occurs again (buttons become misaligned).
See the latest attachment for details.

Comment 9

[:Gijs (he/him)]

Ni for comment 7 / comment 8.

Comment 10

[Markus Jaritz [:designakt] (UX)]

(In reply to Cristian Baica [:cbaica], Release Desktop QA from comment #8)

I have just re-tested the issue to make sure I haven't missed anything. Because of some changes made to the customize section, this particular case where you see the preview looks fixed, but once you click the 'Done' button, the issue occurs again (buttons become misaligned).

You are right. This is odd. Adding Windows 10 as affected OS again.
Still agree with rating this a P5 as I do not expect broad usage of buttons in the menu bar.

Comment 11

[Andreas]

Hello,

Would be nice to get this fixed after more than 2 years of no progress and issue persisting in 83.
It is not only the bookmarks toolbar but also minimize, maximize and close button, if the title bar is disabled.
These are vertically aligned in the middle but the menu toolbar on the top.
It just looks ugly, shouldn't be that complicated to fix?

Regards

Comment 12

[Andreas]

Attachment: 2020-11-21 Firefox Bookmarks Toolbar and Menu Bar.jpg

Comment 13

[Andreas]

Attachment: 2020-11-21 Firefox Menu Bar.jpg