Truncate the number of rows displayed on about:profiler.

chrome/browser/resources/profiler.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.
 
 var g_browserBridge;
 var g_mainView;
 
 /**
  * Main entry point called once the page has loaded.
  */
@@ skipping 523 matching lines @@
   /**
    * The time (in milliseconds) to wait after receiving new data before
    * re-drawing it to the screen. The reason we wait a bit is to avoid
    * repainting repeatedly during the loading phase (which can slow things
    * down). Note that this only slows down the addition of new data. It does
    * not impact the  latency of user-initiated operations like sorting or
    * merging.
    */
   var PROCESS_DATA_DELAY_MS = 500;
 
+  /**
+   * The initial number of rows to display (the rest are hidden) when no
+   * grouping is selected. We use a higher limit than when grouping is used
+   * since there is a lot of vertical real estate.
+   */
+  var INITIAL_UNGROUPED_ROW_LIMIT = 30;

[jar (doing other things), 2011/11/17 14:18:40]

Excellent! You beat me to the punch!  I was going to suggest the larger limit
when there is no grouping. :-)

This seems like a fair number.  You might even make it a tad larger (40?), but
given the rate of drop-off when sorted... thas may be more than enough.

+
+  /**
+   * The initial number of rows to display (rest are hidden) for each group.
+   */
+  var INITIAL_GROUP_ROW_LIMIT = 10;

[jar (doing other things), 2011/11/17 14:18:40]

I'm suspicious that this should be lower.  IMO, it may well be zero.  This will
allow you to get to the grouped item you care about, and then expand only those
items.

Especially problematic is the case where they group (for example) on function
name etc.  You'll se that the groups are so plentiful, and so short, that you'll
lose your perf gain :-(.

[eroman, 2011/11/17 19:06:51]

It should be easy to change these policies as we play around with it. I'll leave
it as-is for now, we can update later.

+
+  /**
+   * The number of extra rows to show/hide when clicking the "Show more" or
+   * "Show less" buttons.
+   */
+  var LIMIT_INCREMENT = 10;

[jar (doing other things), 2011/11/17 14:18:40]

IF you do go for the smaller initial limit... then this might be set larger,
kindred to you ungrouped limit.

+
   // --------------------------------------------------------------------------
   // General utility functions
   // --------------------------------------------------------------------------
 
   /**
    * Returns a list of all the keys in |dict|.
    */
   function getDictionaryKeys(dict) {
     var keys = [];
     for (var key in dict) {
@@ skipping 324 matching lines @@
       var e = groupKey[i];
       addNode(parent, 'b', getNameForKey(e.key) + ' = ');
       addNode(parent, 'span', e.value);
     }
   }
 
   /**
    * Renders the information for a particular group.
    */
   function drawGroup(parent, groupData, columns,
-                     columnOnClickHandler, currentSortKeys) {
+                     columnOnClickHandler, currentSortKeys, displaySettings,
+                     expandHandler, shrinkHandler, showAllHandler,
+                     showNoneHandler) {
     var div = addNode(parent, 'div');
     div.className = 'group-container';
 
     drawGroupTitle(div, groupData.key);
 
     var table = addNode(div, 'table');
 
     drawDataTable(table, groupData, columns, columnOnClickHandler,
-                  currentSortKeys);
+                  currentSortKeys, displaySettings.limit,
+                  expandHandler, shrinkHandler, showAllHandler,
+                  showNoneHandler);

[jar (doing other things), 2011/11/17 14:18:40]

nit: Not critical to this CL: Sometimes when I see this many args, I start to
think about passing a class with members. 

[eroman, 2011/11/17 19:06:51]

I fully agree, the arguments here are getting unwiedly.

I'll send a follow-up CL to fix this (I don't want to do it in this CL since all
the code moves will be confusing).

   }
 
   /**
    * Renders a row that describes all the aggregate values for |columns|.
    */
   function drawAggregateRow(tbody, aggregates, columns) {
     var tr = addNode(tbody, 'tr');
     tr.className = 'aggregator-row';
 
     for (var i = 0; i < columns.length; ++i) {
@@ skipping 11 matching lines @@
       var aggregator = aggregates[key];
       if (aggregator)
         td.innerText = aggregator.getValueAsText();
     }
   }
 
   /**
    * Renders a table which summarizes all |column| fields for |data|.
    */
   function drawDataTable(table, data, columns, columnOnClickHandler,
-                         currentSortKeys) {
+                         currentSortKeys, limit, expandHandler, shrinkHandler,
+                         showAllHandler, showNoneHandler) {
     table.className = 'results-table';
     var thead = addNode(table, 'thead');
     var tbody = addNode(table, 'tbody');
 
     drawAggregateRow(thead, data.aggregates, columns);
     drawTableHeader(thead, columns, columnOnClickHandler, currentSortKeys);
-    drawTableBody(tbody, data.rows, columns);
+    drawTableBody(tbody, data.rows, columns, limit);
+    drawTruncationRow(tbody, data.rows.length, limit, columns.length,
+                      expandHandler, shrinkHandler, showAllHandler,
+                      showNoneHandler);
+  }
+
+  /**
+   * Renders a row which describes how many rows the table has, how many are
+   * currently hidden, and a set of buttons to show more.
+   */
+  function drawTruncationRow(tbody, numRows, limit, numColumns,
+                             expandHandler, shrinkHandler, showAllHandler,
+                             showNoneHandler) {
+    var numHiddenRows = Math.max(numRows - limit, 0);
+    var numVisibleRows = numRows - numHiddenRows;
+
+    var tr = addNode(tbody, 'tr');
+    tr.className = 'truncation-row';
+    var td = addNode(tr, 'td');
+    td.colSpan = numColumns;
+
+    addText(td, numRows + ' rows');
+    if (numHiddenRows > 0) {
+      var s = addNode(td, 'span', ' (' + numHiddenRows + ' hidden) ');
+      s.style.color = 'red';
+    }
+
+    if (numVisibleRows > LIMIT_INCREMENT)
+      addNode(td, 'button', 'Show less').onclick = shrinkHandler;
+    if (numVisibleRows > 0)
+      addNode(td, 'button', 'Show none').onclick = showNoneHandler;
+
+    if (numHiddenRows > 0) {
+      addNode(td, 'button', 'Show more').onclick = expandHandler;
+      addNode(td, 'button', 'Show all').onclick = showAllHandler;
+    }
   }
 
   function drawTableHeader(thead, columns, columnOnClickHandler,
                            currentSortKeys) {
     var tr = addNode(thead, 'tr');
     for (var i = 0; i < columns.length; ++i) {
       var key = columns[i];
       var th = addNode(tr, 'th', getNameForKey(key));
       th.onclick = columnOnClickHandler.bind(this, key);
 
@@ skipping 69 matching lines @@
     // value, and hence avoid it overflowing!
     var kMinLengthBeforeWrap = 20;
 
     addText(td, text.substr(0, kMinLengthBeforeWrap));
     for (var i = kMinLengthBeforeWrap; i < text.length; ++i) {
       addNode(td, 'wbr');
       addText(td, text.substr(i, 1));
     }
   }
 
-  function drawTableBody(tbody, rows, columns) {
-    for (var i = 0; i < rows.length; ++i) {
+  function drawTableBody(tbody, rows, columns, limit) {
+    for (var i = 0; i < rows.length && i < limit; ++i) {
       var e = rows[i];
 
       var tr = addNode(tbody, 'tr');
 
       for (var c = 0; c < columns.length; ++c) {
         var key = columns[c];
         var value = e[key];
 
         var td = addNode(tr, 'td');
         drawValueToCell(td, key, value);
@@ skipping 281 matching lines @@
       // Clear the results div, sine we may be overwriting older data.
       var parent = $(RESULTS_DIV_ID);
       parent.innerHTML = '';
 
       var columns = this.getVisibleColumnKeys_();
 
       var columnOnClickHandler = this.onClickColumn_.bind(this);
 
       // Draw each group.
       for (var i = 0; i < this.sortedGroupKeys_.length; ++i) {
-        var groupData = this.groupedData_[this.sortedGroupKeys_[i]];
-        drawGroup(parent, groupData, columns,
-                  columnOnClickHandler, this.currentSortKeys_);
+        var k = this.sortedGroupKeys_[i];
+        drawGroup(parent,
+                  this.groupedData_[k],
+                  columns,
+                  columnOnClickHandler,
+                  this.currentSortKeys_,
+                  this.getGroupDisplaySettings_(k),
+                  this.changeGroupDisplayLimit_.bind(this, k, LIMIT_INCREMENT),
+                  this.changeGroupDisplayLimit_.bind(this, k, -LIMIT_INCREMENT),
+                  this.changeGroupDisplayLimit_.bind(this, k, Infinity),
+                  this.changeGroupDisplayLimit_.bind(this, k, -Infinity));

[jar (doing other things), 2011/11/17 14:18:40]

As used here... the arguments are real clear... but still the correctness of the
order is hard to see with unnamed args that are this plentiful.

[eroman, 2011/11/17 19:06:51]

I will fix this in a followup.

       }
     },
 
+    /**
+     * Adjusts the row limit for group |groupKey| by |delta|.
+     */
+    changeGroupDisplayLimit_: function(groupKey, delta) {
+      // Get the current settings for this group.
+      var settings = this.getGroupDisplaySettings_(groupKey, true);
+
+      // Compute the adjusted limit.
+      var newLimit = settings.limit;
+      var totalNumRows = this.groupedData_[groupKey].rows.length;
+      newLimit = Math.min(totalNumRows, newLimit);
+      newLimit += delta;
+      newLimit = Math.max(0, newLimit);
+
+      // Update the settings with the new limit.
+      settings.limit = newLimit;
+
+      // TODO(eroman): It isn't necessary to redraw *all* the data. Really we
+      // just need to insert the missing rows (everything else stays the same)!
+      this.redrawData_();
+    },
+
+    /**
+     * Returns the rendering settings for group |groupKey|. This includes things
+     * like how many rows to display in the table.
+     */
+    getGroupDisplaySettings_: function(groupKey, opt_create) {
+      var settings = this.groupDisplaySettings_[groupKey];
+      if (!settings) {
+        // If we don't have any settings for this group yet, create some
+        // default ones.
+        if (groupKey == '[]') {
+          // (groupKey of '[]' is what we use for ungrouped data).
+          settings = {limit: INITIAL_UNGROUPED_ROW_LIMIT};
+        } else {
+          settings = {limit: INITIAL_GROUP_ROW_LIMIT};
+        }
+        if (opt_create)
+          this.groupDisplaySettings_[groupKey] = settings;
+      }
+      return settings;
+    },
+
     init_: function() {
       // Data goes through the following pipeline:
       // (1) Raw data received from browser, and transformed into our own
       //     internal row format (where properties are indexed by KEY_*
       //     constants.)
       // (2) We "augment" each row by adding some extra computed columns
       //     (like averages).
       // (3) The rows are merged using current merge settings.
       // (4) The rows that don't match current search expression are
       //     tossed out.
       // (5) The rows are organized into "groups" based on current settings,
       //     and aggregate values are computed for each resulting group.
       // (6) The rows within each group are sorted using current settings.
       // (7) The grouped rows are drawn to the screen.
       this.flatData_ = [];
       this.mergedData_ = [];
       this.filteredData_ = [];
       this.groupedData_ = {};
       this.sortedGroupKeys_ = [];
 
+      this.groupDisplaySettings_ = {};
+
       this.fillSelectionCheckboxes_($(COLUMN_TOGGLES_CONTAINER_ID));
       this.fillMergeCheckboxes_($(COLUMN_MERGE_TOGGLES_CONTAINER_ID));
 
       $(FILTER_SEARCH_ID).onsearch = this.onChangedFilter_.bind(this);
 
       this.currentSortKeys_ = INITIAL_SORT_KEYS.slice(0);
       this.currentGroupingKeys_ = INITIAL_GROUP_KEYS.slice(0);
 
       this.fillGroupingDropdowns_();
       this.fillSortingDropdowns_();
@@ skipping 270 matching lines @@
           groupKey.push(entry);
         }
 
         return JSON.stringify(groupKey);
       };
     },
   };
 
   return MainView;
 })();