diff --git a/mercurial/templates/gitweb/graph.tmpl b/mercurial/templates/gitweb/graph.tmpl
index 9c99541e3d56d275bd89e9d2c80645a9385d5f60_bWVyY3VyaWFsL3RlbXBsYXRlcy9naXR3ZWIvZ3JhcGgudG1wbA==..ad0de63e1d6a1e389bd1517ea968a0822a66a077_bWVyY3VyaWFsL3RlbXBsYXRlcy9naXR3ZWIvZ3JhcGgudG1wbA== 100644
--- a/mercurial/templates/gitweb/graph.tmpl
+++ b/mercurial/templates/gitweb/graph.tmpl
@@ -50,22 +50,8 @@
 graph.scale({bg_height});
 
 graph.vertex = function(x, y, radius, color, parity, cur) \{
-	
-	this.ctx.beginPath();
-	color = this.setColor(color, 0.25, 0.75);
-	this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
-	this.ctx.fill();
-	
-	var bg = '<li class="bg parity' + parity + '"></li>';
-	var left = (this.bg_height - this.box_size) + (this.columns + 1) * this.box_size;
-	
-	var item = document.querySelector('[data-node="' + cur.node + '"]');
-	if (item) \{
-		item.style.paddingLeft = left + 'px';
-	}
-	
-	return [bg, ''];
-	
+	Graph.prototype.vertex.apply(this, arguments);
+	return ['<li class="bg parity' + parity + '"></li>', ''];
 }
 
 graph.render(data);
diff --git a/mercurial/templates/monoblue/graph.tmpl b/mercurial/templates/monoblue/graph.tmpl
index 9c99541e3d56d275bd89e9d2c80645a9385d5f60_bWVyY3VyaWFsL3RlbXBsYXRlcy9tb25vYmx1ZS9ncmFwaC50bXBs..ad0de63e1d6a1e389bd1517ea968a0822a66a077_bWVyY3VyaWFsL3RlbXBsYXRlcy9tb25vYmx1ZS9ncmFwaC50bXBs 100644
--- a/mercurial/templates/monoblue/graph.tmpl
+++ b/mercurial/templates/monoblue/graph.tmpl
@@ -44,22 +44,8 @@
     graph.scale({bg_height});
 
     graph.vertex = function(x, y, radius, color, parity, cur) \{
-
-        this.ctx.beginPath();
-        color = this.setColor(color, 0.25, 0.75);
-        this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
-        this.ctx.fill();
-
-        var bg = '<li class="bg parity' + parity + '"></li>';
-        var left = (this.bg_height - this.box_size) + (this.columns + 1) * this.box_size;
-
-        var item = document.querySelector('[data-node="' + cur.node + '"]');
-        if (item) \{
-            item.style.paddingLeft = left + 'px';
-        }
-
-        return [bg, ''];
-
+        Graph.prototype.vertex.apply(this, arguments);
+        return ['<li class="bg parity' + parity + '"></li>', ''];
     }
 
     graph.render(data);
diff --git a/mercurial/templates/paper/graph.tmpl b/mercurial/templates/paper/graph.tmpl
index 9c99541e3d56d275bd89e9d2c80645a9385d5f60_bWVyY3VyaWFsL3RlbXBsYXRlcy9wYXBlci9ncmFwaC50bXBs..ad0de63e1d6a1e389bd1517ea968a0822a66a077_bWVyY3VyaWFsL3RlbXBsYXRlcy9wYXBlci9ncmFwaC50bXBs 100644
--- a/mercurial/templates/paper/graph.tmpl
+++ b/mercurial/templates/paper/graph.tmpl
@@ -63,22 +63,8 @@
 graph.scale({bg_height});
 
 graph.vertex = function(x, y, radius, color, parity, cur) \{
-	
-	this.ctx.beginPath();
-	color = this.setColor(color, 0.25, 0.75);
-	this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
-	this.ctx.fill();
-	
-	var bg = '<li class="bg"></li>';
-	var left = (this.bg_height - this.box_size) + (this.columns + 1) * this.box_size;
-
-	var item = document.querySelector('[data-node="' + cur.node + '"]');
-	if (item) \{
-		item.style.paddingLeft = left + 'px';
-	}
-	
-	return [bg, ''];
-	
+	Graph.prototype.vertex.apply(this, arguments);
+	return ['<li class="bg"></li>', ''];
 }
 
 graph.render(data);
diff --git a/mercurial/templates/spartan/graph.tmpl b/mercurial/templates/spartan/graph.tmpl
index 9c99541e3d56d275bd89e9d2c80645a9385d5f60_bWVyY3VyaWFsL3RlbXBsYXRlcy9zcGFydGFuL2dyYXBoLnRtcGw=..ad0de63e1d6a1e389bd1517ea968a0822a66a077_bWVyY3VyaWFsL3RlbXBsYXRlcy9zcGFydGFuL2dyYXBoLnRtcGw= 100644
--- a/mercurial/templates/spartan/graph.tmpl
+++ b/mercurial/templates/spartan/graph.tmpl
@@ -44,21 +44,8 @@
 graph.scale({bg_height});
 
 graph.vertex = function(x, y, radius, color, parity, cur) \{
-	
-	this.ctx.beginPath();
-	color = this.setColor(color, 0.25, 0.75);
-	this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
-	this.ctx.fill();
-	
-	var bg = '<li class="bg parity' + parity + '"></li>';
-	var left = (this.bg_height - this.box_size) + (this.columns + 1) * this.box_size;
-	var item = document.querySelector('[data-node="' + cur.node + '"]');
-	if (item) \{
-		item.style.paddingLeft = left + 'px';
-	}
-
-	return [bg, ''];
-	
+	Graph.prototype.vertex.apply(this, arguments);
+	return ['<li class="bg parity' + parity + '"></li>', ''];
 }
 
 graph.render(data);
diff --git a/mercurial/templates/static/mercurial.js b/mercurial/templates/static/mercurial.js
index 9c99541e3d56d275bd89e9d2c80645a9385d5f60_bWVyY3VyaWFsL3RlbXBsYXRlcy9zdGF0aWMvbWVyY3VyaWFsLmpz..ad0de63e1d6a1e389bd1517ea968a0822a66a077_bWVyY3VyaWFsL3RlbXBsYXRlcy9zdGF0aWMvbWVyY3VyaWFsLmpz 100644
--- a/mercurial/templates/static/mercurial.js
+++ b/mercurial/templates/static/mercurial.js
@@ -92,6 +92,21 @@
 
 	},
 
+	vertex: function(x, y, radius, color, parity, cur) {
+		this.ctx.beginPath();
+		this.setColor(color, 0.25, 0.75);
+		this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
+		this.ctx.fill();
+
+		var left = (this.bg_height - this.box_size) + (this.columns + 1) * this.box_size;
+		var item = document.querySelector('[data-node="' + cur.node + '"]');
+		if (item) {
+			item.style.paddingLeft = left + 'px';
+		}
+
+		return ['', ''];
+	},
+
 	render: function(data) {
 
 		var backgrounds = '';
diff --git a/tests/test-hgweb-commands.t b/tests/test-hgweb-commands.t
index 9c99541e3d56d275bd89e9d2c80645a9385d5f60_dGVzdHMvdGVzdC1oZ3dlYi1jb21tYW5kcy50..ad0de63e1d6a1e389bd1517ea968a0822a66a077_dGVzdHMvdGVzdC1oZ3dlYi1jb21tYW5kcy50 100644
--- a/tests/test-hgweb-commands.t
+++ b/tests/test-hgweb-commands.t
@@ -1821,22 +1821,8 @@
   graph.scale(39);
   
   graph.vertex = function(x, y, radius, color, parity, cur) {
-  	
-  	this.ctx.beginPath();
-  	color = this.setColor(color, 0.25, 0.75);
-  	this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
-  	this.ctx.fill();
-  	
-  	var bg = '<li class="bg parity' + parity + '"></li>';
-  	var left = (this.bg_height - this.box_size) + (this.columns + 1) * this.box_size;
-  	
-  	var item = document.querySelector('[data-node="' + cur.node + '"]');
-  	if (item) {
-  		item.style.paddingLeft = left + 'px';
-  	}
-  	
-  	return [bg, ''];
-  	
+  	Graph.prototype.vertex.apply(this, arguments);
+  	return ['<li class="bg parity' + parity + '"></li>', ''];
   }
   
   graph.render(data);
diff --git a/tests/test-hgweb-empty.t b/tests/test-hgweb-empty.t
index 9c99541e3d56d275bd89e9d2c80645a9385d5f60_dGVzdHMvdGVzdC1oZ3dlYi1lbXB0eS50..ad0de63e1d6a1e389bd1517ea968a0822a66a077_dGVzdHMvdGVzdC1oZ3dlYi1lbXB0eS50 100644
--- a/tests/test-hgweb-empty.t
+++ b/tests/test-hgweb-empty.t
@@ -307,22 +307,8 @@
   graph.scale(39);
   
   graph.vertex = function(x, y, radius, color, parity, cur) {
-  	
-  	this.ctx.beginPath();
-  	color = this.setColor(color, 0.25, 0.75);
-  	this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
-  	this.ctx.fill();
-  	
-  	var bg = '<li class="bg"></li>';
-  	var left = (this.bg_height - this.box_size) + (this.columns + 1) * this.box_size;
-  
-  	var item = document.querySelector('[data-node="' + cur.node + '"]');
-  	if (item) {
-  		item.style.paddingLeft = left + 'px';
-  	}
-  	
-  	return [bg, ''];
-  	
+  	Graph.prototype.vertex.apply(this, arguments);
+  	return ['<li class="bg"></li>', ''];
   }
   
   graph.render(data);