ELECTRON-665 - Localize custom title bar buttons for Windows 10 (#465)

js/preload/preloadMain.js

@@ -482,6 +482,19 @@ function createAPI() {
         }
     });
 
+    /**
+     * an event triggered by the main process when
+     * the locale is changed
+     * @param dataObj {Object} - locale content
+     */
+    local.ipcRenderer.on('locale-changed', (event, dataObj) => {
+        if (dataObj && typeof dataObj === 'object') {
+            if (dataObj.titleBar) {
+                titleBar.updateLocale(dataObj.titleBar);
+            }
+        }
+    });
+
     /**
      * an event triggered by the main process when
      * the window enters full screen

js/windowMgr.js

@@ -985,6 +985,12 @@ function setLocale(browserWindow, opts) {
 
         if (isWindows10()) {
             browserWindow.setMenuBarVisibility(false);
+
+            // update locale for custom title bar
+            if (isCustomTitleBarEnabled) {
+                const titleBarContent = i18n.getMessageFor('TitleBar');
+                browserWindow.webContents.send('locale-changed', { titleBar: titleBarContent });
+            }
         }
     }
 

js/windowsTitleBar/index.js

@@ -60,6 +60,11 @@ class TitleBar {
             default:
                 break;
         }
+        this.hamburgerMenuButton = document.getElementById('hamburger-menu-button');
+        this.minimizeButton = document.getElementById('title-bar-minimize-button');
+        this.maximizeButton = document.getElementById('title-bar-maximize-button');
+        this.closeButton = document.getElementById('title-bar-close-button');
+
         this.initiateEventListeners();
     }
 
@@ -67,16 +72,22 @@ class TitleBar {
      * Method that attaches Event Listeners for elements
      */
     initiateEventListeners() {
-        const hamburgerMenuButton = document.getElementById('hamburger-menu-button');
-        const minimizeButton = document.getElementById('title-bar-minimize-button');
-        const maximizeButton = document.getElementById('title-bar-maximize-button');
-        const closeButton = document.getElementById('title-bar-close-button');
-
         attachEventListeners(this.titleBar, 'dblclick', this.maximizeOrUnmaximize.bind(this));
-        attachEventListeners(hamburgerMenuButton, 'click', this.popupMenu.bind(this));
-        attachEventListeners(closeButton, 'click', this.closeWindow.bind(this));
-        attachEventListeners(maximizeButton, 'click', this.maximizeOrUnmaximize.bind(this));
-        attachEventListeners(minimizeButton, 'click', this.minimize.bind(this));
+        attachEventListeners(this.hamburgerMenuButton, 'click', this.popupMenu.bind(this));
+        attachEventListeners(this.closeButton, 'click', this.closeWindow.bind(this));
+        attachEventListeners(this.maximizeButton, 'click', this.maximizeOrUnmaximize.bind(this));
+        attachEventListeners(this.minimizeButton, 'click', this.minimize.bind(this));
+    }
+
+    /**
+     * Update button's title w.r.t current locale
+     * @param content {Object}
+     */
+    updateLocale(content) {
+        this.hamburgerMenuButton.title = content.Menu || 'Menu';
+        this.minimizeButton.title = content.Minimize || 'Minimize';
+        this.maximizeButton.title = content.Maximize || 'Maximize';
+        this.closeButton.title = content.Close || 'Close';
     }
 
     /**

locale/en-US.json

@@ -102,6 +102,12 @@
   "Start Speaking": "Start Speaking",
   "Stop Speaking": "Stop Speaking",
   "Symphony Help": "Symphony Help",
+  "TitleBar": {
+    "Close": "Close",
+    "Maximize": "Maximize",
+    "Menu": "Menu",
+    "Minimize": "Minimize"
+  },
   "Title Bar Style": "Title Bar Style",
   "Toggle Full Screen": "Toggle Full Screen",
   "Troubleshooting": "Troubleshooting",

locale/en.json

@@ -100,6 +100,12 @@
   "Start Speaking": "Start Speaking",
   "Stop Speaking": "Stop Speaking",
   "Symphony Help": "Symphony Help",
+  "TitleBar": {
+    "Close": "Close",
+    "Maximize": "Maximize",
+    "Menu": "Menu",
+    "Minimize": "Minimize"
+  },
   "Title Bar Style": "Title Bar Style",
   "Toggle Full Screen": "Toggle Full Screen",
   "Troubleshooting": "Troubleshooting",

locale/ja-JP.json

@@ -102,6 +102,12 @@
   "Start Speaking": "スピーチを開始",
   "Stop Speaking": "スピーチを終了",
   "Symphony Help": "Symphonyのヘルプ",
+  "TitleBar": {
+    "Close": "閉じる",
+    "Maximize": "最大化する",
+    "Menu": "メニュー",
+    "Minimize": "最小化する"
+  },
   "Title Bar Style": "タイトルバーのスタイル",
   "Toggle Full Screen": "画面表示を切り替え",
   "Troubleshooting": "トラブルシューティング",

locale/ja.json

@@ -100,6 +100,12 @@
   "Start Speaking": "スピーチを開始",
   "Stop Speaking": "スピーチを終了",
   "Symphony Help": "Symphonyのヘルプ",
+  "TitleBar": {
+    "Close": "閉じる",
+    "Maximize": "最大化する",
+    "Menu": "メニュー",
+    "Minimize": "最小化する"
+  },
   "Title Bar Style": "タイトルバーのスタイル",
   "Toggle Full Screen": "画面表示を切り替え",
   "Troubleshooting": "トラブルシューティング",