Update in-app Icons

[amedyne]

Update in-app Icons
(Place holder story for updating In-app Icons.)

┆Issue is synchronized with this Jira Task

[RiyaJ2311]

Hello!
I'm Riya, an Outreachy applicant.
I'm interested in this issue and would love to be assigned to it.
@amedyne how can I contribute?

[amedyne]

Hello!
I'm Riya, an Outreachy applicant.
I'm interested in this issue and would love to be assigned to it.
@amedyne how can I contribute?

Hi @RiyaJ2311 ! Thank you for your interest! We are waiting for the icons to be ready, I will let you know once they are. For the mean time, you can start here: https://github.com/mozilla-mobile/shared-docs/blob/master/android/CONTRIBUTING.md

[RiyaJ2311]

Hi @RiyaJ2311 ! Thank you for your interest! We are waiting for the icons to be ready, I will let you know once they are. For the mean time, you can start here: https://github.com/mozilla-mobile/shared-docs/blob/master/android/CONTRIBUTING.md

Thank you for sharing this with me, I went through this and looking forward to contributing to the org.

[Amejia481]

Below a set of tasks for this ticket:

• Create a feature (nightly or debug) flag for new look and feel, an example can be found here.
• Remove icons from the settings page, this should behind the previously created feature flag. To facilitate the task we could create a temporary preferences.xml file without the icons and switch to it when being in a build variant with the feature flag.
• Update Fenix with a new icon set #18334 Update the rest of the app with the new icon set, this should be also behind the same feature flag, it will allow us to update icons as we get them from the designers.
• After all the icons are updated we can remove the feature flag.

[Amejia481]

👋🏽
@RiyaJ2311 would you like to start working on this issue?, I added some task that can be started now without having the final icons #18132 (comment)

[Amejia481]

@RiyaJ2311 I opened a PR for addressing some of the tasks, please feel free to take some of the remaining ones if you like :)

[Imerion]

How come the icons in the options menu are to be removed? They help with finding the right option quickly, look good, makes it easier to keep track of movement when scrolling and gives the menu a professional and polished look.

[hkaancaliskan]

How come the icons in the options menu are to be removed? They help with finding the right option quickly, look good, makes it easier to keep track of movement when scrolling and gives the menu a professional and polished look.

They are not removed permanently, they will be changed with new icons.

[Imerion]

How come the icons in the options menu are to be removed? They help with finding the right option quickly, look good, makes it easier to keep track of movement when scrolling and gives the menu a professional and polished look.

They are not removed permanently, they will be changed with new icons.

Oh, I see! Sorry! I misunderstood, the PR made it sound like they would be removed without replacement.

[cadeyrn]

They are not removed permanently, they will be changed with new icons.

I don't think that this is true. There is no point in creating a new layout without icons if the plan is to replace the icons. And #18132 (comment) states that the settings icons will be removed and that the icons of the rest of the app will be replaced. Also the answer to my question in #18342 (comment) suggests that the icons are permanently removed.

[Imerion]

They are not removed permanently, they will be changed with new icons.

I don't think that this is true. There is no point in creating a new layout without icons if the plan is to replace the icons. And #18132 (comment) states that the settings icons will be removed and that the icons of the rest of the app will be replaced. Also the answer to my question in #18342 (comment) suggests that the icons are permanently removed.

That is worrying. Can anyone confirm? I really don't think these should be removed. (But I understand if it needs to be done temporarily)

[brampitoyo]

Amejia481@5e6baa38eb2fb752f21d9fbd1708d9deceb60c81’s PR looks good from my perspective!

In case we want to update the next batch of icons, here’s the list:

• QR
• lightbulb (Report site issue menu item)
• pin outline (the new icon for Add to top site menu item; when a site has been pinned, this icon changes into a pin-fill)
• bookmark-fill (after a page has been added to bookmark, we change the outline bookmark star into a fill)
• more-vertical
• chevron-right (next to Add-ons menu item)
• chevron-up (inside Find in page)
• chevron-down (within Find in page and Saved logins)
• lock-blocked
• avatar-signed-in-fill
• avatar-signed-out (the new icon for Sign in to sync menu item – replacing
• avatar-confirm-email
• avatar-alert (icon to be finalised very soon)

[Amejia481]

Amejia481@5e6baa3 PR looks good from my perspective!

In case we want to update the next batch of icons, here’s the list:

* [ ]  QR

* [ ]  lightbulb (`Report site issue` menu item)

* [ ]  pin outline (the new icon for `Add to top site` menu item; when a site has been pinned, this icon changes into a pin-fill)

* [ ]  bookmark-fill (after a page has been added to bookmark, we change the outline bookmark star into a fill)

* [ ]  more-vertical

* [ ]  chevron-right (next to `Add-ons` menu item)

* [ ]  chevron-up (inside `Find in page`)

* [ ]  chevron-down (within `Find in page` and `Saved logins`)

* [ ]  lock-blocked

* [ ]  avatar-signed-in-fill

* [ ]  avatar-signed-out (the new icon for `Sign in to sync` menu item – replacing

* [ ]  avatar-confirm-email

* [ ]  avatar-alert (icon to be finalised very soon)

Awesome lets proceed with the second batch 👍🏽 .

[brampitoyo]

Just writing a small additional note that info and avatar-signed-out icons have not yet been replaced on about:welcome (we’ll file an issue for this).

Interestingly, the etp-shield icon did get replaced correctly.

[brampitoyo]

@Amejia481 When we want to update our next batch of icons, here’s the list.

It’s a long one, so feel free to break it apart into parts!

• help
• folder
• folder add/new
• share (the Android symbol is three circles connected with lines)
• collection
• add to home screen
• password (eye)
• password hide (eye with cross)
• checkmark
• website placeholder (this is not just used for generic website, but also for Settings menu items like “Exceptions”
• edit
• sync (it’s already using the right icon, just needs to point the other way – counterclockwise – and the icon has been updated to reflect that)

Permissions

• location
• location blocked
• camera
• camera blocked
• microphone
• microphone blocked
• notifications
• notifications blocked
• storage
• storage blocked
• autoplay media
• autoplay media blocked

Make sure that DRM-controlled content is using the new link icon – I think it already does?

Tracking Protection

• cryptominer
• fingerprinter
• social tracker
• third party cookies

New Tab Page

• avatar signed out (on New Tab Page, see Update in-app Icons #18132 (comment) above)
• info (on New Tab Page, see Update in-app Icons #18132 (comment) above. The other info icon e.g. in Add-ons Manager seems to be correct already)

Add-ons Manager

• rating (small - 16x16 – in Add-ons Manager)
• rating half (small - 16x16 – in Add-ons Manager)

[Amejia481]

Just writing a small additional note that info and avatar-signed-out icons have not yet been replaced on about:welcome (we’ll file an issue for this).

Interestingly, the etp-shield icon did get replaced correctly.

They were pointing to other resources are they where slightly modified for the welcome screen. I now updated them as part of the second batch.

[Amejia481]

Icons have been uplifted to AC beta and Fenix Beta

[LaurentiuApahideanSV]

Verified as fixed on Firefox Preview 89.0.0-beta.10. We tested the following icons:

• the icons found on the onboarding screen
• the icons present in the page 3 dot menu
• the icon of the collections
• the icons of bookmark folders
• the icons when permissions are asked
• the icons present in the Account settings, Enhanced tracking protection and Site permissions submenus of the Setting menu

[Amejia481]

Thanks @LaurentiuApahideanSV