From 4266632eb0af0529b5690452d018ad15c8d3c202 Mon Sep 17 00:00:00 2001 From: Eelco Dolstra 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 @@

- Expand all + Expand all - Collapse all + Collapse all

-