The Tor Browser: browser/base/content/newtab/transformations.js@b8a032363ba2 (annotated)

browser/base/content/newtab/transformations.js@b8a032363ba2 (annotated)

browser/base/content/newtab/transformations.js

Thu, 22 Jan 2015 13:21:57 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Thu, 22 Jan 2015 13:21:57 +0100
branch: TOR_BUG_9701
changeset 15: b8a032363ba2
permissions: -rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

 #ifdef 0
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 #endif
 /**
  * This singleton allows to transform the grid by repositioning a site's node
  * in the DOM and by showing or hiding the node. It additionally provides
  * convenience methods to work with a site's DOM node.
  */
 let gTransformation = {
   /**
    * Returns the width of the left and top border of a cell. We need to take it
    * into account when measuring and comparing site and cell positions.
    */
   get _cellBorderWidths() {
     let cstyle = window.getComputedStyle(gGrid.cells[0].node, null);
     let widths = {
       left: parseInt(cstyle.getPropertyValue("border-left-width")),
       top: parseInt(cstyle.getPropertyValue("border-top-width"))
     };
     // Cache this value, overwrite the getter.
     Object.defineProperty(this, "_cellBorderWidths",
                           {value: widths, enumerable: true});
     return widths;
   },
   /**
    * Gets a DOM node's position.
    * @param aNode The DOM node.
    * @return A Rect instance with the position.
    */
   getNodePosition: function Transformation_getNodePosition(aNode) {
     let {left, top, width, height} = aNode.getBoundingClientRect();
     return new Rect(left + scrollX, top + scrollY, width, height);
   },
   /**
    * Fades a given node from zero to full opacity.
    * @param aNode The node to fade.
    * @param aCallback The callback to call when finished.
    */
   fadeNodeIn: function Transformation_fadeNodeIn(aNode, aCallback) {
     this._setNodeOpacity(aNode, 1, function () {
       // Clear the style property.
       aNode.style.opacity = "";
       if (aCallback)
         aCallback();
     });
   },
   /**
    * Fades a given node from full to zero opacity.
    * @param aNode The node to fade.
    * @param aCallback The callback to call when finished.
    */
   fadeNodeOut: function Transformation_fadeNodeOut(aNode, aCallback) {
     this._setNodeOpacity(aNode, 0, aCallback);
   },
   /**
    * Fades a given site from zero to full opacity.
    * @param aSite The site to fade.
    * @param aCallback The callback to call when finished.
    */
   showSite: function Transformation_showSite(aSite, aCallback) {
     this.fadeNodeIn(aSite.node, aCallback);
   },
   /**
    * Fades a given site from full to zero opacity.
    * @param aSite The site to fade.
    * @param aCallback The callback to call when finished.
    */
   hideSite: function Transformation_hideSite(aSite, aCallback) {
     this.fadeNodeOut(aSite.node, aCallback);
   },
   /**
    * Allows to set a site's position.
    * @param aSite The site to re-position.
    * @param aPosition The desired position for the given site.
    */
   setSitePosition: function Transformation_setSitePosition(aSite, aPosition) {
     let style = aSite.node.style;
     let {top, left} = aPosition;
     style.top = top + "px";
     style.left = left + "px";
   },
   /**
    * Freezes a site in its current position by positioning it absolute.
    * @param aSite The site to freeze.
    */
   freezeSitePosition: function Transformation_freezeSitePosition(aSite) {
     if (this._isFrozen(aSite))
       return;
     let style = aSite.node.style;
     let comp = getComputedStyle(aSite.node, null);
     style.width = comp.getPropertyValue("width")
     style.height = comp.getPropertyValue("height");
     aSite.node.setAttribute("frozen", "true");
     this.setSitePosition(aSite, this.getNodePosition(aSite.node));
   },
   /**
    * Unfreezes a site by removing its absolute positioning.
    * @param aSite The site to unfreeze.
    */
   unfreezeSitePosition: function Transformation_unfreezeSitePosition(aSite) {
     if (!this._isFrozen(aSite))
       return;
     let style = aSite.node.style;
     style.left = style.top = style.width = style.height = "";
     aSite.node.removeAttribute("frozen");
   },
   /**
    * Slides the given site to the target node's position.
    * @param aSite The site to move.
    * @param aTarget The slide target.
    * @param aOptions Set of options (see below).
    *        unfreeze - unfreeze the site after sliding
    *        callback - the callback to call when finished
    */
   slideSiteTo: function Transformation_slideSiteTo(aSite, aTarget, aOptions) {
     let currentPosition = this.getNodePosition(aSite.node);
     let targetPosition = this.getNodePosition(aTarget.node)
     let callback = aOptions && aOptions.callback;
     let self = this;
     function finish() {
       if (aOptions && aOptions.unfreeze)
         self.unfreezeSitePosition(aSite);
       if (callback)
         callback();
     }
     // We need to take the width of a cell's border into account.
     targetPosition.left += this._cellBorderWidths.left;
     targetPosition.top += this._cellBorderWidths.top;
     // Nothing to do here if the positions already match.
     if (currentPosition.left == targetPosition.left &&
         currentPosition.top == targetPosition.top) {
       finish();
     } else {
       this.setSitePosition(aSite, targetPosition);
       this._whenTransitionEnded(aSite.node, ["left", "top"], finish);
     }
   },
   /**
    * Rearranges a given array of sites and moves them to their new positions or
    * fades in/out new/removed sites.
    * @param aSites An array of sites to rearrange.
    * @param aOptions Set of options (see below).
    *        unfreeze - unfreeze the site after rearranging
    *        callback - the callback to call when finished
    */
   rearrangeSites: function Transformation_rearrangeSites(aSites, aOptions) {
     let batch = [];
     let cells = gGrid.cells;
     let callback = aOptions && aOptions.callback;
     let unfreeze = aOptions && aOptions.unfreeze;
     aSites.forEach(function (aSite, aIndex) {
       // Do not re-arrange empty cells or the dragged site.
       if (!aSite || aSite == gDrag.draggedSite)
         return;
       let deferred = Promise.defer();
       batch.push(deferred.promise);
       let cb = deferred.resolve;
       if (!cells[aIndex])
         // The site disappeared from the grid, hide it.
         this.hideSite(aSite, cb);
       else if (this._getNodeOpacity(aSite.node) != 1)
         // The site disappeared before but is now back, show it.
         this.showSite(aSite, cb);
       else
         // The site's position has changed, move it around.
         this._moveSite(aSite, aIndex, {unfreeze: unfreeze, callback: cb});
     }, this);
     if (callback) {
       Promise.all(batch).then(callback);
     }
   },
   /**
    * 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, aProperties, aCallback) {
     let props = new Set(aProperties);
     aNode.addEventListener("transitionend", function onEnd(e) {
       if (props.has(e.propertyName)) {
         aNode.removeEventListener("transitionend", onEnd);
         aCallback();
       }
     });
   },
   /**
    * Gets a given node's opacity value.
    * @param aNode The node to get the opacity value from.
    * @return The node's opacity value.
    */
   _getNodeOpacity: function Transformation_getNodeOpacity(aNode) {
     let cstyle = window.getComputedStyle(aNode, null);
     return cstyle.getPropertyValue("opacity");
   },
   /**
    * Sets a given node's opacity.
    * @param aNode The node to set the opacity value for.
    * @param aOpacity The opacity value to set.
    * @param aCallback The callback to call when finished.
    */
   _setNodeOpacity:
     function Transformation_setNodeOpacity(aNode, aOpacity, aCallback) {
     if (this._getNodeOpacity(aNode) == aOpacity) {
       if (aCallback)
         aCallback();
     } else {
       if (aCallback) {
         this._whenTransitionEnded(aNode, ["opacity"], aCallback);
       }
       aNode.style.opacity = aOpacity;
     }
   },
   /**
    * Moves a site to the cell with the given index.
    * @param aSite The site to move.
    * @param aIndex The target cell's index.
    * @param aOptions Options that are directly passed to slideSiteTo().
    */
   _moveSite: function Transformation_moveSite(aSite, aIndex, aOptions) {
     this.freezeSitePosition(aSite);
     this.slideSiteTo(aSite, gGrid.cells[aIndex], aOptions);
   },
   /**
    * Checks whether a site is currently frozen.
    * @param aSite The site to check.
    * @return Whether the given site is frozen.
    */
   _isFrozen: function Transformation_isFrozen(aSite) {
     return aSite.node.hasAttribute("frozen");
   }
 };