NTP5: Fine tuning of Apps implementation.

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 2366e4c720b524e5213ddb4c30c7ea86ca970c2e..ecf88e6063000929f2f809b84c7fd9a85238a6a9 100644
--- a/chrome/browser/resources/ntp_search/apps_page.js
+++ b/chrome/browser/resources/ntp_search/apps_page.js
@@ -576,14 +576,18 @@ cr.define('ntp', function() {
     // wants the non-default behavior.
     config: {
       // The width of a cell.
-      cellWidth: 77,
+      cellWidth: 70,
       // The start margin of a cell (left or right according to text direction).
       cellMarginStart: 12,
       // The maximum number of Tiles to be displayed.
-      maxTileCount: 20
+      maxTileCount: 20,
+      // Whether the TilePage content will be scrollable.
+      scrollable: true,
     },
 
     initialize: function() {
+      TilePage.prototype.initialize.apply(this, arguments);
+
       this.classList.add('apps-page');
 
       this.addEventListener('cardselected', this.onCardSelected_);
@@ -595,8 +599,6 @@ cr.define('ntp', function() {
                             this.onCardChangeEnded_);
 
       this.addEventListener('tilePage:tile_added', this.onTileAdded_);
-
-      this.content_.addEventListener('scroll', this.onScroll_.bind(this));
     },
 
     /**
@@ -605,28 +607,30 @@ cr.define('ntp', function() {
      */
     insertAndHighlightApp: function(appData) {
       ntp.getCardSlider().selectCardByValue(this);
-      this.content_.scrollTop = this.content_.scrollHeight;
-      this.insertApp(appData, true);
+      var app = this.insertApp(appData, true);
+      this.content_.scrollTop = app.tileCell.offsetTop;
     },
 
     /**
-     * Similar to appendApp, but it respects the app_launch_ordinal field of
-     * |appData|.
+     * Inserts an App into the TilePage, preserving the alphabetical order.
      * @param {Object} appData The data that describes the app.
      * @param {boolean} animate Whether to animate the insertion.

[Evan Stade, 2012/12/03 18:41:46]

@return

[pedro (no code reviews), 2012/12/03 19:55:15]

The added App was being returned to we can scroll the page to the proper place
when adding a new App, but this does not address the insertion animation. I have
another CL being cooked right now which addresses both issues, and does not need
returning the Apps here, so I'm removing the return.

      */
     insertApp: function(appData, animate) {
       var index = this.tiles_.length;
       for (var i = 0; i < this.tiles_.length; i++) {
-        if (appData.app_launch_ordinal <
-            this.tiles_[i].appData.app_launch_ordinal) {
+        if (appData.title.toLocaleLowerCase() <
+            this.tiles_[i].appData.title.toLocaleLowerCase()) {
           index = i;
           break;
         }
       }
 
-      this.addTileAt(new App(appData), index);
+      var app = new App(appData);
+      this.addTileAt(app, index);
       this.renderGrid_();
+
+      return app;
     },
 
     /**
@@ -684,14 +688,10 @@ cr.define('ntp', function() {
       }
     },
 
-    /**
-     * A handler for when the apps page is scrolled (then we need to reposition
-     * the bubbles.
-     * @private
-     */
-    onScroll_: function(e) {
-      if (!this.selected)
-        return;
+    /** @override */
+    onScroll: function() {
+      TilePage.prototype.onScroll.apply(this, arguments);
+
       for (var i = 0; i < this.tiles_.length; i++) {
         var app = this.tiles_[i];
         assert(app instanceof App);