958216 - Show ::before and ::after pseudo elements in the computed tab

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[vince.falconi]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36

Steps to reproduce:

While x-browser testing, I found a style issue on a button (heights weren't matching up). To trace the problem, I opened dev tools to see the computed styles for the button's before & :after pseudo elements.


Actual results:

In the dev tools panel, I could see the style rules that were being applied to those pseudo elements in the "Rules" tab, but I could not see anything for them in the "Computed" tab like I could with "real" elements.


Expected results:

I expected to see a section in the "Computed" tab for the pseudo elements' styles, similar to how "real" elements are treated.

Comment 1

[Brian Grinstead [:bgrins]]

I believe that we will not be able to squeeze the pseudo element computed styles into the existing computed styles panel, but I think that this is an important use case to cover.  The best way to handle this is probably by Bug 920141, by allowing a 'real' selection of the pseudo element in the markup tree.

Comment 2

[Brian Grinstead [:bgrins]]

This should be fixed now that Bug 920141 has landed and ::before/::after are now in the markup view, so the computed view will now show information