[webkit-changes] [251410] trunk/Tools

Mon, 21 Oct 2019 18:50:02 -0700

Title: [251410] trunk/Tools
Revision
251410
Author
zhifei_f...@apple.com
Date
2019-10-21 18:48:40 -0700 (Mon, 21 Oct 2019)

Log Message

[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.

Modified Paths

Diff

Modified: trunk/Tools/ChangeLog (251409 => 251410)


--- trunk/Tools/ChangeLog	2019-10-22 01:34:39 UTC (rev 251409)
+++ trunk/Tools/ChangeLog	2019-10-22 01:48:40 UTC (rev 251410)
@@ -1,3 +1,34 @@
+2019-10-21  Zhifei Fang  <zhifei_f...@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  <you...@apple.com>
 
         Move service worker registration matching for navigation loads to network process

Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml (251409 => 251410)


--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml	2019-10-22 01:34:39 UTC (rev 251409)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml	2019-10-22 01:48:40 UTC (rev 251410)
@@ -754,24 +754,30 @@
                         With string inside
                     html: |-
                         <div class="dot success">
-                            <div>&#10003</div>
+                            <div class="text">&#10003</div>
                         </div>
                         <div class="dot failed">
-                            <div>&#10005</div>
+                            <div class="text">&#120247</div>
                         </div>
                         <div class="dot error">
-                            <div>!</div>
+                            <div class="text">!</div>
                         </div>
                         <div class="dot success large">
-                            <div>&#10003</div>
+                            <div class="text">&#10003</div>
                         </div>
                         <div class="dot failed large">
-                            <div>&#10005</div>
+                            <div class="text">&#120247</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=""
+                        </div>
+                -
                     description: Blink
                     html: |-
                         <div class="dot blink"></div>
@@ -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=""
                                 <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=""
                                 <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=""
                                 <div class="label">Tests have error</div>
                             </div>
                         </div>

Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html (251409 => 251410)


--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html	2019-10-22 01:34:39 UTC (rev 251409)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html	2019-10-22 01:48:40 UTC (rev 251410)
@@ -1777,47 +1777,63 @@
                         
                         <div class="content">
                             <pre><xmp><div class="dot success">
-    <div>&#10003</div>
+    <div class="text">&#10003</div>
 </div>
 <div class="dot failed">
-    <div>&#10005</div>
+    <div class="text">&#120247</div>
 </div>
 <div class="dot error">
-    <div>!</div>
+    <div class="text">!</div>
 </div>
 <div class="dot success large">
-    <div>&#10003</div>
+    <div class="text">&#10003</div>
 </div>
 <div class="dot failed large">
-    <div>&#10005</div>
+    <div class="text">&#120247</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>&#10003</div>
+    <div class="text">&#10003</div>
 </div>
 <div class="dot failed">
-    <div>&#10005</div>
+    <div class="text">&#120247</div>
 </div>
 <div class="dot error">
-    <div>!</div>
+    <div class="text">!</div>
 </div>
 <div class="dot success large">
-    <div>&#10003</div>
+    <div class="text">&#10003</div>
 </div>
 <div class="dot failed large">
-    <div>&#10005</div>
+    <div class="text">&#120247</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=""
+</div></xmp></pre>
+                        </div>
+                        <div class="content">
+                            <div class="dot error">
+    <img src=""
+</div>
+                        </div>
+                    
+                        
+                            <div class="content">
                                 Blink
                             </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=""
         <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=""
         <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=""
         <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=""
         <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=""
         <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=""
         <div class="label">Tests have error</div>
     </div>
 </div>

Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css (251409 => 251410)


--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css	2019-10-22 01:34:39 UTC (rev 251409)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css	2019-10-22 01:48:40 UTC (rev 251410)
@@ -607,11 +607,32 @@
 }
 
 .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 {
   font-size: calc(var(--tinySize) - 2px);
   width: var(--tinySize);
@@ -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,30 +2198,16 @@
   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, .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);
 }
-.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;
-}
 .timeline.lengend>.item .dot::before{
   left: calc(0px - var(--tinySize));
   width: var(--tinySize);

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to