Skip to content

Commit 947c10a

Browse files
hzrhzr
committed
Some refactoring in the profiler.
1 parent 9b934d4 commit 947c10a

File tree

3 files changed

+110
-56
lines changed

3 files changed

+110
-56
lines changed

‎src/profiler/profiler_style.css‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
top: 60px;
66
width: 160px;
77
border-top: 1px solid #e6e6e6;
8+
border-bottom: 1px solid #e6e6e6;
9+
overflow: hidden;
810
}
911

1012
.profiler-full-timeline
@@ -25,7 +27,7 @@
2527
left: 160px;
2628
right: 0;
2729
top: 15px;
28-
height: 26px; /* 8 types * 3px height + 2 extra for padding */
30+
height: 27px;
2931
}
3032

3133
.profiler-timeline-background
@@ -48,17 +50,17 @@
4850
right: 0;
4951
top: 60px;
5052
border-top: 1px solid #e6e6e6;
53+
border-bottom: 1px solid #e6e6e6;
5154
overflow-x: hidden;
52-
height: 145px;
55+
height: 144px;
5356
}
5457

5558
.profiler-details-list
5659
{
5760
position: absolute;
58-
top: 205px;
61+
top: 206px;
5962
bottom: 21px;
6063
overflow: auto;
61-
border-top: 1px solid #e6e6e6;
6264
width: 100%;
6365
}
6466

@@ -128,14 +130,14 @@
128130
text-overflow: ellipsis;
129131
}
130132

131-
.profiler-legend-amount
133+
.profiler-legend-time
132134
{
133135
position: absolute;
134136
right: 2px;
135137
text-shadow: 1px 1px #fff;
136138
}
137139

138-
.profiler-legend-amount-bar
140+
.profiler-legend-time-bar
139141
{
140142
background: #769FE1;
141143
position: absolute;

‎src/profiler/profiler_templates.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -118,29 +118,31 @@ var ProfilerTemplates = function()
118118
var total_time = event_list.reduce(function(prev, curr) {
119119
return prev + curr.time;
120120
}, 0);
121-
event_list.forEach(function(event) {
122-
var index = this._order.indexOf(event.type);
121+
event_list.forEach(function(event, index) {
123122
if (index !== -1)
124123
{
125-
var percentage = event.time / total_time * 100;
126-
template[index] =
124+
var percentage = total_time
125+
? event.time / total_time * 100
126+
: 0;
127+
template.push(
127128
["div",
128129
["span",
129130
event_type_string_map[event.type],
130131
"class", "profiler-legend-label"
131132
],
132133
["span",
133134
this.format_time(event.time, 0),
134-
"class", "profiler-legend-amount"
135+
"class", "profiler-legend-time"
135136
],
136137
["div",
137-
"class", "profiler-legend-amount-bar",
138-
"style", "width:" + percentage + "%"
138+
"class", "profiler-legend-time-bar",
139+
"style", "width: " + percentage + "%"
139140
],
140141
"class", "profiler-legend-row profiler-timeline-row" + (index % 2 ? " odd" : ""),
141142
"data-event-type", String(event.type),
142143
"handler", "profiler-event"
143-
];
144+
]
145+
);
144146
}
145147
}, this);
146148
return template;

‎src/profiler/profiler_view.js‎

Lines changed: 92 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
4141
this._tabledefs = {};
4242
this._tabledefs[TYPE_CSS_SELECTOR_MATCHING] = {
4343
idgetter: function(item) { return item.cssSelectorMatching.selector; },
44-
column_order: ["selector", "time", "hits"],
4544
columns: {
4645
"selector": {
4746
label: ui_strings.S_PROFILER_TYPE_SELECTOR,
@@ -74,14 +73,13 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
7473
TYPE_THREAD_EVALUATION,
7574
TYPE_REFLOW,
7675
TYPE_STYLE_RECALCULATION,
77-
//TYPE_STYLE_SELECTOR_MATCHING,
76+
//TYPE_CSS_SELECTOR_MATCHING,
7877
TYPE_LAYOUT,
7978
TYPE_PAINT
8079
];
8180

8281
this._timeline_modes = [
83-
{id: "_timeline_list", mode: MODE_ALL},
84-
{id: "_aggregated_list", mode: MODE_REDUCE_UNIQUE_TYPES}
82+
{id: "_timeline_list", mode: MODE_ALL}
8583
];
8684

8785
this._reset = function()
@@ -166,8 +164,11 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
166164
}, this);
167165
if (got_all_responses)
168166
{
169-
this._x0 = this._timeline_list.interval.start;
170-
this._x1 = this._timeline_list.interval.end;
167+
if (this._timeline_list && this._timeline_list.interval)
168+
{
169+
this._x0 = this._timeline_list.interval.start;
170+
this._x1 = this._timeline_list.interval.end;
171+
}
171172
this._update_view();
172173
}
173174
}
@@ -195,8 +196,11 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
195196
return;
196197
}
197198

198-
this._timeline_width = this._container.clientWidth - AGGREGATED_EVENTS_WIDTH;
199-
var width = this._timeline_width;
199+
var timeline_list = this._timeline_list;
200+
var interval = timeline_list.interval;
201+
var event_list = timeline_list.eventList;
202+
var aggregated_event_list = this._get_aggregated_event_list(event_list);
203+
var width = this._container.clientWidth - AGGREGATED_EVENTS_WIDTH;
200204

201205
// TODO: Check if these are already appended
202206
var frag = document.createDocumentFragment();
@@ -206,31 +210,29 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
206210
frag.appendChild(this._timeline_times_ele);
207211
frag.appendChild(this._timeline_ele);
208212
frag.appendChild(this._details_ele);
209-
frag.appendChild(this._status_ele);
210-
211-
var timeline_list = this._timeline_list;
212213

213-
this._legend_ele.clearAndRender(this._templates.legend(this._aggregated_list.eventList));
214-
this._zoomer_times_ele.clearAndRender(this._templates.timeline_markers(0, timeline_list.interval.end, width));
215-
this._zoomer_ele.clearAndRender(this._templates.event_list_full(timeline_list.eventList, timeline_list.interval, width));
216-
this._timeline_times_ele.clearAndRender(this._templates.timeline_markers(timeline_list.interval.start, timeline_list.interval.end, width));
217-
this._timeline_ele.clearAndRender(this._templates.event_list_all(timeline_list.eventList, timeline_list.interval, this._event_id, width));
218-
this._details_ele.clearAndRender(this._templates.details(this._table));
219-
this._status_ele.clearAndRender(this._templates.status(this._details_time));
214+
this._legend_ele.clearAndRender(this._templates.legend(aggregated_event_list));
215+
this._zoomer_times_ele.clearAndRender(this._templates.timeline_markers(0, interval.end, width));
216+
this._zoomer_ele.clearAndRender(this._templates.event_list_full(event_list, interval, width));
217+
this._timeline_times_ele.clearAndRender(this._templates.timeline_markers(interval.start, interval.end, width));
218+
this._timeline_ele.clearAndRender(this._templates.event_list_all(event_list, interval, this._event_id, width));
220219

221-
var data = this._table && this._table.get_data();
222-
if (!(data && data.length))
220+
if (this._table)
223221
{
224-
this._details_ele.addClass("profiler-no-status");
225-
this._status_ele.addClass("profiler-no-status");
222+
frag.appendChild(this._status_ele);
223+
this._details_ele.clearAndRender(this._templates.details(this._table));
224+
this._status_ele.clearAndRender(this._templates.status(this._details_time));
225+
}
226+
else
227+
{
228+
this._details_ele.clearAndRender(this._templates.no_events());
226229
}
227230

228231
container.innerHTML = "";
229232
container.appendChild(frag);
230233

231-
this._zoomer.set_zoomer_ele(this._zoomer_ele);
232-
this._zoomer.set_model_ele_width(width);
233-
this._zoomer.set_model_duration(timeline_list.interval.end);
234+
this._timeline_width = width;
235+
this._zoomer.set_zoomer_element(this._zoomer_ele);
234236
this._zoomer.set_current_area();
235237
};
236238

@@ -317,16 +319,16 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
317319
timeline_id: this._current_timeline_id,
318320
mode: MODE_REDUCE_UNIQUE_EVENTS,
319321
event_id: this._event_id,
320-
event_type_list: [child_type]
322+
event_type_list: [child_type],
323+
interval: [this._x0, this._x1] // TODO: take the interval of the parent event?
321324
};
322325
this._profiler.get_events(this._handle_details_list_bound.bind(null, child_type), config);
323326
}
324327
else
325328
{
326329
this._reset_details();
327330
this._details_ele.clearAndRender(this._templates.no_events());
328-
this._details_ele.addClass("profiler-no-status");
329-
this._status_ele.addClass("profiler-no-status");
331+
this._status_ele.remove();
330332
}
331333
};
332334

@@ -340,8 +342,8 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
340342
null,
341343
true,
342344
"profiler");
343-
var parsed_msg = new cls.Profiler["1.0"].EventList(msg);
344-
var data = parsed_msg && parsed_msg.eventList;
345+
var event_list = new cls.Profiler["1.0"].EventList(msg);
346+
var data = event_list && event_list.eventList;
345347
if (data.length)
346348
{
347349
this._table.set_data(data);
@@ -350,15 +352,37 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
350352
}, 0);
351353
this._details_ele.clearAndRender(this._templates.details(this._table));
352354
this._status_ele.clearAndRender(this._templates.status(this._details_time));
353-
this._details_ele.removeClass("profiler-no-status");
354-
this._status_ele.removeClass("profiler-no-status");
355+
this._container.appendChild(this._details_ele);
356+
this._container.appendChild(this._status_ele);
355357
}
356358
else
357359
{
358360
this._details_ele.clearAndRender(this._templates.no_events());
359361
}
360362
};
361363

364+
this._get_aggregated_event_list = function(event_list)
365+
{
366+
var list = this._default_types.map(function(type) {
367+
return {
368+
type: type,
369+
time: 0
370+
};
371+
});
372+
event_list.forEach(function(event) {
373+
var type = event.type;
374+
for (var i = 0, item; item = list[i]; i++)
375+
{
376+
if (item.type == type)
377+
{
378+
item.time += event.time;
379+
continue;
380+
}
381+
}
382+
});
383+
return list;
384+
};
385+
362386
this._reload_window = function(event, target)
363387
{
364388
if (this._current_session_id)
@@ -451,28 +475,42 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
451475
{
452476
if (!this._timeline_list)
453477
return;
454-
this._x0 = 0;
455-
this._x1 = this._timeline_list.interval.end;
478+
479+
var timeline_list = this._timeline_list;
480+
var interval = timeline_list.interval;
481+
var event_list = timeline_list.eventList;
482+
var aggregated_event_list = this._get_aggregated_event_list(event_list);
456483
var width = this._timeline_width;
457-
this._timeline_ele.clearAndRender(this._templates.event_list_all(this._timeline_list.eventList, this._timeline_list.interval, this._event_id, width));
458-
this._timeline_times_ele.clearAndRender(this._templates.timeline_markers(this._x0, this._x1, this._timeline_width));
484+
485+
this._x0 = 0;
486+
this._x1 = interval.end;
487+
this._timeline_ele.clearAndRender(this._templates.event_list_all(event_list, interval, this._event_id, width));
488+
this._timeline_times_ele.clearAndRender(this._templates.timeline_markers(0, interval.end, width));
489+
this._legend_ele.clearAndRender(this._templates.legend(aggregated_event_list));
459490
};
460491

461492
this._set_timeline_area = function(x0, x1)
462493
{
463-
this._x0 = x0;
464-
this._x1 = x1;
465494
if (!this._timeline_list)
466495
return;
467-
var event_list = this._timeline_list.eventList.filter(function(event) {
496+
497+
var timeline_list = this._timeline_list;
498+
var interval = timeline_list.interval;
499+
var event_list = timeline_list.eventList.filter(function(event) {
468500
var start = event.interval.start;
469501
var end = event.interval.end;
470502
return (start <= x0 && end >= x0) ||
471503
(start >= x0 && start <= x1);
472504
});
505+
var aggregated_event_list = this._get_aggregated_event_list(event_list);
506+
var width = this._timeline_width;
507+
508+
this._x0 = x0;
509+
this._x1 = x1;
473510
this._zoomer.fast_throttle = event_list.length < 500;
474-
this._timeline_ele.clearAndRender(this._templates.event_list_all(event_list, this._timeline_list.interval, this._event_id, this._timeline_width, x0, x1));
475-
this._timeline_times_ele.clearAndRender(this._templates.timeline_markers(x0, x1, this._timeline_width));
511+
this._timeline_ele.clearAndRender(this._templates.event_list_all(event_list, interval, this._event_id, width, x0, x1));
512+
this._timeline_times_ele.clearAndRender(this._templates.timeline_markers(x0, x1, width));
513+
this._legend_ele.clearAndRender(this._templates.legend(aggregated_event_list));
476514
};
477515

478516
this._get_timeline_area = function()
@@ -483,6 +521,16 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
483521
};
484522
};
485523

524+
this._get_timeline_duration = function()
525+
{
526+
return this._timeline_list.interval.end;
527+
};
528+
529+
this._get_timeline_ele_width = function()
530+
{
531+
return this._timeline_width;
532+
};
533+
486534
this._init = function(id, name, container_class, html, default_handler)
487535
{
488536
View.prototype.init.call(this, id, name, container_class, html, default_handler);
@@ -507,7 +555,9 @@ var ProfilerView = function(id, name, container_class, html, default_handler)
507555
this._zoomer = new Zoomer({
508556
reset_to_default_area: this._reset_timeline_area.bind(this),
509557
set_area: this._set_timeline_area.bind(this),
510-
get_current_area: this._get_timeline_area.bind(this)
558+
get_current_area: this._get_timeline_area.bind(this),
559+
get_duration: this._get_timeline_duration.bind(this),
560+
get_model_element_width: this._get_timeline_ele_width.bind(this)
511561
});
512562

513563
Tooltips.register("profiler-tooltip-url", true, false);

0 commit comments

Comments
 (0)