[results.webkit.org] Change dot and lengend dot use same mechanism to center text and image
https://bugs.webkit.org/show_bug.cgi?id=203216
Reviewed by Jonathan Bedard.
* resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml:
* resultsdbpy/resultsdbpy/view/static/library/css/index.html:
* resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:
(.dot *):
(.dot img, .dot .text):
(.dot>img, .dot>.text):
(.dot.small img, .dot.small .text):
(.dot.small>img, .dot.small>.text):
(.dot.medium img, .dot.medium .text):
(.dot.medium>img, .dot.medium>.text):
(.dot.large img, .dot.large .text):
(.dot.large>img, .dot.large>.text):
(.lengend>.item .dot):
(.lengend>.item .dot img, .lengend>.item .dot .text):
(.lengend>.item .dot>img, .lengend>.item .dot>.text):
(.dot.small *): Deleted.
(.dot img, .dot.small img): Deleted.
(.dot.medium *): Deleted.
(.dot.medium img): Deleted.
(.dot.large *): Deleted.
(.dot.large img): Deleted.
(.lengend>.item .dot .text): Deleted.
(.lengend>.item .dot img): Deleted.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@251410 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Tools/ChangeLog b/Tools/ChangeLog
index 43f9ab3..0925898 100644
--- a/Tools/ChangeLog
+++ b/Tools/ChangeLog
@@ -1,3 +1,34 @@
+2019-10-21 Zhifei Fang <zhifei_fang@apple.com>
+
+ [results.webkit.org] Change dot and lengend dot use same mechanism to center text and image
+ https://bugs.webkit.org/show_bug.cgi?id=203216
+
+ Reviewed by Jonathan Bedard.
+
+ * resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml:
+ * resultsdbpy/resultsdbpy/view/static/library/css/index.html:
+ * resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:
+ (.dot *):
+ (.dot img, .dot .text):
+ (.dot>img, .dot>.text):
+ (.dot.small img, .dot.small .text):
+ (.dot.small>img, .dot.small>.text):
+ (.dot.medium img, .dot.medium .text):
+ (.dot.medium>img, .dot.medium>.text):
+ (.dot.large img, .dot.large .text):
+ (.dot.large>img, .dot.large>.text):
+ (.lengend>.item .dot):
+ (.lengend>.item .dot img, .lengend>.item .dot .text):
+ (.lengend>.item .dot>img, .lengend>.item .dot>.text):
+ (.dot.small *): Deleted.
+ (.dot img, .dot.small img): Deleted.
+ (.dot.medium *): Deleted.
+ (.dot.medium img): Deleted.
+ (.dot.large *): Deleted.
+ (.dot.large img): Deleted.
+ (.lengend>.item .dot .text): Deleted.
+ (.lengend>.item .dot img): Deleted.
+
2019-10-21 youenn fablet <youenn@apple.com>
Move service worker registration matching for navigation loads to network process
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml
index d63f5d1..9e007d1 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml
+++ b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml
@@ -754,22 +754,28 @@
With string inside
html: |-
<div class="dot success">
- <div>✓</div>
+ <div class="text">✓</div>
</div>
<div class="dot failed">
- <div>✕</div>
+ <div class="text">𝖷</div>
</div>
<div class="dot error">
- <div>!</div>
+ <div class="text">!</div>
</div>
<div class="dot success large">
- <div>✓</div>
+ <div class="text">✓</div>
</div>
<div class="dot failed large">
- <div>✕</div>
+ <div class="text">𝖷</div>
</div>
<div class="dot error large">
- <div>!</div>
+ <div class="text">!</div>
+ </div>
+ -
+ description: With image inside
+ html: |-
+ <div class="dot error">
+ <img src="../icons/clock.svg">
</div>
-
description: Blink
@@ -1415,7 +1421,7 @@
<div class="label">Tests Failed</div>
</div>
<div class="item">
- <div class="dot error"></div>
+ <div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div>
@@ -1434,7 +1440,7 @@
<div class="label">Tests Failed</div>
</div>
<div class="item">
- <div class="dot error"></div>
+ <div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div>
@@ -1453,7 +1459,7 @@
<div class="label">Tests Failed</div>
</div>
<div class="item">
- <div class="dot error"></div>
+ <div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div>
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html
index 84cea97..d377a9f 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html
+++ b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html
@@ -1777,42 +1777,58 @@
<div class="content">
<pre><xmp><div class="dot success">
- <div>✓</div>
+ <div class="text">✓</div>
</div>
<div class="dot failed">
- <div>✕</div>
+ <div class="text">𝖷</div>
</div>
<div class="dot error">
- <div>!</div>
+ <div class="text">!</div>
</div>
<div class="dot success large">
- <div>✓</div>
+ <div class="text">✓</div>
</div>
<div class="dot failed large">
- <div>✕</div>
+ <div class="text">𝖷</div>
</div>
<div class="dot error large">
- <div>!</div>
+ <div class="text">!</div>
</div></xmp></pre>
</div>
<div class="content">
<div class="dot success">
- <div>✓</div>
+ <div class="text">✓</div>
</div>
<div class="dot failed">
- <div>✕</div>
+ <div class="text">𝖷</div>
</div>
<div class="dot error">
- <div>!</div>
+ <div class="text">!</div>
</div>
<div class="dot success large">
- <div>✓</div>
+ <div class="text">✓</div>
</div>
<div class="dot failed large">
- <div>✕</div>
+ <div class="text">𝖷</div>
</div>
<div class="dot error large">
- <div>!</div>
+ <div class="text">!</div>
+</div>
+ </div>
+
+
+ <div class="content">
+ With image inside
+ </div>
+
+ <div class="content">
+ <pre><xmp><div class="dot error">
+ <img src="../icons/clock.svg">
+</div></xmp></pre>
+ </div>
+ <div class="content">
+ <div class="dot error">
+ <img src="../icons/clock.svg">
</div>
</div>
@@ -3116,7 +3132,7 @@
<div class="label">Tests Failed</div>
</div>
<div class="item">
- <div class="dot error"></div>
+ <div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div></xmp></pre>
@@ -3134,7 +3150,7 @@
<div class="label">Tests Failed</div>
</div>
<div class="item">
- <div class="dot error"></div>
+ <div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div>
@@ -3158,7 +3174,7 @@
<div class="label">Tests Failed</div>
</div>
<div class="item">
- <div class="dot error"></div>
+ <div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div></xmp></pre>
@@ -3176,7 +3192,7 @@
<div class="label">Tests Failed</div>
</div>
<div class="item">
- <div class="dot error"></div>
+ <div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div>
@@ -3200,7 +3216,7 @@
<div class="label">Tests Failed</div>
</div>
<div class="item">
- <div class="dot error"></div>
+ <div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div></xmp></pre>
@@ -3218,7 +3234,7 @@
<div class="label">Tests Failed</div>
</div>
<div class="item">
- <div class="dot error"></div>
+ <div class="dot error"><img src="../icons/clock.svg"></div>
<div class="label">Tests have error</div>
</div>
</div>
diff --git a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
index b7c4891..d5be10b 100644
--- a/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
+++ b/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css
@@ -607,9 +607,30 @@
}
.dot * {
- padding-top: 3px;
color: var(--greyLightest);
- line-height: 1.1;
+ line-height: 1;
+}
+
+.dot img, .dot .text {
+ user-select: none;
+ -webkit-user-select: none;
+ -webkit-touch-callout: none;
+ cursor: default;
+ padding: 0;
+ margin: 0;
+ text-align: center;
+ vertical-align: middle;
+ font-weight: 400;
+ width: var(--smallSize);
+ height: var(--smallSize);
+ font-size: var(--smallSize);
+ display: block;
+}
+
+.dot>img, .dot>.text{
+ position: absolute;
+ top: calc((var(--mediumSize) - var(--smallSize)) / 2);
+ left: calc((var(--mediumSize) - var(--smallSize)) / 2);
}
.dot.tiny {
@@ -626,18 +647,16 @@
border-radius: var(--smallSize);
}
-.dot.small * {
- margin-top: 1px;
-}
+.dot.small img, .dot.small .text {
+ width: var(--tinySize);
+ height: var(--tinySize);
+ font-size: var(--tinySize);
+}
-.dot img, .dot.small img {
- width: var(--tinySize);
- height: var(--tinySize);
- position: absolute;
- top: calc((var(--smallSize) - var(--tinySize)) / 2);
- left: calc((var(--smallSize) - var(--tinySize)) / 2);
- padding: 0;
- margin: 0;
+ .dot.small>img, .dot.small>.text {
+ position: absolute;
+ top: calc((var(--smallSize) - var(--tinySize)) / 2);
+ left: calc((var(--smallSize) - var(--tinySize)) / 2);
}
.dot.medium {
@@ -647,18 +666,16 @@
border-radius: var(--mediumSize);
}
-.dot.medium * {
- padding-top: 3px;
+.dot.medium img, .dot.medium .text{
+ width: var(--smallSize);
+ height: var(--smallSize);
+ font-size: var(--smallSize)
}
-.dot.medium img {
- width: var(--smallSize);
- height: var(--smallSize);
- position: absolute;
- top: calc((var(--mediumSize) - var(--smallSize)) / 2);
- left: calc((var(--mediumSize) - var(--smallSize)) / 2);
- padding: 0;
- margin: 0;
+.dot.medium>img, .dot.medium>.text{
+ position: absolute;
+ top: calc((var(--mediumSize) - var(--smallSize)) / 2);
+ left: calc((var(--mediumSize) - var(--smallSize)) / 2);
}
.dot.large {
@@ -668,18 +685,16 @@
border-radius: var(--largeSize);
}
-.dot.large * {
- padding-top: 4px;
+.dot.large img, .dot.large .text{
+ width: var(--mediumSize);
+ height: var(--mediumSize);
+ font-size: var(--mediumSize);
}
-.dot.large img {
- width: var(--mediumSize);
- height: var(--mediumSize);
- position: absolute;
- top: calc((var(--largeSize) - var(--mediumSize)) / 2);
- left: calc((var(--largeSize) - var(--mediumSize)) / 2);
- padding: 0;
- margin: 0;
+.dot.large>img, .dot.large>.text{
+ position: absolute;
+ top: calc((var(--largeSize) - var(--mediumSize)) / 2);
+ left: calc((var(--largeSize) - var(--mediumSize)) / 2);
}
.dot.success {
@@ -2175,7 +2190,7 @@
height: var(--smallSize);
border-radius: var(--smallSize);
font-size: calc(var(--tinySize));
- text-align: middle;
+ text-align: center;
flex: none;
vertical-align: middle;
align-items: center;
@@ -2183,29 +2198,15 @@
margin: 0 var(--tinySize);
position: relative;
}
-.lengend>.item .dot .text {
- font-size: calc(var(--tinySize));
- font-weight: 400;
- text-align: center;
- width: var(--smallSize);
- height: var(--smallSize);
- line-height: var(--smallSize);
- padding: 0;
- margin: 0;
- display: inline-block;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- user-select: none;
- cursor: default;
-}
-.lengend>.item .dot img {
- width: var(--tinySize);
- height: var(--tinySize);
- position: absolute;
- top: calc((var(--smallSize) - var(--tinySize)) / 2);
- left: calc((var(--smallSize) - var(--tinySize)) / 2);
- padding: 0;
- margin: 0;
+.lengend>.item .dot img, .lengend>.item .dot .text {
+ width: var(--tinySize);
+ height: var(--tinySize);
+ font-size: var(--tinySize);
+}
+.lengend>.item .dot>img, .lengend>.item .dot>.text {
+ position: absolute;
+ top: calc((var(--smallSize) - var(--tinySize)) / 2);
+ left: calc((var(--smallSize) - var(--tinySize)) / 2);
}
.timeline.lengend>.item .dot::before{
left: calc(0px - var(--tinySize));
