Bug 1354094 - show the overflow button when there are items in the permanent overflow menu, r=mikedeboer

This also disables the menu button and overflow button correctly in
customize mode, and fixes an issues where the overflow button state
would stay 'open' when closing the panel by clicking the button
a second time.

MozReview-Commit-ID: BNTkE6zvv9Q

--HG--
extra : rebase_source : caa6ca5376c0b0e6c5d3190ffaed0b34e5292fb4

browser/base/content/browser.css

@@ -217,6 +217,20 @@ toolbar[customizing] > .overflow-button {
   display: none;
 }
 
+#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 {
+  display: none;
+}
+
+
 %ifdef CAN_DRAW_IN_TITLEBAR
 #main-window:not([chromemargin]) > #titlebar,
 #main-window[inFullscreen] > #titlebar,

browser/components/customizableui/CustomizableUI.jsm

@@ -4173,7 +4173,7 @@ OverflowableToolbar.prototype = {
     if (this._chevron.open) {
       this._panel.hidePopup();
       this._chevron.open = false;
-    } else {
+    } else if (this._panel.state != "hiding") {
       this.show();
     }
   },
@@ -4215,6 +4215,7 @@ OverflowableToolbar.prototype = {
           CustomizableUI.addListener(this);
         }
         this._toolbar.setAttribute("overflowing", "true");
+        this._panel.setAttribute("hasdynamicitems", true);
       }
       child = prevChild;
     }
@@ -4277,6 +4278,7 @@ OverflowableToolbar.prototype = {
     if (!this._collapsed.size) {
       this._toolbar.removeAttribute("overflowing");
       CustomizableUI.removeListener(this);
+      this._panel.removeAttribute("hasdynamicitems");
     }
   },
 
@@ -4367,6 +4369,7 @@ 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

@@ -287,6 +287,7 @@ CustomizeMode.prototype = {
         panelHolder.appendChild(window.PanelUI.overflowFixedList);
         window.PanelUI.overflowFixedList.setAttribute("customizing", true);
         window.PanelUI.menuButton.disabled = true;
+        document.getElementById("nav-bar-overflow-button").disabled = true;
       } else {
         window.PanelUI.menuButton.addEventListener("command", this);
         window.PanelUI.menuButton.open = true;
@@ -527,6 +528,7 @@ CustomizeMode.prototype = {
       if (gPhotonStructure) {
         let overflowContainer = document.getElementById("widget-overflow-scroller");
         overflowContainer.insertBefore(window.PanelUI.overflowFixedList, overflowContainer.firstElementChild);
+        document.getElementById("nav-bar-overflow-button").disabled = false;
       } else {
         window.PanelUI.setMainView(window.PanelUI.mainView);
 

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" : "",
+      navbar: "nav-bar",
     };
   },
 
@@ -85,6 +86,10 @@ const PanelUI = {
       this.overflowFixedList.hidden = false;
       this.overflowFixedList.nextSibling.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");
     }
   },
 
@@ -596,7 +601,20 @@ const PanelUI = {
     this.reinit();
   },
 
+  updateOverflowStatus() {
+    let hasKids = this.overflowFixedList.hasChildNodes();
+    if (hasKids && !this.navbar.hasAttribute("nonemptyoverflow")) {
+      this.navbar.setAttribute("nonemptyoverflow", "true");
+    } else if (!hasKids && this.navbar.hasAttribute("nonemptyoverflow")) {
+      this.navbar.removeAttribute("nonemptyoverflow");
+    }
+  },
+
   onWidgetAfterDOMChange(aNode, aNextNode, aContainer, aWasRemoval) {
+    if (gPhotonStructure && aContainer == this.overflowFixedList) {
+      this.updateOverflowStatus();
+      return;
+    }
     if (aContainer != this.contents) {
       return;
     }

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

@@ -1199,13 +1199,6 @@ menuitem.panel-subview-footer@menuStateActive@,
   padding-left: 6px;
 }
 
-/* Yeah, the ids are ugly, but this should be reasonably performant, and
- * using a tagname as the last item would be less so.
- */
-#widget-overflow-fixed-list:empty + #widget-overflow-fixed-separator {
-  display: none;
-}
-
 #widget-overflow-scroller > toolbarseparator,
 .PanelUI-subView menuseparator,
 .PanelUI-subView toolbarseparator,

browser/themes/shared/toolbarbuttons.inc.css

@@ -32,6 +32,9 @@ toolbar:-moz-lwtheme {
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled=true],
 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled=true],
+/* specialcase the overflow and the hamburger button so they show up disabled in customize mode. */
+#nav-bar-overflow-button[disabled=true] > .toolbarbutton-icon,
+#PanelUI-menu-button[disabled=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,