Can't change content in box model in inspector for box-sizing:border-box elements

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

Open the inspector, go to box model and try to change the content box.

Actual results:

When I open inspector, for some page I can edit everything I want but on some website, when I tried to edit the "content" part of the "model box", I can't change the values. I can chage everything else : pading, border ...

I'm talking about the blue part of the model box on my screenshot.

Expected results:

Should be able to edit

I forgot one thing : I can make the changes using others web browsers like Chrome but I don't want to use it besause the firefox inspector is way better.

The Bugbug bot thinks this bug should belong to the 'DevTools::Inspector' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Thanks for filing.

Ni to myself, we don't seem to allow to update the content size for border-box elements.
Check behavior on Chrome, and check where this is handled in FF DevTools.

We only allow to edit the width/height of elements with box-sizing: content-box: https://searchfox.org/mozilla-central/rev/b355f4e36eb45ef84ce9d3dd6af7f1a417ca8bfe/devtools/client/inspector/boxmodel/components/BoxModelMain.js#441

This was briefly mentioned in the initial implementation: https://bugzilla.mozilla.org/show_bug.cgi?id=1061823#c20
I think the reason is pretty straightforward: when you start applying this to border-box elements, the actual width and height of the content don't match directly the width & height properties you would set in the element style.

And for instance in Chrome, if you update the dimension of an element which has some padding & border, Chrome will actually add the relevant padding and border to your input.

This still sounds like something we should implement. The first thing to change will be to remove the box-sizing check mentioned above. And then modify the logic applied when a value is modified so that box-model elements include border+padding in the content value: https://searchfox.org/mozilla-central/rev/b355f4e36eb45ef84ce9d3dd6af7f1a417ca8bfe/devtools/client/inspector/boxmodel/box-model.js#341-361

I don't think it's a good first bug, but it is scoped well enough, happy to mentor.

Hi Julian, I'd like to work on this bug if assigned. Thanks!

Sure Sai! Thanks for offering to help, let me know if you need pointers on top of what is in the previous comment.

Thanks Julian. I've submitted an initial revision, that only works for pixels. Please check if the approach looks right.

A couple of questions,

1. Is there a utility function/class that can convert between the different CSS units?
2. Are there any edge cases that I'm missing in the revision?

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

Sorry, there was a problem with the detection of inactive users. I'm reverting the change.

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

provided feedback in phabricator

Submitted patch: https://phabricator.services.mozilla.com/D298689

The fix removes the content-box-only restriction in BoxModelMain.js and adds border+padding compensation math in box-model.js so that the CSS width/height is correctly computed for border-box elements, matching Chrome's behavior.

Reverted this because it was causing devtools failures in browser_boxmodel_update-after-navigation.js.

• Revert link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js | undefined - Got "×", expected "100×100"

Nothing complicated here, we just need to update https://searchfox.org/firefox-main/rev/1372522d3de2c9aeedc8020ec8d81326f1a9516e/devtools/client/inspector/boxmodel/test/browser_boxmodel_update-after-navigation.js#61

const sizeElt = boxmodel.document.querySelector(".boxmodel-size > span");

This should become

const sizeElt = boxmodel.document.querySelector(".boxmodel-size");

The rest of the test should pass just fine (the span now only contains the × symbol).

Updated the selector in browser_boxmodel_update-after-navigation.js from ".boxmodel-size > span" to ".boxmodel-size" to fix the test failure.

New patch: https://phabricator.services.mozilla.com/D299824

https://hg.mozilla.org/mozilla-central/rev/caf6f9385833