Hide empty CPU profile on class page

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="sample-buffer-control" extends="observatory-element">
   <template>
@@ skipping 16 matching lines @@
 
     .notice {
       background-color: #fcf8e3;
     }
 
     .red {
       background-color: #f2dede;
     }
     </style>
     <div class="content-centered-big">
-      <h2>Sample buffer</h2>
-      <hr>
+      <template if="{{ state != 'kNotLoaded' }}">
+        <h2>Sample buffer</h2>
+        <hr>
+      </template>
       <template if="{{ state == 'kFetching' }}">
         <div class="statusBox shadow center">
           <div class="statusMessage">Fetching profile from VM...</div>
         </div>
       </template>
       <template if="{{ state == 'kLoading' }}">
         <div class="statusBox shadow center">
           <div class="statusMessage">Loading profile...</div>
         </div>
       </template>
@@ skipping 59 matching lines @@
 <polymer-element name="stack-trace-tree-config" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <style>
     .statusBox {
       height: 100%;
       padding: 1em;
     }
     </style>
     <div class="content-centered-big">
-      <h2>Tree display</h2>
-      <hr>
-      <div class="memberList">
-        <template if="{{ showModeSelector }}">
-          <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>
+      <template if="{{ show }}">
+        <h2>Tree display</h2>
+        <hr>
+        <div class="memberList">
+          <template if="{{ showModeSelector }}">
+            <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>
+          </template>
+          <template if="{{ showDirectionSelector }}">
+            <div class="memberItem">
+              <div class="memberName">Call Tree Direction</div>
+              <div class="memberValue">
+                <select value="{{directionSelector}}">
+                  <option value="Down">Top down</option>
+                  <option value="Up">Bottom up</option>
+                </select>
+              </div>
+            </div>
+          </template>
+        </div>
+        <template if="{{ directionSelector == 'Down' }}">
+          <br>
+          <div class="statusBox shadow">
+            <div>Tree is rooted at main.</div>
+            <br>
+            <div>Child nodes are callees.</div>
           </div>
         </template>
-        <template if="{{ showDirectionSelector }}">
-          <div class="memberItem">
-            <div class="memberName">Call Tree Direction</div>
-            <div class="memberValue">
-              <select value="{{directionSelector}}">
-                <option value="Down">Top down</option>
-                <option value="Up">Bottom up</option>
-              </select>
-            </div>
+        <template if="{{ 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>
-      </div>
-      <template if="{{ directionSelector == 'Down' }}">
-        <br>
-        <div class="statusBox shadow">
-          <div>Tree is rooted at main.</div>
-          <br>
-          <div>Child nodes are callees.</div>
-        </div>
-      </template>
-      <template if="{{ 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>
     </div>
   </template>
 </polymer-element>
 
 <polymer-element name="cpu-profile-tree" extends="observatory-element">
   <template>
     <link rel="stylesheet" href="css/shared.css">
     <style>
     .infoBox {
@@ skipping 44 matching lines @@
       -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">
+    <table id="treeTable" class="full-width tree">
       <thead id="treeHeader">
       <tr>
         <th>Method</th>
         <th>Executing</th>
       </tr>
       </thead>
       <tbody id="treeBody">
       </tbody>
     </table>
   </template>
@@ skipping 237 matching lines @@
     <div class="content-centered-big">
       <div class="tableWell shadow">
         <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>