Yaru: Firefox menus don’t have rounded corners

Created on 21 Sep 2018  Â·  12Comments  Â·  Source: ubuntu/yaru

yaru-theme-* 18.10.4, Ubuntu Cosmic

Menus have rounded corners in native GTK apps…

menu pulldown in files context menu gtk

…and even in LibreOffice…

menu in libreoffice

…but not in Firefox.

menu pulldown in firefox menu context in firefox

This is odd because Firefox _does_ correctly include the tail at the top of dropdown menus.

Maybe this is not possible without code changes in Firefox: if so, it could be mentioned in the wiki.

[[Originally reported in the Yaru forum](https://discourse.ubuntu.com/t/call-for-participation-an-ubuntu-default-theme-lead-by-the-community/1545/1750).]

Firefox

Most helpful comment

Coincidentally, Mozilla bug 1489097 “[CSD] Enable round corners by default” was fixed a week ago. So, I’d wait until the followup bug 1493145 is fixed, then try a nightly build, or Firefox 64.

If that’s not the problem, “Core > Widget: Gtk” is probably the right component.

All 12 comments

Yes Firefox has a bug with rounded edges. The border bleeds it of it and you end up with two borders.
As I said, Firefox does not properly suck up the gtk3 code.
See: https://discourse.ubuntu.com/t/firefox-theming/5920
(This was a long time ago and we even managed to apply the light blue to the text selection with some dirty CSS tricks which are wrong but we did it for the sake of consistency)

What's even worse is that the context menu can't have our drop shadow. :/

Same thing happens with PopOS, rounded corner in libreoffice, squared and with different hover effect in Firefox.
Does anybody know the appropriate channel to report this? Bug tracker, IRC, other?
After reporting this, I believe we can close this issue

Coincidentally, Mozilla bug 1489097 “[CSD] Enable round corners by default” was fixed a week ago. So, I’d wait until the followup bug 1493145 is fixed, then try a nightly build, or Firefox 64.

If that’s not the problem, “Core > Widget: Gtk” is probably the right component.

That would be cool! It's fixed within a second in our code. Thanks for the info
To test if the round corner work you would need our css to be changed, because we disabled them in the context menu AND the headerbar, because they are buggy in firefox#

So it would be good to make it the other way round.
Tell us when it's merged, then I make a test PR for you

I wonder if we should drop the Firefox workarounds now that 18.10 has its theme.
Since the workarounds I applied both (menu and headerbar) are misleading that the issues might be connected to Yaru. Which they aren't. It's a Problem with Firefox and gtk theming. What do you think @clobrano @madsrh ?

I understand that Yaru is not the problem, but I think it doesn't harm us to use workarounds to fix wrong behaviors in important applications.

Coincidentally, Mozilla bug 1489097 “[CSD] Enable round corners by default” was fixed a week ago. So, I’d wait until the followup bug 1493145 is fixed, then try a nightly build, or Firefox 64.

If that’s not the problem, “Core > Widget: Gtk” is probably the right component.

Nightly (v65) does not seem to work as well

image

Different topic, but while working on the dark menus I've found a better solution for this glitch which leaves the shadow and doesnt cut it, which makes the context menu for firefox look a bit better
Just a reminder that we/I could add this

I just remembered that I already reported the problem with the wrong text selection colour
https://bugzilla.mozilla.org/show_bug.cgi?id=1461621

I'll add a comment in the code to remind us to remove the border-radius cut when the fix (hopefully) happens some day. I will also add the box shadow back

Was this page helpful?
0 / 5 - 0 ratings