--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -22,16 +22,18 @@
  * Builds and updates the actual downloads status widget, responding to changes
  * in the global status data, or provides a neutral view if the indicator is
  * removed from the toolbars and only used as a temporary anchor.  In addition,
  * handles the user interaction events raised by the widget.
  */
 
 "use strict";
 
+Components.utils.import("resource://gre/modules/AppConstants.jsm");
+
 // DownloadsButton
 
 /**
  * Main entry point for the downloads indicator.  Depending on how the toolbars
  * have been customized, this object determines if we should show a fully
  * functional indicator, a placeholder used during customization and in the
  * customization palette, or a neutral view as a temporary anchor for the
  * downloads panel.
@@ -287,16 +289,45 @@ const DownloadsIndicatorView = {
    */
   _isAncestorPanelOpen(aNode) {
     while (aNode && aNode.localName != "panel") {
       aNode = aNode.parentNode;
     }
     return aNode && aNode.state == "open";
   },
 
+  _getPositioningCoordsForRects(rect, referenceRect, edge={}) {
+      let heightDiff = referenceRect.height - rect.height;
+      let widthDiff = referenceRect.width - rect.width;
+      // default to coords at the center/center
+      let coords = {
+        x: referenceRect.left + widthDiff / 2,
+        y: referenceRect.top + heightDiff / 2
+      }
+
+      if (edge.top) {
+        coords.y -= heightDiff / 2;
+      } else if (edge.bottom) {
+        coords.y += heightDiff / 2;
+      }
+      if (edge.left) {
+        coords.x -= widthDiff / 2;
+      } else if (edge.right) {
+        coords.x += widthDiff / 2;
+      }
+      if (edge.yOffset) {
+        coords.y += edge.yOffset;
+      }
+      if (edge.xOffset) {
+        coords.x += edge.xOffset;
+      }
+
+      return coords;
+  },
+
   /**
    * If the status indicator is visible in its assigned position, shows for a
    * brief time a visual notification of a relevant event, like a new download.
    *
    * @param aType
    *        Set to "start" for new downloads, "finish" for completed downloads.
    */
   showEventNotification(aType) {
@@ -336,36 +367,50 @@ const DownloadsIndicatorView = {
       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.
+    // Note: no notifier animation for download finished in Photon
     let notifier = this.notifier;
-    if (notifier.style.transform == "") {
+    if (notifier.style.transform == "" &&
+        !(AppConstants.MOZ_PHOTON_ANIMATIONS && aType == "finish")) {
       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 + ")";
+      let coords;
+      if (AppConstants.MOZ_PHOTON_ANIMATIONS) {
+        coords = this._getPositioningCoordsForRects(notifierRect, anchorRect, {
+          bottom: true
+        });
+      } else {
+        // ce
+        coords = this._getPositioningCoordsForRects(notifierRect, anchorRect);
+      }
+      let transform = `translate(${coords.x}px, ${coords.y}px)`;
+      notifier.style.transform = transform;
     }
     notifier.setAttribute("notification", aType);
     anchor.setAttribute("notification", aType);
+
+    let animationDuration;
+    // This value is determined by the overall duration of animation in CSS.
+    if (AppConstants.MOZ_PHOTON_ANIMATIONS) {
+      animationDuration = aType == "start" ? 760: 570;
+    } else {
+      animationDuration = 2000;
+    }
+
     this._notificationTimeout = setTimeout(() => {
       anchor.removeAttribute("notification");
       notifier.removeAttribute("notification");
       notifier.style.transform = "";
-      // This value is determined by the overall duration of animation in CSS.
-    }, 2000);
+    }, animationDuration);
   },
 
   // Callback functions from DownloadsIndicatorData
 
   /**
    * Indicates whether the indicator should be shown because there are some
    * downloads to be displayed.
    */

--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -36,18 +36,20 @@ browser.jar:
   skin/classic/browser/customizableui/background-noise-toolbar.png  (customizableui/background-noise-toolbar.png)
   skin/classic/browser/customizableui/customizeMode-gridTexture.png  (customizableui/customizeMode-gridTexture.png)
   skin/classic/browser/customizableui/customizeMode-separatorHorizontal.png  (customizableui/customizeMode-separatorHorizontal.png)
   skin/classic/browser/customizableui/customizeMode-separatorVertical.png  (customizableui/customizeMode-separatorVertical.png)
 #endif
 * skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
   skin/classic/browser/downloads/download-glow-menuPanel.png (downloads/download-glow-menuPanel.png)
+#ifndef MOZ_PHOTON_ANIMATIONS
   skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)
   skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png)
+#endif
 * skin/classic/browser/downloads/downloads.css        (downloads/downloads.css)
   skin/classic/browser/feeds/feedIcon.png             (feeds/feedIcon.png)
   skin/classic/browser/feeds/feedIcon16.png           (feeds/feedIcon16.png)
   skin/classic/browser/feeds/subscribe.css            (feeds/subscribe.css)
 * skin/classic/browser/newtab/newTab.css              (newtab/newTab.css)
   skin/classic/browser/places/bookmarksMenu.png       (places/bookmarksMenu.png)
   skin/classic/browser/places/bookmarksToolbar.png    (places/bookmarksToolbar.png)
   skin/classic/browser/places/bookmarksToolbar-menuPanel.png (places/bookmarksToolbar-menuPanel.png)

--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -55,20 +55,22 @@ browser.jar:
   skin/classic/browser/customizableui/customizeMode-gridTexture.png  (customizableui/customizeMode-gridTexture.png)
   skin/classic/browser/customizableui/customizeMode-separatorHorizontal.png  (customizableui/customizeMode-separatorHorizontal.png)
   skin/classic/browser/customizableui/customizeMode-separatorVertical.png  (customizableui/customizeMode-separatorVertical.png)
 #endif
 * skin/classic/browser/customizableui/panelUI.css    (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay.css)
   skin/classic/browser/downloads/download-glow-menuPanel.png (downloads/download-glow-menuPanel.png)
   skin/classic/browser/downloads/download-glow-menuPanel@2x.png (downloads/download-glow-menuPanel@2x.png)
+#ifndef MOZ_PHOTON_ANIMATIONS
   skin/classic/browser/downloads/download-notification-finish.png  (downloads/download-notification-finish.png)
   skin/classic/browser/downloads/download-notification-finish@2x.png  (downloads/download-notification-finish@2x.png)
   skin/classic/browser/downloads/download-notification-start.png  (downloads/download-notification-start.png)
   skin/classic/browser/downloads/download-notification-start@2x.png  (downloads/download-notification-start@2x.png)
+#endif
 * skin/classic/browser/downloads/downloads.css              (downloads/downloads.css)
   skin/classic/browser/feeds/subscribe.css                  (feeds/subscribe.css)
   skin/classic/browser/feeds/feedIcon.png                   (feeds/feedIcon.png)
   skin/classic/browser/feeds/feedIcon16.png                 (feeds/feedIcon16.png)
 * skin/classic/browser/newtab/newTab.css                    (newtab/newTab.css)
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png

--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -153,90 +153,179 @@ toolbar[brighttext] #downloads-indicator
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
   filter: none;
 }
 
 /*** Download notifications ***/
 
 %ifdef MOZ_PHOTON_ANIMATIONS
-#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon
+#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
+  animation-name: downloadsIndicatorStartDip;
+  /* Upon changing the duration_delay below, please keep the delay time of
+     setTimeout() identical in indicator.js for this animation.
+
+     Timing here needs to align with the animation on #downloads-indicator-notification
+  */
+  animation-duration: 360ms;
+  animation-delay: 400ms;
+  animation-iteration-count: 1;
+}
 %else
-#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-progress-outer
-%endif
-{
+#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
   animation-name: downloadsIndicatorStartJump;
   /* Upon changing the overall duration below, please keep the delay time of
      setTimeout() identical in indicator.js for this animation. */
   animation-duration: 0.5s;
   animation-delay: 1s;
   animation-iteration-count: 2;
 }
+%endif
+
+%ifdef MOZ_PHOTON_ANIMATIONS
+@keyframes downloadsIndicatorStartDip {
+  0% {
+    transform: translateY(0);
+    animation-timing-function: linear;
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: ease-out;
+  }
+  88% {
+    transform: translateY(3px);
+    animation-timing-function: ease-in;
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes downloadsIndicatorFinishPulse {
+  from  { transform: scale(1); }
+  37.5% { transform: scale(1.4); animation-timing-function: ease-out; }
+  to    { transform: scale(1); animation-timing-function: ease-in; }
+}
+%else
 
 @keyframes downloadsIndicatorStartJump {
   0% {
     transform: translateY(0);
     animation-timing-function: ease-out;
   }
   50% {
     transform: translateY(-3px);
     animation-timing-function: ease-in;
   }
   100% {
     transform: translateY(0);
   }
 }
+%endif
+
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-icon {
+  animation-name: downloadsIndicatorFinishPulse;
+  animation-delay: : 250ms;
+  animation-duration: 320ms;
+  animation-iteration-count: 2;
+}
+%endif
 
 #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;
 }
 
+%ifdef MOZ_PHOTON_ANIMATIONS
+/* download start animation */
+#downloads-notification-anchor {
+  width: 42px;
+  /* add offset to background image height to align the bottom edges of animation and icon
+     this is the distance between icon bottom and toolbar button bottom edges */
+  min-height: 66px;
+  overflow: hidden;
+}
+%endif
+
 #downloads-indicator-notification {
   opacity: 0;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  min-width: 1344px;
+  height: 55px;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
+%else
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
+%endif
 }
 
+%ifdef MOZ_PHOTON_ANIMATIONS
+@keyframes downloadsIndicatorNotificationStart {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-1302px);
+  }
+}
+%else
 @keyframes downloadsIndicatorNotificationStartRight {
   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
   20%  { opacity: .85; animation-timing-function: ease-out; }
   to   { opacity: 0; transform: translate(0) scale(1); }
 }
 
 @keyframes downloadsIndicatorNotificationStartLeft {
   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
   20%  { opacity: .85; animation-timing-function: ease-out; }
   to   { opacity: 0; transform: translate(0) scale(1); }
 }
+%endif
 
+%ifndef MOZ_PHOTON_ANIMATIONS
 @keyframes downloadsIndicatorNotificationFinish {
   from { opacity: 0; transform: scale(1); }
   20%  { opacity: .65; animation-timing-function: ease-in; }
   to   { opacity: 0; transform: scale(8); }
 }
+%endif
 
+%ifdef MOZ_PHOTON_ANIMATIONS
 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
+%ifdef MOZ_PHOTON_ANIMATIONS
+  opacity: 1;
+  background: url("chrome://browser/skin/downloads/notification-start-animation.svg") 0 0 no-repeat;
+  transform: translateX(0px);
+  animation-name: downloadsIndicatorNotificationStart;
+  animation-duration: 540ms;
+  animation-delay: 64ms;
+  animation-timing-function: steps(31);
+%else
   background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
   animation-name: downloadsIndicatorNotificationStartRight;
   animation-duration: 1s;
+%endif
 }
 
+%ifndef MOZ_PHOTON_ANIMATIONS
 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
   animation-name: downloadsIndicatorNotificationStartLeft;
 }
 
 #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;
 }
+%endif

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/notification-start-animation.svg
@@ -0,0 +1,95 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="1344" height="55">
+  <svg width="42" height="55"/>
+  <svg width="42" height="55" x="42"/>
+  <svg width="42" height="55" x="84">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" opacity=".333" transform="translate(21.018 22.854) scale(3.50932)"/>
+  </svg>
+  <svg width="42" height="55" x="126">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" opacity=".667" transform="translate(21.017 23.815) scale(3.41419)"/>
+  </svg>
+  <svg width="42" height="55" x="168">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.017 24.798) scale(3.31695)"/>
+  </svg>
+  <svg width="42" height="55" x="210">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.016 25.793) scale(3.21855)"/>
+  </svg>
+  <svg width="42" height="55" x="252">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.016 26.795) scale(3.11952)"/>
+  </svg>
+  <svg width="42" height="55" x="294">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.015 27.8) scale(3.02017)"/>
+  </svg>
+  <svg width="42" height="55" x="336">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.015 28.805) scale(2.92072)"/>
+  </svg>
+  <svg width="42" height="55" x="378">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.014 29.81) scale(2.82134)"/>
+  </svg>
+  <svg width="42" height="55" x="420">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.014 30.813) scale(2.72216)"/>
+  </svg>
+  <svg width="42" height="55" x="462">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.013 31.813) scale(2.6233)"/>
+  </svg>
+  <svg width="42" height="55" x="504">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.013 32.809) scale(2.52484)"/>
+  </svg>
+  <svg width="42" height="55" x="546">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.012 33.799) scale(2.42691)"/>
+  </svg>
+  <svg width="42" height="55" x="588">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.012 34.783) scale(2.32959)"/>
+  </svg>
+  <svg width="42" height="55" x="630">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.011 35.76) scale(2.23297)"/>
+  </svg>
+  <svg width="42" height="55" x="672">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.01 36.727) scale(2.13718)"/>
+  </svg>
+  <svg width="42" height="55" x="714">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.01 37.686) scale(2.0423)"/>
+  </svg>
+  <svg width="42" height="55" x="756">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.01 38.634) scale(1.94849)"/>
+  </svg>
+  <svg width="42" height="55" x="798">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.01 39.57) scale(1.85587)"/>
+  </svg>
+  <svg width="42" height="55" x="840">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.009 40.491) scale(1.76462)"/>
+  </svg>
+  <svg width="42" height="55" x="882">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.008 41.397) scale(1.67492)"/>
+  </svg>
+  <svg width="42" height="55" x="924">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.008 42.284) scale(1.58703)"/>
+  </svg>
+  <svg width="42" height="55" x="966">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.008 43.15) scale(1.50124)"/>
+  </svg>
+  <svg width="42" height="55" x="1008">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.007 43.99) scale(1.41793)"/>
+  </svg>
+  <svg width="42" height="55" x="1050">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.007 44.8) scale(1.33758)"/>
+  </svg>
+  <svg width="42" height="55" x="1092">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.006 45.573) scale(1.26087)"/>
+  </svg>
+  <svg width="42" height="55" x="1134">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.006 46.299) scale(1.18877)"/>
+  </svg>
+  <svg width="42" height="55" x="1176">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.006 46.963) scale(1.1227)"/>
+  </svg>
+  <svg width="42" height="55" x="1218">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.005 47.541) scale(1.0651)"/>
+  </svg>
+  <svg width="42" height="55" x="1260">
+    <path fill="context-fill" fill-opacity=".35" d="M-0.712 6.158a1 1 0 0 0 1.414 0l5 -5a1 1 0 0 0 -1.414 -1.413l-3.293 3.293v-8.586a1 1 0 0 0 -2 0v8.586l-3.293 -3.293a1 1 0 0 0 -1.414 0.025a0.999 0.999 0 0 0 0 1.388l5 5z" transform="translate(21.005 47.988) scale(1.02049)"/>
+  </svg>
+  <svg width="42" height="55" x="1302"/>
+</svg>

--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -59,16 +59,19 @@
   skin/classic/browser/customizableui/whimsy.png               (../shared/customizableui/whimsy.png)
   skin/classic/browser/customizableui/whimsy@2x.png            (../shared/customizableui/whimsy@2x.png)
   skin/classic/browser/downloads/contentAreaDownloadsView.css  (../shared/downloads/contentAreaDownloadsView.css)
   skin/classic/browser/downloads/download-blocked.svg          (../shared/downloads/download-blocked.svg)
   skin/classic/browser/downloads/download-summary.svg          (../shared/downloads/download-summary.svg)
 #ifdef MOZ_PHOTON_THEME
   skin/classic/browser/downloads/download-icons.svg            (../shared/downloads/download-icons.svg)
 #endif
+#ifdef MOZ_PHOTON_ANIMATIONS
+  skin/classic/browser/downloads/notification-start-animation.svg  (../shared/downloads/notification-start-animation.svg)
+#endif
   skin/classic/browser/drm-icon.svg                            (../shared/drm-icon.svg)
   skin/classic/browser/fullscreen/insecure.svg                 (../shared/fullscreen/insecure.svg)
   skin/classic/browser/fullscreen/secure.svg                   (../shared/fullscreen/secure.svg)
   skin/classic/browser/connection-secure.svg                   (../shared/identity-block/connection-secure.svg)
   skin/classic/browser/connection-mixed-passive-loaded.svg     (../shared/identity-block/connection-mixed-passive-loaded.svg)
   skin/classic/browser/connection-mixed-active-loaded.svg      (../shared/identity-block/connection-mixed-active-loaded.svg)
   skin/classic/browser/identity-icon.svg                       (../shared/identity-block/identity-icon.svg)
   skin/classic/browser/identity-icon-notice.svg                (../shared/identity-block/identity-icon-notice.svg)

--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -60,18 +60,20 @@ browser.jar:
   skin/classic/browser/customizableui/customizeMode-separatorHorizontal.png  (customizableui/customizeMode-separatorHorizontal.png)
   skin/classic/browser/customizableui/customizeMode-separatorVertical.png  (customizableui/customizeMode-separatorVertical.png)
 #endif
   skin/classic/browser/customizableui/menu-arrow.svg           (customizableui/menu-arrow.svg)
 * skin/classic/browser/customizableui/panelUI.css       (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
   skin/classic/browser/downloads/download-glow-menuPanel.png   (downloads/download-glow-menuPanel.png)
   skin/classic/browser/downloads/download-glow-menuPanel-win7.png   (downloads/download-glow-menuPanel-win7.png)
+#ifndef MOZ_PHOTON_ANIMATIONS
   skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)
   skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png)
+#endif
 * skin/classic/browser/downloads/downloads.css                 (downloads/downloads.css)
   skin/classic/browser/feeds/feedIcon.png                      (feeds/feedIcon.png)
   skin/classic/browser/feeds/feedIcon16.png                    (feeds/feedIcon16.png)
   skin/classic/browser/feeds/subscribe.css                     (feeds/subscribe.css)
 * skin/classic/browser/newtab/newTab.css                       (newtab/newTab.css)
   skin/classic/browser/places/places.css                       (places/places.css)
 * skin/classic/browser/places/organizer.css                    (places/organizer.css)
   skin/classic/browser/places/query.png                        (places/query.png)