Bug 1074520 - use CSS instead of hacks to make the forget button panel lay out correctly, r=jaws, a=lsblakk
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 22 Oct 2014 12:39:04 +0100
changeset 233556 de1a68af9d28f59f374a760974b645c0e8e2a5ed
parent 233555 6f07f38a90dffdb6c79b776a400a6d3b9e5d3c42
child 233557 9ad0f3f5b6be96f37b7eb287f680565975d60f92
push id4187
push userbhearsum@mozilla.com
push dateFri, 28 Nov 2014 15:29:12 +0000
treeherdermozilla-beta@f23cc6a30c11 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, lsblakk
bugs1074520
milestone35.0a2
Bug 1074520 - use CSS instead of hacks to make the forget button panel lay out correctly, r=jaws, a=lsblakk
browser/components/customizableui/CustomizableWidgets.jsm
browser/components/customizableui/content/panelUI.js
browser/components/customizableui/content/panelUI.xml
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/components/customizableui/CustomizableWidgets.jsm
+++ b/browser/components/customizableui/CustomizableWidgets.jsm
@@ -1024,71 +1024,25 @@ if (Services.prefs.getBoolPref("privacy.
         }
       });
     },
     handleEvent: function(aEvent) {
       switch (aEvent.type) {
         case "command":
           this.forgetButtonCalled(aEvent);
           break;
-        case "popupshowing":
-          let popup = aEvent.target;
-          if (popup.id == "customizationui-widget-panel" &&
-              popup.querySelector("#PanelUI-panicView")) {
-            popup.ownerDocument.removeEventListener("popupshowing", this);
-            this._updateHeights(popup, true);
-          }
-          break;
-      }
-    },
-    // Workaround bug 451997 by hardcoding heights for (potentially) wrapped items:
-    _updateHeights: function(aContainer, aSetHeights) {
-      // Make sure we don't get stuck not finding anything because of the XBL binding between
-      // the popup and the radio/label/description elements:
-      let view = aContainer.ownerDocument.getElementById("PanelUI-panicView");
-      let variableHeightItems = view.querySelectorAll("radio, label, description");
-      let win = aContainer.ownerDocument.defaultView;
-      for (let item of variableHeightItems) {
-        if (aSetHeights) {
-          let height = win.getComputedStyle(item, null).getPropertyValue("height");
-          item.style.height = height;
-          // In the main menu panel, need to set the height of the container of this
-          // description because otherwise the text will overflow:
-          if (item.id == "PanelUI-panic-mainDesc" &&
-              view.getAttribute("current") == "true" &&
-              // Ensure we don't make this less than the size of the icon:
-              parseInt(height) > 32) {
-            item.parentNode.style.minHeight = height;
-          }
-        } else {
-          item.style.removeProperty("height");
-          if (item.id == "PanelUI-panic-mainDesc") {
-            item.parentNode.style.removeProperty("min-height");
-          }
-        }
       }
     },
     onViewShowing: function(aEvent) {
-      let view = aEvent.target;
-      let forgetButton = view.querySelector("#PanelUI-panic-view-button");
+      let forgetButton = aEvent.target.querySelector("#PanelUI-panic-view-button");
       forgetButton.addEventListener("command", this);
-      if (view.getAttribute("current") == "true") {
-        // In the main menupanel, fix heights immediately:
-        this._updateHeights(view, true);
-      } else {
-        // In a standalone panel, so fix the label and radio heights
-        // when the popup starts showing.
-        view.ownerDocument.addEventListener("popupshowing", this);
-      }
     },
     onViewHiding: function(aEvent) {
-      let view = aEvent.target;
-      let forgetButton = view.querySelector("#PanelUI-panic-view-button");
+      let forgetButton = aEvent.target.querySelector("#PanelUI-panic-view-button");
       forgetButton.removeEventListener("command", this);
-      this._updateHeights(view, false);
     },
   });
 }
 
 #ifdef E10S_TESTING_ONLY
 /**
   * The e10s button's purpose is to lower the barrier of entry
   * for our Nightly testers to use e10s windows. We'll be removing it
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -334,16 +334,17 @@ const PanelUI = {
       }
       tempPanel.setAttribute("context", "");
       document.getElementById(CustomizableUI.AREA_NAVBAR).appendChild(tempPanel);
       // If the view has a footer, set a convenience class on the panel.
       tempPanel.classList.toggle("cui-widget-panelWithFooter",
                                  viewNode.querySelector(".panel-subview-footer"));
 
       let multiView = document.createElement("panelmultiview");
+      multiView.setAttribute("id", "customizationui-widget-multiview");
       multiView.setAttribute("nosubviews", "true");
       tempPanel.appendChild(multiView);
       multiView.setAttribute("mainViewIsSubView", "true");
       multiView.setMainView(viewNode);
       viewNode.classList.add("cui-widget-panelview");
       CustomizableUI.addPanelCloseListeners(tempPanel);
 
       let panelRemover = function() {
--- a/browser/components/customizableui/content/panelUI.xml
+++ b/browser/components/customizableui/content/panelUI.xml
@@ -404,17 +404,17 @@
             let footer = aSubview.querySelector(".panel-subview-footer");
             height += (header ? getFullHeight(header) : 0) +
                       (footer ? getFullHeight(footer) : 0);
           }
           if (aContainerToCheck) {
             let containerCS = win.getComputedStyle(aContainerToCheck);
             height += parseFloat(containerCS.paddingTop) + parseFloat(containerCS.paddingBottom);
           }
-          return Math.round(height);
+          return Math.ceil(height);
         ]]></body>
       </method>
 
     </implementation>
   </binding>
 
   <binding id="panelview">
     <implementation>
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -1100,16 +1100,24 @@ toolbaritem[overflowedItem=true],
   -moz-appearance: none;
   -moz-margin-end: 3px;
 }
 
 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
   visibility: hidden;
 }
 
+.panel-mainview[panelid=customizationui-widget-panel],
+#customizationui-widget-multiview > .panel-viewcontainer,
+#customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
+#PanelUI-panicView > .panel-subview-body,
+#PanelUI-panicView {
+  overflow: visible;
+}
+
 #PanelUI-panicView.cui-widget-panelview {
   min-width: 280px;
 }
 
 #PanelUI-panic-timeframe {
   padding: 15px;
   border-bottom: 1px solid rgba(0,0,0,0.1);
 }