1508036 - [markup-view] Change markup line-height and row height to 15px

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Florens Verschelde :fvsch]

Attachment: markup-view-irregular-vertical-rhythm.png

I'm having doubts about the Inspector's new line height (bug 1501997, and see the attached screenshot). Specifically, we now use 14px line-height, but added 1px padding-top/bottom on rows so that we would still have 16px rows.

It looked decent in a few tests, but after using it for days I find it a bit distressing. The Markup view looks off, imprecise, "broken" as if there was a rendering bug that randomly shifted some text lines up or down.

I think we should go for a strict vertical rhythm. For the record, we're using 11px text, and for line-height our main options are:
- 14px
- 15px (like Chrome DevTools)
- 16px

For context, we're using 14px in the Console, and "auto" line-heights in other places which results in computed values such as ~14.5px in Rules and ~13.5px in Debugger source files.

My preference would be to go for 15px, or perhaps 16px.

Comment 1

[Florens Verschelde :fvsch]

Victoria:

> I see what you mean - I had felt a bit concerned about this possibility but got caught up in general ux principles. Code is not like regular text - monospace is a part of it, and mono-line height makes sense too.
> 
> I’m not concerned here about matching the units of 4, so 15px would be fine by me, but I’d also be interested to see what 16 looks like again

Comment 2

[Florens Verschelde :fvsch]

So I did a bunch of screenshots on Linux with 14, 15 and 16px options. I put them in a web page here to make it easier to compare options:
https://fx-devtools-markup-line-height.netlify.com/

A few notes:
- Chrome uses 11px text with 15px line-height (as far as I can tell). I kinda like that option.
- The font is Deja Vu Sans Mono. Different fonts can render differently, with the same font-size (11px) and line-height, Menlo or Consolas may appear a bit more compact or more airy than this. Ideally, we should test macOS and Windows too to make sure we're happy with the result.
- I haven't adjusted the arrow and badges alignment for the 15px and 16px options.

Victoria and Patrick, do you have any preference?

Comment 3

[Patrick Brosset <:pbro>]

I prefer Victoria to make a call here, because I like all options which isn't helpful :) 
Trying to be more helpful: I think 14px is too small. 16px is what we have today (if you forget the more compact wrapped lines), so I could go with that. 15px works for me too.

Comment 4

[Florens Verschelde :fvsch]

Discussed with Victoria today.

We decided to:

- go with 15px,
- and try to harmonize most of our code display (markup view, Rules, Debugger source code etc.) to `font-size: 11px; line-height: 15px;`.