Header labels should be left aligned
Categories
(DevTools :: Netmonitor, enhancement, P3)
Tracking
(firefox67 fixed)
| Tracking | Status | |
|---|---|---|
| firefox67 | --- | fixed |
People
(Reporter: Honza, Assigned: lba_2)
Details
Attachments
(3 files)
image.png
Left aligning header label should make columns easier to identify.
Honza
|
Reporter | |
Comment 1•5 years ago
|
||
|
|
Reporter | |
Comment 2•5 years ago
|
||
Work on this bug can also fix missing sort icon due to this CSS prop:
https://hg.mozilla.org/mozilla-central/annotate/13115d00f301/devtools/client/netmonitor/src/assets/styles/RequestList.css#l134
From @fvsch on Slack:
Yeah that width:100% looks like a dirty fix for the visual issue called out in the comment.
Basically the issue is that we display an icon even if it's hidden, that icon takes space and makes the text look mis-aligned.
-
One possibility is to make that icon take up zero space, for instance with
width: 7px; margin-inline-end: -10px; margin-inline-start: 3px;.
But to keep this icon from ending up outside of the header, you need the header to have at least 10px of padding on the right. And to keep things centered, that means 10px of padding on the left too. -
Another possibility is to not display the icon at all when not active (
display:none), and let it take up space only when visible. That means that when you click a column header that was not the current sort column, the header text will shift to the left.
IMO #2 is the least bad compromise.
Honza
|
|
Reporter | |
Updated•5 years ago
|
|
|
Reporter | |
Updated•5 years ago
|
|
Assignee | |
Comment 3•5 years ago
|
||
|
|
Assignee | |
Comment 4•5 years ago
|
||
Changes in the patch:
- The labels of the headers are now left-aligned
- the sort icon has display:none when the column is not sorted, it is visible only when column is sorted
- also added padding-left:4px to data in the table so they nicely align with the headers (with the exception of waterfall data)
I wanted to ask if I should also run Talos tests for this changes since the styling for padding-left is for all values in the table.
Thanks,
Lenka
|
||
Comment 5•5 years ago
|
||
Oh yay! Left align is great, and thank you for the padding-left 4px detail :D
|
|
Reporter | |
Comment 6•5 years ago
|
||
Thanks for working on this!
The patch looks good, the only comment I have is right padding of the sort icon. See the attached screenshot (comparing your patch with the release)
Honza
|
|
Reporter | |
Updated•5 years ago
|
|
|
Assignee | |
Comment 7•5 years ago
|
||
The patch has been updated through Phabricator to give more room to the sort icon.
Pushed by jodvarko@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/2de5ee2843c8 Align header labels left, show sorting icon; r=Honza
|
||
Comment 9•5 years ago
|
||
| bugherder | ||
Description
•