Bug 145979 – Web Inspector: Pseudo Styles Ordering and Media Queries

• Component: Web Inspector
• Status: RESOLVED FIXED

[Chris Chiera]

Created attachment 254882 [details]
Comparing same file's style rules in chrome and safari

This is in regards to Safari 8.1 on 10.11. Filed a bug report with Apple but also posting here. If there is a separate Webkit forum for 8.1 let me know.

In the attachment I compared Chrome style web inspector vs Safari 8.1 showing the same style from the same page. Chrome properly shows all the relevant styles without needing to scroll. Where is in Safari, (while aesthetically pretty), the actual first relevant style, section.products .img-pro h3" is at the very bottom. Chrome properly puts those :after/:before at the bottom of the list since it's least relevant. Chrome also shows why there is two by highlighting :after in the first style and highlighting :before in the second style unlike Safari which simply lists the rules twice without any visual difference. Also Chrome is showing the properly media query relevant information where is Safari is not at all.

[Radar WebKit Bug Importer]

<rdar://problem/21384292>

[Timothy Hatcher]

We should do this. Reset rules night is here. Perhaps we should interleave pseudo-styles with other rules. We might be able to use specificity for that ordering.

[Timothy Hatcher]

"Reset rules night is here." -> "Reset rules get us here."

[Devin Rousso]

Created attachment 256071 [details]
Patch

[Devin Rousso]

Created attachment 256072 [details]
Patch

[Timothy Hatcher]

Comment on attachment 256072 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=256072&action=review

> Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js:278
> +                    if (style.ownerRule.selectorText.includes(pseudoElement.selectorText))

Do you really want includes? Or should this be a prefix or suffix match?

Comparing selectors might fail in some cases, like selectors with commas or implicit * (like :before is the same as *:before).

The lastMatchingSelector part is confusing to me. Can you explain it more, maybe with a comment.

[Devin Rousso]

I was using includes to allow proper matching with selectors that had commas in them.  For example, so div::after would match with body, div, p.

I can definitely see that there are a lot of edge cases I haven't taken into account, which is why I made it so that if any pseudo-selector rules are left by the time the first User Agent or inherited rule is listed, all the remaining pseudo-selector rules are printed out.

The lastMatchingSelector part is for when multiple rules have the same selector.  In this case, the pseudo-selector rule should go after the last rule and not after the first one.

[WebKit Commit Bot]

Comment on attachment 256072 [details]
Patch

Clearing flags on attachment: 256072

Committed r186282: <http://trac.webkit.org/changeset/186282>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.