Added arrow icon to dropdowns. Added settings button to each service in the popup https://github.com/libredirect/browser_extension/issues/961

9 files changed, 69 insertions, 16 deletions

diff --git a/src/pages/icons/SettingsIcon.svelte b/src/pages/icons/SettingsIcon.svelte
index f47d078a..00798289 100644
--- a/src/pages/icons/SettingsIcon.svelte
+++ b/src/pages/icons/SettingsIcon.svelte
@@ -1,10 +1,13 @@
 <svg
+  {...$$restProps}
   xmlns="http://www.w3.org/2000/svg"
   height="24px"
   width="24px"
   viewBox="0 0 24 24"
   preserveAspectRatio="xMinYMin meet"
   fill="currentColor"
+  on:click
+  on:keydown={null}
 >
   <path
     d="m9.25 22-.4-3.2q-.325-.125-.612-.3-.288-.175-.563-.375L4.7 19.375l-2.75-4.75 2.575-1.95Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337L1.95 9.375l2.75-4.75 2.975 1.25q.275-.2.575-.375.3-.175.6-.3l.4-3.2h5.5l.4 3.2q.325.125.613.3.287.175.562.375l2.975-1.25 2.75 4.75-2.575 1.95q.025.175.025.337v.675q0 .163-.05.338l2.575 1.95-2.75 4.75-2.95-1.25q-.275.2-.575.375-.3.175-.6.3l-.4 3.2Zm2.8-6.5q1.45 0 2.475-1.025Q15.55 13.45 15.55 12q0-1.45-1.025-2.475Q13.5 8.5 12.05 8.5q-1.475 0-2.488 1.025Q8.55 10.55 8.55 12q0 1.45 1.012 2.475Q10.575 15.5 12.05 15.5Z"
diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte
index b5a44856..565aacef 100644
--- a/src/pages/options_src/App.svelte
+++ b/src/pages/options_src/App.svelte
@@ -2,12 +2,13 @@
   const browser = window.browser || window.chrome
 
   import General from "./General/General.svelte"
+  import url from './url'
   import utils from "../../assets/javascripts/utils.js"
   import { onDestroy } from "svelte"
   import servicesHelper from "../../assets/javascripts/services.js"
   import { onMount } from "svelte"
   import Sidebar from "./Sidebar.svelte"
-  import { options, config, page } from "./stores"
+  import { options, config } from "./stores"
   import Services from "./Services/Services.svelte"
 
   let _options
@@ -36,9 +37,6 @@
     config.set(await utils.getConfig())
   })
 
-  let _page
-  page.subscribe(val => (_page = val))
-
   const dark = {
     text: "#fff",
     bgMain: "#121212",
@@ -85,9 +83,9 @@
     --light-grey: {cssVariables.lightGrey};"
   >
     <Sidebar />
-    {#if _page == "general"}
+    {#if !$url.hash || $url.hash == "#general"}
       <General />
-    {:else if _page == "services"}
+    {:else if $url.hash.startsWith("#services")}
       <Services />
     {/if}
   </div>
diff --git a/src/pages/options_src/Services/Services.svelte b/src/pages/options_src/Services/Services.svelte
index 7c4a92b3..93afcded 100644
--- a/src/pages/options_src/Services/Services.svelte
+++ b/src/pages/options_src/Services/Services.svelte
@@ -1,6 +1,7 @@
 <script>
   const browser = window.browser || window.chrome
 
+  import url from "../url"
   import Row from "../../components/Row.svelte"
   import Label from "../../components/Label.svelte"
   import Select from "../../components/Select.svelte"
@@ -22,8 +23,7 @@
     unsubscribeOptions()
     unsubscribeConfig()
   })
-
-  let selectedService = "youtube"
+  let selectedService = $url.hash.startsWith("#services:") ? $url.hash.split(":")[1] : "youtube"
   $: serviceConf = _config.services[selectedService]
   $: serviceOptions = _options[selectedService]
   $: frontendWebsite = serviceConf.frontends[serviceOptions.frontend].url
@@ -43,7 +43,11 @@
         clearable={false}
         class="svelte_select"
         value={selectedService}
-        on:change={e => (selectedService = e.detail.value)}
+        showChevron
+        on:change={e => {
+          selectedService = e.detail.value
+          window.location.hash = `services:${e.detail.value}`
+        }}
         items={[
           ...servicesEntries.map(([serviceKey, service]) => {
             return { value: serviceKey, label: service.name }
@@ -58,6 +62,7 @@
           <ServiceIcon details={selection} />
           {selection.label}
         </div>
+        <div style="font-size: 10px;" slot="chevron-icon">🮦</div>
       </SvelteSelect>
     </div>
   </Row>
@@ -104,6 +109,7 @@
           dir="ltr"
           class="svelte_select"
           value={serviceOptions.frontend}
+          showChevron
           on:change={e => {
             serviceOptions.frontend = e.detail.value
             options.set(_options)
@@ -123,6 +129,7 @@
             <FrontendIcon details={selection} {selectedService} />
             {selection.label}
           </div>
+          <div style="font-size: 10px;" slot="chevron-icon">🮦</div>
         </SvelteSelect>
       </div>
     </Row>
diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte
index 5e2f4931..6b67581a 100644
--- a/src/pages/options_src/Sidebar.svelte
+++ b/src/pages/options_src/Sidebar.svelte
@@ -1,18 +1,18 @@
 <script>
   const browser = window.browser || window.chrome
 
-  import { page } from "./stores"
+  import url from "./url"
   import GeneralIcon from "../icons/GeneralIcon.svelte"
   import ServicesIcon from "../icons/ServicesIcon.svelte"
   import AboutIcon from "../icons/AboutIcon.svelte"
 </script>
 
 <div>
-  <a href="#general" on:click={() => page.set("general")} style={$page == "general" && "color: var(--active);"}>
+  <a href="#general" style={$url.hash == "#general" && "color: var(--active);"}>
     <GeneralIcon class="margin margin_{document.body.dir}" />
     {browser.i18n.getMessage("general") || "General"}
   </a>
-  <a href="#services" on:click={() => page.set("services")} style={$page == "services" && "color: var(--active);"}>
+  <a href="#services" style={$url.hash == "#services" && "color: var(--active);"}>
     <ServicesIcon class="margin margin_{document.body.dir}" />
     {browser.i18n.getMessage("services") || "Services"}
   </a>
diff --git a/src/pages/options_src/stores.js b/src/pages/options_src/stores.js
index 782f6064..7ae0f8c7 100644
--- a/src/pages/options_src/stores.js
+++ b/src/pages/options_src/stores.js
@@ -2,4 +2,3 @@ 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/url.js b/src/pages/options_src/url.js
new file mode 100644
index 00000000..010e5b21
--- /dev/null
+++ b/src/pages/options_src/url.js
@@ -0,0 +1,38 @@
+// https://svelte.dev/repl/5abaac000b164aa1aacc6051d5c4f584?version=3.59.2
+
+import { derived, writable } from 'svelte/store'
+
+export function createUrlStore(ssrUrl) {
+  // Ideally a bundler constant so that it's tree-shakable
+  if (typeof window === 'undefined') {
+    const { subscribe } = writable(ssrUrl)
+    return { subscribe }
+  }
+
+  const href = writable(window.location.href)
+
+  const originalPushState = history.pushState
+  const originalReplaceState = history.replaceState
+
+  const updateHref = () => href.set(window.location.href)
+
+  history.pushState = () => {
+    originalPushState.apply(this, arguments)
+    updateHref()
+  }
+
+  history.replaceState = () => {
+    originalReplaceState.apply(this, arguments)
+    updateHref()
+  }
+
+  window.addEventListener('popstate', updateHref)
+  window.addEventListener('hashchange', updateHref)
+
+  return {
+    subscribe: derived(href, ($href) => new URL($href)).subscribe
+  }
+}
+
+// If you're using in a pure SPA, you can return a store directly and share it everywhere
+export default createUrlStore()
diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte
index 52aadc74..3409052d 100644
--- a/src/pages/popup_src/App.svelte
+++ b/src/pages/popup_src/App.svelte
@@ -88,7 +88,7 @@
 
 <style>
   :global(html, body) {
-    width: 250px;
+    width: 300px;
     height: min-content;
     min-height: auto;
     margin: 0;
diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte
index 0b454675..e53a64b7 100644
--- a/src/pages/popup_src/Buttons.svelte
+++ b/src/pages/popup_src/Buttons.svelte
@@ -126,7 +126,7 @@
   }
 
   :global(img, svg) {
-    margin-right: 10px;
+    margin-right: 5px;
     margin-left: 0;
     height: 26px;
     width: 26px;
@@ -135,6 +135,6 @@
 
   :global(.rtl img, .rtl svg) {
     margin-right: 0;
-    margin-left: 10px;
+    margin-left: 5px;
   }
 </style>
diff --git a/src/pages/popup_src/components/Switch.svelte b/src/pages/popup_src/components/Switch.svelte
index f3df9317..6485f875 100644
--- a/src/pages/popup_src/components/Switch.svelte
+++ b/src/pages/popup_src/components/Switch.svelte
@@ -9,6 +9,7 @@
   import { onDestroy } from "svelte"
   import servicesHelper from "../../../assets/javascripts/services"
   import { options, config } from "../stores"
+  import SettingsIcon from "../../icons/SettingsIcon.svelte"
 
   let _options
   let _config
@@ -53,6 +54,13 @@
           window.close()
         })}
     />
+    <SettingsIcon
+      class="interactive"
+      on:click={() =>
+        browser.tabs.create({ url: browser.runtime.getURL(`pages/options/index.html#services:${serviceKey}`) }, () => {
+          window.close()
+        })}
+    />
   </div>
 </Row>