blah.diff

commit a58feeaa836675201a4e33af8355e921ec8ae9a2
Author: J. Ryan Stinnett <[email protected]>
Date:   Wed Jul 26 15:25:42 2017 -0500

    Revert "Bug 1381993 - Position the stop/reload animation using absolute positioning to make sure that the animation remains vertically centered even when non-default font sizes are used. r=Gijs"
    
    This reverts commit b7ac898f7fbe7261385e3e111bcb1704da2bc4bc.
    
    MozReview-Commit-ID: JFMhIFPs15G

diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 5818c8312f63..a218887fcd7c 100755
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -5048,42 +5048,38 @@ var CombinedStopReload = {
 
     let shouldAnimate = AppConstants.MOZ_PHOTON_ANIMATIONS &&
                         aRequest instanceof Ci.nsIRequest &&
                         aWebProgress.isTopLevel &&
                         aWebProgress.isLoadingDocument &&
                         this.animate;
 
     this._cancelTransition();
-    if (shouldAnimate) {
-      BrowserUtils.setToolbarButtonHeightProperty(this.stopReloadContainer);
+    if (shouldAnimate)
       this.stopReloadContainer.setAttribute("animate", "true");
-    } else {
+    else
       this.stopReloadContainer.removeAttribute("animate");
-    }
     this.reload.setAttribute("displaystop", "true");
   },
 
   switchToReload(aRequest, aWebProgress) {
     if (!this._initialized || !this._shouldSwitch(aRequest) ||
         !this.reload.hasAttribute("displaystop"))
       return;
 
     let shouldAnimate = AppConstants.MOZ_PHOTON_ANIMATIONS &&
                         aRequest instanceof Ci.nsIRequest &&
                         aWebProgress.isTopLevel &&
                         !aWebProgress.isLoadingDocument &&
                         this.animate;
 
-    if (shouldAnimate) {
-      BrowserUtils.setToolbarButtonHeightProperty(this.stopReloadContainer);
+    if (shouldAnimate)
       this.stopReloadContainer.setAttribute("animate", "true");
-    } else {
+    else
       this.stopReloadContainer.removeAttribute("animate");
-    }
 
     this.reload.removeAttribute("displaystop");
 
     if (!shouldAnimate || this._stopClicked) {
       this._stopClicked = false;
       this._cancelTransition();
       this.reload.disabled = XULBrowserWindow.reloadCommand
                                              .getAttribute("disabled") == "true";
diff --git a/browser/themes/shared/toolbarbutton-icons.inc.css b/browser/themes/shared/toolbarbutton-icons.inc.css
index e199585eeb54..7b2c6f209150 100644
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -80,42 +80,40 @@ toolbar[brighttext] .toolbarbutton-1 {
   from {
     transform: scaleX(-1) translateX(0);
   }
   to {
     transform: scaleX(-1) translateX(-450px);
   }
 }
 
-#stop-reload-button[animate] > #reload-button,
-#stop-reload-button[animate] > #stop-button {
-  position: relative;
-}
-
 #reload-button > .toolbarbutton-animatable-box,
 #stop-button > .toolbarbutton-animatable-box {
-  position: absolute;
+  position: fixed;
   overflow: hidden;
-  top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */
+  margin-top: -10px; /* Vertically center the 20px tall animatable image */
   /* Since .toolbarbutton-icon uses a different width than the animatable-box,
      we need to set a padding relative to the difference in widths. */
   margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 18px) / 2);
   /* Set the min- and max- width and height of the box equal to that
      of each frame of the SVG sprite. Setting the width and height via
      the `width` and `height` CSS properties causes an assertion for
      `inline-size less than zero: 'aContainingBlockISize >= 0'` (bug 1379332). */
   min-width: 18px;
   max-width: 18px;
   min-height: 20px;
   max-height: 20px;
 }
 
 #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
 #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
-  height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
+  height: 20px; /* Height of each frame within the SVG sprite */
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  list-style-image: none;
 }
 
 #stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   background-image: url("chrome://browser/skin/reload-to-stop.svg");
   width: 468px;
 }
 
 #stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {