Changeset 250749 in webkit

Timestamp:

Oct 4, 2019, 3:07:15 PM (6 years ago)

Author:

zhifei_fang@apple.com

Message:

[perf dashboard] Make test fressness head and indicator perfect centered
​https://bugs.webkit.org/show_bug.cgi?id=202602

Reviewed by Ryosuke Niwa.

• public/v3/components/freshness-indicator.js: make indicator margin auto, it will then horizontally centered in the container

(FreshnessIndicator.cssTemplate):
(FreshnessIndicator):

• public/v3/pages/test-freshness-page.js: make the table head transform based on the center left

(TestFreshnessPage.cssTemplate):

Location:

trunk/Websites/perf.webkit.org

Files:

• ChangeLog (modified) (1 diff)
• public/v3/components/freshness-indicator.js (modified) (1 diff)
• public/v3/pages/test-freshness-page.js (modified) (2 diffs)

trunk/Websites/perf.webkit.org/ChangeLog

@@ +1 @@
+2019-10-04  Zhifei Fang  <zhifei_fang@apple.com>
+
+        [perf dashboard] Make test fressness head and indicator perfect centered
+        https://bugs.webkit.org/show_bug.cgi?id=202602
+
+        Reviewed by Ryosuke Niwa.
+
+        * public/v3/components/freshness-indicator.js: make indicator margin auto, it will then horizontally centered in the container
+        (FreshnessIndicator.cssTemplate):
+        (FreshnessIndicator):
+        * public/v3/pages/test-freshness-page.js: make the table head transform based on the center left
+        (TestFreshnessPage.cssTemplate):
+
 2019-10-02  Dewei Zhu  <dewei_zhu@apple.com>
 

trunk/Websites/perf.webkit.org/public/v3/components/freshness-indicator.js

@@ -62 +62 @@
         return `
             div {
-                margin-left: 0;
+                margin: auto;
                 height: 1.8rem;
                 width: 1.8rem;

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

@@ -281 +281 @@
                 white-space: nowrap;
                 height: 16rem;
+                width: 2.2rem;
                 border-bottom: 0rem;
+                padding: 0;
             }
             #test-health th.diagonal-head > div {
-                transform: translate(1rem, 7rem) rotate(315deg);
-                width: 2rem;
+                transform: translate(1.1rem, 7.5rem) rotate(315deg);
+                transform-origin: center left;
+                width: 2.2rem;
                 border: 0rem;
             }
@@ -313 +316 @@
                 height: 1.6rem;
                 width: 1.6rem;
-                margin: 0.1rem;
+                margin: auto;
                 padding: 0;
                 position: relative;