Changing the order of UI elements in a user style
Chrome user interface can be modified in more ways than that of web pages. Since CSS has to be used for, well, everything, some special properties were invented. A couple of the special properties actually let you change the order in which elements are rendered, regardless of where they are in the source. These properties are -moz-box-direction and -moz-box-ordinal-group.
-moz-box-direction is the simpler of the two. The possible values are normal and reverse. normal’s the default, obviously, and reverse reverses the direction of that element’s child nodes. So if you use #main-menubar { -moz-box-direction: reverse !important;} in Firefox, you’d get a menu bar that went “Help Tools Bookmarks History View Edit File”.
-moz-box-ordinal-group gives you more fine-grained control. It allows you to set a numeric value on each element - the higher the value, the later the element will appear. Ties result in the elements being ordered in source order. The default value is 1. If you wanted to move Firefox’s Bookmarks menu to be after Help, you would do #bookmarks-menu { -moz-box-ordinal-group: 2 !important;}.
A few things to note about this:
- XUL only.
- You need to restart for it to take effect.
- You can only change the order of children within a parent. You can’t intersperse two siblings with a child of another parent.