Simplify the tree implementation a bit more

src/root/deps.tt

@@ -7,12 +7,12 @@
 [% job = build.job %]
 
 [% BLOCK renderNode %]
-  <li>
+  <li class="treenode">
     [% IF done.${node.path} %]
-      <p><tt>[% node.name %]</tt> (<em>repeated</em>)</p>
+      <span class="treeline"><tt>[% node.name %]</tt> (<em>repeated</em>)</span>
     [% ELSE %]
       [% done.${node.path} = 1 %]
-      <p>
+      <span class="treeline">
         [% IF node.buildStep %]
           <a href="[% c.uri_for('/build' node.buildStep.get_column('build')) %]"><tt>[% node.name %]</tt></a> [%
             IF log_exists(node.buildStep.drvpath);
@@ -21,7 +21,7 @@
         [% ELSE %]
           <tt>[% node.name %]</tt>
         [% END %]
-      </p>
+      </span>
       [% IF node.refs.size > 0 %]
         <ul>
           [% FOREACH ref IN node.refs; INCLUDE renderNode node=ref; END %]
@@ -34,7 +34,7 @@
 <a name="runtime"></a>
 <h2>Runtime dependency graph</h2>
 [% IF available %]
-<ul>
+<ul class="tree">
   [% done={}; FOREACH node IN runtimeGraph; INCLUDE renderNode; END %]
 </ul>
 [% ELSE %]
@@ -44,7 +44,7 @@
 <a name="buildtime"></a>
 <h2>Build-time dependency graph</h2>
 [% IF drvAvailable %]
-<ul>
+<ul class="tree">
   [% INCLUDE renderNode node=buildTimeGraph %]
 </ul>
 [% ELSE %]

src/root/static/css/tree.css

@@ -4,27 +4,27 @@ ul.tree, ul.subtree {
     list-style-type: none;
 }
 
-/* Indent each tree level. */
+/* Indent each tree level and draw vertical tree lines next to all
-li.tree-line {
+   children except the last. */
+ul.subtree > li {
     position: relative;
     padding-left: 2.0em;
-}
-
-li.tree-line:last-child {
-    padding-left: 2.1em; /* for the 0.1em border-left in the last child */
-}
-
-/* Draw vertical tree lines next to all children except the last. */
-li.tree-line {
     border-left: 0.1em solid #6185a0;
 }
 
-li.tree-line:last-child {
+ul.subtree > li:last-child {
+    padding-left: 2.1em; /* for the 0.1em border-left in the last child */
     border-left: 0;
 }
 
+/* Draw the vertical tree line to the last child. */
+ul.subtree > li:last-child > *:first-child:before {
+    border-left: 0.1em solid #6185a0;
+}
+
 /* Draw horizontal tree lines to all children. */
-span.tree-conn {
+ul.subtree > li > *:first-child:before {
+    content: "";
     position: absolute;
     height: 0.65em;
     left: 0em;
@@ -32,13 +32,8 @@ span.tree-conn {
     border-bottom: 0.1em solid #6185a0;
 }
 
-/* Draw the vertical tree line to the last child. */
+/* Ensure that the + and - have the same size. */
-li.tree-line:last-child > span.tree-conn {
+a.tree-toggle {
-    border-left: 0.1em solid #6185a0;
-}
-
-.tree-toggle {
     text-decoration: none;
     font-family: monospace;
-    font-size: larger;
 }

src/xsl/log2html.xsl

@@ -45,8 +45,7 @@
 
       <ul class='subtree' style="{$style}">
         <xsl:for-each select='line|nest'>
-          <li class='tree-line'>
+          <li>
-            <span class='tree-conn' />
             <xsl:apply-templates select='.'/>
           </li>
         </xsl:for-each>