main: Don't access tabs by index.

Author: shubham-padia

app/main/menu.ts

@@ -313,8 +313,6 @@ function getWindowSubmenu(
       type: "separator",
     });
     for (const tab of tabs) {
-      // Skip missing elements left by `delete this.tabs[index]` in
-      // ServerManagerView.
       if (tab === undefined) continue;
 
       // Do not add functional tab settings to list of windows in menu bar

app/renderer/js/components/webview.ts

@@ -21,13 +21,12 @@ const shouldSilentWebview = ConfigUtil.getConfigItem("silent", false);
 type WebViewProperties = {
   $root: Element;
   rootWebContents: WebContents;
-  index: number;
   tabId: string;
   url: string;
   role: TabRole;
   isActive: () => boolean;
   switchLoading: (loading: boolean, url: string) => void;
-  onNetworkError: (index: number) => void;
+  onNetworkError: (id: string) => void;
   preload?: string;
   onTitleChange: () => void;
   hasPermission?: (origin: string, permission: string) => boolean;
@@ -278,7 +277,7 @@ export default class WebView {
       if (hasConnectivityError) {
         console.error("error", errorDescription);
         if (!this.properties.url.includes("network.html")) {
-          this.properties.onNetworkError(this.properties.index);
+          this.properties.onNetworkError(this.properties.tabId);
         }
       }
     });

app/renderer/js/main.ts

@@ -382,15 +382,14 @@ export class ServerManagerView {
       webview: WebView.create({
         $root: this.$webviewsContainer,
         rootWebContents,
-        index,
         tabId,
         url: server.url,
         role: "server",
         hasPermission: (origin: string, permission: string) =>
           origin === server.url &&
           permission === "notifications" &&
           ConfigUtil.getConfigItem("showNotification", true),
-        isActive: (): boolean => this.tabs[index] === this.activeTab,
+        isActive: (): boolean => this.getTabById(tabId) === this.activeTab,
         switchLoading: async (loading: boolean, url: string) => {
           if (loading) {
             this.loading.add(url);
@@ -404,8 +403,8 @@ export class ServerManagerView {
               this.loading.has((await activeTab.webview).properties.url),
           );
         },
-        onNetworkError: async (index: number) => {
-          await this.openNetworkTroubleshooting(index);
+        onNetworkError: async (id: string) => {
+          await this.openNetworkTroubleshooting(id);
         },
         onTitleChange: this.updateBadge.bind(this),
         preload: url.pathToFileURL(path.join(bundlePath, "preload.cjs")).href,
@@ -625,8 +624,8 @@ export class ServerManagerView {
     });
   }
 
-  async openNetworkTroubleshooting(index: number): Promise<void> {
-    const tab = this.tabs[index];
+  async openNetworkTroubleshooting(id: string): Promise<void> {
+    const tab = this.getTabById(id);
     if (!(tab instanceof ServerTab)) return;
     const webview = await tab.webview;
     const reconnectUtil = new ReconnectUtil(webview);
@@ -737,7 +736,9 @@ export class ServerManagerView {
 
     const wasActive = tab === this.activeTab;
 
-    delete this.tabs[tab.properties.index]; // eslint-disable-line @typescript-eslint/no-array-delete
+    this.tabs = this.tabs.filter(
+      (tabObject) => tabObject.properties.tabId !== tabId,
+    );
     await tab.destroy();
     this.functionalTabs.delete(page);
 
@@ -1092,9 +1093,9 @@ export class ServerManagerView {
     ipcRenderer.on(
       "update-realm-name",
       (event, serverURL: string, realmName: string) => {
-        for (const [index, domain] of DomainUtil.getDomains().entries()) {
+        for (const domain of DomainUtil.getDomains()) {
           if (domain.url === serverURL) {
-            const tab = this.tabs[index];
+            const tab = this.getTabById(domain.id);
             if (tab instanceof ServerTab) tab.setLabel(realmName);
             domain.alias = realmName;
             DomainUtil.updateDomainById(domain.id, domain);
@@ -1114,10 +1115,10 @@ export class ServerManagerView {
       "update-realm-icon",
       async (event, serverURL: string, iconURL: string) => {
         await Promise.all(
-          DomainUtil.getDomains().map(async (domain, index) => {
+          DomainUtil.getDomains().map(async (domain) => {
             if (domain.url === serverURL) {
               const localIconPath = await DomainUtil.saveServerIcon(iconURL);
-              const tab = this.tabs[index];
+              const tab = this.getTabById(domain.id);
               if (tab instanceof ServerTab)
                 tab.setIcon(DomainUtil.iconAsUrl(localIconPath));
               domain.icon = localIconPath;