Refactored the zoomer, improved performance.

Author: hzr

src/client-en.xml

@@ -214,6 +214,7 @@ window.load_screen_timeout = window.setTimeout(function()
 <!-- command concat_js "./script/dragonfly.js" -->
 
 <script src="./scripts/ini.js"/>
+<script src="./lib/windowobject.js"/>
 <script src="./lib/elementprototype.js"/>
 <script src="./lib/arrayprototype.js"/>
 <script src="./lib/canvasrenderingcontext2dprototype.js"/>

src/lib/windowobject.js

@@ -0,0 +1,31 @@
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller
+// fixes from Paul Irish and Tino Zijdel
+
+(function() {
+    var lastTime = 0;
+    var vendors = ['ms', 'moz', 'webkit', 'o'];
+    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
+                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
+    }
+
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function(callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+              timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
+
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function(id) {
+            clearTimeout(id);
+        };
+}());
+

src/profiler/profiler_style.css

@@ -51,7 +51,7 @@
   top: 65px;
   border-top: 1px solid rgba(0, 0, 0, 0.055);
   border-bottom: 1px solid rgba(0, 0, 0, 0.055);
-  overflow-x: hidden;
+  overflow: hidden;
   height: 144px;
 }
 
@@ -136,15 +136,6 @@
   right: 2px;
 }
 
-.profiler-legend-time-bar
-{
-  background: #769FE1;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  height: 1px;
-}
-
 .profiler-timeline-row:hover .profiler-legend-label
 {
   color: #769fe1;

src/profiler/profiler_templates.js

@@ -136,10 +136,6 @@ var ProfilerTemplates = function()
                   this.format_time(event.time, 0),
                 "class", "profiler-legend-time"
                ],
-               ["div",
-                "class", "profiler-legend-time-bar",
-                "style", "width: " + self_time_amount + "%"
-               ],
              "class", "profiler-legend-row profiler-timeline-row" + (index % 2 ? "" : " even"),
              "data-event-type", String(event.type),
              "handler", "profiler-event"

src/profiler/profiler_view.js

@@ -237,7 +237,8 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
 
     this._timeline_width = width;
     this._zoomer.set_zoomer_element(this._zoomer_ele);
-    this._zoomer.set_current_area();
+    if (this._set_zoomer)
+      this._zoomer.set_current_area();
   };
 
   this.createView = function(container)
@@ -508,6 +509,7 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
 
     this._x0 = 0;
     this._x1 = interval.end;
+    this._set_zoomer = false;
     this._timeline_ele.clearAndRender(this._templates.event_list_all(event_list, interval, this._event_id, width));
     this._timeline_times_ele.clearAndRender(this._templates.timeline_markers(0, interval.end, width));
     this._legend_ele.clearAndRender(this._templates.legend(aggregated_event_list));
@@ -532,6 +534,7 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
 
     this._x0 = x0;
     this._x1 = x1;
+    this._set_zoomer = true;
     this._zoomer.fast_throttle = event_list.length < 500;
     this._timeline_ele.clearAndRender(this._templates.event_list_all(event_list, interval, this._event_id, width, x0, x1));
     this._timeline_times_ele.clearAndRender(this._templates.timeline_markers(x0, x1, width));
@@ -548,6 +551,7 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
 
   this._get_timeline_duration = function()
   {
+    // TODO: make sure this exists
     return this._timeline_list.interval.end;
   };
 
@@ -569,6 +573,7 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
 
     this._x0 = 0;
     this._x1 = 0;
+    this._set_zoomer = true;
     this._min_event_time = 0;
 
     this._legend_ele = null;