1666815 - Simple on-boarding UI for the new Performance panel

Status: RESOLVED FIXED

(DevTools :: Performance Tools (Profiler/Timeline), enhancement)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: image.png

What about introducing simple on-boarding UI for the new Performance panel. It could be short sentence explaining that the old Performance panel is still available, but hidden behind a pref (devtools.performance.enabled).

There could also be a link to MDN e.g. to the "Profiling with the Firefox Profiler" page.
https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler

I am attaching a screenshot of the new Performance panel UI.

Honza

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: Mockup

I am thinking about something as follows (see the attached mockup), but obviously it needs some UX/UI.

Victoria, Florian, WDYT?

Honza

Comment 2

[Victoria Wang [:victoria]]

Attachment: image.png

Here's an idea (also posted on Element) - we can reuse the friendly fox icon which was previously used in onboarding for 3-pane Inspector and other features. Close button would be a nice-to-have.

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: image.png

Thanks Victoria!

Looks great, I like the idea.

IIUC clicking on the close button would hide the notification, so it isn't displayed again.
An alternative, we could also use "Got it!" text instead, just like we use for the Console panel (screenshot attached).

Honza

Comment 4

[Victoria Wang [:victoria]]

Attachment: image.png

Oh yeah, I forgot we have basically the same thing for Console :D

I took a look at adding the "Got it" text and I think the close button is a bit better for this banner because it's so wide (so a text button is harder to spot) and we probably want to avoid the banner being any taller and pushing down the content more.

Btw, Harald mentioned on Element: Wouldn't it be easier to point devs to the Devtools Settings panel?

We could change the copy to this:

New: Firefox Profiler is now integrated into Developer Tools. Learn more about this powerful new tool.

(For a limited time, you can access the original Performance panel via Settings > Advanced.

If it's easy, it would be nice to have a link to the Settings panel like in the attached mockup.

Comment 5

[Victoria Wang [:victoria]]

Attachment: image.png

Slightly improved mockup (figma source)

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Victoria Wang [:victoria] from comment #4)

Btw, Harald mentioned on Element: Wouldn't it be easier to point devs to the Devtools Settings panel?

So, this would mean that the New Performance panel is not replacing the old one, but there are two panels?
(the new one enabled by default and the old one disabled by default - so it can be changed through the Settings panel)

Comment 7

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Julien, you mentioned on Element that you want to make this a mentored bug. Can you please provide some basic instructions + a mentor for anyone who'd be interested to fix this, thanks!

Comment 8

[Julien Wajsberg [:julienw]]

The goal for this bug is to:

1. make a new React component to implement this notice.
2. Add this React Component to the root component

There's some existing code in https://searchfox.org/mozilla-central/rev/4352fb7b0d17c1febff9569ed311e0e42c93093e/devtools/client/webconsole/components/Input/JSTerm.js#1476-1513 and https://searchfox.org/mozilla-central/rev/35245411b9e8a911fe3f5adb0632c3394f8b4ccb/devtools/client/webconsole/components/App.css#425-475, but I'm not sure we need something that complex in this component. Maybe just a div with a left margin (really margin-inline-start to support RTL) to keep room for the icon (make sure to support RTL for the icon placement too).
The icon is chrome://devtools/skin/images/fox-smiling.svg, this can be a background-image.

The link "Learn More" should link to https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler.
Clicking on "Settings > Advanced" should ideally open the Settings panel. I'm not sure how to do that, but as a first patch we could this without a link.

The "X" at the top should close the onboarding panel. This will need to be stored in a pref. Maybe look at the example in the webconsole to get some inspiration. Similarly we should have a state that will mirror the pref at load time (this is where the store is initialized at load time, and an action (like in the webconsole) that will change both the state and the pref.

Also take care that we use a weird flavor of typescript in this codebase, using a javadoc format. You can find more in this file. This is currently failing but let's try to not add more failures.

Comment 9

[Julian Descottes [:jdescottes]]

We should get this preparatory work out of the way so that we can enable the new panel as soon as possible.
Thanks for the detailed instructions Julien.

Comment 10

[Julian Descottes [:jdescottes]]

Attachment: Bug 1666815 - [devtools] Simple on-boarding UI for the new Performance panel

Comment 11

[Julian Descottes [:jdescottes]]

Attachment: Bug 1666815 - [devtools] Add a test for new performance panel onboarding

Depends on D94355

Comment 12

[Julian Descottes [:jdescottes]]

Attachment: Bug 1666815 - [devtools] Add dark theme support to new performance panel onboarding

Depends on D94711

We might fold this in the first changeset after review.
Updated the links color of the whole panel to use a theme variable.
Used another theme variable for the button hover/active background color.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/501f7058e52d
[devtools] Simple on-boarding UI for the new Performance panel r=julienw
https://hg.mozilla.org/integration/autoland/rev/c717b0833087
[devtools] Add a test for new performance panel onboarding r=julienw
https://hg.mozilla.org/integration/autoland/rev/e165fde04af5
[devtools] Add dark theme support to new performance panel onboarding r=julienw

Comment 14

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/501f7058e52d
https://hg.mozilla.org/mozilla-central/rev/c717b0833087
https://hg.mozilla.org/mozilla-central/rev/e165fde04af5