Arranging Firefox's UI bars with -moz-box-ordinal-group

I updated my FF to 65.0 (64-Bit) on Windows 7 today and now the following settings in my userChrome.css aren't considered any longer:

/* Tab bar below Navigation & Bookmarks Toolbars */ #nav-bar { /* main toolbar */ -moz-box-ordinal-group: 1 !important; border-top-width: 0 !important; } #PersonalToolbar { /* bookmarks toolbar */ -moz-box-ordinal-group: 2 !important; border-top-width: 0 !important; } #TabsToolbar { /* tab bar */ -moz-box-ordinal-group: 3 !important; border-top-width: 0 !important; } 

I.e. instead of:

• menu bar
• main toolbar
• bookmarks toolbar
• tab bar

it's:

• menu bar
• tab bar   ← this is not as intended
• main toolbar
• bookmarks toolbar

How to change the settings to the intended (and previous) behavour?

2 Answers

All the -moz-* CSS additions are non-standard and belong to the time when CSS was just starting and was lacking many options. While waiting for the standard to evolve, Mozilla has added these CSS items as a stop-gap measure.

The Mozilla -moz-box-ordinal-group documentation contains this:

Warning: This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced in newer drafts.

See Flexbox for more information on what you should be using instead of this property.

The general Mozilla CSS extensions also has this:

Mozilla applications such as Firefox support a number of special Mozilla extensions to CSS, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. These extensions are prefixed with -moz-.

Mozilla-only properties and pseudo-classes (avoid using on websites)

Note: These properties and pseudo-classes will only work in Mozilla applications such as Firefox, and are not on a standards track. Some of them apply only to XUL elements.

The general message is not to use the non-standard -moz extensions to CSS. These will gradually be phased out in favor of the current standard.

Using the DOM Inspector (Ctrl+Shift+C) on the page chrome://browser/content/browser.xul I found a #navigator-toolbox that contains all the toolbars.

So, I adapted my userChrome.css to:

/* For: chrome://browser/content/browser.xul From: */ #navigator-toolbox { display: flex; flex-direction: column; } #toolbar-menubar { order: 1; } #TabsToolbar { order: 4; } #nav-bar { order: 2; } #PersonalToolbar { order: 3; }