Closed Bug 1668493 Opened 4 years ago Closed 4 years ago

macOS 11.0 - Popup Menus separator lines have blue tint

Categories

(Core :: Widget: Cocoa, defect)

Unspecified
macOS
defect

Tracking

()

VERIFIED FIXED
83 Branch
Tracking Status
firefox-esr78 --- verified
firefox81 --- unaffected
firefox82 --- verified
firefox83 --- verified

People

(Reporter: cfogel, Assigned: haik)

References

(Blocks 1 open bug, Regression)

Details

(Keywords: regression)

Attachments

(7 files)

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

Additional notes

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

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

Flags: needinfo?(haftandilian)
Has Regression Range: --- → yes
Has STR: --- → yes
Keywords: regression
Regressed by: 1656301
Attached image close-up.png

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

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

Flags: needinfo?(haftandilian)
Attached image 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.

(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.

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.

Flags: needinfo?(soeren.hentzschel)
Flags: needinfo?(cristian.fogel)

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.

Flags: needinfo?(cristian.fogel)

(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?

Flags: needinfo?(cristian.fogel)
Attached image 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.

Flags: needinfo?(cristian.fogel)
Attached image Haik_patchOnYoutube.png

Attaching an image over multiple colored-background as well.

Slight color adjustment of the separator.

Assignee: nobody → haftandilian
Status: NEW → ASSIGNED
Blocks: 1656301
Pushed by haftandilian@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/8c3333b52dde
macOS 11.0 - Popup Menus separator lines have blue tint r=mstange
Attached image 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.

Flags: needinfo?(soeren.hentzschel)
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → 83 Branch

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.

Blocks: 1648487

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
Attachment #9179321 - Flags: approval-mozilla-esr78?
Attachment #9179321 - Flags: approval-mozilla-beta?

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

Attachment #9179321 - Flags: approval-mozilla-esr78?
Attachment #9179321 - Flags: approval-mozilla-esr78+
Attachment #9179321 - Flags: approval-mozilla-beta?
Attachment #9179321 - Flags: approval-mozilla-beta+
Flags: qe-verify+
QA Whiteboard: [qa-triaged]

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

Status: RESOLVED → VERIFIED
QA Whiteboard: [qa-triaged]
Flags: qe-verify+
Blocks: 1673046
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: