cr/ui/list.js: Support rows with variable heights.

chrome/browser/resources/shared/js/cr/ui/grid.js

 // Copyright (c) 2011 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.
 
 // require: list_selection_model.js
 // require: list_selection_controller.js
 // require: list.js
 
 /**
  * @fileoverview This implements a grid control. Grid contains a bunch of
@@ skipping 57 matching lines @@
      */
     itemConstructor_: GridItem,
 
     /**
      * In the case of multiple columns lead item must have the same height
      * as a regular item.
      * @type {number}
      * @override
      */
     get leadItemHeight() {
-      return this.getItemHeight_();
+      return this.getDefaultItemHeight_();
     },
     set leadItemHeight(height) {
       // Lead item height cannot be set.
     },
 
     /**
+     * Whether or not the rows on list have various heights.
+     * Shows a warning at the setter because cr.ui.Grid does not support this.
+     * @type {boolean}
+     */
+    set fixedHeight(fixedHeight) {

[arv (Not doing code reviews), 2011/11/21 20:38:01]

missing getter

[yoshiki, 2011/11/28 11:03:31]

Done.

+      if (!fixedHeight)
+        console.warn("cr.ui.Grid does not support fixedHeight = false");

[arv (Not doing code reviews), 2011/11/21 20:38:01]

Use single quotes

[yoshiki, 2011/11/28 11:03:31]

Done.

+    },
+
+    /**
      * @return {number} The number of columns determined by width of the grid
      *     and width of the items.
      * @private
      */
     getColumnCount_: function() {
-      var size = this.getItemSize_();
+      var size = this.getDefaultItemSize_();
       var width = size.width + size.marginHorizontal; // Uncollapse margin.
       return width ? Math.floor(this.clientWidth / width) : 0;
     },
 
     /**
      * The number of columns in the grid. If not set, determined automatically
      * as the maximum number of items fitting in the grid width.
      * @type {number}
      */
     get columns() {
       if (!this.columns_) {
         this.columns_ = this.getColumnCount_();
       }
       return this.columns_ || 1;
     },
     set columns(value) {
       if (value >= 0 && value != this.columns_) {
         this.columns_ = value;
         this.redraw();
       }
     },
 
     /**
      * @param {number} index The index of the item.
      * @return {number} The top position of the item inside the list, not taking
      *     into account lead item. May vary in the case of multiple columns.
      * @override
      */
     getItemTop: function(index) {
-      return Math.floor(index / this.columns) * this.getItemHeight_();
+      return Math.floor(index / this.columns) * this.getDefaultItemHeight_();
     },
 
     /**
      * @param {number} index The index of the item.
      * @return {number} The row of the item. May vary in the case
      *     of multiple columns.
      * @override
      */
     getItemRow: function(index) {
       return Math.floor(index / this.columns);
@@ skipping 13 matching lines @@
      * @param {cr.ui.ListSelectionModel} sm The underlying selection model.
      * @return {!cr.ui.ListSelectionController} The newly created selection
      *     controller.
      * @override
      */
     createSelectionController: function(sm) {
       return new GridSelectionController(sm, this);
     },
 
     /**
-     * Calculates the number of items fitting in viewport given the index of
-     * first item and heights.
-     * @param {number} itemHeight The height of the item.
-     * @param {number} firstIndex Index of the first item in viewport.
+     * Calculates the number of items fitting in the given viewport.
      * @param {number} scrollTop The scroll top position.
-     * @return {number} The number of items in view port.
+     * @param {number} clientHeight The height of viewport.
+     * @return {{first: number, length: number, last: number}} The index of
+     *     first item in view port, The number of items, The item past the last.
      * @override
      */
-    getItemsInViewPort: function(itemHeight, firstIndex, scrollTop) {
+    getItemsInViewPort: function(scrollTop, clientHeight) {
+      var itemHeight = this.getDefaultItemHeight_();
+      var firstIndex =
+          this.autoExpands ? 0 : this.getIndexForListOffset_(scrollTop);
       var columns = this.columns;
-      var clientHeight = this.clientHeight;
       var count = this.autoExpands_ ? this.dataModel.length : Math.max(
           columns * (Math.ceil(clientHeight / itemHeight) + 1),
           this.countItemsInRange_(firstIndex, scrollTop + clientHeight));
       count = columns * Math.ceil(count / columns);
       count = Math.min(count, this.dataModel.length - firstIndex);
       return count;
     },
 
     /**
      * Adds items to the list and {@code newCachedItems}.
@@ skipping 116 matching lines @@
       return index + 1;
     }
   };
 
   return {
     Grid: Grid,
     GridItem: GridItem,
     GridSelectionController: GridSelectionController
   }
 });