Factor cpu profile tree into separate element and expose allocation tracing UI

runtime/observatory/lib/src/elements/cpu_profile.html

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="code_ref.html">
 <link rel="import" href="function_ref.html">
 <link rel="import" href="nav_bar.html">
 <link rel="import" href="observatory_element.html">
 <link rel="import" href="sliding_checkbox.html">
 <link rel="import" href="view_footer.html">
 
+<polymer-element name="cpu-profile-tree" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+    .infoBox {
+      position: absolute;
+      top: 100%;
+      left: 0%;
+      z-index: 999;
+      opacity: 1;
+      padding: 1em;
+      background-color: #ffffff;
+      border-left: solid 2px #ECECEC;
+      border-bottom: solid 2px #ECECEC;
+      border-right: solid 2px #ECECEC;
+    }
+    .full-width {
+      width: 100%;
+    }
+    .tree {
+      border-spacing: 0px;
+      width: 100%;
+      margin-bottom: 20px
+      vertical-align: middle;
+    }
+    .tree tbody tr {
+      animation: fadeIn 0.5s;
+      -moz-animation: fadeIn 0.5s;
+      -webkit-animation: fadeIn 0.5s;
+    }
+    .tree tbody tr:hover {
+      background-color: #FAFAFA;
+    }
+    .tree tr td:first-child,
+    .tree tr th:first-child {
+      width: 100%;
+    }
+    .tree thead > tr > th {
+      padding: 8px;
+      vertical-align: bottom;
+      text-align: left;
+      border-bottom: 1px solid #ddd;
+    }
+    tr {
+      background-color: #FFFFFF;
+    }
+    tbody tr {
+      animation: fadeIn 0.5s;
+      -moz-animation: fadeIn 0.5s;
+      -webkit-animation: fadeIn 0.5s;
+    }
+    tbody tr:hover {
+      background-color: #FAFAFA;
+    }
+    tr td:first-child,
+    tr th:first-child {
+      width: 100%;
+    }
+    </style>
+    <table class="full-width tree">
+      <thead id="treeHeader">
+      <tr>
+        <th>Method</th>
+        <th>Executing</th>
+      </tr>
+      </thead>
+      <tbody id="treeBody">
+      </tbody>
+    </table>
+  </template>
+</polymer-element>
+
 <polymer-element name="cpu-profile-table" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
       <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
       <nav-menu link="{{ makeLink('/profiler-table', isolate) }}" anchor="cpu profile (table)" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
       <nav-refresh callback="{{ clearCpuProfile }}" label="Clear"></nav-refresh>
@@ skipping 243 matching lines @@
       <template if="{{ focusedFunction != null }}">
         <span>Filtered tree: </span>
         <function-ref ref="{{ focusedFunction }}"></function-ref>
       </template>
       <template if="{{ focusedFunction == null }}">
         <span>No focused function</span>
       </template>
     </div>
     <div class="flex-row centered">
       <div class="flex-item-90-percent outlined" style="margin: 16px; margin-left: 8px; margin-right: 8px">
-        <table class="full-width tree">
-          <thead id="treeHeader">
-          <tr>
-            <th>Method</th>
-            <th>Executing</th>
-          </tr>
-          </thead>
-          <tbody id="treeBody">
-          </tbody>
-        </table>
+        <cpu-profile-tree id="cpuProfileTree"></cpu-profile-tree>
       </div>
     </div>
   </template>
 </polymer-element>
 
 <polymer-element name="cpu-profile" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
       <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
       <nav-menu link="{{ makeLink('/profiler', isolate) }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
       <nav-refresh callback="{{ clearCpuProfile }}" label="Clear"></nav-refresh>
     </nav-bar>
     <style>
       .tableWell {
         background-color: #ECECEC;
         padding: 0.2em;
       }
-
-      .table {
-        border-spacing: 0px;
-        width: 100%;
-        margin-bottom: 20px
-        vertical-align: middle;
-      }
-
-      tr {
-        background-color: #FFFFFF;
-      }
-
-      tbody tr {
-        animation: fadeIn 0.5s;
-        -moz-animation: fadeIn 0.5s;
-        -webkit-animation: fadeIn 0.5s;
-      }
-
-      tbody tr:hover {
-        background-color: #FAFAFA;
-      }
-
-      tr td:first-child,
-      tr th:first-child {
-        width: 100%;
-      }
-
-      .table thead > tr > th {
-        padding: 8px;
-        vertical-align: bottom;
-        text-align: left;
-        border-bottom: 1px solid #ddd;
-      }
-
-      .infoBox {
-        position: absolute;
-        top: 100%;
-        left: 0%;
-        z-index: 999;
-        opacity: 1;
-        padding: 1em;
-        background-color: #ffffff;
-        border-left: solid 2px #ECECEC;
-        border-bottom: solid 2px #ECECEC;
-        border-right: solid 2px #ECECEC;
-      }
-
       .statusMessage {
         font-size: 150%;
         font-weight: bold;
       }
 
       .statusBox {
         height: 100%;
         padding: 1em;
       }
 
@@ skipping 112 matching lines @@
       <template if="{{ state == 'Loaded' && directionSelector == 'Up' }}">
         <br>
         <div class="statusBox shadow">
           <div>Tree is rooted at executing function / code.</div>
           <br>
           <div>Child nodes are callers.</div>
         </div>
       </template>
       <br><br>
       <div class="tableWell shadow">
-        <table class="table">
-          <thead id="treeHeader">
-          <tr>
-            <th>Method</th>
-            <th>Executing</th>
-          </tr>
-          </thead>
-          <tbody id="treeBody">
-          </tbody>
-        </table>
+        <cpu-profile-tree id="cpuProfileTree"></cpu-profile-tree>
       </div>
     </div>
     <view-footer></view-footer>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="cpu_profile.dart"></script>