feat(benchmark): improve sampling UI

 * Increase default sample from 10 to 20
 * Convert sample adjuster from range to input
 * Make sample list scrollable after 250px height

Author: jeffbcross

benchmark/web/bp.js

@@ -1,7 +1,7 @@
 var bp = window.bp = {};
 bp.steps = window.benchmarkSteps = [];
 bp.runState = {
-  numSamples: 10,
+  numSamples: 20,
   recentTimePerStep: {},
   recentGCTimePerStep: {},
   timesPerAction: {}
@@ -118,7 +118,11 @@ bp.runAllTests = function (done) {
 
 bp.generateReportPartial = function(name, avg, fmtTimes, gcTimes) {
   return bp.interpolateHtml(
-      '<tr><td>%0</td><td class="average">test:%1ms<br>gc:%2ms<br>combined: %3ms</td><td>%4</td><td>%5</td></tr>',
+      '<tr class="sampleContainer">' +
+        '<td>%0</td>' +
+        '<td class="average">test:%1ms<br>gc:%2ms<br>combined: %3ms</td>' +
+        '<td><div class="sampleContainer"><div class="testTimeCol">%4</div><div class="testTimeCol">%5</div></div></td>' +
+      '</tr>',
       [
         name,
         ('' + avg.time).substr(0,6),

benchmark/web/bp.spec.js

@@ -25,7 +25,7 @@ describe('bp', function() {
     bp._container.appendChild(sampleRangeValue);
 
     bp.runState = {
-      numSamples: 10,
+      numSamples: 20,
       recentTimePerStep: {},
       recentGCTimePerStep: {},
       timesPerAction: {}
@@ -189,9 +189,9 @@ describe('bp', function() {
 
   describe('.addSampleRange()', function() {
     it('should set the default value to the current numSamples', function() {
-      bp.runState.numSamples = 10;
+      bp.runState.numSamples = 20;
       bp.addSampleRange();
-      expect(bp.sampleRange.value).toBe('10');
+      expect(bp.sampleRange.value).toBe('20');
     });
   });
 
@@ -203,7 +203,7 @@ describe('bp', function() {
 
 
     it('should change the numSamples property', function() {
-      expect(bp.runState.numSamples).toBe(10);
+      expect(bp.runState.numSamples).toBe(20);
       bp.onSampleRangeChanged({target: {value: '80'}});
       expect(bp.runState.numSamples).toBe(80);
     });
@@ -241,9 +241,9 @@ describe('bp', function() {
 
   describe('.setIterations()', function() {
     it('should set provided arguments to runState object', function() {
-      bp.runState = {numSamples: 10};
+      bp.runState = {numSamples: 20};
       bp.setIterations(15);
-      expect(bp.runState.numSamples).toBe(10);
+      expect(bp.runState.numSamples).toBe(20);
       expect(bp.runState.iterations).toBe(15);
     });
   });
@@ -429,7 +429,7 @@ describe('bp', function() {
     it('should return an html string with provided values', function() {
       bp.runState.numSamples = 9;
       expect(bp.generateReportPartial('foo', {time: 10, gcTime: 5}, ['9', '11'], ['4','6'])).
-        toBe('<tr><td>foo</td><td class="average">test:10ms<br>gc:5ms<br>combined: 15ms</td><td>9<br>11</td><td>4<br>6</td></tr>')
+        toBe('<tr class="sampleContainer"><td>foo</td><td class="average">test:10ms<br>gc:5ms<br>combined: 15ms</td><td><div class="sampleContainer"><div class="testTimeCol">9<br>11</div><div class="testTimeCol">4<br>6</div></div></td></tr>')
     });
   });
 

benchmark/web/tree.html

@@ -9,6 +9,8 @@
     <style>
       .bpLink { background: lightblue; padding: 1em; margin-bottom: 1.5em; }
       td.average { font-weight: bold; }
+      .sampleContainer {max-height:250px; overflow-y: auto; }
+      .testTimeCol { display: inline-block; width: 48%; }
     </style>
 </head>
 
@@ -28,7 +30,7 @@
                 Select number of samples to collect and average:
                 <span id="sampleRangeValue"></span>
               </label>
-              <input id="sampleRange" type="text">
+              <input id="sampleRange" type="text" value="20">
             </div>
           </form>
           <div class="btn-group">
@@ -43,8 +45,14 @@
               <tr>
                 <th>step</th>
                 <th>average</th>
-                <th>test time (ms)</th>
-                <th>gc time (ms)</th>
+                <th>
+                  <div class="testTimeCol">
+                    test time (ms)
+                  </div>
+                  <div class="testTimeCol" style="margin-left:-8px">
+                    gc time (ms)
+                  </div>
+                </th>
               </tr>
             </thead>
             <tbody class="info" style="font-family: monospace"></tbody>