2030715 - Nova redesign for Extensions panel

Status: RESOLVED FIXED

(Toolkit :: Add-ons Manager, task, P3)

Description

[Stephen Thompson [:sthompson]]

UX spec: https://www.figma.com/design/XT0eDYh4RtbMNWaYQi0efM/Chrome-Sidebar-UX-Specifications--Sprint-1-?node-id=14540-28811&t=DmWtRyDhwG2zsfvj-0

Expected changes based on Figma:

• Update empty state illustration with the extensions-panel-empty-illustration.svg file attached to this bug
• Update a number of the empty state strings (see https://searchfox.org/firefox-main/source/browser/locales/en-US/browser/unifiedExtensions.ftl#9-20 for the existing strings)
• Change the icon of the extension item toolbarbutton from a gear icon to a three-dot icon (probably chrome://global/skin/icons/more.svg)

Given the nature of these changes, it will be easier to switch these out in the codebase without making them conditional on the Nova pref.

Comment 1

[Rob Wu [:robwu]]

I noticed the FIDEFE link. Does that mean that you're going to work on this task?

P.S. Linking bug 2032049 for visibility - the Nova redesign caused a bug in the visibility of extension icon button's icon still unresolved. We should make sure that Nova restyling does not cause such regressions.

Comment 2

[Stephen Thompson [:sthompson]]

During the Nova redesign planning process, a number of panels including the Extensions panel were lumped into the "Chrome/Sidebar" category that the Firefox Desktop Front-End team is planning to tackle.

Since the UX spec looks like all of the visual changes should come from general design system + chrome CSS changes that Firefox Desktop Front-End will be making in general, I think it's reasonable for our team to make sure that the Extensions panel looks correct after our changes.

So far, the only real changes that have occurred behind browser.nova.enabled are design system CSS property changes that are cascading throughout the browser. We are only now starting to go through each part of the browser to make any fixes, adjustments, or other redesigns.

If your team is planning on making any content or visual design changes to the Extensions panel in the next several months, then we can chat to plan that work.

Comment 3

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

Thanks Stephen, based on your reply we are triaging this as P3 N/A, but if you determine that anything should be done specifically for the extension panel let us know so that we can bump the priority and support that effort if necessary.

Comment 4

[Ania]

Hi folks,
Noting that one thing that needs to be updated for the Extensions panel is the empty state illustration for the extensions panel.

The assets for Classic window have been finalized and is available here - https://www.figma.com/design/XT0eDYh4RtbMNWaYQi0efM/Chrome-Sidebar-UX-Specifications--Sprint-1-?node-id=29192-25685&t=4HuqwiySeSiphGy4-0

Extensions panel empty state is also different in the Private Window (I attached a screenshot of how it looks like now). We were hoping to figure out if it's easy for us to use two different illustrations, one in Classic, one in Private, or whether this would be fairly tricky and should be treated as a nice to have and addressed post-Nova?

Comment 5

[Ania]

Attachment: extensions empty state private window.png

Comment 6

[Ania]

Attachment: extensions empty state classic window.png

Comment 7

[Stephen Thompson [:sthompson]]

Based on https://searchfox.org/firefox-main/rev/43aae7a9ab016c3892591a759e48ff73896287e4/browser/base/content/browser-addons.js#2442-2507 I think it would be relatively simple to have two illustrations in the DOM and show/hide the appropriate illustration based on whether the current window is a private window or not. I would just make sure we're clear about the expectation: I'm assuming that we want the private window variant to always show in the empty state of all private windows, regardless of whether a user has no extensions, extensions without private window permissions, or disabled extensions.

Comment 8

[Ania]

Thank you, Stephen, this is very helpful context.
Kate and Michelle will decide tomorrow whether to use a separate illustration for the Private window.

If we decide to do it, let's indeed use the same illustration for each of these special states:

I would just make sure we're clear about the expectation: I'm assuming that we want the private window variant to always show in the empty state of all private windows, regardless of whether a user has no extensions, extensions without private window permissions, or disabled extensions.

I updated my earlier comment with a link to the finalized illustration for the Classic window empty state.

Comment 9

[Ania]

Confirming that Kate and Michelle decided to have the same illustrations in classic and private window for Nova.

They will connect with Karen and Jane to do a bigger audit to see if a separate private window illustration style makes sense, but it's out of scope for Nova.

Comment 10

[Stephen Thompson [:sthompson]]

Attachment: extensions-panel-empty-illustration.svg

I exported the new illustration from Figma and ran it through https://svgomg.net/ to optimize it. This attachment should be ready to replace https://searchfox.org/firefox-main/source/browser/themes/shared/addons/extensions-panel-empty-illustration.svg in the codebase.

Comment 11

[Michael Hynson]

Attachment: Bug 2030715 - Update the Extensions panel empty state. r=#fluent-reviewers

Comment 12

[Michael Hynson]

Attachment: Bug 2030715 - Updates menu item button icon for the items in Extension panel.

Comment 13

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

Clearing old needinfo (patches are already attached to phabricator and are already being reviewed).

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/5742aa5c71fa
https://hg.mozilla.org/integration/autoland/rev/5512e51458b4
Update the Extensions panel empty state. r=fluent-reviewers,desktop-theme-reviewers,bolsson,robwu,dao

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/6314488732e5
https://hg.mozilla.org/mozilla-central/rev/cca75726e14d
Updates menu item button icon for the items in Extension panel. r=robwu

Comment 16

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/5512e51458b4
https://hg.mozilla.org/mozilla-central/rev/cca75726e14d