Add the ability to close (unload) a service

resources/index.html

@@ -51,6 +51,12 @@
 
     // Service context menu
     const serviceContextMenu = new Menu();
+    serviceContextMenu.append(new MenuItem({
+        label: 'Close', click: () => {
+            unloadService(serviceContextMenu.serviceId);
+        }
+    }));
+    serviceContextMenu.append(new MenuItem({type: "separator"}));
     serviceContextMenu.append(new MenuItem({
         label: 'Edit', click: () => {
             ipcRenderer.send('openServiceSettings', serviceContextMenu.serviceId);
@@ -219,7 +225,7 @@
     });
 
     function setActiveService(serviceId) {
-        let currentService = services[serviceId];
+        const currentService = services[serviceId];
         process.nextTick(() => {
             loadService(serviceId, currentService);
 
@@ -241,7 +247,8 @@
 
     function loadService(serviceId, service) {
         // Load service if not loaded yet
-        if (!service.view) {
+        if (!service.view && !service.viewReady) {
+            document.querySelector('#services > .loader').classList.remove('hidden');
             service.view = document.createElement('webview');
             service.view.setAttribute('src', service.url);
             service.view.setAttribute('partition', 'persist:service_' + service.partition);
@@ -249,8 +256,10 @@
 
             document.querySelector('#services').appendChild(service.view);
             service.view.addEventListener('dom-ready', () => {
-                service.viewReady = true;
+                document.querySelector('#services > .loader').classList.add('hidden');
                 updateNavigation();
+                service.li.classList.add('loaded');
+                service.viewReady = true;
             });
             service.view.addEventListener('page-favicon-updated', event => {
                 console.debug('Loaded favicons for', service.name, event.favicons);
@@ -267,8 +276,29 @@
                     }
                 }
             });
+        }
+    }
 
-            service.li.classList.add('loaded');
+    function unloadService(serviceId) {
+        const service = services[serviceId];
+        if (service.view && service.viewReady) {
+            service.view.remove();
+            service.view = null;
+            service.li.classList.remove('loaded');
+            service.viewReady = false;
+
+            if (parseInt(selectedService) === serviceId) {
+                selectedService = null;
+                for (let i = 0; i < services.length; i++) {
+                    if (services[i].view && services[i].viewReady) {
+                        setActiveService(i);
+                        break;
+                    }
+                }
+                if (selectedService === null) {
+                    updateNavigation();
+                }
+            }
         }
     }
 
@@ -276,7 +306,7 @@
         console.debug('Updating navigation');
         // Update active list element
         for (let i = 0; i < services.length; i++) {
-            let service = services[i];
+            const service = services[i];
             if (parseInt(selectedService) === i) {
                 service.li.classList.add('active');
             } else {
@@ -284,7 +314,7 @@
             }
         }
 
-        if (services[selectedService].viewReady) {
+        if (selectedService !== null && services[selectedService].viewReady) {
             console.debug('Updating navigation buttons because view is ready');
             // Update history navigation
             let view = services[selectedService].view;

resources/layout.css

@@ -50,4 +50,8 @@ body {
     to {
         transform: rotate(360deg);
     }
+}
+
+.hidden {
+    display: none;
 }