Bug 138438 - Web Inspector: Pseudo element matchedCSSRules do not include matching selector info
Summary: Web Inspector: Pseudo element matchedCSSRules do not include matching selecto...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Joseph Pecoraro
Keywords: InRadar
Depends on:
Reported: 2014-11-05 14:07 PST by Joseph Pecoraro
Modified: 2014-11-07 12:31 PST (History)
5 users (show)

See Also:

[PATCH] Proposed Fix (12.09 KB, patch)
2014-11-05 15:58 PST, Joseph Pecoraro
benjamin: review+
benjamin: commit-queue-
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 2014-11-05 14:07:07 PST
Pseudo element matchedCSSRules do not include matching selector info. The frontend then displays all selectors as matching instead of showing exactly which selector matched.

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>

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": []
Comment 1 Radar WebKit Bug Importer 2014-11-05 14:07:33 PST
Comment 2 Joseph Pecoraro 2014-11-05 15:06:06 PST
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!
Comment 3 Joseph Pecoraro 2014-11-05 15:58:59 PST
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 4 Benjamin Poulain 2014-11-06 14:29:28 PST
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.
Comment 5 Joseph Pecoraro 2014-11-07 12:31:09 PST