Bug 1394588 - Include the gNavToolbox offset in the calculation of the library drop animation. r=Gijs

MozReview-Commit-ID: 90eUNtqE0ee

--HG--
extra : rebase_source : 833a1738599b9620a05859a40e687329a229368a

browser/base/content/browser-places.js

@@ -1539,13 +1539,16 @@ var LibraryUI = {
         !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");

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

@@ -467,8 +467,9 @@ toolbar[brighttext] .toolbarbutton-1 {
   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`. */