Bug 1375309 - New download progressbar, split out the arrow and progressbar in the indicatorOverlay for individual animation. r?paolo
MozReview-Commit-ID: ABk4egLn0aY
--- 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)