Refactor diagnostic spans to share a polymer behavior.

tracing/tracing/value/ui/date_range_span.html

Index: tracing/tracing/value/ui/date_range_span.html
diff --git a/tracing/tracing/value/ui/date_range_span.html b/tracing/tracing/value/ui/date_range_span.html
index dd006c5c342849c529f2d7d11b2e864ab0e7f255..29773057810985eecc804c5bf7bbfdc3ccfb129c 100644
--- a/tracing/tracing/value/ui/date_range_span.html
+++ b/tracing/tracing/value/ui/date_range_span.html
@@ -5,39 +5,31 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 
-<link rel="import" href="/tracing/ui/base/base.html">
+<link rel="import" href="/tracing/value/ui/diagnostic_span_behavior.html">
 
 <dom-module id="tr-v-ui-date-range-span">
   <template>
     <content></content>
   </template>
+</dom-module>
 
-  <script>
-  'use strict';
+<script>
+'use strict';
+tr.exportTo('tr.v.ui', function() {
   Polymer({
     is: 'tr-v-ui-date-range-span',
-
-    ready() {
-      this.diagnostic_ = undefined;
-    },
-
-    get diagnostic() {
-      return this.diagnostic_;
-    },
-
-    set diagnostic(d) {
-      this.diagnostic_ = d;
-      this.updateContents_();
-    },
+    behaviors: [tr.v.ui.DIAGNOSTIC_SPAN_BEHAVIOR],
 
     updateContents_() {
       if (this.diagnostic === undefined) {
-        this.textContent = '';
+        Polymer.dom(this).textContent = '';
         return;
       }
 
-      this.textContent = this.diagnostic.toString();
+      Polymer.dom(this).textContent = this.diagnostic.toString();
     }
   });
-  </script>
-</dom-module>
+
+  return {};
+});
+</script>