239336 – Update in-field icons for credential fields

Bug 239336 - Update in-field icons for credential fields

Summary: Update in-field icons for credential fields

Status:	RESOLVED FIXED

Alias:	None

Product:	WebKit
Classification:	Unclassified
Component:	Forms (show other bugs)
Version:	Safari Technology Preview
Hardware:	Unspecified Unspecified

Importance:	P2 Normal
Assignee:	Ricky Mondello

URL:
Keywords:	InRadar

Depends on:	239522
Blocks:
	Show dependency tree / graph

Reported:	2022-04-14 08:50 PDT by Ricky Mondello
Modified:	2022-04-19 15:35 PDT (History)
CC List:	10 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.

Description Ricky Mondello 2022-04-14 08:50:47 PDT

Update in-field icons for credential fields

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

Created attachment 457633 [details]
Patch

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

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

Comment 3 Tim Nguyen (:ntim) 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>
```

Comment 4 Ricky Mondello 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?

Comment 5 Tim Nguyen (:ntim) 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.

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

Created attachment 457808 [details]
Patch

Comment 7 Ricky Mondello 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.

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

Created attachment 457816 [details]
Patch

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

Finally passed EWS. Looking for review now.

Comment 10 Wenson Hsieh 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)

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

Created attachment 457912 [details]
Patch

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

Comment on attachment 457912 [details]
Patch

For landing.

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

Created attachment 457919 [details]
Patch

Comment 14 EWS 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.

Comment 15 EWS 2022-04-19 14:54:53 PDT

Committed r293038 (249777@main): <https://commits.webkit.org/249777@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 457919 [details].

Comment 16 Radar WebKit Bug Importer 2022-04-19 14:55:14 PDT

<rdar://problem/91987810>