Redo LocationManager to use HTML5 History API

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

Index: runtime/bin/vmservice/client/lib/src/elements/class_tree.html
diff --git a/runtime/bin/vmservice/client/lib/src/elements/class_tree.html b/runtime/bin/vmservice/client/lib/src/elements/class_tree.html
new file mode 100644
index 0000000000000000000000000000000000000000..b57b8725476a0e208d8f3315f7084236da339146
--- /dev/null
+++ b/runtime/bin/vmservice/client/lib/src/elements/class_tree.html
@@ -0,0 +1,119 @@
+<link rel="import" href="nav_bar.html">
+<link rel="import" href="observatory_element.html">
+<link rel="import" href="class_ref.html">
+
+<polymer-element name="class-tree" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+      .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 {

[turnidge, 2014/06/04 18:02:24]

I wonder if you could get away with just...

.table tr > th {

instead of the 6 selectors above.

+        padding: 8px;
+        vertical-align: top;
+      }
+      .table thead > tr > th {
+        vertical-align: bottom;
+        text-align: left;
+        border-bottom:2px solid #ddd;
+      }
+
+      tr:hover > td {
+        background-color: #FFF3E3;
+      }
+      .rowColor0 {
+        background-color: #FFE9CC;
+      }
+      .rowColor1 {
+        background-color: #FFDEB2;
+      }
+      .rowColor2 {
+        background-color: #FFD399;
+      }
+      .rowColor3 {
+        background-color: #FFC87F;
+      }
+      .rowColor4 {
+        background-color: #FFBD66;
+      }
+      .rowColor5 {
+        background-color: #FFB24C;
+      }
+      .rowColor6 {
+        background-color: #FFA733;
+      }
+      .rowColor7 {
+        background-color: #FF9C19;
+      }
+      .rowColor8 {
+        background-color: #FF9100;
+      }
+
+      .tooltip {
+        display: block;
+        position: absolute;
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0s linear 0.5s;
+        transition: opacity .4s ease-in-out;
+      }
+
+      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;
+        transition: opacity .4s ease-in-out;
+        opacity: 1;
+      }
+
+      .white {
+        color: #ffffff;
+      }
+    </style>
+    <nav-bar>
+      <top-nav-menu last="{{ true }}"></top-nav-menu>
+      <nav-control></nav-control>
+    </nav-bar>
+    <div class="content-centered">
+      <h1>Class Hierarchy</h1>
+      <table id="tableTree" class="table">
+        <thead>
+          <tr>
+            <th>Class</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr template repeat="{{row in tree.rows }}" style="{{}}">

[turnidge, 2014/06/04 18:02:24]

What is the...

style="{{}}"

...about?  Could you just drop the style tag?  Or use style=""?

[Cutch, 2014/06/04 20:28:57]

I just removed it.

+            <td on-click="{{toggleExpanded}}"
+                class="{{ coloring(row) }}"
+                style="{{ padding(row) }}">
+              <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
+              <class-ref ref="{{ row.cls }}"></class-ref>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </template>
+</polymer-element>
+
+<script type="application/dart" src="class_tree.dart"></script>