NTP5: Apps regression fix.

chrome/browser/resources/ntp_search/tile_page.js

Index: chrome/browser/resources/ntp_search/tile_page.js
diff --git a/chrome/browser/resources/ntp_search/tile_page.js b/chrome/browser/resources/ntp_search/tile_page.js
index 52c347d76143a44138ab22c9cf3b4d7ab71a56b5..042fa92dffcbf9f9114b31fa235b346db2529cb6 100644
--- a/chrome/browser/resources/ntp_search/tile_page.js
+++ b/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,9 +594,10 @@ 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 {boolean=} opt_doNotScroll Do not fire onScroll event.
      * @protected
      */
-    renderGrid: function(opt_colCount) {
+    renderGrid: function(opt_colCount, opt_doNotScroll) {
       var colCount = opt_colCount || this.colCount_;
 
       var tileGridContent = this.tileGridContent_;
@@ -636,7 +635,7 @@ 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.
@@ -670,7 +669,8 @@ cr.define('ntp', function() {
       this.colCount_ = colCount;
       this.rowCount_ = rowCount;
 
-      this.onScroll();
+      if (!opt_doNotScroll)
+        this.onScroll();
     },
 
     // layout
@@ -847,6 +847,16 @@ cr.define('ntp', function() {
       var tileCount = tiles.length;
 
       var tileCells = this.querySelectorAll('.tile-cell');

[Dan Beam, 2012/12/14 22:49:46]

FYI: if you use getElementsByClassName() you won't need to double query
selector, as the collection updates itself as things with that class name get
added.

[pedro (no code reviews), 2012/12/14 23:42:57]

Done. Thanks for the explanation. I wonder why querySelectorAll() is not
auto-updated like getElementsBySomething().

[Dan Beam, 2012/12/17 19:08:56]

This is by design in the new API so mutations events don't need to keep track of
and update live collections.  Also, many web authors just didn't understand that
getElementsBy{Class,Tag}Name() collections change when modifying the DOM.

+
+      // 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) {
+        // Create a dummy empty tile in order to expand the grid.
+        this.tiles_.push(createTile(this));
+        this.renderGrid(null, true);
+        tileCells = this.querySelectorAll('.tile-cell');
+      }
+
       var extraTileIndex = Math.min(tileCount, this.config.maxTileCount - 1);
       var extraCell = tileCells[extraTileIndex];
       var extraTileData = newDataList[extraTileIndex + 1];
@@ -858,6 +868,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 +1097,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');