refactor: use events service for updating indicator (#464)

Get rid of `IS_TAB_MONETIZED` and `IS_FRAME_MONETIZED`

Co-authored-by: Radu-Cristian Popa <radu.popa@breakpointit.eu>

src/background/services/background.ts

@@ -20,7 +20,7 @@ import {
   success
 } from '@/shared/helpers'
 import { OpenPaymentsClientError } from '@interledger/open-payments/dist/client/error'
-import { OPEN_PAYMENTS_ERRORS } from '@/background/utils'
+import { getCurrentActiveTab, OPEN_PAYMENTS_ERRORS } from '@/background/utils'
 import { PERMISSION_HOSTS } from '@/shared/defines'
 
 type AlarmCallback = Parameters<Browser['alarms']['onAlarm']['addListener']>[0]
@@ -129,11 +129,12 @@ export class Background {
               }
               return
 
-            case PopupToBackgroundAction.RECONNECT_WALLET:
+            case PopupToBackgroundAction.RECONNECT_WALLET: {
               await this.openPaymentsService.reconnectWallet()
               await this.monetizationService.resumePaymentSessionActiveTab()
-              await this.tabEvents.onUpdatedTabUpdatedIndicator()
+              await this.updateVisualIndicatorsForCurrentTab()
               return success(undefined)
+            }
 
             case PopupToBackgroundAction.ADD_FUNDS:
               await this.openPaymentsService.addFunds(message.payload)
@@ -149,10 +150,11 @@ export class Background {
               this.sendToPopup.send('SET_STATE', { state: {}, prevState: {} })
               return
 
-            case PopupToBackgroundAction.TOGGLE_WM:
+            case PopupToBackgroundAction.TOGGLE_WM: {
               await this.monetizationService.toggleWM()
-              await this.tabEvents.onUpdatedTabUpdatedIndicator()
+              await this.updateVisualIndicatorsForCurrentTab()
               return
+            }
 
             case PopupToBackgroundAction.PAY_WEBSITE:
               return success(
@@ -190,13 +192,6 @@ export class Background {
                 await this.storage.updateRate(message.payload.rateOfPay)
               )
 
-            case ContentToBackgroundAction.IS_TAB_MONETIZED:
-              await this.tabEvents.onUpdatedTabUpdatedIndicator(
-                message.payload,
-                sender
-              )
-              return
-
             case ContentToBackgroundAction.IS_WM_ENABLED:
               return success(await this.storage.getWMState())
 
@@ -215,6 +210,13 @@ export class Background {
     )
   }
 
+  private async updateVisualIndicatorsForCurrentTab() {
+    const activeTab = await getCurrentActiveTab(this.browser)
+    if (activeTab?.id) {
+      void this.tabEvents.updateVisualIndicators(activeTab.id)
+    }
+  }
+
   bindPermissionsHandler() {
     this.browser.permissions.onAdded.addListener(this.checkPermissions)
     this.browser.permissions.onRemoved.addListener(this.checkPermissions)
@@ -223,11 +225,11 @@ export class Background {
   bindEventsHandler() {
     this.events.on('storage.state_update', async ({ state, prevState }) => {
       this.sendToPopup.send('SET_STATE', { state, prevState })
+      await this.updateVisualIndicatorsForCurrentTab()
+    })
 
-      const isCurrentTabMonetized = true // TODO get from tabState
-      await this.tabEvents.onUpdatedTabUpdatedIndicator({
-        value: isCurrentTabMonetized
-      })
+    this.events.on('monetization.state_update', (tabId) => {
+      void this.tabEvents.updateVisualIndicators(tabId)
     })
 
     this.events.on('storage.balance_update', (balance) =>

src/background/services/events.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from 'events'
-import type { AmountValue, Storage } from '@/shared/types'
+import type { AmountValue, Storage, TabId } from '@/shared/types'
 
 interface BackgroundEvents {
   'open_payments.key_revoked': void
@@ -13,6 +13,7 @@ interface BackgroundEvents {
     'recurring' | 'oneTime' | 'total',
     AmountValue
   >
+  'monetization.state_update': TabId
 }
 
 export class EventsService extends EventEmitter {

src/background/services/monetization.ts

@@ -88,6 +88,8 @@ export class MonetizationService {
       sessions.set(requestId, session)
     })
 
+    this.events.emit('monetization.state_update', tabId)
+
     const sessionsArr = this.tabState.getEnabledSessions(tabId)
     const rate = computeRate(rateOfPay, sessionsArr.length)
 
@@ -150,6 +152,7 @@ export class MonetizationService {
 
     if (needsAdjustAmount) {
       const sessionsArr = this.tabState.getEnabledSessions(tabId)
+      this.events.emit('monetization.state_update', tabId)
       if (!sessionsArr.length) return
       const rate = computeRate(rateOfPay, sessionsArr.length)
       await this.adjustSessionsAmount(sessionsArr, rate).catch((e) => {

src/background/services/tabEvents.ts

@@ -1,7 +1,5 @@
 import browser from 'webextension-polyfill'
-import type { Browser, Runtime } from 'webextension-polyfill'
-import { IsTabMonetizedPayload } from '@/shared/messages'
-import { getTabId } from '../utils'
+import type { Browser } from 'webextension-polyfill'
 import {
   isOkState,
   removeQueryParams,
@@ -79,6 +77,7 @@ export class TabEvents {
       if (clearOverpaying) {
         this.tabState.clearOverpayingByTabId(tabId)
       }
+      void this.updateVisualIndicators(tabId)
     }
   }
 
@@ -92,19 +91,12 @@ export class TabEvents {
   }
 
   onCreatedTab: CallbackTab<'onCreated'> = async (tab) => {
+    if (!tab.id) return
     await this.updateVisualIndicators(tab.id)
   }
 
-  onUpdatedTabUpdatedIndicator = async (
-    payload?: IsTabMonetizedPayload | null,
-    sender?: Runtime.MessageSender
-  ) => {
-    const tabId = sender && getTabId(sender)
-    await this.updateVisualIndicators(tabId, payload?.value)
-  }
-
-  private updateVisualIndicators = async (
-    tabId?: TabId,
+  updateVisualIndicators = async (
+    tabId: TabId,
     isTabMonetized: boolean = tabId
       ? this.tabState.isTabMonetized(tabId)
       : false

src/content/lib/messages.ts

@@ -48,15 +48,6 @@ export const resumeMonetization = async (
   })
 }
 
-export const isTabMonetized = async (
-  payload: ContentToBackgroundActionPayload[ContentToBackgroundAction.IS_TAB_MONETIZED]
-) => {
-  return await message.send({
-    action: ContentToBackgroundAction.IS_TAB_MONETIZED,
-    payload
-  })
-}
-
 export const isWMEnabled = async () => {
   return await message.send<boolean>({
     action: ContentToBackgroundAction.IS_WM_ENABLED

src/content/messages.ts

@@ -5,6 +5,5 @@ export enum ContentToContentAction {
   IS_MONETIZATION_ALLOWED_ON_STOP = 'IS_MONETIZATION_ALLOWED_ON_STOP',
   START_MONETIZATION = 'START_MONETIZATION',
   STOP_MONETIZATION = 'STOP_MONETIZATION',
-  RESUME_MONETIZATION = 'RESUME_MONETIZATION',
-  IS_FRAME_MONETIZED = 'IS_FRAME_MONETIZED'
+  RESUME_MONETIZATION = 'RESUME_MONETIZATION'
 }

src/content/services/frameManager.ts

@@ -1,5 +1,5 @@
 import { Logger } from '@/shared/logger'
-import { isTabMonetized, stopMonetization } from '../lib/messages'
+import { stopMonetization } from '../lib/messages'
 import { ContentToContentAction } from '../messages'
 import {
   ResumeMonetizationPayload,
@@ -10,10 +10,9 @@ import {
 export class FrameManager {
   private documentObserver: MutationObserver
   private frameAllowAttrObserver: MutationObserver
-  private isFrameMonetized: boolean
   private frames = new Map<
     HTMLIFrameElement,
-    { frameId: string | null; requestIds: string[]; isFrameMonetized?: boolean }
+    { frameId: string | null; requestIds: string[] }
   >()
 
   constructor(
@@ -88,8 +87,7 @@ export class FrameManager {
   private async onAddedFrame(frame: HTMLIFrameElement) {
     this.frames.set(frame, {
       frameId: null,
-      requestIds: [],
-      isFrameMonetized: false
+      requestIds: []
     })
   }
 
@@ -106,14 +104,6 @@ export class FrameManager {
     stopMonetization(stopMonetizationTags)
 
     this.frames.delete(frame)
-
-    let isMonetized = false
-
-    this.frames.forEach((value) => {
-      if (value.isFrameMonetized) isMonetized = true
-    })
-
-    isTabMonetized({ value: isMonetized || this.isFrameMonetized })
   }
 
   private onWholeDocumentObserved(records: MutationRecord[]) {
@@ -183,31 +173,19 @@ export class FrameManager {
       (event: any) => {
         const { message, payload, id } = event.data
         const frame = this.findIframe(event.source)
-
         if (!frame) {
-          if (message === ContentToContentAction.IS_FRAME_MONETIZED) {
-            event.stopPropagation()
-
-            this.isFrameMonetized = payload.isMonetized
-            const isMonetized =
-              this.isFrameMonetized ||
-              [...this.frames.values()].some((e) => e.isFrameMonetized)
-            isTabMonetized({ value: isMonetized })
-          }
+          event.stopPropagation()
           return
         }
 
         if (event.origin === this.window.location.href) return
 
-        const frameDetails = this.frames.get(frame)
-
         switch (message) {
           case ContentToContentAction.INITIALIZE_IFRAME:
             event.stopPropagation()
             this.frames.set(frame, {
               frameId: id,
-              requestIds: [],
-              isFrameMonetized: false
+              requestIds: []
             })
             return
 
@@ -218,8 +196,7 @@ export class FrameManager {
                 frameId: id,
                 requestIds: payload.map(
                   (p: StartMonetizationPayload) => p.requestId
-                ),
-                isFrameMonetized: true
+                )
               })
               event.source.postMessage(
                 {
@@ -240,8 +217,7 @@ export class FrameManager {
                 frameId: id,
                 requestIds: payload.map(
                   (p: ResumeMonetizationPayload) => p.requestId
-                ),
-                isFrameMonetized: true
+                )
               })
               event.source.postMessage(
                 {
@@ -254,23 +230,6 @@ export class FrameManager {
             }
             return
 
-          case ContentToContentAction.IS_FRAME_MONETIZED: {
-            event.stopPropagation()
-            let isMonetized = false
-            if (!frameDetails) return
-
-            this.frames.set(frame, {
-              ...frameDetails,
-              isFrameMonetized: payload.isMonetized
-            })
-            this.frames.forEach((value) => {
-              if (value.isFrameMonetized) isMonetized = true
-            })
-
-            isTabMonetized({ value: isMonetized || this.isFrameMonetized })
-
-            return
-          }
           default:
             return
         }

src/content/services/monetizationTagManager.ts

@@ -438,17 +438,9 @@ export class MonetizationTagManager extends EventEmitter {
 
   private sendStartMonetization(tags: StartMonetizationPayload[]) {
     if (!tags.length) return
-    const isFrameMonetizedMessage = {
-      message: ContentToContentAction.IS_FRAME_MONETIZED,
-      id: this.id,
-      payload: { isMonetized: tags.length > 0 }
-    }
 
     if (this.isTopFrame) {
       startMonetization(tags)
-
-      // Update icon
-      this.window.postMessage(isFrameMonetizedMessage, '*')
     } else if (this.isFirstLevelFrame) {
       this.window.parent.postMessage(
         {
@@ -458,48 +450,17 @@ export class MonetizationTagManager extends EventEmitter {
         },
         '*'
       )
-      // Update icon
-      this.window.parent.postMessage(isFrameMonetizedMessage, '*')
     }
   }
 
   private async sendStopMonetization(tags: StopMonetizationPayload[]) {
     if (!tags.length) return
     await stopMonetization(tags)
-
-    // Check if tab still monetized
-    const validTagsCount = [...this.monetizationTags].reduce(
-      (count, [tag, { requestId, walletAddress }]) => {
-        return !tag.disabled && requestId && walletAddress ? count + 1 : count
-      },
-      0
-    )
-
-    const isFrameMonetizedMessage = {
-      message: ContentToContentAction.IS_FRAME_MONETIZED,
-      id: this.id,
-      payload: { isMonetized: validTagsCount > 0 }
-    }
-
-    if (this.isTopFrame) {
-      this.window.postMessage(isFrameMonetizedMessage, '*')
-    } else if (this.isFirstLevelFrame) {
-      this.window.parent.postMessage(isFrameMonetizedMessage, '*')
-    }
   }
 
   private sendResumeMonetization(tags: ResumeMonetizationPayload[]) {
-    const isFrameMonetizedMessage = {
-      message: ContentToContentAction.IS_FRAME_MONETIZED,
-      id: this.id,
-      payload: { isMonetized: tags.length > 0 }
-    }
-
     if (this.isTopFrame) {
       resumeMonetization(tags)
-
-      // Update icon
-      this.window.postMessage(isFrameMonetizedMessage, '*')
     } else if (this.isFirstLevelFrame) {
       this.window.parent.postMessage(
         {
@@ -509,9 +470,6 @@ export class MonetizationTagManager extends EventEmitter {
         },
         '*'
       )
-
-      // Update icon
-      this.window.parent.postMessage(isFrameMonetizedMessage, '*')
     }
   }
 

src/shared/messages.ts

@@ -79,7 +79,6 @@ export enum ContentToBackgroundAction {
   START_MONETIZATION = 'START_MONETIZATION',
   STOP_MONETIZATION = 'STOP_MONETIZATION',
   RESUME_MONETIZATION = 'RESUME_MONETIZATION',
-  IS_TAB_MONETIZED = 'IS_TAB_MONETIZED',
   IS_WM_ENABLED = 'IS_WM_ENABLED'
 }
 
@@ -110,7 +109,6 @@ export interface ContentToBackgroundActionPayload {
   [ContentToBackgroundAction.START_MONETIZATION]: StartMonetizationPayload[]
   [ContentToBackgroundAction.STOP_MONETIZATION]: StopMonetizationPayload[]
   [ContentToBackgroundAction.RESUME_MONETIZATION]: ResumeMonetizationPayload[]
-  [ContentToBackgroundAction.IS_TAB_MONETIZED]: IsTabMonetizedPayload
   [ContentToBackgroundAction.IS_WM_ENABLED]: undefined
 }