[llvm] r318136 - [opt-viewer] Truncate long remark text in source view

Mon Nov 13 20:48:18 PST 2017

Author: anemet
Date: Mon Nov 13 20:48:18 2017
New Revision: 318136

URL: http://llvm.org/viewvc/llvm-project?rev=318136&view=rev
Log:
[opt-viewer] Truncate long remark text in source view

The table is changed to fixed layout[1] and the lines use ellipses if they
would overflow their cell.

[1] https://css-tricks.com/fixing-tables-long-strings/

Modified:
    llvm/trunk/tools/opt-viewer/opt-viewer.py
    llvm/trunk/tools/opt-viewer/style.css

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=318136&r1=318135&r2=318136&view=diff
==============================================================================

--- llvm/trunk/tools/opt-viewer/opt-viewer.py (original)
+++ llvm/trunk/tools/opt-viewer/opt-viewer.py Mon Nov 13 20:48:18 2017
@@ -119,17 +119,21 @@ class SourceFileRenderer:
 </head>
 <body>
 <div class="centered">
-<table>
+<table class="source">
+<thead>
 <tr>
-<td>Line</td>
-<td>Hotness</td>
-<td>Optimization</td>
-<td>Source</td>
-<td>Inline Context</td>
-</tr>''', file=self.stream)
+<th style="width: 2%">Line</td>
+<th style="width: 3%">Hotness</td>
+<th style="width: 10%">Optimization</td>
+<th style="width: 70%">Source</td>
+<th style="width: 15%">Inline Context</td>
+</tr>
+</thead>
+<tbody>''', file=self.stream)
         self.render_source_lines(self.source_stream, line_remarks)
 
         print('''
+</tbody>
 </table>
 </body>
 </html>''', file=self.stream)

Modified: llvm/trunk/tools/opt-viewer/style.css
URL: http://llvm.org/viewvc/llvm-project/llvm/trunk/tools/opt-viewer/style.css?rev=318136&r1=318135&r2=318136&view=diff
==============================================================================
--- llvm/trunk/tools/opt-viewer/style.css (original)
+++ llvm/trunk/tools/opt-viewer/style.css Mon Nov 13 20:48:18 2017
@@ -1,3 +1,13 @@
+.source {
+  table-layout: fixed;
+  width: 100%;
+  white-space: nowrap;
+}
+.source td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .red {
   background-color: #ffd0d0;
 }


