Icons are not displayed in all menus/too large gaps after tried fix with user script

[Speravir]

Note: I just report it here, but the credits go to user bananovic in German forum Camp Firefox, cf. thread Größere Abstände zwischen den Menüsymbolen und dem Menütext.

In some main menus no icons are displayed. Apparently, you have asked for a solution at CustomJSforFx (your request), and after some help by @Aris-t2 you have created a script that works (at least, I found it only there). But this script produces a new issue: There are now too large gaps for most items between the icons and the labels, cf, images posted by bananovic: image1, image2, which provoked the request by bananovic. I confirm this observation.

Long story short, bananovic found another, very simple solution consisting in altering a single value in your style code:

menupopup[needsgutter] menu:not([icon], .menu-iconic), menupopup[needsgutter] menuitem:not([checked="true"], [icon], .menuitem-iconic) {
    --mip-menu-icon-margin: 0;/* changed value, was "-24px" before */
}

The value of zero is mine, bananovic used "-1px".

---

This said:

Why do you make it so difficult for yourself and other people who potentially may want to help you? I’ve searched for the particular rule and apparently you have used the almost same code 17 times. The rule set obviously differs between the styles only in the icons. Why don’t you just create a basic style (or one for the menus, one for the panel, one for the library) and then import this (these) into the styles for the icon sets? How exactly, is up to your choice, but for instance, you could take the one you actively use as the basic style. This could even be done with variables for every symbol which then are applied in the distinct rules for the various icon sets with the necessary value.

[B00ze64]

Good day.

Ok, I tried with zero and it breaks the menus for me. Which OS are you using? Could it be Win11 and it's different than Win10? When I put zero some of the menus are 24px to the right.

As for having the code repeat, I tried just now to put it in a @import instead, but it broke the code, the menus were all wrong, maybe because I end-up importing the same code multiple times, I have no idea.

Regards,

[B00ze64]

Alright I got all the menu-spacing stuff removed from all the CSS files, and used 2 new files that have to be imported from userChrome, instead. Thanks for the suggestion. I'm not releasing yet, as I found some missing icons I still have to fix. I'm in no mood to "variable-ize" every icon used to make a single CSS along with a definition for each style, that's more work than it's worth right now. Maybe if Mozilla breaks the menus badly I'll do it then.

[Speravir]

Ok, I tried with zero and it breaks the menus for me.

Oh.

Which OS are you using? Could it be Win11

Yes for me. I do not know which OS the original poster uses.

and it's different than Win10?

I have no clue.

From latest posting:

Alright I got all the menu-spacing stuff removed from all the CSS files, and used 2 new files that have to be imported from userChrome, instead.

Ah, good news. (I started using your style set, as well. 😄)

[B00ze64]

Well, if you are on Win11, then do you need to use 0 for mip-menu-icon-margin, or does it work OK at -24?

[Speravir]

It works with 0.

[B00ze64]

Ok, I pushed a commit to mip_ConfigMenus.css where is uses 0 for Win11, can you grab it from here and test it?

[Speravir]

Does not work!

Because it works if I use this rule in my custom userChrome.css I did some research and found 1825447 - Add windows-win11 for -moz-platform media query which is now 4 months old. So, the @media rule (-moz-platform: windows-win11) serves no purpose in the moment. I think you leave the win10 rule and add some information for win 11 users, maybe pointing to this ticket.

Apart from that I oberved a problem with Aris’ restart_item_in_menu.uc.js: I have to add two rules only for this script:

#main-window #mainPopupSet #appMenu-popup #appMenu-restart-button .toolbarbutton-text
    { margin-left: 8px !important }

#main-window #main-menubar #file-menu #fileMenu-restart-item .menu-iconic-icon {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

This may be slightly overspecific. 😀

[B00ze64]

Nice find that bug, so I have no way of identifying Win 11. I don't know that Win 11 is the issue, but I cannot reproduce your bug on my Win 10 in any DPI (100%,125,150,175). Alright I'll revert the changes, thanks. Now I gotta fix the sidebar icons which Mozilla broke with v116.

[B00ze64]

Wow, v117 broke pretty much every menu, this might take a while to fix, hopefully I can fix it, we'll see.

[B00ze64]

Ok, Moz-Platform is deprecated, so I cannot have separate rules for Win11 and I can no longer support Win7. It is unknown if Win11 is really the problem as well, all I know is that I need that rule at -24 or the menus are all pushed to the right on my system. I incorporated the margin rule for Aris' restart menu item, thanks. I'm going to go ahead and close this bug.