Bug 767133 - Add slide-in animation for arrow panels. r=enndeakin ui-r=shorlander

--HG--
extra : rebase_source : ab38e90e42a6bf45c4152b4960db8f4a8ba14ec0

browser/base/content/browser-places.js

@@ -187,9 +187,6 @@ var StarUI = {
     this._itemId = aItemId !== undefined ? aItemId : this._itemId;
     this.beginBatch();
 
-    // Consume dismiss clicks, see bug 400924
-    this.panel.popupBoxObject
-        .setConsumeRollupEvent(Ci.nsIPopupBoxObject.ROLLUP_CONSUME);
     this.panel.openPopup(aAnchorElement, aPosition);
 
     gEditItemOverlay.initPanel(this._itemId,

browser/base/content/browser.js

@@ -6707,10 +6707,6 @@ var gIdentityHandler = {
     // the popup is actually needed
     this._identityPopup.hidden = false;
 
-    // Tell the popup to consume dismiss clicks, to avoid bug 395314
-    this._identityPopup.popupBoxObject
-        .setConsumeRollupEvent(Ci.nsIPopupBoxObject.ROLLUP_CONSUME);
-
     // Update the popup strings
     this.setPopupMessages(this._identityBox.className);
 

browser/base/content/browser.xul

@@ -137,6 +137,7 @@
            footertype="promobox"
            orient="vertical"
            ignorekeys="true"
+           consumeoutsideclicks="true"
            hidden="true"
            onpopupshown="StarUI.panelShown(event);"
            aria-labelledby="editBookmarkPanelTitle">
@@ -259,6 +260,7 @@
            type="arrow"
            hidden="true"
            noautofocus="true"
+           consumeoutsideclicks="true"
            onpopupshown="gIdentityHandler.onPopupShown(event);"
            level="top">
       <hbox id="identity-popup-container" align="top">

browser/components/downloads/content/downloads.js

@@ -302,10 +302,6 @@ const DownloadsPanel = {
       return;
     }
 
-    // Make sure that clicking outside the popup cannot reopen it accidentally.
-    this.panel.popupBoxObject.setConsumeRollupEvent(Ci.nsIPopupBoxObject
-                                                      .ROLLUP_CONSUME);
-
     // Ensure the anchor is visible.  If that is not possible, show the panel
     // anchored to the top area of the window, near the default anchor position.
     DownloadsButton.getAnchor(function DP_OPIDR_callback(aAnchor) {

browser/components/downloads/content/downloadsOverlay.xul

@@ -46,6 +46,7 @@
            type="arrow"
            orient="vertical"
            level="top"
+           consumeoutsideclicks="true"
            onpopupshown="DownloadsPanel.onPopupShown(event);"
            onpopuphidden="DownloadsPanel.onPopupHidden(event);">
       <!-- The following popup menu should be a child of the panel element,

toolkit/content/widgets/popup.xml

@@ -306,7 +306,8 @@
 
   <binding id="arrowpanel" extends="chrome://global/content/bindings/popup.xml#panel">
     <content flip="both" side="top" position="bottomcenter topleft">
-      <xul:box anonid="container" class="panel-arrowcontainer" flex="1">
+      <xul:box anonid="container" class="panel-arrowcontainer" flex="1"
+               xbl:inherits="side,panelopen">
         <xul:box anonid="arrowbox" class="panel-arrowbox">
           <xul:image anonid="arrow" class="panel-arrow"/>
         </xul:box>
@@ -320,7 +321,7 @@
       <field name="_fadeTimer">null</field>
     </implementation>
     <handlers>
-      <handler event="popupshowing">
+      <handler event="popupshowing" phase="target">
       <![CDATA[
         var container = document.getAnonymousElementByAttribute(this, "anonid", "container");
         var arrowbox = document.getAnonymousElementByAttribute(this, "anonid", "arrowbox");
@@ -456,12 +457,24 @@
       </handler>
       <handler event="transitionend" phase="target">
       <![CDATA[
-        if (event.propertyName == "opacity") {
+        if (event.propertyName == "opacity" &&
+            event.originalTarget == this) {
           this.hidePopup();
           this.style.removeProperty("opacity");
         }
       ]]>
       </handler>
+      <handler event="popupshown" phase="target">
+        this.setAttribute("panelopen", "true");
+      </handler>
+      <handler event="popuphidden" phase="target"><![CDATA[
+        this.removeAttribute("panelopen");
+
+        // Destroying the widget to prevent the current state from being rendered
+        // briefly when the panel reopens.
+        this.hidden = true;
+        setTimeout(function () { this.hidden = false; }.bind(this), 0);
+      ]]></handler>
     </handlers>
   </binding>
 

toolkit/themes/pinstripe/global/popup.css

@@ -28,6 +28,32 @@ panel[type="arrow"] {
   -moz-transition: opacity 300ms;
 }
 
+.panel-arrowcontainer[panelopen] {
+  -moz-transition-duration: 250ms;
+  -moz-transition-property: opacity, -moz-transform;
+  -moz-transition-timing-function: ease-out;
+}
+
+.panel-arrowcontainer:not([panelopen]) {
+  opacity: 0;
+}
+
+.panel-arrowcontainer:not([panelopen])[side="top"] {
+  -moz-transform: translateY(-20px);
+}
+
+.panel-arrowcontainer:not([panelopen])[side="bottom"] {
+  -moz-transform: translateY(20px);
+}
+
+.panel-arrowcontainer:not([panelopen])[side="left"] {
+  -moz-transform: translateX(-20px);
+}
+
+.panel-arrowcontainer:not([panelopen])[side="right"] {
+  -moz-transform: translateX(20px);
+}
+
 panel[type="arrow"][side="top"],
 panel[type="arrow"][side="bottom"] {
   margin-left: -26px;

toolkit/themes/winstripe/global/popup.css

@@ -36,6 +36,32 @@ panel[type="arrow"] {
   -moz-transition: opacity 300ms;
 }
 
+.panel-arrowcontainer[panelopen] {
+  -moz-transition-duration: 250ms;
+  -moz-transition-property: opacity, -moz-transform;
+  -moz-transition-timing-function: ease-out;
+}
+
+.panel-arrowcontainer:not([panelopen]) {
+  opacity: 0;
+}
+
+.panel-arrowcontainer:not([panelopen])[side="top"] {
+  -moz-transform: translateY(-20px);
+}
+
+.panel-arrowcontainer:not([panelopen])[side="bottom"] {
+  -moz-transform: translateY(20px);
+}
+
+.panel-arrowcontainer:not([panelopen])[side="left"] {
+  -moz-transform: translateX(-20px);
+}
+
+.panel-arrowcontainer:not([panelopen])[side="right"] {
+  -moz-transform: translateX(20px);
+}
+
 panel[type="arrow"][side="top"],
 panel[type="arrow"][side="bottom"] {
   margin-left: -20px;