Bug 1394588 - Include the gNavToolbox offset in the calculation of the library drop animation. r?gijs
MozReview-Commit-ID: 90eUNtqE0ee
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -1514,23 +1514,26 @@ var LibraryUI = {
let libraryButton = document.getElementById("library-button");
if (!libraryButton ||
libraryButton.getAttribute("cui-areatype") == "menu-panel" ||
libraryButton.getAttribute("overflowedItem") == "true" ||
!libraryButton.closest("#nav-bar") ||
!this.COSMETIC_ANIMATIONS_ENABLED) {
return;
}
+
let animatableBox = document.getElementById("library-animatable-box");
let navBar = document.getElementById("nav-bar");
let libraryIcon = document.getAnonymousElementByAttribute(libraryButton, "class", "toolbarbutton-icon");
let dwu = window.getInterface(Ci.nsIDOMWindowUtils);
let iconBounds = dwu.getBoundsWithoutFlushing(libraryIcon);
let libraryBounds = dwu.getBoundsWithoutFlushing(libraryButton);
+ let toolboxBounds = dwu.getBoundsWithoutFlushing(gNavToolbox);
+ animatableBox.style.setProperty("--toolbox-y", toolboxBounds.y + "px");
animatableBox.style.setProperty("--library-button-y", libraryBounds.y + "px");
animatableBox.style.setProperty("--library-button-height", libraryBounds.height + "px");
animatableBox.style.setProperty("--library-icon-x", iconBounds.x + "px");
if (navBar.hasAttribute("brighttext")) {
animatableBox.setAttribute("brighttext", "true");
} else {
animatableBox.removeAttribute("brighttext");
}
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -461,18 +461,19 @@ toolbar[brighttext] .toolbarbutton-1 {
fill: transparent;
}
.toolbarbutton-animatable-box[animate] {
position: absolute;
overflow: hidden;
/* Position the sprite at the y-position of the library-button, then adjust
based on the size difference between half of the button height and half
- of the sprite height. */
- top: calc(var(--library-button-y) + var(--library-button-height) / 2 - 27px);
+ of the sprite height. The titlebar may have padding from -moz-appearance
+ that needs to be accounted for. */
+ top: calc(var(--library-button-y) + var(--library-button-height) / 2 - 27px - var(--toolbox-y));
/* Set a margin relative to the difference in widths of the .toolbarbutton-icon
and the .toolbar-animatable-box. This is correct even in RTL because the item
is positioned using `left`. */
left: calc(var(--library-icon-x) + (16px + 2 * var(--toolbarbutton-inner-padding) - 22px) / 2);
/* Set the min- and max- width and height of the box equal to that
of each frame of the SVG sprite (must use min- and max- due to bug 1379332). */
min-width: 22px;
max-width: 22px;