tab: Rename tabIndex to tabId.

For `data-tab-id`, we were using tabIndex as a unique numeric
incremental identifier. Having the work index in it was confusing since
we have other index fields which do act like indexes.

Author: shubham-padia

app/renderer/js/components/functional-tab.ts

@@ -43,7 +43,7 @@ export default class FunctionalTab extends Tab {
 
   templateHtml(): Html {
     return html`
-      <div class="tab functional-tab" data-tab-id="${this.properties.tabIndex}">
+      <div class="tab functional-tab" data-tab-id="${this.properties.tabId}">
         <div class="server-tab-badge close-button">
           <i class="material-icons">close</i>
         </div>

app/renderer/js/components/server-tab.ts

@@ -47,7 +47,7 @@ export default class ServerTab extends Tab {
 
   templateHtml(): Html {
     return html`
-      <div class="tab" data-tab-id="${this.properties.tabIndex}">
+      <div class="tab" data-tab-id="${this.properties.tabId}">
         <div class="server-tooltip" style="display:none">
           ${this.properties.label}
         </div>

app/renderer/js/components/tab.ts

@@ -8,7 +8,7 @@ export type TabProperties = {
   $root: Element;
   onClick: () => void;
   index: number;
-  tabIndex: number;
+  tabId: number;
   onHover?: () => void;
   onHoverOut?: () => void;
   materialIcon?: string;

app/renderer/js/components/webview.ts

@@ -22,7 +22,7 @@ type WebViewProperties = {
   $root: Element;
   rootWebContents: WebContents;
   index: number;
-  tabIndex: number;
+  tabId: number;
   url: string;
   role: TabRole;
   isActive: () => boolean;
@@ -48,7 +48,7 @@ export default class WebView {
           <span class="webview-unsupported-dismiss">×</span>
         </div>
         <webview
-          data-tab-id="${properties.tabIndex}"
+          data-tab-id="${properties.tabId}"
           src="${properties.url}"
           ${properties.preload === undefined
             ? html``
@@ -89,7 +89,7 @@ export default class WebView {
     }
 
     const selector = `webview[data-tab-id="${CSS.escape(
-      `${properties.tabIndex}`,
+      `${properties.tabId}`,
     )}"]`;
     const webContentsId: unknown =
       await properties.rootWebContents.executeJavaScript(

app/renderer/js/main.ts

@@ -86,7 +86,7 @@ export class ServerManagerView {
   activeTabIndex: number;
   tabs: ServerOrFunctionalTab[];
   functionalTabs: Map<TabPage, number>;
-  tabIndex: number;
+  tabId: number;
   presetOrgs: string[];
   preferenceView?: PreferenceView;
   constructor() {
@@ -132,7 +132,7 @@ export class ServerManagerView {
     this.tabs = [];
     this.presetOrgs = [];
     this.functionalTabs = new Map();
-    this.tabIndex = 0;
+    this.tabId = 0;
   }
 
   async init(): Promise<void> {
@@ -375,22 +375,22 @@ export class ServerManagerView {
   }
 
   initServer(server: ServerConfig, index: number): ServerTab {
-    const tabIndex = this.getTabIndex();
-    const tab = new ServerTab({
+    const tabId = this.gettabId();
+    const tab: ServerTab = new ServerTab({
       role: "server",
       icon: DomainUtil.iconAsUrl(server.icon),
       label: server.alias,
       $root: this.$tabsContainer,
       onClick: this.activateLastTab.bind(this, index),
       index,
-      tabIndex,
+      tabId,
       onHover: this.onHover.bind(this, index),
       onHoverOut: this.onHoverOut.bind(this, index),
       webview: WebView.create({
         $root: this.$webviewsContainer,
         rootWebContents,
         index,
-        tabIndex,
+        tabId,
         url: server.url,
         role: "server",
         hasPermission: (origin: string, permission: string) =>
@@ -483,9 +483,9 @@ export class ServerManagerView {
     this.toggleDndButton(dnd);
   }
 
-  getTabIndex(): number {
-    const currentIndex = this.tabIndex;
-    this.tabIndex++;
+  gettabId(): number {
+    const currentIndex = this.tabId;
+    this.tabId++;
     return currentIndex;
   }
 
@@ -574,7 +574,7 @@ export class ServerManagerView {
     const index = this.tabs.length;
     this.functionalTabs.set(tabProperties.page, index);
 
-    const tabIndex = this.getTabIndex();
+    const tabId = this.gettabId();
     const $view = await tabProperties.makeView();
     this.$webviewsContainer.append($view);
 
@@ -586,7 +586,7 @@ export class ServerManagerView {
         page: tabProperties.page,
         $root: this.$tabsContainer,
         index,
-        tabIndex,
+        tabId,
         onClick: this.activateTab.bind(this, index),
         onDestroy: async () => {
           await this.destroyFunctionalTab(tabProperties.page, index);
@@ -811,8 +811,8 @@ export class ServerManagerView {
     }
   }
 
-  async isLoggedIn(tabIndex: number): Promise<boolean> {
-    const tab = this.tabs[tabIndex];
+  async isLoggedIn(tabId: number): Promise<boolean> {
+    const tab = this.tabs[tabId];
     if (!(tab instanceof ServerTab)) return false;
     const webview = await tab.webview;
     const url = webview.getWebContents().getURL();
@@ -1116,7 +1116,7 @@ export class ServerManagerView {
             (await tab.webview).webContentsId === webviewId
           ) {
             const concurrentTab: HTMLButtonElement = document.querySelector(
-              `div[data-tab-id="${CSS.escape(`${tab.properties.tabIndex}`)}"]`,
+              `div[data-tab-id="${CSS.escape(`${tab.properties.tabId}`)}"]`,
             )!;
             concurrentTab.click();
           }