1481977 - Visualize boxes and layout for all children of a node

Status: RESOLVED WONTFIX

(DevTools :: Inspector, enhancement, P1)

Description

[Karl Dubost💡 :karlcow]

CONTEXT:

Looking at the awesome work done by Victoria on the flexbox visualizer.
https://twitter.com/violasong/status/1027312422753689600
It reminds me of a technique I very often used to understand and debug layouts.

Currently with the inspector, if you hover the cursor on a node, you get a visualization of the box with the margin, padding, box size. That's cool.

But sometimes this is not enough to understand the interaction of the boxes. Think about float issues, line-height, wrapping, etc. In these circumstances I use two techniques:

1. Outlines for all children of a node
2. background-color for some boxes (sometimes playing with opacity)


The outline technique is very practical because it helps visualize the box without adding to the layout any variability. let's say you are interested in <div class="foo">…</div> and all its children.

div.foo * {outline: 1px solid red;}

EXAMPLES
https://webcompat.com/issues/17569#issuecomment-403385450
https://webcompat.com/issues/14566#issuecomment-410903524
https://webcompat.com/issues/17781#issuecomment-408742272


PROPOSAL:
Have a button which helps to draw/visualize the features of a node and all its children, with probably two modes:

1. just the main box
2. boxes with their padding, margin, etc.


This would greatly help to debug and understand boxes/layout interactions

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Karl, I love the idea. We'll be in touch.

Comment 2

[Patrick Brosset <:pbro>]

Attachment: devtools-outliner-1.0.0.zip

I have been thinking a bit more about this. I don't know exactly where this could fit in devtools right now, but I do agree on the usefulness. This is a trick that virtually everyone doing CSS has used at some point (it's probably the equivalent to alert/console debugging in the JS world).

I'm thinking that a browser extension would do wonders here. And in fact, Firefox just added support for extensions to add inspector sidebars, so this could be very easily available right where you need it, next to the CSS rules.

I've prototyped something very simple (literally only has 2 buttons: 1 to outline a node and its descendants and 1 to hide the outlines).
Let me know if something like this would fit your need (we could of course make it have more features than this, but it's a start, and if we move this to github, it should be relatively easy to get people excited and contributing to it).

To test it:
- install this xpi file
- reload a page you want to use the addon on (the first time it needs to load its content script)
- open the inspector
- choose the "outliner" tab in the sidebar
- click on the buttons!

Comment 3

[Patrick Brosset <:pbro>]

(In reply to Patrick Brosset <:pbro> from comment #2)
> - install this xpi file
You might have to do this by going to about:debugging and then clicking on "load temporary addon".

Comment 4

[Karl Dubost💡 :karlcow]

This is awesome. 
I also like the fact that there is no need to clear to be able to select another node.
And it keeps the outlines even when I modify the CSS rules. 

Gorgeous! And yes from there we can go further.

You can for example imagine a preferences on how you wish to have your outline. 

   outline: 1px solid gold;
or outline: 1px dashed lightgray;
or …

:) I would add the command in the contextual menu on nodes too (if technically possible).

Thanks!

Comment 5

[Patrick Brosset <:pbro>]

Thanks for the feedback Karl. Glad you like it and find it useful.
Those suggestions sound like they'd make it even more useful.
My plan is to move the code to GitHub and push a very first (ultra simple) version to AMO so you can start using it.
And then take it from there. Hopefully interested people can help make the extension better via GitHub directly.

Comment 6

[Patrick Brosset <:pbro>]

Well, this went faster than I thought it would :)

Extension: https://addons.mozilla.org/en-US/firefox/addon/devtools-outliner/
GitHub repo: https://github.com/captainbrosset/devtools-outliner

I'll close this bug under the assumption that you're happy using this extension for now and that we don't need something built-in DevTools.
As I said, let's improve on the extension over at the GitHub repo.