Adds different logo for verified publishers

Resolves brave/brave-browser#4043

components/brave_rewards/resources/extension/brave_rewards/BUILD.gn

@@ -18,16 +18,14 @@ transpile_web_ui("brave_rewards_panel") {
     "background/reducers/grant_panel_reducer.ts",
     "background/reducers/index.ts",
     "background/reducers/rewards_panel_reducer.ts",
+    "background/browserAction.ts",
     "background/storage.ts",
     "background/store.ts",
     "brave_rewards_panel.html",
     "brave_rewards_panel.tsx",
     "components/app.tsx",
     "components/panel.tsx",
     "constants/rewards_panel_types.ts",
-    "img/rewards-off.png",
-    "img/[email protected]",
-    "img/[email protected]",
     "img/rewards-on.png",
     "img/[email protected]",
     "img/[email protected]",

components/brave_rewards/resources/extension/brave_rewards/actions/rewards_panel_actions.ts

@@ -137,6 +137,11 @@ export const refreshPublisher = (verified: boolean, publisherKey: string) => act
   verified,
   publisherKey
 })
+
 export const onAllNotifications = (list: RewardsExtension.Notification[]) => action(types.ON_ALL_NOTIFICATIONS, {
   list
 })
+
+export const init = (tabs: chrome.tabs.Tab[]) => action(types.ON_INIT, {
+  tabs
+})

components/brave_rewards/resources/extension/brave_rewards/background.ts

@@ -2,16 +2,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import rewardsPanelActions from './background/actions/rewardsPanelActions'
+
 import './background/store'
 import './background/events/rewardsEvents'
 import './background/events/tabEvents'
 import batIconOn18Url from './img/rewards-on.png'
 import batIconOn36Url from './img/[email protected]'
 import batIconOn54Url from './img/[email protected]'
-// TODO: display 'off' icon at appropriate time
-// import batIconOff18Url from './img/rewards-off.png'
-// import batIconOff36Url from './img/[email protected]'
-// import batIconOff54Url from './img/[email protected]'
 
 const iconOn = {
   path: {
@@ -21,17 +19,20 @@ const iconOn = {
   }
 }
 
-// const iconOff = {
-//   path: {
-//     18: batIconOff18Url,
-//     36: batIconOff36Url,
-//     54: batIconOff54Url
-//   }
-// }
-
 chrome.browserAction.setBadgeBackgroundColor({ color: '#FB542B' })
 chrome.browserAction.setIcon(iconOn)
 
+// We need to set initial state for all active tabs in all windows
+chrome.tabs.query({
+  highlighted: true
+}, (tabs) => {
+  if (!tabs || !tabs.length) {
+    return
+  }
+
+  rewardsPanelActions.init(tabs)
+})
+
 chrome.runtime.onInstalled.addListener(function (details) {
   if (details.reason === 'install') {
     const initialNotificationDismissed = 'false'

components/brave_rewards/resources/extension/brave_rewards/background/browserAction.ts

@@ -0,0 +1,41 @@
+/* Copyright (c) 2019 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+export const setBadgeText = (state?: RewardsExtension.State, verified: boolean = false, tabId: number = -1) => {
+  let text = ''
+
+  if (!state) {
+    return
+  }
+
+  if (state.notifications && !verified) {
+    const count = Object.keys(state.notifications).length
+    if (count > 0) {
+      text = count.toString()
+    }
+  }
+
+  let data: chrome.browserAction.BadgeTextDetails = {
+    text
+  }
+
+  if (tabId !== -1) {
+    data.tabId = tabId
+    chrome.browserAction.setBadgeBackgroundColor({
+      color: verified ? '#4C54D2' : '#FB542B',
+      tabId
+    })
+
+    if (verified) {
+      data.text = '✓️'
+    }
+  } else {
+    chrome.browserAction.setBadgeBackgroundColor({
+      color: '#FB542B'
+    })
+  }
+
+  chrome.browserAction.setBadgeText(data)
+}

components/brave_rewards/resources/extension/brave_rewards/background/reducers/rewards_panel_reducer.ts

@@ -5,21 +5,7 @@
 import { types } from '../../constants/rewards_panel_types'
 import * as storage from '../storage'
 import { getTabData } from '../api/tabs_api'
-
-function setBadgeText (state: RewardsExtension.State): void {
-  let text = ''
-
-  if (state && state.notifications) {
-    const count = Object.keys(state.notifications).length
-    if (count > 0) {
-      text = count.toString()
-    }
-  }
-
-  chrome.browserAction.setBadgeText({
-    text
-  })
-}
+import { setBadgeText } from '../browserAction'
 
 const getWindowId = (id: number) => {
   return `id_${id}`
@@ -102,9 +88,18 @@ export const rewardsPanelReducer = (state: RewardsExtension.State | undefined, a
         }
 
         publishers[id] = {
-          tabUrl: tab.url
+          tabUrl: tab.url,
+          tabId: tab.id
         }
+      } else if (publisher &&
+                 publisher.tabUrl === tab.url &&
+                 publisher.tabId !== tab.id &&
+                 validKey) {
+        // if we switch between tabs that have the same url, we need to update as well
+        setBadgeText(state, publisher.verified, tab.id)
+        publishers[id].tabId = tab.id
       }
+
       state = {
         ...state,
         publishers
@@ -120,6 +115,11 @@ export const rewardsPanelReducer = (state: RewardsExtension.State | undefined, a
         delete publishers[id]
       } else {
         publishers[id] = { ...publishers[id], ...publisher }
+        const newPublisher = publishers[id]
+
+        if (newPublisher.tabId) {
+          setBadgeText(state, newPublisher.verified, newPublisher.tabId)
+        }
       }
 
       state = {
@@ -407,6 +407,29 @@ export const rewardsPanelReducer = (state: RewardsExtension.State | undefined, a
       setBadgeText(state)
       break
     }
+
+    case types.ON_INIT: {
+      const tabs: chrome.tabs.Tab[] = payload.tabs
+
+      if (!tabs) {
+        break
+      }
+
+      const publishers: Record<string, RewardsExtension.Publisher> = state.publishers
+
+      tabs.forEach((tab) => {
+        const id = getWindowId(tab.windowId)
+        const publisher = publishers[id]
+
+        if (!publisher || publisher.tabId !== tab.id) {
+          return
+        }
+
+        setBadgeText(state, publisher.verified, publisher.tabId)
+      })
+
+      break
+    }
   }
   return state
 }

components/brave_rewards/resources/extension/brave_rewards/constants/rewards_panel_types.ts

@@ -35,7 +35,8 @@ export const enum types {
   ON_RECURRING_TIPS = '@@rewards_panel/ON_RECURRING_TIPS',
   ON_PUBLISHER_BANNER = '@@rewards_panel/ON_PUBLISHER_BANNER',
   ON_PUBLISHER_STATUS_REFRESHED = '@@rewards_panel/ON_PUBLISHER_STATUS_REFRESHED',
-  ON_ALL_NOTIFICATIONS = '@@rewards_panel/ON_ALL_NOTIFICATIONS'
+  ON_ALL_NOTIFICATIONS = '@@rewards_panel/ON_ALL_NOTIFICATIONS',
+  ON_INIT = '@@rewards_panel/ON_INIT'
 }
 
 // Note: This declaration must match the RewardsNotificationType enum in

components/definitions/rewardsExtensions.d.ts

@@ -34,6 +34,7 @@ declare namespace RewardsExtension {
     name?: string
     percentage?: number
     provider?: string
+    tabId?: number
     tabUrl?: string
     url?: string
     verified?: boolean

components/test/brave_rewards/extension/brave_rewards/background/browserAction_test.ts

@@ -0,0 +1,121 @@
+/* global describe, it */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import {
+  setBadgeText
+} from '../../../../../brave_rewards/resources/extension/brave_rewards/background/browserAction'
+
+describe('Rewards Panel extension - Browser Action', () => {
+  describe('setBadgeText', () => {
+    let spyText: jest.SpyInstance
+    let spyColor: jest.SpyInstance
+
+    beforeEach(() => {
+      spyText = jest.spyOn(chrome.browserAction, 'setBadgeText')
+      spyColor = jest.spyOn(chrome.browserAction, 'setBadgeBackgroundColor')
+    })
+
+    afterEach(() => {
+      spyText.mockRestore()
+      spyColor.mockRestore()
+    })
+
+    it('publisher is not verified, no pending notifications', () => {
+      const state: RewardsExtension.State = {
+        notifications: {}
+      }
+
+      setBadgeText(state)
+
+      expect(spyText).toHaveBeenCalled()
+      expect(spyText.mock.calls[0][0]).toEqual({
+        text: ''
+      })
+    })
+
+    it('publisher is not verified, pending notifications', () => {
+      const state: RewardsExtension.State = {
+        notifications: {
+          '1': {
+            id: 'test'
+          }
+        }
+      }
+
+      setBadgeText(state)
+
+      expect(spyText).toHaveBeenCalled()
+      expect(spyText.mock.calls[0][0]).toEqual({
+        text: '1'
+      })
+    })
+
+    it('publisher is verified, no pending notifications', () => {
+      const state: RewardsExtension.State = {
+        notifications: {}
+      }
+
+      setBadgeText(state, true, 1)
+
+      expect(spyText).toHaveBeenCalled()
+      const data = spyText.mock.calls[0][0]
+      expect(data.tabId).toEqual(1)
+      expect(data.text).toEqual('✓️')
+
+      expect(spyColor).toHaveBeenCalled()
+      expect(spyColor.mock.calls[0][0]).toEqual({
+        color: '#4C54D2',
+        tabId: 1
+      })
+    })
+
+    it('publisher is verified, pending notifications', () => {
+      const state: RewardsExtension.State = {
+        notifications: {
+          '1': {
+            id: 'test'
+          }
+        }
+      }
+
+      setBadgeText(state, true, 1)
+
+      expect(spyText).toHaveBeenCalled()
+      const data = spyText.mock.calls[0][0]
+      expect(data.tabId).toEqual(1)
+      expect(data.text).toEqual('✓️')
+
+      expect(spyColor).toHaveBeenCalled()
+      expect(spyColor.mock.calls[0][0]).toEqual({
+        color: '#4C54D2',
+        tabId: 1
+      })
+    })
+
+    it('publisher is not verified with tabId, pending notifications', () => {
+      const state: RewardsExtension.State = {
+        notifications: {
+          '1': {
+            id: 'test'
+          }
+        }
+      }
+
+      setBadgeText(state, false, 1)
+
+      expect(spyText).toHaveBeenCalled()
+      expect(spyText.mock.calls[0][0]).toEqual({
+        text: '1',
+        tabId: 1
+      })
+
+      expect(spyColor).toHaveBeenCalled()
+      expect(spyColor.mock.calls[0][0]).toEqual({
+        color: '#FB542B',
+        tabId: 1
+      })
+    })
+  })
+})

components/test/brave_rewards/extension/brave_rewards/background/reducers/rewards_panel_reducer_test.ts

@@ -221,6 +221,49 @@ describe('rewards panel reducer', () => {
 
         expect(state.rewardsPanelData).toEqual(expectedState)
       })
+
+      it('switching between two tabs that has the same url', () => {
+        const initState: Rewards.State = {
+          ...defaultState,
+          walletCreated: true,
+          enabledMain: true,
+          publishers: {
+            id_1: {
+              tabUrl: 'https://clifton.io',
+              publisher_key: 'clifton.io',
+              tabId: 1
+            }
+          }
+        }
+
+        const expectedState: Rewards.State = {
+          ...defaultState,
+          walletCreated: true,
+          enabledMain: true,
+          publishers: {
+            id_1: {
+              tabUrl: 'https://clifton.io',
+              publisher_key: 'clifton.io',
+              tabId: 2
+            }
+          }
+        }
+
+        let state = reducers({ rewardsPanelData: initState }, {
+          type: types.ON_TAB_RETRIEVED,
+          payload: {
+            tab: {
+              url: 'https://clifton.io',
+              incognito: false,
+              active: true,
+              windowId: 1,
+              id: 2
+            }
+          }
+        })
+
+        expect(state.rewardsPanelData).toEqual(expectedState)
+      })
     })
   })