Open Bug 1288771 Opened 8 years ago Updated 2 years ago

When Browser Styles are enabled, we see a bunch of pseudo elements coming from these styles on all inspected pages

Categories

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

Product:
DevTools
Component:
Inspector: Rules
Type:
defect

Tracking

(firefox49 affected, firefox50 affected)

Tracking Flags:
Tracking Status
firefox49 --- affected
firefox50 --- affected

People

(Reporter: julienw, Unassigned)

Details

STR:
1. Open any page, even about:blank
2. Open the Inspector
3. Enable Inspector's Browser Styles in the settings

=> See that you have a bunch of browser styles displayed but that are not useful at all:
*::-moz-list-bullet, *::-moz-list-number
*::-moz-meter-bar
*::-moz-progress-bar
*::backdrop

(note: this can be initially folded but will stay unfolded if you unfold it once)

Because of "*" they are applied on every elements -- maybe they shouldn't ?
I don't think there's value to users of the normal toolbox in seeing these pseudos, even if they technically are applied to every element.  IMO if it's not opened in Browser Toolbox we shouldn't show them, even if Browser Styles are enabled.
Component: Developer Tools → Developer Tools: CSS Rules Inspector
Inspector bug triage, filter on CLIMBING SHOES.

P2, Normal: not a regression, but makes the browser styles hard to use efficiently.
Agree with comment#1, these pseudos should not be shown in a normal toolbox.
Priority: -- → P2
I imagine there is no API exposed to JS to tell if a given pseudo-element may exists for a given node.
But I'm not sure it even exists in C++ world.

Tom, it looks like you contributed to inIDOMUtils.idl, may be you know something about that, or can easily tell if that just can't exists per CSS specs?
Flags: needinfo?(ttromey)
(In reply to Alexandre Poirot [:ochameau] from comment #3)
> I imagine there is no API exposed to JS to tell if a given pseudo-element
> may exists for a given node.
> But I'm not sure it even exists in C++ world.
> 
> Tom, it looks like you contributed to inIDOMUtils.idl, may be you know
> something about that, or can easily tell if that just can't exists per CSS
> specs?

I'm afraid I don't know.  I'm not even sure who you'd ask.
Sorry about that!
Flags: needinfo?(ttromey)
Drive-by comments: 

All pseudos are defined here: http://searchfox.org/mozilla-central/source/layout/style/nsCSSPseudoElementList.h

It's weird that user agent stylesheets would defined them with *::-moz-list-bullet and so on, I agree that's a lot of visual noise for nothing, authors are only going to be interested in seeing them (when browser styles are ON) if the pseudo-element actually exists, right?

For instance,  
*::-moz-list-bullet, *::-moz-list-number {
	display: inline;
	vertical-align: baseline;
	font-variant-numeric: tabular-nums;
	-moz-user-select: none;
}
has no effect on a <body> element.

So maybe we need something to detect whether a pseudo-element actually exists before showing these pseudo-element rules?

At the same time, if I have this rule in my stylesheets:
*::before {
	color: #f00;
}
I *want* to see it in the pseudo-element section of the rule-view, even if it has no effect at all. I want to know it's there.

So it's not clear to me what's the best way to discriminate what's relevant to show or hide.
Maybe we need to have some custom logic where, if a pseudo-element rule comes from a UA stylesheet *and* the corresponding pseudo-element isn't in the DOM *and* we're not in the browser toolbox, then we hide the rule?

I guess we could potentially use inDeepTreeWalker just like we do in the WalkerActor to detect if a pseudo-element is present, although this may only work with ::before and ::after, not sure.
(In reply to Patrick Brosset <:pbro> from comment #5)
> Drive-by comments: 
> 
> All pseudos are defined here:
> http://searchfox.org/mozilla-central/source/layout/style/
> nsCSSPseudoElementList.h
> 
> It's weird that user agent stylesheets would defined them with
> *::-moz-list-bullet and so on,

moz-list-bullet may not use "*", it seems to be specific to <li> and <summary>,
but may be not just these items.
For ::backdrop, it is different, from what I saw, it seems to be possible working on any element.

> So maybe we need something to detect whether a pseudo-element actually
> exists before showing these pseudo-element rules?

That was my question for Tom. Do you have any idea how to check that?

> I guess we could potentially use inDeepTreeWalker just like we do in the
> WalkerActor to detect if a pseudo-element is present, although this may only
> work with ::before and ::after, not sure.

Where in code are we able to reach ::before/::after pseudo element?
I can see if that works for these other pseudo elements.
(In reply to Alexandre Poirot [:ochameau] from comment #6)
> > I guess we could potentially use inDeepTreeWalker just like we do in the
> > WalkerActor to detect if a pseudo-element is present, although this may only
> > work with ::before and ::after, not sure.
> 
> Where in code are we able to reach ::before/::after pseudo element?
> I can see if that works for these other pseudo elements.
When we create a DocumentWalker in the WalkerActor, here: http://searchfox.org/mozilla-central/rev/c1e745733c84630821ef53754b627f2c0b0b5202/devtools/server/actors/inspector.js#2845 we ask inDeepTreeWalker to also walk anonymous content.
Product: Firefox → DevTools
No longer blocks: top-inspector-bugs
Priority: P2 → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.