Refactor splash screen

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",