Some refactoring and cleanup.

Author: hzr

src/profiler/profiler_style.css

@@ -39,8 +39,8 @@
   background-image: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 50%, transparent 50%);
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 50%, transparent 50%);
   background-position: 0 1px;
-  background-size: 1px 36px;
-  height: 145px;
+  background-size: 1px 44px;
+  height: 177px;
 }
 
 .profiler-timeline
@@ -52,7 +52,7 @@
   border-top: 1px solid rgba(0, 0, 0, 0.055);
   border-bottom: 1px solid rgba(0, 0, 0, 0.055);
   overflow: hidden;
-  height: 144px;
+  height: 176px;
 }
 
 .profiler-details-list
@@ -108,8 +108,8 @@
 
 .profiler-timeline-row
 {
-  height: 16px;
-  line-height: 16px;
+  height: 20px;
+  line-height: 20px;
   padding: 1px 5px; /* Line up up with the table below */
   white-space: nowrap;
   position: relative;
@@ -124,8 +124,6 @@
 {
   box-sizing: border-box;
   padding-right: 10px;
-  font-weight: bold;
-  color: #333;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -136,9 +134,16 @@
   right: 2px;
 }
 
-.profiler-timeline-row:hover .profiler-legend-label
+.profiler-timeline-row:hover
+{
+  background: rgba(137, 173, 232, 0.2);
+  color: #000;
+}
+
+.profiler-timeline-row:active
 {
-  color: #769fe1;
+  background-color: rgba(55, 115, 211, 0.7);
+  color: #fff;
 }
 
 .profiler-timeline-marker
@@ -173,36 +178,35 @@
 
 .profiler-event-small
 {
-  min-width: 2px;
+  min-width: 1px;
   height: 3px;
   position: absolute;
 }
 
 .profiler-event
 {
   min-width: 3px;
-  height: 10px;
-  margin: 3px 0;
+  height: 12px;
+  margin: 4px 0;
   box-shadow: inset 0 2px 0 0 rgba(255, 255, 255, 0.09),
               inset 0 0 0 1px rgba(0, 0, 0, 0.07),
               inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);
-  /*border-radius: 2px;*/ /* Disable this, it's too expensive to paint */
 }
 
 .profiler-event.expandable:hover
 {
   box-shadow: inset 0 2px 0 0 rgba(255, 255, 255, 0.09),
               inset 0 0 0 1px rgba(0, 0, 0, 0.07),
               inset 0 -1px 0 0 rgba(0, 0, 0, 0.05),
-              0 0 0 2px #ceddf5;
+              0 0 0 2px rgba(137, 173, 232, 0.5);
 }
 
 .profiler-event.non-expandable:hover
 {
   box-shadow: inset 0 2px 0 0 rgba(255, 255, 255, 0.09),
               inset 0 0 0 1px rgba(0, 0, 0, 0.07),
               inset 0 -1px 0 0 rgba(0, 0, 0, 0.05),
-              0 0 0 2px #ddd;
+              0 0 0 2px rgba(204, 204, 204, 0.5);
 }
 
 .profiler-timeline .profiler-event

src/profiler/profiler_templates.js

@@ -83,8 +83,10 @@ var ProfilerTemplates = function()
 
   var style_sheets = document.styleSheets;
   var profiler_event_decl = style_sheets.getDeclaration(".profiler-event");
+  var profiler_event_small_decl = style_sheets.getDeclaration(".profiler-event-small");
   var profiler_timeline_row_decl = style_sheets.getDeclaration(".profiler-timeline-row");
-  var BAR_MIN_WIDTH = profiler_event_decl ? parseInt(profiler_event_decl.minWidth) : 0;
+  var EVENT_MIN_WIDTH = profiler_event_decl ? parseInt(profiler_event_decl.minWidth) : 0;
+  var EVENT_SMALL_MIN_WIDTH = profiler_event_decl ? parseInt(profiler_event_small_decl.minWidth) : 0;
   var BAR_HEIGHT = profiler_timeline_row_decl
                  ? (parseInt(style_sheets.getDeclaration(".profiler-timeline-row").height) +
                     parseInt(style_sheets.getDeclaration(".profiler-timeline-row").paddingTop) +
@@ -152,7 +154,7 @@ var ProfilerTemplates = function()
     var MIN_MARKER_GAP = 80;
     var MIN_MARKERS = 2;
     var duration = Math.max(interval_end - interval_start, MIN_DURATION);
-    var ms_unit = (container_width - BAR_MIN_WIDTH) / duration;
+    var ms_unit = (container_width - EVENT_MIN_WIDTH) / duration;
     var cell_amount = Math.max(MIN_MARKERS, Math.round(container_width / MIN_MARKER_GAP));
     var marker_time = duration / cell_amount;
     var fractions = marker_time < 10 ? 1 : 0;
@@ -186,32 +188,28 @@ var ProfilerTemplates = function()
     return template;
   };
 
-  this.event_list_full = function(event_list, interval, container_width)
+  this.event_list_full = function(event_list, interval_end, container_width)
   {
     var template = [];
     if (event_list)
     {
-      var interval_start = 0;
-      var interval_end = interval.end;
-      var duration = Math.max(interval_end - interval_start, MIN_DURATION);
-      var ms_unit = (container_width - BAR_MIN_WIDTH) / duration;
+      var duration = Math.max(interval_end, MIN_DURATION);
+      var ms_unit = (container_width - EVENT_SMALL_MIN_WIDTH) / duration;
 
-      template.extend(event_list.map(this._full_timeline_event.bind(this, interval_start, ms_unit)));
+      template.extend(event_list.map(this._full_timeline_event.bind(this, 0, ms_unit)));
     }
     return template;
   };
 
-  this.event_list_all = function(event_list, interval, selected_id, container_width, start, end)
+  this.event_list_all = function(event_list, interval_start, interval_end, container_width)
   {
     var template = [];
     if (event_list)
     {
-      var interval_start = start || 0;
-      var interval_end = end || interval.end;
       var duration = Math.max(interval_end - interval_start, MIN_DURATION);
-      var ms_unit = (container_width - BAR_MIN_WIDTH) / duration;
+      var ms_unit = (container_width - EVENT_MIN_WIDTH) / duration;
 
-      template.extend(event_list.map(this._timeline_event.bind(this, interval_start, ms_unit, selected_id)));
+      template.extend(event_list.map(this._timeline_event.bind(this, interval_start, ms_unit)));
     }
     return template;
   };
@@ -232,8 +230,7 @@ var ProfilerTemplates = function()
     );
   };
 
-  // NOTE: the container_width is only needed for a workaround of a CORE bug
-  this._timeline_event = function(interval_start, ms_unit, selected_id, event)
+  this._timeline_event = function(interval_start, ms_unit, event)
   {
     var duration = Math.max(event.interval.end - event.interval.start, MIN_DURATION);
     var self_time_amount = duration
@@ -264,7 +261,6 @@ var ProfilerTemplates = function()
          ),
        "id", "profiler-event-" + event.eventID,
        "class", "profiler-event event-type-" + event.type +
-                (event.eventID == selected_id && is_expandable ? " selected" : "") +
                 (is_expandable ? " expandable" : " non-expandable"),
        "data-event-id", String(event.eventID),
        "data-event-type", String(event.type),
@@ -338,7 +334,7 @@ var ProfilerTemplates = function()
                  "class", "profiler-event-tooltip-label"
                 ],
                 this.format_time(event.interval.start) +
-                " (relative: " + this.format_time(event.interval.start - range_start) + ")"
+                " (rel: " + this.format_time(event.interval.start - range_start) + ")"
              ],
              ["li",
                 ["span",