1583893 - [Inactive CSS] Display a warning when width / height is used with flex-basis

Status: RESOLVED WONTFIX

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

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Main file:
devtools/server/actors/utils/inactive-property-helper.js

invalidProperties: [
"width",
"height",
]

inactive-css-flex-basis-width-height = <strong>{ $property }</strong> has no effect on this element since it also has the <strong>flex-basis</strong> property.

inactive-css-flex-basis-width-height-fix = Try removing <strong>flex-basis</strong>, <strong>width</strong> or <strong>height</strong>. { learn-more }

Comment 1

[Daniel Holbert [:dholbert]]

I don't think the suggested warning here makes sense. In particular:

Firstly, if we were to have any warning about width/height colliding with flex-basis, it would only make sense to do for flex item, for the sizing property (width or height) that's in their flex container's main axis. (That's the only place where flex-basis is actually honored in place of width or height).

...but even there, we shouldn't add an inactive-css warning, because width (or height) does still have indirect & important effects there. In particular:
(1) it sets the value that flex-basis:auto will resolve to.
(2) it establishes an upper-limit on what min-width:auto will resolve to (as of bug 1316534)

It might be useful to offer some warning / hint about this case, as a clue to authors about why width (or height) isn't behaving as they expect (why it's not precisely setting the element's exact width or height); but we definitely shouldn't report it as having no effect or style it as "inactive".

Comment 2

[Daniel Holbert [:dholbert]]

But essentially this bug is WONTFIX given the current constraints of our inactive-CSS devtools helper, I think. (I don't think it has the nuance to express the "hey this property [width|height] does have an effect but maybe not the regular effect that you might be expecting" that we really would want to communicate here.)