Move settings to the options page

src/components/Headers/HomeHeader.vue

@@ -5,7 +5,7 @@ import FeCog from '@/components/Icons/FeCog.vue';
 import FeGlobe from '@/components/Icons/FeGlobe.vue';
 import TaRoute from '@/components/Icons/TaRoute.vue';
 
-import { openOptions } from '@/helpers/extensionNavigation';
+import { openOptions } from '@/helpers/browserExtension';
 </script>
 
 <template>
@@ -31,7 +31,7 @@ import { openOptions } from '@/helpers/extensionNavigation';
 
     <div
       class="flex flex-row items-center justify-center px-4 hover:text-white bg-[var(--blue)] cursor-pointer"
-      @click="openOptions"
+      @click="openOptions()"
     >
       <n-icon size="20">
         <FeCog />

src/components/Headers/ProxyHeader.vue

@@ -5,7 +5,7 @@ import FeCog from '@/components/Icons/FeCog.vue';
 import FeGlobe from '@/components/Icons/FeGlobe.vue';
 import TaRoute from '@/components/Icons/TaRoute.vue';
 
-import { openOptions } from '@/helpers/extensionNavigation';
+import { openOptions, Tab } from '@/helpers/browserExtension';
 </script>
 
 <template>
@@ -31,7 +31,7 @@ import { openOptions } from '@/helpers/extensionNavigation';
 
     <div
       class="flex flex-row items-center justify-center px-4 hover:text-white bg-[var(--blue)] cursor-pointer"
-      @click="openOptions"
+      @click="openOptions(Tab.PROXY)"
     >
       <n-icon size="20">
         <FeCog />

src/components/NotificationsCarousel.vue

@@ -8,7 +8,7 @@ import IconLabel from '@/components/IconLabel.vue';
 import FeArrowLeft from '@/components/Icons/FeArrowLeft.vue';
 import FeArrowRight from '@/components/Icons/FeArrowRight.vue';
 
-import { closePopup } from '@/helpers/extensionNavigation';
+import { closePopup, openOptions, Tab } from '@/helpers/browserExtension';
 
 import useRecommendations from '@/composables/useRecommendations/useRecommendations';
 import useWarnings from '@/composables/useWarnings/useWarnings';
@@ -69,7 +69,7 @@ const activeNotifications = computed(() => {
             >
               <ExternalLinkIconLabel v-if="notification.ctaLabel" :text="notification.ctaLabel" />
             </Button>
-            <Button :to="`/settings#${notification.id}`"> Learn more </Button>
+            <Button @click="openOptions(Tab.SETTINGS)"> Learn More </Button>
           </div>
           <div v-else class="mt-3 flex items-center">
             <Button :href="notification.ctaUrl" @click="closePopup"> Read more </Button>

src/components/OptionsTabs/AboutTab.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { NCard, NTag } from 'naive-ui';
+
+import FeGithub from '@/components/Icons/FeGithub.vue';
+import FeInfo from '@/components/Icons/FeInfo.vue';
+
+import { version } from '@/helpers/browserExtension';
+</script>
+
+<template>
+  <div class="flex items-center p-3 pb-1">
+    <n-tag round :bordered="false" type="info" class="mr-4">
+      <a href="https://github.com/mullvad/browser-extension/releases">
+        {{ version }} | Changelog
+      </a>
+      <template #icon>
+        <FeInfo />
+      </template>
+    </n-tag>
+    <n-tag round :bordered="false" type="info">
+      <a href="https://github.com/mullvad/browser-extension"> Source code </a>
+      <template #icon>
+        <FeGithub />
+      </template>
+    </n-tag>
+  </div>
+
+  <n-card class="mt-4">
+    <p>
+      Mullvad Browser Extension as a whole is licensed
+      <a href="https://github.com/mullvad/browser-extension/blob/master/LICENSE.md"> GPLv3+</a>
+      except for the parts specified below:
+    </p>
+
+    <ul list="disc inside" class="py-2">
+      <li>
+        Open Sans -
+        <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>
+      </li>
+      <li>
+        Source Sans Pro -
+        <a href="https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL">
+          Open Font License
+        </a>
+      </li>
+      <li>
+        Feather Icon -
+        <a href="https://github.com/feathericon/feathericon/blob/master/LICENSE"> MIT </a>
+      </li>
+    </ul>
+    <p>Third party extensions logos are the property of their respective owners.</p>
+  </n-card>
+</template>

src/components/OptionsTabs/ProxyTab.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>List of the existing proxies</div>
+</template>

src/components/OptionsTabs/SettingsTab.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import PrivacyRecommendations from '@/components/PrivacyRecommendations/PrivacyRecommendations.vue';
+import TitleCategory from '@/components/TitleCategory.vue';
+import WebRTCToggle from '@/components/PrivacyRecommendations/WebRTCToggle.vue';
+</script>
+
+<template>
+  <WebRTCToggle class="pt-4" />
+
+  <TitleCategory title="Privacy Recommendations" class="pt-4" />
+  <privacy-recommendations />
+</template>

src/components/PrivacyRecommendations/PrivacyRecommendation.vue

@@ -8,7 +8,7 @@ import Instructions from '@/components/PrivacyRecommendations/Instructions.vue';
 import RecommendationIconWithTooltip from '@/components/RecommendationIconWithTooltip.vue';
 import SplitButton from '@/components/Buttons/SplitButton.vue';
 
-import { closePopup } from '@/helpers/extensionNavigation';
+import { closePopup } from '@/helpers/browserExtension';
 
 import type { Recommendation } from '@/composables/useRecommendations/Recommendation.types';
 import ExternalLinkIconLabel from '@/components/ExternalLinkIconLabel.vue';

src/components/PrivacyRecommendations/WebRTCToggle.vue

@@ -6,7 +6,7 @@ import Button from '@/components/Buttons/Button.vue';
 import ExternalLinkIconLabel from '@/components/ExternalLinkIconLabel.vue';
 import IconLabel from '@/components/IconLabel.vue';
 
-import { closePopup } from '@/helpers/extensionNavigation';
+import { closePopup } from '@/helpers/browserExtension';
 import useWebRtc from '@/composables/useWebRtc';
 
 const { setWebRTC, webRTCStatus } = useWebRtc();

src/composables/useOptionsTab.ts

@@ -0,0 +1,14 @@
+import { ref } from 'vue';
+
+export function useOptionsTab() {
+  const currentTab = ref('');
+
+  const changeTab = (tab: string) => {
+    currentTab.value = tab;
+  };
+
+  return {
+    currentTab,
+    changeTab,
+  };
+}

src/composables/useStore.ts

@@ -2,8 +2,14 @@ import { Ref } from 'vue';
 
 import type { HistoryEntriesMap } from './useProxyHistory/HistoryEntries.types';
 import { Country } from './useListProxies';
+import type {
+  ProxyDetails,
+  ProxyInfoMap,
+  ProxyInfo,
+  ProxyDetailsMap,
+} from '@/helpers/socksProxy.types';
+import { Tab } from '@/helpers/browserExtension';
 
-import { ProxyDetails, ProxyInfoMap, ProxyInfo, ProxyDetailsMap } from '@/helpers/socksProxy.types';
 import useBrowserStorageLocal from '@/composables/useBrowserStorageLocal';
 
 export type Store = {
@@ -17,6 +23,7 @@ export type Store = {
   proxiesList: Ref<Country[]>;
   randomProxyActive: Ref<boolean>;
   webRTCStatus: Ref<boolean>;
+  optionsActiveTab: Ref<Tab>;
 };
 
 const useStore = (): Store => {
@@ -30,6 +37,7 @@ const useStore = (): Store => {
   const proxiesList = useBrowserStorageLocal('proxiesList', [] as Country[]);
   const randomProxyActive = useBrowserStorageLocal('randomProxyActive', false);
   const webRTCStatus = useBrowserStorageLocal('webRTCStatus', true);
+  const optionsActiveTab = useBrowserStorageLocal('optionsActiveTab', Tab.SETTINGS);
   return {
     excludedHosts,
     globalProxy,
@@ -38,6 +46,7 @@ const useStore = (): Store => {
     hostProxiesDetails,
     historyEntries,
     mullvadAccount,
+    optionsActiveTab,
     proxiesList,
     randomProxyActive,
     webRTCStatus,

src/helpers/browserExtension.ts

@@ -0,0 +1,22 @@
+export enum Tab {
+  SETTINGS = 'settings',
+  PROXY = 'proxy',
+  ABOUT = 'about',
+}
+export const closePopup = () => {
+  // The delay is added to stop a new empty browser window from opening
+  // when installing the extension from the popup
+  setTimeout(() => {
+    window.close();
+  }, 100);
+};
+
+export const openOptions = async (tab?: Tab) => {
+  if (tab) {
+    await browser.storage.local.set({ optionsActiveTab: tab });
+  }
+  closePopup();
+  browser.runtime.openOptionsPage();
+};
+
+export const { version } = browser.runtime.getManifest();

src/options/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useQueryProvider } from 'vue-query';
 import { NConfigProvider, GlobalThemeOverrides, darkTheme } from 'naive-ui';
+import Options from './Options.vue';
 
 useQueryProvider();
 const themeOverrides: GlobalThemeOverrides = {
@@ -28,6 +29,17 @@ const themeOverrides: GlobalThemeOverrides = {
     border: '1px solid var(--blue)',
     borderChecked: '1px solid var(--blue)',
   },
+  Tabs: {
+    tabFontSizeLarge: '1.12rem',
+    tabFontWeight: '600',
+    tabFontWeightActive: '600',
+    tabColor: 'var(--blue)',
+    tabTextColorLine: '--light-grey',
+    tabTextColorHoverLine: 'var(--white)',
+    tabTextColorActiveLine: 'var(--white)',
+    tabBorderColor: 'var(--blue)',
+    barColor: 'var(--white)',
+  },
 };
 </script>