Use VM tag in profile and add stack trace trie

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 f8d14aab18dac62fb7ef4b677fee1b6131b6a51e..315f53dd0c3f1d71c0f4fcc827436e276bfa7cc4 100644
--- a/runtime/bin/vmservice/client/lib/src/elements/isolate_profile.html
+++ b/runtime/bin/vmservice/client/lib/src/elements/isolate_profile.html
@@ -11,40 +11,190 @@
       <nav-menu link="." anchor="cpu profile" last="{{ true }}"></nav-menu>
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
     </nav-bar>
-    <div class="row">
-      <div class="col-md-12">
-        <span>Top</span>
-        <select selectedIndex="{{methodCountSelected}}" value="{{methodCounts[methodCountSelected]}}">
-          <option template repeat="{{count in methodCounts}}">{{count}}</option>
-        </select>
-        <span>exclusive methods</span>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-12">
-        <p>Refreshed at {{ refreshTime }} with {{ sampleCount }} samples.</p>
-      </div>
-    </div>
-    <table id="tableTree" class="table table-hover">
-      <thead>
+    <style>
+      .content {
+        padding-left: 10%;
+        font: 400 14px 'Montserrat', sans-serif;
+      }
+      h1 {
+        font: 400 18px 'Montserrat', sans-serif;
+      }
+      .member, .memberHeader {
+        vertical-align: top;
+        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;
+      }
+      .tree-mode-switch {

[turnidge, 2014/03/17 21:19:31]

Some comments in the css would help me understand all this a bit better.

[Cutch, 2014/03/18 14:39:19]

Done.

+        position: relative; width: 121px;

[turnidge, 2014/03/17 21:19:31]

Can you put one property per line?

[Cutch, 2014/03/18 14:39:19]

Done.

+        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+      }
+      .tree-mode-switch-checkbox {
+        display: none;
+      }
+      .tree-mode-switch-label {
+        display: block; overflow: hidden; cursor: pointer;
+        border: 2px solid #999999; border-radius: 15px;
+      }
+      .tree-mode-switch-inner {
+        width: 200%; margin-left: -100%;
+        -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
+        -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
+      }
+      .tree-mode-switch-inner:before, .tree-mode-switch-inner:after {
+        float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
+        font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;

[turnidge, 2014/03/17 21:19:31]

We use a different font (Montserrat, etc.) above.  Would that look ok here too?

Also, you may want to use the combo "font" property instead of separate weight,
size, family properties.

[Cutch, 2014/03/18 14:39:19]

Done.

+        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+      }
+      .tree-mode-switch-inner:before {
+        content: "Call graph";

[turnidge, 2014/03/17 21:19:31]

I think that injecting content using before/after can make it hard to figure out
how a page is built.  Is this necessary for the operation of your switch?

[Cutch, 2014/03/18 14:39:19]

Done.

+        padding-left: 10px;
+        background-color: #0489C3; color: #FFFFFF;
+      }
+      .tree-mode-switch-inner:after {
+        content: "Stack trace";
+        padding-right: 10px;
+        background-color: #EEEEEE; color: #999999;
+        text-align: right;
+      }
+      .tree-mode-switch-switch {
+        width: 14px; margin: 8px;
+        background: #FFFFFF;
+        border: 2px solid #999999; border-radius: 15px;
+        position: absolute; top: 0; bottom: 0; right: 87px;
+        -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
+        -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
+      }
+      .tree-mode-switch-checkbox:checked + .tree-mode-switch-label .tree-mode-switch-inner {
+        margin-left: 0;
+      }
+      .tree-mode-switch-checkbox:checked + .tree-mode-switch-label .tree-mode-switch-switch {
+        right: 0px;
+      }
+
+
+      .tag-mode-switch {

[turnidge, 2014/03/17 21:19:31]

Can .tree-mode-switch and .tag-mode-switch (and the related classes) share a
single css class, maybe "mode-switch"?   It looks like there is a lot of
duplication that I don't think is necessary.

In fact, would it be possible to abstract out the mode-switch and put it into a
separate custom element?

+        position: relative; width: 121px;
+        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+      }
+      .tag-mode-switch-checkbox {
+        display: none;
+      }
+      .tag-mode-switch-label {
+        display: block; overflow: hidden; cursor: pointer;
+        border: 2px solid #999999; border-radius: 15px;
+      }
+      .tag-mode-switch-inner {
+        width: 200%; margin-left: -100%;
+        -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
+        -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
+      }
+      .tag-mode-switch-inner:before, .tag-mode-switch-inner:after {
+        float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
+        font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
+        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+      }
+      .tag-mode-switch-inner:before {
+        content: "Hidden";
+        padding-left: 10px;
+        background-color: #0489C3; color: #FFFFFF;
+      }
+      .tag-mode-switch-inner:after {
+        content: "Displayed";
+        padding-right: 10px;
+        background-color: #EEEEEE; color: #999999;
+        text-align: right;
+      }
+      .tag-mode-switch-switch {
+        width: 14px; margin: 8px;
+        background: #FFFFFF;
+        border: 2px solid #999999; border-radius: 15px;
+        position: absolute; top: 0; bottom: 0; right: 87px;
+        -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
+        -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
+      }
+      .tag-mode-switch-checkbox:checked + .tag-mode-switch-label .tag-mode-switch-inner {
+        margin-left: 0;
+      }
+      .tag-mode-switch-checkbox:checked + .tag-mode-switch-label .tag-mode-switch-switch {
+        right: 0px;
+      }
+
+    </style>
+    <div class="content">
+      <h1>Sampled CPU profile</h1>
+      <table>
         <tr>
-          <th>Method</th>
-          <th>Exclusive</th>
-          <th>Caller</th>
+          <td class="memberHeader">Timestamp</td>
+          <td class="member">{{ refreshTime }}</td>
         </tr>
-      </thead>
-      <tbody>
-        <tr template repeat="{{row in tree.rows }}" style="{{}}">
-          <td on-click="{{toggleExpanded}}"
-              class="{{ coloring(row) }}"
-              style="{{ padding(row) }}">
-            <code-ref ref="{{ row.code }}"></code-ref>
-          </td>
-          <td class="{{ coloring(row) }}">{{row.columns[0]}}</td>
-          <td class="{{ coloring(row) }}">{{row.columns[1]}}</td>
+        <tr>
+          <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>
         </tr>
-      </tbody>
-    </table>
+        <tr>
+          <td class="memberHeader">Sample depth</td>
+          <td class="member">{{ sampleDepth }} stack frames</td>
+        </tr>
+        <tr>
+          <td class="memberHeader">Tree mode</td>
+          <td class="member">
+          <div class="tree-mode-switch">
+            <input type="checkbox" checked="{{ callGraphChecked }}" name="tree-mode-switch" class="tree-mode-switch-checkbox" id="mytree-mode-switch" checked>
+            <label class="tree-mode-switch-label" for="mytree-mode-switch">
+              <div class="tree-mode-switch-inner"></div>
+              <div class="tree-mode-switch-switch"></div>
+            </label>
+          </div>
+          </td>
+         <tr>
+          <td class="memberHeader">Display cutoff</td>
+          <td class="member">{{ displayCutoff }}</td>
+         </tr>
+         <tr>
+          <td class="memberHeader">Tags</td>
+          <td class="member">
+            <div class="tag-mode-switch">
+            <input type="checkbox" checked="{{ hideTagsChecked }}" name="tag-mode-switch" class="tag-mode-switch-checkbox" id="mytag-mode-switch">
+            <label class="tag-mode-switch-label" for="mytag-mode-switch">
+              <div class="tag-mode-switch-inner"></div>
+              <div class="tag-mode-switch-switch"></div>
+            </label>
+          </div>
+          </td>
+         </tr>
+      </table>
+      <hr>
+      <table id="tableTree" class="table table-hover">
+        <thead>
+          <tr>
+            <th>Method</th>
+            <th>Caller</th>
+            <th>Exclusive</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr template repeat="{{row in tree.rows }}" style="{{}}">
+            <td on-click="{{toggleExpanded}}"
+                class="{{ coloring(row) }}"
+                style="{{ padding(row) }}">
+              <code-ref ref="{{ row.code }}"></code-ref>
+            </td>
+            <td class="{{ coloring(row) }}">{{row.columns[0]}}</td>
+            <td class="{{ coloring(row) }}">{{row.columns[1]}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </template>
   <script type="application/dart" src="isolate_profile.dart"></script>
 </polymer-element>