1842180 - Display ::first-line and ::first-letter in DOM tree

Status: NEW

(DevTools :: Inspector, enhancement)

Description

[Sebastian Zartner [:sebo]]

The ::first-line and ::first-letter pseudo-elements allow to style the first line or the first letter of an inline element.

As they somewhat interact with the DOM tree, they should be shown within the Inspector view like other pseudo-elements or the shadow DOM.

There are two main differences to other pseudo-elements, though:

1. Their contents change dynamically based on the size of their originating element.
2. They may span over parts of elements within their originating element.

Sebastian

Comment 1

[Hubert Boma Manilla (:bomsy)]

Thanks Sebo for reporting.

Do you have a specific scenario where this would be useful?

We currently have in the rule view displayed under "Pseudo-elements", though this is collapsed by default. Would expanding this help in this situation?

Is there any major reasons for showing this in the markup view.

Thanks

Comment 2

[Sebastian Zartner [:sebo]]

I know they are displayed within the Pseudo-elements pane. And as far as I know, the expansion state of that pane is preserved across switching elements and even browser sessions. So that's ok, though it still somewhat hides them away.

The main use case for this is similar to the one other pseudo-elements like ::before, ::after or ::marker are displayed within markup view. It makes it more obvious that those are applied to an element, it allows to inspect and edit them separately from their originating element and it provides a way to see where they are placed in the markup view.

Btw. ::highlight could also benefit from that for the same reasons, and I am sure there are others, as well.

Sebastian

Comment 3

[Sebastian Zartner [:sebo]]

Attachment: Mockup for ::first-line in markup view

For what it's worth, here's a mockup for how I imagine this feature to be displayed in the markup view.

Like for real elements, clicking the item marked as "(end)" would select the start item instead.
With that item selected, the Rules and Computed view (and maybe other side panels) would only show info related to the pseudo-element, like it's done for tree-abiding pseudo-elements.

Sebastian

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the mockup Sebo. I can see how first-::line case would be useful.
Instinctively, I'm afraid this would clutter the markup view (if we want to support all pseudo element), especially with the elements that will come from view transition, but maybe it would help to see everything.

Comment 5

[Sebastian Zartner [:sebo]]

Yep, at some point the pseudo-elements clutter the markup view. So maybe the ones like ::first-line, ::highlight, etc. that are highly dynamic should be hidden behind an option.

Sebastian