How to measure or profile the cost of CSS rules

Hi list,

The two things we most want to know while profiling Firefox OS app
launch time are (1) what styles had been changed (2) why did the restyle
take so long.

Gaia apps are designed around event dispatches and one event could
trigger many style changes from anywhere from the code base. It is hard
to know what styles had been changed, for example class added or
removed, and what rules had actually been matched. This leads to the
second question. From the gecko profile we usually find both the
selector matching and style recalc take considerable amount of time. So
I guess we could start from reducing the expensive selectors then trying
to reduce the matched elements. Without knowing which rules had actually
been matched, we don't know how to optimize the CSS rules.

So, do you know a way to collect this kind of information, preferably
from WebIDE?

  Kanru