[perf dashboard] Make test fressness head and indicator perfect centered
authorzhifei_fang@apple.com <zhifei_fang@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 4 Oct 2019 22:07:15 +0000 (22:07 +0000)
committerzhifei_fang@apple.com <zhifei_fang@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 4 Oct 2019 22:07:15 +0000 (22:07 +0000)
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):

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

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

index b3d3b8e..cea94ac 100644 (file)
@@ -1,3 +1,16 @@
+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>
 
         Fix a bug that warning icon causes infinite rendering when it has warning message.
index 0126feb..4fbb920 100644 (file)
@@ -61,7 +61,7 @@ class FreshnessIndicator extends ComponentBase {
     {
         return `
             div {
-                margin-left: 0;
+                margin: auto;
                 height: 1.8rem;
                 width: 1.8rem;
             }
@@ -86,4 +86,4 @@ class FreshnessIndicator extends ComponentBase {
 }
 
 
-ComponentBase.defineElement('freshness-indicator', FreshnessIndicator);
\ No newline at end of file
+ComponentBase.defineElement('freshness-indicator', FreshnessIndicator);
index 2175c56..b692092 100644 (file)
@@ -280,11 +280,14 @@ class TestFreshnessPage extends PageWithHeading {
             #test-health th.diagonal-head {
                 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;
             }
             #test-health tbody {
@@ -312,7 +315,7 @@ class TestFreshnessPage extends PageWithHeading {
                 background-color: #F9F9F9;
                 height: 1.6rem;
                 width: 1.6rem;
-                margin: 0.1rem;
+                margin: auto;
                 padding: 0;
                 position: relative;
                 overflow: hidden;
@@ -374,4 +377,4 @@ class TestFreshnessPage extends PageWithHeading {
     }
 
     routeName() { return 'test-freshness'; }
-}
\ No newline at end of file
+}