Getting rid of rounded corners

[JJM-JFX]

Hi,

I'm wondering if there's a way to get rid of the radii on the drop-down menus (from the menu bar). FF 112 and earlier had nice square corners, but 113 and 114 have rounded corners. Is there something in the CSS that controls this?

Also, in the tabs on bottom/menu bar on top patch CSS code, what parameter controls the height of the tabs? I want the height to be the same same height used in the version 112 tabs on bottom code.

Thanks!

[MrOtherGuy]

Regarding menus, what OS are you talking about?

Also, in the tabs on bottom/menu bar on top patch CSS code, what parameter controls the height of the tabs?

Nothing. Those styles don't change how tabs toolbar height is computed. It is determined by styles Firefox itself uses. So, you could try using something like this:

  :root{
    --tab-min-height: 24px !important;
  }

Note however, that other things might restrict the height of the tabs toolbar getting smaller, such as size of buttons within it or the text size inside a tab.

[JJM-JFX]

OS is Linux Mint 21.1. The change from square corners to round corners happened on FF 113, so it's not OS-related. Thanks for the suggestion regarding tab height.

[MrOtherGuy]

It is OS related in a sense that Firefox uses different styling based on your OS. Styling of menus for example is different on Windows than it is for Linux. Also, concerning Linux, if you are getting your Firefox from OS package manager then they might apply changes to Official Mozilla provided builds which makes it even more tricky. In addition to that, some of the menu styling rules is derived from OS style properties and if that weren't enough menus can be using OS native menus - default on MacOS and I believe supported in Firefox 113 for linux as well but don't quote me on that. When using native menus the OS draws them completely and thus they cannot be styled with CSS at all.

Yeah, menu styling is tricky business. That being said, on my Linux system I'm able to make menus have sharp corners like this:

.menupopup-arrowscrollbox{
  border-radius: 0 !important;
}

I inspected a the menu styling on my Linux setup and it seems that on Firefox 114 the menu styling code is actually supposed to get the border radius from your environment - but in Firefox 115 (currently in beta) it was changed to not consult OS at all and just use 4px. You can read bugs related to that for example this one and its related bugs to find that the reasoning was more or less that the value get from OS doesn't necessarily match what the user is actually seeing which leads to some very unexpected results sometimes - that's my interpretation anyway. Regardless, you can use the snippet above to override the border-radius to 0 whether Firefox would get the value for OS or not.

[JJM-JFX]

Here's an example of the difference in tab heights I'm taking about. On the left is FF112.0.2; on the right is FF 114.0.1. Same themes, same settings on the Customization page, etc. (Different userChrome.css, obviously, since I really want tabs on the bottom.)

[JJM-JFX]

I tried both of those css suggestions, but neither worked. Am I doing this right? I put

toolbar-menubar .menupopup-arrowscrollbox{ border-radius: 0 !important; }

at the bottom of the menubar on top patch. Is that correct?

Thanks for looking into this, and for the detailed explanation.

[JJM-JFX]

I also tried

toolbar-menubar > .menupopup-arrowscrollbox{ border-radius: 0 !important; }

but no luck.

[MrOtherGuy]

No, that doesn't work because the scrollbox is a shared "component" that is inside a shadow root. So it's not really a descendant of the menubar. So just use .menupopup-arrowscrollbox{ border-radius: 0 !important; }.

Or, if you really want to apply that 0 border-radius to only menubar menus then you can do it this way:

#toolbar-menubar menupopup{
  --panel-border-radius: 0 !important;
}

[JJM-JFX]

It works! And it looks so much better. Fantastic job! Thanks very much.

[MrOtherGuy]

Sweet. I'll close this issue then.