Improve discoverability of the Header column menu

ASSIGNED
Assigned to

Status

enhancement
P3
normal
ASSIGNED
a year ago
22 days ago

People

(Reporter: Honza, Assigned: sunitasen)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(7 attachments, 1 obsolete attachment)

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
Priority: -- → P3

Updated

11 months ago
Product: Firefox → DevTools
Assignee

Comment 1

2 months ago

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

(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

Flags: needinfo?(sensunita18)

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

Flags: needinfo?(odvarko)

(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

Flags: needinfo?(odvarko)
Assignee

Comment 5

2 months ago

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?

Flags: needinfo?(sensunita18)

OK, great!

Honza

Assignee: nobody → sensunita18
Status: NEW → ASSIGNED
Assignee

Comment 7

2 months ago

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?

Flags: needinfo?(odvarko)

(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

Flags: needinfo?(odvarko)

Hi @Sunita,

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

Flags: needinfo?(sensunita18)
Assignee

Comment 10

2 months ago

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

Assignee

Updated

a month ago
Flags: needinfo?(sensunita18)
Assignee

Comment 11

a month ago

Bug 1460875:

changed the hamburger menu to dot menu

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

Something like as follows:

arc diff .^ --update D26596

Honza

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

The menu icon isn't visible.

Honza

Flags: needinfo?(sensunita18)
Assignee

Comment 14

29 days ago

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.

Flags: needinfo?(sensunita18)
Attachment #9056686 - Attachment is obsolete: true
Posted image 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

Flags: needinfo?(hkirschner)
Attachment #9056686 - Attachment is obsolete: false
Attachment #9056686 - Attachment is obsolete: true

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?

Flags: needinfo?(hkirschner) → needinfo?(victoria)
Posted image 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?

Flags: needinfo?(victoria)

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

Flags: needinfo?(florens)

@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

Flags: needinfo?(sensunita18)
Assignee

Comment 20

24 days ago
Posted image demo.png

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

Flags: needinfo?(sensunita18)
Assignee

Updated

23 days ago
Flags: needinfo?(odvarko)

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.
Flags: needinfo?(florens)

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?

Posted image 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

Flags: needinfo?(odvarko)
Posted image small-meatball.svg

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

Honza

You need to log in before you can comment on or make changes to this bug.