opt-viewer: abbreviate long function names

[bcain]

Summary

This will (unconditionally) abbreviate long function names . The latter 70 characters will be shown, with leading ellipsis if it exceeds the 70 chars. A tooltip will have the unabbreviated name. The unabbreviated name gets word-wrapped in a fairly sane matter.

This will only change index and the source render's "Inline Context" column. Unfortunately, references to very long function names in remarks are not affected by this change.

The background color of all references whether abbreviated or not is changed. The existing style.css was used and this is the style it already specified for items having a tooltip. If appropriate, we can change the tooltip decoration to only apply when abbreviated, and perhaps change the style to no longer modify the background color.

[bcain]

Fixed reference to ABBREV_LENGTH_LIMIT

[anemet]

The background color of all references whether abbreviated or not is changed. The existing style.css was used and this is the style it already specified for items having a tooltip. If appropriate, we can change the tooltip decoration to only apply when abbreviated, and perhaps change the style to no longer modify the background color.

So my immediate reaction is that we shouldn't be changing the background color but I haven't seen the interface so it may make sense. What do you think?

Also I would think that '...' provides sufficient clue that the function is abbreviated without color coding but as I said it's hard to judge without looking at this. I am fine if you check in the color part as is and then I can take a look.

utils/opt-viewer/opt-viewer.py

90

Are you sure this is better than trimming and adding '...' at the end? My rationale is that if we remove from the end the abbreviation is still more likely to include the function name which is the relevant part.

116–117

This will only change index and the source render's "Inline Context" column. Unfortunately, references to very long function names in remarks are not affected by this change.

If you abbreviated here too, I think that would do it, no?

[bcain]

In D29970#677135, @anemet wrote:

The background color of all references whether abbreviated or not is changed. The existing style.css was used and this is the style it already specified for items having a tooltip. If appropriate, we can change the tooltip decoration to only apply when abbreviated, and perhaps change the style to no longer modify the background color.

So my immediate reaction is that we shouldn't be changing the background color but I haven't seen the interface so it may make sense. What do you think?

Also I would think that '...' provides sufficient clue that the function is abbreviated without color coding but as I said it's hard to judge without looking at this. I am fine if you check in the color part as is and then I can take a look.

Agreed. I wanted to start this patch with the smallest possible change to the style.css and that's what it had already specified for the tooltip style. I'll remove the "background-color" attribute for .tooltip.

utils/opt-viewer/opt-viewer.py

116–117

But it would abbreviate the entire comment, regardless of the presence/absence of a long function name. Is that still what we want here?

[bcain]

utils/opt-viewer/opt-viewer.py

116–117

Hmm, or maybe it wouldn't, actually. I'll take a closer look.

[anemet]

In D29970#677365, @bcain wrote:

Agreed. I wanted to start this patch with the smallest possible change to the style.css and that's what it had already specified for the tooltip style. I'll remove the "background-color" attribute for .tooltip.

So just as a general comment on the CSS, I stole it from the coverage web view, so it's likely that it has random values for unused things.

utils/opt-viewer/opt-viewer.py

def should_display_hotness(self):
         # missing and no relative hotness information is displayed
         return self.max_hotness != 0
 
 context = Context()
 
 class Remark(yaml.YAMLObject):
     # Work-around for http://pyyaml.org/ticket/154.
     yaml_loader = Loader
+    ABBREV_LENGTH_LIMIT = 70
 
     def __getattr__(self, name):
         # If hotness is missing, assume 0
         if name == 'Hotness':
             return 0
         raise AttributeError
 
     @property
     def File(self):
         return self.DebugLoc['File']
 
     @property
     def Line(self):
         return int(self.DebugLoc['Line'])
 
     @property
     def Column(self):
         return self.DebugLoc['Column']
 
     @property
     def DebugLocString(self):
         return "{}:{}:{}".format(self.File, self.Line, self.Column)
 
     @property
+    def AbbreviatedFunctionName(self):
+        demangled = self.DemangledFunctionName
+        if len(demangled) > Remark.ABBREV_LENGTH_LIMIT:
+            return '...' + demangled[-ABBREV_LENGTH_LIMIT:]
+
+        return demangled
+
+
+    @property
     def DemangledFunctionName(self):
         return demangle(self.Function)
 
     @classmethod
     def make_link(cls, File, Line):
         return "{}#L{}".format(SourceFileRenderer.html_file_name(File), Line)
 
     @property
     def Link(self):
         return Remark.make_link(self.File, self.Line)
 
     def getArgString(self, mapping):
         mapping = mapping.copy()
         dl = mapping.get('DebugLoc')
         if dl:
             del mapping['DebugLoc']
 
         assert(len(mapping) == 1)
         (key, value) = mapping.items()[0]
 
         if key == 'Caller' or key == 'Callee':
             value = cgi.escape(demangle(value))
 
         if dl and key != 'Caller':
             return "<a href={}>{}</a>".format(
                 Remark.make_link(dl['File'], dl['Line']), value)
         else:
             return value
 
     @property

 <tr>
 <td><a name=\"L{linenum}\">{linenum}</a></td>
 <td></td>
 <td></td>
 <td>{html_line}</td>
 </tr>'''.format(**locals()), file=self.stream)
 
     def render_inline_remarks(self, r, line):
-        inlining_context = r.DemangledFunctionName
+        func_name = '<div class="tooltip">{r.AbbreviatedFunctionName}<span class="tooltip-content">{r.DemangledFunctionName}</span></div>'.format(**locals())
+        inlining_context = func_name
         print
         dl = context.caller_loc.get(r.Function)
         if dl:
             link = Remark.make_link(dl['File'], dl['Line'] - 2)
-            inlining_context = "<a href={link}>{r.DemangledFunctionName}</a>".format(**locals())
+            inlining_context = "<a href={link}>{func_name}</a>".format(**locals())
 
         # Column is the number of characters *including* tabs, keep those and
         # replace everything else with spaces.
         indent = line[:r.Column - 1]
         indent = re.sub('\S', ' ', indent)
 
         print('''
 <tr>
def html_file_name(cls, filename):
         return filename.replace('/', '_') + ".html"
 
 
 class IndexRenderer:
     def __init__(self, output_dir):
         self.stream = open(os.path.join(output_dir, 'index.html'), 'w')
 
     def render_entry(self, r, odd):
-        escaped_name = cgi.escape(r.DemangledFunctionName)
+        escaped_abbrev_name = cgi.escape(r.AbbreviatedFunctionName)
+        escaped_full_name = cgi.escape(r.DemangledFunctionName)
         print('''
 <tr>
 <td class=\"column-entry-{odd}\"><a href={r.Link}>{r.DebugLocString}</a></td>
 <td class=\"column-entry-{odd}\">{r.RelativeHotness}</td>
-<td class=\"column-entry-{odd}\">{escaped_name}</td>
+<td class=\"column-entry-{odd}\"><div class="tooltip">{escaped_abbrev_name}<span class="tooltip-content">{escaped_full_name}</span></div></td>
 <td class=\"column-entry-{r.color}\">{r.Pass}</td>
 </tr>'''.format(**locals()), file=self.stream)
 
     def render(self, all_remarks):
         print('''
 <html>
 <head>
 <link rel='stylesheet' type='text/css' href='style.css'>

utils/opt-viewer/style.css

 .tooltip {
   position: relative;
   display: inline;
   background-color: #b3e6ff;
   text-decoration: none;
 }
 .tooltip span.tooltip-content {
   position: absolute;
-  width: 100px;
   margin-left: -50px;
   color: #FFFFFF;
   background: #000000;
-  height: 30px;
   line-height: 30px;
   text-align: center;
   visibility: hidden;
   border-radius: 6px;
 }
 .tooltip span.tooltip-content:after {
   content: '';
   position: absolute;