[scaladoc] Add explicit link to show linear sup...

[scaladoc] Add explicit link to show linear supertypes and known
subclasses. Closes #4416. Modifications to style sheets to reduce
number of colors and make the documentation more readable (includes
contributions from Ruediger Keller). No review.

13 files changed, 250 insertions, 167 deletions

diff --git a/src/compiler/scala/tools/nsc/doc/html/HtmlFactory.scala b/src/compiler/scala/tools/nsc/doc/html/HtmlFactory.scala
index a14bacb267..33f81fef1c 100644
--- a/src/compiler/scala/tools/nsc/doc/html/HtmlFactory.scala
+++ b/src/compiler/scala/tools/nsc/doc/html/HtmlFactory.scala
@@ -50,6 +50,8 @@ class HtmlFactory(val universe: doc.Universe, index: doc.Index) {
     copyResource("lib/index.css")
     copyResource("lib/ref-index.css")
     copyResource("lib/template.css")
+    copyResource("lib/arrow-down.png")
+    copyResource("lib/arrow-right.png")
     copyResource("lib/class.png")
     copyResource("lib/class_big.png")
     copyResource("lib/object.png")
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 93cc0beb89..d7d35e6b63 100644
--- a/src/compiler/scala/tools/nsc/doc/html/page/Template.scala
+++ b/src/compiler/scala/tools/nsc/doc/html/page/Template.scala
@@ -89,7 +89,7 @@ class Template(tpl: DocTemplateEntity) extends HtmlPage {
 
         { if (constructors.isEmpty) NodeSeq.Empty else
             <div id="constructors" class="members">
-              <h3>Instance constructors</h3>
+              <h3>Instance Constructors</h3>
               <ol>{ constructors map (memberToHtml(_)) }</ol>
             </div>
         }
@@ -187,10 +187,6 @@ class Template(tpl: DocTemplateEntity) extends HtmlPage {
       case dte: DocTemplateEntity if isSelf =>
         // comment of class itself
         <xml:group>
-          { if (mbr.comment.isEmpty) NodeSeq.Empty
-            else
-              <div class="shortcomment cmt">{ commentToHtml(mbr.comment) }</div>
-          }
           <div id="comment" class="fullcomment">{ memberToCommentBodyHtml(mbr, isSelf = true) }</div>
         </xml:group>
       case dte: DocTemplateEntity if mbr.comment.isDefined =>
@@ -300,22 +296,6 @@ class Template(tpl: DocTemplateEntity) extends HtmlPage {
       }
     } ++
     { mbr match {
-        case dtpl: DocTemplateEntity if (isSelf && !dtpl.linearizationTemplates.isEmpty && !isReduced) =>
-          <div class="block">
-            linear super types: { typesToHtml(dtpl.linearizationTypes, hasLinks = true, sep = xml.Text(", ")) }
-          </div>
-        case _ => NodeSeq.Empty
-      }
-    } ++
-    { mbr match {
-        case dtpl: DocTemplateEntity if (isSelf && !dtpl.subClasses.isEmpty && !isReduced) =>
-          <div class="block">
-            known subclasses: { templatesToHtml(dtpl.subClasses, xml.Text(", ")) }
-          </div>
-        case _ => NodeSeq.Empty
-      }
-    } ++
-    { mbr match {
         case dtpl: DocTemplateEntity if (isSelf && !dtpl.selfType.isEmpty && !isReduced) =>
           <div class="block">
             self type: { typeToHtml(dtpl.selfType.get, hasLinks = true) }
@@ -387,6 +367,35 @@ class Template(tpl: DocTemplateEntity) extends HtmlPage {
           </xml:group>
         case None => NodeSeq.Empty
       }
+    } ++
+    { mbr match {
+        case dtpl: DocTemplateEntity if (isSelf && !isReduced && (!dtpl.linearizationTemplates.isEmpty || !dtpl.subClasses.isEmpty)) =>
+          <div id="superTypesDiv">
+            <div class="block">
+              <span class="link showElement">Show linear super types and known subclasses</span>
+              <span class="link hideElement">Hide linear super types and known subclasses</span>
+            </div>
+            <div class="hiddenContent">
+              <xml:group>
+                {
+                  if(dtpl.linearizationTemplates.isEmpty) NodeSeq.Empty else {
+                    <div class="block">
+                      linear super types: { typesToHtml(dtpl.linearizationTypes, hasLinks = true, sep = xml.Text(", ")) }
+                    </div>
+                  }
+                }
+                {
+                  if(dtpl.subClasses.isEmpty) NodeSeq.Empty else {
+                    <div class="block">
+                      known subclasses: { templatesToHtml(dtpl.subClasses, xml.Text(", ")) }
+                    </div>
+                  }
+                }
+              </xml:group>
+            </div>
+          </div>
+        case _ => NodeSeq.Empty
+      }
     }
   }
 
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/class.png b/src/compiler/scala/tools/nsc/doc/html/resource/lib/class.png
index 25a8b4c185..8b5426dc9d 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/class.png
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/class.png
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/class_big.png b/src/compiler/scala/tools/nsc/doc/html/resource/lib/class_big.png
index 51e85957fe..170dde9487 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/class_big.png
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/class_big.png
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 aef3f341aa..7c05678313 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
@@ -20,6 +20,10 @@ h1 {
 	display: none;
 }
 
+.letters {
+  padding: 5px;
+}
+
 #library {
     display: none;
 }
@@ -40,7 +44,7 @@ h1 {
 	right: 0;
 	left: 0;
 	top: 0;
-	background-color: #B78E99;
+	background-color: #DADADA;
 }
 
 #textfilter {
@@ -72,7 +76,7 @@ h1 {
 	height: 16px;
 	padding: 2px;
 	font-weight: bold;
-	color: #993300;
+	color: darkblue;
 	background-color: white;
     width: 100%;
 }
@@ -104,12 +108,19 @@ h1 {
 }
 
 #kindfilter {
-	position: relative;
-	display: block;
-	padding: 5px;
-	background-color: #F0F8FF;
+  position: relative;
+  display: block;
+  padding: 5px;
+  background-color: #999;
+  text-align: center;
 }
 
+
+#kindfilter > a {
+ color: white; 
+ text-decoration: underline;
+}
+  
 #tpl {
 	display: block;
 	position: fixed;
@@ -127,7 +138,7 @@ h1 {
 	float: right;
 	font-weight: normal;
 	color: white;
-	padding: 1px 4px 1px 4px;
+	padding: 0 8px;
 }
 
 #tpl .packfocus {
@@ -135,24 +146,34 @@ h1 {
 	float: right;
 	font-weight: normal;
 	color: white;
-	padding: 1px 0.5em 1px 4px;
+}
+
+#tpl .packages > ol {
+  /*margin-bottom: 5px;*/
+}
+
+#tpl .packages > ol > li {
+	margin-bottom: 1px;
 }
 
 #tpl .packages > li > h3 {
 	display: block;
-	background-color: #2C475C;
 	color: white;
-	padding: 1px 4px 1px 0.5em;
 	font-weight: bold;
 	display: block;
 }
 
+#tpl ol > li.pack {
+	background-color: #2C475C;
+	padding: 3px 5px;
+}
+
 #tpl ol > li {
 	display: block;
 }
 
 #tpl .templates > li {
-  padding-left: 0.5em;
+  padding-left: 5px;
 }
 
 #tpl ol > li .icon {
@@ -168,7 +189,7 @@ h1 {
 }
 
 #tpl .templates span.tplLink {
-  padding-left: 8px;
+  padding-left: 5px;
 }
 
 #content {
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 2aea2bedf8..b06d5dc369 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
@@ -384,10 +384,8 @@ function kindFilter(kind) {
 function kindFilterSync() {
     if (kindFilterState == "all" || focusFilterState != null)
         $("#tpl ol.templates").show();
-    else {
+    else
         $("#tpl ol.templates").hide();
-        $("#tpl ol.packages a.packhide").text('show');
-    }
 }
 
 function resizeFilterBlock() {
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/object.png b/src/compiler/scala/tools/nsc/doc/html/resource/lib/object.png
index 886cd5c7c3..0827879de3 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/object.png
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/object.png
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/package.png b/src/compiler/scala/tools/nsc/doc/html/resource/lib/package.png
index c3eef6ea51..c5f82e4caa 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/package.png
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/package.png
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/ref-index.css b/src/compiler/scala/tools/nsc/doc/html/resource/lib/ref-index.css
index 687fe4634c..7957aebe8f 100755
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/ref-index.css
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/ref-index.css
@@ -16,13 +16,15 @@ a {
 }
 
 .entry {
-
+  border-bottom: 1px solid lightgray;
+  padding: 5px 0 8px;
 }
 
 .name {
-	background-color:#E5E5E5;
+	/* background-color:#E5E5E5; */
 }
 
 .occurrences {
-  margin-left:0.7em	
+  margin-left: 1em;
+  margin-top: 5px;	
 }
\ No newline at end of file
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/template.css b/src/compiler/scala/tools/nsc/doc/html/resource/lib/template.css
index 13ccadefe5..6649f8afc5 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/template.css
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/template.css
@@ -16,10 +16,6 @@ table, caption, tbody, tfoot, thead, tr, th, td {
   vertical-align: baseline;
 }
 
-body {
-  line-height: 1.2;
-}
-
 table { border-collapse: separate; border-spacing: 0; }
 caption, th, td { text-align: left; font-weight: normal; }
 table, td, th { vertical-align: middle; }
@@ -48,7 +44,7 @@ a[href]:hover {
 }
 
 #owner {
-  padding: 4px;
+  padding: 2px 10px 5px;
   font-size: 12pt;
   display: block;
 }
@@ -58,16 +54,20 @@ a[href]:hover {
 }
 
 .value #owner {
-  background-color: #7996AC;
+  background-color: #7996AC; /* light steel gray */
 }
 
 .type #owner {
-  background-color: #799F5A;
+  background-color: #669966; /* lighter green */
+}
+
+#types ol li > p {
+  margin-top: 5px;
 }
 
 #definition {
   display: block;
-  padding: 6px;
+  padding: 5px 6px;
 }
 
 #definition > img {
@@ -81,65 +81,76 @@ a[href]:hover {
   display: inline-block;
 }
 
+#signature {
+  background-color: #EBEBEB;
+  font-size: 11.5pt;
+  margin: 5px;
+  padding: 5px;
+}
+
 #signature > span.kind {
-  font-size: 11pt;
   display: inline;
   float: left;
   text-align: left;
   width: auto;
-  padding-left: 6px;
+  position: static;
 }
 
 #signature > span.symbol {
-  font-size: 11pt;
   text-align: left;
+  display: inline;
+  padding-left: 0.7em;
 }
 
+/* Linear super types and known subclasses */
+.hideElement,
+.hiddenContent {
+  display: none;
+}
+
+.link {
+  text-decoration: underline;
+  cursor: pointer;
+  color: #69481D;
+}
+
+
 .value #definition {
   background-color: #2C475C;
 }
 
 .type #definition {
-  background-color: #385E1A;
+  background-color: #006633; /* green */
 }
 
-#comment {
-  display:none;
-  padding-right: 8px;
-  padding-left: 8px;
+#template {
+  margin-bottom: 50px;
 }
 
-#template .values > h3 {
+h3 {
   color: white;
-  padding: 4px;
-  background-color: #7996AC;
+  padding: 5px 10px;
   font-size: 12pt;
   font-weight: bold;
 }
 
+#template .values > h3 {
+  background-color: #315479; /* grayish blue */
+}
+
 #template .types > h3 {
-  padding: 4px;
-  color: white;
-  font-weight: bold;
-  font-size: 12pt;
-  background-color: #799F5A;
+  background-color: #316555; /* green */
 }
 
 #constructors > h3 {
-  padding: 4px;
-  color: white;
-  font-weight: bold;
-  font-size: 12pt;
   background-color: #333;
 }
 
 #template > div.parent > h3 {
-  color: white;
-  padding: 4px;
+  background-color: #3B3B3B; 
   margin-top: 10px;
-  background-color: #47166D;
+  font-style: italic;
   font-size: 12pt;
-  font-weight: bold;
 }
 
 #template > div.parent > h3 * {
@@ -155,6 +166,15 @@ div.members > ol {
 
 div.members > ol > li {
   display: block;
+  border-bottom: 1px solid gray;
+  padding: 5px 0 6px;
+  margin: 0 10px;
+  position: relative;
+}
+
+div.members > ol > li:last-child {
+  border: 0;
+  padding: 5px 0 5px;
 }
 
 /* Member signatures */
@@ -169,18 +189,16 @@ div.members > ol > li {
 }
 
 .signature {
-  padding: 2px;
   font-family: monospace;
   font-size: 10pt;
+  line-height: 18px;
   clear: both;
   display: block;
-  background-color: #E5E5E5;
 }
 
 .signature .kind {
+  position: absolute;
   text-align: right;
-  float: left;
-  display: inline-block;
   width: 8em;
 }
 
@@ -197,8 +215,8 @@ div.members > ol > li {
 }
 
 .signature .symbol {
-  display: inline;
-  padding-left: 0.7em;
+  display: block;
+  padding-left: 8.7em;
 }
 
 .signature .name {
@@ -218,12 +236,22 @@ div.members > ol > li {
   font-style: italic;
 }
 
+#template .signature.closed {
+  background: url("arrow-right.png") no-repeat 0 5px transparent;
+  cursor: pointer;
+}
+
+#template .signature.opened {
+  background: url("arrow-down.png") no-repeat 0 5px transparent;
+  cursor: pointer;
+}
+
 #template .values .signature .name {
-  color: blue;
+  color: mediumblue;
 }
 
 #template .types .signature .name {
-  color: green;
+  color: darkgreen;
 }
 
 /* Comments text formating */
@@ -231,54 +259,49 @@ div.members > ol > li {
 .cmt {}
 
 .cmt p {
-	margin-bottom: 0.9em;
-	margin-top: 0.9em;
+	margin: 0.7em 0;
 }
 
-.cmt h3 {
-  margin-bottom: 1em;
-  margin-top: 1em;
+.cmt p:first-child {
+	margin-top: 0;
+}
+
+.cmt p:last-child {
+	margin-bottom: 0;
+}
+
+.cmt h3,
+.cmt h4,
+.cmt h5,
+.cmt h6 {
+  margin-bottom: 0.7em;
+  margin-top: 1.4em;
   display: block;
   text-align: left;
   font-weight: bold;
-  font-size: x-large;
+}
+
+.cmt h3 {
+  font-size: 14pt;
 }
 
 .cmt h4 {
-  margin-bottom: 0.6em;
-  margin-top: 0.6em;
-  display: block;
-  text-align: left;
-  font-weight: bold;
-  font-size: large;
+  font-size: 13pt;
 }
 
 .cmt h5 {
-  margin-bottom: 0.4em;
-  margin-top: 0.4em;
-  display: block;
-  text-align: left;
-  font-weight: bold;
+  font-size: 12pt;
 }
 
 .cmt h6 {
-  margin-bottom: 0.4em;
-  margin-top: 0.4em;
-  display: block;
-  text-align: left;
-  font-style: italic;
+  font-size: 11pt;
 }
 
 .cmt pre {
-  padding: 0.4em;
-  border-color: #ddd;
-  border-style: solid;
-  border-width: 1px;
-  margin-left: 0;
-  margin-bottom: 0.4em;
-  margin-right: 0;
-  margin-top: 0.4em;
+  padding: 5px;
+  border: 1px solid #ddd;
   background-color: #eee;
+  margin: 5px 0;
   display: block;
   font-family: monospace;
 }
@@ -286,7 +309,7 @@ div.members > ol > li {
 .cmt ul {
   display: block;
   list-style: circle;
-  padding-left:20px;
+  padding-left: 20px;
 }
 
 .cmt ol {
@@ -315,7 +338,7 @@ div.members > ol > li {
 }
 
 .cmt li {
-  display:list-item;
+  display: list-item;
 }
 
 .cmt code {
@@ -339,35 +362,32 @@ div.members > ol > li {
 p.comment {
   display: block;
   margin-left: 8.7em;
+  margin-top: 5px;
 }
 
 .shortcomment {
   display: block;
-  cursor: pointer;
-  margin: 4px 0px;
-  padding: 0 8px;
+  margin: 5px 10px;
 }
 
 div.fullcomment {
-  margin: 10px 0 10px 0;
+  margin: 5px 10px;
 }
 
 #template div.fullcomment {
   display:none;
-  margin: 6px 0 6px 8.7em;
+  margin: 5px 0 0 8.7em;
 }
 
 #template .shortcomment {
-  margin: 0 0 0 8.7em;
-  padding: 2px;
+  margin: 5px 0 0 8.7em;
+  padding: 0;
 }
 
 div.fullcomment .block {
-  padding: 2px 0 2px 0;
-  border-top: 1px solid gray;
-  border-bottom: 1px solid gray;
-  margin-top: 2px;
-  margin-bottom: 2px;
+  padding: 5px 0 0;
+  border-top: 1px dashed silver;
+  margin-top: 5px;
 }
 
 div.fullcomment div.block ol li p, 
@@ -375,10 +395,6 @@ div.fullcomment div.block ol li {
   display:inline
 }
 
-div.fullcomment .block + .block {
-  border-top: none;
-}
-
 div.fullcomment .block > h5 {
   font-style: italic;
   font-weight: normal;
@@ -386,39 +402,25 @@ div.fullcomment .block > h5 {
 }
 
 div.fullcomment .comment {
-  margin: 6px 0 6px 0;
+  margin: 5px 0 10px;
+}
+
+div.fullcomment .comment:last-child {
+  margin-bottom: 0;
 }
 
 div.fullcomment dl.paramcmts > dt {
   display: block;
   float: left;
   font-weight: bold;
-  margin: 2px 4px 2px 0;
 }
 
 div.fullcomment dl.paramcmts > dd {
   display: block;
   padding-left: 80px;
-  border-top: 1px dashed gray;
-  border-bottom: 1px dashed gray;
-}
-
-div.fullcomment dl.paramcmts > dt:first-child + dd {
-  border-top: none;
-}
-
-div.fullcomment dl.paramcmts > dd:last-child {
-  border-bottom: none;
+  margin-bottom: 5px;
 }
 
-div.fullcomment dl.paramcmts > dd + dt + dd {
-  border-top: none;
-}
-
-div.fullcomment dl.paramcmts dd.cmt p {
-  margin-top: 2px;
-  margin-bottom: 2px;
-}
 /* Members filter tool */
 
 #textfilter {
@@ -466,31 +468,43 @@ div.fullcomment dl.paramcmts dd.cmt p {
 }
 
 #mbrsel {
-  padding: 4px;
-  background-color: #B78E99; /* grayish pink */
+  padding: 5px 10px;
+  background-color: #DADADA; /* light gray */
+  font-size: 9.5pt;
   display: block;
-  margin-bottom: 10px;
+  margin-top: 1em;
+/*  margin-bottom: 1em; */
+}
+
+#mbrsel > div {
+  margin-bottom: 5px;
+}
+
+#mbrsel > div:last-child {
+  margin-bottom: 0;
 }
 
 #mbrsel > div > span.filtertype {
-  padding: 4px;
+  padding: 3px 0;
   float: left;
   display: inline-block;
-  color: white;
+  color: #404040;
   width: 4.5em;
 }
 
 #mbrsel > div > ol {
   display: inline-block;
-  background-color: white;
+  /*background-color: white;*/
 }
 
 #mbrsel > div > ol#linearization {
-  display: inline;
+  display: block;
+  margin-left: 4.5em;
+  margin-top: 5px;
 }
 
 #mbrsel > div > ol > li {
-  padding: 4px 8px 4px 8px;
+  padding: 3px 10px;
   background-color: white;
   display: inline-block;
   cursor: pointer;
@@ -502,8 +516,8 @@ div.fullcomment dl.paramcmts dd.cmt p {
 }
 
 #mbrsel > div > ol > li.out {
-  color: #80384E;
-  background-color: #9E6A77;
+  color: #4B4B4B;
+  background-color: #999; 
 }
 
 #mbrsel .hideall {
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 c0d6ae55a5..480425a305 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
@@ -101,14 +101,22 @@ $(document).ready(function(){
             $(this.getTip()).html(this.getTrigger().attr("name"))
         }        
     });   
-    var docAllSigs = $(".signature");
-    function commentShowFct(fullComment){
+    var docAllSigs = $("#template .signature");
+
+    // Is this used anywhere?    
+    /*
+    function commentShowFct(signature){
+        var fullComment = $("+ div.fullcomment", $(signature));
         var vis = $(":visible", fullComment);
         if (vis.length > 0) {
             fullComment.slideUp(100);
+            signature.addClass("closed");
+            signature.removeClass("opened");
         }
         else {
             fullComment.slideDown(100);
+            signature.removeClass("closed");
+            signature.addClass("opened");
         }
     };
     var docShowSigs = docAllSigs.filter(function(){
@@ -116,30 +124,59 @@ $(document).ready(function(){
     });
     docShowSigs.css("cursor", "pointer");
     docShowSigs.click(function(){
-        commentShowFct($("+ div.fullcomment", $(this)));
+        commentShowFct($(this));
     });
-    function commentToggleFct(shortComment){
-        var vis = $("~ div.fullcomment:visible", shortComment);
+    */
+    
+    function commentToggleFct(signature){
+        var parent = signature.parent();
+        var shortComment = $(".shortcomment", parent);
+        var fullComment = $(".fullcomment", parent);
+        var vis = $(":visible", fullComment);
         if (vis.length > 0) {
             shortComment.slideDown(100);
-            vis.slideUp(100);
+            fullComment.slideUp(100);
+            signature.addClass("closed");
+            signature.removeClass("opened");
         }
         else {
-            var hid = $("~ div.fullcomment:hidden", shortComment);
-            hid.slideDown(100);
             shortComment.slideUp(100);
+            fullComment.slideDown(100);
+            signature.removeClass("closed");
+            signature.addClass("opened");
         }
     };
     var docToggleSigs = docAllSigs.filter(function(){
         return $("+ .shortcomment", $(this)).length > 0;
     });
-    docToggleSigs.css("cursor", "pointer");
+    docToggleSigs.addClass("closed");
     docToggleSigs.click(function(){
-        commentToggleFct($("+ .shortcomment", $(this)));
+        commentToggleFct($(this));
     });
+    /*
     $(".shortcomment").click(function(){
         commentToggleFct($(this));
     });
+    */
+    
+    /* Linear super types and known subclasses */
+    function toggleShowContentFct(outerElement){
+      var content = $(".hiddenContent", outerElement);
+      var vis = $(":visible", content);
+      if (vis.length > 0) {
+        content.slideUp(100);
+        $(".showElement", outerElement).show();
+        $(".hideElement", outerElement).hide();
+      }
+      else {
+        content.slideDown(100);
+        $(".showElement", outerElement).hide();
+        $(".hideElement", outerElement).show();
+      }
+    };
+    $("#superTypesDiv").click(function() {
+      toggleShowContentFct($(this));
+    });
 });
 
 function orderAlpha() {
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/trait.png b/src/compiler/scala/tools/nsc/doc/html/resource/lib/trait.png
index b3871a01c4..33b687155f 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/trait.png
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/trait.png
diff --git a/src/compiler/scala/tools/nsc/doc/html/resource/lib/trait_big.png b/src/compiler/scala/tools/nsc/doc/html/resource/lib/trait_big.png
index a44871309e..ac337b66d7 100644
--- a/src/compiler/scala/tools/nsc/doc/html/resource/lib/trait_big.png
+++ b/src/compiler/scala/tools/nsc/doc/html/resource/lib/trait_big.png