Application Panel + SW Panel UX Review

[digitarald]

We gonna add a new Application panel in 74 for Manifest and Service Worker Inspection.

App panel combines both SW Inspection PRD and Manifest Inspection PRD.

Meta bug focusses on all remaining SW work.

Todos:

• [ ] Review overall panel and content UI to file prioritized polish
• [ ] Application panel icon
• [ ] Final SW + Manifest icon for sidebar

cc @belen-albeza @captainbrosset

[digitarald]

@violasong do you see any polish that we should fit into the 2 weeks before code freeze?

[fvsch]

Happy to contribute a panel icon and Manifest icon if we know what direction we want.

[fvsch]

One thing that could be interesting is to take the empty states from:

• Accessibility ("Turn On Accessibility Features")
• Application > Service Workers ("You need to register a Service Worker…")
• etc.

And design a single shared component that is basically title + text + call to action, with the same width/spacing/typography.

[digitarald]

One thing that could be interesting is to take the empty states from:

That'd be great follow up work and helps other panels as well (Debugger has some empty state when files are not loaded, Network has empty state and some its details tabs have no-data state).

Happy to contribute a panel icon and Manifest icon if we know what direction we want.

Thanks a lot @fvsch! Icon databases are all over the place for the topic, so I don't have much prior art from other places.

@juliandescottes's box icon does come up a bit here, here or here; so maybe its an easier path to explore.

Manifest as a document icon (as in Chrome) seems straightforward (until Firefox has a more opinionated UI for installing apps).

The existing worker icon (⚒️) in Firefox would work well (related, @violasong started also using the cog in target switching, not sure how intentional).

[violasong]

Happy to contribute a panel icon and Manifest icon if we know what direction we want.

That would be awesome! Looking at the icon sites, the one that sort of makes sense for me is a window with a gear in it. The blocks/grids don't really say "Application" to me.

One thing that could be interesting is to take the empty states from:

Yes, I'm planning on making the service worker one match the Accessibility one a bit more. Figma in progress

[violasong]

The existing worker icon (⚒️) in Firefox would work well (related, @violasong started also using the cog in target switching, not sure how intentional).

I had done this this because Chrome uses a cog for Service Workers (in their Application sidebar) but I do like that the existing worker icon is more distinct.

[digitarald]

Looking at the icon sites, the one that sort of makes sense for me is a window with a gear in it.

👍 I liked that one too but wasn't sure if it works in a small space and didn't want to make it harder.

[digitarald]

@violasong was that the final icon choice, the photon top sites icon? https://design.firefox.com/icons/icons/desktop/top-sites-16.svg

[violasong]

That or the outline version. Comparing the two below, I prefer the outline since it better matches the weight of other icons. The other one is a bit heavy.

[fvsch]

Maybe a variant with one square full, 3 squares outlined?

I think the original metaphor is that of the grid of app icons on a home screen (on e.g. iOS or Android). If we want to convey "this particular app", maybe one could be treated differently? Not sure it’s understandable though.

[violasong]

That sounds good to me!

Mockup: (edit - better res image)