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
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -4986,48 +4986,62 @@ var CombinedStopReload = {
return;
this.animate = Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled") &&
Services.prefs.getBoolPref("browser.stopReloadAnimation.enabled");
Services.prefs.addObserver("toolkit.cosmeticAnimations.enabled", this);
this.stopReloadContainer.addEventListener("animationend", this);
});
},
+ /* 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;
let shouldAnimate = AppConstants.MOZ_PHOTON_ANIMATIONS &&
aRequest instanceof Ci.nsIRequest &&
aWebProgress.isTopLevel &&
aWebProgress.isLoadingDocument &&
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");
},
switchToReload(aRequest, aWebProgress) {
if (!this._initialized)
return;
let shouldAnimate = AppConstants.MOZ_PHOTON_ANIMATIONS &&
aRequest instanceof Ci.nsIRequest &&
aWebProgress.isTopLevel &&
!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");
if (!shouldAnimate || this._stopClicked) {
this._stopClicked = false;
this._cancelTransition();
this.reload.disabled = XULBrowserWindow.reloadCommand
.getAttribute("disabled") == "true";
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -73,37 +73,42 @@ 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: 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);
/* 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: 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;
}
#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
background-image: url("chrome://browser/skin/reload-to-stop.svg");
width: 468px;