Bug 1381556 - adjust panel widths to accommodate longer/wider content, r?mikedeboer
MozReview-Commit-ID: 6bOoRIfttEy
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -437,17 +437,17 @@ CustomizeMode.prototype = {
// And drop all area references.
this.areas.clear();
// Let everybody in this window know that we're starting to
// exit customization mode.
CustomizableUI.dispatchToolboxEvent("customizationending", {}, window);
window.PanelUI.menuButton.disabled = false;
- let overflowContainer = document.getElementById("widget-overflow-scroller");
+ let overflowContainer = document.getElementById("widget-overflow-mainView").firstChild;
overflowContainer.appendChild(window.PanelUI.overflowFixedList);
document.getElementById("nav-bar-overflow-button").disabled = false;
let panelContextMenu = document.getElementById(kPanelItemContextMenu);
this._previousPanelContextMenuParent.appendChild(panelContextMenu);
// We need to set this._customizing to false before removing the tab
// or the TabSelect event handler will think that we are exiting
// customization mode for a second time.
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -351,23 +351,21 @@
type="arrow"
noautofocus="true"
position="bottomcenter topright"
hidden="true">
<photonpanelmultiview mainViewId="widget-overflow-mainView">
<panelview id="widget-overflow-mainView"
context="toolbar-context-menu">
<vbox class="panel-subview-body">
- <vbox id="widget-overflow-scroller">
- <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"
- emptylabel="&customizeMode.emptyOverflowList.description;"/>
- </vbox>
+ <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"
+ emptylabel="&customizeMode.emptyOverflowList.description;"/>
</vbox>
<toolbarbutton command="cmd_CustomizeToolbars"
id="overflowMenu-customize-button"
class="subviewbutton panel-subview-footer"
accesskey="&overflowCustomizeToolbar.accesskey;"
label="&overflowCustomizeToolbar.label;"/>
</panelview>
</photonpanelmultiview>
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -1105,17 +1105,17 @@ this.UITour = {
async _correctAnchor(aChromeWindow, aTarget) {
// PanelMultiView's like the AppMenu might shuffle the DOM, which might result
// in our anchor being invalidated if it was anonymous content (since the XBL
// binding it belonged to got destroyed). We work around this by re-querying for
// the node and stuffing it into the old anchor structure.
let refreshedTarget = await this.getTarget(aChromeWindow, aTarget.targetName);
let node = aTarget.node = refreshedTarget.node;
// If the target is in the overflow panel, just return the overflow button.
- if (node.closest("#widget-overflow-scroller")) {
+ if (node.closest("#widget-overflow-mainView")) {
return CustomizableUI.getWidget(node.id).forWindow(aChromeWindow).anchor;
}
return node;
},
/**
* @param aChromeWindow The chrome window that the highlight is in. Necessary since some targets
* are in a sub-frame so the defaultView is not the same as the chrome
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1,15 +1,16 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%filter substitution
%define menuPanelWidth 22.35em
+%define wideMenuPanelWidth 29em
%define standaloneSubviewWidth 30em
% XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla.
% Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap.
% For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11
% There's no calc() here (and therefore lots of calc() where this is used) because
% we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761
%define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px)
%define buttonStateHover :not(:-moz-any([disabled],[open],:active)):-moz-any(:hover,:focus)
@@ -345,16 +346,23 @@ photonpanelmultiview panelview {
}
#appMenu-popup panelview,
#customizationui-widget-multiview panelview:not([extension]) {
min-width: @menuPanelWidth@;
max-width: 30em;
}
+#customizationui-widget-multiview #appMenu-libraryView,
+#pageActionPanel panelview,
+#widget-overflow panelview {
+ min-width: @wideMenuPanelWidth@;
+ max-width: @wideMenuPanelWidth@;
+}
+
/* Add 2 * 12px extra width for touch mode button padding. */
#appMenu-popup[touchmode] panelview {
min-width: calc(@menuPanelWidth@ + 24px);
}
photonpanelmultiview .panel-subview-body {
padding: 6px 0;
}
@@ -1455,17 +1463,17 @@ 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;
}
-#widget-overflow-scroller > toolbarseparator,
+#widget-overflow-mainView > .panel-subview-body > toolbarseparator,
.PanelUI-subView menuseparator,
.PanelUI-subView toolbarseparator,
.cui-widget-panelview menuseparator,
.cui-widget-panel toolbarseparator {
-moz-appearance: none;
min-height: 0;
border-top: 1px solid var(--panel-separator-color);
border-bottom: none;
@@ -1573,21 +1581,16 @@ toolbarbutton[panel-multiview-anchor="tr
toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menu-dropmarker,
#bookmarks-menu-button[overflowedItem] > .toolbarbutton-menu-dropmarker,
toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
#bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
display: none;
}
-#search-container[cui-areatype="menu-panel"],
-#wrapper-search-container[place="panel"] {
- width: @menuPanelWidth@;
-}
-
#search-container[cui-areatype="menu-panel"] {
margin-top: 6px;
margin-bottom: 6px;
}
toolbarpaletteitem[place="palette"] > #search-container {
min-width: 7em;
width: 7em;
@@ -1658,29 +1661,24 @@ toolbarpaletteitem[place=panel] > .toolb
}
.cui-widget-panelview,
#widget-overflow-mainView .panel-subview-body {
overflow-y: auto;
overflow-x: hidden;
}
-#widget-overflow-scroller {
- margin-top: 4px;
- margin-bottom: 4px;
-}
-
.widget-overflow-list {
- width: @menuPanelWidth@;
+ width: @wideMenuPanelWidth@;
}
toolbaritem[overflowedItem=true],
.widget-overflow-list .toolbarbutton-1 {
width: 100%;
- max-width: @menuPanelWidth@;
+ max-width: @wideMenuPanelWidth@;
background-repeat: no-repeat;
background-position: 0 center;
}
.widget-overflow-list .toolbarbutton-1,
.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-moz-box-align: center;
-moz-box-orient: horizontal;