[opt-viewer] Add javascript to expand/hide full message for multiline remarks.
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. Reviewers: hfinkel, anemet, thegameg, serge-sans-paille Reviewed By: anemet Differential Revision: https://reviews.llvm.org/D57167 llvm-svn: 352223
This commit is contained in:
parent
599c0bc93b
commit
fd7ee47940
|
@ -225,3 +225,14 @@ Args:
|
|||
- InterleaveCount: '2'
|
||||
- String: ')'
|
||||
...
|
||||
--- !Passed
|
||||
Pass: multiline
|
||||
Name: ShowMultiLine
|
||||
DebugLoc: { File: basic/or.c, Line: 10, Column: 3 }
|
||||
Function: Test
|
||||
Args:
|
||||
- String: |
|
||||
This is a remark with
|
||||
multiple
|
||||
lines
|
||||
...
|
||||
|
|
|
@ -4,6 +4,23 @@
|
|||
<meta charset="utf-8" />
|
||||
<head>
|
||||
<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>
|
||||
<body>
|
||||
<div class="centered">
|
||||
|
@ -105,6 +122,20 @@
|
|||
<td class="column-entry-yellow">Test</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="column-entry-green">multiline</td>
|
||||
<td><pre style="display:inline"> </pre><span class="column-entry-yellow"><a style="text-decoration: none;" href="" onclick="toggleExpandedMessage(this); return false;">+</a> This is a remark with </span>
|
||||
<div class="full-info" style="display:none;">
|
||||
<div class="col-left"><pre style="display:inline"> </pre></div>
|
||||
<div class="expanded col-left"><pre>multiple
|
||||
lines
|
||||
</pre></div>
|
||||
</div></td>
|
||||
<td class="column-entry-yellow">Test</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a name="L11">11</a></td>
|
||||
<td></td>
|
||||
|
|
|
@ -4,6 +4,23 @@
|
|||
<meta charset="utf-8" />
|
||||
<head>
|
||||
<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>
|
||||
<body>
|
||||
<div class="centered">
|
||||
|
|
|
@ -29,121 +29,128 @@
|
|||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.c.html#L14">basic/or.c:14:3</a></td>
|
||||
<td class="column-entry-0"><a href="basic_or.c.html#L10">basic/or.c:10:3</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">Test</td>
|
||||
<td class="column-entry-green">loop-unroll</td>
|
||||
<td class="column-entry-green">multiline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.c.html#L18">basic/or.c:18:3</a></td>
|
||||
<td class="column-entry-1"><a href="basic_or.c.html#L14">basic/or.c:14:3</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">Test</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
<td class="column-entry-green">loop-unroll</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.c.html#L18">basic/or.c:18:3</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">Test</td>
|
||||
<td class="column-entry-green">inline</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.c.html#L20">basic/or.c:20:3</a></td>
|
||||
<td class="column-entry-1"><a href="basic_or.c.html#L18">basic/or.c:18:3</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">Test</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
<td class="column-entry-green">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.c.html#L20">basic/or.c:20:3</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">Test</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.c.html#L20">basic/or.c:20:3</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">Test</td>
|
||||
<td class="column-entry-green">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.c.html#L20">basic/or.c:20:10</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">Test</td>
|
||||
<td class="column-entry-red">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.c.html#L20">basic/or.c:20:17</a></td>
|
||||
<td class="column-entry-0"><a href="basic_or.c.html#L20">basic/or.c:20:10</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">Test</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
<td class="column-entry-red">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.c.html#L20">basic/or.c:20:17</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">Test</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.c.html#L20">basic/or.c:20:17</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">Test</td>
|
||||
<td class="column-entry-green">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.h.html#L5">basic/or.h:5:3</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">TestH</td>
|
||||
<td class="column-entry-1"><a href="basic_or.h.html#L5">basic/or.h:5:3</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">TestH</td>
|
||||
<td class="column-entry-green">loop-vectorize</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.h.html#L9">basic/or.h:9:3</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">TestH</td>
|
||||
<td class="column-entry-green">loop-unroll</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.h.html#L13">basic/or.h:13:3</a></td>
|
||||
<td class="column-entry-0"><a href="basic_or.h.html#L9">basic/or.h:9:3</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">TestH</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
<td class="column-entry-green">loop-unroll</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.h.html#L13">basic/or.h:13:3</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">TestH</td>
|
||||
<td class="column-entry-green">inline</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.h.html#L15">basic/or.h:15:3</a></td>
|
||||
<td class="column-entry-0"><a href="basic_or.h.html#L13">basic/or.h:13:3</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">TestH</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
<td class="column-entry-green">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.h.html#L15">basic/or.h:15:3</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">TestH</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.h.html#L15">basic/or.h:15:3</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">TestH</td>
|
||||
<td class="column-entry-green">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.h.html#L15">basic/or.h:15:10</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">TestH</td>
|
||||
<td class="column-entry-red">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.h.html#L15">basic/or.h:15:17</a></td>
|
||||
<td class="column-entry-1"><a href="basic_or.h.html#L15">basic/or.h:15:10</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">TestH</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
<td class="column-entry-red">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-0"><a href="basic_or.h.html#L15">basic/or.h:15:17</a></td>
|
||||
<td class="column-entry-0"></td>
|
||||
<td class="column-entry-0">TestH</td>
|
||||
<td class="column-entry-white">inline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="column-entry-1"><a href="basic_or.h.html#L15">basic/or.h:15:17</a></td>
|
||||
<td class="column-entry-1"></td>
|
||||
<td class="column-entry-1">TestH</td>
|
||||
<td class="column-entry-green">inline</td>
|
||||
</tr>
|
||||
|
||||
|
|
|
@ -4,6 +4,23 @@
|
|||
<meta charset="utf-8" />
|
||||
<head>
|
||||
<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>
|
||||
<body>
|
||||
<div class="centered">
|
||||
|
|
|
@ -4,6 +4,23 @@
|
|||
<meta charset="utf-8" />
|
||||
<head>
|
||||
<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>
|
||||
<body>
|
||||
<div class="centered">
|
||||
|
|
|
@ -120,12 +120,26 @@ class SourceFileRenderer:
|
|||
indent = line[:max(r.Column, 1) - 1]
|
||||
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 = u'''
|
||||
<div class="full-info" style="display:none;">
|
||||
<div class="col-left"><pre style="display:inline">{}</pre></div>
|
||||
<div class="expanded col-left"><pre>{}</pre></div>
|
||||
</div>'''.format(indent, '\n'.join(lines[1:]))
|
||||
else:
|
||||
expand_link = ''
|
||||
expand_message = ''
|
||||
message = r.message
|
||||
print(u'''
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{r.RelativeHotness}</td>
|
||||
<td class=\"column-entry-{r.color}\">{r.PassWithDiffPrefix}</td>
|
||||
<td><pre style="display:inline">{indent}</pre><span class=\"column-entry-yellow\"> {r.message} </span></td>
|
||||
<td><pre style="display:inline">{indent}</pre><span class=\"column-entry-yellow\">{expand_link} {message} </span>{expand_message}</td>
|
||||
<td class=\"column-entry-yellow\">{inlining_context}</td>
|
||||
</tr>'''.format(**locals()), file=self.stream)
|
||||
|
||||
|
@ -139,6 +153,23 @@ class SourceFileRenderer:
|
|||
<meta charset="utf-8" />
|
||||
<head>
|
||||
<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>
|
||||
<body>
|
||||
<div class="centered">
|
||||
|
|
|
@ -139,6 +139,16 @@ td:first-child {
|
|||
td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.expanded {
|
||||
background-color: #f2f2f2;
|
||||
padding-top: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.col-left {
|
||||
float: left;
|
||||
margin-bottom: -99999px;
|
||||
padding-bottom: 99999px;
|
||||
}
|
||||
|
||||
/* Generated with pygmentize -S colorful -f html >> style.css */
|
||||
|
||||
|
|
Loading…
Reference in New Issue