Statistically significant A/B testing results should be color coded in details view

[WebKit.git] / Websites / perf.webkit.org / public / v3 / components / test-group-results-table.js

diff --git a/Websites/perf.webkit.org/public/v3/components/test-group-results-table.js b/Websites/perf.webkit.org/public/v3/components/test-group-results-table.js
index 872cfe4..dfbf3fa 100644 (file)
--- a/Websites/perf.webkit.org/public/v3/components/test-group-results-table.js
+++ b/Websites/perf.webkit.org/public/v3/components/test-group-results-table.js
@@ -65,7 +65,8 @@ class TestGroupResultsTable extends ResultsTable {
                     continue;
 
                 var row = new ResultsTableRow(`${startConfig} to ${endConfig}`, null);
-                row.setLabelForWholeRow(result.fullLabel);
+                var element = ComponentBase.createElement;
+                row.setLabelForWholeRow(element('span', {class: 'results-label ' + result.status}, result.fullLabel));
                 comparisonRows.push(row);
             }
         }
@@ -74,6 +75,32 @@ class TestGroupResultsTable extends ResultsTable {
 
         return groups;
     }
+
+    static cssTemplate()
+    {
+        return super.cssTemplate() + `
+            .results-label {
+                padding: 0.1rem;
+                width: 100%;
+                height: 100%;
+            }
+
+            .results-label .failed {
+                color: rgb(128, 51, 128);
+            }
+            .results-label .unchanged {
+                color: rgb(128, 128, 128);
+            }
+            .results-label.worse {
+                color: rgb(255, 102, 102);
+                font-weight: bold;
+            }
+            .results-label.better {
+                color: rgb(102, 102, 255);
+                font-weight: bold;
+            }
+        `;
+    }
 }
 
 ComponentBase.defineElement('test-group-results-table', TestGroupResultsTable);