869307 - [style editor] Show rules for highlighted element

Status: NEW

(DevTools :: Style Editor, enhancement, P3)

Description

[Heather Arthur [:harth]]

Attachment: Mockup of UI proposal

The Style Editor should let you see the rules that apply to currently highlighted element.

Attached is my UI proposal. When an element is highlighted, a little bar would appear in the top right corner. The bar would show the selector of the highlighted element, the number of rules that applied to it, and up/down buttons for navigating through each rule that applies.

Pressing the up/down (or using the find-in-page key shortcuts like Ctrl-G) would jump to the editor and line number of the next rule that applied.

Comment 1

[Joe Walker [:jwalker]]

I like it.

> The bar would show the selector of the highlighted element,
> the number of rules that applied to it"

'the selector' - I assume you mean the output of CssLogic.findCssSelector for the highlighted element? Otherwise there are many possible selectors?

Comment 2

[Heather Arthur [:harth]]

(In reply to Joe Walker [:jwalker] from comment #1)
> I like it.
> 
> > The bar would show the selector of the highlighted element,
> > the number of rules that applied to it"
> 
> 'the selector' - I assume you mean the output of CssLogic.findCssSelector
> for the highlighted element? Otherwise there are many possible selectors?

Yes, or possibly just "current node" if we get the highlighter showing while the Style Editor is open.

Comment 3

[Heather Arthur [:harth]]

Just started implementing this and realized it will almost definitely have to wait for the inspector to be remoted to get a reference to the selected node on the server.

Comment 4

[Paul Rouget [:paul]]

Just an idea: could we also "highlight" the rules that match the current selection? For example, the non-matching rules (the text) could be opacity:0.8 and the matching rules opacity:1.

Comment 5

[Paul Rouget [:paul]]

Oh, and I like the mockup. What does the close button do? It closes the floating toolbar? But then, how do you bring it back? And maybe we should use the existing toolbar (we were planning to kill it iirc).

Comment 6

[Patrick Brosset <:pbro>]

This is an "old new idea" that hasn't received much activity in a while, but it's still valuable to keep around.

Comment 7

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).