Extensions Docs Server: Filter APIs UI

There is now a small search box under at the top of the left sidebar.
If you start typing an API name, it will display a list of links to
API pages.

BUG=131095

Review URL: https://chromiumcodereview.appspot.com/10821073

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

chrome/common/extensions/docs/server2/static/css/site.css

@@ -364,3 +364,16 @@ span.displayModeWarning {
   margin: 1.3em 1em 0 0;
   padding: 0;
 }
+
+.filtered_item {
+  line-height: 6px;
+}
+
+#filtered_apis {
+  margin-top: -5px;
+  padding-bottom: 5px;
+}
+
+#filtered_apis * {
+  color: #50A9D5;
+}

chrome/common/extensions/docs/server2/static/js/filter.js

+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This is used for the search box on the left navigation bar. The APIs are
+// filtered and displayed based on what the user is typing in the box.
+(function() {
+  var search_box = document.getElementById('api_search');
+  var filtered_apis = document.getElementById('filtered_apis');
+
+  function filterAPIs() {
+    var search_text = search_box.value.toLowerCase();
+    var apis = window.bootstrap.api_names;
+    if (!search_text) {
+      filtered_apis.style.display = 'none';
+      return;
+    }
+    var api_list = ''
+    for (var i = 0; i < apis.length; ++i) {
+      if (apis[i].name.toLowerCase().indexOf(search_text) != -1)
+        api_list += '<li class="filtered_item"><a href="' + apis[i].name +
+            '.html">' + apis[i].name + '</a></li>'
+    }
+    if (api_list != filtered_apis.innerHtml)
+      filtered_apis.innerHTML = api_list;
+    if (!api_list)
+      filtered_apis.style.display = 'none';
+    else
+      filtered_apis.style.display = '';
+  }
+
+  filtered_apis.style.display = 'none';
+  search_box.addEventListener('search', filterAPIs);
+  search_box.addEventListener('keyup', filterAPIs);
+})();

chrome/common/extensions/docs/server2/templates/private/footer.html

@@ -12,6 +12,7 @@
     <script src="{{static}}/js/branch.js" type="text/javascript"></script>
     <script src="{{static}}/js/sidebar.js" type="text/javascript"></script>
     <script src="{{static}}/js/prettify.js" type="text/javascript"></script>
+    <script src="{{static}}/js/filter.js" type="text/javascript"></script>
     <script>
       (function() {
         // Auto syntax highlight all pre tags.
@@ -55,6 +56,11 @@
       }, true);
     </script>
     <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
-    <script>window.bootstrap = { branchInfo: {{*branchInfo}} };</script>
+    <script>
+      window.bootstrap = {
+        api_names: {{*api_list.chrome}}.concat({{*api_list.experimental}}),
+        branchInfo: {{*branchInfo}}
+      };
+    </script>
   </div>
 </div>

chrome/common/extensions/docs/server2/templates/private/sidenav.html

 <div class="g-unit g-first" id="gc-toc">
   <ul>
+    <div>
+      <input type="search" id="api_search" results placeholder="Search APIs">
+      <div id="filtered_apis"></div>
+    </div>
     <li><h2>Starting</h2>
       <ul>
         <li><a href="getstarted.html">Getting Started</a></li>