Open Bug 1560236 Opened 1 year ago Updated 1 year ago

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

Categories

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

enhancement

Tracking

(Not tracked)

People

(Reporter: fvsch, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(2 files)

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.

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

Flags: needinfo?(balbeza)

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!

Depends on: 1560551
Flags: needinfo?(balbeza)
Type: defect → enhancement
Priority: -- → P3
Attached image 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?

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.

No longer depends on: 1560551
You need to log in before you can comment on or make changes to this bug.