Rework library and class view pages.

runtime/bin/vmservice/client/deployed/web/index.html

Index: runtime/bin/vmservice/client/deployed/web/index.html
diff --git a/runtime/bin/vmservice/client/deployed/web/index.html b/runtime/bin/vmservice/client/deployed/web/index.html
index 81d34f5c688e93119777733322ad38b6081028fe..cd3d016940b0430bba96c517a71c767ed3b5e45d 100644
--- a/runtime/bin/vmservice/client/deployed/web/index.html
+++ b/runtime/bin/vmservice/client/deployed/web/index.html
@@ -228,44 +228,12 @@
 <polymer-element name="service-ref" extends="observatory-element">
   
 </polymer-element><polymer-element name="class-ref" extends="service-ref">
-<template>
-  <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
-</template>
 
-</polymer-element>
-<polymer-element name="error-view" extends="observatory-element">
-  <template>
-    <div class="row">
-    <div class="col-md-8 col-md-offset-2">
-      <div class="panel panel-danger">
-        <div class="panel-heading">{{ error.kind }}</div>
-        <div class="panel-body">
-          <p>{{ error.message }}</p>
-        </div>
-      </div>
-    </div>
-    </div>
-  </template>
-  
-</polymer-element><polymer-element name="field-ref" extends="service-ref">
-<template>
-<div>
-  <template if="{{ ref['final'] }}"> final </template>
-  <template if="{{ ref['const'] }}"> const </template>
-  <template if="{{ (ref['declared_type']['name'] == 'dynamic' &amp;&amp; !ref['final'] &amp;&amp; !ref['const']) }}">
-  var
-  </template>
-  <template if="{{ (ref['declared_type']['name'] != 'dynamic') }}">
-  <class-ref ref="{{ ref['declared_type'] }}"></class-ref>
-  </template>
-  <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
-</div>
-</template>  </polymer-element><polymer-element name="function-ref" extends="service-ref">
-<template>
-  <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
-</template>
+<template><a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a></template>
+
 
-</polymer-element><polymer-element name="curly-block">
+</polymer-element>
+<polymer-element name="curly-block">
   <template>
     <style>
       .idle {
@@ -308,9 +276,17 @@
 <polymer-element name="instance-ref" extends="service-ref">
   <template>
     <style>
-      .member {
+      .memberList {
+        display: table;
+      }
+      .memberItem {
+        display: table-row;
+      }
+      .memberName, .memberValue {
+        display: table-cell;
         vertical-align: top;
-        padding: 1px 0 1px 1em;
+        padding: 3px 0 3px 1em;
+        font: 400 14px 'Montserrat', sans-serif;
       }
     </style>
     <div>
@@ -334,6 +310,7 @@
 
       <template if="{{ isClosure(ref.serviceType) }}">
         <a href="{{ url }}">
+          <!-- TODO(turnidge): Switch this to fully-qualified function -->
           {{ ref['closureFunc']['user_name'] }}
         </a>
       </template>
@@ -341,28 +318,34 @@
       <template if="{{ isInstance(ref.serviceType) }}">
         <a href="{{ url }}"><em>{{ ref['class']['user_name'] }}</em></a>
         <curly-block callback="{{ expander() }}">
-          <table>
-            <tbody><tr template="" repeat="{{ field in ref['fields'] }}">
-              <td class="member">{{ field['decl']['user_name'] }}</td>
-              <td class="member">
-                <instance-ref ref="{{ field['value'] }}"></instance-ref>
-              </td>
-            </tr>
-          </tbody></table>
+          <div class="memberList">
+            <template repeat="{{ field in ref['fields'] }}">
+              <div class="memberItem">
+                <div class="memberName">
+                  {{ field['decl']['user_name'] }}
+                </div>
+                <div class="memberValue">
+                  <instance-ref ref="{{ field['value'] }}"></instance-ref>
+                </div>
+              </div>
+            </template>
+          </div>
         </curly-block>
       </template>
 
       <template if="{{ isList(ref.serviceType) }}">
         <a href="{{ url }}"><em>{{ ref['class']['user_name'] }}</em> ({{ ref['length']}})</a>
         <curly-block callback="{{ expander() }}">
-          <table>
-            <tbody><tr template="" repeat="{{ element in ref['elements'] }}">
-              <td class="member">[{{ element['index']}}]</td>
-              <td class="member">
-                <instance-ref ref="{{ element['value'] }}"></instance-ref>
-              </td>
-            </tr>
-          </tbody></table>
+          <div class="memberList">
+            <template repeat="{{ element in ref['elements'] }}">
+              <div class="memberItem">
+                <div class="memberName">[{{ element['index']}}]</div>
+                <div class="memberValue">
+                  <instance-ref ref="{{ element['value'] }}"></instance-ref>
+                </div>
+              </div>
+            </template>
+          </div>
         </curly-block>
       </template>
 
@@ -370,13 +353,146 @@
   </template>
   
 </polymer-element>
+<polymer-element name="eval-box" extends="observatory-element">
+  <template>
+    <style>
+      .textbox {
+        width: 80ex;
+        font: 400 16px 'Montserrat', sans-serif;
+      }
+      .bigtextbox {
+        font: 400 16px 'Montserrat', sans-serif;
+      }
+      .button {
+        font: 400 16px 'Montserrat', sans-serif;
+      }
+      .radios {
+        display: inline;
+      }
+      .radios label{
+        padding-left: 15px;
+      }
+      .historyExpr, .historyValue {
+        vertical-align: text-top;
+        font: 400 14px 'Montserrat', sans-serif;
+      }
+      .historyExpr a {
+        display: block;
+        color: black;
+        text-decoration: none;
+        padding: 6px 6px;
+        cursor: pointer;
+        white-space: pre-line;
+      }
+      .historyExpr a:hover {
+        background-color: #e1f5fe
+      }
+      .historyValue {
+        display: block;
+        padding: 6px 6px;
+      }
+    </style>
+    <form>
+      <template if="{{ lineMode == '1-line' }}">
+        <input class="textbox" type="text" value="{{ text }}">
+      </template>
+      <template if="{{ lineMode == 'N-line' }}">
+        <textarea class="bigtextbox" rows="5" cols="80" value="{{ text }}"></textarea>
+      </template>
+
+      <input class="button" type="submit" value="Evaluate" on-click="{{ eval }}">
+      <div class="radios" on-change="{{ updateLineMode }}">
+        <label for="1-line">1-line
+          <input type="radio" name="lineMode" value="1-line" checked="">
+        </label>
+        <label for="N-line">N-line
+          <input type="radio" name="lineMode" value="N-line">
+        </label>
+      </div>
+    </form>
+
+    <br>
+    <template if="{{ results.isNotEmpty }}">
+      <table>
+        <tbody><tr template="" repeat="{{ result in results }}">
+          <td class="historyExpr">
+            <a class="expr" on-click="{{ selectExpr }}" expr="{{ result['expr'] }}">{{ result['expr'] }}</a>
+          </td>
+          <td class="historyValue">
+            <template if="{{ result['value'] == null }}">
+              <div style="color:#aaa;cursor:wait;">&lt;pending&gt;</div>
+            </template>
+            <template if="{{ result['value'] != null }}">
+              <instance-ref isolate="{{ isolate }}" ref="{{ result['value'] }}">
+              </instance-ref>
+            </template>
+          </td>
+        </tr>
+      </tbody></table>
+    </template>
+  </template>
+</polymer-element>
+
+
+<polymer-element name="field-ref" extends="service-ref">
+<template>
+<div>
+  <template if="{{ ref['final'] }}"> final </template>
+  <template if="{{ ref['const'] }}"> const </template>
+  <template if="{{ (ref['declared_type']['name'] == 'dynamic' &amp;&amp; !ref['final'] &amp;&amp; !ref['const']) }}">
+  var
+  </template>
+  <template if="{{ (ref['declared_type']['name'] != 'dynamic') }}">
+  <class-ref ref="{{ ref['declared_type'] }}"></class-ref>
+  </template>
+  <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
+</div>
+</template>  </polymer-element><polymer-element name="function-ref" extends="service-ref">
+  <template><!-- These comments are here to allow newlines.
+     --><template if="{{ qualified &amp;&amp; !hasParent &amp;&amp; hasClass }}"><!--
+       --><class-ref ref="{{ ref['class'] }}"></class-ref>.</template><!--
+     --><template if="{{ qualified &amp;&amp; hasParent }}"><!--
+       --><function-ref ref="{{ ref['parent'] }}" qualified="{{ true }}">
+          </function-ref>.<!--
+     --></template><a href="{{ url }}">{{ name }}</a><!--
+  --></template>
+
+</polymer-element>
 <polymer-element name="library-ref" extends="service-ref">
 <template>
   <a href="{{ url }}">{{ name }}</a>
 </template>
 
-</polymer-element><polymer-element name="class-view" extends="observatory-element">
+</polymer-element><polymer-element name="script-ref" extends="service-ref">
+<template>
+  <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
+</template>
+
+</polymer-element>
+<polymer-element name="class-view" extends="observatory-element">
   <template>
+    <style>
+      .content {
+        padding-left: 10%;
+        font: 400 14px 'Montserrat', sans-serif;
+      }
+      h1 {
+        font: 400 18px 'Montserrat', sans-serif;
+      }
+      .memberList {
+        display: table;
+      }
+      .memberItem {
+        display: table-row;
+      }
+      .memberName, .memberValue {
+        display: table-cell;
+        vertical-align: top;
+        padding: 3px 0 3px 1em;
+        font: 400 14px 'Montserrat', sans-serif;
+      }
+    </style>
+
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <isolate-nav-menu isolate="{{ cls.isolate }}"></isolate-nav-menu>
@@ -385,74 +501,125 @@
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
     </nav-bar>
 
-    <div class="row">
-    <div class="col-md-8 col-md-offset-2">
-      <div class="panel panel-warning">
-        <div class="panel-heading">
-          class <strong>{{ cls.name }}</strong>
-          <template if="{{ cls['super']['type'] != 'Null' }}">
-            extends
-            <class-ref ref="{{ cls['super'] }}"></class-ref>
-          </template>
-          <p></p>
-          <library-ref ref="{{ cls['library'] }}"></library-ref>
+    <div class="content">
+      <h1>
+        <template if="{{ cls['abstract'] }}">
+          abstract
+        </template>
+        <template if="{{ cls['patch'] }}">
+          patch
+        </template>
+        class {{ cls.name }}
+      </h1>
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">library</div>
+          <div class="memberValue">
+            <library-ref ref="{{ cls['library'] }}"></library-ref>
+          </div>
         </div>
-        <div class="panel-body">
-          <table class="table table-hover">
-            <tbody>
-              <tr>
-                <td>Abstract</td><td>{{ cls['abstract'] }}</td>
-              </tr>
-              <tr>
-                <td>Const</td><td>{{ cls['const'] }}</td>
-              </tr>
-              <tr>
-                <td>Finalized</td><td>{{ cls['const'] }}</td>
-              </tr>
-              <tr>
-                <td>Implemented</td><td>{{ cls['implemented'] }}</td>
-              </tr>
-              <tr>
-                <td>Patch</td><td>{{ cls['patch'] }}</td>
-              </tr>
-              <tr>
-                <td>VM Name</td><td>{{ cls['name'] }}</td>
-              </tr>
-            </tbody>
-          </table>
-          <template if="{{ cls['error'] == null }}">
-            <blockquote><strong>Fields</strong></blockquote>
-            <table class="table table-hover">
-             <tbody>
-                <tr template="" repeat="{{ field in cls['fields'] }}">
-                  <td><field-ref ref="{{ field }}"></field-ref></td>
-                  <td><instance-ref ref="{{ field['value'] }}"></instance-ref></td>
-                </tr>
-              </tbody>
-            </table>
-            <blockquote><strong>Functions</strong></blockquote>
-            <table class="table table-hover">
-              <thead>
-                <tr>
-                  <th>User Name</th>
-                  <th>VM Name</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr template="" repeat="{{ function in cls['functions'] }}">
-                  <td><function-ref ref="{{ function }}"></function-ref></td>
-                  <td><function-ref ref="{{ function }}" internal=""></function-ref></td>
-                </tr>
-              </tbody>
-            </table>
-          </template>
-          <template if="{{ cls['error'] != null }}">
-            <error-view error_obj="{{ cls['error'] }}"></error-view>
-          </template>
+        <div class="memberItem">
+          <div class="memberName">script</div>
+          <div class="memberValue">
+            <script-ref ref="{{ cls['script'] }}" line="{{ cls['line'] }}">
+            </script-ref>
+          </div>
         </div>
+
+        <div class="memberItem">&nbsp;</div>
+
+        <template if="{{ cls['super']['type'] != 'Null' }}">
+          <div class="memberItem">
+            <div class="memberName">extends</div>
+            <div class="memberValue">
+              <class-ref ref="{{ cls['super'] }}"></class-ref>
+            </div>
+          </div>
+        </template>
+        <template if="{{ cls['subclasses'].length > 0 }}">
+          <div class="memberItem">
+            <div class="memberName">extended by</div>
+            <div class="memberValue">
+              <template repeat="{{ subclass in cls['subclasses'] }}">
+                <class-ref ref="{{ subclass }}"></class-ref>
+              </template>
+            </div>
+          </div>
+        </template>
+
+        <div class="memberItem">&nbsp;</div>
+
+        <template if="{{ cls['interfaces'].length > 0 }}">
+          <div class="memberItem">
+            <div class="memberName">implements</div>
+            <div class="memberValue">
+              <template repeat="{{ interface in cls['interfaces'] }}">
+                <class-ref ref="{{ interface }}"></class-ref>
+              </template>
+            </div>
+          </div>
+        </template>
+        <template if="{{ cls.name != cls.vmName }}">
+          <div class="memberItem">
+            <div class="memberName">vm name</div>
+            <div class="memberValue">{{ cls.vmName }}</div>
+          </div>
+        </template>
       </div>
     </div>
+
+    <template if="{{ cls['error'] != null }}">
+      <!-- TODO(turnidge): Don't use instance-ref for error display here -->
+      <instance-ref ref="{{ cls['error'] }}"></instance-ref>
+    </template>
+
+    <hr>
+
+    <div class="content">
+      <template if="{{ cls['fields'].isNotEmpty }}">
+        fields ({{ cls['fields'].length }})
+        <curly-block>
+          <div class="memberList">
+            <template repeat="{{ field in cls['fields'] }}">
+              <div class="memberItem">
+                <div class="memberName">
+                  <field-ref ref="{{ field }}"></field-ref>
+                </div>
+                <div class="memberValue">
+                  <template if="{{ field['value'] != null }}">
+                    <instance-ref ref="{{ field['value'] }}"></instance-ref>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+        </curly-block><br>
+      </template>
+
+      <template if="{{ cls['functions'].isNotEmpty }}">
+        functions ({{ cls['functions'].length }})
+        <curly-block>
+          <div class="memberList">
+            <template repeat="{{ function in cls['functions'] }}">
+              <div class="memberItem">
+                <div class="memberValue">
+                  <function-ref ref="{{ function }}" qualified="{{ false }}">
+                  </function-ref>
+                </div>
+              </div>
+            </template>
+          </div>
+        </curly-block><br>
+      </template>
+    </div>
+
+    <hr>
+
+    <div class="content">
+      <eval-box callback="{{ eval }}"></eval-box>
     </div>
+    <br><br><br><br>
+    <br><br><br><br>
   </template>
   
 </polymer-element>
@@ -477,7 +644,14 @@
       h1 {
         font: 400 18px 'Montserrat', sans-serif;
       }
-      .member, .memberHeader {
+      .memberList {
+        display: table;
+      }
+      .memberItem {
+        display: table-row;
+      }
+      .memberName, .memberValue {
+        display: table-cell;
         vertical-align: top;
         padding: 3px 0 3px 1em;
         font: 400 14px 'Montserrat', sans-serif;
@@ -491,33 +665,33 @@
     </style>
     <div class="content">
       <h1>Code for {{ code.name }}</h1>
-      <table>
-        <tbody><tr>
-          <td class="memberHeader">kind</td>
-          <td class="member">{{code.kind}}</td>
-        </tr>
-        <tr>
-          <td class="memberHeader">function</td>
-          <td class="member">
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">kind</div>
+          <div class="memberValue">{{code.kind}}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">function</div>
+          <div class="memberValue">
             <function-ref ref="{{code.function}}">
             </function-ref>
-          </td>
-        </tr>
-        <tr>
-          <td class="memberHeader">Inclusive</td>
-          <td class="member">{{ code.formattedInclusiveTicks }}</td>
-        </tr>
-        <tr>
-          <td class="memberHeader">Exclusive</td>
-          <td class="member">{{ code.formattedExclusiveTicks }}</td>
-        </tr>
-        <tr>
-          <td class="memberHeader">Constant object pool</td>
-          <td class="member">
+          </div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">Inclusive</div>
+          <div class="memberValue">{{ code.formattedInclusiveTicks }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">Exclusive</div>
+          <div class="memberValue">{{ code.formattedExclusiveTicks }}</div>
+        </div>
+        <div class="memberItem">
+          <div class="memberName">Constant object pool</div>
+          <div class="memberValue">
             <instance-ref ref="{{ code.objectPool }}"></instance-ref>
-          </td>
-        </tr>
-      </tbody></table>
+          </div>
+        </div>
+      </div>
     </div>
     <hr>
     <div class="content">
@@ -553,88 +727,21 @@
     </div>
   </template>
   
-</polymer-element><polymer-element name="eval-box" extends="observatory-element">
+</polymer-element><polymer-element name="error-view" extends="observatory-element">
   <template>
-    <style>
-      .textbox {
-        width: 80ex;
-        font: 400 16px 'Montserrat', sans-serif;
-      }
-      .bigtextbox {
-        font: 400 16px 'Montserrat', sans-serif;
-      }
-      .button {
-        font: 400 16px 'Montserrat', sans-serif;
-      }
-      .radios {
-        display: inline;
-      }
-      .radios label{
-        padding-left: 15px;
-      }
-      .historyExpr, .historyValue {
-        vertical-align: text-top;
-        font: 400 14px 'Montserrat', sans-serif;
-      }
-      .historyExpr a {
-        display: block;
-        color: black;
-        text-decoration: none;
-        padding: 6px 6px;
-        cursor: pointer;
-        white-space: pre-line;
-      }
-      .historyExpr a:hover {
-        background-color: #e1f5fe
-      }
-      .historyValue {
-        display: block;
-        padding: 6px 6px;
-      }
-    </style>
-    <form>
-      <template if="{{ lineMode == '1-line' }}">
-        <input class="textbox" type="text" value="{{ text }}">
-      </template>
-      <template if="{{ lineMode == 'N-line' }}">
-        <textarea class="bigtextbox" rows="5" cols="80" value="{{ text }}"></textarea>
-      </template>
-
-      <input class="button" type="submit" value="Evaluate" on-click="{{ eval }}">
-      <div class="radios" on-change="{{ updateLineMode }}">
-        <label for="1-line">1-line
-          <input type="radio" name="lineMode" value="1-line" checked="">
-        </label>
-        <label for="N-line">N-line
-          <input type="radio" name="lineMode" value="N-line">
-        </label>
+    <div class="row">
+    <div class="col-md-8 col-md-offset-2">
+      <div class="panel panel-danger">
+        <div class="panel-heading">{{ error.kind }}</div>
+        <div class="panel-body">
+          <p>{{ error.message }}</p>
+        </div>
       </div>
-    </form>
-
-    <br>
-    <template if="{{ results.isNotEmpty }}">
-      <table>
-        <tbody><tr template="" repeat="{{ result in results }}">
-          <td class="historyExpr">
-            <a class="expr" on-click="{{ selectExpr }}" expr="{{ result['expr'] }}">{{ result['expr'] }}</a>
-          </td>
-          <td class="historyValue">
-            <template if="{{ result['value'] == null }}">
-              <div style="color:#aaa;cursor:wait;">&lt;pending&gt;</div>
-            </template>
-            <template if="{{ result['value'] != null }}">
-              <instance-ref isolate="{{ isolate }}" ref="{{ result['value'] }}">
-              </instance-ref>
-            </template>
-          </td>
-        </tr>
-      </tbody></table>
-    </template>
+    </div>
+    </div>
   </template>
-</polymer-element>
-
-
-<polymer-element name="field-view" extends="observatory-element">
+  
+</polymer-element><polymer-element name="field-view" extends="observatory-element">
   <template>
     <nav-bar>
       <top-nav-menu></top-nav-menu>
@@ -767,12 +874,6 @@
 </template>
 
 </polymer-element>
-<polymer-element name="script-ref" extends="service-ref">
-<template>
-  <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
-</template>
-
-</polymer-element>
 <polymer-element name="isolate-summary" extends="observatory-element">
   <template>
     <div class="row">
@@ -901,12 +1002,14 @@
       h1 {
         font: 400 18px 'Montserrat', sans-serif;
       }
-      .member {
-        vertical-align: top;
-        padding: 3px 0 3px 1em;
-        font: 400 14px 'Montserrat', sans-serif;
+      .memberList {
+        display: table;
+      }
+      .memberItem {
+        display: table-row;
       }
-      .memberBold {
+      .memberName, .memberValue {
+        display: table-cell;
         vertical-align: top;
         padding: 3px 0 3px 1em;
         font: 400 14px 'Montserrat', sans-serif;
@@ -921,23 +1024,25 @@
       <div class="content">
         <!-- TODO(turnidge): Handle null instances. -->
         <h1>instance of {{ instance['class']['user_name'] }}</h1>
-        <table>
-          <tbody><tr>
-            <td class="memberBold">class</td>
-            <td class="member">
+        <div class="memberList">
+          <div class="memberItem">
+            <div class="memberName">class</div>
+            <div class="memberValue">
               <class-ref ref="{{ instance['class'] }}">
               </class-ref>
-            </td>
-          </tr>
-          <tr template="" if="{{ instance['preview'] != null }}">
-            <td class="memberBold">preview</td>
-            <td class="member">{{ instance['preview'] }}</td>
-          </tr>
-          <tr>
-            <td class="memberBold">size</td>
-            <td class="member">{{ instance['size'] | formatSize }}</td>
-          </tr>
-        </tbody></table>
+            </div>
+          </div>
+          <template if="{{ instance['preview'] != null }}">
+            <div class="memberItem">
+              <div class="memberName">preview</div>
+              <div class="memberValue">{{ instance['preview'] }}</div>
+            </div>
+          </template>
+          <div class="memberItem">
+            <div class="memberName">size</div>
+            <div class="memberValue">{{ instance['size'] | formatSize }}</div>
+          </div>
+        </div>
       </div>
 
       <hr>
@@ -946,44 +1051,50 @@
         <template if="{{ instance['fields'].isNotEmpty }}">
           fields ({{ instance['fields'].length }})
           <curly-block>
-            <table>
-              <tbody><tr template="" repeat="{{ field in instance['fields'] }}">
-                <td class="member">
-                  <field-ref ref="{{ field['decl'] }}"></field-ref>
-                </td>
-                <td class="member">
-                  <instance-ref ref="{{ field['value'] }}"></instance-ref>
-                </td>
-              </tr>
-            </tbody></table>
+            <div class="memberList">
+              <template repeat="{{ field in instance['fields'] }}">
+                <div class="memberItem">
+                  <div class="memberName">
+                    <field-ref ref="{{ field['decl'] }}"></field-ref>
+                  </div>
+                  <div class="memberValue">
+                    <instance-ref ref="{{ field['value'] }}"></instance-ref>
+                  </div>
+                </div>
+              </template>
+            </div>
           </curly-block>
         </template>
 
         <template if="{{ instance['nativeFields'].isNotEmpty }}">
           native fields ({{ instance['nativeFields'].length }})
           <curly-block>
-            <table>
-              <tbody><tr template="" repeat="{{ field in instance['nativeFields'] }}">
-                <td class="member">[{{ field['index']}}]</td>
-                <td class="member">[{{ field['value']}}]</td>
-              </tr>
-            </tbody></table>
-          </curly-block>
+            <div class="memberList">
+              <template repeat="{{ field in instance['nativeFields'] }}">
+                <div class="memberItem">
+                  <div class="memberName">[{{ field['index']}}]</div>
+                  <div class="memberValue">[{{ field['value']}}]</div>
+                </div>
+              </template>
+            </div>
+          </curly-block><br>
         </template>
 
         <template if="{{ instance['elements'].isNotEmpty }}">
           elements ({{ instance['elements'].length }})
           <curly-block>
-            <table>
-              <tbody><tr template="" repeat="{{ element in instance['elements'] }}">
-                <td class="member">[{{ element['index']}}]</td>
-                <td class="member">
-                  <instance-ref ref="{{ element['value'] }}">
-                  </instance-ref>
-                </td>
-              </tr>
-            </tbody></table>
-          </curly-block>
+            <div class="memberList">
+              <template repeat="{{ element in instance['elements'] }}">
+                <div class="memberItem">
+                  <div class="memberName">[{{ element['index']}}]</div>
+                  <div class="memberValue">
+                    <instance-ref ref="{{ element['value'] }}">
+                    </instance-ref>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </curly-block><br>
         </template>
       </div>
 
@@ -1030,6 +1141,28 @@
 </polymer-element>
 <polymer-element name="library-view" extends="observatory-element">
   <template>
+    <style>
+      .content {
+        padding-left: 10%;
+        font: 400 14px 'Montserrat', sans-serif;
+      }
+      h1 {
+        font: 400 18px 'Montserrat', sans-serif;
+      }
+      .memberList {
+        display: table;
+      }
+      .memberItem {
+        display: table-row;
+      }
+      .memberName, .memberValue {
+        display: table-cell;
+        vertical-align: top;
+        padding: 3px 0 3px 1em;
+        font: 400 14px 'Montserrat', sans-serif;
+      }
+    </style>
+
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
@@ -1037,68 +1170,111 @@
       <nav-refresh callback="{{ refresh }}"></nav-refresh>
     </nav-bar>
 
-  <div class="alert alert-info">Scripts</div>
-  <table class="table table-hover">
-    <tbody>
-      <tr template="" repeat="{{ script in library['scripts']}}">
-        <td>
-          {{ script.kind }}
-        </td>
-        <td>
-          <script-ref ref="{{ script }}"></script-ref>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="alert alert-info">Imported Libraries</div>
-  <table class="table table-hover">
-    <tbody>
-      <tr template="" repeat="{{ lib in library['libraries'] }}">
-        <td>
-          <library-ref ref="{{ lib }}"></library-ref>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="alert alert-info">Variables</div>
-  <table class="table table-hover">
-    <tbody>
-      <tr template="" repeat="{{ variable in library['variables'] }}">
-        <td><field-ref ref="{{ variable }}"></field-ref></td>
-        <td><instance-ref ref="{{ variable['value'] }}"></instance-ref></td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="alert alert-info">Functions</div>
-  <table class="table table-hover">
-    <tbody>
-      <tr template="" repeat="{{ func in library['functions'] }}">
-        <td>
-          <function-ref ref="{{ func }}"></function-ref>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="alert alert-info">Classes</div>
-  <table class="table table-hover">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Internal Name</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr template="" repeat="{{ cls in library['classes'] }}">
-        <td>
-          <class-ref ref="{{ cls }}"></class-ref>
-        </td>
-        <td>
-          <class-ref ref="{{ cls }}" internal=""></class-ref>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+    <div class="content">
+      <h1>
+        <!-- TODO(turnidge): Handle unnamed libraries -->
+        library {{ library.name }}
+      </h1>
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">url</div>
+          <div class="memberValue">{{ library['url'] }}</div>
+        </div>
+        <template if="{{ library['imports'].length > 0 }}">
+          <div class="memberItem">
+            <div class="memberName">imports</div>
+            <div class="memberValue">
+              <template repeat="{{ import in library['imports'] }}">
+                <library-ref ref="{{ import }}"></library-ref>
+              </template>
+            </div>
+          </div>
+        </template>
+        <template if="{{ library.name != library.vmName }}">
+          <div class="memberItem">
+            <div class="memberName">vm name</div>
+            <div class="memberValue">{{ library.vmName }}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <hr>
+
+    <div class="content">
+      <template if="{{ library['scripts'].isNotEmpty }}">
+        scripts ({{ library['scripts'].length }})
+        <curly-block>
+          <div class="memberList">
+            <template repeat="{{ script in library['scripts'] }}">
+              <div class="memberItem">
+                <div class="memberValue">
+                  <script-ref ref="{{ script }}"></script-ref>
+                </div>
+              </div>
+            </template>
+          </div>
+        </curly-block><br>
+      </template>
+
+      <template if="{{ library['classes'].isNotEmpty }}">
+        classes ({{ library['classes'].length }})
+        <curly-block>
+          <div class="memberList">
+            <template repeat="{{ cls in library['classes'] }}">
+              <div class="memberItem">
+                <div class="memberValue">
+                  <class-ref ref="{{ cls }}"></class-ref>
+                </div>
+              </div>
+            </template>
+          </div>
+        </curly-block><br>
+      </template>
+
+      <template if="{{ library['variables'].isNotEmpty }}">
+        variables ({{ library['variables'].length }})
+        <curly-block>
+          <div class="memberList">
+            <template repeat="{{ field in library['variables'] }}">
+              <div class="memberItem">
+                <div class="memberName">
+                  <field-ref ref="{{ field }}"></field-ref>
+                </div>
+                <div class="memberValue">
+                  <template if="{{ field['value'] != null }}">
+                    <instance-ref ref="{{ field['value'] }}"></instance-ref>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+        </curly-block><br>
+      </template>
+
+      <template if="{{ library['functions'].isNotEmpty }}">
+        functions ({{ library['functions'].length }})
+        <curly-block>
+          <div class="memberList">
+            <template repeat="{{ function in library['functions'] }}">
+              <div class="memberItem">
+                <div class="memberValue">
+                  <function-ref ref="{{ function }}"></function-ref>
+                </div>
+              </div>
+            </template>
+          </div>
+        </curly-block><br>
+      </template>
+    </div>
+
+    <hr>
 
+    <div class="content">
+      <eval-box callback="{{ eval }}"></eval-box>
+    </div>
+    <br><br><br><br>
+    <br><br><br><br>
   </template>
   
 </polymer-element>
@@ -1252,9 +1428,17 @@
 <polymer-element name="stack-frame" extends="observatory-element">
   <template>
     <style>
-      .member {
+      .memberList {
+        display: table;
+      }
+      .memberItem {
+        display: table-row;
+      }
+      .memberName, .memberValue {
+        display: table-cell;
         vertical-align: top;
-        padding: 0 0 0 1em;
+        padding: 3px 0 3px 1em;
+        font: 400 14px 'Montserrat', sans-serif;
       }
     </style>
     <div class="row">
@@ -1266,15 +1450,18 @@
         <function-ref ref="{{ frame['function'] }}"></function-ref>
         ( <script-ref ref="{{ frame['script'] }}" line="{{ frame['line'] }}">
         </script-ref> )
+
         <curly-block>
-          <table>
-            <tbody><tr template="" repeat="{{ v in frame['vars'] }}">
-              <td class="member">{{ v['name']}}</td>
-              <td class="member">
-                <instance-ref ref="{{ v['value'] }}"></instance-ref>
-              </td>
-            </tr>
-          </tbody></table>
+          <div class="memberList">
+            <template repeat="{{ v in frame['vars'] }}">
+              <div class="memberItem">
+                <div class="memberName">{{ v['name']}}</div>
+                <div class="memberValue">
+                  <instance-ref ref="{{ v['value'] }}"></instance-ref>
+                </div>
+              </div>
+            </template>
+          </div>
         </curly-block>
 
       </div>