* 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.
<rdar://problem/19281529>
*** Bug 147151 has been marked as a duplicate of this bug. ***
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.
A second request for this on twitter today: https://twitter.com/benfrain/status/623596363075428352
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
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.
Created attachment 257491 [details] [IMAGE] Pseudo Element
> 2. Fix "Hover" and other pseudo elements to affect the host element. This should have read "pseudo classes to affect the host element".
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
(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]
Created attachment 257500 [details] [PATCH] Proposed Fix This fixes issues 1-3, I still have to do testing with large sets of children.
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.
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.
(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.
Created attachment 257592 [details] [PATCH] For Landing
Comment on attachment 257592 [details] [PATCH] For Landing Going to update the text in Tests a bit.
Created attachment 257598 [details] [PATCH] For Landing
Comment on attachment 257598 [details] [PATCH] For Landing Clearing flags on attachment: 257598 Committed r187496: <http://trac.webkit.org/changeset/187496>
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