HIDING / REMOVAL OF CONTEXT MENU ICONS
I generally block icons from showing inside Firefox context menus. In most cases my practice would be to simply block .menu-iconic-left via userChrome. With the latest versions of Firefox this also blocks the display of the #contentAreaContextMenu navigation icons. This would normally not be an issue as I would apply the blocking of icons to individual context menu items instead i.e.
- CONTEXT-MENU-ITEM > .menu-iconic-left {
display: none !important;
} However, there are some context menu items added by extensions which have a number suffix in their element name - An example would be #CONTEXT-MENU-ITEM-### where '###' represents a number that changes with each page opened. In this instance, my efforts to block the .menu-iconic-left element are thwarted as the element name is effectively different when the above-mentioned number changes.
Is there a CSS means of applying the code with the inclusion of a number range? Unless of course I'm barking up the wrong tree and there is a much simpler solution.
Chosen solution
Not ideal but solves the issue...and thanks again to both of you for looking at this.
/* REMOVAL OF EXTENSION CONTEXT MENU ICONS */
menuitem[image*="moz-extension://"] .menu-iconic-left,
menu[image*="moz-extension://"] .menu-iconic-left {
display: none !important;
}
/* SET PADDING-LEFT AS THE SAME VALUE ACROSS ALL RELEVANT MENUS INCLUDING TEXT-AREA CONTEXT MENUS */
menu, menuitem {
padding-left: 13px !important;
}
/* FIX FOR CONTEXT NAVIGATION ITEMS */
#context-back, #context-forward, #context-reload, #context-bookmarkpage {
padding-left: 0px !important;
}
Read this answer in context 👍 0All Replies (8)
Try this -- it takes advantage of a partial (wildcard) attribute value match on the menu item to identify extensions:
/* Hide Extension Buttons on Context Menus */
menuitem[image*="moz-extension://"] .menu-iconic-left,
menu[image*="moz-extension://"] .menu-iconic-left {
display: none;
}
https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors
Yes that did the trick! Thank you for the prompt reply...
It's worth a mention that Firefox context menu items now have reduced padding-left with the exception of in-page search field context menus (menu items are still centered). When either your solution or my original approach are applied it leaves this particular menu with extension menu items where expected (left-sided) but the other items remain centered. If the padding-left value is set the same across all menus to defeat this, the #context-navigation element is thrown out of whack.
> with the exception of in-page search field context menus (menu items are still centered).
Hmm, I see that extra left padding on the context menu for this textarea. There's a checkmark for Check Spelling, so maybe that's why the space is there for certain menus. Firefox must have some way that it distinguishes between these menus, but... my time's up for poking at it.
Have you been using the Browser Toolbox for your exploration? There's a preference to force menus to stick open until you press Esc, which is necessary to use "click to inspect" with them.
- ui.popup.disable_autohide
- https://developer.mozilla.org/docs/Tools/Browser_Toolbox
Maybe this code that hides the icons works better as display:none move the label text to the left end.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#contentAreaContextMenu :is(menuitem[image*="moz-extension://"],menu[image*="moz-extension://"]) .menu-iconic-left { visibility: hidden !important; }
Yes I actively use the Browser Toolbox including the preference you refer to. I'll have another look at it and post back when I have a solution.
I posted some other code you can try a few seconds before your last post.
@cor-el Yes I had previously considered this and thank you, however, although it leaves the in-page search field context menu items centered, in the remaining #contentAreaContextMenu menus leave the extension items centered and not to the left as the icon is only 'hidden'.
My thoughts would be to address the in-page search field context menu itself. Will post back once I've had a look at it.
Chosen Solution
Not ideal but solves the issue...and thanks again to both of you for looking at this.
/* REMOVAL OF EXTENSION CONTEXT MENU ICONS */
menuitem[image*="moz-extension://"] .menu-iconic-left,
menu[image*="moz-extension://"] .menu-iconic-left {
display: none !important;
}
/* SET PADDING-LEFT AS THE SAME VALUE ACROSS ALL RELEVANT MENUS INCLUDING TEXT-AREA CONTEXT MENUS */
menu, menuitem {
padding-left: 13px !important;
}
/* FIX FOR CONTEXT NAVIGATION ITEMS */
#context-back, #context-forward, #context-reload, #context-bookmarkpage {
padding-left: 0px !important;
}
Modified by deanone