| Summary: | Web Inspector: Pseudo element matchedCSSRules do not include matching selector info | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Joseph Pecoraro <joepeck> | ||||
| Component: | Web Inspector | Assignee: | Joseph Pecoraro <joepeck> | ||||
| Status: | RESOLVED FIXED | ||||||
| Severity: | Normal | CC: | benjamin, graouts, joepeck, timothy, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | 528+ (Nightly build) | ||||||
| Hardware: | All | ||||||
| OS: | All | ||||||
| Attachments: |
|
||||||
Ben helped point out the issue. InspectorCSSAgent::buildArrayForMatchedRuleList was using the JavaScript Element::matches API which won't work with pseudo elements. He suggested instead that we use the SelectorChecker machinery. That works great! Created attachment 241070 [details]
[PATCH] Proposed Fix
The test here is pretty crappy. I'll see if I can come up with a better test.
Comment on attachment 241070 [details] [PATCH] Proposed Fix View in context: https://bugs.webkit.org/attachment.cgi?id=241070&action=review > LayoutTests/ChangeLog:9 > + * inspector/css/psuedo-element-matches-expected.txt: Added. > + * inspector/css/psuedo-element-matches.html: Added. Typo: pseudo. There are other interesting problem with the old code: -Regular pseudo element matching, a::before, b::after, etc can never match. -:visited can never match. |
* SUMMARY Pseudo element matchedCSSRules do not include matching selector info. The frontend then displays all selectors as matching instead of showing exactly which selector matched. * STEPS TO REPRODUCE 1. Inspect <audio> on data:text/html,<audio%20controls> 2. Expand Shadow DOM and select ::webkit-media-text-track-container element 3. Show Styles Sidebar => "video::-webkit-media-text-track-container, audio::-webkit-media-text-track-container" selectors are both highlighted. => expected only audio::-webkit-media-text-track-container to be highlighted, since this is an <audio> * NOTES The result of CSSAgent.getMatchedStylesForNode includes the Rule and Selectors, but an empty matchingSelectors list. { "result": { "matchedCSSRules": [ ... { "rule": { "selectorList": { "selectors": [{ "text": "video::-webkit-media-controls-panel", "specificity": [0, 1, 1] }, { "text": "audio::-webkit-media-controls-panel", "specificity": [0, 1, 1] }], "text": "video::-webkit-media-controls-panel, audio::-webkit-media-controls-panel" }, }, "matchingSelectors": [] }] ... } }