1623594 - Add recording state UI to the profiling popup

Status: RESOLVED FIXED

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

Description

[Florens Verschelde :fvsch]

Attachment: doorhanger-recording-mockup.png

Right now the "recording" state is communicated indirectly in the doorhanger menu:

• Call to action is "Start Recording": not currently recording
• Call to actions are "Discard" and "Capture": i guess we're recording? maybe?

I brought it up on chat.mozilla.org and Nazim showed the attached mockup (from Victoria?) which is a good solution. A quick discussion followed:

• Nazim Adding the elapsed time is maybe not desirable because it adds some JS execution? (Nazim: "I think we didn't want to add the incremental time at the end, because that also needs some code to run in an interval")
• It's good to hide the Settings section, especially since showing a disabled <select> element can be confusing ("disabled" states are often misunderstood by users).
• But maybe show the current preset used, as a simple text label?
• Ongoing activity could be shown with a flashing red dot, using a CSS animation if that's not costly?

Label suggestions for presets:

Recording…
Using preset: Web Developer

and:

Recording…
Using custom settings

Visual suggestion for a flashing red dot next to the "Recording…" label:

https://codepen.io/fvsch/pen/ExjRqRq

Comment 1

[:Harald Kirschner :digitarald]

Nazim Adding the elapsed time is maybe not desirable because it adds some JS execution? (Nazim: "I think we didn't want to add the incremental time at the end, because that also needs some code to run in an interval")

The assumption is that a 1s timer interval should not skew anything, especially as the popup will not stay open while the user reproduces the issue.

But maybe show the current preset used, as a simple text label?

Keeping the preset visible somehow would be a nice reminder to have. Not sure though if that is a question users have while recording.

Ongoing activity could be shown with a flashing red dot, using a CSS animation if that's not costly?

CSS animations will likely show up more often as they will cause a 60fps animation on the compositor.

Comment 2

[Julien Wajsberg [:julienw]]

Pinging Greg just to keep the discussion going :-)

Comment 3

[Greg Tatum [:gregtatum]]

I'll leave this bug as the work to implement Victoria's design, but we need to make sure the UI doesn't animate or update, as it shows up in profiles.

Comment 4

[Greg Tatum [:gregtatum]]

Attachment: Bug 1623594 - Add recording state UI to the profiling popup; r?julienw

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0d900cb13dd4
Add recording state UI to the profiling popup; r=julienw

Comment 6

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/0d900cb13dd4