770357 - [rule view] show invalid css properties and values

Status: RESOLVED DUPLICATE of bug 984880

(DevTools :: Inspector, defect, P3)

Description

[Luke Crouch [:groovecoder]]

Steps to reproduce:

1. Add 
table.diff { font: "Courier New", "Andale Mono", monospace; } 
to your CSS.
2. Inspect table.diff element

Expected results:

Show font property and value along with a warning about improper value (e.g., Chrome inspector)

Actual results:

font property isn't shown at all making me believe my CSS isn't refreshing.

Comment 1

[Paul Rouget [:paul]]

I agree, this is confusing.

As for bug 752881, we need to show the properties as originally written.

We use domUtils.getCSSStyleRules to retrieve the rules. And it only return valid declarations.

Afaik, there are no ways to get the rules as authored.

I think we'll need some platform work here.

Comment 2

[Paul Rouget [:paul]]

Bug triage, filter on PINKISBEAUTIFUL

Comment 3

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

I think we should consider bumping this up to P2.

Comment 4

[Brian Grinstead [:bgrins]]

I've also opened Bug 913661 to deal with showing multiple declarations of the same name (not just the last one).  I think this also depends on the ability to get rules as authored.

Comment 5

[Hallvord R. M. Steen [:hallvors]]

This would be a massive improvement for mobile web compat work - we're dealing a lot with layout issues caused by -webkit- properties, and currently the most "efficient" way to analyse those issues is to run both Chrome and Firefox inspectors side by side for a manual comparison of the styling applied to a given element. Having all those -webkit- rules right there, styled in red or something, would be extremely helpful to us.

Comment 6

[Hallvord R. M. Steen [:hallvors]]

(There's also bug 740538 - closely related)

Comment 7

[Patrick Brosset <:pbro>]

Duplicate of bug 984880 which already has a patch uploaded. It's only a work in progress for now though.