Provide silent & seamless reload for the app.

app/main/index.js

@@ -139,11 +139,9 @@ function createMainWindow() {
 }
 
 function registerLocalShortcuts(page) {
-	// TODO - use global shortcut instead
+	// Somehow, reload action cannot be overwritten by the menu item
 	electronLocalshortcut.register(mainWindow, 'CommandOrControl+R', () => {
-		// page.send('reload');
-		mainWindow.reload();
-		page.send('destroytray');
+		page.send('reload-viewer');
 	});
 }
 
@@ -183,9 +181,9 @@ app.on('ready', () => {
 			appUpdater();
 		}
 	});
+
 	electron.powerMonitor.on('resume', () => {
-		mainWindow.reload();
-		page.send('destroytray');
+		page.send('reload-viewer');
 	});
 
 	ipc.on('focus-app', () => {
@@ -196,13 +194,6 @@ app.on('ready', () => {
 		app.quit();
 	});
 
-	ipc.on('reload-main', () => {
-		page.reload();
-		page.send('destroytray');
-		electronLocalshortcut.unregisterAll(mainWindow);
-		registerLocalShortcuts(page);
-	});
-
 	ipc.on('toggle-app', () => {
 		if (mainWindow.isVisible()) {
 			mainWindow.hide();
@@ -229,6 +220,14 @@ app.on('ready', () => {
 			page.send('switch-server-tab', index - 1);
 		});
 	});
+
+	ipc.on('local-shortcuts', (event, enable) => {
+		if (enable) {
+			registerLocalShortcuts(page);
+		} else {
+			electronLocalshortcut.unregisterAll(mainWindow);
+		}
+	});
 });
 
 app.on('will-quit', () => {

app/main/menu.js

@@ -51,9 +51,10 @@ const historySubmenu = [
 const viewSubmenu = [
 	{
 		label: 'Reload',
+		accelerator: 'CommandOrControl+R',
 		click(item, focusedWindow) {
 			if (focusedWindow) {
-				sendAction('reload');
+				sendAction('reload-viewer');
 			}
 		}
 	},

app/renderer/css/main.css

@@ -181,6 +181,12 @@ html, body {
 /*******************
  *   Webview Area  *
  *******************/
+#webviews-container {
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+
 webview {
     opacity: 1;
     transition: opacity 0.3s;

app/renderer/js/main.js

@@ -16,7 +16,7 @@ class ServerManagerView {
 		const $actionsContainer = document.getElementById('actions-container');
 		this.$reloadButton = $actionsContainer.querySelector('#reload-action');
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
-		this.$content = document.getElementById('content');
+		this.$webviewsContainer = document.getElementById('webviews-container');
 
 		this.activeTabIndex = -1;
 		this.tabs = [];
@@ -39,6 +39,8 @@ class ServerManagerView {
 		} else {
 			this.openSettings('Servers');
 		}
+
+		ipcRenderer.send('local-shortcuts', true);
 	}
 
 	initServer(server, index) {
@@ -48,7 +50,7 @@ class ServerManagerView {
 			onClick: this.activateTab.bind(this, index),
 			index,
 			webview: new WebView({
-				$root: this.$content,
+				$root: this.$webviewsContainer,
 				index,
 				url: server.url,
 				name: server.alias,
@@ -89,7 +91,7 @@ class ServerManagerView {
 			onClick: this.activateTab.bind(this, this.functionalTabs[tabProps.name]),
 			onDestroy: this.destroyTab.bind(this, tabProps.name, this.functionalTabs[tabProps.name]),
 			webview: new WebView({
-				$root: this.$content,
+				$root: this.$webviewsContainer,
 				index: this.functionalTabs[tabProps.name],
 				url: tabProps.url,
 				name: tabProps.name,
@@ -164,6 +166,25 @@ class ServerManagerView {
 		}
 	}
 
+	destroyView() {
+		// Clear global variables
+		this.activeTabIndex = -1;
+		this.tabs = [];
+		this.functionalTabs = {};
+
+		// Clear DOM elements
+		this.$tabsContainer.innerHTML = '';
+		this.$webviewsContainer.innerHTML = '';
+
+		// Destroy shortcuts
+		ipcRenderer.send('local-shortcuts', false);
+	}
+
+	reloadView() {
+		this.destroyView();
+		this.initTabs();
+	}
+
 	updateBadge() {
 		let messageCountAll = 0;
 		for (let i = 0; i < this.tabs.length; i++) {
@@ -204,6 +225,7 @@ class ServerManagerView {
 			this.openSettings(settingNav);
 		});
 		ipcRenderer.on('open-about', this.openAbout.bind(this));
+		ipcRenderer.on('reload-viewer', this.reloadView.bind(this));
 		ipcRenderer.on('switch-server-tab', (event, index) => {
 			this.activateTab(index);
 		});
@@ -213,8 +235,9 @@ class ServerManagerView {
 window.onload = () => {
 	const serverManagerView = new ServerManagerView();
 	serverManagerView.init();
-};
 
-window.addEventListener('online', () => {
-	ipcRenderer.send('reload-main');
-});
+
+	window.addEventListener('online', () => {
+		serverManagerView.reloadView();
+	});
+};

app/renderer/js/pages/network.js

@@ -9,7 +9,7 @@ class NetworkTroubleshootingView {
 
 	init() {
 		this.$reconnectButton.addEventListener('click', () => {
-			ipcRenderer.send('reload-main');
+			ipcRenderer.send('forward-message', 'reload-viewer');
 		});
 	}
 }

app/renderer/js/pages/preference/general-section.js

@@ -119,8 +119,9 @@ class GeneralSection extends BaseComponent {
 			this.initSilentOption();
 		});
 	}
+
 	handleServerInfoChange() {
-		ipcRenderer.send('reload-main');
+		ipcRenderer.send('forward-message', 'reload-viewer');
 	}
 }
 

app/renderer/js/pages/preference/servers-section.js

@@ -76,7 +76,7 @@ class ServersSection extends BaseComponent {
 	}
 
 	handleServerInfoChange() {
-		ipcRenderer.send('reload-main');
+		ipcRenderer.send('forward-message', 'reload-viewer');
 	}
 }
 

app/renderer/js/preload.js

@@ -37,6 +37,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
 	// redirect users to network troubleshooting page
 	document.querySelector('.restart_get_events_button').addEventListener('click', () => {
-		ipcRenderer.send('reload-main');
+		ipcRenderer.send('forward-message', 'reload-viewer');
 	});
 });

app/renderer/main.html

@@ -26,6 +26,7 @@
           </div>
         </div>
       </div>
+      <div id="webviews-container"/>
     </div>
   </body>
   <script src="js/main.js"></script>