Bug 1270012 - Show a bouncing animation for toolbar download icon whenever a download is started. r=paolo
MozReview-Commit-ID: GCDhtYCVC6
--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -353,20 +353,23 @@ const DownloadsIndicatorView = {
let leftDiff = anchorRect.left - notifierRect.left;
let heightDiff = anchorRect.height - notifierRect.height;
let widthDiff = anchorRect.width - notifierRect.width;
let translateX = (leftDiff + .5 * widthDiff) + "px";
let translateY = (topDiff + .5 * heightDiff) + "px";
notifier.style.transform = "translate(" + translateX + ", " + translateY + ")";
}
notifier.setAttribute("notification", aType);
+ anchor.setAttribute("notification", aType);
this._notificationTimeout = setTimeout(() => {
+ anchor.removeAttribute("notification");
notifier.removeAttribute("notification");
notifier.style.transform = '';
- }, 1000);
+ // This value is determined by the overall duration of animation in CSS.
+ }, 2000);
},
//////////////////////////////////////////////////////////////////////////////
//// Callback functions from DownloadsIndicatorData
/**
* Indicates whether the indicator should be shown because there are some
* downloads to be displayed.
--- a/browser/themes/linux/downloads/indicator.css
+++ b/browser/themes/linux/downloads/indicator.css
@@ -1,12 +1,14 @@
/* 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/. */
+%include ../../shared/downloads/indicator.inc.css
+
/*** Status and progress indicator ***/
#downloads-animation-container {
min-height: 1px;
min-width: 1px;
height: 1px;
margin-bottom: -1px;
/* Makes the outermost animation container element positioned, so that its
--- a/browser/themes/osx/downloads/indicator.css
+++ b/browser/themes/osx/downloads/indicator.css
@@ -1,12 +1,14 @@
/* 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/. */
+%include ../../shared/downloads/indicator.inc.css
+
/*** Status and progress indicator ***/
#downloads-indicator-anchor {
min-width: 18px;
min-height: 18px;
}
#downloads-animation-container {
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -0,0 +1,26 @@
+/* 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/. */
+
+@keyframes downloadsIndicatorStartJump {
+ 0% {
+ transform: translateY(0);
+ animation-timing-function: ease-out;
+ }
+ 50% {
+ transform: translateY(-3px);
+ animation-timing-function: ease-in;
+ }
+ 100% {
+ transform: translateY(0);
+ }
+}
+
+#downloads-button[notification="start"] > #downloads-indicator-anchor {
+ 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;
+}
--- a/browser/themes/windows/downloads/indicator.css
+++ b/browser/themes/windows/downloads/indicator.css
@@ -1,12 +1,14 @@
/* 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/. */
+%include ../../shared/downloads/indicator.inc.css
+
/*** Status and progress indicator ***/
#downloads-animation-container {
min-height: 1px;
min-width: 1px;
height: 1px;
margin-bottom: -1px;
/* Makes the outermost animation container element positioned, so that its