1983720 - Show ::details-content in DevTools inspector markup view

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Daniel Holbert [:dholbert]]

We enabled support for the ::details-content pseudo-element in bug 1941406.

We should consider adding DevTools support, to be able to see the ::details-content wrapper box (and its styling) in some way.

Testcase (which just adds yellow background to the details-content):

data:text/html,<style>::details-content{background:yellow}</style><details open>Hello<summary>Summary

Right now, there's no way to easily visualize the ::details-content styles in the rules panel, so you can't easily see where e.g. the yellow background is coming from here. Maybe we should expose it in DevTools somewhere?

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: ::details-content rule displayed in Pseudo-elements section of the Rules view

Hello Daniel, we did some work for supporting ::details-content (see the bugs blocking Bug 1955190), and the rules are displayed in the Pseudo-elements section when you select the <details> element (see attachment).

We're not showing a ::details-content node in the markup view though, which makes it complex to display ::details-content::before rules (see Bug 1955202), maybe we could re-purpose this bug for that?

Comment 2

[Daniel Holbert [:dholbert]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

the rules are displayed in the Pseudo-elements section when you select the <details> element (see attachment).

Ah you're right, thanks! I missed it at first, because the Pseuedo-elements section of the panel there is collapsed by default (and I didn't notice it as an expandable thing at first).

We're not showing a ::details-content node in the markup view though

That's the left part with all the DOM nodes, right? Yeah, intuitively I sorta expect it to show up there, like other pseudo-elements do (e.g. ::marker, ::before, ::after). Sure, let's use this bug on hypothetically making this show up there.

Comment 3

[Sebastian Zartner [:sebo]]

I believe this should be added to the developer release notes once added.

Sebastian

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

From: https://bugzilla.mozilla.org/show_bug.cgi?id=1955202#c1:

A cleaner solution could be to actually display the ::details-content node / shadow DOM

▼ <details>
|   <summary>Summary</summary>
| ▼ ::details-content
| |   <p>Hello</p>
| | ▼ ::after
| | | ::marker

but does it makes sense to always display the ::details-content node, even if there's no style for it? Could it look odd to users who might not expect it to be visible?

Another way of doing this would be to simply add it as a child of <details>, but as siblings as its actual "children":

▼ <details>
|   <summary>Summary</summary>
| ▶︎ ::details-content
|   <p>Hello</p>

and when we expand it we could show its pseudo-elements

▼ <details>
|   <summary>Summary</summary>
| ▼ ::details-content
| | ▼ ::after
| | | ::marker
|   <p>Hello</p>

Comment 5

[Sebastian Zartner [:sebo]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #4)

but does it makes sense to always display the ::details-content node, even if there's no style for it? Could it look odd to users who might not expect it to be visible?

I tend to think it makes sense to always display it, even when there are no styles assigned to it. The benefits of doing so are that the DOM structure stays stable and it also raises the awareness of this pseudo-element.
If ::details-content should not be displayed by default, for whatever reason, I'd expect the children of <details> to be displayed the same way as it's done now, and only show it when it has styles applied. And then display it as a wrapper for the children. But again, I'd vote for always showing it.

Another way of doing this would be to simply add it as a child of <details>, but as siblings as its actual "children":

▼ <details>
|   <summary>Summary</summary>
| ▶︎ ::details-content
|   <p>Hello</p>

and when we expand it we could show its pseudo-elements

▼ <details>
|   <summary>Summary</summary>
| ▼ ::details-content
| | ▼ ::after
| | | ::marker
|   <p>Hello</p>

I am opposed to that, because the ::details-content is a wrapper for all the contents including <p>Hello</p> . It'd be strange if only other pseudo-elements were displayed as children but not the real elements.

Sebastian