[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

1 files changed, 35 insertions, 28 deletions

diff --git a/llvm/test/tools/opt-viewer/Outputs/basic/index.html b/llvm/test/tools/opt-viewer/Outputs/basic/index.html
index 3424a9a1f0e..9bdacd26415 100644
--- 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-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>