]> granicus.if.org Git - llvm/commitdiff
projects / llvm / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 1c43876)
[opt-viewer] Add javascript to expand/hide full message for multiline remarks.
authorFlorian Hahn <flo@fhahn.com>
Fri, 25 Jan 2019 17:48:31 +0000 (17:48 +0000)
committerFlorian Hahn <flo@fhahn.com>
Fri, 25 Jan 2019 17:48:31 +0000 (17:48 +0000)
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

git-svn-id: https://llvm.org/svn/llvm-project/llvm/trunk@352223 91177308-0d34-0410-b5e6-96231b3b80d8

test/tools/opt-viewer/Inputs/basic/or.yaml patch | blob | history
test/tools/opt-viewer/Outputs/basic/basic_or.c.html patch | blob | history
test/tools/opt-viewer/Outputs/basic/basic_or.h.html patch | blob | history
test/tools/opt-viewer/Outputs/basic/index.html patch | blob | history
test/tools/opt-viewer/Outputs/suppress/s.swift.html patch | blob | history
test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html patch | blob | history
tools/opt-viewer/opt-viewer.py patch | blob | history
tools/opt-viewer/style.css patch | blob | history

diff --git a/test/tools/opt-viewer/Inputs/basic/or.yaml b/test/tools/opt-viewer/Inputs/basic/or.yaml
index 11c5528b43fc1b4484cde42dac3dd466d141567b..80de83455a53643684e409857c332c95ff723c45 100644 (file)
--- a/test/tools/opt-viewer/Inputs/basic/or.yaml
+++ b/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
+...
diff --git a/test/tools/opt-viewer/Outputs/basic/basic_or.c.html b/test/tools/opt-viewer/Outputs/basic/basic_or.c.html
index 225ebabdbde3bc263ff1e5534eef79ebdb6bdc3c..2b0baf942b507bfd66dec987b71226e6ad59dfc0 100644 (file)
--- a/test/tools/opt-viewer/Outputs/basic/basic_or.c.html
+++ b/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>
diff --git a/test/tools/opt-viewer/Outputs/basic/basic_or.h.html b/test/tools/opt-viewer/Outputs/basic/basic_or.h.html
index 7cbda8a66c76df473fea668215bc3d715cb9b361..b6cc2f37fab317bc916cefe54def03d2ee115368 100644 (file)
--- a/test/tools/opt-viewer/Outputs/basic/basic_or.h.html
+++ b/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">
diff --git a/test/tools/opt-viewer/Outputs/basic/index.html b/test/tools/opt-viewer/Outputs/basic/index.html
index 3424a9a1f0e6a54988c20a6fe8181b19abd3ff9c..9bdacd2641577458d5369bb81258b58e6f95735c 100644 (file)
--- a/test/tools/opt-viewer/Outputs/basic/index.html
+++ b/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>
 
diff --git a/test/tools/opt-viewer/Outputs/suppress/s.swift.html b/test/tools/opt-viewer/Outputs/suppress/s.swift.html
index 813db9f98205b0fe17c7589402d9de87890ba1d8..f67352079ed6ba6f81849eecb5799575c46c4f56 100644 (file)
--- a/test/tools/opt-viewer/Outputs/suppress/s.swift.html
+++ b/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">
diff --git a/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html b/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html
index 67514d556c389558744b4dc392ac9919d76128ec..744c5b7579e886304bb7ac210c7e6e83542dda7d 100644 (file)
--- a/test/tools/opt-viewer/Outputs/unicode-function-name/s.swift.html
+++ b/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">
diff --git a/tools/opt-viewer/opt-viewer.py b/tools/opt-viewer/opt-viewer.py
index f6582506311cca9fdf4695fceab364ea9921497c..8aec321b959588d8548d886d0239b8acb315d126 100755 (executable)
--- a/tools/opt-viewer/opt-viewer.py
+++ b/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">
diff --git a/tools/opt-viewer/style.css b/tools/opt-viewer/style.css
index 0d3347c1578c828e2d34ac0f7f9f0831a0e599c2..550c7e1cdff31e1bda8744abd3a1f99bfc8d868f 100644 (file)
--- a/tools/opt-viewer/style.css
+++ b/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 */
 
Unnamed repository; edit this file 'description' to name the repository.