[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
2019-01-25 17:48:31 +00:00 · 2019-01-25 17:48:31 +00:00 · fd7ee47940
parent 599c0bc93b
commit fd7ee47940
8 changed files with 182 additions and 41 deletions
--- a/llvm/test/tools/opt-viewer/Inputs/basic/or.yaml
+++ b/llvm/test/tools/opt-viewer/Inputs/basic/or.yaml
@ -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
+...
--- a/llvm/test/tools/opt-viewer/Outputs/basic/basic_or.c.html
+++ b/llvm/test/tools/opt-viewer/Outputs/basic/basic_or.c.html
@ -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&nbsp;</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>
--- a/llvm/test/tools/opt-viewer/Outputs/basic/basic_or.h.html
+++ b/llvm/test/tools/opt-viewer/Outputs/basic/basic_or.h.html
@ -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">
--- a/llvm/test/tools/opt-viewer/Outputs/basic/index.html
+++ b/llvm/test/tools/opt-viewer/Outputs/basic/index.html
@ -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>

--- a/llvm/test/tools/opt-viewer/Outputs/suppress/s.swift.html
+++ b/llvm/test/tools/opt-viewer/Outputs/suppress/s.swift.html
@ -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">
--- a/llvm/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html
+++ b/llvm/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html
@ -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">
--- a/llvm/tools/opt-viewer/opt-viewer.py
+++ b/llvm/tools/opt-viewer/opt-viewer.py
@ -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}&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>
 </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">
--- a/llvm/tools/opt-viewer/style.css
+++ b/llvm/tools/opt-viewer/style.css
@ -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 */