Closed Bug 1483027 Opened Last year Closed Last year

Three dotted icon menu is hard to discover in New tab page


(Firefox :: New Tab Page, defect, P3)




Firefox 64
65.1 - Nov 2
Tracking Status
firefox63 --- wontfix
firefox64 --- verified


(Reporter: alice0775, Assigned: arshadkazmi42)



(Keywords: good-first-bug, ux-discovery)


(1 file)

There are 2 kind of three dot icon.
One is for each thumbnails. And the other is for Top Sites/Highlights.

Actual Results:
There are not obvious explanation what is this.

Expected Results:
Easy to find them, Menu items in three dot icon should be aggregated in right click menu of thumbnail.
At least, tooltip should be provided for three dot icon.
Summary: Three dotted icon is hard to discover in New tab page → Three dotted icon menu is hard to discover in New tab page
Severity: enhancement → normal
Attached image screenshot
Three dot icon.
Right click menu and Three dot icon menu.
Flags: needinfo?(abenson)
Top Sites have actions associated with them that do not make sense for Highlights (or Pocket Stories) and vice-versa so we're using a generic icon to indicate the menu. 

I DO think that the icon could benefit from a tooltip (perhaps, "Options" or "Menu") that would help to describe what the button does.

As for the discrepancy between the three-dot menu and the mouse right-click (system) menu, that's an entirely different issue and should be taken up in another bug (if it hasn't already).
Flags: needinfo?(abenson)
let's add a tooltip to this
Keywords: good-first-bug
Priority: -- → P3

I want to fix this bug. Which file(s) should I look up to for resolving this bug?

Flags: needinfo?(tspurway)
Hi Divyansh,

Thanks for your interest in this bug!  We'd love to help you help us!

I am going to pass this needinfo onto someone who can actually help.  :ursula can you point Divyansh at some code?
Flags: needinfo?(tspurway) → needinfo?(usarracini)
Hey Divyansh, you'll want to add a title attribute to the React components called TopSite:, similarly in Card.jsx, and CollapsibleSection.jsx. All the components that have the class name "context-menu-button" is what you're looking for here. Additionally you'll have to add the string "Menu" to our files for localization: You can add it at the bottom with a comment above it describing that this is a tooltip for the the context menu. 
The pull request should be done against this repo:
Does that give you enough to get started? If you have any more questions about this, feel free to ask!
Flags: needinfo?(usarracini)
Is this still available, I would like to take this up.
Flags: needinfo?(usarracini)
Flags: needinfo?(tspurway)
Sure thing, I'll assign you :)
Flags: needinfo?(usarracini)
Flags: needinfo?(tspurway)
Thanks Ursula.
Just to confirm, I need to create a Pull Request against this repo for this?
Flags: needinfo?(usarracini)
Assignee: nobody → arshadkazmi42
Yes, thank you, we'll get someone to review it!
Flags: needinfo?(usarracini)
Should the hover text/title be an action, e.g., "List all tabs" "Open a new tab" "Show sidebars" "Open menu"

So in this case, maybe just "Open menu"? And should that same title be used for menus of top sites, stories/cards, and sections?
Flags: needinfo?(abenson)
That's a good catch, Ed. I think you're right and it should be an action. "Open menu" works for all of the ••• items.
Flags: needinfo?(abenson)
Closed: Last year
Resolution: --- → FIXED
Blocks: 1499886
Iteration: --- → 65.1 (Nov 2)
Thanks for the fix! You should be able to see it in the latest Nightly 64 (20181018123730)
I have verified that the issue is no longer reproducible, the "Open menu" tooltip is displayed when any "•••" is hovered on Windows 10 x64, Mac 10.13.3, and Arch Linux x64.
Thank you, Ciprian, for verifying this.
See Also: → 1508409
Component: Activity Streams: Newtab → New Tab Page
You need to log in before you can comment on or make changes to this bug.