Bug 138438 – Web Inspector: Pseudo element matchedCSSRules do not include matching selector info

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Joseph Pecoraro]

* 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": []
        }]
        ...
    }
}

[Radar WebKit Bug Importer]

<rdar://problem/18885821>

[Joseph Pecoraro]

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!

[Joseph Pecoraro]

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.

[Benjamin Poulain]

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.

[Joseph Pecoraro]

<http://trac.webkit.org/changeset/175758>