Open Bug 898624 Opened 11 years ago Updated 2 years ago

Identify unused CSS rules

Categories

(DevTools :: Inspector: Rules, enhancement, P3)

16 Branch
x86
macOS
enhancement

Tracking

(Not tracked)

People

(Reporter: canuckistani, Unassigned)

References

Details

Identify useless CSS rules Projects grow and evolve and some rules become useless. Removing dead CSS code is not as easy as dead HTML or dead JS.

etherpad: https://etherpad.mozilla.org/sudweb-devtools-progress
original email: http://markmail.org/thread/qfwfxryspiwzfad3#query:+page:1+mid:qfwfxryspiwzfad3+state:results
Taras recently wrote up some prototype code we hope to include as a GCLI command. Might be useful for this.

https://bugzilla.mozilla.org/show_bug.cgi?id=834865
From bug 898624:

(In reply to Ben Kelly [:bkelly] from comment #0)
> 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.
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector
Severity: normal → enhancement
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.