This is an archive of the discontinued Mercurial Phabricator instance.

Differential D850

hgweb: add HTML elements to control whitespace settings for annotate
ClosedPublic

Authored by indygreg on Sep 30 2017, 4:08 AM.

Details

Reviewers
simpkins
durin42
Group Reviewers
hg-reviewers
Commits
rHG6797f1fbc642: hgweb: add HTML elements to control whitespace settings for annotate
Summary

Building on top of the new URL query string arguments to control
whitespace settings for annotate, this commit adds HTML checkboxes
reflecting the values of these arguments to the paper and gitweb
themes.

The actual diff settings are now exported to the templating layer.
The HTML templates add these as data-* attributes so they are
accessible to the DOM.

A new <form> with various <input> elements is added. The <form>
is initially hidden via CSS. A shared JavaScript function (which
runs after the <form> has been rendered but before the annotate
HTML (because annotate HTML could take a while to load and we want
the form to render quickly) takes care of setting the checked state
of each box from the data-* attributes. It also registers an event
handler to modify the URL and refresh the page whenever the checkbox
state is changed.

I'm using the URLSearchParams interface to perform URL manipulation.
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams tells
me this may not be supported on older web browsers. Yes, apparently
the web API didn't have a standard API to parse and format query
strings until recently. Hence the check for the presence of this
feature in the JavaScript. If the browser doesn't support the
feature, the <form> will remain hidden and behavior will like it
currently is. We could polyfill this feature or implement our own
query string parsing. But I'm lazy and this could be done as a
follow-up if people miss it.

We could certainly expand this feature to support more diff options
(such as lines of context). That's why the potentially reusable code
is stored in a reusable place. It is also certainly possible to
add diff controls to other pages that display diffs. But since
Mozillians are making noise about controlling which revisions
annotate shows, I figured I'd start there.

.. feature::

Control whitespace settings for annotation on hgweb

/annotate URLs on hgweb now accept query string arguments to
influence how whitespace changes impact results.

The arguments "ignorews," "ignorewsamount," "ignorewseol," and
"ignoreblanklines" now have the same meaning as their [annotate]
config section counterparts. Any provided setting overrides the
server default.

HTML checkboxes have been added to the paper and gitweb themes
to expose current whitespace settings and to easily modify the
current view.

Diff Detail

Repository
rHG Mercurial
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.

Event Timeline

indygreg created this revision.Sep 30 2017, 4:08 AM
simpkins accepted this revision.Oct 1 2017, 6:40 AM
simpkins added a subscriber: simpkins.

Looks fine to me, but I'm no HTML/JS expert.
dogscience

durin42 accepted this revision.Oct 1 2017, 6:40 AM
This revision is now accepted and ready to land.Oct 1 2017, 6:40 AM
Closed by commit rHG6797f1fbc642: hgweb: add HTML elements to control whitespace settings for annotate (authored by indygreg). · Explain WhyOct 1 2017, 6:55 AM
This revision was automatically updated to reflect the committed changes.
yuja added a subscriber: yuja.Oct 1 2017, 8:57 AM
yuja added inline comments.
mercurial/templates/gitweb/map
352

Maybe extra </div>?

Revision Contents
Changeset List

Diff 2236

mercurial/hgweb/webcommands.py

"blockparity": blockparity, "blockparity": blockparity,
"targetline": targetline, "targetline": targetline,
"line": l, "line": l,
"lineno": lineno + 1, "lineno": lineno + 1,
"lineid": "l%d" % (lineno + 1), "lineid": "l%d" % (lineno + 1),
"linenumber": "% 6d" % (lineno + 1), "linenumber": "% 6d" % (lineno + 1),
"revdate": f.date()} "revdate": f.date()}
diffopts = webutil.difffeatureopts(req, web.repo.ui, 'annotate')
diffopts = {k: getattr(diffopts, k) for k in diffopts.defaults}
return tmpl("fileannotate", return tmpl("fileannotate",
file=f, file=f,
annotate=annotate, annotate=annotate,
path=webutil.up(f), path=webutil.up(f),
symrev=webutil.symrevorshortnode(req, fctx), symrev=webutil.symrevorshortnode(req, fctx),
rename=webutil.renamelink(fctx), rename=webutil.renamelink(fctx),
permissions=fctx.manifest().flags(f), permissions=fctx.manifest().flags(f),
ishead=int(ishead), ishead=int(ishead),
diffopts=diffopts,
**webutil.commonentry(web.repo, fctx)) **webutil.commonentry(web.repo, fctx))
@webcommand('filelog') @webcommand('filelog')
def filelog(web, req, tmpl): def filelog(web, req, tmpl):
""" """
/filelog/{revision}/{path} /filelog/{revision}/{path}
-------------------------- --------------------------

mercurial/templates/gitweb/fileannotate.tmpl

<tr> <tr>
<td>permissions</td> <td>permissions</td>
<td style="font-family:monospace">{permissions|permissions}</td> <td style="font-family:monospace">{permissions|permissions}</td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="page_path description">{desc|strip|escape|websub|nonempty}</div> <div class="page_path description">{desc|strip|escape|websub|nonempty}</div>
{diffoptsform}
<script type="text/javascript"{if(nonce, ' nonce="{nonce}"')}>
renderDiffOptsForm();
</script>
<div class="page_body"> <div class="page_body">
<table> <table>
<tbody class="sourcelines" <tbody class="sourcelines"
data-logurl="{url|urlescape}log/{symrev}/{file|urlescape}" data-logurl="{url|urlescape}log/{symrev}/{file|urlescape}"
data-selectabletag="TR" data-selectabletag="TR"
data-ishead="{ishead}"> data-ishead="{ishead}">
{annotate%annotateline} {annotate%annotateline}
</tbody> </tbody>
</table> </table>
</div> </div>
<script type="text/javascript" src="{staticurl|urlescape}followlines.js"></script> <script type="text/javascript" src="{staticurl|urlescape}followlines.js"></script>
{footer} {footer}

mercurial/templates/gitweb/map

<form id="searchform" action="{url|urlescape}log"> <form id="searchform" action="{url|urlescape}log">
{sessionvars%hiddenformentry} {sessionvars%hiddenformentry}
<input name="rev" type="text" value="{query|escape}" size="40" /> <input name="rev" type="text" value="{query|escape}" size="40" />
<div id="hint">{searchhint}</div> <div id="hint">{searchhint}</div>
</form> </form>
</div>' </div>'
searchhint = 'Find changesets by keywords (author, files, the commit message), revision searchhint = 'Find changesets by keywords (author, files, the commit message), revision
number or hash, or <a href="{url|urlescape}help/revsets">revset expression</a>.' number or hash, or <a href="{url|urlescape}help/revsets">revset expression</a>.'
diffoptsform = '
<form id="diffopts-form"
data-ignorews="{if(get(diffopts, 'ignorews'), '1', '0')}"
data-ignorewsamount="{if(get(diffopts, 'ignorewsamount'), '1', '0')}"
data-ignorewseol="{if(get(diffopts, 'ignorewseol'), '1', '0')}"
data-ignoreblanklines="{if(get(diffopts, 'ignoreblanklines'), '1', '0')}">
<span>Ignore whitespace changes - </span>
<span>Everywhere:</span>
<input id="ignorews-checkbox" type="checkbox" />
<span>Within whitespace:</span>
<input id="ignorewsamount-checkbox" type="checkbox" />
<span>At end of lines:</span>
<input id="ignorewseol-checkbox" type="checkbox" />
</form>
</div>'
yujaUnsubmitted
Not Done

Maybe extra </div>?

yuja: Maybe extra </div>?

mercurial/templates/paper/fileannotate.tmpl

<td class="author">{parent%filerevparent}</td> <td class="author">{parent%filerevparent}</td>
</tr> </tr>
<tr> <tr>
<th class="author">children</th> <th class="author">children</th>
<td class="author">{child%filerevchild}</td> <td class="author">{child%filerevchild}</td>
</tr> </tr>
</table> </table>
{diffoptsform}
<script type="text/javascript"{if(nonce, ' nonce="{nonce}"')}>
renderDiffOptsForm();
</script>
<div class="overflow"> <div class="overflow">
<table class="bigtable"> <table class="bigtable">
<thead> <thead>
<tr> <tr>
<th class="annotate">rev</th> <th class="annotate">rev</th>
<th class="line">&nbsp;&nbsp;line source</th> <th class="line">&nbsp;&nbsp;line source</th>
</tr> </tr>
</thead> </thead>

mercurial/templates/paper/map

searchform = ' searchform = '
<form class="search" action="{url|urlescape}log"> <form class="search" action="{url|urlescape}log">
{sessionvars%hiddenformentry} {sessionvars%hiddenformentry}
<p><input name="rev" id="search1" type="text" size="30" value="{query|escape}" /></p> <p><input name="rev" id="search1" type="text" size="30" value="{query|escape}" /></p>
<div id="hint">{searchhint}</div> <div id="hint">{searchhint}</div>
</form>' </form>'
searchhint = 'Find changesets by keywords (author, files, the commit message), revision searchhint = 'Find changesets by keywords (author, files, the commit message), revision
number or hash, or <a href="{url|urlescape}help/revsets">revset expression</a>.' number or hash, or <a href="{url|urlescape}help/revsets">revset expression</a>.'
diffoptsform = '
<form id="diffopts-form"
data-ignorews="{if(get(diffopts, 'ignorews'), '1', '0')}"
data-ignorewsamount="{if(get(diffopts, 'ignorewsamount'), '1', '0')}"
data-ignorewseol="{if(get(diffopts, 'ignorewseol'), '1', '0')}"
data-ignoreblanklines="{if(get(diffopts, 'ignoreblanklines'), '1', '0')}">
<span>Ignore whitespace changes - </span>
<span>Everywhere:</span>
<input id="ignorews-checkbox" type="checkbox" />
<span>Within whitespace:</span>
<input id="ignorewsamount-checkbox" type="checkbox" />
<span>At end of lines:</span>
<input id="ignorewseol-checkbox" type="checkbox" />
</form>'

mercurial/templates/static/mercurial.js

} }
} }
window.addEventListener('scroll', scrollHandler); window.addEventListener('scroll', scrollHandler);
window.addEventListener('resize', scrollHandler); window.addEventListener('resize', scrollHandler);
scrollHandler(); scrollHandler();
} }
function renderDiffOptsForm() {
// We use URLSearchParams for query string manipulation. Old browsers don't
// support this API.
if (!("URLSearchParams" in window)) {
return;
}
var form = document.getElementById("diffopts-form");
var KEYS = [
"ignorews",
"ignorewsamount",
"ignorewseol",
"ignoreblanklines",
];
var urlParams = new URLSearchParams(window.location.search);
function updateAndRefresh(e) {
var checkbox = e.target;
var name = checkbox.id.substr(0, checkbox.id.indexOf("-"));
urlParams.set(name, checkbox.checked ? "1" : "0");
window.location.search = urlParams.toString();
}
var allChecked = form.getAttribute("data-ignorews") == "1";
for (var i = 0; i < KEYS.length; i++) {
var key = KEYS[i];
var checkbox = document.getElementById(key + "-checkbox");
if (!checkbox) {
continue;
}
currentValue = form.getAttribute("data-" + key);
checkbox.checked = currentValue != "0";
// ignorews implies ignorewsamount and ignorewseol.
if (allChecked && (key == "ignorewsamount" || key == "ignorewseol")) {
checkbox.checked = true;
checkbox.disabled = true;
}
checkbox.addEventListener("change", updateAndRefresh, false);
}
form.style.display = 'block';
}
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
process_dates(); process_dates();
}, false); }, false);

mercurial/templates/static/style-gitweb.css

background-color: #FFFFFF; background-color: #FFFFFF;
border: 1px solid #d9d8d1; border: 1px solid #d9d8d1;
text-align: left; text-align: left;
color: #000000; color: #000000;
padding: 5px; padding: 5px;
} }
div.annotate-info a { color: #0000FF; text-decoration: underline; } div.annotate-info a { color: #0000FF; text-decoration: underline; }
td.annotate:hover div.annotate-info { display: inline; } td.annotate:hover div.annotate-info { display: inline; }
#diffopts-form {
padding-left: 8px;
display: none;
}
.linenr { color:#999999; text-decoration:none } .linenr { color:#999999; text-decoration:none }
div.rss_logo { float: right; white-space: nowrap; } div.rss_logo { float: right; white-space: nowrap; }
div.rss_logo a { div.rss_logo a {
padding:3px 6px; line-height:10px; padding:3px 6px; line-height:10px;
border:1px solid; border-color:#fcc7a5 #7d3302 #3e1a01 #ff954e; border:1px solid; border-color:#fcc7a5 #7d3302 #3e1a01 #ff954e;
color:#ffffff; background-color:#ff6600; color:#ffffff; background-color:#ff6600;
font-weight:bold; font-family:sans-serif; font-size:10px; font-weight:bold; font-family:sans-serif; font-size:10px;
text-align:center; text-decoration:none; text-align:center; text-decoration:none;

mercurial/templates/static/style-paper.css

border: 1px solid #999; border: 1px solid #999;
text-align: left; text-align: left;
color: #000000; color: #000000;
padding: 5px; padding: 5px;
} }
div.annotate-info a { color: #0000FF; } div.annotate-info a { color: #0000FF; }
td.annotate:hover div.annotate-info { display: inline; } td.annotate:hover div.annotate-info { display: inline; }
#diffopts-form {
font-size: smaller;
color: #424242;
padding-bottom: 10px;
display: none;
}
.source, .sourcefirst { .source, .sourcefirst {
font-family: monospace; font-family: monospace;
white-space: pre; white-space: pre;
padding: 1px 4px; padding: 1px 4px;
font-size: 90%; font-size: 90%;
} }
.sourcefirst { border-bottom: 1px solid #999; font-weight: bold; } .sourcefirst { border-bottom: 1px solid #999; font-weight: bold; }
.source a { color: #999; font-size: smaller; font-family: monospace;} .source a { color: #999; font-size: smaller; font-family: monospace;}

tests/test-hgweb.t

$ $PYTHON -c "print len(file('access.log').readlines()), 'log lines written'" $ $PYTHON -c "print len(file('access.log').readlines()), 'log lines written'"
14 log lines written 14 log lines written
static file static file
$ get-with-headers.py --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server $ get-with-headers.py --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server
200 Script output follows 200 Script output follows
content-length: 9007 content-length: 9066
content-type: text/css content-type: text/css
body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; background: white; color: black; } body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; background: white; color: black; }
a { color:#0000cc; } a { color:#0000cc; }
a:hover, a:visited, a:active { color:#880000; } a:hover, a:visited, a:active { color:#880000; }
div.page_header { height:25px; padding:8px; font-size:18px; font-weight:bold; background-color:#d9d8d1; } div.page_header { height:25px; padding:8px; font-size:18px; font-weight:bold; background-color:#d9d8d1; }
div.page_header a:visited { color:#0000cc; } div.page_header a:visited { color:#0000cc; }
div.page_header a:hover { color:#880000; } div.page_header a:hover { color:#880000; }
background-color: #FFFFFF; background-color: #FFFFFF;
border: 1px solid #d9d8d1; border: 1px solid #d9d8d1;
text-align: left; text-align: left;
color: #000000; color: #000000;
padding: 5px; padding: 5px;
} }
div.annotate-info a { color: #0000FF; text-decoration: underline; } div.annotate-info a { color: #0000FF; text-decoration: underline; }
td.annotate:hover div.annotate-info { display: inline; } td.annotate:hover div.annotate-info { display: inline; }
#diffopts-form {
padding-left: 8px;
display: none;
}
.linenr { color:#999999; text-decoration:none } .linenr { color:#999999; text-decoration:none }
div.rss_logo { float: right; white-space: nowrap; } div.rss_logo { float: right; white-space: nowrap; }
div.rss_logo a { div.rss_logo a {
padding:3px 6px; line-height:10px; padding:3px 6px; line-height:10px;
border:1px solid; border-color:#fcc7a5 #7d3302 #3e1a01 #ff954e; border:1px solid; border-color:#fcc7a5 #7d3302 #3e1a01 #ff954e;
color:#ffffff; background-color:#ff6600; color:#ffffff; background-color:#ff6600;
font-weight:bold; font-family:sans-serif; font-size:10px; font-weight:bold; font-family:sans-serif; font-size:10px;
text-align:center; text-decoration:none; text-align:center; text-decoration:none;

tests/test-highlight.t

<td class="author"></td> <td class="author"></td>
</tr> </tr>
<tr> <tr>
<th class="author">children</th> <th class="author">children</th>
<td class="author"></td> <td class="author"></td>
</tr> </tr>
</table> </table>
<form id="diffopts-form"
data-ignorews="0"
data-ignorewsamount="0"
data-ignorewseol="0"
data-ignoreblanklines="0">
<span>Ignore whitespace changes - </span>
<span>Everywhere:</span>
<input id="ignorews-checkbox" type="checkbox" />
<span>Within whitespace:</span>
<input id="ignorewsamount-checkbox" type="checkbox" />
<span>At end of lines:</span>
<input id="ignorewseol-checkbox" type="checkbox" />
</form>
<script type="text/javascript">
renderDiffOptsForm();
</script>
<div class="overflow"> <div class="overflow">
<table class="bigtable"> <table class="bigtable">
<thead> <thead>
<tr> <tr>
<th class="annotate">rev</th> <th class="annotate">rev</th>
<th class="line">&nbsp;&nbsp;line source</th> <th class="line">&nbsp;&nbsp;line source</th>
</tr> </tr>
</thead> </thead>