Bug 1365294 - swap position of the fixed overflow list, r?mikedeboer draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 17 May 2017 15:05:36 +0100
changeset 580333 69b81e4189f1367e0cad3bacc5873b26a43b7b44
parent 579463 6e3ca5b38f7173b214b10de49e58cb01890bf39d
child 629251 4826f626d8c4b5cd4c1056a9be6a001f2e2704c0
push id59518
push usergijskruitbosch@gmail.com
push dateThu, 18 May 2017 11:09:03 +0000
reviewersmikedeboer
bugs1365294
milestone55.0a1
Bug 1365294 - swap position of the fixed overflow list, r?mikedeboer MozReview-Commit-ID: 9LlTxRLuOkx
browser/base/content/browser.css
browser/components/customizableui/CustomizableUI.jsm
browser/components/customizableui/CustomizeMode.jsm
browser/components/customizableui/content/panelUI.inc.xul
browser/components/customizableui/content/panelUI.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -227,18 +227,18 @@ toolbar[customizing] > .overflow-button 
 #nav-bar[nonemptyoverflow] > .overflow-button,
 #nav-bar[customizing][photon-structure] > .overflow-button {
   display: -moz-box;
 }
 
 /* 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;
 }
 
 
 %ifdef CAN_DRAW_IN_TITLEBAR
 #main-window:not([chromemargin]) > #titlebar,
 #main-window[inFullscreen] > #titlebar,
 #main-window[inFullscreen] .titlebar-placeholder,
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -4210,17 +4210,16 @@ OverflowableToolbar.prototype = {
         child.setAttribute("cui-anchorid", this._chevron.id);
         CustomizableUIInternal.notifyListeners("onWidgetOverflow", child, this._target);
 
         this._list.insertBefore(child, this._list.firstChild);
         if (!this._toolbar.hasAttribute("overflowing")) {
           CustomizableUI.addListener(this);
         }
         this._toolbar.setAttribute("overflowing", "true");
-        this._panel.setAttribute("hasdynamicitems", true);
       }
       child = prevChild;
     }
 
     let win = this._target.ownerGlobal;
     win.UpdateUrlbarSearchSplitterState();
   },
 
@@ -4273,17 +4272,16 @@ OverflowableToolbar.prototype = {
     }
 
     let win = this._target.ownerGlobal;
     win.UpdateUrlbarSearchSplitterState();
 
     if (!this._collapsed.size) {
       this._toolbar.removeAttribute("overflowing");
       CustomizableUI.removeListener(this);
-      this._panel.removeAttribute("hasdynamicitems");
     }
   },
 
   _onLazyResize() {
     if (!this._enabled)
       return;
 
     if (this._target.scrollLeftMin != this._target.scrollLeftMax) {
@@ -4364,17 +4362,16 @@ OverflowableToolbar.prototype = {
       this._collapsed.delete(aNode.id);
       aNode.removeAttribute("cui-anchorid");
       aNode.removeAttribute("overflowedItem");
       CustomizableUIInternal.notifyListeners("onWidgetUnderflow", aNode, this._target);
 
       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:
       let prevId = aNode.previousSibling.id;
       let minSize = this._collapsed.get(prevId);
       this._collapsed.set(aNode.id, minSize);
     } else {
       // If it's now the first item in the overflow list,
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -521,17 +521,17 @@ CustomizeMode.prototype = {
 
       // Let everybody in this window know that we're starting to
       // exit customization mode.
       CustomizableUI.dispatchToolboxEvent("customizationending", {}, window);
 
       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);
 
         let customizeButton = document.getElementById("PanelUI-customize");
         customizeButton.setAttribute("exitLabel", customizeButton.getAttribute("label"));
         customizeButton.setAttribute("label", customizeButton.getAttribute("enterLabel"));
         customizeButton.setAttribute("exitTooltiptext", customizeButton.getAttribute("tooltiptext"));
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -375,20 +375,20 @@
        type="arrow"
        noautofocus="true"
        position="bottomcenter topright"
        hidden="true">
   <panelmultiview mainViewId="widget-overflow-mainView">
     <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>
 </panel>
 
 <panel id="customization-tipPanel"
        type="arrow"
        flip="none"
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -35,16 +35,17 @@ const PanelUI = {
       helpView: "PanelUI-helpView",
       menuButton: "PanelUI-menu-button",
       panel: gPhotonStructure ? "appMenu-popup" : "PanelUI-popup",
       notificationPanel: "appMenu-notification-popup",
       scroller: "PanelUI-contents-scroller",
       addonNotificationContainer: gPhotonStructure ? "appMenu-addon-banners" : "PanelUI-footer-addons",
 
       overflowFixedList: gPhotonStructure ? "widget-overflow-fixed-list" : "",
+      overflowPanel: gPhotonStructure ? "widget-overflow" : "",
       navbar: "nav-bar",
     };
   },
 
   _initialized: false,
   init() {
     this._initElements();
 
@@ -80,17 +81,18 @@ const PanelUI = {
     this._isReady = false;
   },
 
   // We do this sync on init because in order to have the overflow button show up
   // we need to know whether anything is in the permanent panel area.
   _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();
     } else {
       this.navbar.removeAttribute("photon-structure");
     }
   },
 
@@ -603,17 +605,19 @@ const PanelUI = {
   onPhotonChanged() {
     this.reinit();
   },
 
   updateOverflowStatus() {
     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");
     }
   },
 
   onWidgetAfterDOMChange(aNode, aNextNode, aContainer, aWasRemoval) {
     if (gPhotonStructure && aContainer == this.overflowFixedList) {
       this.updateOverflowStatus();
       return;