Merge pull request #221 from whiteout-io/dev/WO-707

Dev/wo 707

Gruntfile.js

@@ -159,7 +159,6 @@ module.exports = function(grunt) {
                         'test/unit/util/dialog-test.js',
                         'test/unit/util/connection-doctor-test.js',
                         'test/unit/util/update-handler-test.js',
-                        'test/unit/util/backbutton-handler-test.js',
                         'test/unit/util/status-display-test.js',
                         'test/unit/crypto/pgp-test.js',
                         'test/unit/crypto/crypto-test.js',

README.md

@@ -48,7 +48,7 @@ For development you can start a connect dev server:
 
     grunt dev
 
-Then visit [http://localhost:8580/dist/#/desktop?dev=true](http://localhost:8580/dist/#/desktop?dev=true) for front-end code or [http://localhost:8580/test/unit/](http://localhost:8580/test/unit/) to test JavaScript changes. You can also start a watch task so you don't have rebuild everytime you make a change:
+Then visit [http://localhost:8580/dist/#/account?dev=true](http://localhost:8580/dist/#/account?dev=true) for front-end code or [http://localhost:8580/test/unit/](http://localhost:8580/test/unit/) to test JavaScript changes. You can also start a watch task so you don't have rebuild everytime you make a change:
 
     grunt watch
 

src/js/app.js

@@ -35,8 +35,7 @@ var axe = require('axe-logger'),
     WriteCtrl = require('./controller/app/write'),
     NavigationCtrl = require('./controller/app/navigation'),
     ActionBarCtrl = require('./controller/app/action-bar'),
-    StatusDisplayCtrl = require('./controller/app/status-display'),
+    StatusDisplayCtrl = require('./controller/app/status-display');
-    backButtonUtil = require('./util/backbutton-handler');
 
 // include angular modules
 require('./app-config');
@@ -104,9 +103,10 @@ app.config(function($routeProvider, $animateProvider) {
         templateUrl: 'tpl/login-privatekey-download.html',
         controller: LoginPrivateKeyDownloadCtrl
     });
-    $routeProvider.when('/desktop', {
+    $routeProvider.when('/account', {
         templateUrl: 'tpl/desktop.html',
-        controller: NavigationCtrl
+        controller: NavigationCtrl,
+        reloadOnSearch: false // don't reload controllers in main app when query params change
     });
     $routeProvider.otherwise({
         redirectTo: '/login'
@@ -119,10 +119,6 @@ app.config(function($routeProvider, $animateProvider) {
 app.run(function($rootScope) {
     // global state... inherited to all child scopes
     $rootScope.state = {};
-
-    // attach the back button handler to the root scope
-    backButtonUtil.attachHandler($rootScope);
-
     // attach fastclick
     FastClick.attach(document.body);
 });

src/js/controller/app/about.js

@@ -2,6 +2,10 @@
 
 var AboutCtrl = function($scope, appConfig) {
 
+    //
+    // scope state
+    //
+
     $scope.state.about = {
         toggle: function(to) {
             $scope.state.lightbox = (to) ? 'about' : undefined;
@@ -15,9 +19,6 @@ var AboutCtrl = function($scope, appConfig) {
     $scope.version = appConfig.config.appVersion + ' (beta)';
     $scope.date = new Date();
 
-    //
-    // scope functions
-    //
 };
 
 module.exports = AboutCtrl;

src/js/controller/app/account.js

@@ -6,6 +6,10 @@ var AccountCtrl = function($scope, auth, keychain, pgp, appConfig, download, dia
         return;
     }
 
+    //
+    // scope state
+    //
+
     $scope.state.account = {
         toggle: function(to) {
             $scope.state.lightbox = (to) ? 'account' : undefined;
@@ -46,6 +50,7 @@ var AccountCtrl = function($scope, auth, keychain, pgp, appConfig, download, dia
             });
         });
     };
+
 };
 
 module.exports = AccountCtrl;

src/js/controller/app/action-bar.js

@@ -2,7 +2,11 @@
 
 var JUNK_FOLDER_TYPE = 'Junk';
 
-var ActionBarCtrl = function($scope, email, dialog, statusDisplay) {
+var ActionBarCtrl = function($scope, email, dialog, status) {
+
+    //
+    // scope functions
+    //
 
     /**
      * Move a single message from the currently selected folder to another folder
@@ -15,9 +19,9 @@ var ActionBarCtrl = function($scope, email, dialog, statusDisplay) {
         }
 
         // close read state
-        $scope.state.read.open = false;
+        status.setReading(false);
-
+        // show message
-        statusDisplay.update('Moving message...');
+        status.update('Moving message...');
 
         email.moveMessage({
             folder: currentFolder(),
@@ -28,14 +32,14 @@ var ActionBarCtrl = function($scope, email, dialog, statusDisplay) {
                 // show errors where appropriate
                 if (err.code === 42) {
                     $scope.select(message);
-                    statusDisplay.update('Unable to move message in offline mode!');
+                    status.update('Unable to move message in offline mode!');
                     return;
                 }
-                statusDisplay.update('Error during move!');
+                status.update('Error during move!');
                 dialog.error(err);
                 return;
             }
-            statusDisplay.update('Message moved.');
+            status.update('Message moved.');
             $scope.$apply();
         });
     };
@@ -76,9 +80,8 @@ var ActionBarCtrl = function($scope, email, dialog, statusDisplay) {
         }
 
         // close read state
-        $scope.state.read.open = false;
+        status.setReading(false);
-
+        status.update('Deleting message...');
-        statusDisplay.update('Deleting message...');
 
         email.deleteMessage({
             folder: currentFolder(),
@@ -88,14 +91,14 @@ var ActionBarCtrl = function($scope, email, dialog, statusDisplay) {
                 // show errors where appropriate
                 if (err.code === 42) {
                     $scope.select(message);
-                    statusDisplay.update('Unable to delete message in offline mode!');
+                    status.update('Unable to delete message in offline mode!');
                     return;
                 }
-                statusDisplay.update('Error during delete!');
+                status.update('Error during delete!');
                 dialog.error(err);
                 return;
             }
-            statusDisplay.update('Message deleted.');
+            status.update('Message deleted.');
             $scope.$apply();
         });
     };
@@ -118,11 +121,11 @@ var ActionBarCtrl = function($scope, email, dialog, statusDisplay) {
             return;
         }
 
-        statusDisplay.update('Updating unread flag...');
+        status.update('Updating unread flag...');
 
         // close read state
         if (!keepOpen) {
-            $scope.state.read.open = false;
+            status.setReading(false);
         }
 
         var originalState = message.unread;
@@ -134,17 +137,17 @@ var ActionBarCtrl = function($scope, email, dialog, statusDisplay) {
             if (err && err.code === 42) {
                 // offline, restore
                 message.unread = originalState;
-                statusDisplay.update('Unable to mark message in offline mode!');
+                status.update('Unable to mark message in offline mode!');
                 return;
             }
 
             if (err) {
-                statusDisplay.update('Error on sync!');
+                status.update('Error on sync!');
                 dialog.error(err);
                 return;
             }
 
-            statusDisplay.update('Online');
+            status.update('Online');
             $scope.$apply();
         });
     };
@@ -169,7 +172,7 @@ var ActionBarCtrl = function($scope, email, dialog, statusDisplay) {
             return;
         }
 
-        statusDisplay.update(flagged ? 'Adding star to message...' : 'Removing star from message');
+        status.update(flagged ? 'Adding star to message...' : 'Removing star from message');
 
         var originalState = message.flagged;
         message.flagged = flagged;
@@ -180,17 +183,17 @@ var ActionBarCtrl = function($scope, email, dialog, statusDisplay) {
             if (err && err.code === 42) {
                 // offline, restore
                 message.unread = originalState;
-                statusDisplay.update('Unable to ' + (flagged ? 'add star to' : 'remove star from') + ' message in offline mode!');
+                status.update('Unable to ' + (flagged ? 'add star to' : 'remove star from') + ' message in offline mode!');
                 return;
             }
 
             if (err) {
-                statusDisplay.update('Error on sync!');
+                status.update('Error on sync!');
                 dialog.error(err);
                 return;
             }
 
-            statusDisplay.update('Online');
+            status.update('Online');
             $scope.$apply();
         });
     };

src/js/controller/app/contacts.js

@@ -6,10 +6,13 @@
 
 var ContactsCtrl = function($scope, keychain, pgp, dialog) {
 
+    //
+    // scope state
+    //
+
     $scope.state.contacts = {
         toggle: function(to) {
             $scope.state.lightbox = (to) ? 'contacts' : undefined;
-
             $scope.listKeys();
         }
     };
@@ -93,6 +96,7 @@ var ContactsCtrl = function($scope, keychain, pgp, dialog) {
             $scope.listKeys();
         });
     };
+
 };
 
 //

src/js/controller/app/dialog.js

@@ -2,6 +2,10 @@
 
 var DialogCtrl = function($scope, dialog) {
 
+    //
+    // scope state
+    //
+
     $scope.state.dialog = {
         open: false
     };

src/js/controller/app/mail-list.js

@@ -1,20 +1,20 @@
 'use strict';
 
-var searchTimeout, firstSelect;
+var searchTimeout;
 
 //
 // Constants
 //
 
-var INIT_DISPLAY_LEN = 20,
+var INIT_DISPLAY_LEN = 50,
     SCROLL_DISPLAY_LEN = 10,
     FOLDER_TYPE_INBOX = 'Inbox',
     NOTIFICATION_INBOX_TIMEOUT = 5000;
 
-var MailListCtrl = function($scope, $timeout, $routeParams, $filter, statusDisplay, notification, email, keychain, dialog, search, dummy) {
+var MailListCtrl = function($scope, $timeout, $location, $filter, status, notification, email, keychain, dialog, search, dummy) {
 
     //
-    // Init
+    // scope state
     //
 
     $scope.state.mailList = {};
@@ -24,6 +24,30 @@ var MailListCtrl = function($scope, $timeout, $routeParams, $filter, statusDispl
      */
     $scope.pendingNotifications = [];
 
+    //
+    // url/history handling
+    //
+
+    /**
+     * Set the route to a message which will go to read mode
+     */
+    $scope.navigate = function(message) {
+        $location.search('uid', message.uid);
+    };
+
+    $scope.loc = $location;
+    $scope.$watch('(loc.search()).uid', function(uid) {
+        if (typeof uid === 'undefined') {
+            // no uid specified in url... select no message
+            $scope.select();
+            return;
+        }
+        // select the message specified by the uid in the url
+        $scope.select(_.findWhere(currentFolder().messages, {
+            uid: typeof uid === 'string' ? parseInt(uid, 10) : uid
+        }));
+    });
+
     //
     // scope functions
     //
@@ -62,11 +86,10 @@ var MailListCtrl = function($scope, $timeout, $routeParams, $filter, statusDispl
 
         $scope.state.mailList.selected = message;
 
-        if (!firstSelect) {
+        if ($location.search().dev) {
-            // only toggle to read view on 2nd select in mobile mode
+            // stop here in dev mode
-            $scope.state.read.toggle(true);
+            return;
         }
-        firstSelect = false;
 
         keychain.refreshKeyForUserId({
             userId: message.from[0].address
@@ -132,8 +155,8 @@ var MailListCtrl = function($scope, $timeout, $routeParams, $filter, statusDispl
         $scope.searchText = undefined;
 
         // in development, display dummy mail objects
-        if ($routeParams.dev) {
+        if ($location.search().dev) {
-            statusDisplay.update('Last update: ', new Date());
+            status.update('Last update: ', new Date());
             currentFolder().messages = dummy.listMails();
             return;
         }
@@ -148,15 +171,13 @@ var MailListCtrl = function($scope, $timeout, $routeParams, $filter, statusDispl
         }
 
         // sort message by uid
-        currentFolder().messages.sort(byUidDescending);
+        messages.sort(byUidDescending);
-        // set display buffer to first messages
+        // Unselect message if it has been deleted from the messages array
-        $scope.displayMessages = currentFolder().messages.slice(0, INIT_DISPLAY_LEN);
+        if (messages.indexOf(currentMessage()) === -1) {
-
+            $scope.select();
-        // Shows the next message based on the uid of the currently selected element
-        if (currentFolder().messages.indexOf(currentMessage()) === -1) {
-            firstSelect = true; // reset first selection
-            $scope.select($scope.displayMessages[0]);
         }
+        // set display buffer to first messages
+        $scope.displayMessages = messages.slice(0, INIT_DISPLAY_LEN);
     });
 
     /**
@@ -200,20 +221,20 @@ var MailListCtrl = function($scope, $timeout, $routeParams, $filter, statusDispl
         if (!searchText) {
             // set display buffer to first messages
             $scope.displayMessages = currentFolder().messages.slice(0, INIT_DISPLAY_LEN);
-            statusDisplay.setSearching(false);
+            status.setSearching(false);
-            statusDisplay.update('Online');
+            status.update('Online');
             return;
         }
 
         // display searching spinner
-        statusDisplay.setSearching(true);
+        status.setSearching(true);
-        statusDisplay.update('Searching ...');
+        status.update('Searching ...');
         searchTimeout = setTimeout(function() {
             $scope.$apply(function() {
                 // filter relevant messages
                 $scope.displayMessages = search.filter(currentFolder().messages, searchText);
-                statusDisplay.setSearching(false);
+                status.setSearching(false);
-                statusDisplay.update('Matches in this folder');
+                status.update('Matches in this folder');
             });
         }, 500);
     };
@@ -225,10 +246,10 @@ var MailListCtrl = function($scope, $timeout, $routeParams, $filter, statusDispl
         // wait one cycle for the status display controllers to init
         $timeout(function() {
             if (isOnline) {
-                statusDisplay.update('Online');
+                status.update('Online');
                 openCurrentFolder();
             } else {
-                statusDisplay.update('Offline mode');
+                status.update('Offline mode');
             }
         });
     }, true);
@@ -268,7 +289,7 @@ var MailListCtrl = function($scope, $timeout, $routeParams, $filter, statusDispl
     // Notification API
     //
 
-    (email || {}).onIncomingMessage = function(msgs) {
+    email.onIncomingMessage = function(msgs) {
         var note, title, message, unreadMsgs;
 
         unreadMsgs = msgs.filter(function(msg) {
@@ -291,17 +312,13 @@ var MailListCtrl = function($scope, $timeout, $routeParams, $filter, statusDispl
             title: title,
             message: message,
             onClick: function() {
-                // force toggle into read mode when notification is clicked
-                firstSelect = false;
-
                 // remove from pending notificatiosn
                 var index = $scope.pendingNotifications.indexOf(note);
                 if (index !== -1) {
                     $scope.pendingNotifications.splice(index, 1);
                 }
-
+                // open the message
-                // mark message as read
+                $scope.navigate(_.findWhere(currentFolder().messages, {
-                $scope.select(_.findWhere(currentFolder().messages, {
                     uid: unreadMsgs[0].uid
                 }));
             },

src/js/controller/app/navigation.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var backBtnHandler = require('../../util/backbutton-handler');
-
 //
 // Constants
 //
@@ -13,8 +11,8 @@ var NOTIFICATION_SENT_TIMEOUT = 2000;
 // Controller
 //
 
-var NavigationCtrl = function($scope, $routeParams, $location, account, email, outbox, notification, appConfig, dialog) {
+var NavigationCtrl = function($scope, $location, account, email, outbox, notification, appConfig, dialog, dummy) {
-    if (!$routeParams.dev && !account.isLoggedIn()) {
+    if (!$location.search().dev && !account.isLoggedIn()) {
         $location.path('/'); // init app
         return;
     }
@@ -23,7 +21,7 @@ var NavigationCtrl = function($scope, $routeParams, $location, account, email, o
         config = appConfig.config;
 
     //
-    // scope functions
+    // scope state
     //
 
     $scope.state.nav = {
@@ -33,6 +31,36 @@ var NavigationCtrl = function($scope, $routeParams, $location, account, email, o
         }
     };
 
+    //
+    // url/history handling
+    //
+
+    $scope.loc = $location;
+
+    // nav open/close state url watcher
+    $scope.$watch('(loc.search()).nav', function(open) {
+        // synchronize the url to the scope state
+        $scope.state.nav.toggle(!!open);
+    });
+    $scope.$watch('state.nav.open', function(value) {
+        // synchronize the scope state to the url
+        $location.search('nav', value ? true : null);
+    });
+
+    // lightbox state url watcher
+    $scope.$watch('(loc.search()).lightbox', function(value) {
+        // synchronize the url to the scope state
+        $scope.state.lightbox = (value) ? value : undefined;
+    });
+    $scope.$watch('state.lightbox', function(value) {
+        // synchronize the scope state to the url
+        $location.search('lightbox', value ? value : null);
+    });
+
+    //
+    // scope functions
+    //
+
     $scope.openFolder = function(folder) {
         $scope.state.nav.currentFolder = folder;
         $scope.state.nav.toggle(false);
@@ -72,15 +100,23 @@ var NavigationCtrl = function($scope, $routeParams, $location, account, email, o
     // Start
     //
 
-    // handle back button
-    backBtnHandler.start();
     // init folders
     initializeFolders();
 
-    // select inbox as the current folder on init
+    // folder index url watcher
-    if ($scope.account.folders && $scope.account.folders.length > 0) {
+    $scope.$watch('(loc.search()).folder', function(folderIndex) {
-        $scope.openFolder($scope.account.folders[0]);
+        if (typeof folderIndex === 'undefined') {
+            $location.search('folder', 0); // navigate to inbox by default
+            return;
         }
+        // select current folder
+        folderIndex = typeof folderIndex === 'string' ? parseInt(folderIndex, 10) : folderIndex;
+        if ($scope.account.folders && $scope.account.folders.length > folderIndex) {
+            // navigate to the selected folder index
+            $scope.openFolder($scope.account.folders[folderIndex]);
+        }
+    });
+
     // connect imap/smtp clients on first startup
     account.onConnect(function(err) {
         if (err) {
@@ -101,8 +137,9 @@ var NavigationCtrl = function($scope, $routeParams, $location, account, email, o
 
     function initializeFolders() {
         // create dummy folder in dev environment only
-        if ($routeParams.dev) {
+        if ($location.search().dev) {
-            createDummyFolders();
+            $scope.$root.account = {};
+            $scope.account.folders = dummy.listFolders();
             return;
         }
 
@@ -122,33 +159,6 @@ var NavigationCtrl = function($scope, $routeParams, $location, account, email, o
             timeout: NOTIFICATION_SENT_TIMEOUT
         }, function() {});
     }
-
-
-    // attach dummy folders for development
-    function createDummyFolders() {
-        $scope.$root.account = {};
-        $scope.account.folders = [{
-            type: 'Inbox',
-            count: 2,
-            path: 'INBOX'
-        }, {
-            type: 'Sent',
-            count: 0,
-            path: 'SENT'
-        }, {
-            type: config.outboxMailboxType,
-            count: 0,
-            path: config.outboxMailboxPath
-        }, {
-            type: 'Drafts',
-            count: 0,
-            path: 'DRAFTS'
-        }, {
-            type: 'Trash',
-            count: 0,
-            path: 'TRASH'
-        }];
-    }
 };
 
 //

src/js/controller/app/privatekey-upload.js

@@ -4,6 +4,10 @@ var util = require('crypto-lib').util;
 
 var PrivateKeyUploadCtrl = function($scope, keychain, pgp, dialog, auth) {
 
+    //
+    // scope state
+    //
+
     $scope.state.privateKeyUpload = {
         toggle: function(to) {
             // open lightbox
@@ -33,6 +37,10 @@ var PrivateKeyUploadCtrl = function($scope, keychain, pgp, dialog, auth) {
         }
     };
 
+    //
+    // scope functions
+    //
+
     $scope.checkServerForKey = function(callback) {
         var keyParams = pgp.getKeyParams();
         keychain.hasPrivateKey({

src/js/controller/app/read.js

@@ -4,12 +4,13 @@
 // Controller
 //
 
-var ReadCtrl = function($scope, email, invitation, outbox, pgp, keychain, appConfig, download, auth, dialog) {
+var ReadCtrl = function($scope, $location, email, invitation, outbox, pgp, keychain, appConfig, download, auth, dialog) {
 
     var str = appConfig.string;
 
-    // set default value so that the popover height is correct on init
+    //
-    $scope.keyId = 'No key found.';
+    // scope state
+    //
 
     $scope.state.read = {
         open: false,
@@ -18,7 +19,39 @@ var ReadCtrl = function($scope, email, invitation, outbox, pgp, keychain, appCon
         }
     };
 
+    $scope.$on('read', function(e, state) {
+        $scope.state.read.toggle(state);
+    });
+
+    // set default value so that the popover height is correct on init
+    $scope.keyId = 'No key found.';
+
+    //
+    // url/history handling
+    //
+
+    // read state url watcher
+    $scope.loc = $location;
+    $scope.$watch('(loc.search()).uid', function(uid) {
+        // synchronize the url to the scope state
+        $scope.state.read.toggle(!!uid);
+    });
+    $scope.$watch('state.read.open', function(value) {
+        // close read mode by navigating to folder view
+        if (!value) {
+            $location.search('uid', null);
+        }
+    });
+
+    //
+    // scope functions
+    //
+
     $scope.getKeyId = function(address) {
+        if ($location.search().dev || !address) {
+            return;
+        }
+
         $scope.keyId = 'Searching...';
         keychain.getReceiverPublicKey(address, function(err, pubkey) {
             if (err) {
@@ -41,7 +74,7 @@ var ReadCtrl = function($scope, email, invitation, outbox, pgp, keychain, appCon
     };
 
     $scope.$watch('state.mailList.selected', function(mail) {
-        if (!mail) {
+        if ($location.search().dev || !mail) {
             return;
         }
 

src/js/controller/login/login-existing.js

@@ -43,7 +43,7 @@ var LoginExistingCtrl = function($scope, $location, $routeParams, email, auth, k
                 return;
             }
 
-            $location.path('/desktop');
+            $location.path('/account');
             $scope.$apply();
         });
     }

src/js/controller/login/login-initial.js

@@ -65,7 +65,7 @@ var LoginInitialCtrl = function($scope, $location, $routeParams, newsletter, ema
                     return;
                 }
 
-                $location.path('/desktop');
+                $location.path('/account');
                 $scope.$apply();
             });
         });

src/js/controller/login/login-new-device.js

@@ -95,7 +95,7 @@ var LoginExistingCtrl = function($scope, $location, $routeParams, email, auth, p
                 return;
             }
 
-            $location.path('/desktop');
+            $location.path('/account');
             $scope.$apply();
         });
     }

src/js/controller/login/login-privatekey-download.js

@@ -100,7 +100,7 @@ var LoginPrivateKeyDownloadCtrl = function($scope, $location, $routeParams, auth
                         return;
                     }
 
-                    $scope.goTo('/desktop');
+                    $scope.goTo('/account');
                 });
             });
         });

src/js/controller/login/login.js

@@ -60,7 +60,7 @@ var LoginCtrl = function($scope, $timeout, $location, updateHandler, account, au
                         return dialog.error(err);
                     }
 
-                    $scope.goTo('/desktop');
+                    $scope.goTo('/account');
                 });
             });
         } else if (availableKeys && availableKeys.publicKey && !availableKeys.privateKey) {

src/js/util/backbutton-handler.js

@@ -1,55 +0,0 @@
-'use strict';
-
-var axe = require('axe-logger'),
-    DEBUG_TAG = 'backbutton handler';
-
-/**
- * The back button handler introduces meaningful behavior fo rthe back button:
- * if there's an open lightbox, close it;
- * if the reader is open in mobile mode, close it;
- * if the navigation is open, close it;
- * if there's nothing else open, shut down the app;
- *
- * @type {Object}
- */
-var backBtnHandler = {
-    attachHandler: function(scope) {
-        this.scope = scope;
-    },
-    start: function() {
-        document.addEventListener("backbutton", handleBackButton, false);
-    },
-    stop: function() {
-        document.removeEventListener("backbutton", handleBackButton, false);
-    }
-};
-
-function handleBackButton(event) {
-    axe.debug(DEBUG_TAG, 'back button pressed');
-
-    // this disarms the default behavior which we NEVER want
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (backBtnHandler.scope.state.lightbox) {
-        // closes the lightbox (error msgs, writer, ...)
-        backBtnHandler.scope.state.lightbox = undefined;
-        axe.debug(DEBUG_TAG, 'lightbox closed');
-        backBtnHandler.scope.$apply();
-    } else if (backBtnHandler.scope.state.read && backBtnHandler.scope.state.read.open) {
-        // closes the reader
-        backBtnHandler.scope.state.read.toggle(false);
-        axe.debug(DEBUG_TAG, 'reader closed');
-        backBtnHandler.scope.$apply();
-    } else if (backBtnHandler.scope.state.nav && backBtnHandler.scope.state.nav.open) {
-        // closes the navigation
-        backBtnHandler.scope.state.nav.toggle(false);
-        axe.debug(DEBUG_TAG, 'navigation closed');
-        backBtnHandler.scope.$apply();
-    } else {
-        // exits the app
-        navigator.app.exitApp();
-    }
-}
-
-module.exports = backBtnHandler;

src/js/util/dummy.js

@@ -6,6 +6,50 @@ module.exports = Dummy;
 
 function Dummy() {}
 
+Dummy.prototype.listFolders = function() {
+    var dummies = [{
+        type: 'Inbox',
+        count: 2,
+        path: 'INBOX',
+        wellknown: true
+    }, {
+        type: 'Sent',
+        count: 0,
+        path: 'SENT',
+        wellknown: true
+    }, {
+        type: 'Outbox',
+        count: 0,
+        path: 'OUTBOX',
+        wellknown: true
+    }, {
+        type: 'Drafts',
+        count: 0,
+        path: 'DRAFTS',
+        wellknown: true
+    }, {
+        type: 'Trash',
+        count: 0,
+        path: 'TRASH',
+        wellknown: true
+    }, {
+        type: 'Flagged',
+        count: 0,
+        path: 'FLAGGED',
+        wellknown: true
+    }, {
+        name: 'Archive',
+        count: 0,
+        path: 'ARCHIVE'
+    }, {
+        name: 'Junk',
+        count: 0,
+        path: 'JUNK'
+    }];
+
+    return dummies;
+};
+
 Dummy.prototype.listMails = function() {
     var uid = 1000000;
 

src/js/util/index.js

@@ -7,6 +7,6 @@ require('./dummy');
 require('./dialog');
 require('./connection-doctor');
 require('./update/update-handler');
-require('./status-display');
+require('./status');
 require('./download');
 require('./notification');

src/js/util/status.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var ngModule = angular.module('woUtil');
-ngModule.service('statusDisplay', StatusDisplay);
+ngModule.service('status', Status);
-module.exports = StatusDisplay;
+module.exports = Status;
 
 /**
  * A central service to display status updates to the user
  */
-function StatusDisplay($rootScope, axe) {
+function Status($rootScope, axe) {
     this._rootScope = $rootScope;
     this._axe = axe;
 }
@@ -17,7 +17,7 @@ function StatusDisplay($rootScope, axe) {
  * @param  {String} text     The status message that is to be displayed to the user
  * @param  {Date} time		The time of the last update
  */
-StatusDisplay.prototype.update = function(text, time) {
+Status.prototype.update = function(text, time) {
     this._axe.info('status display', text);
     this._rootScope.$broadcast('status', text, time);
 };
@@ -26,6 +26,14 @@ StatusDisplay.prototype.update = function(text, time) {
  * Update the searching status to show a spinner while searching
  * @param {Boolean} state	If the spinner should be displayed or not
  */
-StatusDisplay.prototype.setSearching = function(state) {
+Status.prototype.setSearching = function(state) {
     this._rootScope.$broadcast('searching', state);
 };
+
+/**
+ * Update the reading status to communicate between controllers, if we're in read mode.
+ * @param {Boolean} state   If the reade mode should be open or not
+ */
+Status.prototype.setReading = function(state) {
+    this._rootScope.$broadcast('read', state);
+};

src/sass/blocks/views/_mail-list.scss

@@ -130,11 +130,6 @@
             overflow-y: scroll;
             // allow scrolling on iOS
             -webkit-overflow-scrolling: touch;
-
-            // hide scrollbar in webkit
-            &::-webkit-scrollbar {
-                display: none;
-            }
         }
         &__entries {
             display: table; // import for mail list entry desktop layout
@@ -295,7 +290,8 @@
 
         // Modifiers
 
-        &:hover {
+        &:hover,
+        &.wo-touch-active {
             background-color: rgba($color-main, 0.15);
         }
         &--unread {

src/tpl/login-set-credentials.html

@@ -41,7 +41,7 @@
 
         <p class="typo-paragraph">
           <br>
-          <a href="javascript:;" wo-touch='showDetails = !showDetails; $event.preventDefault()'>
+          <a href="#" wo-touch="$event.preventDefault(); showDetails = !showDetails">
             {{showDetails ? "Hide Options" : "Show Options"}}
           </a>
           <br><br>

src/tpl/mail-list.html

@@ -27,7 +27,7 @@
       infinite-scroll-distance="1" infinite-scroll-parent="true">
       <li class="mail-list-entry"
         ng-class="{'mail-list-entry--active': email === state.mailList.selected, 'mail-list-entry--unread': email.unread, 'mail-list-entry--attachment': email.attachments !== undefined && email.attachments.length > 0}"
-        wo-touch="select(email)"
+        wo-touch="navigate(email)"
         ng-repeat="email in displayMessages">
         <ul class="mail-list-entry__flags">
           <li class="mail-list-entry__flags-unread"></li>

src/tpl/nav.html

@@ -7,7 +7,7 @@
   <ul class="nav__folders">
     <li ng-repeat="folder in account.folders" ng-if="folder.wellknown" ng-hide="folder.type === 'Outbox' && folder.count < 1"
       class="nav__folder" ng-class="{'nav__folder--open': state.nav.currentFolder === folder}">
-      <a href="#" wo-touch="$event.preventDefault(); openFolder(folder)">
+      <a href="#/account?folder={{$index}}">
         <svg ng-if="folder.type === 'Inbox'" role="presentation">
           <use xlink:href="#icon-inbox" />
         </svg>
@@ -38,7 +38,7 @@
   <ul class="nav__folders">
     <li ng-repeat="folder in account.folders" ng-if="!folder.wellknown"
       class="nav__folder" ng-class="{'nav__folder--open': state.nav.currentFolder === folder}">
-      <a href="#" wo-touch="$event.preventDefault(); openFolder(folder)">
+      <a href="#/account?folder={{$index}}">
         <svg role="presentation"><use xlink:href="#icon-folder" /></svg>
         {{folder.name}}
         <span ng-show="folder.count > 0" class="nav__counter">{{folder.count}}</span>

src/tpl/read.html

@@ -6,7 +6,7 @@
 
   <div class="read__folder-toolbar">
     <div class="toolbar">
-      <a class="toolbar__label" href="javascript:;" wo-touch="state.read.toggle(false)">
+      <a class="toolbar__label" href="#" wo-touch="$event.preventDefault(); state.read.toggle(false)">
         <svg><use xlink:href="#icon-back" /><title>Back</title></svg>
         {{state.nav.currentFolder.wellknown ? state.nav.currentFolder.type : state.nav.currentFolder.name}}
       </a>

test/main.js

@@ -26,26 +26,6 @@ if (!Function.prototype.bind) {
     };
 }
 
-// a warm round of applause for phantomjs for missing events
-(function() {
-    if (!window.CustomEvent) {
-        var CustomEvent = function(event, params) {
-            params = params || {
-                bubbles: false,
-                cancelable: false,
-                detail: undefined
-            };
-            var evt = document.createEvent('CustomEvent');
-            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-            return evt;
-        };
-
-        CustomEvent.prototype = window.Event.prototype;
-
-        window.CustomEvent = CustomEvent;
-    }
-})();
-
 //
 // Test setup
 //

test/unit/controller/app/action-bar-ctrl-test.js

@@ -2,26 +2,22 @@
 
 var Email = require('../../../../src/js/email/email'),
     Dialog = require('../../../../src/js/util/dialog'),
-    StatusDisplay = require('../../../../src/js/util/status-display'),
+    Status = require('../../../../src/js/util/status'),
     ActionBarCtrl = require('../../../../src/js/controller/app/action-bar');
 
 describe('Action Bar Controller unit test', function() {
-    var scope, actionBarCtrl, emailMock, dialogMock, statusDisplayMock;
+    var scope, actionBarCtrl, emailMock, dialogMock, statusMock;
 
     beforeEach(function() {
         emailMock = sinon.createStubInstance(Email);
         dialogMock = sinon.createStubInstance(Dialog);
-        statusDisplayMock = sinon.createStubInstance(StatusDisplay);
+        statusMock = sinon.createStubInstance(Status);
 
-        angular.module('actionbartest', []);
+        angular.module('actionbartest', ['woUtil']);
         angular.mock.module('actionbartest');
         angular.mock.inject(function($rootScope, $controller) {
             scope = $rootScope.$new();
-            scope.state = {
+            scope.state = {};
-                mailList: {
-                    updateStatus: function() {}
-                }
-            };
 
             scope.state.nav = {
                 currentFolder: {
@@ -35,15 +31,11 @@ describe('Action Bar Controller unit test', function() {
                 }
             };
 
-            scope.state.read = {
-                open: true
-            };
-
             actionBarCtrl = $controller(ActionBarCtrl, {
                 $scope: scope,
                 email: emailMock,
                 dialog: dialogMock,
-                statusDisplay: statusDisplayMock
+                status: statusMock
             });
         });
     });
@@ -60,8 +52,8 @@ describe('Action Bar Controller unit test', function() {
 
             scope.deleteMessage({});
 
+            expect(statusMock.setReading.withArgs(false).calledOnce).to.be.true;
             expect(emailMock.deleteMessage.calledOnce).to.be.true;
-            expect(scope.state.read.open).to.be.false;
         });
     });
 
@@ -92,8 +84,8 @@ describe('Action Bar Controller unit test', function() {
 
             scope.moveMessage({}, {});
 
+            expect(statusMock.setReading.withArgs(false).calledOnce).to.be.true;
             expect(emailMock.moveMessage.calledOnce).to.be.true;
-            expect(scope.state.read.open).to.be.false;
         });
     });
 
@@ -157,8 +149,17 @@ describe('Action Bar Controller unit test', function() {
 
             scope.markMessage({}, true);
 
+            expect(statusMock.setReading.withArgs(false).calledOnce).to.be.true;
+            expect(emailMock.setFlags.calledOnce).to.be.true;
+        });
+
+        it('should mark the selected mail and close read mode', function() {
+            emailMock.setFlags.yields();
+
+            scope.markMessage({}, true, true);
+
+            expect(statusMock.setReading.calledOnce).to.be.false;
             expect(emailMock.setFlags.calledOnce).to.be.true;
-            expect(scope.state.read.open).to.be.false;
         });
     });
 

test/unit/controller/app/mail-list-ctrl-test.js

@@ -3,34 +3,15 @@
 var MailListCtrl = require('../../../../src/js/controller/app/mail-list'),
     EmailDAO = require('../../../../src/js/email/email'),
     KeychainDAO = require('../../../../src/js/service/keychain'),
-    StatusDisplay = require('../../../../src/js/util/status-display'),
+    Status = require('../../../../src/js/util/status'),
     Dialog = require('../../../../src/js/util/dialog'),
     Search = require('../../../../src/js/email/search');
 
 describe('Mail List controller unit test', function() {
-    var scope, ctrl, statusDisplayMock, notificationMock, emailMock, keychainMock, dialogMock, searchMock,
+    var scope, ctrl, statusMock, notificationMock, emailMock, keychainMock, dialogMock, searchMock,
-        emailAddress, emails,
+        emailAddress, emails, location;
-        hasChrome, hasSocket, hasRuntime, hasIdentity;
 
     beforeEach(function() {
-        hasChrome = !!window.chrome;
-        hasSocket = !!window.chrome.socket;
-        hasIdentity = !!window.chrome.identity;
-        if (!hasChrome) {
-            window.chrome = {};
-        }
-        if (!hasSocket) {
-            window.chrome.socket = {};
-        }
-        if (!hasRuntime) {
-            window.chrome.runtime = {
-                getURL: function() {}
-            };
-        }
-        if (!hasIdentity) {
-            window.chrome.identity = {};
-        }
-
         emails = [{
             unread: true
         }, {
@@ -46,7 +27,7 @@ describe('Mail List controller unit test', function() {
             close: function() {}
         };
 
-        statusDisplayMock = sinon.createStubInstance(StatusDisplay);
+        statusMock = sinon.createStubInstance(Status);
         emailMock = sinon.createStubInstance(EmailDAO);
         keychainMock = sinon.createStubInstance(KeychainDAO);
         dialogMock = sinon.createStubInstance(Dialog);
@@ -54,19 +35,16 @@ describe('Mail List controller unit test', function() {
 
         angular.module('maillisttest', ['woEmail', 'woServices', 'woUtil']);
         angular.mock.module('maillisttest');
-        angular.mock.inject(function($rootScope, $controller) {
+        angular.mock.inject(function($rootScope, $controller, $location) {
             scope = $rootScope.$new();
-            scope.state = {
+            location = $location;
-                read: {
+            scope.state = {};
-                    toggle: function() {}
-                }
-            };
 
             scope.loadVisibleBodies = function() {};
             ctrl = $controller(MailListCtrl, {
                 $scope: scope,
-                $routeParams: {},
+                $location: location,
-                statusDisplay: statusDisplayMock,
+                status: statusMock,
                 notification: notificationMock,
                 email: emailMock,
                 keychain: keychainMock,
@@ -76,20 +54,7 @@ describe('Mail List controller unit test', function() {
         });
     });
 
-    afterEach(function() {
+    afterEach(function() {});
-        if (!hasSocket) {
-            delete window.chrome.socket;
-        }
-        if (!hasRuntime) {
-            delete window.chrome.runtime;
-        }
-        if (!hasChrome) {
-            delete window.chrome;
-        }
-        if (!hasIdentity) {
-            delete window.chrome.identity;
-        }
-    });
 
     describe('displayMore', function() {
         beforeEach(function() {
@@ -132,21 +97,21 @@ describe('Mail List controller unit test', function() {
 
         it('should show initial message on empty', function() {
             scope.displaySearchResults();
-            expect(statusDisplayMock.setSearching.withArgs(false).calledOnce).to.be.true;
+            expect(statusMock.setSearching.withArgs(false).calledOnce).to.be.true;
-            expect(statusDisplayMock.update.withArgs('Online').calledOnce).to.be.true;
+            expect(statusMock.update.withArgs('Online').calledOnce).to.be.true;
             expect(scope.displayMessages.length).to.equal(2);
         });
         it('should show initial message on empty', function() {
             searchMock.filter.returns(['a']);
 
             scope.displaySearchResults('query');
-            expect(statusDisplayMock.setSearching.withArgs(true).calledOnce).to.be.true;
+            expect(statusMock.setSearching.withArgs(true).calledOnce).to.be.true;
-            expect(statusDisplayMock.update.withArgs('Searching ...').calledOnce).to.be.true;
+            expect(statusMock.update.withArgs('Searching ...').calledOnce).to.be.true;
             clock.tick(500);
 
             expect(scope.displayMessages).to.deep.equal(['a']);
-            expect(statusDisplayMock.setSearching.withArgs(false).calledOnce).to.be.true;
+            expect(statusMock.setSearching.withArgs(false).calledOnce).to.be.true;
-            expect(statusDisplayMock.update.withArgs('Matches in this folder').calledOnce).to.be.true;
+            expect(statusMock.update.withArgs('Matches in this folder').calledOnce).to.be.true;
         });
     });
 
@@ -160,10 +125,12 @@ describe('Mail List controller unit test', function() {
     describe('push notification', function() {
         beforeEach(function() {
             scope._stopWatchTask();
+            sinon.stub(scope, 'navigate');
         });
 
         afterEach(function() {
             notificationMock.create.restore();
+            scope.navigate.restore();
         });
 
         it('should succeed for single mail', function(done) {
@@ -181,7 +148,7 @@ describe('Mail List controller unit test', function() {
                 expect(opts.message).to.equal(mail.subject);
 
                 opts.onClick();
-                expect(scope.state.mailList.selected).to.equal(mail);
+                expect(scope.navigate.withArgs(mail).calledOnce).to.be.true;
                 done();
             });
 
@@ -224,7 +191,7 @@ describe('Mail List controller unit test', function() {
                 expect(opts.message).to.equal(mails[0].subject + '\n' + mails[1].subject);
 
                 opts.onClick();
-                expect(scope.state.mailList.selected).to.equal(mails[0]);
+                expect(scope.navigate.withArgs(mails[0]).calledOnce).to.be.true;
                 done();
             });
 
@@ -358,7 +325,7 @@ describe('Mail List controller unit test', function() {
         }));
         it('should output date only if date is not today', angular.mock.inject(function($filter) {
             var yesterday = new Date();
-            yesterday.setTime(yesterday.getTime() - 24*60*60*1000);
+            yesterday.setTime(yesterday.getTime() - 24 * 60 * 60 * 1000);
 
             var expected = $filter('date')(yesterday, 'mediumDate');
             expect(scope.formatDate(yesterday)).to.equal(expected);

test/unit/controller/login/login-ctrl-test.js

@@ -119,7 +119,7 @@ describe('Login Controller unit test', function() {
         expect(dialogMock.error.calledOnce).to.be.true;
     });
 
-    it('should redirect to /desktop', function() {
+    it('should redirect to /account', function() {
         authMock.init.yields();
         authMock.getEmailAddress.yields(null, {
             emailAddress: emailAddress
@@ -133,7 +133,7 @@ describe('Login Controller unit test', function() {
 
         createController();
 
-        expect(goToStub.withArgs('/desktop').calledOnce).to.be.true;
+        expect(goToStub.withArgs('/account').calledOnce).to.be.true;
     });
 
     it('should fail for keychain.requestPrivateKeyDownload', function() {

test/unit/controller/login/login-existing-ctrl-test.js

@@ -60,7 +60,7 @@ describe('Login (existing user) Controller unit test', function() {
             expect(keychainMock.getUserKeyPair.calledOnce).to.be.true;
             expect(emailDaoMock.unlock.calledOnce).to.be.true;
             expect(pathSpy.calledOnce).to.be.true;
-            expect(pathSpy.calledWith('/desktop')).to.be.true;
+            expect(pathSpy.calledWith('/account')).to.be.true;
         });
 
         it('should not work when keypair unavailable', function() {

test/unit/controller/login/login-initial-ctrl-test.js

@@ -102,7 +102,7 @@ describe('Login (initial user) Controller unit test', function() {
             expect(scope.errMsg).to.not.exist;
             expect(scope.state.ui).to.equal(2);
             expect(newsletterStub.called).to.be.true;
-            expect(location.$$path).to.equal('/desktop');
+            expect(location.$$path).to.equal('/account');
             expect(emailMock.unlock.calledOnce).to.be.true;
         });
     });

test/unit/controller/login/login-privatekey-download-ctrl-test.js

@@ -152,7 +152,7 @@ describe('Login Private Key Download Controller unit test', function() {
             scope.decryptAndStorePrivateKeyLocally();
         });
 
-        it('should goto /desktop on emailDao.unlock success', function(done) {
+        it('should goto /account on emailDao.unlock success', function(done) {
             keychainMock.decryptAndStorePrivateKeyLocally.yields(null, {
                 encryptedKey: 'keyArmored'
             });
@@ -160,7 +160,7 @@ describe('Login Private Key Download Controller unit test', function() {
             authMock.storeCredentials.yields();
 
             scope.goTo = function(location) {
-                expect(location).to.equal('/desktop');
+                expect(location).to.equal('/account');
                 expect(keychainMock.decryptAndStorePrivateKeyLocally.calledOnce).to.be.true;
                 expect(emailDaoMock.unlock.calledOnce).to.be.true;
                 done();
@@ -173,10 +173,10 @@ describe('Login Private Key Download Controller unit test', function() {
     describe('goTo', function() {
         it('should work', function() {
             sinon.stub(location, 'path', function(path) {
-                expect(path).to.equal('/desktop');
+                expect(path).to.equal('/account');
             });
 
-            scope.goTo('/desktop');
+            scope.goTo('/account');
         });
     });
 });

test/unit/util/backbutton-handler-test.js

@@ -1,64 +0,0 @@
-'use strict';
-
-var btnHandler = require('../../../src/js/util/backbutton-handler');
-
-describe('Backbutton Handler', function() {
-    chai.config.includeStack = true;
-
-    var scope, event;
-
-    beforeEach(function() {
-        scope = {
-            state: {},
-            $apply: function() {}
-        };
-
-        event = new CustomEvent('backbutton');
-
-        // this is a precondition for the test. throw an exception
-        // if this would produce side effects
-        expect(navigator.app).to.not.exist;
-        navigator.app = {};
-
-        btnHandler.attachHandler(scope);
-        btnHandler.start();
-    });
-
-    afterEach(function() {
-        btnHandler.stop();
-        delete navigator.app;
-    });
-
-    it('should close lightbox', function() {
-        scope.state.lightbox = 'asd';
-        document.dispatchEvent(event);
-        expect(scope.state.lightbox).to.be.undefined;
-    });
-
-    it('should close reader', function() {
-        scope.state.read = {
-            open: true,
-            toggle: function(state) {
-                scope.state.read.open = state;
-            }
-        };
-        document.dispatchEvent(event);
-        expect(scope.state.read.open).to.be.false;
-    });
-
-    it('should close navigation', function() {
-        scope.state.nav = {
-            open: true,
-            toggle: function(state) {
-                scope.state.nav.open = state;
-            }
-        };
-        document.dispatchEvent(event);
-        expect(scope.state.nav.open).to.be.false;
-    });
-
-    it('should close app', function(done) {
-        navigator.app.exitApp = done;
-        document.dispatchEvent(event);
-    });
-});

test/unit/util/status-display-test.js

@@ -1,14 +1,14 @@
 'use strict';
 
-describe('Status Display Service unit test', function() {
+describe('Status Service unit test', function() {
-    var statusDisplay, logInfoStub, rootScope, broadcastSpy;
+    var status, logInfoStub, rootScope, broadcastSpy;
 
     beforeEach(function() {
-        angular.module('statusDisplay-test', ['woUtil']);
+        angular.module('status-test', ['woUtil']);
-        angular.mock.module('statusDisplay-test');
+        angular.mock.module('status-test');
         angular.mock.inject(function($injector, axe) {
             logInfoStub = sinon.stub(axe, 'info');
-            statusDisplay = $injector.get('statusDisplay');
+            status = $injector.get('status');
             rootScope = $injector.get('$rootScope');
             broadcastSpy = sinon.spy(rootScope, '$broadcast');
         });
@@ -23,7 +23,7 @@ describe('Status Display Service unit test', function() {
             var message = 'Tada!',
                 time = new Date();
 
-            statusDisplay.update(message, time);
+            status.update(message, time);
 
             expect(broadcastSpy.withArgs('status', message, time).calledOnce).to.be.true;
             expect(logInfoStub.withArgs('status display', message).calledOnce).to.be.true;
@@ -32,10 +32,18 @@ describe('Status Display Service unit test', function() {
 
     describe('setSearching', function() {
         it('should work', function() {
-            statusDisplay.setSearching(true);
+            status.setSearching(true);
 
             expect(broadcastSpy.withArgs('searching', true).calledOnce).to.be.true;
         });
     });
 
+    describe('setReading', function() {
+        it('should work', function() {
+            status.setReading(true);
+
+            expect(broadcastSpy.withArgs('read', true).calledOnce).to.be.true;
+        });
+    });
+
 });