small UI improvements

src/pages/background/background.js

@@ -71,17 +71,21 @@ browser.webRequest.onBeforeRequest.addListener(
       const url = new URL(newUrl)
       const frontend = url.searchParams.get("frontend")
       const oldUrl = new URL(url.searchParams.get("url"))
-
-      newUrl = browser.runtime.getURL(
-        `/pages/messages/index.html?message=no_instance&url=${encodeURIComponent(oldUrl)}&frontend=${encodeURIComponent(frontend)}`
-      )
+      const params = new URLSearchParams({
+        message: "no_instance",
+        url: oldUrl,
+        frontend: frontend,
+      })
+      newUrl = browser.runtime.getURL(`/pages/messages/index.html?${params.toString()}`)
     }
 
     if (!newUrl) {
       if (url.href.match(/^https?:\/{2}(.*\.)?libredirect\.invalid.*/)) {
-        newUrl = browser.runtime.getURL(
-          `/pages/messages/index.html?message=disabled&url=${encodeURIComponent(url.href)}`
-        )
+        const params = new URLSearchParams({
+          message: "disabled",
+          url: url.href,
+        })
+        newUrl = browser.runtime.getURL(`/pages/messages/index.html?${params.toString()}`)
       }
     }
 
@@ -110,10 +114,15 @@ browser.webRequest.onHeadersReceived.addListener(
       const url = new URL(details.url)
       const { service, frontend } = servicesHelper.computeFrontend(url)
       if (!service) return
+      const params = new URLSearchParams({
+        message: "server_error",
+        code: details.statusCode,
+        url: url.href,
+        frontend: frontend,
+        service: service,
+      })
       browser.tabs.update({
-        url: browser.runtime.getURL(
-          `/pages/messages/index.html?message=server_error&code=${details.statusCode}=&url=${encodeURIComponent(url.href)}&frontend=${encodeURIComponent(frontend)}&service=${encodeURIComponent(service)}`
-        ),
+        url: browser.runtime.getURL(`/pages/messages/index.html?${params.toString()}`),
       })
     }
   },

src/pages/messages_src/App.svelte

@@ -112,17 +112,17 @@
 
 {#if _options && _config}
   <div class="main" dir="auto" {style}>
-    {#if window.location.search.includes("message=disabled")}
+    {#if params.get("message") == "disabled"}
       <div>
         <h1>You disabled redirections for this service</h1>
         <Button on:click={enableService}>
           {browser.i18n.getMessage("enable") || "Enable"}
         </Button>
       </div>
-    {:else if window.location.search.includes("message=server_error")}
+    {:else if params.get("message") == "server_error"}
       <!-- https://httpstat.us/403 for testing -->
       <div>
-        <h1>Your selected instance gave out an error</h1>
+        <h1>Your selected instance gave out an error: {params.get("code")}</h1>
         {#if _options[params.get("frontend")].length > 1}
           <Button on:click={switchInstance}>
             <SwitchInstanceIcon class="margin margin_{document.body.dir}" />
@@ -147,7 +147,7 @@
           </Button>
         {/if}
       </div>
-    {:else if window.location.search.includes("message=no_instance")}
+    {:else if params.get("message") == "no_instance"}
       <div>
         <h1>You have no instance selected for this frontend</h1>
         <Button on:click={autoPickInstance} disabled={autoPicking}>

src/pages/options_src/Services/Services.svelte

@@ -51,6 +51,7 @@
           window.location.hash = `services:${e.detail.value}`
           hideServiceSelection = false
         }}
+        on:pointerup={() => (hideServiceSelection = false)}
         on:focus={() => (hideServiceSelection = true)}
         on:blur={() => (hideServiceSelection = false)}
         items={[
@@ -128,6 +129,7 @@
             options.set(_options)
             hideFrontendSelection = false
           }}
+          on:pointerup={() => (hideServiceSelection = false)}
           on:focus={() => (hideFrontendSelection = true)}
           on:blur={() => (hideFrontendSelection = false)}
           items={[