From 97d390737e7e953fe1e6559e41963c547b31afa0 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Thu, 29 Aug 2024 13:36:21 +0300 Subject: Improving popup messages --- src/pages/background/background.js | 21 +++- src/pages/components/Button.svelte | 10 +- src/pages/messages/index.html | 14 +++ src/pages/messages/no_instance.html | 24 ----- src/pages/messages_src/App.svelte | 132 ++++++++++++++++++++++++ src/pages/messages_src/main.js | 7 ++ src/pages/messages_src/stores.js | 5 + src/pages/options_src/App.svelte | 44 +------- src/pages/options_src/Services/Instances.svelte | 13 +-- src/pages/popup_src/App.svelte | 42 +------- 10 files changed, 193 insertions(+), 119 deletions(-) create mode 100644 src/pages/messages/index.html delete mode 100644 src/pages/messages/no_instance.html create mode 100644 src/pages/messages_src/App.svelte create mode 100644 src/pages/messages_src/main.js create mode 100644 src/pages/messages_src/stores.js (limited to 'src/pages') diff --git a/src/pages/background/background.js b/src/pages/background/background.js index f41cb55e..db7ad087 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -67,10 +67,25 @@ browser.webRequest.onBeforeRequest.addListener( tabIdRedirects[details.tabId] ) + if (newUrl && newUrl.startsWith("https://no-instance.libredirect.invalid")) { + const url = new URL(newUrl) + const frontend = url.searchParams.get("frontend") + const oldUrl = new URL(url.searchParams.get("url")) + + browser.tabs.update({ + url: browser.runtime.getURL( + `/pages/messages/index.html?message=no_instance&url=${encodeURIComponent(oldUrl)}&frontend=${encodeURIComponent(frontend)}` + ), + }) + } + if (!newUrl) { - const match = url.href.match(/^https?:\/{2}(.*\.)?libredirect\.invalid.*/) - if (match) { - browser.tabs.update({ url: browser.runtime.getURL(`/pages/messages/no_instance.html`) }) + if (url.href.match(/^https?:\/{2}(.*\.)?libredirect\.invalid.*/)) { + browser.tabs.update({ + url: browser.runtime.getURL( + `/pages/messages/index.html?message=disabled&url=${encodeURIComponent(url.href)}` + ), + }) } } diff --git a/src/pages/components/Button.svelte b/src/pages/components/Button.svelte index 8836b47e..6ae2ba61 100644 --- a/src/pages/components/Button.svelte +++ b/src/pages/components/Button.svelte @@ -19,11 +19,17 @@ padding: 10px; } - button:hover { + button:hover:enabled { color: var(--active); } - button:active { + button:active:enabled { transform: translateY(1px); } + + button:disabled { + cursor: not-allowed; + opacity: 0.5; + } + diff --git a/src/pages/messages/index.html b/src/pages/messages/index.html new file mode 100644 index 00000000..8701c152 --- /dev/null +++ b/src/pages/messages/index.html @@ -0,0 +1,14 @@ + + + + + + + Settings + + + + + + + diff --git a/src/pages/messages/no_instance.html b/src/pages/messages/no_instance.html deleted file mode 100644 index 55e5fac7..00000000 --- a/src/pages/messages/no_instance.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - No instances found - - - - -

LibRedirect: You have no instance selected for this frontend

- - diff --git a/src/pages/messages_src/App.svelte b/src/pages/messages_src/App.svelte new file mode 100644 index 00000000..b08a143b --- /dev/null +++ b/src/pages/messages_src/App.svelte @@ -0,0 +1,132 @@ + + +{#if _options && _config} +

+ {#if window.location.search.includes("message=disabled")} +

You disabled redirections for this service

+ +

+ {:else if window.location.search.includes("message=no_instance")} +

You have no instance selected for this frontend

+ +

+ {/if} +

+{:else} +

+{/if} + + diff --git a/src/pages/messages_src/main.js b/src/pages/messages_src/main.js new file mode 100644 index 00000000..c4012f4a --- /dev/null +++ b/src/pages/messages_src/main.js @@ -0,0 +1,7 @@ +import App from "./App.svelte" + +const app = new App({ + target: document.body, +}) + +export default app diff --git a/src/pages/messages_src/stores.js b/src/pages/messages_src/stores.js new file mode 100644 index 00000000..782f6064 --- /dev/null +++ b/src/pages/messages_src/stores.js @@ -0,0 +1,5 @@ +import { writable } from "svelte/store" + +export const options = writable(null) +export const config = writable(null) +export const page = writable("general") diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte index 565aacef..1c4830bf 100644 --- a/src/pages/options_src/App.svelte +++ b/src/pages/options_src/App.svelte @@ -2,7 +2,7 @@ const browser = window.browser || window.chrome import General from "./General/General.svelte" - import url from './url' + import url from "./url" import utils from "../../assets/javascripts/utils.js" import { onDestroy } from "svelte" import servicesHelper from "../../assets/javascripts/services.js" @@ -37,51 +37,15 @@ config.set(await utils.getConfig()) }) - const dark = { - text: "#fff", - bgMain: "#121212", - bgSecondary: "#202020", - active: "#fbc117", - danger: "#f04141", - lightGrey: "#c3c3c3", - } - const light = { - text: "black", - bgMain: "white", - bgSecondary: "#e4e4e4", - active: "#fb9817", - danger: "#f04141", - lightGrey: "#c3c3c3", - } - let cssVariables - $: if (_options) { - if (_options.theme == "dark") { - cssVariables = dark - } else if (_options.theme == "light") { - cssVariables = light - } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) { - cssVariables = dark - } else { - cssVariables = light - } - } + let style + $: if (_options) style = utils.style(_options, window) const dir = ["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage()) ? "rtl" : "ltr" document.body.dir = dir {#if _options && _config} -

{#if !$url.hash || $url.hash == "#general"} diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte index 32425b80..4e5d1e7d 100644 --- a/src/pages/options_src/Services/Instances.svelte +++ b/src/pages/options_src/Services/Instances.svelte @@ -64,16 +64,9 @@ pingCache[instance] = colorTime(time) } } - function randomInstances(n) { - let instances = [] - for (let i = 0; i < n; i++) { - instances.push(redirects[selectedFrontend]["clearnet"][Math.floor(Math.random() * allInstances.length)]) - } - return instances - } async function autoPickInstance() { - const instances = randomInstances(5) + const instances = utils.randomInstances(redirects[selectedFrontend]["clearnet"], 5) const myInstancesCache = [] for (const instance of instances) { pingCache[instance] = { color: "lightblue", value: "pinging..." } @@ -81,9 +74,7 @@ pingCache[instance] = colorTime(time) myInstancesCache.push([instance, time]) } - myInstancesCache.sort(function (a, b) { - return a[1] - b[1] - }) + myInstancesCache.sort((a, b) => a[1] - b[1]) _options[selectedFrontend].push(myInstancesCache[0][0]) options.set(_options) diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte index 8f958a3e..f6699312 100644 --- a/src/pages/popup_src/App.svelte +++ b/src/pages/popup_src/App.svelte @@ -38,48 +38,12 @@ let _page page.subscribe(val => (_page = val)) - const dark = { - text: "#fff", - bgMain: "#121212", - bgSecondary: "#202020", - active: "#fbc117", - danger: "#f04141", - lightGrey: "#c3c3c3", - } - const light = { - text: "black", - bgMain: "white", - bgSecondary: "#e4e4e4", - active: "#fb9817", - danger: "#f04141", - lightGrey: "#c3c3c3", - } - let cssVariables - $: if (_options) { - if (_options.theme == "dark") { - cssVariables = dark - } else if (_options.theme == "light") { - cssVariables = light - } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) { - cssVariables = dark - } else { - cssVariables = light - } - } + let style + $: if (_options) style = utils.style(_options, window) {#if _options && _config} -

{:else} -- cgit 1.4.1