gui: Avoid code generating HTML (#8923)

gui/default/assets/css/overrides.css

@@ -185,7 +185,7 @@ td input[type="checkbox"] {
 }
 
 /* Wrap long file paths to prevent text overflow. See issue #6268. */
-.file-path {
+.word-break-all {
     word-break: break-all;
 }
 

gui/default/index.html

@@ -288,7 +288,7 @@
             <div class="panel-body">
               <p ng-repeat="err in errorList()">
                 <small>{{err.when | date:"yyyy-MM-dd HH:mm:ss"}}:</small>
-                <span ng-bind-html="friendlyDevices(err.message) | linky: '_blank'"></span>
+                <span ng-bind="friendlyDevices(err.message)"></span>
               </p>
             </div>
             <div class="panel-footer">
@@ -553,8 +553,14 @@
                       </tr>
                       <tr>
                         <th><span class="fas fa-fw fa-share-alt"></span>&nbsp;<span translate>Shared With</span></th>
-                        <td class="text-right">
+                        <td class="text-right no-overflow-ellipse word-break-all">
-                          <span tooltip data-original-title="{{sharesFolder(folder)}} {{folderHasUnacceptedDevices(folder) ? '<br/>(<sup>1</sup>' + ('The remote device has not accepted sharing this folder.' | translate) + ')' : ''}} {{folderHasPausedDevices(folder) ? '<br/>(<sup>2</sup>' + ('The remote device has paused this folder.' | translate) + ')' : ''}}" ng-bind-html="sharesFolder(folder)"></span>
+                          <span ng-repeat="device in folder.devices">
+                            <span ng-if="device.deviceID != myID" ng-switch="completion[device.deviceID][folder.id].remoteState">
+                              <span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>1</sup><span ng-if="!$last">,</span></span>
+                              <span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>2</sup><span ng-if="!$last">,</span></span>
+                              <span ng-switch-default>{{deviceName(devices[device.deviceID])}}<span ng-if="!$last">,</span></span>
+                            </span>
+                          </span>
                         </td>
                       </tr>
                       <tr ng-if="folderStats[folder.id].lastScan">
@@ -883,8 +889,14 @@
                       </tr>
                       <tr ng-if="deviceFolders(deviceCfg).length > 0">
                         <th><span class="fas fa-fw fa-folder"></span>&nbsp;<span translate>Folders</span></th>
-                        <td class="text-right">
+                        <td class="text-right no-overflow-ellipse word-break-all">
-                          <span tooltip data-original-title="{{sharedFolders(deviceCfg)}} {{deviceHasUnacceptedFolders(deviceCfg) ? '<br/>(<sup>1</sup>' + ('The remote device has not accepted sharing this folder.' | translate) + ')' : '' }} {{deviceHasPausedFolders(deviceCfg) ? '<br/>(<sup>2</sup>' + ('The remote device has paused this folder.' | translate) + ')' : '' }}" ng-bind-html="sharedFolders(deviceCfg)"></span>
+                          <span ng-repeat="folderID in deviceFolders(deviceCfg)">
+                            <span ng-switch="completion[deviceCfg.deviceID][folderID].remoteState">
+                              <span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>1</sup><span ng-if="!$last">,</span></span>
+                              <span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>2</sup><span ng-if="!$last">,</span></span>
+                              <span ng-switch-default>{{folderLabel(folderID)}}<span ng-if="!$last">,</span></span>
+                            </span>
+                          </span>
                         </td>
                       </tr>
                       <tr ng-if="deviceCfg.remoteGUIPort > 0">

gui/default/syncthing/core/aboutModalView.html

@@ -86,37 +86,37 @@ Jakob Borg, Audrius Butkevicius, Jesse Lucas, Simon Frei, Alexander Graf, Alexan
           <tbody>
             <tr>
               <th translate>User Home</th>
-              <td><code class="file-path">{{ about.paths['baseDir-userHome'] }}</code></td>
+              <td><code class="word-break-all">{{ about.paths['baseDir-userHome'] }}</code></td>
             </tr>
             <tr>
               <th><strong translate>Configuration Directory</strong></th>
-              <td><code class="file-path"><strong>{{ about.paths['baseDir-config'] }}</strong></code></td>
+              <td><code class="word-break-all"><strong>{{ about.paths['baseDir-config'] }}</strong></code></td>
             </tr>
             <tr>
               <th translate>Configuration File</th>
-              <td><code class="file-path">{{ about.paths['config'] }}</code></td>
+              <td><code class="word-break-all">{{ about.paths['config'] }}</code></td>
             </tr>
             <tr>
               <th translate>Device Certificate</th>
-              <td><code class="file-path">{{ about.paths['certFile'] }}</code>
+              <td><code class="word-break-all">{{ about.paths['certFile'] }}</code>
-                <br /><code class="file-path">{{ about.paths['keyFile'] }}</code></td>
+                <br /><code class="word-break-all">{{ about.paths['keyFile'] }}</code></td>
             </tr>
             <tr>
               <th translate>GUI / API HTTPS Certificate</th>
-              <td><code class="file-path">{{ about.paths['httpsCertFile'] }}</code>
+              <td><code class="word-break-all">{{ about.paths['httpsCertFile'] }}</code>
-                <br /><code class="file-path">{{ about.paths['httpsKeyFile'] }}</code></td>
+                <br /><code class="word-break-all">{{ about.paths['httpsKeyFile'] }}</code></td>
             </tr>
             <tr>
               <th translate>Database Location</th>
-              <td><code class="file-path">{{ about.paths['database'] }}</code></td>
+              <td><code class="word-break-all">{{ about.paths['database'] }}</code></td>
             </tr>
             <tr>
               <th translate>Log File</th>
-              <td><code class="file-path">{{ about.paths['logFile'] }}</code></td>
+              <td><code class="word-break-all">{{ about.paths['logFile'] }}</code></td>
             </tr>
             <tr>
               <th translate>GUI Override Directory</th>
-              <td><code class="file-path">{{ about.paths['guiAssets'] }}</code></td>
+              <td><code class="word-break-all">{{ about.paths['guiAssets'] }}</code></td>
             </tr>
           </tbody>
         </table>

gui/default/syncthing/core/editShareTemplate.html

@@ -1,7 +1,13 @@
 <div class="col-md-6 checkbox">
   <label for="sharedwith-{{id}}">
     <input id="sharedwith-{{id}}" ng-model="selected[id]" type="checkbox" />
-    <span tooltip data-original-title="{{id}}" ng-bind-html="label"></span>
+    <span tooltip data-original-title="{{id}}">
+      <span ng-switch="remoteState">
+        <span ng-switch-when="notSharing">{{label}}<sup>1</sup></span>
+        <span ng-switch-when="paused">{{label}}<sup>2</sup></span>
+        <span ng-switch-default>{{label}}</span>
+      </span>
+    </span>
   </label>
 </div>
 <div class="col-md-6">

gui/default/syncthing/core/syncthingController.js

@@ -2452,30 +2452,6 @@ angular.module('syncthing.core')
                          + '&device=' + encodeURIComponent(deviceID));
         };
 
-        $scope.deviceNameMarkRemoteState = function (deviceID, folderID) {
-            var name = $scope.deviceName($scope.devices[deviceID]);
-            // Add footnote if sharing was not accepted on the remote device
-            if (deviceID in $scope.completion && folderID in $scope.completion[deviceID]) {
-                if ($scope.completion[deviceID][folderID].remoteState == 'notSharing') {
-                    name += '<sup>1</sup>';
-                } else if ($scope.completion[deviceID][folderID].remoteState == 'paused') {
-                    name += '<sup>2</sup>';
-                }
-            }
-            return name;
-        };
-
-        $scope.sharesFolder = function (folderCfg) {
-            var names = [];
-            folderCfg.devices.forEach(function (device) {
-                if (device.deviceID !== $scope.myID) {
-                    names.push($scope.deviceNameMarkRemoteState(device.deviceID, folderCfg.id));
-                }
-            });
-            names.sort();
-            return names.join(", ");
-        };
-
         $scope.folderHasUnacceptedDevices = function (folderCfg) {
             for (var deviceID in $scope.completion) {
                 if (deviceID in $scope.devices
@@ -2519,27 +2495,6 @@ angular.module('syncthing.core')
             return label && label.length > 0 ? label : folderID;
         };
 
-        $scope.folderLabelMarkRemoteState = function (folderID, deviceID) {
-            var label = $scope.folderLabel(folderID);
-            // Add footnote if sharing was not accepted on the remote device
-            if (deviceID in $scope.completion && folderID in $scope.completion[deviceID]) {
-                if ($scope.completion[deviceID][folderID].remoteState == 'notSharing') {
-                    label += '<sup>1</sup>';
-                } else if ($scope.completion[deviceID][folderID].remoteState == 'paused') {
-                    label += '<sup>2</sup>';
-                }
-            }
-            return label;
-        };
-
-        $scope.sharedFolders = function (deviceCfg) {
-            var labels = [];
-            $scope.deviceFolders(deviceCfg).forEach(function (folderID) {
-                labels.push($scope.folderLabelMarkRemoteState(folderID, deviceCfg.deviceID));
-            });
-            return labels.join(', ');
-        };
-
         $scope.deviceHasUnacceptedFolders = function (deviceCfg) {
             if (!(deviceCfg.deviceID in $scope.completion)) {
                 return false;
@@ -3429,6 +3384,7 @@ angular.module('syncthing.core')
                 id: '@',
                 label: '@',
                 folderType: '@',
+                remoteState: '@',
                 untrusted: '=',
             },
             link: function (scope, elem, attrs) {

gui/default/syncthing/device/editDeviceModalView.html

@@ -92,7 +92,7 @@
                   <a href="#" ng-click="selectAllSharedFolders(false)" translate>Deselect All</a></small>
               </p>
               <div class="form-group" ng-repeat="folder in currentSharing.shared">
-                <share-template selected="currentSharing.selected" encryption-passwords="currentSharing.encryptionPasswords" id="{{folder.id}}" label="{{folderLabelMarkRemoteState(folder.id, currentDevice.deviceID)}}" folder-type="{{folder.type}}" untrusted="currentDevice.untrusted" />
+                <share-template selected="currentSharing.selected" encryption-passwords="currentSharing.encryptionPasswords" id="{{folder.id}}" label="{{folderLabel(folder.id)}}" folder-type="{{folder.type}}" untrusted="currentDevice.untrusted" remote-state="{{completion[currentDevice.deviceID][folder.id].remoteState}}" />
               </div>
               <p class="help-block" ng-if="deviceHasUnacceptedFolders(currentDevice)">
                 <sup>1</sup> <span translate>The remote device has not accepted sharing this folder.</span>

gui/default/syncthing/device/globalChangesModalView.html

@@ -28,7 +28,7 @@
               <span ng-switch-default>{{changeEvent.data.type}}</span>
             </td>
             <td class="no-overflow-ellipse">{{folderLabel(changeEvent.data.folder)}}</td>
-            <td class="file-path no-overflow-ellipse">{{changeEvent.data.path}}</td>
+            <td class="word-break-all no-overflow-ellipse">{{changeEvent.data.path}}</td>
             <td class="no-overflow-ellipse">{{changeEvent.time | date:"yyyy-MM-dd HH:mm:ss"}}</td>
           </tr>
         </tbody>

gui/default/syncthing/folder/editFolderModalView.html

@@ -56,7 +56,7 @@
                 <a href="#" ng-click="selectAllSharedDevices(false)" translate>Deselect All</a></small>
             </p>
             <div class="form-group" ng-repeat="device in currentSharing.shared">
-              <share-template selected="currentSharing.selected" encryption-passwords="currentSharing.encryptionPasswords" id="{{device.deviceID}}" label="{{deviceNameMarkRemoteState(device.deviceID, currentFolder.id)}}" folder-type="{{currentFolder.type}}" untrusted="device.untrusted || pendingIsRemoteEncrypted(currentFolder.id, device.deviceID)" />
+              <share-template selected="currentSharing.selected" encryption-passwords="currentSharing.encryptionPasswords" id="{{device.deviceID}}" label="{{deviceName(device)}}" folder-type="{{currentFolder.type}}" untrusted="device.untrusted || pendingIsRemoteEncrypted(currentFolder.id, device.deviceID)" remote-state="{{completion[device.deviceID][currentFolder.id].remoteState}}" />
             </div>
             <p class="help-block" ng-if="folderHasUnacceptedDevices(currentFolder)">
               <sup>1</sup> <span translate>The remote device has not accepted sharing this folder.</span>

gui/default/syncthing/transfer/localChangedFilesModalView.html

@@ -15,7 +15,7 @@
         </tr>
       </thead>
       <tr dir-paginate="file in localChanged.files | itemsPerPage: localChanged.perpage" current-page="localChanged.page" total-items="model[localChangedFolder].receiveOnlyTotalItems" pagination-id="localChanged">
-        <td class="file-path">{{file.name}}</td>
+        <td class="word-break-all">{{file.name}}</td>
         <td><span ng-hide="file.type == 'DIRECTORY'">{{file.size | binary}}B</span></td>
       </tr>
     </table>

gui/default/syncthing/transfer/remoteNeededFilesModalView.html

@@ -22,7 +22,7 @@
                 </tr>
               </thead>
               <tr dir-paginate="file in remoteNeed[folder].files | itemsPerPage: remoteNeed[folder].perpage" current-page="remoteNeed[folder].page" total-items="completion[remoteNeedDevice.deviceID][folder].needItems" pagination-id="'remoteNeed-' + folder">
-                <td class="file-path">{{file.name}}</td>
+                <td class="word-break-all">{{file.name}}</td>
                 <td><span ng-hide="file.type == 'DIRECTORY'">{{file.size | binary}}B</span></td>
                 <td>{{file.modified | date:"yyyy-MM-dd HH:mm:ss"}}</td>
                 <td ng-if="file.modifiedBy">{{friendlyNameFromShort(file.modifiedBy)}}</td>