1500817 - List of identical CSS properties get repeated a lot in the devtools inspector

Status: NEW

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

Description

[Karl Dubost💡 :karlcow]

1. With Firefox Nightly 64.0a1 (2018-10-21) (64-bit)
2. Open responsive design mode with Firefox Android UA. 360x640 window. touch. DPR: 2
3. Go to https://www.lds.org/si/institute
4. Open the inspector, select an element, for example at `.site-navigation_mobile`
5. Check the list of CSS properties in the right panel

Actual
Properties are repeated a lot.

Expected: 
Not sure if there is a way to manage this properly.
What is happening is that the CSS is butchered too. 

https://www.lds.org/si/static/assets/app.css
The properties are repeated 12 or 13 times there.

It's definitely a site mistake, but I wonder if there could be a way to detect them or flag them as duplicate. :/

Comment 1

[Razvan Caliman [:rcaliman]]

Thanks for filing, Karl!

Indeed, that website has a very hairy CSS file. `app.css` alone has 999 CSS rules. Concatenation of CSS files gone astray seems to be the likely cause of the needless duplication. The same CSS rule appears at various positions withing the file (see attachment).

A minor but perhaps useful side-effect is that a developer may get a hint from the duplication in DevTools that their CSS build script needs attention. The needless CSS duplication adds unnecessary weight to the page.

I'm wary of having the Inspector make opinionated judgements and mark duplicate rules which that don't apply. Technical complexity aside, this case overlaps with a common use case for progressive enhancement in CSS whereby a rule with the same selector but slightly different declarations follows another in order to intentionally overwrite it. I know it's not the case here (this is an accident).

Aside but related, Bug 1499653 intends to add the @supports declaration to the CSS Rule view to differentiate between seemingly identical rules but in different CSS rule trees where this scenario may also occur (not the case here where all rules are at the same level of nesting).

I'm tempted to close this since we're not likely to prioritize it high enough to get to it in the foreseeable future. But I'll ping Patrick for his input as well. This seems like a feature we'd want from a CSS auditing tool built into DevTools.

Comment 2

[Razvan Caliman [:rcaliman]]

Attachment: Duplicate CSS rule