1460875 - Improve discoverability of the Header column menu

Status: NEW

(DevTools :: Netmonitor, enhancement, P3)

Description

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

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

This menu would 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.

Honza

Comment 1

[Sunita [:sunitasen]]

Hey, is this issue available? If yes, I would like to work on this.

Comment 2

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

(In reply to Sunita [:sunitasen] from comment #1)

Hey, is this issue available? If yes, I would like to work on this.

I am unsure whether this is good-first-bug. Can you please describe a bit how would you fix that?

Honza

Comment 3

[Hemakshi Sachdev [:hemakshis]]

Hi @honza,

I'd be happy to pair up with @sunitasen if she's ok with it :)

I think we need to add a button nested inside this one which will be visible only on hover and then when clicked we will call the onContextMenu() function.

Hemakshi

Comment 4

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

(In reply to Hemakshi Sachdev [:hemakshis] she/her from comment #3)

Hi @honza,

I'd be happy to pair up with @sunitasen if she's ok with it :)
I like the idea. @Sunita, what do you think?

I think we need to add a button nested inside this one which will be visible only on hover and then when clicked we will call the onContextMenu() function.

Yes, sounds promising. Two notes:

1. We are using <button> element, but in case of any troubles with nested content we could easily turn the <button> into a <div>.
2. There can be sort icon on the right side, so we need to keep it in mind.

Honza

Comment 5

[Sunita [:sunitasen]]

Hey @Honza, I would love to work with @Hemakshi.
I also replied few hours ago, due to terrible network for two days it didn't got posted. :(
What I was thinking that on mouse over, we can shift the label to left so as to make space for the new menu button. What do you think?

Comment 6

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

OK, great!

Honza

Comment 7

[Sunita [:sunitasen]]

Hey @Honza!
while discussing this issue with @Hemakshi we realized that we can't add a button inside another button, as it is invalid.

As this one is a button and we were trying to add context menu button inside this.
So will it be feasible if we add the context menu button in the toolbar?

Comment 8

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

(In reply to Sunita [:sunitasen] from comment #7)

Hey @Honza!
while discussing this issue with @Hemakshi we realized that we can't add a button inside another button, as it is invalid.

As this one is a button and we were trying to add context menu button inside this.
So will it be feasible if we add the context menu button in the toolbar?

I think that we can turn the existing <button> into <div> (see also my comment #4)
There is no special reasons why we actually use <button>, so this should be doable.

Honza

Comment 9

[Hemakshi Sachdev [:hemakshis]]

Hi @Sunita,

How is it going with the bug? Let me know if you have any issue on working on it. :)

Comment 10

[Sunita [:sunitasen]]

Attachment: Bug 1460875 - Improve discoverability of the Header column menu. r=Honza

A hamburger menu has been added in the network panel columns to improve discoverability of the Header column menu.

Comment 11

[Sunita [:sunitasen]]

Attachment: Bug 1460875 - Improve discoverability of the Header column menu.

Bug 1460875:

changed the hamburger menu to dot menu

Comment 12

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

Instead of creating a new Phab revision every time, you should update the existing one:

Something like as follows:

arc diff .^ --update D26596

Honza

Comment 13

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

Please see my comment in Phabricator:
https://phabricator.services.mozilla.com/D28305#833313

The menu icon isn't visible.

Honza

Comment 14

[Sunita [:sunitasen]]

Hey @Honza,
Sorry for the new phab revision. It was done by mistake.

I changed the hamburger menu to dot menu

Next, as you pointed out, the vertical separators are missing in the headers, this is due to changing the button to div here
I need some guidance for fixing this.

Thanks.

Comment 15

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

Attachment: image.png

@Sunita: thanks for the patch!

@Harald: please take a look at the screenshot, what do you think?

• The (...) menu icon appears on hover
• It handles click event and shows the header context menu
• The icon is relatively big and in case of a smaller column it covers the entire title

Should we use different/smaller icon? (e.g. little drop down triangle)
Should we open UX issue for this?

Honza

Comment 16

[:Harald Kirschner :digitarald]

General direction looks great, with the hover behavior. I share the concerns about the icon.

Other icons used would be the arrow-down, which can also take less horizontal space: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/icons/arrow-dropdown-12.svg

Victoria, any quick idea which icon to use here?

Comment 17

[Victoria Wang [:victoria]]

Attachment: image.png

I feel the arrow-down is more for dropdowns (e.g. in main Firefox Preferences), and it clashes a bit with the sort arrow. What about a ••• icon but quite a bit smaller and gray-colored, kind of like the Chrome markup view does this?

Comment 18

[Victoria Wang [:victoria]]

At some point Florens made some new meatball menu designs, one with disproportionately smaller meatballs - maybe they can find that again :)?

Comment 19

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

@Sunita, could you please experiment with smaller (...) and gray icon?
(and later with the meatball menu as soon as smaller version is available)

Thanks!
Honza

Comment 20

[Sunita [:sunitasen]]

Attachment: demo.png

Hey @Honza, I tried reducing the size of the menu.
This is how it looks.

Comment 21

[Florens Verschelde :fvsch]

Attachment: Small Meatballs icon (3 options).svg

I didn't have the smaller meatballs icon option in my files, but they're not too hard to recreate.
Figma document: https://www.figma.com/file/fkD0wju1MlEaLETPnLiD7If7/Small-Meatballs-icon
And SVG export attached.

• The first option (2px dots, 2px gaps) would be the best one for rendering on 1x screens.
• If we want something more compact, the second option looks alright too, it will render a bit more blurry on 1x screens but it's not too bad.
• The third option is probably too tiny? Even at 2x it's not really sharp in my tests, and on a 1x screen it's hard to read.

Comment 22

[Florens Verschelde :fvsch]

There is no special reasons why we actually use <button>

I believe we use a <button> for keyboard navigation, so that the sorting feature can be activated with a keyboard as well?
If we replace it with a <div>, we lose that.

And replacing with <div tabindex="0" role="button"> plus some keyboard event listeners could work on the CSS side, but it would kill accessibility for the nested button (a button or button role has all its content condensed as a single label in the accessibility API).

A better option would be to not nest elements, but use a pattern such as:

<th>
  <div style="display:flex">
    <button>Label</button>
    <button>...</button>
  </div>
</th>

So we have one focusable button for each action: "sort" and "show context menu".

We could make the second button display:none until we have th:hover or th:focus-within (so that focusing the first button reveals the second one). Alternatively, do not use display:none on the second button so that it always remains focusable, but hide it some other way (e.g. position:absolute;opacity:0;pointer-events:none) until it has focus or the header is hovered.

@Honza I wonder if we should reconsider using a CSS mask to clip header text? It was a perf regression when applied to the whole table, but maybe it could work

I'm also wondering what should happen when we hover a header which already has a "sorted:asc|desc" indicator (triangle pointing down or up)? Do we remove that indicator on hover?

Comment 23

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

Attachment: image.png

Thanks for the SVG Florens!

I was testing the second option (on both 1x/2x screen) and it looks good to me. See the attached screenshot.

I believe we use a <button> for keyboard navigation

I see, good catch.

A better option would be to not nest elements, but use a pattern such as:

This sounds like a good idea to me.

@Honza I wonder if we should reconsider using a CSS mask to clip header text?

Yes, this current solution (three dots) is taking too much space.

I'm also wondering what should happen when we hover a header which already has a "sorted:asc|desc" indicator

Removing the sorting icon on hover could make its usability tricky (disappearing any time the user wants to actually click on it). I would display both.

I created UX issue for this:
https://github.com/firefox-devtools/ux/issues/61

Honza

Comment 24

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

Attachment: small-meatball.svg

I am also attaching the icon I extracted from Floren's SVG.

Honza

Comment 25

[Patrick Brosset <:pbro>]

Hi Sunita, thanks for the work done so far. Are you planning on working on this bug still? I noticed that there hasn't been any comments here or on phabricator in this last month, so I was curious whether you needed more time or weren't planning on working on it anymore.
Just let me know so I can make it available for others to pick up.

Comment 26

[Patrick Brosset <:pbro>]

Alright, I'm going to unassign this bug for now so others can pick up from where this was left off. Please feel free to claim this issue.