+2013-10-22 Ryosuke Niwa <rniwa@webkit.org>
+
+ Make tables on the new flakiness dashboard sortable
+ https://bugs.webkit.org/show_bug.cgi?id=123141
+
+ Reviewed by Simon Fraser.
+
+ Use jquery.tablesorter.js to make test and builder tables sortable. The jquery plugin is already used by run-perf-tests.
+
+ * index.html:
+ (TestResultsView._populateTestPane): Add tablesorter to the class name and wrap tr's inside a tbody so that tablesorter
+ could sort them.
+ (TestResultsView._populateBuilderPane): Ditto.
+ * main.css:
+ (.resultsTable thead): Use cursor: pointer to signify the fact it's clickable.
+ (.resultsTable th): Don't repeat arrows.
+ (.resultsTable th.headerSortUp): Inline SVG up arrow.
+ (.resultsTable th.headerSortDown): Inline SVG down arrow.
+
2013-10-21 Ryosuke Niwa <rniwa@webkit.org>
New flakiness dashboard should hyperlink test names, WebKit revisions, and bubbles
<title>WebKit Test Results</title>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="main.css">
+<script src="https://svn.webkit.org/repository/webkit/!svn/bc/128779/trunk/PerformanceTests/Dromaeo/resources/dromaeo/web/lib/jquery-1.6.4.js"></script>
+<script src="https://svn.webkit.org/repository/webkit/!svn/bc/128779/trunk/PerformanceTests/resources/jquery.tablesorter.min.js"></script>
<script src="js/autocompleter.js"></script>
<script src="js/build.js"></script>
<script src="js/dom.js"></script>
TestResultsView._populateTestPane = function(testName, results, section) {
var test = {name: testName, category: 'LayoutTest'}; // FIXME: Use the real test object.
- var table = element('table', {'class': 'resultsTable'}, [element('caption', [this._linkifiedTestName(test)])]);
+ var table = element('table', {'class': 'resultsTable tablesorter'}, [element('caption', [this._linkifiedTestName(test)])]);
table.appendChild(this._createTestResultHeader('Builder'));
var resultsByBuilder = results['builders'];
}
buildTimes.sort(function (a, b) { return b - a; });
+ var tbody = element('tbody');
for (var builderId in resultsByBuilder) {
var builder = this._builders[builderId];
// FIXME: Add a master name if there is more than one.
- table.appendChild(this._createTestResultRow(builder.name, resultsByBuilder[builderId], builder, buildTimes));
+ tbody.appendChild(this._createTestResultRow(builder.name, resultsByBuilder[builderId], builder, buildTimes));
}
+ table.appendChild(tbody);
section.appendChild(table);
+ $(table).tablesorter();
}
TestResultsView._linkifiedTestName = function (test) {
}
TestResultsView._populateBuilderPane = function(builderName, failureType, results, section) {
- var table = element('table', {'class': 'resultsTable'}, [element('caption', [builderName])]);
+ var table = element('table', {'class': 'resultsTable tablesorter'}, [element('caption', [builderName])]);
var resultsByBuilder = results['builders'];
var resultsByTests;
var builderId;
table.appendChild(this._createTestResultHeader('Test'));
+ var tbody = element('tbody');
var builder = this._builders[builderId];
for (var testId in resultsByTests) {
var results = resultsByTests[testId];
if (!results.length || !this._matchesFailureType(results, failureType, this._availableTests[testId].name))
continue;
this._createBuildsAndComputeSlownessOfResults(builderId, resultsByTests[testId]);
- table.appendChild(this._createTestResultRow(this._linkifiedTestName(this._availableTests[testId]), resultsByTests[testId], builder));
+ tbody.appendChild(this._createTestResultRow(this._linkifiedTestName(this._availableTests[testId]), resultsByTests[testId], builder));
}
+
+ table.appendChild(tbody);
section.appendChild(table);
+
+ $(table).tablesorter();
}
TestResultsView.fetchFailingTestsForBuilder = function (builderName, numberOfDays, failureType, doNotUpdateHash) {
vertical-align: bottom;
}
-.resultsTable tr:hover,
-.resultsTable tr:hover {
+.resultsTable thead {
+ cursor: pointer;
+}
+
+.resultsTable th {
+ background-repeat: no-repeat;
+ background-position: right 10px center;
+}
+
+.resultsTable th.headerSortUp {
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><polygon points='0,0 8,0 4,6' fill='#999'/></svg>");
+}
+
+.resultsTable th.headerSortDown {
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><polygon points='0,6 8,6 4,0' fill='#999'/></svg>");
+}
+
+.resultsTable tbody tr:hover {
background-color: #eee;
}