Support save/restore in about:profiler

chrome/browser/resources/profiler/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,
@@ skipping 86 matching lines @@
 
   // 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';
+  var TAKE_SNAPSHOT_BUTTON_ID = 'take-snapshot-button';
+
+  var SAVE_SNAPSHOTS_BUTTON_ID = 'save-snapshots-button';
+  var SNAPSHOT_FILE_LOADER_ID = 'snapshot-file-loader';
+  var LOAD_ERROR_ID = 'file-load-error';
+
+  var DOWNLOAD_IFRAME_ID = 'download-iframe';
 
   // --------------------------------------------------------------------------
   // 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.
   //
@@ skipping 674 matching lines @@
    * Toggle a node between hidden/invisible.
    */
   function toggleNodeDisplay(n) {
     if (n.style.display == '') {
       n.style.display = 'none';
     } else {
       n.style.display = '';
     }
   }
 
+  /**
+   * Set the visibility state of a node.
+   */
+  function setNodeDisplay(n, visible) {
+    if (visible) {
+      n.style.display = '';
+    } else {
+      n.style.display = 'none';
+    }
+  }
+
   // --------------------------------------------------------------------------
   // 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) {
     computeDataRowAverages(e);
     e[KEY_SOURCE_LOCATION] = e[KEY_FILE_NAME] + ' [' + e[KEY_LINE_NUMBER] + ']';
@@ skipping 384 matching lines @@
     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;
 
+      // Save the browser's representation of the data
+      snapshot.origData.push(data);
+
       // 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 = [];
 
         newRow[KEY_PROCESS_ID] = pid;
         newRow[KEY_PROCESS_TYPE] = ptype;
@@ skipping 89 matching lines @@
 
     /**
      * Re-draw the description that explains which snapshots are currently
      * selected (if two snapshots were selected we explain that the *difference*
      * between them is being displayed).
      */
     updateSnapshotSelectionSummaryDiv_: function() {
       var summaryDiv = $(SNAPSHOT_SELECTION_SUMMARY_ID);
 
       var selectedSnapshots = this.getSelectedSnapshotIndexes_();
-      if (selectedSnapshots.length == 1) {
+      if (selectedSnapshots.length == 0) {
+        // This can occur during an attempt to load a file or following file
+        // load failure.  We just ignore it and move on.
+      } else 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]];
 
         var timeDeltaInSeconds =
@@ skipping 406 matching lines @@
       $(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);
+
+      $(SAVE_SNAPSHOTS_BUTTON_ID).onclick = this.saveSnapshots_.bind(this);
+      $(SNAPSHOT_FILE_LOADER_ID).onchange = this.loadFileChanged_.bind(this);
     },
 
     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()});
+      this.snapshots_.push({flatData: [], origData: [], 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();
     },
 
+    saveSnapshots_: function() {
+      var snapshots = [];
+      for (var i = 0; i < this.snapshots_.length; ++i) {
+        snapshots.push({ data: this.snapshots_[i].origData,
+                         timestamp: Math.floor(
+                                 this.snapshots_[i].time / 1000) });
+      }
+
+      var dump = {
+        'userAgent': navigator.userAgent,
+        'version': 1,
+        'snapshots': snapshots
+      }
+
+      var dumpText = JSON.stringify(dump, null, ' ');
+      var blobBuilder = new WebKitBlobBuilder();
+      blobBuilder.append(dumpText, 'native');
+      var textBlob = blobBuilder.getBlob('octet/stream');
+      var blobUrl = window.webkitURL.createObjectURL(textBlob);
+      $(DOWNLOAD_IFRAME_ID).src = blobUrl;
+    },
+
+    loadFileChanged_: function() {
+      this.loadSnapshots_($(SNAPSHOT_FILE_LOADER_ID).files[0])
+    },
+
+    loadSnapshots_: function(file) {
+      if (file) {
+        var fileReader = new FileReader();
+
+        fileReader.onload = this.onLoadSnapshotsFile_.bind(this, file);
+        fileReader.onerror = this.onLoadSnapshotsFileError_.bind(this, file);
+
+        fileReader.readAsText(file);
+      }
+    },
+
+    onLoadSnapshotsFile_: function(file, event) {
+      try {
+        var parsed = null;
+        parsed = JSON.parse(event.target.result)
+
+        if (parsed.version != 1) {
+          throw new Error('Unrecognized version: ' + parsed.version);
+        }
+
+        if (parsed.snapshots.length < 1) {
+          throw new Error('File contains no data');
+        }
+
+        this.displayLoadedFile_(file, parsed);
+        this.hideFileLoadError_();
+      } catch (error) {
+        this.displayFileLoadError_('File load failure: ' + error.message);
+      }
+    },
+
+    clearExistingSnapshots_: function() {
+      var tbody = $('snapshots-tbody');
+      this.snapshots_ = [];
+      tbody.innerHTML = '';
+      this.updateMergedDataSoon_();
+    },
+
+    displayLoadedFile_: function (file, content) {
+      this.clearExistingSnapshots_();
+      $(TAKE_SNAPSHOT_BUTTON_ID).disabled = true;
+      $(SAVE_SNAPSHOTS_BUTTON_ID).disabled = true;
+
+      if (content.snapshots.length > 1) {
+        setNodeDisplay($(SNAPSHOTS_ROW), true);
+      }
+
+      for (var i = 0; i < content.snapshots.length; ++i) {
+        var snapshot = content.snapshots[i];
+        this.snapshots_.push({flatData: [], origData: [],
+                              time: snapshot.timestamp * 1000});
+        this.addSnapshotToList_(this.snapshots_.length - 1);
+        var snapshotData = snapshot.data;
+        for (var j = 0; j < snapshotData.length; ++j){
+          this.addDataToSnapshot(snapshotData[j]);
+        }
+      }
+      this.redrawData_();
+    },
+
+    onLoadSnapshotsFileError_: function(file, filedata) {
+      this.displayFileLoadError_('Error loading ' + file.name);
+    },
+
+    displayFileLoadError_: function(message) {
+      $(LOAD_ERROR_ID).textContent = message;
+      $(LOAD_ERROR_ID).hidden = false;
+    },
+
+    hideFileLoadError_: function() {
+      $(LOAD_ERROR_ID).textContent = '';
+      $(LOAD_ERROR_ID).hidden = true;
+    },
+
     getSnapshotCheckbox_: function(i) {
       return $(this.getSnapshotCheckboxId_(i));
     },
 
     getSnapshotCheckboxId_: function(i) {
       return 'snapshotCheckbox-' + i;
     },
 
     addSnapshotToList_: function(i) {
       var tbody = $('snapshots-tbody');
@@ skipping 317 matching lines @@
           groupKey.push(entry);
         }
 
         return JSON.stringify(groupKey);
       };
     },
   };
 
   return MainView;
 })();