The table head of test freshness page should not scroll with the page.
authordewei_zhu@apple.com <dewei_zhu@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 27 Feb 2019 07:33:22 +0000 (07:33 +0000)
committerdewei_zhu@apple.com <dewei_zhu@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 27 Feb 2019 07:33:22 +0000 (07:33 +0000)
https://bugs.webkit.org/show_bug.cgi?id=195092

Reviewed by Ryosuke Niwa.

Fix the location of the freshness table head to make it easier to corelate cell with test.

* public/v3/pages/test-freshness-page.js: Changed some style rules to make the table head fixed.
(TestFreshnessPage.prototype._renderTable):
(TestFreshnessPage.cssTemplate):

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

Websites/perf.webkit.org/ChangeLog
Websites/perf.webkit.org/public/v3/pages/test-freshness-page.js

index 4d3a26a..5ab03d3 100644 (file)
@@ -1,3 +1,16 @@
+2019-02-26  Dewei Zhu  <dewei_zhu@apple.com>
+
+        The table head of test freshness page should not scroll with the page.
+        https://bugs.webkit.org/show_bug.cgi?id=195092
+
+        Reviewed by Ryosuke Niwa.
+
+        Fix the location of the freshness table head to make it easier to corelate cell with test.
+
+        * public/v3/pages/test-freshness-page.js: Changed some style rules to make the table head fixed.
+        (TestFreshnessPage.prototype._renderTable):
+        (TestFreshnessPage.cssTemplate):
+
 2019-01-17  Dewei Zhu  <dewei_zhu@apple.com>
 
         Analyzing a chart that does not exist should not halt whole run-analysis script.
index bd50697..4ab32ea 100644 (file)
@@ -107,17 +107,17 @@ class TestFreshnessPage extends PageWithHeading {
     {
         const element = ComponentBase.createElement;
         const tableBodyElement = [];
-        const tableHeadElements = [element('th',  {class: 'table-corner'}, 'Platform \\ Test')];
+        const tableHeadElements = [element('th',  {class: 'table-corner row-head'}, 'Platform \\ Test')];
 
         for (const metric of metrics)
-            tableHeadElements.push(element('th', {class: 'diagonal-header'}, element('div', metric.test().fullName())));
+            tableHeadElements.push(element('th', {class: 'diagonal-head'}, element('div', metric.test().fullName())));
 
         this._indicatorByConfiguration = new Map;
         for (const platform of platforms) {
             const indicatorByMetric = new Map;
             this._indicatorByConfiguration.set(platform, indicatorByMetric);
             tableBodyElement.push(element('tr',
-                [element('th', platform.label()), ...metrics.map((metric) => this._constructTableCell(platform, metric, indicatorByMetric))]));
+                [element('th', {class: 'row-head'}, platform.label()), ...metrics.map((metric) => this._constructTableCell(platform, metric, indicatorByMetric))]));
         }
 
         this.renderReplace(this.content('test-health'), [element('thead', tableHeadElements), element('tbody', tableBodyElement)]);
@@ -157,25 +157,37 @@ class TestFreshnessPage extends PageWithHeading {
             #test-health {
                 font-size: 1rem;
             }
+            #test-health thead {
+                display: block;
+                align: right;
+            }
             #test-health th.table-corner {
                 text-align: right;
                 vertical-align: bottom;
             }
+            #test-health .row-head {
+                min-width: 15.5rem;
+            }
             #test-health th {
                 text-align: left;
                 border-bottom: 0.1rem solid #ccc;
                 font-weight: normal;
             }
-            #test-health th.diagonal-header {
+            #test-health th.diagonal-head {
                 white-space: nowrap;
                 height: 16rem;
                 border-bottom: 0rem;
             }
-            #test-health th.diagonal-header > div {
+            #test-health th.diagonal-head > div {
                 transform: translate(1rem, 7rem) rotate(315deg);
                 width: 2rem;
                 border: 0rem;
             }
+            #test-health tbody {
+                display: block;
+                overflow: auto;
+                height: 75vh;
+            }
             #test-health td.status-cell {
                 margin: 0;
                 padding: 0;