1463431 - Display a flame-like animation when a tab uses a lot of resources [prototype]

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, enhancement)

Description

[Tarek Ziadé (:tarek)]

Attachment: Demo of the flame animation on the tab

This is a prototype for adding a flame animation when a tab uses a lot of resources. see the attached .mov

Be aware that no UX/UI work was done for this, it's just a demo to show what the new performance counters can do in Firefox. 


The work is done in 4 places:

- adding a PerformanceWatcher singleton class in toolkit/components/perfmonitoring/PerformanceUtils.cpp
- adding a ChromeUtils.startPerformanceWatcher function
- adding a new "greedy" style in the tab css that pulses a red flame
- adding an observer in browser/base/content/tabbrowser.js

Scenario:

- ChromeUtils.startPerformanceWatcher initializes a PerformanceWatcher instance
- PerformanceWatcher observes performance-metrics events 
- PerformanceWatcher decides when a window is resource-comsuming
- PerformanceWatcher triggers performance-issue-detected & performance-issue-resolved events with the window id
- tabbrowser.js intercepts the event and adds/remove the greedy style on the related tab

Comment 1

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

This is really exciting.

If you're looking to iterate on this without gating on landing patches in the browser front-end, you might consider using a WebExtension Experiment API to expose the things you need to get the effect. That might be a fast-path to gathering feedback.

Comment 2

[Tim Nguyen :ntim]

It would be nice to attempt to implement the API in bug 1320585 if building an experiment.

Comment 3

[Tarek Ziadé (:tarek)]

Thanks everyone for the feedback & links. I am currently finish a raw implementation and wil see how it could be adapted for webextension experiment & individual tab styling

Comment 4

[Tarek Ziadé (:tarek)]

Attachment: Bug 1463431 - [WIP] Display a flame-like animation when a tab uses a lot of resources

Review commit: https://reviewboard.mozilla.org/r/246362/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/246362/

Comment 5

[Tarek Ziadé (:tarek)]

This is a work in progress but the wiring is roughly done. The watcher is activated by calling:

  ChromeUtils.startPerformanceWatcher();

from the main process in the web console. Then you can visit websites like twitch.tv or coinhive.com,
and quickly switch to another tab. The flame appears on tabs that are not focused and is cleared on the focused tab.

I've detected a bug on workers I need to fix (it's not detecting all execution duration somehow, so it might fail)
and will refine the patch once I figured it out.

Once everything works as expected, I will externalize a few options to tweak the behavior, and make the performance watcher
smarter -- and that should be good enough for a demo for the all hands.

Notice that I have no idea how to make this feature work inside a web extension. I think in the long term we will
want to have that performance watcher in Firefox core, and expose enough events and notifications, so the UI can ultimately 
be built as a web extension, where it takes actions when a tab is using a lot of resources. 

As for the tab styling itself, I don't know how to do it in a generic way yet - I guess this is a different problem for now.
In this patch, I added a "greedy" attribute & style and toggling it.

Comment 6

[Tarek Ziadé (:tarek)]

Comment on attachment 8980205 [details]
Bug 1463431 - [WIP] Display a flame-like animation when a tab uses a lot of resources

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/246362/diff/1-2/

Comment 7

[Tarek Ziadé (:tarek)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=a6ee2138861d17e7d097a12f1b43d2f16a021e7f

Comment 8

[Tarek Ziadé (:tarek)]

Comment on attachment 8980205 [details]
Bug 1463431 - [WIP] Display a flame-like animation when a tab uses a lot of resources

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/246362/diff/2-3/

Comment 9

[Tarek Ziadé (:tarek)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=43503c301a819fa5f32c7fccbb1f15f4405e1bf3

Comment 10

[Tarek Ziadé (:tarek)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=3fca991087671309c34c647b98c5023ad413b64e

Comment 11

[Tarek Ziadé (:tarek)]

You can try the demo if you want, by getting the build for your platform at 

 https://treeherder.mozilla.org/#/jobs?repo=try&revision=589ef34143214b2f076cc99a8b341a4d087216fb


This performance watcher will emit an event when a docgroup or a worker is being very active
in the scheduler (in number of dispatches or execution duration), and another one when things
get back to normal.

To try out, you can visit http://coinhive.com/ and start mining with 12 workers. The tab should start to pulse 
If you open other tabs, coinhive should continue to pulse, indicating that the workers are using a lot of resources 
even if the tab is unfocused.

In this version, the performance watcher looks at the tab activity every 5 seconds, so a website might pulse and stop after
a bit of time if it stops using a lot of resources.

The flame animation is one possible indicator, but we can add any other action to the events that are 
triggered - like a passive user message or a link to run the gecko profiler.