NTP5: Implementing two rows option for Apps.

chrome/browser/resources/ntp_search/new_tab.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.
 
 /**
  * @fileoverview New tab page
  * This is the main code for the new tab page. NewTabView manages page list,
  * dot list and handles apps pages callbacks from backend. It also handles
  * the layout of the Bottom Panel and the global UI states of the New Tab Page.
  */
@@ skipping 19 matching lines @@
    * @type {number}
    * @const
    */
   var BOTTOM_PANEL_HORIZONTAL_MARGIN = 100;
 
   /**
    * The height required to show the Bottom Panel.
    * @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
    * in the width computation.
    * @type {number}
    * @const
    */
   var MAX_BOTTOM_PANEL_WIDTH = 920;
 
   /**
@@ skipping 17 matching lines @@
    * equal to this value, then the width of the Bottom Panel's content will be
    * the available width minus side margin. If the available width is smaller
    * than this value, then the width of the Bottom Panel's content will be an
    * interpolation between the normal width, and the minimum width defined by
    * the constant MIN_BOTTOM_PANEL_CONTENT_WIDTH.
    * @type {number}
    * @const
    */
   var NORMAL_BOTTOM_PANEL_WIDTH = 500;
 
+  /**
+   * @type {number}
+   * @const
+   */
+  var TILE_ROW_HEIGHT = 100;
+
   //----------------------------------------------------------------------------
 
   /**
    * NewTabView instance.
    * @type {!Object|undefined}
    */
   var newTabView;
 
   /**
    * The 'notification-container' element.
@@ skipping 17 matching lines @@
   var hoveredThumbnailCount = 0;
 
   /**
    * The time when all sections are ready.
    * @type {number|undefined}
    * @private
    */
   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.
    * @type {number}
    * @const
    */
   var DEFAULT_TRANSITION_TIME = 500;
 
   /**
    * See description for these values in ntp_stats.h.
@@ skipping 581 matching lines @@
 
       // Calculates the width of the Bottom Panel's Content.
       var width = this.calculateContentWidth_();
       if (width != this.contentWidth_) {
         this.contentWidth_ = width;
         $('bottom-panel-footer').style.width = width + 'px';
       }
 
       // 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() {
       return this.contentWidth_;
     },
 
     /**
      * @return {number} The width of the Bottom Panel's content.
      * @private
      */
@@ skipping 31 matching lines @@
 
   /**
    * Invoked at startup once the DOM is available to initialize the app.
    */
   function onLoad() {
     // Load the current theme colors.
     themeChanged();
 
     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);
 
     var mostVisited = new ntp.MostVisitedPage();
     newTabView.appendTilePage(mostVisited,
                               loadTimeData.getString('mostvisited'));
     chrome.send('getMostVisited');
 
     if (loadTimeData.valueExists('bubblePromoText')) {
@@ skipping 286 matching lines @@
   }
 
   function setAppToBeHighlighted(appId) {
     newTabView.highlightAppId = appId;
   }
 
   function layout(opt_animate) {
     newTabView.layout(opt_animate);
   }
 
+  function getContentHeight() {
+    return newTabView.contentHeight;
+  }
+
   function getContentWidth() {
     return newTabView.contentWidth;
   }
 
   // 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,
     layout: layout,
     logTimeToClickAndHoverCount: logTimeToClickAndHoverCount,
     NtpFollowAction: NtpFollowAction,
     onLoad: onLoad,
     setAppToBeHighlighted: setAppToBeHighlighted,
     setBookmarkBarAttached: setBookmarkBarAttached,
     setForeignSessions: setForeignSessions,
     setMostVisitedPages: setMostVisitedPages,
     setRecentlyClosedTabs: setRecentlyClosedTabs,
     showNotification: showNotification,
     themeChanged: themeChanged,
   };
 });
 
 document.addEventListener('DOMContentLoaded', ntp.onLoad);
 
 var toCssPx = cr.ui.toCssPx;