Translucency Does Not Seem to be Working?

[elsiehupp]

Version Info

• Caprine Version 2.54.1 (2.54.1)
• macOS Big Sur 11.5.2 (20G95)

Note: I tried both with and without hardware acceleration (and with multiple app restarts).

Expected Behavior

Caprine will show vibrancy/translucency as shown in the README when vibrancy is enabled:

Actual Behavior

Caprine looks the same with and without vibrancy enabled. (i.e. the application does not have any translucency, but it does have wallpaper tinting.)

Note that the application differs from the screenshot in other ways, as well:

[elsiehupp]

As an aside, the UI for enabling vibrancy is not intuitive. And in general the default should just defer to the operating system; in other words, vibrancy should default to enabled, and it should be disabled either implicitly by the operating system (i.e. when vibrancy is disabled in System Preferences) or when the user explicitly chooses to disable it. (A user enabling vibrancy in a single application when it is globally disabled seems somewhat unlikely, if it's even technically possible.)

[elsiehupp]

There is some confusion between "Translucency" and "Vibrancy", FYI. The toggle is called "Vibrancy", but the screenshot specifically slows Translucency. "Translucency" is what it sounds like, whereas "Vibrancy" technically refers to wallpaper tinting, if you look closely at the Apple design documentation on the features. Wallpaper tinting can be disabled globally in System Preferences > General, while as far as I know Translucency cannot be globally disabled. Regardless, the design documents specifically show sidebars being translucent and the main content area not. (Translucency also only seems to be used on the active window, so in, e.g., Apple Messages, sidebar translucency turns on and off when you switch to and from the application.)

[elsiehupp]

So I guess the behavior that should be in place is that Vibrancy (i.e. wallpaper tinting) should follow the global setting (which it already does regardless) and Translucency should probably be a single toggle titled "Use Translucent Sidebar" in the View menu. (And on systems where Translucency is not supported for one reason or another, the toggle should be hidden entirely rather than doing nothing or merely being grayed out.)

If we're talking simplicity, though, overriding the system Dark Mode could probably be buried in the "Caprine Preferences" submenu, alongside a setting for "Use Translucency for Entire Window" (the latter of which would cause the "Use Translucent Sidebar" toggle in the View menu to be grayed out with a checkmark beside it).

[elsiehupp]

Looking at the code, the window transparency seems to be set here:

https://github.com/sindresorhus/caprine/blob/5031f47dc65dc4cc269da34a18014b98406e6f5c/source/index.ts#L575-L580

However, the currently supported means of creating a transparent window in Electron is as follows:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ transparent: true, frame: false })
win.show()

Or, alternately:

let win = new BrowserWindow({
  width: 800,
  height: 600,
  vibrancy: 'dark'  // 'light', 'medium-light' etc
})

I can't quite tell where the BrowserWindow is instantiated in Caprine, but the above code snippet is the only place where the word transparent appears outside of CSS, and the only place win.setVibrancy(type) is in that code snippet, where it only seems to apply to the sidebar. That is, it's unclear to me how the previous translucency was achieved.

[mayurankv]

This is a really good writeup, could this be used in a possible fix to the vibrancy issue? The dark/light themes are working for me but not the vibrancy settings and would love to see it fixed!

[elsiehupp]

@mayurankv some of the other theming elements seem to be broken now, so unfortunately it seems like this project may be abandoned. I would pitch in to help except that Electron is a bit outside my area of experience (even if I’m still able to dig through Electron code).

FWIW, though, given that the web content in this application is entirely remote (i.e. on the Messenger website), there should be a lot less involved in maintenance than there is in a project like Element, where the web content is part of the codebase.

[dusansimic]

Hi @elsiehupp. I'd just like to say sorry from the start that this issue was left unanswered for such a long time.

unfortunately it seems like this project may be abandoned

It is not in fact abandoned, it just suffers from lack of contributors and lack of contributors free time. Also most of the current theming issues happen due to Facebook's breaking of the Messenger website and making things difficult to have a working dark mode. They have been completely fixed with the latest release.

given that the web content in this application is entirely remote (i.e. on the Messenger website), there should be a lot less involved in maintenance

Yes, however lack of free time is the problem.

Now, regarding the translucency and vibrancy.

I don't personally use macOS and because of that, I don't really know much about, use or know how to maintain said code. If there is any ideas for making Caprine more consistent with the Apple design, please share them and discuss them. That being said, there would need to be a contributor who would implement those changes because currently none of the frequent contributors use macOS. I think it makes sense what you were saying in your comments (first, second) but since I'm not a macOS user, I'd have to trust you on that. Any help from Electron developers who use macOS would come in very handy here.

Since there are now several significant issues that we need help with, I'll compile a list of them and point to discussions about them since most of them have an idea how to solve them, they just need to be implemented.

Again, sorry for letting this issue stay unanswered for such a long time and thanks for writing up such a detailed examination of the issue.

[elsiehupp]

Hi @dusansimic—thanks for your response!

I could do some more poking around in the code, but, again, I don’t really have a lot of experience with Electron.

Regarding user interface norms, the usual thing is for the sidebar to be translucent in the active window when an application is windowed and tinted when an application is fullscreen. This tinting seems to be separate from wallpaper tinting (i.e. the sidebar is still a different color from the toolbar), but it’s not entirely clear.

Here are some representative screenshots of the Finder:

Windowed with wallpaper tinting:

Fullscreen with wallpaper tinting:

Windowed without wallpaper tinting:

Fullscreen without wallpaper tinting:

Windowed, unfocused/inactive, with wallpaper tinting:

Ideally all of this should just be inherited from the operating system via Electron, only leaving it to you to decide which color goes where. Wallpaper tinting and translucency are both system-wide toggles that should be able to be inherited, as well. I say “should” because I don’t know how well Electron supports these things.

[elsiehupp]

If you squint too hard at macOS color tinting it all starts to look like puke. 🤮 The thing is, I actually like my user interface looking like puke!