From 693fc8a6f816e83c65fbbb403b8f13304e322169 Mon Sep 17 00:00:00 2001
From: Gijs Kruitbosch <gijskruitbosch@gmail.com>
Date: Wed, 17 May 2017 15:05:36 +0100
Subject: [PATCH] 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                          | 4 ++--
 browser/components/customizableui/CustomizableUI.jsm      | 3 ---
 browser/components/customizableui/CustomizeMode.jsm       | 2 +-
 browser/components/customizableui/content/panelUI.inc.xul | 4 ++--
 browser/components/customizableui/content/panelUI.js      | 6 +++++-
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index 2e44793dbd0c..87a09e6aac68 100644
--- a/browser/base/content/browser.css
+++ b/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;
 }
 
diff --git a/browser/components/customizableui/CustomizableUI.jsm b/browser/components/customizableui/CustomizableUI.jsm
index b6a265fb5af4..216286fc5f44 100644
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/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:
diff --git a/browser/components/customizableui/CustomizeMode.jsm b/browser/components/customizableui/CustomizeMode.jsm
index db7690debd29..5346ce2ee7de 100644
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/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);
diff --git a/browser/components/customizableui/content/panelUI.inc.xul b/browser/components/customizableui/content/panelUI.inc.xul
index ee0f746763e7..c371dac6f86c 100644
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/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>
diff --git a/browser/components/customizableui/content/panelUI.js b/browser/components/customizableui/content/panelUI.js
index f06ecd098dcf..d6af519b60c5 100644
--- a/browser/components/customizableui/content/panelUI.js
+++ b/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");
     }
   },