Bug 1365294 - swap position of the fixed overflow list, r=mikedeboer

MozReview-Commit-ID: 9LlTxRLuOkx

--HG--
extra : rebase_source : bc97a85cf5e2f1f8bc10cc5e5e8883875490c2de

browser/base/content/browser.css

@@ -232,8 +232,8 @@ toolbar[customizing] > .overflow-button {
 /* The ids are ugly, but this should be reasonably performant, and
  * using a tagname as the last item would be less so.
  */
-#widget-overflow:not([hasdynamicitems]) #widget-overflow-fixed-separator,
-#widget-overflow-fixed-list:empty + #widget-overflow-fixed-separator {
+#widget-overflow-list:empty + #widget-overflow-fixed-separator,
+#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
   display: none;
 }
 

browser/components/customizableui/CustomizableUI.jsm

@@ -4215,7 +4215,6 @@ OverflowableToolbar.prototype = {
           CustomizableUI.addListener(this);
         }
         this._toolbar.setAttribute("overflowing", "true");
-        this._panel.setAttribute("hasdynamicitems", true);
       }
       child = prevChild;
     }
@@ -4278,7 +4277,6 @@ OverflowableToolbar.prototype = {
     if (!this._collapsed.size) {
       this._toolbar.removeAttribute("overflowing");
       CustomizableUI.removeListener(this);
-      this._panel.removeAttribute("hasdynamicitems");
     }
   },
 
@@ -4369,7 +4367,6 @@ OverflowableToolbar.prototype = {
       if (!this._collapsed.size) {
         this._toolbar.removeAttribute("overflowing");
         CustomizableUI.removeListener(this);
-        this._panel.removeAttribute("hasdynamicitems");
       }
     } else if (aNode.previousSibling) {
       // but if it still is, it must have changed places. Bookkeep:

browser/components/customizableui/CustomizeMode.jsm

@@ -526,7 +526,7 @@ CustomizeMode.prototype = {
       window.PanelUI.menuButton.disabled = false;
       if (gPhotonStructure) {
         let overflowContainer = document.getElementById("widget-overflow-scroller");
-        overflowContainer.insertBefore(window.PanelUI.overflowFixedList, overflowContainer.firstElementChild);
+        overflowContainer.appendChild(window.PanelUI.overflowFixedList);
         document.getElementById("nav-bar-overflow-button").disabled = false;
       } else {
         window.PanelUI.setMainView(window.PanelUI.mainView);

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

@@ -380,10 +380,10 @@
     <panelview id="widget-overflow-mainView"
                context="toolbar-context-menu">
       <vbox id="widget-overflow-scroller">
-        <vbox id="widget-overflow-fixed-list" class="widget-overflow-list" hidden="true"/>
-        <toolbarseparator id="widget-overflow-fixed-separator" hidden="true"/>
         <vbox id="widget-overflow-list" class="widget-overflow-list"
               overflowfortoolbar="nav-bar"/>
+        <toolbarseparator id="widget-overflow-fixed-separator" hidden="true"/>
+        <vbox id="widget-overflow-fixed-list" class="widget-overflow-list" hidden="true"/>
       </vbox>
     </panelview>
   </panelmultiview>

browser/components/customizableui/content/panelUI.js

@@ -40,6 +40,7 @@ const PanelUI = {
       addonNotificationContainer: gPhotonStructure ? "appMenu-addon-banners" : "PanelUI-footer-addons",
 
       overflowFixedList: gPhotonStructure ? "widget-overflow-fixed-list" : "",
+      overflowPanel: gPhotonStructure ? "widget-overflow" : "",
       navbar: "nav-bar",
     };
   },
@@ -85,7 +86,8 @@ const PanelUI = {
   _initPhotonPanel() {
     if (gPhotonStructure) {
       this.overflowFixedList.hidden = false;
-      this.overflowFixedList.nextSibling.hidden = false;
+      // Also unhide the separator. We use CSS to hide/show it based on the panel's content.
+      this.overflowFixedList.previousSibling.hidden = false;
       CustomizableUI.registerMenuPanel(this.overflowFixedList, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
       this.navbar.setAttribute("photon-structure", "true");
       this.updateOverflowStatus();
@@ -608,7 +610,9 @@ const PanelUI = {
     let hasKids = this.overflowFixedList.hasChildNodes();
     if (hasKids && !this.navbar.hasAttribute("nonemptyoverflow")) {
       this.navbar.setAttribute("nonemptyoverflow", "true");
+      this.overflowPanel.setAttribute("hasfixeditems", "true");
     } else if (!hasKids && this.navbar.hasAttribute("nonemptyoverflow")) {
+      this.overflowPanel.removeAttribute("hasfixeditems");
       this.navbar.removeAttribute("nonemptyoverflow");
     }
   },