First cut at extension docs.

This adds the base mechanism for api reference pages to be generated from shared json schema api definitions.

TBR=aa

Review URL: http://codereview.chromium.org/149503

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@20748 0039d316-1c4b-4281-b951-d872f2087c98

9 files changed, 740 insertions, 0 deletions

diff --git a/chrome/common/extensions/api/bookmarks.json b/chrome/common/extensions/api/bookmarks.json
new file mode 100755
index 0000000..a68b9a0
--- /dev/null
+++ b/chrome/common/extensions/api/bookmarks.json
@@ -0,0 +1,99 @@
+{

+  "namespace": "chrome.bookmarks",

+  "types": [

+    {

+      "id": "BookmarkTreeNode",

+      "properties": {

+        "id": {

+          "type": "integer"

+        },

+        "title": {

+          "type": "string"

+        },

+        "parentId": {

+          "type": "integer"

+        },

+        "url": {

+          "type": "string"

+        },

+        "children": {

+          "type": "array",

+          "items": {

+            "$ref": "BookmarkTreeNode"

+          }

+        },

+        "dateAdded": {

+          "type": "integer"

+        },

+        "dateGroupModified": {

+          "type": "integer"

+        }

+      }

+    }

+  ],

+  "functions": [

+    {

+      "name": "create",

+      "description": "<p>Creates a new bookmark. To get the newly created bookmark (or just find out whether its creation succeeded), you need to specify a callback function.</p><p>If you specify a <code>url</code> </span>in the <var>bookmark</var> parameter, the new bookmark represents a URL; otherwise, it represents a group.</p><p>For more information about bookmark properties, see the <a href='#TOC-Description'>Description</a> section.</p>",

+      "parameters": [

+        { 

+          "name": "parentId",

+          "description": "The requested value of the new bookmark's <code>parentId</code> property.",

+          "type": "integer",

+          "minimum": 0,

+          "optional": true

+        },

+        {

+          "name": "index",

+          "description": "The desired <code>index</code> position (0-based) at which this bookmark should be created. If absent, it will be placed at the end.",

+          "type": "integer",

+          "minimum": 0,

+          "optional": true

+        },

+        {

+          "name": "title",

+          "description": "The <code>title</code> string to be displayed to the user on in the bookmarks system.",

+          "type": "string",

+          "optional": true

+        },

+        {

+          "name": "url",

+          "description": "The destination URL of this bookmark.",

+          "type": "string",

+          "optional": true

+        },

+        { 

+          "name": "callback",

+          "description": "Function to callback upon completion.",

+          "type": "function",

+          "optional": true

+        }

+      ],

+      "callbackParameters" : [

+        {

+          "name": "result",

+          "$ref": "BookmarkTreeNode",

+          "description": "The BookmarkTreeNode that was created in the bookmarks system."

+        }

+      ]

+    }

+  ],

+  "events": [

+    {

+      "name": "onAdded",

+      "description": "Sent whenever a bookmark is added.",

+      "parameters": [

+        {

+          "name": "id",

+          "type": "integer",

+          "description": "The id of the BookmarkTreeNode that was added."

+        },

+        {

+          "name": "node",

+          "$ref": "BookmarkTreeNode",

+          "description": "The properties of the BookmarkTreeNode that was added."

+        }

+      ]

+    }

+  ]

+}
\ No newline at end of file
diff --git a/chrome/common/extensions/api/tabs.json b/chrome/common/extensions/api/tabs.json
new file mode 100755
index 0000000..112f231
--- /dev/null
+++ b/chrome/common/extensions/api/tabs.json
@@ -0,0 +1,50 @@
+{

+  "namespace": "chrome.tabs",

+  "types": [],

+  "functions": [

+    {

+      "name": "getLanguage",

+      "description": "Attempts to determine the language of the content of the tab with id <var>tabId</var>",

+      "parameters": [

+        { 

+          "name": "tabId",

+          "description": "The id of the tab whose contents should be evaluated for it's source language",

+          "type": "integer",

+          "minimum": 0,

+          "optional": true

+        },

+        { 

+          "name": "callback",

+          "description": "Function to callback upon completion.",

+          "type": "function",

+          "optional": true

+        }

+      ],

+      "callbackParameters" : [

+        {

+          "name": "result",

+          "type": "string",

+          "description": "The language of the content found in specified tab."

+        }

+      ]

+    }

+  ],

+  "events": [

+    {

+      "name": "onMoved",

+      "description": "Sent whenever a tab is moved.",

+      "parameters": [

+        {

+          "name": "tabId",

+          "type": "integer",

+          "description": "The id of the tab that was moved."

+        },

+        {

+          "name": "TabMoveDetails",

+          "type": "object",

+          "description": "Properties describing the tab move event."

+        }

+      ]

+    }

+  ]

+}
\ No newline at end of file
diff --git a/chrome/common/extensions/docs/css/ApiRefStyles.css b/chrome/common/extensions/docs/css/ApiRefStyles.css
new file mode 100755
index 0000000..d781b7d
--- /dev/null
+++ b/chrome/common/extensions/docs/css/ApiRefStyles.css
@@ -0,0 +1,87 @@
+body {
+  font-family:Arial, Helvetica, sans-serif;
+  font-size: 13px;
+}
+
+h2,h3 {
+  margin-top: 2em;
+}
+
+.comment {
+  color: rgb(255, 0, 0);
+}
+
+div.summary .subdued {
+  color: rgb(147, 180, 217);
+}
+
+.optional {
+  color: rgb(125, 125, 125);
+}
+
+.apiGroup div.description {
+  margin-left: 2em;
+}
+
+.apiGroup div.summary {
+  border: 1px solid rgb(147, 180, 217);
+  font-family: "Courier New", courier, monospace;
+  padding: 0.5em;
+  background-color: rgb(202, 222, 244);
+}
+
+div.summary div {
+  margin-bottom: 0.5em;
+}
+
+pre {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0.5em;
+  background-color: rgb(250, 250, 250);
+}
+
+div#toc {
+  background-color: rgb(232, 237, 235);
+  border: 1px solid rgb(176, 189, 204);
+  display: inline;
+  float: right;
+  margin: 5px 0px 5px 20px;
+  padding: 5px;
+  width: 250px;
+}
+
+#toc p {
+  font-weight: bold;
+  margin: 0px;
+}
+
+#toc ol {
+  list-style-image: none;
+  list-style-type: none;
+  padding-left: 1em;
+}
+
+#breadcrumbs {
+  font-size: 80%;
+}
+
+.exampleLink {
+  font-size: 80%;
+}
+
+dd {
+  margin-bottom: 0.75em;
+}
+
+.example {
+}
+
+p#classSummary {
+}
+
+.apiItem {
+}
+
+.hidden {
+  display: none;
+}
\ No newline at end of file
diff --git a/chrome/common/extensions/docs/js/api_page_generator.js b/chrome/common/extensions/docs/js/api_page_generator.js
new file mode 100755
index 0000000..d8593db
--- /dev/null
+++ b/chrome/common/extensions/docs/js/api_page_generator.js
@@ -0,0 +1,144 @@
+/**

+ * @fileoverview This file is the controller for generating one api reference

+ * page of the extension documentation.

+ *

+ * It expects:

+ *

+ * - To be called from a "shell" page whose "base" name matches an api module

+ *   name. For instance ../bookmarks.html -> chrome.bookmarks.

+ * 

+ * - To have available via XHR (relative path):

+ *   1) API_TEMPLATE which is the main template for the api pages.

+ *   2) A file located at SCHEMA_PATH + |apiName| + SCHEMA_EXTENSION

+ *      which is shared with the extension system and defines the methods and 

+ *      events contained in one api.

+ *   3) An |apiName| + OVERVIEW_EXTENSION file which contains static authored

+ *      content that is inserted into the "overview" slot in the API_TEMPLATE.

+ *

+ * The "shell" page may have a renderering already contained within it so that

+ * the docs can be indexed.

+ *

+ * TODO(rafaelw): XHR support for IE.

+ * TODO(rafaelw): JSON support for non-chrome 3.x clients.

+ */

+ 

+var API_TEMPLATE = "../template/api_template.html";

+var SCHEMA_PATH = "../../api/";

+var SCHEMA_EXTENSION = ".json";

+var OVERVIEW_EXTENSION = "_overview.html";

+var REQUEST_TIMEOUT = 2000;

+

+Array.prototype.each = function(f) {

+  for (var i = 0; i < this.length; i++) {

+    f(this[i], i);

+  }

+}

+

+window.onload = function() {

+  // Determine api module being rendered. Expect ".../<apiName>.html"

+  var pathParts = document.location.href.split(/\/|\./);

+  var apiName = pathParts[pathParts.length - 2];

+  var apiOverviewName = apiName + OVERVIEW_EXTENSION;

+  var apiSchemaName = SCHEMA_PATH + apiName + SCHEMA_EXTENSION;

+  

+  // Fetch the api template and insert into the <body>.

+  fetchContent(API_TEMPLATE, function(templateContent) {

+    document.getElementsByTagName("body")[0].innerHTML = templateContent;

+

+    // Fetch the overview and insert into the "overview" <div>.

+    fetchContent(apiOverviewName, function(overviewContent) {

+      document.getElementById("overview").innerHTML = overviewContent;

+

+      // Now the page is composed with the authored content, we fetch the schema

+      // and populate the templates.

+      fetchContent(apiSchemaName, renderTemplate);	

+    });

+  });	

+}

+

+/**

+ * Fetches |url| and returns it's text contents from the xhr.responseText in

+ * onSuccess(content)

+ */

+function fetchContent(url, onSuccess) {

+  var xhr = new XMLHttpRequest();

+  var abortTimerId = window.setTimeout(function() {

+    xhr.abort();

+    console.log("XHR Timed out");

+  }, REQUEST_TIMEOUT);

+

+  function handleError(error) {

+    window.clearTimeout(abortTimerId);

+    console.error("XHR Failed: " + error);

+  }

+

+  try {

+    xhr.onreadystatechange = function(){

+      if (xhr.readyState == 4) {

+        if (xhr.responseText) {

+          window.clearTimeout(abortTimerId);

+          onSuccess(xhr.responseText);

+        } else {

+          handleError("responseText empty.");

+        }

+      }

+    }

+    

+    xhr.onerror = handleError;

+    

+    xhr.open("GET", url, true);

+    xhr.send(null);

+  } catch(e) {

+    console.log("ex: " + e);

+    console.error("exception: " + e);

+    handleError();

+  }

+}

+

+/**

+ * Parses the content in |module| to json, adds any additional required values,

+ * renders to html via JSTemplate, and unhides the <body>.

+ * This uses the root <html> element (the entire document) as the template.

+ */

+function renderTemplate(module) {

+  var apiDefinition = JSON.parse(module);

+  preprocessApi(apiDefinition);

+

+  // Render to template

+  var input = new JsEvalContext(apiDefinition);

+  var output = document.getElementsByTagName("html")[0];

+  jstProcess(input, output);

+  

+  // Show.

+  document.getElementsByTagName("body")[0].className = "";

+}

+

+/**

+ * Augment the |schema| with additional values that are required by the

+ * template.

+ */

+function preprocessApi(schema) {

+  schema.functions.each(function(f) {

+    f.fullName = schema.namespace + "." + f.name;

+    if (f.callbackParameters) {

+      f.callbackSignature = generateSignatureString(f.callbackParameters);

+    }

+  });

+    

+  schema.events.each(function(e) {

+    e.callSignature = generateSignatureString(e.parameters);

+  });

+}

+

+/** 

+ * Generates a simple string representation of the signature of a function

+ * whose |parameters| are json schemas.

+ */

+function generateSignatureString(parameters) {

+  var retval = [];

+  parameters.each(function(param, i) {

+    retval.push(param.type + " " + (param.type ? param.type : param["$ref"]));

+  });

+  

+  return retval.join(", ");	

+}

diff --git a/chrome/common/extensions/docs/reference/bookmarks.html b/chrome/common/extensions/docs/reference/bookmarks.html
new file mode 100755
index 0000000..082493d
--- /dev/null
+++ b/chrome/common/extensions/docs/reference/bookmarks.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>

+<!-- This page is a placeholder for generated extensions api doc. Note:

+    1) The <head> information in this page is significant, should be uniform

+       across api docs and should be edited only with knowledge of the

+       templating mechanism.

+    2) The <body> tag *must* retain id="body"

+    3) All <body>.innerHTML is genereated as an rendering step. If viewed in a

+       browser, it will be re-generated from the template, json schema and

+       authored overview content.

+    4) The <body>.innerHTML is also generated by an offline step so that this

+       page may easily be indexed by search engines.

+       

+    TODO(rafaelw): Abstract this into a "pageshell" that becomes the single

+    version of page template shell and the "instance" pages (bookmarks.html,

+    etc...) can be generated with a build step.

+-->

+<html xmlns="http://www.w3.org/1999/xhtml">

+  <!-- <head> data is significant and loads the needed libraries and styles -->

+  <head>

+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

+    <title jscontent="namespace">chrome.apiname</title>

+    <link href="../css/ApiRefStyles.css" rel="stylesheet" type="text/css">

+    <script type="text/javascript"

+            src="../../../../third_party/jstemplate/jstemplate_compiled.js">

+    </script>

+    <script type="text/javascript" src="../js/api_page_generator.js"></script>

+  </head>

+  <!-- <body> content is completely generated. Do not edit, as it will be

+      and rewritten. -->

+  <body class="hidden">

+  </body>

+</html>
\ No newline at end of file
diff --git a/chrome/common/extensions/docs/reference/bookmarks_overview.html b/chrome/common/extensions/docs/reference/bookmarks_overview.html
new file mode 100755
index 0000000..b93be64
--- /dev/null
+++ b/chrome/common/extensions/docs/reference/bookmarks_overview.html
@@ -0,0 +1,121 @@
+<!-- BEGIN AUTHORED CONTENT -->

+<p id="classSummary">

+Use the <code>chrome.bookmarks</code> API to create, organize, and otherwise manipulate bookmarks.

+</p>

+

+<h2 id="description">Description</h2>

+

+<p>

+[PENDING: intro goes here...]

+</p>

+

+<p>

+<em>Bookmark objects</em> are an important part of the <code>chrome.bookmarks</code> API.

+Each bookmark object represents either a URL or a group of bookmarks, as you can see in the following figure.

+</p>

+

+<img

+  alt="2 kinds of bookmark objects"

+  width="415"

+  height="123"

+  src="https://sites.google.com/a/google.com/kathys-drafts/Chrome/chrome-extensions-drafts/api-mock-doc/chrome-bookmarks-final-mock/bookmarks.png"></a>

+

+

+<h3 id="overview-properties">Properties</h3>

+

+<p>Objects that represent bookmarks can have the following properties:

+</p>

+

+<dl>

+<dt> <code>id</code> </dt>

+<dd> An integer ID that's unique for each bookmark.

+     Don't save this ID in persistent storage;

+     the ID for a particular bookmark might change the next time the browser is started.

+     </dd>

+

+<dt> <code>title</code> </dt>

+<dd> The name of the bookmark.

+     This is the user-visible string that describes the URL or group.

+     </dd>

+

+<dt> <code>parentId </code>

+     <em>(omitted for the root group)</em>

+     </dt>

+<dd> The ID of the group that this bookmark is in. </dd>

+

+<dt> <code>index</code>

+     <em>(optional; omitted for the root group)</em>

+     </dt>

+<dd> The 0-based integer position of the bookmark within its group. </dd>

+

+<dt> <code>url</code>

+     <em>(omitted for groups)</em>

+     </dt>

+<dd> The URL of the page that the bookmark points to. </dd>

+</dl>

+

+<h3 id="overview-examples">Examples</h3>

+

+<p>

+The following code creates a bookmark group with the title "Chromium bookmarks".

+The last argument defines a function to be executed after the folder is created.

+</p>

+

+<pre>

+chrome.bookmarks.create({'parentId': bookmarkBar.id,

+                         'title': 'Chromium bookmarks'},

+                        function(newFolder) {...});

+</pre>

+

+<p>

+The next snippet creates a bookmark pointing to the Chromium developer doc.

+Since nothing too bad will happen if creating the bookmark fails,

+this snippet doesn't bother to define a callback function.

+</p>

+

+<pre>

+chrome.bookmarks.create({'parentId': chromiumBookmarks.id,

+                         'title': 'dev doc',

+                         'url': 'http://dev.chromium.org'});

+</pre>

+

+<p>

+Say you have bookmark hierarchy that looks like this:</p>

+

+<ul>

+  <li>Bookmarks</li>

+  <ul>

+    <li>Google</li>

+    <ul>

+      <li>Apps</li>

+      <ul>

+        <li>...</li>

+        <li>...</li>

+        <li>...</li>

+      </ul>

+    <li>Google homepage</li>

+    </ul>

+    <li>Example</li>

+  </ul>

+</ul>

+

+<p>

+Here's how those bookmarks might be represented with bookmark objects:</p>

+

+<img

+  alt="a hierarchy of bookmarks"

+  src="https://sites.google.com/a/google.com/kathys-drafts/Chrome/chrome-extensions-drafts/api-mock-doc/chrome-bookmarks-final-mock/bookmark-hierarchy.png">

+

+<p>

+Here's some code you could use to create that hierarchy:</p>

+

+<pre class="example">

+...code goes here...

+</pre>

+

+

+<div class="exampleLink">

+<a href="http://www.google.com/url?q=http%3A%2F%2Fexample.com&amp;sa=D&amp;sntz=1&amp;usg=AFrqEzd0oeJ1qGwYPoKuq1dTesEchMDLIQ">Full source code</a> |

+<a href="http://www.google.com/url?q=http%3A%2F%2Fexample.com&amp;sa=D&amp;sntz=1&amp;usg=AFrqEzd0oeJ1qGwYPoKuq1dTesEchMDLIQ">Install extension</a>

+</div> <!-- END exampleLink -->

+<!-- END AUTHORED CONTENT -->

diff --git a/chrome/common/extensions/docs/reference/tabs.html b/chrome/common/extensions/docs/reference/tabs.html
new file mode 100755
index 0000000..71dc7e3
--- /dev/null
+++ b/chrome/common/extensions/docs/reference/tabs.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>

+<!-- This page is a placeholder for generated extensions api doc. Note:

+    1) The <head> information in this page is significant, should be uniform

+       across api docs and should be edited only with knowledge of the

+       templating mechanism.

+    2) The <body> tag *must* retain id="body"

+    3) All <body>.innerHTML is genereated as an rendering step. If viewed in a

+       browser, it will be re-generated from the template, json schema and

+       authored overview content.

+    4) The <body>.innerHTML is also generated by an offline step so that this

+       page may easily be indexed by search engines.

+       

+    TODO(rafaelw): Abstract this into a "pageshell" that becomes the single

+    version of page template shell and the "instance" pages (bookmarks.html,

+    etc...) can be generated with a build step.

+-->

+<!-- <html> must retain id="template -->

+<html xmlns="http://www.w3.org/1999/xhtml">

+  <!-- <head> data is significant and loads the needed libraries and styles -->

+  <head>

+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

+    <title jscontent="namespace">chrome.apiname</title>

+    <link href="../css/ApiRefStyles.css" rel="stylesheet" type="text/css">

+    <script type="text/javascript"

+            src="../../../../third_party/jstemplate/jstemplate_compiled.js">

+    </script>

+    <script type="text/javascript" src="../js/api_page_generator.js"></script>

+  </head>

+  <!-- <body> content is completely generated. Do not edit, as it will be

+      and rewritten. -->

+  <body class="hidden">

+  </body>

+</html>
\ No newline at end of file
diff --git a/chrome/common/extensions/docs/reference/tabs_overview.html b/chrome/common/extensions/docs/reference/tabs_overview.html
new file mode 100755
index 0000000..15d6e15
--- /dev/null
+++ b/chrome/common/extensions/docs/reference/tabs_overview.html
@@ -0,0 +1,11 @@
+<!-- BEGIN AUTHORED CONTENT -->

+<p id="classSummary">

+Use the <code>chrome.tabs</code> API to create, organize, and otherwise manipulate bookmarks.

+</p>

+

+<h2 id="description">Description</h2>

+

+<p>

+[PENDING: intro goes here...]

+</p>

+<!-- END AUTHORED CONTENT -->

diff --git a/chrome/common/extensions/docs/template/api_template.html b/chrome/common/extensions/docs/template/api_template.html
new file mode 100755
index 0000000..afa599d
--- /dev/null
+++ b/chrome/common/extensions/docs/template/api_template.html
@@ -0,0 +1,163 @@
+    <!-- BREADCRUMB -->
+    <!-- TODO: Fix these hrefs -->
+    <div id="breadcrumbs"><a href="../index.html">Chrome Extensions</a> &gt;
+    <a href="./index.html">Reference</a> &gt;
+    <a href="chrome-api-index.html">chrome.* API</a></div>
+
+    <!-- API HEADER -->
+    <h1 jscontent="namespace">chrome.apiname</h1>
+
+    <!-- TABLE OF CONTENTS -->
+    <div id="toc">
+      <p>Contents</p>
+      <ol>
+        <li>
+          <a href="#overview">Description</a>
+          <ol>
+            <li><a href="#overview-properties">Properties</a></li>
+            <li><a href="#overview-examples">Examples</a></li>
+          </ol>
+        </li>
+        <li>
+          <a href="#methods">Methods</a>    
+          <ol>
+            <li jsselect="functions">
+              <a jscontent="name"
+                 jsvalues=".href:'#method-' + name"
+                 href="#method-anchor">methodName</a>
+            </li>
+          </ol>
+        </li>
+        <li>
+          <a href="#events">Events</a>
+          <ol>
+            <li jsselect="events">
+              <a jscontent="name"
+                 jsvalues=".href:'#event-' + name"
+                 href="#event-anchor">eventName</a>
+            </li>
+          </ol>
+        </li>
+        <!-- TODO: What do we do about structs/types? -->
+        <li>
+          <a href="#structs">TODO: Structs</a>
+          <ol>
+            <li><a href="#struct-BookmarkTreeNode"></a></li>
+          </ol>
+        </li>
+      </ol>
+      [PENDING: links to all h2s and h3s should go here -- would it be possible
+      to link to overview h3s, as well? if so, how should we create their
+      anchor/id values?]
+    </div>  
+    <!-- /TABLE OF CONTENTS -->
+
+
+    <!-- OVERVIEW PLACEHOLDER -- THIS GET REPLACED AUTHORED CONTENT -->
+    <div id="overview"></div>
+
+
+    <!-- METHODS -->
+    <div class="apiGroup" id="methods">
+      <a name="#methods"></a>
+      <h2>Methods</h2>
+
+      <!-- iterates over all functions -->
+      <div class="apiItem" jsselect="functions">
+        <a jsvalues=".name:'method-' + name"></a> <!-- method-anchor -->
+        <h3 jscontent="name">method name</h3>
+
+        <div class="summary">void
+            <!-- Note: intentionally longer 80 columns -->
+            <span jscontent="fullName">chrome.module.methodName</span>(<span jsselect="parameters" jsvalues="class:optional ? 'optional' : ''"><span jsdisplay="$index">, </span><span jscontent="type"></span>
+                <var><span jscontent="name"></span></var></span>)</div>
+
+        <div class="description">
+          <div jsvalues=".innerHTML:description">
+            A description from the json schema def of the function goes here.
+          </div>
+
+          <!-- PARAMETERS -->
+          <h4>Parameters</h4>
+          <dl>
+            <div jsselect="parameters">
+              <dt>
+                <!-- Note: intentionally longer 80 columns -->
+                <var jscontent="name">paramName</var><em>
+                    (<span class="optional" jsdisplay="optional">optional </span><span jsdisplay="$ref" jscontent="$ref">paramType</span><span jsdisplay="type" jscontent="type">paramType</span>)</em>
+              </dt>
+              <dd jsvalues=".innerHTML:description">
+                Description of this parameter from the json schema.
+              </dd>
+            </div>
+          </dl>
+
+          <!-- CALLBACK -->	
+          <div jsdisplay="callbackParameters">
+            <h4>Callback function</h4>
+            <p>
+              If you specify the <em>callback</em> parameter,
+              it should specify a function that looks like this:
+            </p>
+            
+            <!-- Note: intentionally longer 80 columns -->
+            <pre>function(<span jscontent="callbackSignature">Type param1, Type param2</span>) <span class="subdued">{...}</span>);</pre>
+            <dl>
+              <div jsselect="callbackParameters">
+                <dt>
+                  <!-- Note: intentionally longer 80 columns -->
+                  <var jscontent="name">paramName</var><em>
+                      (<span jsdisplay="$ref" jscontent="$ref">paramType</span><span jsdisplay="type" jscontent="type">paramType</span>)</em>
+                </dt>
+                <dd jsvalues=".innerHMTL:description">
+                  Description of this parameter from the json schema.
+                </dd>
+              </div>
+            </dl>
+          </div>
+
+        </div> <!-- /description -->
+
+      </div>  <!-- /apiItem -->
+
+    </div>  <!-- /apiGroup -->
+
+    <!-- EVENTS -->
+    <div class="apiGroup" id="events">
+      <a name="#events"></a>
+      <h2 id="events">Events</h2>
+
+      <!-- iterates over all events -->
+      <div jsselect="events" class="apiItem" jsselect="functions">
+        <a jsvalues=".name:'event-' + name"></a>
+        <h3 jscontent="name">event name</h3>
+
+        <div class="summary">
+          <!-- Note: intentionally longer 80 columns -->
+          <span class="subdued">chrome.bookmarks.</span><span jscontent="name">onEvent</span><span class="subdued">.addListener</span>(function(<span jscontent="callSignature">Type param1, Type param2</span>) <span class="subdued">{...}</span>);
+        </div>
+
+        <div class="description">
+          <p jsvalues=".innerHTML:description">
+            A description from the json schema def of the function goes here.
+          </p>
+
+          <!-- PARAMETERS -->
+          <h4>Parameters</h4>
+          <dl>
+            <div jsselect="parameters">
+              <dt>
+                <!-- Note: intentionally longer 80 columns -->
+                <var jscontent="name">paramName</var><em> (<span jsdisplay="$ref" jscontent="$ref">paramType</span><span jsdisplay="type" jscontent="type">paramType</span>)</em>
+              </dt>
+              <dd jsvalues=".innerHTML:description">
+                Description of this parameter from the json schema.
+              </dd>
+            </div>
+          </dl>
+
+        </div> <!-- /decription -->
+
+      </div> <!-- /apiItem -->
+
+    </div> <!-- /apiGroup -->
\ No newline at end of file