1560236 - Align the empty section messages ("Nothing yet") with the section title's text

Status: NEW

(DevTools :: about:debugging, enhancement, P3)

Description

[Florens Verschelde :fvsch]

Attachment: empty-section-message-alignment.png

This could be a small UI improvement in about:debugging.

We could align the "Nothing yet." message with the section's title text.
Text in the cards seem to follow this alignment already, so we'd be more consistent overall.

And ideally, for extensions we could show the "Nothing yet." message and the "Load Temporary Add-on…" button on the same line.

Comment 1

[Florens Verschelde :fvsch]

Belén, do you think that looks better?
(Current style on the left; proposed change on the right.)

Comment 2

[Belén [:ladybenko]]

Yes, it's something we wanted to do, but we decided to postpone it once we refactor the whole React component hierarchy of the Runtime page. Thanks for filing the bug so we don't forget!

Comment 3

[Julian Descottes [:jdescottes]]

Attachment: alignment_check.png

The text inside the cards is not exactly aligned with the header text.
The card header text has a total of 24px (6 base-unit) space on the left: 16px for the icon, 8px grid column gap.
The card field pair has 28px (7 base-unit): 12px card padding, 16px of field pair padding.

So maybe we should also reduce the card field pair padding from 16px to 12px to keep things properly aligned?

Comment 4

[Julian Descottes [:jdescottes]]

Yes, it's something we wanted to do, but we decided to postpone it once we refactor the whole React component hierarchy of the Runtime page.

Is it really worth blocking on a Runtime page refactoring? I don't really understand the dependency and I don't think we will work on such a refactor in the near future. I will remove the blocking relationship, let me know if you feel strongly against it.