Add class annotation to HTML templates for different kinds of entities (#1929)

Tools like Dashing (used to create offline docs for Dash/Zeal) use CSS descriptors to index the different entities so that they can search for them and display them in a menu. Since the library and class types now use the same CSS in dartdoc, that made it impossible to differentiate between libraries and classes.

This PR adds some (empty) CSS classes in spans around the names of the entities, so that it's easy to explicitly find the name of the entity for each type in the HTML output.

I didn't use the `{{kind}}` template parameter because it sometimes contains spaces.

Addresses [flutter/flutter#27654](flutter/flutter#27654)

Author: gspencergoog

lib/templates/category.html

@@ -8,7 +8,7 @@ <h5><span class="package-name">{{parent.name}}</span> <span class="package-kind"
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <h1>{{name}} {{kind}}</h1>
+      <h1><span class="kind-category">{{name}}</span> {{kind}}</h1>
       {{>documentation}}
 
       {{#hasPublicLibraries}}

lib/templates/class.html

@@ -8,7 +8,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}} {{>categorization}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-class">{{{nameWithGenerics}}}</span> {{kind}} {{>categorization}}</h1></div>
     {{/self}}
 
     {{#clazz}}

lib/templates/constant.html

@@ -8,7 +8,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <div>{{>source_link}}<h1>{{{name}}} {{kind}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-constant">{{{name}}}</span> {{kind}}</h1></div>
     {{/self}}
 
     <section class="multi-line-signature">

lib/templates/constructor.html

@@ -8,7 +8,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-constructor">{{{nameWithGenerics}}}</span> {{kind}}</h1></div>
     {{/self}}
 
     {{#constructor}}

lib/templates/enum.html

@@ -8,7 +8,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <div>{{>source_link}}<h1>{{{name}}} {{kind}} {{>categorization}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-enum">{{{name}}}</span> {{kind}} {{>categorization}}</h1></div>
     {{/self}}
 
     {{#eNum}}

lib/templates/function.html

@@ -8,7 +8,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}} {{>categorization}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-function">{{{nameWithGenerics}}}</span> {{kind}} {{>categorization}}</h1></div>
     {{/self}}
 
     {{#function}}

lib/templates/library.html

@@ -8,7 +8,7 @@ <h5><span class="package-name">{{parent.name}}</span> <span class="package-kind"
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <div>{{>source_link}}<h1>{{{name}}} {{kind}} {{>categorization}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-library">{{{name}}}</span> {{kind}} {{>categorization}}</h1></div>
     {{/self}}
 
     {{#library}}

lib/templates/method.html

@@ -8,7 +8,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-method">{{{nameWithGenerics}}}</span> {{kind}}</h1></div>
     {{/self}}
 
     {{#method}}

lib/templates/mixin.html

@@ -8,7 +8,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}} {{>categorization}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-mixin">{{{nameWithGenerics}}}</span> {{kind}} {{>categorization}}</h1></div>
     {{/self}}
 
     {{#mixin}}

lib/templates/property.html

@@ -8,7 +8,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-      <div>{{>source_link}}<h1>{{name}} {{kind}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-property">{{name}}</span> {{kind}}</h1></div>
     {{/self}}
 
     {{#self}}

lib/templates/top_level_constant.html

@@ -8,17 +8,16 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-    <div>{{>source_link}}<h1>{{{name}}} {{kind}} {{>categorization}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-top-level-constant">{{{name}}}</span> {{kind}} {{>categorization}}</h1></div>
 
-    <section class="multi-line-signature">
-      {{>name_summary}}
-      =
-      <span class="constant-value">{{{ constantValue }}}</span>
-      {{>features}}
-    </section>
-
-    {{>documentation}}
-    {{>source_code}}
+      <section class="multi-line-signature">
+        {{>name_summary}}
+        =
+        <span class="constant-value">{{{ constantValue }}}</span>
+        {{>features}}
+      </section>
+      {{>documentation}}
+      {{>source_code}}
     {{/self}}
 
   </div> <!-- /.main-content -->

lib/templates/top_level_property.html

@@ -8,25 +8,25 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-    <div>{{>source_link}}<h1>{{{name}}} {{kind}} {{>categorization}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-top-level-property">{{{name}}}</span> {{kind}} {{>categorization}}</h1></div>
 
-    {{#hasNoGetterSetter}}
-    <section class="multi-line-signature">
-      <span class="returntype">{{{ linkedReturnType }}}</span>
-      {{>name_summary}}
-      {{>features}}
-    </section>
-    {{>documentation}}
-    {{>source_code}}
-    {{/hasNoGetterSetter}}
+      {{#hasNoGetterSetter}}
+        <section class="multi-line-signature">
+          <span class="returntype">{{{ linkedReturnType }}}</span>
+          {{>name_summary}}
+          {{>features}}
+        </section>
+        {{>documentation}}
+        {{>source_code}}
+      {{/hasNoGetterSetter}}
 
-    {{#hasExplicitGetter}}
-    {{>accessor_getter}}
-    {{/hasExplicitGetter}}
+      {{#hasExplicitGetter}}
+        {{>accessor_getter}}
+      {{/hasExplicitGetter}}
 
-    {{#hasExplicitSetter}}
-    {{>accessor_setter}}
-    {{/hasExplicitSetter}}
+      {{#hasExplicitSetter}}
+        {{>accessor_setter}}
+      {{/hasExplicitSetter}}
     {{/self}}
   </div> <!-- /.main-content -->
 

lib/templates/typedef.html

@@ -8,7 +8,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
 
   <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
     {{#self}}
-    <div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}} {{>categorization}}</h1></div>
+      <div>{{>source_link}}<h1><span class="kind-typedef">{{{nameWithGenerics}}}</span> {{kind}} {{>categorization}}</h1></div>
     {{/self}}
 
     <section class="multi-line-signature">