Refactor splash screen (#772)

* Refactoring of the splash screen

* center the checking network message

* Show Start App button sooner

interface/client/styles/networkIndicator.import.less

@@ -2,13 +2,23 @@
     position: absolute;
     top: 10px;
     right: 10px;
+    left: 10px;
     font-weight: 600;
     font-size: 80%;        
     opacity: 0.8;
     color: @colorGrey;
     text-transform: uppercase;
 
     .unknown {
-      opacity: 0.5;
+        position: absolute;
+        top: 155px;
+        text-align: center;
+        left: 10px;
+        right: 10px;
+        font-size: 110%;
+        opacity: 0.8;
+        font-weight: normal;
+        text-transform: none;
+        color: #fff;
     }
 }

interface/client/styles/splashScreen.import.less

@@ -51,6 +51,10 @@
         .network-indicator {
             color: #FFF;
             opacity: 0.9;
+            .unknown {
+                color: #152f58;
+                text-shadow: 0 1px 5px rgba(255,255,255,0.75);        
+            }
         }
     }
 
@@ -128,7 +132,7 @@
         display: inline-block;
         margin-top: 2px;
         opacity: 0.6;
-        line-height: 1.6em;
+        line-height: 1.3em;
         cursor: text;
         -webkit-app-region: no-drag;
         -webkit-user-select: initial;
@@ -144,21 +148,32 @@
         appearance: none;
         width: auto;
         height: 10px;
+        opacity: 0.8;
     }
+
     progress[value]::-webkit-progress-bar {
         background-color: rgba(255,255,255, 0.2);
         border-radius: 2px;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
     }
+
     progress.wallet::-webkit-progress-value {
         background-image: -webkit-linear-gradient(left, #DCCAB6, #fff);
     }
     progress.mist::-webkit-progress-value {
         background-image: -webkit-linear-gradient(left, #3185CC, #ADA1E2);
     }
     progress::-webkit-progress-value {
-        opacity: 0.8;
+        opacity: 0.7;
         border-radius: 2px;
         box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
     }
+
+    progress.state {
+        opacity: 0.3;
+    }
+
+    progress.state[value]::-webkit-progress-bar {
+        background: transparent;
+    }
 }

interface/client/templates/popupWindows/splashScreen.html

@@ -9,13 +9,19 @@
         <img id="image" src="{{iconPath}}">
         <h1>
             {{{TemplateVar.get "text"}}}
+
+            {{#if TemplateVar.get "syncStatusMessage"}}
+                <br><small> {{{syncStatus}}} </small>
+            {{/if}}
+
             {{#if TemplateVar.get "logText"}}
                 <br><small style="font-size: 0.7em">{{TemplateVar.get "logText"}}</small>
             {{/if}}
         </h1>
 
         {{#if TemplateVar.get "showProgressBar"}}
             <progress class="{{mode}}" max="100" value="{{TemplateVar.get 'progress'}}"></progress>
+            <progress class="state {{mode}}" max="100" value="{{TemplateVar.get 'stateProgress'}}"></progress>
         {{/if}}
     </div>
 </template>

interface/client/templates/popupWindows/splashScreen.js

@@ -24,17 +24,20 @@ var lastSyncData = {},
 
 Template['popupWindows_splashScreen'].onCreated(function(){
     var template = this;
+    template._intervalId = null;
 
     ipc.on('uiAction_nodeLogText', function(e, text, data) {
         if (showNodeLog && data) {
             TemplateVar.set(template, 'logText', data);
+            TemplateVar.set(template, 'syncStatusMessage', false);
+
             return;
         }
     });
 
 
     ipc.on('uiAction_nodeStatus', function(e, status, errorTag) {
-        console.trace('Node status', status);
+        console.trace('Node status', status, errorTag);
 
         switch (status) {
             case 'starting':
@@ -77,58 +80,69 @@ Template['popupWindows_splashScreen'].onCreated(function(){
     });
 
     ipc.on('uiAction_nodeSyncStatus', function(e, status, data) {
-        console.trace('Node sync status', status);
+        console.trace('Node sync status', status, data);
 
         TemplateVar.set(template, 'smallClass', 'small');
 
-        switch (status) {
-            case 'inProgress':
-                TemplateVar.set(template, 'startAppButtonText', TAPi18n.__('mist.startScreen.launchApp'));
-                TemplateVar.set(template, 'showStartAppButton', true);
+        if (status == 'inProgress') {
+            TemplateVar.set(template, 'showStartAppButton', true);
 
+            if (data != false) {
+                // if state is "in progress" and we have data
+                TemplateVar.set(template, 'startAppButtonText', TAPi18n.__('mist.startScreen.launchApp'));
                 showNodeLog = false;
+                var translationString = '';                    
 
+                // add the data received to the object lastSyncData
                 lastSyncData = _.extend(lastSyncData, data || {});
-                var progress = ((lastSyncData.currentBlock - lastSyncData.startingBlock) / (lastSyncData.highestBlock - lastSyncData.startingBlock)) * 100;
+
+                // Select the appropriate message
+                if(web3.net.peerCount > 0) {
+                    // Check which state we are
+                    if (lastSyncData.knownStates > lastSyncData.lastKnownStates 
+                        || (lastSyncData.pulledStates / lastSyncData.knownStates) > (lastSyncData.currentBlock - lastSyncData.startingBlock)  ) {
+                        // Mostly downloading new states
+                        translationString = 'mist.startScreen.nodeSyncInfoStates';
+
+                    } else if(lastSyncData._highestBlock - lastSyncData.currentBlock < 3000) {
+                        // Almost finished processing
+                        translationString = 'mist.startScreen.nodeSyncProcessing';
 
-                lastSyncData._currentBlock = lastSyncData.currentBlock;
-                lastSyncData._highestBlock = lastSyncData.highestBlock;
-                lastSyncData.currentBlock = numeral(lastSyncData.currentBlock).format('0,0');
-                lastSyncData.highestBlock = numeral(lastSyncData.highestBlock).format('0,0');
+                    } else {
+                        // Mostly downloading blocks
+                        translationString = 'mist.startScreen.nodeSyncInfo';
 
-                if (progress === 0) {
-                    progress = 1;
-                }
+                    }
+                } else {
+                    // Not online
+                    translationString = 'mist.startScreen.nodeSyncConnecting';                    
+                } 
 
-                var translatedText = '';                    
+                // Saves data as numbers (hex)
+                lastSyncData._highestBlock = lastSyncData.highestBlock;
+                lastSyncData.lastKnownStates = lastSyncData.knownStates;
 
-                // show node info text
-                if(lastSyncData.startingBlock) {
-                    // show progress bar
-                    TemplateVar.set(template, 'showProgressBar', true);
+                // saves data as pretty strings
+                lastSyncData.highestBlock = numeral(lastSyncData.highestBlock).format('0,0');
 
-                    if(lastSyncData._highestBlock - lastSyncData._currentBlock < 3000) {
-                        translatedText = TAPi18n.__('mist.startScreen.nodeSyncProcessing');
-                    } else {
-                        translatedText = TAPi18n.__('mist.startScreen.nodeSyncInfo', lastSyncData);
-                    }
+                // saves to template
+                TemplateVar.set(template, 'lastSyncData', lastSyncData);
+
+            } else {
+                // It's not connected anymore
+                if (web3.net.peerCount > 1) {
+                    translationString = 'mist.startScreen.nodeSyncFoundPeers';                    
                 } else {
-                    translatedText = TAPi18n.__('mist.startScreen.nodeSyncConnecting');                    
-                }
-
-                TemplateVar.set(template, 'logText', false);
-                TemplateVar.set(template, 'text', 
-                    TAPi18n.__('mist.startScreen.nodeSyncing') + 
-                    '<br /><small>' + translatedText + '</small>'
-                );
-
-                // set progress value
-                if(_.isFinite(progress)) {
-                    TemplateVar.set(template, 'showProgressBar', true);
-                    TemplateVar.set(template, 'progress', progress);
+                    translationString = 'mist.startScreen.nodeSyncConnecting';                    
                 }
 
-                break;
+                TemplateVar.set(template, 'lastSyncData', {'peers': web3.net.peerCount});
+
+            }
+
+            TemplateVar.set(template, 'logText', false);
+            TemplateVar.set(template, 'text', TAPi18n.__('mist.startScreen.nodeSyncing'));
+            TemplateVar.set(template, 'syncStatusMessage', translationString);
         }
     });
 
@@ -150,6 +164,66 @@ Template['popupWindows_splashScreen'].helpers({
     */
     'iconPath': function(){
         return 'file://'+ window.mist.dirname +'/icons/'+ window.mist.mode +'/icon2x.png';
+    },
+    /**
+    Updates the Sync Message live
+
+    @method syncStatus
+    */
+    'syncStatus' : function() {
+
+        // This functions loops trhough numbers while waiting for the node to respond
+        var template = Template.instance();
+        Meteor.clearInterval(template._intervalId);
+
+        // Create an interval to quickly iterate trough the numbers
+        template._intervalId = Meteor.setInterval(function(){
+            // loads data from templates
+            var syncData = TemplateVar.get(template, 'lastSyncData', lastSyncData);
+            var translationString = TemplateVar.get(template, "syncStatusMessage");
+
+            if (!(syncData._displayBlock > -1)) {
+                // initialize the display numbers
+                syncData._displayBlock = Number(syncData.currentBlock);
+                syncData._displayState = Number(syncData.pulledStates);
+                syncData._displayKnownStates = Number(syncData.knownStates);
+
+            } else {
+                // Increment each them slowly to match target number
+                syncData._displayBlock =  Math.floor(syncData._displayBlock + (Number(syncData.currentBlock) - syncData._displayBlock) / 10);
+
+                syncData._displayState =  Math.floor(syncData._displayState + (Number(syncData.pulledStates) - syncData._displayState) / 10);
+
+                syncData._displayKnownStates =  Math.floor(syncData._displayKnownStates + (Number(syncData.knownStates) - syncData._displayKnownStates) / 10);
+            };            
+
+            // Create the fancy strings
+            lastSyncData.displayBlock = numeral(lastSyncData._displayBlock).format('0,0');
+            lastSyncData.displayState = numeral(lastSyncData._displayState).format('0,0');
+            lastSyncData.displayKnownStates = numeral(lastSyncData._displayKnownStates).format('0,0');
+
+            // Translate it
+            var translatedMessage = TAPi18n.__(translationString, syncData);
+
+            // Calculates both progress bars
+            var stateProgress = (lastSyncData._displayState / lastSyncData._displayKnownStates) * 100;
+
+            var progress = ((lastSyncData._displayBlock - Number(lastSyncData.startingBlock)) / (Number(lastSyncData._highestBlock) - Number(lastSyncData.startingBlock))) * 100 ;
+
+            // Saves data back to templates
+            TemplateVar.set(template, "syncStatusMessageLive", translatedMessage);
+            TemplateVar.set(template, 'lastSyncData', syncData);
+
+            // set progress value
+            if(_.isFinite(progress)) {
+                TemplateVar.set(template, 'showProgressBar', true);
+                TemplateVar.set(template, 'progress', progress);
+                TemplateVar.set(template, 'stateProgress', stateProgress);
+            }
+
+        }, 100);
+
+        return TemplateVar.get(template, "syncStatusMessageLive");
     }
 });
 

interface/i18n/mist.en.i18n.json

@@ -111,8 +111,10 @@
             "nodeError": "Ethereum node connection error :'(",
             "unableToBindPort": "Ethereum node cannot run. Is another instance already running?",
             "nodeSyncing": "Ethereum node needs to sync, please wait...",
-            "nodeSyncInfo": "Downloading block __currentBlock__ of __highestBlock__.",
+            "nodeSyncInfo": "Downloading block __displayBlock__ of __highestBlock__",
+            "nodeSyncInfoStates": "Downloading block __displayBlock__ of __highestBlock__, <br> Downloading state __displayState__ of __displayKnownStates__",
             "nodeSyncConnecting": "Looking for peers...",
+            "nodeSyncFoundPeers": "Connecting to __peers__ peers...",
             "nodeSyncProcessing": "Processing blocks, please wait...",
             "nodeSyncingStopped": "Ethereum node sync stopped",
             "peerSearchTimeout": "Skip peer search",