[webkit-changes] [293038] trunk

Tue, 19 Apr 2022 14:54:35 -0700

Title: [293038] trunk
Revision
293038
Author
[email protected]
Date
2022-04-19 14:53:42 -0700 (Tue, 19 Apr 2022)

Log Message

Update in-field icons for credential fields
https://bugs.webkit.org/show_bug.cgi?id=239336

Patch by Ricky Mondello <[email protected]> on 2022-04-19
Reviewed by Wenson Hsieh.

Source/WebCore:

This new styling is only appropriate for Cocoa platforms.

* css/html.css:
(input::-webkit-credentials-auto-fill-button):
(input::-webkit-credentials-auto-fill-button:hover):
(input::-webkit-credentials-auto-fill-button:active):

LayoutTests:

* platform/mac/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt:

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (293037 => 293038)


--- trunk/LayoutTests/ChangeLog	2022-04-19 21:47:41 UTC (rev 293037)
+++ trunk/LayoutTests/ChangeLog	2022-04-19 21:53:42 UTC (rev 293038)
@@ -1,3 +1,12 @@
+2022-04-19  Ricky Mondello  <[email protected]>
+
+        Update in-field icons for credential fields
+        https://bugs.webkit.org/show_bug.cgi?id=239336
+
+        Reviewed by Wenson Hsieh.
+
+        * platform/mac/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt:
+
 2022-04-19  Karl Rackler  <[email protected]>
 
         fast/css/sticky/sticky-left.html is a flaky image failure

Modified: trunk/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt (293037 => 293038)


--- trunk/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt	2022-04-19 21:47:41 UTC (rev 293037)
+++ trunk/LayoutTests/platform/mac/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt	2022-04-19 21:53:42 UTC (rev 293038)
@@ -1,6 +1,6 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x600
+layer at (0,0) size 800x600 isolatesBlending
   RenderBlock {HTML} at (0,0) size 800x600
     RenderBody {BODY} at (8,8) size 784x584
       RenderBlock {P} at (0,0) size 784x18
@@ -8,21 +8,21 @@
           text run at (0,0) width 503: "This tests that the AutoFill button renders. It can only be tested in the test tool."
       RenderBlock {DIV} at (0,34) size 784x23
         RenderTextControl {INPUT} at (2,2) size 147x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 141x13
-            RenderBlock {DIV} at (0,0) size 114x13
+          RenderFlexibleBox {DIV} at (3,0) size 141x19
+            RenderBlock {DIV} at (0,3) size 114x13
         RenderText {#text} at (150,2) size 5x18
           text run at (150,2) width 5: " "
         RenderTextControl {INPUT} at (156,2) size 148x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 141x13
-            RenderBlock {DIV} at (0,0) size 114x13
+          RenderFlexibleBox {DIV} at (3,0) size 141x19
+            RenderBlock {DIV} at (0,3) size 114x13
         RenderText {#text} at (305,2) size 5x18
           text run at (305,2) width 5: " "
         RenderTextControl {INPUT} at (311,2) size 148x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 141x13
-            RenderBlock {DIV} at (0,0) size 114x13
+          RenderFlexibleBox {DIV} at (3,0) size 141x19
+            RenderBlock {DIV} at (0,3) size 114x13
         RenderTextControl {INPUT} at (462,2) size 148x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-          RenderFlexibleBox {DIV} at (3,3) size 141x13
-            RenderBlock {DIV} at (0,0) size 114x13
+          RenderFlexibleBox {DIV} at (3,0) size 141x19
+            RenderBlock {DIV} at (0,3) size 114x13
 layer at (13,47) size 114x13
   RenderBlock {DIV} at (0,0) size 114x13
 layer at (168,47) size 114x13
@@ -31,11 +31,11 @@
   RenderBlock {DIV} at (0,0) size 114x13
 layer at (474,47) size 114x13
   RenderBlock {DIV} at (0,0) size 114x13
-layer at (130,48) size 22x12
-  RenderBlock {DIV} at (116,0) size 23x13 [bgcolor=#000000]
-layer at (285,48) size 22x12
-  RenderBlock {DIV} at (116,0) size 23x13 [bgcolor=#000000]
-layer at (440,48) size 22x12
-  RenderBlock {DIV} at (116,0) size 23x13 [bgcolor=#000000]
-layer at (591,48) size 22x12
-  RenderBlock {DIV} at (116,0) size 23x13 [bgcolor=#000000]
+layer at (129,42) size 24x24 blendMode: luminosity
+  RenderBlock {DIV} at (115,-3) size 25x25
+layer at (284,42) size 24x24 blendMode: luminosity
+  RenderBlock {DIV} at (115,-3) size 25x25
+layer at (439,42) size 24x24 blendMode: luminosity
+  RenderBlock {DIV} at (115,-3) size 25x25
+layer at (590,42) size 24x24 blendMode: luminosity
+  RenderBlock {DIV} at (115,-3) size 25x25

Modified: trunk/Source/WebCore/ChangeLog (293037 => 293038)


--- trunk/Source/WebCore/ChangeLog	2022-04-19 21:47:41 UTC (rev 293037)
+++ trunk/Source/WebCore/ChangeLog	2022-04-19 21:53:42 UTC (rev 293038)
@@ -1,3 +1,17 @@
+2022-04-19  Ricky Mondello  <[email protected]>
+
+        Update in-field icons for credential fields
+        https://bugs.webkit.org/show_bug.cgi?id=239336
+
+        Reviewed by Wenson Hsieh.
+
+        This new styling is only appropriate for Cocoa platforms.
+
+        * css/html.css:
+        (input::-webkit-credentials-auto-fill-button):
+        (input::-webkit-credentials-auto-fill-button:hover):
+        (input::-webkit-credentials-auto-fill-button:active):
+
 2022-04-19  Ada Chan  <[email protected]>
 
         [WebXR] Update Device::initializeTrackingAndRendering() to take in more parameters regarding the session setup

Modified: trunk/Source/WebCore/css/html.css (293037 => 293038)


--- trunk/Source/WebCore/css/html.css	2022-04-19 21:47:41 UTC (rev 293037)
+++ trunk/Source/WebCore/css/html.css	2022-04-19 21:53:42 UTC (rev 293038)
@@ -613,6 +613,14 @@
 }
 
 input::-webkit-credentials-auto-fill-button {
+#if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath clip-rule='evenodd' d='m8.692 1h8.617c2.675 0 3.644.278 4.622.801s1.745 1.29 2.268 2.268.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622s-1.29 1.745-2.268 2.268-1.948.801-4.622.801h-8.617c-2.675 0-3.644-.278-4.622-.801s-1.745-1.29-2.268-2.268-.801-1.948-.801-4.622v-8.616c0-2.675.278-3.644.801-4.622s1.29-1.745 2.268-2.268 1.948-.801 4.622-.801z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='m9.838 8.318c-.308 0-.57-.108-.787-.325s-.325-.478-.325-.785.108-.57.323-.787.478-.325.789-.325c.303 0 .564.109.782.327s.327.48.327.785c0 .306-.109.568-.327.785s-.479.325-.782.325zm0-3.84c-.59 0-1.139.108-1.648.324s-.956.517-1.341.903-.686.833-.904 1.341-.326 1.055-.326 1.641c0 .571.106 1.112.317 1.622s.51.961.896 1.352.841.698 1.366.918v6.082c0 .101.018.196.054.287s.092.173.167.247l1.122 1.077c.083.07
 8.19.12.32.126s.244-.039.343-.136l1.998-1.998c.104-.105.155-.227.153-.365s-.054-.26-.157-.365l-1.094-1.083 1.555-1.553c.101-.102.151-.223.149-.361-.001-.138-.054-.26-.158-.365l-1.488-1.496c.929-.411 1.644-.964 2.142-1.66.499-.696.748-1.472.748-2.329 0-.581-.109-1.126-.327-1.635s-.52-.956-.905-1.341-.833-.687-1.343-.905-1.057-.327-1.639-.327z'/%3E%3C/clipPath%3E%3CclipPath id='c'%3E%3Cpath d='m19.091 15.574c.108-.002.207-.023.296-.064.09-.041.179-.105.268-.193l2.462-2.522c.126-.124.189-.278.189-.46 0-.124-.03-.237-.091-.34s-.141-.185-.242-.245c-.101-.061-.212-.091-.334-.091-.187 0-.352.073-.495.22l-2.165 2.249h.232l-2.175-2.249c-.145-.147-.311-.22-.497-.22-.122 0-.234.03-.334.091-.101.061-.182.142-.242.245-.061.103-.091.216-.091.34 0 .09.015.173.046.248s.078.146.14.212l2.467 2.521c.171.171.36.256.565.256z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='m0 0h26v26h-26z' fill='%23e5e5e5' opacity='.64'/%3E%3C/g%3E%3Cg clip-path='url(%23b)'%3E%3Cpath d='m4.619 3.478h10.434v17.
 927h-10.434z' opacity='.78'/%3E%3C/g%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='m14.872 10.66h8.435v5.914h-8.435z' opacity='.75'/%3E%3C/g%3E%3C/svg%3E");
+    width: 24px;
+    height: 24px;
+    margin-left: 2px;
+    margin-right: 1px;
+    mix-blend-mode: luminosity;
+#else
     -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 44 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 30.25 9.25 L 36.5 15.75 L 42.75 9.25" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><g><path d="M 16 3.5 C 16 2.672 16.672 2 17.5 2 C 18.3 2 19 2.7 19 3.5 C 19 4.3 18.3 5 17.5 5 C 16.7 5 16 4.3 16 3.5 Z M 11 6.5 C 11 10.1 13.9 13 17.5 13 C 21.1 13 24 10.1 24 6.5 C 24 2.9 21.1 0 17.5 0 C 13.9 0 11 2.9 11 6.5 Z"/><path d="M 20 17.3 L 20 18.6 L 20.9 19.9 C 21 20 21 20 21 20 L 17.7 23.8 C 17.7 23.8 17.7 23.8 17.7 23.8 C 17.5 23.9 17.4 23.9 17.3 23.8 L 15 21 L 15 11 L 20 11 L 20 14.8 L 21 15.9 C 21 16 21 16 20.9 16.1 L 20 17.3 Z M 17 13 L 17 21.3 L 17.5 21.8 L 18 21.3 L 18 13 L 17 13 Z"/></g></svg>');
     -webkit-mask-size: 22px 12px;
     width: 22px;
@@ -620,16 +628,25 @@
     margin-left: 3px;
     margin-right: 2px;
     background-color: black;
+#endif
     flex: none;
     -webkit-user-select: none;
 }
 
 input::-webkit-credentials-auto-fill-button:hover {
+#if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath clip-rule='evenodd' d='m8.692 1h8.617c2.675 0 3.644.278 4.622.801s1.745 1.29 2.268 2.268.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622s-1.29 1.745-2.268 2.268-1.948.801-4.622.801h-8.617c-2.675 0-3.644-.278-4.622-.801s-1.745-1.29-2.268-2.268-.801-1.948-.801-4.622v-8.616c0-2.675.278-3.644.801-4.622s1.29-1.745 2.268-2.268 1.948-.801 4.622-.801z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath clip-rule='evenodd' d='m8.692 1h8.617c2.675 0 3.644.278 4.622.801s1.745 1.29 2.268 2.268.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622s-1.29 1.745-2.268 2.268-1.948.801-4.622.801h-8.617c-2.675 0-3.644-.278-4.622-.801s-1.745-1.29-2.268-2.268-.801-1.948-.801-4.622v-8.616c0-2.675.278-3.644.801-4.622s1.29-1.745 2.268-2.268 1.948-.801 4.622-.801z'/%3E%3C/clipPath%3E%3CclipPath id='c'%3E%3Cpath d='m9.
 838 8.318c-.308 0-.57-.108-.787-.325s-.325-.478-.325-.785.108-.57.323-.787.478-.325.789-.325c.303 0 .564.109.782.327s.327.48.327.785c0 .306-.109.568-.327.785s-.479.325-.782.325zm0-3.84c-.59 0-1.139.108-1.648.324s-.956.517-1.341.903-.686.833-.904 1.341-.326 1.055-.326 1.641c0 .571.106 1.112.317 1.622s.51.961.896 1.352.841.698 1.366.918v6.082c0 .101.018.196.054.287s.092.173.167.247l1.122 1.077c.083.078.19.12.32.126s.244-.039.343-.136l1.998-1.998c.104-.105.155-.227.153-.365s-.054-.26-.157-.365l-1.094-1.083 1.555-1.553c.101-.102.151-.223.149-.361-.001-.138-.054-.26-.158-.365l-1.488-1.496c.929-.411 1.644-.964 2.142-1.66.499-.696.748-1.472.748-2.329 0-.581-.109-1.126-.327-1.635s-.52-.956-.905-1.341-.833-.687-1.343-.905-1.057-.327-1.639-.327z'/%3E%3C/clipPath%3E%3CclipPath id='d'%3E%3Cpath d='m19.091 15.574c.108-.002.207-.023.296-.064.09-.041.179-.105.268-.193l2.462-2.522c.126-.124.189-.278.189-.46 0-.124-.03-.237-.091-.34s-.141-.185-.242-.245c-.101-.061-.212-.091-.334-.091-.187 0-.352.073
 -.495.22l-2.165 2.249h.232l-2.175-2.249c-.145-.147-.311-.22-.497-.22-.122 0-.234.03-.334.091-.101.061-.182.142-.242.245-.061.103-.091.216-.091.34 0 .09.015.173.046.248s.078.146.14.212l2.467 2.521c.171.171.36.256.565.256z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='m0 0h26v26h-26z' fill='%23e5e5e5' opacity='.7'/%3E%3C/g%3E%3Cg clip-path='url(%23b)'%3E%3Cpath d='m8.692 1h8.617c2.675 0 3.644.278 4.622.801s1.745 1.29 2.268 2.268.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622s-1.29 1.745-2.268 2.268-1.948.801-4.622.801h-8.617c-2.675 0-3.644-.278-4.622-.801s-1.745-1.29-2.268-2.268-.801-1.948-.801-4.622v-8.616c0-2.675.278-3.644.801-4.622s1.29-1.745 2.268-2.268 1.948-.801 4.622-.801z' fill='none' opacity='.15' stroke='%23e6e6e6' stroke-miterlimit='5' stroke-width='2'/%3E%3C/g%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='m4.619 3.478h10.434v17.927h-10.434z'/%3E%3C/g%3E%3Cg clip-path='url(%23d)'%3E%3Cpath d='m14.872 10.66h8.435v5.914h-8.435z'/%3E%3C/g%3E%3C/svg%3E");
+#else
     background-color: rgb(0, 122, 255);
+#endif
 }
 
 input::-webkit-credentials-auto-fill-button:active {
+#if defined(WTF_PLATFORM_COCOA) && WTF_PLATFORM_COCOA
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath clip-rule='evenodd' d='m8.692 1h8.617c2.675 0 3.644.278 4.622.801s1.745 1.29 2.268 2.268.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622s-1.29 1.745-2.268 2.268-1.948.801-4.622.801h-8.617c-2.675 0-3.644-.278-4.622-.801s-1.745-1.29-2.268-2.268-.801-1.948-.801-4.622v-8.616c0-2.675.278-3.644.801-4.622s1.29-1.745 2.268-2.268 1.948-.801 4.622-.801z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath clip-rule='evenodd' d='m8.692 1h8.617c2.675 0 3.644.278 4.622.801s1.745 1.29 2.268 2.268.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622s-1.29 1.745-2.268 2.268-1.948.801-4.622.801h-8.617c-2.675 0-3.644-.278-4.622-.801s-1.745-1.29-2.268-2.268-.801-1.948-.801-4.622v-8.616c0-2.675.278-3.644.801-4.622s1.29-1.745 2.268-2.268 1.948-.801 4.622-.801z'/%3E%3C/clipPath%3E%3CclipPath id='c'%3E%3Cpath d='m9.
 838 8.318c-.308 0-.57-.108-.787-.325s-.325-.478-.325-.785.108-.57.323-.787.478-.325.789-.325c.303 0 .564.109.782.327s.327.48.327.785c0 .306-.109.568-.327.785s-.479.325-.782.325zm0-3.84c-.59 0-1.139.108-1.648.324s-.956.517-1.341.903-.686.833-.904 1.341-.326 1.055-.326 1.641c0 .571.106 1.112.317 1.622s.51.961.896 1.352.841.698 1.366.918v6.082c0 .101.018.196.054.287s.092.173.167.247l1.122 1.077c.083.078.19.12.32.126s.244-.039.343-.136l1.998-1.998c.104-.105.155-.227.153-.365s-.054-.26-.157-.365l-1.094-1.083 1.555-1.553c.101-.102.151-.223.149-.361-.001-.138-.054-.26-.158-.365l-1.488-1.496c.929-.411 1.644-.964 2.142-1.66.499-.696.748-1.472.748-2.329 0-.581-.109-1.126-.327-1.635s-.52-.956-.905-1.341-.833-.687-1.343-.905-1.057-.327-1.639-.327z'/%3E%3C/clipPath%3E%3CclipPath id='d'%3E%3Cpath d='m19.091 15.574c.108-.002.207-.023.296-.064.09-.041.179-.105.268-.193l2.462-2.522c.126-.124.189-.278.189-.46 0-.124-.03-.237-.091-.34s-.141-.185-.242-.245c-.101-.061-.212-.091-.334-.091-.187 0-.352.073
 -.495.22l-2.165 2.249h.232l-2.175-2.249c-.145-.147-.311-.22-.497-.22-.122 0-.234.03-.334.091-.101.061-.182.142-.242.245-.061.103-.091.216-.091.34 0 .09.015.173.046.248s.078.146.14.212l2.467 2.521c.171.171.36.256.565.256z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='m0 0h26v26h-26z' fill='%23b2b2b2' opacity='.6'/%3E%3C/g%3E%3Cg clip-path='url(%23b)'%3E%3Cpath d='m8.692 1h8.617c2.675 0 3.644.278 4.622.801s1.745 1.29 2.268 2.268.801 1.948.801 4.622v8.617c0 2.675-.278 3.644-.801 4.622s-1.29 1.745-2.268 2.268-1.948.801-4.622.801h-8.617c-2.675 0-3.644-.278-4.622-.801s-1.745-1.29-2.268-2.268-.801-1.948-.801-4.622v-8.616c0-2.675.278-3.644.801-4.622s1.29-1.745 2.268-2.268 1.948-.801 4.622-.801z' fill='none' opacity='.15' stroke='%23b2b2b2' stroke-miterlimit='5' stroke-width='2'/%3E%3C/g%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='m4.619 3.478h10.434v17.927h-10.434z'/%3E%3C/g%3E%3Cg clip-path='url(%23d)'%3E%3Cpath d='m14.872 10.66h8.435v5.914h-8.435z'/%3E%3C/g%3E%3C/svg%3E");
+#else
     background-color: rgb(0, 60, 219);
+#endif
 }
 
 input::-webkit-contacts-auto-fill-button {

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to