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
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -212,16 +212,30 @@ toolbar[overflowable] > .customization-t
overflow: hidden;
}
toolbar:not([overflowing]) > .overflow-button,
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,
#main-window[inFullscreen] .titlebar-placeholder,
#main-window:not([tabsintitlebar]) .titlebar-placeholder {
display: none;
}
--- a/browser/components/customizableui/CustomizableUI.jsm
+++ b/browser/components/customizableui/CustomizableUI.jsm
@@ -4168,17 +4168,17 @@ OverflowableToolbar.prototype = {
}, {once: true});
});
},
_onClickChevron(aEvent) {
if (this._chevron.open) {
this._panel.hidePopup();
this._chevron.open = false;
- } else {
+ } else if (this._panel.state != "hiding") {
this.show();
}
},
_onPanelHiding(aEvent) {
this._chevron.open = false;
this._panel.removeEventListener("dragover", this);
this._panel.removeEventListener("dragend", this);
@@ -4210,16 +4210,17 @@ 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();
},
@@ -4272,16 +4273,17 @@ 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) {
@@ -4362,16 +4364,17 @@ 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
@@ -282,16 +282,17 @@ CustomizeMode.prototype = {
// menu button means a quick exit from customization mode.
window.PanelUI.hide();
let panelHolder = document.getElementById("customization-panelHolder");
if (gPhotonStructure) {
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;
window.PanelUI.beginBatchUpdate();
// The menu panel is lazy, and registers itself when the popup shows. We
// need to force the menu panel to register itself, or else customization
// is really not going to work. We pass "true" to ensureReady to
@@ -522,16 +523,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);
+ 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"));
customizeButton.setAttribute("tooltiptext", customizeButton.getAttribute("enterTooltiptext"));
--- 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" : "",
+ navbar: "nav-bar",
};
},
_initialized: false,
init() {
this._initElements();
this.notifications = [];
@@ -80,16 +81,20 @@ const PanelUI = {
// 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;
CustomizableUI.registerMenuPanel(this.overflowFixedList, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
+ this.navbar.setAttribute("photon-structure", "true");
+ this.updateOverflowStatus();
+ } else {
+ this.navbar.removeAttribute("photon-structure");
}
},
_initElements() {
for (let [k, v] of Object.entries(this.kElements)) {
if (!v) {
continue;
}
@@ -591,17 +596,30 @@ const PanelUI = {
enableSingleSubviewPanelAnimations() {
this._disableAnimations = false;
},
onPhotonChanged() {
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;
}
if (aWasRemoval) {
aNode.removeAttribute("auto-hyphens");
}
},
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1194,23 +1194,16 @@ menuitem.panel-subview-footer@menuStateA
padding-bottom: 4px;
}
/* Disabled (empty) item is always alone and never has an icon, so fix its left padding */
#BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
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,
.cui-widget-panelview menuseparator {
-moz-appearance: none;
min-height: 0;
border-top: 1px solid var(--panel-separator-color);
border-bottom: none;
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -27,16 +27,19 @@ toolbar:-moz-lwtheme {
--toolbarbutton-checkedhover-backgroundcolor: rgba(85%,85%,85%,.25);
}
/* ::::: primary toolbar buttons ::::: */
.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,
#main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
opacity: var(--toolbarbutton-disabled-opacity);
}