NTP5: Improving the Tile Page resize logic

chrome/browser/resources/ntp_search/tile_page.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.
 
 cr.define('ntp', function() {
   'use strict';
 
   //----------------------------------------------------------------------------
+  // Constants
+  //----------------------------------------------------------------------------
+
+  /**
+   * The height required to show 2 rows of Tiles in the Bottom Panel.
+   * @type {Number}
+   * @const
+   */
+  var HEIGHT_FOR_TWO_ROWS = 275;
+
+  /**
+   * The minimum height required to show the Bottom Panel. If the height is

[jeremycho_google, 2012/08/24 00:54:42]

nit:The second sentence seems redundant.  And I think you can drop 'minimum' to
match the other comments.

[pedrosimonetti2, 2012/08/24 01:16:41]

Done.

+   * smaller than this value, the Bottom Panel will be hidden.
+   * @type {Number}
+   * @const
+   */
+  var HEIGHT_FOR_BOTTOM_PANEL = 170;
+
+  /**
+   * The Bottom Panel width required to show 5 cols of Tiles.
+   * @type {Number}
+   * @const
+   */
+  var MAX_BOTTOM_PANEL_WIDTH = 948;
+
+  /**
+   * The normal Bottom Panel width. If the window width is greater than or
+   * equal to this value, then the Bottom Panel width will be the available
+   * width minus the Bottom Panel's side margin. If the available width is
+   * smaller than this value, then the Bottom Panel's width will be an
+   * interpolation between the default width, and the minimum width defined
+   * by the constant MIN_BOTTOM_PANEL_CONTENT_WIDTH.
+   * @type {Number}
+   * @const
+   */
+  var NORMAL_BOTTOM_PANEL_WIDTH = 500;
+
+  /**
+   * The minimum Bottom Panel width. If the available width is smaller than

[jeremycho_google, 2012/08/24 00:54:42]

To me, this first sentence is misleading, since the width can actually be
smaller than this.

[pedrosimonetti2, 2012/08/24 01:16:41]

I think it's better now.

+   * this value, then the Bottom Panel width will be fixed to
+   * MIN_BOTTOM_PANEL_CONTENT_WIDTH.
+   * @type {Number}
+   * @const
+   */
+  var MIN_BOTTOM_PANEL_WIDTH = 300;
+
+  /**
+   * The minimum width of the Bottom Panel's content.
+   * @type {Number}
+   * @const
+   */
+  var MIN_BOTTOM_PANEL_CONTENT_WIDTH = 200;
+
+  //----------------------------------------------------------------------------
   // Tile
   //----------------------------------------------------------------------------
 
   /**
    * A virtual Tile class. Each TilePage subclass should have its own Tile
    * subclass implemented too (e.g. MostVisitedPage contains MostVisited
    * tiles, and MostVisited is a Tile subclass).
    * @constructor
    * @param {Object} config TilePage configuration object.
    */
@@ skipping 475 matching lines @@
       var width = colCount * requiredWidth - this.config_.cellMarginStart;
       return width;
     },
 
     /**
      * Gets the bottom panel width.
      * @private
      */
     getBottomPanelWidth_: function() {
       var windowWidth = cr.doc.documentElement.clientWidth;
+      var margin = this.config_.bottomPanelHorizontalMargin;
       var width;
-      // TODO(pedrosimonetti): Add constants?
-      if (windowWidth >= 948)
-        width = 748;
-      else if (windowWidth >= 500)
-        width = windowWidth - 2 * this.config_.bottomPanelHorizontalMargin;
-      else if (windowWidth >= 300)
-        // TODO(pedrosimonetti): Check specification.
-        width = Math.floor(((windowWidth - 300) / 200) * 100 + 200);
-      else
-        width = 200;
+      if (windowWidth >= MAX_BOTTOM_PANEL_WIDTH)
+        width = MAX_BOTTOM_PANEL_WIDTH - 2 * margin;
+      else if (windowWidth >= NORMAL_BOTTOM_PANEL_WIDTH)
+        width = windowWidth - 2 * margin;
+      else if (windowWidth >= MIN_BOTTOM_PANEL_WIDTH) {
+        // Interpolation between the previous and next states.
+        width = Math.floor((windowWidth - MIN_BOTTOM_PANEL_WIDTH) /
+            (NORMAL_BOTTOM_PANEL_WIDTH - MIN_BOTTOM_PANEL_WIDTH) *
+            (NORMAL_BOTTOM_PANEL_WIDTH -
+                2 * margin - MIN_BOTTOM_PANEL_CONTENT_WIDTH) +
+            MIN_BOTTOM_PANEL_CONTENT_WIDTH);
+      } else
+        width = MIN_BOTTOM_PANEL_CONTENT_WIDTH;
 
       return width;
     },
 
     /**
      * Gets the number of available columns.
      * @private
      */
     getAvailableColCount_: function() {
       return this.getColCountForWidth_(this.getBottomPanelWidth_());
@@ skipping 102 matching lines @@
 
       var bottomPanelWidth = this.getBottomPanelWidth_();
       var colCount = this.getColCountForWidth_(bottomPanelWidth);
       var lastColCount = this.colCount_;
       var animatingColCount = this.animatingColCount_;
 
       var windowHeight = cr.doc.documentElement.clientHeight;
 
       this.tileGridContent_.classList.add('animate-tile');
 
-      // TODO(pedrosimonetti): Better handling of height state.
-      // TODO(pedrosimonetti): Add constants?
-      var numOfVisibleRows = windowHeight > 500 ? 2 : 1;
+      this.showBottomPanel_(windowHeight >= HEIGHT_FOR_BOTTOM_PANEL);
+
+      var numOfVisibleRows = windowHeight > HEIGHT_FOR_TWO_ROWS ? 2 : 1;
       if (numOfVisibleRows != this.numOfVisibleRows_) {
         this.numOfVisibleRows_ = numOfVisibleRows;
         this.paginate_(null, true);
         $('page-list').style.height =
             (this.config_.rowHeight * numOfVisibleRows) + 'px';
       }
 
       // changeVisibleCols
       if (colCount != animatingColCount) {
         var newWidth = this.getWidthForColCount_(colCount);
@@ skipping 38 matching lines @@
 
       this.content_.style.width = bottomPanelWidth + 'px';
 
       this.animatingColCount_ = colCount;
     },
 
     // animation helpers
     // -------------------------------------------------------------------------
 
     /**
+     * Animates the display the Bottom Panel.
+     * @param {boolean} show Whether or not to show the Bottom Panel.
+     */
+    showBottomPanel_: function(show) {
+      $('card-slider-frame').classList[show ? 'remove' : 'add'](
+          'hide-card-slider');
+    },
+
+    /**
      * Animates the display of a row. TODO(pedrosimonetti): Make it local?
      * @param {HTMLElement} row The row element.
      * @param {boolean} show Whether or not to show the row.
      */
     showTileRow_: function(row, show) {
       row.classList[show ? 'remove' : 'add']('hide-row');
     },
 
     /**
      * Animates the display of columns. TODO(pedrosimonetti): Make it local?
@@ skipping 90 matching lines @@
   }
 
   return {
     // TODO(pedrosimonetti): Drag. Delete after porting the rest of the code.
     getCurrentlyDraggingTile2: deprecate,
     setCurrentDropEffect2: deprecate,
     Tile2: Tile,
     TilePage2: TilePage
   };
 });