Add persistent handles to service protocol and Observatory UI

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

Index: runtime/observatory/lib/src/elements/persistent_handles.html
diff --git a/runtime/observatory/lib/src/elements/persistent_handles.html b/runtime/observatory/lib/src/elements/persistent_handles.html
new file mode 100644
index 0000000000000000000000000000000000000000..b4ddb85b718c98f88db4af5430ca68a2bbcc0540
--- /dev/null
+++ b/runtime/observatory/lib/src/elements/persistent_handles.html
@@ -0,0 +1,97 @@
+<link rel="import" href="../../../../packages/polymer/polymer.html">
+<link rel="import" href="nav_bar.html">
+<link rel="import" href="observatory_element.html">
+
+<polymer-element name="persistent-handles-page" extends="observatory-element">
+  <template>
+    <link rel="stylesheet" href="css/shared.css">
+    <style>
+    .table {
+      border-collapse: collapse!important;
+      margin-bottom: 20px
+      table-layout: fixed;
+      width: 100%;
+    }
+    .table td:nth-of-type(1) {
+      width: 30%;
+    }
+    .th, .td {
+      padding: 8px;
+      vertical-align: top;
+    }
+    .table thead > tr > th {
+      vertical-align: bottom;
+      text-align: left;
+      border-bottom:2px solid #ddd;
+    }
+    .spacer {
+      width: 16px;
+    }
+    .left-border-spacer {
+      width: 16px;
+      border-left: 1px solid;
+    }
+    .clickable {
+      color: #0489c3;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .clickable:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+    #weakPersistentHandlesTable tr:hover > td {
+      background-color: #F4C7C3;
+    }
+    .nav-option {
+      color: white;
+      float: right;
+      margin: 3px;
+      padding: 8px;
+    }
+    </style>
+    <nav-bar>
+      <top-nav-menu></top-nav-menu>
+      <vm-nav-menu vm="{{ isolate.vm }}"></vm-nav-menu>
+      <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
+      <nav-menu link="{{ makeLink('/persistent-handles', isolate) }}" anchor="persistent handles" last="{{ true }}"></nav-menu>
+      <nav-refresh callback="{{ refresh }}"></nav-refresh>
+    </nav-bar>
+    <div class="content-centered-big">
+      <h1>Persistent Handles</h1>

[rmacnak, 2016/02/23 20:58:21]

Persistent Handles (count)

[Cutch, 2016/02/25 17:23:42]

Done.

+      <hr>
+      <template if="{{ persistentHandles.isNotEmpty }}">
+        persistent handles ({{ persistentHandles.length }})
+        <curly-block expand="{{ persistentHandles.length <= 8 }}">
+          <div class="memberList">
+            <template repeat="{{ persistentHandle in persistentHandles }}">
+              <div class="memberItem">
+                <div class="memberValue">
+                  <any-service-ref ref="{{ persistentHandle['object'] }}">

[rmacnak, 2016/02/23 20:58:22]

This page is going to have the same problem as large lists: The object ids of
early elements will be expired on arrival, having been evicted by later
elements.

[Cutch, 2016/02/25 17:23:42]

Of course, this is a limitation of the service protocol's id system. If we care
we could probably create ids for the persistent handles and then lookup the
object indirectly.

+                  </any-service-ref>
+                </div>
+              </div>
+            </template>
+          </div>
+        </curly-block><br><br>
+      </template>
+      <br><br>
+      <h1>Weak Persistent Handles</h1>

[rmacnak, 2016/02/23 20:58:21]

Weak Persistent Handles (count)

[Cutch, 2016/02/25 17:23:42]

Done.

+      <hr>
+      <table id="weakPersistentHandlesTable" class="flex-item-100-percent table">
+        <thead id="weakPersistentHandlesTableHead">
+          <tr>
+            <th on-click="{{changeSort}}" class="clickable" title="External Size">{{ weakPersistentHandlesTable.getColumnLabel(0) }}</th>
+            <th on-click="{{changeSort}}" class="clickable" title="Peer">{{ weakPersistentHandlesTable.getColumnLabel(1) }}</th>
+            <th on-click="{{changeSort}}" class="clickable" title="Finalizer Callback">{{ weakPersistentHandlesTable.getColumnLabel(2) }}</th>
+            <th class="spacer"></th>
+            <th on-click="{{changeSort}}" class="clickable" title="Object">{{ weakPersistentHandlesTable.getColumnLabel(4) }}</th>
+          </tr>
+        </thead>
+        <tbody id="weakPersistentHandlesTableBody">
+        </tbody>
+      </table>
+      <view-footer></view-footer>
+    </div>
+  </template>
+</polymer-element>