release: New release v5.4.3.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

app/main/request.ts

@@ -4,7 +4,6 @@ import path from 'path';
 import stream from 'stream';
 import util from 'util';
 
-import escape from 'escape-html';
 import getStream from 'get-stream';
 
 import {ServerConf} from '../renderer/js/utils/domain-util';
@@ -73,7 +72,7 @@ export const _getServerSettings = async (domain: string, session: Electron.sessi
 		// Following check handles both the cases
 		icon: realm_icon.startsWith('/') ? realm_uri + realm_icon : realm_icon,
 		url: realm_uri,
-		alias: escape(realm_name)
+		alias: realm_name
 	};
 };
 

app/renderer/about.html

@@ -26,7 +26,7 @@
 
             const { app } = require('electron').remote;
             const version_tag = document.querySelector('#version');
-            version_tag.innerHTML = 'v' + app.getVersion();
+            version_tag.textContent = 'v' + app.getVersion();
         </script>
         <script>require('./js/shared/preventdrag.js')</script>
     </body>

app/renderer/js/components/base.ts

@@ -1,7 +1,7 @@
 export default class BaseComponent {
-	generateNodeFromTemplate(template: string): Element | null {
+	generateNodeFromHTML(html: string): Element | null {
 		const wrapper = document.createElement('div');
-		wrapper.innerHTML = template;
+		wrapper.innerHTML = html;
 		return wrapper.firstElementChild;
 	}
 }

app/renderer/js/components/functional-tab.ts

@@ -1,3 +1,5 @@
+import {htmlEscape} from 'escape-goat';
+
 import Tab, {TabProps} from './tab';
 
 export default class FunctionalTab extends Tab {
@@ -8,19 +10,21 @@ export default class FunctionalTab extends Tab {
 		this.init();
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
+		return htmlEscape`
-					<div class="server-tab-badge close-button">
+			<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
-						<i class="material-icons">close</i>
+				<div class="server-tab-badge close-button">
-					</div>
+					<i class="material-icons">close</i>
-					<div class="server-tab">
+				</div>
-						<i class="material-icons">${this.props.materialIcon}</i>
+				<div class="server-tab">
-					</div>
+					<i class="material-icons">${this.props.materialIcon}</i>
-				</div>`;
+				</div>
+			</div>
+		`;
 	}
 
 	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
+		this.$el = this.generateNodeFromHTML(this.templateHTML());
 		if (this.props.name !== 'Settings') {
 			this.props.$root.append(this.$el);
 			this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0];

app/renderer/js/components/server-tab.ts

@@ -1,5 +1,7 @@
 import {ipcRenderer} from 'electron';
 
+import {htmlEscape} from 'escape-goat';
+
 import * as SystemUtil from '../utils/system-util';
 
 import Tab, {TabProps} from './tab';
@@ -12,19 +14,21 @@ export default class ServerTab extends Tab {
 		this.init();
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `<div class="tab" data-tab-id="${this.props.tabIndex}">
+		return htmlEscape`
-					<div class="server-tooltip" style="display:none">${this.props.name}</div>
+			<div class="tab" data-tab-id="${this.props.tabIndex}">
-					<div class="server-tab-badge"></div>
+				<div class="server-tooltip" style="display:none">${this.props.name}</div>
-					<div class="server-tab">
+				<div class="server-tab-badge"></div>
-					<img class="server-icons" src='${this.props.icon}'/>
+				<div class="server-tab">
-					</div>
+					<img class="server-icons" src="${this.props.icon}"/>
-					<div class="server-tab-shortcut">${this.generateShortcutText()}</div>
+				</div>
-				</div>`;
+				<div class="server-tab-shortcut">${this.generateShortcutText()}</div>
+			</div>
+		`;
 	}
 
 	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
+		this.$el = this.generateNodeFromHTML(this.templateHTML());
 		this.props.$root.append(this.$el);
 		this.registerListeners();
 		this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0];
@@ -33,7 +37,7 @@ export default class ServerTab extends Tab {
 	updateBadge(count: number): void {
 		if (count > 0) {
 			const formattedCount = count > 999 ? '1K+' : count.toString();
-			this.$badge.innerHTML = formattedCount;
+			this.$badge.textContent = formattedCount;
 			this.$badge.classList.add('active');
 		} else {
 			this.$badge.classList.remove('active');

app/renderer/js/components/webview.ts

@@ -2,6 +2,8 @@ import {ipcRenderer, remote} from 'electron';
 import fs from 'fs';
 import path from 'path';
 
+import {htmlEscape} from 'escape-goat';
+
 import * as ConfigUtil from '../utils/config-util';
 import * as SystemUtil from '../utils/system-util';
 
@@ -50,25 +52,27 @@ export default class WebView extends BaseComponent {
 		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `<webview
+		return htmlEscape`
-					class="disabled"
+			<webview
-					data-tab-id="${this.props.tabIndex}"
+				class="disabled"
-					src="${this.props.url}"
+				data-tab-id="${this.props.tabIndex}"
-					${this.props.nodeIntegration ? 'nodeIntegration' : ''}
+				src="${this.props.url}"
-					${this.props.preload ? 'preload="js/preload.js"' : ''}
+				` + (this.props.nodeIntegration ? 'nodeIntegration' : '') + htmlEscape`
-					partition="persist:webviewsession"
+				` + (this.props.preload ? 'preload="js/preload.js"' : '') + htmlEscape`
-					name="${this.props.name}"
+				partition="persist:webviewsession"
-					webpreferences="
+				name="${this.props.name}"
-						${this.props.nodeIntegration ? '' : 'contextIsolation,'}
+				webpreferences="
-						${ConfigUtil.getConfigItem('enableSpellchecker') ? 'spellcheck,' : ''}
+					${this.props.nodeIntegration ? '' : 'contextIsolation,'}
-						javascript
+					${ConfigUtil.getConfigItem('enableSpellchecker') ? 'spellcheck,' : ''}
-					">
+					javascript
-				</webview>`;
+				">
+			</webview>
+		`;
 	}
 
 	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template()) as Electron.WebviewTag;
+		this.$el = this.generateNodeFromHTML(this.templateHTML()) as Electron.WebviewTag;
 		this.domReady = new Promise(resolve => {
 			this.$el.addEventListener('dom-ready', () => resolve(), true);
 		});

app/renderer/js/main.ts

@@ -2,7 +2,6 @@ import {ipcRenderer, remote, clipboard} from 'electron';
 import path from 'path';
 
 import isDev from 'electron-is-dev';
-import escape from 'escape-html';
 
 import * as Messages from '../../resources/messages';
 
@@ -10,7 +9,6 @@ import FunctionalTab from './components/functional-tab';
 import ServerTab from './components/server-tab';
 import WebView from './components/webview';
 import {feedbackHolder} from './feedback';
-import * as CommonUtil from './utils/common-util';
 import * as ConfigUtil from './utils/config-util';
 import * as DNDUtil from './utils/dnd-util';
 import type {DNDSettings} from './utils/dnd-util';
@@ -125,7 +123,7 @@ class ServerManagerView {
 
 		this.$fullscreenPopup = document.querySelector('#fullscreen-popup');
 		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
-		this.$fullscreenPopup.innerHTML = `Press ${this.$fullscreenEscapeKey} to exit full screen`;
+		this.$fullscreenPopup.textContent = `Press ${this.$fullscreenEscapeKey} to exit full screen`;
 
 		this.loading = new Set();
 		this.activeTabIndex = -1;
@@ -358,7 +356,7 @@ class ServerManagerView {
 		this.tabs.push(new ServerTab({
 			role: 'server',
 			icon: server.icon,
-			name: CommonUtil.decodeString(server.alias),
+			name: server.alias,
 			$root: this.$tabsContainer,
 			onClick: this.activateLastTab.bind(this, index),
 			index,
@@ -371,7 +369,7 @@ class ServerManagerView {
 				tabIndex,
 				url: server.url,
 				role: 'server',
-				name: CommonUtil.decodeString(server.alias),
+				name: server.alias,
 				hasPermission: (origin: string, permission: string) =>
 					origin === server.url && permission === 'notifications',
 				isActive: () => index === this.activeTabIndex,
@@ -463,7 +461,7 @@ class ServerManagerView {
 		const $parent = $img.parentElement;
 		const $container = $parent.parentElement;
 		const webviewId = $container.dataset.tabId;
-		const $webview = document.querySelector(`webview[data-tab-id="${webviewId}"]`);
+		const $webview = document.querySelector(`webview[data-tab-id="${CSS.escape(webviewId)}"]`);
 		const realmName = $webview.getAttribute('name');
 
 		if (realmName === null) {
@@ -499,7 +497,7 @@ class ServerManagerView {
 	}
 
 	onHover(index: number): void {
-		// `this.$serverIconTooltip[index].innerHTML` already has realm name, so we are just
+		// `this.$serverIconTooltip[index].textContent` already has realm name, so we are just
 		// removing the style.
 		this.$serverIconTooltip[index].removeAttribute('style');
 		// To handle position of servers' tooltip due to scrolling of list of organizations
@@ -684,8 +682,8 @@ class ServerManagerView {
 		this.functionalTabs.clear();
 
 		// Clear DOM elements
-		this.$tabsContainer.innerHTML = '';
+		this.$tabsContainer.textContent = '';
-		this.$webviewsContainer.innerHTML = '';
+		this.$webviewsContainer.textContent = '';
 	}
 
 	async reloadView(): Promise<void> {
@@ -929,11 +927,11 @@ class ServerManagerView {
 				if (domain.url.includes(serverURL)) {
 					const serverTooltipSelector = '.tab .server-tooltip';
 					const serverTooltips = document.querySelectorAll(serverTooltipSelector);
-					serverTooltips[index].innerHTML = escape(realmName);
+					serverTooltips[index].textContent = realmName;
-					this.tabs[index].props.name = escape(realmName);
+					this.tabs[index].props.name = realmName;
 					this.tabs[index].webview.props.name = realmName;
 
-					domain.alias = escape(realmName);
+					domain.alias = realmName;
 					DomainUtil.updateDomain(index, domain);
 					// Update the realm name also on the Window menu
 					ipcRenderer.send('update-menu', {
@@ -974,7 +972,7 @@ class ServerManagerView {
 			webviews.forEach(webview => {
 				const currentId = webview.getWebContentsId();
 				const tabId = webview.getAttribute('data-tab-id');
-				const concurrentTab: HTMLButtonElement = document.querySelector(`div[data-tab-id="${tabId}"]`);
+				const concurrentTab: HTMLButtonElement = document.querySelector(`div[data-tab-id="${CSS.escape(tabId)}"]`);
 				if (currentId === webviewId) {
 					concurrentTab.click();
 				}

app/renderer/js/pages/preference/add-certificate.ts

@@ -1,6 +1,8 @@
 import {remote, OpenDialogOptions} from 'electron';
 import path from 'path';
 
+import {htmlEscape} from 'escape-goat';
+
 import BaseComponent from '../../components/base';
 import * as CertificateUtil from '../../utils/certificate-util';
 import * as DomainUtil from '../../utils/domain-util';
@@ -24,8 +26,8 @@ export default class AddCertificate extends BaseComponent {
 		this._certFile = '';
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `
+		return htmlEscape`
 			<div class="settings-card certificates-card">
 				<div class="certificate-input">
 					<div>${t.__('Organization URL')}</div>
@@ -40,7 +42,7 @@ export default class AddCertificate extends BaseComponent {
 	}
 
 	init(): void {
-		this.$addCertificate = this.generateNodeFromTemplate(this.template());
+		this.$addCertificate = this.generateNodeFromHTML(this.templateHTML());
 		this.props.$root.append(this.$addCertificate);
 		this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button');
 		this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;

app/renderer/js/pages/preference/base-section.ts

@@ -1,6 +1,6 @@
 import {ipcRenderer} from 'electron';
 
-import escape from 'escape-html';
+import {htmlEscape} from 'escape-goat';
 
 import BaseComponent from '../../components/base';
 
@@ -15,9 +15,9 @@ export default class BaseSection extends BaseComponent {
 	generateSettingOption(props: BaseSectionProps): void {
 		const {$element, disabled, value, clickHandler} = props;
 
-		$element.innerHTML = '';
+		$element.textContent = '';
 
-		const $optionControl = this.generateNodeFromTemplate(this.generateOptionTemplate(value, disabled));
+		const $optionControl = this.generateNodeFromHTML(this.generateOptionHTML(value, disabled));
 		$element.append($optionControl);
 
 		if (!disabled) {
@@ -25,39 +25,39 @@ export default class BaseSection extends BaseComponent {
 		}
 	}
 
-	generateOptionTemplate(settingOption: boolean, disabled?: boolean): string {
+	generateOptionHTML(settingOption: boolean, disabled?: boolean): string {
-		const label = disabled ? '<label class="disallowed" title="Setting locked by system administrator."/>' : '<label/>';
+		const labelHTML = disabled ? '<label class="disallowed" title="Setting locked by system administrator."></label>' : '<label></label>';
 		if (settingOption) {
-			return `
+			return htmlEscape`
 				<div class="action">
 					<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox" checked disabled>
+						<input class="toggle toggle-round" type="checkbox" checked disabled>
-					  ${label}
+						` + labelHTML + htmlEscape`
 					</div>
 				</div>
 			`;
 		}
 
-		return `
+		return htmlEscape`
-				<div class="action">
+			<div class="action">
-					<div class="switch">
+				<div class="switch">
-					  <input class="toggle toggle-round" type="checkbox">
+					<input class="toggle toggle-round" type="checkbox">
-					  ${label}
+					` + labelHTML + htmlEscape`
-					</div>
 				</div>
-			`;
+			</div>
+		`;
 	}
 
 	/* A method that in future can be used to create dropdown menus using <select> <option> tags.
 		it needs an object which has ``key: value`` pairs and will return a string that can be appended to HTML
 	*/
-	generateSelectTemplate(options: {[key: string]: string}, className?: string, idName?: string): string {
+	generateSelectHTML(options: {[key: string]: string}, className?: string, idName?: string): string {
-		let select = `<select class="${escape(className)}" id="${escape(idName)}">\n`;
+		let html = htmlEscape`<select class="${className}" id="${idName}">\n`;
 		Object.keys(options).forEach(key => {
-			select += `<option name="${escape(key)}" value="${escape(key)}">${escape(options[key])}</option>\n`;
+			html += htmlEscape`<option name="${key}" value="${key}">${options[key]}</option>\n`;
 		});
-		select += '</select>';
+		html += '</select>';
-		return select;
+		return html;
 	}
 
 	reloadApp(): void {

app/renderer/js/pages/preference/connected-org-section.ts

@@ -1,5 +1,7 @@
 import {ipcRenderer} from 'electron';
 
+import {htmlEscape} from 'escape-goat';
+
 import * as DomainUtil from '../../utils/domain-util';
 import * as t from '../../utils/translation-util';
 
@@ -24,8 +26,8 @@ export default class ConnectedOrgSection extends BaseSection {
 		this.props = props;
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `
+		return htmlEscape`
 			<div class="settings-pane" id="server-settings-pane">
 				<div class="page-title">${t.__('Connected organizations')}</div>
 				<div class="title" id="existing-servers">${t.__('All the connected orgnizations will appear here.')}</div>
@@ -44,10 +46,10 @@ export default class ConnectedOrgSection extends BaseSection {
 	}
 
 	initServers(): void {
-		this.props.$root.innerHTML = '';
+		this.props.$root.textContent = '';
 
 		const servers = DomainUtil.getDomains();
-		this.props.$root.innerHTML = this.template();
+		this.props.$root.innerHTML = this.templateHTML();
 
 		this.$serverInfoContainer = document.querySelector('#server-info-container');
 		this.$existingServers = document.querySelector('#existing-servers');
@@ -57,7 +59,7 @@ export default class ConnectedOrgSection extends BaseSection {
 
 		const noServerText = t.__('All the connected orgnizations will appear here');
 		// Show noServerText if no servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? noServerText : '';
+		this.$existingServers.textContent = servers.length === 0 ? noServerText : '';
 
 		for (const [i, server] of servers.entries()) {
 			new ServerInfoForm({

app/renderer/js/pages/preference/find-accounts.ts

@@ -1,3 +1,5 @@
+import {htmlEscape} from 'escape-goat';
+
 import BaseComponent from '../../components/base';
 import * as LinkUtil from '../../utils/link-util';
 import * as t from '../../utils/translation-util';
@@ -16,8 +18,8 @@ export default class FindAccounts extends BaseComponent {
 		this.props = props;
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `
+		return htmlEscape`
 			<div class="settings-card certificate-card">
 				<div class="certificate-input">
 					<div>${t.__('Organization URL')}</div>
@@ -31,7 +33,7 @@ export default class FindAccounts extends BaseComponent {
 	}
 
 	init(): void {
-		this.$findAccounts = this.generateNodeFromTemplate(this.template());
+		this.$findAccounts = this.generateNodeFromHTML(this.templateHTML());
 		this.props.$root.append(this.$findAccounts);
 		this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button');
 		this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;

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

@@ -2,6 +2,7 @@ import {ipcRenderer, remote, OpenDialogOptions} from 'electron';
 import path from 'path';
 
 import Tagify from '@yaireo/tagify';
+import {htmlEscape} from 'escape-goat';
 import fs from 'fs-extra';
 import ISO6391 from 'iso-639-1';
 
@@ -26,8 +27,8 @@ export default class GeneralSection extends BaseSection {
 		this.props = props;
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `
+		return htmlEscape`
             <div class="settings-pane">
                 <div class="title">${t.__('Appearance')}</div>
                 <div id="appearance-option-settings" class="settings-card">
@@ -157,7 +158,7 @@ export default class GeneralSection extends BaseSection {
 	}
 
 	init(): void {
-		this.props.$root.innerHTML = this.template();
+		this.props.$root.innerHTML = this.templateHTML();
 		this.updateTrayOption();
 		this.updateBadgeOption();
 		this.updateSilentOption();
@@ -399,8 +400,8 @@ export default class GeneralSection extends BaseSection {
 
 	setLocale(): void {
 		const langDiv: HTMLSelectElement = document.querySelector('.lang-div');
-		const langList = this.generateSelectTemplate(supportedLocales, 'lang-menu');
+		const langListHTML = this.generateSelectHTML(supportedLocales, 'lang-menu');
-		langDiv.innerHTML += langList;
+		langDiv.innerHTML += langListHTML;
 		// `langMenu` is the select-option dropdown menu formed after executing the previous command
 		const langMenu: HTMLSelectElement = document.querySelector('.lang-menu');
 
@@ -516,7 +517,7 @@ export default class GeneralSection extends BaseSection {
 			const note: HTMLElement = document.querySelector('#note');
 			note.append(t.__('You can select a maximum of 3 languages for spellchecking.'));
 			const spellDiv: HTMLElement = document.querySelector('#spellcheck-langs');
-			spellDiv.innerHTML += `
+			spellDiv.innerHTML += htmlEscape`
 				<div class="setting-description">${t.__('Spellchecker Languages')}</div>
 				<input name='spellcheck' placeholder='Enter Languages'>`;
 
@@ -556,7 +557,7 @@ export default class GeneralSection extends BaseSection {
 				}
 			});
 
-			const configuredLanguages: string[] = ConfigUtil.getConfigItem('spellcheckerLanguages').map((code: string) => [...languagePairs].filter(pair => (pair[1] === code))[0][0]);
+			const configuredLanguages: string[] = ConfigUtil.getConfigItem('spellcheckerLanguages').map((code: string) => [...languagePairs].find(pair => (pair[1] === code))[0]);
 			tagify.addTags(configuredLanguages);
 
 			tagField.addEventListener('change', event => {

app/renderer/js/pages/preference/nav.ts

@@ -1,3 +1,5 @@
+import {htmlEscape} from 'escape-goat';
+
 import BaseComponent from '../../components/base';
 import * as t from '../../utils/translation-util';
 
@@ -17,29 +19,29 @@ export default class PreferenceNav extends BaseComponent {
 		this.init();
 	}
 
-	template(): string {
+	templateHTML(): string {
-		let navItemsTemplate = '';
+		let navItemsHTML = '';
 		for (const navItem of this.navItems) {
-			navItemsTemplate += `<div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>`;
+			navItemsHTML += htmlEscape`<div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>`;
 		}
 
-		return `
+		return htmlEscape`
 			<div>
 				<div id="settings-header">${t.__('Settings')}</div>
-				<div id="nav-container">${navItemsTemplate}</div>
+				<div id="nav-container">` + navItemsHTML + htmlEscape`</div>
 			</div>
 		`;
 	}
 
 	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
+		this.$el = this.generateNodeFromHTML(this.templateHTML());
 		this.props.$root.append(this.$el);
 		this.registerListeners();
 	}
 
 	registerListeners(): void {
 		for (const navItem of this.navItems) {
-			const $item = document.querySelector(`#nav-${navItem}`);
+			const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`);
 			$item.addEventListener('click', () => {
 				this.props.onItemSelected(navItem);
 			});
@@ -57,12 +59,12 @@ export default class PreferenceNav extends BaseComponent {
 	}
 
 	activate(navItem: string): void {
-		const $item = document.querySelector(`#nav-${navItem}`);
+		const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`);
 		$item.classList.add('active');
 	}
 
 	deactivate(navItem: string): void {
-		const $item = document.querySelector(`#nav-${navItem}`);
+		const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`);
 		$item.classList.remove('active');
 	}
 }

app/renderer/js/pages/preference/network-section.ts

@@ -1,5 +1,7 @@
 import {ipcRenderer} from 'electron';
 
+import {htmlEscape} from 'escape-goat';
+
 import * as ConfigUtil from '../../utils/config-util';
 import * as t from '../../utils/translation-util';
 
@@ -21,8 +23,8 @@ export default class NetworkSection extends BaseSection {
 		this.props = props;
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `
+		return htmlEscape`
             <div class="settings-pane">
                 <div class="title">${t.__('Proxy')}</div>
                 <div id="appearance-option-settings" class="settings-card">
@@ -59,7 +61,7 @@ export default class NetworkSection extends BaseSection {
 	}
 
 	init(): void {
-		this.props.$root.innerHTML = this.template();
+		this.props.$root.innerHTML = this.templateHTML();
 		this.$proxyPAC = document.querySelector('#proxy-pac-option .setting-input-value');
 		this.$proxyRules = document.querySelector('#proxy-rules-option .setting-input-value');
 		this.$proxyBypass = document.querySelector('#proxy-bypass-option .setting-input-value');

app/renderer/js/pages/preference/new-server-form.ts

@@ -1,5 +1,7 @@
 import {ipcRenderer, remote} from 'electron';
 
+import {htmlEscape} from 'escape-goat';
+
 import BaseComponent from '../../components/base';
 import * as DomainUtil from '../../utils/domain-util';
 import * as LinkUtil from '../../utils/link-util';
@@ -22,8 +24,8 @@ export default class NewServerForm extends BaseComponent {
 		this.props = props;
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `
+		return htmlEscape`
 			<div class="server-input-container">
 				<div class="title">${t.__('Organization URL')}</div>
 				<div class="add-server-info-row">
@@ -56,20 +58,20 @@ export default class NewServerForm extends BaseComponent {
 	}
 
 	initForm(): void {
-		this.$newServerForm = this.generateNodeFromTemplate(this.template());
+		this.$newServerForm = this.generateNodeFromHTML(this.templateHTML());
 		this.$saveServerButton = this.$newServerForm.querySelector('#connect');
-		this.props.$root.innerHTML = '';
+		this.props.$root.textContent = '';
 		this.props.$root.append(this.$newServerForm);
 		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
 	}
 
 	async submitFormHandler(): Promise<void> {
-		this.$saveServerButton.innerHTML = 'Connecting...';
+		this.$saveServerButton.textContent = 'Connecting...';
 		let serverConf;
 		try {
 			serverConf = await DomainUtil.checkDomain(this.$newServerUrl.value);
 		} catch (error) {
-			this.$saveServerButton.innerHTML = 'Connect';
+			this.$saveServerButton.textContent = 'Connect';
 			await dialog.showMessageBox({
 				type: 'error',
 				message: error.toString(),

app/renderer/js/pages/preference/server-info-form.ts

@@ -1,5 +1,7 @@
 import {remote, ipcRenderer} from 'electron';
 
+import {htmlEscape} from 'escape-goat';
+
 import * as Messages from '../../../../resources/messages';
 import BaseComponent from '../../components/base';
 import * as DomainUtil from '../../utils/domain-util';
@@ -26,8 +28,8 @@ export default class ServerInfoForm extends BaseComponent {
 		this.props = props;
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `
+		return htmlEscape`
 			<div class="settings-card">
 				<div class="server-info-left">
 					<img class="server-info-icon" src="${this.props.server.icon}"/>
@@ -56,7 +58,7 @@ export default class ServerInfoForm extends BaseComponent {
 	}
 
 	initForm(): void {
-		this.$serverInfoForm = this.generateNodeFromTemplate(this.template());
+		this.$serverInfoForm = this.generateNodeFromHTML(this.templateHTML());
 		this.$serverInfoAlias = this.$serverInfoForm.querySelectorAll('.server-info-alias')[0];
 		this.$serverIcon = this.$serverInfoForm.querySelectorAll('.server-info-icon')[0];
 		this.$deleteServerButton = this.$serverInfoForm.querySelectorAll('.server-delete-action')[0];

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

@@ -1,3 +1,5 @@
+import {htmlEscape} from 'escape-goat';
+
 import * as t from '../../utils/translation-util';
 
 import BaseSection from './base-section';
@@ -15,16 +17,16 @@ export default class ServersSection extends BaseSection {
 		this.props = props;
 	}
 
-	template(): string {
+	templateHTML(): string {
-		return `
+		return htmlEscape`
-		<div class="add-server-modal">
+			<div class="add-server-modal">
-			<div class="modal-container">
+				<div class="modal-container">
-				<div class="settings-pane" id="server-settings-pane">
+					<div class="settings-pane" id="server-settings-pane">
-					<div class="page-title">${t.__('Add a Zulip organization')}</div>
+						<div class="page-title">${t.__('Add a Zulip organization')}</div>
-					<div id="new-server-container"></div>
+						<div id="new-server-container"></div>
+					</div>
 				</div>
 			</div>
-		</div>
 		`;
 	}
 
@@ -33,9 +35,9 @@ export default class ServersSection extends BaseSection {
 	}
 
 	initServers(): void {
-		this.props.$root.innerHTML = '';
+		this.props.$root.textContent = '';
 
-		this.props.$root.innerHTML = this.template();
+		this.props.$root.innerHTML = this.templateHTML();
 		this.$newServerContainer = document.querySelector('#new-server-container');
 
 		this.initNewServerForm();

app/renderer/js/pages/preference/shortcuts-section.ts

@@ -1,3 +1,5 @@
+import {htmlEscape} from 'escape-goat';
+
 import * as LinkUtil from '../../utils/link-util';
 import * as t from '../../utils/translation-util';
 
@@ -14,14 +16,14 @@ export default class ShortcutsSection extends BaseSection {
 		this.props = props;
 	}
 
-	// TODO - Deduplicate templateMac and templateWinLin functions. In theory
+	// TODO - Deduplicate templateMacHTML and templateWinLinHTML functions. In theory
 	// they both should be the same the only thing different should be the userOSKey
 	// variable but there seems to be inconsistences between both function, one has more
 	// lines though one may just be using more new lines and other thing is the use of +.
-	templateMac(): string {
+	templateMacHTML(): string {
 		const userOSKey = '⌘';
 
-		return `
+		return htmlEscape`
 						<div class="settings-pane">
 						<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}:  </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
 							<div class="title">${t.__('Application Shortcuts')}</div>
@@ -182,10 +184,10 @@ export default class ShortcutsSection extends BaseSection {
 		`;
 	}
 
-	templateWinLin(): string {
+	templateWinLinHTML(): string {
 		const userOSKey = 'Ctrl';
 
-		return `
+		return htmlEscape`
 						<div class="settings-pane">
 						<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}:  </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
 							<div class="title">${t.__('Application Shortcuts')}</div>
@@ -340,7 +342,7 @@ export default class ShortcutsSection extends BaseSection {
 
 	init(): void {
 		this.props.$root.innerHTML = (process.platform === 'darwin') ?
-			this.templateMac() : this.templateWinLin();
+			this.templateMacHTML() : this.templateWinLinHTML();
 		this.openHotkeysExternalLink();
 	}
 }

app/renderer/js/utils/common-util.ts

@@ -1,8 +0,0 @@
-// Unescape already encoded/escaped strings
-export function decodeString(stringInput: string): string {
-	const parser = new DOMParser();
-	const dom = parser.parseFromString(
-		'<!doctype html><body>' + stringInput,
-		'text/html');
-	return dom.body.textContent;
-}

app/renderer/js/utils/link-util.ts

@@ -3,7 +3,7 @@ import fs from 'fs';
 import os from 'os';
 import path from 'path';
 
-import escape from 'escape-html';
+import {htmlEscape} from 'escape-goat';
 
 export function isUploadsUrl(server: string, url: URL): boolean {
 	return url.origin === server && url.pathname.startsWith('/user_uploads/');
@@ -19,12 +19,12 @@ export async function openBrowser(url: URL): Promise<void> {
 			path.join(os.tmpdir(), 'zulip-redirect-')
 		);
 		const file = path.join(dir, 'redirect.html');
-		fs.writeFileSync(file, `\
+		fs.writeFileSync(file, htmlEscape`\
 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8" />
-        <meta http-equiv="Refresh" content="0; url=${escape(url.href)}" />
+        <meta http-equiv="Refresh" content="0; url=${url.href}" />
         <title>Redirecting</title>
         <style>
             html {
@@ -33,7 +33,7 @@ export async function openBrowser(url: URL): Promise<void> {
         </style>
     </head>
     <body>
-        <p>Opening <a href="${escape(url.href)}">${escape(url.href)}</a>…</p>
+        <p>Opening <a href="${url.href}">${url.href}</a>…</p>
     </body>
 </html>
 `);

app/renderer/js/utils/reconnect-util.ts

@@ -1,6 +1,7 @@
 import {ipcRenderer} from 'electron';
 
 import backoff from 'backoff';
+import {htmlEscape} from 'escape-goat';
 
 import type WebView from '../components/webview';
 
@@ -60,7 +61,7 @@ export default class ReconnectUtil {
 		logger.log('There is no internet connection, try checking network cables, modem and router.');
 		const errorMessageHolder = document.querySelector('#description');
 		if (errorMessageHolder) {
-			errorMessageHolder.innerHTML = `
+			errorMessageHolder.innerHTML = htmlEscape`
 						<div>Your internet connection doesn't seem to work properly!</div>
 						<div>Verify that it works and then click try again.</div>`;
 		}

changelog.md

@@ -2,6 +2,25 @@
 
 All notable changes to the Zulip desktop app are documented in this file.
 
+### v5.4.2 --2020-08-12
+
+**Potential Fixes**:
+* macOS: Electron 9 upgrade is a potential fix for the ['grey screen issue'](https://chat.zulip.org/#narrow/stream/9-issues/topic/Grey.20Window.20on.20macOS) reported.
+
+**Dependencies**:
+* Upgrade all dependencies, including Electron 9.2.0.
+
+### v5.4.1-beta --2020-07-29
+
+**Fixes**:
+* Resized the large application icon on macOS dock to be coherent with other icons.
+
+**Potential Fixes**:
+* macOS: Electron 9 upgrade is a potential fix for the ['grey screen issue'](https://chat.zulip.org/#narrow/stream/9-issues/topic/Grey.20Window.20on.20macOS) reported.
+
+**Dependencies**:
+* Upgrade all dependencies, including Electron 9.1.1.
+
 ### v5.4.0 --2020-07-21
 
 **New features**:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "5.4.1-beta",
+  "version": "5.4.3",
   "main": "./app/main",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
@@ -146,20 +146,20 @@
   ],
   "dependencies": {
     "@electron-elements/send-feedback": "^2.0.3",
-    "@sentry/electron": "^1.5.0",
+    "@sentry/electron": "^2.0.0",
-    "@yaireo/tagify": "^3.15.4",
+    "@yaireo/tagify": "^3.17.10",
     "adm-zip": "^0.4.16",
     "auto-launch": "^5.0.5",
     "backoff": "^2.5.0",
     "electron-is-dev": "^1.2.0",
-    "electron-log": "^4.2.2",
+    "electron-log": "^4.2.4",
-    "electron-updater": "^4.3.1",
+    "electron-updater": "^4.3.4",
     "electron-window-state": "^5.0.3",
-    "escape-html": "^1.0.3",
+    "escape-goat": "^3.0.0",
     "fs-extra": "^9.0.1",
-    "get-stream": "^5.1.0",
+    "get-stream": "^6.0.0",
-    "i18n": "^0.10.0",
+    "i18n": "^0.13.2",
-    "iso-639-1": "^2.1.3",
+    "iso-639-1": "^2.1.4",
     "nan": "^2.14.0",
     "node-json-db": "^1.1.0",
     "semver": "^7.3.2"
@@ -171,16 +171,13 @@
     "@types/adm-zip": "^0.4.33",
     "@types/auto-launch": "^5.0.1",
     "@types/backoff": "^2.5.1",
-    "@types/escape-html": "^1.0.0",
     "@types/fs-extra": "^9.0.1",
-    "@types/i18n": "^0.8.6",
+    "@types/i18n": "^0.8.7",
-    "@types/node": "^14.0.25",
+    "@types/node": "^14.6.4",
     "@types/requestidlecallback": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^3.7.0",
-    "@typescript-eslint/parser": "^3.7.0",
     "devtron": "^1.4.0",
     "dotenv": "^8.2.0",
-    "electron": "^9.1.1",
+    "electron": "^9.3.0",
     "electron-builder": "^22.8.0",
     "electron-connect": "^0.6.3",
     "electron-notarize": "^1.0.0",
@@ -193,11 +190,11 @@
     "pre-commit": "^1.2.2",
     "rimraf": "^3.0.2",
     "spectron": "^11.1.0",
-    "stylelint": "^13.6.1",
+    "stylelint": "^13.7.0",
     "tap-colorize": "^1.2.0",
     "tape": "^5.0.1",
-    "typescript": "^3.9.7",
+    "typescript": "^4.0.2",
-    "xo": "^0.32.1"
+    "xo": "^0.33.1"
   },
   "xo": {
     "rules": {

tests/index.js

@@ -10,7 +10,7 @@ test('app runs', async t => {
 	try {
 		await setup.waitForLoad(app, t);
 		await app.client.windowByIndex(1); // Focus on webview
-		await app.client.waitForExist('//*[@id="connect"]'); // Id of the connect button
+		await (await app.client.$('//*[@id="connect"]')).waitForExist(); // Id of the connect button
 		await setup.endTest(app, t);
 	} catch (error) {
 		await setup.endTest(app, t, error || 'error');

tests/setup.js

@@ -67,6 +67,7 @@ async function wait(ms) {
 
 // Quit the app, end the test, either in success (!err) or failure (err)
 async function endTest(app, t, err) {
+	await app.client.windowByIndex(0);
 	await app.stop();
 	t.end(err);
 }

tests/test-add-organization.js

@@ -10,12 +10,12 @@ test('add-organization', async t => {
 	try {
 		await setup.waitForLoad(app, t);
 		await app.client.windowByIndex(1); // Focus on webview
-		await app.client.setValue('.setting-input-value', 'chat.zulip.org');
+		await (await app.client.$('.setting-input-value')).setValue('chat.zulip.org');
-		await app.client.click('#connect');
+		await (await app.client.$('#connect')).click();
 		await setup.wait(5000);
 		await app.client.windowByIndex(0); // Switch focus back to main win
 		await app.client.windowByIndex(1); // Switch focus back to org webview
-		await app.client.waitForExist('//*[@id="id_username"]');
+		await (await app.client.$('//*[@id="id_username"]')).waitForExist();
 		await setup.endTest(app, t);
 	} catch (error) {
 		await setup.endTest(app, t, error || 'error');

tests/test-new-organization.js

@@ -12,7 +12,7 @@ test('new-org-link', async t => {
 	try {
 		await setup.waitForLoad(app, t);
 		await app.client.windowByIndex(1); // Focus on webview
-		await app.client.click('#open-create-org-link'); // Click on new org link button
+		await (await app.client.$('#open-create-org-link')).click(); // Click on new org link button
 		await setup.wait(5000);
 		await setup.endTest(app, t);
 	} catch (error) {