View Profiler

sample.gif

templateprof.diff

diff --git a/app/assets/javascripts/staff/lineprof.coffee b/app/assets/javascripts/staff/lineprof.coffee
index 830a17f..f1734ed 100644
--- a/app/assets/javascripts/staff/lineprof.coffee
+++ b/app/assets/javascripts/staff/lineprof.coffee
@@ -5,3 +5,45 @@ $(document).on 'click', '.js-lineprof-file', ->
 $ ->
   if $('#line-profile')[0]
     $.facebox {div: '#line-profile'}, 'lineprofiler'
+
+templateInfo = {}
+infoTooltip = null
+
+window.annotateTemplates = ->
+  stack = []
+  name = []
+  templateId = 0
+  walker = document.createTreeWalker document, NodeFilter.SHOW_COMMENT|NodeFilter.SHOW_ELEMENT, null, false
+
+  while walker.nextNode()
+    node = walker.currentNode
+    if node.nodeType == 8
+      if m = node.nodeValue.match(/^ template: (.+) /)
+        templateId += 1
+        curr = templateInfo[templateId] = {node:node, name:m[1], id:templateId}
+        stack.push(curr)
+        name.push(m[1])
+      else if m = node.nodeValue.match(/^ \/template: (.+), (.+) $/)
+        pop = name.pop()
+        console.warn('template stack mismatch', pop, m[1]) if pop != m[1]
+        prev = stack.pop()
+        prev.timing = parseFloat(m[2])*1000
+    else if node.nodeType == 1 && stack.length && stack[stack.length-1].node.parentElement == node.parentElement
+      $(node).attr('data-rails-template', stack[stack.length-1].id)
+        .addClass('js-template-annotation')
+
+  infoTooltip = $('<div class="js-template-tooltip"/>').appendTo('body')
+
+$(document).on 'mousemove', '.js-template-annotation', (e) ->
+  if ($target = $(e.currentTarget)).is('.js-template-annotation')
+    templateId = $target.attr('data-rails-template')
+    $('.template-profiler-highlight').removeClass('template-profiler-highlight')
+    $(".js-template-annotation[data-rails-template='#{templateId}'").addClass('template-profiler-highlight')
+
+    info = templateInfo[templateId]
+    $('.js-template-tooltip').text("#{info.name}: #{Math.round(info.timing)}ms")
+      .css(position: 'absolute', left: e.pageX + 10, top: e.pageY + 10)
+
+  return false
+
+annotateTemplates()
diff --git a/app/assets/stylesheets/staff/serverstats.scss b/app/assets/stylesheets/staff/serverstats.scss
index 76752ef..87b28ac 100644
--- a/app/assets/stylesheets/staff/serverstats.scss
+++ b/app/assets/stylesheets/staff/serverstats.scss
@@ -283,3 +283,21 @@
 
 .performance-stats {
 }
+
+.js-template-annotation {
+  outline: 3px dotted orange;
+  outline-offset: 4px;
+}
+
+.template-profiler-highlight {
+  outline: 2px solid orange;
+  outline-offset: 4px;
+}
+
+.js-template-tooltip {
+  pointer-events: none;
+  z-index: 1000000000;
+  background-color: white;
+  border: 1px solid black;
+  padding: 3px;
+}
diff --git a/config/instrumentation.rb b/config/instrumentation.rb
index 252cedc..3b57d14 100644
--- a/config/instrumentation.rb
+++ b/config/instrumentation.rb
@@ -150,32 +150,34 @@ class Rack::Bug::TemplatesPanel::Rendering
 class ActionView::Template
   def render_template_with_timing(*args, &block)
     if !ActionView::Template.template_trace_enabled
       return render_template_without_timing(*args, &block)
     end
 
     begin
       name = path_without_format_and_extension
       ActionView::Template.template_trace.start(name)
-      render_template_without_timing(*args, &block)
+      start = Time.now
+      ret = render_template_without_timing(*args, &block)
+      "<!-- template: #{name} -->".html_safe + ret + "<!-- /template: #{name}, #{Time.now-start} -->".html_safe
     ensure
       ActionView::Template.template_trace.finished(name)
     end
   end
   alias_method_chain :render_template, :timing
 end