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

https://bugs.webkit.org/show_bug.cgi?id=154414

Reviewed by Chris Dumez.

Color code the statistically significant comparisions in TestGroupResultsTable as done in the analysis
results viewer.

* public/v3/components/customizable-test-group-form.js:
(CustomizableTestGroupForm.cssTemplate): Build fix after r196768.
* public/v3/components/test-group-results-table.js:
(TestGroupResultsTable.prototype.buildRowGroups): Add the status as a class name.
(TestGroupResultsTable.cssTemplate): Added styles to color-code statistically significant results.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@196787 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index 7751cff..4659aad 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,19 @@
+2016-02-18  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Statistically significant A/B testing results should be color coded in details view
+        https://bugs.webkit.org/show_bug.cgi?id=154414
+
+        Reviewed by Chris Dumez.
+
+        Color code the statistically significant comparisions in TestGroupResultsTable as done in the analysis
+        results viewer.
+
+        * public/v3/components/customizable-test-group-form.js:
+        (CustomizableTestGroupForm.cssTemplate): Build fix after r196768.
+        * public/v3/components/test-group-results-table.js:
+        (TestGroupResultsTable.prototype.buildRowGroups): Add the status as a class name.
+        (TestGroupResultsTable.cssTemplate): Added styles to color-code statistically significant results.
+
 2016-02-17  Ryosuke Niwa  <rniwa@webkit.org>
 
         v3 UI should allow custom revisions for A/B testing

diff --git a/Websites/perf.webkit.org/public/v3/components/customizable-test-group-form.js b/Websites/perf.webkit.org/public/v3/components/customizable-test-group-form.js
index 849d5ed..4c209bd 100644 (file)
--- a/Websites/perf.webkit.org/public/v3/components/customizable-test-group-form.js
+++ b/Websites/perf.webkit.org/public/v3/components/customizable-test-group-form.js
@@ -129,7 +129,7 @@ class CustomizableTestGroupForm extends TestGroupForm {
 
     static cssTemplate()
     {
-        return super.cssTemplate() + `
+        return `
             .customize-link {
                 color: #333;
             }

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);