BrowserView: Rebased.

.gitignore

@@ -42,3 +42,6 @@ config.gypi
 
 # Ignore all the typescript compiled files
 app/**/*.js
+
+# text editor files
+.vscode/

app/main/index.ts

@@ -1,3 +1,4 @@
+import ViewManager = require('./viewmanager');
 
 import electron, {app, dialog, ipcMain, session} from 'electron';
 import fs from 'fs';
@@ -19,7 +20,8 @@ import {setAutoLaunch} from './startup';
 let mainWindowState: windowStateKeeper.State;
 
 // Prevent window being garbage collected
-let mainWindow: Electron.BrowserWindow;
+// eslint-disable-next-line import/no-mutable-exports
+export let mainWindow: Electron.BrowserWindow;
 let badgeCount: number;
 
 let isQuitting = false;
@@ -121,10 +123,12 @@ function createMainWindow(): Electron.BrowserWindow {
 	win.setTitle('Zulip');
 
 	win.on('enter-full-screen', () => {
+		ViewManager.fixBounds();
 		win.webContents.send('enter-fullscreen');
 	});
 
 	win.on('leave-full-screen', () => {
+		ViewManager.fixBounds();
 		win.webContents.send('leave-fullscreen');
 	});
 
@@ -302,7 +306,7 @@ ${error}`
 	// 		height: mainWindowState.height - paddingHeight,
 	// 		webPreferences: {
 	// 			plugins: true,
-	// 			partition: 'persist:webviewsession'
+	// 			partition: 'persist:viewsession'
 	// 		}
 	// 	});
 	// 	pdfWindow.loadURL(url);
@@ -311,8 +315,9 @@ ${error}`
 	// 	pdfWindow.setMenu(null);
 	// });
 
-	// Reload full app not just webview, useful in debugging
+	// Reload full app not just view, useful in debugging
 	ipcMain.on('reload-full-app', () => {
+		ViewManager.destroyAll();
 		mainWindow.reload();
 		page.send('destroytray');
 	});
@@ -337,6 +342,10 @@ ${error}`
 		page.send('toggle-autohide-menubar', showMenubar, true);
 	});
 
+	ipcMain.on('fix-bounds', () => {
+		ViewManager.fixBounds();
+	});
+
 	ipcMain.on('update-badge', (_event: Electron.IpcMainEvent, messageCount: number) => {
 		badgeCount = messageCount;
 		BadgeSettings.updateBadge(badgeCount, mainWindow);
@@ -355,7 +364,7 @@ ${error}`
 		AppMenu.setMenu(props);
 		const activeTab = props.tabs[props.activeTabIndex];
 		if (activeTab) {
-			mainWindow.setTitle(`Zulip - ${activeTab.webviewName}`);
+			mainWindow.setTitle(`Zulip - ${activeTab.name}`);
 		}
 	});
 

app/main/view.ts

@@ -0,0 +1,205 @@
+'use strict';
+
+import { BrowserView, BrowserWindow, app } from 'electron';
+
+import ConfigUtil = require('../renderer/js/utils/config-util');
+import SystemUtil = require('../renderer/js/utils/system-util');
+const shouldSilentView = ConfigUtil.getConfigItem('silent');
+
+export interface ViewProps {
+	index: number;
+	url: string;
+	name: string;
+	nodeIntegration: boolean;
+	preload: boolean;
+}
+
+// Class View is a wrapper around electron's BrowserView
+// Multiples views are handled by ViewManager
+export class View extends BrowserView {
+	index: number;
+	url: string;
+	zoomFactor: number;
+	customCSS: string | null;
+	loading: boolean;
+
+	constructor(public props: ViewProps) {
+		super({
+			webPreferences: {
+				preload: props.preload ? `${__dirname}/../renderer/js/preload.js` : '',
+				nodeIntegration: props.nodeIntegration,
+				partition: 'persist:view',
+				plugins: true
+			}
+		});
+		this.index = props.index;
+		this.url = props.url;
+		this.zoomFactor = 1.0;
+		this.loading = false;
+		this.customCSS = ConfigUtil.getConfigItem('customCSS');
+		this.registerListeners();
+	}
+
+	registerListeners(): void {
+		if (shouldSilentView) {
+			this.webContents.addListener('dom-ready', () => {
+				this.webContents.setAudioMuted(true);
+			});
+		}
+
+		this.webContents.addListener('did-navigate-in-page', () => {
+			const isSettingsPage = this.url.includes('renderer/preference.html');
+			if (isSettingsPage) {
+				return;
+			}
+			this.canGoBackButton();
+		});
+
+		this.webContents.addListener('did-navigate', () => {
+			const url = this.webContents.getURL();
+			const loggedIn = !url.endsWith('/login/');
+			this.sendAction('set-logged-in', loggedIn, this.index);
+			this.canGoBackButton();
+		});
+
+		this.webContents.addListener('did-start-loading', () => {
+			this.switchLoadingIndicator(true);
+		});
+
+		this.webContents.addListener('dom-ready', () => {
+			this.switchLoadingIndicator(false);
+		});
+
+		this.webContents.addListener('did-fail-load', (e: Event, errorCode: number, errorDescription: string) => {
+			const hasConnectivityErr = SystemUtil.connectivityERR.includes(errorDescription);
+			if (hasConnectivityErr) {
+				console.error('error', errorDescription);
+				this.sendAction('network-error');
+			}
+		});
+
+		this.webContents.addListener('did-stop-loading', () => {
+			this.switchLoadingIndicator(false);
+		});
+
+		this.webContents.addListener('page-title-updated', (e: Event, title: string) => {
+			const badgeCount = this.getBadgeCount(title);
+			this.sendAction('update-badge-count', badgeCount, this.url);
+		});
+
+		this.webContents.addListener('page-favicon-updated', (e: Event, favicons: string[]) => {
+			// This returns a string of favicons URL. If there is a PM counts in unread messages then the URL would be like
+			// https://chat.zulip.org/static/images/favicon/favicon-pms.png
+			if (favicons[0].indexOf('favicon-pms') > 0 && process.platform === 'darwin') {
+				// This api is only supported on macOS
+				app.dock.setBadge('●');
+				// bounce the dock
+				if (ConfigUtil.getConfigItem('dockBouncing')) {
+					app.dock.bounce();
+				}
+			}
+		});
+
+		this.webContents.addListener('new-window', (e: Event, urlToOpen: string) => {
+			e.preventDefault();
+			this.sendAction('handle-link', this.index, urlToOpen);
+		});
+	}
+
+	zoomIn(): void {
+		this.zoomFactor += 0.1;
+		this.webContents.setZoomFactor(this.zoomFactor);
+	}
+
+	zoomOut(): void {
+		this.zoomFactor -= 0.1;
+		this.webContents.setZoomFactor(this.zoomFactor);
+	}
+
+	zoomActualSize(): void {
+		this.zoomFactor = 1.0;
+		this.webContents.setZoomFactor(this.zoomFactor);
+	}
+
+	focus(): void {
+		this.webContents.focus();
+	}
+
+	reload(): void {
+		this.switchLoadingIndicator(true);
+		this.webContents.reload();
+	}
+
+	switchLoadingIndicator(state: boolean): void {
+		this.loading = state;
+		const isSettingsPage = this.url.includes('renderer/preference.html');
+		if (!isSettingsPage) {
+			this.sendAction('switch-loading', state, this.url);
+		}
+	}
+
+	forward(): void {
+		if (this.webContents.canGoForward()) {
+			this.webContents.goForward();
+		}
+	}
+
+	back(): void {
+		if (this.webContents.canGoBack()) {
+			this.webContents.goBack();
+		}
+	}
+
+	logOut(): void {
+		this.webContents.executeJavaScript('logout()');
+	}
+
+	showShortcut(): void {
+		this.webContents.executeJavaScript('shortcut()');
+	}
+
+	showNotificationSettings(): void {
+		this.webContents.executeJavaScript('showNotificationSettings()');
+	}
+
+	toggleDevTools(): void {
+		this.webContents.toggleDevTools();
+	}
+
+	canGoBackButton(): void {
+		if (this.webContents.canGoBack()) {
+			this.sendAction('switch-back', true);
+		} else {
+			this.sendAction('switch-back', false);
+		}
+	}
+
+	getBadgeCount(title: string): number {
+		const messageCountInTitle = (/\((\d+)\)/).exec(title);
+		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
+	}
+
+	downloadUrl(url: string): void {
+		this.webContents.downloadURL(url);
+	}
+
+	loadUrl(url: string): void {
+		this.webContents.loadURL(url);
+	}
+
+	updateBadgeCount(title: string): void {
+		const badgeCount = this.getBadgeCount(title);
+		this.sendAction('update-badge-count', badgeCount, this.url);
+	}
+
+	// Send an action to renderer process.
+	sendAction(action: any, ...params: any[]): void {
+		const win = BrowserWindow.getAllWindows()[0];
+
+		if (process.platform === 'darwin') {
+			win.restore();
+		}
+
+		win.webContents.send(action, ...params);
+	}
+}