Bug 1349406 - Avoid reflows for arrow-typed download indicators by using stack instead of position: absolute. r=paolo
MozReview-Commit-ID: KLsYueSWKId
--- a/browser/components/downloads/content/indicatorOverlay.xul
+++ b/browser/components/downloads/content/indicatorOverlay.xul
@@ -20,19 +20,19 @@
downloads-button. -->
<toolbarbutton id="downloads-button" indicator="true">
<!-- 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">
- <vbox id="downloads-indicator-icon">
+ <stack id="downloads-indicator-icon">
<vbox id="downloads-indicator-progress-icon"/>
- </vbox>
+ </stack>
<vbox id="downloads-indicator-progress-area" pack="center">
<description id="downloads-indicator-counter"/>
<progressmeter id="downloads-indicator-progress" class="plain"
min="0" max="100"/>
</vbox>
</stack>
</toolbarbutton>
</overlay>
--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -1,23 +1,16 @@
/* 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/. */
-#downloads-indicator-icon {
- position: relative;
-}
-
#downloads-indicator-progress-icon {
background: var(--downloads-indicator-image-attention) bottom no-repeat;
background-size: 18px;
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 0;
+ margin-top: 18px;
/* 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;
@@ -26,32 +19,32 @@
toolbar[brighttext] #downloads-indicator-progress-icon {
background-image: var(--downloads-indicator-image-attention-inverted);
animation-name: indicatorArrowProgressDark;
}
@keyframes indicatorArrowProgress {
0% {
- height: 35%;
+ margin-top: 12px;
filter: brightness(1.2);
}
100% {
- height: 87%;
+ margin-top: 2px;
filter: brightness(1);
}
}
@keyframes indicatorArrowProgressDark {
0% {
- height: 35%;
+ margin-top: 12px;
filter: brightness(0.7);
}
100% {
- height: 87%;
+ margin-top: 2px;
filter: brightness(1);
}
}
#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. */