electron: Fix app not rendering colors properly.

There is a bug in v2 of electron which causes
pale colors. Resetting the color profile to srgb
fixes this problem. This is a temporary solution
until electron officially fixes this.

Fixes: #497.

.travis.yml

@@ -15,7 +15,7 @@ addons:
 
 language: node_js
 node_js:
-- '6'
+- '8'
 
 before_install:
   - ./scripts/travis-xvfb.sh

app/main/index.js

@@ -131,6 +131,9 @@ function createMainWindow() {
 // Decrease load on GPU (experimental)
 app.disableHardwareAcceleration();
 
+// Temporary fix for Electron render colors differently
+app.commandLine.appendSwitch('force-color-profile', 'srgb');
+
 // eslint-disable-next-line max-params
 app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
 	event.preventDefault();

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "2.2.0-beta",
+  "version": "2.3.1",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
   "copyright": "Kandra Labs, Inc.",
@@ -27,6 +27,7 @@
   ],
   "dependencies": {
     "@electron-elements/send-feedback": "1.0.7",
+    "escape-html": "1.0.3",
     "auto-launch": "5.0.5",
     "electron-is-dev": "0.3.0",
     "electron-log": "2.2.14",

app/renderer/css/preference.css

@@ -557,6 +557,22 @@ input.toggle-round:checked+label:after {
     background: #329588;
 }
 
+.tip {
+    background-color: hsl(46,63%,95%);
+    border: 1px solid hsl(46,63%,84%);
+    border-radius: 4px;
+}
+
+.md-14 {
+    font-size: 14px;
+    vertical-align: middle;
+    padding-right: 6px;
+}
+
+#open-hotkeys-link {
+    text-decoration: underline;
+    cursor: pointer;
+}
 
 /* responsive grid */
 

app/renderer/js/main.js

@@ -227,7 +227,7 @@ class ServerManagerView {
 	}
 
 	onHover(index, serverName) {
-		this.$serverIconTooltip[index].innerHTML = serverName;
+		this.$serverIconTooltip[index].innerText = serverName;
 		this.$serverIconTooltip[index].removeAttribute('style');
 		// To handle position of servers' tooltip due to scrolling of list of organizations
 		// This could not be handled using CSS, hence the top of the tooltip is made same

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

@@ -1,6 +1,7 @@
 'use strict';
 
 const BaseSection = require(__dirname + '/base-section.js');
+const shell = require('electron').shell;
 
 class ShortcutsSection extends BaseSection {
 	constructor(props) {
@@ -159,6 +160,7 @@ class ShortcutsSection extends BaseSection {
                 </table>
                 <div class="setting-control"></div>
               </div>
+              <div class="settings-card tip"><b><i class="material-icons md-14">settings</i>Tip: </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link">keyboard shortcuts</span>.</div>
             </div>
 		`;
 	}
@@ -298,13 +300,22 @@ class ShortcutsSection extends BaseSection {
                 </table>
                 <div class="setting-control"></div>
               </div>
+              <div class="tip"><b><i class="material-icons md-14">lightbulb_outline</i>Tip: </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link">keyboard shortcuts</span>.</div>
             </div>
 		`;
 	}
 
+	openHotkeysExternalLink() {
+		const link = 'https://zulipchat.com/help/keyboard-shortcuts';
+		const externalCreateNewOrgEl = document.getElementById('open-hotkeys-link');
+		externalCreateNewOrgEl.addEventListener('click', () => {
+			shell.openExternal(link);
+		});
+	}
 	init() {
 		this.props.$root.innerHTML = (process.platform === 'darwin') ?
 			this.templateMac() : this.templateWinLin();
+		this.openHotkeysExternalLink();
 	}
 }
 

app/renderer/js/utils/domain-util.js

@@ -5,6 +5,8 @@ const fs = require('fs');
 const path = require('path');
 const JsonDB = require('node-json-db');
 const request = require('request');
+const escape = require('escape-html');
+
 const Logger = require('./logger-util');
 
 const logger = new Logger({
@@ -188,7 +190,7 @@ class DomainUtil {
 							// Following check handles both the cases
 							icon: data.realm_icon.startsWith('/') ? data.realm_uri + data.realm_icon : data.realm_icon,
 							url: data.realm_uri,
-							alias: data.realm_name
+							alias: escape(data.realm_name)
 						});
 					}
 				} else {

appveyor.yml

@@ -8,7 +8,7 @@ cache:
   - node_modules
 
 install:
-  - ps: Install-Product node 6 x64
+  - ps: Install-Product node 8 x64
   - git reset --hard HEAD
   - npm install npm -g
   - node --version
@@ -21,4 +21,4 @@ build: off
 
 test_script:
   - npm run test
-  - npm run test-e2e
+  # - npm run test-e2e

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zulip",
   "productName": "Zulip",
-  "version": "2.2.0-beta",
+  "version": "2.3.1",
   "main": "./app/main",
   "description": "Zulip Desktop App",
   "license": "Apache-2.0",
@@ -88,8 +88,8 @@
         }
       ],
       "window": {
-          "width": 500,
+        "width": 500,
-          "height": 500
+        "height": 500
       }
     },
     "win": {
@@ -123,12 +123,12 @@
     "assert": "1.4.1",
     "cp-file": "^5.0.0",
     "devtron": "1.4.0",
-    "electron": "2.0.0",
+    "electron": "2.0.1",
     "electron-builder": "20.13.4",
     "electron-connect": "0.6.2",
     "electron-debug": "1.4.0",
     "google-translate-api": "2.3.0",
-    "gulp": "3.9.1",
+    "gulp": "^4.0.0",
     "gulp-tape": "0.0.9",
     "is-ci": "^1.0.10",
     "nodemon": "^1.14.11",

scripts/travis-build-test.sh

@@ -15,6 +15,6 @@ fi
 
 npm run test
 
-if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then
+# if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then
-    npm run test-e2e
+#     npm run test-e2e
-fi
+# fi