[NTP4] Auto-deletion of empty apps panes.

chrome/browser/resources/shared/js/cr/ui/card_slider.js

Index: chrome/browser/resources/shared/js/cr/ui/card_slider.js
diff --git a/chrome/browser/resources/shared/js/cr/ui/card_slider.js b/chrome/browser/resources/shared/js/cr/ui/card_slider.js
index 62aca5e384b5ba1b6d3b1292588aa1c49276da21..553c63f07c6cd6b22ff3cdc43f9440ea70415232 100644
--- a/chrome/browser/resources/shared/js/cr/ui/card_slider.js
+++ b/chrome/browser/resources/shared/js/cr/ui/card_slider.js
@@ -79,7 +79,8 @@ cr.define('cr.ui', function() {
    */
   CardSlider.EventType = {
     // Fired when the user slides to another card.
-    CARD_CHANGED: 'cardSlider:card_changed'
+    CARD_CHANGED: 'cardSlider:card_changed',
+    CARD_CHANGE_ENDED: 'cardSlider:card_change_ended'
   };
 
 
@@ -132,6 +133,11 @@ cr.define('cr.ui', function() {
       this.frame_.addEventListener('mousewheel',
                                    this.onMouseWheel_.bind(this));
 
+      // Listen for the end of card movements (which is currently implemented
+      // with -webkit-transitions of -webkit-transforms.
+      this.container_.addEventListener('webkitTransitionEnd',
+          this.onWebkitTransitionEnd_.bind(this));
+
       // Also support touch events in case a touch screen happens to be
       // available.  Ideally we would support touch events whenever they
       // are fired, but for now restrict this extra code to when we know
@@ -297,6 +303,33 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * Handles the ends of -webkit-transitions on -webkit-transform (animated
+     * card switches).
+     * @param {Event} e The webkitTransitionEnd event.
+     * @private
+     */
+    onWebkitTransitionEnd_: function(e) {
+      // Ignore irrelevant transitions that might bubble up.
+      if (e.target !== this.container_ ||
+          e.propertyName != '-webkit-transform') {
+        return;
+      }
+      this.fireChangeEndEvent_();
+    },
+
+    /**
+     * Dispatches a simple event to tell subscribers we're done moving to the
+     * newly selected card.
+     * @private
+     */
+    fireChangeEndEvent_: function() {
+      var e = document.createEvent('Event');
+      e.initEvent(CardSlider.EventType.CARD_CHANGE_ENDED, true, true);
+      e.cardSlider = this;
+      this.container_.dispatchEvent(e);
+    },
+
+    /**
      * Selects a new card, ensuring that it is a valid index, transforming the
      * view and possibly calling the change card callback.
      * @param {number} newCardIndex Index of card to show.
@@ -310,14 +343,15 @@ cr.define('cr.ui', function() {
           !this.cards_[newCardIndex].classList.contains('selected-card');
 
       if (isChangingCard) {
-        previousCard.classList.remove('selected-card');
+        if (previousCard)
+          previousCard.classList.remove('selected-card');
         // If we have a new card index and it is valid then update the left
         // position and current card index.
         this.currentCard_ = newCardIndex;
         this.currentCardValue.classList.add('selected-card');
       }
 
-      this.transformToCurrentCard_(opt_animate);
+      var willTransitionHappen = this.transformToCurrentCard_(opt_animate);
 
       if (isChangingCard) {
         var event = document.createEvent('Event');
@@ -333,6 +367,11 @@ cr.define('cr.ui', function() {
         cr.dispatchSimpleEvent(this.currentCardValue, 'cardselected',
                                true, true);
       }
+
+      // If we're not changing, animated, or transitioning, fire a
+      // CARD_CHANGE_ENDED event right away.
+      if (!isChangingCard || !opt_animate || !willTransitionHappen)
+        this.fireChangeEndEvent_();
     },
 
     /**
@@ -351,13 +390,20 @@ cr.define('cr.ui', function() {
      * animate to that card or snap to it.
      * @param {boolean=} opt_animate If true will animate transition from
      *     current position to new position.
+     * @return {boolean} Whether or not a transformation was necessary.
      * @private
      */
     transformToCurrentCard_: function(opt_animate) {
+      var prevLeft = this.currentLeft_;
       this.currentLeft_ = -this.cardWidth_ *
           (isRTL() ? this.cards_.length - this.currentCard - 1 :
                      this.currentCard);
 
+      // If there's no change, return something to let the caller no there won't
+      // be a transition occuring.
+      if (prevLeft == this.currentLeft_)
+        return false;
+
       // Animate to the current card, which will either transition if the
       // current card is new, or reset the existing card if we didn't drag
       // enough to change cards.
@@ -368,6 +414,8 @@ cr.define('cr.ui', function() {
       }
       this.container_.style.WebkitTransition = transition;
       this.translateTo_(this.currentLeft_);
+
+      return true;
     },
 
     /**