Clicking on a test name on the new flakiness dashboard should add a new test pane

[WebKit-https.git] / Websites / test-results / main.css

diff --git a/Websites/test-results/main.css b/Websites/test-results/main.css
index 3ff16638a1c10021837bcdb9478ee6b15132d0ba..42a4165e2e9e3e1a208bac4b265834ac56c8cc65 100644 (file)
--- a/Websites/test-results/main.css
+++ b/Websites/test-results/main.css
@@ -15,10 +15,23 @@
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 5px;
-    margin: 10px 0px;
+    margin: 1em 0px;
     position: relative;
 }
 
+#buildersView {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 2em 0 1em 0;
+}
+
+#buildersView .testResults {
+    border: none;
+    margin: 1em 0 0 0;
+    padding: 0;
+}
+
 .closeButton {
     position: absolute;
     right: 5px;
@@ -31,7 +44,7 @@
 .resultsTable {
     font-size: small;
     border-collapse: collapse;
-    border: 2px solid #fff;
+    border: 0px solid #fff;
     padding: 0;
     margin: 0;
 }
@@ -44,15 +57,21 @@
     white-space: pre;
 }
 
+.resultsTable thead th {
+    font-weight: bold;
+}
+
 .resultsTable td,
 .resultsTable th {
-    border: 2px solid #fff;
-    padding: 0;
+    white-space: pre;
+    border: 0px solid #fff;
+    padding: 0 0.5em;
     margin: 0;
 }
 
 .resultsTable th,
 .resultsTable .passingRate {
+    text-align: left;
     font-weight: normal;
     padding-right: 10px;
 }
@@ -68,13 +87,60 @@
 .resultsTable .resultCell {
     display: inline-block;
     padding: 0.2em 0.2em;
+    vertical-align: bottom;
+}
+
+.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;
+}
+
+.resultsTable .externalTestLink {
+    margin-left: 0.5em;
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='10' cy='8' r='5' fill='transparent' stroke='#999'></circle><polygon points='8,5 13,8 8,11' fill='#999'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right center;
 }
 
 .resultsTable a {
+    color: #00f;
+    text-shadow: none;
+}
+
+.resultsTable a:visited {
+    color: #006;
+}
+
+.resultsTable .resultCell a {
     display: block;
-    width: 1em;
-    height: 1.5em;
-    border-radius: 3px;
+    width: 1.5em;
+    height: 2.5em;
+    border-radius: 5px;
+    font-size: 0.7em;
+    text-align: center;
+    line-height: 2.5em;
+    padding: 0.1em;
+    color: inherit;
+    text-decoration: none;
 }
 
 .resultsTable .PASS a {
@@ -86,7 +152,7 @@
 }
 
 .resultsTable .IMAGE a {
-    background-color: #3cf;
+    background-color: #fc3;
 }
 
 .resultsTable .TEXT.PASS a {
@@ -97,6 +163,11 @@
     background-color: #f00;
 }
 
+.resultsTable .TIMEOUT a {
+    background-color: #000;
+    color: #fff;
+}
+
 .candidateWindow {
     z-index: 999;
     position: absolute;