Bug 1377793 - Fix scrolling in the non-Photon main menu. r=Gijs

MozReview-Commit-ID: 88IsXDvYjyK

--HG--
extra : rebase_source : 4601c2ba6f848ceeeac5db26cfe6621bf7e15a6e

browser/components/customizableui/PanelMultiView.jsm

@@ -868,7 +868,23 @@ this.PanelMultiView = class {
         // sense for all platforms. If the arrow visuals change significantly,
         // this value will be easy to adjust.
         const EXTRA_MARGIN_PX = 20;
-        this._viewStack.style.maxHeight = (maxHeight - EXTRA_MARGIN_PX) + "px";
+        maxHeight -= EXTRA_MARGIN_PX;
+        this._viewStack.style.maxHeight = maxHeight + "px";
+
+        // When using block-in-box layout inside a scrollable frame, like in the
+        // main menu contents scroller, if we allow the contents to scroll then
+        // it will not cause its container to expand. Thus, we layout first
+        // without any scrolling (using "display: flex;"), and only if the view
+        // exceeds the available space we set the height explicitly and enable
+        // scrolling.
+        if (this._mainView.hasAttribute("blockinboxworkaround")) {
+          let mainViewHeight =
+              this._dwu.getBoundsWithoutFlushing(this._mainView).height;
+          if (mainViewHeight > maxHeight) {
+            this._mainView.style.height = maxHeight + "px";
+            this._mainView.setAttribute("exceeding", "true");
+          }
+        }
         break;
       case "popupshown":
         // Now that the main view is visible, we can check the height of the
@@ -890,6 +906,12 @@ this.PanelMultiView = class {
           this._resetKeyNavigation();
           this._mainViewHeight = 0;
         }
+        // Always try to layout the panel normally when reopening it. This is
+        // also the layout that will be used in customize mode.
+        if (this._mainView.hasAttribute("blockinboxworkaround")) {
+          this._mainView.style.removeProperty("height");
+          this._mainView.removeAttribute("exceeding");
+        }
         break;
     }
   }

browser/components/customizableui/content/panelUI.inc.xul

@@ -12,7 +12,7 @@
   <panelmultiview id="PanelUI-multiView" mainViewId="PanelUI-mainView"
                   viewCacheId="appMenu-viewCache">
     <panelview id="PanelUI-mainView" context="customizationPanelContextMenu"
-               descriptionheightworkaround="true">
+               descriptionheightworkaround="true" blockinboxworkaround="true">
       <vbox id="PanelUI-contents-scroller">
         <vbox id="PanelUI-contents" class="panelUI-grid"/>
       </vbox>

browser/themes/shared/customizableui/panelUI.inc.css

@@ -250,11 +250,6 @@ photonpanelmultiview .panel-subview-header {
   -moz-box-pack: center;
 }
 
-#PanelUI-mainView {
-  display: flex;
-  flex-direction: column;
-}
-
 #appMenu-popup > arrowscrollbox > autorepeatbutton,
 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
   display: none;
@@ -381,12 +376,18 @@ photonpanelmultiview .panel-subview-body {
 }
 
 #PanelUI-contents-scroller {
+  -moz-box-flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   width: @menuPanelWidth@;
   padding-left: 5px;
   padding-right: 5px;
-  flex: auto;
+  -moz-box-align: center;
+}
+
+/* Allow box layout to take over when the view exceeds the available space. */
+#PanelUI-mainView:not([exceeding]) > #PanelUI-contents-scroller {
+  display: flex;
 }
 
 .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {