Mercurial > hg
changeset 35531:6c2264732dc5
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.
| author | Anton Shestakov <av6@dwimlabs.net> |
|---|---|
| date | Fri, 05 Jan 2018 19:16:08 +0800 |
| parents | acd8a2454b47 |
| children | bb5a03dfd7ff |
| files | mercurial/templates/gitweb/graph.tmpl mercurial/templates/gitweb/graphentry.tmpl mercurial/templates/static/style-gitweb.css tests/test-hgweb-commands.t tests/test-hgweb-symrev.t tests/test-hgweb.t |
| diffstat | 6 files changed, 64 insertions(+), 70 deletions(-) [+] |
line wrap: on
line diff
--- a/mercurial/templates/gitweb/graph.tmpl Fri Jan 05 19:08:00 2018 +0800 +++ b/mercurial/templates/gitweb/graph.tmpl Fri Jan 05 19:16:08 2018 +0800 @@ -37,7 +37,6 @@ <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 @@ 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>
--- a/mercurial/templates/gitweb/graphentry.tmpl Fri Jan 05 19:08:00 2018 +0800 +++ b/mercurial/templates/gitweb/graphentry.tmpl Fri Jan 05 19:16:08 2018 +0800 @@ -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>
--- a/mercurial/templates/static/style-gitweb.css Fri Jan 05 19:08:00 2018 +0800 +++ b/mercurial/templates/static/style-gitweb.css Fri Jan 05 19:16:08 2018 +0800 @@ -302,23 +302,22 @@ 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 {
--- a/tests/test-hgweb-commands.t Fri Jan 05 19:08:00 2018 +0800 +++ b/tests/test-hgweb-commands.t Fri Jan 05 19:16:08 2018 +0800 @@ -1781,35 +1781,42 @@ <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 @@ 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>
--- a/tests/test-hgweb-symrev.t Fri Jan 05 19:08:00 2018 +0800 +++ b/tests/test-hgweb-symrev.t Fri Jan 05 19:16:08 2018 +0800 @@ -493,9 +493,9 @@ <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 @@ <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>
--- a/tests/test-hgweb.t Fri Jan 05 19:08:00 2018 +0800 +++ b/tests/test-hgweb.t Fri Jan 05 19:16:08 2018 +0800 @@ -340,7 +340,7 @@ $ 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 @@ 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 {