Skip to content

Commit 9e02481

Browse files
hzrhzr
committed
Improved performance when zooming.
1 parent 49cb48e commit 9e02481

File tree

3 files changed

+60
-75
lines changed

3 files changed

+60
-75
lines changed

‎src/profiler/profiler_templates.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ var ProfilerTemplates = function()
9191
parseInt(style_sheets.getDeclaration(".profiler-timeline-row").paddingBottom))
9292
: 0;
9393

94-
var MIN_DURATION = 0.1;
94+
var MIN_DURATION = ProfilerView.MIN_DURATION;
9595

9696
var HAS_UNPREFIXED_GRADIENTS = (function() {
9797
var ele = document.createElement("div");
@@ -159,7 +159,7 @@ var ProfilerTemplates = function()
159159
var template = [];
160160
for (var i = 0; i < cell_amount; i++)
161161
{
162-
var left = Math.floor(marker_time * i * ms_unit); // flooring avoids the line jumping around
162+
var left = Math.round(marker_time * i * ms_unit);
163163
var time = (marker_time * i) + interval_start;
164164
if (time === 0)
165165
fractions = 0;
@@ -262,6 +262,7 @@ var ProfilerTemplates = function()
262262
color + " " + self_time_amount + "%, " +
263263
"transparent " + self_time_amount + "%);"
264264
),
265+
"id", "profiler-event-" + event.eventID,
265266
"class", "profiler-event event-type-" + event.type +
266267
(event.eventID == selected_id && is_expandable ? " selected" : "") +
267268
(is_expandable ? " expandable" : " non-expandable"),

‎src/profiler/profiler_view.js‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
3232
var TIMELINE_ID = 0;
3333

3434
var profiler_timeline_decl = document.styleSheets.getDeclaration(".profiler-timeline");
35+
var profiler_event_decl = document.styleSheets.getDeclaration(".profiler-event");
3536
var AGGREGATED_EVENTS_WIDTH = profiler_timeline_decl ? parseInt(profiler_timeline_decl.left) : 0;
37+
var BAR_MIN_WIDTH = profiler_event_decl ? parseInt(profiler_event_decl.minWidth) : 0;
3638

3739
// Parent-children relationships
3840
this._children = {};
@@ -422,10 +424,10 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
422424

423425
this._on_settings_initialized = function(msg)
424426
{
425-
if (msg.view_id == "profiler_all")
426-
{
427-
this._min_event_time = window.settings["profiler_all"].get("min-event-time")
428-
}
427+
//if (msg.view_id == "profiler_all")
428+
//{
429+
// this._min_event_time = window.settings["profiler_all"].get("min-event-time")
430+
//}
429431
};
430432

431433
this._on_single_select_changed = function(msg)
@@ -499,13 +501,11 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
499501

500502
var timeline_list = this._timeline_list;
501503
var interval = timeline_list.interval;
502-
var event_list = timeline_list.eventList;
503-
var aggregated_event_list = this._get_aggregated_event_list(event_list);
504-
var width = this._timeline_width;
505-
506-
event_list = event_list.filter(function(event) {
504+
var event_list = timeline_list.eventList.filter(function(event) {
507505
return event.time > this._min_event_time;
508506
}, this);
507+
var aggregated_event_list = this._get_aggregated_event_list(event_list);
508+
var width = this._timeline_width;
509509

510510
this._x0 = 0;
511511
this._x1 = interval.end;
@@ -522,21 +522,40 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
522522

523523
var timeline_list = this._timeline_list;
524524
var interval = timeline_list.interval;
525-
var event_list = timeline_list.eventList.filter(function(event) {
525+
var visible_event_list = timeline_list.eventList.filter(function(event) {
526526
var start = event.interval.start;
527527
var end = event.interval.end;
528528
return ((start <= x0 && end >= x0) ||
529529
(start >= x0 && start <= x1)) &&
530530
event.time > this._min_event_time;
531531
}, this);
532-
var aggregated_event_list = this._get_aggregated_event_list(event_list);
532+
var aggregated_event_list = this._get_aggregated_event_list(visible_event_list);
533533
var width = this._timeline_width;
534534

535+
var duration = Math.max(x1 - x0, ProfilerView.MIN_DURATION);
536+
var ms_unit = (width - BAR_MIN_WIDTH) / duration;
537+
var new_event_list = [];
538+
for (var i = 0, event; event = timeline_list.eventList[i]; i++)
539+
{
540+
var ele = document.getElementById("profiler-event-" + event.eventID);
541+
if (visible_event_list.indexOf(event) != -1)
542+
{
543+
if (ele)
544+
{
545+
ele.style.width = Math.round((event.interval.end - event.interval.start) * ms_unit) + "px";
546+
ele.style.left = Math.round((event.interval.start - x0) * ms_unit) + "px";
547+
}
548+
else
549+
new_event_list.push(event);
550+
}
551+
else if (ele)
552+
ele.remove();
553+
}
554+
535555
this._x0 = x0;
536556
this._x1 = x1;
537557
this._set_zoomer = true;
538-
this._zoomer.fast_throttle = event_list.length < 500;
539-
this._timeline_ele.clearAndRender(this._templates.event_list_all(event_list, interval, this._event_id, width, x0, x1));
558+
this._timeline_ele.render(this._templates.event_list_all(new_event_list, interval, this._event_id, width, x0, x1));
540559
this._timeline_times_ele.clearAndRender(this._templates.timeline_markers(x0, x1, width));
541560
this._legend_ele.clearAndRender(this._templates.legend(aggregated_event_list));
542561
};
@@ -551,7 +570,6 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
551570

552571
this._get_timeline_duration = function()
553572
{
554-
// TODO: make sure this exists
555573
return this._timeline_list.interval.end;
556574
};
557575

@@ -615,6 +633,8 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
615633

616634
ProfilerView.prototype = ViewBase;
617635

636+
ProfilerView.MIN_DURATION = 0.1;
637+
618638
ProfilerView.create_ui_widgets = function()
619639
{
620640
new ToolbarConfig({

‎src/ui-scripts/zoomer/zoomer.js‎

Lines changed: 23 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ var ZoomerPrototype = function()
7373
this._handle_ele_onmouseup_bound = this.handle_ele_onmouseup.bind(this);
7474
this._handle_ele_onkeydown_bound = this.handle_ele_onkeydown.bind(this);
7575

76-
this._update_overlay_position_bound = this._update_overlay_position.bind(this);
76+
this._update_bound = this._update.bind(this);
7777

7878
if (zoomer_ele)
7979
this.set_zoomer_element(zoomer_ele);
@@ -123,13 +123,13 @@ var ZoomerPrototype = function()
123123
if (event.which != 1)
124124
return;
125125
document.addEventListener("mousemove", this._zoomer_ele_onmousemove_bound);
126-
document.addEventListener("mousemove", this._zoomer_ele_onmousemove_once_bound)
127126
document.addEventListener("mouseup", this._zoomer_ele_onmouseup_bound);
128127
var mouse_x = event.clientX - this._zoomer_ele_left;
129128
this._overlay_left = mouse_x;
130129
this._overlay_right = this._to_right_x(mouse_x);
131130
this._mouse_drag_start_x = mouse_x;
132131
event.preventDefault();
132+
// TODO: need to remove e.g. mousehweel event handlers here
133133
};
134134

135135
this.zoomer_ele_onmousemove = function(event)
@@ -148,7 +148,6 @@ var ZoomerPrototype = function()
148148
this._overlay_left = this._mouse_drag_start_x;
149149
this.change_overlay_size(0, diff);
150150
}
151-
this._set_model_area();
152151
};
153152

154153
this.zoomer_ele_onmousewheel = function(event)
@@ -157,15 +156,13 @@ var ZoomerPrototype = function()
157156
var diff = (mouse_x < this._overlay_left) ? 5 : -5;
158157
diff *= (event.wheelDelta > 0) ? 1 : -1;
159158
this.move_overlay(diff);
160-
this._set_model_area();
161159
event.stopPropagation();
162160
};
163161

164162
this.zoomer_ele_onmouseup = function(event)
165163
{
166164
document.documentElement.classList.remove("overlay-size-change");
167165
document.removeEventListener("mousemove", this._zoomer_ele_onmousemove_bound);
168-
document.removeEventListener("mousemove", this._zoomer_ele_onmousemove_once_bound)
169166
document.removeEventListener("mouseup", this._zoomer_ele_onmouseup_bound);
170167
var mouse_x = event.clientX - this._zoomer_ele_left;
171168
if (this._mouse_drag_start_x == mouse_x)
@@ -198,14 +195,12 @@ var ZoomerPrototype = function()
198195
var mouse_to_handle_diff = this._mouse_drag_start_x - this._overlay_start_left;
199196
var diff = mouse_x - this._overlay_left - mouse_to_handle_diff;
200197
this.move_overlay(diff);
201-
this._set_model_area();
202198
};
203199

204200
this.overlay_ele_onmousewheel = function(event)
205201
{
206202
var diff = (event.wheelDelta < 0) ? 5 : -5;
207203
this.change_overlay_size(diff, -diff);
208-
this._set_model_area();
209204
event.stopPropagation();
210205
};
211206

@@ -221,7 +216,6 @@ var ZoomerPrototype = function()
221216
if (!diff)
222217
return;
223218
this.move_overlay(diff);
224-
this._set_model_area();
225219
event.stopPropagation();
226220
};
227221

@@ -281,7 +275,6 @@ var ZoomerPrototype = function()
281275
var diff = mouse_x - this._to_right_x(this._overlay_right) - mouse_to_handle_diff;
282276
this.set_overlay_position(static_pos, this._to_right_x(this._overlay_right) + diff);
283277
}
284-
this._set_model_area();
285278
};
286279

287280
this.handle_ele_onkeydown = function(event)
@@ -304,7 +297,6 @@ var ZoomerPrototype = function()
304297
if (this._overlay_left - diff < this._to_right_x(this._overlay_right))
305298
this.change_overlay_size(0, diff);
306299
}
307-
this._set_model_area();
308300
event.stopPropagation();
309301
};
310302

@@ -317,46 +309,18 @@ var ZoomerPrototype = function()
317309
this._handle_ele = null;
318310
};
319311

320-
// TODO: very temporary
321-
this.fast_throttle = true;
322-
this._set_model_area = function()
312+
/**
313+
* Request update of the overlay position.
314+
*/
315+
this._request_update = function()
323316
{
324-
// TODO: very temporary
325-
if (this.fast_throttle)
326-
{
327-
window.clearTimeout(this._update_timeout);
328-
var now = Date.now();
329-
var time_since_last_update = now - this._last_update;
330-
if (time_since_last_update > UPDATE_THRESHOLD)
331-
{
332-
var ms_unit = this._model.get_duration() / this._model.get_model_element_width();
333-
var x0 = this._overlay_left * ms_unit;
334-
var x1 = this._to_right_x(this._overlay_right) * ms_unit;
335-
this._model.set_area(x0, x1);
336-
this._last_update = now;
337-
}
338-
339-
// Set a timeout to set the area. This makes sure that the last update
340-
// always happens, even if it was within the UPDATE_THRESHOLD.
341-
this._update_timeout = window.setTimeout(function() {
342-
var ms_unit = this._model.get_duration() / this._model.get_model_element_width();
343-
var x0 = this._overlay_left * ms_unit;
344-
var x1 = this._to_right_x(this._overlay_right) * ms_unit;
345-
this._model.set_area(x0, x1);
346-
}.bind(this), UPDATE_THRESHOLD);
347-
}
348-
else
349-
{
350-
window.clearTimeout(this._update_timeout);
351-
// Set a timeout to set the area. This makes sure that the last update
352-
// always happens, even if it was within the UPDATE_THRESHOLD.
353-
this._update_timeout = window.setTimeout(function() {
354-
var ms_unit = this._model.get_duration() / this._model.get_model_element_width();
355-
var x0 = this._overlay_left * ms_unit;
356-
var x1 = this._to_right_x(this._overlay_right) * ms_unit;
357-
this._model.set_area(x0, x1);
358-
}.bind(this), UPDATE_THRESHOLD);
359-
}
317+
window.requestAnimationFrame(this._update_bound);
318+
};
319+
320+
this._update = function()
321+
{
322+
this._update_overlay_position();
323+
this._set_model_area();
360324
};
361325

362326
/**
@@ -366,18 +330,17 @@ var ZoomerPrototype = function()
366330
{
367331
if (!this._overlay_ele)
368332
return;
369-
// TODO: no need to set this all the time
370333
this._overlay_ele.style.display = "block";
371334
this._overlay_ele.style.left = this._overlay_left + "px";
372335
this._overlay_ele.style.right = this._overlay_right + "px";
373336
};
374337

375-
/**
376-
* Request update of the overlay position.
377-
*/
378-
this._request_update_overlay_position = function()
338+
this._set_model_area = function()
379339
{
380-
window.requestAnimationFrame(this._update_overlay_position_bound);
340+
var ms_unit = this._model.get_duration() / this._model.get_model_element_width();
341+
var x0 = this._overlay_left * ms_unit;
342+
var x1 = this._to_right_x(this._overlay_right) * ms_unit;
343+
this._model.set_area(x0, x1);
381344
};
382345

383346
/**
@@ -445,8 +408,9 @@ var ZoomerPrototype = function()
445408
this.move_overlay = function(diff)
446409
{
447410
if (diff == null)
448-
diff = 0;
449-
else if (diff < 0)
411+
return;
412+
413+
if (diff < 0)
450414
diff = Math.max(this._overlay_left + diff, 0) - this._overlay_left;
451415
else
452416
diff = Math.min(diff, this._overlay_right);
@@ -479,9 +443,9 @@ var ZoomerPrototype = function()
479443
this._overlay_left = Math.max(0, Math.min(left, right));
480444
this._overlay_right = Math.max(0, this._to_right_x(Math.max(left, right)));
481445
if (!immediate)
482-
this._request_update_overlay_position();
446+
this._request_update();
483447
else
484-
this._update_overlay_position();
448+
this._update();
485449
};
486450

487451
/**

0 commit comments

Comments
 (0)