Dashboard charts should have uniform widths on v3 UI

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

Reviewed by Chris Dumez.

Fix the bug by applying table-layout: fixed on the dashboard table.

* public/v3/pages/dashboard-page.js:
(DashboardPage.prototype.render): Added header-column as a class name to explicitly set the header column with.
(DashboardPage.cssTemplate): Adjusted CSS accordingly.

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

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index db27a4b..51201bc 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,5 +1,18 @@
 2015-12-17  Ryosuke Niwa  <rniwa@webkit.org>
 
+        Dashboard charts should have uniform widths on v3 UI
+        https://bugs.webkit.org/show_bug.cgi?id=152395
+
+        Reviewed by Chris Dumez.
+
+        Fix the bug by applying table-layout: fixed on the dashboard table.
+
+        * public/v3/pages/dashboard-page.js:
+        (DashboardPage.prototype.render): Added header-column as a class name to explicitly set the header column with.
+        (DashboardPage.cssTemplate): Adjusted CSS accordingly.
+
+2015-12-17  Ryosuke Niwa  <rniwa@webkit.org>
+
         Closing a pane on v3 UI always closes the last pane
         https://bugs.webkit.org/show_bug.cgi?id=152388
 

diff --git a/Websites/perf.webkit.org/public/v3/pages/dashboard-page.js b/Websites/perf.webkit.org/public/v3/pages/dashboard-page.js
index a7e84d8..5f69aa1 100644 (file)
--- a/Websites/perf.webkit.org/public/v3/pages/dashboard-page.js
+++ b/Websites/perf.webkit.org/public/v3/pages/dashboard-page.js
@@ -92,7 +92,11 @@ class DashboardPage extends PageWithCharts {
             var tree = [];
             for (var group of this._tableGroups) {
                 tree.push(element('thead', element('tr',
-                    group[0].map(function (cell) { return element('td', cell.content || cell); }))));
+                    group[0].map(function (cell, cellIndex) {
+                        if (!cellIndex)
+                            return element('th', {class: 'heading-column'});
+                        return element('td', cell.content || cell);
+                    }))));
 
                 tree.push(element('tbody', group.slice(1).map(function (row) {
                     return element('tr', row.map(function (cell, cellIndex) {
@@ -164,6 +168,9 @@ class DashboardPage extends PageWithCharts {
     static cssTemplate()
     {
         return `
+            .dashboard-table {
+                table-layout: fixed;
+            }
             .dashboard-table td,
             .dashboard-table th {
                 border: none;
@@ -183,6 +190,10 @@ class DashboardPage extends PageWithCharts {
                 width: 2rem;
                 position: relative;
             }
+            .dashboard-table .heading-column {
+                width: 2rem;
+                height: 1rem;
+            }
             .dashboard-table th .vertical-label {
                 position: absolute;
                 left: 0;