test(virtual-repeat): reduce memory consumption significant (#9659)

* The virtual repeat tests right now create two times more than 1.5 Million items at same time (2 million and 1.6 million).

* This is extremly filling the available memory (especially on Saucelabs) and potentionally slows / crashes the test suite.

References #9560

Author: devversion

src/components/virtualRepeat/virtual-repeater.js

@@ -80,15 +80,6 @@ function virtualRepeatContainerTemplate($element) {
     '</div></div>';
 }
 
-/**
- * Maximum size, in pixels, that can be explicitly set to an element. The actual value varies
- * between browsers, but IE11 has the very lowest size at a mere 1,533,917px. Ideally we could
- * *compute* this value, but Firefox always reports an element to have a size of zero if it
- * goes over the max, meaning that we'd have to binary search for the value.
- * @const {number}
- */
-var MAX_ELEMENT_SIZE = 1533917;
-
 /**
  * Number of additional elements to render above and below the visible area inside
  * of the virtual repeat container. A higher number results in less flicker when scrolling
@@ -98,8 +89,8 @@ var MAX_ELEMENT_SIZE = 1533917;
 var NUM_EXTRA = 3;
 
 /** @ngInject */
-function VirtualRepeatContainerController(
-    $$rAF, $mdUtil, $parse, $rootScope, $window, $scope, $element, $attrs) {
+function VirtualRepeatContainerController($$rAF, $mdUtil, $mdConstant, $parse, $rootScope, $window, $scope,
+                                          $element, $attrs) {
   this.$rootScope = $rootScope;
   this.$scope = $scope;
   this.$element = $element;
@@ -125,6 +116,8 @@ function VirtualRepeatContainerController(
   this.offsetSize = parseInt(this.$attrs.mdOffsetSize, 10) || 0;
   /** @type {?string} height or width element style on the container prior to auto-shrinking. */
   this.oldElementSize = null;
+  /** @type {!number} Maximum amount of pixels allowed for a single DOM element */
+  this.maxElementPixels = $mdConstant.ELEMENT_MAX_PIXELS;
 
   if (this.$attrs.mdTopIndex) {
     /** @type {function(angular.Scope): number} Binds to topIndex on Angular scope */
@@ -262,26 +255,26 @@ VirtualRepeatContainerController.prototype.sizeScroller_ = function(size) {
   // If the size falls within the browser's maximum explicit size for a single element, we can
   // set the size and be done. Otherwise, we have to create children that add up the the desired
   // size.
-  if (size < MAX_ELEMENT_SIZE) {
+  if (size < this.maxElementPixels) {
     this.sizer.style[dimension] = size + 'px';
   } else {
     this.sizer.style[dimension] = 'auto';
     this.sizer.style[crossDimension] = 'auto';
 
     // Divide the total size we have to render into N max-size pieces.
-    var numChildren = Math.floor(size / MAX_ELEMENT_SIZE);
+    var numChildren = Math.floor(size / this.maxElementPixels);
 
     // Element template to clone for each max-size piece.
     var sizerChild = document.createElement('div');
-    sizerChild.style[dimension] = MAX_ELEMENT_SIZE + 'px';
+    sizerChild.style[dimension] = this.maxElementPixels + 'px';
     sizerChild.style[crossDimension] = '1px';
 
     for (var i = 0; i < numChildren; i++) {
       this.sizer.appendChild(sizerChild.cloneNode(false));
     }
 
     // Re-use the element template for the remainder.
-    sizerChild.style[dimension] = (size - (numChildren * MAX_ELEMENT_SIZE)) + 'px';
+    sizerChild.style[dimension] = (size - (numChildren * this.maxElementPixels)) + 'px';
     this.sizer.appendChild(sizerChild);
   }
 };

src/components/virtualRepeat/virtual-repeater.spec.js

@@ -1,5 +1,19 @@
 describe('<md-virtual-repeat>', function() {
-  beforeEach(module('material.components.virtualRepeat'));
+
+  var MAX_ELEMENT_PIXELS = 10000;
+
+  beforeEach(module('material.components.virtualRepeat', function($provide) {
+    /*
+     * Overwrite the $mdConstant ELEMENT_MAX_PIXELS property, because for testing it requires too much
+     * memory and crashes the tests sometimes.
+     */
+    $provide.decorator('$mdConstant', function($delegate) {
+
+      $delegate.ELEMENT_MAX_PIXELS = MAX_ELEMENT_PIXELS;
+
+      return $delegate;
+    })
+  }));
 
   var VirtualRepeatController = { NUM_EXTRA : 3 };
 
@@ -303,11 +317,9 @@ describe('<md-virtual-repeat>', function() {
   });
 
   it('should cap individual element size for the sizer in large item sets', function() {
-    // Copy max element size because we don't have a good way to reference it.
-    var maxElementSize = 1533917;
+    // Create a larger number of items than will fit in one maximum element size.
+    var numItems = MAX_ELEMENT_PIXELS / ITEM_SIZE + 1;
 
-    // Create a much larger number of items than will fit in one maximum element size.
-    var numItems = 2000000;
     createRepeater();
     scope.items = createItems(numItems);
     scope.$apply();
@@ -319,17 +331,18 @@ describe('<md-virtual-repeat>', function() {
 
     // Expect that sizer only adds as many children as it needs to.
     var numChildren = sizer[0].childNodes.length;
-    expect(numChildren).toBe(Math.ceil(numItems * ITEM_SIZE / maxElementSize));
+    expect(numChildren).toBe(Math.ceil(numItems * ITEM_SIZE / MAX_ELEMENT_PIXELS));
 
     // Expect that every child of sizer does not exceed the maximum element size.
     for (var i = 0; i < numChildren; i++) {
-      expect(sizer[0].childNodes[i].offsetHeight).toBeLessThan(maxElementSize + 1);
+      expect(sizer[0].childNodes[i].offsetHeight).toBeLessThan(MAX_ELEMENT_PIXELS + 1);
     }
   });
 
   it('should clear scroller if large set of items is filtered to much smaller set', function() {
-    // Create a much larger number of items than will fit in one maximum element size.
-    var numItems = 2000000;
+    // Create a larger number of items than will fit in one maximum element size.
+    var numItems = MAX_ELEMENT_PIXELS / ITEM_SIZE + 1;
+
     createRepeater();
     scope.items = createItems(numItems);
     scope.$apply();
@@ -339,6 +352,10 @@ describe('<md-virtual-repeat>', function() {
     // We expect the offset to be close to the exact height, because on IE there are some deviations.
     expect(sizer[0].offsetHeight).toBeCloseTo(numItems * ITEM_SIZE, -1);
 
+    // Expect the sizer to have children, because the the children are necessary to not exceed the maximum
+    // size of a DOM element.
+    expect(sizer[0].children.length).not.toBe(0);
+
     // Now that the sizer is really big, change the the number of items to be very small.
     numItems = 2;
     scope.items = createItems(numItems);

src/core/util/constant.js

@@ -41,6 +41,17 @@ function MdConstantFactory($sniffer, $window, $document) {
       return (NAVIGATION_KEYS.indexOf(e.keyCode) != -1);    
     },
 
+    /**
+     * Maximum size, in pixels, that can be explicitly set to an element. The actual value varies
+     * between browsers, but IE11 has the very lowest size at a mere 1,533,917px. Ideally we could
+     * compute this value, but Firefox always reports an element to have a size of zero if it
+     * goes over the max, meaning that we'd have to binary search for the value.
+     */
+    ELEMENT_MAX_PIXELS: 1533917,
+
+    /**
+     * Common Keyboard actions and their associated keycode.
+     */
     KEY_CODE: {
       COMMA: 188,
       SEMICOLON : 186,
@@ -59,6 +70,11 @@ function MdConstantFactory($sniffer, $window, $document) {
       BACKSPACE: 8,
       DELETE: 46
     },
+
+    /**
+     * Vendor prefixed CSS properties to be used to support the given functionality in older browsers
+     * as well.
+     */
     CSS: {
       /* Constants */
       TRANSITIONEND: 'transitionend' + (isWebkit ? ' webkitTransitionEnd' : ''),
@@ -74,6 +90,7 @@ function MdConstantFactory($sniffer, $window, $document) {
       ANIMATION_TIMING: vendorProperty('animationTimingFunction'),
       ANIMATION_DIRECTION: vendorProperty('animationDirection')
     },
+
     /**
      * As defined in core/style/variables.scss
      *
@@ -97,6 +114,7 @@ function MdConstantFactory($sniffer, $window, $document) {
       'portrait'  : '(orientation: portrait)'                    ,
       'print' : 'print'
     },
+
     MEDIA_PRIORITY: [
       'xl',
       'gt-lg',