Better test result rendering

static/style.css

@@ -56,10 +56,9 @@ li.ok {
 	background: url('images/ok.png') no-repeat left top;
 }
 li.failure, li.warning, li.ok {
-	list-style-type: none;
-	margin-left:-20px;
-	padding-left: 20px;
+	padding-left: 30px;
 	background-size: 16px 16px;
+	background-position: 5px 10px;
 }
 
 li.failureExpand, li.prExpand {
@@ -75,10 +74,6 @@ li.failureExpand a {
 	color:#CC0000;
 }
 
-.prTestFailures li.failure, .verbosePr {
-	margin-bottom:1.12em;
-}
-
 .invocation {
 	font-family: monospace;
 }

ts/test-results.tsx

@@ -729,7 +729,7 @@ class FailureFilterLink extends React.Component<FailureFilterLinkProps, {}> {
 function renderFailureBase(failure: Failure, extra:JSX.Element=null) {
 	let testLine = failure.test ? <div className="failedTestName">{failure.test}</div> : null
 	let key = failure.step + "!" + failure.test
-	return <li key={key} className="failure">
+	return <li key={key} className="failure list-group-item">
 		<div>
 			{failureDescribe(failure.kind)} while running <span className="invocation">{failure.step}</span>
 		</div>
@@ -901,7 +901,7 @@ class PrBuildDisplay extends ExpandableWithFailures<PrBuildDisplayProps, string>
 	render() {
 		let prFailuresSortedKeys = this.props.prBuildListing.sortedKeys()
 		let prFailureDisplay = this.listRender(prFailuresSortedKeys)
-		return <ul>
+		return <ul className="list-group">
 			{prFailureDisplay}
 		</ul>
 	}
@@ -1044,7 +1044,7 @@ class PrDisplay extends Expandable<PrDisplayProps, string> {
 				label = "No test failures!"
 
 			result = <div className="prTestFailures">
-				<ul className="fakeTestFailuresList"><li className="ok"><b>{label}</b></li></ul>
+				<ul className="fakeTestFailuresList list-group"><li className="ok list-group-item"><b>{label}</b></li></ul>
 			</div>
 		}
 
@@ -1261,7 +1261,7 @@ let ContentArea = React.createClass({
 								  </div>
 								: <div className="invocation">{failure.step}</div>
 
-							return <li className="failure" key={key}>
+							return <li className="failure list-group-item" key={key}>
 								{title}
 								<b>{failureListing.count}</b> failure{failureListing.count>1?"s":""}{" "}
 								(failed on <FailureFilterLink count={countKeys(failureListing.lanes)}
@@ -1275,7 +1275,7 @@ let ContentArea = React.createClass({
 					// Render pane
 					return <div>
 						<p>Showing {formatRange(dateRange)} | Out of <b>{trials}</b> runs:</p>
-						<ul className="failureList">
+						<ul className="list-group">
 							{failureDisplay}
 						</ul>
 					</div>

ts/test-status.tsx

@@ -76,15 +76,16 @@ class BuildStatus extends React.Component<BuildStatusProps, {}> {
 			// Set icon for lane entry (via CSS class)
 			switch(build.result) {
 				case "UNSTABLE":
-					className = "warning"
+					className = "warning list-group-item"
 					break
 				case "SUCCESS":
-					className = "ok"
+					className = "ok list-group-item"
 					break
 				case null:
+					className = "list-group-item"
 					break
 				default:
-					className = "failure"
+					className = "failure list-group-item"
 					break
 			}
 
@@ -101,7 +102,7 @@ class BuildStatus extends React.Component<BuildStatusProps, {}> {
 
 		return <div className="buildStatusList">
 			{buildLink}
-			<ul>{displayList}</ul>
+			<ul className="list-group">{displayList}</ul>
 		</div>
 	}
 }