Velvet Star Monitor

Standout celebrity highlights with iconic style.

general

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

Writer Andrew Henderson

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?

1

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 documentationcontains 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 generalMozilla CSS extensionsalso 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.

1

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; }
2

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy