1208165 - Inspect Element doesn't show hover, active CSS settings

Status: RESOLVED WORKSFORME

(DevTools :: Inspector, defect)

Description

[donrhummy]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 2015063000

Steps to reproduce:

Right click an element, choose "Inspect Element" to test out different hover and active CSS styles live.


Actual results:

No hover or active settings are in the "Rules" box


Expected results:

It should show the "action" type CSS styles for an element so you can dynamically change and test it in real time.

Two possible ways to do this:

1. Show reyed out but still changeable

2. Have a checkbox at bottom of "Rules" box that says, "Show Pseudo Classes" or something like that

Comment 1

[Emerson Veenstra [:emerson]]

If you right click the element currently being inspected, there should be checkboxes for :hover, :active, and :focus at the bottom of that menu

Comment 2

[donrhummy]

(In reply to Emerson Veenstra [:emerson] from comment #1)
> If you right click the element currently being inspected, there should be
> checkboxes for :hover, :active, and :focus at the bottom of that menu

I did not see that, but that's very poor UX. The styles are all at the right, but those particular ones are hidden in another context menu that requires you to right click on the HTML in the inspection pane? This really should be in the styles pane.

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

Marking as WFM. We have a button that would toggle a panel of pseudo classes checkboxes.