Replacing textual context menu items with icons?

[Kenifornication]

Hello

I saw your work on textual_context_navigation.css and was wondering if it was possible to do the opposite for textual menu items, in order to compact the context menu as much as possible.

What I would like is to have a similar menu to the default FF one where back-forward-refresh-bookmark are small icons but for other common tasks like copy paste and suchlike. Is this possible through CSS or not?

[MrOtherGuy]

I mean, technically yes - you could do something like this:

menupopup > menu:not(.menu-iconic)::before,
menupopup > menuitem:not(.menuitem-iconic)::before{
  content: url("chrome://browser/skin/bookmark-star-on-tray.svg");
  display: -moz-box;
  fill: currentColor;
  -moz-context-properties: fill;
  padding-inline-end: 1em;
}
#context-navigation{ flex-grow: 1; }
scrollbox[part="scrollbox"][orient="vertical"]{
  display: flex !important;
  flex-wrap: wrap;
  width: calc(5 * (2em + 16px));
}
menupopup > menuseparator{
  width: 100%;
}
menupopup > menu > .menu-text,
menupopup > menuitem > .menu-text,
menupopup > menu > .menu-iconic-text,
menupopup > menuitem > .menu-iconic-text,
menupopup .menu-accel-container{
  display: none;
}

Of course, here they are all using same icon. But you can certainly add unique icon for each if you want to.

[Kenifornication]

Thank you very much. The code did do the trick, and I spent the whole of Saturday tinkering with it and came to the conclusion that it isn't worth it for all the other stuff it breaks. Sorry for making you write all of that code, but I do appreciate it immensely.