1422255 - box-model: width/height are editable only for elements with "box-sizing: content-box"

Status: RESOLVED WORKSFORME

(DevTools :: Inspector, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

See this topic on discourse https://discourse.mozilla.org/t/filtering-in-web-console-is-confusing-bonus/21839/10

Test page: 

data:text/html,<div style="width:100px;height:100px;background: red"></div><div style="box-sizing:border-box;width:100px;height:100px;background:gold"></div>

STRs:
- open inspector
- inspect yellow element
- to to computed view (or layout view)
- try to edit width/height with the box-model widget

Nothing happens. Looks like we only allow editing width and height for elements with box-sizing: content-box (per https://searchfox.org/mozilla-central/rev/be78e6ea9b10b1f5b2b3b013f01d86e1062abb2b/devtools/client/inspector/boxmodel/components/BoxModelMain.js#411)

We should either:
- always allow editing
or
- add a visual indicator when editing is disabled, with an explanation

Comment 1

[Julian Descottes [:jdescottes]]

Gabriel: any idea how complex it could be to allow editing height/width for border-box elements? Chrome seems to be compensating for padding/border when you edit the dimensions.

If too complex to implement for now, maybe add a tooltip explaining that editing is disabled for border-box elements?