NTP5: Reuse insertion/removal animations for Apps.

chrome/browser/resources/ntp_search/apps_page.js

Index: chrome/browser/resources/ntp_search/apps_page.js
diff --git a/chrome/browser/resources/ntp_search/apps_page.js b/chrome/browser/resources/ntp_search/apps_page.js
index 62de3ced9b27a15c4d13f2a455ba18930fd93da3..d708ef96b1b97b8353f04053998c03528ad747fb 100644
--- a/chrome/browser/resources/ntp_search/apps_page.js
+++ b/chrome/browser/resources/ntp_search/apps_page.js
@@ -281,7 +281,15 @@ cr.define('ntp', 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.tileCell.doRemove(opt_animate);
+
+      if (opt_animate) {
+        var cell = this.tileCell;
+        var tilePage = cell.tilePage;
+        tilePage.dataList_.splice(cell.index, 1);
+        tilePage.animateTileRemoval(cell.index, tilePage.dataList_);
+      } else {
+        this.tileCell.doRemove(opt_animate);
+      }
     },
 
     /**
@@ -580,7 +588,7 @@ cr.define('ntp', function() {
       // The width of a cell.
       cellWidth: 70,
       // The start margin of a cell (left or right according to text direction).
-      cellMarginStart: 22,
+      cellMarginStart: 20,
       // The maximum number of Tiles to be displayed.
       maxTileCount: 20,
       // Whether the TilePage content will be scrollable.
@@ -627,10 +635,15 @@ cr.define('ntp', function() {
         }
       }
 
-      var app = new App();
-      app.data = data;
-      this.addTileAt(app, index);
-      this.renderGrid_();
+      if (animate) {
+        this.dataList_.splice(index, 0, data);
+        this.animateTileRestoration(index, this.dataList_);
+      } else {
+        var app = new App();
+        app.data = data;
+        this.addTileAt(app, index);
+        this.renderGrid_();

[Dan Beam, 2012/12/07 05:11:26]

I do wonder why adding a tile doesn't automatically render... is that a goal? to
have mutations not have side effects?

[pedro (no code reviews), 2012/12/08 02:57:29]

The goal was being able to add/remove multiple tiles and/or have transient tiles
(like in add/remove animations) without having to reconstruct the entire grid
multiple times (rows, cells and tiles).

But I agree that not having to call renderGrid_ would make the API simpler to
use, and I like the idea of simplifying things. So I included renderGrid_ calls
inside the addTileAt_ method, making the renderGrid_ call here not necessary.

+      }
     },
 
     /**