Changeset 194232 in webkit

Timestamp:

Dec 17, 2015, 2:13:45 PM (11 years ago)

Author:

rniwa@webkit.org

Message:

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.

Location:

trunk/Websites/perf.webkit.org

Files:

• ChangeLog (modified) (1 diff)
• public/v3/pages/dashboard-page.js (modified) (3 diffs)

trunk/Websites/perf.webkit.org/ChangeLog

@@ +1 @@
+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>
 

trunk/Websites/perf.webkit.org/public/v3/pages/dashboard-page.js

@@ -93 +93 @@
             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) {
@@ -165 +169 @@
     {
         return `
+            .dashboard-table {
+                table-layout: fixed;
+            }
             .dashboard-table td,
             .dashboard-table th {
@@ -183 +190 @@
                 width: 2rem;
                 position: relative;
+            }
+            .dashboard-table .heading-column {
+                width: 2rem;
+                height: 1rem;
             }
             .dashboard-table th .vertical-label {