[PS-102] BEEEP: Tab-change performance improvements (#2447)

* Remove passing in main to notification as it's unused

* Remove messages nothing reacts to

* Shorten re-draw of badge and menu on logout

* Remove windows.background and only listen to changes of tabs on focused window

* Only rreact to tab changes of current active tab

* Comments and console-logs

* Removed comments and console.logs

* Updated package-lock.json

* Check if chrome.windows is available

* Simplify check for active tab

package-lock.json

@@ -86,7 +86,7 @@
       }
     },
     "jslib/angular": {
-      "name": "@bitwarden/jslib-common",
+      "name": "@bitwarden/jslib-angular",
       "version": "0.0.0",
       "license": "GPL-3.0",
       "dependencies": {

src/background/main.background.ts

@@ -95,7 +95,6 @@ import NotificationBackground from "./notification.background";
 import RuntimeBackground from "./runtime.background";
 import TabsBackground from "./tabs.background";
 import WebRequestBackground from "./webRequest.background";
-import WindowsBackground from "./windows.background";
 
 export default class MainBackground {
   messagingService: MessagingServiceAbstraction;
@@ -151,7 +150,6 @@ export default class MainBackground {
   private runtimeBackground: RuntimeBackground;
   private tabsBackground: TabsBackground;
   private webRequestBackground: WebRequestBackground;
-  private windowsBackground: WindowsBackground;
 
   private sidebarAction: any;
   private buildingContextMenu: boolean;
@@ -422,7 +420,6 @@ export default class MainBackground {
       this.vaultTimeoutService
     );
     this.notificationBackground = new NotificationBackground(
-      this,
       this.autofillService,
       this.cipherService,
       this.vaultTimeoutService,
@@ -451,7 +448,6 @@ export default class MainBackground {
       this.cipherService,
       this.vaultTimeoutService
     );
-    this.windowsBackground = new WindowsBackground(this);
 
     this.twoFactorService = new TwoFactorService(this.i18nService, this.platformUtilsService);
 
@@ -502,7 +498,6 @@ export default class MainBackground {
     await this.contextMenusBackground.init();
     await this.idleBackground.init();
     await this.webRequestBackground.init();
-    await this.windowsBackground.init();
 
     if (this.platformUtilsService.isFirefox() && !this.isPrivateMode) {
       // Set Private Mode windows to the default icon - they do not share state with the background page
@@ -599,7 +594,7 @@ export default class MainBackground {
     }
 
     await this.setIcon();
-    await this.refreshBadgeAndMenu();
+    await this.refreshBadgeAndMenu(true);
     await this.reseedStorage();
     this.notificationsService.updateConnection(false);
     await this.systemService.clearPendingClipboard();

src/background/notification.background.ts

@@ -13,7 +13,6 @@ import { BrowserApi } from "../browser/browserApi";
 import { AutofillService } from "../services/abstractions/autofill.service";
 import { StateService } from "../services/abstractions/state.service";
 
-import MainBackground from "./main.background";
 import AddChangePasswordQueueMessage from "./models/addChangePasswordQueueMessage";
 import AddLoginQueueMessage from "./models/addLoginQueueMessage";
 import AddLoginRuntimeMessage from "./models/addLoginRuntimeMessage";
@@ -25,7 +24,6 @@ export default class NotificationBackground {
   private notificationQueue: (AddLoginQueueMessage | AddChangePasswordQueueMessage)[] = [];
 
   constructor(
-    private main: MainBackground,
     private autofillService: AutofillService,
     private cipherService: CipherService,
     private vaultTimeoutService: VaultTimeoutService,

src/background/tabs.background.ts

@@ -7,14 +7,24 @@ export default class TabsBackground {
     private notificationBackground: NotificationBackground
   ) {}
 
+  private focusedWindowId: number;
+
   async init() {
-    if (!chrome.tabs) {
+    if (!chrome.tabs || !chrome.windows) {
       return;
     }
 
+    chrome.windows.onFocusChanged.addListener(async (windowId: number) => {
+      if (windowId === null || windowId < 0) {
+        return;
+      }
+
+      this.focusedWindowId = windowId;
+      this.main.messagingService.send("windowChanged");
+    });
+
     chrome.tabs.onActivated.addListener(async (activeInfo: chrome.tabs.TabActiveInfo) => {
       await this.main.refreshBadgeAndMenu();
-      this.main.messagingService.send("tabActivated");
       this.main.messagingService.send("tabChanged");
     });
 
@@ -23,21 +33,29 @@ export default class TabsBackground {
         return;
       }
       this.main.onReplacedRan = true;
+
       await this.notificationBackground.checkNotificationQueue();
       await this.main.refreshBadgeAndMenu();
-      this.main.messagingService.send("tabReplaced");
       this.main.messagingService.send("tabChanged");
     });
 
     chrome.tabs.onUpdated.addListener(
       async (tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab) => {
+        if (this.focusedWindowId > 0 && tab.windowId != this.focusedWindowId) {
+          return;
+        }
+
+        if (!tab.active) {
+          return;
+        }
+
         if (this.main.onUpdatedRan) {
           return;
         }
         this.main.onUpdatedRan = true;
+
         await this.notificationBackground.checkNotificationQueue(tab);
         await this.main.refreshBadgeAndMenu();
-        this.main.messagingService.send("tabUpdated");
         this.main.messagingService.send("tabChanged");
       }
     );

src/background/windows.background.ts

@@ -1,25 +0,0 @@
-import MainBackground from "./main.background";
-
-export default class WindowsBackground {
-  private windows: any;
-
-  constructor(private main: MainBackground) {
-    this.windows = chrome.windows;
-  }
-
-  async init() {
-    if (!this.windows) {
-      return;
-    }
-
-    this.windows.onFocusChanged.addListener(async (windowId: any) => {
-      if (windowId === null || windowId < 0) {
-        return;
-      }
-
-      await this.main.refreshBadgeAndMenu();
-      this.main.messagingService.send("windowFocused");
-      this.main.messagingService.send("windowChanged");
-    });
-  }
-}