gui: Use discovered IDs from cache when adding a new remote device (#8382)

* gui: Use discovered IDs from cache when adding a new remote device.

The GUI already does refreshDiscoveryCache() when it comes online and
on every 10 second refresh cycle.  Querying the same information
freshly in addDevice() seems unnecessary and adds some more round-trip
delay on a possibly slow network link.  Instead use the IDs from the
existing discoveryCache property to populate the suggested ID list.

* Increase maximum suggested device ID count to 100.

For the auto-completion list, which is hidden by default and filtered
by the browser, we can offer more discovered device IDs without
causing much confusion.  The list of suggested "nearby" devices is
still limited to the first five.

* Rename $scope.discoveryUnknown.

The old name "discovery" was pretty ambiguous..

gui/default/syncthing/core/syncthingController.js

@@ -1670,34 +1670,29 @@ angular.module('syncthing.core')
         };
 
         $scope.addDevice = function (deviceID, name) {
-            return $http.get(urlbase + '/system/discovery')
-                .success(function (registry) {
-                    $scope.discovery = [];
-                    for (var id in registry) {
-                        if ($scope.discovery.length === 5) {
-                            break;
-                        }
-                        if (id in $scope.devices) {
-                            continue
-                        }
-                        $scope.discovery.push(id);
-                    }
-                })
-                .then(function () {
-                    $http.get(urlbase + '/config/defaults/device').then(function (p) {
-                        $scope.currentDevice = p.data;
-                        $scope.currentDevice.name = name;
-                        $scope.currentDevice.deviceID = deviceID;
-                        if (deviceID) {
-                            $scope.currentDevice._editing = "new-pending";
-                        } else {
-                            $scope.currentDevice._editing = "new";
-                        }
-                        initShareEditing('device');
-                        $scope.currentSharing.unrelated = $scope.folderList();
-                        editDeviceModal();
-                    }, $scope.emitHTTPError);
-                });
+            $scope.discoveryUnknown = [];
+            for (var id in $scope.discoveryCache) {
+                if ($scope.discoveryUnknown.length === 100) {
+                    break;
+                }
+                if (id in $scope.devices) {
+                    continue
+                }
+                $scope.discoveryUnknown.push(id);
+            }
+            return $http.get(urlbase + '/config/defaults/device').then(function (p) {
+                $scope.currentDevice = p.data;
+                $scope.currentDevice.name = name;
+                $scope.currentDevice.deviceID = deviceID;
+                if (deviceID) {
+                    $scope.currentDevice._editing = "new-pending";
+                } else {
+                    $scope.currentDevice._editing = "new";
+                }
+                initShareEditing('device');
+                $scope.currentSharing.unrelated = $scope.folderList();
+                editDeviceModal();
+            }, $scope.emitHTTPError);
         };
 
         $scope.deleteDevice = function () {

gui/default/syncthing/device/editDeviceModalView.html

@@ -21,12 +21,12 @@
             </div>
             <div ng-if="editingDeviceNew()">
               <datalist id="discovery-list">
-                <option ng-repeat="id in discovery" value="{{id}}" />
+                <option ng-repeat="id in discoveryUnknown" value="{{id}}" />
               </datalist>
-              <div class="help-block" ng-if="discovery && discovery.length !== 0">
+              <div class="help-block" ng-if="discoveryUnknown && discoveryUnknown.length !== 0">
                 <span translate>You can also select one of these nearby devices:</span>
                 <ul>
-                  <li ng-repeat="id in discovery" style="list-style-type: none;">
+                  <li ng-repeat="id in discoveryUnknown.slice(0, 5)" style="list-style-type: none;">
                     <a href="#" ng-click="currentDevice.deviceID = id">
                       <identicon data-value="id"></identicon>&nbsp;&nbsp;{{id}}
                     </a>