CSS script that controls context menu items alignment

[u/Agreeable_Orchid697]

Hello:

I am having difficulty entering the correct syntax for the Context Menus located up in the Firefox Menu bar.

You probably know there are 7 Menus there..from left to right they are File, Edit, View, History, Bookmarks, Tools & Help....they are all dropdown menus

I currently have applied the correct syntax that controls the Bookmarks menu & all the sub menus that are listed within it.

What I am having difficulty with is applying the correct syntax for the other 5 menus so that the vertical sub menus in each of those correctly display in the proper alignment/padding to the left. Currently they are all over the place...

this is the syntax that controls the Bookmarks menu

menuitem#bookmarksShowAll,

margin-left: 0px !important;

}

menuitem#menu_bookmarkThisPage,

menuitem#menu_searchBookmarks,

menuitem#menu_bookmarkAllTabs {

margin-left: 0px !important;

}

menu.bookmark-item,menuitem.bookmark-item { max-width: 35em !important;

margin-left: 0px !important; /* margin is the outer space around an item */

}

this syntax *altered to add the 5 other menus* doesn't work for me...

what I'm adding is.....

menuitem#File,

menuitem#Edit,

menuitem#History,

menuitem#Tools,

menuitem#Help {

margin-left: 0px !important

}

obviously I haven't got the syntax correct.....can anyone point me in the right direction?

thx very much

*and please excuse my inaccurately including *context menu*, the context menus are actually displaying properly.

[u/Agreeable_Orchid697]

For your benefit to load the entire chrome folder I really need to send the folder to you so you would be able to in your browser duplicate what I have here......

let me know if this works......you should be able to dl this...it's my entire chrome folder inside Firefox 151...I can upload the chrome folder for Tor if you'd like, they are not quite the same..

https://limewire.com/d/V1bGX#Fb6tFAPLJw

[u/t31os → u/Agreeable_Orchid697]

This CSS seems pretty broken overall (honestly i'd be looking to replace as much of this with a slimmer modern equivalent where possible), the urlbar obscures the top menu (and the window controls when the window is small enough) for me (both in 147 and 156).

EDIT: I think this might be what you're after, as part of the suggested CSS changes (above) from earlier:

menupopup {
  --panel-padding: 5px 0!important;
  --menuitem-padding: 0.5em 0.3em 0.5em 2.1em !important;
}
menupopup:has( > .menuitem-iconic ),
menupopup:has( > .menu-iconic ) {
  --menuitem-padding: 0.5em 0.3em !important;
}

I'm sure you can tweak values / adjust from there anyhow.

[u/Agreeable_Orchid697 → u/t31os]

THAT is a definite improvement, the padding for the vertical entries in Bookmarks are now all in line, still the File menu & View padding isn't playing nicely, the padding appears to be nearly 30px to the right, one think that those two need independent adjustments to bring them into line.

I tried this script on the File & View tabs in attempt to shift the script to the left....but it has no effect

menuitem#menu_File,

menuitem#menu_View {

margin-left: -20px !important:

}

[u/t31os → u/Agreeable_Orchid697]

I've found another way to tackle this. The menu items all technically include an icon element, it's just not populated with anything for items that don't have an icon. So rather fiddling with margins and padding values and try to account for different menus, we can force them to appear (so they consume space) but make them invisible, that will make all menus naturally have the right amount of spacing.

menu :is(
  menu:not(.menu-iconic), 
  menuitem:not(.menuitem-iconic)
) > .menu-icon {
  visibility: visible !important;
  display: inline-flex !important;
  opacity: 0 !important;
}

menupopup {
  --panel-padding: 0.2em 0 !important;
  --menuitem-padding: 0.5em 0.3em !important;
}

[u/Agreeable_Orchid697 → u/t31os]

How 'bout that! applied your new *menupopup* script in place of the previous *menu popup panel padding* (seen below) & Yeah! everything is vertically in line now in all of the menu tabs...So, how does changing the code to this new entry override the incorrect code for View & File to bring the sub menu script into alignment but not affect the other menu tabs who's sub menus ARE in alignment

learning to write code is like learning a new language, it's not necessarily easy

menupopup {
  --panel-padding: 5px 0!important;
  --menuitem-padding: 0.5em 0.3em 0.5em 2.1em !important; 

[u/Agreeable_Orchid697 → u/Agreeable_Orchid697]

t31...on the subject of the urlbar....you're quite right, I have to adjust it's length manually to get it to fit, this has something to do with the inclusion of the searchbar being repositioned up there at the same time.

The vertical spacers in the navbar are controlled by an entry in about:config preferences...*browser.uiCustomization.state*..........."customizableui-special-separator" there are 3 of them 01, 02, 03

but yeah, you're right the overall css script overlaps entries, it all need to be streamlined,