Replace details view toggle with a button

public/scripts/extensions/connection-manager/index.js

@@ -67,7 +67,7 @@ class ConnectionManagerSpinner {
     constructor() {
         // @ts-ignore
         this.spinnerElement = document.getElementById('connection_profile_spinner');
-        this.abortController =  new AbortController();
+        this.abortController = new AbortController();
     }
 
     start() {
@@ -318,21 +318,21 @@ function renderConnectionProfiles(profiles) {
 
 /**
  * Renders the content of the details element.
- * @param {HTMLDetailsElement} details Details element
  * @param {HTMLElement} detailsContent Content element of the details
  */
-async function renderDetailsContent(details, detailsContent) {
+async function renderDetailsContent(detailsContent) {
     detailsContent.innerHTML = '';
-    if (details.open) {
-        const selectedProfile = extension_settings.connectionManager.selectedProfile;
-        const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
-        if (profile) {
-            const profileForDisplay = makeFancyProfile(profile);
-            const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', { profile: profileForDisplay });
-            detailsContent.innerHTML = template;
-        } else {
-            detailsContent.textContent = 'No profile selected';
-        }
+    if (detailsContent.classList.contains('hidden')) {
+        return;
+    }
+    const selectedProfile = extension_settings.connectionManager.selectedProfile;
+    const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+    if (profile) {
+        const profileForDisplay = makeFancyProfile(profile);
+        const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', { profile: profileForDisplay });
+        detailsContent.innerHTML = template;
+    } else {
+        detailsContent.textContent = 'No profile selected';
     }
 }
 
@@ -365,7 +365,7 @@ async function renderDetailsContent(details, detailsContent) {
         const profileId = selectedProfile.value;
         extension_settings.connectionManager.selectedProfile = profileId;
         saveSettingsDebounced();
-        await renderDetailsContent(details, detailsContent);
+        await renderDetailsContent(detailsContent);
 
         // None option selected
         if (!profileId) {
@@ -393,7 +393,7 @@ async function renderDetailsContent(details, detailsContent) {
             return;
         }
         await applyConnectionProfile(profile);
-        await renderDetailsContent(details, detailsContent);
+        await renderDetailsContent(detailsContent);
         await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
         toastr.success('Connection profile reloaded', '', { timeOut: 1500 });
     });
@@ -408,7 +408,7 @@ async function renderDetailsContent(details, detailsContent) {
         extension_settings.connectionManager.selectedProfile = profile.id;
         saveSettingsDebounced();
         renderConnectionProfiles(profiles);
-        await renderDetailsContent(details, detailsContent);
+        await renderDetailsContent(detailsContent);
         await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
     });
 
@@ -421,7 +421,7 @@ async function renderDetailsContent(details, detailsContent) {
             return;
         }
         await updateConnectionProfile(profile);
-        await renderDetailsContent(details, detailsContent);
+        await renderDetailsContent(detailsContent);
         saveSettingsDebounced();
         await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
         toastr.success('Connection profile updated', '', { timeOut: 1500 });
@@ -431,15 +431,18 @@ async function renderDetailsContent(details, detailsContent) {
     deleteButton.addEventListener('click', async () => {
         await deleteConnectionProfile();
         renderConnectionProfiles(profiles);
-        await renderDetailsContent(details, detailsContent);
+        await renderDetailsContent(detailsContent);
         await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
     });
 
-    /** @type {HTMLDetailsElement} */
-    // @ts-ignore
-    const details = document.getElementById('connection_profile_details');
+    /** @type {HTMLElement} */
+    const viewDetails = document.getElementById('view_connection_profile');
     const detailsContent = document.getElementById('connection_profile_details_content');
-    details.addEventListener('toggle', () => renderDetailsContent(details, detailsContent));
+    viewDetails.addEventListener('click', async () => {
+        viewDetails.classList.toggle('active');
+        detailsContent.classList.toggle('hidden');
+        await renderDetailsContent(detailsContent);
+    });
 
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'profile',
@@ -529,7 +532,7 @@ async function renderDetailsContent(details, detailsContent) {
             extension_settings.connectionManager.selectedProfile = profile.id;
             saveSettingsDebounced();
             renderConnectionProfiles(profiles);
-            await renderDetailsContent(details, detailsContent);
+            await renderDetailsContent(detailsContent);
             return profile.name;
         },
     }));
@@ -545,7 +548,7 @@ async function renderDetailsContent(details, detailsContent) {
                 return '';
             }
             await updateConnectionProfile(profile);
-            await renderDetailsContent(details, detailsContent);
+            await renderDetailsContent(detailsContent);
             saveSettingsDebounced();
             return profile.name;
         },

public/scripts/extensions/connection-manager/settings.html

@@ -7,16 +7,11 @@
     </div>
     <div class="flex-container">
         <select class="text_pole flex1" id="connection_profiles"></select>
+        <i id="view_connection_profile" class="menu_button fa-solid fa-info-circle" title="View connection profile details" data-i18n="[title]View connection profile details"></i>
         <i id="create_connection_profile" class="menu_button fa-solid fa-file-circle-plus" title="Create a new connection profile" data-i18n="[title]Create a new connection profile"></i>
         <i id="update_connection_profile" class="menu_button fa-solid fa-save" title="Update a connection profile" data-i18n="[title]Update a connection profile"></i>
         <i id="reload_connection_profile" class="menu_button fa-solid fa-recycle" title="Reload a connection profile" data-i18n="[title]Reload a connection profile"></i>
         <i id="delete_connection_profile" class="menu_button fa-solid fa-trash-can" title="Delete a connection profile" data-i18n="[title]Delete a connection profile"></i>
     </div>
-    <details id="connection_profile_details" class="marginBot10">
-        <summary>
-            <span data-i18n="Profile Details">Profile Details</span>
-            <i id="connection_profile_spinner" class="fa-solid fa-spinner fa-spin hidden"></i>
-        </summary>
-        <div id="connection_profile_details_content" class="marginTop5"></div>
-    </details>
+    <div id="connection_profile_details_content" class="hidden"></div>
 </div>

public/scripts/extensions/connection-manager/style.css

@@ -1,13 +1,11 @@
-#connection_profile_details>summary {
-    cursor: pointer;
-    font-weight: bold;
-    font-size: 1.1em;
-}
-
-#connection_profile_details ul {
+#connection_profile_details_content {
     margin: 5px 0;
 }
 
-#connection_profile_spinner {
-    margin-lefT: 5px;
+#connection_profile_details_content ul {
+    margin: 0;
+}
+
+#connection_profile_spinner {
+    margin-left: 5px;
 }