Open Bug 1167299 Opened 5 years ago Updated 7 months ago

Update context menu style to match Windows 10 native style

Categories

(Core :: Widget: Win32, defect, P3)

Unspecified
Windows 10
defect

Tracking

()

People

(Reporter: phlsa, Unassigned)

References

(Blocks 3 open bugs)

Details

(Whiteboard: tpi:+)

Attachments

(1 file)

Attached image context menu.png
Build 10122 of Windows 10 has introduced a new style for context menus.

Besides the pure style changes, one major difference is that the menu has more spacing when it is triggered through a long-press on a touch screen as opposed to a right click with the mouse (see attachment).

We should mirror both the style and that behavior.
Duplicate of this bug: 1167934
Can you provide a more spelled out spec / list of things we should change?
Flags: needinfo?(philipp)
Component: Theme → Widget: Win32
Product: Firefox → Core
Here's the WIP spec: http://phlsa.github.io/fx-win10-context-menu/
Everything that is in there should be good to go, but there are some elements still missing (like the arrow for submenus).

Does a spec like that in CSS/HTML help you, or would you prefer a list of things that need to change?
Flags: needinfo?(philipp) → needinfo?(dao)
We don't implement menus entirely in CSS, a lot of it is native widget rendering, so a list of points where our current rendering is off and should change would really be helpful.
Flags: needinfo?(dao) → needinfo?(philipp)
Oh, OK - no problem!

- Brighter background color (#fff)
- Light gray as the hover color (#e5e5e5)
- No border on hover effect
- Higher items (more top and bottom padding on the items - 3px paddint top and bottom)
- No vertical rule at the left side of the items
- No colored box around checkmarks and radio items
- Different arrow graphic (tbd)
- Add padding at the top and bottom of the menu (5px)

I think that's most of the differences.
Flags: needinfo?(philipp)
(In reply to Philipp Sackl [:phlsa] please use needinfo from comment #5)
> Oh, OK - no problem!
> 
> - Brighter background color (#fff)
> - Light gray as the hover color (#e5e5e5)
> - No border on hover effect
> - Higher items (more top and bottom padding on the items - 3px paddint top
> and bottom)
> - No vertical rule at the left side of the items
> - No colored box around checkmarks and radio items
> - Different arrow graphic (tbd)
> - Add padding at the top and bottom of the menu (5px)
> 
> I think that's most of the differences.

Jim, most of the above stuff seems like it should be handled by native widget rendering. Do you think this can be fixed there?
Flags: needinfo?(jmathies)
(In reply to Dão Gottwald [:dao] from comment #6)
> (In reply to Philipp Sackl [:phlsa] please use needinfo from comment #5)
> > Oh, OK - no problem!
> > 
> > - Brighter background color (#fff)
> > - Light gray as the hover color (#e5e5e5)
> > - No border on hover effect
> > - Higher items (more top and bottom padding on the items - 3px paddint top
> > and bottom)
> > - No vertical rule at the left side of the items
> > - No colored box around checkmarks and radio items
> > - Different arrow graphic (tbd)
> > - Add padding at the top and bottom of the menu (5px)
> > 
> > I think that's most of the differences.
> 
> Jim, most of the above stuff seems like it should be handled by native
> widget rendering. Do you think this can be fixed there?

We might want to wait and check the rtm, the theme library tends to get updated last.
Flags: needinfo?(jmathies)
The changes I described are already implemented and being used in Windows Explorer, but not other classic Windows apps.
Could we just ask someone at Microsoft about whether or not they will update their theme library accordingly for the launch?
(In reply to Philipp Sackl [:phlsa] please use needinfo from comment #8)
> The changes I described are already implemented and being used in Windows
> Explorer, but not other classic Windows apps.
> Could we just ask someone at Microsoft about whether or not they will update
> their theme library accordingly for the launch?

They always update the theme library, but they usually do it near the end of their dev cycle. We had a similar problem with scrollbars in win8. Note most apps do not use the theme lib, we are 'special' in that our entire UI is rendered internally vs. using common control libraries.

I personally do not have a contact at ms for something like this.
Windows 10 has a lot of different context menu styles, we should probably wait until MS makes up it's mind in a further update for a consistent style (if that ever happens ;) ).
Priority: P2 → P3
They've changed the context menu styles again (supposed to be more consistent now, see http://blogs.windows.com/bloggingwindows/2015/08/27/windows-10-insider-preview-build-10532-for-pc/ ), but it seems they still haven't updated what style is exposed to Firefox. :-(
See Also: → 1256754
Priority: P3 → P2
Whiteboard: tpi:+
Moving to p3 because no activity for at least 1 year(s).
See https://github.com/mozilla/bug-handling/blob/master/policy/triage-bugzilla.md#how-do-you-triage for more information
Priority: P2 → P3
Blocks: fx-touch
No longer blocks: 1158152
You need to log in before you can comment on or make changes to this bug.