gui: Remaining sync bytes in folder header (fixes #3908)

The progress indicator in the folder header in the GUI now shows the
remaining bytes to sync as well as the percentage.

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3928

gui/default/index.html

@@ -285,7 +285,7 @@
                   <span ng-switch-when="idle"><span class="hidden-xs" translate>Up to Date</span><span class="visible-xs">&#9724;</span></span>
                   <span ng-switch-when="syncing">
                     <span class="hidden-xs" translate>Syncing</span>
-                    ({{syncPercentage(folder.id)}}%)
+                    <span ng-show="syncRemaining(folder.id)">({{syncPercentage(folder.id)}}%, {{syncRemaining(folder.id) | binary}}B)</span>
                   </span>
                   <span ng-switch-when="outofsync"><span class="hidden-xs" translate>Out of Sync</span><span class="visible-xs">&#9724;</span></span>
                 </div>

gui/default/syncthing/core/syncthingController.js

@@ -722,6 +722,22 @@ angular.module('syncthing.core')
             return Math.floor(pct);
         };
 
+        $scope.syncRemaining = function (folder) {
+            // Remaining sync bytes
+            if (typeof $scope.model[folder] === 'undefined') {
+                return 0;
+            }
+            if ($scope.model[folder].globalBytes === 0) {
+                return 0;
+            }
+
+            var bytes = $scope.model[folder].globalBytes - $scope.model[folder].inSyncBytes;
+            if (isNaN(bytes) || bytes < 0) {
+                return 0;
+            }
+            return bytes;
+        };
+
         $scope.scanPercentage = function (folder) {
             if (!$scope.scanProgress[folder]) {
                 return undefined;