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

MozReview-Commit-ID: KQb1X6zrzOk

--HG--
extra : rebase_source : 0cf862c57fe74d9dbca77fc6660065963e9d3ade

browser/base/content/browser.js

@@ -4991,6 +4991,16 @@ var CombinedStopReload = {
     });
   },
 
+  /* This function is necessary to correctly vertically center the animation
+     within the toolbar, which uses -moz-pack-align:stretch; and thus a height
+     which is dependant on the font-size. */
+  setAnimationImageHeightRelativeToToolbarButtonHeight() {
+    let dwu = window.getInterface(Ci.nsIDOMWindowUtils);
+    let toolbarItem = this.stopReloadContainer.closest(".customization-target > toolbaritem");
+    let bounds = dwu.getBoundsWithoutFlushing(toolbarItem);
+    toolbarItem.style.setProperty("--toolbarbutton-height", bounds.height + "px");
+  },
+
   switchToStop(aRequest, aWebProgress) {
     if (!this._initialized)
       return;
@@ -5002,10 +5012,12 @@ var CombinedStopReload = {
                         this.animate;
 
     this._cancelTransition();
-    if (shouldAnimate)
+    if (shouldAnimate) {
+      this.setAnimationImageHeightRelativeToToolbarButtonHeight();
       this.stopReloadContainer.setAttribute("animate", "true");
-    else
+    } else {
       this.stopReloadContainer.removeAttribute("animate");
+    }
     this.reload.setAttribute("displaystop", "true");
   },
 
@@ -5019,10 +5031,12 @@ var CombinedStopReload = {
                         !aWebProgress.isLoadingDocument &&
                         this.animate;
 
-    if (shouldAnimate)
+    if (shouldAnimate) {
+      this.setAnimationImageHeightRelativeToToolbarButtonHeight();
       this.stopReloadContainer.setAttribute("animate", "true");
-    else
+    } else {
       this.stopReloadContainer.removeAttribute("animate");
+    }
 
     this.reload.removeAttribute("displaystop");
 

browser/themes/shared/toolbarbutton-icons.inc.css

@@ -78,11 +78,16 @@ toolbar[brighttext] .toolbarbutton-1 {
   }
 }
 
+#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: fixed;
+  position: absolute;
   overflow: hidden;
-  margin-top: -10px; /* Vertically center the 20px tall animatable image */
+  top: calc(50% - 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);
@@ -98,7 +103,7 @@ toolbar[brighttext] .toolbarbutton-1 {
 
 #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
 #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
-  height: 20px; /* Height of each frame within the SVG sprite */
+  height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
   list-style-image: none;