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;
+
+  /**
+   * The initial number of rows to display (rest are hidden) for each group.
+   */
+  var INITIAL_GROUP_ROW_LIMIT = 10;
+
+  /**
+   * The number of extra rows to show/hide when clicking the "Show more" or
+   * "Show less" buttons.
+   */
+  var LIMIT_INCREMENT = 10;
+
   // --------------------------------------------------------------------------
   // 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);
   }
 
   /**
    * 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));
       }
     },
 
+    /**
+     * 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;
 })();