1668493 - macOS 11.0 - Popup Menus separator lines have blue tint

Status: VERIFIED FIXED

(Core :: Widget: Cocoa, defect)

Description

[Cristian Fogel [:cfogel]]

Attachment: Screenshot 2020-10-01 at 13.55.34.png

Notes:

• issue spotted by Sören Hentzschel as well in 1656301#c45;

Affected versions

• 82.0b6, 83.0a1(2020-09-30);

Affected platforms

• macOS 11.0;

Steps to reproduce

1. Launch Firefox, open any webpage(ex youtube);
2. Right Click;

Expected result

• proper UI;

Actual result

• separator lines show a blue tint;

Regression range

• potential regressor: 1656301

Additional notes

• S2-S3 as suggested severity since the impact isn't as big as for the initial bug;
• attached screenshot with the issue.

Comment 1

[Cristian Fogel [:cfogel]]

@Haik, mind taking a look and confirming if it's the case?
Thanks!

Comment 2

[Catalin Sasca, Desktop Test Engineering [:csasca]]

Attachment: close-up.png

Here's a close-up on the blue-ish tint.

Comment 3

[Haik Aftandilian [:haik]]

With bug 1656301, the API we use to draw the separator is causing artifacts on macOS 11. (It's a deprecated API). As a replacement, we are drawing the separator with a fixed color on macOS 11 only. It is difficult for me to judge the problem with the color. Can we live with this problem or do we need to adjust the color before shipping?

There are some other known issues with the popup differing from the native macOS popups and we have bug 1668119 filed to address those.

The code responsible for the color is here.
https://searchfox.org/mozilla-central/rev/f21850ca45036ddb84cd25aa355a6969d7c94c4f/widget/cocoa/nsNativeThemeCocoa.mm#1216-1219

Comment 4

[Sam Johnson]

Attachment: Catalina comparison

For what it's worth, this is an issue on macOS 10.15 as well, not just 11.0. It's a long-standing issue.

Comment 5

[Haik Aftandilian [:haik]]

(In reply to Sam Johnson from comment #4)

Created attachment 9179101 [details]
Catalina comparison

For what it's worth, this is an issue on macOS 10.15 as well, not just 11.0. It's a long-standing issue.

Thanks for pointing that out. That is probably another problem caused by the old and deprecated API we use to draw the menu separator HIThemeDrawMenuSeparator(). Even before macOS 11, it wasn't handling translucency properly.

With the fix for bug 1656301, we draw the separator differently on macOS 11, but it is not a perfect match compared to native. We need more work here to make the menus look native.

Comment 6

[Haik Aftandilian [:haik]]

Soren or Cristian, could you test this build which has a slightly different separator color and report if the blue tint is still visible?

https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/eJAXyt2bRReLFLHXIJ2iCg/runs/0/artifacts/public/build/target.dmg

Assuming you extract Nightly from target.dmg to your desktop, you'll have to clear the quarantine attribute by running $ xattr -r -c ~/Desktop/Nightly.app before you can launch it.

Comment 7

[Cristian Fogel [:cfogel]]

Checked with the build above.
The blue tint is no longer visible, however the issue reported on bug 1656301 (white lines near edges) has resurfaced.

Comment 8

[Haik Aftandilian [:haik]]

(In reply to Cristian Fogel, QA [:cfogel] from comment #7)

Checked with the build above.
The blue tint is no longer visible, however the issue reported on bug 1656301 (white lines near edges) has resurfaced.

Could you include a screenshot?

Comment 9

[Cristian Fogel [:cfogel]]

Attachment: Haik_patchedBuild.png

Not sure what happened but, from what I see it's all in order now.
Reopened with a fresh/clean profile (a couple of times now) and the provided build appears to have fixed both the issues.

Comment 10

[Cristian Fogel [:cfogel]]

Attachment: Haik_patchOnYoutube.png

Attaching an image over multiple colored-background as well.

Comment 11

[Haik Aftandilian [:haik]]

Attachment: Bug 1668493 - macOS 11.0 - Popup Menus separator lines have blue tint r?mstange!

Slight color adjustment of the separator.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8c3333b52dde
macOS 11.0 - Popup Menus separator lines have blue tint r=mstange

Comment 13

[Sören Hentzschel]

Attachment: screenshot

I can confirm that the separator lines no longer have a blue tint but it's still very different than Safari so it't neither better or worse, just different than before. But I want to notice, that the line always have the same color in Safari, in Firefox it seems to depend on the background of the website and that causes very difficult to see or even not possible to see at all separator lines sometimes.

edit: It seems to be an optical illusion. I double checked with a color picker and in fact the line color is not different at all, it only looks like this. I guess it's the vibrancy effect of the context menu that causes the visibility issues. I will add this information to bug 1668119.

Comment 14

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/8c3333b52dde

Comment 15

[Cristian Fogel [:cfogel]]

Verified with 83.0a1 (2020-10-04) on macOS 11.0 (20A5384c).

No blue-tint; just as Sören pointed out, the forced aqua appearance is of difference.
That might make the UX more dynamic, or end up seeing more reports.

Comment 16

[Haik Aftandilian [:haik]]

Comment on attachment 9179321 [details]
Bug 1668493 - macOS 11.0 - Popup Menus separator lines have blue tint r?mstange!

Beta/Release Uplift Approval Request

• User impact if declined: On macOS 11, right-click popup menu separators may show up incorrectly with a blue tint. This is a follow-up fix for bug 1656301.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce: Display the right-click popup menu over different backgrounds and look for a blue tint on the separators.
• List of other uplifts needed: Bug 1656301
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): It is a color change only. The change is specific to macOS 11.
• String changes made/needed: None

ESR Uplift Approval Request

• If this is not a sec:{high,crit} bug, please state case for ESR consideration: This is a follow-up fix for bug 1656301 and extremely low risk.
• User impact if declined: On macOS 11, right-click popup menu separators may show up incorrectly with a blue tint. This is a follow-up fix for bug 1656301.
• Fix Landed on Version: 83
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): It is a color change only. The change is specific to macOS 11.
• String or UUID changes made by this patch: None

Comment 17

[Julien Cristau [:jcristau]]

Comment on attachment 9179321 [details]
Bug 1668493 - macOS 11.0 - Popup Menus separator lines have blue tint r?mstange!

approved for 82.0b8 and 78.4.0esr

Comment 18

[Julien Cristau [:jcristau]]

https://hg.mozilla.org/releases/mozilla-beta/rev/3738c518a1a2

Comment 19

[Julien Cristau [:jcristau]]

https://hg.mozilla.org/releases/mozilla-esr78/rev/2496f9b06364

Comment 20

[Peter Magyari (Desktop QA)]

Verified on Firefox Beta 82.0b8 (20201006142214) and Firefox 78.4.0esr (20201006145237) using MacOS 11.0 (20A5384c)