Change Fossil-SCM timeline page HTML

Question

I need change in the HTML of timeline page generated by Fossil-SCM inside the timelineTableCell class td element. Current content of this td element is as follows

<td class="timelineTableCell" style="FOO">
    <a class="timelineHistLink" href="FOO">[DF45GH67MD]</a>
    <span class="timelineLeaf">Leaf:</span>
    <span class="timelineComment">Any comment goes here</span>
    (user: <a href="FOO">User Name</a>,tags: <a href="FOO">Lyca+ HLR</a>)
</td>

I require each element in individual td as follows

<td><a class="timelineHistLink" href="FOO">[DF45GH67MD]</a></td>
<td><span class="timelineLeaf">Leaf(empty if not leaf)</span></td>
<td><span class="timelineComment">Any comment goes here</span></td>
<td>User: <a href="FOO">Usr_Name</a></td>
<td>Tags: <a href="FOO">Tag_Name</a></td>

So by this page will look better aligned and more readable. How can I do this?

Answer 1

I can think of two ways:

1. by building your own version of Fossil. Clone the Fossil repository, and create a (private) branch where you can change the source code, and compile your own version of Fossil. This does mean that everytime you want to update fossil, you'll need to merge the trunk into your branch, and compile it again.

2. by using CSS and Javascript. Under the Admin page, you can insert stuff in the header and footer sections that are generated for each page.

   • look for the CSS page. In there, you can specify display: table-cell; for .timelineHistLink, .timelineLeaf, .timelineComment. This should turn those three elements into separate table cells. Note that I haven't tested this, and it might not work since they're already inside a table cell. In any case, this will not turn the user and tags into separate cells. That's something you would have to do using Javascript.
   • in the Footer page, you can insert a piece of Javascript to alter the page the way you like it. Here's an example of a bit of script that I once wrote to get rid of the UUID of each checkin, and turn the commit text into a link:

(TH1 is Fossil's server-side language; I'm using it here to indicate that this script should only be generated on the timeline page instead of every page).

<th1>
    if {$current_page eq "timeline"} {
        enable_output 1
    } else {
        enable_output 0
    }
</th1>
<script>
(function() {
        var cells = document.getElementsByClassName('timelineTableCell');
        for (var i = 0; i < cells.length; i++) {
                cells[i].innerHTML = cells[i].innerHTML.replace(/^[^<]*<a href="([^"]*)">[^<]*<\/a>\]\s*(.*)\s+(\(user:[^\0]*\))\s*$/, '<a href="$1">$2</a><br> <span style="font-size: smaller; font-style: italic; opacity: 0.75">$3</span>');
        }
})();
</script>
<th1>
    enable_output 1
</th1>