1237273 - Make it possible to style ::-moz-range-thumb and other pseudo-elements in the inspector

Status: NEW

(DevTools :: Inspector: Rules, defect, P3)

Description

[Patrick Brosset <:pbro>]

Here's a use case to consider:

on a simple page like data:text/html,<input type="range">
with devtools, I'm able to style the thumb element with the style-editor by adding:
input::-moz-range-thumb {
  background: red;
}

But I can't select this pseudo-element in the inspector, and therefore cannot see this rule in the rule-view and change its properties.

We can do this for ::before/::after because the inDeepTreeWalker walks these nodes. But we can't do this for other types of pseudo-elements.

I originally thought this was a problem with the inDeepTreeWalker that wasn't finding these nodes (even with devtools.inspector.showAllAnonymousContent set to true), so I investigated this a little bit:

For an <input type=range>, the frame gets created here: 
https://dxr.mozilla.org/mozilla-central/source/layout/forms/nsRangeFrame.cpp

3 native anon elements are being created inside, and then each one gets "associated" with a pseudo-element (thumb, progress and track) with this:

PresContext()->StyleSet()->ResolvePseudoElementStyle(mContent->AsElement(),
                                                     aPseudoType,
                                                     StyleContext(),
                                                     resultElement);

I don't know what that does exactly but my understanding is that adding some style in a css rule like ::-moz-range-thumb {...} just applies styling to the corresponding anon node rather than creates a new one (unlike ::before)
So the deepTreeWalker probably does the right thing after all.

If you set devtools.inspector.showAllAnonymousContent to true, you'll see the 3 anon divs in the inspector inside the input element, but you won't see the corresponding pseudo-elements in the rule-view in the "pseudo-elements" section.
In fact, you do see one (if you have browser styles turned on): *::-moz-progress-bar.

It'd be nice if users that decided to set devtools.inspector.showAllAnonymousContent to true would be able to see and style these pseudo-elements in the rule-view.
It'd be even nicer if these elements didn't just appear as "<div>" in the markup-view, but instead as "::-moz-range-thumb", just like we do for before/after.

Comment 1

[Patrick Brosset <:pbro>]

Triaging (filter on CLIMBING SHOES).