ui-log: Colorize commit graph

Use the existing coloring logic in Git's graph code to color the lines
between commits in the commit graph.

Whereas Git normally uses ANSI color escapes to produce colors, we here
use graph_set_column_colors() to replace those with HTML color escapes,
that embed the graph lines in <span> tags that apply the desired color
using CSS.

Signed-off-by: Johan Herland <johan@herland.net>
Signed-off-by: Lars Hjemli <hjemli@gmail.com>

2 files changed, 43 insertions, 0 deletions

diff --git a/cgit.css b/cgit.css
index 7600e84..1ebef55 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,739 +1,763 @@
 body, table, form {
 	padding: 0em;
 	margin: 0em;
 }
 
 body {
 	font-family: sans-serif;
 	font-size: 10pt;
 	color: #333;
 	background: white;
 	padding: 4px;
 }
 
 a {
 	color: blue;
 	text-decoration: none;
 }
 
 a:hover {
 	text-decoration: underline;
 }
 
 table {
       border-collapse: collapse;
 }
 
 table#header {
 	width: 100%;
 	margin-bottom: 1em;
 }
 
 table#header td.logo {
 	width: 96px;
 }
 
 table#header td.main {
 	font-size: 250%;
 	padding-left: 10px;
 	white-space: nowrap;
 }
 
 table#header td.main a {
 	color: #000;
 }
 
 table#header td.form {
 	text-align: right;
 	vertical-align: bottom;
 	padding-right: 1em;
 	padding-bottom: 2px;
 	white-space: nowrap;
 }
 
 table#header td.form form,
 table#header td.form input,
 table#header td.form select {
 	font-size: 90%;
 }
 
 table#header td.sub {
 	color: #777;
 	border-top: solid 1px #ccc;
 	padding-left: 10px;
 }
 
 table.tabs {
 	border-bottom: solid 3px #ccc;
 	border-collapse: collapse;
 	margin-top: 2em;
 	margin-bottom: 0px;
 	width: 100%;
 }
 
 table.tabs td {
 	padding: 0px 1em;
 	vertical-align: bottom;
 }
 
 table.tabs td a {
 	padding: 2px 0.75em;
 	color: #777;
 	font-size: 110%;
 }
 
 table.tabs td a.active {
 	color: #000;
 	background-color: #ccc;
 }
 
 table.tabs td.form {
 	text-align: right;
 }
 
 table.tabs td.form form {
 	padding-bottom: 2px;
 	font-size: 90%;
 	white-space: nowrap;
 }
 
 table.tabs td.form input,
 table.tabs td.form select {
 	font-size: 90%;
 }
 
 div.path {
 	margin: 0px;
 	padding: 5px 2em 2px 2em;
 	color: #000;
 	background-color: #eee;
 }
 
 div.content {
 	margin: 0px;
 	padding: 2em;
 	border-bottom: solid 3px #ccc;
 }
 
 
 table.list {
 	width: 100%;
 	border: none;
 	border-collapse: collapse;
 }
 
 table.list tr {
 	background: white;
 }
 
 table.list tr.logheader {
 	background: #eee;
 }
 
 table.list tr:hover {
 	background: #eee;
 }
 
 table.list tr.nohover:hover {
 	background: white;
 }
 
 table.list th {
 	font-weight: bold;
 	/* color: #888;
 	border-top: dashed 1px #888;
 	border-bottom: dashed 1px #888;
 	*/
 	padding: 0.1em 0.5em 0.05em 0.5em;
 	vertical-align: baseline;
 }
 
 table.list td {
 	border: none;
 	padding: 0.1em 0.5em 0.1em 0.5em;
 }
 
 table.list td.commitgraph {
 	font-family: monospace;
 	white-space: pre;
 }
 
+table.list td.commitgraph .column1 {
+	color: #a00;
+}
+
+table.list td.commitgraph .column2 {
+	color: #0a0;
+}
+
+table.list td.commitgraph .column3 {
+	color: #aa0;
+}
+
+table.list td.commitgraph .column4 {
+	color: #00a;
+}
+
+table.list td.commitgraph .column5 {
+	color: #a0a;
+}
+
+table.list td.commitgraph .column6 {
+	color: #0aa;
+}
+
 table.list td.logsubject {
 	font-family: monospace;
 	font-weight: bold;
 }
 
 table.list td.logmsg {
 	font-family: monospace;
 	white-space: pre;
 	padding: 0 0.5em;
 }
 
 table.list td a {
 	color: black;
 }
 
 table.list td a.ls-dir {
 	font-weight: bold;
 	color: #00f;
 }
 
 table.list td a:hover {
 	color: #00f;
 }
 
 img {
 	border: none;
 }
 
 input#switch-btn {
 	margin: 2px 0px 0px 0px;
 }
 
 td#sidebar input.txt {
 	width: 100%;
 	margin: 2px 0px 0px 0px;
 }
 
 table#grid {
 	margin: 0px;
 }
 
 td#content {
 	vertical-align: top;
 	padding: 1em 2em 1em 1em;
 	border: none;
 }
 
 div#summary {
 	vertical-align: top;
 	margin-bottom: 1em;
 }
 
 table#downloads {
 	float: right;
 	border-collapse: collapse;
 	border: solid 1px #777;
 	margin-left: 0.5em;
 	margin-bottom: 0.5em;
 }
 
 table#downloads th {
 	background-color: #ccc;
 }
 
 div#blob {
 	border: solid 1px black;
 }
 
 div.error {
 	color: red;
 	font-weight: bold;
 	margin: 1em 2em;
 }
 
 a.ls-blob, a.ls-dir, a.ls-mod {
 	font-family: monospace;
 }
 
 td.ls-size {
 	text-align: right;
 	font-family: monospace;
 	width: 10em;
 }
 
 td.ls-mode {
 	font-family: monospace;
 	width: 10em;
 }
 
 table.blob {
 	margin-top: 0.5em;
 	border-top: solid 1px black;
 }
 
 table.blob td.lines {
 	margin: 0; padding: 0 0 0 0.5em;
 	vertical-align: top;
 	color: black;
 }
 
 table.blob td.linenumbers {
 	margin: 0; padding: 0 0.5em 0 0.5em;
 	vertical-align: top;
 	text-align: right;
 	border-right: 1px solid gray;
 }
 
 table.blob pre {
 	padding: 0; margin: 0;
 }
 
 table.blob a.no {
 	color: gray;
 	text-align: right;
 	text-decoration: none;
 }
 
 table.blob a.no a:hover {
 	color: black;
 }
 
 table.bin-blob {
 	margin-top: 0.5em;
 	border: solid 1px black;
 }
 
 table.bin-blob th {
 	font-family: monospace;
 	white-space: pre;
 	border: solid 1px #777;
 	padding: 0.5em 1em;
 }
 
 table.bin-blob td {
 	font-family: monospace;
 	white-space: pre;
 	border-left: solid 1px #777;
 	padding: 0em 1em;
 }
 
 table.nowrap td {
 	white-space: nowrap;
 }
 
 table.commit-info {
 	border-collapse: collapse;
 	margin-top: 1.5em;
 }
 
 table.commit-info th {
 	text-align: left;
 	font-weight: normal;
 	padding: 0.1em 1em 0.1em 0.1em;
 	vertical-align: top;
 }
 
 table.commit-info td {
 	font-weight: normal;
 	padding: 0.1em 1em 0.1em 0.1em;
 }
 
 div.commit-subject {
 	font-weight: bold;
 	font-size: 125%;
 	margin: 1.5em 0em 0.5em 0em;
 	padding: 0em;
 }
 
 div.commit-msg {
 	white-space: pre;
 	font-family: monospace;
 }
 
 div.notes-header {
 	font-weight: bold;
 	padding-top: 1.5em;
 }
 
 div.notes {
 	white-space: pre;
 	font-family: monospace;
 	border: solid 1px #ee9;
 	background-color: #ffd;
 	padding: 0.3em 2em 0.3em 1em;
 	float: left;
 }
 
 div.notes-footer {
 	clear: left;
 }
 
 div.diffstat-header {
 	font-weight: bold;
 	padding-top: 1.5em;
 }
 
 table.diffstat {
 	border-collapse: collapse;
 	border: solid 1px #aaa;
 	background-color: #eee;
 }
 
 table.diffstat th {
 	font-weight: normal;
 	text-align: left;
 	text-decoration: underline;
 	padding: 0.1em 1em 0.1em 0.1em;
 	font-size: 100%;
 }
 
 table.diffstat td {
 	padding: 0.2em 0.2em 0.1em 0.1em;
 	font-size: 100%;
 	border: none;
 }
 
 table.diffstat td.mode {
 	white-space: nowrap;
 }
 
 table.diffstat td span.modechange {
 	padding-left: 1em;
 	color: red;
 }
 
 table.diffstat td.add a {
 	color: green;
 }
 
 table.diffstat td.del a {
 	color: red;
 }
 
 table.diffstat td.upd a {
 	color: blue;
 }
 
 table.diffstat td.graph {
 	width: 500px;
 	vertical-align: middle;
 }
 
 table.diffstat td.graph table {
 	border: none;
 }
 
 table.diffstat td.graph td {
 	padding: 0px;
 	border: 0px;
 	height: 7pt;
 }
 
 table.diffstat td.graph td.add {
 	background-color: #5c5;
 }
 
 table.diffstat td.graph td.rem {
 	background-color: #c55;
 }
 
 div.diffstat-summary {
 	color: #888;
 	padding-top: 0.5em;
 }
 
 table.diff {
 	width: 100%;
 }
 
 table.diff td {
 	font-family: monospace;
 	white-space: pre;
 }
 
 table.diff td div.head {
 	font-weight: bold;
 	margin-top: 1em;
 	color: black;
 }
 
 table.diff td div.hunk {
 	color: #009;
 }
 
 table.diff td div.add {
 	color: green;
 }
 
 table.diff td div.del {
 	color: red;
 }
 
 .sha1 {
 	font-family: monospace;
 	font-size: 90%;
 }
 
 .left {
 	text-align: left;
 }
 
 .right {
 	text-align: right;
 }
 
 table.list td.reposection {
 	font-style: italic;
 	color: #888;
 }
 
 a.button {
 	font-size: 80%;
 	padding: 0em 0.5em;
 }
 
 a.primary {
 	font-size: 100%;
 }
 
 a.secondary {
 	font-size: 90%;
 }
 
 td.toplevel-repo {
 
 }
 
 table.list td.sublevel-repo {
 	padding-left: 1.5em;
 }
 
 div.pager {
 	text-align: center;
 	margin: 1em 0em 0em 0em;
 }
 
 div.pager a {
 	color: #777;
 	margin: 0em 0.5em;
 }
 
 span.age-mins {
 	font-weight: bold;
 	color: #080;
 }
 
 span.age-hours {
 	color: #080;
 }
 
 span.age-days {
 	color: #040;
 }
 
 span.age-weeks {
 	color: #444;
 }
 
 span.age-months {
 	color: #888;
 }
 
 span.age-years {
 	color: #bbb;
 }
 div.footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
 	color: #ccc;
 }
 a.branch-deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #88ff88;
 	border: solid 1px #007700;
 }
 a.tag-deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #ffff88;
 	border: solid 1px #777700;
 }
 a.remote-deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #ccccff;
 	border: solid 1px #000077;
 }
 a.deco {
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
 	background-color: #ff8888;
 	border: solid 1px #770000;
 }
 
 div.commit-subject a.branch-deco,
 div.commit-subject a.tag-deco,
 div.commit-subject a.remote-deco,
 div.commit-subject a.deco {
 	margin-left: 1em;
 	font-size: 75%;
 }
 
 table.stats {
 	border: solid 1px black;
 	border-collapse: collapse;
 }
 
 table.stats th {
 	text-align: left;
 	padding: 1px 0.5em;
 	background-color: #eee;
 	border: solid 1px black;
 }
 
 table.stats td {
 	text-align: right;
 	padding: 1px 0.5em;
 	border: solid 1px black;
 }
 
 table.stats td.total {
 	font-weight: bold;
 	text-align: left;
 }
 
 table.stats td.sum {
 	color: #c00;
 	font-weight: bold;
 /*	background-color: #eee; */
 }
 
 table.stats td.left {
 	text-align: left;
 }
 
 table.vgraph {
 	border-collapse: separate;
 	border: solid 1px black;
 	height: 200px;
 }
 
 table.vgraph th {
 	background-color: #eee;
 	font-weight: bold;
 	border: solid 1px white;
 	padding: 1px 0.5em;
 }
 
 table.vgraph td {
 	vertical-align: bottom;
 	padding: 0px 10px;
 }
 
 table.vgraph div.bar {
 	background-color: #eee;
 }
 
 table.hgraph {
 	border: solid 1px black;
 	width: 800px;
 }
 
 table.hgraph th {
 	background-color: #eee;
 	font-weight: bold;
 	border: solid 1px black;
 	padding: 1px 0.5em;
 }
 
 table.hgraph td {
 	vertical-align: center;
 	padding: 2px 2px;
 }
 
 table.hgraph div.bar {
 	background-color: #eee;
 	height: 1em;
 }
 
 table.ssdiff {
 	width: 100%;
 }
 
 table.ssdiff td {
 	font-size: 75%;
 	font-family: monospace;
 	white-space: pre;
 	padding: 1px 4px 1px 4px;
 	border-left: solid 1px #aaa;
 	border-right: solid 1px #aaa;
 }
 
 table.ssdiff td.add {
 	color: black;
 	background: #cfc;
 	min-width: 50%;
 }
 
 table.ssdiff td.add_dark {
 	color: black;
 	background: #aca;
 	min-width: 50%;
 }
 
 table.ssdiff span.add {
 	background: #cfc;
 	font-weight: bold;
 }
 
 table.ssdiff td.del {
 	color: black;
 	background: #fcc;
 	min-width: 50%;
 }
 
 table.ssdiff td.del_dark {
 	color: black;
 	background: #caa;
 	min-width: 50%;
 }
 
 table.ssdiff span.del {
 	background: #fcc;
 	font-weight: bold;
 }
 
 table.ssdiff td.changed {
 	color: black;
 	background: #ffc;
 	min-width: 50%;
 }
 
 table.ssdiff td.changed_dark {
 	color: black;
 	background: #cca;
 	min-width: 50%;
 }
 
 table.ssdiff td.lineno {
 	color: black;
 	background: #eee;
 	text-align: right;
 	width: 3em;
 	min-width: 3em;
 }
 
 table.ssdiff td.hunk {
 	color: #black;
 	background: #ccf;
 	border-top: solid 1px #aaa;
 	border-bottom: solid 1px #aaa;
 }
 
 table.ssdiff td.head {
 	border-top: solid 1px #aaa;
 	border-bottom: solid 1px #aaa;
 }
 
 table.ssdiff td.head div.head {
 	font-weight: bold;
 	color: black;
 }
 
 table.ssdiff td.foot {
 	border-top: solid 1px #aaa;
         border-left: none;
         border-right: none;
         border-bottom: none;
 }
 
 table.ssdiff td.space {
 	border: none;
 }
 
 table.ssdiff td.space div {
 	min-height: 3em;
 }
diff --git a/ui-log.c b/ui-log.c
index 0d86fd5..5cf66cb 100644
--- a/ui-log.c
+++ b/ui-log.c
@@ -1,366 +1,385 @@
 /* ui-log.c: functions for log output
  *
  * Copyright (C) 2006 Lars Hjemli
  *
  * Licensed under GNU General Public License v2
  *   (see COPYING for full license text)
  */
 
 #include "cgit.h"
 #include "html.h"
 #include "ui-shared.h"
 #include "vector.h"
 
 int files, add_lines, rem_lines;
 
+/*
+ * The list of available column colors in the commit graph.
+ */
+static const char *column_colors_html[] = {
+	"<span class='column1'>",
+	"<span class='column2'>",
+	"<span class='column3'>",
+	"<span class='column4'>",
+	"<span class='column5'>",
+	"<span class='column6'>",
+	"</span>",
+};
+
+#define COLUMN_COLORS_HTML_MAX (ARRAY_SIZE(column_colors_html) - 1)
+
 void count_lines(char *line, int size)
 {
 	if (size <= 0)
 		return;
 
 	if (line[0] == '+')
 		add_lines++;
 
 	else if (line[0] == '-')
 		rem_lines++;
 }
 
 void inspect_files(struct diff_filepair *pair)
 {
 	unsigned long old_size = 0;
 	unsigned long new_size = 0;
 	int binary = 0;
 
 	files++;
 	if (ctx.repo->enable_log_linecount)
 		cgit_diff_files(pair->one->sha1, pair->two->sha1, &old_size,
 				&new_size, &binary, 0, ctx.qry.ignorews,
 				count_lines);
 }
 
 void show_commit_decorations(struct commit *commit)
 {
 	struct name_decoration *deco;
 	static char buf[1024];
 
 	buf[sizeof(buf) - 1] = 0;
 	deco = lookup_decoration(&name_decoration, &commit->object);
 	while (deco) {
 		if (!prefixcmp(deco->name, "refs/heads/")) {
 			strncpy(buf, deco->name + 11, sizeof(buf) - 1);
 			cgit_log_link(buf, NULL, "branch-deco", buf, NULL,
 				      ctx.qry.vpath, 0, NULL, NULL,
 				      ctx.qry.showmsg);
 		}
 		else if (!prefixcmp(deco->name, "tag: refs/tags/")) {
 			strncpy(buf, deco->name + 15, sizeof(buf) - 1);
 			cgit_tag_link(buf, NULL, "tag-deco", ctx.qry.head, buf);
 		}
 		else if (!prefixcmp(deco->name, "refs/tags/")) {
 			strncpy(buf, deco->name + 10, sizeof(buf) - 1);
 			cgit_tag_link(buf, NULL, "tag-deco", ctx.qry.head, buf);
 		}
 		else if (!prefixcmp(deco->name, "refs/remotes/")) {
 			strncpy(buf, deco->name + 13, sizeof(buf) - 1);
 			cgit_log_link(buf, NULL, "remote-deco", NULL,
 				      sha1_to_hex(commit->object.sha1),
 				      ctx.qry.vpath, 0, NULL, NULL,
 				      ctx.qry.showmsg);
 		}
 		else {
 			strncpy(buf, deco->name, sizeof(buf) - 1);
 			cgit_commit_link(buf, NULL, "deco", ctx.qry.head,
 					 sha1_to_hex(commit->object.sha1),
 					 ctx.qry.vpath, 0);
 		}
 		deco = deco->next;
 	}
 }
 
 void print_commit(struct commit *commit, struct rev_info *revs)
 {
 	struct commitinfo *info;
 	char *tmp;
 	int cols = 2;
 	struct strbuf graphbuf = STRBUF_INIT;
 
 	if (ctx.repo->enable_log_filecount) {
 		cols++;
 		if (ctx.repo->enable_log_linecount)
 			cols++;
 	}
 
 	if (revs->graph) {
 		/* Advance graph until current commit */
 		while (!graph_next_line(revs->graph, &graphbuf)) {
 			/* Print graph segment in otherwise empty table row */
 			html("<tr class='nohover'><td/><td class='commitgraph'>");
 			html(graphbuf.buf);
 			htmlf("</td><td colspan='%d' /></tr>\n", cols);
 			strbuf_setlen(&graphbuf, 0);
 		}
 		/* Current commit's graph segment is now ready in graphbuf */
 	}
 
 	info = cgit_parse_commit(commit);
 	htmlf("<tr%s><td>",
 		ctx.qry.showmsg ? " class='logheader'" : "");
 	tmp = fmt("id=%s", sha1_to_hex(commit->object.sha1));
 	tmp = cgit_fileurl(ctx.repo->url, "commit", ctx.qry.vpath, tmp);
 	html_link_open(tmp, NULL, NULL);
 	cgit_print_age(commit->date, TM_WEEK * 2, FMT_SHORTDATE);
 	html_link_close();
 	html("</td>");
 
 	if (revs->graph) {
 		/* Print graph segment for current commit */
 		html("<td class='commitgraph'>");
 		html(graphbuf.buf);
 		html("</td>");
 		strbuf_setlen(&graphbuf, 0);
 	}
 
 	htmlf("<td%s>", ctx.qry.showmsg ? " class='logsubject'" : "");
 	cgit_commit_link(info->subject, NULL, NULL, ctx.qry.head,
 			 sha1_to_hex(commit->object.sha1), ctx.qry.vpath, 0);
 	show_commit_decorations(commit);
 	html("</td><td>");
 	html_txt(info->author);
 	if (ctx.repo->enable_log_filecount) {
 		files = 0;
 		add_lines = 0;
 		rem_lines = 0;
 		cgit_diff_commit(commit, inspect_files, ctx.qry.vpath);
 		html("</td><td>");
 		htmlf("%d", files);
 		if (ctx.repo->enable_log_linecount) {
 			html("</td><td>");
 			htmlf("-%d/+%d", rem_lines, add_lines);
 		}
 	}
 	html("</td></tr>\n");
 
 	if (revs->graph || ctx.qry.showmsg) { /* Print a second table row */
 		struct strbuf msgbuf = STRBUF_INIT;
 		html("<tr class='nohover'><td/>"); /* Empty 'Age' column */
 
 		if (ctx.qry.showmsg) {
 			/* Concatenate commit message + notes in msgbuf */
 			if (info->msg && *(info->msg)) {
 				strbuf_addstr(&msgbuf, info->msg);
 				strbuf_addch(&msgbuf, '\n');
 			}
 			format_note(NULL, commit->object.sha1, &msgbuf,
 			            PAGE_ENCODING,
 			            NOTES_SHOW_HEADER | NOTES_INDENT);
 			strbuf_addch(&msgbuf, '\n');
 			strbuf_ltrim(&msgbuf);
 		}
 
 		if (revs->graph) {
 			int lines = 0;
 
 			/* Calculate graph padding */
 			if (ctx.qry.showmsg) {
 				/* Count #lines in commit message + notes */
 				const char *p = msgbuf.buf;
 				lines = 1;
 				while ((p = strchr(p, '\n'))) {
 					p++;
 					lines++;
 				}
 			}
 
 			/* Print graph padding */
 			html("<td class='commitgraph'>");
 			while (lines > 0 || !graph_is_commit_finished(revs->graph)) {
 				if (graphbuf.len)
 					html("\n");
 				strbuf_setlen(&graphbuf, 0);
 				graph_next_line(revs->graph, &graphbuf);
 				html(graphbuf.buf);
 				lines--;
 			}
 			html("</td>\n");
 		}
 
 		/* Print msgbuf into remainder of table row */
 		htmlf("<td colspan='%d'%s>\n", cols,
 			ctx.qry.showmsg ? " class='logmsg'" : "");
 		html_txt(msgbuf.buf);
 		html("</td></tr>\n");
 		strbuf_release(&msgbuf);
 	}
 
 	strbuf_release(&graphbuf);
 	cgit_free_commitinfo(info);
 }
 
 static const char *disambiguate_ref(const char *ref)
 {
 	unsigned char sha1[20];
 	const char *longref;
 
 	longref = fmt("refs/heads/%s", ref);
 	if (get_sha1(longref, sha1) == 0)
 		return longref;
 
 	return ref;
 }
 
 static char *next_token(char **src)
 {
 	char *result;
 
 	if (!src || !*src)
 		return NULL;
 	while (isspace(**src))
 		(*src)++;
 	if (!**src)
 		return NULL;
 	result = *src;
 	while (**src) {
 		if (isspace(**src)) {
 			**src = '\0';
 			(*src)++;
 			break;
 		}
 		(*src)++;
 	}
 	return result;
 }
 
 void cgit_print_log(const char *tip, int ofs, int cnt, char *grep, char *pattern,
 		    char *path, int pager)
 {
 	struct rev_info rev;
 	struct commit *commit;
 	struct vector vec = VECTOR_INIT(char *);
 	int i, columns = 3;
 	char *arg;
 
 	/* First argv is NULL */
 	vector_push(&vec, NULL, 0);
 
 	if (!tip)
 		tip = ctx.qry.head;
 	tip = disambiguate_ref(tip);
 	vector_push(&vec, &tip, 0);
 
 	if (grep && pattern && *pattern) {
 		pattern = xstrdup(pattern);
 		if (!strcmp(grep, "grep") || !strcmp(grep, "author") ||
 		    !strcmp(grep, "committer")) {
 			arg = fmt("--%s=%s", grep, pattern);
 			vector_push(&vec, &arg, 0);
 		}
 		if (!strcmp(grep, "range")) {
 			/* Split the pattern at whitespace and add each token
 			 * as a revision expression. Do not accept other
 			 * rev-list options. Also, replace the previously
 			 * pushed tip (it's no longer relevant).
 			 */
 			vec.count--;
 			while ((arg = next_token(&pattern))) {
 				if (*arg == '-') {
 					fprintf(stderr, "Bad range expr: %s\n",
 						arg);
 					break;
 				}
 				vector_push(&vec, &arg, 0);
 			}
 		}
 	}
 	if (ctx.repo->enable_commit_graph) {
 		static const char *graph_arg = "--graph";
+		static const char *color_arg = "--color";
 		vector_push(&vec, &graph_arg, 0);
+		vector_push(&vec, &color_arg, 0);
+		graph_set_column_colors(column_colors_html,
+					COLUMN_COLORS_HTML_MAX);
 	}
 
 	if (path) {
 		arg = "--";
 		vector_push(&vec, &arg, 0);
 		vector_push(&vec, &path, 0);
 	}
 
 	/* Make sure the vector is NULL-terminated */
 	vector_push(&vec, NULL, 0);
 	vec.count--;
 
 	init_revisions(&rev, NULL);
 	rev.abbrev = DEFAULT_ABBREV;
 	rev.commit_format = CMIT_FMT_DEFAULT;
 	rev.verbose_header = 1;
 	rev.show_root_diff = 0;
 	setup_revisions(vec.count, vec.data, &rev, NULL);
 	load_ref_decorations(DECORATE_FULL_REFS);
 	rev.show_decorations = 1;
 	rev.grep_filter.regflags |= REG_ICASE;
 	compile_grep_patterns(&rev.grep_filter);
 	prepare_revision_walk(&rev);
 
 	if (pager)
 		html("<table class='list nowrap'>");
 
 	html("<tr class='nohover'><th class='left'>Age</th>");
 	if (ctx.repo->enable_commit_graph)
 		html("<th></th>");
 	html("<th class='left'>Commit message");
 	if (pager) {
 		html(" (");
 		cgit_log_link(ctx.qry.showmsg ? "Collapse" : "Expand", NULL,
 			      NULL, ctx.qry.head, ctx.qry.sha1,
 			      ctx.qry.vpath, ctx.qry.ofs, ctx.qry.grep,
 			      ctx.qry.search, ctx.qry.showmsg ? 0 : 1);
 		html(")");
 	}
 	html("</th><th class='left'>Author</th>");
 	if (ctx.repo->enable_log_filecount) {
 		html("<th class='left'>Files</th>");
 		columns++;
 		if (ctx.repo->enable_log_linecount) {
 			html("<th class='left'>Lines</th>");
 			columns++;
 		}
 	}
 	html("</tr>\n");
 
 	if (ofs<0)
 		ofs = 0;
 
 	for (i = 0; i < ofs && (commit = get_revision(&rev)) != NULL; i++) {
 		free(commit->buffer);
 		commit->buffer = NULL;
 		free_commit_list(commit->parents);
 		commit->parents = NULL;
 	}
 
 	for (i = 0; i < cnt && (commit = get_revision(&rev)) != NULL; i++) {
 		print_commit(commit, &rev);
 		free(commit->buffer);
 		commit->buffer = NULL;
 		free_commit_list(commit->parents);
 		commit->parents = NULL;
 	}
 	if (pager) {
 		html("</table><div class='pager'>");
 		if (ofs > 0) {
 			cgit_log_link("[prev]", NULL, NULL, ctx.qry.head,
 				      ctx.qry.sha1, ctx.qry.vpath,
 				      ofs - cnt, ctx.qry.grep,
 				      ctx.qry.search, ctx.qry.showmsg);
 			html("&nbsp;");
 		}
 		if ((commit = get_revision(&rev)) != NULL) {
 			cgit_log_link("[next]", NULL, NULL, ctx.qry.head,
 				      ctx.qry.sha1, ctx.qry.vpath,
 				      ofs + cnt, ctx.qry.grep,
 				      ctx.qry.search, ctx.qry.showmsg);
 		}
 		html("</div>");
 	} else if ((commit = get_revision(&rev)) != NULL) {
 		html("<tr class='nohover'><td colspan='3'>");
 		cgit_log_link("[...]", NULL, NULL, ctx.qry.head, NULL,
 			      ctx.qry.vpath, 0, NULL, NULL, ctx.qry.showmsg);
 		html("</td></tr>\n");
 	}
 }