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

2 files changed, 112 insertions, 24 deletions

diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte
index ab5682dc..d2fc5433 100644
--- a/src/pages/popup_src/Buttons.svelte
+++ b/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,17 +104,44 @@
     </Row>
   {/if}
 
-  {#if switchInstance}
-    <Row
-      class="interactive"
-      on:click={async () =>
-        browser.tabs.update({ url: switchInstance }, () => {
-          window.close()
-        })}
-    >
-      <Label>{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label>
-      <SwitchInstanceIcon />
-    </Row>
+  {#if service && frontend}
+    {#if _options[frontend].length > 1}
+      {#if switchInstance}
+        <Row
+          class="interactive"
+          on:click={async () =>
+            browser.tabs.update({ url: switchInstance }, () => {
+              window.close()
+            })}
+        >
+          <Label>{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label>
+          <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}
@@ -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;
diff --git a/src/pages/popup_src/components/Row.svelte b/src/pages/popup_src/components/Row.svelte
index a4d78f07..064942da 100644
--- a/src/pages/popup_src/components/Row.svelte
+++ b/src/pages/popup_src/components/Row.svelte
@@ -1,13 +1,12 @@
 <div {...$$props} on:click>
-    <slot></slot>
-  </div>
-  
-  <style>
-    div {
-      justify-content: space-between;
-      display: flex;
-      align-items: center;
-      margin: 10px 0;
-    }
-  </style>
-  
\ No newline at end of file
+  <slot></slot>
+</div>
+
+<style>
+  div {
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+  }
+</style>