Add download size to downloader

console/src/downloader.css

@@ -1,6 +1,14 @@
 @font-face {
     font-family: 'Proxima Nova';
     src: url('vendor/ProximaNova/ProximaNova-Regular.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('vendor/ProximaNova/ProximaNova-Light.otf');
+    font-weight: 200;
+    font-style: normal;
 }
 
 * {
@@ -18,6 +26,7 @@ body {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     cursor: default;
+    overflow: hidden;
 }
 
 #error-message {
@@ -49,6 +58,16 @@ progress[value]::-webkit-progress-value {
     /* border-radius: 2px; */
 }
 
+#progress-bytes {
+    font-weight: lighter;
+    color: #BBBBBB;
+    margin-top: 10px;
+}
+
+#download-summary {
+    margin-top: 80px;
+}
+
 .state {
     padding-top: 100px;
 }

console/src/downloader.html

@@ -9,6 +9,10 @@
       <div id="state-downloading" class="state">
         <h1>Downloading<span class="one">.</span><span class="two">.</span><span class="three">.</span></h1>
         <progress max="100" value="80" id="download-progress"></progress>
+        <div id="progress-bytes">10 MB / 4.0 MB</div>
+        <div id="download-summary">
+            Sit tight, we are downloading content for your home
+        </div>
       </div>
 
       <div id="state-installing" class="state">

console/src/downloader.js

@@ -12,7 +12,16 @@ function ready() {
     function updateState(state, args) {
         console.log(state, args);
         if (state == 'downloading') {
-            $('#download-progress').attr('value', args.progress * 100);
+            function formatBytes(size) {
+                return (size / 1000000).toFixed('2');
+            }
+            $('#download-progress').attr('value', args.percentage * 100);
+            if (args.size !== null && args.size.transferred !== null && args.size.total !== null) {
+                var progressString = formatBytes(args.size.transferred) + "MB / " + formatBytes(args.size.total) + "MB";
+                $('#progress-bytes').html(progressString);
+            } else {
+                $('#progress-bytes').html("Retrieving resources...");
+            }
         } else if (state == 'installing') {
         } else if (state == 'complete') {
             setTimeout(function() {
@@ -37,7 +46,8 @@ function ready() {
 
     // updateState('error', { message: "This is an error message", progress: 0.5 });
     // updateState('complete', { progress: 0 });
+    // updateState('downloading', { percentage: 0.5, size: { total: 83040400, transferred: 500308} });
 
-    updateState('downloading', { progress: 0 });
+    updateState('downloading', { percentage: 0, size: null });
     electron.ipcRenderer.send('ready');
 }

console/src/main.js

@@ -486,7 +486,7 @@ function maybeInstallDefaultContentSet(onComplete) {
         }), { throttle: 250 }).on('progress', function(state) {
             if (!aborted) {
                 // Update progress popup
-                sendStateUpdate('downloading', { progress: state.percentage });
+                sendStateUpdate('downloading', state);
             }
         });
         var unzipper = unzip.Extract({