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.
<rdar://problem/21384292>
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.
"Reset rules night is here." -> "Reset rules get us here."
Created attachment 256071 [details] Patch
Created attachment 256072 [details] Patch
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.
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.
Comment on attachment 256072 [details] Patch Clearing flags on attachment: 256072 Committed r186282: <http://trac.webkit.org/changeset/186282>
All reviewed patches have been landed. Closing bug.