Closed Bug 1209075 Opened 4 years ago Closed 2 years ago

Show when a css property is "logically" overridden by another property

Categories

(DevTools :: Inspector, enhancement, P2)

enhancement

Tracking

(Not tracked)

RESOLVED DUPLICATE of bug 1306054

People

(Reporter: pbro, Unassigned)

Details

(Whiteboard: [devtools-platform][devtools-ux])

Here's one example:

.container {
  display: flex;
}
.item {
  flex: 100px 1 0;
  width: 200px;
  float: left;
}

.item elements do not float, and are not 200px wide, that's because they are part of a flexbox layout and as such, some properties get logically overridden by that.
It would be nice if the rule-view somehow showed this.
Maybe a /!\ icon next to these properties, with a tooltip that explains what happened.
Is there a list of such properties that we could retrieve from the platform?
Whiteboard: [devtools-platform]
Or maybe we could pull these out of the specification somehow
Whiteboard: [devtools-platform] → [devtools-platform][devtools-ux]
Inspector bug triage. Filter on CLIMBING SHOES.
Severity: normal → enhancement
Priority: -- → P2
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1306054
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.