fix: support split-view in Edge [WIP]

src/background/services/background.ts

@@ -7,7 +7,11 @@ import {
   success,
 } from '@/shared/helpers';
 import { OpenPaymentsClientError } from '@interledger/open-payments/dist/client/error';
-import { getCurrentActiveTab, OPEN_PAYMENTS_ERRORS } from '@/background/utils';
+import {
+  getCurrentActiveTab,
+  getTabId,
+  OPEN_PAYMENTS_ERRORS,
+} from '@/background/utils';
 import { PERMISSION_HOSTS } from '@/shared/defines';
 import type { Cradle } from '@/background/container';
 
@@ -21,6 +25,7 @@ export class Background {
   private storage: Cradle['storage'];
   private logger: Cradle['logger'];
   private tabEvents: Cradle['tabEvents'];
+  private tabState: Cradle['tabState'];
   private sendToPopup: Cradle['sendToPopup'];
   private events: Cradle['events'];
   private heartbeat: Cradle['heartbeat'];
@@ -32,6 +37,7 @@ export class Background {
     storage,
     logger,
     tabEvents,
+    tabState,
     sendToPopup,
     events,
     heartbeat,
@@ -43,6 +49,7 @@ export class Background {
       storage,
       sendToPopup,
       tabEvents,
+      tabState,
       logger,
       events,
       heartbeat,
@@ -58,7 +65,7 @@ export class Background {
     this.bindPermissionsHandler();
     this.bindEventsHandler();
     this.bindTabHandlers();
-    this.bindWindowHandlers();
+    // this.bindWindowHandlers();
     this.sendToPopup.start();
   }
 
@@ -160,7 +167,12 @@ export class Background {
   bindMessageHandler() {
     this.browser.runtime.onMessage.addListener(
       async (message: ToBackgroundMessage, sender) => {
-        this.logger.debug('Received message', message);
+        this.logger.debug(
+          'Received message',
+          message.action,
+          message.payload,
+          sender?.tab?.id,
+        );
         try {
           switch (message.action) {
             // region Popup
@@ -220,6 +232,23 @@ export class Background {
                 await getWalletInformation(message.payload.walletAddressUrl),
               );
 
+            case 'FOCUS_CHANGE': {
+              const tabId = getTabId(sender);
+              if (message.payload.hasFocus) {
+                this.tabState.setCurrentTabId(tabId);
+                await this.monetizationService.resumePaymentSessionsByTabId(
+                  tabId,
+                );
+                const tab = await this.browser.tabs.get(tabId);
+                await this.tabEvents.updateVisualIndicators(tabId, tab.url);
+              } else {
+                await this.monetizationService.stopPaymentSessionsByTabId(
+                  tabId,
+                );
+              }
+              return;
+            }
+
             case 'START_MONETIZATION':
               await this.monetizationService.startPaymentSession(
                 message.payload,
@@ -264,7 +293,10 @@ export class Background {
   }
 
   private async updateVisualIndicatorsForCurrentTab() {
-    const activeTab = await getCurrentActiveTab(this.browser);
+    const activeTabId = this.tabState.getCurrentTabId();
+    const activeTab = activeTabId
+      ? await this.browser.tabs.get(activeTabId)
+      : await getCurrentActiveTab(this.browser);
     if (activeTab?.id) {
       void this.tabEvents.updateVisualIndicators(activeTab.id, activeTab.url);
     }

src/background/services/monetization.ts

@@ -385,7 +385,10 @@ export class MonetizationService {
       'publicKey',
     ]);
     const balance = await this.storage.getBalance();
-    const tab = await getCurrentActiveTab(this.browser);
+    const tabId = this.tabState.getCurrentTabId();
+    const tab = tabId
+      ? await this.browser.tabs.get(tabId)
+      : await getCurrentActiveTab(this.browser);
 
     const { oneTimeGrant, recurringGrant, ...dataFromStorage } = storedData;
 
@@ -401,10 +404,8 @@ export class MonetizationService {
         // noop
       }
     }
-    const isSiteMonetized = this.tabState.isTabMonetized(tab.id!);
-    const hasAllSessionsInvalid = this.tabState.tabHasAllSessionsInvalid(
-      tab.id!,
-    );
+    const isSiteMonetized = this.tabState.isTabMonetized(tabId);
+    const hasAllSessionsInvalid = this.tabState.tabHasAllSessionsInvalid(tabId);
 
     return {
       ...dataFromStorage,

src/background/services/tabEvents.ts

@@ -68,6 +68,7 @@ export class TabEvents {
   }
 
   onUpdatedTab: CallbackTab<'onUpdated'> = (tabId, changeInfo, tab) => {
+    console.log('geererge', tabId);
     /**
      * if loading and no url -> clear all sessions but not the overpaying state
      * if loading and url -> we need to check if state keys include this url.
@@ -90,8 +91,8 @@ export class TabEvents {
   };
 
   onActivatedTab: CallbackTab<'onActivated'> = async (info) => {
-    const tab = await this.browser.tabs.get(info.tabId);
-    await this.updateVisualIndicators(info.tabId, tab?.url);
+    // const tab = await this.browser.tabs.get(info.tabId);
+    // await this.updateVisualIndicators(info.tabId, tab?.url);
   };
 
   onCreatedTab: CallbackTab<'onCreated'> = async (tab) => {
@@ -126,6 +127,8 @@ export class TabEvents {
       hasTabAllSessionsInvalid,
     });
 
+    console.log(tabId, { isTabMonetized, tabUrl, canMonetizeTab, isMonetized });
+
     this.sendToPopup.send('SET_IS_MONETIZED', isMonetized);
     this.sendToPopup.send('SET_ALL_SESSIONS_INVALID', hasTabAllSessionsInvalid);
     await this.setIconAndTooltip(path, title, tabId);
@@ -136,6 +139,10 @@ export class TabEvents {
     title: string,
     tabId: TabId,
   ) => {
+    console.log('setIconAndTooltip', {
+      tabId,
+      icon: path[32].split('/').at(-1),
+    });
     if (this.tabState.getIcon(tabId) !== path) {
       this.tabState.setIcon(tabId, path);
       await this.browser.action.setIcon({ path, tabId });

src/background/services/tabState.ts

@@ -23,6 +23,7 @@ export class TabState {
   private state = new Map<TabId, Map<string, State>>();
   private sessions = new Map<TabId, Map<SessionId, PaymentSession>>();
   private currentIcon = new Map<TabId, Record<number, string>>();
+  private currentTabId: TabId;
 
   constructor({ logger }: Cradle) {
     Object.assign(this, {
@@ -115,6 +116,13 @@ export class TabState {
     return sessions.length > 0 && sessions.every((s) => s.invalid);
   }
 
+  setCurrentTabId(tabId: TabId) {
+    this.currentTabId = tabId;
+  }
+  getCurrentTabId() {
+    return this.currentTabId;
+  }
+
   getAllSessions() {
     return [...this.sessions.values()].flatMap((s) => [...s.values()]);
   }

src/content/services/monetizationLinkManager.ts

@@ -95,6 +95,8 @@ export class MonetizationLinkManager extends EventEmitter {
       this.onDocumentVisibilityChange,
     );
     this.window.removeEventListener('message', this.onWindowMessage);
+    this.window.removeEventListener('focus', this.onFocusChange);
+    this.window.removeEventListener('blur', this.onFocusChange);
   }
 
   /**
@@ -105,6 +107,8 @@ export class MonetizationLinkManager extends EventEmitter {
       'visibilitychange',
       this.onDocumentVisibilityChange,
     );
+    this.window.addEventListener('focus', this.onFocusChange);
+    this.window.addEventListener('blur', this.onFocusChange);
 
     if (!this.isTopFrame && this.isFirstLevelFrame) {
       this.window.addEventListener('message', this.onWindowMessage);
@@ -349,6 +353,11 @@ export class MonetizationLinkManager extends EventEmitter {
     }
   };
 
+  private onFocusChange = async () => {
+    const hasFocus = this.document.hasFocus();
+    await this.message.send('FOCUS_CHANGE', { hasFocus });
+  };
+
   private async onWholeDocumentObserved(records: MutationRecord[]) {
     const stopMonetizationPayload: StopMonetizationPayload = [];
 

src/shared/messages.ts

@@ -173,6 +173,10 @@ export type ContentToBackgroundMessage = {
     input: GetWalletAddressInfoPayload;
     output: WalletAddress;
   };
+  FOCUS_CHANGE: {
+    input: { hasFocus: boolean };
+    output: never;
+  };
   STOP_MONETIZATION: {
     input: StopMonetizationPayload;
     output: never;