1682522 - Make menus prettier on Windows 10

Status: RESOLVED FIXED

(Toolkit :: Themes, enhancement)

Description

[:Gijs (he/him)]

Final designs are not yet available, but we know we'll need to do CSS work here.

Comment 1

[Masatoshi Kimura [:emk]]

I dislike every single app uses its own designs. All apps should use the operating system theme consistently.

But if we do not respect the consistency with the operating system theme anymore, please reconsider the decision about bug 1265308. It was the most frustrating Firefox change for me. Also note that non-native menus (such as hamburger menu) already allow scrolling content area.

Comment 2

[:Gijs (he/him)]

(In reply to Masatoshi Kimura [:emk] from comment #1)

I dislike every single app uses its own designs. All apps should use the operating system theme consistently.

There isn't a real "system theme" on Windows 10 though. Notepad, Edge, and the Windows Settings app all use different styles for their context menus - and those are all Microsoft apps. It's not possible to be consistent when there isn't consistency to begin with.

But if we do not respect the consistency with the operating system theme anymore,

No, we're going to make something nicer where there already isn't a reasonable OS convention, and the status quo is ugly. That's not the same as "not respecting consistency with the OS theme".

Comment 3

[Dão Gottwald [:dao]]

(In reply to :Gijs (he/him) from comment #2)

(In reply to Masatoshi Kimura [:emk] from comment #1)

I dislike every single app uses its own designs. All apps should use the operating system theme consistently.

There isn't a real "system theme" on Windows 10 though. Notepad, Edge, and the Windows Settings app all use different styles for their context menus - and those are all Microsoft apps. It's not possible to be consistent when there isn't consistency to begin with.

My understanding is that they use different APIs that don't give consistent results. That's not really an argument against using one of those APIs, preferably the most modern one that hopefully gives the prettiest result.

We've been here before, there's an old bug somewhere about menu drop shadows on Windows. Somebody should probably contact Microsoft and ask them what's up with their internal inconsistency, why some native menus still use Windows 95 style shadows, if there's any hope for legacy APIs to produce prettier shadows at some point, and what API they would advise us to use.

Comment 4

[:Gijs (he/him)]

(In reply to Dão Gottwald [::dao] from comment #3)

(In reply to :Gijs (he/him) from comment #2)

(In reply to Masatoshi Kimura [:emk] from comment #1)

I dislike every single app uses its own designs. All apps should use the operating system theme consistently.

There isn't a real "system theme" on Windows 10 though. Notepad, Edge, and the Windows Settings app all use different styles for their context menus - and those are all Microsoft apps. It's not possible to be consistent when there isn't consistency to begin with.

My understanding is that they use different APIs that don't give consistent results.

Maybe, but there must be a lot of those APIs, given stuff like https://twitter.com/dysoco/status/1346258080921743361 . Unfortunately, they are not at all documented, AFAICT, and the ones that are have limited availability

That's not really an argument against using one of those APIs, preferably the most modern one that hopefully gives the prettiest result.

I have been unable to find useful APIs for this. The more modern ones seem to involve "create a XAML island inside your app" which will create a lot of unnecessary complication, and require us to create XAML for all our menus. Windows is also working on yet another refresh ( https://docs.microsoft.com/en-gb/windows/apps/winui/winui3/get-started-winui3-for-desktop#create-a-winui-3-desktop-app-for-cwin32 ) slated for later this year (maybe?), which again requires XAML (as well as MSIX packaging). It doesn't look like they intend to "backport" the new style to old APIs.

It would be a lot more straightforward to use CSS to mimic the same styling.

We've been here before, there's an old bug somewhere about menu drop shadows on Windows. Somebody should probably contact Microsoft and ask them what's up with their internal inconsistency, why some native menus still use Windows 95 style shadows, if there's any hope for legacy APIs to produce prettier shadows at some point, and what API they would advise us to use.

I don't think this is likely to produce a viable path to success.

Comment 5

[(No longer employed by Mozilla) Aaron Klotz]

(In reply to :Gijs (he/him) from comment #4)

Unfortunately, they are not at all documented, AFAICT, and the ones that are have limited availability

Most of them are drawn by the various applications themselves, at which point the argument tilts in favour of us just using CSS.

The more modern ones seem to involve "create a XAML island inside your app" which will create a lot of unnecessary complication, and require us to create XAML for all our menus. Windows is also working on yet another refresh ( https://docs.microsoft.com/en-gb/windows/apps/winui/winui3/get-started-winui3-for-desktop#create-a-winui-3-desktop-app-for-cwin32 ) slated for later this year (maybe?), which again requires XAML (as well as MSIX packaging).

It's even worse than that: The current implementation of XAML islands allows for attaching an island only to one top-level HWND per thread. Maybe this will change in WinUI 3, but as of right now the stable implementation of XAML islands is fundamentally incompatible with the Win32 widget.

Comment 6

[:Gijs (he/him)]

Molly and I talked about this and she's going to work on this. :-)

Comment 7

[Molly Howell (she/her) (no longer active)]

Attachment: Bug 1682522 - Implement new menu style for Windows 10. r=#desktop-theme-reviewers,gijs

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/01bd07adb674
Implement new menu style for Windows 10. r=desktop-theme-reviewers,ntim

Comment 9

[Noemi Erli[:noemi_erli]]

Backed out changeset 01bd07adb674 (Bug 1682522) for failing in browser_all_files_referenced.js

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&collapsedPushes=842382&selectedTaskRun=IYXQbDBsRMadAM0755E85g.0&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=01bd07adb674c2739bc560aacde633ed61d530c8

Failure log: https://treeherder.mozilla.org/logviewer?job_id=329554882&repo=autoland&lineNumber=2256

Backout: https://hg.mozilla.org/integration/autoland/rev/c6524c2731394253deed2a5cdc70be649a8977e7

Comment 10

[Molly Howell (she/her) (no longer active)]

I think I see the problem, I added a file to the common theme directory that's actually Windows-only. I'll move that and try again.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a1f8152b4981
Implement new menu style for Windows 10. r=desktop-theme-reviewers,ntim

Comment 12

[Molly Howell (she/her) (no longer active)]

There's one other known issue that I intentionally left alone, which is that the icon for the "Take a Screenshot" menu item is dark when the menu is in dark mode, so it's practically invisible. I left that alone because bug 1690585 intends to remove that icon.

Comment 13

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/a1f8152b4981

Comment 14

[Gary [:streetwolf52]]

I found a few menu options that appear to need alignment unless what I see is intended.

The menu to turn on the 'Menu Bar'

From the Menu Bar:

1. File|Work Offline
2. View|Full Screen F11

Comment 15

[:Gijs (he/him)]

(In reply to Gary [:streetwolf52] from comment #14)

I found a few menu options that appear to need alignment unless what I see is intended.

The menu to turn on the 'Menu Bar'

From the Menu Bar:

1. File|Work Offline
2. View|Full Screen F11

I think these are all covered by bug 1692082, as they are all checkbox items.

Comment 16

[Gary [:streetwolf52]]

Another comment. Seems the spacing is a little to wide between entries. This will cause the menu to extend beyond the screen quicker than if the spacing was less wide.

Comment 17

[Gary [:streetwolf52]]

Another thought. The select color is blue whereas in other menus like Options it is gray. Is there a consideration to unify the select color?

Comment 18

[Molly Howell (she/her) (no longer active)]

Thanks for testing this and for the comments!

(In reply to Gary [:streetwolf52] from comment #16)

Another comment. Seems the spacing is a little to wide between entries. This will cause the menu to extend beyond the screen quicker than if the spacing was less wide.

This one was discussed and left alone, because a) we have scrolling support for in case the menu does grow beyond the screen, so the menu does still work when that happens, and b) you need a pretty high OS text size setting before our longer menus get to be an entire screen, even at less than 1080 resolution, so it appears to be a pretty uncommon problem.

(In reply to Gary [:streetwolf52] from comment #17)

Another thought. The select color is blue whereas in other menus like Options it is gray. Is there a consideration to unify the select color?

I'm not sure what exactly you're calling "Options" here, but you did lead me to discover that the select boxes in about:preferences are really quite broken, so I'll be filing a bug for that right now.

Comment 19

[Gary [:streetwolf52]]

My bad. When you display the the menu using the hamburger icon the select color is gray as well as those entries in the Options series of menus that are selectable. Also selectable items from the security/permissions icons on the left of the URL bar are also gray. The point is consistency in the selectable color. Fx has become more mono chromatic as the years passed. The blue highlight seems out of place IMO.

Comment 20

[Molly Howell (she/her) (no longer active)]

Ah, now I see what you mean, thanks. The hamburger menu I know is getting a lot of work and will look much better aligned when it's ready, and I see bugs about some of the other address bar and toolbar stuff as well, so I think this will all look very different soon. Plus I've just been told (literally while I was writing this comment) that the highlight colors may be changing, so stand by on that as well. Most of this stuff is still really really unfinished right now.

Comment 21

[Gary [:streetwolf52]]

Work in Progress as they say. Keep up the good work.