Организация панелей пользовательского интерфейса Firefox с -moz-box-ordinal-group

Question

Я обновил свой FF до 65.0 (64-разрядный) сегодня в Windows 7, и теперь следующие параметры в моем userChrome.css больше не рассматриваются:

/* 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;
    }

Т.е. вместо:

• строка меню
• главная панель инструментов
• Панель закладок
• панель вкладок

его:

• строка меню
• панель вкладок ← это не так, как задумано
• главная панель инструментов
• Панель закладок

Как изменить настройки на предполагаемое (и предыдущее) поведение?

Answer 1

Все CSS-дополнения -moz-* являются нестандартными и относятся к тому времени, когда CSS только начинался, и у него не было многих опций. В ожидании развития стандарта Mozilla добавила эти элементы CSS в качестве меры пробела.

Документация Mozilla -moz-box-ordinal-group содержит это:

Предупреждение: это свойство исходного проекта CSS Flexible Box Layout Module, которое было заменено в более новых черновиках.

См. Flexbox для получения дополнительной информации о том, что вы должны использовать вместо этого свойства.

Общие CSS-расширения Mozilla также имеют следующее:

Приложения Mozilla, такие как Firefox, поддерживают ряд специальных расширений Mozilla для CSS, включая свойства, значения, псевдоэлементы и псевдоклассы, at-rules и медиа-запросы. Эти расширения имеют префикс -moz-.

Свойства и псевдоклассы только для Mozilla (не используйте на веб-сайтах)

Примечание . Эти свойства и псевдоклассы будут работать только в приложениях Mozilla, таких как Firefox, и не соответствуют стандартам. Некоторые из них применяются только к элементам XUL.

Общее сообщение не должно использовать нестандартные расширения -moz для CSS. Они будут постепенно сокращены в пользу текущего стандарта.

Answer 2

Используя DOM Inspector (Ctrl+Shift+C) на странице chrome://browser/content/browser.xul я нашел #navigator-toolbox который содержит все панели инструментов.

Итак, я адаптировал свой userChrome.css для:

/* 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; }