Patchwork [3,of,5] gitweb: make actual changeset entries have backgrounds on /graph

login
register
mail settings
Submitter Anton Shestakov
Date Jan. 5, 2018, 12:32 p.m.
Message ID <ae8bdf17326e47e59c7d.1515155549@neuro>
Download mbox | patch
Permalink /patch/26564/
State Accepted
Headers show

Comments

Anton Shestakov - Jan. 5, 2018, 12:32 p.m.
# HG changeset patch
# User Anton Shestakov <av6@dwimlabs.net>
# Date 1515150968 -28800
#      Fri Jan 05 19:16:08 2018 +0800
# Node ID ae8bdf17326e47e59c7dba86c1ade962f7136ac6
# Parent  7299df0314db86fc8efd621f8157c6c813a37aca
gitweb: 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.

Patch

diff --git a/mercurial/templates/gitweb/graph.tmpl b/mercurial/templates/gitweb/graph.tmpl
--- a/mercurial/templates/gitweb/graph.tmpl
+++ b/mercurial/templates/gitweb/graph.tmpl
@@ -37,7 +37,6 @@  graph |
 <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>
@@ -46,12 +45,6 @@  graph |
 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/gitweb/graphentry.tmpl b/mercurial/templates/gitweb/graphentry.tmpl
--- a/mercurial/templates/gitweb/graphentry.tmpl
+++ b/mercurial/templates/gitweb/graphentry.tmpl
@@ -1,7 +1,9 @@ 
-<li data-node="{node|short}">
- <span class="desc">
-  <a class="list" href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}"><b>{desc|strip|firstline|escape|nonempty}</b></a>
- </span>
- {alltags}
- <div class="info">{date|age}, by {author|person}</div>
+<li class="parity{parity}" data-node="{node|short}">
+ <div class="fg">
+  <span class="desc">
+   <a class="list" href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}"><b>{desc|strip|firstline|escape|nonempty}</b></a>
+  </span>
+  {alltags}
+  <div class="info">{date|age}, by {author|person}</div>
+ </div>
 </li>
diff --git a/mercurial/templates/static/style-gitweb.css b/mercurial/templates/static/style-gitweb.css
--- a/mercurial/templates/static/style-gitweb.css
+++ b/mercurial/templates/static/style-gitweb.css
@@ -302,23 +302,22 @@  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 {
+	position: relative;
+	height: 37px;
+	overflow: visible;
+	padding-top: 2px;
+}
+
+ul#graphnodes li .fg {
 	position: absolute;
 	z-index: 10;
-	top: -0.8em;
-	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
@@ -1781,35 +1781,42 @@  Overviews
   <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"><li data-node="cad8025a2e87">
-   <span class="desc">
-    <a class="list" href="/rev/cad8025a2e87?style=gitweb"><b>branch commit with null character: </b></a>
-   </span>
-   <span class="logtags"><span class="phasetag" title="draft">draft</span> <span class="branchtag" title="unstable">unstable</span> <span class="tagtag" title="tip">tip</span> <span class="bookmarktag" title="something">something</span> </span>
-   <div class="info">1970-01-01, by test</div>
+  <ul id="graphnodes"><li class="parity0" data-node="cad8025a2e87">
+   <div class="fg">
+    <span class="desc">
+     <a class="list" href="/rev/cad8025a2e87?style=gitweb"><b>branch commit with null character: </b></a>
+    </span>
+    <span class="logtags"><span class="phasetag" title="draft">draft</span> <span class="branchtag" title="unstable">unstable</span> <span class="tagtag" title="tip">tip</span> <span class="bookmarktag" title="something">something</span> </span>
+    <div class="info">1970-01-01, by test</div>
+   </div>
   </li>
-  <li data-node="1d22e65f027e">
-   <span class="desc">
-    <a class="list" href="/rev/1d22e65f027e?style=gitweb"><b>branch</b></a>
-   </span>
-   <span class="logtags"><span class="phasetag" title="draft">draft</span> <span class="branchtag" title="stable">stable</span> </span>
-   <div class="info">1970-01-01, by test</div>
+  <li class="parity1" data-node="1d22e65f027e">
+   <div class="fg">
+    <span class="desc">
+     <a class="list" href="/rev/1d22e65f027e?style=gitweb"><b>branch</b></a>
+    </span>
+    <span class="logtags"><span class="phasetag" title="draft">draft</span> <span class="branchtag" title="stable">stable</span> </span>
+    <div class="info">1970-01-01, by test</div>
+   </div>
   </li>
-  <li data-node="a4f92ed23982">
-   <span class="desc">
-    <a class="list" href="/rev/a4f92ed23982?style=gitweb"><b>Added tag 1.0 for changeset 2ef0ac749a14</b></a>
-   </span>
-   <span class="logtags"><span class="phasetag" title="draft">draft</span> <span class="branchtag" title="default">default</span> </span>
-   <div class="info">1970-01-01, by test</div>
+  <li class="parity0" data-node="a4f92ed23982">
+   <div class="fg">
+    <span class="desc">
+     <a class="list" href="/rev/a4f92ed23982?style=gitweb"><b>Added tag 1.0 for changeset 2ef0ac749a14</b></a>
+    </span>
+    <span class="logtags"><span class="phasetag" title="draft">draft</span> <span class="branchtag" title="default">default</span> </span>
+    <div class="info">1970-01-01, by test</div>
+   </div>
   </li>
-  <li data-node="2ef0ac749a14">
-   <span class="desc">
-    <a class="list" href="/rev/2ef0ac749a14?style=gitweb"><b>base</b></a>
-   </span>
-   <span class="logtags"><span class="phasetag" title="draft">draft</span> <span class="tagtag" title="1.0">1.0</span> <span class="bookmarktag" title="anotherthing">anotherthing</span> </span>
-   <div class="info">1970-01-01, by test</div>
+  <li class="parity1" data-node="2ef0ac749a14">
+   <div class="fg">
+    <span class="desc">
+     <a class="list" href="/rev/2ef0ac749a14?style=gitweb"><b>base</b></a>
+    </span>
+    <span class="logtags"><span class="phasetag" title="draft">draft</span> <span class="tagtag" title="1.0">1.0</span> <span class="bookmarktag" title="anotherthing">anotherthing</span> </span>
+    <div class="info">1970-01-01, by test</div>
+   </div>
   </li>
   </ul>
   </div>
@@ -1818,12 +1825,6 @@  Overviews
   var data = [{"edges": [[0, 0, 1, 3, "FF0000"]], "node": "cad8025a2e87", "vertex": [0, 1]}, {"edges": [[0, 0, 1, 3, ""]], "node": "1d22e65f027e", "vertex": [0, 1]}, {"edges": [[0, 0, 1, 3, ""]], "node": "a4f92ed23982", "vertex": [0, 1]}, {"edges": [], "node": "2ef0ac749a14", "vertex": [0, 1]}];
   var graph = new Graph();
   graph.scale(39);
-  
-  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/tests/test-hgweb-symrev.t b/tests/test-hgweb-symrev.t
--- a/tests/test-hgweb-symrev.t
+++ b/tests/test-hgweb-symrev.t
@@ -493,9 +493,9 @@  Set up the repo
   <a href="/graph/tip?revcount=30&style=gitweb">less</a>
   <a href="/graph/tip?revcount=120&style=gitweb">more</a>
   | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> 
-    <a class="list" href="/rev/9d8c40cba617?style=gitweb"><b>third</b></a>
-    <a class="list" href="/rev/a7c1559b7bba?style=gitweb"><b>second</b></a>
-    <a class="list" href="/rev/43c799df6e75?style=gitweb"><b>first</b></a>
+     <a class="list" href="/rev/9d8c40cba617?style=gitweb"><b>third</b></a>
+     <a class="list" href="/rev/a7c1559b7bba?style=gitweb"><b>second</b></a>
+     <a class="list" href="/rev/43c799df6e75?style=gitweb"><b>first</b></a>
   <a href="/graph/tip?revcount=30&style=gitweb">less</a>
   <a href="/graph/tip?revcount=120&style=gitweb">more</a>
   | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> 
@@ -586,8 +586,8 @@  Set up the repo
   <a href="/graph/xyzzy?revcount=30&style=gitweb">less</a>
   <a href="/graph/xyzzy?revcount=120&style=gitweb">more</a>
   | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> 
-    <a class="list" href="/rev/a7c1559b7bba?style=gitweb"><b>second</b></a>
-    <a class="list" href="/rev/43c799df6e75?style=gitweb"><b>first</b></a>
+     <a class="list" href="/rev/a7c1559b7bba?style=gitweb"><b>second</b></a>
+     <a class="list" href="/rev/43c799df6e75?style=gitweb"><b>first</b></a>
   <a href="/graph/xyzzy?revcount=30&style=gitweb">less</a>
   <a href="/graph/xyzzy?revcount=120&style=gitweb">more</a>
   | <a href="/graph/43c799df6e75?style=gitweb">(0)</a> <a href="/graph/tip?style=gitweb">tip</a> 
diff --git a/tests/test-hgweb.t b/tests/test-hgweb.t
--- a/tests/test-hgweb.t
+++ b/tests/test-hgweb.t
@@ -340,7 +340,7 @@  static file
 
   $ get-with-headers.py --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server
   200 Script output follows
-  content-length: 9135
+  content-length: 9118
   content-type: text/css
   
   body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; background: white; color: black; }
@@ -647,23 +647,22 @@  static file
   	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 {
+  	position: relative;
+  	height: 37px;
+  	overflow: visible;
+  	padding-top: 2px;
+  }
+  
+  ul#graphnodes li .fg {
   	position: absolute;
   	z-index: 10;
-  	top: -0.8em;
-  	list-style: none inside none;
-  	padding: 0;
   }
   
   ul#graphnodes li .info {