Simplify the log tree implementation a bit

In particular use the :last-child selector, which is non-standard but
supported by all major browsers.

src/root/layout.tt

@@ -34,7 +34,7 @@
 
           /* Set the appearance of the toggle depending on whether the
              corresponding subtree is initially shown or hidden. */
-          $(".logTreeToggle").map(function() {
+          $(".tree-toggle").map(function() {
               if ($(this).siblings("ul:hidden").length == 0) {
                   $(this).text("-");
               } else {
@@ -43,7 +43,7 @@
           });
 
           /* When a toggle is clicked, show or hide the subtree. */
-          $(".logTreeToggle").click(function() {
+          $(".tree-toggle").click(function() {
               if ($(this).siblings("ul:hidden").length != 0) {
                   $(this).siblings("ul").show();
                   $(this).text("-");
@@ -54,16 +54,16 @@
           });
 
           /* Implementation of the expand all link. */
-          $(".logTreeExpandAll").click(function() {
+          $(".tree-expand-all").click(function() {
-              $(".logTreeToggle", $(this).parent().siblings(".toplevel")).map(function() {
+              $(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
                   $(this).siblings("ul").show();
                   $(this).text("-");
               });
           });
 
           /* Implementation of the collapse all link. */
-          $(".logTreeCollapseAll").click(function() {
+          $(".tree-collapse-all").click(function() {
-              $(".logTreeToggle", $(this).parent().siblings(".toplevel")).map(function() {
+              $(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
                   $(this).siblings("ul").hide();
                   $(this).text("+");
               });

src/root/static/css/logfile.css

@@ -3,37 +3,34 @@
     padding: 0.3em;
 }
 
-ul.nesting, ul.toplevel {
+
+ul.tree, ul.subtree {
     padding: 0;
     margin: 0;
-}
-
-ul.toplevel {
     list-style-type: none;
 }
 
-.line, .head {
+/* Indent each tree level. */
-    padding-top: 0em;
+li.tree-line {
-}
-
-ul.nesting li.line, ul.nesting li.lastline {
     position: relative;
-    list-style-type: none;
-}
-
-ul.nesting li.line {
     padding-left: 2.0em;
 }
 
-ul.nesting li.lastline {
+li.tree-line:last-child {
-    padding-left: 2.1em; /* for the 0.1em border-left in .lastline > .lineconn */
+    padding-left: 2.1em; /* for the 0.1em border-left in the last child */
 }
 
-li.line {
+/* Draw vertical tree lines next to all children except the last. */
+li.tree-line {
     border-left: 0.1em solid #6185a0;
 }
 
-li.line > span.lineconn, li.lastline > span.lineconn {
+li.tree-line:last-child {
+    border-left: 0;
+}
+
+/* Draw horizontal tree lines to all children. */
+span.tree-conn {
     position: absolute;
     height: 0.65em;
     left: 0em;
@@ -41,10 +38,17 @@ li.line > span.lineconn, li.lastline > span.lineconn {
     border-bottom: 0.1em solid #6185a0;
 }
 
-li.lastline > span.lineconn {
+/* Draw the vertical tree line to the last child. */
+li.tree-line:last-child > span.tree-conn {
     border-left: 0.1em solid #6185a0;
 }
 
+.tree-toggle {
+    text-decoration: none;
+    font-family: monospace;
+    font-size: larger;
+}
+
 
 em.storeref {
     color: #500000;
@@ -75,12 +79,6 @@ em.storeref:hover span.popup {
 }
 
 
-.logTreeToggle {
-    text-decoration: none;
-    font-family: monospace;
-    font-size: larger;
-}
-
 span.code {
     white-space: pre-wrap;
     font-family: monospace;

src/xsl/log2html.xsl

@@ -8,11 +8,11 @@
 
   <xsl:template match="logfile">
     <p>
-    <a href="javascript:" class="btn btn-info logTreeExpandAll"><i class="icon-plus icon-white"></i> Expand all</a>
+    <a href="javascript:" class="btn btn-info tree-expand-all"><i class="icon-plus icon-white"></i> Expand all</a>
     <xsl:text> </xsl:text>
-    <a href="javascript:" class="btn btn-info logTreeCollapseAll"><i class="icon-minus icon-white"></i> Collapse all</a>
+    <a href="javascript:" class="btn btn-info tree-collapse-all"><i class="icon-minus icon-white"></i> Collapse all</a>
     </p>
-    <ul class='toplevel'>
+    <ul class='tree'>
       <xsl:for-each select='line|nest'>
         <li>
           <xsl:apply-templates select='.'/>
@@ -34,7 +34,7 @@
     <xsl:variable name="arg"><xsl:choose><xsl:when test="$collapsed">true</xsl:when><xsl:otherwise>false</xsl:otherwise></xsl:choose></xsl:variable>
 
     <xsl:if test="line|nest">
-      <a href="javascript:" class="logTreeToggle"></a>
+      <a href="javascript:" class="tree-toggle"></a>
       <xsl:text> </xsl:text>
     </xsl:if>
 
@@ -43,18 +43,11 @@
     <!-- Be careful to only generate <ul>s if there are <li>s, otherwise it’s malformed. -->
     <xsl:if test="line|nest">
 
-      <ul class='nesting' style="{$style}">
+      <ul class='subtree' style="{$style}">
         <xsl:for-each select='line|nest'>
-
+          <li class='tree-line'>
-          <!-- Is this the last line?  If so, mark it as such so that it
+            <span class='tree-conn' />
-               can be rendered differently. -->
-          <xsl:variable  name="class"><xsl:choose><xsl:when test="position() != last()">line</xsl:when><xsl:otherwise>lastline</xsl:otherwise></xsl:choose></xsl:variable>
-        
-          <li class='{$class}'>
-            <span class='lineconn' />
-            <span class='linebody'>
             <xsl:apply-templates select='.'/>
-            </span>
           </li>
         </xsl:for-each>
       </ul>