WebUI TaskManager: Use the specified height of row on refleshing.

chrome/browser/resources/shared/js/cr/ui/list.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.
 
 // require: array_data_model.js
 // require: list_selection_model.js
 // require: list_selection_controller.js
 // require: list_item.js
 
 /**
@@ skipping 174 matching lines @@
               this.boundHandleDataModelPermuted_);
           this.dataModel_.removeEventListener('change',
                                               this.boundHandleDataModelChange_);
           this.dataModel_.removeEventListener('splice',
                                               this.boundHandleDataModelChange_);
         }
 
         this.dataModel_ = dataModel;
 
         this.cachedItems_ = {};
-        this.cachedItemSizes_ = {};
+        this.cachedItemHeights_ = {};
         this.selectionModel.clear();
         if (dataModel)
           this.selectionModel.adjustLength(dataModel.length);
 
         if (this.dataModel_) {
           this.dataModel_.addEventListener(
               'permuted',
               this.boundHandleDataModelPermuted_);
           this.dataModel_.addEventListener('change',
                                            this.boundHandleDataModelChange_);
@@ skipping 170 matching lines @@
       this.addEventListener('blur', this.handleElementBlur_, true);
       this.addEventListener('scroll', this.handleScroll.bind(this));
       this.setAttribute('role', 'listbox');
 
       // Make list focusable
       if (!this.hasAttribute('tabindex'))
         this.tabIndex = 0;
     },
 
     /**
+     * @param {ListItem=} item The list item to use to do the measuring.

[James Hawkins, 2012/01/26 01:34:05]

"The list item to measure."

[yoshiki, 2012/01/26 10:10:45]

Done.

+     * @return {number} The height of the given item. If the fixed height on CSS
+     * is set, uses that value. Otherwise, measures the size.

[mazda, 2012/01/26 09:37:16]

Please note that the fixed height is used only if it's set by 'px'.

[yoshiki, 2012/01/26 10:10:45]

Done.

+     * @private
+     */
+    measureItemHeight_: function(item) {
+      var height = item.style.height;
+      // Uses the fixed height if set it on CSS, to save a time of rayout

[James Hawkins, 2012/01/26 01:34:05]

s/rayout/layout/

[yoshiki, 2012/01/26 10:10:45]

Done.

+      // calculation.
+      if (height && height.substr(-2) == 'px')
+        return parseInt(height.substr(0, height.length - 2));
+
+      return measureItem(this, item).height;
+    },
+
+    /**
      * @return {number} The height of default item, measuring it if necessary.
      * @private
      */
     getDefaultItemHeight_: function() {
       return this.getDefaultItemSize_().height;
     },
 
     /**
      * @param {number} index The index of the item.
-     * @return {number} The height of the item.
+     * @return {number} The height of the item, measuring it if necessary.
      */
     getItemHeightByIndex_: function(index) {
       // If |this.fixedHeight_| is true, all the rows have same default height.
       if (this.fixedHeight_)
         return this.getDefaultItemHeight_();
 
-      if (this.cachedItemSizes_[index])
-        return this.cachedItemSizes_[index].height;
+      if (this.cachedItemHeights_[index])
+        return this.cachedItemHeights_[index];
 
       var item = this.getListItemByIndex(index);
       if (item)
-        return this.getItemSize_(item).height;
+        return this.measureItemHeight_(item);
 
       return this.getDefaultItemHeight_();
     },
 
     /**
-     * @return {number} The width of default item, measuring it if necessary.
-     * @private
-     */
-    getDefaultItemWidth_: function() {
-      return this.getDefaultItemSize_().width;
-    },
-
-    /**
      * @return {{height: number, width: number}} The height and width
      *     of default item, measuring it if necessary.
      * @private
      */
     getDefaultItemSize_: function() {
       if (!this.measured_ || !this.measured_.height) {
         this.measured_ = measureItem(this);
       }
       return this.measured_;
     },
 
     /**
-     * @return {{height: number, width: number}} The height and width
-     *     of an item, measuring it if necessary.
-     * @private
-     */
-    getItemSize_: function(item) {
-      if (this.cachedItemSizes_[item.listIndex])
-        return this.cachedItemSizes_[item.listIndex];
-
-      var size = measureItem(this, item);
-      if (!isNaN(size.height) && !isNaN(size.weight))
-        this.cachedItemSizes_[item.listIndex] = size;
-
-      return size;
-    },
-
-    /**
      * Callback for the double click event.
      * @param {Event} e The mouse event object.
      * @private
      */
     handleDoubleClick_: function(e) {
       if (this.disabled)
         return;
 
       var target = this.getListItemAncestor(e.target);
       if (target)
@@ skipping 514 matching lines @@
       while (currentIndex < lastIndex)
         insert(this);
     },
 
     /**
      * Ensures that all the item sizes in the list have been already cached.
      */
     ensureAllItemSizesInCache: function() {
       var measuringIndexes = [];
       for (var y = 0; y < this.dataModel.length; y++) {
-        if (!this.cachedItemSizes_[y])
+        if (!this.cachedItemHeights_[y])
           measuringIndexes.push(y);
       }
 
       var measuringItems = [];
       // Adds temporary elements.
       for (var y = 0; y < measuringIndexes.length; y++) {
         var index = measuringIndexes[y];
         var dataItem = this.dataModel.item(index);
         var listItem = this.cachedItems_[index] || this.createItem(dataItem);
         listItem.listIndex = index;
         this.appendChild(listItem);
         this.cachedItems_[index] = listItem;
         measuringItems.push(listItem);
       }
 
       // All mesurings must be placed after adding all the elements, to prevent
       // performance reducing.
       for (var y = 0; y < measuringIndexes.length; y++) {
         var index = measuringIndexes[y];
-        this.cachedItemSizes_[index] = measureItem(this, measuringItems[y]);
+        var height = this.measureItemHeight_(measuringItems[y]);

[James Hawkins, 2012/01/26 01:34:05]

No need to temp variable, just assign directly.

[yoshiki, 2012/01/26 10:10:45]

Done.

+        this.cachedItemHeights_[index] = height;
       }
 
       // Removes all the temprary elements.
       for (var y = 0; y < measuringIndexes.length; y++) {
         this.removeChild(measuringItems[y]);
       }
     },
 
     /**
      * Returns the height of after filler in the list.
@@ skipping 37 matching lines @@
 
       // We cache the list items since creating the DOM nodes is the most
       // expensive part of redrawing.
       var cachedItems = this.cachedItems_ || {};
       var newCachedItems = {};
 
       var autoExpands = this.autoExpands_;
       var scrollTop = this.scrollTop;
       var clientHeight = this.clientHeight;
 
-      var lastItemHeights = this.getHeightsForIndex_(dataModel.length - 1);
-      var desiredScrollHeight = lastItemHeights.top + lastItemHeights.height;
-
       var itemsInViewPort = this.getItemsInViewPort(scrollTop, clientHeight);
       // Draws the hidden rows just above/below the viewport to prevent
       // flashing in scroll.
       var firstIndex = Math.max(0, itemsInViewPort.first - 1);
       var lastIndex = Math.min(itemsInViewPort.last + 1, dataModel.length);
 
       var beforeFillerHeight =
           this.autoExpands ? 0 : this.getItemTop(firstIndex);
       var afterFillerHeight =
           this.autoExpands ? 0 : this.getAfterFillerHeight(lastIndex);
@@ skipping 32 matching lines @@
       this.firstIndex_ = firstIndex;
       this.lastIndex_ = lastIndex;
 
       this.remainingSpace_ = itemsInViewPort.last > dataModel.length;
       this.cachedItems_ = newCachedItems;
 
       // Mesurings must be placed after adding all the elements, to prevent
       // performance reducing.
       if (!this.fixedHeight_) {
         for (var y = firstIndex; y < lastIndex; y++)
-          this.cachedItemSizes_[y] = measureItem(this, newCachedItems[y]);
+          var height = this.measureItemHeight_(newCachedItems[y]);
+          this.cachedItemHeights_[y] = height;
       }
 
       // Measure again in case the item height has changed due to a page zoom.
       //
       // The measure above is only done the first time but this measure is done
       // after every redraw. It is done in a timeout so it will not trigger
       // a reflow (which made the redraw speed 3 times slower on my system).
       // By using a timeout the measuring will happen later when there is no
       // need for a reflow.
       if (listItem && this.fixedHeight_) {
@@ skipping 42 matching lines @@
    * because list items can contain controls that can be focused, and for some
    * purposes (e.g., styling), the list can still be conceptually focused at
    * that point even though it doesn't actually have the page focus.
    */
   cr.defineProperty(List, 'hasElementFocus', cr.PropertyKind.BOOL_ATTR);
 
   return {
     List: List
   }
 });