Bug 44267 – Web Inspector: display :hover and :active styles in the styles sidebar.

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Pavel Feldman]

Firebug allows triggering the state it is showing styles for (drop-down arrow on the 'Styles' tab). We should do something similar.

[Pavel Feldman]

Created attachment 64856 [details]
[IMAGE] Firebug's way

[Alexander Pavlov (apavlov)]

The FireBug's approach does not allow e.g. "hovering" over a selected element's ancestor to trigger complex selectors (e.g. "div#btn1:hover span.title" when the SPAN element is selected), which is sometimes the thing that's actually needed.

[Adam]

If you inspect an anchor, then mouse over it, it doesn't even update on the style list period let alone an option to turn it on.

In Firebug it shows up and disappears entirely when you mouse out, so you don't even know if there is a hover element on it.

It could be implemented better than the method Firebug uses.  If an element has a :hover pseudo element, it should always list it active or not so you realized it's even there, but when not active, it should be crossed out, or maybe crossed out and the section greyed out since it's not even available at the time.  Listed directly above the inherited elements.

[Alexander Pavlov (apavlov)]

[e-mail] has implemented this functionality in the Firebug-like way.