Add request tracing to Observatory:

runtime/bin/vmservice/observatory/deployed/web/index.html

Index: runtime/bin/vmservice/observatory/deployed/web/index.html
diff --git a/runtime/bin/vmservice/observatory/deployed/web/index.html b/runtime/bin/vmservice/observatory/deployed/web/index.html
index 1a5de8e4b5d4be76570882144507d66a7a680ac4..6d50ef8d0abc2725ea8044be70b31b24ae63955c 100644
--- a/runtime/bin/vmservice/observatory/deployed/web/index.html
+++ b/runtime/bin/vmservice/observatory/deployed/web/index.html
@@ -170,7 +170,7 @@ html /deep/ [layout][start] {
   align-items: flex-start;
 }
 
-html /deep/ [layout][center] {
+html /deep/ [layout][center], html /deep/ [layout][center-center] {
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
@@ -190,7 +190,7 @@ html /deep/ [layout][start-justified] {
   justify-content: flex-start;
 }
 
-html /deep/ [layout][center-justified] {
+html /deep/ [layout][center-justified], html /deep/ [layout][center-center] {
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
@@ -337,6 +337,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -689,6 +696,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -1061,6 +1075,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -1644,6 +1665,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -1921,6 +1949,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -2179,6 +2214,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -2670,6 +2712,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -2940,6 +2989,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -3202,6 +3258,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -3617,6 +3680,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -3872,6 +3942,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -4304,6 +4381,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -4575,6 +4659,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -4989,6 +5080,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -5260,6 +5358,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -5605,6 +5710,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -5885,6 +5997,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -6169,6 +6288,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -6439,6 +6565,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -6802,6 +6935,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -7089,6 +7229,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -7395,6 +7542,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -7663,6 +7817,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -7937,6 +8098,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -8191,6 +8359,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -8492,6 +8667,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -8746,6 +8928,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -9027,6 +9216,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -9281,6 +9477,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -9555,6 +9758,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -9898,6 +10108,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -10152,6 +10369,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -10426,6 +10650,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -10699,6 +10930,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -10953,6 +11191,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -11227,6 +11472,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -11508,6 +11760,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -11782,6 +12041,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -12041,6 +12307,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -12368,6 +12641,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -12630,6 +12910,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -12985,6 +13272,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -13327,6 +13621,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -13716,6 +14017,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -14169,6 +14477,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -14572,6 +14887,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -15083,6 +15405,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -15518,6 +15847,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -15800,6 +16136,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -16085,6 +16428,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -16349,12 +16699,865 @@ hr {
        an observable property on the old element to an invalid type. -->
 </polymer-element>
 
-<polymer-element name="observatory-application" extends="observatory-element">
-  <!-- This element explicitly manages its child elements -->
-</polymer-element>
-
-
-
+<polymer-element name="trace-view" extends="observatory-element">
+   <template>
+    <style>
+/* Global styles */
+* {
+  margin: 0;
+  padding: 0;
+  font: 400 14px 'Montserrat', sans-serif;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.content {
+  padding-left: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+  padding-left: 10%;
+  padding-right: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered-big {
+  padding-left: 5%;
+  padding-right: 5%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+  font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+  display: table;
+}
+
+.memberItem {
+  display: table-row;
+}
+
+.memberName, .memberValue {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
+.monospace {
+  font-family: consolas, courier, monospace;
+  font-size: 1em;
+  line-height: 1.2em;
+  white-space: nowrap;
+}
+
+a {
+  color: #0489c3;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+em {
+  color: inherit;
+  font-style: italic;
+}
+
+b {
+  color: inherit;
+  font-weight: bold;
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+  height: 0;
+  box-sizing: content-box;
+}
+
+.list-group {
+  padding-left: 0;
+  margin-bottom: 20px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+}
+
+.list-group-item:first-child {
+  /* rounded top corners */
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  /* rounded bottom corners */
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-item-fit {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+
+.flex-item-fill {
+  flex-grow: 0;
+  flex-shrink: 1;  /* shrink when pressured */
+  flex-basis: 100%;  /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 40%;
+}
+
+.flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-60-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 80%;
+}
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+  word-wrap: break-word;
+}
+</style>
+
+    <template if="{{ tracer != null }}">
+      <div class="memberList">
+        <template repeat="{{ event in tracer.events }}">
+          <div class="memberItem">
+            <div class="memberSmall">
+              {{ event.timeStamp }}
+            </div>
+            <div class="memberSmall">
+              {{ event.message }}
+              <template if="{{ event.map != null }}">
+                <br>
+                <map-viewer map="{{ event.map }}"></map-viewer>
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
+      <br>
+      <br>
+      <br>
+    </template>
+  </template>
+</polymer-element>
+
+<polymer-element name="map-viewer" extends="observatory-element">
+  <template>
+    <style>
+/* Global styles */
+* {
+  margin: 0;
+  padding: 0;
+  font: 400 14px 'Montserrat', sans-serif;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.content {
+  padding-left: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+  padding-left: 10%;
+  padding-right: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered-big {
+  padding-left: 5%;
+  padding-right: 5%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+  font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+  display: table;
+}
+
+.memberItem {
+  display: table-row;
+}
+
+.memberName, .memberValue {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
+.monospace {
+  font-family: consolas, courier, monospace;
+  font-size: 1em;
+  line-height: 1.2em;
+  white-space: nowrap;
+}
+
+a {
+  color: #0489c3;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+em {
+  color: inherit;
+  font-style: italic;
+}
+
+b {
+  color: inherit;
+  font-weight: bold;
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+  height: 0;
+  box-sizing: content-box;
+}
+
+.list-group {
+  padding-left: 0;
+  margin-bottom: 20px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+}
+
+.list-group-item:first-child {
+  /* rounded top corners */
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  /* rounded bottom corners */
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-item-fit {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+
+.flex-item-fill {
+  flex-grow: 0;
+  flex-shrink: 1;  /* shrink when pressured */
+  flex-basis: 100%;  /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 40%;
+}
+
+.flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-60-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 80%;
+}
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+  word-wrap: break-word;
+}
+</style>
+
+    <template if="{{ map.length > 0 }}">
+      <curly-block callback="{{ expander() }}">
+        <template if="{{ expand }}">
+          <div class="memberList">
+            <template repeat="{{ key in map.keys }}">
+              <div class="memberItem">
+                <div class="memberSmall">{{ key }}</div>
+                <div class="memberSmall">:</div>
+                <div class="memberSmall">
+                  <template if="{{ isMap(map[key]) }}">
+                    <map-viewer map="{{ map[key] }}"></map-viewer>
+                  </template>
+                  <template if="{{ isList(map[key]) }}">
+                    <list-viewer list="{{ map[key] }}"></list-viewer>
+                  </template>
+                  <template if="{{ !isMap(map[key]) &amp;&amp; !isList(map[key]) }}">
+                    {{ map[key] }}
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </curly-block>
+    </template>
+  </template>
+</polymer-element>
+
+<polymer-element name="list-viewer" extends="observatory-element">
+  <template>
+    <style>
+/* Global styles */
+* {
+  margin: 0;
+  padding: 0;
+  font: 400 14px 'Montserrat', sans-serif;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.content {
+  padding-left: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered {
+  padding-left: 10%;
+  padding-right: 10%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.content-centered-big {
+  padding-left: 5%;
+  padding-right: 5%;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+h1 {
+  font: 400 18px 'Montserrat', sans-serif;
+}
+
+.memberList {
+  display: table;
+}
+
+.memberItem {
+  display: table-row;
+}
+
+.memberName, .memberValue {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 14px 'Montserrat', sans-serif;
+}
+
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
+.monospace {
+  font-family: consolas, courier, monospace;
+  font-size: 1em;
+  line-height: 1.2em;
+  white-space: nowrap;
+}
+
+a {
+  color: #0489c3;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+em {
+  color: inherit;
+  font-style: italic;
+}
+
+b {
+  color: inherit;
+  font-weight: bold;
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eee;
+  height: 0;
+  box-sizing: content-box;
+}
+
+.list-group {
+  padding-left: 0;
+  margin-bottom: 20px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+}
+
+.list-group-item:first-child {
+  /* rounded top corners */
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  /* rounded bottom corners */
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius:4px;
+}
+
+/* Flex row container */
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+/* Flex column container */
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-item-fit {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+}
+
+.flex-item-no-shrink {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+
+.flex-item-fill {
+  flex-grow: 0;
+  flex-shrink: 1;  /* shrink when pressured */
+  flex-basis: 100%;  /* try and take 100% */
+}
+
+.flex-item-fixed-1-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 8.3%;
+}
+
+.flex-item-fixed-2-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 16.6%;
+}
+
+.flex-item-fixed-4-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 33.3333%;
+}
+
+.flex-item-fixed-6-12, .flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-fixed-8-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 66.6666%;
+}
+
+.flex-item-fixed-9-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 75%;
+}
+
+
+.flex-item-fixed-12-12 {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 100%;
+}
+
+.flex-item-10-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 10%;
+}
+
+.flex-item-15-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 15%;
+}
+
+.flex-item-20-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 20%;
+}
+
+.flex-item-30-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 30%;
+}
+
+.flex-item-40-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 40%;
+}
+
+.flex-item-50-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 50%;
+}
+
+.flex-item-60-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 60%;
+}
+
+.flex-item-70-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 70%;
+}
+
+.flex-item-80-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 80%;
+}
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+}
+
+.break-wrap {
+  word-wrap: break-word;
+}
+</style>
+
+    <template if="{{ list.length > 0 }}">
+      <curly-block callback="{{ expander() }}">
+        <template if="{{ expand }}">
+          <div class="memberList">
+            <template repeat="{{ element in list }}">
+              <div class="memberItem">
+                <div class="memberSmall">
+                  <template if="{{ isMap(element) }}">
+                    <map-viewer map="{{ element }}"></map-viewer>
+                  </template>
+                  <template if="{{ isList(element) }}">
+                    <list-viewer list="{{ element }}"></list-viewer>
+                  </template>
+                  <template if="{{ !isMap(element) &amp;&amp; !isList(element) }}">
+                    {{ element }}
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </curly-block>
+    </template>
+  </template>
+</polymer-element>
+
+
+<polymer-element name="observatory-application" extends="observatory-element">
+  <!-- This element explicitly manages its child elements -->
+</polymer-element>
+
+
+
 
 
 <polymer-element name="service-exception-view" extends="observatory-element">
@@ -16405,6 +17608,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -16675,6 +17885,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -16951,6 +18168,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -17215,6 +18439,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ -17529,6 +18760,13 @@ h1 {
   font: 400 14px 'Montserrat', sans-serif;
 }
 
+.memberSmall {
+  display: table-cell;
+  vertical-align: top;
+  padding: 3px 0 3px 1em;
+  font: 400 12px 'Montserrat', sans-serif;
+}
+
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;