Vertical and horizontal rhythm

[fvsch]

In Debugger issue 6631 I’ve explored the Debugger’s vertical rhythm.

Looking at what the DevTools currently do:

• The top bar (with tabs and buttons) is 28px high excluding borders
• Some toolbars are 28px and others are 24px high (excluding borders or separators, again)
• Content, which can be lines of code, rows of data, etc., has a lot of different heights

It would be nice to have some guidelines for vertical and horizontal rhythm, offsets, etc.

The Photon design system has a 4px baseline grid which seems to work nicely with what the DevTools do (or could do, when current spacing is imprecise). I suggest we adopt it.

Not everything from the Photon design system can or should be used, for instance the default icon-button style calls for a 32px-tall button. This can't fit our 24-28px toolbars.

Don't count separators

A strict vertical grid would mean that all text baselines should be separated by multiples of 4px. This might not be practical because we have some text with a 14px line-height, and also border separators that take 1px height.

I propose we don't adhere to a strict vertical rhythm and also don’t count borders.

This means that a toolbar which has a 1px bottom border should be, technically, 29px (28px for content and 1px for the border) and not 28px (27px for the content and 1px for the border).

Vertical rhythm

• Toolbars are 28px high, or sometimes 24px high (it depends on the tool, and maybe should be harmonized?)
• Content rows should be 20px high or 24px high, depending on how compact we want them to appear
• Collapsible section headers are 24px high
• Collapsible section content should use 4px vertical padding

For content rows, given a line-height of 14px, we may use vertical padding or 3px or 5px to achieve a 20px or 24px height.

Horizontal rhythm

To be done. :)

[fvsch]

One small example of inconsistent height: bug 1486323. Netmonitor toolbars are supposed to be 28px high, end up being 29px because of an implementation error.

[fvsch]

Looking at markup rows in the Inspector:

• They render at 15.45px on my computer.
• They might get rounded to 15.5px or 16px on different OSes and resolutions.
• I suggest specifying them at 16px height (for rows with a single line of text).