Convert chart-json to Histograms.

tracing/tracing/results2_template.html

Index: tracing/tracing/results2_template.html
diff --git a/tracing/tracing/results2_template.html b/tracing/tracing/results2_template.html
index 46481c196a2ad7bed3e1c20b0a3629820df1b13c..79eed386f67b3d121086d808392a2298a78f6d7b 100644
--- a/tracing/tracing/results2_template.html
+++ b/tracing/tracing/results2_template.html
@@ -8,6 +8,7 @@ found in the LICENSE file.
 
 <div id="loading">Loading framework...</div>
 
+<link rel="import" href="/tracing/value/convert_chart_json.html">
 <link rel="import" href="/tracing/value/histogram_set.html">
 <link rel="import" href="/tracing/value/ui/histogram_set_view.html">
 
@@ -21,7 +22,8 @@ class HistogramImporter {
     // exists, and is definitely before the json divs exist.
     this.loadingDiv_ = document.getElementById('loading');
     this.histograms_ = undefined;
-    this.jsonDivs_ = [];
+    this.histogramJsonDivs_ = [];
+    this.chartJsonDivs_ = [];
     this.view_ = undefined;
 
     this.update_('Parsing HTML...');
@@ -52,28 +54,28 @@ class HistogramImporter {
   }
 
   getJsonDivs_() {
-    this.jsonDivs_ = document.getElementsByTagName('histogram-json');
+    this.histogramJsonDivs_ = document.getElementsByTagName('histogram-json');
+    this.chartJsonDivs_ = document.getElementsByTagName('chart-json');
 
-    this.schedule_('Loading Histogram 0 of ' + this.jsonDivs_.length,
+    this.schedule_('Loading Histogram 0 of ' + this.histogramJsonDivs_.length,
         this.loadSomeHistograms_);
   }
 
   get isDoneLoadingHistograms_() {
-    return this.histograms_.length === this.jsonDivs_.length;
+    return this.histograms_.length === this.histogramJsonDivs_.length;
   }
 
   loadSomeHistograms_() {
     var startIndex = this.histograms_.length;
-    var stopIndex = Math.min(startIndex + 100, this.jsonDivs_.length);
+    var stopIndex = Math.min(startIndex + 100, this.histogramJsonDivs_.length);
     for (var i = startIndex; i < stopIndex; ++i) {
-      var dict = JSON.parse(this.jsonDivs_[i].innerHTML);
+      var dict = JSON.parse(this.histogramJsonDivs_[i].innerHTML);
       this.histograms_.addHistogram(tr.v.Histogram.fromDict(dict));
     }
 
     if (!this.isDoneLoadingHistograms_) {
-      this.schedule_(
-          'Loading Histogram ' + stopIndex + ' of ' + this.jsonDivs_.length,
-          this.loadSomeHistograms_);
+      this.schedule_('Loading Histogram ' + stopIndex + ' of ' +
+          this.histogramJsonDivs_.length, this.loadSomeHistograms_);
       return;
     }
 
@@ -83,6 +85,14 @@ class HistogramImporter {
 
   resolveRelationships_() {
     this.histograms_.resolveRelatedHistograms();
+    this.schedule('Loading Chart JSON...', this.loadChartJson_);
+  }
+
+  loadChartJson_() {
+    for (var i = 0; i < this.chartJsonDivs_.length; ++i) {
+      var dict = JSON.parse(this.chartJsonDivs_[i].innerHTML);
+      tr.v.convertChartJson(this.histograms_, dict);
+    }
     this.schedule_('Displaying Histogram table...', this.displayHistograms);
   }
 
@@ -96,8 +106,7 @@ class HistogramImporter {
   }
 
   removeJsonDivs_() {
-    document.body.removeChild(this.jsonDivs_[0].parentNode);
-    delete this.jsonDivs_;
+    document.body.removeChild(this.histogramJsonDivs_[0].parentNode);
   }
 }
 
@@ -105,6 +114,7 @@ var importer = new HistogramImporter();
 
 document.addEventListener('DOMContentLoaded', () => {
   importer.importHistograms();
+  importer = undefined;
 });
 
 })();