DevTools: [Console] Separate height caching from willHide event

Source/devtools/front_end/ui/ViewportControl.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 70 matching lines @@
      * @return {?WebInspector.ViewportElement}
      */
     itemElement: function(index) { return null; }
 }
 
 /**
  * @interface
  */
 WebInspector.ViewportElement = function() { }
 WebInspector.ViewportElement.prototype = {
+    cacheHeight: function() { },

[aandrey, 2014/06/17 19:21:34]

maybe willReLayout()?
one may want to cache something else than height, e.g. clientWidth or scrollTop.

or is it only the height that needs to be cached?

is there any contract between this method and
ViewportControl.Provider.fastHeight?
if so, maybe call it cacheFastHeight?
moreover, maybe it should be moved to ViewportControl.Provider interface next to
fastHeight, or move the fastHeight into this interface?

+
     willHide: function() { },
 
     wasShown: function() { },
 
     /**
      * @return {!Element}
      */
     element: function() { },
 }
 
 /**
  * @constructor
  * @implements {WebInspector.ViewportElement}
  * @param {!Element} element
  */
 WebInspector.StaticViewportElement = function(element)
 {
     this._element = element;
 }
 
 WebInspector.StaticViewportElement.prototype = {
+    cacheHeight: function() { },
+
     willHide: function() { },
 
     wasShown: function() { },
 
     /**
      * @return {!Element}
      */
     element: function()
     {
         return this._element;
@@ skipping 201 matching lines @@
     },
 
     refresh: function()
     {
         if (!this.element.clientHeight)
             return;  // Do nothing for invisible controls.
 
         var itemCount = this._provider.itemCount();
         if (!itemCount) {
             for (var i = 0; i < this._renderedItems.length; ++i)
+                this._renderedItems[i].cacheHeight();
+            for (var i = 0; i < this._renderedItems.length; ++i)
                 this._renderedItems[i].willHide();
             this._renderedItems = [];
             this._contentElement.removeChildren();
             this._topGapElement.style.height = "0px";
             this._bottomGapElement.style.height = "0px";
             this._firstVisibleIndex = -1;
             this._lastVisibleIndex = -1;
             return;
         }
 
         var selection = window.getSelection();
         var shouldRestoreSelection = this._updateSelectionModel(selection);
 
         var visibleFrom = this.element.scrollTop;
         var clientHeight = this.element.clientHeight;
         var shouldStickToBottom = this._stickToBottom && this.element.isScrolledToBottom();
 
         if (this._cumulativeHeights && itemCount !== this._cumulativeHeights.length)
             delete this._cumulativeHeights;
         for (var i = 0; i < this._renderedItems.length; ++i) {
-            this._renderedItems[i].willHide();
+            this._renderedItems[i].cacheHeight();
             // Tolerate 1-pixel error due to double-to-integer rounding errors.
             if (this._cumulativeHeights && Math.abs(this._cachedItemHeight(this._firstVisibleIndex + i) - this._provider.fastHeight(i + this._firstVisibleIndex)) > 1)
                 delete this._cumulativeHeights;
         }
         this._rebuildCumulativeHeightsIfNeeded();
         if (shouldStickToBottom) {
             this._lastVisibleIndex = itemCount - 1;
             this._firstVisibleIndex = Math.max(Array.prototype.lowerBound.call(this._cumulativeHeights, this._cumulativeHeights[this._cumulativeHeights.length - 1] - clientHeight), 0);
         } else {
             this._firstVisibleIndex = Math.max(Array.prototype.lowerBound.call(this._cumulativeHeights, visibleFrom), 0);
             this._lastVisibleIndex = Math.min(Array.prototype.upperBound.call(this._cumulativeHeights, visibleFrom + clientHeight), itemCount - 1);
         }
         var topGapHeight = this._cumulativeHeights[this._firstVisibleIndex - 1] || 0;
         var bottomGapHeight = this._cumulativeHeights[this._cumulativeHeights.length - 1] - this._cumulativeHeights[this._lastVisibleIndex];
 
         this._topGapElement.style.height = topGapHeight + "px";
         this._bottomGapElement.style.height = bottomGapHeight + "px";
         this._topGapElement._active = !!topGapHeight;
         this._bottomGapElement._active = !!bottomGapHeight;
 
         this._contentElement.style.setProperty("height", "10000000px");
+        for (var i = 0; i < this._renderedItems.length; ++i)
+            this._renderedItems[i].willHide();
         this._renderedItems = [];
         this._contentElement.removeChildren();
         for (var i = this._firstVisibleIndex; i <= this._lastVisibleIndex; ++i) {
             var viewportElement = this._provider.itemElement(i);
             this._contentElement.appendChild(viewportElement.element());
             this._renderedItems.push(viewportElement);
             viewportElement.wasShown();
         }
 
         this._contentElement.style.removeProperty("height");
@@ skipping 120 matching lines @@
 
     /**
      * @param {number} index
      */
     forceScrollItemToBeLast: function(index)
     {
         this._rebuildCumulativeHeightsIfNeeded();
         this.element.scrollTop = this._cumulativeHeights[index] - this.element.clientHeight;
     }
 }