Closed Bug 1463431 Opened 6 years ago Closed 6 years ago

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

Categories

(Firefox :: Tabbed Browser, enhancement)

Product:
Firefox
Component:
Tabbed Browser
Type:
enhancement
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: tarek, Assigned: tarek)

References

Details

(Whiteboard: [perf-tools])

Attachments

(2 files)

Demo of the flame animation on the tab
138.24 KB, video/quicktime
Details
Bug 1463431 - [WIP] Display a flame-like animation when a tab uses a lot of resources
59 bytes, text/x-review-board-request
Details 
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
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.
See Also: → 1320585
It would be nice to attempt to implement the API in bug 1320585 if building an experiment.
Severity: normal → enhancement
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
Assignee: nobody → 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.
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.
Whiteboard: [perf-tools]
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: