Bug 1375309 - New download progressbar, split out the arrow and progressbar in the indicatorOverlay for individual animation. r?paolo draft
authorSam Foster <sfoster@mozilla.com>
Tue, 27 Jun 2017 15:53:23 -0700
changeset 601170 5457ab188355d3c052dd834c357b79a204fc03b7
parent 601098 36b40e7e87ebc87090e4a93bc314c27a6a542160
child 635183 fd7766014b9612da98cd1ae238552b613fd1eb8f
push id65978
push userbmo:sfoster@mozilla.com
push dateWed, 28 Jun 2017 06:59:13 +0000
reviewerspaolo
bugs1375309
milestone56.0a1
Bug 1375309 - New download progressbar, split out the arrow and progressbar in the indicatorOverlay for individual animation. r?paolo MozReview-Commit-ID: ABk4egLn0aY
browser/components/downloads/content/indicator.js
browser/components/downloads/content/indicatorOverlay.xul
browser/components/downloads/jar.mn
browser/themes/shared/downloads/download-bar-animation.svg
browser/themes/shared/downloads/download-icon-no-bar.svg
browser/themes/shared/downloads/indicator.inc.css
browser/themes/shared/jar.inc.mn
--- 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.
@@ -518,18 +520,22 @@ const DownloadsIndicatorView = {
                                .forWindow(window);
     if (widget.overflowed) {
       return widget.anchor;
     }
     return document.getElementById("downloads-indicator-anchor");
   },
 
   get _progressIcon() {
-    return this.__progressIcon ||
-      (this.__progressIcon = document.getElementById("downloads-indicator-progress-icon"));
+    if (!this.__progressIcon) {
+      this.__progressIcon = AppConstants.MOZ_PHOTON_ANIMATIONS ?
+        document.getElementById("downloads-indicator-progress-bar") :
+        document.getElementById("downloads-indicator-progress-icon");
+    }
+    return this.__progressIcon;
   },
 
   get notifier() {
     return this._notifier ||
       (this._notifier = document.getElementById("downloads-notification-anchor"));
   },
 
   _onCustomizedAway() {
--- a/browser/components/downloads/content/indicatorOverlay.xul
+++ b/browser/components/downloads/content/indicatorOverlay.xul
@@ -22,12 +22,15 @@
     <!-- The panel's anchor area is smaller than the outer button, but must
          always be visible and must not move or resize when the indicator
          state changes, otherwise the panel could change its position or lose
          its arrow unexpectedly. -->
     <stack id="downloads-indicator-anchor"
            consumeanchor="downloads-button">
       <stack id="downloads-indicator-icon">
         <vbox id="downloads-indicator-progress-icon"/>
+#ifdef MOZ_PHOTON_ANIMATIONS
+        <vbox id="downloads-indicator-progress-bar"/>
+#endif
       </stack>
     </stack>
   </toolbarbutton>
 </overlay>
--- a/browser/components/downloads/jar.mn
+++ b/browser/components/downloads/jar.mn
@@ -3,14 +3,14 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
 *       content/browser/downloads/download.xml           (content/download.xml)
         content/browser/downloads/downloads.css          (content/downloads.css)
         content/browser/downloads/downloads.js           (content/downloads.js)
 *       content/browser/downloads/downloadsOverlay.xul   (content/downloadsOverlay.xul)
         content/browser/downloads/indicator.js           (content/indicator.js)
-        content/browser/downloads/indicatorOverlay.xul   (content/indicatorOverlay.xul)
+*       content/browser/downloads/indicatorOverlay.xul   (content/indicatorOverlay.xul)
 *       content/browser/downloads/allDownloadsViewOverlay.xul (content/allDownloadsViewOverlay.xul)
         content/browser/downloads/allDownloadsViewOverlay.js  (content/allDownloadsViewOverlay.js)
 *       content/browser/downloads/contentAreaDownloadsView.xul (content/contentAreaDownloadsView.xul)
         content/browser/downloads/contentAreaDownloadsView.js  (content/contentAreaDownloadsView.js)
         content/browser/downloads/contentAreaDownloadsView.css (content/contentAreaDownloadsView.css)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/download-bar-animation.svg
@@ -0,0 +1,576 @@
+<!-- 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="816" height="3">
+  <svg width="16" height="3" x="0">
+    <line stroke-linecap="round"
+          x1="3" y1="1.25" x2="13" y2="1.25"
+          stroke="context-fill" stroke-width="2.5"/>
+  </svg>
+  <svg width="16" height="3" x="16">
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M2 14v2s0 0 0 0v-2s0 0 0 0"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#a)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="32">
+    <defs>
+      <clipPath id="b">
+        <path fill="#fff" d="M2 14v2h.24v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#b)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="48">
+    <defs>
+      <clipPath id="c">
+        <path fill="#fff" d="M2 14v2h.48v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#c)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="64">
+    <defs>
+      <clipPath id="d">
+        <path fill="#fff" d="M2 14v2h.72v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#d)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="80">
+    <defs>
+      <clipPath id="e">
+        <path fill="#fff" d="M2 14v2h.96v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#e)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="96">
+    <defs>
+      <clipPath id="f">
+        <path fill="#fff" d="M2 14v2h1.2v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#f)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="112">
+    <defs>
+      <clipPath id="g">
+        <path fill="#fff" d="M2 14v2h1.44v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#g)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="128">
+    <defs>
+      <clipPath id="h">
+        <path fill="#fff" d="M2 14v2h1.68v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#h)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="144">
+    <defs>
+      <clipPath id="i">
+        <path fill="#fff" d="M2 14v2h1.92v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#i)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="160">
+    <defs>
+      <clipPath id="j">
+        <path fill="#fff" d="M2 14v2h2.16v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#j)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="176">
+    <defs>
+      <clipPath id="k">
+        <path fill="#fff" d="M2 14v2h2.4v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#k)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="192">
+    <defs>
+      <clipPath id="l">
+        <path fill="#fff" d="M2 14v2h2.64v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#l)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="208">
+    <defs>
+      <clipPath id="m">
+        <path fill="#fff" d="M2 14v2h2.88v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#m)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="224">
+    <defs>
+      <clipPath id="n">
+        <path fill="#fff" d="M2 14v2h3.12v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#n)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="240">
+    <defs>
+      <clipPath id="o">
+        <path fill="#fff" d="M2 14v2h3.36v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#o)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="256">
+    <defs>
+      <clipPath id="p">
+        <path fill="#fff" d="M2 14v2h3.6v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#p)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="272">
+    <defs>
+      <clipPath id="q">
+        <path fill="#fff" d="M2 14v2h3.84v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#q)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="288">
+    <defs>
+      <clipPath id="r">
+        <path fill="#fff" d="M2 14v2h4.08v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#r)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="304">
+    <defs>
+      <clipPath id="s">
+        <path fill="#fff" d="M2 14v2h4.32v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#s)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="320">
+    <defs>
+      <clipPath id="t">
+        <path fill="#fff" d="M2 14v2h4.56v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#t)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="336">
+    <defs>
+      <clipPath id="u">
+        <path fill="#fff" d="M2 14v2h4.8v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#u)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="352">
+    <defs>
+      <clipPath id="v">
+        <path fill="#fff" d="M2 14v2h5.04v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#v)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="368">
+    <defs>
+      <clipPath id="w">
+        <path fill="#fff" d="M2 14v2h5.28v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#w)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="384">
+    <defs>
+      <clipPath id="x">
+        <path fill="#fff" d="M2 14v2h5.52v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#x)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="400">
+    <defs>
+      <clipPath id="y">
+        <path fill="#fff" d="M2 14v2h5.76v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#y)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="416">
+    <defs>
+      <clipPath id="z">
+        <path fill="#fff" d="M2 14v2h6v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#z)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="432">
+    <defs>
+      <clipPath id="A">
+        <path fill="#fff" d="M2 14v2h6.24v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#A)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="448">
+    <defs>
+      <clipPath id="B">
+        <path fill="#fff" d="M2 14v2h6.48v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#B)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="464">
+    <defs>
+      <clipPath id="C">
+        <path fill="#fff" d="M2 14v2h6.72v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#C)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="480">
+    <defs>
+      <clipPath id="D">
+        <path fill="#fff" d="M2 14v2h6.96v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#D)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="496">
+    <defs>
+      <clipPath id="E">
+        <path fill="#fff" d="M2 14v2h7.2v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#E)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="512">
+    <defs>
+      <clipPath id="F">
+        <path fill="#fff" d="M2 14v2h7.44v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#F)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="528">
+    <defs>
+      <clipPath id="G">
+        <path fill="#fff" d="M2 14v2h7.68v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#G)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="544">
+    <defs>
+      <clipPath id="H">
+        <path fill="#fff" d="M2 14v2h7.92v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#H)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="560">
+    <defs>
+      <clipPath id="I">
+        <path fill="#fff" d="M2 14v2h8.16v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#I)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="576">
+    <defs>
+      <clipPath id="J">
+        <path fill="#fff" d="M2 14v2h8.4v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#J)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="592">
+    <defs>
+      <clipPath id="K">
+        <path fill="#fff" d="M2 14v2h8.64v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#K)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="608">
+    <defs>
+      <clipPath id="L">
+        <path fill="#fff" d="M2 14v2h8.88v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#L)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="624">
+    <defs>
+      <clipPath id="M">
+        <path fill="#fff" d="M2 14v2h9.12v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#M)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="640">
+    <defs>
+      <clipPath id="N">
+        <path fill="#fff" d="M2 14v2h9.36v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#N)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="656">
+    <defs>
+      <clipPath id="O">
+        <path fill="#fff" d="M2 14v2h9.6v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#O)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="672">
+    <defs>
+      <clipPath id="P">
+        <path fill="#fff" d="M2 14v2h9.84v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#P)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="688">
+    <defs>
+      <clipPath id="Q">
+        <path fill="#fff" d="M2 14v2h10.08v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#Q)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="704">
+    <defs>
+      <clipPath id="R">
+        <path fill="#fff" d="M2 14v2h10.32v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#R)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="720">
+    <defs>
+      <clipPath id="S">
+        <path fill="#fff" d="M2 14v2h10.56v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#S)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="736">
+    <defs>
+      <clipPath id="T">
+        <path fill="#fff" d="M2 14v2h10.8v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#T)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="752">
+    <defs>
+      <clipPath id="U">
+        <path fill="#fff" d="M2 14v2h11.04v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#U)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="768">
+    <defs>
+      <clipPath id="V">
+        <path fill="#fff" d="M2 14v2h11.28v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#V)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="784">
+    <defs>
+      <clipPath id="W">
+        <path fill="#fff" d="M2 14v2h11.52v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#W)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="800">
+    <defs>
+      <clipPath id="X">
+        <path fill="#fff" d="M2 14v2h11.76v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#X)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="816">
+    <defs>
+      <clipPath id="Y">
+        <path fill="#fff" d="M2 14v2h12v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#Y)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="832">
+    <defs>
+      <clipPath id="Z">
+        <path fill="#fff" d="M2 14v2s0 0 0 0v-2s0 0 0 0"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z" display="block"/>
+    <g clip-path="url(#Z)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/download-icon-no-bar.svg
@@ -0,0 +1,6 @@
+<!-- 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="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M7.293 12.725a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-1.414-1.413L9 9.605V1.019a1 1 0 0 0-2 0v8.586L3.707 6.312a1 1 0 0 0-1.414 1.413l5 5z"/>
+</svg>
--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -13,54 +13,118 @@
 }
 
 #downloads-indicator-anchor {
   min-width: 16px;
   min-height: 16px;
 }
 
 #downloads-button > #downloads-indicator-anchor > #downloads-indicator-icon {
+  width: 16px;
+  height: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  overflow: hidden;
+%else
   background: var(--downloads-indicator-image) center no-repeat;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill);
-  width: 16px;
-  height: 16px;
   background-size: 16px;
+%endif
 }
 
 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
   fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
   fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[attention="success"] {
   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
   -moz-image-region: auto;
 }
 
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button > #downloads-indicator-anchor > #downloads-indicator-icon > #downloads-indicator-progress-icon {
+  -moz-context-properties: fill;
+  background-image: url("chrome://browser/skin/downloads/download-icon-no-bar.svg");
+}
+
+#downloads-indicator-progress-bar {
+  min-width: 816px;
+  height: 3px;
+  margin-top: 14px;
+  background: url("chrome://browser/skin/downloads/download-bar-animation.svg") 0 0 no-repeat;
+  /* first frame matches the static icon */
+  transform: translateX(0px);
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
+  /* From javascript side we use animation delay from 0s to -100s to show
+   * corresponding frames needed for progress.
+   * animation-delay is set to a positive value to make nothing shown.
+   */
+  animation-play-state: paused;
+  animation-delay: 1s;
+  animation-duration: 101s;
+  animation-timing-function: steps(50);
+  animation-name: indicatorProgressBar;
+}
+
+#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-icon > #downloads-indicator-progress-bar {
+  fill: var(--toolbarbutton-icon-fill-attention);
+  transform: translateX(-16px);
+}
+#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon > #downloads-indicator-progress-bar {
+  fill: var(--toolbarbutton-icon-fill-attention);
+}
+
+toolbar[brighttext] #downloads-indicator-progress-bar {
+  animation-name: indicatorProgressBarDark;
+}
+
+@keyframes indicatorProgressBar {
+  from  { transform: translateX(-16px); }
+  to    { transform: translateX(-816px); }
+}
+@keyframes indicatorProgressBarDark {
+  0% {
+    transform: translateX(-16px);
+    filter: brightness(0.7);
+  }
+  100% {
+    transform: translateX(-816px);
+    filter: brightness(1);
+  }
+}
+
+/* Fill progressbar from right-left for RTL.
+   transform applied to the container as child's transform property is set from JS */
+#downloads-button > #downloads-indicator-anchor > #downloads-indicator-icon:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+%else
+
 #downloads-indicator-progress-icon {
   background: var(--downloads-indicator-image) bottom no-repeat;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
   background-size: 16px;
   margin-top: 16px;
   /* From javascript side we use animation delay from 0s to -100s to show
    * corresponding frames needed for progress.
    * animation-delay is set to a positive value to make nothing shown.
    */
   animation-play-state: paused;
   animation-delay: 1s;
   animation-duration: 100s;
   animation-timing-function: linear;
   animation-name: indicatorArrowProgress;
 }
-
 toolbar[brighttext] #downloads-indicator-progress-icon {
   animation-name: indicatorArrowProgressDark;
 }
 
 @keyframes indicatorArrowProgress {
   0% {
     margin-top: 12px;
     filter: brightness(1.2);
@@ -76,16 +140,17 @@ toolbar[brighttext] #downloads-indicator
     margin-top: 12px;
     filter: brightness(0.7);
   }
   100% {
     margin-top: 2px;
     filter: brightness(1);
   }
 }
+%endif
 
 /*** Status badges ***/
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;
   height: 8px;
   width: 8px;
@@ -155,16 +220,19 @@ toolbar[brighttext] #downloads-indicator
 
 #downloads-indicator-notification {
   opacity: 0;
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  overflow: hidden;
+%endif
 }
 
 @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); }
 }
 
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -48,16 +48,20 @@
   skin/classic/browser/customizableui/subView-arrow-back-inverted@2x.png  (../shared/customizableui/subView-arrow-back-inverted@2x.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl.png  (../shared/customizableui/subView-arrow-back-inverted-rtl.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl@2x.png  (../shared/customizableui/subView-arrow-back-inverted-rtl@2x.png)
   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_ANIMATIONS
+  skin/classic/browser/downloads/download-bar-animation.svg    (../shared/downloads/download-bar-animation.svg)
+  skin/classic/browser/downloads/download-icon-no-bar.svg      (../shared/downloads/download-icon-no-bar.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-hover.svg                 (../shared/identity-block/identity-icon-hover.svg)