713031 - Add CSS selector profiler

Status: RESOLVED WONTFIX

(DevTools :: Performance Tools (Profiler/Timeline), defect)

Description

[Juriy "kangax" Zaytsev]

Something similar to http://my.opera.com/dragonfly/blog/style-profiler-preview from Opera or https://bugs.webkit.org/show_bug.cgi?id=74004 from WebKit.

AFAIK, there's currently no way to see how much time is spent on evaluating certain CSS rule, and how much time is spent on document reflow and/or repaint.

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Screenshot of WebKit's CSS selctor profiler

A generic profiler would be great, but a CSS selector profiler would also be very useful.

Comment 2

[Paul Rouget [:paul]]

This needs a feature page.

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

kdangoor, would you like to do the honors or should I?

Comment 4

[Panos Astithas (he/him) [:past] (please ni?)]

I don't believe anyone uses feature pages in Mozilla any longer. I suppose mockups, user stories and the like are still needed, but that's a task for whoever starts working on this issue.

Comment 5

[Angelina Fabbro (:angelina)]

Attachment: Screenshot of Opera's old Style Profiler

Opera's old style profiler

Comment 6

[Joe Walker [:jwalker]]

 I'm going to work on this in bug 975522.

Comment 7

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Is bug 975522 really a duplicate of this?  That one seems to just cover "was a selector used or not", while this is about time spent per selector.  But maybe you plan to add more than what the description and existing patch over there conveys...? :)

Comment 8

[Joe Walker [:jwalker]]

(In reply to J. Ryan Stinnett [:jryans] from comment #7)
> Is bug 975522 really a duplicate of this?  That one seems to just cover "was
> a selector used or not", while this is about time spent per selector.  But
> maybe you plan to add more than what the description and existing patch over
> there conveys...? :)

No, thanks - it's not a dupe of this. I'm fairly sure, bug 834865 is what I was thinking of.

Comment 9

[Greg Tatum [:gregtatum] (REO Fx132)]

julien, markus: is this idea still worth keeping around, or re-filing new bugs that are actionable? The links are pretty stale to the ideas.

Comment 10

[Patrick Brosset <:pbro>]

I think we should re-file new bugs. I'm not even sure the tool for this should live in the profiler. Maybe it should be next to selectors in the inspector.
Ideas come and go, and are only implemented when we have the right project/opportunity. It rarely is useful to keep old futuristic ideas in bugzilla. We very rarely end up implementing them as such.

Comment 11

[Julien Wajsberg [:julienw]]

Knowing the performance characteristics of some CSS selectors are useful in some constrained environment. Especially I like the view from attachment 8404807 [details].

However I believe the performance problems of CSS selectors were often fantasized. When this starts to be an issue it also usually means you have other problems: a lot of selectors in the first place, long selectors, etc. I think it's easy to spot without a tool.

Furthermore I think that in nowadays' landscape the performance of an app's CSS is much less important than the performance of an app's JavaScript code.

That said we should likely make it more obvious that "RefreshStyles" is about applying CSS to the DOM. Is it already obvious in our Devtools Performance panel ?

Comment 12

[Greg Tatum [:gregtatum] (REO Fx132)]

Let's go ahead and close this as it's not actionable, and we're tracking product work elsewhere.

Comment 13

[Sebastian Zartner [:sebo]]

(In reply to Greg Tatum [:gregtatum] [@gregtatum] from comment #12)
> Let's go ahead and close this as it's not actionable, and we're tracking
> product work elsewhere.

Would be good if you pointed the followers of this bug were product work is being tracked.

I believe something like this would fit perfectly into the audit mode covered in bug 1415357, but sure, it needs to be discussed first how this feature should look like.

Sebastian

Comment 14

[Greg Tatum [:gregtatum] (REO Fx132)]

Performance work is tracked either in perf.html or the Gecko profiler:

https://github.com/devtools-html/perf.html
https://bugzilla.mozilla.org/buglist.cgi?cmdtype=runnamed&namedcmd=gecko-profiler&list_id=14006296

Further venues for communication can be found at: http://firefox-dev.tools/