1477243 - Fade out table header and items instead of ellipsis

Status: NEW

(DevTools :: Netmonitor, enhancement, P3)

Description

[Jens]

The table header looks like this at the moment:

https://i.imgur.com/JJbsXC9.png

Instead of cropping and printing an ellipsis (...) it would be better to fade out the title as done in the firefox tabs as part of bug 658467 (I think with `mask-image`, see its patch). With that usually 1-3 more letters are readable. 

Not only for the table header but also for the table items.

Sometimes, on Linux I have this, the 'Domain' is even cropped like 'Dc' without `...` (that is in the middle of the 'o', making me wonder what this means.)

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thanks for the report, I really like the idea.

Honza

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: tab-title.jpg

Attaching a screenshot of how the feature is working in Firefox tab.

Honza

Comment 3

[:Harald Kirschner :digitarald]

I like the idea as well, as it makes more of the limited space. Risk is that it looks a bit noisy in a table full of fading elements.

Comment 4

[Jens]

Probably good idea if this was a reusable widget since fading out the title (instead of ...) could be used as well in bug 1497493 and other places.

Comment 5

[meag.harty]

I'd be interested in working on this if it's something that we are ready to do now.

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to meag.harty from comment #5)
> I'd be interested in working on this if it's something that we are ready to
> do now.
Great, thanks. I think that works on this issue can start, I don't see anything blocking it.

Honza

Comment 7

[Patrick Brosset <:pbro>]

This bug has not been updated in the last 3 months. Resetting the assignee field.
Please, feel free to pick it up again and add a comment outlining your plans for it if you do still intend to work on it.
This is just trying to clean our backlog of bugs and make bugs available for people.

Comment 8

[Mrigank Krishan]

I tried working on it using mask-image: https://i.imgur.com/2zO2BQz.png
What do you think?

Comment 9

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Mrigank Krishan from comment #8)

I tried working on it using mask-image: https://i.imgur.com/2zO2BQz.png
What do you think?

This looks great!

Can you please attach your patch so, we I can try it on my machine?
Should I assign the bug to you?

Honza

Comment 10

[Sören Hentzschel]

I have a small UX feedback (I am not a Mozilla employee but a web developer who needs the tool every day):

In my opinion it's really hard to see in the screenshot where one column ends and the next one starts. I tested the current implementation (without the patch) with a similar small window and it's definitively easier to read without the patch because the "…" at the end of the column in the current implementation gives some "space" between the columns while there is no space at all with the fade approach. My suggestion is to add a few pixels padding otherwise it's a serious usability regression from my POV.

Comment 11

[Mrigank Krishan]

Should I assign the bug to you?

Sure!

In my opinion it's really hard to see in the screenshot where one column ends and the next one starts

I strongly agree with you. How about we add column separators like the header column? @Honza?

Comment 12

[Mrigank Krishan]

Attachment: Bug 1477243 - fade out column items instead of ellipsis. r=Honza

make efficient use of space by not using ellipsis

Comment 13

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Mrigank Krishan from comment #11)

In my opinion it's really hard to see in the screenshot where one column ends and the next one starts
I strongly agree with you.

Yep, also agree .

How about we add column separators like the header column? @Honza?

Not sure what you mean by "like the header column"

But, could we just add margin/padding on the right side of a column?

Honza

Comment 14

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: image.png

One more thing when testing this. The header should not be fade-out (visible when sorted).

Honza

Comment 15

[Mrigank Krishan]

Not sure what you mean by "like the header column"

https://i.imgur.com/F74NQlj.png

But, could we just add margin/padding on the right side of a column?
One more thing when testing this. The header should not be fade-out (visible when sorted).

Updated on phabricator.

Comment 16

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I am seeing some performance regressions (the UI rendering seems to be slower now):

https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=try&originalRevision=8163929ab30a813abfd59e9a14fca354f55e0311&newProject=try&newRevision=309efa2ca59051f2b6685d4b43a9a5e1640828cf&originalSignature=1759151&newSignature=1759151&framework=12

Are there any other ways how to implement this?

Honze

Comment 17

[Mrigank Krishan]

Are there any other ways how to implement this?

I couldn't find any better way. I'll keep looking though.

How can I run those tests locally?

Comment 18

[Jan Honza Odvarko [:Honza] (always need-info? me)]

From @fvsch on Slack:

maybe the fade-out width is a bit too narrow. It looks like Firefox tabs fade out text over a 2em width:

mask-image: linear-gradient(to left, transparent, black 2em);

With smaller widths (e.g. 1em), the gradient transition is too sharp and we risk having one letter mostly-opaque and the next completely masked. It can look like it's just cropped, rather than faded-out. So it might work best with a 2em or at least 1.5em gradient width.

Honza

Comment 19

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Mrigank Krishan from comment #17)

Are there any other ways how to implement this?

I couldn't find any better way. I'll keep looking though.

How can I run those tests locally?

Read this doc:
https://docs.firefox-dev.tools/tests/performance-tests.html

Honza

Comment 20

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Here are my results:
https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=try&originalRevision=8163929ab30a813abfd59e9a14fca354f55e0311&newProject=try&newRevision=309efa2ca59051f2b6685d4b43a9a5e1640828cf&originalSignature=1759151&newSignature=1759151&framework=12

Honza

Comment 21

[Lenka Pelechova]

But, could we just add margin/padding on the right side of a column?

Hi,
I just wanted to point out that as part of the Bug 1534548 I have added 4px padding to the left of the table values so they would align with the headers nicely. So if we will add padding right (as suggested in this bug) maybe we don't need both (right and left) paddings. It would have to be tested what it looks like. Or maybe split the 4px padding-left to have 2px on each side? (just an idea that would have to be tested too).
Lenka

Comment 22

[Patrick Brosset <:pbro>]

Hi Mrigank, do you still plan on working on this bug? I see there hasn't been updates made to the patch on phabricator for some time.
If you need more time, that's fine! Just let us know. If you, however, do not intend to work on this anymore, we'll make the bug available for others to fix.

Comment 23

[Mrigank Krishan]

@Patrick There are some performance regressions which I am not able to fix. I'm not sure whether there is a way to fix this bug without the cost of performance. Maybe @Honza can help us here.

@Honza Are you planning to merge this even with the regression?

Comment 24

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Some comments about next step here:

1. The patch introduces a perf regression captured in this Talos result:
   https://treeherder.mozilla.org/perf.html#/comparesubtest?originalProject=try&originalRevision=8163929ab30a813abfd59e9a14fca354f55e0311&newProject=try&newRevision=309efa2ca59051f2b6685d4b43a9a5e1640828cf&originalSignature=1759151&newSignature=1759151&framework=12

Specifically: complicated.netmonitor.reload.DAMP 3.60%

So, I think we can't merge it.

2. The patch is quite small (just a few lines of CSS) and the regression is most likely caused by:
   linear-gradient(to left, transparent, black 1em);

We need somebody from the platform to investigate why this is slow and whether it can be improved.

3. We should also pay attention to comment #10 and make sure the usability is not worse.
   https://bugzilla.mozilla.org/attachment.cgi?id=9049532

Honza

Comment 25

[lloan alas:[lloanalas]]

(In reply to Mrigank Krishan from comment #23)

@Patrick There are some performance regressions which I am not able to fix. I'm not sure whether there is a way to fix this bug without the cost of performance. Maybe @Honza can help us here.

@Honza Are you planning to merge this even with the regression?

Hi Mrigank,

Are you still working on this? If not, I would like to work on it.

Thanks!

Comment 26

[Mrigank Krishan]

@lloanalas I could not find a fix for the regression. You can give it a try.

Comment 27

[Patrick Brosset <:pbro>]

Hi Lloan, are you still planning on picking this up? If not I'll just make this bug available to others.

Comment 28

[lloan alas:[lloanalas]]

Hi @pbro,

It was never assigned to me, it is still assigned to mrigankkrishan. If the question is am I currently working on this myself, then no. We should make it available to others.

Thank you!

Comment 29

[Patrick Brosset <:pbro>]

Thanks for getting back to me, and sorry about the confusion. I think comment 26 is what made me think it was assigned to you.