[PATCH 4 of 5] spartan: make actual changeset entries have backgrounds on /graph

[Anton Shestakov]

# HG changeset patch
# User Anton Shestakov <av6 at dwimlabs.net>
# Date 1515151325 -28800
#      Fri Jan 05 19:22:05 2018 +0800
# Node ID ec07c21e5900ae499b45288dce7a4e9c9697e231
# Parent  ae8bdf17326e47e59c7dba86c1ade962f7136ac6
spartan: make actual changeset entries have backgrounds on /graph

This patch removes a separate container for backgrounds only and puts
backgrounds on changeset elements themselves. This makes it so that JS code
doesn't need to create background elements separately anymore.

There's a bit of manipulating positions of elements: every changeset entry has
a "fg" element that gets a higher z-index than <canvas> element. This
prioritizes text information, so that even if it somehow gets close to the
graph drawn on <canvas> (which has z-index of 5), it'll still be on top of it.
This can happen if commit message has a long first line and browser window is
narrow, for example.

diff --git a/mercurial/templates/spartan/graph.tmpl b/mercurial/templates/spartan/graph.tmpl
--- a/mercurial/templates/spartan/graph.tmpl
+++ b/mercurial/templates/spartan/graph.tmpl
@@ -31,7 +31,6 @@ navigate: <small class="navigate">{chang
 <noscript>The revision graph only works with JavaScript-enabled browsers.</noscript>
 
 <div id="wrapper">
-<ul id="nodebgs"></ul>
 <canvas id="graph"></canvas>
 <ul id="graphnodes">{nodes%graphentry}</ul>
 </div>
@@ -40,12 +39,6 @@ navigate: <small class="navigate">{chang
 var data = {jsdata|json};
 var graph = new Graph();
 graph.scale({bg_height});
-
-graph.vertex = function(x, y, radius, color, parity, cur) \{
-	Graph.prototype.vertex.apply(this, arguments);
-	return ['<li class="bg parity' + parity + '"></li>', ''];
-}
-
 graph.render(data);
 </script>
 
diff --git a/mercurial/templates/spartan/graphentry.tmpl b/mercurial/templates/spartan/graphentry.tmpl
--- a/mercurial/templates/spartan/graphentry.tmpl
+++ b/mercurial/templates/spartan/graphentry.tmpl
@@ -1,6 +1,8 @@
-<li data-node="{node|short}">
- <span class="desc">
-  <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{desc|strip|firstline|escape|nonempty}</a>
- </span>
- <div class="info"><span class="age">{date|rfc822date}</span>, by {author|person}</div>
+<li class="parity{parity}" data-node="{node|short}">
+ <div class="fg">
+  <span class="desc">
+   <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{desc|strip|firstline|escape|nonempty}</a>
+  </span>
+  <div class="info"><span class="age">{date|rfc822date}</span>, by {author|person}</div>
+ </div>
 </li>
diff --git a/mercurial/templates/static/style.css b/mercurial/templates/static/style.css
--- a/mercurial/templates/static/style.css
+++ b/mercurial/templates/static/style.css
@@ -95,23 +95,21 @@ canvas {
 	margin: 0;
 }
 
-ul#nodebgs {
+ul#graphnodes {
 	list-style: none inside none;
 	padding: 0;
 	margin: 0;
-	top: -0.7em;
-}
-
-ul#graphnodes li, ul#nodebgs li {
-	height: 39px;
 }
 
-ul#graphnodes {
+ul#graphnodes li {
+	height: 37px;
+	overflow: visible;
+	padding-top: 2px;
+}
+
+ul#graphnodes li .fg {
 	position: absolute;
 	z-index: 10;
-	top: -0.85em;
-	list-style: none inside none;
-	padding: 0;
 }
 
 ul#graphnodes li .info {
diff --git a/tests/test-hgweb-commands.t b/tests/test-hgweb-commands.t
--- a/tests/test-hgweb-commands.t
+++ b/tests/test-hgweb-commands.t
@@ -2060,23 +2060,21 @@ Static files
   	margin: 0;
   }
   
-  ul#nodebgs {
+  ul#graphnodes {
   	list-style: none inside none;
   	padding: 0;
   	margin: 0;
-  	top: -0.7em;
-  }
-  
-  ul#graphnodes li, ul#nodebgs li {
-  	height: 39px;
   }
   
-  ul#graphnodes {
+  ul#graphnodes li {
+  	height: 37px;
+  	overflow: visible;
+  	padding-top: 2px;
+  }
+  
+  ul#graphnodes li .fg {
   	position: absolute;
   	z-index: 10;
-  	top: -0.85em;
-  	list-style: none inside none;
-  	padding: 0;
   }
   
   ul#graphnodes li .info {
diff --git a/tests/test-hgweb-symrev.t b/tests/test-hgweb-symrev.t
--- a/tests/test-hgweb-symrev.t
+++ b/tests/test-hgweb-symrev.t
@@ -946,9 +946,9 @@ Set up the repo
   <a href="/shortlog/tip?style=spartan">shortlog</a>
   <a href="/file/tip/?style=spartan">files</a>
   navigate: <small class="navigate"><a href="/graph/43c799df6e75?style=spartan">(0)</a> <a href="/graph/tip?style=spartan">tip</a> </small>
-    <a href="/rev/9d8c40cba617?style=spartan">third</a>
-    <a href="/rev/a7c1559b7bba?style=spartan">second</a>
-    <a href="/rev/43c799df6e75?style=spartan">first</a>
+     <a href="/rev/9d8c40cba617?style=spartan">third</a>
+     <a href="/rev/a7c1559b7bba?style=spartan">second</a>
+     <a href="/rev/43c799df6e75?style=spartan">first</a>
   navigate: <small class="navigate"><a href="/graph/43c799df6e75?style=spartan">(0)</a> <a href="/graph/tip?style=spartan">tip</a> </small>
 
   $ "$TESTDIR/get-with-headers.py" $LOCALIP:$HGPORT 'tags?style=spartan' | egrep $REVLINKS
@@ -1026,8 +1026,8 @@ Set up the repo
   <a href="/shortlog/xyzzy?style=spartan">shortlog</a>
   <a href="/file/xyzzy/?style=spartan">files</a>
   navigate: <small class="navigate"><a href="/graph/43c799df6e75?style=spartan">(0)</a> <a href="/graph/tip?style=spartan">tip</a> </small>
-    <a href="/rev/a7c1559b7bba?style=spartan">second</a>
-    <a href="/rev/43c799df6e75?style=spartan">first</a>
+     <a href="/rev/a7c1559b7bba?style=spartan">second</a>
+     <a href="/rev/43c799df6e75?style=spartan">first</a>
   navigate: <small class="navigate"><a href="/graph/43c799df6e75?style=spartan">(0)</a> <a href="/graph/tip?style=spartan">tip</a> </small>
 
   $ "$TESTDIR/get-with-headers.py" $LOCALIP:$HGPORT 'file/xyzzy?style=spartan' | egrep $REVLINKS