NTP5: Implementing two rows option for Apps:

  - Apps content now will display 2 rows of Apps when there's enough vertical space
  - App styling/spacing has been tweaked
  - Margin of some elements replaced with padding so we can use offsetHeight to dynamically calculate the fixed height of the Bottom Panel (header + footer)

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


BUG=164023

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

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

chrome/browser/resources/ntp_search/apps_page.css

@@ -3,7 +3,7 @@
  * found in the LICENSE file. */
 
 .apps-page .tile-cell {
-  -webkit-margin-start: 12px;
+  -webkit-margin-start: 22px;
   margin-bottom: 12px;
 }
 
@@ -22,7 +22,7 @@
 .apps-page .app .title {
   color: #777;
   font-size: 0.9166em;
-  margin-top: 2px;
+  margin-top: 4px;
 }
 
 .app-contents {

chrome/browser/resources/ntp_search/apps_page.js

@@ -578,7 +578,7 @@ cr.define('ntp', function() {
       // The width of a cell.
       cellWidth: 70,
       // The start margin of a cell (left or right according to text direction).
-      cellMarginStart: 12,
+      cellMarginStart: 22,
       // The maximum number of Tiles to be displayed.
       maxTileCount: 20,
       // Whether the TilePage content will be scrollable.

chrome/browser/resources/ntp_search/mock/debug.css

@@ -44,6 +44,10 @@
   background: rgb(255, 255, 119);
 }
 
+.debug #bookmark-bar-spacer {
+  background: rgb(255, 255, 119);
+}
+
 .debug .hide-col-0 .tile-col-0,
 .debug .hide-col-1 .tile-col-1,
 .debug .hide-col-2 .tile-col-2,

chrome/browser/resources/ntp_search/nav_dot.css

@@ -4,7 +4,7 @@
 
 #dot-list {
   height: 15px;
-  margin: 10px 0 8px;
+  margin: 0;
   overflow: hidden;
   padding: 0;
 }

chrome/browser/resources/ntp_search/new_tab.css

@@ -72,7 +72,7 @@ body {
 #bottom-panel {
   -webkit-transition: opacity 200ms;
   position: absolute;
-  top: 364px;
+  top: 300px;
   visibility: hidden;
   width: 100%;
 }
@@ -82,7 +82,7 @@ body {
 }
 
 #card-slider-frame {
-  height: 92px;
+  height: 100px;
   overflow: hidden;
 }
 
@@ -95,17 +95,21 @@ body {
 #bottom-panel-header,
 #bottom-panel-footer,
 #bottom-panel-toolbar {
-  margin: 10px auto;
+  margin: 0 auto;
   text-align: center;
 }
 
 #bottom-panel-header {
-  margin-bottom: 20px;
+  padding: 10px 0 20px;
 }
 
 #bottom-panel-toolbar {
   height: 18px;
-  margin-top: 8px;
+  padding: 10px 0;
+}
+
+#bookmark-bar-spacer {
+  height: 48px;
 }
 
 #promo-bubble-anchor {

chrome/browser/resources/ntp_search/new_tab.html

@@ -99,6 +99,7 @@
           </div>
         </div>
       </div>
+      <div id="bookmark-bar-spacer"></div>
     </div>
   </div>
   <div id="promo-bubble-anchor"></div>

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;
+
   //----------------------------------------------------------------------------
 
   /**
@@ -111,6 +117,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
@@ -713,9 +740,28 @@ 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.
      */
@@ -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,

chrome/browser/resources/ntp_search/tile_page.css

@@ -35,7 +35,7 @@
 
 .tile-row {
   -webkit-transition: opacity 200ms;
-  height: 92px;
+  height: 100px;
   text-align: start;
   white-space: nowrap;
 }
@@ -118,11 +118,6 @@
   Scroll Bars
 ----------------------------------------------------------------------------- */
 
-.tile-page-content {
-  /* TODO(pedrosimonetti): Remove this when fixing the Apps page height. */
-  height: 92px;
-}
-
 .scrollable {
   overflow-y: auto;
 }

chrome/browser/resources/ntp_search/tile_page.js

@@ -15,12 +15,6 @@ cr.define('ntp', function() {
    */
   var MAX_SCROLL_SHADOW_GAP = 16;
 
-  /**
-   * @type {number}
-   * @const
-   */
-  var TILE_ROW_HEIGHT = 92;
-
   /**
    * @type {number}
    * @const
@@ -576,7 +570,7 @@ cr.define('ntp', function() {
       if (isRTL())
         col = colCount - col - 1;
       var config = this.config;
-      var top = TILE_ROW_HEIGHT * row;
+      var top = ntp.TILE_ROW_HEIGHT * row;
       var left = col * (config.cellWidth + config.cellMarginStart);
       return {top: top, left: left};
     },
@@ -690,6 +684,9 @@ cr.define('ntp', function() {
      * @param {boolean=} opt_animate Whether the layout be animated.
      */
     layout: function(opt_animate) {
+      var contentHeight = ntp.getContentHeight();
+      this.content_.style.height = contentHeight + 'px';
+
       var contentWidth = ntp.getContentWidth();
       var colCount = this.getColCountForWidth_(contentWidth);
       var lastColCount = this.colCount_;

chrome/browser/ui/search/search_ui.h

@@ -12,7 +12,7 @@ namespace search {
 // should be visible. This value is calculated from the
 // chrome/browser/resources/ntp_search/ tile_page.js
 // HEIGHT_FOR_BOTTOM_PANEL constant.
-static const int kMinContentHeightForBottomBookmarkBar = 558;
+static const int kMinContentHeightForBottomBookmarkBar = 531;
 
 // The maximum width of the detached bookmark bar.
 static const int kMaxWidthForBottomBookmarkBar = 720;