feat: automatic re-isolation after n seconds (#315)

src/background/browseraction.ts

@@ -97,26 +97,28 @@ export class BrowserAction {
     });
   }
 
-  async addIsolationInactiveBadge(): Promise<void> {
+  async addIsolationInactiveBadge(num?: number): Promise<void> {
     browser.browserAction.setBadgeBackgroundColor({
       color: 'red',
     });
     browser.browserAction.setBadgeText({
-      text: '!',
+      text: num ? num.toString() : '!',
     });
 
     const tabs = await browser.tabs.query({
       currentWindow: true,
       active: true,
     });
-    browser.browserAction.setBadgeBackgroundColor({
-      color: 'red',
-      tabId: tabs[0].id,
-    });
-    browser.browserAction.setBadgeText({
-      text: null,
-      tabId: tabs[0].id,
-    });
+    if (tabs[0]) {
+      browser.browserAction.setBadgeBackgroundColor({
+        color: 'red',
+        tabId: tabs[0].id,
+      });
+      browser.browserAction.setBadgeText({
+        text: null,
+        tabId: tabs[0].id,
+      });
+    }
   }
 
   removeIsolationInactiveBadge(): void {

src/background/commands.ts

@@ -3,7 +3,6 @@ import { Container } from './container';
 import { Storage } from './storage';
 import { Tabs } from './tabs';
 import { PreferencesSchema, Tab, Permissions, Debug } from '~/types';
-import { PageAction } from './pageaction';
 
 export class Commands {
   private background: TemporaryContainers;
@@ -13,7 +12,6 @@ export class Commands {
   private container!: Container;
   private permissions!: Permissions;
   private tabs!: Tabs;
-  private pageaction!: PageAction;
 
   constructor(background: TemporaryContainers) {
     this.background = background;
@@ -26,7 +24,6 @@ export class Commands {
     this.container = this.background.container;
     this.permissions = this.background.permissions;
     this.tabs = this.background.tabs;
-    this.pageaction = this.background.pageaction;
   }
 
   async onCommand(name: string): Promise<void> {
@@ -121,15 +118,7 @@ export class Commands {
         if (!this.pref.keyboardShortcuts.AltI) {
           return;
         }
-        this.storage.local.preferences.isolation.active = !this.pref.isolation
-          .active;
-        this.storage.persist();
-        if (this.pref.isolation.active) {
-          this.background.browseraction.removeIsolationInactiveBadge();
-        } else {
-          this.background.browseraction.addIsolationInactiveBadge();
-        }
-        this.pageaction.showOrHide();
+        this.background.isolation.setActiveState(!this.pref.isolation.active);
         break;
     }
   }

src/background/isolation.ts

@@ -4,6 +4,9 @@ import { MultiAccountContainers } from './mac';
 import { Management } from './management';
 import { MouseClick } from './mouseclick';
 import { Request } from './request';
+import { BrowserAction } from './browseraction';
+import { PageAction } from './pageaction';
+import { Storage } from './storage';
 import { Utils } from './utils';
 import {
   PreferencesSchema,
@@ -23,10 +26,15 @@ export class Isolation {
   private mac!: MultiAccountContainers;
   private management!: Management;
   private utils!: Utils;
+  private browseraction!: BrowserAction;
+  private pageaction!: PageAction;
+  private storage!: Storage;
+  private autoEnableInterval: number;
 
   constructor(background: TemporaryContainers) {
     this.background = background;
     this.debug = background.debug;
+    this.autoEnableInterval = 0;
   }
 
   initialize(): void {
@@ -37,6 +45,18 @@ export class Isolation {
     this.mac = this.background.mac;
     this.management = this.background.management;
     this.utils = this.background.utils;
+    this.browseraction = this.background.browseraction;
+    this.pageaction = this.background.pageaction;
+    this.storage = this.background.storage;
+    this.debug(
+      '[initialize] isolation initialized',
+      this.storage.local.isolation
+    );
+    if (this.storage.local.isolation.autoEnableTargetTime) {
+      this.setActiveState(
+        this.storage.local.isolation.autoEnableTargetTime < new Date().getTime()
+      );
+    }
   }
 
   async maybeIsolate({
@@ -588,4 +608,77 @@ export class Isolation {
     }
     return false;
   }
+
+  // Handler to update the browser badge after a change to isolation.active
+  handleActiveState(active: boolean): void {
+    if (active) {
+      this.browseraction.removeIsolationInactiveBadge();
+      this.autoEnableStopInterval();
+    } else {
+      this.browseraction.addIsolationInactiveBadge();
+      this.autoEnableStartInterval();
+    }
+    this.pageaction.showOrHide();
+  }
+
+  // Moved logic from commands.ts and preferences.ts to create this utility function.
+  // Sets the isolation.active to the specified value, persists it, and updates the browser badge
+  setActiveState(active: boolean): void {
+    this.debug('[setActiveState] isolation', active);
+    this.storage.local.preferences.isolation.active = active;
+    this.storage.persist();
+    this.handleActiveState(active);
+  }
+
+  // useful for debugging test cases
+  autoEnableGetDebug(): Record<string, any> {
+    return {
+      active: this.storage.local.preferences.isolation.active,
+      target: this.storage.local.isolation.autoEnableTargetTime,
+      now: new Date().getTime(),
+      diff:
+        this.storage.local.isolation.autoEnableTargetTime -
+        new Date().getTime(),
+    };
+  }
+
+  autoEnableCheckTarget(): void {
+    const diff: number = Math.round(
+      (this.storage.local.isolation.autoEnableTargetTime -
+        new Date().getTime()) /
+        1000
+    );
+    if (diff <= 0) {
+      this.autoEnableStopInterval();
+      this.setActiveState(true);
+    } else if (diff <= 30 || diff % 10 == 0) {
+      // this.debug('[interval] isolation', diff, 'milliseconds');
+      this.browseraction.addIsolationInactiveBadge(diff);
+    }
+  }
+
+  autoEnableStartInterval(): void {
+    if (this.pref.isolation.autoEnableDelay > 0) {
+      this.debug(
+        '[autoEnableStartInterval] isolation',
+        this.storage.local.isolation
+      );
+      const autoEnableTargetTime: number = this.storage.local.isolation
+        .autoEnableTargetTime;
+      this.storage.local.isolation.autoEnableTargetTime = autoEnableTargetTime
+        ? autoEnableTargetTime
+        : new Date().getTime() + this.pref.isolation.autoEnableDelay * 1000;
+      this.autoEnableInterval = window.setInterval(() => {
+        this.autoEnableCheckTarget();
+      }, 1000);
+    }
+  }
+
+  autoEnableStopInterval(): void {
+    if (this.autoEnableInterval) {
+      window.clearInterval(this.autoEnableInterval);
+      this.autoEnableInterval = 0;
+    }
+    this.storage.local.isolation.autoEnableTargetTime = 0;
+  }
 }

src/background/pageaction.ts

@@ -45,17 +45,19 @@ export class PageAction {
       );
       color = container.color;
     }
-    browser.pageAction.setIcon({
-      path: {
-        '19': `icons/pageaction-${color}-19.svg`,
-        '38': `icons/pageaction-${color}-38.svg`,
-      },
-      tabId: activatedTab.id,
-    });
-    if (!this.pref.pageAction) {
-      browser.pageAction.hide(activatedTab.id);
-    } else {
-      browser.pageAction.show(activatedTab.id);
+    if (activatedTab && activatedTab.id) {
+      browser.pageAction.setIcon({
+        path: {
+          '19': `icons/pageaction-${color}-19.svg`,
+          '38': `icons/pageaction-${color}-38.svg`,
+        },
+        tabId: activatedTab.id,
+      });
+      if (!this.pref.pageAction) {
+        browser.pageAction.hide(activatedTab.id);
+      } else {
+        browser.pageAction.show(activatedTab.id);
+      }
     }
   }
 }

src/background/preferences.ts

@@ -26,6 +26,7 @@ export class Preferences {
     iconColor: 'default',
     isolation: {
       active: true,
+      autoEnableDelay: 0,
       global: {
         navigation: {
           action: 'never',
@@ -136,12 +137,9 @@ export class Preferences {
       this.pageaction.showOrHide();
     }
     if (oldPreferences.isolation.active !== newPreferences.isolation.active) {
-      this.pageaction.showOrHide();
-      if (newPreferences.isolation.active) {
-        this.browseraction.removeIsolationInactiveBadge();
-      } else {
-        this.browseraction.addIsolationInactiveBadge();
-      }
+      this.background.isolation.handleActiveState(
+        newPreferences.isolation.active
+      );
     }
     if (newPreferences.notifications) {
       this.permissions.notifications = true;

src/background/storage.ts

@@ -30,6 +30,10 @@ export class Storage {
           urlsDeleted: 0,
         },
       },
+      isolation: {
+        // active: true,
+        autoEnableTargetTime: 0,
+      },
       preferences: background.preferences.defaults,
       lastFileExport: false,
       version: false,

src/types.ts

@@ -134,6 +134,10 @@ export interface StorageLocal {
       urlsDeleted: number;
     };
   };
+  isolation: {
+    // active: boolean;
+    autoEnableTargetTime: number;
+  };
   preferences: PreferencesSchema;
   lastFileExport: false;
   version: false | string;
@@ -159,6 +163,7 @@ export interface PreferencesSchema {
   iconColor: ToolbarIconColor;
   isolation: {
     active: boolean;
+    autoEnableDelay: number;
     global: IsolationGlobal;
     domain: IsolationDomain[];
     mac: {

src/ui/components/advanced/general.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import Vue from 'vue';
-
 import DomainPattern from '../domainpattern.vue';
 import { App } from '~/ui/root';
 
@@ -383,6 +382,17 @@ export default Vue.extend({
             >
           </div>
         </div>
+        <div class="field">
+          <label
+            >Automatically re-enable Isolation after n seconds (0 =
+            disabled)</label
+          >
+          <input
+            id="autoEnableDelay"
+            v-model="preferences.isolation.autoEnableDelay"
+            type="text"
+          />
+        </div>
         <div class="m-b" />
       </div>
       <div class="title">