NTP5: Reuse insertion/removal animations for Apps.

chrome/browser/resources/ntp_search/apps_page.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('ntp', function() {
   'use strict';
 
   var Tile = ntp.Tile;
   var TilePage = ntp.TilePage;
   var APP_LAUNCH = ntp.APP_LAUNCH;
@@ skipping 263 matching lines @@
     },
 
     /**
      * Removes the app tile from the page. Should be called after the app has
      * been uninstalled.
      */
     remove: function(opt_animate) {
       // 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);
+      }
     },
 
     /**
      * Set the URL of the icon from |this.data_|. 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).
      */
     setIcon: function() {
       var src = this.useSmallIcon_ ? this.data_.icon_small :
                                      this.data_.icon_big;
@@ skipping 278 matching lines @@
      * @extends {Tile}
      */
     TileClass: App,
 
     // The config object should be defined by a TilePage subclass if it
     // wants the non-default behavior.
     config: {
       // 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.
       scrollable: true,
     },
 
     initialize: function() {
       TilePage.prototype.initialize.apply(this, arguments);
 
       this.classList.add('apps-page');
@@ skipping 26 matching lines @@
     insertApp: function(data, animate) {
       var index = this.tiles_.length;
       for (var i = 0; i < this.tiles_.length; i++) {
         if (data.title.toLocaleLowerCase() <
             this.tiles_[i].data.title.toLocaleLowerCase()) {
           index = i;
           break;
         }
       }
 
-      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.

+      }
     },
 
     /**
      * Handler for 'cardselected' event, fired when |this| is selected. The
      * first time this is called, we load all the app icons.
      * @private
      */
     onCardSelected_: function(e) {
       var apps = this.querySelectorAll('.app.icon-loading');
       for (var i = 0; i < apps.length; i++) {
@@ skipping 196 matching lines @@
     if (app && !app.data.notifications_disabled)
       app.setupNotification_(notification);
   }
 
   return {
     appNotificationChanged: appNotificationChanged,
     AppsPage: AppsPage,
     launchAppAfterEnable: launchAppAfterEnable,
   };
 });