1871507 - Native-looking tooltips for macOS

Status: RESOLVED FIXED

(Core :: Widget: Cocoa, enhancement)

Description

[Sam Johnson]

Currently, tooltips in Firefox on macOS have a non-native appearance--they are missing the OS-provided border and have less padding compared to native tooltips.

Menupopups are already receiving the OS-provided border by setting an effect view wrapper in nsCocoaWindow's setUseMenuStyle method. This method can be repurposed to also support tooltips.

Comment 1

[Sam Johnson]

Attachment: Bug 1871507 - Native-looking tooltips for macOS. r?#mac-reviewers

Native tooltips, menus, and other opaque windows on macOS receive a border from the window server, which greatly improves their appearance with dark mode. Borderless windows, such as popups, do not receive this treatment by default. However, we have been receiving this treatment for non-native menupopups by setting an effect view wrapper as the window's content view. Extending this logic to also support tooltips allows the window server to provide the appropriate border for them as well.

macOS also provides some additional padding to native tooltips, so I have updated this as well.

Comment 2

[Sam Johnson]

I decided to fix the text color in bug 1871514 instead, as other colors were also affected.

Comment 3

[5silentrain]

Not only the appearance of the tooltips is different, but also their behavior.

The main differences between the Firefox tooltip compared to the native one:

1. Non-native tooltip appears too quickly.
2. A non-native tooltip instantly disappears if you move the mouse cursor a few pixels. This behavior is the most annoying!
3. Visually, a non-native tooltip is noticeably different from a native one.
4. In a long tooltip, there is no break to the second line, as is the case with the native one. Screenshots:
   Firefox: https://i.imgur.com/4Jb0zWB.png
   Chrome/Safari: https://i.imgur.com/jLJgcMG.png
   Etc.

Comment 4

[Sam Johnson]

(In reply to 5silentrain from comment #3)

Not only the appearance of the tooltips is different, but also their behavior.

The main differences between the Firefox tooltip compared to the native one:

1. Non-native tooltip appears too quickly.
2. A non-native tooltip instantly disappears if you move the mouse cursor a few pixels. This behavior is the most annoying!
3. Visually, a non-native tooltip is noticeably different from a native one.
4. In a long tooltip, there is no break to the second line, as is the case with the native one. Screenshots:
   Firefox: https://i.imgur.com/4Jb0zWB.png
   Chrome/Safari: https://i.imgur.com/jLJgcMG.png
   Etc.

Indeed, however, this bug's purpose is to fix item 3 specifically. Behavioral changes probably require some more consideration.

Comment 5

[5silentrain]

Indeed, however, this bug's purpose is to fix item 3 specifically.

Sad :(

Comment 6

[5silentrain]

For example, relatively recently you made context menus native. Moreover, they are native, and not just visually reminiscent of native ones (that is, their appearance and behavior are 1:1, as in the original, native context menus). It would be logical to do the same for tooltips. In addition, it is common practice for macOS to follow Apple guidelines (after all, macOS is not stupid Windows!). Apps that don't follow Apple's guidelines are considered bad apps because they look alien on macOS. This is why in Chrome you can see native tooltips, drop-down lists and much more, which are still not available in Firefox. And this is sad...

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0aa8bc05fbf5
Native-looking tooltips for macOS. r=desktop-theme-reviewers,emilio

Comment 8

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/0aa8bc05fbf5