web: Display documentation before other things

The current order for displaying references is:

- [definitions] prototype, label, typedef, variable, struct, member,
  function
- documentation
- references

This order is not very practical when you are searching for information
about a symbol, as you often want to know if the symbol is documented.

By inverting the order and displaying the documentation first, the user
experience may be improved for finding the documentation. This should not
significantly change the UX for definitions, as there are already many
definitions, and you already have to search for what you want.

elixir/web.py

@@ -659,6 +659,12 @@ def generate_ident_page(ctx, q, project, version, family, ident):
     symbol_sections = []
 
     if len(symbol_definitions) or len(symbol_references):
+        if len(symbol_doccomments):
+            symbol_sections.append({
+                'title': 'Documented',
+                'symbols': {'_unknown': [symbol_instance_to_entry(source_base_url, sym) for sym in symbol_doccomments]},
+            })
+
         if len(symbol_definitions):
             defs_by_type = OrderedDict({})
 
@@ -678,12 +684,6 @@ def generate_ident_page(ctx, q, project, version, family, ident):
                 'message': 'No definitions found in the database',
             })
 
-        if len(symbol_doccomments):
-            symbol_sections.append({
-                'title': 'Documented',
-                'symbols': {'_unknown': [symbol_instance_to_entry(source_base_url, sym) for sym in symbol_doccomments]},
-            })
-
         if len(symbol_references):
             symbol_sections.append({
                 'title': 'Referenced',

static/dynamic-references.js

@@ -144,8 +144,8 @@ function generateReferencesHTML(data, project, version) {
   let symbolReferences = data["references"];
   let symbolDocumentations = data["documentations"];
   return '<div class="lxrident">' +
-    generateSymbolDefinitionsHTML(symbolDefinitions, project, version) +
     generateDocCommentsHTML(symbolDocumentations, project, version) +
+    generateSymbolDefinitionsHTML(symbolDefinitions, project, version) +
     generateSymbolReferencesHTML(symbolReferences, project, version) +
     '</div>';
 }