Place a separator in specific position?

[rey0n]

I already checked all topics here with advices on how to rearrange items, but i still can't understand how to put separator in specific position. As i see all separators are "connected" to some commands and "ought to follow" them. Yet here comes "problem" of { -moz-box-ordinal-group: 1 !important; } = when several items are in same group, the order is "group" is not controllable.(or is it in some way?) While editing i had several times situation when i have item1 item2 item2_separator item3 item4 item5 item5_separator item6

and however i try i couldn't make it item2 item1 separator item3 separator item5

So is there some way to put separator in specific position after any item? And how to arrange items in same { -moz-box-ordinal-group: X !important; } ?(or how they are arranged automatically)

[stonecrusher]

I didn't test it right now, but in general -moz-box-ordinal-group should work the same as the flexbox order.

Automatic order is just the order how they appear in the source code. So "item2_separator" should always have the same selector, no matter if it still appears after "item2".

To ensure item positions, only use unique group numbers (= give every single item a group number). So you never have to rely on automatic ordering.

Hope that already helps, otherwise please give an example and I'll try to solve it.

[rey0n]

To ensure item positions, only use unique group numbers (= give every single item a group number). So you never have to rely on automatic ordering.

The thing is while separators have css selectors, even unique -moz-box-ordinal-group number seem to be not able to place them separately in any place. While experimenting it seemed to me separator can only be moved at same position under item it corresponds to(or be disabled), no way to put them anywhere.

Simple example with address bar menu: Undo -separator Cut Copy Paste Paste&Go Delete -separator Select All

I'd wish to make it like below, but only order is possible, without separators.. Copy -separator Paste Select All -separator Paste&go

[stonecrusher]

I thought maybe it's a problem that you hide the items that the separator depends on. But I tried and it works flawless.

#urlbar menuitem[cmd="cmd_undo"]                   { display: none !important; } /* Undo       */
#urlbar menuitem[cmd="cmd_undo"] + menuseparator   { -moz-box-ordinal-group: 2 !important; } /* Separator  */
#urlbar menuitem[cmd="cmd_cut"]                    { display: none !important; } /* Cut        */
#urlbar menuitem[cmd="cmd_copy"]                   { -moz-box-ordinal-group: 1 !important; } /* Copy       */
#urlbar menuitem[cmd="cmd_paste"]                  { -moz-box-ordinal-group: 3 !important; } /* Paste      */
#urlbar menuitem[anonid="paste-and-go"]            { -moz-box-ordinal-group: 6 !important; } /* Paste & Go */
#urlbar menuitem[cmd="cmd_delete"]                 { display: none !important; } /* Delete     */
#urlbar menuitem[cmd="cmd_delete"] + menuseparator { -moz-box-ordinal-group: 5 !important; } /* Separator  */
#urlbar menuitem[cmd="cmd_selectAll"]              { -moz-box-ordinal-group: 4 !important; } /* Select All */

[rey0n]

yeah, it works indeed, thanks. then what can you advice concerning "composed menus", like say image context menu? it has one stance when it's simple image and more complex version when image is a link = some additional parts are being "connected" to original image menu(like "open in tab" or "save object") - how to do exact positioning here?. if you want i can't make examples how i'd wish to do that too, or at least please give me a hint.

[stonecrusher]

"Composed menu" = A big internal menu which has different items hidden depending on the context. So my advice would be to inspect that big menu yourself with browser devtools (ctrl+shift+alt+i), make a list from it and then treat that list the same way I did in my last post.

Tip: Click the three-dots-menu in devtools. You can find an option there to not automatically hide popups (like context menus) so you can inspect them (upper left corner of devtools).