Bug 139612 – Web Inspector: Show Pseudo Elements in DOM Tree

• Component: Web Inspector
• Status: RESOLVED FIXED

[Joseph Pecoraro]

* SUMMARY
It would be great to more directly see pseudo element styles for things like :before/:after/:first* content. They could naturally show up as some "token" in the DOMTree.

*NOTES
- Bug: 31749: Wanting :before and :after to show up in the Elements tab as "nodes" if there are styles assigned to these pseudo elements.  Would also like the ability to select the nodes and see the specific styles assigned to them, as well as hover over them and have them be highlighted in the page view.

[Radar WebKit Bug Importer]

<rdar://problem/19281529>

[Joseph Pecoraro]

*** Bug 147151 has been marked as a duplicate of this bug. ***

[Julian Kussman]

Please consider my use case in needing to see the computed values of pseudo elements in this request. This is not possible without a way to select them in them DOM list or through another method.

[Timothy Hatcher]

A second request for this on twitter today: https://twitter.com/benfrain/status/623596363075428352

[Joseph Pecoraro]

Created attachment 257490 [details]
[PATCH] Proposed Fix

A few remaining issues, that are relatively minor but I want to investigate before landing.

1. Fix "New Rule" button to create an appropriate selector.
2. Fix "Hover" and other pseudo elements to affect the host element.
3. Fix the "matched" selector list, shows every selector matching.
4. More testing in the frontend, specifically around a node with LOTS of children and ::after

[WebKit Commit Bot]

Attachment 257490 [details] did not pass style-queue:


ERROR: Source/WebCore/inspector/InspectorDOMAgent.h:238:  The parameter name "element" adds no information, so it should be removed.  [readability/parameter_name] [5]
Total errors found: 1 in 30 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Joseph Pecoraro]

Created attachment 257491 [details]
[IMAGE] Pseudo Element

[Joseph Pecoraro]

> 2. Fix "Hover" and other pseudo elements to affect the host element.

This should have read "pseudo classes to affect the host element".

[Timothy Hatcher]

Is there any better text we can use in the tree outline? The bare ::before and ::after bothers me.

Maybe the selector? p.both::after

[Joseph Pecoraro]

(In reply to comment #9)
> Is there any better text we can use in the tree outline? The bare ::before
> and ::after bothers me.
> 
> Maybe the selector? p.both::after

Selector could work, but if there is a long selector or multiple different selectors that affect this before/after content it might look bad.

We could just use the tag name.

    p::before

Or perhaps making it appear more like an element would be good:

    <::before>
    <pseudo::before>
    [before]

[Joseph Pecoraro]

Created attachment 257500 [details]
[PATCH] Proposed Fix

This fixes issues 1-3, I still have to do testing with large sets of children.

[Joseph Pecoraro]

Created attachment 257506 [details]
[PATCH] Proposed Fix

This fixes "Show All Nodes (# more)" button and other miscellaneous handling. Other than tweaking the UI, I think this is functionally complete for ::before/::after.

[Timothy Hatcher]

Comment on attachment 257506 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=257506&action=review

Do we still show ::before and ::after matching style rules when selecting a normal element? We might want to filter those out now.

> Source/WebCore/inspector/InspectorCSSAgent.cpp:558
> +                    InspectorStyleSheetForInlineStyle* styleSheet = asInspectorStyleSheet(parentElement);
> +                    if (styleSheet)

Nit: One line.

> Source/WebCore/inspector/InspectorDOMAgent.cpp:1364
> +            auto pseudoElements = buildArrayForPseudoElements(element, nodesMap);
> +            if (pseudoElements)

Nit: One line.

> Source/WebInspectorUI/ChangeLog:33
> +
> +

Nit: Double lines.

> Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js:296
> +        // FIXME: Handle shadow roots.

We don't support shadow roots yet, and may never. Still worth adding this?

> Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js:297
> +        // FIXME: Handle template content.

What about template content do we not support? Should file a bug for this.

> Source/WebInspectorUI/UserInterface/Models/DOMNode.js:82
> +        // FIXME: Handle templateContent.

Nit: You say "template content" above.

> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css:158
> +    color: brown;

We usually only do keyword colors for white, black or transparent.

[Joseph Pecoraro]

(In reply to comment #13)
> Comment on attachment 257506 [details]
> [PATCH] Proposed Fix
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=257506&action=review
> 
> Do we still show ::before and ::after matching style rules when selecting a
> normal element? We might want to filter those out now.

Yes currently we do. I wanted to experiment with go-to buttons if the DOMNode has a before/after node.


> > Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js:296
> > +        // FIXME: Handle shadow roots.
> 
> We don't support shadow roots yet, and may never. Still worth adding this?

Well, we do support our Internal Shadow DOM, and I have to audit our implementation a little closer.

> > Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js:297
> > +        // FIXME: Handle template content.
> 
> What about template content do we not support? Should file a bug for this.

I'll have a follow-up for this. We already send the data we just don't use it.

[Joseph Pecoraro]

Created attachment 257592 [details]
[PATCH] For Landing

[Joseph Pecoraro]

Comment on attachment 257592 [details]
[PATCH] For Landing

Going to update the text in Tests a bit.

[Joseph Pecoraro]

Created attachment 257598 [details]
[PATCH] For Landing

[WebKit Commit Bot]

Comment on attachment 257598 [details]
[PATCH] For Landing

Clearing flags on attachment: 257598

Committed r187496: <http://trac.webkit.org/changeset/187496>

[Alexey Proskuryakov]

inspector/css/pseudo-element-matches-for-pseudo-element-node.html always times out on Windows, and is flaky slow on Apple Yosemite Debug WK2.

https://webkit-test-results.appspot.com/dashboards/flakiness_dashboard.html#showAllRuns=true&tests=inspector%2Fcss%2Fpseudo-element-matches-for-pseudo-element-node.html