Rework library and class view pages.

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

Index: runtime/bin/vmservice/client/lib/src/elements/instance_view.html
diff --git a/runtime/bin/vmservice/client/lib/src/elements/instance_view.html b/runtime/bin/vmservice/client/lib/src/elements/instance_view.html
index c39183dd1b17556a736c576a601d50f8c6e0d9a7..6c400ca8fe7553cb036d59b63954152146bd7f2f 100644
--- a/runtime/bin/vmservice/client/lib/src/elements/instance_view.html
+++ b/runtime/bin/vmservice/client/lib/src/elements/instance_view.html
@@ -26,12 +26,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;
       }
-      .memberBold {
+      .memberItem {
+        display: table-row;
+      }
+      .memberName, .memberValue {
+        display: table-cell;
         vertical-align: top;
         padding: 3px 0 3px 1em;
         font: 400 14px 'Montserrat', sans-serif;
@@ -46,23 +48,25 @@
       <div class="content">
         <!-- TODO(turnidge): Handle null instances. -->
         <h1>instance of {{ instance['class']['user_name'] }}</h1>
-        <table>
-          <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>
-        </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>
@@ -71,44 +75,50 @@
         <template if="{{ instance['fields'].isNotEmpty }}">
           fields ({{ instance['fields'].length }})
           <curly-block>
-            <table>
-              <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>
-            </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>
-              <tr template repeat="{{ field in instance['nativeFields'] }}">
-                <td class="member">[{{ field['index']}}]</td>
-                <td class="member">[{{ field['value']}}]</td>
-              </tr>
-            </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>
-              <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>
-            </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>