3 files changed, 65 insertions, 5 deletions
diff --git a/src/log2xml/log2html.xsl b/src/log2xml/log2html.xsl
index cb56a3cb4bf8..667eb5998135 100644
--- a/src/log2xml/log2html.xsl
+++ b/src/log2xml/log2html.xsl
@@ -7,6 +7,7 @@
   <xsl:template match="logfile">
     <html>
       <head>
+        <script type="text/javascript" src="treebits.js" />
         <link rel="stylesheet" href="logfile.css" type="text/css" />
         <title>Log File</title>
       </head>
@@ -23,6 +24,7 @@
   </xsl:template>
 
   <xsl:template match="nest">
+    <script type='text/javascript'>showTreeToggle("show","hide")</script>
     <xsl:apply-templates select='head'/>
     <ul class='nesting'>
       <xsl:for-each select='line|nest'>
diff --git a/src/log2xml/logfile.css b/src/log2xml/logfile.css
index 9b3b56da3071..1bdbe3c97bea 100644
--- a/src/log2xml/logfile.css
+++ b/src/log2xml/logfile.css
@@ -23,7 +23,7 @@ ul.nesting li.line {
 }
 
 ul.nesting li.lastline {
-    padding-left: 1.2em;
+    padding-left: 1.2em; // for the 0.1em border-left in .lastline > .lineconn
 }
 
 li.line {
@@ -43,15 +43,13 @@ li.lastline > span.lineconn {
 }
 
 
-em.storeref
-{
+em.storeref {
     color: #500000;
     position: relative; 
     width: 100%;
 }
 
-em.storeref:hover
-{
+em.storeref:hover {
     background-color: #eeeeee;
 }
 
@@ -71,3 +69,13 @@ em.storeref:hover
 em.storeref:hover span.popup {
     display: inline;
 }
+
+
+.toggle {
+    text-decoration: none;
+}
+
+.showTree, .hideTree {
+    font-family: monospace;
+    font-size: larger;
+}
\ No newline at end of file
diff --git a/src/log2xml/treebits.js b/src/log2xml/treebits.js
new file mode 100644
index 000000000000..ffd18fbb18ec
--- /dev/null
+++ b/src/log2xml/treebits.js
@@ -0,0 +1,50 @@
+/* Acknowledgement: this is based on the Wikipedia table-of-contents
+ * toggle. */
+
+
+var idCounter = 0;
+
+
+function showTreeToggle(show,hide) {
+    if (document.getElementById) {
+        var id = "toggle_" + idCounter;
+        document.writeln(
+            '<a href="javascript:toggleTree(\'' + id + '\')" class="toggle" id="' + id + '">' +
+            '<span class="showTree" style="display: none;">+</span>' +
+            '<span class="hideTree">-</span>' +
+            '</a>');
+        idCounter = idCounter + 1;
+    }
+}
+
+
+function toggleTree(id) {
+
+    var href = document.getElementById(id);
+
+    var node = href;
+    var tree = null;
+    while (node != null) {
+        if (node.className == "nesting") tree = node;
+        node = node.nextSibling;
+    }
+
+    node = href.firstChild;
+    var hideTree = null;
+    var showTree = null;
+    while (node != null) {
+        if (node.className == "showTree") showTree = node;
+        else if (node.className == "hideTree") hideTree = node;
+        node = node.nextSibling;
+    }
+    
+    if (tree.style.display == 'none') {
+        tree.style.display = '';
+        hideTree.style.display = '';
+        showTree.style.display = 'none';
+    } else {
+        tree.style.display = 'none';
+        hideTree.style.display = 'none';
+        showTree.style.display = '';
+    }
+}