html: Use CSS3 for zebra-striping the tables.

Most browsers support the :nth-child selector by now, which allows us to
zebra-stripe the tables in CSS rather than making the python code
annotate every row with an 'a' or 'b' class.

While we're at it, stripe the pass/fail/crash results too.  Based on
some CSS fragments, this was the intent all along, but didn't work.

This also changes the striping slightly: it now stripes purely based on
whether the row is even/odd, rather than striping on a per-group basis.

Signed-off-by: Kenneth Graunke <kenneth@whitecape.org>
Reviewed-by: Dylan Baker <baker.dylan.c@gmail.com>

6 files changed, 31 insertions, 85 deletions

diff --git a/templates/index.css b/templates/index.css
index 6d9e903a3..0e48e1cba 100644
--- a/templates/index.css
+++ b/templates/index.css
@@ -31,92 +31,36 @@ td:first-child > div {
 	background-color: #c8c838
 }
 
-.a {
-	background-color: #ffff95
-}
-
-.b {
-	background-color: #e1e183
-}
-
-.skip {
-	text-align: right;
-	background-color: #b0b0b0;
-}
-
-.warn {
-	text-align: right;
-	background-color: #ff9020;
-}
-
-.fail {
+td.skip, td.warn, td.fail, td.pass, td.trap, td.abort, td.crash {
 	text-align: right;
-	background-color: #ff2020;
 }
 
-.pass {
-	text-align: right;
-	background-color: #20ff20;
-}
-
-.crash {
-	text-align: right;
-	background-color: #000000;
+td.trap, td.abort, td.crash {
 	color: #ffffff;
 }
 
-.skipa {
-	text-align: right;
-	background-color: #d0d0d0;
-}
-
-.warna {
-	text-align: right;
-	background-color: #ffc050;
-}
-
-.faila {
-	text-align: right;
-	background-color: #ff5050;
-}
-
-.passa {
-	text-align: right;
-	background-color: #50ff50;
-}
-
-.crasha {
-	text-align: right;
-	background-color: #141414;
+td.trap a, td.abort a, td.crash a {
 	color: #ffffff;
 }
 
-.skipb {
-	text-align: right;
-	background-color: #c0c0c0;
-}
+tr:nth-child(odd)  > td > div:not(.head) { background-color: #ffff95 }
+tr:nth-child(even) > td > div:not(.head) { background-color: #e1e183 }
 
-.warnb {
-	text-align: right;
-	background-color: #ffa040;
-}
+tr:nth-child(odd)  td.pass  { background-color: #20ff20; }
+tr:nth-child(even) td.pass  { background-color: #15e015; }
 
-.failb {
-	text-align: right;
-	background-color: #ff4040;
-}
+tr:nth-child(odd)  td.skip  { background-color: #b0b0b0; }
+tr:nth-child(even) td.skip  { background-color: #a0a0a0; }
 
-.passb {
-	text-align: right;
-	background-color: #40ff40;
-}
+tr:nth-child(odd)  td.warn  { background-color: #ff9020; }
+tr:nth-child(even) td.warn  { background-color: #ef8010; }
 
-.crashb {
-	text-align: right;
-	background-color: #0a0a0a;
-	color: #ffffff;
-}
+tr:nth-child(odd)  td.fail  { background-color: #ff2020; }
+tr:nth-child(even) td.fail  { background-color: #e00505; }
 
-td.crasha a, td.crashb a {
-	color: #ffffff;
-}
+tr:nth-child(odd)  td.trap  { background-color: #111111; }
+tr:nth-child(even) td.trap  { background-color: #000000; }
+tr:nth-child(odd)  td.abort { background-color: #111111; }
+tr:nth-child(even) td.abort { background-color: #000000; }
+tr:nth-child(odd)  td.crash { background-color: #111111; }
+tr:nth-child(even) td.crash { background-color: #000000; }
diff --git a/templates/index_test.html b/templates/index_test.html
index 4b0964e7c..2ec6d07c7 100644
--- a/templates/index_test.html
+++ b/templates/index_test.html
@@ -1,4 +1,4 @@
 <tr>
-	<td><div style="margin-left: %(indent)sem" class="%(alternate)s">%(name)s</div></td>
+	<td><div style="margin-left: %(indent)sem">%(name)s</div></td>
 	%(testruns)s
 </tr>
diff --git a/templates/index_test_testrun.html b/templates/index_test_testrun.html
index 43de898bf..8a8b0981c 100644
--- a/templates/index_test_testrun.html
+++ b/templates/index_test_testrun.html
@@ -1 +1 @@
-<td class="%(status)s%(alternate)s"><a href="%(link)s">%(status)s</a></td>
+<td class="%(status)s"><a href="%(link)s">%(status)s</a></td>
diff --git a/templates/result.css b/templates/result.css
index 7c6a557ce..19bfedc83 100644
--- a/templates/result.css
+++ b/templates/result.css
@@ -12,24 +12,26 @@ table {
 	border-collapse: collapse;
 }
 
-.head {
+th {
 	background-color: #c8c838
 }
 
-.a {
+/* Second column (details) */
+tr:nth-child(even) > td {
 	background-color: #ffff95
 }
 
-.b {
+tr:nth-child(odd) > td {
 	background-color: #e1e183
 }
 
-.bara {
+/* First column (labels) */
+tr:nth-child(even) > td:first-child {
 	vertical-align: top;
 	background-color: #ffff85;
 }
 
-.barb {
+tr:nth-child(odd) > td:first-child {
 	vertical-align: top;
 	background-color: #d1d173;
 }
diff --git a/templates/result.html b/templates/result.html
index f90ff3d7a..5fed59318 100644
--- a/templates/result.html
+++ b/templates/result.html
@@ -16,7 +16,7 @@
 		</p>
 		<h2>Details</h2>
 		<table>
-			<tr class="head">
+			<tr>
 				<th>Detail</th>
 				<th>Value</th>
 			</tr>
diff --git a/templates/result_detail.html b/templates/result_detail.html
index d735d0da0..8398fa3d9 100644
--- a/templates/result_detail.html
+++ b/templates/result_detail.html
@@ -1,4 +1,4 @@
 <tr>
-	<td class="bar%(alternate)s">%(name)s</td>
-	<td class="%(alternate)s">%(value)s</td>
+	<td>%(name)s</td>
+	<td>%(value)s</td>
 </tr>