Merge pull request #582 from heathermiller/scaladoc/keyboard-shortcuts

Fix SI-5055 (for real). Implement keyboard shortcuts in Scaladoc. Browsing is fun again!

5 files changed, 276 insertions, 166 deletions

diff --git a/src/compiler/scala/tools/nsc/doc/html/page/Index.scala b/src/compiler/scala/tools/nsc/doc/html/page/Index.scala
index 346780147e..f8fffdc726 100644
--- a/src/compiler/scala/tools/nsc/doc/html/page/Index.scala
+++ b/src/compiler/scala/tools/nsc/doc/html/page/Index.scala
@@ -44,7 +44,7 @@ class Index(universe: doc.Universe, index: doc.Index) extends HtmlPage {
       </div>
       { browser }
       <div id="content" class="ui-layout-center">
-        <iframe name="template" src={ relativeLinkTo{List("package.html")} }/>
+        <iframe id="template" src={ relativeLinkTo{List("package.html")} }/>
       </div>
     </body>
 
diff --git a/src/compiler/scala/tools/nsc/doc/html/page/Template.scala b/src/compiler/scala/tools/nsc/doc/html/page/Template.scala
index 220321d225..49cd17c176 100644
--- a/src/compiler/scala/tools/nsc/doc/html/page/Template.scala
+++ b/src/compiler/scala/tools/nsc/doc/html/page/Template.scala
@@ -87,7 +87,7 @@ class Template(universe: doc.Universe, tpl: DocTemplateEntity) extends HtmlPage
       { memberToCommentHtml(tpl, true) }
 
       <div id="mbrsel">
-        <div id='textfilter'><span class='pre'/><span class='input'><input type='text' accesskey='/'/></span><span class='post'/></div>
+        <div id='textfilter'><span class='pre'/><span class='input'><input id='mbrsel-input' type='text' accesskey='/'/></span><span class='post'/></div>
         { if (tpl.linearizationTemplates.isEmpty && tpl.conversions.isEmpty) NodeSeq.Empty else
             <div id="order">
               <span class="filtertype">Ordering</span>
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/index.css b/src/compiler/scala/tools/nsc/doc/html/resource/lib/index.css
index c6136c508e..2a8f9b570a 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/index.css
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/index.css
@@ -1,23 +1,32 @@
 * {
-	color: inherit;
-	font-size: 10pt;
-	text-decoration: none;
+  color: inherit;
+  font-size: 10pt;
+  text-decoration: none;
         font-family: Arial, sans-serif;
-	border-width: 0px;
-	padding: 0px;
-	margin: 0px;
+  border-width: 0px;
+  padding: 0px;
+  margin: 0px;
 }
 
 a {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 a:hover {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 
 h1 {
-	display: none;
+  display: none;
+}
+
+.selected {
+  -moz-box-shadow: inset 0px 5px 10px rgba(58, 88, 97, .36);
+  -webkit-box-shadow: inset 0px 5px 10px rgba(58, 88, 97, .36);
+  border-top: solid 1px rgba(119, 138, 153, 0.8);
+  border-bottom: solid 1px rgba(151, 173, 191, 0.4);
+  background-color: #ced2d9;
+  margin: -1px 0px;
 }
 
 /*.letters {
@@ -33,81 +42,81 @@ h1 {
 }
 
 #browser {
-	top: 0px;
-	left: 0px;
-	bottom: 0px;
-	width: 100%;
-	display: block;
-	position: fixed;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  width: 100%;
+  display: block;
+  position: fixed;
 }
 
 #filter {
-	position: absolute;
-	display: block;
-/*	padding: 5px;*/
-	right: 0;
-	left: 0;
-	top: 0;
-        background-image:url('filterbg.gif');
-        background-repeat:repeat-x;
-        background-color: #ededee; /* light gray */
-	/*background-color: #DADADA;*/
-        border:1px solid #bbbbbb;
-        border-top:0;
-        border-left:0;
-        border-right:0;
+  position: absolute;
+  display: block;
+/*  padding: 5px;*/
+  right: 0;
+  left: 0;
+  top: 0;
+  background-image:url('filterbg.gif');
+  background-repeat:repeat-x;
+  background-color: #ededee; /* light gray */
+  /*background-color: #DADADA;*/
+  border:1px solid #bbbbbb;
+  border-top:0;
+  border-left:0;
+  border-right:0;
 }
 
 #textfilter {
-	position: relative;
-	display: block;
-        height: 20px;
-	margin-top: 5px;
-        margin-bottom: 5px;
+  position: relative;
+  display: block;
+  height: 20px;
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 #textfilter > .pre {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 23px;
-    width: 21px;
-    background: url("filter_box_left.png");
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 23px;
+  width: 21px;
+  background: url("filter_box_left.png");
 }
 
 #textfilter > .input {
-	display: block;
-    position: absolute;
-    top: 0;
-    right: 20px;
-    left: 20px;
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 20px;
+  left: 20px;
 }
 
 #textfilter > .input > input {
-	height: 20px;
-	padding: 1px;
- 	font-weight: bold;
-	color: #000000;
-        background: #ffffff url("filterboxbarbg.png") repeat-x bottom left;
-        width: 100%;
+  height: 20px;
+  padding: 1px;
+  font-weight: bold;
+  color: #000000;
+  background: #ffffff url("filterboxbarbg.png") repeat-x bottom left;
+  width: 100%;
 }
 
 #textfilter > .post {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 23px;
-    width: 21px;
-    background: url("filter_box_right.png");
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 23px;
+  width: 21px;
+  background: url("filter_box_right.png");
 }
 
 /*#textfilter {
-	position: relative;
-	display: block;
+  position: relative;
+  display: block;
     height: 20px;
-	margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 #textfilter > .pre {
@@ -121,7 +130,7 @@ h1 {
 }
 
 #textfilter > .input {
-	display: block;
+  display: block;
     position: absolute;
     top: 0;
     right: 20px;
@@ -129,11 +138,11 @@ h1 {
 }
 
 #textfilter > .input > input {
-	height: 16px;
-	padding: 2px;
-	font-weight: bold;
-	color: darkblue;
-	background-color: white;
+  height: 16px;
+  padding: 2px;
+  font-weight: bold;
+  color: darkblue;
+  background-color: white;
     width: 100%;
 }
 
@@ -148,22 +157,22 @@ h1 {
 }*/
 
 #focusfilter {
-	position: relative;
-        text-align: center;
-	display: block;
-	padding: 5px;
-	background-color: #fffebd; /* light yellow*/
-        text-shadow: #ffffff 0 1px 0;
+  position: relative;
+  text-align: center;
+  display: block;
+  padding: 5px;
+  background-color: #fffebd; /* light yellow*/
+  text-shadow: #ffffff 0 1px 0;
 }
 
 #focusfilter .focuscoll {
-	font-weight: bold;
-        text-shadow: #ffffff 0 1px 0;
+  font-weight: bold;
+  text-shadow: #ffffff 0 1px 0;
 }
 
 #focusfilter img {
-	bottom: -2px;
-	position: relative;
+  bottom: -2px;
+  position: relative;
 }
 
 #kindfilter {
@@ -182,10 +191,9 @@ h1 {
 }
 
 #kindfilter > a:hover {
- color: #4C4C4C; 
- text-decoration: none;
- text-shadow: #ffffff 0 1px 0;
-
+  color: #4C4C4C; 
+  text-decoration: none;
+  text-shadow: #ffffff 0 1px 0;
 }
 
 #letters {
@@ -208,117 +216,117 @@ h1 {
 }
   
 #tpl {
-	display: block;
-	position: fixed;
-	overflow: auto;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	top: 5px;
-	position: absolute;
-	display: block;
+  display: block;
+  position: fixed;
+  overflow: auto;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  top: 5px;
+  position: absolute;
+  display: block;
 }
 
 #tpl .packhide {
-	display: block;
-	float: right;
-	font-weight: normal;
-	color: white;
+  display: block;
+  float: right;
+  font-weight: normal;
+  color: white;
 }
 
 #tpl .packfocus {
-	display: block;
-	float: right;
-	font-weight: normal;
-	color: white;
+  display: block;
+  float: right;
+  font-weight: normal;
+  color: white;
 }
 
 #tpl .packages > ol {
-	background-color: #dadfe6;
-	/*margin-bottom: 5px;*/
+  background-color: #dadfe6;
+  /*margin-bottom: 5px;*/
 }
 
 /*#tpl .packages > ol > li {
-	margin-bottom: 1px;
+  margin-bottom: 1px;
 }*/
 
 #tpl .packages > li > a {
-	padding: 0px 5px;
+  padding: 0px 5px;
 }
 
 #tpl .packages > li > a.tplshow {
-	display: block;
-	color: white;
-	font-weight: bold;
-	display: block;
-	text-shadow: #000000 0 1px 0;
+  display: block;
+  color: white;
+  font-weight: bold;
+  display: block;
+  text-shadow: #000000 0 1px 0;
 }
 
 #tpl ol > li.pack {
-	padding: 3px 5px;
-	background: url("packagesbg.gif");
-	background-repeat:repeat-x;
-	min-height: 14px;
-	background-color: #6e808e;
+  padding: 3px 5px;
+  background: url("packagesbg.gif");
+  background-repeat:repeat-x;
+  min-height: 14px;
+  background-color: #6e808e;
 }
 
 #tpl ol > li {
-	display: block;
+  display: block;
 }
 
 #tpl .templates > li {
-	padding-left: 5px;
-	min-height: 18px;
+  padding-left: 5px;
+  min-height: 18px;
 }
 
 #tpl ol > li .icon {
-	padding-right: 5px;
-	bottom: -2px;
-	position: relative;
+  padding-right: 5px;
+  bottom: -2px;
+  position: relative;
 }
 
 #tpl .templates div.placeholder {
-	padding-right: 5px;
-	width: 13px;
-	display: inline-block;
+  padding-right: 5px;
+  width: 13px;
+  display: inline-block;
 }
 
 #tpl .templates span.tplLink {
-	padding-left: 5px;
+  padding-left: 5px;
 }
 
 #content {
-	border-left-width: 1px;
-	border-left-color: black;
-	border-left-style: white;
-	right: 0px;
-	left: 0px;
-	bottom: 0px;
-	top: 0px;
-	position: fixed;
-	margin-left: 300px;
-	display: block;
+  border-left-width: 1px;
+  border-left-color: black;
+  border-left-style: white;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+  top: 0px;
+  position: fixed;
+  margin-left: 300px;
+  display: block;
 }
 
 #content > iframe {
-	display: block;
-	height: 100%;
-	width: 100%;
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
 .ui-layout-pane {
-	background: #FFF;
-	overflow: auto;
+  background: #FFF;
+  overflow: auto;
 }
 
 .ui-layout-resizer {
-	background-image:url('filterbg.gif');
-	background-repeat:repeat-x;
-	background-color: #ededee; /* light gray */
-	border:1px solid #bbbbbb;
-	border-top:0;
-	border-bottom:0;
-	border-left: 0;
+  background-image:url('filterbg.gif');
+  background-repeat:repeat-x;
+  background-color: #ededee; /* light gray */
+  border:1px solid #bbbbbb;
+  border-top:0;
+  border-bottom:0;
+  border-left: 0;
 }
 
 .ui-layout-toggler {
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/index.js b/src/compiler/scala/tools/nsc/doc/html/resource/lib/index.js
index b767722b8c..eb7f752440 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/index.js
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/index.js
@@ -15,10 +15,10 @@ var lastHash = "";
 
 $(document).ready(function() {
     $('body').layout({ west__size: '20%' });
-    $('#browser').layout({	
-    	center__paneSelector: ".ui-west-center"
+    $('#browser').layout({  
+        center__paneSelector: ".ui-west-center"
         //,center__initClosed:true
-    	,north__paneSelector: ".ui-west-north"
+        ,north__paneSelector: ".ui-west-north"
     }); 
     $('iframe').bind("load", function(){
         var subtitle = $(this).contents().find('title').text();
@@ -260,18 +260,95 @@ function prepareEntityList() {
         .prepend("<a class='packfocus'>focus</a>");
 }
 
+/* Handles all key presses while scrolling around with keyboard shortcuts in left panel */
+function keyboardScrolldownLeftPane() {
+    scheduler.add("init", function() {
+        $("#textfilter input").blur();
+        var $items = $("#tpl li");
+        $items.first().addClass('selected');       
+
+        $(window).bind("keydown", function(e) {
+            var $old = $items.filter('.selected'),
+                $new;    
+
+            switch ( e.keyCode ) {
+
+            case 9: // tab
+                $old.removeClass('selected');
+                break;
+
+            case 13: // enter
+                $old.removeClass('selected');
+                var $url = $old.children().filter('a:last').attr('href');
+                $("#template").attr("src",$url);
+                break;
+
+            case 27: // escape
+                $old.removeClass('selected');
+                $(window).unbind(e);
+                $("#textfilter input").focus();    
+
+                break;
+
+            case 38: // up
+                $new = $old.prev();
+
+                if (!$new.length) {
+                    $new = $old.parent().prev();
+                }
+                
+                if ($new.is('ol') && $new.children(':last').is('ol')) {
+                    $new = $new.children().children(':last');
+                } else if ($new.is('ol')) {
+                    $new = $new.children(':last');
+                }
+
+                break;
+
+            case 40: // down
+                $new = $old.next();
+                if (!$new.length) {
+                    $new = $old.parent().parent().next();
+                }
+                if ($new.is('ol')) {
+                    $new = $new.children(':first');
+                }
+                break; 
+            } 
+            
+            if ($new.is('li')) {
+                $old.removeClass('selected');
+                $new.addClass('selected');  
+            } else if (e.keyCode == 38) {
+                $(window).unbind(e);
+                $("#textfilter input").focus();
+            }
+        });   
+    });
+}
+
 /* Configures the text filter  */
 function configureTextFilter() {
     scheduler.add("init", function() {
-        $("#filter").append("<div id='textfilter'><span class='pre'/><span class='input'><input type='text' accesskey='/'/></span><span class='post'/></div>");
+        $("#filter").append("<div id='textfilter'><span class='pre'/><span class='input'><input id='index-input' type='text' accesskey='/'/></span><span class='post'/></div>");
         printAlphabet();
         var input = $("#textfilter input");
         resizeFilterBlock();
-        input.bind("keyup", function(event) {
+        input.bind("keydown", function(event) {
             if (event.keyCode == 27) { // escape
                 input.attr("value", "");
             }
-            textFilter();
+            if (event.keyCode == 9) { // tab
+                $("#template").contents().find("#mbrsel-input").focus();
+                input.attr("value", "");
+                return false;
+            } 
+            if (event.keyCode == 40) { // down arrow
+                $(window).unbind("keydown");
+                keyboardScrolldownLeftPane();
+                return false;
+            }              
+            textFilter();          
         });
         input.focus(function(event) { input.select(); });
     });
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/template.js b/src/compiler/scala/tools/nsc/doc/html/resource/lib/template.js
index fd5a981cb0..33fbd83bee 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/template.js
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/template.js
@@ -25,9 +25,37 @@ $(document).ready(function(){
     // Member filter box
     var input = $("#textfilter input");
     input.bind("keyup", function(event) {
-        if (event.keyCode == 27)
-            input.val(""); // escape key
-        filter(true);
+
+        switch ( event.keyCode ) {
+
+        case 27: // escape key
+            input.val("");
+            filter(true);
+            break;
+
+        case 38: // up
+            input.val("");
+            filter(false);
+            window.scrollTo(0, $("body").offset().top);
+            input.focus();
+            break;
+
+        case 33: //page up
+            input.val("");
+            filter(false);            
+            break;
+
+        case 34: //page down
+            input.val("");
+            filter(false);            
+            break;            
+
+        default: 
+            window.scrollTo(0, $("#mbrsel").offset().top);
+            filter(true);        
+            break;
+
+        }        
     });
     input.focus(function(event) {
         input.select();
@@ -37,13 +65,13 @@ $(document).ready(function(){
         filter();
     });
     $(document).keydown(function(event) {
-        if(!event.altKey && !event.ctrlKey &&
-           (event.keyCode == 27 || (event.keyCode >= 48 && event.keyCode <= 90)) &&
-           document.activeElement != $("#textfilter input")[0]) {
-               $("#textfilter input").focus();
+
+        if (event.keyCode == 9) { // tab
+            $("#index-input", window.parent.document).focus();
+            input.attr("value", "");
+            return false;            
         }
     });
-    $("#textfilter input").focus();
 
     $("#linearization li").click(function(){
         if ($(this).hasClass("in")) {
@@ -251,7 +279,8 @@ function initInherit() {
     });
 };
 
-function filter(scrollToMember) {
+/* filter used to take boolean scrollToMember */
+function filter() {
     var query = $.trim($("#textfilter input").val()).toLowerCase();
     query = query.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&").replace(/\s+/g, "|");
     var queryRegExp = new RegExp(query, "i");
@@ -327,10 +356,6 @@ function filter(scrollToMember) {
         members.hide();
     };
 
-    if (scrollToMember) {
-      window.scrollTo(0, $("#mbrsel").offset().top);
-    }
-
     return false;
 };