[llvm] r352223 - [opt-viewer] Add javascript to expand/hide full message for multiline remarks.
Florian Hahn via llvm-commits
llvm-commits at lists.llvm.org
Fri Jan 25 09:48:31 PST 2019
Author: fhahn
Date: Fri Jan 25 09:48:31 2019
New Revision: 352223
URL: http://llvm.org/viewvc/llvm-project?rev=352223&view=rev
Log:
[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
Modified:
llvm/trunk/test/tools/opt-viewer/Inputs/basic/or.yaml
llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.c.html
llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.h.html
llvm/trunk/test/tools/opt-viewer/Outputs/basic/index.html
llvm/trunk/test/tools/opt-viewer/Outputs/suppress/s.swift.html
llvm/trunk/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html
llvm/trunk/tools/opt-viewer/opt-viewer.py
llvm/trunk/tools/opt-viewer/style.css
Modified: llvm/trunk/test/tools/opt-viewer/Inputs/basic/or.yaml
URL: http://llvm.org/viewvc/llvm-project/llvm/trunk/test/tools/opt-viewer/Inputs/basic/or.yaml?rev=352223&r1=352222&r2=352223&view=diff
==============================================================================
--- llvm/trunk/test/tools/opt-viewer/Inputs/basic/or.yaml (original)
+++ llvm/trunk/test/tools/opt-viewer/Inputs/basic/or.yaml Fri Jan 25 09:48:31 2019
@@ -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
+...
Modified: llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.c.html
URL: http://llvm.org/viewvc/llvm-project/llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.c.html?rev=352223&r1=352222&r2=352223&view=diff
==============================================================================
--- llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.c.html (original)
+++ llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.c.html Fri Jan 25 09:48:31 2019
@@ -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>
Modified: llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.h.html
URL: http://llvm.org/viewvc/llvm-project/llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.h.html?rev=352223&r1=352222&r2=352223&view=diff
==============================================================================
--- llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.h.html (original)
+++ llvm/trunk/test/tools/opt-viewer/Outputs/basic/basic_or.h.html Fri Jan 25 09:48:31 2019
@@ -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">
Modified: llvm/trunk/test/tools/opt-viewer/Outputs/basic/index.html
URL: http://llvm.org/viewvc/llvm-project/llvm/trunk/test/tools/opt-viewer/Outputs/basic/index.html?rev=352223&r1=352222&r2=352223&view=diff
==============================================================================
--- llvm/trunk/test/tools/opt-viewer/Outputs/basic/index.html (original)
+++ llvm/trunk/test/tools/opt-viewer/Outputs/basic/index.html Fri Jan 25 09:48:31 2019
@@ -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-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:10</a></td>
+<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-red">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: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-green">inline</td>
+<td class="column-entry-white">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"><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">TestH</td>
-<td class="column-entry-green">loop-vectorize</td>
+<td class="column-entry-0">Test</td>
+<td class="column-entry-green">inline</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"><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-unroll</td>
+<td class="column-entry-green">loop-vectorize</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-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:10</a></td>
+<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-red">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: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>
Modified: llvm/trunk/test/tools/opt-viewer/Outputs/suppress/s.swift.html
URL: http://llvm.org/viewvc/llvm-project/llvm/trunk/test/tools/opt-viewer/Outputs/suppress/s.swift.html?rev=352223&r1=352222&r2=352223&view=diff
==============================================================================
--- llvm/trunk/test/tools/opt-viewer/Outputs/suppress/s.swift.html (original)
+++ llvm/trunk/test/tools/opt-viewer/Outputs/suppress/s.swift.html Fri Jan 25 09:48:31 2019
@@ -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">
Modified: llvm/trunk/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html
URL: http://llvm.org/viewvc/llvm-project/llvm/trunk/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html?rev=352223&r1=352222&r2=352223&view=diff
==============================================================================
--- llvm/trunk/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html (original)
+++ llvm/trunk/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html Fri Jan 25 09:48:31 2019
@@ -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">
Modified: llvm/trunk/tools/opt-viewer/opt-viewer.py
URL: http://llvm.org/viewvc/llvm-project/llvm/trunk/tools/opt-viewer/opt-viewer.py?rev=352223&r1=352222&r2=352223&view=diff
==============================================================================
--- llvm/trunk/tools/opt-viewer/opt-viewer.py (original)
+++ llvm/trunk/tools/opt-viewer/opt-viewer.py Fri Jan 25 09:48:31 2019
@@ -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">
Modified: llvm/trunk/tools/opt-viewer/style.css
URL: http://llvm.org/viewvc/llvm-project/llvm/trunk/tools/opt-viewer/style.css?rev=352223&r1=352222&r2=352223&view=diff
==============================================================================
--- llvm/trunk/tools/opt-viewer/style.css (original)
+++ llvm/trunk/tools/opt-viewer/style.css Fri Jan 25 09:48:31 2019
@@ -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 */
More information about the llvm-commits
mailing list