1474223 - Update docking menu items in meatball menu to a more compact form

Status: NEW

(DevTools :: General, enhancement, P2)

Description

[Brian Birtles (:birtles)]

See some of the screens here:

  https://mozilla.invisionapp.com/share/M5G8OO1ZVE4#/screens

I'm not sure if we were thinking the option second from left? Or leftmost?

Comment 1

[Victoria Wang [:victoria]]

I like the second from left best, but maybe it would be good to get some more feedback. I'll do some polling/ask UX about this on Wednesday.

To clarify how I think the second from left would work:
- By default, text label describes selected docking position
- When hovering over other options, text label updates to reflect hovered-over option

A place where this sort of happens is the download doorhanger.

Comment 2

[Brian Birtles (:birtles)]

Thanks Victoria! I'll wait to hear what you discover.

Comment 3

[Victoria Wang [:victoria]]

I ran a poll: https://twitter.com/violasong/status/1016801896839823360
and discussed this with some UX people. I also looked at Chrome's UI some more.

It seems 80% of people who use different docking positions think the icon row is better than the current solution, and about half of those prefer having a changing text label (which would also be good for accessibility.) 

At this point I think my favorite solution is actually Chrome's icon row with the addition of their snappier, more persistent tooltip behavior. 

I explained thusly on Slack #ux:
>It does 2 things differently from the Firefox tooltips: once it appears, instead of disappearing as soon as the user moves their cursor, it persists until the user mouses off the click area entirely, and 2. if, after triggering the tooltip, the user mouses over to other icons in the group, those tooltips appear immediately instead of having a 1-2 second delay. Certain Mac apps like Xcode have similar behavior (for a row of 9 icons). Another example, which might be my favorite for long rows of icons: the Mac dock shows labels without any delay when you hover.


One place where I see this happening currently is the Inspector rules image popover that appears when hovering over an image URL, though it's not exactly a tooltip. I'm not sure if there are any other tooltips in Firefox that currently work this way, so I'm not sure if it's worth introducing custom behavior just for this. Would be interested in hearing your opinion and others' thoughts on this.