DEV Community: Rahman Mahmutović

"How I contributed to Firefox DevTools"

Rahman Mahmutović — Sat, 20 Jun 2026 13:30:48 +0000

I Fixed a Firefox DevTools Bug (Bug 1717176)

When an element had box-sizing: border-box, the width and height
fields in Firefox DevTools Box Model panel were not editable at all.

The Fix

Two things needed to change:

Unlock editing — BoxModelMain.js was explicitly blocking
border-box elements from being editable.
Correct the value — border-box width includes padding and
borders, so I had to subtract them when opening the editor, and add
them back when writing the new value.

if (isBorderBox && property === "width") {
  initialValue -= this.getNonContentWidth(); // show content size
  // on change: value += getNonContentWidth() // write correct CSS
}

Result

You can now click and edit width/height on any border-box element
directly in the Box Model panel.

Commit: 905f035