aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json1
-rw-r--r--src/assets/javascripts/localise.js34
-rw-r--r--src/pages/components/Checkbox.svelte19
-rw-r--r--src/pages/icons/ExportIcon.svelte9
-rw-r--r--src/pages/icons/ImportIcon.svelte17
-rw-r--r--src/pages/icons/PingIcon.svelte9
-rw-r--r--src/pages/icons/ResetIcon.svelte1
-rw-r--r--src/pages/options/init.js8
-rw-r--r--src/pages/options_src/App.svelte9
-rw-r--r--src/pages/options_src/General/Exceptions.svelte10
-rw-r--r--src/pages/options_src/General/General.svelte18
-rw-r--r--src/pages/options_src/General/SettingsButtons.svelte31
-rw-r--r--src/pages/options_src/Services/Instances.svelte32
-rw-r--r--src/pages/options_src/Services/RedirectType.svelte12
-rw-r--r--src/pages/options_src/Services/Services.svelte115
-rw-r--r--src/pages/options_src/Sidebar.svelte23
-rw-r--r--src/pages/popup_src/App.svelte2
-rw-r--r--src/pages/popup_src/Buttons.svelte94
-rw-r--r--src/pages/popup_src/components/Switch.svelte13
19 files changed, 251 insertions, 206 deletions
diff --git a/package.json b/package.json
index 0f89cbdb..2a79b660 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"scripts": {
"start": "web-ext run",
"nightly": "web-ext run --firefox=/home/esmail/software/firefox_nightly/firefox",
+ "start_ar": "web-ext run --firefox=/home/esmail/software/firefox_ar/firefox",
"android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix ",
"build": "web-ext build",
"test": "web-ext lint",
diff --git a/src/assets/javascripts/localise.js b/src/assets/javascripts/localise.js
deleted file mode 100644
index d26d07d4..00000000
--- a/src/assets/javascripts/localise.js
+++ /dev/null
@@ -1,34 +0,0 @@
-window.browser = window.browser || window.chrome
-
-function localisePage() {
- /**
- * @param {string} tag
- */
- function getMessage(tag) {
- return tag.replace(/__MSG_(\w+)__/g, (_match, v1) => {
- return v1 ? browser.i18n.getMessage(v1) : null
- })
- }
-
- const elements = document.querySelectorAll("[data-localise]")
- for (let i in elements)
- if (elements.hasOwnProperty(i)) {
- const obj = elements[i]
- const tag = obj.getAttribute("data-localise").toString()
- const msg = getMessage(tag)
- if (msg && msg !== tag) obj.textContent = msg
- }
-
- const placeholders = document.querySelectorAll("[data-localise-placeholder]")
- for (let i in placeholders)
- if (placeholders.hasOwnProperty(i)) {
- const obj = placeholders[i]
- const tag = obj.getAttribute("data-localise-placeholder").toString()
- const msg = getMessage(tag)
- if (msg && msg !== tag) obj.placeholder = msg
- }
-}
-
-export default {
- localisePage,
-}
diff --git a/src/pages/components/Checkbox.svelte b/src/pages/components/Checkbox.svelte
index dbefd7e9..9ba9c56c 100644
--- a/src/pages/components/Checkbox.svelte
+++ b/src/pages/components/Checkbox.svelte
@@ -1,9 +1,10 @@
<script>
export let checked
export let onChange
+ console.log(document.body.dir)
</script>
-<input {...$$restProps} bind:checked on:change={onChange} type="checkbox" />
+<input class={document.body.dir} {...$$restProps} bind:checked on:change={onChange} type="checkbox" />
<style>
input[type="checkbox"] {
@@ -40,13 +41,13 @@
left: 24px;
}
- /* body.rtl div.block input[type="checkbox"]::before {
- left: auto;
- right: 4px;
- } */
+ input[type="checkbox"].rtl::before {
+ left: auto;
+ right: 3.5px;
+ }
- /* body.rtl div.block input[type="checkbox"]:checked::before {
- left: auto;
- right: 24px;
- } */
+ input[type="checkbox"].rtl:checked::before {
+ left: auto;
+ right: 24px;
+ }
</style>
diff --git a/src/pages/icons/ExportIcon.svelte b/src/pages/icons/ExportIcon.svelte
index 196726a8..d155e5c5 100644
--- a/src/pages/icons/ExportIcon.svelte
+++ b/src/pages/icons/ExportIcon.svelte
@@ -1,4 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+<svg
+ {...$$restProps}
+ xmlns="http://www.w3.org/2000/svg"
+ height="24px"
+ viewBox="0 0 24 24"
+ width="24px"
+ fill="currentColor"
+>
<path
d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
/>
diff --git a/src/pages/icons/ImportIcon.svelte b/src/pages/icons/ImportIcon.svelte
index f022b4f0..f64d0ff6 100644
--- a/src/pages/icons/ImportIcon.svelte
+++ b/src/pages/icons/ImportIcon.svelte
@@ -1,5 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
- <path
- d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
- />
- </svg> \ No newline at end of file
+<svg
+ {...$$restProps}
+ xmlns="http://www.w3.org/2000/svg"
+ height="24px"
+ viewBox="0 0 24 24"
+ width="24px"
+ fill="currentColor"
+>
+ <path
+ d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+ />
+</svg>
diff --git a/src/pages/icons/PingIcon.svelte b/src/pages/icons/PingIcon.svelte
index 8fcfe27b..34c4a37d 100644
--- a/src/pages/icons/PingIcon.svelte
+++ b/src/pages/icons/PingIcon.svelte
@@ -1,4 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+<svg
+ {...$$restProps}
+ xmlns="http://www.w3.org/2000/svg"
+ height="20px"
+ viewBox="0 0 24 24"
+ width="20px"
+ fill="currentColor"
+>
<path
d="M10.45 15.5q.6.6 1.55.587.95-.012 1.4-.687L19 7l-8.4 5.6q-.675.45-.712 1.375-.038.925.562 1.525ZM12 4q1.475 0 2.838.412Q16.2 4.825 17.4 5.65l-1.9 1.2q-.825-.425-1.712-.637Q12.9 6 12 6 8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.212-1.75-.213-.85-.638-1.65l1.2-1.9q.75 1.175 1.188 2.5.437 1.325.462 2.75.025 1.425-.325 2.725-.35 1.3-1.025 2.475-.275.45-.75.7-.475.25-1 .25H5.1q-.525 0-1-.25t-.75-.7q-.65-1.125-1-2.387Q2 15.4 2 14q0-2.075.788-3.888.787-1.812 2.15-3.175Q6.3 5.575 8.125 4.787 9.95 4 12 4Zm.175 7.825Z"
/></svg
diff --git a/src/pages/icons/ResetIcon.svelte b/src/pages/icons/ResetIcon.svelte
index 0900aef8..6daf57e6 100644
--- a/src/pages/icons/ResetIcon.svelte
+++ b/src/pages/icons/ResetIcon.svelte
@@ -5,6 +5,7 @@
viewBox="0 0 24 24"
width="24px"
fill="currentColor"
+ {...$$restProps}
>
<path
d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"
diff --git a/src/pages/options/init.js b/src/pages/options/init.js
deleted file mode 100644
index 5a7ffb6e..00000000
--- a/src/pages/options/init.js
+++ /dev/null
@@ -1,8 +0,0 @@
-window.browser = window.browser || window.chrome
-import localise from "../../assets/javascripts/localise.js"
-
-if (["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage())) {
- document.getElementsByTagName("body")[0].classList.add("rtl")
- document.getElementsByTagName("body")[0].dir = "rtl"
-}
-localise.localisePage() \ No newline at end of file
diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte
index 8b0d3c54..dfafe1f0 100644
--- a/src/pages/options_src/App.svelte
+++ b/src/pages/options_src/App.svelte
@@ -1,5 +1,5 @@
<script>
- let browser = window.browser || window.chrome
+ const browser = window.browser || window.chrome
import General from "./General/General.svelte"
import utils from "../../assets/javascripts/utils.js"
@@ -67,12 +67,15 @@
cssVariables = light
}
}
+
+ const dir = ["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage()) ? "rtl" : "ltr"
+ document.body.dir = dir
</script>
{#if _options && _config}
<div
- class="main"
- dir="auto"
+ class={dir}
+ {dir}
style="
--text: {cssVariables.text};
--bg-main: {cssVariables.bgMain};
diff --git a/src/pages/options_src/General/Exceptions.svelte b/src/pages/options_src/General/Exceptions.svelte
index 4ef5591b..7315877d 100644
--- a/src/pages/options_src/General/Exceptions.svelte
+++ b/src/pages/options_src/General/Exceptions.svelte
@@ -1,4 +1,6 @@
<script>
+ const browser = window.browser || window.chrome
+
import Row from "../../components/Row.svelte"
import Select from "../../components/Select.svelte"
import AddIcon from "../../icons/AddIcon.svelte"
@@ -54,10 +56,10 @@
}
</script>
-<div class="block block-option">
- <Row>
- <Label>Excluded from redirecting</Label>
- </Row>
+<Row>
+ <Label>{browser.i18n.getMessage("excludeFromRedirecting") || "Excluded from redirecting"}</Label>
+</Row>
+<div dir="ltr">
<Row>
<div>
<Input
diff --git a/src/pages/options_src/General/General.svelte b/src/pages/options_src/General/General.svelte
index 2cf65285..732ad83b 100644
--- a/src/pages/options_src/General/General.svelte
+++ b/src/pages/options_src/General/General.svelte
@@ -1,5 +1,5 @@
<script>
- let browser = window.browser || window.chrome
+ const browser = window.browser || window.chrome
import Exceptions from "./Exceptions.svelte"
import SettingsButtons from "./SettingsButtons.svelte"
@@ -26,12 +26,12 @@
<div>
<Row>
- <Label>Theme</Label>
+ <Label>{browser.i18n.getMessage("theme") || "Theme"}</Label>
<Select
values={[
- { value: "detect", name: "Auto" },
- { value: "light", name: "Light" },
- { value: "dark", name: "Dark" },
+ { value: "detect", name: browser.i18n.getMessage("auto") || "Auto" },
+ { value: "light", name: browser.i18n.getMessage("light") || "Light" },
+ { value: "dark", name: browser.i18n.getMessage("dark") || "Dark" },
]}
value={_options.theme}
onChange={e => {
@@ -43,13 +43,13 @@
</Row>
<Row>
- <Label>Fetch public instances</Label>
+ <Label>{browser.i18n.getMessage("fetchPublicInstances") || "Fetch public instances"}</Label>
<Select
value={_options.fetchInstances}
values={[
{ value: "github", name: "GitHub" },
{ value: "codeberg", name: "Codeberg" },
- { value: "disable", name: "Disable" },
+ { value: "disable", name: browser.i18n.getMessage("disable") || "Disable" },
]}
onChange={e => {
_options.fetchInstances = e.target.options[e.target.options.selectedIndex].value
@@ -60,7 +60,7 @@
</Row>
<Row>
- <Label>Redirect Only in Incognito</Label>
+ <Label>{browser.i18n.getMessage("redirectOnlyInIncognito") || "Redirect Only in Incognito"}</Label>
<Checkbox
checked={_options.redirectOnlyInIncognito}
onChange={e => {
@@ -71,7 +71,7 @@
</Row>
<Row>
- <Label>Bookmarks menu</Label>
+ <Label>{browser.i18n.getMessage("bookmarksMenu") || "Bookmarks menu"}</Label>
<Checkbox bind:checked={bookmarksPermission} />
</Row>
diff --git a/src/pages/options_src/General/SettingsButtons.svelte b/src/pages/options_src/General/SettingsButtons.svelte
index c37a3702..3ea46a2d 100644
--- a/src/pages/options_src/General/SettingsButtons.svelte
+++ b/src/pages/options_src/General/SettingsButtons.svelte
@@ -1,5 +1,5 @@
<script>
- let browser = window.browser || window.chrome
+ const browser = window.browser || window.chrome
import { onDestroy } from "svelte"
import Button from "../../components/Button.svelte"
@@ -85,8 +85,8 @@
<div class="buttons">
<Button on:click={() => importSettingsInput.click()} disabled={disableButtons}>
- <ImportIcon />
- <x data-localise="__MSG_importSettings__">Import Settings</x>
+ <ImportIcon class="margin margin_{document.body.dir}" />
+ <x data-localise="__MSG_importSettings__">{browser.i18n.getMessage("importSettings") || "Import Settings"}</x>
</Button>
<input
type="file"
@@ -97,22 +97,33 @@
/>
<Button on:click={exportSettings} disabled={disableButtons}>
- <ExportIcon />
- <x data-localise="__MSG_exportSettings__">Export Settings</x>
+ <ExportIcon class="margin margin_{document.body.dir}" />
+ <x data-localise="__MSG_exportSettings__">{browser.i18n.getMessage("exportSettings") || "Export Settings"}</x>
</Button>
<Button on:click={exportSettingsSync} disabled={disableButtons}>
- <ExportIcon />
+ <ExportIcon class="margin margin_{document.body.dir}" />
<x>Export Settings to Sync</x>
</Button>
<Button on:click={importSettingsSync} disabled={disableButtons}>
- <ImportIcon />
- <x>Import Settings from Sync</x>
+ <ImportIcon class="margin margin_{document.body.dir}" />
+ <x>{browser.i18n.getMessage("importSettingsFromSync") || "Import Settings from Sync"}</x>
</Button>
<Button on:click={resetSettings} disabled={disableButtons}>
- <ResetIcon />
- <x>Reset Settings</x>
+ <ResetIcon class="margin margin_{document.body.dir}" />
+ <x>{browser.i18n.getMessage("resetSettings") || "Reset Settings"}</x>
</Button>
</div>
+
+<style>
+ :global(.margin) {
+ margin-right: 10px;
+ margin-left: 0;
+ }
+ :global(.margin_rtl) {
+ margin-right: 0;
+ margin-left: 10px;
+ }
+</style>
diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte
index e62d410d..862bbf7e 100644
--- a/src/pages/options_src/Services/Instances.svelte
+++ b/src/pages/options_src/Services/Instances.svelte
@@ -1,5 +1,5 @@
<script>
- let browser = window.browser || window.chrome
+ const browser = window.browser || window.chrome
import Button from "../../components/Button.svelte"
import AddIcon from "../../icons/AddIcon.svelte"
@@ -28,7 +28,6 @@
let blacklist
let redirects
- $: serviceOptions = _options[selectedService]
$: serviceConf = _config.services[selectedService]
let allInstances = []
@@ -103,18 +102,18 @@
{#if serviceConf.frontends[selectedFrontend].instanceList && redirects && blacklist}
<hr />
- <div dir="ltr">
- <div class="ping">
- <Button on:click={pingInstances}>
- <PingIcon />
- Ping Instances
- </Button>
- </div>
- <Row>
- <Label>Add your favorite instances</Label>
- </Row>
+ <div class="ping">
+ <Button on:click={pingInstances}>
+ <PingIcon class="margin margin_{document.body.dir}" />
+ {browser.i18n.getMessage("pingInstances") || "Ping Instances"}
+ </Button>
+ </div>
+ <Row>
+ <Label>{browser.i18n.getMessage("addYourFavoriteInstances") || "Add your favorite instances"}</Label>
+ </Row>
+ <div dir="ltr">
<Row>
<Input
bind:value={addInstanceValue}
@@ -231,4 +230,13 @@
a:hover {
text-decoration: underline;
}
+
+ :global(.margin) {
+ margin-right: 10px;
+ margin-left: 0;
+ }
+ :global(.margin_rtl) {
+ margin-right: 0;
+ margin-left: 10px;
+ }
</style>
diff --git a/src/pages/options_src/Services/RedirectType.svelte b/src/pages/options_src/Services/RedirectType.svelte
index 11044080..29c169bc 100644
--- a/src/pages/options_src/Services/RedirectType.svelte
+++ b/src/pages/options_src/Services/RedirectType.svelte
@@ -1,4 +1,6 @@
<script>
+ const browser = window.browser || window.chrome
+
import { onDestroy } from "svelte"
import SvelteSelect from "svelte-select"
import { options, config } from "../stores"
@@ -26,9 +28,9 @@
let values
$: if (serviceConf.frontends[frontendName].embeddable) {
values = [
- { value: "both", name: "Both" },
- { value: "sub_frame", name: "Only Embedded" },
- { value: "main_frame", name: "Only Not Embedded" },
+ { value: "both", name: browser.i18n.getMessage("both") || "Both" },
+ { value: "sub_frame", name: browser.i18n.getMessage("onlyEmbedded") || "Only Embedded" },
+ { value: "main_frame", name: browser.i18n.getMessage("onlyNotEmbedded") || "Only Not Embedded" },
]
} else if (
serviceConf.frontends[frontendName].desktopApp &&
@@ -63,7 +65,7 @@
</script>
<Row>
- <Label>Redirect Type</Label>
+ <Label>{browser.i18n.getMessage("redirectType") || "Redirect Type"}</Label>
<Select
value={serviceOptions.redirectType}
onChange={e => {
@@ -76,7 +78,7 @@
{#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"}
<Row>
- <Label>Embed Frontend</Label>
+ <Label>{browser.i18n.getMessage("embedFrontend") || "Embed Frontend"}</Label>
<SvelteSelect
clearable={false}
class="svelte_select"
diff --git a/src/pages/options_src/Services/Services.svelte b/src/pages/options_src/Services/Services.svelte
index 9c4e6c97..4e719447 100644
--- a/src/pages/options_src/Services/Services.svelte
+++ b/src/pages/options_src/Services/Services.svelte
@@ -1,4 +1,6 @@
<script>
+ const browser = window.browser || window.chrome
+
import Row from "../../components/Row.svelte"
import Label from "../../components/Label.svelte"
import Select from "../../components/Select.svelte"
@@ -33,32 +35,34 @@
Service:
<a href={serviceConf.url} target="_blank" rel="noopener noreferrer">{serviceConf.url}</a>
</Label>
- <SvelteSelect
- clearable={false}
- class="svelte_select"
- value={selectedService}
- on:change={e => (selectedService = e.detail.value)}
- items={[
- ...Object.entries(_config.services).map(([serviceKey, service]) => {
- return { value: serviceKey, label: service.name }
- }),
- ]}
- >
- <div class="slot" slot="item" let:item>
- <ServiceIcon details={item} />
- {item.label}
- </div>
- <div class="slot" slot="selection" let:selection>
- <ServiceIcon details={selection} />
- {selection.label}
- </div>
- </SvelteSelect>
+ <div dir="ltr">
+ <SvelteSelect
+ clearable={false}
+ class="svelte_select"
+ value={selectedService}
+ on:change={e => (selectedService = e.detail.value)}
+ items={[
+ ...Object.entries(_config.services).map(([serviceKey, service]) => {
+ return { value: serviceKey, label: service.name }
+ }),
+ ]}
+ >
+ <div class="slot" slot="item" let:item>
+ <ServiceIcon details={item} />
+ {item.label}
+ </div>
+ <div class="slot" slot="selection" let:selection>
+ <ServiceIcon details={selection} />
+ {selection.label}
+ </div>
+ </SvelteSelect>
+ </div>
</Row>
<hr />
<Row>
- <Label>Enable</Label>
+ <Label>{browser.i18n.getMessage("enable") || "Enable"}</Label>
<Checkbox
checked={serviceOptions.enabled}
onChange={e => {
@@ -70,7 +74,7 @@
<div style={!serviceOptions.enabled && "pointer-events: none;opacity: 0.4;user-select: none;"}>
<Row>
- <Label>Show in popup</Label>
+ <Label>{browser.i18n.getMessage("showInPopup") || "Show in popup"}</Label>
<Checkbox
checked={_options.popupServices.includes(selectedService)}
onChange={e => {
@@ -87,42 +91,44 @@
<Row>
<Label>
- Frontend:
+ {browser.i18n.getMessage("frontend") || "Frontend"}:
<a href={frontendWebsite} target="_blank" rel="noopener noreferrer">
{frontendWebsite}
</a>
</Label>
-
- <SvelteSelect
- clearable={false}
- class="svelte_select"
- value={serviceOptions.frontend}
- on:change={e => {
- serviceOptions.frontend = e.detail.value
- options.set(_options)
- }}
- items={[
- ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({
- value: frontendId,
- label: frontend.name,
- })),
- ]}
- >
- <div class="slot" slot="item" let:item>
- <FrontendIcon details={item} {selectedService} />
- {item.label}
- </div>
- <div class="slot" slot="selection" let:selection>
- <FrontendIcon details={selection} {selectedService} />
- {selection.label}
- </div>
- </SvelteSelect>
+ <div dir="ltr">
+ <SvelteSelect
+ clearable={false}
+ dir="ltr"
+ class="svelte_select"
+ value={serviceOptions.frontend}
+ on:change={e => {
+ serviceOptions.frontend = e.detail.value
+ options.set(_options)
+ }}
+ items={[
+ ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({
+ value: frontendId,
+ label: frontend.name,
+ })),
+ ]}
+ >
+ <div class="slot" slot="item" let:item>
+ <FrontendIcon details={item} {selectedService} />
+ {item.label}
+ </div>
+ <div class="slot" slot="selection" let:selection>
+ <FrontendIcon details={selection} {selectedService} />
+ {selection.label}
+ </div>
+ </SvelteSelect>
+ </div>
</Row>
<RedirectType {selectedService} />
<Row>
- <Label>Unsupported embeds handling</Label>
+ <Label>{browser.i18n.getMessage("unsupportedIframesHandling") || "Unsupported embeds handling"}</Label>
<Select
value={serviceOptions.unsupportedUrls}
onChange={e => {
@@ -130,8 +136,8 @@
options.set(_options)
}}
values={[
- { value: "bypass", name: "Bypass" },
- { value: "block", name: "Block" },
+ { value: "bypass", name: browser.i18n.getMessage("bypass") || "Bypass" },
+ { value: "block", name: browser.i18n.getMessage("block") || "Block" },
]}
/>
</Row>
@@ -139,13 +145,14 @@
{#if selectedService == "search"}
<Row>
<Label>
- Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click
+ {@html browser.i18n.getMessage("searchHint") ||
+ `Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click
<a
href="https://libredirect.github.io/docs.html#search_engine_chromium"
target="_blank"
rel="noopener noreferrer"
>here
- </a>.
+ </a>.`}
</Label>
</Row>
{/if}
@@ -184,8 +191,10 @@
justify-content: start;
align-items: center;
}
+
:global(.svelte_select img, .svelte_select svg) {
margin-right: 10px;
+ margin-left: 0;
height: 26px;
width: 26px;
color: var(--text);
diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte
index 4a808268..fb515f53 100644
--- a/src/pages/options_src/Sidebar.svelte
+++ b/src/pages/options_src/Sidebar.svelte
@@ -1,4 +1,6 @@
<script>
+ const browser = window.browser || window.chrome
+
import { page } from "./stores"
import GeneralIcon from "../icons/GeneralIcon.svelte"
import ServicesIcon from "../icons/ServicesIcon.svelte"
@@ -7,16 +9,16 @@
<div>
<a href="#general" on:click={() => page.set("general")} style={$page == "general" && "color: var(--active);"}>
- <GeneralIcon style="margin-right: 5px" />
- <span data-localise="__MSG_general__">General</span>
+ <GeneralIcon class="margin margin_{document.body.dir}" />
+ <span data-localise="__MSG_general__">{browser.i18n.getMessage("general") || "General"}</span>
</a>
<a href="#services" on:click={() => page.set("services")} style={$page == "services" && "color: var(--active);"}>
- <ServicesIcon style="margin-right: 5px" />
- <span data-localise="__MSG_services__">Services</span>
+ <ServicesIcon class="margin margin_{document.body.dir}" />
+ <span data-localise="__MSG_services__">{browser.i18n.getMessage("general") || "Services"}</span>
</a>
<a href="https://libredirect.github.io" target="_blank" rel="noopener noreferrer">
- <AboutIcon style="margin-right: 5px" />
- <span data-localise="__MSG_about__">About</span>
+ <AboutIcon class="margin margin_{document.body.dir}" />
+ <span data-localise="__MSG_about__">{browser.i18n.getMessage("about") || "About"}</span>
</a>
</div>
@@ -54,4 +56,13 @@
margin: 5px;
}
}
+
+ :global(.margin) {
+ margin-right: 5px;
+ margin-left: 0;
+ }
+ :global(.margin_rtl) {
+ margin-right: 0;
+ margin-left: 5px;
+ }
</style>
diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte
index cf88234d..df37d55d 100644
--- a/src/pages/popup_src/App.svelte
+++ b/src/pages/popup_src/App.svelte
@@ -1,5 +1,5 @@
<script>
- let browser = window.browser || window.chrome
+ const browser = window.browser || window.chrome
import utils from "../../assets/javascripts/utils.js"
import { onDestroy } from "svelte"
diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte
index 449404ba..bfa162f8 100644
--- a/src/pages/popup_src/Buttons.svelte
+++ b/src/pages/popup_src/Buttons.svelte
@@ -1,5 +1,5 @@
<script>
- let browser = window.browser || window.chrome
+ const browser = window.browser || window.chrome
import Row from "./components/Row.svelte"
import Label from "../components/Label.svelte"
@@ -39,55 +39,57 @@
})
</script>
-{#if redirect}
- <Row class="interactive" on:click={() => browser.runtime.sendMessage("redirectTab")}>
- <Label>Redirect</Label>
- <RedirectIcon />
- </Row>
-{/if}
-
-{#if switchInstance}
- <Row
- class="interactive"
- on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}
- >
- <Label>Switch Instance</Label>
- <SwitchInstanceIcon />
- </Row>
-{/if}
+<div class={document.body.dir}>
+ {#if redirect}
+ <Row class="interactive" on:click={() => browser.runtime.sendMessage("redirectTab")}>
+ <Label>{browser.i18n.getMessage("redirect") || "Redirect"}</Label>
+ <RedirectIcon />
+ </Row>
+ {/if}
-{#if redirectToOriginal}
- <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}>
- <Label>Copy Original</Label>
- <CopyIcon />
- </Row>
- <Row class="interactive" on:click={() => browser.runtime.sendMessage("reverseTab")}>
- <Label>Redirect To Original</Label>
- <RedirectToOriginalIcon />
- </Row>
-{/if}
+ {#if switchInstance}
+ <Row
+ class="interactive"
+ on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}
+ >
+ <Label>{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label>
+ <SwitchInstanceIcon />
+ </Row>
+ {/if}
-{#if redirect || switchInstance || redirectToOriginal}
- <hr />
-{/if}
+ {#if redirectToOriginal}
+ <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}>
+ <Label>{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label>
+ <CopyIcon />
+ </Row>
+ <Row class="interactive" on:click={() => browser.runtime.sendMessage("reverseTab")}>
+ <Label>{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label>
+ <RedirectToOriginalIcon />
+ </Row>
+ {/if}
-{#if currentService}
- <Switch serviceKey={currentService} {url} />
- <hr />
-{/if}
+ {#if redirect || switchInstance || redirectToOriginal}
+ <hr />
+ {/if}
-{#each _options.popupServices as serviceKey}
- {#if currentService !== serviceKey}
- <Switch {serviceKey} {url} />
+ {#if currentService}
+ <Switch serviceKey={currentService} {url} />
+ <hr />
{/if}
-{/each}
-<hr />
+ {#each _options.popupServices as serviceKey}
+ {#if currentService !== serviceKey}
+ <Switch {serviceKey} {url} />
+ {/if}
+ {/each}
+
+ <hr />
-<Row class="interactive" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}>
- <Label>Settings</Label>
- <SettingsIcon />
-</Row>
+ <Row class="interactive" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}>
+ <Label>{browser.i18n.getMessage("settings")}</Label>
+ <SettingsIcon />
+ </Row>
+</div>
<style>
:global(.interactive) {
@@ -103,8 +105,14 @@
:global(img, svg) {
margin-right: 10px;
+ margin-left: 0;
height: 26px;
width: 26px;
color: var(--text);
}
+
+ :global(.rtl img, .rtl svg) {
+ margin-right: 0;
+ margin-left: 10px;
+ }
</style>
diff --git a/src/pages/popup_src/components/Switch.svelte b/src/pages/popup_src/components/Switch.svelte
index f420caa1..e581e5f4 100644
--- a/src/pages/popup_src/components/Switch.svelte
+++ b/src/pages/popup_src/components/Switch.svelte
@@ -1,5 +1,5 @@
<script>
- let browser = window.browser || window.chrome
+ const browser = window.browser || window.chrome
import Checkbox from "../../components/Checkbox.svelte"
import Label from "../../components/Label.svelte"
@@ -35,7 +35,7 @@
</div>
<div>
<Checkbox
- style="margin-right:5px"
+ class="margin margin_{document.body.dir}"
label="Enable"
checked={_options[serviceKey].enabled}
onChange={e => {
@@ -55,4 +55,13 @@
display: flex;
align-items: center;
}
+
+ :global(.margin) {
+ margin-right: 5px;
+ margin-left: 0;
+ }
+ :global(.margin_rtl) {
+ margin-right: 0;
+ margin-left: 5px;
+ }
</style>
generated by cgit v1.3.1 (git 2.54.0) at 2026-06-18 17:39:10 +0000