1831570 - Menu separators are basically invisible in dark mode on Ubuntu

Status: VERIFIED FIXED

(Toolkit :: Themes, defect)

Description

[Dão Gottwald [:dao]]

Attachment: invisible separators

Not sure how this looked prior to bug 1828413, but that patch's use of threedshadow for menuseparators seems to not work well when the system is in light mode and Firefox is in dark mode (e.g. using a dark theme from AMO). I'm attaching a screenshot of how this looks over here.

I don't know if we want to fix threedshadow to do something reasonable here, or just not use threedshadow? E.g. this seems to work fine:

diff --git a/toolkit/themes/linux/global/menu.css b/toolkit/themes/linux/global/menu.css
--- a/toolkit/themes/linux/global/menu.css
+++ b/toolkit/themes/linux/global/menu.css
@@ -200,11 +200,11 @@ menuseparator {
   menuitem[type="radio"] .menu-iconic-icon {
     appearance: auto;
     -moz-default-appearance: radio;
   }
 
   menuseparator {
     appearance: none;
     margin-block: 2px;
-    border-top: 1px solid color-mix(in srgb, ThreeDShadow 50%, transparent 50%);
+    border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
   }
 }

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Do they look different on your system compared to when the system is in dark mode itself? If so that needs fixing.

Our current separators look pretty close to what gtk3-demo and gtk4-demo do, on my setup at least... But you're right that on dark mode they don't have a lot of contrast, so maybe deviating a bit from the native styles here is worth it.

Other than that, I tested your patch and on a bunch of themes and it looks fine, so I wouldn't oppose to it.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

If you're on Ubuntu ("about:support" should say something like "OS Theme: Yaru / Yaru-dark" or so), this might be kind of expected, Yaru-dark has basically invisible menuseparators here :/

Comment 3

[Dão Gottwald [:dao]]

Attachment: native dark mode

(In reply to Emilio Cobos Álvarez (:emilio) from comment #1)

Do they look different on your system compared to when the system is in dark mode itself? If so that needs fixing.

Yeah, native menus in dark mode look closer to what I get with my fix / hack.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #2)

If you're on Ubuntu ("about:support" should say something like "OS Theme: Yaru / Yaru-dark" or so), this might be kind of expected, Yaru-dark has basically invisible menuseparators here :/

It's Yaru-dark / Yaru. I recently upgraded to Ubuntu 23.04 so perhaps they've improved this.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

I meant, do Firefox's menus look different if you use regular Firefox dark mode vs. light-mode with dark theme? If so we should figure out why and fix that.

If not, alright, your patch seems reasonable to me then :)

Comment 5

[Dão Gottwald [:dao]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

I meant, do Firefox's menus look different if you use regular Firefox dark mode vs. light-mode with dark theme? If so we should figure out why and fix that.

Hm, no, seems broken either way.

Comment 6

[Dão Gottwald [:dao]]

Attachment: Bug 1831570 - Make menuseparators more visible, particularly in dark mode and high contrast mode. r=emilio

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bcfc4ed15774
Make menuseparators more visible, particularly in dark mode and high contrast mode. r=emilio

Comment 8

[Iulian Moraru]

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

Comment 9

[Timea Zsoldos [:zstimi/tzsoldos], Desktop QA]

I have reproduced this issue using Firefox 114.0a1 (2023.05.05) on Ubuntu 22.
I can confirm this issue is fixed on both Firefox 115.0a1 and Firefox 114.0b4, I verified on Ubuntu 22 .