Bug 1074520 - Use CSS instead of hacks to make the forget button lay out correctly. r=jaws, a=lmandel,dolske
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 22 Oct 2014 12:35:36 +0100
changeset 218142 c55d0a927772
parent 218141 e0d4cbcae717
child 218143 914bed88291e
push id553
push userryanvm@gmail.com
push date2014-10-29 12:21 +0000
treeherdermozilla-release@766b4b4fa7c7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, lmandel, dolske
bugs1074520
milestone33.0.2
Bug 1074520 - Use CSS instead of hacks to make the forget button lay out correctly. r=jaws, a=lmandel,dolske
browser/components/customizableui/content/panelUI.js
browser/components/customizableui/content/panelUI.xml
browser/components/customizableui/src/CustomizableWidgets.jsm
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- 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
@@ -154,16 +154,17 @@
         <body><![CDATA[
           if (this.showingSubView) {
             let viewNode = this._currentSubView;
             let evt = document.createEvent("CustomEvent");
             evt.initCustomEvent("ViewHiding", true, true, viewNode);
             viewNode.dispatchEvent(evt);
 
             viewNode.removeAttribute("current");
+            this.removeAttribute("currentsubview");
             this._currentSubView = null;
 
             this._subViewObserver.disconnect();
 
             this._transitioning = true;
 
             this._viewContainer.addEventListener("transitionend", function trans() {
               this._viewContainer.removeEventListener("transitionend", trans);
@@ -188,16 +189,17 @@
           // to lazily populate the subview with things.
           let evt = document.createEvent("CustomEvent");
           evt.initCustomEvent("ViewShowing", true, true, viewNode);
           viewNode.dispatchEvent(evt);
           if (evt.defaultPrevented) {
             return;
           }
 
+          this.setAttribute("currentsubview", aViewId);
           this._currentSubView = viewNode;
 
           // Now we have to transition the panel. There are a few parts to this:
           //
           // 1) The main view content gets shifted so that the center of the anchor
           //    node is at the left-most edge of the panel.
           // 2) The subview deck slides in so that it takes up almost all of the
           //    panel.
--- a/browser/components/customizableui/src/CustomizableWidgets.jsm
+++ b/browser/components/customizableui/src/CustomizableWidgets.jsm
@@ -986,71 +986,25 @@ if (isPanicButtonEnabled) {
         }
       });
     },
     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/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -1096,16 +1096,27 @@ toolbaritem[overflowedItem=true],
   -moz-appearance: none;
   -moz-margin-end: 3px;
 }
 
 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
   visibility: hidden;
 }
 
+#customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer,
+#customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack,
+#customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview,
+/* NB: currentsubview attribute is temporary as a safe workaround for a layout problem with this
+ * panel. Do not rely on it, it *will* go away again. */
+#PanelUI-multiView[currentsubview="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-subviews,
+#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);
 }