Bug 1349406 - Avoid reflows for arrow-typed download indicators by using stack instead of position: absolute. r=Paolo a=gchang
authorRex Lee <rexboy@mozilla.com>
Fri, 24 Mar 2017 19:54:59 +0800
changeset 395771 5dc8f5c5ff0dbb2ee53a1245d2dd48d53732f0fc
parent 395770 011ddbeca97ee047a6abf33e01930f3c73f97ccd
child 395772 6a0c50ce045d9b25e3fd38a947a4b87297047166
push id1468
push userasasaki@mozilla.com
push dateMon, 05 Jun 2017 19:31:07 +0000
treeherdermozilla-release@0641fc6ee9d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersPaolo, gchang
bugs1349406
milestone54.0a2
Bug 1349406 - Avoid reflows for arrow-typed download indicators by using stack instead of position: absolute. r=Paolo a=gchang MozReview-Commit-ID: KLsYueSWKId
browser/components/downloads/content/indicatorOverlay.xul
browser/themes/shared/downloads/indicator.inc.css
--- 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. */