feat(tabs): create individual session scopes for single or multiple tabs

src/components/AppFormCheckbox.vue

@@ -0,0 +1,65 @@
+<template>
+  <label :class="$style.wrap">
+    <input
+      v-model="internalValue"
+      :class="$style.input"
+      type="checkbox"
+    >
+    <app-icon
+      :size="8"
+      :class="{
+        [$style.active]: internalValue && !disabled,
+      }"
+      :face="internalValue ? 'toggle-switch' : 'toggle-switch-off'"
+    />
+    <div
+      v-if="$slots.default"
+      :class="$style.label"
+    >
+      <slot />
+    </div>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="postcss" module>
+.wrap {
+  @apply inline-flex items-center cursor-pointer;
+}
+
+.input {
+  @apply sr-only;
+}
+
+.label {
+  @apply ml-2;
+}
+
+.active {
+  @apply text-green-500;
+}
+</style>

src/components/AppFormInput.vue

@@ -3,16 +3,35 @@
     <input
       v-model="value"
       :class="$style.input"
+      :disabled="$attrs.disabled"
       :type="$attrs.type"
       :placeholder="$attrs.placeholder"
       :required="$attrs.required"
+      :list="datalist && `inputList_${_uid}`"
     >
+    <datalist
+      v-if="datalist"
+      :id="`inputList_${_uid}`"
+    >
+      <option
+        v-for="option in datalist"
+        :key="option"
+        :value="option"
+      />
+    </datalist>
+    <slot />
   </app-form-element>
 </template>
 
 <script>
 export default {
   inheritAttrs: false,
+  props: {
+    datalist: {
+      type: Array,
+      default: undefined,
+    },
+  },
   computed: {
     value: {
       get() {
@@ -33,4 +52,8 @@ export default {
     text-gray-400 leading-relaxed
     bg-gray-900 border border-gray-700 rounded;
 }
+
+.input[disabled] {
+  @apply pointer-events-none text-gray-600 bg-gray-800;
+}
 </style>

src/components/TabMain.vue

@@ -16,6 +16,7 @@
     />
 
     <tab-webview
+      v-if="showWebview"
       ref="webview"
       :item="item"
       :is-active="tab.isActive"
@@ -40,6 +41,7 @@ export default {
   },
   data() {
     return {
+      showWebview: false,
       webviewData: {},
       webviewEl: {},
     };
@@ -56,6 +58,10 @@ export default {
     },
   },
   watch: {
+    item() {
+      if (!this.tab.isActive) return;
+      this.startWebview();
+    },
     tab(value) {
       if (!value.isActive) return;
 
@@ -67,13 +73,14 @@ export default {
       });
 
       if (value.addFocus) {
-        this.webviewEl.focus();
+        setTimeout(() => {
+          this.webviewEl.focus();
+        }, 20);
       }
     },
   },
   mounted() {
-    this.webviewData = this.$refs.webview;
-    this.webviewEl = this.webviewData.webview;
+    this.startWebview();
   },
   methods: {
     goToHome() {
@@ -88,6 +95,16 @@ export default {
     reloadTab() {
       this.webviewEl.reload();
     },
+    async startWebview() {
+      this.showWebview = false;
+
+      await this.$nextTick();
+      this.showWebview = true;
+
+      await this.$nextTick();
+      this.webviewData = this.$refs.webview;
+      this.webviewEl = this.webviewData.webview;
+    },
     toggleDevTools() {
       if (this.webviewEl.isDevToolsOpened()) {
         this.webviewEl.closeDevTools();

src/components/TabWebview.vue

@@ -3,6 +3,7 @@
     ref="webview"
     :src="item.url"
     :useragent="userAgent"
+    :partition="scope"
     :preload="$options.preloadScript"
     :class="$style.webview"
   />
@@ -50,6 +51,9 @@ export default {
       const key = 'notifications.displayAppIconBadgeIfWindowIsNotInFocus';
       return this.$store.getters['Settings/byKey'](key);
     },
+    scope() {
+      return !!this.item.scope && `persist:${this.item.scope}`;
+    },
     userAgent() {
       return this.item.userAgent || navigator.userAgent;
     },

src/main.js

@@ -8,6 +8,7 @@ import store from './store';
 import AppButton from './components/AppButton.vue';
 import AppContent from './components/AppContent.vue';
 import AppContentSection from './components/AppContentSection.vue';
+import AppFormCheckbox from './components/AppFormCheckbox.vue';
 import AppFormElement from './components/AppFormElement.vue';
 import AppFormInput from './components/AppFormInput.vue';
 import AppFormTextEditor from './components/AppFormTextEditor.vue';
@@ -25,6 +26,7 @@ Vue.config.productionTip = false;
 Vue.component('AppButton', AppButton);
 Vue.component('AppContent', AppContent);
 Vue.component('AppContentSection', AppContentSection);
+Vue.component('AppFormCheckbox', AppFormCheckbox);
 Vue.component('AppFormElement', AppFormElement);
 Vue.component('AppFormInput', AppFormInput);
 Vue.component('AppFormTextEditor', AppFormTextEditor);

src/store/modules/Tabs.js

@@ -15,6 +15,7 @@ const defaultTab = () => ({
   userAgent: '',
   customCss: '',
   customJs: '',
+  scope: '',
   settings: {},
 });
 
@@ -51,6 +52,16 @@ export default {
 
       return [...list].sort((a, b) => sorting.indexOf(a.id) - sorting.indexOf(b.id));
     },
+    scopes(state, { list }) {
+      const scopes = list
+        .filter(tab => tab.scope && tab.id !== tab.scope)
+        .map(tab => tab.scope);
+
+      const uniqueScopes = [...new Set(scopes)];
+      uniqueScopes.sort();
+
+      return uniqueScopes;
+    },
   },
   mutations: {
     create(state, tab) {

src/views/TabEdit.vue

@@ -32,6 +32,17 @@
           slot="Advanced"
           :class="$style.tabContent"
         >
+          <app-form-input
+            v-model="tab.scope"
+            :datalist="scopes"
+            :disabled="useTabIdAsScope"
+            label="Session scope"
+          >
+            <app-form-checkbox v-model="useTabIdAsScope">
+              Use a tab unique scope
+            </app-form-checkbox>
+          </app-form-input>
+
           <app-form-text-editor
             v-model="tab.userAgent"
             label="User Agent"
@@ -149,6 +160,19 @@ export default {
       tab: {},
     };
   },
+  computed: {
+    scopes() {
+      return this.$store.getters['Tabs/scopes'];
+    },
+    useTabIdAsScope: {
+      get() {
+        return this.tab.id === this.tab.scope;
+      },
+      set(value) {
+        this.tab.scope = value ? this.tab.id : '';
+      },
+    },
+  },
   created() {
     const { id } = this.$route.params;
     this.tab = { ...this.$store.getters['Tabs/byId'](id) };