hgweb: only include graph-related data in jsdata variable on /graph pages (BC)
Historically, client-side graph code was not only rendering the graph itself,
but it was also adding all of the changeset information to the page as well.
It meant that JavaScript code needed to construct valid HTML as a string
(although proper escaping was done server-side). It wasn't too clunky, even
though it meant that a lot of server-side things were duplicated client-side
for no good reason, but the worst thing about it was the data format it used.
It was somewhat future-proof, but not human-friendly, because it was just a
tuple: it was possible to append things to it (as was done in e.g.
270f57d35525), but you'd then have to remember the indices and reading the
resulting JS code wasn't easy, because cur[8] is not descriptive at all.
So what would need to happen for graph to have more features, such as more
changeset information or a different vertex style (branch-closing, obsolete)?
First you'd need to take some property, process it (e.g. escape and pass
through templatefilters function, and mind the encoding too), append it to
jsdata and remember its index, then go add nearly identical JavaScript code to
4 different hgweb themes that use jsdata to render HTML, and finally try and
forget how brittle it all felt. Oh yeah, and the indices go to double digits if
we add 2 more items, say phase and obsolescence, and there are more to come.
Rendering vertex in a different style would need another property (say,
character "o", "_", or "x"), except if you want to be backwards-compatible, it
would need to go after tags and bookmarks, and that just doesn't feel right.
So here I'm trying to fix both the duplication of code and the data format:
- changesets will be rendered by hgweb templates the same way as changelog and
other such pages, so jsdata won't need any information that's not needed for
rendering the graph itself
- jsdata will be a dict, or an Object in JS, which is a lot nicer to humans and
is a lot more future-proof in the long run, because it doesn't use numeric
indices
What about hgweb themes? Obviously, this will break all hgweb themes that
render graph in JavaScript, including 3rd-party custom ones. But this will also
reduce the size of client-side code and make it more uniform, so that it can be
shared across hgweb themes, further reducing its size. The next few patches
demonstrate that it's not hard to adapt a theme to these changes. And in a
later series, I'm planning to move duplicate JS code from */graph.tmpl to
mercurial.js and leave only 4 lines of code embedded in those <script>
elements, and even that would be just to allow redefining graph.vertex
function. So adapting a custom 3rd-party theme to these changes would mean:
- creating or copying graphnode.tmpl and adding it to the map file (if a theme
doesn't already use __base__)
- modifying one line in graph.tmpl and simply removing the bigger part of
JavaScript code from there
Making these changes in this patch and not updating every hgweb theme that uses
jsdata at the same time is a bit of a cheat to make this series more
manageable: /graph pages that use jsdata are broken by this patch, but since
there are no tests that would detect this, bisect works fine; and themes are
updated separately, in the next 4 patches of this series to ease reviewing.
--- a/mercurial/hgweb/webcommands.py Fri Dec 01 14:17:20 2017 +0800
+++ b/mercurial/hgweb/webcommands.py Fri Dec 01 16:00:40 2017 +0800
@@ -36,9 +36,7 @@
revsetlang,
scmutil,
smartset,
- templatefilters,
templater,
- url,
util,
)
@@ -1242,8 +1240,6 @@
return cols
def graphdata(usetuples):
- # {jsdata} will be passed to |json, so it must be in utf-8
- encodestr = encoding.fromlocal
data = []
row = 0
@@ -1253,22 +1249,7 @@
if usetuples:
node = pycompat.bytestr(ctx)
- age = encodestr(templatefilters.age(ctx.date()))
- desc = templatefilters.firstline(encodestr(ctx.description()))
- desc = url.escape(templatefilters.nonempty(desc))
- user = templatefilters.person(encodestr(ctx.user()))
- user = url.escape(user)
- branch = url.escape(encodestr(ctx.branch()))
- try:
- branchnode = web.repo.branchtip(ctx.branch())
- except error.RepoLookupError:
- branchnode = None
- branch = branch, branchnode == ctx.node()
-
- data.append((node, vtx, edges, desc, user, age, branch,
- [url.escape(encodestr(x)) for x in ctx.tags()],
- [url.escape(encodestr(x))
- for x in ctx.bookmarks()]))
+ data.append({'node': node, 'vertex': vtx, 'edges': edges})
else:
entry = webutil.commonentry(web.repo, ctx)
edgedata = [{'col': edge[0], 'nextcol': edge[1],
--- a/mercurial/templates/static/mercurial.js Fri Dec 01 14:17:20 2017 +0800
+++ b/mercurial/templates/static/mercurial.js Fri Dec 01 16:00:40 2017 +0800
@@ -103,14 +103,12 @@
this.bg[1] += this.bg_height;
var cur = data[i];
- var node = cur[1];
- var edges = cur[2];
var fold = false;
var prevWidth = this.ctx.lineWidth;
- for (var j = 0; j < edges.length; j++) {
+ for (var j = 0; j < cur.edges.length; j++) {
- line = edges[j];
+ line = cur.edges[j];
start = line[0];
end = line[1];
color = line[2];
@@ -141,8 +139,8 @@
// Draw the revision node in the right column
- column = node[0];
- color = node[1];
+ column = cur.vertex[0];
+ color = cur.vertex[1];
radius = this.box_size / 8;
x = this.cell[0] + this.box_size * column + this.box_size / 2;
--- a/tests/test-hgweb-commands.t Fri Dec 01 14:17:20 2017 +0800
+++ b/tests/test-hgweb-commands.t Fri Dec 01 16:00:40 2017 +0800
@@ -1788,7 +1788,7 @@
<script>
<!-- hide script content
- var data = [["cad8025a2e87", [0, 1], [[0, 0, 1, 3, "FF0000"]], "branch commit with null character: \u0000", "test", "1970-01-01", ["unstable", true], ["tip"], ["something"]], ["1d22e65f027e", [0, 1], [[0, 0, 1, 3, ""]], "branch", "test", "1970-01-01", ["stable", true], [], []], ["a4f92ed23982", [0, 1], [[0, 0, 1, 3, ""]], "Added tag 1.0 for changeset 2ef0ac749a14", "test", "1970-01-01", ["default", true], [], []], ["2ef0ac749a14", [0, 1], [], "base", "test", "1970-01-01", ["default", false], ["1.0"], ["anotherthing"]]];
+ 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);