Add build dropdown to perf/index.html. [ci skip]

Former-commit-id: 669acae55ee53819fe4155aa0020cd40db7d6843
This commit is contained in:
John-David Dalton
2012-10-14 22:18:42 -07:00
parent 16748c0920
commit 0b8f1a9a58
6 changed files with 187 additions and 31 deletions

View File

@@ -13,17 +13,34 @@
position: absolute;
left: -9999em;
}
#FirebugUI {
top: 2em;
}
#perf-toolbar {
background-color: #EEE;
color: #5E740B;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
font-size: small;
padding: 0.5em 0 0.5em 2em;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../lodash.min.js"></script>
<script>
var lodash = _.noConflict();
</script>
<script src="../vendor/underscore/underscore-min.js"></script>
<div id="perf-toolbar"></div>
<script src="../vendor/platform.js/platform.js"></script>
<script src="../vendor/benchmark.js/benchmark.js"></script>
<script src="../vendor/firebug-lite/src/firebug-lite-debug.js"></script>
<script src="perf-ui.js"></script>
<script>
document.write('<script src="../' + ui.buildName + '.js"><\/script>');
</script>
<script>
var lodash = _.noConflict();
</script>
<script>
document.write('<script src="../' + ui.otherName + '.js"><\/script>');
</script>
<script src="perf.js"></script>
<script>
(function() {
@@ -39,7 +56,12 @@
if (!fbCommandLine) {
return setTimeout(init, 15);
}
fbUI.style.height = fbDoc.body.style.height = fbDoc.documentElement.style.height = '100%';
fbUI.style.height = (
Math.max(document.documentElement.clientHeight, document.body.clientHeight) -
document.getElementById('perf-toolbar').clientHeight
) + 'px';
fbDoc.body.style.height = fbDoc.documentElement.style.height = '100%';
setTimeout(run, 15);
}

128
perf/perf-ui.js Normal file
View File

@@ -0,0 +1,128 @@
;(function(window) {
'use strict';
/** The Lo-Dash build to load */
var build = (/build=([^&]+)/.exec(location.search) || [])[1];
/** The other library to load */
var other = (/other=([^&]+)/.exec(location.search) || [])[1];
/** The UI object */
var ui = {};
/*--------------------------------------------------------------------------*/
/**
* Registers an event listener on an element.
*
* @private
* @param {Element} element The element.
* @param {String} eventName The name of the event.
* @param {Function} handler The event handler.
* @returns {Element} The element.
*/
function addListener(element, eventName, handler) {
if (typeof element.addEventListener != 'undefined') {
element.addEventListener(eventName, handler, false);
} else if (typeof element.attachEvent != 'undefined') {
element.attachEvent('on' + eventName, handler);
}
}
/*--------------------------------------------------------------------------*/
ui.buildName = (function() {
switch (build) {
case 'lodash-dev': return 'lodash';
case 'lodash-custom': return 'lodash.custom.min';
case 'lodash-custom-debug': return 'lodash.custom';
}
return 'lodash.min';
}());
ui.otherName = (function() {
switch (other) {
case 'lodash-dev': return 'lodash';
case 'lodash-prod': return 'lodash.min';
case 'lodash-custom': return 'lodash.custom.min';
case 'lodash-custom-debug': return 'lodash.custom';
case 'underscore-dev': return 'vendor/underscore/underscore';
}
return 'vendor/underscore/underscore-min';
}());
// initialize dropdowns
addListener(window, 'load', function() {
function eventHandler(event) {
var search = location.search.replace(/^\?|&?(?:build|other)=[^&]*&?/g, '');
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
location.href =
location.href.split('?')[0] + '?' +
(search ? search + '&' : '') +
'build=' + buildList[buildList.selectedIndex].value + '&' +
'other=' + otherList[otherList.selectedIndex].value;
}
var span1 = document.createElement('span');
span1.style.cssText = 'float:right';
span1.innerHTML =
'<label for="perf-build">Build: </label>' +
'<select id="perf-build">' +
'<option value="lodash-dev">Lo-Dash</option>' +
'<option value="lodash-prod">Lo-Dash (minified)</option>' +
'<option value="lodash-custom">Lo-Dash (custom)</option>' +
'<option value="lodash-custom-debug">Custom (debug)</option>' +
'</select>';
var span2 = document.createElement('span');
span2.style.cssText = 'float:right';
span2.innerHTML =
'<label for="perf-other">Other Library: </label>' +
'<select id="perf-other">' +
'<option value="underscore-dev">Underscore</option>' +
'<option value="underscore-prod">Underscore (minified)</option>' +
'<option value="lodash-dev">Lo-Dash</option>' +
'<option value="lodash-prod">Lo-Dash (minified)</option>' +
'<option value="lodash-custom">Lo-Dash (custom)</option>' +
'<option value="lodash-custom-debug">Lo-Dash (custom debug)</option>' +
'</select>';
var buildList = span1.lastChild,
otherList = span2.lastChild,
toolbar = document.getElementById('perf-toolbar');
toolbar.appendChild(span2);
toolbar.appendChild(span1);
buildList.selectedIndex = (function() {
switch (build) {
case 'lodash-dev': return 0;
case 'lodash-custom': return 2;
case 'lodash-custom-debug': return 3;
}
return 1;
}());
otherList.selectedIndex = (function() {
switch (other) {
case 'underscore-dev': return 0;
case 'lodash-dev': return 2;
case 'lodash-prod': return 3;
case 'lodash-custom': return 4;
case 'lodash-custom-debug': return 5;
}
return 1;
}());
addListener(buildList, 'change', eventHandler);
addListener(otherList, 'change', eventHandler);
});
// expose `ui`
window.ui = ui;
}(this));