[desktop] provide option to override the default font, close #1909

adds an "override default font" option to the desktop settings viewer
which doesn't show up when there are no overrides configured for the
current platform (currently, contains SimHei's latin and chinese name on
windows, which is installed by default).

Uses a fixed list of fonts because getting a list of installed fonts
cross-platform requires a native module like font-manager or parsing of
platform-dependent command output (which may be huge)

This is not applied automatically because it replaces the default font
of the application and we can't rely on locale to detect which font
would be correct for the user.

changing the font list in main-styles.js directly would also work, but
that's not very extensible should this problem occur with other
language/locale/platform combinations. It would also require to get the
user's choice from the main thread somehow.

src/desktop/ApplicationWindow.js

@@ -1,6 +1,6 @@
 // @flow
 import type {ElectronPermission, FindInPageResult} from 'electron'
-import {BrowserWindow, Menu, shell, WebContents} from 'electron'
+import {app, BrowserWindow, Menu, shell, WebContents} from 'electron'
 import * as localShortcut from 'electron-localshortcut'
 import DesktopUtils from './DesktopUtils.js'
 import u2f from '../misc/u2f-api.js'
@@ -10,6 +10,8 @@ import url from "url"
 import {capitalizeFirstLetter} from "../api/common/utils/StringUtils.js"
 import {Keys} from "../api/common/TutanotaConstants"
 import type {Shortcut} from "../misc/KeyManager"
+import {DesktopConfigHandler} from "./config/DesktopConfigHandler"
+import path from "path"
 
 const MINIMUM_WINDOW_SIZE: number = 350
 
@@ -22,8 +24,6 @@ export class ApplicationWindow {
 	_ipc: IPC;
 	_startFile: string;
 	_browserWindow: BrowserWindow;
-	_preloadjs: string;
-	_desktophtml: string;
 
 	_userInfo: ?UserInfo;
 	_setBoundsTimeout: TimeoutID;
@@ -33,12 +33,10 @@ export class ApplicationWindow {
 	_shortcuts: Array<Shortcut>;
 	id: number;
 
-	constructor(wm: WindowManager, preloadjs: string, desktophtml: string, noAutoLogin?: boolean) {
+	constructor(wm: WindowManager, conf: DesktopConfigHandler, noAutoLogin?: boolean) {
 		this._userInfo = null
 		this._ipc = wm.ipc
-		this._preloadjs = preloadjs
-		this._desktophtml = desktophtml
-		this._startFile = DesktopUtils.pathToFileURL(this._desktophtml)
+		this._startFile = DesktopUtils.pathToFileURL(path.join(app.getAppPath(), conf.get("desktophtml")),)
 
 		const isMac = process.platform === 'darwin';
 		this._shortcuts = [
@@ -57,7 +55,9 @@ export class ApplicationWindow {
 			])
 
 		console.log("startFile: ", this._startFile)
-		this._createBrowserWindow(wm)
+		const overrideFont = conf.getDesktopConfig("overrideFont")
+		const preloadPath = path.join(app.getAppPath(), conf.get("preloadjs"))
+		this._createBrowserWindow(wm, preloadPath, overrideFont)
 		this._browserWindow.loadURL(
 			noAutoLogin
 				? this._startFile + "?noAutoLogin=true"
@@ -107,12 +107,15 @@ export class ApplicationWindow {
 		}
 	}
 
-	_createBrowserWindow(wm: WindowManager) {
+	_createBrowserWindow(wm: WindowManager, preloadPath: string, overrideFont: ?string) {
 		this._browserWindow = new BrowserWindow({
 			icon: wm.getIcon(),
 			show: false,
 			autoHideMenuBar: true,
 			webPreferences: {
+				defaultFontFamily: !!overrideFont
+					? {sansSerif: overrideFont}
+					: undefined,
 				nodeIntegration: false,
 				nodeIntegrationInWorker: false,
 				// TODO: not a real os sandbox yet.
@@ -123,7 +126,7 @@ export class ApplicationWindow {
 				// the preload script changes to the web app
 				contextIsolation: false,
 				webSecurity: true,
-				preload: this._preloadjs
+				preload: preloadPath
 			}
 		})
 		this._browserWindow.setMenuBarVisibility(false)

src/desktop/DesktopWindowManager.js

@@ -2,7 +2,6 @@
 
 import type {NativeImage, Rectangle} from "electron"
 import {app, screen} from "electron"
-import path from 'path'
 import type {UserInfo} from "./ApplicationWindow"
 import {ApplicationWindow} from "./ApplicationWindow"
 import type {DesktopConfigHandler} from "./config/DesktopConfigHandler"
@@ -41,8 +40,7 @@ export class WindowManager {
 	newWindow(showWhenReady: boolean, noAutoLogin?: boolean): ApplicationWindow {
 		const w = new ApplicationWindow(
 			this,
-			path.join(app.getAppPath(), this._conf.get("preloadjs")),
-			path.join(app.getAppPath(), this._conf.get("desktophtml")),
+			this._conf,
 			noAutoLogin
 		)
 		windows.unshift(w)

src/desktop/config/DesktopConfigHandler.js

@@ -18,7 +18,8 @@ export const DesktopConfigKey = {
 	scheduledAlarms: 'scheduledAlarms',
 	lastProcessedNotificationId: 'lastProcessedNotificationId',
 	lastMissedNotificationCheckTime: 'lastMissedNotificationCheckTime',
-	desktopConfigVersion: "desktopConfigVersion"
+	desktopConfigVersion: "desktopConfigVersion",
+	overrideFont: "overrideFont"
 }
 export type DesktopConfigKeyEnum = $Values<typeof DesktopConfigKey>
 

src/misc/TranslationKey.js

@@ -1092,3 +1092,6 @@ export type TranslationKeyType = "about_label"
 	| "yourFolders_action"
 	| "yourMessage_label"
 	| "emptyString_msg"
+	| "dontOverride_action"
+	| "requiresNewWindow_msg"
+	| "overrideFont_label"

src/settings/DesktopSettingsViewer.js

@@ -25,13 +25,22 @@ const DownloadLocationStrategy = Object.freeze({
 	CHOOSE_DIRECTORY: 1
 })
 
+const overrideFonts = [{name: lang.get("dontOverride_action"), value: null}]
+if (env.platformId === 'win32') {
+	overrideFonts.push(
+		{name: "SimHei", value: "SimHei"},
+		{name: "黑体", value: "黑体"}
+	)
+}
+
 export class DesktopSettingsViewer implements UpdatableSettingsViewer {
 	_isDefaultMailtoHandler: Stream<?boolean>;
 	_defaultDownloadPath: Stream<string>;
 	_runAsTrayApp: Stream<?boolean>;
 	_runOnStartup: Stream<?boolean>;
 	_isIntegrated: Stream<?boolean>;
 	_isAutoUpdateEnabled: Stream<?boolean>;
+	_overrideFont: Stream<?string>;
 	_isPathDialogOpen: boolean;
 
 	constructor() {
@@ -40,6 +49,7 @@ export class DesktopSettingsViewer implements UpdatableSettingsViewer {
 		this._runOnStartup = stream(false)
 		this._isIntegrated = stream(false)
 		this._isAutoUpdateEnabled = stream(false)
+		this._overrideFont = stream(null)
 		this._requestDesktopConfig()
 	}
 
@@ -71,7 +81,7 @@ export class DesktopSettingsViewer implements UpdatableSettingsViewer {
 			selectedValue: this._runAsTrayApp,
 			selectionChangedHandler: v => {
 				this._runAsTrayApp(v)
-				this.setBooleanSetting('runAsTrayApp', v)
+				this.updateSetting('runAsTrayApp', v)
 			}
 		}
 
@@ -120,7 +130,7 @@ export class DesktopSettingsViewer implements UpdatableSettingsViewer {
 			selectedValue: this._isAutoUpdateEnabled,
 			selectionChangedHandler: v => {
 				this._isAutoUpdateEnabled(v)
-				this.setBooleanSetting('enableAutoUpdate', v)
+				this.updateSetting('enableAutoUpdate', v)
 			}
 		}
 
@@ -149,6 +159,17 @@ export class DesktopSettingsViewer implements UpdatableSettingsViewer {
 			disabled: true
 		}
 
+		const setOverrideFontAttrs: DropDownSelectorAttrs<?string> = {
+			label: "overrideFont_label",
+			helpLabel: () => lang.get("requiresNewWindow_msg"),
+			items: overrideFonts,
+			selectedValue: this._overrideFont,
+			selectionChangedHandler: v => {
+				this._overrideFont(v)
+				this.updateSetting('overrideFont', v)
+			}
+		}
+
 		return [
 			m("#user-settings.fill-absolute.scroll.plr-l.pb-xl", [
 				m(".h4.mt-l", lang.get('desktopSettings_label')),
@@ -157,7 +178,8 @@ export class DesktopSettingsViewer implements UpdatableSettingsViewer {
 				m(DropDownSelectorN, setRunOnStartupAttrs),
 				m(TextFieldN, defaultDownloadPathAttrs),
 				env.platformId === 'linux' ? m(DropDownSelectorN, setDesktopIntegrationAttrs) : null,
-				m(DropDownSelectorN, setAutoUpdateAttrs)
+				m(DropDownSelectorN, setAutoUpdateAttrs),
+				overrideFonts.length > 1 ? m(DropDownSelectorN, setOverrideFontAttrs) : null,
 			])
 		]
 	}
@@ -191,11 +213,12 @@ export class DesktopSettingsViewer implements UpdatableSettingsViewer {
 			         this._runOnStartup(desktopConfig.runOnStartup)
 			         this._isIntegrated(desktopConfig.isIntegrated)
 			         this._isAutoUpdateEnabled(desktopConfig.enableAutoUpdate)
+			         this._overrideFont(desktopConfig.overrideFont)
 			         m.redraw()
 		         })
 	}
 
-	setBooleanSetting(setting: string, value: boolean): void {
+	updateSetting(setting: string, value: boolean): void {
 		nativeApp.invokeNative(new Request('sendDesktopConfig', []))
 		         .then(config => {
 			         config[setting] = value

src/translations/en.js

@@ -1104,6 +1104,9 @@ module.exports = {
 		"yes_label": "Yes",
 		"yourCalendars_label": "Your calendars",
 		"yourFolders_action": "YOUR FOLDERS",
-		"yourMessage_label": "Your message"
+		"yourMessage_label": "Your message",
+		"overrideFont_label": "Override Default Font",
+		"requiresNewWindow_msg": "Requires the Window to be reopened to take effect",
+		"dontOverride_action": "Don't override"
 	}
 }