NTP5: Implementing two rows option for Apps.

chrome/browser/resources/ntp_search/new_tab.js

Index: chrome/browser/resources/ntp_search/new_tab.js
diff --git a/chrome/browser/resources/ntp_search/new_tab.js b/chrome/browser/resources/ntp_search/new_tab.js
index b6daae5fd3f996d306454584c109ef8b3bcb8cee..a8659bc7cedd0bdf1129feee2394457bd6eafb4d 100644
--- a/chrome/browser/resources/ntp_search/new_tab.js
+++ b/chrome/browser/resources/ntp_search/new_tab.js
@@ -37,7 +37,7 @@ cr.define('ntp', function() {
    * @type {number}
    * @const
    */
-  var HEIGHT_FOR_BOTTOM_PANEL = 558;
+  var HEIGHT_FOR_BOTTOM_PANEL = 531;
 
   /**
    * The Bottom Panel width required to show 6 cols of Tiles, which is used
@@ -75,6 +75,12 @@ cr.define('ntp', function() {
    */
   var NORMAL_BOTTOM_PANEL_WIDTH = 500;
 
+  /**
+   * @type {number}
+   * @const
+   */
+  var TILE_ROW_HEIGHT = 100;
+
   //----------------------------------------------------------------------------
 
   /**
@@ -112,6 +118,27 @@ cr.define('ntp', function() {
   var startTime;
 
   /**
+   * The top position of the Bottom Panel.
+   * @type {number|undefined}
+   * @private
+   */
+  var bottomPanelOffsetTop;
+
+  /**
+   * The height of the Bottom Panel Header, in pixels.
+   * @type {number|undefined}
+   * @private
+   */
+  var headerHeight;
+
+  /**
+   * The height of the Bottom Panel Footer, in pixels.
+   * @type {number|undefined}
+   * @private
+   */
+  var footerHeight;
+
+  /**
    * The time in milliseconds for most transitions.  This should match what's
    * in new_tab.css.  Unfortunately there's no better way to try to time
    * something to occur until after a transition has completed.
@@ -713,10 +740,29 @@ cr.define('ntp', function() {
 
       // Finally, dispatch the layout method to the current page.
       var currentPage = opt_page || this.cardSlider.currentCardValue;
+
+      var contentHeight = TILE_ROW_HEIGHT;
+      if (!opt_page && currentPage.config.scrollable) {
+        contentHeight = viewHeight - bottomPanelOffsetTop -
+            headerHeight - footerHeight;
+        contentHeight = Math.max(TILE_ROW_HEIGHT, contentHeight);
+        contentHeight = Math.min(2 * TILE_ROW_HEIGHT, contentHeight);
+      }
+      this.contentHeight_ = contentHeight;
+
+      $('card-slider-frame').style.height = contentHeight + 'px';
+
       currentPage.layout(opt_animate);
     },
 
     /**
+     * @return {number} The height of the Bottom Panel's content.
+     */
+    get contentHeight() {
+      return this.contentHeight_;
+    },
+
+    /**
      * @return {number} The width of the Bottom Panel's content.
      */
     get contentWidth() {
@@ -768,6 +814,10 @@ cr.define('ntp', function() {
 
     newTabView = new NewTabView();
 
+    bottomPanelOffsetTop = $('bottom-panel').offsetTop;
+    headerHeight = $('bottom-panel-header').offsetHeight;
+    footerHeight = $('bottom-panel-footer').offsetHeight;
+
     notificationContainer = getRequiredElement('notification-container');
     notificationContainer.addEventListener(
         'webkitTransitionEnd', onNotificationTransitionEnd);
@@ -1074,6 +1124,10 @@ cr.define('ntp', function() {
     newTabView.layout(opt_animate);
   }
 
+  function getContentHeight() {
+    return newTabView.contentHeight;
+  }
+
   function getContentWidth() {
     return newTabView.contentWidth;
   }
@@ -1081,12 +1135,14 @@ cr.define('ntp', function() {
   // Return an object with all the exports
   return {
     APP_LAUNCH: APP_LAUNCH,
+    TILE_ROW_HEIGHT: TILE_ROW_HEIGHT,
     appAdded: appAdded,
     appMoved: appMoved,
     appRemoved: appRemoved,
     appsPrefChangeCallback: appsPrefChangeCallback,
     getAppsCallback: getAppsCallback,
     getCardSlider: getCardSlider,
+    getContentHeight: getContentHeight,
     getContentWidth: getContentWidth,
     getThumbnailUrl: getThumbnailUrl,
     incrementHoveredThumbnailCount: incrementHoveredThumbnailCount,