* SUMMARY When a rule with multiple selectors matching the current selected element, the rule shows up multiple times in the sidebar. * TEST <style>*, h1, .a, h1.a, body > #foo.a.b { color: green; }</style> <h1 id="foo" class="a b c">Hello World</h1> * STEPS TO REPRODUCE 1. Inspect h1#foo on test page 2. Show styles sidebar => See the one rule 5 times * NOTES It is not too unreasonable to show this rule multiple times. For instance in this test: <style> h1, h1.a { color: blue } .a { color: red; } </style> <h1 class="a">Test</h1> Which will show the fallback list as: Rule 1 (h1.a) -> Rule 2 (.a) -> Rule 1 (a) However, in the case where the same rule matches multiple times, it seems the case of higher specificity should show, and the others do not need to. * OTHER BROWSERS - Chrome matches Safari now and shows the rule multiple times - Firefox only shows the rule once Thoughts?
<rdar://problem/18816349>
Probably a dup of: https://bugs.webkit.org/show_bug.cgi?id=113476 I rather like the idea of reducing clutter.
I debated this when I redid the sidebar. It can be important when each selector has different specificity and other rules interleave with it. Different CSS properties could/will be overridden in each instance of the rule with multiple selectors.
Maybe we can show them but in some new collapsed state?
Or only show them if interleaving happens. Otherwise it collapses into one instance.
I think the deduplication really helps simplify the sidebar. One case I hadn't thought of that this helps is inherited styles. Take this test: <html> <head> <style> /* simplified reset.css */ html, body, div, p { margin:0; padding:0; border:0; font-style: inherit; } body { line-height:1.5; } /* page styles */ p { margin: 0 0 1.5em; } </style> </head> <body><div><p>Test</p></div></body> </html> Inspecting the <p> you will see the first reset rule 4 times total because of the "font-style: inherit" for the p, div, body, html. With de-duplication you only see it once, up above with high specificity and never in the inherited section. If there was in fact a font style it inherits, that would be listed in the inherited section, seriously reducing clutter.
Created attachment 242365 [details] [PATCH] Proposed Fix We should probably also include the complete fallback list in the Computed Rules section with the complete cascade per-property like Firefox/Chrome if there is ever a case where interleaving matters.
Comment on attachment 242365 [details] [PATCH] Proposed Fix View in context: https://bugs.webkit.org/attachment.cgi?id=242365&action=review > Source/WebInspectorUI/ChangeLog:18 > + Remove duplicates from the ordered list of selectors. s/selectors/CSSStyleDeclarations/
Created attachment 242367 [details] [PATCH] Proposed Fix
Comment on attachment 242367 [details] [PATCH] Proposed Fix Clearing flags on attachment: 242367 Committed r178373: <http://trac.webkit.org/changeset/178373>
All reviewed patches have been landed. Closing bug.