Refactor popup menu

Buttons are hidden unless needed
Removed duplicate and unused code

src/pages/popup/popup.js

@@ -4,130 +4,97 @@ window.browser = window.browser || window.chrome
 import servicesHelper from "../../assets/javascripts/services.js"
 import utils from "../../assets/javascripts/utils.js"
 
-browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
-	if (tabs[0].url) {
-		const url = new URL(tabs[0].url)
-		servicesHelper.switchInstance(url).then(r => {
-			if (!r) {
-				document.getElementById("change_instance_div").style.display = "none"
-			}
-			else {
-				document.getElementById("change_instance").addEventListener("click",
-					async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })
-				)
-			}
-		})
-		servicesHelper.copyRaw(url, true).then(r => {
-			if (!r) {
-				document.getElementById("copy_original_div").style.display = "none"
-			}
-			else {
-				document.getElementById("copy_original").addEventListener("click", () => servicesHelper.copyRaw(url))
-			}
-		})
-		servicesHelper.reverse(url).then(r => {
-			if (!r) {
-				document.getElementById("redirect_to_original_div").style.display = "none"
-			} else {
-				document.getElementById("redirect_to_original").addEventListener("click", () => {
-					browser.runtime.sendMessage("reverseTab");
-					calcButtons()
-				})
-			}
-		})
-		servicesHelper.redirectAsync(url, "main_frame", null, true).then(r => {
-			if (!r) {
-				document.getElementById("redirect_div").style.display = "none"
-			} else {
-				document.getElementById("redirect").addEventListener("click", () => {
-					browser.runtime.sendMessage("redirectTab");
-					calcButtons()
-				})
-			}
-		})
-	} else {
-		document.getElementById("change_instance_div").style.display = "none"
-		document.getElementById("copy_original_div").style.display = "none"
-		document.getElementById("redirect_div").style.display = "none"
-		document.getElementById("redirect_to_original_div").style.display = "none"
-	}
-})
-
 document.getElementById("more-options").addEventListener("click", () => browser.runtime.openOptionsPage())
 
 const allSites = document.getElementsByClassName("all_sites")[0]
 const currSite = document.getElementsByClassName("current_site")[0]
+const currentSiteDivider = document.getElementById("current_site_divider")
 
 const config = await utils.getConfig()
+const divs = {}
 
-let divs = {}
 for (const service in config.services) {
 	divs[service] = {}
-	divs[service].toggle = {}
-	divs[service].current = currSite.getElementsByClassName(service)[0]
-	divs[service].all = allSites.getElementsByClassName(service)[0]
-	divs[service].toggle.current = currSite.getElementsByClassName(service + "-enabled")[0]
-	divs[service].toggle.all = allSites.getElementsByClassName(service + "-enabled")[0]
-}
 
-const currentSiteIsFrontend = document.getElementById("current_site_divider")
+	divs[service].all = allSites.getElementsByClassName(service)[0]
+	divs[service].current = currSite.getElementsByClassName(service)[0]
+
+	divs[service].all_toggle = allSites.getElementsByClassName(service + "-enabled")[0]
+	divs[service].current_toggle = currSite.getElementsByClassName(service + "-enabled")[0]
+
+	divs[service].all_toggle.addEventListener("change", async () => {
+		const options = await utils.getOptions()
+		options[service].enabled = divs[service].all_toggle.checked
+		browser.storage.local.set({ options })
+	})
+	divs[service].current_toggle.addEventListener("change", async () => {
+		const options = await utils.getOptions()
+		options[service].enabled = divs[service].current_toggle.checked
+		browser.storage.local.set({ options })
+	})
+}
 
 browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
-	let options = await utils.getOptions()
+	let url;
-	for (const service in config.services) {
-		if (!options.popupServices.includes(service))
-			allSites.getElementsByClassName(service)[0].classList.add("hide")
-		else
-			allSites.getElementsByClassName(service)[0].classList.remove("hide")
-		currSite.getElementsByClassName(service)[0].classList.add("hide")
-	}
 
-	for (const service in config.services) {
+	// Set visibility of control buttons
-		divs[service].toggle.all.checked = options[service].enabled
+	if (tabs[0].url) {
-		divs[service].toggle.current.checked = options[service].enabled
-	}
-
-	let url
-	try {
 		url = new URL(tabs[0].url)
-	} catch {
+		servicesHelper.switchInstance(url).then(r => {
-		currentSiteIsFrontend.classList.add("hide")
+			if (r) {
-		return
+				document.getElementById("change_instance_div").style.display = "block"
+				document.getElementById("change_instance").addEventListener("click", async () =>
+					browser.tabs.update({ url: await servicesHelper.switchInstance(url) })
+				)
+			}
+		})
+		servicesHelper.copyRaw(url, true).then(r => {
+			if (r) {
+				document.getElementById("copy_original_div").style.display = "block"
+				document.getElementById("copy_original").addEventListener("click", () =>
+					servicesHelper.copyRaw(url)
+				)
+			}
+		})
+		servicesHelper.reverse(url).then(r => {
+			if (r) {
+				document.getElementById("redirect_to_original_div").style.display = "block"
+				document.getElementById("redirect_to_original").addEventListener("click", () =>
+					browser.runtime.sendMessage("reverseTab")
+				)
+			}
+		})
+		servicesHelper.redirectAsync(url, "main_frame", null, true).then(r => {
+			if (r) {
+				document.getElementById("redirect_div").style.display = "block"
+				document.getElementById("redirect").addEventListener("click", () =>
+					browser.runtime.sendMessage("redirectTab")
+				)
+			}
+		})
 	}
 
-	let service = await servicesHelper.computeService(url, true)
+	const options = await utils.getOptions()
-	let frontend
+
-	let instance
+	// Set visibility of all service buttons
-	if (service) {
+	for (let i = 0; i < options.popupServices.length; ++i) {
-		if (typeof service != "string") {
+		const service = options.popupServices[i]
-			instance = service[2]
+		divs[service].all.classList.remove("hide")
-			frontend = service[1]
+		divs[service].all_toggle.checked = options[service].enabled
-			service = service[0]
+	}
-			let isCustom = false
+
-			for (const network in config.networks)
+	// Set visibility of current page service button
-				if (options[frontend].indexOf(instance) > -1)
+	if (url) {
-					isCustom = true
+		const service = await servicesHelper.computeService(url)
+		if (service) {
+			divs[service].all.classList.add("hide")
+			divs[service].current.classList.remove("hide")
+			divs[service].current_toggle.checked = options[service].enabled
+			currentSiteDivider.style.display = "block"
 		}
-		divs[service].current.classList.remove("hide")
-		divs[service].all.classList.add("hide")
-	} else {
-		currentSiteIsFrontend.classList.add("hide")
 	}
 })
 
-for (const service in config.services) {
-	divs[service].toggle.all.addEventListener("change", async () => {
-		let options = await utils.getOptions()
-		options[service].enabled = divs[service].toggle.all.checked
-		browser.storage.local.set({ options })
-	})
-	divs[service].toggle.current.addEventListener("change", async () => {
-		let options = await utils.getOptions()
-		options[service].enabled = divs[service].toggle.current.checked
-		browser.storage.local.set({ options })
-	})
-}
-
 for (const a of document.getElementsByTagName("a")) {
 	a.addEventListener("click", e => {
 		if (!a.classList.contains("prevent")) {
@@ -135,4 +102,4 @@ for (const a of document.getElementsByTagName("a")) {
 			e.preventDefault()
 		}
 	})
-}
+}

src/pages/popup/popup.pug

@@ -8,7 +8,7 @@ html(lang="en")
     body(dir="auto")
         div(class="current_site")
             include /src/pages/widgets/switches
-            div(id="current_site_divider")
+            div(id="current_site_divider" style="display: none")
                 hr
 
         div(class="all_sites")
@@ -16,25 +16,25 @@ html(lang="en")
 
         hr
 
-        div(class="some-block" id="change_instance_div")
+        div(class="some-block" id="change_instance_div" style="display: none")
             a(class="title button prevent" id="change_instance")
                 h4() Switch Instance
                 svg(xmlns="http://www.w3.org/2000/svg" height="26px" width="26px" fill="currentColor")
                     path(d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z")
 
-        div(class="some-block" id="copy_original_div" title="Copy the original redirected link")
+        div(class="some-block" id="copy_original_div" title="Copy the original redirected link" style="display: none")
             a(class="title button prevent" id="copy_original")
                 h4() Copy Original
                 svg(xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="currentColor")
                     path(d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z")
 
-        div(class="some-block" id="redirect_div")
+        div(class="some-block" id="redirect_div" style="display: none")
             a(class="title button prevent" id="redirect")
                 h4 Redirect
                 svg(xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor")
                     path(d="M7 20v-9q0-.825.588-1.413Q8.175 9 9 9h8.2l-1.6-1.6L17 6l4 4-4 4-1.4-1.4 1.6-1.6H9v9Z")
 
-        div(class="some-block" id="redirect_to_original_div")
+        div(class="some-block" id="redirect_to_original_div" style="display: none")
             a(class="title button prevent" id="redirect_to_original")
                 h4 Redirect To Original
                 svg(xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="currentColor")

src/pages/widgets/switches.pug

@@ -1,5 +1,5 @@
 each val, service in services    
-    div(class=service + " some-block")
+    div(class=service + " some-block hide")
         a(class="title" href=services[service].url)
             if services[service].imageType == 'svgMono'
                 img(class='dark' src=`/assets/images/${service}-icon.svg`)