Rework the <field-view> page.

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

Index: runtime/bin/vmservice/client/deployed/web/index_devtools.html
diff --git a/runtime/bin/vmservice/client/deployed/web/index_devtools.html b/runtime/bin/vmservice/client/deployed/web/index_devtools.html
index 2632d5b34283dba1c59cafebc64b1d84522057d0..3248f06adebc069bf6c615a8b1a6ddadb5e9f6e5 100644
--- a/runtime/bin/vmservice/client/deployed/web/index_devtools.html
+++ b/runtime/bin/vmservice/client/deployed/web/index_devtools.html
@@ -312,14 +312,16 @@
         <a href="{{ url }}">{{ ref['user_name'] }}</a>
       </template>
 
-      <template if="{{ isClosure(ref.serviceType) }}">
+      <template if="{{ isInstance(ref.serviceType) &amp;&amp;
+                       ref['closureFunc'] != null}}">
         <a href="{{ url }}">
           <!-- TODO(turnidge): Switch this to fully-qualified function -->
           {{ ref['closureFunc']['user_name'] }}
         </a>
       </template>
 
-      <template if="{{ isInstance(ref.serviceType) }}">
+      <template if="{{ isInstance(ref.serviceType) &amp;&amp;
+                       ref['closureFunc'] == null}}">
         <a href="{{ url }}"><em>{{ ref['class']['user_name'] }}</em></a>
         <curly-block callback="{{ expander() }}">
           <div class="memberList">
@@ -437,23 +439,27 @@
 
 
 <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') }}">
-    <instance-ref ref="{{ ref['declared_type'] }}"></instance-ref>
+  <template>
+    <div>
+      <template if="{{ ref['static'] }}">static</template>
+      <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') }}">
+        <instance-ref ref="{{ ref['declared_type'] }}"></instance-ref>
+      </template>
+      <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
+    </div>
   </template>
-  <a title="{{ hoverText }}" href="{{ url }}">{{ name }}</a>
-</div>
-</template>  </polymer-element>
+  
+</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><!--
+       --><class-ref ref="{{ ref['owner'] }}"></class-ref>.</template><!--
      --><template if="{{ qualified &amp;&amp; hasParent }}"><!--
        --><function-ref ref="{{ ref['parent'] }}" qualified="{{ true }}">
           </function-ref>.<!--
@@ -751,6 +757,28 @@
 </polymer-element>
 <polymer-element name="field-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="{{ field.isolate }}"></isolate-nav-menu>
@@ -765,40 +793,71 @@
       <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">
-          <template if="{{ field['static'] }}">static</template>
-          <template if="{{ field['final'] }}">final</template>
-          <template if="{{ field['const'] }}">const</template>
-          {{ field['user_name'] }} ({{ field['name'] }})
-          <class-ref ref="{{ field['owner'] }}"></class-ref>
+    <div class="content">
+      <h1>
+        <template if="{{ field['static'] }}">static</template>
+        <template if="{{ field['final'] }}">final</template>
+        <template if="{{ field['const'] }}">const</template>
+        <template if="{{ (field['declared_type']['name'] == 'dynamic' &amp;&amp;
+                         !field['final'] &amp;&amp; !field['const']) }}">
+          var
+        </template>
+        <template if="{{ (field['declared_type']['user_name'] != 'dynamic') }}">
+          {{ field['declared_type']['user_name'] }}
+        </template>
+        {{ field['user_name'] }}
+      </h1>
+      <div class="memberList">
+        <div class="memberItem">
+          <div class="memberName">owner</div>
+          <div class="memberValue">
+            <template if="{{ field['owner'].serviceType == 'Class' }}">
+              <class-ref ref="{{ field['owner'] }}"></class-ref>
+            </template>
+            <template if="{{ field['owner'].serviceType != 'Class' }}">
+              <library-ref ref="{{ field['owner'] }}"></library-ref>
+            </template>
+          </div>
         </div>
-        <div class="panel-body">
-        <template if="{{ field['guard_class'] == 'dynamic'}}">
-          <div class="alert alert-danger">
-            Field has been assigned multiple types. If a field is only ever
-            assigned a single type, performance may improve.
+        <div class="memberItem">
+          <div class="memberName">script</div>
+          <div class="memberValue">
+            <script-ref ref="{{ field['script'] }}"></script-ref>
+          </div>
+        </div>
+        <template if="{{ !field['static'] }}">
+          <div class="memberItem" title="The types observed for this field at runtime.  Fields that are observed to have a single type at runtime or to never be null may allow for additional optimization.">
+            <div class="memberName">observed types</div>
+            <div class="memberValue">
+              <template if="{{ field['guard_class'] == 'dynamic' }}">
+                various
+              </template>
+              <template if="{{ field['guard_class'] == 'unknown' }}">
+                none
+              </template>
+              <template if="{{ field['guard_class'] != 'unknown' &amp;&amp;
+                            field['guard_class'] != 'dynamic' }}">
+                <class-ref ref="{{ field['guard_class'] }}"></class-ref>
+                <template if="{{ field['guard_nullable'] }}">
+                  — null observed
+                </template>
+                <template if="{{ !field['guard_nullable'] }}">
+                  — null not observed
+                </template>
+              </template>
+            </div>
           </div>
         </template>
-        <template if="{{ (field['guard_class'] != 'dynamic') &amp;&amp; (field['guard_class'] != 'unknown') }}">
-          <div class="alert alert-success">Field has monomorphic type</div>
-          <template if="{{ (field['guard_class'] != 'dynamic') &amp;&amp;
-                        field['guard_nullable'] }}">
-            <div class="alert alert-info">
-              Field has been assigned null. If a field is never assigned null,
-              performance may improve.
+        <template if="{{ field['value'] != null }}">
+          <div class="memberItem">
+            <div class="memberName">static value</div>
+            <div class="memberValue">
+              <instance-ref ref="{{ field['value'] }}"></instance-ref>
             </div>
-          </template>
-          <blockquote>
-            <class-ref ref="{{ field['guard_class'] }}"></class-ref>
-          </blockquote>
+          </div>
         </template>
-        </div>
       </div>
     </div>
-  </div>
   </template>
   
 </polymer-element>
@@ -829,11 +888,11 @@
     <nav-bar>
       <top-nav-menu></top-nav-menu>
       <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>
-      <template if="{{ function['owner']['type'] == '@Class' }}">
+      <template if="{{ function['owner'].serviceType == 'Class' }}">
         <!-- TODO(turnidge): Add library nav menu here. -->
         <class-nav-menu cls="{{ function['owner'] }}"></class-nav-menu>
       </template>
-      <template if="{{ function['owner']['type'] == '@Library' }}">
+      <template if="{{ function['owner'].serviceType == 'Library' }}">
         <library-nav-menu library="{{ function['owner'] }}"></library-nav-menu>
       </template>
       <nav-menu link="." anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
@@ -860,20 +919,21 @@
             </div>
           </div>
         </template>
-        <template if="{{ function['parent'] == null &amp;&amp;
-                         function['class'] != null }}">
-          <div class="memberItem">
-            <div class="memberName">parent class</div>
-            <div class="memberValue">
-              <class-ref ref="{{ function['class'] }}"></class-ref>
-            </div>
+        <div class="memberItem">
+          <div class="memberName">owner</div>
+          <div class="memberValue">
+            <template if="{{ function['owner'].serviceType == 'Class' }}">
+              <class-ref ref="{{ function['owner'] }}"></class-ref>
+            </template>
+            <template if="{{ function['owner'].serviceType != 'Class' }}">
+              <library-ref ref="{{ function['owner'] }}"></library-ref>
+            </template>
           </div>
-        </template>
+        </div>
         <div class="memberItem">
           <div class="memberName">script</div>
           <div class="memberValue">
-            <script-ref ref="{{ function['script'] }}">
-            </script-ref>
+            <script-ref ref="{{ function['script'] }}"></script-ref>
           </div>
         </div>
 
@@ -1309,6 +1369,15 @@
               </div>
             </div>
           </template>
+          <template if="{{ instance['closureFunc'] != null }}">
+            <div class="memberItem">
+              <div class="memberName">closure function</div>
+              <div class="memberValue">
+                <function-ref ref="{{ instance['closureFunc'] }}">
+                </function-ref>
+              </div>
+            </div>
+          </template>
         </div>
       </div>