[Jifty-commit] jifty-plugin-profilebehaviour branch, master, updated. 9dfec5c944ed22c114778de0ff5703592c4d333b
Jifty commits
jifty-commit at lists.jifty.org
Fri Jan 15 14:15:58 EST 2010
The branch, master has been updated
via 9dfec5c944ed22c114778de0ff5703592c4d333b (commit)
via 832890e2ff517e45fd4c3c4f9e51d5783f4508f4 (commit)
via 34cafb845f307683b18af6e4cee4bbf25db181b3 (commit)
via 10861f0a260a082bdabe8f27e70276d27da4e2ab (commit)
via 312c960e3e054f7c2acd92f9d56e43c319d60e2c (commit)
from 84caf5a2289d3a7ce053dde89b8ae4ab053d8382 (commit)
Summary of changes:
lib/Jifty/Plugin/ProfileBehaviour.pm | 8 +-
share/web/static/css/behaviour-profile.css | 15 +-
share/web/static/js/behaviour.js | 337 +++++++++++++---------------
3 files changed, 170 insertions(+), 190 deletions(-)
- Log -----------------------------------------------------------------
commit 312c960e3e054f7c2acd92f9d56e43c319d60e2c
Author: Thomas Sibley <trs at bestpractical.com>
Date: Fri Jan 15 13:06:55 2010 -0500
Kill tabs
diff --git a/share/web/static/js/behaviour.js b/share/web/static/js/behaviour.js
index 727fa8d..dd944ca 100644
--- a/share/web/static/js/behaviour.js
+++ b/share/web/static/js/behaviour.js
@@ -1,45 +1,15 @@
/*
- Modified to fix some bugs, use a different css query engine, and to
- to use JSAN classes.
-
- Based on Behaviour v1.1 by Ben Nolan, June 2005, which was based
- largely on the work of Simon Willison.
-
- Usage:
-
- var myrules = {
- 'b.someclass' : function(element){
- element.onclick = function(){
- alert(this.innerHTML);
- }
- },
- '#someid u' : function(element){
- element.onmouseover = function(){
- this.innerHTML = "BLAH!";
- }
- }
- };
-
- Behaviour.register(myrules);
-
- // Call Behaviour.apply() to re-apply the rules (if you
- // update the dom, etc).
-
-
- This Behaviour has been modified to keep track of timing
+ This Jifty Behaviour has been modified to keep track of timing
information and render it to an on-screen display for profiling
purposes
*/
-JSAN.use("DOM.Events");
-JSAN.use("Upgrade.Array.push");
-
var Behaviour = {
profileData: {
- calls: [],
- applyTime: 0,
- searchTime: 0,
- numCalls: 0
+ calls: [],
+ applyTime: 0,
+ searchTime: 0,
+ numCalls: 0
},
list: new Array(),
@@ -48,178 +18,178 @@ var Behaviour = {
},
apply: function() {
- var root = arguments[0];
- if(root) root = $(root);
- var _applyStart = new Date();
- var profile = {
- searchTimes: {},
- applyTimes: {},
- funcs: {},
- searchTime: 0,
- applyTime: 0,
- caller: Behaviour.apply.caller
- };
+ var root = arguments[0];
+ if(root) root = $(root);
+ var _applyStart = new Date();
+ var profile = {
+ searchTimes: {},
+ applyTimes: {},
+ funcs: {},
+ searchTime: 0,
+ applyTime: 0,
+ caller: Behaviour.apply.caller
+ };
for (var h = 0; sheet = Behaviour.list[h]; h++) {
for (var selector in sheet) {
- var start = new Date();
+ var start = new Date();
var elements = cssQuery(selector, root);
- var searchDone = new Date();
- profile.searchTimes[selector] = searchDone - start;
- profile.searchTime += profile.searchTimes[selector];
+ var searchDone = new Date();
+ profile.searchTimes[selector] = searchDone - start;
+ profile.searchTime += profile.searchTimes[selector];
if ( !elements ) continue;
for (var i = 0; element = elements[i]; i++) {
sheet[selector](element);
- }
- profile.applyTimes[selector] = new Date() - searchDone;
- profile.applyTime += profile.applyTimes[selector];
- profile.funcs[selector] = sheet[selector];
+ }
+ profile.applyTimes[selector] = new Date() - searchDone;
+ profile.applyTime += profile.applyTimes[selector];
+ profile.funcs[selector] = sheet[selector];
}
}
- Behaviour.profileData.calls.push(profile);
- Behaviour.profileData.numCalls++;
- Behaviour.profileData.searchTime += profile.searchTime;
- Behaviour.profileData.applyTime += profile.applyTime;
+ Behaviour.profileData.calls.push(profile);
+ Behaviour.profileData.numCalls++;
+ Behaviour.profileData.searchTime += profile.searchTime;
+ Behaviour.profileData.applyTime += profile.applyTime;
},
showProfile: function() {
- var pane = this.createElement('div');
- pane.id = 'behaviour-profile-data';
+ var pane = this.createElement('div');
+ pane.id = 'behaviour-profile-data';
- var title = this.createElement('div');
- title.appendChild(document.createTextNode('Behaviour profiling information'));
- title.className = 'title';
- var close = this.createElement('a', 'close', '[close]');
- close.href = '#';
- close.onclick = function() { Element.remove($('behaviour-profile-data')); }
+ var title = this.createElement('div');
+ title.appendChild(document.createTextNode('Behaviour profiling information'));
+ title.className = 'title';
+ var close = this.createElement('a', 'close', '[close]');
+ close.href = '#';
+ close.onclick = function() { Element.remove($('behaviour-profile-data')); }
- pane.appendChild(close);
- pane.appendChild(title);
-
- pane.appendChild(Behaviour._callData());
+ pane.appendChild(close);
+ pane.appendChild(title);
+
+ pane.appendChild(Behaviour._callData());
- document.getElementsByTagName('body')[0].appendChild(pane);
+ document.getElementsByTagName('body')[0].appendChild(pane);
},
_callData: function() {
- list = this.createElement('ul', 'section');
-
- for( var i = 0; i < Behaviour.profileData.calls.length; i++ ) {
- var call = Behaviour.profileData.calls[i];
- var item = this.createElement('li', 'call');
- var text = call.caller.length == 0 ? ' (Page load)' : ' (AJAX)';
- var title = this.createElement('div', 'title', 'Call ' + i + text);
- item.appendChild(title);
-
- var table = this.createElement('table');
- var head = this.createElement('tr');
- head.appendChild(this.createElement('th', 'selector', 'Selector'));
- head.appendChild(this.createElement('th', 'time search', 'cssQuery time'));
- head.appendChild(this.createElement('th', 'time apply', 'Function time'));
- head.appendChild(this.createElement('th', 'time total', 'Total time'));
- head.appendChild(this.createElement('th'));
- table.appendChild(head);
-
- var searchTimes = $H(call.searchTimes).keys().sort(function(a,b) {
- var timeA = call.searchTimes[a] + call.applyTimes[a];
- var timeB = call.searchTimes[b] + call.applyTimes[b];
-
- if(timeA < timeB) {
- return 1;
- } else if(timeA > timeB) {
- return -1;
- } else {
- return 0;
- }
- });
-
- for(var j = 0; j < searchTimes.length; j++) {
- var k = searchTimes[j];
- var tr = this.createElement('tr');
- tr.appendChild(this.createElement('td', 'selector', k));
- tr.appendChild(this.createElement('td', 'time search', call.searchTimes[k]));
- tr.appendChild(this.createElement('td', 'time apply', call.applyTimes[k]));
- tr.appendChild(this.createElement('td', 'time total', call.searchTimes[k] + call.applyTimes[k]));
-
- var code = this.createElement('td', 'code');
- var a = this.createElement('a', null, '[code]');
- a.href = '#';
- var src = this.createElement('code', null, call.funcs[k]);
- var id = 'code-' + i + '-' + j;
- src.id = id;
- src.style.display = 'none';
- // Kludge to make the onclick function close over id properly
- (function (id) {
- a.onclick = function() { Element.toggle($(id)); return false; }
- })(id);
-
- var div = this.createElement('div');
- div.appendChild(src);
- code.appendChild(div);
- code.appendChild(a);
- tr.appendChild(code);
- table.appendChild(tr);
- }
-
- item.appendChild(table);
-
- item.appendChild(this.createElement('div','totals',
- 'Total: '
- + call.searchTime + ' search, '
- + call.applyTime + ' apply, '
- + (call.searchTime + call.applyTime) + ' total'));
-
-
- list.appendChild(item);
- }
-
- return list;
+ list = this.createElement('ul', 'section');
+
+ for( var i = 0; i < Behaviour.profileData.calls.length; i++ ) {
+ var call = Behaviour.profileData.calls[i];
+ var item = this.createElement('li', 'call');
+ var text = call.caller.length == 0 ? ' (Page load)' : ' (AJAX)';
+ var title = this.createElement('div', 'title', 'Call ' + i + text);
+ item.appendChild(title);
+
+ var table = this.createElement('table');
+ var head = this.createElement('tr');
+ head.appendChild(this.createElement('th', 'selector', 'Selector'));
+ head.appendChild(this.createElement('th', 'time search', 'cssQuery time'));
+ head.appendChild(this.createElement('th', 'time apply', 'Function time'));
+ head.appendChild(this.createElement('th', 'time total', 'Total time'));
+ head.appendChild(this.createElement('th'));
+ table.appendChild(head);
+
+ var searchTimes = $H(call.searchTimes).keys().sort(function(a,b) {
+ var timeA = call.searchTimes[a] + call.applyTimes[a];
+ var timeB = call.searchTimes[b] + call.applyTimes[b];
+
+ if(timeA < timeB) {
+ return 1;
+ } else if(timeA > timeB) {
+ return -1;
+ } else {
+ return 0;
+ }
+ });
+
+ for(var j = 0; j < searchTimes.length; j++) {
+ var k = searchTimes[j];
+ var tr = this.createElement('tr');
+ tr.appendChild(this.createElement('td', 'selector', k));
+ tr.appendChild(this.createElement('td', 'time search', call.searchTimes[k]));
+ tr.appendChild(this.createElement('td', 'time apply', call.applyTimes[k]));
+ tr.appendChild(this.createElement('td', 'time total', call.searchTimes[k] + call.applyTimes[k]));
+
+ var code = this.createElement('td', 'code');
+ var a = this.createElement('a', null, '[code]');
+ a.href = '#';
+ var src = this.createElement('code', null, call.funcs[k]);
+ var id = 'code-' + i + '-' + j;
+ src.id = id;
+ src.style.display = 'none';
+ // Kludge to make the onclick function close over id properly
+ (function (id) {
+ a.onclick = function() { Element.toggle($(id)); return false; }
+ })(id);
+
+ var div = this.createElement('div');
+ div.appendChild(src);
+ code.appendChild(div);
+ code.appendChild(a);
+ tr.appendChild(code);
+ table.appendChild(tr);
+ }
+
+ item.appendChild(table);
+
+ item.appendChild(this.createElement('div','totals',
+ 'Total: '
+ + call.searchTime + ' search, '
+ + call.applyTime + ' apply, '
+ + (call.searchTime + call.applyTime) + ' total'));
+
+
+ list.appendChild(item);
+ }
+
+ return list;
},
// Convenience method for the above
createElement: function (elt, className, text) {
- elt = elt ? elt : 'div';
- var d = document.createElement(elt);
- if(className) d.className = className;
- if(text) d.appendChild(document.createTextNode(text));
- return d;
+ elt = elt ? elt : 'div';
+ var d = document.createElement(elt);
+ if(className) d.className = className;
+ if(text) d.appendChild(document.createTextNode(text));
+ return d;
},
onLoad: function () {
- // Make sure we only run once
- if(Behaviour.loaded) return;
- Behaviour.loaded = true;
- Behaviour.apply();
-
- // Add the profiling CSS to the document
- var head = document.getElementsByTagName('head')[0];
- var link = document.createElement('link');
- link.rel = 'stylesheet';
- link.type = 'text/css';
- link.href = '/css/behaviour-profile.css';
- head.appendChild(link);
-
- var open = this.createElement('a', null, 'Behaviour profile');
- open.id = 'show-behaviour-profile';
- open.href ='#';
- open.onclick = function() { Behaviour.toggleProfile() }
- var div = this.createElement('div');
- div.appendChild(open);
- document.getElementsByTagName('body')[0].appendChild(div);
+ // Make sure we only run once
+ if(Behaviour.loaded) return;
+ Behaviour.loaded = true;
+ Behaviour.apply();
+
+ // Add the profiling CSS to the document
+ var head = document.getElementsByTagName('head')[0];
+ var link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.type = 'text/css';
+ link.href = '/css/behaviour-profile.css';
+ head.appendChild(link);
+
+ var open = this.createElement('a', null, 'Behaviour profile');
+ open.id = 'show-behaviour-profile';
+ open.href ='#';
+ open.onclick = function() { Behaviour.toggleProfile() }
+ var div = this.createElement('div');
+ div.appendChild(open);
+ document.getElementsByTagName('body')[0].appendChild(div);
},
toggleProfile: function () {
- var e = $('behaviour-profile-data');
- if(e) {
- Element.remove(e);
- } else {
- this.showProfile();
- }
+ var e = $('behaviour-profile-data');
+ if(e) {
+ Element.remove(e);
+ } else {
+ this.showProfile();
+ }
}
}
commit 10861f0a260a082bdabe8f27e70276d27da4e2ab
Author: Thomas Sibley <trs at bestpractical.com>
Date: Fri Jan 15 14:13:12 2010 -0500
Fix spelling and bump version
diff --git a/lib/Jifty/Plugin/ProfileBehaviour.pm b/lib/Jifty/Plugin/ProfileBehaviour.pm
index 6543996..e5e6502 100644
--- a/lib/Jifty/Plugin/ProfileBehaviour.pm
+++ b/lib/Jifty/Plugin/ProfileBehaviour.pm
@@ -4,15 +4,15 @@ use warnings;
package Jifty::Plugin::ProfileBehaviour;
use base qw/Jifty::Plugin/;
-our $VERSION = '0.01';
+our $VERSION = '0.02';
=head1 NAME
-Jifty::Plugin::ProfileBehaviour - Overrides behavior.js to add profiling information
+Jifty::Plugin::ProfileBehaviour - Overrides behaviour.js to add profiling information
=head1 DESCRIPTION
-This plugin overrides the stock behavior.js library to add timing and
+This plugin overrides the stock behaviour.js library to add timing and
profiling information. Add it if your web pages are slow to style,
and you want to track down which rules are causing the slowness.
@@ -25,7 +25,7 @@ Adds the CSS file needed for on-screen profiling.
=cut
sub init {
- Jifty->web->add_css('behavior-profile.css');
+ Jifty->web->add_css('behaviour-profile.css');
}
1;
commit 34cafb845f307683b18af6e4cee4bbf25db181b3
Author: Thomas Sibley <trs at bestpractical.com>
Date: Fri Jan 15 14:13:48 2010 -0500
Update CSS styles
diff --git a/share/web/static/css/behaviour-profile.css b/share/web/static/css/behaviour-profile.css
index f81f0b1..590b84c 100644
--- a/share/web/static/css/behaviour-profile.css
+++ b/share/web/static/css/behaviour-profile.css
@@ -6,7 +6,7 @@
top: 5%;
background-color: white;
border: 2px solid black;
- overflow: scroll;
+ overflow: auto;
}
#behaviour-profile-data div.title {
@@ -29,11 +29,18 @@
#behaviour-profile-data .code code {
position: absolute;
- background-color: lightgrey;
- border: 1px solid black;
z-index: 100;
- white-space: pre;
+ top: 6em;
+ left: 2em;
+ width: 80%;
+
+ background-color: #eee;
+ border: 1px solid black;
+ padding: 0.3em;
text-align: left;
+
+ white-space: pre;
+ overflow: hidden;
}
#behaviour-profile-data table td.time {
commit 832890e2ff517e45fd4c3c4f9e51d5783f4508f4
Author: Thomas Sibley <trs at bestpractical.com>
Date: Fri Jan 15 14:14:56 2010 -0500
Update to work with current Jifty and jQuery
diff --git a/share/web/static/js/behaviour.js b/share/web/static/js/behaviour.js
index dd944ca..4db4c20 100644
--- a/share/web/static/js/behaviour.js
+++ b/share/web/static/js/behaviour.js
@@ -11,7 +11,8 @@ var Behaviour = {
searchTime: 0,
numCalls: 0
},
- list: new Array(),
+
+ list: [],
register: function(sheet) {
Behaviour.list.push(sheet);
@@ -19,8 +20,6 @@ var Behaviour = {
apply: function() {
var root = arguments[0];
- if(root) root = $(root);
- var _applyStart = new Date();
var profile = {
searchTimes: {},
applyTimes: {},
@@ -32,18 +31,21 @@ var Behaviour = {
for (var h = 0; sheet = Behaviour.list[h]; h++) {
for (var selector in sheet) {
+
var start = new Date();
- var elements = cssQuery(selector, root);
- var searchDone = new Date();
- profile.searchTimes[selector] = searchDone - start;
+ var elements = jQuery(selector, root);
+ var done = new Date();
+
+ profile.searchTimes[selector] = done - start;
profile.searchTime += profile.searchTimes[selector];
- if ( !elements ) continue;
+ start = new Date();
+ elements.each(function() {
+ sheet[selector](this);
+ });
+ done = new Date();
- for (var i = 0; element = elements[i]; i++) {
- sheet[selector](element);
- }
- profile.applyTimes[selector] = new Date() - searchDone;
+ profile.applyTimes[selector] = done - start;
profile.applyTime += profile.applyTimes[selector];
profile.funcs[selector] = sheet[selector];
}
@@ -64,7 +66,7 @@ var Behaviour = {
title.className = 'title';
var close = this.createElement('a', 'close', '[close]');
close.href = '#';
- close.onclick = function() { Element.remove($('behaviour-profile-data')); }
+ close.onclick = function() { jQuery('#behaviour-profile-data').remove(); };
pane.appendChild(close);
pane.appendChild(title);
@@ -88,24 +90,29 @@ var Behaviour = {
var table = this.createElement('table');
var head = this.createElement('tr');
head.appendChild(this.createElement('th', 'selector', 'Selector'));
- head.appendChild(this.createElement('th', 'time search', 'cssQuery time'));
- head.appendChild(this.createElement('th', 'time apply', 'Function time'));
- head.appendChild(this.createElement('th', 'time total', 'Total time'));
+ head.appendChild(this.createElement('th', 'time search', 'Query time (ms)'));
+ head.appendChild(this.createElement('th', 'time apply', 'Apply time (ms)'));
+ head.appendChild(this.createElement('th', 'time total', 'Total time (ms)'));
head.appendChild(this.createElement('th'));
table.appendChild(head);
- var searchTimes = $H(call.searchTimes).keys().sort(function(a,b) {
- var timeA = call.searchTimes[a] + call.applyTimes[a];
- var timeB = call.searchTimes[b] + call.applyTimes[b];
-
- if(timeA < timeB) {
- return 1;
- } else if(timeA > timeB) {
- return -1;
- } else {
- return 0;
- }
- });
+ var keys = [];
+ jQuery.each(call.searchTimes, function(k,v) {
+ keys.push( k );
+ });
+
+ var searchTimes = keys.sort(function(a,b) {
+ var timeA = call.searchTimes[a] + call.applyTimes[a];
+ var timeB = call.searchTimes[b] + call.applyTimes[b];
+
+ if(timeA < timeB) {
+ return 1;
+ } else if(timeA > timeB) {
+ return -1;
+ } else {
+ return 0;
+ }
+ });
for(var j = 0; j < searchTimes.length; j++) {
var k = searchTimes[j];
@@ -119,12 +126,12 @@ var Behaviour = {
var a = this.createElement('a', null, '[code]');
a.href = '#';
var src = this.createElement('code', null, call.funcs[k]);
- var id = 'code-' + i + '-' + j;
+ var id = 'code-' + i + '-' + j;
src.id = id;
src.style.display = 'none';
// Kludge to make the onclick function close over id properly
(function (id) {
- a.onclick = function() { Element.toggle($(id)); return false; }
+ a.onclick = function() { jQuery('#'+id).toggle(); return false; }
})(id);
var div = this.createElement('div');
@@ -139,9 +146,9 @@ var Behaviour = {
item.appendChild(this.createElement('div','totals',
'Total: '
- + call.searchTime + ' search, '
- + call.applyTime + ' apply, '
- + (call.searchTime + call.applyTime) + ' total'));
+ + call.searchTime + 'ms search, '
+ + call.applyTime + 'ms apply, '
+ + (call.searchTime + call.applyTime) + 'ms total'));
list.appendChild(item);
@@ -162,7 +169,7 @@ var Behaviour = {
onLoad: function () {
// Make sure we only run once
- if(Behaviour.loaded) return;
+ if (Behaviour.loaded) return;
Behaviour.loaded = true;
Behaviour.apply();
@@ -184,14 +191,18 @@ var Behaviour = {
},
toggleProfile: function () {
- var e = $('behaviour-profile-data');
- if(e) {
- Element.remove(e);
+ var e = jQuery('#behaviour-profile-data');
+ if (e.length) {
+ e.remove();
} else {
this.showProfile();
}
}
-}
+};
+(function($) {
+ $(document).ready(function(){
+ Behaviour.onLoad();
+ });
+})(jQuery);
-DOM.Events.addListener( window, "load", function() { Behaviour.onLoad() } );
commit 9dfec5c944ed22c114778de0ff5703592c4d333b
Author: Thomas Sibley <trs at bestpractical.com>
Date: Fri Jan 15 14:15:15 2010 -0500
Don't add the CSS again since that's done in Perl
diff --git a/share/web/static/js/behaviour.js b/share/web/static/js/behaviour.js
index 4db4c20..3f0049f 100644
--- a/share/web/static/js/behaviour.js
+++ b/share/web/static/js/behaviour.js
@@ -173,14 +173,6 @@ var Behaviour = {
Behaviour.loaded = true;
Behaviour.apply();
- // Add the profiling CSS to the document
- var head = document.getElementsByTagName('head')[0];
- var link = document.createElement('link');
- link.rel = 'stylesheet';
- link.type = 'text/css';
- link.href = '/css/behaviour-profile.css';
- head.appendChild(link);
-
var open = this.createElement('a', null, 'Behaviour profile');
open.id = 'show-behaviour-profile';
open.href ='#';
-----------------------------------------------------------------------
More information about the Jifty-commit
mailing list