From e97b618660094491013d9d4999ac4802429f3dc7 Mon Sep 17 00:00:00 2001
From: ManeraKai <manerakai@protonmail.com>
Date: Fri, 26 Jul 2024 23:53:31 +0300
Subject: Added translation support to Svelte

---
 src/pages/components/Checkbox.svelte               |  19 ++--
 src/pages/icons/ExportIcon.svelte                  |   9 +-
 src/pages/icons/ImportIcon.svelte                  |  17 ++-
 src/pages/icons/PingIcon.svelte                    |   9 +-
 src/pages/icons/ResetIcon.svelte                   |   1 +
 src/pages/options/init.js                          |   8 --
 src/pages/options_src/App.svelte                   |   9 +-
 src/pages/options_src/General/Exceptions.svelte    |  10 +-
 src/pages/options_src/General/General.svelte       |  18 ++--
 .../options_src/General/SettingsButtons.svelte     |  31 ++++--
 src/pages/options_src/Services/Instances.svelte    |  32 +++---
 src/pages/options_src/Services/RedirectType.svelte |  12 ++-
 src/pages/options_src/Services/Services.svelte     | 115 +++++++++++----------
 src/pages/options_src/Sidebar.svelte               |  23 +++--
 src/pages/popup_src/App.svelte                     |   2 +-
 src/pages/popup_src/Buttons.svelte                 |  94 +++++++++--------
 src/pages/popup_src/components/Switch.svelte       |  13 ++-
 17 files changed, 250 insertions(+), 172 deletions(-)
 delete mode 100644 src/pages/options/init.js

(limited to 'src/pages')

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>
-- 
cgit 1.4.1