minor refactoring

source/common/pages/popup/popup.css

@@ -20,6 +20,10 @@ body {
 	height: 33%;
 }
 
+.main-menu-item--active {
+	color: red;
+}
+
 .main-menu-item > h2 {
 	margin: 0;
 	padding: 0;	
@@ -27,4 +31,9 @@ body {
 
 .details-item {
 	display: none;
+}
+
+.details-item--active {
+	display: block;
+	height: 100%;
 }
\ No newline at end of file

source/common/pages/popup/popup.js

@@ -2,49 +2,48 @@
 
 const mainMenu = document.getElementById("main-menu")
 
+const mainMenuMonitoring = document.getElementById ("main-menu-monitoring")
+const mainMenuSharing = document.getElementById ("main-menu-sharing")
+const mainMenuProtection = document.getElementById ("main-menu-protection")
+
+const detailsDefault = document.getElementById ("details-default")
+
 const detailsMonitoring = document.getElementById ("details-monitoring")
 const detailsSharing = document.getElementById ("details-sharing")
 const detailsProtection = document.getElementById ("details-protection")
 
-
 /*
  * For debug purposes only. This displays the "message" within the UI.
  */
 function debugMessage(message){
-	var div = document.createElement("DIV");
-	div.innerText = message;
-	document.body.appendChild(div);
+	var div = document.createElement("DIV")
+	div.innerText = message
+	document.body.appendChild(div)
 }
 
-debugMessage("hi");
-
-
 document.addEventListener("DOMContentLoaded", function() {
-	debugMessage("hi");
 
 	mainMenu.addEventListener("click", function(evt) {
 		var elem = evt.target
 		while (elem !== undefined && elem !== null){
 			if (elem.classList !== undefined && elem.classList.contains("main-menu-item")){
 				// Found the main-menu-item
-				detailsMonitoring.style.display = "none"
-				detailsSharing.style.display = "none"
-				detailsProtection.style.display = "none"
-				const id = elem.id
-				switch (id){
-					case "main-menu-monitoring":
-						detailsMonitoring.style.display = "block"
-						break
-					case "main-menu-sharing":
-						detailsSharing.style.display = "block"
-						break
-					case "main-menu-protection":
-						detailsProtection.style.display = "block"
-						break
-				}
-				debugMessage("found" + id)
+				mainMenuMonitoring.classList.remove("main-menu-item--active")
+				mainMenuSharing.classList.remove("main-menu-item--active")
+				mainMenuProtection.classList.remove("main-menu-item--active")
+				elem.classList.add("main-menu-item--active")
+
+				detailsDefault.classList.remove("details-item--active")
+				detailsMonitoring.classList.remove("details-item--active")
+				detailsSharing.classList.remove("details-item--active")
+				detailsProtection.classList.remove("details-item--active")
+
+				const selection = elem.id.substring("main-menu-".length)
+				document.getElementById ("details-" + selection).classList.add("details-item--active")
+				break
+			} else {
+				elem = elem.parentNode
 			}
-			elem = elem.parentNode
 		}
 	})
 })
\ No newline at end of file