Extensions Docs Server: Highlight links on left nav

The link for the page you are on will now be hightlighted in the left nav bar.

BUG=142008

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

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

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

@@ -340,11 +340,9 @@ span.displayModeWarning {
   top: 0px;
 }
 
-#gc-toc ul .leftNavSelected {
-  background-color: #F1F1F1;
-  color: black;
+#gc-toc .leftNavSelected {
+  color: #39F;
   text-decoration: none;
-  z-index: 1;
   position: relative;
 }
 

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

@@ -58,31 +58,43 @@
     var toc = document.getElementById('gc-toc');
     if (!toc)
       return;
-    var items = toc.getElementsByTagName('li');
+
+    // Figure out which link matches the current page so it can be styled
+    // differently.
+    var links = toc.getElementsByTagName('a');
     var selectedNode = null;
+    var path_parts = document.location.pathname.replace(/\/+$/, '').split('/')
+    for (var i = 0; i < links.length; i++) {
+      if (links[i].getAttribute('href') != path_parts[path_parts.length - 1])
+        continue;
+      links[i].className = 'leftNavSelected';
+      links[i].removeAttribute('href');
+      selectedNode = links[i];
+    }
+
+    // Go through the items on the sidebar and add toggles.
+    var items = toc.getElementsByTagName('li');
     for (var i = 0; i < items.length; i++) {
       var item = items[i];
-      if (item.className == 'leftNavSelected') {
-        selectedNode = item;
-      } else if (item.firstChild &&
-                 item.firstChild.tagName == 'SPAN') {
-        // Only assign toggles to text nodes in the sidebar.
-        var a = document.createElement('a');
-        a.className = 'toggle selected';
-        a.appendChild(document.createTextNode(' '));
-        a.onclick = function() {
-          toggleList(this.parentNode.getElementsByTagName('ul'));
-        };
-        item.firstChild.onclick = function() {
-          toggleList(this.parentNode.getElementsByTagName('ul'));
-        };
-        item.insertBefore(a, item.firstChild);
-        toggleList(item.getElementsByTagName('ul'));
-      }
+      if (!item.firstChild || item.firstChild.tagName != 'SPAN')
+        continue;
+      // Only assign toggles to text nodes in the sidebar.
+      var a = document.createElement('a');
+      a.className = 'toggle selected';
+      a.appendChild(document.createTextNode(' '));
+      a.onclick = function() {
+        toggleList(this.parentNode.getElementsByTagName('ul'));
+      };
+      item.firstChild.onclick = function() {
+        toggleList(this.parentNode.getElementsByTagName('ul'));
+      };
+      item.insertBefore(a, item.firstChild);
+      toggleList(item.getElementsByTagName('ul'));
     }
-    if (selectedNode) {
+
+    // Reveal the selected link.
+    if (selectedNode)
       revealAncestor(selectedNode);
-    }
   };
 
   initSidebar();