Moving Server error listener to popup https://github.com/libredirect/browser_extension/issues/992

src/assets/javascripts/services.js

@@ -669,7 +669,9 @@ function computeService(url) {
 export function computeFrontend(url) {
   for (const service in config.services) {
     for (const frontend in config.services[service].frontends) {
-      if (all(service, frontend, options, config).findIndex(instance => url.href.startsWith(instance)) >= 0) {
+      const instances = all(service, frontend, options, config)
+      const i = instances.findIndex(instance => url.href.startsWith(instance))
+      if (i >= 0) {
         return { service, frontend }
       }
     }

src/pages/background/background.js

@@ -117,30 +117,6 @@ browser.webRequest.onBeforeRequest.addListener(
   ["blocking"]
 )
 
-// browser.webRequest.onHeadersReceived.addListener(
-//   details => {
-//     if (details.statusCode >= 501 || details.statusCode == 429 || details.statusCode == 403) {
-//       const url = new URL(details.url)
-//       const r = servicesHelper.computeFrontend(url)
-//       if (!r) return
-//       const { service, frontend } = r
-//       const params = new URLSearchParams({
-//         message: "server_error",
-//         code: details.statusCode,
-//         url: url.href,
-//         frontend: frontend,
-//         service: service,
-//       })
-//       setTimeout(() => {
-//         browser.tabs.update({
-//           url: browser.runtime.getURL(`/pages/messages/index.html?${params.toString()}`),
-//         })
-//       }, 2000)
-//     }
-//   },
-//   { urls: ["<all_urls>"] }
-// )
-
 browser.tabs.onRemoved.addListener(tabId => {
   if (tabIdRedirects[tabId] != undefined) {
     delete tabIdRedirects[tabId]

src/pages/messages_src/App.svelte

@@ -80,39 +80,6 @@
     const newUrl = await servicesHelper.redirectAsync(oldUrl, "main_frame", null, null, false, true)
     browser.tabs.update({ url: newUrl })
   }
-
-  async function switchInstance() {
-    const newUrl = await servicesHelper.switchInstance(oldUrl)
-    browser.tabs.update({ url: newUrl })
-  }
-
-  async function removeInstance() {
-    const service = await servicesHelper.computeService(oldUrl)
-    const frontend = params.get("frontend")
-    const i = _options[frontend].findIndex(instance => oldUrl.href.startsWith(instance))
-    _options[frontend].splice(i, 1)
-    options.set(_options)
-    const newUrl = await servicesHelper.switchInstance(oldUrl, service)
-    browser.tabs.update({ url: newUrl })
-  }
-
-  async function removeAndAutoPickInstance() {
-    const service = await servicesHelper.computeService(oldUrl)
-
-    const frontend = params.get("frontend")
-    const i = _options[frontend].findIndex(instance => oldUrl.href.startsWith(instance))
-    _options[frontend].splice(i, 1)
-    options.set(_options)
-    await autoPick()
-    const newUrl = await servicesHelper.switchInstance(oldUrl, service)
-    browser.tabs.update({ url: newUrl })
-  }
-
-  async function addAutoPickInstance() {
-    await autoPick()
-    const newUrl = await servicesHelper.switchInstance(oldUrl)
-    browser.tabs.update({ url: newUrl })
-  }
 </script>
 
 {#if _options && _config}
@@ -124,34 +91,6 @@
           {browser.i18n.getMessage("enable") || "Enable"}
         </Button>
       </div>
-    {:else if params.get("message") == "server_error"}
-      <!-- https://httpstat.us/403 for testing -->
-      <div>
-        <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}" />
-            {browser.i18n.getMessage("switchInstance") || "Switch Instance"}
-          </Button>
-          <Button on:click={removeInstance}>
-            <SwitchInstanceIcon class="margin margin_{document.body.dir}" />
-            {browser.i18n.getMessage("removeInstance") || "Remove Instance"}
-            +
-            {browser.i18n.getMessage("switchInstance") || "Switch Instance"}
-          </Button>
-        {:else}
-          <Button on:click={addAutoPickInstance} disabled={autoPicking}>
-            <AutoPickIcon class="margin margin_{document.body.dir}" />
-            {browser.i18n.getMessage("autoPickInstance") || "Auto Pick Instance"}
-          </Button>
-          <Button on:click={removeAndAutoPickInstance} disabled={autoPicking}>
-            <AutoPickIcon class="margin margin_{document.body.dir}" />
-            {browser.i18n.getMessage("removeInstance") || "Remove Instance"}
-            +
-            {browser.i18n.getMessage("autoPickInstance") || "Auto Pick Instance"}
-          </Button>
-        {/if}
-      </div>
     {:else if params.get("message") == "no_instance"}
       <div>
         <h1>You have no instance selected for this frontend</h1>

src/pages/popup_src/Buttons.svelte

@@ -10,11 +10,14 @@
   import SettingsIcon from "../icons/SettingsIcon.svelte"
   import { options, config } from "./stores"
   import { onDestroy } from "svelte"
-  import servicesHelper from "../../assets/javascripts/services"
+  import servicesHelper, { computeFrontend } from "../../assets/javascripts/services"
   import Switch from "./components/Switch.svelte"
+  import AutoPickIcon from "../icons/AutoPickIcon.svelte"
+  import utils from "../../assets/javascripts/utils"
 
   let _options
   let _config
+  let autoPicking = false
 
   const unsubscribeOptions = options.subscribe(val => (_options = val))
   const unsubscribeConfig = config.subscribe(val => (_config = val))
@@ -28,6 +31,8 @@
   let redirectToOriginal
   let redirect
   let currentService
+  let frontend
+  let service
   browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
     if (tabs[0].url) {
       url = new URL(tabs[0].url)
@@ -35,8 +40,51 @@
       servicesHelper.reverse(url).then(r => (redirectToOriginal = r))
       servicesHelper.redirectAsync(url, "main_frame", null, null, false, true).then(r => (redirect = r))
       servicesHelper.computeService(url).then(r => (currentService = r))
+      const computed = servicesHelper.computeFrontend(url)
+      if (computed) {
+        ;({ service, frontend } = computed)
+      }
     }
   })
+
+  async function removeInstance() {
+    const i = _options[frontend].findIndex(instance => url.href.startsWith(instance))
+    _options[frontend].splice(i, 1)
+    options.set(_options)
+    const newUrl = await servicesHelper.switchInstance(url, service)
+    browser.tabs.update({ url: newUrl })
+  }
+
+  async function autoPick() {
+    autoPicking = true
+    const redirects = await utils.getList(_options)
+    const instances = utils.randomInstances(redirects[frontend]["clearnet"], 5)
+    const pings = await Promise.all([
+      ...instances.map(async instance => {
+        return [instance, await utils.ping(instance)]
+      }),
+    ])
+    pings.sort((a, b) => a[1] - b[1])
+    _options[frontend].push(pings[0][0])
+    options.set(_options)
+    autoPicking = false
+  }
+
+  async function addAutoPickInstance() {
+    await autoPick()
+    const newUrl = await servicesHelper.switchInstance(url)
+    browser.tabs.update({ url: newUrl })
+  }
+
+  async function removeAndAutoPickInstance() {
+    const i = _options[frontend].findIndex(instance => url.href.startsWith(instance))
+    _options[frontend].splice(i, 1)
+    options.set(_options)
+    await autoPick()
+    const newUrl = await servicesHelper.switchInstance(url, service)
+    browser.tabs.update({ url: newUrl })
+  }
+  $: console.log("autoPicking", autoPicking)
 </script>
 
 <div class={document.body.dir}>
@@ -56,6 +104,8 @@
     </Row>
   {/if}
 
+  {#if service && frontend}
+    {#if _options[frontend].length > 1}
       {#if switchInstance}
         <Row
           class="interactive"
@@ -68,6 +118,31 @@
           <SwitchInstanceIcon />
         </Row>
       {/if}
+      <Row class="interactive" on:click={removeInstance}>
+        <Label>
+          {browser.i18n.getMessage("remove") || "Remove"}
+          +
+          {browser.i18n.getMessage("switchInstance") || "Switch Instance"}
+        </Label>
+        <SwitchInstanceIcon />
+      </Row>
+    {:else}
+      <Row class={"interactive " + (autoPicking ? "disabled" : "")} on:click={removeAndAutoPickInstance}>
+        <Label>
+          {browser.i18n.getMessage("remove") || "Remove"}
+          +
+          {browser.i18n.getMessage("autoPickInstance") || "Auto Pick Instance"}
+        </Label>
+        <AutoPickIcon />
+      </Row>
+      <Row class={"interactive " + (autoPicking ? "disabled" : "")} on:click={addAutoPickInstance}>
+        <Label>
+          {browser.i18n.getMessage("autoPickInstance") || "Auto Pick Instance"}
+        </Label>
+        <AutoPickIcon />
+      </Row>
+    {/if}
+  {/if}
 
   {#if redirectToOriginal}
     <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}>
@@ -130,6 +205,20 @@
     transform: translateY(1px);
   }
 
+  :global(.disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :global(.disabled:hover) {
+    color: var(--text);
+    cursor: not-allowed;
+  }
+
+  :global(.disabled:active) {
+    transform: none;
+  }
+
   :global(img, svg) {
     margin-right: 5px;
     margin-left: 0;

src/pages/popup_src/components/Row.svelte

@@ -1,13 +1,12 @@
 <div {...$$props} on:click>
   <slot></slot>
-  </div>
+</div>
 
-  <style>
+<style>
   div {
     justify-content: space-between;
     display: flex;
     align-items: center;
     margin: 10px 0;
   }
-  </style>
-  
+</style>