Add support for modern flexbox layout

Flexbox model will replace old xul box as the default display model so
this patch adds support for that in a whole bunch of styles.

A lot of style rules are marked as "Fx < 112 compatibility" rules and
those can be removed when 112 hits release.

chrome/overlay_menubar.css

@@ -23,10 +23,13 @@ See the above repository for updates as well as full license text. */
   color: var(--arrowpanel-color);
 }
 
-#menubar-items{ -moz-box-orient: horizontal !important; }
+#menubar-items{
+  -moz-box-orient: horizontal !important; /* Fx <112 compatibility */
+  flex-direction: row !important;
+}
 #menubar-items::after{
   content: "";
-  display: -moz-box;
+  display: flex;
   width: 30px;
   height: calc(var(--tab-min-height) +  2 * var(--tab-block-margin,0px));
   background-image: linear-gradient(to right, var(--arrowpanel-background) 30%, transparent);