942173 - tool to record CSS rules that match/apply over a period of time

Status: RESOLVED DUPLICATE of bug 898624

(DevTools :: General, defect)

Description

[Ben Kelly [:bkelly, not reviewing]]

Currently the devtools inspector allows us to see rules applied to a single element at a single moment in time.  For dynamic pages, like b2g apps, it would be nice to be able to see rules as they change over time.

Possible use cases:

1) Determine the minimal set of CSS rules used within an app.  For example, many b2g apps pull in largish blocks of CSS from our building blocks, but may only use a small subset of the styles.
2) Visualize style changes over time to identify potential performance issues during transitions and other user operations.

This could possibly be hacked up as a simple logging facility at first.  A longer term tool might look something like:

1) Press "style record" button.
2) Perform operations on page.
3) Press "record complete" button.
4) Tool shows a timeline with vertical marks indicating style changes.  (It would be nice if this was overlayed on top of other information like touch/mouse events for context.)
5) Click on a style change marker in the timeline to inspect the rules that were removed and added.
6) Tool also shows a list of rules that were used at least once during the record period.

This is similar in purpose, but perhaps a bit different to bug 898624 and bug 834865.