Bug 1222982 - Add stability levels to API docs

_layouts/default.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="/assets/style.css">
     <link rel="stylesheet" href="/assets/highlight.css">
     <link rel="stylesheet" href="/assets/markdown.css">
+    <link rel="stylesheet" href="/assets/docref/stability.css">
 
     <!-- jQuery and Bootstrap Javascript-->
     <script src="/assets/jquery.min.js"></script>

assets/docref/reference.ejs

@@ -54,9 +54,10 @@
         }
       }
       var signature = entry.name + "(" + args.join(', ') + ") : " + retval;
+      var stabilityValue = entry.stability || "unknown";
     %>
      <tr>
-      <td><code><a
+      <td><code  class = '<%= stabilityValue %>'><a
                   href='#<%= entry.name %>'
                   title='<%= entry.title%>'><%= signature %></a></code></td>
       <td><%= entry.title %></td>
@@ -99,10 +100,11 @@
 
 <% entries.filter(function(entry) {
     return entry.type == 'function';
-  }).forEach(function(entry) { %>
+  }).forEach(function(entry) {
+	var stabilityValue = entry.stability || "unknown"; %>
   <a name='<%= entry.name %>'></a>
   <hr>
-  <h2><%= marked(entry.title) %></h2>
+  <h2 class = '<%= stabilityValue %>'><%= marked(entry.title) %></h2>
   <dl class='dl-horizontal method-properties'>
     <dt>Method</dt>
     <dd><div class='label label-default'><%= entry.method %></div></dd>
@@ -155,6 +157,8 @@
       var signature = entry.name + "(" + args.join(', ') + ") : " + retval;
     %>
     <dd><code><%= signature%></code></dd>
+    <dt>Stability</dt>
+    <dd><code class='<%= stabilityValue %>' ><%= stabilityValue %></code></dd>
   </dl>
   <%= marked(entry.description) %>
   <% if (entry.input) { %>

assets/docref/stability.css

@@ -0,0 +1,18 @@
+code.experimental,h2.experimental>p{
+	color:rgb(32, 29, 29);
+	background-color:#FFE9D2;
+}
+code.stable,h2.stable>p{
+	color:rgb(32, 29, 29);
+	background-color:#E2F5BF;
+}
+code.deprecated,h2.deprecated>p,code.deprecated>a{
+	color:#C7254E;
+	background-color:#E1DBDB;
+}
+h2>p{
+	border-radius:4px;
+	padding:0.5%;
+	margin-bottom:0%;
+	display:inline;
+}