[NTP4] Auto-deletion of empty apps panes.

chrome/browser/resources/ntp4/apps_page.js

Index: chrome/browser/resources/ntp4/apps_page.js
diff --git a/chrome/browser/resources/ntp4/apps_page.js b/chrome/browser/resources/ntp4/apps_page.js
index df194a6b024a386f6e603cf873d06fab13463294..5aea1ee4f0285e01912ea7fb86c724bcd191e8b6 100644
--- a/chrome/browser/resources/ntp4/apps_page.js
+++ b/chrome/browser/resources/ntp4/apps_page.js
@@ -275,17 +275,6 @@ cr.define('ntp4', function() {
     },
 
     /**
-     * Removes the app tile from the page. Should be called after the app has
-     * been uninstalled.
-     */
-    remove: function() {
-      // Unset the ID immediately, because the app is already gone. But leave
-      // the tile on the page as it animates out.
-      this.id = '';
-      this.tile.doRemove();
-    },
-
-    /**
      * Set the URL of the icon from |appData_|. This won't actually show the
      * icon until loadIcon() is called (for performance reasons; we don't want
      * to load icons until we have to).
@@ -634,10 +623,10 @@ cr.define('ntp4', function() {
    * @constructor
    * @extends {TilePage}
    */
-  function AppsPage() {
+  function AppsPage(ordinal) {
     var el = new TilePage(appsPageGridValues);
     el.__proto__ = AppsPage.prototype;
-    el.initialize();
+    el.initialize(ordinal);
 
     return el;
   }
@@ -645,7 +634,8 @@ cr.define('ntp4', function() {
   AppsPage.prototype = {
     __proto__: TilePage.prototype,
 
-    initialize: function() {
+    initialize: function(ordinal) {
+      this.ordinal_ = ordinal;
       this.classList.add('apps-page');
 
       this.addEventListener('cardselected', this.onCardSelected_);
@@ -653,12 +643,24 @@ cr.define('ntp4', function() {
       // the app notification bubbles when the app card slides in and out of
       // view.
       this.addEventListener('carddeselected', this.onCardDeselected_);
-      this.addEventListener('cardSelectionCompleted',
-                            this.onCardSelectionCompleted_);
+      this.addEventListener(cr.ui.CardSlider.EventType.CARD_CHANGE_ENDED,
+                            this.onCardChangeEnded_);
+
+      this.addEventListener(TilePage.EventType.TILE_ADDED, this.onTileAdded_);
 
       this.content_.addEventListener('scroll', this.onScroll_.bind(this));
     },
 
+    get ordinal() {
+      assert(typeof this.ordinal_ == 'string' && this.ordinal_);
+      return this.ordinal_;
+    },
+
+    set ordinal(ordinal) {
+      assert(typeof ordinal == 'string' && ordinal);
+      this.ordinal_ = ordinal;
+    },
+
     /**
      * Creates an app DOM element and places it at the last position on the
      * page.
@@ -672,10 +674,7 @@ cr.define('ntp4', function() {
         ntp4.getCardSlider().selectCardByValue(this);
         this.content_.scrollTop = this.content_.scrollHeight;
       }
-      var app = new App(appData);
-      if (this.classList.contains('selected-card'))
-        app.loadIcon();
-      this.appendTile(app, animate);
+      this.appendTile(new App(appData), animate);
     },
 
     /**
@@ -693,11 +692,24 @@ cr.define('ntp4', function() {
     },
 
     /**
-     * Handler for the 'cardSelectionCompleted' event, fired when the app card
-     * is done transitioning into view (and all the apps have repositioned).
+     * Handler for tile additions to this page.
+     * @param {Event} e The TILE_MOVED event.
+     */
+    onTileAdded_: function(e) {
+      assert(e.tilePage == this);
+      var tileContents = e.tilePage.tiles[e.tileIndex].firstChild;
+      assert(tileContents instanceof App);
+      if (e.tilePage.classList.contains('selected-card'))
+        tileContents.loadIcon();
+    },
+
+    /**
+     * Handler for the when this.cardSlider ends change its card. If animated,
+     * this happens when the -webkit-transition is done, otherwise happens
+     * immediately (but after CardSlider.EventType.CARD_CHANGED).
      * @private
      */
-    onCardSelectionCompleted_: function(e) {
+    onCardChangeEnded: function(e) {
       for (var i = 0; i < this.tileElements_.length; i++) {
         var app = this.tileElements_[i].firstChild;
         assert(app instanceof App);
@@ -761,18 +773,23 @@ cr.define('ntp4', function() {
       if (currentlyDraggingTile) {
         var tileContents = currentlyDraggingTile.firstChild;
         if (tileContents.classList.contains('app')) {
-          sourceId = currentlyDraggingTile.tilePage == this ?
-              DRAG_SOURCE.SAME_APPS_PANE : DRAG_SOURCE.OTHER_APPS_PANE;
-          this.tileGrid_.insertBefore(
-              currentlyDraggingTile,
-              this.tileElements_[index]);
+          var originalPage = currentlyDraggingTile.tilePage;
+          var samePageDrag = originalPage == this;
+          sourceId = samePageDrag ? DRAG_SOURCE.SAME_APPS_PANE :
+                                    DRAG_SOURCE.OTHER_APPS_PANE;
+          this.tileGrid_.insertBefore(currentlyDraggingTile,
+                                      this.tileElements_[index]);
           this.tileMoved(currentlyDraggingTile);
+          if (!samePageDrag)
+            originalPage.fireRemovedEvent(true);
+          if (originalPage)
+            originalPage.cleanupDrag();
         } else if (currentlyDraggingTile.querySelector('.most-visited')) {
           this.generateAppForLink(tileContents.data);
           sourceId = DRAG_SOURCE.MOST_VISITED_PANE;
         }
       } else {
-        this.addOutsideData_(dataTransfer, index);
+        this.addOutsideData_(dataTransfer);
         sourceId = DRAG_SOURCE.OUTSIDE_NTP;
       }