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));

View File

@@ -30,7 +30,7 @@
</script>
<script src="test-ui.js"></script>
<script>
document.write('<script src="../' + QUnit.config.lodashFilename + '.js"><\/script>');
document.write('<script src="../' + ui.buildName + '.js"><\/script>');
</script>
<script src="../vendor/backbone/backbone.js"></script>
<script src="../vendor/backbone/test/environment.js"></script>

View File

@@ -22,7 +22,7 @@
Object.keys = function() { return []; };
// load Lo-Dash and expose it to the bad `Object.keys` shim
document.write('<script src="../' + QUnit.config.lodashFilename + '.js"><\/script>');
document.write('<script src="../' + ui.buildName + '.js"><\/script>');
</script>
<script>
// store Lo-Dash to test for bad shim detection
@@ -33,7 +33,7 @@
delete Object._keys;
// load Lo-Dash again to overwrite the existing `_` value
document.write('<script src="../' + QUnit.config.lodashFilename + '.js"><\/script>');
document.write('<script src="../' + ui.buildName + '.js"><\/script>');
// load test.js if not using require.js
document.write(QUnit.urlParams.norequire
@@ -51,9 +51,9 @@
'baseUrl': '../vendor/requirejs/',
'urlArgs': 't=' + (+new Date),
'paths': {
'lodash': '../../' + QUnit.config.lodashFilename,
'shimmed': './../../' + QUnit.config.lodashFilename,
'underscore': '../underscore/../../' + QUnit.config.lodashFilename
'lodash': '../../' + ui.buildName,
'shimmed': './../../' + ui.buildName,
'underscore': '../underscore/../../' + ui.buildName
},
'shim': {
'shimmed': {

View File

@@ -10,14 +10,17 @@
/** A flag to determine if RequireJS should be loaded */
var norequire = /[?&]norequire=true(?:&|$)/.test(location.search);
/** The `ui` object */
var ui = {};
/*--------------------------------------------------------------------------*/
// assign `QUnit.config` properties
QUnit.config.lodashFilename = (function() {
// expose build name
ui.buildName = (function() {
switch (build) {
case 'prod': return 'lodash.min';
case 'custom': return 'lodash.custom.min';
case 'custom-debug': return 'lodash.custom';
case 'lodash-prod': return 'lodash.min';
case 'lodash-custom': return 'lodash.custom.min';
case 'lodash-custom-debug': return 'lodash.custom';
}
return 'lodash';
}());
@@ -28,7 +31,7 @@
'norequire': norequire
});
// initialize the build dropdown
// initialize controls
addEvent(window, 'load', function() {
function eventHandler(event) {
var search = location.search.replace(/^\?|&?(?:build|norequire)=[^&]*&?/g, '');
@@ -39,8 +42,8 @@
}
location.href =
location.href.split('?')[0] + '?' +
(search ? search + '&' : '') + 'build=' +
dropdown[dropdown.selectedIndex].value +
(search ? search + '&' : '') +
'build=' + buildList[buildList.selectedIndex].value +
(checkbox.checked ? '&norequire=true' : '');
}
@@ -50,18 +53,18 @@
toolbar.appendChild(span1);
toolbar.appendChild(span2);
dropdown.selectedIndex = (function() {
buildList.selectedIndex = (function() {
switch (build) {
case 'prod': return 1;
case 'custom': return 2;
case 'custom-debug': return 3;
case 'lodash-prod': return 1;
case 'lodash-custom': return 2;
case 'lodash-custom-debug': return 3;
}
return 0;
}());
checkbox.checked = norequire;
addEvent(checkbox, 'click', eventHandler);
addEvent(dropdown, 'change', eventHandler);
addEvent(buildList, 'change', eventHandler);
}
else {
setTimeout(init, 15);
@@ -78,16 +81,19 @@
span2.innerHTML =
'<label for="qunit-build">Build: </label>' +
'<select id="qunit-build">' +
'<option value="dev">Developement</option>' +
'<option value="prod">Production</option>' +
'<option value="custom">Custom</option>' +
'<option value="custom-debug">Custom (debug)</option>' +
'<option value="lodash-dev">Developement</option>' +
'<option value="lodash-prod">Production</option>' +
'<option value="lodash-custom">Custom</option>' +
'<option value="lodash-custom-debug">Custom (debug)</option>' +
'</select>';
var checkbox = span1.firstChild,
dropdown = span2.lastChild;
buildList = span2.lastChild;
init();
});
// expose `ui`
window.ui = ui;
}(this));

View File

@@ -31,7 +31,7 @@
</script>
<script src="test-ui.js"></script>
<script>
document.write('<script src="../' + QUnit.config.lodashFilename + '.js"><\/script>');
document.write('<script src="../' + ui.buildName + '.js"><\/script>');
</script>
<script src="../vendor/underscore/test/collections.js"></script>
<script src="../vendor/underscore/test/arrays.js"></script>