An editable box model view in the devtools

This week the whole devtools group has been sequestered in Mozilla’s Portland office having one of our regular meet-ups. As always it’s been a fantastically productive week with lots of demos to show for it. I’ll be writing a longer write-up later but I wanted to post about what I played with over the week.

My wife does the odd bit of web development on the side. For a long time she was a loyal Firebug user and a while ago I asked her what she thought of Firefox’s built in devtools. She quickly pointed out a couple of features that Firebug had that Firefox did not. As I was leaving for this week I mentioned I’d be with the devtools group and she asked whether her features had been fixed yet. It turns out that colour swatches had been but the box model still wasn’t editable. So I figured I could earn myself some brownie points by hacking on that this week.

The goal here is to be able to inspect an element on the page, pull up the box model and be able to quickly play with the margins, borders and padding to tweak the positioning until it looks right. Then armed with the right values you can go update your stylesheets. It saves a lot of trial and error with positioning.

It turned out to be relatively simple to implement a pretty full version. The feature allows you to click one of the box model values and type whatever value you like, in any CSS unit you prefer. If the size had been set in the stylesheet in some specific unit then that is what appears in the input box for you to change. Better yet as you type numbers the element updates in the page on the fly and you can use the arrow keys to increase/decrease the value until you’re happy. It’s a really natural way to play with the element’s position.

https://www.youtube.com/watch?v=3HlmY4p76Cc

The changes made appear on the element so you can find them in the rule view pretty easily. This patch is based on an updated version of the box model view which is why it looks so different to existing Firefox, all my work does is make the numbers editable.

I actually completed this so quickly that I decided to take this one step further. One thing missing from the box model display is information about border colours. So I added some colour swatches for each border and made them editable with the regular devtools colour picker.

https://www.youtube.com/watch?v=hxh0BKC5Xns

Both of these patches are pretty much complete but they’ll have to wait for the new box model highlighter to be complete before they can be reviewed and land.

13 thoughts on “An editable box model view in the devtools”

      1. As far as I can see there is no hex code to copy and paste? In this case drag and drop an existing color to another border would be useful, if you only want two borders of the same color.

  1. very sweet! I was waiting for these features for a while now as well 🙂

    Any idea when they are going to land in nightly? any bug numbers to follow it?

    thanks for the great work and post

    1. There are links to bugs in the post. I’m stuck until the new highlighter bug lands but after that some of this stuff will probably follow along quite quickly.

  2. I think the editable box model is a nice feature. But I think the color swatches look bad for the box model preview. I think the color swatches could show on hover instead.

    1. Yeah we’re not sure about how the border colour swatches should look or if they might even be a step too far. We’ll see how that works out.

      1. You could have a button that when clicked it would enable the modification of colors simply by clicking on the border.

Comments are closed.