NTP5: Regression fix.

A regression fix was introduced while refactoring the Tile logic in: https://codereview.chromium.org/11438009/

The App insertion animation got broke, and this CL fixes the problem. It also fixes one corner-case bug of the insertion animation.

This CL depends on https://codereview.chromium.org/11564026/.

BUG=166184

Review URL: https://chromiumcodereview.appspot.com/11566026

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@173376 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/ntp_search/apps_page.js

@@ -185,14 +185,17 @@ cr.define('ntp', function() {
 
   /**
    * Creates a new App object.
+   * @param {Object=} opt_data The data representing the app.
    * @constructor
    * @extends {HTMLDivElement}
    */
-  function App(data) {
+  function App(opt_data) {
     var el = cr.doc.createElement('div');
     el.__proto__ = App.prototype;
     el.initialize_();
-    el.data = data;
+
+    if (opt_data)
+      el.data = opt_data;
 
     return el;
   }
@@ -591,7 +594,7 @@ cr.define('ntp', function() {
       // The start margin of a cell (left or right according to text direction).
       cellMarginStart: 20,
       // The maximum number of Tiles to be displayed.
-      maxTileCount: 20,
+      maxTileCount: 512,
       // Whether the TilePage content will be scrollable.
       scrollable: true,
     },

chrome/browser/resources/ntp_search/most_visited_page.js

@@ -10,15 +10,19 @@ cr.define('ntp', function() {
 
   /**
    * Creates a new Most Visited object for tiling.
+   * @param {Object=} opt_data The data representing the most visited page.
    * @constructor
    * @extends {Thumbnail}
    * @extends {HTMLAnchorElement}
    */
-  function MostVisited() {
+  function MostVisited(opt_data) {
     var el = cr.doc.createElement('a');
     el.__proto__ = MostVisited.prototype;
     el.initialize();
 
+    if (opt_data)
+      el.data = opt_data;
+
     return el;
   }
 

chrome/browser/resources/ntp_search/new_tab.js

@@ -482,7 +482,8 @@ cr.define('ntp', function() {
         this.highlightAppId = null;
       }
 
-      var pageIndex = data.page_index || 0;
+      if (!this.appsLoaded_)
+        opt_highlight = false;
 
       var app = $(data.id);
       if (app) {
@@ -505,7 +506,9 @@ cr.define('ntp', function() {
       assert(loadTimeData.getBoolean('showApps'));
 
       for (var i = 0; i < data.apps.length; ++i) {
-        $(data.apps[i].id).data = data.apps[i];
+        var element = $(data.apps[i].id);
+        if (element)
+          element.data = data.apps[i];
       }
     },
 
@@ -793,6 +796,10 @@ cr.define('ntp', function() {
    * Invoked at startup once the DOM is available to initialize the app.
    */
   function onLoad() {
+
+    if (!loadTimeData.getBoolean('showApps'))
+      cr.dispatchSimpleEvent(document, 'sectionready', true, true);
+
     // Load the current theme colors.
     themeChanged();
 
@@ -877,7 +884,7 @@ cr.define('ntp', function() {
    * The number of sections to wait on.
    * @type {number}
    */
-  var sectionsToWaitFor = 1;
+  var sectionsToWaitFor = 2;
 
   /**
    * Queued callbacks which lie in wait for all sections to be ready.

chrome/browser/resources/ntp_search/thumbnail_page.js

@@ -10,15 +10,19 @@ cr.define('ntp', function() {
 
   /**
    * Creates a new Thumbnail object for tiling.
+   * @param {Object=} opt_data The data representing the thumbnail.
    * @constructor
    * @extends {Tile}
    * @extends {HTMLAnchorElement}
    */
-  function Thumbnail() {
+  function Thumbnail(opt_data) {
     var el = cr.doc.createElement('a');
     el.__proto__ = Thumbnail.prototype;
     el.initialize();
 
+    if (opt_data)
+      el.data = opt_data;
+
     return el;
   }
 

chrome/browser/resources/ntp_search/tile_page.js

@@ -126,12 +126,11 @@ cr.define('ntp', function() {
    * @constructor
    * @extends {HTMLDivElement}
    * @param {HTMLElement} tile Tile element that will be associated to the cell.
-   * @param {Object} config TilePage configuration object.
    */
-  function TileCell(tile, config) {
+  function TileCell(tile) {
     var tileCell = cr.doc.createElement('div');
     tileCell.__proto__ = TileCell.prototype;
-    tileCell.initialize(tile, config);
+    tileCell.initialize(tile);
 
     return tileCell;
   }
@@ -142,9 +141,8 @@ cr.define('ntp', function() {
     /**
      * Initializes a TileCell.
      * @param {Tile} tile The Tile that will be assigned to this TileCell.
-     * @param {Object} config TilePage configuration object.
      */
-    initialize: function(tile, config) {
+    initialize: function(tile) {
       this.className = 'tile-cell';
       this.assign(tile);
     },
@@ -451,7 +449,7 @@ cr.define('ntp', function() {
      * @protected
      */
     createTile_: function() {
-      return new this.TileClass(this.config);
+      return new this.TileClass();
     },
 
     /**
@@ -596,14 +594,18 @@ cr.define('ntp', function() {
      * This method should be called every time the contents of the grid changes,
      * that is, when the number, contents or order of the tiles has changed.
      * @param {number=} opt_colCount The number of columns.
+     * @param {number=} opt_tileCount Forces a particular number of tiles to
+     *   be drawn. This is useful for cases like the restoration/insertion
+     *   of tiles when you need to place a tile in a place of the grid that
+     *   is not rendered at the moment.
      * @protected
      */
-    renderGrid: function(opt_colCount) {
+    renderGrid: function(opt_colCount, opt_tileCount) {
       var colCount = opt_colCount || this.colCount_;
 
       var tileGridContent = this.tileGridContent_;
       var tiles = this.tiles_;
-      var tileCount = tiles.length;
+      var tileCount = opt_tileCount || tiles.length;
 
       var rowCount = Math.ceil(tileCount / colCount);
       var tileRows = tileGridContent.getElementsByClassName('tile-row');
@@ -636,13 +638,13 @@ cr.define('ntp', function() {
             tileCell = tileRowTiles[col];
           } else {
             var span = cr.doc.createElement('span');
-            tileCell = new TileCell(span, this.config);
+            tileCell = new TileCell(span);
           }
 
           // Render Tiles.
-          if (tile < tileCount) {
+          tileElement = tiles[tile];
+          if (tile < tileCount && tileElement) {
             tileCell.classList.remove('filler');
-            tileElement = tiles[tile];
             if (!tileCell.tile)
               tileCell.appendChild(tileElement);
             else if (tileElement != tileCell.tile)
@@ -670,7 +672,12 @@ cr.define('ntp', function() {
       this.colCount_ = colCount;
       this.rowCount_ = rowCount;
 
-      this.onScroll();
+      // If we are manually changing the tile count (which can happen during
+      // the restoration/insertion animation) we should not fire the scroll
+      // event once some cells might contain dummy tiles which will cause
+      // an error.
+      if (!opt_tileCount)
+        this.onScroll();
     },
 
     // layout
@@ -846,7 +853,13 @@ cr.define('ntp', function() {
       var tiles = this.tiles_;
       var tileCount = tiles.length;
 
-      var tileCells = this.querySelectorAll('.tile-cell');
+      var tileCells = this.getElementsByClassName('tile-cell');
+
+      // If the desired position is outside the grid, then the grid must be
+      // expanded so there will be a cell in the desired position.
+      if (index >= tileCells.length)
+        this.renderGrid(null, index + 1);
+
       var extraTileIndex = Math.min(tileCount, this.config.maxTileCount - 1);
       var extraCell = tileCells[extraTileIndex];
       var extraTileData = newDataList[extraTileIndex + 1];
@@ -858,6 +871,9 @@ cr.define('ntp', function() {
 
       var restoredData = newDataList[index];
       var tileBeingRestored = createTile(this, restoredData);
+
+      // Temporarily assume the |index| cell so the tile can be animated in
+      // the right spot.
       tileCells[index].appendChild(tileBeingRestored);
 
       if (this.config.scrollable)
@@ -1084,8 +1100,7 @@ cr.define('ntp', function() {
     var tile;
     if (opt_data) {
       // If there's data, the new tile will be a real one (not a filler).
-      tile = new tilePage.TileClass(tilePage.config);
-      tile.data = opt_data;
+      tile = new tilePage.TileClass(opt_data);
     } else {
       // Otherwise, it will be a fake filler tile.
       tile = cr.doc.createElement('span');