Refactor histogram-set-view to an MVC pattern.

tracing/tracing/value/ui/histogram_set_view_test.html

Index: tracing/tracing/value/ui/histogram_set_view_test.html
diff --git a/tracing/tracing/value/ui/histogram_set_view_test.html b/tracing/tracing/value/ui/histogram_set_view_test.html
index 95d1211fe0f0427ca1cb782a2fe923c4d71f828e..ae6cbdeba091165122430817b569a06a0965d370 100644
--- a/tracing/tracing/value/ui/histogram_set_view_test.html
+++ b/tracing/tracing/value/ui/histogram_set_view_test.html
@@ -7,14 +7,13 @@ found in the LICENSE file.
 
 <link rel="import" href="/tracing/value/histogram.html">
 <link rel="import" href="/tracing/value/histogram_set.html">
-<link rel="import" href="/tracing/value/ui/histogram_set_table.html">
 <link rel="import" href="/tracing/value/ui/histogram_set_view.html">
 
 <script>
 'use strict';
 
 tr.b.unittest.testSuite(function() {
-  test('instantiate0', function() {
+  test('instantiate0', async function() {
     let view = document.createElement('tr-v-ui-histogram-set-view');
     let histograms = new tr.v.HistogramSet();
 
@@ -25,7 +24,49 @@ tr.b.unittest.testSuite(function() {
     histograms.addHistogram(hist);
 
     this.addHTMLOutput(view);
-    view.histograms = histograms;
+    await view.build(histograms);
+
+    assert.strictEqual('none', getComputedStyle(
+        tr.b.findDeepElementMatchingPredicate(
+            view, e => e.textContent === 'zero Histograms')).display);
+    assert.strictEqual('block', getComputedStyle(
+        tr.b.findDeepElementMatchingPredicate(
+            view, e => e.id === 'container')).display);
+  });
+
+  test('implicitUndefinedHistogramSet', async function() {
+    const view = document.createElement('tr-v-ui-histogram-set-view');
+    this.addHTMLOutput(view);
+    assert.strictEqual('block', getComputedStyle(
+        tr.b.findDeepElementMatchingPredicate(
+            view, e => e.textContent === 'zero Histograms')).display);
+    assert.strictEqual('none', getComputedStyle(
+        tr.b.findDeepElementMatchingPredicate(
+            view, e => e.id === 'container')).display);
+  });
+
+  test('explicitUndefinedHistogramSet', async function() {
+    const view = document.createElement('tr-v-ui-histogram-set-view');
+    this.addHTMLOutput(view);
+    view.build(undefined);
+    assert.strictEqual('block', getComputedStyle(
+        tr.b.findDeepElementMatchingPredicate(
+            view, e => e.textContent === 'zero Histograms')).display);
+    assert.strictEqual('none', getComputedStyle(
+        tr.b.findDeepElementMatchingPredicate(
+            view, e => e.id === 'container')).display);
+  });
+
+  test('emptyHistogramSet', async function() {
+    const view = document.createElement('tr-v-ui-histogram-set-view');
+    this.addHTMLOutput(view);
+    view.build(new tr.v.HistogramSet());
+    assert.strictEqual('block', getComputedStyle(
+        tr.b.findDeepElementMatchingPredicate(
+            view, e => e.textContent === 'zero Histograms')).display);
+    assert.strictEqual('none', getComputedStyle(
+        tr.b.findDeepElementMatchingPredicate(
+            view, e => e.id === 'container')).display);
   });
 });
 </script>