Add Function based profile tree

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">
 
 <polymer-element name="cpu-profile" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <nav-bar>
       <top-nav-menu></top-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="{{ clear }}" label="Clear"></nav-refresh>
       <nav-control></nav-control>
     </nav-bar>
     <style>
       .table {
         border-collapse: collapse!important;
         width: 100%;
         margin-bottom: 20px
+        table-layout: fixed;
       }
       .table thead > tr > th,
       .table tbody > tr > th,
       .table tfoot > tr > th,
       .table thead > tr > td,
       .table tbody > tr > td,
       .table tfoot > tr > td {
         padding: 8px;
         vertical-align: top;
       }
@@ skipping 80 matching lines @@
         </div>
         <div class="memberItem">
          <div class="memberName">Sample count</div>
          <div class="memberValue">{{ sampleCount }}</div>
         </div>
         <div class="memberItem">
          <div class="memberName">Sample rate</div>
          <div class="memberValue">{{ sampleRate }} Hz</div>
         </div>
         <div class="memberItem">
-         <div class="memberName">Sample depth</div>
-         <div class="memberValue">{{ sampleDepth }} stack frames</div>
+         <div class="memberName">Stack depth</div>
+         <div class="memberValue">{{ stackDepth }} stack frames</div>
         </div>
         <div class="memberItem">
          <div class="memberName">Display cutoff</div>
          <div class="memberValue">{{ displayCutoff }}</div>
         </div>
         <div class="memberItem">
          <div class="memberName">Tags</div>
          <div class="memberValue">
           <select value="{{tagSelector}}">
             <option value="UserVM">User &gt; VM</option>
             <option value="UserOnly">User</option>
             <option value="VMUser">VM &gt; User</option>
             <option value="VMOnly">VM</option>
             <option value="None">None</option>
           </select>
          </div>
         </div>
+        <div class="memberItem">
+          <div class="memberName">Mode</div>
+          <div class="memberValue">
+            <select value="{{modeSelector}}">
+              <option value="Code">Code</option>
+              <option value="Function">Function</option>
+            </select>
+          </div>
+        </div>
       </div>
       <hr>
-      <table id="tableTree" class="table">
-        <thead id="tableTreeheader">
-          <tr>
-            <th>Method</th>
-            <th>Self</th>
-          </tr>
+      <table class="table">
+        <thead id="treeHeader">
+        <tr>
+          <th>Method</th>
+          <th>Self</th>
+        </tr>
         </thead>
-        <tbody id="tableTreeBody">
+        <tbody id="treeBody">
         </tbody>
       </table>
+      <hr>
     </div>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="cpu_profile.dart"></script>