Changeset 249021 in webkit

Timestamp:

Aug 22, 2019, 11:50:01 AM (7 years ago)

Author:

zhifei_fang@apple.com

Message:

[results.webkit.org Webkit.css] Change input's disable style
The disable input style will always show the label like it has a value
​https://bugs.webkit.org/show_bug.cgi?id=200998

Reviewed by Jonathan Bedard.

• resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml: Adding a new example for disabled input that already has a value

*resultsdbpy/resultsdbpy/view/static/library/css/generate-webkit-css-docs:

• resultsdbpy/resultsdbpy/view/static/library/css/index.html:
• resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:

(.input>input[type="text"][required][disabled],.input>input[type="number"][required][disabled],):When disabling a text input element even without a value, the style should match the style of a text input element with a value
(.input>input[type="text"][required][disabled]~label, .input>input[type="number"][required][disabled]~label,):
(@media (prefers-color-scheme: dark)):

Location:

trunk/Tools

Files:

• ChangeLog (modified) (1 diff)
• resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml (modified) (1 diff)
• resultsdbpy/resultsdbpy/view/static/library/css/generate-webkit-css-docs (modified) (2 diffs)
• resultsdbpy/resultsdbpy/view/static/library/css/index.html (modified) (2 diffs)
• resultsdbpy/resultsdbpy/view/static/library/css/webkit.css (modified) (3 diffs)

trunk/Tools/ChangeLog

@@ +1 @@
+2019-08-22  Zhifei Fang  <zhifei_fang@apple.com>
+
+        [results.webkit.org Webkit.css] Change input's disable style
+        The disable input style will always show the label like it has a value 
+        https://bugs.webkit.org/show_bug.cgi?id=200998
+
+        Reviewed by Jonathan Bedard.
+
+        * resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml: Adding a new example for disabled input that already has a value
+        *resultsdbpy/resultsdbpy/view/static/library/css/generate-webkit-css-docs:
+        * resultsdbpy/resultsdbpy/view/static/library/css/index.html:
+        * resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:
+        (.input>input[type="text"][required][disabled],.input>input[type="number"][required][disabled],):When disabling a text input element even without a value, the style should match the style of a text input element with a value
+        (.input>input[type="text"][required][disabled]~label, .input>input[type="number"][required][disabled]~label,):
+        (@media (prefers-color-scheme: dark)):
+
 2019-08-17  Darin Adler  <darin@apple.com>
 

trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml

@@ -664 +664 @@
                         </div>
                         <div class="input">
+                            <input type="text" required disabled value="I am disabled"/>
+                            <label>Disabled with existing value</label>
+                        </div>
+                        <div class="input">
                             <input class="invalid" type="text" required value="use invalid mixin to force invalid style"/>
                             <label>Invalid</label>

trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/generate-webkit-css-docs

@@ +1 @@
+#!/usr/bin/python
 # Copyright (C) 2019 Apple Inc. All rights reserved.
 #
@@ -21 +22 @@
 # OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-#!/usr/bin/python
 from argparse import ArgumentParser
 import jinja2

trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html

@@ -1567 +1567 @@
 </div>
 <div class="input">
+    <input type="text" required disabled value="I am disabled"/>
+    <label>Disabled with existing value</label>
+</div>
+<div class="input">
     <input class="invalid" type="text" required value="use invalid mixin to force invalid style"/>
     <label>Invalid</label>
@@ -1580 +1584 @@
     <input type="text" required disabled/>
     <label>Disabled</label>
+</div>
+<div class="input">
+    <input type="text" required disabled value="I am disabled"/>
+    <label>Disabled with existing value</label>
 </div>
 <div class="input">

trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css

@@ -2271 +2271 @@
 }
 
-.input>input[type="text"][required]:disabled, .input>input[type="number"][required]:disabled,
-.input>input[type="password"][required]:disabled, .input>input[type="email"][required]:disabled, .input>select:disabled {
+.input>input[type="text"][required][disabled], .input>input[type="number"][required][disabled],
+.input>input[type="password"][required][disabled], .input>input[type="email"][required][disabled], .input>select[disabled] {
   border: 1px solid var(--greyLighter);
 }
@@ -2295 +2295 @@
 }
 
-.input>input[type="text"][required]:disabled~label, .input>input[type="number"][required]:disabled~label,
-.input>input[type="password"][required]:disabled~label, .input>input[type="email"][required]:disabled~label, .input>select:disabled~label {
+.input>input[type="text"][required][disabled], .input>input[type="number"][required][disabled],
+.input>input[type="password"][required][disabled], .input>input[type="email"][required][disabled], .input>select[disabled] {
+  color: var(--greyDarker);
+}
+
+.input>input[type="text"][required][disabled]~label, .input>input[type="number"][required][disabled]~label,
+.input>input[type="password"][required][disabled]~label, .input>input[type="email"][required][disabled]~label, .input>select[disabled]~label {
   color: var(--grey);
+  font-size: var(--tinySize);
+  top: 4px;
 }
 
@@ -2338 +2345 @@
   }
 
-  .input>input[type="text"][required]:disabled, .input>input[type="number"][required]:disabled,
-  .input>input[type="password"][required]:disabled, .input>input[type="email"][required]:disabled, .input>select:disabled {
+  .input>input[type="text"][required][disabled], .input>input[type="number"][required][disabled],
+  .input>input[type="password"][required][disabled], .input>input[type="email"][required][disabled], .input>select[disabled] {
     border: 1px solid var(--greyDarker);
-  }
-
-  .input>input[type="text"][required]:disabled~label, .input>input[type="number"][required]:disabled~label,
-  .input>input[type="password"][required]:disabled~label, .input>input[type="email"][required]:disabled~label, .input>select:disabled~label {
+    color: var(--blackDark);
+  }
+
+  .input>input[type="text"][required][disabled]~label, .input>input[type="number"][required][disabled]~label,
+  .input>input[type="password"][required][disabled]~label, .input>input[type="email"][required][disabled]~label, .input>select[disabled]~label {
     color: var(--greyDarker);
   }