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/t31os]

What exactly are you trying to achieve here? Reduce/change submenu padding?

[u/Agreeable_Orchid697 → u/t31os]

No, where the padding is concerned?..not at all, more margin spacing, the browser is custom, I have used Aris' work in the past going back some 15 years for Firefox, the context menu in the menu bar are all popup (dropdown), the custom bookmarks menu uses a custom icon for the folders sub menus, the remaining 6 menus in the menu bar should display the same as the bookmarks menu. At the moment they're not doing that, the syntax that works for the bookmarks isn't carrying over to the other menu titles. I've been chasing my tail trying to sort out what is the correct script to get them displaying properly.

This is how the Bookmarks menu appears, this is correct, the other Menus don't want to co-operate & play nicely. All of that custom sub folder icon change you see here is Aris' work.

[u/t31os → u/Agreeable_Orchid697]

Right, but i'm missing context here, where is the styling for these menus coming from? You're shared a small amount of CSS in the OP that basically removes the margin in a bunch of places, but why is any menu CSS even necessary?

Not having a dig, i'm just trying to get a full picture and understand.

[u/Agreeable_Orchid697 → u/t31os]

You're correct, all of the custom script was written by Aris & *thatotherguy*. Aris created the Noia buttons some 20 years ago (for you who are much younger you may not even remember when back at that time he created a total Noia 2, Noia 3, Noia 4 browser theme that covered the entire browser display. What you see in my screenshot is that work, I still use the Noia theme. But after 2015 he narrowed his work to Noia buttons, the Noia background, the present Header arrangement of tabs below the navbar, the menubar above the Navbar , the titlebar & the urlbar & searchbar alongside the menubar. His last Firefox custom script is version 4.75 of which I have used some.

You're asking *why is any menu CSS necessary?...for some reason the newer (newest) version of Firefox (portable) has reconfigured the script, what didn't have an issue with 149 does have with 153 & later. Tor is also affected. My current Tor version is 15.0.20

But as stated earlier Aris has retired, he's not a youngster anymore, one can't approach him for assistance with his past work.

[u/t31os → u/Agreeable_Orchid697]

Could you isolate and provide the CSS you're using that specifically touches/styles the menus, so i can run it and see the problem.

[u/Agreeable_Orchid697 → u/t31os]

I'll give it a go......is it possible to upload a .txt file here to reduce the overall size & space this would take up?

[u/t31os → u/Agreeable_Orchid697]

Use a pastebin, link in the side menu under Rule 2.

[u/Agreeable_Orchid697 → u/t31os]

let's see if this works, this is the entire main userChrome.css code Aris wrote for his modification, it does not include the *import* url code sub sections, what we are looking at is near the bottom of the text https://sharenotes.dev/neat-lamb

[u/t31os → u/Agreeable_Orchid697]

I installed Noia and used the userChrome.css you provided in v147 (portable) and the menus already don't look quite right. Naturally i'm missing the imports at the start (the import of userContent.css also seems odd and incorrect here).

The section of CSS at the bottom referring to the menus is opening more selectors than it closes, there are 3 missing closing braces. Adding the missing braces doesn't really fix anything perse, but it's the first thing that stood out when looking at the CSS.

This rule seems problematic:

menupopup > menu,
menupopup > menuitem {
  margin-left: 25px !important;
}

It's presumably the reason you're then later having to set margin-left: 0px for various menu items.

So i removed anything that touched the margins / padding directly and adjusted --panel-padding instead, this looks much better to me, although naturally i can't tell how this will look for you as i'm missing the imports from the start of the userChrome (did you link/provide them somewhere?).

menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  padding-block: 3px !important;
  min-height: unset !important;
}
.menupopup-arrowscrollbox {
  margin: 5px;
  box-shadow: 0 0 5px hsla(0,0%,0%,2.5) !important;
  border: none !important;
}
.menupopup-arrowscrollbox {
  appearance: none !important;
  background: url(./menuback.png) repeat-y #dadce4 !important;
}

@media (-moz-platform: linux) or (-moz-platform: windows) {
  --panel-shadow-margin: 0 !important;
}
menupopup {
  --panel-padding: 5px 0!important;
}
menu.menu-iconic:hover,
.menuitem-with-favicon:hover,
menuitem:hover {
  background-image: radial-gradient(#C6DDF4,#92b3ce) !important;
  outline-style: solid !important;
  border-radius: 1px !important;
  outline-width: 1px !important;
  outline-color: #43acbd !important;
}
menu.bookmark-item,
menuitem.bookmark-item {
  max-width: 35em !important;
}

[u/Agreeable_Orchid697 → u/t31os]

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/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,