Fenix: [Bug] Confusing "Add to Top Sites" icon looks like the old "Add to Homescreen" icon on Fennec

[madb1lly]

Steps to reproduce

In a tab whilst viewing a webpage, open the "3-dots" menu and look at the "Add to Top Sites" icon.

Expected behavior

During the transition from Fennec to Fenix the UI should try and avoid being confusing.

Actual behavior

The icon for "Add to Top Sites" in Fenix is very similar to the "Add to Homescreen" icon which appears in the address bar in Fennec, however, the two have very different purposes, so using a similar icon is confusing.

Device information

• Android device: 9
• Fenix version: Nightly 200225 06:00

[topotropic]

cc @AmyYLee should we use the top sites icon we use on FX desktop instead here?

[AmyYLee]

cc @AmyYLee should we use the top sites icon we use on FX desktop instead here?

@topotropic Hi, iOS has a slightly different icon for Top Sites as well. It seems like iOS icons veer away from Desktop. Let's use the Desktop icon for now. We should take a look at the icons in iOS, Android, Desktop as a whole in the long term.

[brampitoyo]

Sounds like a decision has been made here. @AmyYLee wrote:

Let's use the Desktop icon for now.
We should take a look at the icons in iOS, Android, Desktop as a whole in the long term.

I’ll remove the needs:UX-feedback label now.

[ekager]

Sorry I'm a bit confused by the discussion - are we changing something here? Are we already using the desktop icon? If we are changing the icon, could someone from UX link the new resource we should use?

[brampitoyo]

Sorry for the confusion, @ekager!

Our version of the desktop icon looks like this:

@AmyYLee can you confirm that this is the icon that we should use for our “Add to Top Sites” function?

[AmyYLee]

Top Sites 16.svg.zip

Sorry for the confusion, @ekager!

Our version of the desktop icon looks like this:

@AmyYLee can you confirm that this is the icon that we should use for our “Add to Top Sites” function?

Yes that's the one. I've attached the svg here

[brampitoyo]

@mcarare after landing that commit, would you let us know if the icon looks too big or small? I know that our asset comes from desktop and was sized 16px, but Android icons are all sized 24px.

If it doesn’t look good, I can help unblock you. Just ping me. Thanks!

[mcarare]

Thank you @brampitoyo! It looks good, I had to do some tweaks cause svg's with masks and/or fillType "ovenOdd" don't convert easily to vector drawables.

[brampitoyo]

@mcarare Thanks. I should remember that Android doesn’t support evenOdd. Here’s a version of this asset, that has fillType nonZero and has been optimised for 24px size:

Topsite.svg.zip

[AndiAJ]

Hi, verified as fixed on the latest Nightly Build #200790605 from 3/19 using the following devices:
• Google Pixel 3a (Android 10)
• Huawei Mate 20 Lite (Android 8.1.0)
• Samsung Galaxy S6 (Android 7)
• OnePlus A3 (Android 6.0.1)

► Screenshot

[madb1lly]

Confirmed on Nokia 8, Android 9. Thanks for fixing this 😄