Bug 239336

Summary:

Update in-field icons for credential fields

Product:

WebKit

Reporter:

Ricky Mondello <rmondello>

Component:

Forms

Assignee:

Ricky Mondello <rmondello>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

cdumez, esprehn+autocc, ews-watchlist, glenn, gyuyoung.kim, macpherson, menard, ntim, webkit-bug-importer, wenson_hsieh

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

Bug Depends on:

239522

Bug Blocks:

Attachments:

Description	Flags
Patch	none
Patch	none
Patch	none
Patch	none
Patch	none

Ricky Mondello

Reported 2022-04-14 08:50:47 PDT

Update in-field icons for credential fields

Attachments
Patch (11.36 KB, patch) 2022-04-14 09:06 PDT, Ricky Mondello	no flags	Details Formatted Diff Diff
Patch (14.24 KB, patch) 2022-04-18 10:14 PDT, Ricky Mondello	no flags	Details Formatted Diff Diff
Patch (14.69 KB, patch) 2022-04-18 12:30 PDT, Ricky Mondello	no flags	Details Formatted Diff Diff
Patch (14.70 KB, patch) 2022-04-19 10:12 PDT, Ricky Mondello	no flags	Details Formatted Diff Diff
Patch (14.74 KB, patch) 2022-04-19 11:26 PDT, Ricky Mondello	no flags	Details Formatted Diff Diff
Show Obsolete (4) View All Add attachment proposed patch, testcase, etc.

Ricky Mondello

Comment 1 2022-04-14 09:06:53 PDT

Created attachment 457633 [details] Patch

Ricky Mondello

Comment 2 2022-04-14 09:10:47 PDT

Patch uploaded to run against EWS, but review feedback is welcome, too!

Tim Nguyen (:ntim)

Comment 3 2022-04-14 12:11:56 PDT

Comment on attachment 457633 [details] Patch These SVGs could be optimized further, clip-paths can be shapes directly, classes can be put as attributes directly, etc. As an example: ``` <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" opacity=".775"> <path fill="#e5e5e5" d="M7.692,0h8.617c2.675,0,3.644,.278,4.622,.801,.978,.523,1.745,1.29,2.268,2.268,.523,.978,.801,1.948,.801,4.622v8.617c0,2.675-.278,3.644-.801,4.622-.523,.978-1.29,1.745-2.268,2.268-.978,.523-1.948,.801-4.622,.801H7.692c-2.675,0-3.644-.278-4.622-.801-.978-.523-1.745-1.29-2.268-2.268C.278,19.953,0,18.983,0,16.308V7.692C0,5.017,.278,4.047,.801,3.069c.523-.978,1.29-1.745,2.268-2.268,.978-.523,1.948-.801,4.622-.801Z"/> <path d="M8.838,7.318c-.308,0-.57-.108-.787-.325-.217-.217-.325-.478-.325-.785s.108-.57,.323-.787c.215-.217,.478-.325,.789-.325,.303,0,.564,.109,.782,.327,.218,.218,.327,.48,.327,.785,0,.306-.109,.568-.327,.785-.218,.217-.479,.325-.782,.325Zm0-3.84c-.59,0-1.139,.108-1.648,.324-.509,.216-.956,.517-1.341,.903-.385,.386-.686,.833-.904,1.341-.218,.508-.326,1.055-.326,1.641,0,.571,.106,1.112,.317,1.622,.211,.51,.51,.961,.896,1.352,.386,.391,.841,.698,1.366,.918v6.082c0,.101,.018,.196,.054,.287,.036,.091,.092,.173,.167,.247l1.122,1.077c.083,.078,.19,.12,.32,.126,.13,.006,.244-.039,.343-.136l1.998-1.998c.104-.105,.155-.227,.153-.365-.002-.138-.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.635-.218-.509-.52-.956-.905-1.341s-.833-.687-1.343-.905c-.51-.218-1.057-.327-1.639-.327Z"/> <path d="M18.091,14.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-.34-.061-.103-.141-.185-.242-.245-.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,.248,.031,.075,.078,.146,.14,.212l2.467,2.521c.171,.171,.36,.256,.565,.256Z"/> </svg> ```

Ricky Mondello

Comment 4 2022-04-14 12:14:17 PDT

@Tim: I am not the author of these SVGs. Is there some kind of tool that will losslessly “optimize” them to our satisfaction? And to be clear, is optimizing them a goal?

Tim Nguyen (:ntim)

Comment 5 2022-04-15 04:57:57 PDT

The example I gave is lossless optimization (code changes only, not visual) usually design tools + SVGOMG can do this work. Although you can also do this manually in your code editor, since SVG is similar to HTML+CSS. It’s not a goal to have them optimized, but given html.css is loaded in every page, it would be nice if SVGs didn’t come with unnecessary tags/attributes.

Ricky Mondello

Comment 6 2022-04-18 10:14:56 PDT

Created attachment 457808 [details] Patch

Ricky Mondello

Comment 7 2022-04-18 10:16:20 PDT

New patch up. I optimized the SVGs with an SVG optimizer, which shaved 25% size. I also restrict the new styling to Cocoa ports, because the new styling is undeniably Cocoa-like.

Ricky Mondello

Comment 8 2022-04-18 12:30:48 PDT

Created attachment 457816 [details] Patch

Ricky Mondello

Comment 9 2022-04-19 06:32:01 PDT

Finally passed EWS. Looking for review now.

Wenson Hsieh

Comment 10 2022-04-19 09:43:13 PDT

Comment on attachment 457816 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=457816&action=review > Source/WebCore/css/html.css:617 > +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.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='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"); Nit - indentation seems missing before `background-image`. > Source/WebCore/css/html.css:638 > +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"); (Ditto) > Source/WebCore/css/html.css:646 > +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"); (Ditto)

Ricky Mondello

Comment 11 2022-04-19 10:12:05 PDT

Created attachment 457912 [details] Patch

Ricky Mondello

Comment 12 2022-04-19 10:12:39 PDT

Comment on attachment 457912 [details] Patch For landing.

Ricky Mondello

Comment 13 2022-04-19 11:26:40 PDT

Created attachment 457919 [details] Patch

EWS

Comment 14 2022-04-19 11:28:26 PDT

rmondello@apple.com does not have committer permissions according to https://raw.githubusercontent.com/WebKit/WebKit/main/metadata/contributors.json. Rejecting attachment 457919 [details] from commit queue.