Refactor diagnostic spans to share a polymer behavior.

tracing/tracing/value/ui/related_histogram_map_span.html

Index: tracing/tracing/value/ui/related_histogram_map_span.html
diff --git a/tracing/tracing/value/ui/related_histogram_map_span.html b/tracing/tracing/value/ui/related_histogram_map_span.html
index 1700da0b39e521721d8439aef9cde07c6b6aca90..0bdf970631cd8d591ca96638467552d6eed31143 100644
--- a/tracing/tracing/value/ui/related_histogram_map_span.html
+++ b/tracing/tracing/value/ui/related_histogram_map_span.html
@@ -7,6 +7,7 @@ found in the LICENSE file.
 
 <link rel="import" href="/tracing/ui/analysis/analysis_link.html">
 <link rel="import" href="/tracing/ui/base/table.html">
+<link rel="import" href="/tracing/value/ui/diagnostic_span_behavior.html">
 <link rel="import" href="/tracing/value/ui/scalar_span.html">
 
 <dom-module id="tr-v-ui-related-histogram-map-span">
@@ -14,52 +15,48 @@ found in the LICENSE file.
     <tr-ui-b-table id="table"></tr-ui-b-table>
   </template>
 </dom-module>
+
 <script>
 'use strict';
-Polymer({
-  is: 'tr-v-ui-related-histogram-map-span',
-
-  ready() {
-    this.diagnostic_ = undefined;
-    this.$.table.showHeader = false;
-    this.$.table.tableColumns = [
-      {value: row => row[0]},
-      {value: row => row[1]},
-    ];
-  },
-
-  get diagnostic() {
-    return this.diagnostic_;
-  },
-
-  set diagnostic(d) {
-    this.diagnostic_ = d;
-    this.updateContents_();
-  },
-
-  updateContents_() {
-    Polymer.dom(this).textContent = '';
-
-    const rows = [];
-
-    const histogramNames = new Set();
-    for (const [name, hist] of this.diagnostic) {
-      histogramNames.add(hist.name);
-    }
-    if (histogramNames.size > 1) {
-      const link = document.createElement('tr-ui-a-analysis-link');
-      link.setSelectionAndContent(Array.from(histogramNames), 'Select All');
-      rows.push([link, '']);
+tr.exportTo('tr.v.ui', function() {
+  Polymer({
+    is: 'tr-v-ui-related-histogram-map-span',
+    behaviors: [tr.v.ui.DIAGNOSTIC_SPAN_BEHAVIOR],
+
+    ready() {
+      this.$.table.showHeader = false;
+      this.$.table.tableColumns = [
+        {value: row => row[0]},
+        {value: row => row[1]},
+      ];
+    },
+
+    updateContents_() {
+      Polymer.dom(this).textContent = '';
+
+      const rows = [];
+
+      const histogramNames = new Set();
+      for (const [name, hist] of this.diagnostic) {
+        histogramNames.add(hist.name);
+      }
+      if (histogramNames.size > 1) {
+        const link = document.createElement('tr-ui-a-analysis-link');
+        link.setSelectionAndContent(Array.from(histogramNames), 'Select All');
+        rows.push([link, '']);
+      }
+
+      for (const [name, hist] of this.diagnostic) {
+        const link = document.createElement('tr-ui-a-analysis-link');
+        link.setSelectionAndContent([hist.name], name);
+        const scalarSpan = tr.v.ui.createScalarSpan(hist);
+        rows.push([link, scalarSpan]);
+      }
+      this.$.table.tableRows = rows;
+      this.$.table.rebuild();
     }
+  });
 
-    for (const [name, hist] of this.diagnostic) {
-      const link = document.createElement('tr-ui-a-analysis-link');
-      link.setSelectionAndContent([hist.name], name);
-      const scalarSpan = tr.v.ui.createScalarSpan(hist);
-      rows.push([link, scalarSpan]);
-    }
-    this.$.table.tableRows = rows;
-    this.$.table.rebuild();
-  }
+  return {};
 });
 </script>