From 4266632eb0af0529b5690452d018ad15c8d3c202 Mon Sep 17 00:00:00 2001
From: Eelco Dolstra <eelco.dolstra@logicblox.com>
Date: Tue, 19 Feb 2013 17:14:02 +0100
Subject: [PATCH] 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              | 12 ++++-----
 src/root/static/css/logfile.css | 48 ++++++++++++++++-----------------
 src/xsl/log2html.xsl            | 39 +++++++++++----------------
 3 files changed, 45 insertions(+), 54 deletions(-)

diff --git a/src/root/layout.tt b/src/root/layout.tt
index b9257df9..caf8ef48 100644
--- a/src/root/layout.tt
+++ b/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() {
-              $(".logTreeToggle", $(this).parent().siblings(".toplevel")).map(function() {
+          $(".tree-expand-all").click(function() {
+              $(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
                   $(this).siblings("ul").show();
                   $(this).text("-");
               });
           });
 
           /* Implementation of the collapse all link. */
-          $(".logTreeCollapseAll").click(function() {
-              $(".logTreeToggle", $(this).parent().siblings(".toplevel")).map(function() {
+          $(".tree-collapse-all").click(function() {
+              $(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
                   $(this).siblings("ul").hide();
                   $(this).text("+");
               });
diff --git a/src/root/static/css/logfile.css b/src/root/static/css/logfile.css
index a49e2b00..da438607 100644
--- a/src/root/static/css/logfile.css
+++ b/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 {
-    padding-top: 0em;
-}
-
-ul.nesting li.line, ul.nesting li.lastline {
+/* Indent each tree level. */
+li.tree-line {
     position: relative;
-    list-style-type: none;
-}
-
-ul.nesting li.line {
     padding-left: 2.0em;
 }
 
-ul.nesting li.lastline {
-    padding-left: 2.1em; /* for the 0.1em border-left in .lastline > .lineconn */
+li.tree-line:last-child {
+    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,14 +38,21 @@ 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;
-    position: relative; 
+    position: relative;
     width: 100%;
 }
 
@@ -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;
diff --git a/src/xsl/log2html.xsl b/src/xsl/log2html.xsl
index e495d52a..d8e27f8b 100644
--- a/src/xsl/log2html.xsl
+++ b/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='.'/>
@@ -21,7 +21,7 @@
     </ul>
   </xsl:template>
 
-  
+
   <xsl:template match="nest">
 
     <!-- The tree should be collapsed by default if all children are
@@ -29,40 +29,33 @@
 <!--    <xsl:variable name="collapsed"
                   select="count(.//line[not(@priority = 3)]) = 0 or ./head[@priority = 3]" /> -->
     <xsl:variable name="collapsed" select="count(.//*[@error]) = 0"/>
-                  
+
     <xsl:variable name="style"><xsl:if test="$collapsed">display: none;</xsl:if></xsl:variable>
     <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>
-    
+
     <xsl:apply-templates select='head'/>
 
     <!-- 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}">
-        <xsl:for-each select='line|nest'>
 
-          <!-- Is this the last line?  If so, mark it as such so that it
-               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>
+      <ul class='subtree' style="{$style}">
+        <xsl:for-each select='line|nest'>
+          <li class='tree-line'>
+            <span class='tree-conn' />
+            <xsl:apply-templates select='.'/>
           </li>
         </xsl:for-each>
       </ul>
     </xsl:if>
-    
+
   </xsl:template>
 
-  
+
   <xsl:template match="head|line">
     <span class="code">
       <xsl:if test="@error">
@@ -78,12 +71,12 @@
     </span>
   </xsl:template>
 
-  
+
   <xsl:template match="storeref">
     <em class='storeref'>
       <span class='popup'><xsl:apply-templates/></span>
       <span class='elided'>/...</span><xsl:apply-templates select='name'/><xsl:apply-templates select='path'/>
     </em>
   </xsl:template>
-  
+
 </xsl:stylesheet>