From 97c128c536f3bc2231349a2c2ead28b16faee115 Mon Sep 17 00:00:00 2001 From: Sam Foster Date: Thu, 13 Jul 2017 10:59:59 -0700 Subject: [PATCH] Bug 1376519 - Photon download notifications. r=Paolo * Filmstrip style svg animation for start download notification, vertically centered to allow for variable-height toolbar buttons * Simultaneous identifer "dip" animation on the icon for download start * Identifier icon bounce animation for download finish (no notification animation in the #downloads-animation-container) * Always measure the anchor element as toolbarheight may change in a session (e.g. switching to compact mode) * Conditionally include the start/finish pngs for non-Photon builds MozReview-Commit-ID: LJF6iV9HiJi --HG-- extra : rebase_source : 4af001e78fef409ff7ff6b273bc426c438f25de3 --- .../components/downloads/content/indicator.js | 22 ++++- browser/themes/linux/jar.mn | 2 + browser/themes/osx/downloads/indicator.css | 2 + browser/themes/osx/jar.mn | 2 + .../themes/shared/downloads/indicator.inc.css | 99 ++++++++++++++++++- .../notification-start-animation.svg | 95 ++++++++++++++++++ browser/themes/shared/jar.inc.mn | 3 + browser/themes/windows/jar.mn | 2 + 8 files changed, 219 insertions(+), 8 deletions(-) create mode 100644 browser/themes/shared/downloads/notification-start-animation.svg diff --git a/browser/components/downloads/content/indicator.js b/browser/components/downloads/content/indicator.js index 57846da41eb1..33857fe1225e 100644 --- a/browser/components/downloads/content/indicator.js +++ b/browser/components/downloads/content/indicator.js @@ -27,6 +27,8 @@ "use strict"; +Components.utils.import("resource://gre/modules/AppConstants.jsm"); + // DownloadsButton /** @@ -341,8 +343,12 @@ const DownloadsIndicatorView = { // 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 (aType == "start" || !AppConstants.MOZ_PHOTON_ANIMATIONS) { + // the anchor height may vary if font-size is changed or + // compact/tablet mode is selected so recalculate this each time let anchorRect = anchor.getBoundingClientRect(); let notifierRect = notifier.getBoundingClientRect(); let topDiff = anchorRect.top - notifierRect.top; @@ -352,15 +358,23 @@ const DownloadsIndicatorView = { let translateX = (leftDiff + .5 * widthDiff) + "px"; let translateY = (topDiff + .5 * heightDiff) + "px"; notifier.style.transform = "translate(" + translateX + ", " + translateY + ")"; + notifier.setAttribute("notification", aType); } - 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 diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn index 7184e14be71c..bc123204459f 100644 --- a/browser/themes/linux/jar.mn +++ b/browser/themes/linux/jar.mn @@ -41,8 +41,10 @@ browser.jar: * 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) diff --git a/browser/themes/osx/downloads/indicator.css b/browser/themes/osx/downloads/indicator.css index 3cb43e4f5929..ff90dd44eb19 100644 --- a/browser/themes/osx/downloads/indicator.css +++ b/browser/themes/osx/downloads/indicator.css @@ -12,6 +12,7 @@ } +%ifndef MOZ_PHOTON_ANIMATIONS @media (min-resolution: 2dppx) { #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification { background-image: url("chrome://browser/skin/downloads/download-notification-start@2x.png"); @@ -24,3 +25,4 @@ background-image: url("chrome://browser/skin/downloads/download-notification-finish@2x.png"); } } +%endif diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn index afa0d6c89d11..0dc423b84b96 100644 --- a/browser/themes/osx/jar.mn +++ b/browser/themes/osx/jar.mn @@ -60,10 +60,12 @@ browser.jar: * 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) diff --git a/browser/themes/shared/downloads/indicator.inc.css b/browser/themes/shared/downloads/indicator.inc.css index 8e7f167f7f7f..028cb2f8e741 100644 --- a/browser/themes/shared/downloads/indicator.inc.css +++ b/browser/themes/shared/downloads/indicator.inc.css @@ -158,11 +158,19 @@ toolbar[brighttext] #downloads-indicator-progress-inner { /*** 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. */ @@ -170,6 +178,33 @@ toolbar[brighttext] #downloads-indicator-progress-inner { 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-out; + } + 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% { @@ -184,6 +219,16 @@ toolbar[brighttext] #downloads-indicator-progress-inner { 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; @@ -198,15 +243,48 @@ toolbar[brighttext] #downloads-indicator-progress-inner { z-index: 5; } +%ifdef MOZ_PHOTON_ANIMATIONS +/* download start animation */ + +#downloads-notification-anchor { + width: 42px; + /* Height is equal to height of each frame in the SVG animation + Use of min/max-height instead of height is to avoid an + assertion for `inline-size less than zero..` (bug 1379332). */ + min-height: 98px; + max-height: 98px; + overflow: hidden; +} +%endif + #downloads-indicator-notification { opacity: 0; +%ifdef MOZ_PHOTON_ANIMATIONS + min-width: 1344px; + height: 98px; /* Height is equal to height of each frame in the SVG animation */ + -moz-context-properties: fill; + /* Intentionally not using --toolbarbutton-icon-fill to get better contrast/balance + across default, dark and light themes */ + fill: #737373; +%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; } @@ -224,13 +302,25 @@ toolbar[brighttext] #downloads-indicator-progress-inner { 20% { opacity: .65; animation-timing-function: ease-in; } to { opacity: 0; transform: scale(8); } } +%endif #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 center 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; } @@ -240,3 +330,4 @@ toolbar[brighttext] #downloads-indicator-progress-inner { animation-name: downloadsIndicatorNotificationFinish; animation-duration: 1s; } +%endif diff --git a/browser/themes/shared/downloads/notification-start-animation.svg b/browser/themes/shared/downloads/notification-start-animation.svg new file mode 100644 index 000000000000..f99ab334fc6e --- /dev/null +++ b/browser/themes/shared/downloads/notification-start-animation.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn index 7bb9e28e8eec..7a026026321f 100644 --- a/browser/themes/shared/jar.inc.mn +++ b/browser/themes/shared/jar.inc.mn @@ -63,6 +63,9 @@ 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) diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn index 78c108d6eae4..79c6ac32ac31 100644 --- a/browser/themes/windows/jar.mn +++ b/browser/themes/windows/jar.mn @@ -65,8 +65,10 @@ browser.jar: * 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)