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

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

 <link rel="import" href="../../../../packages/polymer/polymer.html">
+<link rel="import" href="action_link.html">
+<link rel="import" href="cpu_profile.html">
 <link rel="import" href="curly_block.html">
 <link rel="import" href="eval_box.html">
 <link rel="import" href="eval_link.html">
 <link rel="import" href="field_ref.html">
 <link rel="import" href="function_ref.html">
 <link rel="import" href="instance_ref.html">
 <link rel="import" href="library_ref.html">
 <link rel="import" href="nav_bar.html">
 <link rel="import" href="observatory_element.html">
 <link rel="import" href="script_inset.html">
 <link rel="import" href="script_ref.html">
 <link rel="import" href="view_footer.html">
 
 <polymer-element name="class-view" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <vm-nav-menu vm="{{ cls.isolate.vm }}"></vm-nav-menu>
       <isolate-nav-menu isolate="{{ cls.isolate }}"></isolate-nav-menu>
       <library-nav-menu library="{{ cls.library }}"></library-nav-menu>
       <class-nav-menu cls="{{ cls }}" last="{{ true }}"></class-nav-menu>
+      <nav-refresh callback="{{ refreshAllocationProfile }}" label="Refresh Allocation Profile"></nav-refresh>
       <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav-refresh>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
     </nav-bar>
 
     <div class="content">
       <h1>
         <template if="{{ cls.isAbstract }}">
           abstract
         </template>
         <template if="{{ cls.isPatch }}">
@@ skipping 165 matching lines @@
                   {{ most.retainedSize | formatSize }}<any-service-ref ref="{{ most }}"></any-service-ref><br>
                 </template>
               </template>
             </div>
           </div>
         </template>
     </div>
 
     <hr>
 
+    <div class="content">
+      <h2>Allocations</h2>
+      <div class="memberList">
+        <template if="{{ cls.traceAllocations }}">
+          <div class="memberItem">
+            <div class="memberName">Tracing allocations?</div>
+            <div class="memberValue">
+              <span>Yes</span><action-link label="disable" callback="{{ toggleAllocationTrace }}"></action-link>
+            </div>
+          </div>
+        </template>
+        <template if="{{ !cls.traceAllocations }}">
+          <div class="memberItem">
+            <div class="memberName">Tracing allocations?</div>
+            <div class="memberValue">
+              <span>No</span><action-link label="enable" callback="{{ toggleAllocationTrace }}"></action-link>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="flex-row centered">
+        <div class="flex-item-90-percent outlined" style="margin: 16px; margin-left: 8px; margin-right: 8px">
+          <cpu-profile-tree id="cpuProfileTree"></cpu-profile-tree>
+        </div>
+      </div>
+    </div>
+
+    <hr>
+
     <div class="content-centered-big">
       <source-inset location="{{ cls.location }}">
       </source-inset>
     </div>
 
     <view-footer></view-footer>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="class_view.dart"></script>