Web Inspector: REGRESSION (Safari 7): Pseudo element rules are not labelled with media queries in Styles panel

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

Summary:
The Styles panel of the Web Inspector labels rules that are applied through media queries. However, this does not apply to pseudo elements. For these, rules do not appear in the panel until the query is true–consistent with ordinary elements–but they are not in any way marked or labelled as being the subject of a media query.

This can be observed on the following site: http://service-docs.adeslade.co.uk. At a 670px viewport, the <div> with the classes ‘section’, and ‘download’ has padding applied, this rule is labelled by the media query. However, the Octocat background image applied as an ::after pseudo element to that same <div> does not have it’s layout changes (background-position, top, left, transform) labelled by the media query.

Steps to Reproduce:
1. Create some basic HTML and CSS, making use of a ::before or ::after pseudo element.
2. Add a media query to change some style of the pseudo element at some breakpoint.

Expected Results:
In the Web Inspector Styles panel, the change in the pseudo element’s style should be labelled by the relevant media query.

Actual Results:
The change in the pseudo element’s style is not labelled as being the result of a truthy media query.

Version:
OS X 10.9; Safari 7. Still occurs in r160213 Nightly.

[Devin Rousso]

<rdar://problem/15611325>

[Devin Rousso]

Created attachment 257304 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 257304 [details]
Patch

Clearing flags on attachment: 257304

Committed r187195: <http://trac.webkit.org/changeset/187195>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.