[Network] Improve discoverability of the Header column menu

[janodvarko]

Users might not now about the context menu that allows to show/hide columns in the Network panel. We could introduce an menu-icon in order to improve discoverability of this feature.

This menu-icon could appear at the right side of a column header as long as the user hovers mouse over the header. Clicking on the menu would open the same context menu as if the user just right clicked (anywhere) on the header.

Work started in bug 1460875

cc @digitarald @fvsch @violasong

Prior Art

Chrome

Chrome has transparent arrow to indicate sorting (there is no menu-icon)

The column label is shortened only when the column itself is too thin

Edge

Edge is displaying sorting icon above the text

And hiding the text when the column becomes thin (even under the icon, which doesn't seem to be necessary)

Firefox

Firefox is already displaying sorting icon that can hide part of the label if no space

Combination of sort-arrow and icon-menu can take even more space

Considerations

In case where the column is thin there isn't much space, especially in cases where:

• The column label takes the entire horizontal space
• Sorting icon is already there

Hiding the label:

• Instead of using '...' three dots, we could use CSS mask just like for browser tab label.

Other:

• The menu-icon (meatball) should probably appear white one blue background (when the column is sorted)
• The menu-icon (meatball) should change background like other (meatball) icons in the UI

Honza

[digitarald]

I like how the sorting icon doesn't take space in Chrome (as the label is more important than the arrow), maybe some smart CSS filter can improve contrast for that case.

As another prior art, Google spreadsheets shows the menu on hover and overlayed on top with a light button styling (screenshot showing hovered state):

[janodvarko]

maybe some smart CSS filter can improve contrast for that case.

Yes, I was thinking about this too.

@fvsch Could we have a CSS Mask applied around the triangle? (circular CSS mask?)

Honza

[Ilphrin]

Hiding the label:

• Instead of using '...' three dots, we could use CSS mask just like for browser tab label.

Hi!

What about having this '...' and arrow icons appear when the user is hovering the column, whether it is focused or not? So the space needed is only used when the user is looking for this menu

[janodvarko]

What about having this '...' and arrow icons appear when the user is hovering the column, whether it is focused or not? So the space needed is only used when the user is looking for this menu

I am not sure if I understand this, can you please explain more?

[janodvarko]

Also, Google spreadsheets hides the menu-icon when the column is too small. In that case the menu is accessible only through right click.

Honza