Merge pull request #764 from Bakke/electron

Electron (Atom-Shell) support

.gitignore

@@ -1,2 +1,6 @@
 bower_components/
 node_modules/
+
+# Electron stuff
+fonts/
+Glowing\ Bear-*/

README.md

@@ -14,7 +14,15 @@ Now point your browser to the [Glowing Bear](http://www.glowing-bear.org)! If yo
 
 Please note that the above instructions set up an *unencrypted* relay, and all your data will be transmitted in clear. Therefore, we strongly recommend that you set up encryption if you want to keep using Glowing Bear. We've written [a detailed guide on how to set up a trusted secure relay](https://4z2.de/2014/07/06/weechat-trusted-relay) for you.
 
-You can run Glowing Bear in many ways: use it like any other webpage, as an app in Firefox (choose "Install app" on the landing page) or Chrome ("Tools", then "Create application shortcuts"), or a full-screen Chrome app on Android ("Add to homescreen"). We also provide an [Android app](https://play.google.com/store/apps/details?id=com.glowing_bear) that you can install from the Google Play Store, and a [Firefox OS app](https://marketplace.firefox.com/app/glowing-bear/) in the Firefox Marketplace.
+You can run Glowing Bear in many ways:
+
+ * like any other webpage
+ * as an app in Firefox (choose "Install app" on the landing page)
+ * Chrome app ("Tools", then "Create application shortcuts")
+ * Android Chrome app a full-screen experience ("Add to homescreen").
+ * [Android app](https://play.google.com/store/apps/details?id=com.glowing_bear) that you can install from the Google Play Store
+ * [Firefox OS app](https://marketplace.firefox.com/app/glowing-bear/) in the Firefox Marketplace.
+ * Electron app, for Windows, Linux and MacOSX. ```npm install; npm install electron-packager; npm run build-electron-{windows, darwin, linux}```
 
 <a href="https://play.google.com/store/apps/details?id=com.glowing_bear"><img alt="Android app on Google Play" src="/assets/img/badge_playstore.png" /></a><a href="https://marketplace.firefox.com/app/glowing-bear/"><img alt="Firefox OS app in the Firefox Marketplace" src="/assets/img/badge_firefoxos.png" /></a>
 

bower.json

@@ -12,6 +12,9 @@
     "angular-touch": "1.4.x",
     "angular-loader": "1.4.x",
     "angular-mocks": "1.4.x",
-    "html5-boilerplate": "~4.3.0"
+    "html5-boilerplate": "~4.3.0",
+    "underscore": "~1.7",
+    "bootstrap": "~3.1",
+    "emojione": "~2.1"
   }
 }

electron-globals.js

@@ -0,0 +1,19 @@
+/**
+ * Global functions for electron app
+ */
+var ipc = require('electron').ipcRenderer;
+
+// Set app bagde
+var setElectronBadge = function(value) {
+    // Check ipc
+    if (ipc && typeof ipc.send === 'function') {
+        // Send new badge value
+        ipc.send('badge', value);
+    }
+};
+
+// Export global variables and functions
+global.setElectronBadge = setElectronBadge;
+
+// Let Glowing Bear know it's running as an electron app
+window.is_electron = 1;

electron-main.js

@@ -0,0 +1,219 @@
+(function() {
+    'use strict';
+    const electron = require('electron');
+    const app = electron.app;  // Module to control application life.
+    const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.
+
+    const ipcMain = require('electron').ipcMain;
+    const nativeImage = require('electron').nativeImage;
+    const Menu = require('electron').Menu;
+
+    var template;
+
+    template = [
+    {
+        label: 'Edit',
+        submenu: [
+        {
+            label: 'Undo',
+            accelerator: 'CmdOrCtrl+Z',
+            role: 'undo'
+        },
+        {
+            label: 'Redo',
+            accelerator: 'Shift+CmdOrCtrl+Z',
+            role: 'redo'
+        },
+        {
+            type: 'separator'
+        },
+        {
+            label: 'Cut',
+            accelerator: 'CmdOrCtrl+X',
+            role: 'cut'
+        },
+        {
+            label: 'Copy',
+            accelerator: 'CmdOrCtrl+C',
+            role: 'copy'
+        },
+        {
+            label: 'Paste',
+            accelerator: 'CmdOrCtrl+V',
+            role: 'paste'
+        },
+        {
+            label: 'Select All',
+            accelerator: 'CmdOrCtrl+A',
+            role: 'selectall'
+        },
+        ]
+    },
+    {
+        label: 'View',
+        submenu: [
+        {
+            label: 'Reload',
+            accelerator: 'CmdOrCtrl+R',
+            click: function(item, focusedWindow) {
+                if (focusedWindow)
+                    focusedWindow.reload();
+            }
+        },
+        {
+            label: 'Toggle Full Screen',
+            accelerator: (function() {
+                if (process.platform == 'darwin')
+                    return 'Ctrl+Command+F';
+                else
+                    return 'F11';
+            })(),
+            click: function(item, focusedWindow) {
+                if (focusedWindow)
+                    focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
+            }
+        },
+        {
+            label: 'Toggle Developer Tools',
+            accelerator: (function() {
+                if (process.platform == 'darwin')
+                    return 'Alt+Command+I';
+                else
+                    return 'Ctrl+Shift+I';
+            })(),
+            click: function(item, focusedWindow) {
+                if (focusedWindow)
+                    focusedWindow.toggleDevTools();
+            }
+        },
+        ]
+    },
+    {
+        label: 'Window',
+        role: 'window',
+        submenu: [
+        {
+            label: 'Minimize',
+            accelerator: 'CmdOrCtrl+M',
+            role: 'minimize'
+        },
+        {
+            label: 'Close',
+            accelerator: 'CmdOrCtrl+W',
+            role: 'close'
+        },
+        ]
+    },
+    {
+        label: 'Help',
+        role: 'help',
+        submenu: [
+        {
+            label: 'Learn More',
+            click: function() { require('electron').shell.openExternal('https://github.com/glowing-bear/glowing-bear'); }
+        },
+        ]
+    },
+    ];
+
+    if (process.platform == 'darwin') {
+        var name = app.getName();
+        template.unshift({
+            label: name,
+            submenu: [
+            {
+                label: 'About ' + name,
+                role: 'about'
+            },
+            {
+                type: 'separator'
+            },
+            {
+                label: 'Services',
+                role: 'services',
+                submenu: []
+            },
+            {
+                type: 'separator'
+            },
+            {
+                label: 'Hide ' + name,
+                accelerator: 'Command+H',
+                role: 'hide'
+            },
+            {
+                label: 'Hide Others',
+                accelerator: 'Command+Alt+H',
+                role: 'hideothers'
+            },
+            {
+                label: 'Show All',
+                role: 'unhide'
+            },
+            {
+                type: 'separator'
+            },
+            {
+                label: 'Quit',
+                accelerator: 'Command+Q',
+                click: function() { app.quit(); }
+            },
+            ]
+        });
+        // Window menu.
+        template[3].submenu.push(
+                {
+                    type: 'separator'
+                },
+                {
+                    label: 'Bring All to Front',
+                    role: 'front'
+                }
+                );
+    }
+
+    // Keep a global reference of the window object, if you don't, the window will
+    // be closed automatically when the JavaScript object is garbage collected.
+    var mainWindow = null;
+
+    app.on('browser-window-focus', function(e, w) {
+        w.webContents.send('browser-window-focus');
+    });
+
+    app.on('ready', function() {
+
+        var menu = Menu.buildFromTemplate(template);
+        Menu.setApplicationMenu(menu);
+
+        mainWindow = new BrowserWindow({width: 1280, height: 800, 'min-width': 1024, 'min-height': 600, 'autoHideMenuBar': true, 'web-security': true, 'java': false, 'accept-first-mouse': true, defaultEncoding: 'UTF-8', 'icon':'file://'+__dirname + '/assets/img/favicon.png'});
+        mainWindow.loadURL('file://' + __dirname + '/electron-start.html');
+        mainWindow.focus();
+
+        // Listen for badge changes
+        ipcMain.on('badge', function(event, arg) {
+            if (process.platform === "darwin") {
+                app.dock.setBadge(String(arg));
+            }
+            else if (process.platform === "win32") {
+                let n = parseInt(arg, 10);
+                // Only show notifications with number
+                if (isNaN(n)) {
+                    return;
+                }
+                if (n > 0) {
+                    mainWindow.setOverlayIcon(__dirname + '/assets/img/favicon.ico', String(arg));
+                } else {
+                    mainWindow.setOverlayIcon(null, '');
+                }
+            }
+        });
+
+        mainWindow.on('devtools-opened', function() {
+            mainWindow.webContents.executeJavaScript("document.getElementById('glowingbear').openDevTools();");
+        });
+
+        mainWindow.on('closed', function() {
+            app.quit();
+        });
+    });
+})();

electron-start.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script>
+onload = function() {
+    const ipc= require('electron').ipcRenderer;
+    const remote = require('electron').remote;
+    const nativeImage = require('electron').nativeImage;
+    const shell = require('electron').shell;
+
+    var webview = document.getElementById("glowingbear");
+
+    var handleconsole = function(e) {
+        console.log("webview: " + e.message);
+    }
+    var handlenewwindow = function(e) {
+        shell.openExternal(e.url);
+    }
+    var handletitleset = function(e) {
+        document.title = e.title;
+    }
+    webview.addEventListener("console-message", handleconsole);
+    webview.addEventListener("new-window", handlenewwindow);
+    webview.addEventListener("page-title-set", handletitleset);
+
+    ipc.on('browser-window-focus', function() {
+        setTimeout(function() { webview.focus(); }, 0);
+        setTimeout(function() { webview.executeJavaScript("document.getElementById(\"sendMessage\").focus();") }, 0);
+    });
+}
+    </script>
+  </head>
+  <body>
+    <webview preload="electron-globals.js" id="glowingbear" src="index.html" style="position:fixed; top:0; left:0; bottom:0; right:0;"></webview>
+  </body>
+</html>

electron.makefile

@@ -0,0 +1,27 @@
+# Common flags for electron-packager on all platforms
+ELECTRON_COMMON=. "Glowing Bear" --overwrite --version-string.FileDescription="Glowing Bear" --ignore=node_modules --ignore=test --ignore=bower_components
+
+# fetch dependencies for local installation
+bower:
+	bower install
+
+# copy dependencies from bower_components to the correct place
+copylocal:
+	find bower_components \( -name "*min.js" -o -name "*min.css" \) -exec cp {} 3rdparty \;
+	cp -r bower_components/bootstrap/fonts .
+	cp bower_components/emojione/assets/sprites/emojione.sprites.svg 3rdparty
+
+# modify index.html to use local files
+uselocal: copylocal
+	sed -i.bak 's,https://cdnjs.cloudflare.com/ajax/libs/[^\"]*/,3rdparty/,g' index.html
+	sed -i.bak 's, integrity=\".*\" crossorigin=\"anonymous\",,' index.html
+
+# build the electron app for various platforms
+build-electron-windows: uselocal
+	electron-packager ${ELECTRON_COMMON} --platform=win32 --arch=ia32 --version=1.0.0 --icon=assets/img/favicon.ico --asar=true
+
+build-electron-darwin: uselocal
+	electron-packager ${ELECTRON_COMMON} --platform=darwin --arch=x64 --version=1.0.0 --icon=assets/img/glowing-bear.icns
+
+build-electron-linux: uselocal
+	electron-packager ${ELECTRON_COMMON} --platform=linux --arch=x64 --version=1.0.0 --icon=assets/img/favicon.ico

js/glowingbear.js

@@ -104,6 +104,12 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         }
     })();
 
+    if (window.is_electron) {
+        // Use packaged emojione sprite in the electron app
+        emojione.imageType = 'svg';
+        emojione.sprites = true;
+        emojione.imagePathSVGSprites = './3rdparty/emojione.sprites.svg';
+    }
 
     $rootScope.isWindowFocused = function() {
         if (typeof $scope.documentHidden === "undefined") {
@@ -378,6 +384,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
             notifications.updateFavico();
         } else {
             $rootScope.favico.reset();
+            notifications.updateBadge('');
         }
     });
 

js/notifications.js

@@ -24,7 +24,8 @@ weechat.factory('notifications', ['$rootScope', '$log', 'models', 'settings', fu
             }
         }
 
-        if ('serviceWorker' in navigator) {
+        // Check for serviceWorker support, and also disable serviceWorker if we're running in electron process, since that's just problematic and not necessary, since gb then already is in a separate process
+        if ('serviceWorker' in navigator && window.is_electron !== 1) {
             $log.info('Service Worker is supported');
             navigator.serviceWorker.register('serviceworker.js').then(function(reg) {
                 $log.info('Service Worker install:', reg);
@@ -140,19 +141,36 @@ weechat.factory('notifications', ['$rootScope', '$log', 'models', 'settings', fu
                     bgColor: '#d00',
                     textColor: '#fff'
             });
+            // Set badge to notifications count
+            updateBadge(notifications);
         } else {
             var unread = unreadCount('unread');
             if (unread === 0) {
                 $rootScope.favico.reset();
+                // Remove badge form app icon
+                updateBadge('');
             } else {
                 $rootScope.favico.badge(unread, {
                     bgColor: '#5CB85C',
                     textColor: '#ff0'
                 });
+                // Set app badge to "." when only unread and no notifications
+                updateBadge("•");
             }
         }
     };
 
+    // Update app badge (electron only)
+    var updateBadge = function(value) {
+
+        // Send new value to preloaded global function
+        // if it exists
+        if (typeof setElectronBadge === 'function') {
+            setElectronBadge(value);
+        }
+
+    };
+
     /* Function gets called from bufferLineAdded code if user should be notified */
     var createHighlight = function(buffer, message) {
         var title = '';
@@ -203,6 +221,7 @@ weechat.factory('notifications', ['$rootScope', '$log', 'models', 'settings', fu
         requestNotificationPermission: requestNotificationPermission,
         updateTitle: updateTitle,
         updateFavico: updateFavico,
+        updateBadge: updateBadge,
         createHighlight: createHighlight,
         cancelAll: cancelAll,
         unreadCount: unreadCount

package.json

@@ -4,9 +4,11 @@
   "version": "0.6.0",
   "description": "A web client for Weechat",
   "repository": "https://github.com/glowing-bear/glowing-bear",
+  "main": "electron-main.js",
   "license": "GPLv3",
   "devDependencies": {
     "bower": "^1.3.1",
+    "electron-packager": "^6.0.0",
     "http-server": "^0.6.1",
     "jasmine-core": "^2.4.1",
     "jshint": "^2.5.2",
@@ -31,6 +33,9 @@
     "update-webdriver": "webdriver-manager update",
     "preprotractor": "npm run update-webdriver",
     "protractor": "protractor test/protractor-conf.js",
+    "build-electron-windows": "make -f electron.makefile build-electron-windows",
+    "build-electron-darwin": "make -f electron.makefile build-electron-darwin",
+    "build-electron-linux": "make -f electron.makefile build-electron-linux",
     "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('app/bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
   }
 }