Display source profiling information in Observatory

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

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="observatory_element.html">
 
 <polymer-element name="icon-refresh" noscript>
   <template>
     <style>
       svg {
         fill: currentColor
       }
     </style>
     <svg width="24" height="24">
       <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
     </svg>
   </template>
 </polymer-element>
 
+<polymer-element name="icon-whatshot" noscript>
+  <template>
+    <style>
+      svg {
+        fill: currentColor
+      }
+    </style>
+    <svg width="24" height="24">
+      <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"></path>
+    </svg>
+  </template>
+</polymer-element>
+
 <polymer-element name="script-inset" extends="observatory-element">
   <template>
     <style>
       a {
         color: #0489c3;
         text-decoration: none;
       }
       a:hover {
         text-decoration: underline;
       }
@@ skipping 82 matching lines @@
         background-color: #e66;
       }
       .unresolvedBreakAnnotation {
         color: white;
         background-color: #cac;
       }
       .resolvedBreakAnnotation {
         color: white;
         background-color: #e66;
       }
+      .notSourceProfile, .noProfile, .coldProfile, .mediumProfile, .hotProfile {
+        display: table-cell;
+        vertical-align: top;
+        font: 400 14px consolas, courier, monospace;
+        width: 4em;
+        text-align: right;
+        cursor: pointer;
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+      .notSourceProfile {
+      }
+      .noProfile {
+        background-color: #e0e0e0;
+      }
+      .coldProfile {
+        background-color: #aea;
+      }
+      .mediumProfile {
+        background-color: #fe9;
+      }
+      .hotProfile {
+        background-color: #faa;
+      }
     </style>
   </template>
 </polymer-element>
 
 <polymer-element name="refresh-button">
   <template>
     <style>
       .refreshButton {
         color: rgba(0,0,0,.3);
       }
@@ skipping 12 matching lines @@
       </template>
       <template if="{{ !busy }}">
         <a on-click="{{ buttonClick }}">
           <icon-refresh id="refreshIcon" class="refreshButton"></icon-refresh>
         </a>
       </template>
     </template>
   </template>
 </polymer-element>
 
+<polymer-element name="toggle-button">
+  <template>
+    <style>
+    </style>
+    <template if="{{ callback != null }}">
+      <template if="{{ enabled }}">
+        <a on-click="{{ buttonClick }}">
+          <content></content>
+        </a>
+      </template>
+      <template if="{{ !enabled }}">
+        <a on-click="{{ buttonClick }}">
+          <content></content>
+        </a>
+      </template>
+    </template>
+  </template>
+</polymer-element>
+
 <polymer-element name="source-inset">
 <template>
   <template if="{{ location != null }}">
     <script-inset script="{{ location.script }}"
                   startPos="{{ location.tokenPos }}"
                   scroller="{{ scroller }}"
                   endPos="{{ location.endTokenPos }}"
                   height="{{ height }}"
                   currentPos="{{ currentPos }}"
                   inDebuggerContext="{{ inDebuggerContext }}"
                   variables="{{ variables }}">
     </script-inset>
   </template>
 </template>
 </polymer-element>
 
 <script type="application/dart" src="script_inset.dart"></script>