1150508 - Editing padding, border, margin sizes in the box-model inspector tab should edit the source CSS property

Status: RESOLVED WONTFIX

(DevTools :: Inspector, defect)

Description

[Patrick Brosset <:pbro>]

STR:

- Open the inspector
- Switch to the Box Model tab
- Select an element that has at least a margin, or padding, or border
- In the Box Model tab, click on one of the sizes, and edit it in the inplace-editor

Expected: the CSS property that originally defined that size is edited.
Actual: the element.style attribute is edited instead, overriding the CSS property.

Comment 1

[Julian Descottes [:jdescottes]]

pbro: I think the current behavior is okay as it is. The improvement proposed would be nice, but it doesn't seem straightforward (the user experience also might get confusing).

Do you mind if we close as WONTFIX?

Comment 2

[Julian Descottes [:jdescottes]]

Just to elaborate a bit on why I think we should not implement this: the box model tab is about editing one element. If you actually update a CSS rule when modifying a value, you will impact all the other elements on the page matching the rule's selector.

Comment 3

[Patrick Brosset <:pbro>]

Yes, I agree about the UX being hard to get right here. I've stumbled upon similar problems when working on bug 1139187 last year (see https://gist.github.com/captainbrosset/8a337290ba99b01f6425) and we ended up just modifying the inline style in the end.
I still think being able to do this would be really nice and powerful, but it also needs to be really obvious to the user.
I'm ok to close this bug based on the fact that I filed it a long time ago and we never acted on it. No use keeping old ideas around for a long time.
I think the way forward for this is to have an inline visual editor in the rule-view when modifying geometry-related properties. This way it becomes really obvious that you're changing a size that is applied to many elements at once.