If you want to go drawing complex graphics on the web, you have two basic options: SVG and the HTML canvas element.

My first attempt at the hgweb graphical browser used SVG. Actually, it used an unholy hybrid of SVG and HTML: the revisions themselves were drawn using absolutely positioned HTML. The arrows between the boxes were drawn using SVG. I did this for several reasons:

• only Firefox supports drawing text into canvas elements
• I could use DOM events to do hit-testing and navigation
• you can select/copy/paste text in HTML

Unfortunately, the performance of the first version was not very good, and the code was very complex. I was maintaining several parallel data structures: a JS object graph, and the DOM objects for revisions and arrows. The bookkeeping code to keep data in sync was dwarfing the actual layout logic.

Instead I decided to try using canvas. Sucking out the bookkeeping code and replacing it with a custom drawing code turned out to be much easier than I expected. Now all of the data is kept in a single tree, and layout, rendering, and hit-testing are all blazingly fast.

After getting it basically working, I was able to add additional features in a matter of minutes:

• Collision detection
• Animation when navigating between revisions
• Switched to a vertical layout which provides more information
• Made arrows into curves
• Highlight the “center” node

The disadvantages of this approach are unfortunate:

• Only works in Firefox 3+ (needs the experimental mozDrawText API)
• Impossible to select or copy text

check it out (my development machine, so it may go down at any time) or get the source.

Now I really promise I don’t have any more time to spend on this project. Contributions welcome!

One of the things that makes mercurial useful and frustrating at the same time is that history is not linear. History can separate and join at multiple places. Tools such as hg log can’t show the outline of history clearly. There have been several attempts to remedy this situation: hg glog prints a revision graph using ASCII art, and hg view allows browing a repository history in a GUI app written in TK.

I think we can do better, so I started a new project: it is an extension to hgweb which allows browsing repository history graphically in a web browser. You can navigate graphically through revisions, and it will load new revisions on demand. Note that I’ve only tested it with Firefox, and it won’t work in IE (no SVG support):

mozilla-central on office.smedbergs.us.

There is certainly lots more that can and should be done:

• The layout algorithm is really dumb
• Revisions should link back to hgweb for viewing diffs, etc
• Would be nice to zoom out to get a larger picture with less detail

Unfortunately I don’t have any more time to spend on this project. So I’m looking for volunteers to come forward and finish it.

Installation Instructions

The code is here. It is packaged as a single mercurial extension which must be installed in a global hgrc file, and a www/ directory with static files. I believe this extension will work correctly against Mercurial 1.0: I’ve been testing it against a mercurial-crew pull from a couple days ago.

• In www/navigate.js configure BASEURL for your site
• In www/index.xhtml populate select-repo with the repositories on your site.

The hgweb extension exists primarily to provide repository information in JSON format. I hope that it will be useful for other kinds of projects as well.