Bug 1381556 - adjust panel widths to accommodate longer/wider content, r?mikedeboer draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 09 Aug 2017 14:04:21 +0100
changeset 644243 054d402e3ba5797388a7f27f5367864601984705
parent 644169 5322c03f4c8587fe526172d3f87160031faa6d75
child 725541 6db6814ad42643ef85bffe2e52c2c3ba92a0b315
push id73361
push usergijskruitbosch@gmail.com
push dateThu, 10 Aug 2017 17:58:38 +0000
reviewersmikedeboer
bugs1381556
milestone57.0a1
Bug 1381556 - adjust panel widths to accommodate longer/wider content, r?mikedeboer MozReview-Commit-ID: 6bOoRIfttEy
browser/components/customizableui/CustomizeMode.jsm
browser/components/customizableui/content/panelUI.inc.xul
browser/components/uitour/UITour.jsm
browser/themes/shared/customizableui/panelUI.inc.css
--- 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;