Disable applyAuthorStyles

runtime/bin/vmservice/client/lib/src/elements/isolate_profile.html

Index: runtime/bin/vmservice/client/lib/src/elements/isolate_profile.html
diff --git a/runtime/bin/vmservice/client/lib/src/elements/isolate_profile.html b/runtime/bin/vmservice/client/lib/src/elements/isolate_profile.html
index 38298bac11bb331c3429f9221af0408c95170c40..2c0f7cc036bf0df4fa09d07b4e4272839f98a8f6 100644
--- a/runtime/bin/vmservice/client/lib/src/elements/isolate_profile.html
+++ b/runtime/bin/vmservice/client/lib/src/elements/isolate_profile.html
@@ -6,6 +6,7 @@
 </head>
 <polymer-element name="isolate-profile" extends="observatory-element">
   <template>
+    <link rel="stylesheet" href="css/shared.css" />
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
@@ -25,55 +26,157 @@
         padding: 3px 0 3px 1em;
         font: 400 14px 'Montserrat', sans-serif;
       }
-      .monospace {
-        font-family: consolas, courier, monospace;
-        font-size: 1em;
-        line-height: 1.2em;
-        white-space: nowrap;
+      .table {
+        border-collapse: collapse!important;
+        width: 100%;
+        margin-bottom:20px
       }
+      .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;
+      }
+      .table thead > tr > th {
+        vertical-align: bottom;
+        border-bottom:2px solid #ddd;
+      }
+
+      tr:hover > td.color0 {
+        background-color: #FFE9CC;
+      }
+      .color0 {
+        background-color: #FFE9CC;
+      }
+
+      tr:hover > td.color1 {
+        background-color: #FFDEB2;
+      }
+      .color1 {
+        background-color: #FFDEB2;
+      }
+
+      tr:hover > td.color2 {
+        background-color: #FFD399;
+      }
+      .color2 {
+        background-color: #FFD399;
+      }
+
+      tr:hover > td.color3 {
+        background-color: #FFC87F;
+      }
+      .color3 {
+        background-color: #FFC87F;
+      }
+
+      tr:hover > td.color4 {
+        background-color: #FFBD66;
+      }
+      .color4 {
+        background-color: #FFBD66;
+      }
+
+      tr:hover > td.color5 {
+        background-color: #FFB24C;
+      }
+      .color5 {
+        background-color: #FFB24C;
+      }
+
+      tr:hover > td.color6 {
+        background-color: #FFA733;
+      }
+      .color6 {
+        background-color: #FFA733;
+      }
+
+      tr:hover > td.color7 {
+        background-color: #FF9C19;
+      }
+      .color7 {
+        background-color: #FF9C19;
+      }
+
+      tr:hover > td.color8 {
+        background-color: #FF9100;
+      }
+      .color8 {
+        background-color: #FF9100;
+      }
+
+      .tooltip {
+        display: block;
+        position: absolute;
+        visibility: hidden;
+        transition: visibility 0s linear 0.5s;
+      }
+
+      tr:hover .tooltip {
+        display: block;
+        position: absolute;
+        top: 100%;
+        right: 100%;
+        visibility: visible;
+        z-index: 999;
+        width: 400px;
+        color: #ffffff;
+        background-color: #0489c3;
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+        border-bottom-left-radius: 8px;
+        transition: visibility 0s linear 0.5s;
+      }
+
+      .white {
+        color: #ffffff;
+      }
+
     </style>
     <div class="content">
       <h1>Sampled CPU profile</h1>
       <table>
         <tr>
-          <td class="memberHeader">Timestamp</td>
-          <td class="member">{{ refreshTime }}</td>
+         <td class="memberHeader">Timestamp</td>
+         <td class="member">{{ refreshTime }}</td>
+        </tr>
+        <tr>
+         <td class="memberHeader">Time span</td>
+         <td class="member">{{ timeSpan }}</td>
         </tr>
         <tr>
-          <td class="memberHeader">Sample count</td>
-          <td class="member">{{ sampleCount }}</td>
+         <td class="memberHeader">Sample count</td>
+         <td class="member">{{ sampleCount }}</td>
         </tr>
         <tr>
-          <td class="memberHeader">Sample rate</td>
-          <td class="member">{{ sampleRate }} Hz</td>
+         <td class="memberHeader">Sample rate</td>
+         <td class="member">{{ sampleRate }} Hz</td>
         </tr>
         <tr>
-          <td class="memberHeader">Sample depth</td>
-          <td class="member">{{ sampleDepth }} stack frames</td>
+         <td class="memberHeader">Sample depth</td>
+         <td class="member">{{ sampleDepth }} stack frames</td>
         </tr>
         <tr>
-          <td class="memberHeader">Call graph tree</td>
-          <td class="member">
-            <input type="checkbox" checked="{{ callGraphChecked }}">
-          </td>
-         <tr>
-          <td class="memberHeader">Display cutoff</td>
-          <td class="member">{{ displayCutoff }}</td>
-         </tr>
-         <tr>
-          <td class="memberHeader">Hide tags</td>
-          <td class="member">
-            <input type="checkbox" checked="{{ hideTagsChecked }}">
-          </td>
-         </tr>
+         <td class="memberHeader">Display cutoff</td>
+         <td class="member">{{ displayCutoff }}</td>
+        </tr>
+        <tr>
+         <td class="memberHeader">Hide tags</td>
+         <td class="member">
+           <input type="checkbox" checked="{{ hideTagsChecked }}">
+         </td>
+        </tr>
       </table>
       <hr>
-      <table id="tableTree" class="table table-hover">
+      <table id="tableTree" class="table">
         <thead>
           <tr>
             <th>Method</th>
-            <th>Caller</th>
-            <th>Exclusive</th>
+            <th>Self</th>
           </tr>
         </thead>
         <tbody>
@@ -82,10 +185,30 @@
                 class="{{ coloring(row) }}"
                 style="{{ padding(row) }}">
               <span id="expand" style="cursor: pointer;">{{ row.expander }}</span>
-              <code-ref ref="{{ row.code }}"></code-ref>
+              <div style="position: relative;display: inline">
+                {{row.columns[0]}}
+              </div>
+              <function-ref ref="{{ row.code.function }}"></function-ref>
+            </td>
+            <td class="{{ coloring(row) }}" style="position: relative">
+              {{row.columns[1]}}
+              <div class="tooltip">
+                <table>
+                  <tr>
+                   <td class="memberHeader white">Kind</td>
+                   <td class="member white">{{ row.tipKind }}</td>
+                  </tr>
+                  <tr>
+                   <td class="memberHeader white">Sample Count</td>
+                   <td class="member white">{{ row.tipTicks }}</td>
+                  </tr>
+                  <tr>
+                   <td class="memberHeader white">Approximate Execution Time</td>
+                   <td class="member white">{{ row.tipTime }}</td>
+                  </tr>
+                </table>
+              </div>
             </td>
-            <td class="{{ coloring(row) }}">{{row.columns[0]}}</td>
-            <td class="{{ coloring(row) }}">{{row.columns[1]}}</td>
           </tr>
         </tbody>
       </table>