Merge pull request #525 from MoonchildProductions/newtab-page-work

Newtab page work

1 files changed, 16 insertions, 11 deletions

diff --git a/application/palemoon/base/content/newtab/transformations.js b/application/palemoon/base/content/newtab/transformations.js
index 978116182..f7db0ad84 100644
--- a/application/palemoon/base/content/newtab/transformations.js
+++ b/application/palemoon/base/content/newtab/transformations.js
@@ -156,7 +156,7 @@ var gTransformation = {
       finish();
     } else {
       this.setSitePosition(aSite, targetPosition);
-      this._whenTransitionEnded(aSite.node, finish);
+      this._whenTransitionEnded(aSite.node, ["left", "top"], finish);
     }
   },
 
@@ -181,13 +181,13 @@ var gTransformation = {
 
       batch.push(new Promise(resolve => {
         if (!cells[aIndex]) {
-        // The site disappeared from the grid, hide it.
+          // The site disappeared from the grid, hide it.
           this.hideSite(aSite, resolve);
         } else if (this._getNodeOpacity(aSite.node) != 1) {
-        // The site disappeared before but is now back, show it.
+          // The site disappeared before but is now back, show it.
           this.showSite(aSite, resolve);
         } else {
-        // The site's position has changed, move it around.
+          // The site's position has changed, move it around.
           this._moveSite(aSite, aIndex, {unfreeze: unfreeze, callback: resolve});
         }
       }));
@@ -202,15 +202,19 @@ var gTransformation = {
    * Listens for the 'transitionend' event on a given node and calls the given
    * callback.
    * @param aNode The node that is transitioned.
+   * @param aProperties The properties we'll wait to be transitioned.
    * @param aCallback The callback to call when finished.
    */
   _whenTransitionEnded:
-    function Transformation_whenTransitionEnded(aNode, aCallback) {
+    function Transformation_whenTransitionEnded(aNode, aProperties, aCallback) {
 
-    aNode.addEventListener("transitionend", function onEnd() {
-      aNode.removeEventListener("transitionend", onEnd, false);
-      aCallback();
-    }, false);
+    let props = new Set(aProperties);
+    aNode.addEventListener("transitionend", function onEnd(e) {
+      if (props.has(e.propertyName)) {
+        aNode.removeEventListener("transitionend", onEnd);
+        aCallback();
+      }
+    });
   },
 
   /**
@@ -236,8 +240,9 @@ var gTransformation = {
       if (aCallback)
         aCallback();
     } else {
-      if (aCallback)
-        this._whenTransitionEnded(aNode, aCallback);
+      if (aCallback) {
+        this._whenTransitionEnded(aNode, ["opacity"], aCallback);
+      }
 
       aNode.style.opacity = aOpacity;
     }