[PATCH 2 of 5] monoblue: make actual changeset entries have backgrounds on /graph

Anton Shestakov av6 at dwimlabs.net
Fri Jan 5 07:32:28 EST 2018


# HG changeset patch
# User Anton Shestakov <av6 at dwimlabs.net>
# Date 1515150480 -28800
#      Fri Jan 05 19:08:00 2018 +0800
# Node ID 7299df0314db86fc8efd621f8157c6c813a37aca
# Parent  3043da1ccea9eb76f562c6f2247d0ca7682887d9
monoblue: 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.

'parity' is added to each entry because there's no stripes2 class in monoblue,
only in paper.

diff --git a/mercurial/hgweb/webcommands.py b/mercurial/hgweb/webcommands.py
--- a/mercurial/hgweb/webcommands.py
+++ b/mercurial/hgweb/webcommands.py
@@ -1265,6 +1265,7 @@ def graph(web, req, tmpl):
                 for (id, type, ctx, vtx, edges) in fulltree()]
 
     def nodes():
+        parity = paritygen(web.stripecount)
         for row, (id, type, ctx, vtx, edges) in enumerate(tree):
             entry = webutil.commonentry(web.repo, ctx)
             edgedata = [{'col': edge[0],
@@ -1276,6 +1277,7 @@ def graph(web, req, tmpl):
 
             entry.update({'col': vtx[0],
                           'color': (vtx[1] - 1) % 6 + 1,
+                          'parity': next(parity),
                           'edges': edgedata,
                           'row': row,
                           'nextrow': row + 1})
diff --git a/mercurial/templates/monoblue/graph.tmpl b/mercurial/templates/monoblue/graph.tmpl
--- a/mercurial/templates/monoblue/graph.tmpl
+++ b/mercurial/templates/monoblue/graph.tmpl
@@ -29,7 +29,6 @@
 
     <div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
     <div id="wrapper">
-        <ul id="nodebgs"></ul>
         <canvas id="graph"></canvas>
         <ul id="graphnodes">{nodes%graphentry}</ul>
     </div>
@@ -40,12 +39,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>
 
diff --git a/mercurial/templates/monoblue/graphentry.tmpl b/mercurial/templates/monoblue/graphentry.tmpl
--- a/mercurial/templates/monoblue/graphentry.tmpl
+++ b/mercurial/templates/monoblue/graphentry.tmpl
@@ -1,7 +1,9 @@
-<li data-node="{node|short}">
-    <span class="desc">
-        <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{desc|strip|firstline|escape|nonempty}</a>
-    </span>
-    {alltags}
-    <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>
+        {alltags}
+        <div class="info"><span class="age">{date|rfc822date}</span>, by {author|person}</div>
+    </div>
 </li>
diff --git a/mercurial/templates/static/style-monoblue.css b/mercurial/templates/static/style-monoblue.css
--- a/mercurial/templates/static/style-monoblue.css
+++ b/mercurial/templates/static/style-monoblue.css
@@ -478,27 +478,29 @@ canvas {
 	top: -0.7em;
 }
 
-ul#nodebgs li.parity0 {
+ul#graphnodes li.parity0 {
     background: #F1F6F7;
 }
 
-ul#nodebgs li.parity1 {
+ul#graphnodes li.parity1 {
     background: #FFFFFF;
 }
 
 ul#graphnodes {
-	position: absolute;
-	z-index: 10;
-	top: 7px;
 	list-style: none inside none;
+	margin: 0;
+	padding: 0;
 }
 
-ul#nodebgs {
-	list-style: none inside none;
+ul#graphnodes li {
+	height: 37px;
+	overflow: visible;
+	padding-top: 2px;
 }
 
-ul#graphnodes li, ul#nodebgs li {
-	height: 39px;
+ul#graphnodes li .fg {
+	position: absolute;
+	z-index: 10;
 }
 
 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
@@ -731,9 +731,9 @@ Set up the repo
 
   $ "$TESTDIR/get-with-headers.py" $LOCALIP:$HGPORT 'graph?style=monoblue' | egrep $REVLINKS
               <li><a href="/file/tip?style=monoblue">files</a></li>
-          <a href="/rev/9d8c40cba617?style=monoblue">third</a>
-          <a href="/rev/a7c1559b7bba?style=monoblue">second</a>
-          <a href="/rev/43c799df6e75?style=monoblue">first</a>
+              <a href="/rev/9d8c40cba617?style=monoblue">third</a>
+              <a href="/rev/a7c1559b7bba?style=monoblue">second</a>
+              <a href="/rev/43c799df6e75?style=monoblue">first</a>
           <a href="/graph/tip?revcount=30&style=monoblue">less</a>
           <a href="/graph/tip?revcount=120&style=monoblue">more</a>
           | <a href="/graph/43c799df6e75?style=monoblue">(0)</a> <a href="/graph/tip?style=monoblue">tip</a> 
@@ -813,8 +813,8 @@ Set up the repo
 
   $ "$TESTDIR/get-with-headers.py" $LOCALIP:$HGPORT 'graph/xyzzy?style=monoblue' | egrep $REVLINKS
               <li><a href="/file/xyzzy?style=monoblue">files</a></li>
-          <a href="/rev/a7c1559b7bba?style=monoblue">second</a>
-          <a href="/rev/43c799df6e75?style=monoblue">first</a>
+              <a href="/rev/a7c1559b7bba?style=monoblue">second</a>
+              <a href="/rev/43c799df6e75?style=monoblue">first</a>
           <a href="/graph/xyzzy?revcount=30&style=monoblue">less</a>
           <a href="/graph/xyzzy?revcount=120&style=monoblue">more</a>
           | <a href="/graph/43c799df6e75?style=monoblue">(0)</a> <a href="/graph/tip?style=monoblue">tip</a> 


More information about the Mercurial-devel mailing list