add hover action that highlights timeline item

Author: PetrDlouhy

template_profiler_panel/panels/template.py

@@ -54,6 +54,7 @@ class TemplateProfilerPanel(Panel):
     '''
 
     template = 'template_profiler_panel/template.html'
+    scripts = ["static/js/template_profiler.js"]
 
     def __init__(self, *args, **kwargs):
         self.colors = {}

template_profiler_panel/static/js/template_profiler.js

@@ -0,0 +1,6 @@
+
+$(".timeline_item").mouseover(function() {
+   $(this).css("border", "red 0.1px solid");
+}).mouseout(function() {
+   $(this).css("border", "none");
+});

template_profiler_panel/templates/template_profiler_panel/template.html

@@ -50,14 +50,15 @@ <h4>{{ templates|length }} {% trans 'calls to Template.render()' %}</h4>
 Duration {{ time_item.duration|floatformat:2  }} ms
 {% if time_item.position %}Lines {{ time_item.position.0 }} - {{ time_item.position.1 }}{% endif %}
 Depth {{ time_item.level|add:1 }}
-                  " style="
+                  "
+                  class="timeline_item"
+                  style="
                   min-width: 1px;
                   margin-left: {{ time_item.offset_p|stringformat:'f' }}%;
                   width: {{ time_item.rel_duration_p|stringformat:'f' }}%;
                   background-color: {{ time_item.bg_color }};
                   top: calc({{ time_item.level }}px * 18);
                   position: absolute;
-                  {# border: red 0.1px solid; #}
                   opacity: 0.9;
                   ">&nbsp;</span>
             {% endfor %}