Bug 922847 - Separate animation from download button, r=mconley

browser/base/content/browser.xul

@@ -895,6 +895,12 @@
 #endif
     </toolbar>
 
+    <hbox id="downloads-animation-container" mousethrough="always">
+      <vbox id="downloads-notification-anchor">
+        <vbox id="downloads-indicator-notification"/>
+      </vbox>
+    </hbox>
+
     <toolbarpalette id="BrowserToolbarPalette">
 
 # Update primaryToolbarButtons in browser/themes/shared/browser.inc when adding

browser/components/downloads/content/indicator.js

@@ -326,18 +326,39 @@ const DownloadsIndicatorView = {
       return;
     }
 
-    function DIV_SEN_callback() {
-      if (this._notificationTimeout) {
-        clearTimeout(this._notificationTimeout);
-      }
-
-      let indicator = this.indicator;
-      indicator.setAttribute("notification", aType);
-      this._notificationTimeout = setTimeout(
-        function () indicator.removeAttribute("notification"), 1000);
+    // If the anchor is not there or its container is hidden, don't show
+    // a notification
+    let anchor = DownloadsButton._placeholder;
+    if (!anchor || !isElementVisible(anchor.parentNode)) {
+      return;
     }
 
-    this._ensureOperational(DIV_SEN_callback.bind(this));
+    if (this._notificationTimeout) {
+      clearTimeout(this._notificationTimeout);
+    }
+
+    // The notification element is positioned to show in the same location as
+    // the downloads button. It's not in the downloads button itself in order to
+    // be able to anchor the notification elsewhere if required, and to ensure
+    // the notification isn't clipped by overflow properties of the anchor's
+    // container.
+    let notifier = this.notifier;
+    if (notifier.style.transform == '') {
+      let anchorRect = anchor.getBoundingClientRect();
+      let notifierRect = notifier.getBoundingClientRect();
+      let topDiff = anchorRect.top - notifierRect.top;
+      let leftDiff = anchorRect.left - notifierRect.left;
+      let heightDiff = anchorRect.height - notifierRect.height;
+      let widthDiff = anchorRect.width - notifierRect.width;
+      let translateX = (leftDiff + .5 * widthDiff) + "px";
+      let translateY = (topDiff + .5 * heightDiff) + "px";
+      notifier.style.transform = "translate(" +  translateX + ", " + translateY + ")";
+    }
+    notifier.setAttribute("notification", aType);
+    this._notificationTimeout = setTimeout(function () {
+      notifier.removeAttribute("notification");
+      notifier.style.transform = '';
+    }, 1000);
   },
 
   //////////////////////////////////////////////////////////////////////////////
@@ -547,6 +568,12 @@ const DownloadsIndicatorView = {
       (this.__indicatorProgress = document.getElementById("downloads-indicator-progress"));
   },
 
+  get notifier()
+  {
+    return this._notifier ||
+      (this._notifier = document.getElementById("downloads-notification-anchor"));
+  },
+
   _onCustomizedAway: function() {
     this._indicator = null;
     this._indicatorAnchor = null;

browser/components/downloads/content/indicatorOverlay.xul

@@ -30,7 +30,6 @@
                        min="0" max="100"/>
       </vbox>
       <vbox id="downloads-indicator-icon"/>
-      <vbox id="downloads-indicator-notification"/>
     </stack>
   </toolbarbutton>
 </overlay>

browser/themes/linux/downloads/indicator.css

@@ -4,11 +4,17 @@
 
 /*** Status and progress indicator ***/
 
-#downloads-indicator-anchor {
-  /* Makes the outermost stack element positioned, so that its contents are
-     rendered over the main browser window in the Z order.  This is required by
-     the animated event notification. */
+#downloads-animation-container {
+  min-height: 1px;
+  min-width: 1px;
+  height: 1px;
+  margin-bottom: -1px;
+  /* Makes the outermost animation container element positioned, so that its
+     contents are rendered over the main browser window in the Z order.
+     This is required by the animated event notification. */
   position: relative;
+  /* The selected tab may overlap #downloads-indicator-notification */
+  z-index: 5;
 }
 
 toolbar[iconsize="small"] > #downloads-button > #downloads-indicator-anchor {
@@ -61,6 +67,8 @@ toolbar[iconsize="large"] > #downloads-button[attention] > #downloads-indicator-
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
 }
 
 @keyframes downloadsIndicatorNotificationStartRight {
@@ -75,13 +83,13 @@ toolbar[iconsize="large"] > #downloads-button[attention] > #downloads-indicator-
   to   { opacity: 0; transform: translate(0) scale(1); }
 }
 
-#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
   animation-name: downloadsIndicatorNotificationStartRight;
   animation-duration: 1s;
 }
 
-#downloads-button[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
   animation-name: downloadsIndicatorNotificationStartLeft;
 }
 
@@ -91,7 +99,7 @@ toolbar[iconsize="large"] > #downloads-button[attention] > #downloads-indicator-
   to   { opacity: 0; transform: scale(8); }
 }
 
-#downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
   animation-name: downloadsIndicatorNotificationFinish;
   animation-duration: 1s;

browser/themes/osx/downloads/indicator.css

@@ -7,12 +7,19 @@
 #downloads-indicator-anchor {
   min-width: 20px;
   min-height: 20px;
-  /* Makes the outermost stack element positioned, so that its contents are
-     rendered over the main browser window in the Z order.  This is required by
-     the animated event notification. */
+}
+
+#downloads-animation-container {
+  min-height: 1px;
+  min-width: 1px;
+  height: 1px;
+  margin-bottom: -1px;
+  /* Makes the outermost animation container element positioned, so that its
+     contents are rendered over the main browser window in the Z order.
+     This is required by the animated event notification. */
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
-  z-index: 1;
+  z-index: 5;
 }
 
 /*** Main indicator icon ***/
@@ -71,6 +78,8 @@
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
 }
 
 @keyframes downloadsIndicatorNotificationStartRight {
@@ -85,19 +94,19 @@
   to   { opacity: 0; transform: translate(0) scale(1); }
 }
 
-#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
   animation-name: downloadsIndicatorNotificationStartRight;
   animation-duration: 1s;
 }
 
 @media (min-resolution: 2dppx) {
-  #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+  #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
     background-image: url("chrome://browser/skin/downloads/download-notification-start@2x.png");
   }
 }
 
-#downloads-button[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
   animation-name: downloadsIndicatorNotificationStartLeft;
 }
 
@@ -107,14 +116,14 @@
   to   { opacity: 0; transform: scale(8); }
 }
 
-#downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
   animation-name: downloadsIndicatorNotificationFinish;
   animation-duration: 1s;
 }
 
 @media (min-resolution: 2dppx) {
-  #downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+  #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
     background-image: url("chrome://browser/skin/downloads/download-notification-finish@2x.png");
   }
 }

browser/themes/windows/downloads/indicator.css

@@ -4,11 +4,17 @@
 
 /*** Status and progress indicator ***/
 
-#downloads-indicator-anchor {
-  /* Makes the outermost stack element positioned, so that its contents are
-     rendered over the main browser window in the Z order.  This is required by
-     the animated event notification. */
+#downloads-animation-container {
+  min-height: 1px;
+  min-width: 1px;
+  height: 1px;
+  margin-bottom: -1px;
+  /* Makes the outermost animation container element positioned, so that its
+     contents are rendered over the main browser window in the Z order.
+     This is required by the animated event notification. */
   position: relative;
+  /* The selected tab may overlap #downloads-indicator-notification */
+  z-index: 5;
 }
 
 /*** Main indicator icon ***/
@@ -49,6 +55,8 @@
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
 }
 
 @keyframes downloadsIndicatorNotificationStartRight {
@@ -63,13 +71,13 @@
   to   { opacity: 0; transform: translate(0) scale(1); }
 }
 
-#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
   animation-name: downloadsIndicatorNotificationStartRight;
   animation-duration: 1s;
 }
 
-#downloads-button[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
   animation-name: downloadsIndicatorNotificationStartLeft;
 }
 
@@ -79,7 +87,7 @@
   to   { opacity: 0; transform: scale(8); }
 }
 
-#downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
+#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
   background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
   animation-name: downloadsIndicatorNotificationFinish;
   animation-duration: 1s;