This is an archive of the discontinued LLVM Phabricator instance.

Differential D57167

[opt-viewer] Add javascript to expand/hide full message for multiline remarks.
ClosedPublic

Authored by fhahn on Jan 24 2019, 9:59 AM.

Details

Reviewers
hfinkel
anemet
thegameg
serge-sans-paille
Commits
rGfd7ee479401b: [opt-viewer] Add javascript to expand/hide full message for multiline remarks.
rL352223: [opt-viewer] Add javascript to expand/hide full message for multiline remarks.
Summary

This patch adds support for displaying remarks with multiple
lines. For such remarks, it creates a hidden div
containing the message's lines except the first one in a <pre>
tag. It also prepends a link (with '+' as text) to the regular remark
line. This link can be used to show/hide the div containing the
full remark.

In combination with D57159, this allows for better displaying of
multiline remarks in the html pages generated by opt-viewer.

The Javascript is very simple and should be supported by any recent
major browser.

Diff Detail

Event Timeline

fhahn created this revision.Jan 24 2019, 9:59 AM
Herald added a reviewer: serge-sans-paille. · View Herald TranscriptJan 24 2019, 9:59 AM
Harbormaster completed remote builds in B27251: Diff 183335.Jan 24 2019, 9:59 AM
anemet added a comment.Jan 24 2019, 1:35 PM

Can you please describe the user experience?

fhahn updated this revision to Diff 183541.Jan 25 2019, 7:23 AM

Udpate JS, style and tests. Also add a multiline remark to tests.

Herald added a subscriber: arphaman. · View Herald TranscriptJan 25 2019, 7:23 AM
Harbormaster completed remote builds in B27310: Diff 183541.Jan 25 2019, 7:25 AM
fhahn edited the summary of this revision. (Show Details)Jan 25 2019, 7:29 AM

The two screenshots below show the multiline remark from the test rendered both hidden and shown.

anemet accepted this revision.Jan 25 2019, 8:09 AM

Awesome and thanks for the test. LGTM!

This revision is now accepted and ready to land.Jan 25 2019, 8:09 AM
Closed by commit rL352223: [opt-viewer] Add javascript to expand/hide full message for multiline remarks. (authored by fhahn). · Explain WhyJan 25 2019, 9:48 AM
This revision was automatically updated to reflect the committed changes.

Revision Contents

PathSize
llvm/
tools/
opt-viewer/
32 lines

Diff 183335

llvm/tools/opt-viewer/opt-viewer.py

Show First 20 Lines • Show All 114 Lines • ▼ Show 20 Lines def render_inline_remarks(self, r, line):
link = optrecord.make_link(dl_dict['File'], dl_dict['Line'] - 2) link = optrecord.make_link(dl_dict['File'], dl_dict['Line'] - 2)
inlining_context = "<a href={link}>{r.DemangledFunctionName}</a>".format(**locals()) inlining_context = "<a href={link}>{r.DemangledFunctionName}</a>".format(**locals())
# Column is the number of characters *including* tabs, keep those and # Column is the number of characters *including* tabs, keep those and
# replace everything else with spaces. # replace everything else with spaces.
indent = line[:max(r.Column, 1) - 1] indent = line[:max(r.Column, 1) - 1]
indent = re.sub('\S', ' ', indent) indent = re.sub('\S', ' ', indent)
# Create expanded message and link if we have a multiline message.
lines = r.message.split('\n')
if len(lines) > 1:
expand_link = '<a style="text-decoration: none;" href="" onclick="toggleExpandedMessage(this); return false;">+</a>'
message = lines[0]
expand_message = '<div style="display:none;" class="full-info"><pre> {} </pre></div>'.format('\n'.join(lines[1:]))
else:
expand_link = ''
expand_message = ''
message = r.message
print(u''' print(u'''
<tr> <tr>
<td></td> <td></td>
<td>{r.RelativeHotness}</td> <td>{r.RelativeHotness}</td>
<td class=\"column-entry-{r.color}\">{r.PassWithDiffPrefix}</td> <td class=\"column-entry-{r.color}\">{r.PassWithDiffPrefix}</td>
<td><pre style="display:inline">{indent}</pre><span class=\"column-entry-yellow\"> {r.message}&nbsp;</span></td> <td>
<pre style="display:inline">{indent}</pre><span class=\"column-entry-yellow\">{expand_link}{message}&nbsp;</span>
{expand_message}
</td>
<td class=\"column-entry-yellow\">{inlining_context}</td> <td class=\"column-entry-yellow\">{inlining_context}</td>
</tr>'''.format(**locals()), file=self.stream) </tr>'''.format(**locals()), file=self.stream)
def render(self, line_remarks): def render(self, line_remarks):
if not self.source_stream: if not self.source_stream:
return return
print(''' print('''
<html> <html>
<title>{}</title> <title>{}</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<head> <head>
<link rel='stylesheet' type='text/css' href='style.css'> <link rel='stylesheet' type='text/css' href='style.css'>
<script type="text/javascript">
/* Simple helper to show/hide the expanded message of a remark. */
function toggleExpandedMessage(e) {{
var FullTextElems = e.parentElement.parentElement.getElementsByClassName("full-info");
if (!FullTextElems || FullTextElems.length < 1) {{
return false;
}}
var FullText = FullTextElems[0];
if (FullText.style.display == 'none') {{
e.innerHTML = '-';
FullText.style.display = 'block';
}} else {{
e.innerHTML = '+';
FullText.style.display = 'none';
}}
}}
</script>
</head> </head>
<body> <body>
<div class="centered"> <div class="centered">
<table class="source"> <table class="source">
<thead> <thead>
<tr> <tr>
<th style="width: 2%">Line</td> <th style="width: 2%">Line</td>
<th style="width: 3%">Hotness</td> <th style="width: 3%">Hotness</td>
▲ Show 20 Lines • Show All 197 Lines • Show Last 20 Lines