Bug 1394588 - Include the gNavToolbox offset in the calculation of the library drop animation. r=Gijs
authorJared Wein <jwein@mozilla.com>
Tue, 05 Sep 2017 14:50:52 -0400
changeset 429092 1dca70dfe391082dd0b5dc5fc97a38a1b5795ac9
parent 429091 e7bf1efbaa59483ecceb52dcb62b14e29cdd348e
child 429093 d89ac77cac51787685fe4c2a8a87776765593082
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1394588
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1394588 - Include the gNavToolbox offset in the calculation of the library drop animation. r=Gijs MozReview-Commit-ID: 90eUNtqE0ee
browser/base/content/browser-places.js
browser/themes/shared/toolbarbutton-icons.inc.css
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -1534,23 +1534,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
@@ -462,18 +462,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;