Refactor histogram-set-view to an MVC pattern.

tracing/tracing/ui/side_panel/metrics_side_panel.html

Index: tracing/tracing/ui/side_panel/metrics_side_panel.html
diff --git a/tracing/tracing/ui/side_panel/metrics_side_panel.html b/tracing/tracing/ui/side_panel/metrics_side_panel.html
index 9396ac54e20ae06195a069c53a49c7985e743585..e7e251856a25a6a022cb1c41883a13bcc3f0c121 100644
--- a/tracing/tracing/ui/side_panel/metrics_side_panel.html
+++ b/tracing/tracing/ui/side_panel/metrics_side_panel.html
@@ -80,6 +80,15 @@ tr.exportTo('tr.ui', function() {
       this.recomputeButton_ = tr.ui.b.createButton(
           'Recompute', this.onRecompute_, this);
       Polymer.dom(this.$.top_left_controls).appendChild(this.recomputeButton_);
+
+      this.$.results.addEventListener('display-ready', () => {
+        this.$.results.style.display = '';
+      });
+    },
+
+    async build(model) {
+      this.model_ = model;
+      await this.updateContents_();
     },
 
     /**
@@ -126,8 +135,7 @@ tr.exportTo('tr.ui', function() {
     },
 
     set model(model) {
-      this.model_ = model;
-      this.updateContents_();
+      this.build(model);
     },
 
     get selection() {
@@ -167,7 +175,7 @@ tr.exportTo('tr.ui', function() {
       }
     },
 
-    updateContents_: function() {
+    updateContents_: async function() {
       Polymer.dom(this.$.error).textContent = '';
       this.$.results.style.display = 'none';
 
@@ -200,8 +208,7 @@ tr.exportTo('tr.ui', function() {
 
       this.recomputeButton_.style.background = '';
 
-      this.$.results.style.display = '';
-      this.$.results.histograms = histograms;
+      await this.$.results.build(histograms);
     }
   });