Add current profile label and improve profile input prompts

Author: MaxITService

popup-page-scripts/popup-page-script.js

@@ -16,6 +16,7 @@ let saveTimeoutId = null;
 
 // DOM Elements
 const profileSelect = document.getElementById('profileSelect');
+const currentProfileLabel = document.getElementById('currentProfileLabel');
 const buttonCardsList = document.getElementById('buttonCardsList');
 const consoleOutput = document.getElementById('console');
 const saveStatus = document.getElementById('saveStatus');
@@ -193,6 +194,7 @@ document.addEventListener('DOMContentLoaded', () => {
         copyProfileContainer.style.display = 'none';
         deleteProfileButton.style.display = 'none'; // Hide delete button during add
         profileSelect.disabled = true; // Lock profile selector
+        currentProfileLabel.style.display = 'inline-block';
     });
 
     // Copy Profile Button Click
@@ -203,6 +205,7 @@ document.addEventListener('DOMContentLoaded', () => {
         addProfileContainer.style.display = 'none';
         deleteProfileButton.style.display = 'none'; // Hide delete button during copy
         profileSelect.disabled = true; // Lock profile selector
+        currentProfileLabel.style.display = 'inline-block';
     });
 
     // Save Add Profile Button Click
@@ -227,6 +230,7 @@ document.addEventListener('DOMContentLoaded', () => {
         copyProfileButton.style.display = 'inline-block';
         deleteProfileButton.style.display = 'inline-block'; // Show delete button after add
         profileSelect.disabled = false; // Unlock profile selector
+        currentProfileLabel.style.display = 'none';
     });
 
     // Save Copy Profile Button Click
@@ -251,6 +255,7 @@ document.addEventListener('DOMContentLoaded', () => {
         addProfileButton.style.display = 'inline-block';
         deleteProfileButton.style.display = 'inline-block'; // Show delete button after copy
         profileSelect.disabled = false; // Unlock profile selector
+        currentProfileLabel.style.display = 'none';
     });
 
     // Delete Profile Button Click
@@ -263,6 +268,7 @@ document.addEventListener('DOMContentLoaded', () => {
         copyProfileButton.style.display = 'inline-block';
         deleteProfileButton.style.display = 'inline-block'; // Show delete button
         profileSelect.disabled = false; // Unlock profile selector
+        currentProfileLabel.style.display = 'none';
     });
 
     // Cancel Copy Profile Button Click
@@ -272,6 +278,7 @@ document.addEventListener('DOMContentLoaded', () => {
         copyProfileButton.style.display = 'inline-block';
         deleteProfileButton.style.display = 'inline-block'; // Show delete button
         profileSelect.disabled = false; // Unlock profile selector
+        currentProfileLabel.style.display = 'none';
     });
 
     // Button management

popup-page-styles/popup-layout.css

@@ -105,3 +105,10 @@ select:focus {
     background: #cccccc;
     cursor: not-allowed;
 }
+
+/* Label for providing context to the profile selector when it's disabled */
+.profile-context-label {
+    align-self: center;
+    margin-right: 8px;
+    font-weight: 500;
+}

popup.html

@@ -24,6 +24,7 @@
       <section class="section">
         <h2>Profile</h2>
         <div class="row">
+          <label for="profileSelect" id="currentProfileLabel" class="profile-context-label" style="display: none;">Your current profile:</label>
           <select
             id="profileSelect"
             title="Select profile"
@@ -71,7 +72,7 @@ <h2>Profile</h2>
           class="profile-action-container"
           style="display: none"
         >
-          <label for="addProfileInput">Enter profile name:</label>
+          <label for="addProfileInput">Enter new profile name:</label>
           <input
             type="text"
             id="addProfileInput"
@@ -98,12 +99,12 @@ <h2>Profile</h2>
           class="profile-action-container"
           style="display: none"
         >
-          <label for="copyProfileInput">Enter new profile name:</label>
+          <label for="copyProfileInput">Enter duplicate profile name:</label>
           <input
             type="text"
             id="copyProfileInput"
-            placeholder="Enter new profile name here"
-            title="New profile name"
+            placeholder="Enter duplicate profile name here"
+            title="Name for the duplicated profile"
           />
           <button id="saveCopyProfile">Save</button>
           <button id="cancelCopyProfile" class="danger">Cancel</button>
@@ -512,4 +513,4 @@ <h2>Theme</h2>
     <script src="/popup-page-scripts/popup-page-floating-window-handler.js"></script>
   </body>
 </html>
-</html>
+</html>