Support save/restore in 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,
@@ 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 378 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 88 matching lines @@
 
     /**
      * 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 (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.
@@ skipping 383 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: this.snapshots_[i].time });
+      }
+
+      var dump = {
+        // 'browser_version': '' // FIXME fetch this somehow

[eroman, 2011/12/12 23:14:28]

you could include the user agent (navigator.userAgent) to give some version
information.

+        'snapshots': snapshots

[eroman, 2011/12/12 23:14:28]

I suggest putting a version field in the format too, since things invariably
change, and having a required version number specifier can make it easier to
tell.

+      }
+
+      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)
+
+        this.displayLoadedFile_(file, parsed);
+        this.hideFileLoadError_();
+      } catch (error) {
+        this.displayFileLoadError_('File load failure: ' + error.message);
+      }
+    },
+
+    clearExistingSnapshots_: function() {
+      var tbody = $('snapshots-tbody');
+      this.snapshots_ = [];
+      while (tbody.hasChildNodes()) {

[eroman, 2011/12/12 23:14:28]

A more typical way to empty a node is:

tbody.innerHTML = '';

+        tbody.removeChild(tbody.lastChild);
+      }
+      this.updateFlatDataSoon_();
+    },
+
+    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});
+        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 316 matching lines @@
           groupKey.push(entry);
         }
 
         return JSON.stringify(groupKey);
       };
     },
   };
 
   return MainView;
 })();