Gfrktyl

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?

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: https://superuser.com/questions/1404144/arranging-firefoxs-ui-bars-with-moz-box-ordinal-group/1404367#1404367 */

#navigator-toolbox {

    display: flex; 

    flex-direction: column;

    }

#toolbar-menubar { order: 1; }

#TabsToolbar { order: 4; }

#nav-bar { order: 2; }

#PersonalToolbar { order: 3; }