1709655 - Update icons used for "Extensions", "Available Updates" and "Recent Updates" about:addons categories sidebar buttons

Status: VERIFIED FIXED

(Toolkit :: Add-ons Manager, defect, P2)

Description

[Luca Greco [:rpl] [:luca] [:lgreco]]

As an additional follow up to Bug 1708788, we should also update the icon used in the about:addons sidebar for the "Available Updates" category button to match the shape of the new generic extension icon (which is also used for the "Extensions" category button available in the same sidebar).

Comment 1

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: "Extensions List" icon vs "Available Updates" icon

Comment 2

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: extensions_list_icon_vs_available_updates_icon_shapes.png

Comment 3

[Luca Greco [:rpl] [:luca] [:lgreco]]

Link to the "Available Updates" icon path from searchfox:

• https://searchfox.org/mozilla-central/source/toolkit/themes/shared/extensions/category-available.svg

Comment 4

[Luca Greco [:rpl] [:luca] [:lgreco]]

Needinfo katie (to update this issue with UX recommendations).

Comment 5

[katieC]

Attachment: UXmock_RemoveUpdatesIcon.png

UX recommendation*
As MR1 is working to simplify complex icons, minimize badging when possible, UX recommends removing the Update puzzle icon from the navigation and using text only (also makes sense because the update is not Extension only). Attached mock is for visual purpose only, not fonts/type or spacing

*about:pages were out of scope for MR1 / Updates might benefit from a ux review in the future

Comment 6

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: aboutaddons_sidebar_on_smallwidths.png

Hey Katie,
I was starting to look into the changes needed to follow the UX recommendation for these sidebar category buttons and I did notice that the current recommendation may not play well on how the sidebar does adapt itself to a smaller width.

As you can see in the screenshot I'm attaching to this comment, in that case all the sidebar entries with an icon are reduced to only show the icon and at that point the category with no icon does not look great.

I'd like to get UX perspective on this small width scenario before proceeding with planning the necessary changes.

Let me know what do you think.

Comment 7

[katieC]

Good catch! We can use the generic update icon instead. Sam is optimizing it now, filename: "update-circle-20.svg" - can be used for "Available Updates" and "Recent Updates"

Comment 8

[Sam Foster [:sfoster] (he/him)]

I've added the optimized update-circle-20.svg to the google drive folder we're using to keep all the finalized icons in one place. Details of where to find that and some of the steps you should take when adding/updating this icon are all outlined in this procedure doc

Comment 9

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: Bug 1709655 - Update about:addons "Update Available" and "Recent Updates" category icons. r?sfoster!

This patch updates the following icons:

• category-available.svg: replaced with the content of the optimized icon update-circle-20.svg
• category-recent.svg: currently replaced with the content of the same icon used for category-available-svg,
  but with the addition of the attribute transform="rotate(180)" on the svg element, mainly because:
  • this two categories may be visible at the same time if there are pending updates available AND
    the user selects "View Recent Updates" from the about:addons page gear menu popup
  • when both the categories are visible and the about:addons page width is less then 830px, only the
    category icons are still visible (similarly to other about pages) and having the exact same icon
    for both the categories may look confusing for the user
  • The opposite arrow directions does also match the two icons previously used by this two categories buttons
  • the recommendation was to use the same icon for both these categories, and so I assumed that one was
    meant to be rotate the category-recent.svg one by 180 deg.
  • the icon is applied to the category button as a background image, and so rotating it from the CSS rule
    would also rotate the category button text as well

As per Step 7 from the "Proton Icons Procedure" google doc, I did run RUN_FIND_DUPES=1 ./mach package to
detect if these two icons needed to be added to the allow-dupes file but no duplicate was detected,
I guess it is because:

• update-circle-20.svg may not be yet used anywhere else (and so not part of the icons already used in mozilla-central)
• category-recent.svg is being rotated with an attribute applied in the svg element itself and so it is
  technically a different icon from that "duplicate" icons check perspective.

Comment 10

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: Bug 1709655 - Replaced --blue-50 with --in-content-accent-color to ensure about:addons badge color matches the expected Proton colors. r?sfoster!

This patch does change the color of the "Available Updates" category button badged count and the badge dot
added to the addon card options button when the addon has a pending update in the list of addons to
var(--in-content-accent-color) to make sure it does match the accent color used elsewhere in the same page.

It is particularly easy to notice the colors mismatch when the active theme is dark and there are pending
updates, e.g. see the screenshot attached in the bug comments here:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1709655#c2

Depends on D114780

Comment 11

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: Bug 1709655 - Tweak 'Available Updates' badged dot position to be places on the top-end corner of the icon. r?sfoster!

Depends on D114781

Comment 12

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: about_addons_updates_categories_icons_and_badged_dot_before_bug1709655.png

This is a screenshot of how the about:addons sidebar looks right now (when the width is <= 830px and only the sidebar icons are visible without any text).

Comment 13

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: badged_icon_after_icon_updated_for_bug1709655.png

This screenshot shows the new icons under conditions similar to the screenshot in comment 12.

In this screenshot the position of the "badged dot" is the same as it is at the moment on mozilla-central (without the change in D114781).

Comment 14

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: sidebar_badged_dot_position_tweaked.png

This screenshot is how the "badge dot" is positioned on the "Available Updates" category icon with the additional changes from D114781.

The screenshot does also include a similar "badge dot" applied to the addon card "more options" button (on the right of the screenshot) for comparison.

Comment 15

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: Bug 1709655 - Update other about:addons category icons and remove extensionGeneric.svg chrome url overrides. r?sfoster!

Apparently the icon we use for the category-extensions.svg and for extensionGeneric.svg is using a custom mapping
configured in mozapps.inc.mn

This was a bit confusing because I was initially changing the content svg but without having the result that
I was expecting.

I'm adding Dale as an additional optional reviewer on this phabricator revision because from the mercurial logs
I see he did work on Bug 1380043 and he may have some more context to double-check what would be the right way
to deal with this.

With the mapping before this change, the sidebar icon for the extension category and the addon cards for
extension without an icon were both mapped to the same icon (which was the filled one before this patch,
and we would have changed both to the outline icon if we do change the icon content without changing the
mapping as well).

It does seem also worth a mention that extension.svg is the outlined extension but its viewbox and width/height
are set to 16px (but to be fair the same is also currently the case for category-dictionaries.svg,
category-themes.svg etc).

Depends on D114782

Comment 16

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: aboutaddons_sidebar_and_generic_extension_icons_bug1709655.png

This screenshot shows how the "sidebar extensions category icon" and the "addon card icon for an extension without its own icon" looks like with the additional changes from D114884.

Comment 17

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: Bug 1709655 - Fix extension icon alignment in the about:preferences categories sidebar. r?sfoster!

Depends on D114884

Comment 18

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: about_preferences_extension_icon_misaligned_20210512.png

This is a screenshot that shows how the about:preferences sidebar's extension icon alignment looks like at the moment in mozilla-central without D114978.

Comment 19

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: about_preferences_extension_icon_alignment_tweaks_20210512.png

This is a screenshot that shows how the about:preferences sidebar's extension icon alignment looks like with D114978 applied.

Comment 20

[Sören Hentzschel]

Since this bug is about the "Available Updates" and "Recent Updates" icons about:addons should the patch for the alignment issue on about:preferences be moved to bug 1708883? Or should bug 1708883 be closed as duplicate of this one if you want to fix it here?

Comment 21

[Luca Greco [:rpl] [:luca] [:lgreco]]

(In reply to Sören Hentzschel from comment #20)

Since this bug is about the "Available Updates" and "Recent Updates" icons about:addons should the patch for the alignment issue on about:preferences be moved to bug 1708883? Or should bug 1708883 be closed as duplicate of this one if you want to fix it here?

eh, I missed to notice we had bug 1708883 already filed for the same alignment issue.

I'm fine either way:

• I can move that patch from this bug to bug 1708883
• or keep the patch in this bug and close bug 1708883 as a duplicate

D114978 doesn't really depend from the other patches in this stack, and so moving it bug 1708883 isn't going to require anything more than renaming the patch summary and move it to bug 1708883.

Comment 22

[Phabricator Automation]

Comment on attachment 9221597 [details]
Bug 1709655 - Fix extension icon alignment in the about:preferences categories sidebar. r?sfoster!

Revision D114978 was moved to bug 1708883. Setting attachment 9221597 [details] to obsolete.

Comment 23

[Luca Greco [:rpl] [:luca] [:lgreco]]

I moved D114978 to bug 1708883, in the end that contains some more context and it is tracking specifically that alignment issue.

I'm going to mark the comment 18 and 19 as off-topic in this bug (and mark the related attachment as obsolete) and move the two screenshots in bug 1708883 where they belong.

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5220c9563acd
Update about:addons "Update Available" and "Recent Updates" category icons. r=sfoster
https://hg.mozilla.org/integration/autoland/rev/00c713a03154
Replaced --blue-50 with --in-content-accent-color to ensure about:addons badge color matches the expected Proton colors. r=sfoster
https://hg.mozilla.org/integration/autoland/rev/6064c1bfd8d2
Tweak 'Available Updates' badged dot position to be places on the top-end corner of the icon. r=sfoster
https://hg.mozilla.org/integration/autoland/rev/a3251e1a9f26
Update other about:addons category icons and remove extensionGeneric.svg chrome url overrides. r=sfoster

Comment 25

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/5220c9563acd
https://hg.mozilla.org/mozilla-central/rev/00c713a03154
https://hg.mozilla.org/mozilla-central/rev/6064c1bfd8d2
https://hg.mozilla.org/mozilla-central/rev/a3251e1a9f26

Comment 27

[Romain Testard [:RT]]

Can we please uplift to Beta 89?

Comment 28

[Mike Conley (:mconley) (:⚙️)]

ni'ing rpl for comment 27.

Comment 29

[Mark Striemer [:mstriemer]]

Attachment: beta-applied.png

These commits grafted onto beta just fine, try build running here https://treeherder.mozilla.org/jobs?repo=try&revision=abe5e9bd4d0533bb60c738bc9b40a186422138f4

I checked the icons and they appear to be correct

Comment 30

[Mark Striemer [:mstriemer]]

Comment on attachment 9221406 [details]
Bug 1709655 - Update other about:addons category icons and remove extensionGeneric.svg chrome url overrides. r?sfoster!

Beta/Release Uplift Approval Request

• User impact if declined: Add-on manager icons will be inconsistent with the proton spec, with a mix of old and new and filled and unfilled
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Icon swaps, minor CSS and manifest changes
• String changes made/needed: None

Comment 31

[Pascal Chevrel:pascalc]

Comment on attachment 9221406 [details]
Bug 1709655 - Update other about:addons category icons and remove extensionGeneric.svg chrome url overrides. r?sfoster!

Approved for our last beta before 89 RC, thanks.

Comment 32

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/9b488e254396
https://hg.mozilla.org/releases/mozilla-beta/rev/192d5196e133
https://hg.mozilla.org/releases/mozilla-beta/rev/cf79de9fe0c5
https://hg.mozilla.org/releases/mozilla-beta/rev/f1aa92185dfe

Comment 33

[Cristian Baica [:cbaica], Release Desktop QA]

The issue is verified fixed on Windows 10, Ubuntu 18.04 and macOS 11 using Fx89.0b14 and Fx90.0a1. The new design is correctly applied for the 'view recent updates' and 'available updates' icons.