Add snapshotting support to 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;
 
+// TODO(eroman): The handling of "max" across snapshots is not correct.
+// For starters the browser needs to be aware to generate new maximums.
+// Secondly, we need to take into account the "max" of intermediary snapshots,
+// not just the terminal ones.
+
 /**
  * Main entry point called once the page has loaded.
  */
 function onLoad() {
   g_browserBridge = new BrowserBridge();
   g_mainView = new MainView();
-
-  // Ask the browser to send us the current data.
-  g_browserBridge.sendGetData();
 }
 
 document.addEventListener('DOMContentLoaded', onLoad);
 
 /**
  * This class provides a "bridge" for communicating between the javascript and
  * the browser. Used as a singleton.
  */
 var BrowserBridge = (function() {
   'use strict';
@@ skipping 15 matching lines @@
 
     sendResetData: function() {
       chrome.send('resetData');
     },
 
     //--------------------------------------------------------------------------
     // Messages received from the browser.
     //--------------------------------------------------------------------------
 
     receivedData: function(data) {
-      g_mainView.addData(data);
+      // TODO(eroman): The browser should give an indication of which snapshot
+      // this data belongs to. For now we always assume it is for the latest.
+      g_mainView.addDataToSnapshot(data);
     },
   };
 
   return BrowserBridge;
 })();
 
 /**
  * This class handles the presentation of our profiler view. Used as a
  * singleton.
  */
@@ skipping 27 matching lines @@
 
   // The container node to show/hide when toggling the column checkboxes.
   var EDIT_COLUMNS_ROW = 'edit-columns-row';
 
   // The checkbox which controls whether things like "Worker Threads" and
   // "PAC threads" will be merged together.
   var MERGE_SIMILAR_THREADS_CHECKBOX_ID = 'merge-similar-threads-checkbox';
 
   var RESET_DATA_LINK_ID = 'reset-data-link';
 
+  var TOGGLE_SNAPSHOTS_LINK_ID = 'snapshots-link';
+  var SNAPSHOTS_ROW = 'snapshots-row';
+  var SNAPSHOT_SELECTION_SUMMARY_ID = 'snapshot-selection-summary';
+  var TAKE_SNAPSHOT_BUTTON_ID = 'snapshot-button';
+
   // --------------------------------------------------------------------------
   // Row keys
   // --------------------------------------------------------------------------
 
   // Each row of our data is an array of values rather than a dictionary. This
   // avoids some overhead from repeating the key string multiple times, and
   // speeds up the property accesses a bit. The following keys are well-known
   // indexes into the array for various properties.
   //
   // Note that the declaration order will also define the default display order.
@@ skipping 160 matching lines @@
   var threadNameComparator =
       createLexicographicComparatorWithExceptions([
           'CrBrowserMain',
           'Chrome_IOThread',
           'Chrome_FileThread',
           'Chrome_HistoryThread',
           'Chrome_DBThread',
           'Still_Alive',
       ]);
 
+  function diffFuncForCount(a, b) {
+    return b - a;
+  }
+
+  function diffFuncForMax(a, b) {
+    return b;
+  }
+
   /**
    * Enumerates information about various keys. Such as whether their data is
    * expected to be numeric or is a string, a descriptive name (title) for the
    * property, and what function should be used to aggregate the property when
    * displayed in a column.
    *
    * --------------------------------------
    * The following properties are required:
    * --------------------------------------
    *
@@ skipping 12 matching lines @@
    *   [comparator]: A comparator function for sorting this column.
    *   [textPrinter]: A function that transforms values into the user-displayed
    *                  text shown in the UI. If unspecified, will default to the
    *                  "toString()" function.
    *   [cellAlignment]: The horizonal alignment to use for columns of this
    *                    property (for instance 'right'). If unspecified will
    *                    default to left alignment.
    *   [sortDescending]: When first clicking on this column, we will default to
    *                     sorting by |comparator| in ascending order. If this
    *                     property is true, we will reverse that to descending.
+   *   [diff]: Function to call to compute a "difference" value between
+   *           parameters (a, b). This is used when calculating the difference
+   *           between two snapshots. Diffing numeric quantities generally
+   *           involves subtracting, but some fields like max may need to do
+   *           something different.
    */
   var KEY_PROPERTIES = [];
 
   KEY_PROPERTIES[KEY_PROCESS_ID] = {
     name: 'PID',
     cellAlignment: 'right',
     aggregator: UniquifyAggregator,
   };
 
   KEY_PROPERTIES[KEY_PROCESS_TYPE] = {
@@ skipping 34 matching lines @@
     aggregator: UniquifyAggregator,
   };
 
   KEY_PROPERTIES[KEY_COUNT] = {
     name: 'Count',
     cellAlignment: 'right',
     sortDescending: true,
     textPrinter: formatNumberAsText,
     inputJsonKey: 'death_data.count',
     aggregator: SumAggregator,
+    diff: diffFuncForCount,
   };
 
   KEY_PROPERTIES[KEY_QUEUE_TIME] = {
     name: 'Total queue time',
     cellAlignment: 'right',
     sortDescending: true,
     textPrinter: formatNumberAsText,
     inputJsonKey: 'death_data.queue_ms',
     aggregator: SumAggregator,
+    diff: diffFuncForCount,
   };
 
   KEY_PROPERTIES[KEY_MAX_QUEUE_TIME] = {
     name: 'Max queue time',
     cellAlignment: 'right',
     sortDescending: true,
     textPrinter: formatNumberAsText,
     inputJsonKey: 'death_data.queue_ms_max',
     aggregator: MaxAggregator,
+    diff: diffFuncForMax,
   };
 
   KEY_PROPERTIES[KEY_RUN_TIME] = {
     name: 'Total run time',
     cellAlignment: 'right',
     sortDescending: true,
     textPrinter: formatNumberAsText,
     inputJsonKey: 'death_data.run_ms',
     aggregator: SumAggregator,
+    diff: diffFuncForCount,
   };
 
   KEY_PROPERTIES[KEY_AVG_RUN_TIME] = {
     name: 'Avg run time',
     cellAlignment: 'right',
     sortDescending: true,
     textPrinter: formatNumberAsText,
     aggregator: AvgAggregator.create(KEY_RUN_TIME, KEY_COUNT),
   };
 
   KEY_PROPERTIES[KEY_MAX_RUN_TIME] = {
     name: 'Max run time',
     cellAlignment: 'right',
     sortDescending: true,
     textPrinter: formatNumberAsText,
     inputJsonKey: 'death_data.run_ms_max',
     aggregator: MaxAggregator,
+    diff: diffFuncForMax,
   };
 
   KEY_PROPERTIES[KEY_AVG_QUEUE_TIME] = {
     name: 'Avg queue time',
     cellAlignment: 'right',
     sortDescending: true,
     textPrinter: formatNumberAsText,
     aggregator: AvgAggregator.create(KEY_QUEUE_TIME, KEY_COUNT),
   };
 
@@ skipping 334 matching lines @@
     return path.substr(lastSlash + 1);
   }
 
   /**
    * Returns the current time in milliseconds since unix epoch.
    */
   function getTimeMillis() {
     return (new Date()).getTime();
   }
 
+  /**
+   * Toggle a node between hidden/invisible.
+   */
+  function toggleNodeDisplay(n) {
+    if (n.style.display == '') {
+      n.style.display = 'none';
+    } else {
+      n.style.display = '';
+    }
+  }
+
   // --------------------------------------------------------------------------
   // Functions that augment, bucket, and compute aggregates for the input data.
   // --------------------------------------------------------------------------
 
   /**
    * Adds new derived properties to row. Mutates the provided dictionary |e|.
    */
   function augmentDataRow(e) {
-    e[KEY_AVG_QUEUE_TIME] = e[KEY_QUEUE_TIME] / e[KEY_COUNT];
-    e[KEY_AVG_RUN_TIME] = e[KEY_RUN_TIME] / e[KEY_COUNT];
+    computeDataRowAverages(e);
     e[KEY_SOURCE_LOCATION] = e[KEY_FILE_NAME] + ' [' + e[KEY_LINE_NUMBER] + ']';
   }
 
+  function computeDataRowAverages(e) {
+    e[KEY_AVG_QUEUE_TIME] = e[KEY_QUEUE_TIME] / e[KEY_COUNT];
+    e[KEY_AVG_RUN_TIME] = e[KEY_RUN_TIME] / e[KEY_COUNT];
+  }
+
   /**
    * Creates and initializes an aggregator object for each key in |columns|.
    * Returns an array whose keys are values from |columns|, and whose
    * values are Aggregator instances.
    */
   function initializeAggregates(columns) {
     var aggregates = [];
 
     for (var i = 0; i < columns.length; ++i) {
       var key = columns[i];
       var aggregatorFactory = KEY_PROPERTIES[key].aggregator;
       aggregates[key] = aggregatorFactory.create(key);
     }
 
     return aggregates;
   }
 
   function consumeAggregates(aggregates, row) {
     for (var key in aggregates)
       aggregates[key].consume(row);
   }
 
+  function bucketIdenticalRows(rows, identityKeys, propertyGetterFunc) {
+    var identicalRows = {};
+    for (var i = 0; i < rows.length; ++i) {
+      var r = rows[i];
+
+      var rowIdentity = [];
+      for (var j = 0; j < identityKeys.length; ++j)
+        rowIdentity.push(propertyGetterFunc(r, identityKeys[j]));
+      rowIdentity = rowIdentity.join('\n');
+
+      var l = identicalRows[rowIdentity];
+      if (!l) {
+        l = [];
+        identicalRows[rowIdentity] = l;
+      }
+      l.push(r);
+    }
+    return identicalRows;
+  }
+
   /**
    * Merges the rows in |origRows|, by collapsing the columns listed in
    * |mergeKeys|. Returns an array with the merged rows (in no particular
    * order).
    *
    * If |mergeSimilarThreads| is true, then threads with a similar name will be
    * considered equivalent. For instance, "WorkerThread-1" and "WorkerThread-2"
    * will be remapped to "WorkerThread-*".
    */
   function mergeRows(origRows, mergeKeys, mergeSimilarThreads) {
@@ skipping 21 matching lines @@
     // considered identical to another row.
     var identityKeys = IDENTITY_KEYS.slice(0);
     deleteValuesFromArray(identityKeys, mergeKeys);
 
     // Set |aggregateKeys| to everything else, since we will be aggregating
     // their value as part of the merge.
     var aggregateKeys = ALL_KEYS.slice(0);
     deleteValuesFromArray(aggregateKeys, IDENTITY_KEYS);
 
     // Group all the identical rows together, bucketed into |identicalRows|.
-    var identicalRows = {};
-    for (var i = 0; i < origRows.length; ++i) {
-      var e = origRows[i];
-
-      var rowIdentity = [];
-      for (var j = 0; j < identityKeys.length; ++j)
-        rowIdentity.push(propertyGetterFunc(e, identityKeys[j]));
-      rowIdentity = rowIdentity.join('\n');
-
-      var l = identicalRows[rowIdentity];
-      if (!l) {
-        l = [];
-        identicalRows[rowIdentity] = l;
-      }
-      l.push(e);
-    }
+    var identicalRows =
+        bucketIdenticalRows(origRows, identityKeys, propertyGetterFunc);
 
     var mergedRows = [];
 
     // Merge the rows and save the results to |mergedRows|.
     for (var k in identicalRows) {
       // We need to smash the list |l| down to a single row...
       var l = identicalRows[k];
 
       var newRow = [];
       mergedRows.push(newRow);
@@ skipping 11 matching lines @@
         consumeAggregates(aggregates, l[i]);
 
       // Suck out the data generated by the aggregators.
       for (var aggregateKey in aggregates)
         newRow[aggregateKey] = aggregates[aggregateKey].getValue();
     }
 
     return mergedRows;
   }
 
+  /**
+   * Takes two flat lists data1 and data2, and returns a new flat list which
+   * represents the difference between them. The exact meaning of "difference"
+   * is column specific, but for most numeric fields (like the count, or total
+   * time), it is found by subtracting.
+   *
+   * TODO(eroman): Some of this code is duplicated from mergeRows().
+   */
+  function subtractSnapshots(data1, data2) {
+    // These columns are computed from the other columns. We won't bother
+    // diffing/aggregating these, but rather will derive them again from the
+    // final row.
+    var COMPUTED_AGGREGATE_KEYS = [KEY_AVG_QUEUE_TIME, KEY_AVG_RUN_TIME];
+
+    // These are the keys which determine row equality. Since we are not doing
+    // any merging yet at this point, it is simply the list of all identity
+    // columns.
+    var identityKeys = IDENTITY_KEYS;
+
+    // The columns to compute via aggregation is everything else.
+    var aggregateKeys = ALL_KEYS.slice(0);
+    deleteValuesFromArray(aggregateKeys, IDENTITY_KEYS);
+    deleteValuesFromArray(aggregateKeys, COMPUTED_AGGREGATE_KEYS);
+
+    // Group all the identical rows for each list together.
+    var propertyGetterFunc = function(row, key) { return row[key]; };
+    var identicalRows1 =
+        bucketIdenticalRows(data1, identityKeys, propertyGetterFunc);
+    var identicalRows2 =
+        bucketIdenticalRows(data2, identityKeys, propertyGetterFunc);
+
+    var diffedRows = [];
+
+    for (var k in identicalRows2) {
+      var rows2 = identicalRows2[k];
+      var rows1 = identicalRows1[k];
+      if (rows1 == undefined)
+        rows1 = [];
+
+      var newRow = [];
+
+      // Copy over all the identity columns to the new row (since they
+      // were the same for each row matched).
+      for (var i = 0; i < identityKeys.length; ++i)
+        newRow[identityKeys[i]] = propertyGetterFunc(rows2[0], identityKeys[i]);
+
+      // The raw data for each snapshot *may* have contained duplicate rows, so
+      // smash them down into a single row using our aggregation functions.
+      var aggregates1 = initializeAggregates(aggregateKeys);
+      var aggregates2 = initializeAggregates(aggregateKeys);
+      for (var i = 0; i < rows1.length; ++i)
+        consumeAggregates(aggregates1, rows1[i]);
+      for (var i = 0; i < rows2.length; ++i)
+        consumeAggregates(aggregates2, rows2[i]);
+
+      // Finally, diff the two merged rows.
+      for (var aggregateKey in aggregates2) {
+        var a = aggregates1[aggregateKey].getValue();
+        var b = aggregates2[aggregateKey].getValue();
+
+        var diffFunc =  KEY_PROPERTIES[aggregateKey].diff;
+        newRow[aggregateKey] = diffFunc(a, b);
+      }
+
+      if (newRow[KEY_COUNT] == 0) {
+        // If a row's count has gone to zero, it means there were no new
+        // occurrences of it in the second snapshot, so remove it.
+        continue;
+      }
+
+      // Since we excluded the averages during diffing phase, re-compute them
+      // using the diffed totals.
+      computeDataRowAverages(newRow);
+      diffedRows.push(newRow);
+    }
+
+    return diffedRows;
+  }
+
   // --------------------------------------------------------------------------
   // HTML drawing code
   // --------------------------------------------------------------------------
 
   function getTextValueForProperty(key, value) {
     if (value == undefined) {
       // A value may be undefined as a result of having merging rows. We
       // won't actually draw it, but this might be called by the filter.
       return '';
     }
@@ skipping 156 matching lines @@
     // Make sure we have a definition for each key.
     for (var k = BEGIN_KEY; k < END_KEY; ++k) {
       if (!KEY_PROPERTIES[k])
         throw 'KEY_PROPERTIES[] not defined for key: ' + k;
     }
 
     this.init_();
   }
 
   MainView.prototype = {
-    addData: function(data) {
+    addDataToSnapshot: function(data) {
+      // TODO(eroman): We need to know which snapshot this data belongs to!
+      // For now we assume it is the most recent snapshot.
+      var snapshotIndex = this.snapshots_.length - 1;
+
+      var snapshot = this.snapshots_[snapshotIndex];
+
       var pid = data.process_id;
       var ptype = data.process_type;
 
       // Augment each data row with the process information.
       var rows = data.list;
       for (var i = 0; i < rows.length; ++i) {
         // Transform the data from a dictionary to an array. This internal
         // representation is more compact and faster to access.
         var origRow = rows[i];
         var newRow = [];
@@ skipping 13 matching lines @@
           // When resetting the data, it is possible for the backend to give us
           // counts of "0". There is no point adding these rows (in fact they
           // will cause us to do divide by zeros when calculating averages and
           // stuff), so we skip past them.
           continue;
         }
 
         // Add our computed properties.
         augmentDataRow(newRow);
 
-        this.flatData_.push(newRow);
+        snapshot.flatData.push(newRow);
       }
 
-      // We may end up calling addData() repeatedly (once for each process).
-      // To avoid this from slowing us down we do bulk updates on a timer.
-      this.updateMergedDataSoon_();
+      if (!arrayToSet(this.getSelectedSnapshotIndexes_())[snapshotIndex]) {
+        // Optimization: If this snapshot is not a data dependency for the
+        // current display, then don't bother updating anything.
+        return;
+      }
+
+      // We may end up calling addDataToSnapshot_() repeatedly (once for each
+      // process). To avoid this from slowing us down we do bulk updates on a
+      // timer.
+      this.updateFlatDataSoon_();
     },
 
-    updateMergedDataSoon_: function() {
-      if (this.updateMergedDataPending_) {
+    updateFlatDataSoon_: function() {
+      if (this.updateFlatDataPending_) {
         // If a delayed task has already been posted to re-merge the data,
         // then we don't need to do anything extra.
         return;
       }
 
-      // Otherwise schedule updateMergeData_() to be called later. We want it to
+      // Otherwise schedule updateFlatData_() to be called later. We want it to
       // be called no more than once every PROCESS_DATA_DELAY_MS milliseconds.
 
-      if (this.lastUpdateMergedDataTime_ == undefined)
-        this.lastUpdateMergedDataTime_ = 0;
+      if (this.lastUpdateFlatDataTime_ == undefined)
+        this.lastUpdateFlatDataTime_ = 0;
 
-      var timeSinceLastMerge = getTimeMillis() - this.lastUpdateMergedDataTime_;
+      var timeSinceLastMerge = getTimeMillis() - this.lastUpdateFlatDataTime_;
       var timeToWait = Math.max(0, PROCESS_DATA_DELAY_MS - timeSinceLastMerge);
 
       var functionToRun = function() {
         // Do the actual update.
-        this.updateMergedData_();
+        this.updateFlatData_();
         // Keep track of when we last ran.
-        this.lastUpdateMergedDataTime_ = getTimeMillis();
-        this.updateMergedDataPending_ = false;
+        this.lastUpdateFlatDataTime_ = getTimeMillis();
+        this.updateFlatDataPending_ = false;
       }.bind(this);
 
-      this.updateMergedDataPending_ = true;
+      this.updateFlatDataPending_ = true;
       window.setTimeout(functionToRun, timeToWait);
     },
 
+    /**
+     * Returns a list of the currently selected snapshots. This list is
+     * guaranteed to be of length 1 or 2.
+     */
+    getSelectedSnapshotIndexes_: function() {
+      var indexes = this.getSelectedSnapshotBoxes_();
+      for (var i = 0; i < indexes.length; ++i)
+        indexes[i] = indexes[i].__index;
+      return indexes;
+    },
+
+    /**
+     * Same as getSelectedSnapshotIndexes_(), only it returns the actual
+     * checkbox input DOM nodes rather than the snapshot ID.
+     */
+    getSelectedSnapshotBoxes_: function() {
+      // Figure out which snaphots to use for our data.
+      var boxes = [];
+      for (var i = 0; i < this.snapshots_.length; ++i) {
+        var box = this.getSnapshotCheckbox_(i);
+        if (box.checked)
+          boxes.push(box);
+      }
+      return boxes;
+    },
+
+    /**
+     * This function should be called any time a snapshot dependency for what is
+     * being displayed on the screen has changed. It will re-calculate the
+     * difference between the two snapshots and update flatData_.
+     */
+    updateFlatData_: function() {
+      var summaryDiv = $(SNAPSHOT_SELECTION_SUMMARY_ID);
+
+      var selectedSnapshots = this.getSelectedSnapshotIndexes_();
+      if (selectedSnapshots.length == 1) {
+        // If only one snapshot is chosen then we will display that snapshot's
+        // data in its entirety.
+        this.flatData_ = this.snapshots_[selectedSnapshots[0]].flatData;
+
+        // Don't bother displaying any text when just 1 snapshot is selected,
+        // since it is obvious what this should do.
+        summaryDiv.innerText = '';
+      } else if (selectedSnapshots.length == 2) {
+        // Otherwise if two snapshots were chosen, show the difference between
+        // them.
+        var snapshot1 = this.snapshots_[selectedSnapshots[0]];
+        var snapshot2 = this.snapshots_[selectedSnapshots[1]];
+
+        this.flatData_ =
+            subtractSnapshots(snapshot1.flatData, snapshot2.flatData);
+
+        var timeDeltaInSeconds =
+            ((snapshot2.time - snapshot1.time) / 1000).toFixed(0);
+
+        // Explain that what is being shown is the difference between two
+        // snapshots.
+        summaryDiv.innerText =
+            'Showing the difference between snapshots #' +
+            selectedSnapshots[0] + ' and #' +
+            selectedSnapshots[1] + ' (' + timeDeltaInSeconds +
+            ' seconds worth of data)';
+      } else {
+        // This shouldn't be possible...
+        throw 'Unexpected number of selected snapshots';
+      }
+
+      // Recompute mergedData_ (since it is derived from flatData_)
+      this.updateMergedData_();
+    },
+
     updateMergedData_: function() {
       // Recompute mergedData_.
       this.mergedData_ = mergeRows(this.flatData_,
                                    this.getMergeColumns_(),
                                    this.shouldMergeSimilarThreads_());
 
       // Recompute filteredData_ (since it is derived from mergedData_)
       this.updateFilteredData_();
     },
 
@@ skipping 293 matching lines @@
         } else {
           settings = {limit: INITIAL_GROUP_ROW_LIMIT};
         }
         if (opt_create)
           this.groupDisplaySettings_[groupKey] = settings;
       }
       return settings;
     },
 
     init_: function() {
+      this.snapshots_ = [];
+
+      // Start fetching the data from the browser; this will be our snapshot #0.
+      this.takeSnapshot_();
+
       // 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,
@@ skipping 12 matching lines @@
       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_();
 
-      $(EDIT_COLUMNS_LINK_ID).onclick = this.toggleEditColumns_.bind(this);
+      $(EDIT_COLUMNS_LINK_ID).onclick =
+          toggleNodeDisplay.bind(null, $(EDIT_COLUMNS_ROW));
+
+      $(TOGGLE_SNAPSHOTS_LINK_ID).onclick =
+          toggleNodeDisplay.bind(null, $(SNAPSHOTS_ROW));
 
       $(MERGE_SIMILAR_THREADS_CHECKBOX_ID).onchange =
           this.onMergeSimilarThreadsCheckboxChanged_.bind(this);
 
       $(RESET_DATA_LINK_ID).onclick =
           g_browserBridge.sendResetData.bind(g_browserBridge);
+
+      $(TAKE_SNAPSHOT_BUTTON_ID).onclick = this.takeSnapshot_.bind(this);
     },
 
-    toggleEditColumns_: function() {
-      var n = $(EDIT_COLUMNS_ROW);
-      if (n.style.display == '') {
-        n.style.display = 'none';
-      } else {
-        n.style.display = '';
+    takeSnapshot_: function() {
+      // Start a new empty snapshot. Make note of the current time, so we know
+      // when the snaphot was taken.
+      this.snapshots_.push({flatData: [], time: getTimeMillis()});
+
+      // Update the UI to reflect the new snapshot.
+      this.addSnapshotToList_(this.snapshots_.length - 1);
+
+      // Ask the browser for the profiling data. We will receive the data
+      // later through a callback to addDataToSnapshot_().
+      g_browserBridge.sendGetData();
+    },
+
+    getSnapshotCheckbox_: function(i) {
+      return $(this.getSnapshotCheckboxId_(i));
+    },
+
+    getSnapshotCheckboxId_: function(i) {
+      return 'snapshotCheckbox-' + i;
+    },
+
+    addSnapshotToList_: function(i) {
+      var tbody = $('snapshots-tbody');
+
+      var tr = addNode(tbody, 'tr');
+
+      var id = this.getSnapshotCheckboxId_(i);
+
+      var checkboxCell = addNode(tr, 'td');
+      var checkbox = addNode(checkboxCell, 'input');
+      checkbox.type = 'checkbox';
+      checkbox.id = id;
+      checkbox.__index = i;
+      checkbox.onclick = this.onSnapshotCheckboxChanged_.bind(this);
+
+      addNode(tr, 'td', '#' + i);
+
+      var labelCell = addNode(tr, 'td');
+      var l = addNode(labelCell, 'label');
+
+      var dateString = new Date(this.snapshots_[i].time).toLocaleString();
+      addText(l, dateString);
+      l.htmlFor = id;
+
+      // If we are on snapshot 0, make it the default.
+      if (i == 0) {
+        checkbox.checked = true;
+        checkbox.__time = getTimeMillis();
+        this.updateSnapshotCheckboxStyling_();
       }
     },
 
+    updateSnapshotCheckboxStyling_: function() {
+      for (var i = 0; i < this.snapshots_.length; ++i) {
+        var checkbox = this.getSnapshotCheckbox_(i);
+        checkbox.parentNode.parentNode.className =
+            checkbox.checked ? 'selected_snapshot' : '';
+      }
+    },
+
+    onSnapshotCheckboxChanged_: function(event) {
+      // Keep track of when we clicked this box (for when we need to uncheck
+      // older boxes).
+      event.target.__time = getTimeMillis();
+
+      // Find all the checked boxes. Either 1 or 2 can be checked. If a third
+      // was just checked, then uncheck one of the earlier ones so we only have
+      // 2.
+      var checked = this.getSelectedSnapshotBoxes_();
+      checked.sort(function(a, b) { return b.__time - a.__time; });
+      if (checked.length > 2) {
+        for (var i = 2; i < checked.length; ++i)
+          checked[i].checked = false;
+        checked.length = 2;
+      }
+
+      // We should always have at least 1 selection. Prevent the user from
+      // unselecting the final box.
+      if (checked.length == 0)
+        event.target.checked = true;
+
+      this.updateSnapshotCheckboxStyling_();
+
+      // Recompute flatData_ (since it is derived from selected snapshots).
+      this.updateFlatData_();
+    },
+
     fillSelectionCheckboxes_: function(parent) {
       this.selectionCheckboxes_ = {};
 
       var onChangeFunc = this.onSelectCheckboxChanged_.bind(this);
 
       for (var i = 0; i < ALL_TABLE_COLUMNS.length; ++i) {
         var key = ALL_TABLE_COLUMNS[i];
         var checkbox = addLabeledCheckbox(parent, getNameForKey(key));
         checkbox.checked = true;
         checkbox.onchange = onChangeFunc;
@@ skipping 242 matching lines @@
           groupKey.push(entry);
         }
 
         return JSON.stringify(groupKey);
       };
     },
   };
 
   return MainView;
 })();