1668119 - [macOS 11] Popup Menus Don't Match Big Sur Look and Feel

Status: RESOLVED FIXED

(Core :: Widget: Cocoa, defect, P3)

Description

[Haik Aftandilian [:haik]]

macOS 11 changed the menu look and feel and Firefox's popup menus need to be updated to look native. The fix for bug 1656301 fixed a problem with the menu separators and made them look more like macOS 11, but several other changes are needed.

We should also revisit bug 34572 and evaluate the difficulty of switching to native popup menus to avoid having to do this type of work each time macOS 11 changes its look and feel.

Here are the changes needed I've identified so far.

1. The submenu triangle in Firefox's menu should be changed to an arrow matching the native look.

2. When an entry in the menu has a checkmark, all the entries in the menu should have their margins adjusted to the right to line up with the checkmark entry.

3. The hover/selection highlight shape needs to be updated to have rounded corners and not be the full width of the popup.

4. Left and right margins should be made smaller.

5. The positional offset of submenus should be updated to match native.

6. The popup corner radius should be updated to match native.

Comment 1

[Sören Hentzschel]

7. The context menu should no have a vibrancy effect. It doesn't look like there is a vibrancy effect in Safari and it causes visibility issues for the seperators in Firefox, see https://bugzilla.mozilla.org/show_bug.cgi?id=1668493#c13.

Comment 2

[Stephen A Pohl [:spohl]]

(In reply to Sören Hentzschel from comment #1)

7. The context menu should no have a vibrancy effect. It doesn't look like there is a vibrancy effect in Safari and it causes visibility issues for the seperators in Firefox, see https://bugzilla.mozilla.org/show_bug.cgi?id=1668493#c13.

What you're observing is aqua appearance, which is currently forced on in Firefox for all versions of macOS to prevent other issues.

Comment 4

[Sam Johnson]

Attachment: Bug 1668119 - Update macOS menupopup metrics for modern appearance. r?#desktop-theme-reviewers

While bug 1861671 improved menupopup styling to closer match modern macOS, there were still several discrepancies between native and non-native menu metrics. The following adjustments were made in this patch to match native styles:

• Render the checkmark containers only if at least one menuitem is checked/selected
• Adjusted various spacings to match native metrics
• Apply padding to the accelerator container only if an accelerator is present
• Fixed regression from bug 1861671 resulting in menuitems being misaligned with sub-menus

These changes result in non-native menupopups appearing nearly indistinguishable from native menus.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/990290afa24b
Update macOS menupopup metrics for modern appearance. r=desktop-theme-reviewers,emilio,reusable-components-reviewers,dao

Comment 6

[Sandor Molnar[:smolnar]]

Backed out for causing mochitest failures at toolkit/content/tests/chrome/test_menulist_position.xhtml

Backout link: https://hg.mozilla.org/integration/autoland/rev/602fcac6b832bfc3cfe43aa1768b47cefea110a7

Push with failures

Failure log -> TEST-UNEXPECTED-FAIL | toolkit/content/tests/chrome/test_menulist_position.xhtml

Failure log ->TEST-UNEXPECTED-FAIL | accessible/tests/mochitest/tree/test_combobox.xhtml

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4bbb0257e3cb
Update macOS menupopup metrics for modern appearance. r=desktop-theme-reviewers,emilio,reusable-components-reviewers,dao

Comment 8

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/4bbb0257e3cb