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.
MrOtherGuy · Mar 11, 2023 · 0ff12e0 · 0ff12e0
1 parent 0db37c5
commit 0ff12e0
Show file tree

Hide file tree

Showing 47 changed files with 262 additions and 137 deletions.
diff --git a/chrome/autohide_sidebar.css b/chrome/autohide_sidebar.css
@@ -34,14 +34,10 @@ See the above repository for updates as well as full license text. */
 #sidebar-header::before,
 #sidebar-header::after{
   content: "";
-  display: -moz-box;
+  display: flex;
   padding-left: 8px;
 }
 
-#sidebar-switcher-target{
-  -moz-box-pack: start !important;
-}
-
 #sidebar-header,
 #sidebar{
   transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;

diff --git a/chrome/centered_tab_label.css b/chrome/centered_tab_label.css
@@ -3,12 +3,14 @@ See the above repository for updates as well as full license text. */
 
 .tab-label-container{
   display: grid;
-  justify-content: safe center;
-  align-items: safe center;
+  justify-content: safe center; /* Fx <112 compatibility */
+  align-items: safe center; /* Fx <112 compatibility */
+  align-content: center;
 }
 
 .tab-secondary-label{
-  -moz-box-pack: center;
+  -moz-box-pack: center; /* Fx <112 compatibility */
+  justify-content: center;
 }
 
 .tab-label,

diff --git a/chrome/classic_firefox_menu_button.css b/chrome/classic_firefox_menu_button.css
@@ -13,9 +13,19 @@ See the above repository for updates as well as full license text. */
   --uc-fx-button-sec-color: #ffdfbf85;
 }
 
-#PanelUI-button{ -moz-box-ordinal-group: 0; margin-inline: 2px var(--uc-window-drag-space-pre,24px) !important; }
-:root[tabsintitlebar] #nav-bar{ border-left-width: 0px; padding-left: 0px !important; }
-#PanelUI-menu-button{ -moz-box-align: start !important; }
+#PanelUI-button{
+  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
+  order: -1;
+  margin-inline: 2px var(--uc-window-drag-space-pre,24px) !important;
+}
+:root[tabsintitlebar] #nav-bar{
+  border-left-width: 0px;
+  padding-left: 0px !important;
+}
+#PanelUI-menu-button{
+  -moz-box-align: start !important; /* Fx <112 compatibility */
+  align-items: start;
+}
 #PanelUI-menu-button > stack{
   background-color: var(--uc-fx-button-color);
   background-image: linear-gradient(var(--uc-fx-button-sec-color), transparent) !important;
@@ -24,7 +34,7 @@ See the above repository for updates as well as full license text. */
   border: 1px groove black;
   outline: 1px solid #cdd8e4;
   border-top: none;
-  display: -moz-box;
+  display: flex;
   padding: 4px 10px !important;
 }
 
@@ -35,7 +45,7 @@ See the above repository for updates as well as full license text. */
 }
 
 #PanelUI-menu-button > stack::before{
-  display: -moz-box;
+  display: flex;
   content: "Firefox"; /* Change text here */
   color: white;
   text-shadow: 0 0 2px black;

diff --git a/chrome/classic_grid_main_menu_popup.css b/chrome/classic_grid_main_menu_popup.css
@@ -29,29 +29,42 @@ See the above repository for updates as well as full license text. */
   height: 76px;
   flex-grow:1;
 }
-#appMenu-protonMainView > .panel-subview-body > toolbarbutton > .toolbarbutton-icon{ -moz-box-flex: 1 }
-#appMenu-protonMainView > .panel-subview-body > toolbarbutton{ -moz-box-orient: vertical }
+#appMenu-protonMainView > .panel-subview-body > toolbarbutton > .toolbarbutton-icon{
+  -moz-box-flex: 1;
+}
+#appMenu-protonMainView > .panel-subview-body > toolbarbutton{
+  flex-direction: column;
+  -moz-box-orient: vertical; /* Fx <112 compatibility */
+}
 
 :where(#appMenu-protonMainView) > .panel-subview-body > toolbarbutton.subviewbutton{
   padding-inline: 4px !important;
   margin-inline: 8px !important;
   fill: currentColor;
 }
 
+#appMenu-protonMainView > .panel-subview-body > .subviewbutton > .toolbarbutton-text{
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 70px;
+}
+
 /* Unique styling for Edit and Zoom controls */
 
-#appMenu-zoom-controls2,
-#appMenu-zoom-controls2 + toolbarseparator{
+#appMenu-zoom-controls,
+#appMenu-zoom-controls + toolbarseparator{
   order: -1;
   height: initial !important;
   margin: initial !important;
   flex-grow: 1;
 }
-#appMenu-zoom-controls2 + toolbarseparator{ margin-block: 0 4px !important; }
-#appMenu-zoom-controls2{ padding-block: 2px !important; }
-#appMenu-zoom-controls2 > :not(:last-child){
-  -moz-box-flex: 1 !important;
-  -moz-box-pack: center !important;
+#appMenu-zoom-controls + toolbarseparator{ margin-block: 0 4px !important; }
+#appMenu-zoom-controls{ padding-block: 2px !important; }
+#appMenu-zoom-controls > :not(:last-child){
+  -moz-box-flex: 1 !important; /* Fx <112 compatibility */
+  -moz-box-pack: center !important; /* Fx <112 compatibility */
+  flex-grow: 1 !important;
+  justify-content: center !important;
   border-radius: 0 !important;
 }
 #appMenu-zoomReset-button2{
@@ -102,9 +115,9 @@ See the above repository for updates as well as full license text. */
 #appMenu-proton-update-banner,
 #appMenu-quit-button2.subviewbutton{ order: 4 }
 
-
-#appMenu-more-button2{ min-width: 170px }
-#appMenu-more-button2 > .toolbarbutton-icon{ -moz-box-flex: 0 !important; }
+#appMenu-more-button2 > .toolbarbutton-icon{
+  -moz-box-flex: 0 !important;
+}
 /* Color styling for items */
 
 #appMenu-protonMainView > .panel-subview-body toolbarbutton:not([disabled]):hover{
@@ -118,9 +131,9 @@ See the above repository for updates as well as full license text. */
 #appMenu-fxa-text,
 #appMenu-help-button2 + toolbarseparator,
 #appMenu-new-private-window-button2 + toolbarseparator,
-#appMenu-zoom-controls2 > #appMenu-fullscreen-button > label,
-#appMenu-zoom-controls2 > label,
-#appMenu-zoom-controls2 > spacer,
+#appMenu-zoom-controls > #appMenu-fullscreen-button > label,
+#appMenu-zoom-controls > label,
+#appMenu-zoom-controls > spacer,
 #appMenu-edit-controls2 > label,
 #appMenu-edit-controls2 > spacer,
 #appMenu-protonMainView > .panel-subview-body > toolbarbutton::after{ display: none !important; }
@@ -135,6 +148,7 @@ See the above repository for updates as well as full license text. */
 #appMenu-fxa-status2{
   display: grid !important;
   padding-block: 0 !important;
+  justify-content: stretch !important;
 }
 #appMenu-fxa-status2 > *{ grid-area: 1/1 }
 #appMenu-fxa-status2 > toolbarbutton::before,
@@ -144,7 +158,7 @@ See the above repository for updates as well as full license text. */
 }
 
 #appMenu-fxa-status2 > toolbarbutton::before{
-  display: -moz-box;
+  display: flex;
   content: "";
   width: 16px;
   height: 16px;
@@ -165,11 +179,19 @@ See the above repository for updates as well as full license text. */
 #appMenu-quit-button2{
   background-color: var(--button-bgcolor) !important;
   border-radius: 0 !important;
-  -moz-box-orient: horizontal !important;
-  -moz-box-pack: center !important;
+  -moz-box-orient: horizontal !important; /* Fx <112 compatibility */
+  -moz-box-pack: center !important; /* Fx <112 compatibility */
+  flex-direction: row !important;
+  justify-content: center !important;
   padding-block: 12px !important;
   opacity: 0.8;
 }
+
+#appMenu-more-button2{
+  min-width: 170px;
+  justify-content: start !important;
+}
+
 #appMenu-proton-update-banner:hover,
 #appMenu-fxa-label2:hover,
 #appMenu-more-button2:hover,

diff --git a/chrome/combined_favicon_and_tab_close_button.css b/chrome/combined_favicon_and_tab_close_button.css
@@ -14,7 +14,8 @@ See the above repository for updates as well as full license text. */
   visibility: hidden;
 }
 .tab-close-button{
-  -moz-box-ordinal-group: 0;
+  -moz-box-ordinal-group: 0; /* Firefox <112 compatibility */
+  order: -1;
   display: -moz-box !important;
   position: relative;
   margin-inline: -4px -20px !important;

diff --git a/chrome/combined_tabs_and_main_toolbars.css b/chrome/combined_tabs_and_main_toolbars.css
@@ -25,7 +25,7 @@ See the above repository for updates as well as full license text. */
   @media (-moz-platform: windows-win10),(-moz-os-version: windows-win10){
     :root[tabsintitlebar="true"] #nav-bar{ padding-left: calc(var(--uc-hide-window-control-space,1) * 134px + 20px) !important; }
   }
-  #toolbar-menubar[autohide="true"] + #TabsToolbar .titlebar-buttonbox{ -moz-box-direction: reverse }
+  #toolbar-menubar[autohide="true"] + #TabsToolbar .titlebar-buttonbox{ -moz-box-direction: reverse; flex-direction: row-reverse }
 }
 
 #navigator-toolbox{ --tab-min-height: 40px }

diff --git a/chrome/curved_tabs.css b/chrome/curved_tabs.css
@@ -153,7 +153,7 @@ See the above repository for updates as well as full license text. */
 
 /* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */
 @supports -moz-bool-pref("userchrome.curved_tabs.flipped-curve.enabled"){
-  .tab-background{ -moz-box-direction: reverse }
+  .tab-background{ -moz-box-direction: reverse; flex-direction: column-reverse }
   .tabbrowser-tab:hover > .tab-stack > .tab-background,
   .tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) !important }
   .tabbrowser-tab > .tab-stack::before{ transform: scaleY(-1) !important; }

diff --git a/chrome/fake_statusbar_w_bookmarksbar.css b/chrome/fake_statusbar_w_bookmarksbar.css
@@ -21,7 +21,7 @@ See the above repository for updates as well as full license text. */
 
 :root:not([inFullscreen]) > body::after{
   content: "";
-  display: -moz-box;
+  display: flex;
   margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important;
 }
 
@@ -44,7 +44,10 @@ See the above repository for updates as well as full license text. */
 }
 
 #personal-toolbar-empty{ visibility: hidden; }
-#PersonalToolbar .toolbarbutton-1{ -moz-box-align: center !important; }
+#PersonalToolbar .toolbarbutton-1{
+  -moz-box-align: center !important; /* Fx <112 compatibility */
+  align-items: center !important;
+}
 
 #PersonalToolbar > toolbarspring{
   flex-grow: 1;
@@ -84,7 +87,7 @@ See the above repository for updates as well as full license text. */
 .browserStack > #statuspanel[inactive]::before,
 #statuspanel[inactive] > #statuspanel-inner::before{
   content: "Done";
-  display: -moz-box;
+  display: flex;
   margin-top: 2px;
   color: var(--toolbar-field-color, black) !important;
 }

diff --git a/chrome/floating_findbar_on_top.css b/chrome/floating_findbar_on_top.css
@@ -9,7 +9,8 @@ See the above repository for updates as well as full license text. */
  */
 
 findbar{
-  -moz-box-ordinal-group: 0;
+  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
+  order: -1;
   margin-bottom: -33px;
   position: relative;
   border-top: none !important;
@@ -43,18 +44,20 @@ findbar > .findbar-container{
 }
 
 .findbar-find-status{
-  display: -moz-box;
+  display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
-  -moz-box-flex: 1;
+  -moz-box-flex: 1; /* Fx <112 compatibility */
+  flex-grow: 1;
 }
 
 .findbar-closebutton{
   margin: 0 !important;
   border-radius: 0 !important;
   padding: 5px !important;
   width: initial !important;
-  -moz-box-ordinal-group: 0;
+  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
+  order: -1;
 }
 .findbar-closebutton > image{ padding: 3px }
 .findbar-closebutton:hover > image{
@@ -65,16 +68,19 @@ findbar > .findbar-container > hbox{ margin: 0 5px }
 
 findbar::after{
   content:"";
-  display: -moz-box;
-  -moz-box-flex: 100;
+  display: flex;
+  -moz-box-flex: 100; /* Fx <112 compatibility */
+  flex-grow: 100;
 } 
 
 @supports -moz-bool-pref("userchrome.floating-findbar-on-right.enabled"){
   findbar{
-    -moz-box-direction: reverse;
+    -moz-box-direction: reverse; /* Fx <112 compatibility */
+    flex-direction: row-reverse;
   }
   findbar > .findbar-container{
     -moz-box-direction: reverse;
+    flex-direction: row-reverse;
     border-inline-width: 1px 0px;
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 4px;

diff --git a/chrome/hide_tabs_scrollbuttons.css b/chrome/hide_tabs_scrollbuttons.css
@@ -26,11 +26,13 @@ See the above repository for updates as well as full license text. */
   visibility: visible !important;
 }
 spacer[part="overflow-start-indicator"]{
-  -moz-box-ordinal-group: 0;
+  -moz-box-ordinal-group: 0; /* Fx < 112 compatibility */
+  order: -1;
   margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important;
 }
 spacer[part="overflow-end-indicator"]{
-  -moz-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
+  order: 2;
 }
 
 #scrollbutton-down[disabled="true"] > .toolbarbutton-icon,

diff --git a/chrome/hide_tabs_toolbar.css b/chrome/hide_tabs_toolbar.css
@@ -39,8 +39,10 @@ Window controls will be all wrong without it
 }
 
 :root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
-  -moz-box-flex: 1;
-  -moz-box-align: stretch;
+  -moz-box-flex: 1; /* Fx < 112 compatibility */
+  flex-grow: 1;
+  -moz-box-align: stretch; /* Fx < 112 compatibility */
+  align-items: stretch;
   background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
   background-clip: padding-box;
   border-right: 30px solid transparent;

diff --git a/chrome/hide_tabs_with_one_tab.css b/chrome/hide_tabs_with_one_tab.css
@@ -42,7 +42,8 @@ This will NOT work correctly if you have hidden tabs such as with tab groups ext
 }
 @media (-moz-platform: linux){
   #TabsToolbar .titlebar-buttonbox{
-    -moz-box-align: stretch !important;
+    -moz-box-align: stretch !important; /* Fx < 112 compatibility */
+    align-items: stretch !important;
   }
   #TabsToolbar > .titlebar-buttonbox-container > .titlebar-buttonbox > .titlebar-button{
     transform: scale(0.8);

diff --git a/chrome/hide_tabs_with_one_tab_w_window_controls.css b/chrome/hide_tabs_with_one_tab_w_window_controls.css
@@ -31,7 +31,8 @@ Window controls will be all wrong without it
 
 #TabsToolbar > .titlebar-spacer[type="post-tabs"]{
   width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) !important;
-  -moz-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
+  order: 2;
 }
 #toolbar-menubar > spacer{ pointer-events: none }
 

diff --git a/chrome/icon_only_tabs.css b/chrome/icon_only_tabs.css
@@ -5,10 +5,13 @@ See the above repository for updates as well as full license text. */
   display: none
 }
 .tab-icon-image:not([src]){
-  display: -moz-box !important;
+  display: block !important;
 }
 .tab-icon-stack > *{ margin-inline: 0 !important; }
-.tabbrowser-tab{ -moz-box-flex: 0 !important; }
+.tabbrowser-tab{
+  -moz-box-flex: 0 !important; /* Fx <112 compatibility */
+  flex-grow: 0 !important;
+}
 
 .tabbrowser-tab[fadein]{ min-width: calc(16px + 2 * 10px + 4px) !important; }
 :root[uidensity="compact"] .tabbrowser-tab[fadein]{

diff --git a/chrome/iconized_main_menu.css b/chrome/iconized_main_menu.css
@@ -25,7 +25,7 @@ See the above repository for updates as well as full license text. */
 #appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") }
 /* Use account-button icon for signed in sync item */
 #appMenu-fxa-status2[fxastatus] > toolbarbutton::before{
-  display: -moz-box;
+  display: flex;
   content: "";
   width: 16px;
   height: 16px;
@@ -34,11 +34,12 @@ See the above repository for updates as well as full license text. */
 /* Add somewhat hacky separator to zoom controls so it looks consistent */
 #appMenu-protonMainView > .panel-subview-body::after{
   content: "";
-  display: -moz-box;
+  display: flex;
   border-bottom: 1px solid var(--panel-separator-color);
   margin: var(--panel-separator-margin);
 }
 
 #appMenu-find-button2 ~ *{
-  -moz-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
+  order: 2;
 }