Web components based app to view dart docs. Still has rough edges.

client/web/doc_link.html

Index: client/web/doc_link.html
diff --git a/client/web/doc_link.html b/client/web/doc_link.html
index c88cb531902545c8caec2c535bdcd23b37346531..9ac1cdcddcafc0f101d78b08a1265aab0e498323 100644
--- a/client/web/doc_link.html
+++ b/client/web/doc_link.html
@@ -3,7 +3,14 @@
   <element name="x-doc-link" constructor="DocLink" extends="span">
     <template>
       <template instantiate="if ref.refId != 'void'">
-        <a href="{{permalink(ref)}}">{{ref.name}}</a>
+        <a href="{{permalink(ref)}}">
+          <template instantiate="if short == true">

[Siggi Cherem (dart-lang), 2012/12/19 19:47:33]

"if short == true" => "if short"

[Jacob, 2013/01/02 19:54:58]

Done.

+            {{ref.name}}
+          </template>
+          <template instantiate="if short != true">
+            {{ref.shortDescription}}

[Siggi Cherem (dart-lang), 2012/12/19 19:47:33]

if you end up switching shortDescription to be toString, this would become just
{{ref}}

[Jacob, 2013/01/02 19:54:58]

The trouble is this isn't really the canonical way  to display the element name.
It is at least equally valid to think that .toString should return ref.name

+          </template>
+        </a>
       </template>
       <template instantiate="if ref.refId == 'void'">
         {{ref.name}}
@@ -17,148 +24,9 @@
       class DocLink extends WebComponent {
         /// Must be a Reference or Element.

[Siggi Cherem (dart-lang), 2012/12/19 19:47:33]

use comment kind consistently (/// or /**). So far I've seen mostly /**, but up
to you.

[Siggi Cherem (dart-lang), 2012/12/19 19:47:33]

alternatively, we could possibly make Element extend Reference (be an already
resolved reference).

[Jacob, 2013/01/02 19:54:58]

I'm not sure making Element extend Reference is a good idea.  Seems a bit
confusing.  I think there is however a cleaner solution.

[Jacob, 2013/01/02 19:54:58]

Done.

         var ref;
+        /** Whether a short version of the Element name should be used. */

[Siggi Cherem (dart-lang), 2012/12/19 19:47:33]

nit: + empty line above comment

[Jacob, 2013/01/02 19:54:58]

Done.

+        bool short;
       }
     </script>
   </element>
-
-  <element name="x-member-blocks" constructor="MemberBlocks" extends="div">
-    <template>
-      <template iterate='block in blocks'>
-        <div>
-          <h3>{{block.kindTitle}}</h3>
-          <ul>
-            <template iterate='element in block.elements'>
-              <li class="{{kindCssClass(element)}}">
-                <x-element-summary element="{{element}}"></x-element-summary>
-              </li>
-            </template>
-          </ul>
-        </div>
-      </template>
-    </template>
-    <script type="application/dart">
-      // TODO(jacobr): this is kinda a rediculous way to do this
-      import 'package:web_ui/web_ui.dart';
-      import 'ast.dart';
-      import 'model.dart';
-
-      class MemberBlocks extends WebComponent {
-        List<ElementBlock> blocks;
-      }
-    </script>
-  </element>
-
-  <element name="x-element-signature" constructor="ElementSignature" extends="span">
-    <template>
-      <span class="element-class">
-        <template instantiate="if (element is MethodElementBase || element is TypedefElement) && element.returnType != null">
-          <x-doc-link ref="{{element.returnType}}"></x-doc-link>
-        </template>
-      </span>
-      <span class="element-definition">
-        <span class="element-name"><x-doc-link ref="{{element}}"></x-doc-link></span>
-        <template instantiate="if element is MethodElement || element is ConstructorElement || element is TypedefElement">
-          <span class="args">(
-            <template iterate="param in element.parameters">
-              <span class="arg">
-                <template instantiate="if param.type != null">
-                  <span class = "arg-type">
-                    <x-doc-link ref="{{param.type}}"></x-doc-link>
-                  </span>
-                </template>
-                <span class="arg-name">{{param.name}}</span>
-              </span>
-            </template>)
-          </span>
-        </template>
-      </span>
-    </template>
-    <script type="application/dart">
-      import 'package:web_ui/web_ui.dart';
-      import 'ast.dart';
-      import 'model.dart';
-
-      class ElementSignature extends WebComponent {
-        Element element;
-      }
-    </script>
-  </element>
-
-  <element name="x-element-summary" constructor="ElementSummary" extends="div">
-    <template>
-      <!--TODO(jacobr): use id instead of data-id and use a different escaping scheme-->
-      <details class="element-details {{(element is MethodElementBase) ? 'member-details' : 'type-details'}}" data-id="{{element.id}}" open="{{currentMember != null && element.id == currentMember.id}}">
-        <summary>
-          <div class="overflow-shadow"></div>
-          <template instantiate="if element is! ClassElement">
-            <x-element-signature element="{{element}}">
-            </x-element-signature>
-          </template>
-          <template instantiate="if element is ClassElement">
-            <x-doc-link class="element-name element-definition" ref="{{element}}"></x-doc-link>
-          </template>
-          <div class="documentation">
-             {{element.commentHtml}}
-          </div>
-        </summary>
-        <details class="extended-element-info">
-          <summary>View ?? comments.</summary>
-          TODO(jacobr): implement.
-        </details>
-      </details>
-    </template>
-    <script type="application/dart">
-      // TODO(jacobr): this is kinda a rediculous way to do this
-      import 'package:web_ui/web_ui.dart';
-      import 'ast.dart';
-      import 'model.dart';
-
-      class ElementSummary extends WebComponent {
-        Element element;
-      }
-    </script>
-  </element>
-
-  <element name="x-class-hierarchy-subtree" constructor="ClassHierarchySubtree" extends="div">
-    <template>
-      <template instantiate="if (index < clazz.superclasses.length)">
-        <div><x-doc-link ref={{clazz.superclasses[index]}}></x-doc-link></div>
-        <div style="padding-left: 15px">
-          <x-class-hierarchy-subtree clazz="{{clazz}}" index="{{index+1}}">
-          </x-class-hierarchy-subtree>
-        </div>
-      </template>
-      <template instantiate="if index == clazz.superclasses.length">
-        <div><strong>{{clazz.name}}</strong></div>
-      </template>
-    </template>
-    <script type="application/dart">
-      // TODO(jacobr): this is kinda a rediculous way to do this
-      import 'package:web_ui/web_ui.dart';
-      import 'ast.dart';
-      import 'model.dart';
-
-      class ClassHierarchySubtree extends WebComponent {
-        ClassElement clazz;
-        int index;
-      }
-    </script>
-  </element>
-
-  <element name="x-class-hierarchy" constructor="ClassHierarchy" extends="div">
-    <template>
-      <x-class-hierarchy-subtree clazz="{{clazz}}" index="{{0}}">
-      </x-class-hierarchy-subtree>
-    </template>
-    <script type="application/dart">
-      import 'package:web_ui/web_ui.dart';
-      import 'ast.dart';
-      import 'model.dart';
-
-      class ClassHierarchy extends WebComponent {
-        ClassElement clazz;
-      }
-    </script>
-  </element>
-<!-- more below... -->
 </body></html>