From d1bbfd18abf58bdff2d31372b23c658635248e60 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Fri, 21 Jan 2022 08:38:50 -0800
Subject: [PATCH] GUACAMOLE-1509: Add contextual CSS classes to
 containers/elements that are otherwise ambiguous.

---
 .../src/app/client/templates/connection.html   |  2 +-
 .../app/client/templates/connectionGroup.html  |  2 +-
 .../src/app/client/templates/file.html         |  2 +-
 .../src/app/client/templates/guacClient.html   |  4 ++--
 .../src/app/form/services/formService.js       |  2 +-
 .../src/app/form/templates/checkboxField.html  | 18 ++++++++++--------
 .../src/app/form/templates/languageField.html  | 12 +++++++-----
 .../src/app/form/templates/numberField.html    | 18 ++++++++++--------
 .../src/app/form/templates/selectField.html    | 14 ++++++++------
 .../src/app/form/templates/textAreaField.html  | 16 +++++++++-------
 .../src/app/form/templates/usernameField.html  | 10 ++++++++++
 .../home/templates/guacRecentConnections.html  |  2 +-
 .../frontend/src/app/home/templates/home.html  |  9 +++------
 .../templates/connectionGroupPermission.html   |  2 +-
 .../manage/templates/connectionPermission.html |  2 +-
 .../locationChooserConnectionGroup.html        |  4 ++--
 .../app/manage/templates/manageConnection.html |  2 +-
 .../templates/manageConnectionGroup.html       |  2 +-
 .../manage/templates/manageSharingProfile.html |  2 +-
 .../manage/templates/managementButtons.html    |  8 ++++----
 .../templates/sharingProfilePermission.html    |  2 +-
 .../src/app/settings/templates/connection.html |  3 ++-
 .../settings/templates/connectionGroup.html    |  3 ++-
 .../app/settings/templates/newConnection.html  |  3 ++-
 .../settings/templates/newConnectionGroup.html |  3 ++-
 .../settings/templates/newSharingProfile.html  |  3 ++-
 .../src/app/settings/templates/settings.html   |  3 +--
 .../app/settings/templates/sharingProfile.html |  3 ++-
 28 files changed, 89 insertions(+), 67 deletions(-)
 create mode 100644 guacamole/src/main/frontend/src/app/form/templates/usernameField.html

diff --git a/guacamole/src/main/frontend/src/app/client/templates/connection.html b/guacamole/src/main/frontend/src/app/client/templates/connection.html
index 305a5889a..ae5ef91f1 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/connection.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/connection.html
@@ -1,4 +1,4 @@
-<div class="connection">
+<div class="connection-select-menu-connection connection">
     <input type="checkbox"
            ng-model="context.attachedClients[item.getClientIdentifier()]"
            ng-change="context.updateAttachedClients(item.getClientIdentifier())">
diff --git a/guacamole/src/main/frontend/src/app/client/templates/connectionGroup.html b/guacamole/src/main/frontend/src/app/client/templates/connectionGroup.html
index 48c707f45..2e7d794cd 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/connectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/connectionGroup.html
@@ -1,4 +1,4 @@
-<div class="connection-group">
+<div class="connection-select-menu-connection-group connection-group">
     <input type="checkbox"
            ng-show="item.balancing"
            ng-model="context.attachedClients[item.getClientIdentifier()]"
diff --git a/guacamole/src/main/frontend/src/app/client/templates/file.html b/guacamole/src/main/frontend/src/app/client/templates/file.html
index 83b6b2aa8..843047041 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/file.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/file.html
@@ -1,4 +1,4 @@
-<div class="list-item">
+<div class="file-browser-file list-item">
 
     <!-- Filename and icon -->
     <div class="caption">
diff --git a/guacamole/src/main/frontend/src/app/client/templates/guacClient.html b/guacamole/src/main/frontend/src/app/client/templates/guacClient.html
index 57b859c55..46a78d661 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/guacClient.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/guacClient.html
@@ -1,4 +1,4 @@
-<div class="main"
+<div class="client-main main"
      ng-class="{ 'drop-pending': dropPending }"
      guac-resize="mainElementResized"
      guac-touch-drag="clientDrag"
@@ -14,4 +14,4 @@
 
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/services/formService.js b/guacamole/src/main/frontend/src/app/form/services/formService.js
index 0bed36b84..d2ac6be73 100644
--- a/guacamole/src/main/frontend/src/app/form/services/formService.js
+++ b/guacamole/src/main/frontend/src/app/form/services/formService.js
@@ -91,7 +91,7 @@ angular.module('form').provider('formService', function formServiceProvider() {
          * @type FieldType
          */
         'USERNAME' : {
-            templateUrl : 'app/form/templates/textField.html'
+            templateUrl : 'app/form/templates/usernameField.html'
         },
 
         /**
diff --git a/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html b/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html
index f0881bd11..39d1f6b7d 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/checkboxField.html
@@ -1,8 +1,10 @@
-<input type="checkbox"
-       ng-attr-id="{{ fieldId }}"
-       ng-attr-name="{{ field.name }}"
-       ng-disabled="disabled"
-       ng-model="typedValue"
-       guac-focus="focused"
-       autocorrect="off"
-       autocapitalize="off">
+<div class="checkbox-field">
+    <input type="checkbox"
+           ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
+           ng-disabled="disabled"
+           ng-model="typedValue"
+           guac-focus="focused"
+           autocorrect="off"
+           autocapitalize="off">
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/languageField.html b/guacamole/src/main/frontend/src/app/form/templates/languageField.html
index 8b74b5866..a19d21cd0 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/languageField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/languageField.html
@@ -1,5 +1,7 @@
-<select guac-focus="focused"
-        ng-attr-id="{{ fieldId }}"
-        ng-attr-name="{{ field.name }}"
-        ng-model="model"
-        ng-options="language.key as language.value for language in languages | toArray | orderBy: key"></select>
+<div class="language-field">
+    <select guac-focus="focused"
+            ng-attr-id="{{ fieldId }}"
+            ng-attr-name="{{ field.name }}"
+            ng-model="model"
+            ng-options="language.key as language.value for language in languages | toArray | orderBy: key"></select>
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/numberField.html b/guacamole/src/main/frontend/src/app/form/templates/numberField.html
index 2d270d689..1bf58a175 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/numberField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/numberField.html
@@ -1,8 +1,10 @@
-<input type="number"
-       ng-disabled="disabled"
-       ng-attr-id="{{ fieldId }}"
-       ng-attr-name="{{ field.name }}"
-       ng-model="typedValue"
-       guac-focus="focused"
-       autocorrect="off"
-       autocapitalize="off">
+<div class="number-field">
+    <input type="number"
+           ng-disabled="disabled"
+           ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
+           ng-model="typedValue"
+           guac-focus="focused"
+           autocorrect="off"
+           autocapitalize="off">
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/selectField.html b/guacamole/src/main/frontend/src/app/form/templates/selectField.html
index 939956bb4..635527557 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/selectField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/selectField.html
@@ -1,6 +1,8 @@
-<select ng-attr-id="{{ fieldId }}"
-        ng-attr-name="{{ field.name }}"
-        ng-disabled="disabled"
-        guac-focus="focused"
-        ng-model="model"
-        ng-options="option as getFieldOption(option) | translate for option in field.options | orderBy: value"></select>
+<div class="select-field">
+    <select ng-attr-id="{{ fieldId }}"
+            ng-attr-name="{{ field.name }}"
+            ng-disabled="disabled"
+            guac-focus="focused"
+            ng-model="model"
+            ng-options="option as getFieldOption(option) | translate for option in field.options | orderBy: value"></select>
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html b/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html
index 74284c73c..4e63eb53e 100644
--- a/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html
+++ b/guacamole/src/main/frontend/src/app/form/templates/textAreaField.html
@@ -1,7 +1,9 @@
-<textarea ng-attr-id="{{ fieldId }}"
-          ng-attr-name="{{ field.name }}"
-          ng-model="model"
-          ng-disabled="disabled"
-          guac-focus="focused"
-          autocorrect="off"
-          autocapitalize="off"></textarea>
+<div class="text-area-field">
+    <textarea ng-attr-id="{{ fieldId }}"
+              ng-attr-name="{{ field.name }}"
+              ng-model="model"
+              ng-disabled="disabled"
+              guac-focus="focused"
+              autocorrect="off"
+              autocapitalize="off"></textarea>
+</div>
diff --git a/guacamole/src/main/frontend/src/app/form/templates/usernameField.html b/guacamole/src/main/frontend/src/app/form/templates/usernameField.html
new file mode 100644
index 000000000..6a5c664d4
--- /dev/null
+++ b/guacamole/src/main/frontend/src/app/form/templates/usernameField.html
@@ -0,0 +1,10 @@
+<div class="username-field">
+    <input type="text"
+           ng-attr-id="{{ fieldId }}"
+           ng-attr-name="{{ field.name }}"
+           ng-model="model"
+           ng-disabled="disabled"
+           guac-focus="focused"
+           autocorrect="off"
+           autocapitalize="off">
+</div>
diff --git a/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html b/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html
index 4654bd4d4..08362f66f 100644
--- a/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html
+++ b/guacamole/src/main/frontend/src/app/home/templates/guacRecentConnections.html
@@ -1,4 +1,4 @@
-<div>
+<div class="recent-connections">
 
     <!-- Text displayed if no recent connections exist -->
     <p class="placeholder" ng-hide="hasRecentConnections()">{{'HOME.INFO_NO_RECENT_CONNECTIONS' | translate}}</p>
diff --git a/guacamole/src/main/frontend/src/app/home/templates/home.html b/guacamole/src/main/frontend/src/app/home/templates/home.html
index 4597dffe1..b2b3db5bd 100644
--- a/guacamole/src/main/frontend/src/app/home/templates/home.html
+++ b/guacamole/src/main/frontend/src/app/home/templates/home.html
@@ -1,5 +1,4 @@
-
-<div class="view" ng-class="{loading: !isLoaded()}">
+<div class="home-view view" ng-class="{loading: !isLoaded()}">
 
     <div class="connection-list-ui">
 
@@ -8,9 +7,7 @@
             <h2>{{'HOME.SECTION_HEADER_RECENT_CONNECTIONS' | translate}}</h2>
             <guac-user-menu></guac-user-menu>
         </div>
-        <div class="recent-connections">
-            <guac-recent-connections root-groups="rootConnectionGroups"></guac-recent-connections>
-        </div>
+        <guac-recent-connections root-groups="rootConnectionGroups"></guac-recent-connections>
 
         <!-- All connections for this user -->
         <div class="header">
@@ -33,4 +30,4 @@
 
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/connectionGroupPermission.html b/guacamole/src/main/frontend/src/app/manage/templates/connectionGroupPermission.html
index 8ac52641e..2bc90cce9 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/connectionGroupPermission.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/connectionGroupPermission.html
@@ -1,4 +1,4 @@
-<div class="choice">
+<div class="connection-group-permission choice">
 
     <!-- Connection group icon -->
     <div class="icon type"></div>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/connectionPermission.html b/guacamole/src/main/frontend/src/app/manage/templates/connectionPermission.html
index 3a0dddaea..e94f9114e 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/connectionPermission.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/connectionPermission.html
@@ -1,4 +1,4 @@
-<div class="choice">
+<div class="connection-permission choice">
 
     <!-- Connection icon -->
     <div class="icon type" ng-class="item.protocol"></div>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/locationChooserConnectionGroup.html b/guacamole/src/main/frontend/src/app/manage/templates/locationChooserConnectionGroup.html
index b4371506e..e49b4c0b9 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/locationChooserConnectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/locationChooserConnectionGroup.html
@@ -1,4 +1,4 @@
-<span class="name" ng-click="context.chooseGroup(item.wrappedItem)">
-
+<span class="location-chooser-connection-group name"
+      ng-click="context.chooseGroup(item.wrappedItem)">
     {{item.name}}
 </span>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/manageConnection.html b/guacamole/src/main/frontend/src/app/manage/templates/manageConnection.html
index 8f37b98d4..7be5d75de 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/manageConnection.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/manageConnection.html
@@ -1,5 +1,5 @@
 
-<div class="view" ng-class="{loading: !isLoaded()}">
+<div class="manage-connection view" ng-class="{loading: !isLoaded()}">
 
     <!-- Main property editor -->
     <div class="header">
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/manageConnectionGroup.html b/guacamole/src/main/frontend/src/app/manage/templates/manageConnectionGroup.html
index 1ed7e9c16..712183dc6 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/manageConnectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/manageConnectionGroup.html
@@ -1,5 +1,5 @@
 
-<div class="view" ng-class="{loading: !isLoaded()}">
+<div class="manage-connection-group view" ng-class="{loading: !isLoaded()}">
 
     <!-- Main property editor -->
     <div class="header">
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/manageSharingProfile.html b/guacamole/src/main/frontend/src/app/manage/templates/manageSharingProfile.html
index f7e9d114e..6458075c0 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/manageSharingProfile.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/manageSharingProfile.html
@@ -1,4 +1,4 @@
-<div class="view" ng-class="{loading: !isLoaded()}">
+<div class="manage-sharing-profile view" ng-class="{loading: !isLoaded()}">
 
     <!-- Main property editor -->
     <div class="header">
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/managementButtons.html b/guacamole/src/main/frontend/src/app/manage/templates/managementButtons.html
index d43209a45..68e4108cc 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/managementButtons.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/managementButtons.html
@@ -1,6 +1,6 @@
 <div class="action-buttons">
-    <button ng-show="permissions.canSaveObject" ng-click="saveObject()">{{namespace + '.ACTION_SAVE' | translate}}</button>
-    <button ng-show="permissions.canCloneObject" ng-click="cloneObject()">{{namespace + '.ACTION_CLONE' | translate}}</button>
-    <button ng-click="cancel()">{{namespace + '.ACTION_CANCEL' | translate}}</button>
-    <button ng-show="permissions.canDeleteObject" ng-click="deleteObject()" class="danger">{{namespace + '.ACTION_DELETE' | translate}}</button>
+    <button ng-show="permissions.canSaveObject" ng-click="saveObject()" class="save">{{namespace + '.ACTION_SAVE' | translate}}</button>
+    <button ng-show="permissions.canCloneObject" ng-click="cloneObject()" class="clone">{{namespace + '.ACTION_CLONE' | translate}}</button>
+    <button ng-click="cancel()" class="cancel">{{namespace + '.ACTION_CANCEL' | translate}}</button>
+    <button ng-show="permissions.canDeleteObject" ng-click="deleteObject()" class="danger delete">{{namespace + '.ACTION_DELETE' | translate}}</button>
 </div>
diff --git a/guacamole/src/main/frontend/src/app/manage/templates/sharingProfilePermission.html b/guacamole/src/main/frontend/src/app/manage/templates/sharingProfilePermission.html
index 8d8311b76..0d1647255 100644
--- a/guacamole/src/main/frontend/src/app/manage/templates/sharingProfilePermission.html
+++ b/guacamole/src/main/frontend/src/app/manage/templates/sharingProfilePermission.html
@@ -1,4 +1,4 @@
-<div class="choice">
+<div class="sharing-profile-permission choice">
 
     <!-- Sharing profile icon -->
     <div class="icon type"></div>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/connection.html b/guacamole/src/main/frontend/src/app/settings/templates/connection.html
index 7db6835d6..ecf5e8eee 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/connection.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/connection.html
@@ -1,5 +1,6 @@
 <a ng-href="#/manage/{{item.dataSource}}/connections/{{item.identifier}}"
-   ng-class="{active: item.getActiveConnections()}">
+   ng-class="{active: item.getActiveConnections()}"
+   class="settings-connection">
 
     <!-- Connection icon -->
     <div class="icon type" ng-class="item.protocol"></div>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/connectionGroup.html b/guacamole/src/main/frontend/src/app/settings/templates/connectionGroup.html
index ccf4592be..79e37925b 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/connectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/connectionGroup.html
@@ -1,4 +1,5 @@
-<a ng-href="#/manage/{{item.dataSource}}/connectionGroups/{{item.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/connectionGroups/{{item.identifier}}"
+   class="settings-connection-group">
 
     <!-- Connection group icon -->
     <div class="icon type"></div>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/newConnection.html b/guacamole/src/main/frontend/src/app/settings/templates/newConnection.html
index e4debbe0d..d5d820138 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/newConnection.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/newConnection.html
@@ -1,3 +1,4 @@
-<a ng-href="#/manage/{{item.dataSource}}/connections/?parent={{item.wrappedItem.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/connections/?parent={{item.wrappedItem.identifier}}"
+   class="new-connection">
     <span class="name">{{'SETTINGS_CONNECTIONS.ACTION_NEW_CONNECTION' | translate}}</span>
 </a>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/newConnectionGroup.html b/guacamole/src/main/frontend/src/app/settings/templates/newConnectionGroup.html
index c1d6bba5f..bd9735c3d 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/newConnectionGroup.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/newConnectionGroup.html
@@ -1,3 +1,4 @@
-<a ng-href="#/manage/{{item.dataSource}}/connectionGroups/?parent={{item.wrappedItem.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/connectionGroups/?parent={{item.wrappedItem.identifier}}"
+   class="new-connection-group">
     <span class="name">{{'SETTINGS_CONNECTIONS.ACTION_NEW_CONNECTION_GROUP' | translate}}</span>
 </a>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/newSharingProfile.html b/guacamole/src/main/frontend/src/app/settings/templates/newSharingProfile.html
index 12303e8e6..ef0f8ca52 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/newSharingProfile.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/newSharingProfile.html
@@ -1,3 +1,4 @@
-<a ng-href="#/manage/{{item.dataSource}}/sharingProfiles/?parent={{item.wrappedItem.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/sharingProfiles/?parent={{item.wrappedItem.identifier}}"
+   class="new-sharing-profile">
     <span class="name">{{'SETTINGS_CONNECTIONS.ACTION_NEW_SHARING_PROFILE' | translate}}</span>
 </a>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/settings.html b/guacamole/src/main/frontend/src/app/settings/templates/settings.html
index 2bae3ae97..c0986ff45 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/settings.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/settings.html
@@ -1,5 +1,4 @@
-
-<div class="view">
+<div class="settings-view view">
 
     <div class="header tabbed">
         <h2>{{'SETTINGS.SECTION_HEADER_SETTINGS' | translate}}</h2>
diff --git a/guacamole/src/main/frontend/src/app/settings/templates/sharingProfile.html b/guacamole/src/main/frontend/src/app/settings/templates/sharingProfile.html
index bce7edc1f..6c8ae4de4 100644
--- a/guacamole/src/main/frontend/src/app/settings/templates/sharingProfile.html
+++ b/guacamole/src/main/frontend/src/app/settings/templates/sharingProfile.html
@@ -1,4 +1,5 @@
-<a ng-href="#/manage/{{item.dataSource}}/sharingProfiles/{{item.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/sharingProfiles/{{item.identifier}}"
+   class="settings-sharing-profile">
 
     <!-- Sharing profile icon -->
     <div class="icon type"></div>