Fix window resizing/moving issues and add ability to disable vibrancy (…

…#727) Fixes #721 Fixes #724 Fixes #725
sindresorhus · Jan 17, 2019 · ff456ff · ff456ff
1 parent 9b1d1d8
commit ff456ff
Show file tree

Hide file tree

Showing 7 changed files with 637 additions and 585 deletions.
diff --git a/browser.css b/browser.css
@@ -399,56 +399,3 @@ a,
 .fbPageBanner {
 	display: none !important;
 }
-
-/* -- Vibrancy-specific styles -- */
-
-html.os-darwin body,
-html.os-darwin ._4sp8 {
-	background: transparent !important;
-}
-
-/* Login screen */
-html.os-darwin ._3v_o {
-	background-color: #fff;
-}
-
-/* Message placeholder text color */
-html.os-darwin ._kmc ._1p1t {
-	color: #999 !important;
-	-webkit-text-fill-color: #999 !important;
-}
-
-/* Contact list: search input */
-html.os-darwin ._5iwm ._58al {
-	background-color: rgba(246, 247, 249, 0.5) !important;
-}
-
-/* Chat title bar (light mode) */
-html.os-darwin ._673w {
-	background-color: #fff !important;
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-/* Share previews: title and subtitle */
-html.os-darwin .__6k,
-html.os-darwin .__6l {
-	background-color: transparent !important;
-}
-
-/* Contact list: person container */
-html.os-darwin ._1qt4 {
-	border-top: solid 1px rgba(0, 0, 0, 0.06);
-}
-
-/* Message container + right sidebar (light mode) */
-html.os-darwin ._4_j4,
-html.os-darwin ._4_j5 {
-	background: #fff !important;
-}
-
-/* New conversation name input field */
-html.os-darwin ._2y8y {
-	background: #fff !important;
-}
-
-/* -- End vibrancy-specific styles -- */
diff --git a/browser.js b/browser.js
@@ -163,11 +163,24 @@ function setDarkMode() {
 		document.documentElement.classList.toggle('dark-mode', config.get('darkMode'));
 	}
 
-	setVibrancy();
+	updateVibrancy();
 }
 
-function setVibrancy() {
-	document.documentElement.classList.toggle('vibrancy', config.get('vibrancy'));
+function updateVibrancy() {
+	const {classList} = document.documentElement;
+
+	classList.remove('sidebar-vibrancy', 'full-vibrancy');
+
+	switch (config.get('vibrancy')) {
+		case 'sidebar':
+			classList.add('sidebar-vibrancy');
+			break;
+		case 'full':
+			classList.add('full-vibrancy');
+			break;
+		default:
+	}
+
 	ipc.send('set-vibrancy');
 }
 
@@ -195,11 +208,8 @@ ipc.on('toggle-sidebar', () => {
 
 ipc.on('set-dark-mode', setDarkMode);
 
-ipc.on('toggle-vibrancy', () => {
-	config.set('vibrancy', !config.get('vibrancy'));
-	setVibrancy();
-
-	document.documentElement.style.backgroundColor = 'transparent';
+ipc.on('update-vibrancy', () => {
+	updateVibrancy();
 });
 
 ipc.on('render-overlay-icon', (event, messageCount) => {

diff --git a/config.js b/config.js
@@ -1,11 +1,15 @@
 'use strict';
 const Store = require('electron-store');
 
-module.exports = new Store({
+const defaults = {
 	defaults: {
 		followSystemAppearance: true,
 		darkMode: false,
-		vibrancy: false,
+
+		// TODO: Change the default to 'sidebar' when the vibrancy issue in Electron is fixed.
+		// See https://github.com/electron/electron/issues/10420
+		vibrancy: 'none', // Possible values: 'none', 'sidebar', 'full'
+
 		zoomFactor: 1,
 		lastWindowState: {
 			width: 800,
@@ -30,4 +34,23 @@ module.exports = new Store({
 		quitOnWindowClose: false,
 		keepMeSignedIn: true
 	}
-});
+};
+
+function updateVibrancySetting(store) {
+	const vibrancy = store.get('vibrancy');
+
+	if (vibrancy === true) {
+		store.set('vibrancy', 'full');
+	} else if (vibrancy === false) {
+		store.set('vibrancy', 'sidebar');
+	}
+}
+
+function migrate(store) {
+	updateVibrancySetting(store);
+}
+
+const store = new Store(defaults);
+migrate(store);
+
+module.exports = store;
diff --git a/dark-mode.css b/dark-mode.css
@@ -754,45 +754,3 @@ html.dark-mode ._3v_o ._55r1 {
 html.dark-mode ._3v_o ._55r1::-webkit-input-placeholder {
 	color: var(--base-thirty) !important;
 }
-
-/* -- Vibrancy-related styles -- */
-
-/* Chat title bar (dark mode) */
-html.os-darwin.dark-mode ._673w {
-	background-color: var(--container-dark-color) !important;
-	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
-}
-
-/* Styles for vibrancy in dark mode */
-html.os-darwin.dark-mode body,
-html.os-darwin.dark-mode ._4sp8 {
-	background: transparent !important;
-}
-
-/* Message list: header above */
-html.os-darwin.dark-mode ._5742 {
-	background: transparent !important;
-}
-
-/* Contact list: header above */
-html.os-darwin.dark-mode ._36ic {
-	background: transparent !important;
-}
-
-/* Message container + right sidebar (dark mode) */
-html.os-darwin.dark-mode ._4_j4,
-html.os-darwin.dark-mode ._4_j5 {
-	background: var(--container-dark-color) !important;
-}
-
-/* Contact list: search input */
-html.os-darwin.dark-mode ._5iwm ._58al {
-	background: rgba(255, 255, 255, 0.05) !important;
-}
-
-/* New conversation name input field */
-html.os-darwin.dark-mode ._2y8y {
-	background: var(--container-dark-color) !important;
-}
-
-/* -- End vibrancy-specific styles -- */
diff --git a/index.js b/index.js
@@ -7,7 +7,7 @@ const {darkMode, is} = require('electron-util');
 const log = require('electron-log');
 const {autoUpdater} = require('electron-updater');
 const isDev = require('electron-is-dev');
-const appMenu = require('./menu');
+const updateAppMenu = require('./menu');
 const config = require('./config');
 const tray = require('./tray');
 const {sendAction} = require('./util');
@@ -194,11 +194,6 @@ function createMainWindow() {
 		titleBarStyle: 'hiddenInset',
 		autoHideMenuBar: config.get('autoHideMenuBar'),
 		darkTheme: isDarkMode, // GTK+3
-
-		// Workaround for https://github.com/electron/electron/issues/10420
-		transparent: true,
-		backgroundColor: '#00ffffff',
-
 		webPreferences: {
 			preload: path.join(__dirname, 'browser.js'),
 			nodeIntegration: false,
@@ -249,7 +244,8 @@ function createMainWindow() {
 	await app.whenReady();
 
 	const trackingUrlPrefix = `https://l.${domain}/l.php`;
-	electron.Menu.setApplicationMenu(appMenu);
+
+	updateAppMenu();
 	mainWindow = createMainWindow();
 	tray.create(mainWindow);